/* ==========================================================================
   KickMetrix Design Tokens  (v2.0)
   Gemeinsames Fundament fuer Landing Page und eingeloggten Bereich.
   Aenderungen hier wirken global. Dark Mode via [data-theme="dark"].
   ========================================================================== */

:root {
  /* Markenfarben */
  --mm-primary: #C94432;
  --mm-primary-hover: #B93828;
  --mm-primary-soft: #FFEAE6;
  --mm-on-primary: #FFFFFF;

  /* Neutrale Flaechen & Text */
  --mm-ink: #2E2E38;
  --mm-ink-2: #5A5F6E;
  --mm-muted: #676C78;
  --mm-bg: #F7F9FC;
  --mm-surface: #FFFFFF;
  --mm-surface-2: #F8F9FA;
  --mm-border: #E6E8EE;
  --mm-border-strong: #D1D5DB;

  /* Semantische Farben */
  --mm-success: #198754;
  --mm-success-soft: #DFF6ED;
  --mm-success-ink: #1B8A5A;
  --mm-warning: #FD7E14;
  --mm-warning-ink: #B45309;
  --mm-warning-soft: #FFF3E6;
  --mm-danger: #DC3545;
  --mm-danger-soft: #FFE5E2;
  --mm-danger-ink: #C2392B;
  --mm-info: #185FA5;
  --mm-info-soft: #EAF0FB;

  /* Modell-Farben (Ensemble) */
  --mm-model-predicd: #85B7EB;
  --mm-model-dc: #5DCAA5;
  --mm-model-market: #EF9F27;
  --mm-model-elo: #AFA9EC;

  /* Radius-Skala */
  --mm-r-sm: 8px;
  --mm-r-md: 12px;
  --mm-r-lg: 16px;
  --mm-r-xl: 24px;
  --mm-r-pill: 50px;

  /* Schatten */
  --mm-shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --mm-shadow-md: 0 6px 20px rgba(0,0,0,0.06);
  --mm-shadow-lg: 0 10px 30px rgba(0,0,0,0.08);

  /* Spacing (8px-Raster) */
  --mm-space-1: 8px;
  --mm-space-2: 16px;
  --mm-space-3: 24px;
  --mm-space-4: 32px;

  /* Transitions */
  --mm-t-fast: 0.15s ease;
  --mm-t: 0.2s ease;
}

[data-theme="dark"] {
  --mm-ink: #E8EAED;
  --mm-ink-2: #C2C5CC;
  --mm-muted: #9AA0AC;
  --mm-bg: #15171C;
  --mm-surface: #1E2128;
  --mm-surface-2: #23262E;
  --mm-border: #2C2F38;
  --mm-border-strong: #3A3E48;

  --mm-primary-soft: #3A2420;
  --mm-success-soft: #142A20;
  --mm-success-ink: #5DCAA5;
  --mm-warning-soft: #2E2310;
  --mm-danger-soft: #2E1A18;
  --mm-danger-ink: #F09595;
  --mm-info-soft: #14233A;
  --mm-surface-2: #23262E;

  --mm-shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
  --mm-shadow-md: 0 6px 20px rgba(0,0,0,0.40);
  --mm-shadow-lg: 0 10px 30px rgba(0,0,0,0.50);
}

/* Globale Theme-Anwendung auf den Body (sanfter Uebergang) */
body {
  transition: background-color var(--mm-t), color var(--mm-t);
}

/* Skeleton-Loader (global) */
@keyframes mm-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.mm-skeleton {
  background: var(--mm-surface-2);
  background-image: linear-gradient(90deg, var(--mm-surface-2) 0px, var(--mm-border) 40px, var(--mm-surface-2) 80px);
  background-size: 600px 100%;
  animation: mm-shimmer 1.4s infinite linear;
  border-radius: var(--mm-r-sm);
}
.mm-skeleton-card { height: 180px; border-radius: var(--mm-r-lg); margin-bottom: 1rem; }
.mm-skeleton-line { height: 14px; margin: 8px 0; }

/* Empty State (global) */
.mm-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--mm-muted);
}
.mm-empty i { font-size: 2.5rem; color: var(--mm-border-strong); display: block; margin-bottom: 1rem; }
.mm-empty h5 { color: var(--mm-ink); font-weight: 600; }

/* Theme-Toggle Button */
.mm-theme-toggle {
  background: transparent;
  border: 1px solid var(--mm-border);
  color: var(--mm-ink-2);
  border-radius: var(--mm-r-pill);
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--mm-t);
}
.mm-theme-toggle:hover { background: var(--mm-surface-2); color: var(--mm-primary); }
[data-theme="dark"] .mm-theme-toggle .bi-moon-stars-fill { display: none; }
[data-theme="dark"] .mm-theme-toggle .bi-sun-fill { display: inline-block; }
.mm-theme-toggle .bi-sun-fill { display: none; }
.mm-theme-toggle .bi-moon-stars-fill { display: inline-block; }

/* Signal-Ring (SVG-basiert, ersetzt Emoji) */
.mm-signal-ring { display: inline-block; vertical-align: middle; }
.mm-signal-ring .ring-track { stroke: var(--mm-border); }
.mm-signal-ring .ring-val-green { stroke: var(--mm-success); }
.mm-signal-ring .ring-val-yellow { stroke: var(--mm-warning); }
.mm-signal-ring .ring-val-red { stroke: var(--mm-danger); }
.mm-signal-ring .ring-text { fill: var(--mm-ink); font-weight: 600; }

/* Ensemble-Leiste */
.mm-ensemble-bar {
  border-left: 3px solid var(--mm-primary);
  background: var(--mm-surface-2);
  border-radius: 0 var(--mm-r-md) var(--mm-r-md) 0;
  transition: background var(--mm-t);
}
.mm-ensemble-bar:hover { background: var(--mm-primary-soft); }
.mm-model-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; margin: 4px 0; }
.mm-model-row .label { width: 92px; color: var(--mm-muted); }
.mm-model-row .track { flex: 1; height: 6px; background: var(--mm-bg); border-radius: 3px; overflow: hidden; }
.mm-model-row .fill { height: 100%; border-radius: 3px; }
.mm-model-row .val { width: 36px; text-align: right; color: var(--mm-ink); }