/* ============================================================
   Modernes Design — opt-in via html.modern (Einstellungen → Allgemein →
   Darstellung). Reine CSS-Schicht: ist die Klasse nicht gesetzt, greift KEINE
   Regel → exakt das klassische Design, keine Laufzeitkosten.

   Performance-Regeln (bewusst): KEIN backdrop-filter / blur, KEINE Filter,
   KEINE Transitions auf Layout-/Scroll-Eigenschaften, KEINE Schatten auf
   Listen-/Baumzeilen. Nur Farb-/Radius-/Border-Overrides (Tokens, einmalig)
   plus dezente Hover-Transitions auf interaktiver Chrome (kosten nur beim
   Hover). Das meiste kommt gratis, weil die App durchgehend Design-Tokens nutzt.
   ============================================================ */

/* ---- Tokens: dunkel (Basis liegt auf :root = html, daher html.modern) ---- */
html.modern {
  --bg: #0e1014;
  --panel: #16181e;
  --panel2: #1f232b;
  --line: #272c36;
  --text: #e8eaef;
  --muted: #99a2b2;
  --accent: #4f8ef7;
  --accent-dim: #22314c;
  --radius: 12px;
  --shadow: 0 12px 40px -10px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .32);
}

/* ---- Tokens: hell (Basis liegt auf body[data-theme=light]) ---- */
html.modern body[data-theme="light"] {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel2: #eef1f6;
  --line: #e4e8ef;
  --text: #191d24;
  --muted: #667085;
  --accent: #2f6fde;
  --accent-dim: #dbe8ff;
  --shadow: 0 12px 40px -10px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .07);
}

/* ---- Weichere, interaktive Chrome (Transitions nur auf Farbe/Rand/Schatten) ---- */
html.modern .btn,
html.modern .input,
html.modern input.input,
html.modern select.input,
html.modern .settings input[type="text"],
html.modern .settings input[type="password"],
html.modern .settings input[type="search"],
html.modern #search-input {
  border-radius: 9px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
html.modern .icon-btn {
  border-radius: 9px;
  transition: background-color .13s ease, color .13s ease;
}
html.modern .btn-primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 84%, #000));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
html.modern .btn-primary:hover { box-shadow: 0 3px 12px rgba(47, 111, 222, .4); }

/* Eingabefelder: klarer Fokus-Ring statt harter Kante */
html.modern .input:focus,
html.modern input.input:focus,
html.modern select.input:focus,
html.modern #search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}

/* ---- Tabs: weichere obere Ecken, aktiver Tab mit Akzent-Kante ---- */
html.modern .tab {
  border-radius: 10px 10px 0 0;
  transition: background-color .13s ease, color .13s ease;
}
html.modern .tab.active,
html.modern .tab.on {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- Baum-/Listenzeilen: runde Auswahl-Fläche, sanfter Hover ---- */
html.modern .tree-row,
html.modern .sb-row,
html.modern .fv-row {
  border-radius: 8px;
  transition: background-color .12s ease;
}
html.modern .tree-row.selected,
html.modern .tree-row.active {
  background: var(--accent-dim);
}

/* ---- Karten: weicher + sanftes Anheben beim Hover (transform = GPU-billig,
   nur während des Hovers, nie im Leerlauf) ---- */
html.modern .fv-card,
html.modern .home-card {
  border-radius: var(--radius);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
html.modern .fv-card:hover,
html.modern .home-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5);
}

/* ---- Moderne, schlanke Scrollbars (billig, rein visuell) ---- */
html.modern * {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
html.modern ::-webkit-scrollbar { width: 10px; height: 10px; }
html.modern ::-webkit-scrollbar-track { background: transparent; }
html.modern ::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
html.modern ::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ---- Modale: der --shadow-Token trägt schon die weichere Tiefe; Rand feiner ---- */
html.modern .modal-box,
html.modern .modal { border-radius: 14px; }