/* ══════════════════════════════════════════════════════════════════
   EasyCare — Design-System (neues Design, Migration Etappe D1)
   Spec: docs/spec/spec_dashboard_redesign.md

   #FGC12.7.26 ANALYSE (Fachentscheid Felix: Option B, kein React):
   - Tokens 1:1 aus dem Design-Prototyp übernommen
     (docs/zz-dokumentationen/Claude-Design, shared/tokens.css).
   - Alle Klassen mit ec-Präfix, KEINE Bootstrap-Klassen überschrieben;
     der violette Seitenhintergrund gilt nur innerhalb .ec-page →
     Regressionsrisiko für die übrige App: null. Bestehende ec-Namen
     (style.css: ec-sidebar, ec-main-content, ec-mobile-topbar,
     ec-offcanvas) sind geprüft kollisionsfrei.
   - Inter self-hosted (Fachentscheid 6): Google liefert Inter als
     VARIABLE FONT — eine woff2-Datei (latin) deckt alle Gewichte
     100–900 ab, daher genau eine @font-face-Deklaration mit
     font-weight-Spanne statt vier Einzeldateien. Nicht-lateinische
     Zeichen (z.B. kyrillisch) fallen auf system-ui zurück — akzeptiert.
   - Diese Datei wird in base.html NACH Bootstrap und style.css geladen
     und gewinnt damit gleichrangige Kaskaden-Konflikte.
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-latin-var.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Brand / Violett ── */
  --ec-purple:        #7D33D0;
  --ec-purple-dark:   #5B1EA8;
  --ec-purple-soft:   #F2EAFB;
  --ec-purple-softer: #FAF5FF;

  /* ── Flächen ── */
  --ec-page-bg:       #FBF7FE;
  --ec-card:          #FFFFFF;
  --ec-border:        #EBE6F2;
  --ec-border-strong: #D7CFE3;

  /* ── Schrift-Töne ── */
  --ec-text:          #15101F;
  --ec-body:          #4A4256;
  --ec-meta:          #867E94;
  --ec-meta-soft:     #A8A2B5;

  /* ── Status ── */
  --ec-red:           #D92D20;
  --ec-red-bg:        #FEEFEC;
  --ec-orange:        #E8732A;
  --ec-orange-bg:     #FFE9D7;
  --ec-amber:         #D9A123;
  --ec-amber-ink:     #8A6310;
  --ec-amber-bg:      #FFF5DA;
  --ec-green:         #2E8C4F;
  --ec-green-bg:      #E1F5E7;
  --ec-blue:          #2563C9;
  --ec-blue-bg:       #E8F0FC;

  --ec-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Seiten-Wrapper (Scope des neuen Designs) ──────────────────── */
.ec-page {
  background: var(--ec-page-bg);
  font-family: var(--ec-font-sans);
  color: var(--ec-text);
  padding: 28px 32px;
  min-height: 100%;
}
.ec-page h1, .ec-page h2, .ec-page h3 { font-family: var(--ec-font-sans); }

.ec-page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ec-text);
  margin: 0;
}
.ec-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--ec-body);
}
.ec-date-chip i { color: var(--ec-purple); }

/* ── Karte ─────────────────────────────────────────────────────── */
.ec-card {
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
}
.ec-card-pad { padding: 22px 24px; }
.ec-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ec-text);
  margin: 0;
}
/* Farbiger Akzentbalken vor Panel-Titeln (Prototyp: "Kritische Informationen") */
.ec-card-title-bar {
  display: inline-block;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--ec-orange);
  margin-right: 10px;
  vertical-align: -3px;
}

/* ── KPI-Kachel ────────────────────────────────────────────────── */
.ec-kpi-card {
  display: block;
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms, box-shadow 150ms;
}
a.ec-kpi-card:hover {
  color: inherit;
  text-decoration: none;
  border-color: var(--ec-border-strong);
  box-shadow: 0 2px 10px rgba(125, 51, 208, 0.08);
}
.ec-kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ec-meta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ec-kpi-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ec-text);
  margin-top: 4px;
  line-height: 1.15;
}
.ec-kpi-card.ec-kpi-warn .ec-kpi-value { color: var(--ec-red); }
/* #FGC14.7.26 Unterzeile der Kachel (Vorjahres-Delta, Finanzen-Tab F1) */
.ec-kpi-sub {
  font-size: 12px;
  color: var(--ec-meta);
  margin-top: 2px;
}

/* Sparkline: 8 dekorative Balken. #FGC12.7.26 Bewusst FESTE Muster-Höhen
   per nth-child (Fachentscheid 5: Anzeige mit Muster-Zahlen + Vermerk) —
   es gibt noch keine persistierte Verlaufs-Historie; echte Daten kommen
   mit dem DashboardSnapshot-Modell (Etappe D3). */
.ec-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  margin-top: 12px;
}
.ec-sparkline span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--ec-purple-soft);
  min-width: 5px;
}
.ec-sparkline span:last-child { background: var(--ec-purple); }
.ec-sparkline span:nth-child(1) { height: 40%; }
.ec-sparkline span:nth-child(2) { height: 50%; }
.ec-sparkline span:nth-child(3) { height: 60%; }
.ec-sparkline span:nth-child(4) { height: 50%; }
.ec-sparkline span:nth-child(5) { height: 70%; }
.ec-sparkline span:nth-child(6) { height: 60%; }
.ec-sparkline span:nth-child(7) { height: 80%; }
.ec-sparkline span:nth-child(8) { height: 95%; }
.ec-spark-note {
  font-size: 11px;
  color: var(--ec-meta-soft);
  margin-top: 4px;
}

/* ── Pill-Slider (Segmented Control) ───────────────────────────── */
.ec-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;              /* 8 Optionen: horizontales Wischen statt Umbruch */
  padding-bottom: 4px;           /* Platz für Fokus-Ring/Scrollbar */
  margin-bottom: 24px;
}
.ec-pill {
  white-space: nowrap;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--ec-border-strong);
  background: var(--ec-card);
  color: var(--ec-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 150ms;
}
.ec-pill:hover { background: var(--ec-purple-soft); color: var(--ec-purple-dark); }
.ec-pill.active {
  background: var(--ec-purple);
  border-color: var(--ec-purple);
  color: #fff;
}
.ec-pill.active:hover { color: #fff; }

/* ── Listenzeile (Pendenzen / Kritische Informationen) ─────────── */
.ec-list-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ec-border);
  transition: background 120ms;
}
.ec-list-row:last-child { border-bottom: none; }
.ec-list-row:hover { background: var(--ec-purple-softer); }
.ec-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ec-purple-soft);
  color: var(--ec-purple-dark);
  font-size: 15px;
}
.ec-row-icon.ec-tone-danger  { background: var(--ec-red-bg);    color: var(--ec-red); }
.ec-row-icon.ec-tone-orange  { background: var(--ec-orange-bg); color: var(--ec-orange); }
.ec-row-icon.ec-tone-warning { background: var(--ec-amber-bg);  color: var(--ec-amber-ink); }
.ec-row-icon.ec-tone-info    { background: var(--ec-blue-bg);   color: var(--ec-blue); }
.ec-row-icon.ec-tone-success { background: var(--ec-green-bg);  color: var(--ec-green); }
.ec-row-title { font-size: 15px; font-weight: 600; color: var(--ec-text); }
.ec-row-body  { font-size: 13px; color: var(--ec-body); margin-top: 2px; line-height: 1.5; }
.ec-row-meta  { font-size: 12px; color: var(--ec-meta-soft); margin-top: 4px; }
.ec-row-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--ec-purple);
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.ec-row-cta:hover { color: var(--ec-purple-dark); text-decoration: underline; }

/* ── Badge ─────────────────────────────────────────────────────── */
.ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.ec-badge-danger  { background: var(--ec-red-bg);    color: var(--ec-red); }
.ec-badge-orange  { background: var(--ec-orange-bg); color: var(--ec-orange); }
.ec-badge-success { background: var(--ec-green-bg);  color: var(--ec-green); }
.ec-badge-info    { background: var(--ec-blue-bg);   color: var(--ec-blue); }
/* "Muster"-Vermerk (Fachentscheide 3+5): bewusst auffälliges Amber,
   damit Platzhalter-Daten nicht als echte Zahlen durchgehen. */
.ec-badge-muster  { background: var(--ec-amber-bg);  color: var(--ec-amber-ink); }

/* ── Button / Link-Aktionen ────────────────────────────────────── */
.ec-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--ec-font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms;
}
.ec-btn-primary { background: var(--ec-purple); color: #fff; }
.ec-btn-primary:hover { background: var(--ec-purple-dark); color: #fff; }
.ec-btn-soft { background: var(--ec-purple-soft); color: var(--ec-purple-dark); }
.ec-btn-soft:hover { background: var(--ec-purple); color: #fff; }