/* =========================================================================
   Caprilytics Archiv — Brand-Pass für Paperless-ngx
   -------------------------------------------------------------------------
   Ziel    : Paperless-ngx (qpaper.caprilytics.com) optisch an den Botster-
             Styleguide angleichen — Produktlinie "Archiv" (Schiefer-Akzent).
   Quelle  : docs/09-web/botster/botster-mockup-schiefer-v2.html
             (.theme[data-product="archiv"] — Schiefer #7A95AB)
   Ziel-App: Paperless-ngx 2.20.15  (Bootstrap 5.3, [data-bs-theme=…])
   Wirkung : Akzent (Schiefer), warme Hintergründe, Inter/Cairo/JetBrains
             Mono, bewusst kantige Ecken (Brandguide v2.4 §8). KEIN Glass-/
             Blur-Look — das trägt auf einer dichten DMS nicht.
   Einbau  : per Reverse-Proxy als <link> vor </head> injizieren (Caddy
             replace-response) — siehe Runbook. NICHT die Angular-Bundles
             überschreiben (werden bei jedem Upgrade ersetzt).
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* -------------------------------------------------------------------------
   1) GLOBAL — Schrift, Radien, Akzent (themeunabhängig)
   ------------------------------------------------------------------------- */
:root,
body {
  /* Schriftfamilien (Bootstrap-Tokens) */
  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Bewusst kantig — Brandguide v2.4 §8 (Paperless-Default: 6px). */
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 8px;
  --bs-border-radius-xxl: 10px;
  /* Pills bleiben Pills (Badges/Tags) — wie im Mockup. */
  --bs-border-radius-pill: 50rem;

  /* Akzent = Schiefer #7A95AB ≈ hsl(207, 23%, 58%).
     Paperless leitet --bs-primary aus diesem H,S-Paar + Lightness ab. */
  --pngx-primary: 207, 23%;
  --pngx-primary-lightness: 58%;
}

/* Headings + Brand in Cairo (Display-Schrift des Styleguides). */
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body .navbar-brand {
  font-family: "Cairo", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Monospace-Flächen (Datumsfelder, IDs, Code) — JetBrains Mono. */
body code, body kbd, body pre, body samp, body .font-monospace {
  font-family: var(--bs-font-monospace);
}

/* -------------------------------------------------------------------------
   2) LIGHT THEME — warmes Papier  (#F4F1EA / Ink #1A1815)
   ------------------------------------------------------------------------- */
[data-bs-theme="light"] body,
[data-bs-theme="light"] {
  --bs-body-bg: #f4f1ea;          /* Paper */
  --bs-body-color: #1a1815;        /* Ink */
  --bs-secondary-color: #3a342b;
  --bs-tertiary-color: #7c6e5a;
  --bs-border-color: #e1d9c9;      /* warme Haarlinie ≈ rgba(26,24,21,.12) */
  --bs-tertiary-bg: #f1ece0;

  --pngx-bg-alt: #fbf9f4;          /* Karten / "weiße" Flächen → off-white */
  --pngx-bg-alt2: #f1ece0;
  --pngx-bg-darker: #ece5d4;       /* abgesetzte Leisten */
  --pngx-bg-disabled: #ece5d4;
  --pngx-body-color-accent: #3a342b;
}

/* -------------------------------------------------------------------------
   3) DARK THEME — warmes Gestein  (#1A1815 / Bone #EDE9E0)
   "Archiv = warmes Dunkel mit kühlem Schiefer-Riss".
   ------------------------------------------------------------------------- */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] {
  --bs-body-bg: #1a1815;
  --bs-body-color: #ede9e0;
  --bs-secondary-color: rgba(244, 241, 234, 0.66);
  --bs-tertiary-color: rgba(244, 241, 234, 0.54);
  --bs-border-color: rgba(244, 241, 234, 0.12);
  --bs-tertiary-bg: #221f1b;

  --pngx-bg-alt: #221f1b;          /* Layer 1 */
  --pngx-bg-alt2: #2a2620;         /* Layer 2 */
  --pngx-bg-darker: #161412;       /* tiefste Leiste */
  --pngx-bg-disabled: #2a2620;
  --pngx-body-color-accent: #c9c3b6;
}

/* AUTO-Theme folgt der Systemeinstellung → beide Varianten spiegeln. */
@media (prefers-color-scheme: dark) {
  [data-bs-theme="auto"] body,
  [data-bs-theme="auto"] {
    --bs-body-bg: #1a1815;
    --bs-body-color: #ede9e0;
    --bs-secondary-color: rgba(244, 241, 234, 0.66);
    --bs-tertiary-color: rgba(244, 241, 234, 0.54);
    --bs-border-color: rgba(244, 241, 234, 0.12);
    --bs-tertiary-bg: #221f1b;
    --pngx-bg-alt: #221f1b;
    --pngx-bg-alt2: #2a2620;
    --pngx-bg-darker: #161412;
    --pngx-bg-disabled: #2a2620;
    --pngx-body-color-accent: #c9c3b6;
  }
}
@media (prefers-color-scheme: light) {
  [data-bs-theme="auto"] body,
  [data-bs-theme="auto"] {
    --bs-body-bg: #f4f1ea;
    --bs-body-color: #1a1815;
    --bs-secondary-color: #3a342b;
    --bs-tertiary-color: #7c6e5a;
    --bs-border-color: #e1d9c9;
    --bs-tertiary-bg: #f1ece0;
    --pngx-bg-alt: #fbf9f4;
    --pngx-bg-alt2: #f1ece0;
    --pngx-bg-darker: #ece5d4;
    --pngx-bg-disabled: #ece5d4;
    --pngx-body-color-accent: #3a342b;
  }
}

/* -------------------------------------------------------------------------
   4) TOP-NAVBAR — warmer Dunkelbalken statt Akzent-Bar
   Paperless rendert .navbar.bg-primary aus dem Akzent bei Lightness 21 %
   (= dunkles, entsättigtes Schiefer). Wir setzen ihn auf den warmen Header-
   Ton des Mockups (rgba(13,12,10,.92)) mit Schiefer-Hairline unten.
   ------------------------------------------------------------------------- */
body .navbar.bg-primary {
  background-color: #14120f !important;
  border-bottom: 1px solid rgba(122, 149, 171, 0.30);
}
body .navbar.bg-primary .navbar-brand,
body .navbar.bg-primary .nav-link {
  color: #f4f1ea !important;
}

/* -------------------------------------------------------------------------
   5) FEINSCHLIFF — Akzent-Konsistenz auf interaktiven Flächen
   ------------------------------------------------------------------------- */
/* Fokus-Ring in Schiefer statt Bootstrap-Blau. */
body .form-control:focus,
body .form-select:focus,
body .btn:focus-visible {
  border-color: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  box-shadow: 0 0 0 0.2rem rgba(122, 149, 171, 0.30);
}

/* Aktive Sidebar-/Nav-Einträge in Schiefer. */
body .list-group-item.active,
body .nav-pills .nav-link.active {
  background-color: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  border-color: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
}

/* Tabellen: ruhige warme Hairlines statt kräftiger Linien. */
[data-bs-theme="light"] body .table {
  --bs-table-border-color: #e1d9c9;
}
[data-bs-theme="dark"] body .table {
  --bs-table-border-color: rgba(244, 241, 234, 0.12);
}