/* ============================================================
   MASTERMIND DESIGN SYSTEM — mm-theme.css  (v1)
   Eine Linie für alle Dashboards: optisch · logisch · haptisch.
   Wird global via mm-theme.js geladen (wie nav.js).
   Strategie: kanonische Design-Tokens auf :root erzwingen +
   sanfte Komponenten-Harmonisierung. Überschreibt abweichende
   lokale Werte, ohne bestehende Layouts zu brechen.
   ============================================================ */

/* ---- 1) DESIGN TOKENS (kanonisch, !important gegen lokale Drift) ---- */
:root{
  /* Flächen / Hintergrund */
  --bg:        #07070f !important;
  --surface:   #0f0f1a !important;
  --surface2:  #161625 !important;
  --surface3:  #1d1d31 !important;
  --border:    #26263a !important;
  --border2:   #34344e !important;

  /* Akzente — Mastermind-Signatur: Indigo → Violett + Neon-Türkis */
  --accent:    #6366f1 !important;
  --accent2:   #8b5cf6 !important;
  --neon:      #00ffe5 !important;
  --pink:      #ff4fd8 !important;

  /* Status */
  --green:  #10b981 !important;
  --yellow: #f59e0b !important;
  --red:    #ef4444 !important;
  --blue:   #3b82f6 !important;

  /* Text */
  --text:   #e7ebf3 !important;
  --text2:  #9aa6bd !important;
  --text3:  #64748b !important;

  /* Form / Rhythmus */
  --radius:    16px !important;
  --radius-sm: 11px !important;
  --radius-lg: 22px !important;
  --radius-pill: 999px !important;

  /* Schatten — eine konsistente Tiefen-Skala */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.28) !important;
  --shadow:    0 12px 34px rgba(0,0,0,.30) !important;
  --shadow-lg: 0 22px 60px rgba(0,0,0,.42) !important;
  --glow:      0 0 24px rgba(99,102,241,.30) !important;

  /* Spacing-Skala (4px-Raster) */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:22px; --sp6:32px;

  /* Motion — eine Easing-Linie */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .15s var(--ease);
  --t:      .22s var(--ease);

  /* Gradients */
  --grad-accent: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  --grad-panel:  linear-gradient(180deg,#161625,rgba(22,22,37,.78)) !important;

  color-scheme: dark;
}

/* ---- 2) BASIS ---- */
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Display-Schrift NUR für Marken/Hero/Kennzahlen — bewusst sparsam,
   damit kein unruhiger Font-Mix entsteht. Fließtext bleibt Inter. */
.logo,.hero-title,.mm-display,#clock{
  font-family:'Orbitron',monospace !important;
}
/* Große Kennzahlen behalten Display-Font, ABER kurze Status-Strings
   (Offline/Bereit/Online …) bleiben in lesbarem Sans. */
.stat-value{ font-family:'Orbitron',monospace !important; }
.status-pill,.status-pill *,.stat-sub,.badge,.pill{ font-family:'Inter',sans-serif !important; }
/* Pixel/Retro-Fonts (Share Tech Mono etc.) auf Inter normalisieren,
   außer explizit als .mm-mono / code / pre markiert. */
code,pre,kbd,samp,.mm-mono{ font-family:'JetBrains Mono','Share Tech Mono',monospace !important; }

/* ---- 3) KARTEN / PANELS — gemeinsame Tiefe & Form ---- */
.panel,.card,.mm-card,.stat-card,.command-btn,.mode-btn,.quick-btn,
.hint-box,.timeline-item,.response-card,.selected-box,.preview-wrap{
  border-radius:var(--radius) !important;
  border:1px solid var(--border) !important;
}
.panel,.card,.mm-card{
  background:rgba(15,15,26,.92) !important;
  box-shadow:var(--shadow) !important;
}
/* Einheitlicher, dezenter Hover-Glow für interaktive Karten —
   ersetzt die uneinheitlichen farbigen Ecken-Glows. */
.command-btn,.mode-btn,.quick-btn,.stat-card{
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast) !important;
}
.command-btn:hover,.mode-btn:hover,.quick-btn:hover,.stat-card:hover{
  border-color:rgba(99,102,241,.38) !important;
  box-shadow:var(--shadow),0 0 0 1px rgba(99,102,241,.12) !important;
}

/* ---- 4) BUTTONS — eine haptische Sprache ---- */
button,.btn,.tb-btn,.mini-btn,.dn-btn,.fab-btn,[role="button"]{
  font-family:'Inter',sans-serif !important;
  transition:transform var(--t-fast),box-shadow var(--t-fast),
             background var(--t-fast),border-color var(--t-fast),color var(--t-fast) !important;
}
/* Haptik: subtiler Lift bei Hover, klares Feedback bei Klick */
button:hover,.btn:hover,.tb-btn:hover,.mini-btn:hover,
.command-btn:hover,.mode-btn:hover,.quick-btn:hover{
  transform:translateY(-2px);
}
button:active,.btn:active,.tb-btn:active,.mini-btn:active,
.command-btn:active,.mode-btn:active,.quick-btn:active,.fab-btn:active{
  transform:translateY(0) scale(.985);
}
/* Primär-Aktion = IMMER Mastermind-Indigo-Gradient (systemweit fix,
   unabhängig vom Modul-Branding). Eine CTA-Sprache überall. */
.btn.primary,.tb-btn.primary,.mini-btn.primary,button.primary,
.btn-primary,[class*="primary"]:is(button,.btn,a){
  background:var(--grad-accent) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:var(--glow) !important;
}

/* ---- 5) INPUTS — konsistent + sichtbarer Fokus ---- */
input,textarea,select{
  font-family:'Inter',sans-serif !important;
  background:var(--surface2) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--text) !important;
  transition:border-color var(--t-fast),box-shadow var(--t-fast) !important;
}
input:focus,textarea:focus,select:focus{
  outline:none !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.22) !important;
}
::placeholder{ color:var(--text3) !important; }

/* ---- 6) PILLS / BADGES / STATUS ---- */
.status-pill,.hm-pill,.cb-badge,.command-badge,.badge,.pill{
  border-radius:var(--radius-pill) !important;
}

/* ---- 7) LINKS & FOKUS (Accessibility/Haptik) ---- */
a{ transition:color var(--t-fast); }
*:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:2px;
  border-radius:4px;
}

/* ---- 8) SCROLLBARS — einheitlich dünn ---- */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:var(--border2); border-radius:var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
*{ scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }

/* ---- 9) TABELLEN — lesbar & konsistent ---- */
table{ border-collapse:collapse !important; }
th{
  color:var(--text3) !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.5px; font-size:.72rem !important;
}
td,th{ border-bottom:1px solid var(--border) !important; }
tr:hover td{ background:rgba(255,255,255,.02) !important; }

/* ---- 10) MOTION-RESPEKT ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- 11) FLOATING-ELEMENTE — Kollisionen vermeiden ---- */
/* Klare z-index-Hierarchie: FAB ganz oben, Badges darunter. */
.fab{ z-index:2147483600 !important; }
.fab-lbl{
  background:rgba(0,0,0,.9) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-pill) !important;
}
/* Floating-Badges (z.B. CLAUDE-Badge, Modus-Buttons) bekommen einen
   soliden Hintergrund + Padding, damit sie nicht transparent über
   Sidebar-Content "durchbluten" und unlesbar werden. */
.floating-badge,.float-badge,.mm-floating,[class*="floating-"]{
  z-index:2147483500 !important;
  background:rgba(10,10,18,.92) !important;
  backdrop-filter:blur(8px) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-pill) !important;
  padding:4px 10px !important;
}


/* ---- 12) NAV — zuverlässig oben fixiert ---- */
/* Die geteilte Dashboard-Nav klebt immer oben, unabhängig von der
   jeweiligen Seitenstruktur (Topbar/Header/keine). sticky+top:0 mit
   solidem Hintergrund verhindert Verrutschen & Durchscheinen. */
nav.dash-nav{
  position:sticky !important;
  top:var(--mm-nav-top,0px) !important;
  z-index:1200 !important;
  background:rgba(7,7,15,.92) !important;
  backdrop-filter:blur(10px) !important;
  border-bottom:1px solid var(--border) !important;
}
/* Floating-Variante (Seiten ohne Anker) bleibt fix oben zentriert. */
nav.dash-nav.dash-nav--floating{
  position:fixed !important;
  top:10px !important;
}

/* ---- 13) SELEKTION ---- */
::selection{ background:rgba(99,102,241,.35); color:#fff; }