/* ==========================================================================
   Paperless-ngx — Oberfläche für Klebekerlchen
   Farbräume nach dem Vorbild von apple.com, Marke und Akzent von Klebekerlchen.
   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 bleibt Klebekerlchen: die Navbar trägt das farbige Logo auf #1D1D1F
   (Gelb steht dort bei 9,0:1), Markenrot #C0281B ist der einzige Akzent.

   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 */
  --kk-brand-yellow: #F0B323;
  --kk-brand-red:    #EE3124;

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

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

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

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

  /* Tiefe: keine harten Versätze mehr, sondern weiche, sehr flache Schatten. */
  --kk-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03);
  --kk-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(--kk-on-primary);
  --pngx-primary-faded: var(--kk-primary-faded);

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

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

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

  --bs-info: var(--kk-fill);
  --bs-info-rgb: 235, 235, 237;
  --bs-danger: var(--kk-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(--kk-on-primary) !important;
  background-color: var(--kk-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) {
  --kk-page:        #000000;
  --kk-surface:     #1D1D1F;  /* 1,25:1 gegen die Seite */
  --kk-fill:        #2C2C2E;
  --kk-line:        #424245;  /* 1,68:1 gegen die Fläche */
  --kk-line-strong: #545457;
  --kk-text:        #F5F5F7;  /* 15,5:1 */
  --kk-muted:       #C7C7CC;
  --kk-faint:       #86868B;  /* 4,7:1 */

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

  --kk-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --kk-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(--kk-on-primary);
  --pngx-primary-faded: var(--kk-primary-faded);

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

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

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

  --bs-info: var(--kk-fill);
  --bs-info-rgb: 44, 44, 46;
  --bs-danger: var(--kk-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) {
    --kk-page:        #000000;
    --kk-surface:     #1D1D1F;
    --kk-fill:        #2C2C2E;
    --kk-line:        #424245;
    --kk-line-strong: #545457;
    --kk-text:        #F5F5F7;
    --kk-muted:       #C7C7CC;
    --kk-faint:       #86868B;

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

    --kk-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --kk-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(--kk-on-primary);
    --pngx-primary-faded: var(--kk-primary-faded);

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

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

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

    --bs-info: var(--kk-fill);
    --bs-info-rgb: 44, 44, 46;
    --bs-danger: var(--kk-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(--kk-line);
  opacity: 1;
}

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


/* -- 5  Typografie --------------------------------------------------------- */
/* Zwei Stufen, mehr nicht: alles Wichtige in --kk-text, alles Begleitende in
   --kk-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(--kk-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(--kk-sans);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--kk-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(--kk-mono) !important;
}

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

.text-muted,
.text-secondary,
.byline {
  color: var(--kk-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(--kk-sans) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: var(--kk-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(--kk-ink) !important;
  border-bottom: none;
  box-shadow: none !important;
}

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

.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .dropdown > .btn,
.navbar .btn,
.navbar .nav-link {
  color: var(--kk-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(--kk-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(--kk-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(--kk-surface) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--kk-line) !important;
}

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

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

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

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

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

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

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

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


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

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

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

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

.btn-outline-primary {
  border-color: var(--kk-line) !important;
  color: var(--kk-text) !important;
  background-color: var(--kk-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(--kk-primary) !important;
  border-color: var(--kk-primary) !important;
  color: var(--kk-on-primary) !important;
}

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

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

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

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

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

/* Löschen ist die einzige gefüllte Farbfläche der Oberfläche. */
.btn-danger {
  --bs-btn-bg: var(--kk-accent);
  --bs-btn-border-color: var(--kk-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(--kk-text);
  text-decoration-color: var(--kk-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(--kk-accent) !important;
  text-decoration-color: var(--kk-accent);
}

.text-primary {
  color: var(--kk-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(--kk-surface) !important;
  color: var(--kk-text) !important;
  border-color: var(--kk-line) !important;
  font-family: var(--kk-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(--kk-surface) !important;
  border-color: var(--kk-line-strong) !important;
}

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

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

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

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

.ng-dropdown-panel {
  border: 1px solid var(--kk-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(--kk-fill) !important;
  color: var(--kk-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(--kk-fill) !important;
  font-weight: 600;
}

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

.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
  background-color: var(--kk-fill) !important;
  color: var(--kk-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(--kk-surface) !important;
  border: 1px solid var(--kk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

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

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

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

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

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

.doc-img {
  border-color: var(--kk-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(--kk-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--kk-line);
  border-color: var(--kk-line);
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

.dropdown-menu {
  padding: 6px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nav-tabs .nav-link {
  color: var(--kk-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(--kk-text) !important;
  background-color: transparent !important;
}

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

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

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

.tooltip {
  --bs-tooltip-bg: var(--kk-ink);
  --bs-tooltip-color: var(--kk-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(--kk-primary) !important;
  outline-offset: 2px !important;
}

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

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

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


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

body.text-center {
  background-color: var(--kk-page) !important;
  color: var(--kk-text);
  --pngx-primary: var(--kk-primary);
  --pngx-primary-hover: var(--kk-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(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: 16px;
  box-shadow: var(--kk-shadow-1);
  padding: 2rem;
  max-width: 380px;
  overflow: hidden;
}

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

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

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

@media (prefers-color-scheme: dark) {
  body.text-center {
    --kk-page:    #000000;
    --kk-surface: #1D1D1F;
    --kk-fill:    #2C2C2E;
    --kk-line:    #424245;
    --kk-text:    #F5F5F7;
    --kk-faint:   #86868B;
    --kk-primary: #F5F5F7;
    --kk-primary-hover: #FFFFFF;
    --kk-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(--kk-surface) !important;
    border-color: var(--kk-line) !important;
    color: #F5F5F7 !important;
  }
  body.text-center .form-floating label {
    color: #86868B;
  }
}


/* -- 17  Logo -------------------------------------------------------------- */
/* Das farbige Logo braucht einen dunklen Grund: Markengelb steht auf #1D1D1F
   bei 9,0:1, auf Weiß nur bei 1,8:1. In der Navbar ist der Grund ohnehin
   dunkel; auf der Anmeldeseite trägt ein eigenes Kopfband.

   Die farbigen Dateien sind aus der einfarbigen Logo-SVG von
   namensetiketten.de rekonstruiert — Füllfarbe je Pfad aus dem offiziellen
   App-Icon abgelesen, Deckung der Rekonstruktion 92 %.                       */

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

.navbar-brand::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 137px;
  height: 24px;
  background: url('./kk-logo-color-invers.svg') center / contain no-repeat;
}

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

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

.form-accounts::before {
  content: '';
  display: block;
  height: 88px;
  margin: -2rem -2rem 1.75rem;
  background: var(--kk-ink) url('./kk-logo-color-invers.svg')
              center / 210px auto no-repeat;
}

/* Ladebildschirm: einfarbig als Maske — er pulsiert bei 10 % Deckkraft. */
.app-loader svg.logo {
  display: none !important;
}

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

svg.logo .leaf {
  fill: var(--kk-accent) !important;
}

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


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

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