/* ==========================================================
   components.css — gemeinsames Design-System (Komponenten-Schicht)
   ==========================================================
   Diese Datei liegt EINE Ebene ueber base.css und definiert
   alle wiederverwendbaren UI-Bausteine EINMAL zentral:
   Buttons, Formularfelder, Cards, Modals, Alerts, Badges.

   Ziele:
   - Einheitliches Aussehen ueber alle Seiten (gleiche Button-Hoehe,
     gleiche Abstaende, gleiche Radien).
   - Alle Farben laufen ueber Tokens (var(--primary), var(--surface) ...)
     -> Hell/Dunkel-Modus funktioniert automatisch, KEIN per-Seite
        Dark-Mode-Code mehr noetig.
     -> Ein anderes Brand (z.B. Ostblech-Tracker) bekommt ein eigenes
        Aussehen, indem nur die Tokens neu gesetzt werden.

   Lade-Reihenfolge:  base.css  ->  components.css  ->  seiten.css
   (Seiten-CSS kommt zuletzt und darf gezielt feinjustieren.)

   Basis-Tokens (--bg, --surface, --text, --border ...) kommen aus
   base.css. Hier kommen die zusaetzlichen Layout-Tokens dazu.
   ========================================================== */

/* ---------- Zusatz-Tokens ---------- */
:root {
    /* Abstands-Skala (4px-Raster) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Radien */
    --radius-control: 8px;   /* Buttons, Inputs */
    --radius-card:    12px;   /* Cards, Modals */
    --radius-pill:    999px;  /* Badges, Chips */

    /* Schriftgroessen */
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  26px;

    /* Einheitliche Steuerelement-Hoehen  -> daher haben Buttons UND
       Inputs garantiert dieselbe Hoehe. */
    --control-h-sm: 32px;
    --control-h:    40px;
    --control-h-lg: 48px;

    /* Uebergaenge */
    --t-fast: 120ms ease;

    /* Fokus-Ring (Tastatur-Bedienung, Barrierefreiheit) */
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);

    /* Status-Farben (Erfolg / Gefahr / Warnung / Info) */
    --success:        #10b981;
    --success-hover:  #059669;
    --success-tint:   color-mix(in srgb, #10b981 12%, var(--surface));
    --success-text:   #047857;
    --success-border: color-mix(in srgb, #10b981 30%, transparent);

    --danger:         #dc2626;
    --danger-hover:   #b91c1c;
    --danger-tint:    color-mix(in srgb, #ef4444 12%, var(--surface));
    --danger-text:    #b91c1c;
    --danger-border:  color-mix(in srgb, #ef4444 30%, transparent);

    --warning:        #f59e0b;
    --warning-hover:  #d97706;
    --warning-tint:   color-mix(in srgb, #f59e0b 14%, var(--surface));
    --warning-text:   #92400e;
    --warning-border: color-mix(in srgb, #f59e0b 35%, transparent);

    --info:           var(--primary);
    --info-tint:      color-mix(in srgb, var(--primary) 12%, var(--surface));
    --info-text:      var(--primary-dark, var(--primary));
    --info-border:    color-mix(in srgb, var(--primary) 30%, transparent);

    /* ---- Kompatibilitaets-Aliase ----
       Aeltere Seiten-CSS nutzt teils Variablennamen, die NIE definiert
       waren, z.B. var(--surface-color, #fff) -> fiel immer auf den hellen
       Fallback zurueck -> weisse Flaechen im Dark-Mode (Sidebar, Hinweis-
       boxen, Modal-Felder). Hier auf die echten, theme-aware Tokens
       gemappt -> ein Fix fuer alle betroffenen Stellen. */
    --surface-color:  var(--surface);
    --input-bg:       var(--surface);
    --surface-2:      var(--surface-alt);
    --surface-hover:  var(--surface-alt);
    --border-color:   var(--border);
    --border-soft:    var(--border);
    --text-color:     var(--text);
    --background:     var(--bg-alt);
    --brand-primary:  var(--primary);
    --primary-soft:   color-mix(in srgb, var(--primary) 12%, var(--surface));
    --info-soft:      var(--info-tint);
}

/* Im Dunkel-Modus brauchen die getoenten Texte hellere Varianten,
   damit sie auf dem getoenten Hintergrund lesbar bleiben. Zentral
   hier geloest -> Seiten brauchen keinen eigenen Dark-Code mehr. */
:root[data-theme="dark"] {
    --success-text: #6ee7b7;
    --danger-text:  #fca5a5;
    --warning-text: #fcd34d;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --success-text: #6ee7b7;
        --danger-text:  #fca5a5;
        --warning-text: #fcd34d;
    }
}

/* ==========================================================
   Buttons
   ==========================================================
   Wichtig: Die "Kern-Box" gilt fuer .btn UND fuer jede einzelne
   Variante. Dadurch bekommt auch ein Button, der nur
   class="btn-danger" hat (ohne .btn), automatisch die richtige
   Hoehe -> alle Buttons sind gleich hoch.
   (.btn-link ist bewusst NICHT dabei: das ist ein Text-Link.) */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast),
                transform 60ms ease;
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-success:active,
.btn-warning:active,
.btn-ghost:active { transform: scale(0.98); }

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-ghost:focus-visible { outline: none; box-shadow: var(--ring); }

.btn:disabled, .btn[disabled],
.btn-primary:disabled, .btn-primary[disabled],
.btn-secondary:disabled, .btn-secondary[disabled],
.btn-danger:disabled, .btn-danger[disabled],
.btn-success:disabled, .btn-success[disabled],
.btn-warning:disabled, .btn-warning[disabled],
.btn-ghost:disabled, .btn-ghost[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Generische .btn (ohne Variante) = primary-Look. MUSS VOR den Varianten
   stehen, sonst gewinnt sie bei gleicher Spezifitaet (spaetere Regel) und
   macht z.B. class="btn btn-danger" faelschlich blau. */
.btn { background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-dark, var(--primary)); }

/* ---- Varianten (Farbe) ---- gewinnen, weil sie hier NACH .btn stehen */
.btn-primary   { background: var(--primary);      color: #fff; }
.btn-primary:hover   { background: var(--primary-dark, var(--primary)); }

.btn-secondary { background: var(--surface-alt);  color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }

.btn-danger    { background: var(--danger);       color: #fff; }
.btn-danger:hover    { background: var(--danger-hover); }

.btn-success   { background: var(--success);      color: #fff; }
.btn-success:hover   { background: var(--success-hover); }

.btn-warning   { background: var(--warning);      color: #fff; }
.btn-warning:hover   { background: var(--warning-hover); }

.btn-ghost     { background: transparent;         color: var(--text); }
.btn-ghost:hover     { background: var(--surface-alt); }

/* ---- Groessen ---- */
.btn-sm  { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-sm); }
.btn-lg  { min-height: var(--control-h-lg); padding: 0 var(--space-5); font-size: var(--fs-md); }

/* Voll-Breite */
.btn-block { display: flex; width: 100%; }

/* Quadratischer Icon-Button (gleiche Hoehe wie normale Buttons) */
.btn-square { padding: 0; width: var(--control-h); }
.btn-square.btn-sm { width: var(--control-h-sm); }

/* ---- Text-Link-Button (kein Kasten) ---- */
.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
}
.btn-link:hover { text-decoration: underline; }

/* Schutz: Der Ghost-/Impersonation-Banner-Button bleibt kompakt
   und wird NICHT auf Standardhoehe gezogen. */
.ghost-banner-btn { min-height: 0 !important; }

/* ==========================================================
   Formular-Elemente
   ==========================================================
   .form-row bleibt das bestehende Markup-Muster:
   <label class="form-row"><span>Label</span><input></label>
   Inputs/Selects sind genauso hoch wie Buttons (--control-h). */
.form-row { display: flex; flex-direction: column; gap: var(--space-2); }
.form-row > span,
.field-label,
.label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row select,
.form-row textarea,
.input,
.select,
.textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Textarea waechst vertikal */
.form-row textarea,
.textarea {
    min-height: 88px;
    padding: var(--space-3);
    line-height: 1.5;
    resize: vertical;
}

.form-row input:not([type="checkbox"]):not([type="radio"]):focus,
.form-row select:focus,
.form-row textarea:focus,
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.form-row input:disabled,
.form-row select:disabled,
.input:disabled, .select:disabled {
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Checkbox-/Radio-Zeile (ersetzt Inline-Styles im Markup) */
.check-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}
.check-row input { width: auto; min-height: 0; }
.check-row span { font-size: var(--fs-base); color: var(--text); font-weight: 400; }

/* Aktionsleiste unter Formularen (rechtsbuendig) */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

/* Natives Datei-Feld global theme-tauglich (sonst weisser Kasten im
   Dark-Mode). Niedrige Spezifitaet -> Seiten koennen ueberschreiben;
   versteckte (display:none) Datei-Inputs bleiben unberuehrt. */
input[type="file"] {
    max-width: 100%;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    padding: 0 var(--space-4);
    min-height: var(--control-h-sm);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--surface-alt);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast);
}
input[type="file"]::file-selector-button:hover { background: var(--border); }

/* Fallback-Fokusring fuer ALLE Formularfelder (auch in JS-Modals mit
   eigenen Zeilen-Klassen wie .de-row, .tk-form-row, .iodefs-form ...).
   Niedrige Spezifitaet (0,1,1) -> Seiten mit eigenem klassenbasiertem
   :focus gewinnen weiterhin; ueberall sonst greift dieser Ring. */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

/* ==========================================================
   Cards / Sektionen
   ========================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-4); }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.card-head h2 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}

/* Seiten-Kopf mit Marken-Akzent (wiederverwendbarer "Hero") */
.page-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 14%, var(--surface)) 0%,
        var(--surface) 100%);
    border-left: 4px solid var(--primary);
}
.page-hero h1 {
    margin: 0 0 var(--space-1);
    color: var(--text);
    font-size: var(--fs-2xl);
    font-weight: 700;
}

/* Dezenter Hilfetext / Metazeile */
.muted-text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

/* ==========================================================
   Modal / Dialog
   ========================================================== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 2000;
    padding: 80px 16px 40px;
    overflow-y: auto;
}
body.has-ghost-banner .modal { padding-top: 130px; }
.modal[hidden], .modal.hidden { display: none; }

.modal-card {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow);
    position: relative;
    margin-bottom: var(--space-4);
}
.modal-card > h3 {
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
    padding: var(--space-4) var(--space-8) 14px var(--space-6);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: var(--fs-lg);
}
.modal-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-4);
}
/* Das "x"-Icon oben rechts. Eigene Klasse, damit ein "Abbrechen"-
   Button, der ZUSAETZLICH .modal-close (= JS-Haken zum Schliessen)
   traegt, NICHT in die Ecke absolut positioniert wird. */
.modal-x {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast);
}
.modal-x:hover { color: var(--text); }

/* ==========================================================
   Alerts / Hinweise
   ========================================================== */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    margin-bottom: var(--space-4);
    font-size: var(--fs-base);
    border: 1px solid transparent;
}
.alert-success { background: var(--success-tint); color: var(--success-text); border-color: var(--success-border); }
.alert-error,
.alert-danger  { background: var(--danger-tint);  color: var(--danger-text);  border-color: var(--danger-border); }
.alert-warning { background: var(--warning-tint);  color: var(--warning-text); border-color: var(--warning-border); }
.alert-info    { background: var(--info-tint);     color: var(--info-text);    border-color: var(--info-border); }

/* ==========================================================
   Badges / Chips
   ========================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.6;
}
.badge-success { background: var(--success-tint); color: var(--success-text); border-color: var(--success-border); }
.badge-danger  { background: var(--danger-tint);  color: var(--danger-text);  border-color: var(--danger-border); }
.badge-warning { background: var(--warning-tint);  color: var(--warning-text); border-color: var(--warning-border); }
.badge-info    { background: var(--info-tint);     color: var(--info-text);    border-color: var(--info-border); }

/* ==========================================================
   Hover / Interaktion / Fokus
   ==========================================================
   base.css setzt a:hover{ text-decoration: underline } global.
   Das soll NUR fuer echte Textlinks gelten — Buttons, Cards,
   Kacheln und Navigation werden nie (auch nicht bei Hover)
   unterstrichen. Dazu dezenter Hover-Lift fuer Buttons und
   klickbare Cards. */

/* ---- keine Unterstreichung bei Komponenten-Links ---- */
a.btn, a.btn-primary, a.btn-secondary, a.btn-danger, a.btn-success, a.btn-warning, a.btn-ghost, a.btn-link,
a.btn:hover, a.btn-primary:hover, a.btn-secondary:hover, a.btn-danger:hover, a.btn-success:hover, a.btn-warning:hover, a.btn-ghost:hover,
a.card, a.card:hover, .card-link, .card-link:hover,
.dashboard-tile, .dashboard-tile:hover,
.header-menu-item, .header-menu-item:hover,
.badge, .badge:hover { text-decoration: none; }

/* ---- Buttons: weicher Hover-Lift + Schatten ---- */
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover,
.btn-success:hover, .btn-warning:hover, .btn-ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--text) 16%, transparent);
}
/* Sekundaer/Ghost (flaechig dezent) bekommen einen leichteren Schatten */
.btn-secondary:hover, .btn-ghost:hover {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 10%, transparent);
}
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-danger:active,
.btn-success:active, .btn-warning:active, .btn-ghost:active {
    transform: translateY(0) scale(0.985);
    box-shadow: none;
}

/* ---- Klickbare Cards / Kacheln: Lift + Rahmen-Akzent ---- */
a.card, .card-link, .dashboard-tile {
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
a.card:hover, .card-link:hover, .dashboard-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
a.card:active, .card-link:active, .dashboard-tile:active {
    transform: translateY(-1px);
}

/* ---- Tastatur-Fokus sichtbar fuer klickbare Cards/Kacheln ---- */
a.card:focus-visible, .card-link:focus-visible, .dashboard-tile:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Statische (nicht-klickbare) .card hebt sich NICHT an. */