/*
 * DesignTuner — DEV-Werkzeug für die Feinabstimmung von --fn-* Tokens
 * im laufenden Browser. Wird beim Projektabschluss wieder entfernt
 * (siehe Memory "design-tuner-rechte-sidebar-dev").
 *
 * Aufbau:
 *   1) Override-Selektoren — body[data-*] schaltet einzelne Tokens lokal.
 *      Wirkt ÜBER den globalen tokens.css-Wert, ohne tokens.css zu ändern.
 *   2) Tuner-Sidebar-UI — fest am rechten Rand, ein-/ausklappbar.
 *
 * Regel (FinNavigator-DesignTokens.md): keine rohen Hex-Werte ausserhalb
 * der Token-Definition. Hex-Werte in den Override-Selektoren sind die
 * EINZIGEN erlaubten Roh-Werte hier, weil dies eine Variante-Tabelle ist.
 */

/* ────────────────────────────────────────────────────────────────────────
 * 1) Token-Overrides via body[data-*]
 * ──────────────────────────────────────────────────────────────────────── */

/* Eingabefeld-Hintergrund (--fn-input-bg) — wirkt auf Text-Inputs + FlatDateControl */
body[data-tuner-input-bg="bg"].dark-mode          { --fn-input-bg: #0a1220; }
body[data-tuner-input-bg="bg-alt"].dark-mode      { --fn-input-bg: #0c1626; }
body[data-tuner-input-bg="bg-muted"].dark-mode    { --fn-input-bg: #0f1b2d; }
body[data-tuner-input-bg="surface-mid"].dark-mode { --fn-input-bg: #152035; }
body[data-tuner-input-bg="surface"].dark-mode     { --fn-input-bg: #11203a; }
body[data-tuner-input-bg="surface-alt"].dark-mode { --fn-input-bg: #12233d; }
body[data-tuner-input-bg="hover"].dark-mode       { --fn-input-bg: #16294a; }

/* Scrollbar-/native-Akzent — gemeinsame Variablen für Scrollbar + Checkbox.
   Default-Track = --fn-input-bg (Konsistenz mit Inputs/Listbox/DateControl-Popup). */
body {
    --tuner-accent:      var(--fn-primary);
    --tuner-track:       var(--fn-input-bg);
    --tuner-thumb:       var(--fn-cat-blue-soft);
    --tuner-thumb-hover: var(--fn-cat-blue);
    --tuner-cb-accent:   var(--fn-primary);
}
body[data-tuner-ctl="primary-subtle"]  { --tuner-thumb: var(--fn-bg-muted);       --tuner-thumb-hover: var(--fn-hover); }
body[data-tuner-ctl="primary-strong"]  { --tuner-thumb: var(--fn-border-strong);  --tuner-thumb-hover: var(--fn-text-tertiary); }
body[data-tuner-ctl="cat-blue"]        { --tuner-thumb: var(--fn-cat-blue-soft);  --tuner-thumb-hover: var(--fn-cat-blue); }
body[data-tuner-ctl="cat-teal"]        { --tuner-thumb: var(--fn-cat-teal-soft);  --tuner-thumb-hover: var(--fn-cat-teal); }
body[data-tuner-ctl="cat-gold"]        { --tuner-thumb: var(--fn-cat-gold-soft);  --tuner-thumb-hover: var(--fn-cat-gold); }
body[data-tuner-ctl="neutral-grey"]    { --tuner-thumb: var(--fn-border);         --tuner-thumb-hover: var(--fn-border-strong); }

/* Checkbox-Accent unabhängig von Scrollbar */
body[data-tuner-cb="primary"]        { --tuner-cb-accent: var(--fn-primary); }
body[data-tuner-cb="cat-blue"]       { --tuner-cb-accent: var(--fn-cat-blue); }
body[data-tuner-cb="cat-teal"]       { --tuner-cb-accent: var(--fn-cat-teal); }
body[data-tuner-cb="cat-blue-soft"]  { --tuner-cb-accent: var(--fn-cat-blue-soft); }
body[data-tuner-cb="text-secondary"] { --tuner-cb-accent: var(--fn-text-secondary); }
body[data-tuner-cb="border-strong"]  { --tuner-cb-accent: var(--fn-border-strong); }
body[data-tuner-cb="success"]        { --tuner-cb-accent: var(--fn-success); }
body[data-tuner-cb="warning"]        { --tuner-cb-accent: var(--fn-warning); }

/* Die globalen Regeln (app.css) lesen ab jetzt aus --tuner-* statt direkt aus tokens.
   Checkbox: appearance:none-Box (siehe app.css), :checked-Hintergrund + Häkchen
   tönt durch --tuner-cb-accent. Radio bleibt native (accent-color). */
body[data-tuner-active="true"] input[type="radio"]            { accent-color: var(--tuner-cb-accent); }
body[data-tuner-active="true"] input[type="checkbox"]:checked { background: var(--tuner-cb-accent); border-color: var(--tuner-cb-accent); }
body[data-tuner-active="true"] ::-webkit-scrollbar-track       { background: var(--tuner-track); }
body[data-tuner-active="true"] ::-webkit-scrollbar-thumb       { background: var(--tuner-thumb); }
body[data-tuner-active="true"] ::-webkit-scrollbar-thumb:hover { background: var(--tuner-thumb-hover); }
body[data-tuner-active="true"] { scrollbar-color: var(--tuner-thumb) var(--tuner-track); }

/* ────────────────────────────────────────────────────────────────────────
 * 2) Tuner-Sidebar-UI
 * ──────────────────────────────────────────────────────────────────────── */

.design-tuner {
    position: fixed;
    top: 0; right: 0; bottom: 32px;   /* bottom: 32 px = Platz für log-panel */
    width: 280px;
    background: var(--fn-surface);
    border-left: var(--fn-border-width) dashed var(--fn-warning);
    box-shadow: var(--fn-elevation-3);
    z-index: 9000;
    display: flex; flex-direction: column;
    transition: width .22s ease, transform .22s ease;
}
/* Eingeklappt KOMPLETT aus dem Viewport schieben — als 36px-Streifen (width-Variante)
   überdeckte der Tuner sonst dauerhaft die rechte Kante der Markt-Feed-Sidebar
   (Collapse-Button, Datum, Pin-Buttons) und fing deren Klicks ab. */
.design-tuner.collapsed { transform: translateX(100%); }
.design-tuner.collapsed .design-tuner-body { display: none; }

.design-tuner-handle {
    position: absolute;
    /* Vertikal zentriert statt top:12px — der Griff lag sonst genau über dem
       Header der Markt-Feed-Sidebar. */
    top: 50%; left: -1px;
    transform: translate(-100%, -50%);
    width: 28px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fn-surface);
    border: var(--fn-border-width) dashed var(--fn-warning);
    border-right: none;
    border-radius: var(--fn-radius-sm) 0 0 var(--fn-radius-sm);
    color: var(--fn-warning);
    cursor: pointer;
    font-size: 11px;
    font-weight: var(--fn-font-weight-bold);
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 8px 2px;
    user-select: none;
}
.design-tuner-handle:hover { background: var(--fn-hover); color: var(--fn-text); }

.design-tuner-head {
    padding: 10px 14px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--fn-warning); font-weight: var(--fn-font-weight-bold);
}
.design-tuner-close {
    background: transparent; border: none; color: var(--fn-text-tertiary);
    font-size: 14px; cursor: pointer; padding: 0 4px;
}
.design-tuner-close:hover { color: var(--fn-text); }

.design-tuner-body {
    display: flex; flex-direction: column; gap: 14px;
    padding: 12px 14px; overflow-y: auto;
}

.design-tuner-block {
    display: flex; flex-direction: column; gap: 6px;
    border: 0; padding: 0; margin: 0;
}
.design-tuner-block legend {
    font-size: 10.5px; font-weight: var(--fn-font-weight-bold);
    color: var(--fn-text); text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0;
}
.design-tuner-block .hint {
    font-size: 10.5px; color: var(--fn-text-tertiary); line-height: 1.4;
}
.design-tuner-listbox {
    width: 100%;
    background: var(--fn-input-bg); color: var(--fn-text);
    border: var(--fn-border-width) solid var(--fn-input-border);
    border-radius: var(--fn-radius-sm);
    font-family: var(--fn-font-mono); font-size: 11px;
    padding: 4px;
}
.design-tuner-listbox option { padding: 4px 6px; }
.design-tuner-listbox option:checked {
    background: var(--fn-accent-soft); color: var(--fn-text);
}
.design-tuner-current {
    font-family: var(--fn-font-mono); font-size: 10px;
    color: var(--fn-text-tertiary);
}
.design-tuner-foot {
    margin-top: auto; padding: 8px 14px;
    border-top: var(--fn-border-width) solid var(--fn-border);
    font-size: 10px; color: var(--fn-text-tertiary);
}