/* ==========================================================================
   Paperless-ngx — Oberfläche für Syswes
   Farbräume nach dem Vorbild von apple.com. Übernommen aus dem Theme von
   docs.kkdevelopment.de — identisch bis auf das Logo.
   Schrift Aptos.

   Zielversion: Paperless-ngx v3.0.5 (Bootstrap 5, --bs-* und --pngx-* Tokens).
   Einbindung:  nginx sub_filter injiziert <link> vor </head>.

   ---------------------------------------------------------------------------
   Fassung 6 (2026-08-09) — Farbräume nach Apple
   ---------------------------------------------------------------------------
   Apples System besteht aus wenigen, weit auseinanderliegenden Werten. Zwei
   Flächen, zwei Textstufen — mehr nicht:

       Weiß #FFFFFF          Fläche (Karten, Sidebar, Felder)
       Grau  #F5F5F7         Seite — der Ton, auf dem Weiß erst wirkt
       Text  #1D1D1F         Primärtext, 16,8:1
       Text  #6E6E73         Sekundärtext, 5,1:1
       Linie #D2D2D7         Trennung, sparsam
     dunkel:
       Schwarz #000000       Seite
       #1D1D1F               Fläche
       #F5F5F7 / #86868B     Text primär / sekundär
       #424245               Linie

   Drei Dinge, die daraus folgen und die die Fassungen davor anders gemacht
   haben:

   1. **Getrennt wird über den Flächenton, nicht über Linien.** Weiße Karte auf
      grauer Seite. Linien nur, wo der Tonunterschied allein zu wenig trägt —
      und dann fein (#D2D2D7), nicht als tragendes Element.

   2. **Zwei Textstufen, kein Grauverlauf.** Alles Wichtige steht in #1D1D1F,
      alles Begleitende in #6E6E73. Dazwischen nichts. Das erzeugt die Ruhe.

   3. **Runde Ecken sind zurück.** Die Regel „keine Radien" stammte aus der
      Designsprache 1A „Signal", die es hier nicht mehr gibt. Apples Aufbau
      lebt von weichen Ecken und Weißraum statt von harten Kanten.

   Marke ist Syswes: das Logo ist einfarbig, deshalb steht es überall als
   CSS-Maske — eine Datei trägt hell wie dunkel. Der Akzent #C0281B stammt
   aus dem Klebekerlchen-Logo und wurde auf Wunsch unverändert übernommen.

   Aufbau
     1  Schriften          2  Ebenen hell        3  Ebenen dunkel
     4  Form und Tiefe     5  Typografie         6  Navbar
     7  Sidebar            8  Buttons            9  Links
    10  Formulare         11  Karten            12  Tabellen
    13  Badges            14  Schwebende Ebenen 15  Fokus
    16  Anmeldeseite      17  Logo              18  Druck
   ========================================================================== */

/* -- 1  Schriften ---------------------------------------------------------- */
/* **Aptos wird NICHT ausgeliefert.** Sie gehört Microsoft und wird mit
   Microsoft 365, Office und Windows 11 installiert; eine Lizenz zum Einbetten
   als Webfont liegt nicht vor, und bei Google Fonts gibt es sie nicht.
   Auf Rechnern mit Office erscheint Aptos, überall sonst greift die Kette. */


/* -- 2  Ebenen hell -------------------------------------------------------- */

:root {
  /* Marke — fest, aus dem offiziellen App-Icon gemessen */
  --sw-brand-yellow: #F0B323;
  --sw-brand-red:    #EE3124;

  --sw-ink:      #1D1D1F;   /* dunkle Chromflächen: Navbar, Toast */
  --sw-on-ink:   #F5F5F7;

  /* Ebenen — hell */
  --sw-page:        #F5F5F7;  /* Seite */
  --sw-surface:     #FFFFFF;  /* Karten, Sidebar, Felder */
  --sw-fill:        #EBEBED;  /* Hover, aktive Zeile */
  --sw-line:        #D2D2D7;  /* Trennung — 1,51:1 auf Weiß */
  --sw-line-strong: #C7C7CC;
  --sw-text:        #1D1D1F;  /* 16,8:1 */
  --sw-muted:       #424245;  /* 11,6:1 — Navigation */
  --sw-faint:       #6E6E73;  /* 5,1:1 — Sekundärtext, Labels */

  /* Handlung und Akzent */
  --sw-primary:       #1D1D1F;
  --sw-primary-hover: #000000;
  --sw-primary-faded: #EBEBED;
  --sw-on-primary:    #FFFFFF;
  --sw-accent:        #C0281B;  /* Markenrot, abgedunkelt — 5,9:1 auf Weiß */

  --sw-sans: 'Aptos', 'Segoe UI Variable Text', 'Segoe UI', system-ui,
             -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sw-mono: 'Aptos Mono', 'Cascadia Mono', Consolas, ui-monospace,
             'SF Mono', Menlo, monospace;

  /* Tiefe: keine harten Versätze mehr, sondern weiche, sehr flache Schatten. */
  --sw-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03);
  --sw-shadow-2: 0 4px 16px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);

  /* Paperless leitet seine Rampe aus einem HSL-Tripel ab.
     #1D1D1F = hsl(240, 3%, 12%). */
  --pngx-primary: 240, 3%;
  --pngx-primary-lightness: 12%;
  --pngx-primary-text-contrast: var(--sw-on-primary);
  --pngx-primary-faded: var(--sw-primary-faded);

  --bs-primary: var(--sw-primary);
  --bs-primary-rgb: 29, 29, 31;

  --bs-body-bg: var(--sw-page);
  --bs-body-bg-rgb: 245, 245, 247;
  --bs-body-color: var(--sw-text);
  --bs-body-color-rgb: 29, 29, 31;
  --bs-secondary-color: var(--sw-faint);
  --bs-light: var(--sw-surface);
  --bs-light-rgb: 255, 255, 255;
  --bs-border-color: var(--sw-line);
  --bs-border-color-translucent: var(--sw-line);
  --bs-tertiary-bg: var(--sw-fill);
  --bs-emphasis-color: var(--sw-text);

  --pngx-bg-alt: var(--sw-surface);
  --pngx-bg-alt2: var(--sw-fill);
  --pngx-bg-darker: #F5F5F7;
  --pngx-bg-disabled: var(--sw-fill);
  --pngx-body-color-accent: var(--sw-muted);
  --pngx-focus-alpha: 1;

  --bs-info: var(--sw-fill);
  --bs-info-rgb: 235, 235, 237;
  --bs-danger: var(--sw-accent);
  --bs-danger-rgb: 192, 40, 27;
  --bs-success: #1B7F3B;
  --bs-warning: #8A5B0F;

  /* Form — Apples Aufbau lebt von weichen Ecken. */
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 14px;
  --bs-border-radius-xxl: 18px;
  --bs-border-radius-2xl: 18px;
  --bs-border-radius-pill: 980px;
}

body {
  --pngx-primary-text-contrast: var(--sw-on-primary) !important;
  background-color: var(--sw-page);
}


/* -- 3  Ebenen dunkel ------------------------------------------------------ */
/* Apples Dunkelmodus setzt die Seite auf reines Schwarz und hebt die Flächen
   darüber an — nicht umgekehrt. */

[data-bs-theme='dark'],
[data-bs-theme='dark'] body,
[data-bs-theme='dark'] body:not(.primary-light):not(.primary-dark) {
  --sw-page:        #000000;
  --sw-surface:     #1D1D1F;  /* 1,25:1 gegen die Seite */
  --sw-fill:        #2C2C2E;
  --sw-line:        #424245;  /* 1,68:1 gegen die Fläche */
  --sw-line-strong: #545457;
  --sw-text:        #F5F5F7;  /* 15,5:1 */
  --sw-muted:       #C7C7CC;
  --sw-faint:       #86868B;  /* 4,7:1 */

  --sw-primary:       #F5F5F7;
  --sw-primary-hover: #FFFFFF;
  --sw-primary-faded: #2C2C2E;
  --sw-on-primary:    #1D1D1F;
  --sw-accent:        #FF6B5E;  /* 6,0:1 */

  --sw-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sw-shadow-2: 0 4px 20px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4);

  --pngx-primary: 240, 9%;
  --pngx-primary-lightness: 96%;
  --pngx-primary-text-contrast: var(--sw-on-primary);
  --pngx-primary-faded: var(--sw-primary-faded);

  --bs-primary: var(--sw-primary);
  --bs-primary-rgb: 245, 245, 247;

  --bs-body-bg: var(--sw-page);
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: var(--sw-text);
  --bs-body-color-rgb: 245, 245, 247;
  --bs-secondary-color: var(--sw-faint);
  --bs-light: var(--sw-surface);
  --bs-light-rgb: 29, 29, 31;
  --bs-border-color: var(--sw-line);
  --bs-border-color-translucent: var(--sw-line);
  --bs-tertiary-bg: var(--sw-fill);
  --bs-emphasis-color: #FFFFFF;

  --pngx-bg-alt: var(--sw-surface);
  --pngx-bg-alt2: var(--sw-fill);
  --pngx-bg-darker: #000000;
  --pngx-bg-disabled: var(--sw-fill);
  --pngx-body-color-accent: var(--sw-muted);

  --bs-info: var(--sw-fill);
  --bs-info-rgb: 44, 44, 46;
  --bs-danger: var(--sw-accent);
  --bs-danger-rgb: 255, 107, 94;
  --bs-success: #4CD07D;
  --bs-warning: #E0A63F;
}

@media (prefers-color-scheme: dark) {
  [data-bs-theme='auto'],
  [data-bs-theme='auto'] body,
  [data-bs-theme='auto'] body:not(.primary-light):not(.primary-dark) {
    --sw-page:        #000000;
    --sw-surface:     #1D1D1F;
    --sw-fill:        #2C2C2E;
    --sw-line:        #424245;
    --sw-line-strong: #545457;
    --sw-text:        #F5F5F7;
    --sw-muted:       #C7C7CC;
    --sw-faint:       #86868B;

    --sw-primary:       #F5F5F7;
    --sw-primary-hover: #FFFFFF;
    --sw-primary-faded: #2C2C2E;
    --sw-on-primary:    #1D1D1F;
    --sw-accent:        #FF6B5E;

    --sw-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sw-shadow-2: 0 4px 20px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4);

    --pngx-primary: 240, 9%;
    --pngx-primary-lightness: 96%;
    --pngx-primary-text-contrast: var(--sw-on-primary);
    --pngx-primary-faded: var(--sw-primary-faded);

    --bs-primary: var(--sw-primary);
    --bs-primary-rgb: 245, 245, 247;

    --bs-body-bg: var(--sw-page);
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: var(--sw-text);
    --bs-body-color-rgb: 245, 245, 247;
    --bs-secondary-color: var(--sw-faint);
    --bs-light: var(--sw-surface);
    --bs-light-rgb: 29, 29, 31;
    --bs-border-color: var(--sw-line);
    --bs-border-color-translucent: var(--sw-line);
    --bs-tertiary-bg: var(--sw-fill);
    --bs-emphasis-color: #FFFFFF;

    --pngx-bg-alt: var(--sw-surface);
    --pngx-bg-alt2: var(--sw-fill);
    --pngx-bg-darker: #000000;
    --pngx-bg-disabled: var(--sw-fill);
    --pngx-body-color-accent: var(--sw-muted);

    --bs-info: var(--sw-fill);
    --bs-info-rgb: 44, 44, 46;
    --bs-danger: var(--sw-accent);
    --bs-danger-rgb: 255, 107, 94;
    --bs-success: #4CD07D;
    --bs-warning: #E0A63F;
  }
}

/* Paperless erzwingt in Dunkel seinen Original-Grünton für die Navbar. */
[data-bs-theme='dark'] body:not(.primary-light):not(.primary-dark) .navbar.bg-primary,
[data-bs-theme='auto'] body:not(.primary-light):not(.primary-dark) .navbar.bg-primary {
  --pngx-primary: 240, 3%;
  --pngx-primary-lightness: 12%;
}


/* -- 4  Form und Tiefe ----------------------------------------------------- */
/* Paperless animiert jede Farbe global (`* { transition: … 0.3s }`). */
* {
  transition-duration: 0.15s !important;
}

hr,
.dropdown-divider {
  border-color: var(--sw-line);
  opacity: 1;
}

/* Bootstraps eigene Schattenklassen auf die flachen Werte ziehen. */
.shadow-sm { box-shadow: var(--sw-shadow-1) !important; }
.shadow    { box-shadow: var(--sw-shadow-2) !important; }
.shadow-lg { box-shadow: var(--sw-shadow-2) !important; }


/* -- 5  Typografie --------------------------------------------------------- */
/* Zwei Stufen, mehr nicht: alles Wichtige in --sw-text, alles Begleitende in
   --sw-faint. Die versal gesperrten Mono-Labels der Vorfassungen sind weg —
   sie stammten aus der Designsprache „Signal" und stehen quer zu diesem
   Aufbau, der seine Ordnung aus Farbe und Gewicht zieht, nicht aus Form. */

body {
  font-family: var(--sw-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.modal-title,
.card-title {
  font-family: var(--sw-sans);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--sw-text);
}

h1, .h1 { font-size: 2rem;    letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.5rem;  letter-spacing: -0.017em; }
h3, .h3 { font-size: 1.3rem;  letter-spacing: -0.015em; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

pngx-page-header h3 {
  font-weight: 600;
  letter-spacing: -0.017em;
}

.font-monospace,
code, pre, kbd, samp {
  font-family: var(--sw-mono) !important;
}

code {
  font-size: 0.85em;
  color: var(--sw-muted);
  background: var(--sw-fill);
  padding: 0.1em 0.35em;
  border-radius: 5px;
}

.text-muted,
.text-secondary,
.byline {
  color: var(--sw-faint) !important;
}

/* Labels und Spaltenköpfe: normale Schrift, Sekundärfarbe. Keine Versalien,
   keine Sperrung — die Hierarchie macht die Farbe. */
.form-label,
.sidebar-heading,
.byline {
  font-family: var(--sw-sans) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: var(--sw-faint) !important;
}

.form-label {
  margin-bottom: 0.35rem;
}


/* -- 6  Navbar ------------------------------------------------------------- */
/* #1D1D1F — Apples dunkler Ton, und zugleich der beste Grund für das farbige
   Logo: Markengelb steht dort bei 9,0:1. */

.navbar.bg-primary,
.navbar.fixed-top {
  background-color: var(--sw-ink) !important;
  border-bottom: none;
  box-shadow: none !important;
}

.navbar {
  --pngx-primary-text-contrast: var(--sw-on-ink);
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .dropdown > .btn,
.navbar .btn,
.navbar .nav-link {
  color: var(--sw-on-ink) !important;
}

.navbar .navbar-brand .byline {
  color: #86868B !important;
}

.navbar-toggler {
  border: 0 !important;
}

/* Suchfeld: Apples Muster — leicht aufgehellte Fläche ohne Rahmen. */
.navbar .search-container input,
.navbar .search-container .form-control,
.navbar .search-container .input-group-text {
  background-color: #2C2C2E !important;
  border: 1px solid transparent !important;
  color: var(--sw-on-ink) !important;
  border-radius: 8px !important;
}

.navbar .search-container input:focus {
  background-color: #333336 !important;
  border-color: #545457 !important;
}

.navbar .search-container input::placeholder {
  color: #86868B !important;
  opacity: 1;
}

.navbar .search-container i-bs {
  color: #86868B !important;
}

.navbar .dropdown-menu {
  --pngx-primary-text-contrast: var(--sw-on-primary);
}


/* -- 7  Sidebar ------------------------------------------------------------ */
/* Weiße Fläche, feine Trennlinie. Der gewählte Eintrag ist eine gefüllte
   Kachel mit weicher Ecke — Apples Muster für Seitenleisten. */

.sidebar {
  background-color: var(--sw-surface) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--sw-line) !important;
}

.sidebar-heading {
  padding-top: 1.25rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0;
}

.sidebar .nav-link {
  color: var(--sw-muted);
  font-weight: 400;
  border-radius: 7px;
  margin: 1px 0.5rem;
  padding: 0.35rem 0.6rem;
}

.sidebar .nav-link:hover {
  background-color: var(--sw-fill);
  color: var(--sw-text);
}

.sidebar .nav-link.active {
  background-color: var(--sw-fill);
  color: var(--sw-text);
  font-weight: 600;
}

.sidebar .nav-item.touranchor--is-active a {
  color: var(--sw-text) !important;
}

.sidebar .badge.bg-info {
  background-color: transparent !important;
  color: var(--sw-faint) !important;
  font-weight: 400;
  padding: 0;
}

.sidebar .nav-link.active .badge.bg-info {
  color: var(--sw-muted) !important;
}

.sidebar-slim-toggler {
  border: 1px solid var(--sw-line) !important;
}


/* -- 8  Buttons ------------------------------------------------------------ */

.btn {
  font-family: var(--sw-sans);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 7px;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--sw-primary) !important;
  border-color: var(--sw-primary) !important;
  color: var(--sw-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.dropdown.show > .btn-primary {
  background-color: var(--sw-primary-hover) !important;
  border-color: var(--sw-primary-hover) !important;
  color: var(--sw-on-primary) !important;
}

.btn-outline-primary {
  border-color: var(--sw-line) !important;
  color: var(--sw-text) !important;
  background-color: var(--sw-surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--sw-primary) !important;
  border-color: var(--sw-primary) !important;
  color: var(--sw-on-primary) !important;
}

.btn-outline-secondary {
  border-color: var(--sw-line) !important;
  color: var(--sw-text) !important;
  background-color: var(--sw-surface);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background-color: var(--sw-fill) !important;
  border-color: var(--sw-line) !important;
  color: var(--sw-text) !important;
}

.btn-secondary {
  --bs-btn-bg: var(--sw-muted);
  --bs-btn-border-color: var(--sw-muted);
  --bs-btn-hover-bg: var(--sw-text);
  --bs-btn-hover-border-color: var(--sw-text);
  --bs-btn-color: var(--sw-surface);
  --bs-btn-hover-color: var(--sw-surface);
}

.btn-dark {
  --bs-btn-color: var(--sw-text);
  --bs-btn-bg: var(--sw-fill);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--sw-line);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--sw-text);
  --bs-btn-active-bg: var(--sw-line);
}

.btn-light {
  --bs-btn-bg: var(--sw-surface);
  --bs-btn-border-color: var(--sw-line);
  --bs-btn-color: var(--sw-text);
  --bs-btn-hover-bg: var(--sw-fill);
  --bs-btn-hover-border-color: var(--sw-line);
  --bs-btn-hover-color: var(--sw-text);
}

/* Löschen ist die einzige gefüllte Farbfläche der Oberfläche. */
.btn-danger {
  --bs-btn-bg: var(--sw-accent);
  --bs-btn-border-color: var(--sw-accent);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #A32117;
  --bs-btn-hover-border-color: #A32117;
  --bs-btn-hover-color: #FFFFFF;
}

[data-bs-theme='dark'] .btn-danger {
  --bs-btn-color: #1D1D1F;
  --bs-btn-hover-color: #1D1D1F;
  --bs-btn-hover-bg: #FF8B80;
  --bs-btn-hover-border-color: #FF8B80;
}

.btn-group-xs > .btn {
  font-size: 0.72rem;
  border-radius: 5px;
}


/* -- 9  Links -------------------------------------------------------------- */
/* Apple setzt Links farbig ab. Hier ist die Markenfarbe Rot — flächig
   verwendet läse sich das als Warnung, deshalb der umgekehrte Weg: Links
   tragen die Textfarbe und färben sich beim Überfahren. */

a,
.btn-link {
  color: var(--sw-text);
  text-decoration-color: var(--sw-line-strong);
  text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible,
.btn-link:hover,
.btn-link:active,
.btn-link:focus-visible,
a.btn-link:hover,
a.btn-link:active,
a.btn-link:focus-visible {
  color: var(--sw-accent) !important;
  text-decoration-color: var(--sw-accent);
}

.text-primary {
  color: var(--sw-text) !important;
}


/* -- 10  Formulare, ng-select ---------------------------------------------- */

.form-control:not(.btn),
input, select, textarea,
.form-select:not(.is-invalid):not(:disabled),
.input-group-text,
.ng-select .ng-select-container,
.ng-select.ng-select-opened > .ng-select-container,
.ng-dropdown-panel,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  background-color: var(--sw-surface) !important;
  color: var(--sw-text) !important;
  border-color: var(--sw-line) !important;
  font-family: var(--sw-sans);
}

.form-control,
.form-select,
.ng-select .ng-select-container {
  border-radius: 7px !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: var(--sw-surface) !important;
  border-color: var(--sw-line-strong) !important;
}

.form-control::placeholder {
  color: var(--sw-faint);
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--sw-fill) !important;
  color: var(--sw-faint) !important;
}

.form-check-input {
  border-color: var(--sw-line-strong) !important;
}

.form-check-input:checked,
.form-switch .form-check-input:checked {
  background-color: var(--sw-primary) !important;
  border-color: var(--sw-primary) !important;
}

.ng-dropdown-panel {
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.paperless-input-select .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
  background-color: var(--sw-fill) !important;
  color: var(--sw-text) !important;
}

.paperless-input-select .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.paperless-input-select .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
  background-color: var(--sw-fill) !important;
  font-weight: 600;
}

.ng-select .ng-select-container .ng-value-container .ng-placeholder {
  color: var(--sw-faint) !important;
}

.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
  background-color: var(--sw-fill) !important;
  color: var(--sw-text) !important;
  border: none;
  border-radius: 5px;
}


/* -- 11  Karten, Dokumentkacheln ------------------------------------------- */
/* Weiße Karte auf grauer Seite — der Tonunterschied trägt, die Linie hilft
   nur nach. */

.card {
  background-color: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--sw-line) !important;
  font-weight: 600;
}

.card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--sw-line) !important;
}

.document-card .card-body.bg-light,
.card-body.bg-light {
  background-color: transparent !important;
}

.card-selected {
  border-color: var(--sw-accent) !important;
  box-shadow: 0 0 0 1px var(--sw-accent) !important;
}

.card-selected .doc-img-container {
  background-color: var(--sw-primary-faded);
}

.doc-img {
  border-color: var(--sw-line) !important;
}

.document-card,
.document-card .doc-img-container {
  overflow: hidden;
}

.document-card .card-title,
pngx-document-card-large .card-title,
pngx-document-card-small .card-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* -- 12  Tabellen, Paginierung --------------------------------------------- */

table.table {
  --bs-table-color: var(--sw-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sw-line);
  border-color: var(--sw-line);
}

.table > thead th {
  font-family: var(--sw-sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--sw-faint);
  border-bottom: 1px solid var(--sw-line) !important;
}

.table > tbody > tr > td {
  border-color: var(--sw-line);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--sw-fill);
  color: var(--sw-text);
}

.table-row-selected > td {
  background-color: var(--sw-primary-faded) !important;
  color: var(--sw-text) !important;
}

.asc, .des,
table.table .asc, table.table .des {
  background-color: transparent !important;
}

.page-link {
  color: var(--sw-text);
  background-color: var(--sw-surface);
  border-color: var(--sw-line) !important;
}

.page-link:hover,
.page-link:focus {
  background-color: var(--sw-fill) !important;
  color: var(--sw-text) !important;
}

.page-item.active .page-link {
  background-color: var(--sw-primary);
  border-color: var(--sw-primary) !important;
  color: var(--sw-on-primary);
}

.page-item.disabled .page-link {
  background-color: transparent;
  color: var(--sw-faint);
}


/* -- 13  Badges, Tags ------------------------------------------------------ */

.badge {
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 6px;
}

.badge.bg-primary {
  background-color: var(--sw-primary) !important;
  color: var(--sw-on-primary) !important;
}

.badge.bg-info,
.badge.bg-light {
  background-color: var(--sw-fill) !important;
  color: var(--sw-muted) !important;
  border-color: transparent !important;
}

.badge.bg-secondary {
  background-color: var(--sw-muted) !important;
  color: var(--sw-surface) !important;
}


/* -- 14  Schwebende Ebenen, Meldungen, Reiter ------------------------------ */

.dropdown-menu,
.popover,
.modal-content {
  background-color: var(--sw-surface);
  border: 1px solid var(--sw-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--sw-shadow-2) !important;
}

.dropdown-menu {
  padding: 6px;
}

.dropdown-item {
  color: var(--sw-text);
  border-radius: 6px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--sw-fill);
  color: var(--sw-text);
}

.dropdown-item.active {
  background-color: var(--sw-primary);
  color: var(--sw-on-primary);
}

.modal-header,
.modal-body,
.modal-footer {
  background-color: var(--sw-surface) !important;
  border-color: var(--sw-line) !important;
}

.modal-header {
  border-bottom: 1px solid var(--sw-line) !important;
}

.modal-footer {
  border-top: 1px solid var(--sw-line) !important;
}

.modal-title {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.popover .popover-header,
.popover .popover-body {
  background-color: var(--sw-surface) !important;
  border-color: var(--sw-line) !important;
  color: var(--sw-text) !important;
}

.popover .popover-header {
  border-bottom: 1px solid var(--sw-line) !important;
  font-weight: 600;
}

.toast {
  background-color: var(--sw-ink) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--sw-on-ink) !important;
  box-shadow: var(--sw-shadow-2) !important;
}

.toast .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.toast .toast-header {
  background-color: transparent !important;
  color: var(--sw-on-ink) !important;
  border-bottom: 1px solid #424245 !important;
  font-weight: 600;
}

.toast .btn,
.toast a {
  color: #FF6B5E !important;
}

.alert {
  border: 1px solid var(--sw-line);
  border-radius: 10px;
}

.alert-primary,
.alert-secondary {
  --bs-alert-bg: var(--sw-fill);
  --bs-alert-color: var(--sw-text);
  --bs-alert-border-color: transparent;
}

.progress {
  background-color: var(--sw-fill);
  border-radius: 980px;
}

.progress .text-bg-primary,
.progress-bar {
  background-color: var(--sw-primary) !important;
}

.nav-tabs {
  border-bottom: 1px solid var(--sw-line);
}

.nav-tabs .nav-link {
  color: var(--sw-faint) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  font-weight: 500;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
  color: var(--sw-text) !important;
  background-color: transparent !important;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--sw-accent) !important;
}

.accordion {
  --bs-accordion-bg: var(--sw-surface);
  --bs-accordion-btn-bg: var(--sw-surface);
  --bs-accordion-btn-color: var(--sw-text);
  --bs-accordion-color: var(--sw-text);
  --bs-accordion-active-color: var(--sw-text);
  --bs-accordion-active-bg: var(--sw-fill);
  --bs-accordion-border-color: var(--sw-line);
}

.list-group-item {
  background-color: transparent;
  border-color: var(--sw-line);
}

.tooltip {
  --bs-tooltip-bg: var(--sw-ink);
  --bs-tooltip-color: var(--sw-on-ink);
}


/* -- 15  Fokus ------------------------------------------------------------- */

.btn:focus,
.btn:active:focus,
.btn-check:focus + .btn,
.dropdown-item:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus,
.page-link:focus {
  box-shadow: none !important;
}

:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sw-primary) !important;
  outline-offset: 2px !important;
}

.navbar :focus-visible {
  outline-color: var(--sw-on-ink) !important;
}

.nav-item a:focus-visible {
  background-color: transparent;
}

::selection {
  background: var(--sw-primary);
  color: var(--sw-on-primary);
}


/* -- 16  Anmeldeseite ------------------------------------------------------ */

body.text-center {
  background-color: var(--sw-page) !important;
  color: var(--sw-text);
  --pngx-primary: var(--sw-primary);
  --pngx-primary-hover: var(--sw-primary-hover);
  --pngx-primary-active: #000000;
  --bs-link-color-rgb: 29, 29, 31;
  --bs-link-hover-color-rgb: 192, 40, 27;
}

body.text-center .form-accounts {
  background-color: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 16px;
  box-shadow: var(--sw-shadow-1);
  padding: 2rem;
  max-width: 380px;
  overflow: hidden;
}

body.text-center .form-accounts .form-control {
  background-color: var(--sw-surface) !important;
  border-color: var(--sw-line) !important;
}

body.text-center .btn.btn-primary {
  --bs-btn-bg: var(--sw-primary);
  --bs-btn-border-color: var(--sw-primary);
  --bs-btn-color: var(--sw-on-primary);
  --bs-btn-hover-bg: var(--sw-primary-hover);
  --bs-btn-hover-border-color: var(--sw-primary-hover);
  --bs-btn-hover-color: var(--sw-on-primary);
  --bs-btn-active-bg: #000000;
  --bs-btn-active-color: var(--sw-on-primary);
  font-weight: 500;
}

body.text-center p {
  font-size: 0.8125rem;
  color: var(--sw-faint);
}

@media (prefers-color-scheme: dark) {
  body.text-center {
    --sw-page:    #000000;
    --sw-surface: #1D1D1F;
    --sw-fill:    #2C2C2E;
    --sw-line:    #424245;
    --sw-text:    #F5F5F7;
    --sw-faint:   #86868B;
    --sw-primary: #F5F5F7;
    --sw-primary-hover: #FFFFFF;
    --sw-on-primary: #1D1D1F;
    color: #F5F5F7;
  }
  body.text-center .form-accounts .form-control,
  body.text-center .form-control,
  body.text-center .form-floating {
    background-color: var(--sw-surface) !important;
    border-color: var(--sw-line) !important;
    color: #F5F5F7 !important;
  }
  body.text-center .form-floating label {
    color: #86868B;
  }
}


/* -- 17  Logo -------------------------------------------------------------- */
/* Das Syswes-Logo ist einfarbig. Damit entfällt der Umweg, den das
   Klebekerlchen-Theme gehen musste (farbige Datei nur auf dunklem Grund, weil
   Markengelb auf Weiß bei 1,8:1 steht): eine Maske je Form genügt, die Farbe
   kommt aus dem Token und wechselt mit dem Schema.

   Seitenverhältnisse aus den Dateien, damit nichts verzerrt:
       sw-logo.svg   885,76 × 200   = 4,429 : 1
       sw-mark.svg   219,75 × 200   = 1,099 : 1                                */

.navbar-brand > svg,
.navbar-brand > div {
  display: none !important;
}

/* Navbar ist dunkel (--sw-ink), also helle Marke. */
.navbar-brand::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 106px;
  height: 24px;
  background-color: #F5F5F7;
  -webkit-mask: url('./sw-logo.svg') center / contain no-repeat;
          mask: url('./sw-logo.svg') center / contain no-repeat;
}

@media (max-width: 575.98px) {
  .navbar-brand::before {
    width: 26px;
    -webkit-mask-image: url('./sw-mark.svg');
            mask-image: url('./sw-mark.svg');
  }
}

/* Anmeldeseite: Kopfband bis an die Kartenkante, wie im Vorbild. */
.form-accounts svg.logo {
  display: none !important;
}

.form-accounts::before {
  content: '';
  display: block;
  height: 88px;
  margin: -2rem -2rem 1.75rem;
  background-color: var(--sw-ink);
}

.form-accounts::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 164px;
  height: 88px;
  transform: translateX(-50%);
  background-color: #F5F5F7;
  -webkit-mask: url('./sw-logo.svg') center / 164px auto no-repeat;
          mask: url('./sw-logo.svg') center / 164px auto no-repeat;
  pointer-events: none;
}

/* Das Kopfband liegt am oberen Kartenrand — die Karte wird zum Bezugsrahmen. */
.form-accounts {
  position: relative;
}

/* Ladebildschirm: Bildmarke, pulsiert bei 10 % Deckkraft. */
.app-loader svg.logo {
  display: none !important;
}

.app-loader::before {
  content: '';
  display: block;
  width: 107px;
  height: 97px;
  margin: 0 auto 0.75rem;
  background-color: var(--sw-text);
  -webkit-mask: url('./sw-mark.svg') center / contain no-repeat;
          mask: url('./sw-mark.svg') center / contain no-repeat;
}

/* Dashboard-Kopf: dort setzt Paperless sein Logo ein zweites Mal, oben rechts
   neben der Überschrift. Das Klebekerlchen-Theme hat es nur umgefärbt — dann
   steht dort aber weiterhin der Schriftzug „Paperless ngx". Hier wird es
   ersetzt. Bewusst eng auf den Seitenkopf gefasst, damit die Regel nicht in
   Navbar, Anmeldeseite oder Ladebildschirm hineinwirkt, die eigene Fassungen
   haben.

   Breite wie das Original (149 px), damit die Kopfzeile ihr Maß behält; die
   Höhe folgt daraus dem Seitenverhältnis (150 / 4,429 = 34 px). */

/* `svg.logo` statt nur `svg`: das Element trägt Bootstraps `.d-md-block`, und
   das ist `display: block !important`. Zwei !important-Regeln entscheidet die
   Spezifität — ohne die Klasse im Selektor gewinnt Bootstrap. */
pngx-page-header pngx-logo > svg.logo {
  display: none !important;
}

/* Ab md, weil das Original `d-none d-md-block` trägt: auf schmalen Geräten
   zeigt Paperless dort kein Logo, und der Ersatz darf das nicht ändern. */
@media (min-width: 768px) {
  pngx-page-header pngx-logo::before {
    content: '';
    display: block;
    width: 150px;
    height: 34px;
    background-color: var(--sw-text);
    -webkit-mask: url('./sw-logo.svg') center / contain no-repeat;
            mask: url('./sw-logo.svg') center / contain no-repeat;
  }
}

/* Falls Paperless sein SVG-Logo an einer noch unbekannten Stelle einsetzt,
   trägt es wenigstens die Hausfarben statt Paperless-Grün. */
svg.logo .leaf {
  fill: var(--sw-accent) !important;
}

svg.logo .text {
  fill: var(--sw-text) !important;
}


/* -- 18  Druck ------------------------------------------------------------- */

@media print {
  .navbar,
  .sidebar {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}