/* Quixx Team-Modellierung — Eigenständiger UI-Shim (ersetzt Tailwind v4 + DaisyUI).
   Reproduziert die im Pilot genutzte Teilmenge (btn / card / navbar / textarea +
   ein paar Utilities) auf Basis der bestehenden --qs-*-Tokens (qs-theme.css).
   KEINE Palette-Duplikation: die DaisyUI-Kompat-Tokens LEITEN aus --qs-* ab
   (verifiziert wertgleich), folgen also automatisch jedem Theme-Wechsel.
   Kein Build, direkt geladen (wie qs-theme.css). */

/* Design-Sprache (zentral): EIN Satz Radius-/Fokus-Tokens für ALLE Buttons,
   Eingaben und Karten → konsistentes, ruhiges Erscheinungsbild (runde Ecken
   statt rechteckig, weicher Fokus-Ring). Einmal hier ändern = überall wirksam. */
:root {
    --radius-field: 7px;   /* Buttons, Inputs, Textareas */
    --radius-box: 10px;    /* Karten/Panels */
    --qs-focus-ring: 0 0 0 2px color-mix(in srgb, var(--qs-accent, #7dd3fc) 22%, transparent);
}

/* ── Button (= DaisyUI .btn): neutral/gefüllt, inline-flex zentriert ─────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 16px; box-sizing: border-box;
    border-radius: var(--radius-field, 6px);
    background: var(--qs-panel, #1a1d22); color: var(--qs-text, #e8eaed);
    border: 1px solid var(--qs-border-soft, #2a2e36);
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.5;
    cursor: pointer; white-space: nowrap; user-select: none;
    transition: background .12s ease, border-color .12s ease, filter .12s ease;
}
.btn:hover { background: var(--qs-panel-2, #1e232b); }
.btn:focus-visible { outline: none; box-shadow: var(--qs-focus-ring); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Größen-Modifier */
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
/* Modal-Fußleisten: EINE Höhe für alle Knöpfe — der Bestand mischte .btn (40px)
   mit .btn-primary.btn-sm (32px) nebeneinander (Nutzer-Meldung 2026-07-25). */
.tm-modal-foot .btn { height: 34px; padding: 0 14px; font-size: 13px; }

/* Farb-Modifier */
.btn-primary {
    background: var(--qs-accent, #7dd3fc); border-color: var(--qs-accent, #7dd3fc);
    color: var(--qs-on-accent, #0b0e12);   /* Schrift auf Akzent — Token deckt ALLE 4 Themes
       (das frühere [data-theme="light"]-Override matchte "v2-light" NICHT -> schwarz auf dunkelblau) */
}
.btn-primary:hover { background: var(--qs-accent, #7dd3fc); filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--qs-text, #e8eaed); }
.btn-ghost:hover { background: var(--qs-panel-2, #1e232b); border-color: transparent; }

/* Form-Modifier */
.btn-circle { padding: 0; border-radius: 50%; aspect-ratio: 1 / 1; }

/* ── Card (Lobby; Fläche/Padding setzt zusätzlich `.overlay .card`) ─────── */
.card {
    display: flex; flex-direction: column;
    background: var(--qs-panel, #1a1d22); color: var(--qs-text, #e8eaed);
    border: 1px solid var(--qs-border, #333a44); border-radius: var(--radius-box, 8px);
}

/* ── Navbar (Header) ────────────────────────────────────────────────────── */
.navbar {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    background: var(--qs-panel, #1a1d22); color: var(--qs-text, #e8eaed);
}

/* ── Form-Controls (Standard für ALLE Eingaben) ─────────────────────────────
   Gemeinsame Design-Sprache: weicher --qs-input-border-Rahmen, runde Ecken
   (--radius-field), Fokus-Ring. Greift auf .field input (Lobby/Popover) sowie
   jedes mit .input/.field-input markierte Feld. Spezifische Layouts (Breite,
   Monospace …) bleiben dem Aufrufer überlassen. */
.field input, .field select, .input, .qs-form-field {
    box-sizing: border-box; height: 38px; padding: 0 11px;
    border-radius: var(--radius-field, 7px);
    background: var(--qs-input-bg, var(--qs-bg, #0f1115));
    border: 1px solid var(--qs-input-border, var(--qs-border-soft, #2a2e36));
    color: var(--qs-text, #e6e6e6); font: inherit; font-size: 14px; outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder, .input::placeholder, .qs-form-field::placeholder { color: var(--qs-text-mute, #6b7280); }
.field input:focus-visible, .field select:focus-visible, .input:focus-visible, .qs-form-field:focus-visible {
    border-color: var(--qs-accent, #7dd3fc); box-shadow: var(--qs-focus-ring);
}

/* ── Textarea (1×: Element-Kommentar) ───────────────────────────────────── */
.textarea {
    width: 100%; box-sizing: border-box; padding: 6px 9px;
    border-radius: var(--radius-field, 6px);
    background: var(--qs-input-bg, #0f1115); color: var(--qs-text, #e8eaed);
    border: 1px solid var(--qs-input-border, #2a2e36); font: inherit; font-size: 13px;
    resize: vertical;
}
.textarea-bordered { border: 1px solid var(--qs-input-border, #2a2e36); }
.textarea-sm { font-size: 12px; padding: 5px 8px; }
.textarea:focus-visible { outline: none; border-color: var(--qs-accent, #7dd3fc); box-shadow: var(--qs-focus-ring); }

/* ── Genutzte Tailwind-Utility-Teilmenge ────────────────────────────────── */
.text-base { font-size: 1rem; }
.text-xl { font-size: 1.25rem; line-height: 1.4; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.shrink-0 { flex-shrink: 0; }

/* ── Preflight-Ersatz: native Button-Chrome unterdrücken (tat Tailwind) ──── */
button {
    font-family: inherit; line-height: inherit; color: inherit;
    -webkit-appearance: button; appearance: button;
}