/**
 * Kajinga UI — refresh.css (Design-Refresh „Soft Depth", Stufe 1, global)
 *
 * Hebt die Design-Physik des ks-Systems auf 2026-Niveau, OHNE Styler-
 * Farbeinstellungen anzufassen (primary/secondary/hero bleiben Settings):
 * weiche neutrale 2-Layer-Schatten statt blauer, harmonisierte Radius-Skala,
 * schnelle Motion (150–200ms), Tabellenziffern, ruhige Stat-Kacheln
 * (Entscheid 2026-07-16: Richtung B · Soft Depth, Stat-Behandlung 1 · Ruhig),
 * ein einheitliches Fokus-Ring-System.
 *
 * Kaskade: lädt via Dependency NACH design-tokens.css → gewinnt bei gleicher
 * Spezifität ohne !important. Dark-Mode: Styler setzt Tokens unter
 * body.kajinga-dark-mode (spezifischer) → dunkle Schatten-Werte bleiben;
 * eigene Klassen-Overrides liefern ihre Dark-Varianten am Dateiende.
 */

/* =========================================
 * 1) TOKEN-OVERRIDES (Design-Physik)
 * ========================================= */

body {
    /* Radius-Skala harmonisieren: Controls 10, Cards 16 */
    --kajinga-radius-xs: 6px;
    --kajinga-radius-sm: 10px;
    --kajinga-radius-md: 12px;
    --kajinga-radius-lg: 16px;
    --kajinga-radius-xl: 20px;
    /* --kajinga-radius (Legacy) bleibt Setting-gesteuert (ps.border_radius, Login) */

    /* Schatten: neutral (Slate statt Blau), weich, zweistufig */
    --kajinga-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.07);
    --kajinga-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.06), 0 14px 34px rgba(16, 24, 40, 0.11);
    --kajinga-shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.18);
    --kajinga-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.07);
    --kajinga-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 14px 34px rgba(16, 24, 40, 0.11);
    --kajinga-shadow-brand: 0 4px 14px rgba(var(--kajinga-primary-rgb), 0.3);
    --kajinga-shadow-brand-hover: 0 6px 20px rgba(var(--kajinga-primary-rgb), 0.4);

    /* Motion: schnell und dezent statt 0,4s.
     *
     * OHNE `all` — das ist der Kern der Behebung von v4.0.92 und darf nicht
     * zurückgedreht werden.
     *
     * Bis 4.0.91 stand hier `all 0.2s ease`. Das machte jede Verwendung
     * hinter einer Eigenschaft ungültig:
     *
     *     transition: transform var(--kajinga-transition-fast);
     *     → transition: transform all 0.15s ease;        ← ungültig
     *
     * Der Browser verwirft eine ungültige Deklaration vollständig. Der
     * Übergang lief also nicht kürzer, sondern überhaupt nicht — ohne
     * Fehlermeldung, und im Quelltext sah nichts falsch aus. Gemessen am
     * Schalter: `transitionDuration` = 0s, der Knopf sprang.
     *
     * Ohne `all` sind alle drei gebräuchlichen Schreibweisen gültig, denn der
     * Shorthand nimmt ohne genannte Eigenschaft ohnehin `all` an:
     *
     *     transition: var(--kajinga-transition-fast);          → all 0.15s ease
     *     transition: all var(--kajinga-transition-fast);      → all 0.15s ease
     *     transition: transform var(--kajinga-transition-fast); → transform 0.15s ease
     *
     * Die Erhebung vom 2026-08-03 fand 232 Stellen der dritten Form und 96 der
     * zweiten (die ergab „all all 0.2s ease") über rund 25 Plugins — alle seit
     * jeher wirkungslos, alle mit dieser Zeile repariert.
     *
     * WER HIER `all` ERGÄNZT, LEGT DREIHUNDERT ÜBERGÄNGE NETZWERKWEIT STILL. */
    --kajinga-transition: 0.2s ease;
    --kajinga-transition-fast: 0.15s ease;

    /* Kurve für Dinge, die eine STRECKE zurücklegen (v4.0.91).
     *
     * `ease` beschleunigt und bremst symmetrisch — für einen Farb- oder
     * Schattenwechsel genau richtig, für eine Bewegung im Raum aber falsch:
     * Was sich bewegt, startet schnell und läuft aus, es bremst nicht kurz vor
     * dem Ziel nochmal ab. Diese Kurve tut das und kommt einer gut gedämpften
     * Feder nahe (kein Überschwingen, weicher Auslauf).
     *
     * Der Wert stand seit 4.0.80 als Literal in der Modal-Einblendung
     * (core.css) — dort war er richtig, aber unauffindbar. Als Token ist er
     * benutzbar: Schalter-Knopf, aufklappende Karten, Modal.
     *
     * FAUSTREGEL: legt etwas eine Strecke zurück → dieses Token. Wechselt nur
     * Farbe, Fläche oder Schatten → `ease` beibehalten. */
    --kajinga-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Border-Ton: neutral statt blau */
    --kajinga-border: rgba(16, 24, 40, 0.07);
}

/* =========================================
 * 2) FOKUS-RING-SYSTEM (einheitlich)
 * ========================================= */

.ks-btn:focus-visible,
a.ks-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--kajinga-primary-rgb), 0.3);
}

.ks-input:focus {
    outline: none;
    border-color: var(--kajinga-primary);
    box-shadow: 0 0 0 3px rgba(var(--kajinga-primary-rgb), 0.22);
}

/* =========================================
 * 2b) EINGABEFELDER — Radius auf Control-Skala
 *
 * Achtung Kaskade: Styler plugin-styles.css (4px) + wordpress-styles.css
 * (8px, body:not()-Ketten) laden bei Prio 9999 NACH refresh.css und stylen
 * native input[type]/select-Selektoren höher spezifisch. Daher #wpcontent-
 * Compound (1-1-0 schlägt jede Klassen-Kette) — kein !important.
 * ========================================= */

#wpcontent .ks-input,
#wpcontent input.ks-input,
#wpcontent select.ks-input,
#wpcontent textarea.ks-input {
    border-radius: var(--kajinga-radius-sm);
    padding: 9px 13px;
    border-color: rgba(16, 24, 40, 0.12);
}

/* WordPress gibt select die line-height 2.71 (38px bei 14px Schrift). Zusammen
   mit dem 9px-Padding oben wären Dropdowns 58px hoch — 17px höher als jedes
   andere ks-Feld. Zeilenhöhe normalisieren, Höhe aus dem Inhalt. */
#wpcontent select.ks-input {
    padding-right: 30px;
    line-height: 1.5;
    height: auto;
}

#wpcontent .ks-input:focus,
#wpcontent select.ks-input:focus,
#wpcontent textarea.ks-input:focus {
    outline: none;
    border-color: var(--kajinga-primary);
    box-shadow: 0 0 0 3px rgba(var(--kajinga-primary-rgb), 0.22);
}

body.kajinga-dark-mode #wpcontent .ks-input,
body.kajinga-dark-mode #wpcontent select.ks-input,
body.kajinga-dark-mode #wpcontent textarea.ks-input {
    border-color: rgba(255, 255, 255, 0.14);
}

/* =========================================
 * 2c) EINGABEFELDER IN MODALS (v4.0.89)
 *
 * Modals hängen per JS am <body> — also AUSSERHALB von #wpcontent. Der
 * Compound oben greift dort nicht, und WordPress' `.wp-core-ui select`
 * (0-1-1) schlägt die Klassenregel `.ks-input` (0-1-0) aus design-tokens.css.
 * Folge: Dasselbe Feld sah im Modal anders aus als auf der Seite — 2px Radius
 * statt 8, WordPress-Padding statt unserem. Aufgefallen im QR-Designer.
 *
 * Hier reicht ein Klassen-Compound (0-2-1), weil keine ID zur Verfügung steht.
 * ========================================= */

.ks-modal .ks-input,
.ks-modal input.ks-input,
.ks-modal select.ks-input,
.ks-modal textarea.ks-input {
    border-radius: var(--kajinga-radius-sm);
    padding: 9px 13px;
    border-color: rgba(16, 24, 40, 0.12);
}

/* Wie oben: WordPress gibt select eine line-height von 2.71 — im Modal
   genauso normalisieren, sonst sind Dropdowns dort 17px höher als die
   Textfelder daneben. */
.ks-modal select.ks-input {
    padding-right: 30px;
    line-height: 1.5;
    height: auto;
}

.ks-modal .ks-input:focus,
.ks-modal select.ks-input:focus,
.ks-modal textarea.ks-input:focus {
    outline: none;
    border-color: var(--kajinga-primary);
    box-shadow: 0 0 0 3px rgba(var(--kajinga-primary-rgb), 0.22);
}

body.kajinga-dark-mode .ks-modal .ks-input,
body.kajinga-dark-mode .ks-modal select.ks-input,
body.kajinga-dark-mode .ks-modal textarea.ks-input {
    border-color: rgba(255, 255, 255, 0.14);
}

/* =========================================
 * 3) BUTTONS — voller, weicher, mit Lift
 * ========================================= */

.ks-btn {
    padding: 9px 16px;
    border-color: rgba(16, 24, 40, 0.1);
    border-radius: var(--kajinga-radius-sm);
    font-weight: 550;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: all 0.15s ease;
    /* v4.0.88: Ohne diese Zeile rechnet der Browser bei einem <a class="ks-btn">
       das Padding ZUSÄTZLICH zur Breite — `width: 100%` in einer Karte ergab
       dann 100% + 32px und der Knopf ragte rechts heraus (gesehen am
       Abbrechen-Knopf der Aktions-Karte in Magic Links). Bei <button> fiel es
       nie auf, weil WordPress dort border-box setzt; <a> trifft diese Regel
       nicht. Netzwerkweit setzen sechs Stellen ks-btn-Varianten auf width:100%. */
    box-sizing: border-box;
}

.ks-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.1);
}

/* Druck-Rückmeldung (v4.0.90).
 *
 * Bis hierher nahm `:active` nur den Hover-Lift zurück — beim Drücken passierte
 * also faktisch nichts, die erste sichtbare Reaktion kam erst mit dem
 * Seitenwechsel. Jetzt sinkt der Knopf ein, sobald er berührt wird.
 *
 * Die verkürzte Dauer ist Absicht und keine Kosmetik: hinein soll es sofort
 * gehen (die Rückmeldung IST die Reaktion), heraus darf es ausklingen. Deshalb
 * hier 0,06 s gegen die 0,15 s des Grundzustands. */
.ks-btn:active {
    transform: scale(0.97);
    /* DIE FLÄCHE MUSS MITREAGIEREN — Skalierung allein reicht nicht (v4.0.94).
     *
     * 4.0.90 setzte nur `scale(.97)`. Auf einem Knopf von 120px Breite sind das
     * knapp 2px je Kante, und die Farbe blieb, wie sie war. Beim inversen
     * Hero-Knopf (weiß auf Brand-Fläche) war deshalb selbst mit korrekt
     * greifender Regel nichts zu erkennen: weiß blieb weiß, und der
     * Schattenwechsel geht auf dem Farbverlauf unter. Gemeldet als „sehe ich
     * nicht", und das war zutreffend.
     *
     * `brightness` statt eines Farbwerts, weil es auf JEDER Variante wirkt —
     * weiß, Brand-blau, Ghost, Gefahr-rot — ohne für jede eine eigene Regel zu
     * pflegen. Weiß wird zu #ededee und damit klar sichtbar.
     *
     * Steht bewusst in der ALLGEMEINEN Regel: Spezifischere Varianten-Regeln
     * (z. B. `.ks-btn.ks-btn-inverse:active`) setzen `transform`, aber keinen
     * Filter — die Kaskade arbeitet je Eigenschaft, der Filter kommt also auch
     * dort an. */
    filter: brightness(0.93);
    transition-duration: 0.06s;
}

.ks-btn-primary,
.ks-btn-secondary,
.ks-btn-accent {
    border-radius: var(--kajinga-radius-sm);
}

.ks-btn-primary {
    box-shadow: 0 4px 14px rgba(var(--kajinga-primary-rgb), 0.3);
}

.ks-btn-primary:hover {
    box-shadow: 0 6px 18px rgba(var(--kajinga-primary-rgb), 0.4);
}

.ks-btn-ghost {
    box-shadow: none;
}

.ks-btn-sm {
    padding: 5px 10px;
}

.ks-btn-lg {
    padding: 12px 22px;
}

/* =========================================
 * 4) CARDS — Schatten statt Border
 * ========================================= */

.ks-card {
    border-color: rgba(16, 24, 40, 0.04);
}

/* =========================================
 * 5) STAT-KACHELN — „Ruhig": weiße Karte,
 *    Wert in Textfarbe (tabular-nums), Icon-Kreis
 * ========================================= */

.ks-stat-card,
.ks-stat-card--secondary,
.ks-stat-card--success,
.ks-stat-card--danger {
    background: var(--kajinga-card-solid);
    border: 1px solid rgba(16, 24, 40, 0.04);
    box-shadow: var(--kajinga-shadow-sm);
    text-align: left;
    padding: 22px;
    transition: all 0.2s ease;
}

/* Der animierte Gradient-Top-Border entfällt */
.ks-stat-card::before {
    content: none;
}

.ks-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--kajinga-shadow-md);
}

/* Druck-Rückmeldung — bewusst NUR auf der verlinkten Kachel (v4.0.90).
 *
 * Den Hover-Lift trägt jede Kachel, auch die reine Anzeige. Ein Einsinken beim
 * Drücken sagt dagegen „hier passiert etwas", und das darf nicht lügen: Wo kein
 * href ist, gibt es kein Ziel. `a.ks-stat-card` (0,2,1) schlägt den Hover-Lift
 * darüber (0,2,0), der Lift wird also zugleich zurückgenommen.
 *
 * 0,985 statt der 0,97 des Knopfs: Die Skalierung muss mit der Fläche sinken,
 * sonst wandert eine 300 px breite Kachel beim Drücken um 9 px. */
a.ks-stat-card:active {
    transform: translateY(0) scale(0.985);
    transition-duration: 0.06s;
}

.ks-stat-card .ks-stat-value,
.ks-stat-card--secondary .ks-stat-value,
.ks-stat-card--success .ks-stat-value,
.ks-stat-card--danger .ks-stat-value {
    font-size: 28px;
    font-weight: 700;
    /* 28 px in 700 — die größte Schrift des Systems und damit der Wert, der am
       deutlichsten negativ laufen muss (v4.0.90, vorher 0). Die kompakte
       Kachel (17 px) setzt ihn in components.css wieder auf 0. */
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--kajinga-text);
    margin: 2px 0 4px;
}

.ks-stat-card .ks-stat-label {
    /* v3.9.45: +2px — Beschreibungstexte in Stat-Boxen waren zu klein.
       v4.2.38: nochmals +2px auf 16px. Die Zahl darüber ist 28px; bei 14px
       stand die Beschriftung dazu in keinem Verhältnis und war das Erste,
       was auf Abstand verschwand. */
    font-size: 16px;
    font-weight: 550;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kajinga-text-muted);
}

/* Icon als getönter Kreis — Variantenfarbe trägt die Bedeutung */
.ks-stat-card .ks-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
    background: rgba(var(--kajinga-primary-rgb), 0.11);
    color: var(--kajinga-primary);
    margin-bottom: 10px;
}

.ks-stat-card--success .ks-stat-icon {
    background: rgba(18, 183, 106, 0.12);
    color: #12b76a;
}

.ks-stat-card--danger .ks-stat-icon {
    background: rgba(240, 68, 56, 0.12);
    color: #f04438;
}

.ks-stat-card--secondary .ks-stat-icon {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

/* =========================================
 * 6) TABELLEN — ruhige Header, luftige Zeilen
 * ========================================= */

.ks-table {
    border-color: rgba(16, 24, 40, 0.07);
    font-variant-numeric: tabular-nums;
}

.ks-table th {
    background: transparent;
    /* v4.2.38: 13 -> 14.5px. Der Kopf war kleiner als die Zellen darunter und
       wirkte damit kopflastig, besonders in Tabellen mit mehrzeiligen Zellen. */
    font-size: 14.5px;
    font-weight: 650;
    color: var(--kajinga-text-muted);
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    padding: 11px 14px;
}

.ks-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(16, 24, 40, 0.05);
    /* v4.2.38: bisher geerbt (14px vom Admin-Body), jetzt ausdrücklich 14.5px.
       Wer Zeilen liest, liest sie länger als jede andere Fläche im Backend. */
    font-size: 14.5px;
}

.ks-table tr:last-child td {
    border-bottom: none;
}

/* v4.0.76: ks_data_table() rendert seine Tabelle in .ks-table-wrap — für diese
   Klasse gab es netzwerkweit KEINE einzige Regel. Die Tabelle stand damit ohne
   eigene Fläche auf dem Seiten-Gradient, während ks_stat_grid direkt darüber
   eine weiße Karte zeigte. Die Fläche gehört auf den Wrap, nicht auf die
   Tabelle: nur so liegt die Toolbar (Suche/Filter) mit in der Karte. */
.ks-table-wrap {
    background: var(--kajinga-card-solid);
    border: 1px solid rgba(16, 24, 40, 0.06);
    border-radius: var(--kajinga-radius-lg);
    box-shadow: var(--kajinga-shadow-sm);
}

/* Rahmen + Rundung trägt jetzt der Wrap — sonst Doppelrahmen. */
.ks-table-wrap > .ks-table {
    border: 0;
    border-radius: 0;
}

/* Die Toolbar sitzt IN der Karte und braucht deshalb eigenen Innenabstand.
   14px = Spaltenpadding der Tabelle, damit Suchfeld und erste Spalte fluchten. */
.ks-table-wrap > .ks-toolbar {
    padding: 14px 14px 0;
    margin-bottom: 14px;
}

.ks-table-wrap > .ks-table-empty-filter {
    margin: 0;
    padding: 18px 14px;
}

/* Kein overflow:hidden am Wrap — das würde den data-tip-Tooltip von
   ks_row_actions abschneiden, sobald die Tabelle nur EINE Zeile hat (dann
   greift die tr:first-child-Regel und der Tooltip klappt nach unten aus).
   Stattdessen bekommt nur der Hover-Hintergrund der letzten Zeile die
   Rundung, sonst liefe er eckig über die Kante des Wraps. */
.ks-table-wrap > .ks-table tr:last-child td:first-child {
    border-bottom-left-radius: var(--kajinga-radius-lg);
}

.ks-table-wrap > .ks-table tr:last-child td:last-child {
    border-bottom-right-radius: var(--kajinga-radius-lg);
}

/* Steht die Tabelle bereits in einer Karte/Widget/Modal, wäre die eigene
   Fläche eine Karte in der Karte. */
.ks-card .ks-table-wrap,
.ks-widget .ks-table-wrap,
.ks-modal-body .ks-table-wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ks-card .ks-table-wrap > .ks-toolbar,
.ks-widget .ks-table-wrap > .ks-toolbar,
.ks-modal-body .ks-table-wrap > .ks-toolbar {
    padding: 0;
    margin-bottom: var(--kajinga-space-4, 16px);
}

.ks-card .ks-table-wrap > .ks-table-empty-filter,
.ks-widget .ks-table-wrap > .ks-table-empty-filter,
.ks-modal-body .ks-table-wrap > .ks-table-empty-filter {
    padding: 18px 0 0;
}

/* =========================================
 * 7) BADGES — moderne Tönungen statt Pastell-Blöcke
 * ========================================= */

.ks-badge {
    padding: 3px 11px;
    font-weight: 550;
}

.ks-badge-success,
.ks-badge-active {
    background: rgba(18, 183, 106, 0.13);
    color: #0e9f5f;
}

.ks-badge-warning,
.ks-badge-pending {
    background: rgba(247, 144, 9, 0.14);
    color: #d17b06;
}

.ks-badge-danger {
    background: rgba(240, 68, 56, 0.12);
    color: #d92d20;
}

.ks-badge-info {
    background: rgba(var(--kajinga-primary-rgb), 0.11);
    color: var(--kajinga-primary);
}

/* =========================================
 * 8) EMPTY STATES / NOTICES / HERO — Feinschliff
 * ========================================= */

.ks-empty-state--card {
    border-color: rgba(16, 24, 40, 0.05);
}

.ks-empty-state--dashed {
    border-color: rgba(16, 24, 40, 0.1);
}

.ks-notice {
    border-radius: 0 var(--kajinga-radius-sm) var(--kajinga-radius-sm) 0;
}

.ks-hero {
    /* Schatten nur nach unten (Offset, negativer Spread): kein Glow oberhalb
       der Oberkante — Hero und Sidebar-Karte fluchten optisch.
       v4.0.85 gedämpft (12/24/0.25 -> 8/18/0.15): Der Header soll weniger
       vortreten. Die Richtungs-Charakteristik bleibt, nur die Stärke sinkt. */
    box-shadow: 0 8px 18px -6px rgba(var(--kajinga-primary-rgb), 0.15);
}

/* =========================================
 * 8b) WP-CORE-ELEMENTE — gleiche Physik wie das Designsystem
 *     (Farben kommen weiterhin aus den Styler-Settings; die
 *     Physik-Generierung wurde in Styler 3.4.0 entfernt)
 * ========================================= */

.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary {
    border-radius: var(--kajinga-radius-sm);
    transition: all 0.15s ease;
}

.wp-core-ui .button:focus-visible,
.wp-core-ui .button-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--kajinga-primary-rgb), 0.3);
}

#wpcontent input[type="text"]:not(.wp-color-picker):not(.iris-input),
#wpcontent input[type="password"],
#wpcontent input[type="email"],
#wpcontent input[type="url"],
#wpcontent input[type="number"],
#wpcontent input[type="search"],
#wpcontent input[type="tel"],
#wpcontent input[type="date"],
#wpcontent input[type="datetime-local"],
#wpcontent select,
#wpcontent textarea {
    border-radius: var(--kajinga-radius-sm);
}

#wpcontent .postbox,
#wpcontent .card {
    border-radius: var(--kajinga-radius-md);
    box-shadow: var(--kajinga-shadow-sm);
}

#wpcontent .notice {
    border-radius: 0 var(--kajinga-radius-xs) var(--kajinga-radius-xs) 0;
}

#wpcontent .nav-tab {
    border-radius: var(--kajinga-radius-sm) var(--kajinga-radius-sm) 0 0;
}

/* =========================================
 * 9) DARK MODE — Gegenstücke der Klassen-Overrides
 *    (Token-Schatten setzt der Styler-Dark-Layer selbst)
 * ========================================= */

body.kajinga-dark-mode .ks-btn {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.kajinga-dark-mode .ks-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

body.kajinga-dark-mode .ks-card,
body.kajinga-dark-mode .ks-table-wrap,
body.kajinga-dark-mode .ks-stat-card,
body.kajinga-dark-mode .ks-stat-card--secondary,
body.kajinga-dark-mode .ks-stat-card--success,
body.kajinga-dark-mode .ks-stat-card--danger {
    border-color: rgba(255, 255, 255, 0.06);
}

/* Der Reset für verschachtelte Tabellen gilt im Dark-Mode genauso. */
body.kajinga-dark-mode .ks-card .ks-table-wrap,
body.kajinga-dark-mode .ks-widget .ks-table-wrap,
body.kajinga-dark-mode .ks-modal-body .ks-table-wrap {
    border-color: transparent;
}

body.kajinga-dark-mode .ks-stat-card .ks-stat-icon {
    background: rgba(var(--kajinga-primary-rgb), 0.2);
}

body.kajinga-dark-mode .ks-table th {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.kajinga-dark-mode .ks-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.kajinga-dark-mode .ks-badge-success,
body.kajinga-dark-mode .ks-badge-active {
    background: rgba(18, 183, 106, 0.18);
    color: #4ade80;
}

body.kajinga-dark-mode .ks-badge-warning,
body.kajinga-dark-mode .ks-badge-pending {
    background: rgba(247, 144, 9, 0.18);
    color: #fbbf24;
}

body.kajinga-dark-mode .ks-badge-danger {
    background: rgba(240, 68, 56, 0.18);
    color: #f87171;
}

body.kajinga-dark-mode .ks-empty-state--card {
    border-color: rgba(255, 255, 255, 0.06);
}

body.kajinga-dark-mode .ks-empty-state--dashed {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Reduzierte Motion respektieren */
@media (prefers-reduced-motion: reduce) {
    .ks-btn:hover,
    .ks-stat-card:hover {
        transform: none;
    }
}

/* =========================================
 * DISPLAY-SCHRIFT (Geist, festgelegt 2026-07-20)
 * Titel + große Zahlen tragen --kajinga-font-display, Fließtext,
 * Formulare und Buttons --kajinga-font. Seit dem Font-Entscheid zeigen
 * BEIDE Tokens auf Geist (einzige Hausschrift); die Trennung bleibt als
 * Hebel bestehen, falls später wieder eine eigene Display-Schrift kommt.
 * ========================================= */

.ks-hero-title,
.ks-page-title,
.ks-widget-title,
.ks-card-title,
.ks-card-header h2,
.ks-card-header h3,
.ks-modal-title,
.ks-empty-state-title {
    font-family: var(--kajinga-font-display, var(--kajinga-font));
}

/* TRACKING IST GRÖSSENABHÄNGIG (v4.0.90).
 *
 * Bis hierher trug die Liste oben EINEN Wert (0.01em) für alle Titel — und die
 * reichen von 14 px (Card-/Widget-Titel) über 16 (Modal), 18 (leerer Zustand),
 * 22 (Seitentitel) bis 23 px (Hero-Titel im Seitenkopf, components.css). Ein
 * fester Wert ist bei dieser Spanne zwangsläufig irgendwo falsch.
 *
 * Die Regel dahinter: Buchstaben laufen optisch auseinander, je größer sie
 * werden — große Schrift braucht deshalb NEGATIVES Tracking, kleine profitiert
 * von null bis leicht positiv. Der bisherige Wert zog also ausgerechnet den
 * größten Titel (Hero) in die falsche Richtung.
 *
 * Die Werte sind Startpunkte für Geist, keine Naturkonstanten. Wer eine
 * Titelgröße ändert, zieht das Tracking mit. */
.ks-hero-title,
.ks-page-title {
    letter-spacing: -0.015em;
}

.ks-empty-state-title {
    letter-spacing: -0.005em;
}

.ks-modal-title,
.ks-widget-title,
.ks-card-title,
.ks-card-header h2,
.ks-card-header h3 {
    letter-spacing: 0;
}

.ks-stat-value,
.ks-widget-stat-value,
.ks-page-kpi strong,
.ks-widget-progress-count {
    font-family: var(--kajinga-font-display, var(--kajinga-font));
}

/* Admin-weite Grundschrift: Inter für den gesamten Content-Bereich
   (code/pre behalten ihre Monospace-Regeln aus dem WP-Core) */
#wpcontent,
#wpbody-content {
    font-family: var(--kajinga-font, -apple-system, sans-serif);
}

/* Seiten-Titel aller Screens in der Display-Schrift. Ein h1 im Admin liegt bei
   ~23 px und gehört damit zur großen Stufe — negatives Tracking (v4.0.90). */
#wpcontent h1 {
    font-family: var(--kajinga-font-display, var(--kajinga-font));
    letter-spacing: -0.01em;
}

/* =========================================
 * 10) HÖHERER KONTRAST (v4.0.97)
 *
 * Wer im Betriebssystem „mehr Kontrast" einstellt, bekam bei uns bisher
 * exakt dasselbe zu sehen — die Media Query kam im ganzen Plugin nicht vor.
 *
 * Betroffen sind vor allem die getönten Flächen: Badges tragen 11–14 %
 * Deckkraft, die Icon-Kreise der Kennzahl-Kacheln 11–12 %. Auf Weiß ergibt
 * das zarte Pastellflächen — hübsch, aber genau das, wogegen die Einstellung
 * sich richtet. Sie werden hier auf DECKENDE Flächen mit dunklerem Text und
 * einem Rand umgestellt.
 *
 * Warum ein Rand dazukommt: Bei hohem Kontrast trägt die Fläche allein die
 * Abgrenzung nicht mehr zuverlässig — die Kante muss sie mittragen.
 * `currentColor` hält Rand und Text automatisch zusammen, auch in den
 * Farbschemata, wo die Primärfarbe wechselt.
 *
 * Die Werte sind deckende Entsprechungen der bisherigen Tönungen, mit
 * abgedunkeltem Text. GEMESSEN, nicht geschätzt: vorher 3,09 / 2,94 / 4,23 —
 * jetzt über 7:1 (AAA) in beiden Modi. Der erste Anlauf landete bei 6,3-6,5
 * und damit nur auf AA; bei einer Einstellung namens „mehr Kontrast" ist das
 * zu wenig. Wer die Farben ändert, misst nach.
 * ========================================= */

@media (prefers-contrast: more) {

    .ks-badge {
        border: 1px solid currentColor;
        font-weight: 600;
    }

    .ks-badge-success,
    .ks-badge-active {
        background: #d7f3e3;
        color: #044a2c;
    }

    .ks-badge-warning,
    .ks-badge-pending {
        background: #fcefd0;
        color: #5c3a00;
    }

    .ks-badge-danger {
        background: #fcdfdc;
        color: #871108;
    }

    .ks-badge-info {
        background: color-mix(in srgb, var(--kajinga-primary) 14%, #fff);
        color: var(--kajinga-primary-dark, #135e96);
    }

    /* Icon-Kreise der Kennzahl-Kacheln: aus 11 % Tönung wird eine deckende
       Fläche. Die Variantenfarbe trägt dort die Bedeutung, sie darf nicht
       im Hintergrund verschwinden. */
    .ks-stat-card .ks-stat-icon {
        background: color-mix(in srgb, var(--kajinga-primary) 20%, #fff);
    }

    .ks-stat-card--success .ks-stat-icon { background: #cfeddf; }
    .ks-stat-card--danger  .ks-stat-icon { background: #fbd8d4; }
    .ks-stat-card--secondary .ks-stat-icon { background: #e2dafd; }

    /* Karten und Felder brauchen eine sichtbare Kante statt eines Schattens —
       ein Schatten ist bei hohem Kontrast kein verlässlicher Trenner. */
    .ks-card,
    .ks-table-wrap,
    .ks-stat-card {
        border-color: rgba(16, 24, 40, 0.32);
    }

    /* Der Fokus-Ring ist bei hohem Kontrast das wichtigste Signal überhaupt:
       kräftiger und deckend statt halbtransparent. */
    .ks-btn:focus-visible,
    a.ks-btn:focus-visible {
        box-shadow: 0 0 0 3px var(--kajinga-primary);
    }

    .ks-input:focus {
        border-color: var(--kajinga-primary);
        box-shadow: 0 0 0 3px var(--kajinga-primary);
    }

    /* Dark Mode: dieselbe Logik, nur andersherum — deckendere Flächen,
       hellerer Text. */
    body.kajinga-dark-mode .ks-badge-success,
    body.kajinga-dark-mode .ks-badge-active {
        background: #0b3d28;
        color: #7ff0b0;
    }

    body.kajinga-dark-mode .ks-badge-warning,
    body.kajinga-dark-mode .ks-badge-pending {
        background: #4a3200;
        color: #ffd47a;
    }

    body.kajinga-dark-mode .ks-badge-danger {
        background: #4d130d;
        color: #ff9d94;
    }

    body.kajinga-dark-mode .ks-card,
    body.kajinga-dark-mode .ks-table-wrap,
    body.kajinga-dark-mode .ks-stat-card {
        border-color: rgba(255, 255, 255, 0.34);
    }
}


/* =========================================================================
   SCHRIFTGRÖSSEN-FEINABSTIMMUNG (v4.2.38)

   Diese drei Regeln überschreiben Werte aus `design-tokens.css`. Sie stehen
   bewusst HIER und nicht dort: design-tokens.css wird aus
   `assets/css/token-utilities.tpl` mit DB-Werten GENERIERT — eine Änderung an
   der Vorlage wirkt erst nach einer Regeneration und wäre bis dahin unsichtbar.
   refresh.css ist statisch und lädt danach; dasselbe Muster nutzt bereits
   `.ks-btn { font-weight: 550 }` weiter oben.
   ========================================================================= */

/* Eingabefelder auf Knopf-Größe (14.5px). Vorher 14px — in einer Toolbar
   standen Feld und Knopf damit unterschiedlich groß nebeneinander.

   ⚠️ Der zweite Selektor ist Pflicht, nicht Zierde: WordPress' `forms.css` setzt
   `.wp-core-ui select { font-size: 14px }` (Spezifität 0,2,0) und schlägt damit
   `.ks-input` (0,1,0). Ohne ihn wären `<input>` 14.5px und `<select>` daneben
   14px — gemessen und genau so aufgetreten. Dieselbe Falle wie bei
   `.wp-core-ui select { max-width: 25rem }`, die schon einmal eine Filterleiste
   umbrechen ließ. Wer hier eine weitere Eigenschaft für Felder setzt, prüft
   zuerst, ob der Core sie für `select` bereits belegt. */
.ks-input,
.wp-core-ui select.ks-input {
    font-size: 14.5px;
}

/* Kleine Knöpfe: 14 -> 14.5px. `.ks-btn-sm` ändert damit nur noch das Padding
   gegenüber `.ks-btn`, nicht mehr die Schriftgröße — „klein" heißt kompakt,
   nicht schlechter lesbar. */
.ks-btn-sm {
    font-size: 14.5px;
}

/* Trefferzahl in der Toolbar: die Zahl etwas größer als ihr Beiwort. */
.ks-toolbar-count strong {
    font-size: 14.5px;
}