/* ==========================================================================
   baxcloud — Paperless-ngx skin · modern retro
   Paperless has no custom-CSS setting, so Caddy injects this file
   (see Caddyfile.baxcloud). In Paperless: Settings → Appearance → Dark,
   and leave "Theme color" empty (this file sets the colours).
   ========================================================================== */

:root,
html[data-bs-theme],
html[data-bs-theme] body,
body {
  --pngx-primary: 201, 100% !important;
  --pngx-primary-lightness: 68% !important;
  --pngx-primary-text-contrast: #111113 !important;
  --pngx-primary-faded: #102a3c !important;
  --pngx-body-color-accent: #a3a3ad !important;
  --pngx-bg-alt: #18181b !important;
  --pngx-bg-alt2: #212125 !important;
  --pngx-bg-darker: #0a0a0b !important;
  --pngx-bg-disabled: #18181b !important;
  --pngx-card-hover-border: #6b6b74 !important;
  --pngx-toast-bg: #18181b !important;
  --pngx-toast-row-bg: #18181b !important;
  --pngx-toast-row-hover-bg: #212125 !important;
  --pngx-toast-success: #4ade80 !important;
  --pngx-toast-success-bg: #0f2a1a !important;
  --pngx-toast-info: #5ec8ff !important;
  --pngx-toast-error: #ff6b6b !important;
  --pngx-toast-error-bg: #3a1416 !important;

  --bs-primary: #5ec8ff !important;
  --bs-primary-rgb: 94, 200, 255 !important;
  --bs-link-color: #5ec8ff !important;
  --bs-link-color-rgb: 94, 200, 255 !important;
  --bs-link-hover-color: #a8ddff !important;
  --bs-link-hover-color-rgb: 168, 221, 255 !important;
  --bs-body-bg: #111113 !important;
  --bs-body-bg-rgb: 17, 17, 19 !important;
  --bs-body-color: #ededef !important;
  --bs-body-color-rgb: 237, 237, 239 !important;
  --bs-secondary-color: #a3a3ad !important;
  --bs-tertiary-color: #82828c !important;
  --bs-secondary-bg: #18181b !important;
  --bs-secondary-bg-rgb: 24, 24, 27 !important;
  --bs-tertiary-bg: #0a0a0b !important;
  --bs-light: #18181b !important;
  --bs-light-rgb: 24, 24, 27 !important;
  --bs-border-color: #2b2b30 !important;
  --bs-border-color-translucent: #2b2b30 !important;
  --bs-success: #4ade80 !important;
  --bs-success-rgb: 74, 222, 128 !important;
  --bs-warning: #facc15 !important;
  --bs-warning-rgb: 250, 204, 21 !important;
  --bs-danger: #ff6b6b !important;
  --bs-danger-rgb: 255, 107, 107 !important;
  --bs-info: #18181b !important;
  --bs-info-rgb: 24, 24, 27 !important;
  --bs-focus-ring-color: #ff7a2e !important;
  --bs-box-shadow: none !important;
  --bs-box-shadow-sm: none !important;
  --bs-border-radius: 0 !important;
  --bs-border-radius-sm: 0 !important;
  --bs-border-radius-lg: 0 !important;
  --bs-border-radius-xl: 0 !important;
  --bs-border-radius-xxl: 0 !important;
  --bs-border-radius-pill: 0 !important;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace !important;
  color-scheme: dark;
}

*, *::before, *::after { border-radius: 0 !important; }
body { background: #0a0a0b !important; font-family: var(--bs-body-font-family) !important; }
h1, h2, h3, h4, h5, .navbar-brand { font-family: var(--bs-font-monospace) !important; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid #ff7a2e !important; outline-offset: 2px; box-shadow: none !important; }
::selection { background: #5ec8ff; color: #111113; }

/* top bar: flat graphite with a hairline, not the brand fill */
.navbar,
.navbar.bg-primary {
  background: #111113 !important;
  border-bottom: 1px solid #2b2b30;
  --bs-navbar-color: #a3a3ad;
  --bs-navbar-hover-color: #ededef;
  --bs-navbar-active-color: #ededef;
  --bs-navbar-brand-color: #ededef;
  --bs-navbar-brand-hover-color: #ededef;
}
.navbar .form-control,
.navbar .search-container input { background: #18181b !important; color: #ededef !important; }

/* Paperless colours everything in the top bar (title, icons, user menu,
   search icon) with --pngx-primary-text-contrast, which is dark here so
   light-blue buttons stay readable. Inside the graphite bar it must be light. */
.navbar {
  --pngx-primary-text-contrast: #ededef !important;
  color: #ededef !important;
}
.navbar a, .navbar .btn, .navbar .nav-link, .navbar .navbar-brand,
.navbar .dropdown-toggle, .navbar span, .navbar i-bs, .navbar .bi {
  color: #ededef !important;
}
.navbar svg, .navbar i-bs svg { fill: currentColor !important; color: #ededef; }
.navbar .btn:hover, .navbar a:hover, .navbar .nav-link:hover { color: #5ec8ff !important; }
.navbar .form-control::placeholder,
.navbar .search-container input::placeholder { color: #82828c !important; opacity: 1; }
.navbar .search-container svg, .navbar .search-container .bi { color: #a3a3ad !important; }
.navbar .form-control:focus,
.navbar .search-container input:focus { border-color: #ff7a2e !important; box-shadow: none !important; }
/* menus that open from the bar: back to dark text on light-blue highlights */
.navbar .dropdown-menu { --pngx-primary-text-contrast: #111113 !important; }
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active { color: #111113 !important; }

/* sidebar */
.sidebar,
nav.sidebar { background: #111113 !important; border-right: 1px solid #2b2b30; }
.sidebar .nav-link { color: #a3a3ad !important; font-family: var(--bs-font-monospace); font-size: 13px; }
.sidebar .nav-link:hover { background: #212125; color: #ededef !important; }
.sidebar .nav-link.active {
  background: #102a3c !important;
  color: #a8ddff !important;
  box-shadow: inset 2px 0 0 #5ec8ff;
}
.sidebar-heading, .sidebar .text-muted {
  font-family: var(--bs-font-monospace);
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a3a3ad !important;
}

/* cards, document tiles, dropdowns */
.card,
.dropdown-menu,
.modal-content,
.list-group-item {
  background-color: #18181b !important;
  border-color: #2b2b30 !important;
  box-shadow: none !important;
}
.card:hover { border-color: #6b6b74 !important; }
.dropdown-menu, .modal-content { box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important; }
.modal-backdrop.show { opacity: .7; }
.card-header, .card-footer { background: transparent !important; border-color: #2b2b30 !important; }

/* buttons */
.btn { font-family: var(--bs-font-monospace); font-weight: 500; letter-spacing: .02em; }
.btn-primary {
  --bs-btn-bg: #5ec8ff;
  --bs-btn-border-color: #5ec8ff;
  --bs-btn-color: #111113;
  --bs-btn-hover-bg: #a8ddff;
  --bs-btn-hover-border-color: #a8ddff;
  --bs-btn-hover-color: #111113;
  --bs-btn-active-bg: #2fa9ec;
  --bs-btn-active-border-color: #2fa9ec;
  --bs-btn-active-color: #111113;
  --bs-btn-disabled-bg: #5ec8ff;
  --bs-btn-disabled-border-color: #5ec8ff;
}
.btn-outline-primary {
  --bs-btn-color: #5ec8ff;
  --bs-btn-border-color: #5ec8ff;
  --bs-btn-hover-bg: #102a3c;
  --bs-btn-hover-color: #a8ddff;
  --bs-btn-hover-border-color: #5ec8ff;
  --bs-btn-active-bg: #102a3c;
  --bs-btn-active-color: #a8ddff;
}
.btn-outline-secondary, .btn-secondary, .btn-light {
  --bs-btn-color: #ededef;
  --bs-btn-bg: #212125;
  --bs-btn-border-color: #2b2b30;
  --bs-btn-hover-bg: #2b2b30;
  --bs-btn-hover-color: #ededef;
  --bs-btn-hover-border-color: #6b6b74;
  --bs-btn-active-bg: #2b2b30;
  --bs-btn-active-color: #ededef;
}

/* inputs */
.form-control, .form-select, .input-group-text, .ng-select .ng-select-container {
  background-color: #111113 !important;
  border-color: #6b6b74 !important;
  color: #ededef !important;
  font-family: var(--bs-font-monospace);
  caret-color: #ff7a2e;
}
.form-control::placeholder { color: #82828c !important; }
.form-control:focus, .form-select:focus { box-shadow: none !important; outline: 2px solid #ff7a2e; outline-offset: 2px; }
.form-check-input:checked { background-color: #5ec8ff !important; border-color: #5ec8ff !important; }

/* tables */
.table { --bs-table-bg: #18181b; --bs-table-color: #ededef; --bs-table-border-color: #2b2b30; --bs-table-hover-bg: #212125; }
.table thead th {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a3a3ad;
}

/* tags keep their own colours but go square and mono */
.badge { font-family: var(--bs-font-monospace); font-weight: 500; letter-spacing: .06em; }

/* login page */
body.login, .login-container, form.form-accounts { background: #0a0a0b !important; }