/* SubjectAnalysisPanel — moderne Fach-Analyse (Version 1.5.0)
   Verwendet bewusst die Variablen aus style.css und passt sich an Light/Dark an.
   Pro Fach wird die jeweilige Fach-Farbe (--sa-color) als Akzent verwendet. */

.sa-wrap{
  --sa-color:#7B4BDE;
  --sa-color-soft:rgba(123,75,222,.12);
  --sa-color-strong:rgba(123,75,222,.85);
  margin-top:0.75rem;
}

/* Pillen-Wrapper: Platz für Pfeile links/rechts */
.sa-pills-wrap{
  position:relative;
  /* Reservierter Platz, damit Pillen nie unter die Pfeile rutschen */
  padding:0 36px;
}

/* Pfeil-Buttons: links + rechts, dunkel wenn aktiv, hell wenn nicht scrollbar */
.sa-pills-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--c-border,#e5e7eb);
  background:var(--c-card,#fff);
  color:rgba(0,0,0,.18); /* heller Default = "kann hier nicht scrollen" */
  display:none; /* erst sichtbar wenn .has-overflow gesetzt */
  align-items:center;justify-content:center;
  cursor:pointer;font-size:.85rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sa-pills-wrap.has-overflow .sa-pills-arrow{display:flex}
.sa-pills-arrow-left{left:0}
.sa-pills-arrow-right{right:0}
.sa-pills-arrow.is-active{
  color:rgba(0,0,0,.6);
  border-color:rgba(0,0,0,.18);
  box-shadow:0 4px 10px rgba(0,0,0,.10);
}
.sa-pills-arrow:hover.is-active{
  color:var(--c-text-dark,#111);
  border-color:var(--c-text-dark,#111);
  transform:translateY(-50%) scale(1.05);
}
.sa-pills-arrow:disabled{cursor:default}
.sa-pills-arrow:focus{outline:none}
.sa-pills-arrow:focus-visible{
  outline:2px solid var(--c-primary,#7B4BDE);
  outline-offset:2px;
}

/* Fach-Pillen – horizontal scrollbar mit Platz für Schatten */
.sa-pills{
  display:flex;gap:.5rem;
  overflow-x:auto;overflow-y:visible;
  /* extra padding oben/unten damit hover-Schatten + translateY(-1px) sichtbar bleiben */
  padding:.65rem .25rem .85rem;
  margin:0;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scroll-padding:0 .25rem;
}
/* dezente Scrollbar im Webkit */
.sa-pills::-webkit-scrollbar{height:6px}
.sa-pills::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:999px}
.sa-pills::-webkit-scrollbar-track{background:transparent}

/* Soft fade-edges, damit Pillen nicht "hart" unter die Pfeile laufen */
.sa-pills-wrap.has-overflow::before,
.sa-pills-wrap.has-overflow::after{
  content:"";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;
  z-index:2;
  opacity:.85;
  transition:opacity .2s ease;
}
.sa-pills-wrap.has-overflow::before{
  left:30px;
  background:linear-gradient(to right, var(--c-bg-main,#fff) 0%, transparent 100%);
}
.sa-pills-wrap.has-overflow::after{
  right:30px;
  background:linear-gradient(to left, var(--c-bg-main,#fff) 0%, transparent 100%);
}

/* Dark Mode */
[data-theme="dark"] .sa-pills-arrow{
  background:var(--c-card,#1f2937);
  color:rgba(255,255,255,.25);
  border-color:rgba(255,255,255,.15);
}
[data-theme="dark"] .sa-pills-arrow.is-active{
  color:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.3);
}
[data-theme="dark"] .sa-pills-arrow:hover.is-active{
  color:#fff;border-color:#fff;
}
[data-theme="dark"] .sa-pills-wrap.has-overflow::before{
  background:linear-gradient(to right, var(--c-bg-main,#0f172a) 0%, transparent 100%);
}
[data-theme="dark"] .sa-pills-wrap.has-overflow::after{
  background:linear-gradient(to left, var(--c-bg-main,#0f172a) 0%, transparent 100%);
}

.sa-pill{
  flex:0 0 auto;display:inline-flex;gap:.5rem;align-items:center;
  padding:.45rem .75rem;border-radius:999px;cursor:pointer;
  background:var(--c-card,#fff);border:1px solid var(--c-border,#e5e7eb);
  font-size:.85rem;font-weight:600;color:var(--c-text-dark,#111);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
  scroll-snap-align:start;
}
.sa-pill:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.sa-pill .sa-dot{width:9px;height:9px;border-radius:50%;background:var(--sa-color)}
.sa-pill .sa-grade{
  font-size:.75rem;font-weight:800;padding:.1rem .45rem;border-radius:6px;
  background:var(--sa-color);color:#fff;
}
.sa-pill .sa-arrow{font-size:.7rem;font-weight:700;opacity:.85}
.sa-pill .sa-arrow.up{color:#10B981}
.sa-pill .sa-arrow.down{color:#EF4444}
.sa-pill .sa-arrow.flat{color:var(--c-text-light,#6b7280)}
.sa-pill.active{
  background:linear-gradient(135deg, var(--sa-color), color-mix(in srgb, var(--sa-color) 70%, #fff 30%));
  color:#fff;border-color:transparent;
  box-shadow:0 8px 20px color-mix(in srgb, var(--sa-color) 35%, transparent);
}
.sa-pill.active .sa-grade{background:#fff;color:var(--sa-color)}
.sa-pill.active .sa-arrow.flat{color:rgba(255,255,255,.85)}

/* Detail-Panel */
.sa-panel{
  display:grid;grid-template-columns:repeat(12, 1fr);gap:1rem;margin-top:.5rem;
}
.sa-panel .sa-card{
  grid-column:span 12;
  background:var(--c-card,#fff);
  border:1px solid var(--c-border,#e5e7eb);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  overflow:hidden;
  position:relative;
}
.sa-card.sa-c8{grid-column:span 8}
.sa-card.sa-c6{grid-column:span 6}
.sa-card.sa-c4{grid-column:span 4}
@media (max-width: 900px){
  .sa-card.sa-c8,.sa-card.sa-c6,.sa-card.sa-c4{grid-column:span 12}
}

.sa-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1rem 1.1rem .25rem;flex-wrap:wrap;
}
.sa-head h3{margin:0;font-size:1rem;font-weight:700;color:var(--c-text-dark,#111);display:flex;align-items:center;gap:.5rem}
.sa-head .sa-sub{font-size:.78rem;color:var(--c-text-light,#6b7280);margin-top:.15rem}
.sa-head .sa-accent{width:8px;height:24px;border-radius:4px;background:var(--sa-color);margin-right:.25rem}

/* KPI-Streifen oben im Panel */
.sa-kpi-row{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:.5rem;
  padding:.75rem 1.1rem 1rem;
}
@media (max-width:700px){.sa-kpi-row{grid-template-columns:repeat(2, 1fr)}}
.sa-kpi{
  background:var(--sa-color-soft);
  border:1px solid color-mix(in srgb, var(--sa-color) 25%, transparent);
  border-radius:12px;padding:.65rem .8rem;
}
.sa-kpi .lab{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--c-text-light,#6b7280);font-weight:700}
.sa-kpi .vl{font-size:1.25rem;font-weight:800;color:var(--c-text-dark,#111);margin-top:.1rem;display:flex;align-items:center;gap:.4rem}
.sa-kpi .vl small{font-size:.7rem;font-weight:700;padding:.1rem .35rem;border-radius:6px}
.sa-kpi .vl small.up{background:#D1FAE5;color:#065F46}
.sa-kpi .vl small.dn{background:#FEE2E2;color:#991B1B}
.sa-kpi .vl small.fl{background:#E5E7EB;color:#374151}

/* Clickable KPI (e.g. Ziel) */
.sa-kpi-clickable{transition:background .2s, transform .15s;border-radius:10px}
.sa-kpi-clickable:hover{background:var(--sa-color-soft, rgba(123,75,222,.08));transform:scale(1.03)}
.sa-kpi-clickable:active{transform:scale(0.97)}
.sa-kpi-cta{font-size:.75rem;font-weight:600;color:var(--sa-color, #7B4BDE);opacity:.85;display:flex;align-items:center;gap:.3rem}

/* Open exam row highlight */
.sa-exam:has(.gd:not([style*="10B981"]):not([style*="84CC16"]):not([style*="F59E0B"]):not([style*="F97316"]):not([style*="EF4444"])){cursor:pointer}
.sa-exam:hover{background:rgba(0,0,0,.03);border-radius:8px}

/* SVG-Chart Wrapper */
.sa-chart-wrap{padding:.25rem .5rem 1rem;position:relative}
.sa-chart-wrap svg{width:100%;height:240px;display:block}
.sa-chart-tt{
  position:absolute;pointer-events:none;
  background:var(--c-card,#fff);color:var(--c-text-dark,#111);
  border:1px solid var(--c-border,#e5e7eb);
  font-size:.75rem;padding:.4rem .55rem;border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transform:translate(-50%,-130%);opacity:0;transition:opacity .15s ease;
  white-space:nowrap;z-index:5;
}
.sa-chart-tt b{color:var(--sa-color)}
.sa-legend{display:flex;gap:.9rem;flex-wrap:wrap;padding:0 1.1rem 1rem;color:var(--c-text-light,#6b7280);font-size:.75rem}
.sa-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:.4rem;vertical-align:middle}

/* Donut */
.sa-donut{display:flex;align-items:center;gap:1rem;padding:.5rem 1.1rem 1rem}
.sa-donut svg{width:120px;height:120px;flex:0 0 auto}
.sa-donut .sa-don-lab{flex:1;display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--c-text-light,#6b7280)}
.sa-donut .sa-don-lab .ln{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.sa-donut .sa-don-lab .sw{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:.4rem}
.sa-donut .sa-don-lab b{color:var(--c-text-dark,#111);font-weight:700}

/* Insights-Karten */
.sa-insights{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 1.1rem 1rem}
.sa-insight{
  display:flex;gap:.65rem;align-items:flex-start;padding:.7rem .8rem;border-radius:12px;
  background:var(--c-bg-light,#F9FAFB);
  border:1px solid var(--c-border,#e5e7eb);
}
.sa-insight.good{border-color:#A7F3D0;background:#ECFDF5}
.sa-insight.warn{border-color:#FCD34D;background:#FFFBEB}
.sa-insight.bad {border-color:#FCA5A5;background:#FEF2F2}
.sa-insight .ic{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  font-size:.85rem;background:#fff;border:1px solid var(--c-border,#e5e7eb);
}
.sa-insight.good .ic{color:#059669;border-color:#A7F3D0}
.sa-insight.warn .ic{color:#B45309;border-color:#FCD34D}
.sa-insight.bad .ic{color:#B91C1C;border-color:#FCA5A5}
.sa-insight h4{margin:0 0 .15rem;font-size:.85rem;font-weight:700;color:var(--c-text-dark,#111)}
.sa-insight p{margin:0;font-size:.8rem;color:var(--c-text-dark,#111);opacity:.85;line-height:1.45}
.sa-insight b{color:var(--c-text-dark,#111)}

/* AI-Card */
.sa-ai{
  margin:.5rem 1.1rem 1rem;padding:.85rem 1rem;border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--sa-color) 12%, transparent), transparent);
  border:1px solid color-mix(in srgb, var(--sa-color) 30%, var(--c-border,#e5e7eb));
}
.sa-ai-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.sa-ai-head .ttl{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--c-text-dark,#111)}
.sa-ai-head .ttl i{color:var(--sa-color)}
.sa-ai-quota{font-size:.72rem;color:var(--c-text-light,#6b7280);background:#fff;border:1px solid var(--c-border,#e5e7eb);padding:.2rem .55rem;border-radius:999px;font-weight:600}
.sa-ai-quota.low{color:#92400E;background:#FFFBEB;border-color:#FCD34D}
.sa-ai-quota.empty{color:#991B1B;background:#FEF2F2;border-color:#FCA5A5}
.sa-ai-body{margin-top:.5rem;font-size:.85rem;color:var(--c-text-dark,#111);line-height:1.5;white-space:pre-wrap}
.sa-ai-body.empty{color:var(--c-text-light,#6b7280);font-style:italic}
.sa-ai-actions{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.sa-btn{
  padding:.45rem .8rem;border-radius:10px;border:1px solid var(--c-border,#e5e7eb);
  background:#fff;color:var(--c-text-dark,#111);font-size:.78rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;transition:transform .15s ease, box-shadow .15s ease;
}
.sa-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.sa-btn.primary{
  background:var(--sa-color);color:#fff;border-color:transparent;
}
.sa-btn:disabled{opacity:.55;cursor:not-allowed}

/* Was-wäre-wenn / Forecast */
.sa-sim{padding:.5rem 1.1rem 1rem}
.sa-sim-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.sa-sim-head .now{
  font-size:1.6rem;font-weight:800;color:var(--sa-color);
  background:var(--sa-color-soft);border-radius:10px;padding:.35rem .65rem;
}
.sa-sim-head .arrow{color:var(--c-text-light,#6b7280)}
.sa-sim-head .future{display:flex;flex-direction:column}
.sa-sim-head .future .lab{font-size:.7rem;color:var(--c-text-light,#6b7280);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.sa-sim-head .future .vl{font-size:1.6rem;font-weight:800;color:var(--c-text-dark,#111)}
/* Was-wäre-wenn-Slider-Zeile (Mobile-First, zweizeiliges Grid).
   ─────────────────────────────────────────────────────────────────
   Frühere Versuche mit „Label – Slider – Wert" in einer einzigen Zeile
   sind auf iPhone-Screens (≤390px) immer wieder am Wert-Element
   gescheitert: WebKits Range-Inputs haben eine implizite Min-Breite
   von ~150px und drücken alles, was rechts daneben steht, über den
   Card-Rand hinaus.
   
   Lösung: Wert wandert in eine ZWEITE Zeile direkt UNTER dem Slider.
   Layout:
     ┌──────────────────────────────┐
     │ Label │ ───── Slider ─────── │   ← Zeile 1
     ├──────────────────────────────┤
     │                  WERT-RECHTS │   ← Zeile 2
     └──────────────────────────────┘
   - Zeile 1 nutzt `display:grid` mit `auto 1fr`: Label nimmt nur seine
     Inhalts­breite ein, der Slider füllt den Rest.
   - Zeile 2 stellt den Wert klein, rechtsbündig, in der Theme-Farbe
     dar. Das macht den aktiven Wert deutlich auffindbar (Kindfarbe)
     und garantiert sichtbar — egal wie schmal das Display.
   ───────────────────────────────────────────────────────────────── */
.sa-sim-row{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:.6rem;
  row-gap:.15rem;
  margin-top:.7rem;
}
.sa-sim-row label{
  grid-row:1;
  grid-column:1;
  font-size:.8rem;
  color:var(--c-text-light,#6b7280);
  white-space:nowrap;
}
.sa-sim-row input[type=range]{
  grid-row:1;
  grid-column:2;
  width:100%;
  min-width:0;
  accent-color:var(--sa-color);
}
.sa-sim-row .out{
  grid-row:2;
  grid-column:2;       /* unter dem Slider */
  justify-self:end;
  font-size:.78rem;
  font-weight:700;
  color:var(--sa-color);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  /* Damit der Wert nicht direkt am Slider „klebt", sondern leicht
     darunter sitzt — bewusst ohne min-width, weil `justify-self:end`
     den Wert immer am Slider-Ende hält. */
  padding:.05rem .15rem 0 0;
}

/* Sehr schmale Screens (≤380px): Auch das Label wandert in eine
   eigene Zeile — der Slider bekommt dann die volle Card-Breite,
   was bei 360px-Screens spürbar mehr Wuchtigkeit für den Touch
   erzeugt. Reihenfolge im Markup bleibt unverändert; wir
   arrangieren das Grid neu auf 1 Spalte / 3 Zeilen. */
@media (max-width:380px){
  .sa-sim-row{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:.25rem;
  }
  .sa-sim-row label{grid-row:1;grid-column:1}
  .sa-sim-row input[type=range]{grid-row:2;grid-column:1}
  .sa-sim-row .out{grid-row:3;grid-column:1}
}

/* Stärken/Schwächen */
.sa-strengths{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.5rem 1.1rem 1rem}
@media (max-width:700px){.sa-strengths{grid-template-columns:1fr}}
.sa-strength{
  background:var(--c-bg-light,#F9FAFB);border:1px solid var(--c-border,#e5e7eb);
  border-radius:12px;padding:.65rem .8rem;
}
.sa-strength .nm{font-size:.78rem;font-weight:700;color:var(--c-text-light,#6b7280);display:flex;align-items:center;gap:.4rem}
.sa-strength .vl{font-size:1.25rem;font-weight:800;margin:.2rem 0 .35rem;color:var(--c-text-dark,#111)}
.sa-strength .bar{height:6px;background:#E5E7EB;border-radius:6px;overflow:hidden}
.sa-strength .bar i{display:block;height:100%;background:var(--sa-color);border-radius:6px}

/* Prüfungsliste */
.sa-exams{padding:.5rem 1.1rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.sa-exam{
  display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:.6rem;
  padding:.55rem .7rem;border-radius:10px;background:var(--c-bg-light,#F9FAFB);
  border:1px solid var(--c-border,#e5e7eb);font-size:.82rem;
  border-left:4px solid var(--sa-color);
}
.sa-exam .nm{font-weight:600;color:var(--c-text-dark,#111)}
.sa-exam .dt{color:var(--c-text-light,#6b7280);font-size:.72rem}
.sa-exam .ty{
  font-size:.7rem;font-weight:700;padding:.15rem .45rem;border-radius:6px;
  background:var(--sa-color-soft);color:var(--sa-color);
}
.sa-exam .gd{
  font-size:.95rem;font-weight:800;padding:.15rem .55rem;border-radius:8px;color:#fff;min-width:42px;text-align:center;
}

/* Empty States */
.sa-empty{padding:1rem;color:var(--c-text-light,#6b7280);font-size:.85rem;text-align:center;font-style:italic}

/* Trend / Klassen-Linien */
.sa-line-grade{stroke:var(--sa-color);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sa-line-trend{stroke:color-mix(in srgb, var(--sa-color) 70%, #000 30%);stroke-width:2;stroke-dasharray:4 4;fill:none}
.sa-line-target{stroke:#F59E0B;stroke-width:1.5;stroke-dasharray:3 5;fill:none}
.sa-area-grade{fill:url(#sa-grad-area)}
.sa-dot{fill:var(--sa-color);stroke:#fff;stroke-width:2;cursor:pointer;transition:r .15s ease}
.sa-dot:hover{r:6.5}

/* Header der Sektion in renderAnalytics */
.sa-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin:1rem 0 .5rem;
}
.sa-section-title h2{margin:0;font-size:1.05rem;font-weight:700}
.sa-section-title .sa-section-sub{font-size:.78rem;color:var(--c-text-light,#6b7280)}