/* ============================================================================
   KanzleiSimple — Design-Ebene 1.4.1 (shadcn/ui-Sprache)
   ----------------------------------------------------------------------------
   Wird NACH tailwind.min.css und nach glass.css / public-glass.css geladen.

   GRUNDGEDANKE
   Die Templates verwenden durchgaengig dieselben Tailwind-Kombinationen
   (bg-primary-600, rounded-lg, border-gray-300, ring-1 ring-gray-200 …).
   Diese Datei definiert sie neu — dadurch aendert sich das Aussehen auf
   ALLEN Seiten, ohne dass Markup angefasst wird.

   Tailwind laeuft NICHT im JIT-Modus. Deshalb ausschliesslich handgeschriebenes
   CSS, keine arbitrary values.

   Spezifitaet: Tailwind-Utilities sind Ein-Klassen-Selektoren. `html body`
   davor gewinnt zuverlaessig, ohne !important-Wildwuchs.

   NUR OPTIK. Keine Funktion, kein Verhalten, keine Positionierung, die etwas
   verschiebt oder verdeckt.
   ============================================================================ */

:root {
    --ks-r-sm: 8px;
    --ks-r:    12px;
    --ks-r-lg: 16px;

    --ks-fg:        #0f172a;
    --ks-fg-weich:  #475569;
    --ks-fg-leise:  #64748b;
    --ks-linie:     rgba(15, 23, 42, .09);
    --ks-linie-2:   rgba(15, 23, 42, .14);

    --ks-primary:      #0284c7;
    --ks-primary-dark: #0369a1;
    --ks-primary-tief: #075985;
    --ks-ring:         rgba(2, 132, 199, .40);

    /* Flach und weit statt kurz und hart — das nimmt den 3D-Eindruck */
    --ks-sh-1: 0 1px 2px rgba(15, 23, 42, .04);
    --ks-sh-2: 0 1px 2px rgba(15, 23, 42, .03), 0 14px 34px -18px rgba(30, 58, 110, .30);
    --ks-sh-3: 0 2px 6px rgba(15, 23, 42, .05), 0 26px 56px -22px rgba(30, 58, 110, .42);

    --ks-glas:      rgba(255, 255, 255, .72);
    --ks-glas-hoch: rgba(255, 255, 255, .86);
    --ks-glas-rand: rgba(255, 255, 255, .80);
    --ks-blur:      blur(26px) saturate(175%);
}

/* ========================= 1. GRUNDFLAECHE =================================
   Der groesste Hebel ueberhaupt. Bisher ein kraeftiges #c6d4ea, das die
   ganze Seite dominiert und Karten flach wirken laesst. Jetzt deutlich
   heller und ruhiger — dadurch treten die Glasflaechen ueberhaupt erst
   hervor. glass.css setzt Farbe auf body UND auf body::before; beides muss
   ueberschrieben werden, sonst bleibt eine der Ebenen kraeftig.
   ========================================================================= */

html body.ks-app {
    background-color: #eaeff6;
    color: var(--ks-fg);
}
html body.ks-app::before {
    background-color: transparent;
    background-image:
        radial-gradient(1100px 620px at 12% -8%,  rgba(2, 132, 199, .13), transparent 62%),
        radial-gradient(900px 520px at 105% 8%,   rgba(56, 189, 248, .11), transparent 60%),
        linear-gradient(168deg, #eef3f9 0%, #e6edf6 52%, #eaf0f7 100%);
}

/* ============================ 2. TYPOGRAFIE ================================
   Bisher fast alles text-sm/font-semibold — flach in der Hierarchie.
   Grosse Grade bekommen mehr Gewicht und engere Laufweite, Sekundaeres
   wird leiser statt kleiner.
   ========================================================================= */

/* WICHTIG: Groessenklassen duerfen KEINE Farbe setzen. `.text-2xl` traegt
   z.B. die Wortmarke in der Sidebar, die per `text-white` hell sein muss —
   eine Farbregel hier hat hoehere Spezifitaet und faerbt sie dunkel. */
html body h1, html body .text-3xl, html body .text-2xl {
    letter-spacing: -.028em;
}
html body h1, html body .text-3xl { font-weight: 700; }
html body h2, html body h3        { letter-spacing: -.016em; }

/* Farbe nur dort, wo sie auch gemeint ist */
html body main h1, html body main h2 { color: var(--ks-fg); }

html body .text-gray-500 { color: var(--ks-fg-leise); }
html body .text-gray-600 { color: var(--ks-fg-weich); }
html body .text-gray-900 { color: var(--ks-fg); }

/* Zahlen sollen beim Aktualisieren nicht in der Breite springen */
html body .text-3xl, html body .text-2xl,
html body td, html body .tabular {
    font-variant-numeric: tabular-nums;
}

/* ============================== 3. KARTEN ==================================
   Mehr Glas, mehr Luft, weiche weite Schatten. Die Deckung bleibt hoch
   genug, dass Zahlen, Listen und Tabellen lesbar sind (WCAG).
   ========================================================================= */

html body .bg-white.rounded-xl,
html body .bg-white.rounded-lg.ring-1,
html body .bg-white.rounded-lg.shadow-sm {
    border-radius: var(--ks-r-lg);
    box-shadow: var(--ks-sh-2);
    border: 1px solid var(--ks-glas-rand);
}

@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    html body .bg-white.rounded-xl,
    html body .bg-white.rounded-lg.ring-1 {
        background-color: var(--ks-glas-hoch);
        -webkit-backdrop-filter: var(--ks-blur);
        backdrop-filter: var(--ks-blur);
    }
}

/* Mehr Innenabstand — der wirksamste einzelne Griff fuer "aufgeraeumt" */
html body .stat-card { padding: 22px 24px; }
html body .dashboard-widget .px-6 { padding-left: 24px; padding-right: 24px; }

html body .ring-gray-200 { --tw-ring-color: transparent; }
html body .ring-1        { box-shadow: var(--ks-sh-2); }

/* ========================= 4. SCHALTFLAECHEN ===============================
   Der "2010er" Eindruck kommt von Verlaeufen, inneren Lichtkanten und
   kurzen harten Schatten. Alle drei fallen weg. Zustandswechsel nur ueber
   Farbe — nie ueber Groesse, das wirkt sonst wie ein gedrueckter Knopf.
   ========================================================================= */

html body .bg-primary-600,
html body a.bg-primary-600,
html body button.bg-primary-600,
html body .bg-primary-700 {
    background-image: none;
    box-shadow: none;
    border: none;
    border-radius: var(--ks-r-sm);
    font-weight: 600;
    letter-spacing: .005em;
    transition: background-color .14s ease;
}
html body a.bg-primary-600:hover,
html body button.bg-primary-600:hover { background-color: var(--ks-primary-dark); }
html body a.bg-primary-600:active,
html body button.bg-primary-600:active { background-color: var(--ks-primary-tief); }

/* Sekundaer / Outline — heller Grund, feine Linie, kein Relief */
html body a.bg-white.ring-1,
html body button.bg-white.ring-1,
html body a.border-gray-300,
html body button.border-gray-300 {
    background-image: none;
    background-color: rgba(255, 255, 255, .88);
    border: 1px solid var(--ks-linie-2);
    border-radius: var(--ks-r-sm);
    box-shadow: none;
    font-weight: 500;
    transition: background-color .14s ease, border-color .14s ease;
}
html body a.bg-white.ring-1:hover,
html body button.bg-white.ring-1:hover,
html body a.border-gray-300:hover,
html body button.border-gray-300:hover {
    background-color: #fff;
    border-color: rgba(15, 23, 42, .22);
}

html body .rounded-lg { border-radius: var(--ks-r); }
html body .rounded-md { border-radius: var(--ks-r-sm); }

/* =========================== 5. EINGABEFELDER ==============================
   Ruhiger Rand, klar spuerbarer Fokus. Der Ring ist Pflicht — fuer
   Tastaturbedienung die einzige Orientierung.
   ========================================================================= */

html body input[type="text"], html body input[type="email"],
html body input[type="password"], html body input[type="number"],
html body input[type="search"], html body input[type="tel"],
html body input[type="url"], html body input[type="date"],
html body input[type="datetime-local"],
html body select, html body textarea {
    border-radius: var(--ks-r-sm);
    border: 1px solid var(--ks-linie-2);
    background-color: rgba(255, 255, 255, .94);
    color: var(--ks-fg);
    transition: border-color .14s ease, box-shadow .14s ease;
}
html body input:focus, html body select:focus, html body textarea:focus {
    outline: none;
    border-color: var(--ks-primary);
    box-shadow: 0 0 0 3px var(--ks-ring);
}
html body input::placeholder, html body textarea::placeholder { color: #94a3b8; }

/* ============================== 6. SIDEBAR =================================
   Bleibt dunkel (Wiedererkennung), bekommt aber Tiefe und ruhigere
   Zustaende statt flaechigem Blau.
   ========================================================================= */

html body .ks-sidebar {
    background-image: linear-gradient(178deg, #0b3b63 0%, #0a3457 58%, #082c49 100%);
    border-right: 1px solid rgba(255, 255, 255, .07);
}
html body .ks-sidebar a { border-radius: var(--ks-r-sm); }
html body .ks-sidebar a:hover { background-color: rgba(255, 255, 255, .09); }

/* =============================== 7. TABELLEN ===============================
   `divide-y` wird vom non-JIT-Tailwind gepurgt — Trenner deshalb von Hand.
   ========================================================================= */

html body table thead th {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ks-fg-leise);
    background-color: transparent;
    border-bottom: 1px solid var(--ks-linie);
}
html body table tbody tr:not(:first-child) { border-top: 1px solid var(--ks-linie); }
html body table tbody tr { transition: background-color .12s ease; }
html body table tbody tr:hover { background-color: rgba(255, 255, 255, .55); }

/* ================================ 8. BADGES ================================ */

html body span.rounded-full {
    font-weight: 500;
    letter-spacing: .008em;
    border: none;
}

/* =========================== 9. UEBERLAGERUNGEN ============================
   Menues und Dialoge muessen DECKEND sein. Ein durchscheinendes Menue ueber
   Inhalten ist unlesbar. Ausserdem: Elemente mit backdrop-filter erzeugen
   einen eigenen Stapelkontext und schieben sich sonst ueber ein geoeffnetes
   Menue — unabhaengig von dessen z-index.
   ========================================================================= */

html body [role="menu"],
html body .origin-top-right,
html body .origin-top-left {
    background-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--ks-linie);
    border-radius: var(--ks-r);
    box-shadow: var(--ks-sh-3);
    z-index: 60;
}

/* ================================ 10. FOKUS ================================ */

html body a:focus-visible, html body button:focus-visible,
html body [tabindex]:focus-visible, html body summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ks-ring);
    border-radius: var(--ks-r-sm);
}

/* =============================== 11. BEWEGUNG ============================== */

@media (prefers-reduced-motion: reduce) {
    html body *, html body *::before, html body *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ==================== 12. DRUCK: Design-Ebene abschalten ==================== */

@media print {
    html body * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
    html body.ks-app, html body.ks-app::before {
        background: #fff !important;
    }
}