/* ════════════════════════════════════════════════════════════════════════
   AN Zentrale — Design-System (design-system-v1, 2026-07-17)
   ─────────────────────────────────────────────────────────────────────────
   DIE eine Wahrheit fuer Farben, Typografie, Radius, Schatten und Zustaende.
   MUI/Material-inspiriert (Tokens, Elevation, State-Layer), umgesetzt fuer
   den bestehenden Stack: Bootstrap 5.3 + Vanilla JS, KEIN Framework.

   Regeln (Details: .claude/skills/an-design-system/SKILL.md):
   1. NIEMALS neue Hex-Farben in Templates — immer var(--…) aus dieser Datei.
   2. Diese Datei aendert NUR Optik (Farbe/Typo/Radius/Schatten/Fokus),
      NIEMALS Layout (display/position/width/height/flex/grid).
   3. Laedt als LETZTES im <head> von base.html → gewinnt gegen Bootstrap
      und base-Inline-Styles; Seiten-eigene <style>-Bloecke gewinnen weiter
      (gewollt: schrittweise Migration ohne Brueche).
   4. Nach Aenderung: Cache-Buster ?v=N am <link> in base.html bumpen.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─ Hell-Modus (Default) ──────────────────────────────────── */
:root {
  /* Marke */
  --gold:        #8a6e3e;   /* Interaktions-Gold: Buttons, Links, aktive Zustaende (Kontrast ≥4.5:1 auf Weiss) */
  --gold-hover:  #7a5c28;
  --dark:        #1a1a1a;   /* Marken-Schwarz: Sidebar, Header, Logo-Grund */
  --sidebar-w:   240px;

  /* Semantische Farben — einheitlich im ganzen System:
     rot = Risiko/ueberfaellig · orange = in Arbeit/wartend · gruen = erledigt/bezahlt
     blau = Kunde/Info · gold = Hauptaktion/Marke · grau = Archiv/ruhig */
  --an-rot:        #dc2626;
  --an-rot-bg:     rgba(220,38,38,.10);
  --an-rot-text:   #991b1b;
  --an-orange:     #f59e0b;
  --an-orange-bg:  rgba(245,158,11,.12);
  --an-orange-text:#92400e;
  --an-gruen:      #16a34a;
  --an-gruen-bg:   rgba(22,163,74,.10);
  --an-gruen-text: #15803d;
  --an-blau:       #2563eb;
  --an-blau-bg:    rgba(37,99,235,.10);
  --an-blau-text:  #1e40af;
  --an-gold:       #b89d6c;  /* Marken-Gold: Badges, Deko, Unread-Punkte (NICHT fuer Text auf Weiss) */
  --an-gold-bg:    rgba(184,157,108,.12);
  --an-gold-border: rgba(184,157,108,.45); /* sanfte Gold-Linien (z.B. Kalender-Raster) */
  --an-gold-text:  #6b5520;
  --an-grau:       #6b7280;
  --an-grau-bg:    rgba(107,114,128,.10);
  --an-grau-text:  #374151;

  /* Flaechen & Text */
  --bg-body:       #f4f6f9;
  --bg-card:       #ffffff;
  --bg-muted:      #f8f9fa;
  --bg-hover:      #eef1f4;
  --text-primary:  #212529;
  --text-muted:    #6c757d;
  --border-color:  #dee2e6;
  --sidebar-bg:    #1a1a1a;
  --sidebar-hover: #2a2a2a;
  --sidebar-text:  #e0e0e0;

  /* Links (dunkler als --gold fuer Fliesstext-Kontrast) */
  --link:          #7a5c28;
  --link-hover:    #5f471e;

  /* Typografie */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --fs-xs:   .75rem;    /* 12px — Meta, Zeitstempel */
  --fs-sm:   .8125rem;  /* 13px — Sekundaertext, Tabellen-Dichte */
  --fs-md:   .875rem;   /* 14px — Standard-UI-Text */
  --fs-base: 1rem;      /* 16px — Fliesstext */
  --fs-lg:   1.125rem;  /* 18px — Karten-Titel */
  --fs-xl:   1.375rem;  /* 22px — Seiten-Titel */
  --fs-2xl:  1.75rem;   /* 28px — Dashboard-Zahlen */

  /* Form (Radius-Skala) */
  --radius-sm: 7px;     /* Inputs, Buttons, Chips */
  --radius:    10px;    /* Dropdowns, Alerts, kleine Karten */
  --radius-lg: 14px;    /* Cards, Modals, Sheets */

  /* Elevation (MUI-Stufen; Karte < Menue < Dialog) */
  --elev-1: 0 1px 2px rgba(26,26,26,.05), 0 1px 3px rgba(26,26,26,.08);
  --elev-2: 0 2px 6px rgba(26,26,26,.07), 0 6px 16px rgba(26,26,26,.09);
  --elev-3: 0 8px 28px rgba(26,26,26,.18), 0 2px 8px rgba(26,26,26,.08);
  --shadow-card: var(--elev-1);

  /* Zustaende */
  --focus-ring: 0 0 0 .2rem rgba(138,110,62,.22);
  --hover-layer: rgba(26,26,26,.045);   /* Material state layer auf hellen Flaechen */
}

/* ── 2. TOKENS ─ Dunkel-Modus ──────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg-body:       #121418;
  --bg-card:       #1e2128;
  --bg-muted:      #252932;
  --bg-hover:      #2d323d;
  --text-primary:  #e8eaed;
  --text-muted:    #9aa0a6;
  --border-color:  #3a3f4a;
  --sidebar-bg:    #0a0b0d;
  --sidebar-hover: #23252a;
  --sidebar-text:  #cccccc;

  /* --gold bleibt bewusst theme-INVARIANT (dunkles Interaktions-Gold auch im
     Dark): dutzende Alt-Regeln in Seiten-CSS kombinieren hart color:#fff mit
     var(--gold)-Flaechen — ein helles Dark-Gold macht die unlesbar. Erst wenn
     alle Seiten aufs Token-System migriert sind, kann Primary im Dark heller
     werden (MUI-Prinzip). Links sind reiner Text → duerfen hell sein: */
  --link:        #cfb684;
  --link-hover:  #ddc79c;

  --an-rot-text:   #f2a3a3;
  --an-orange-text:#f5c37a;
  --an-gruen-text: #86dba5;
  --an-blau-text:  #9db9f5;
  --an-gold-text:  #d9c7a6;
  --an-grau-text:  #b6bcc6;

  --shadow-card: 0 2px 8px rgba(0,0,0,.5);
  --elev-1: 0 1px 3px rgba(0,0,0,.4);
  --elev-2: 0 2px 8px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
  --elev-3: 0 10px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --focus-ring: 0 0 0 .2rem rgba(184,157,108,.30);
  --hover-layer: rgba(255,255,255,.06);
}

/* ── 3. Akzent-Umschaltung (Einstellungen → localStorage 'an-accent') ──── */
html[data-accent="blau"]    { --gold:#3b82f6; --gold-hover:#2563eb; }
html[data-accent="gruen"]   { --gold:#10b981; --gold-hover:#059669; }
html[data-accent="rot"]     { --gold:#ef4444; --gold-hover:#dc2626; }
html[data-accent="violett"] { --gold:#8b5cf6; --gold-hover:#7c3aed; }
html[data-accent="orange"]  { --gold:#f97316; --gold-hover:#ea580c; }
html[data-accent="pink"]    { --gold:#ec4899; --gold-hover:#db2777; }

/* ── 4. BOOTSTRAP-BRIDGE ─ zieht Bootstrap 5.3 aufs Token-System ───────── */
/* Doppelt selektiert (html + [data-bs-theme]) damit unsere Werte auch im
   Bootstrap-Dark gegen dessen eigene Variablen gewinnen. */
html, html[data-bs-theme="dark"], [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-color);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--bg-muted);
  --bs-tertiary-bg: var(--bg-muted);
  --bs-emphasis-color: var(--text-primary);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-primary: var(--gold);
  --bs-primary-rgb: 138,110,62;
  --bs-body-font-family: var(--font-sans);
}

body { font-family: var(--font-sans); }

/* Buttons: primary + die historisch gewachsene .btn-gold werden identisch */
.btn { border-radius: var(--radius-sm); }
.btn.rounded-pill { border-radius: 50rem; }
.btn.rounded-circle { border-radius: 50%; }
.btn-primary, .btn-gold {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gold-hover);
  --bs-btn-hover-border-color: var(--gold-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--gold-hover);
  --bs-btn-active-border-color: var(--gold-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--gold);
  --bs-btn-disabled-border-color: var(--gold);
  background: var(--gold) !important;      /* schlaegt alte !important-Regeln in base.html */
  border-color: var(--gold) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-gold:hover,
.btn-primary:active, .btn-gold:active {
  background: var(--gold-hover) !important;
  border-color: var(--gold-hover) !important;
  color: #fff !important;
}
.btn-outline-primary {
  --bs-btn-color: var(--link);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-bg: var(--gold);
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--gold);
  --bs-btn-active-border-color: var(--gold);
  --bs-btn-active-color: #fff;
}
/* Fokus: ein Ring, ueberall gleich (statt Bootstrap-Blau) */
.btn:focus-visible,
.form-control:focus, .form-select:focus,
.form-check-input:focus,
a:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}
.form-control:focus, .form-select:focus { border-color: var(--gold); }

/* Formulare */
/* Native, unklassifizierte Inputs/Selects/Textareas erben sonst das weisse
   Browser-Default und leuchten im Dark-Mode (z.B. Suchfelder in /mails).
   :where() = Spezifitaet 0 -> jede bestehende Regel gewinnt weiterhin. */
:where(input:not([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="button"],[type="submit"],[type="reset"]), select, textarea) {
  background-color: var(--bg-card);
  color: var(--text-primary);
}
.form-control, .form-select { border-radius: var(--radius-sm); }
.form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.form-switch .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }

/* Karten, Dialoge, Menues — Elevation-Hierarchie */
.card { border-radius: var(--radius-lg); border-color: var(--border-color); }
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--elev-3); }
.dropdown-menu { border-radius: var(--radius); border-color: var(--border-color); box-shadow: var(--elev-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover); }
.dropdown-item.active { background: var(--gold); color:#fff; }
.toast { border-radius: var(--radius); box-shadow: var(--elev-2); }
.alert { border-radius: var(--radius); }

/* Navigation */
.nav-pills .nav-link { border-radius: var(--radius-sm); }
.nav-pills .nav-link.active { background-color: var(--gold); color:#fff; }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--gold); font-weight: 600; }
.page-link { color: var(--link); }
.page-item.active .page-link { background-color: var(--gold); border-color: var(--gold); color:#fff; }

/* Badges & Chips */
.badge { border-radius: 6px; font-weight: 600; letter-spacing: .2px; }
.badge.rounded-pill { border-radius: 50rem; }
.bg-primary { background-color: var(--gold) !important; }

/* Tabellen: nur Farben/Linien, kein Layout */
.table > :not(caption) > * > * { border-color: var(--border-color); }
.table-hover > tbody > tr:hover > * { background-color: var(--bg-hover); box-shadow: none; }

/* Auswahl & Scrollbars (Light; Dark steckt in base.html) */
::selection { background: rgba(184,157,108,.35); }
html:not([data-theme="dark"]) ::-webkit-scrollbar { width: 8px; height: 8px; }
html:not([data-theme="dark"]) ::-webkit-scrollbar-track { background: transparent; }
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: #c9ced6; border-radius: 4px; }
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: #aab1bb; }

/* Sanfte Uebergaenge nur fuer Farbwechsel (Theme-Toggle), nicht fuer Layout */
@media (prefers-reduced-motion: no-preference) {
  .btn, .card, .form-control, .form-select, .nav-link, .dropdown-item, .badge {
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
  }
}
