/* ============================================================
   Statistik-Panel "Schalttafel" (partials/stat_panel.php)
   Gemeinsam für Startseite und Admin-Dashboard.
   Das Layout richtet sich nach der Breite des PANELS selbst
   (Container-Queries), nicht nach dem Fenster - so passt es sich
   auch an, wenn der Container schmaler ist als das Fenster.
     unter 560 px   Smartphone: einspaltig / 2 Spalten, Aktivität als Legenden-Liste
     ab 560 px      mittel: 2x2 (Zeiger, Top-Zeiger, Zeiger, Meldungen gesamt), 2 Anzeigen, 4 Wahrnehmungen
     ab 860 px      Desktop: 3 Zeiger nebeneinander (Top Meldungen/Flug in der Mitte), darunter gesamt / Registrierte Melder (Zuwachs-Zeiger) / Beschwerden,
                    dann 4 Wahrnehmungen,
                    Aktivität mit Namen direkt unter dem Balken (eine Reihe)
   ============================================================ */
.sp{container-type:inline-size;background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:1rem;font-family:'Inter',system-ui,sans-serif}
.sp-cell{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0}
.sp-click{cursor:pointer;transition:border-color .15s}
.sp-click:hover{border-color:var(--text3)}
.sp-lbl{font-size:.75rem;color:var(--text3);line-height:1.3}
.sp-num{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:1.65rem;font-weight:600;line-height:1.15;color:var(--text);letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.sp-sub{font-size:.75rem;color:var(--text3);margin-top:2px}
/* Gesamtzahl + "+X neue Melder" in einer Zeile (Kachel "Registrierte Melder"); wird es
   zu schmal, rutscht der grüne Zusatz automatisch darunter. */
.sp-num-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.sp-new{font-size:.8rem;font-weight:600;color:var(--text3);white-space:nowrap}
.sp-new.up{color:#15803d}
[data-theme="dark"] .sp-new.up{color:#4ade80}
.sp-num small{font-size:.8rem;font-weight:400;color:var(--text3);letter-spacing:0;margin-left:5px}
/* "Meldungen gesamt" (links) und "Dieser Monat" (am rechten Rand der Kachel), beide
   gleich groß, der Text im rechten Block bleibt linksbündig. Reicht die Breite nicht für
   beide nebeneinander, rutscht der Monatswert automatisch darunter (flex-wrap) und steht
   dann links - ohne Breakpoint, entscheidet allein der verfügbare Platz. */
.sp-gs-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:6px 18px}

.sp-grid{display:grid;gap:8px;margin-bottom:8px;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"g1 g1" "g3 g3" "g2 g2" "gs gs" "rg rg" "bm bm" "t1 t2" "t3 t4"}
.sp-a-g1{grid-area:g1}.sp-a-g2{grid-area:g2}.sp-a-g3{grid-area:g3}.sp-a-gs{grid-area:gs}
.sp-a-rg{grid-area:rg}.sp-a-bm{grid-area:bm}
.sp-a-t1{grid-area:t1}.sp-a-t2{grid-area:t2}.sp-a-t3{grid-area:t3}.sp-a-t4{grid-area:t4}

.sp-gc{display:flex;align-items:center;gap:12px}
.sp-gauge{flex-shrink:0;width:96px;height:auto}
.sp-needle{transform-origin:60px 64px;transition:transform .8s cubic-bezier(.34,1.4,.64,1)}

.sp-badge{display:inline-block;font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:8px;margin-top:3px;white-space:nowrap}
.sp-badge.up{background:rgba(34,197,94,.16);color:#15803d}
.sp-badge.down{background:rgba(204,31,45,.14);color:#b91c1c}
.sp-badge.flat{background:var(--bg3);color:var(--text2)}
.sp-badge.gold{background:rgba(239,159,39,.2);color:#854F0B}
.sp-badge.info{background:rgba(55,138,221,.16);color:#1d62a8}
[data-theme="dark"] .sp-badge.up{color:#4ade80}
[data-theme="dark"] .sp-badge.gold{color:#f5b95a}
[data-theme="dark"] .sp-badge.down{color:#f87171}
[data-theme="dark"] .sp-badge.info{color:#7cb8f0}

.sp-tag{display:flex;flex-direction:column;gap:7px}
.sp-tag-top{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text);flex-wrap:wrap}
.sp-tag-top i{font-size:.9rem;color:var(--text3)}
.sp-led{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden}
.sp-led div{height:100%;background:#378ADD;border-radius:3px}
.sp-tag-nums{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px}
.sp-tag-nums div{display:flex;flex-direction:column}
.sp-tag-nums b{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:600;font-size:.88rem;color:var(--text);white-space:nowrap}
.sp-tag-nums span{font-size:.7rem;color:var(--text3)}

.sp-act-hd{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sp-stack{display:flex;height:26px;border-radius:8px;overflow:hidden;margin:8px 0 10px;gap:1px;background:var(--bg3)}
/* Werte direkt im Balkenabschnitt (Rückmeldung 05.10.2026): jeder Abschnitt ist
   selbst ein Container und zeigt die ANZAHL nur, wenn er breit genug dafür ist -
   so wird nie Text abgeschnitten. Der Prozentwert steht immer im Namensfeld
   darunter (.sp-labels), auch bei schmalen Abschnitten. */
.sp-seg{container-type:inline-size;container-name:seg;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.66rem;font-weight:600}
.sp-seg-c{display:none}
@container seg (min-width:34px){.sp-seg-c{display:inline}}
.sp-seg-today{color:#fff}
.sp-seg-yesterday,.sp-seg-d2_7,.sp-seg-d8_30{color:#04342C}
.sp-seg-older{color:#2C2A2A}
/* Namen direkt unter dem Balken (nur Desktop, ab 860 px Panelbreite, EINE Reihe).
   Jeder Name beginnt am linken Rand seines Abschnitts: Flex-Elemente mit der
   Abschnittsbreite (--w) als Mindestbreite. Ist ein Abschnitt schmaler als sein Name
   (z.B. "Heute" am frühen Morgen mit 1 %), wird nur dieser Eintrag breiter und
   die folgenden rutschen entsprechend nach rechts - die Reihenfolge bleibt, nichts
   überlappt, nichts wird gekürzt. Reicht sicher aus: fünf Namen brauchen
   zusammen etwa 350 px, verfügbar sind dort über 860 px. */
.sp-labels{display:none;margin:0 0 2px}
.sp-lab{flex:0 0 auto;box-sizing:border-box;min-width:var(--w);padding-right:10px;line-height:1.25}
.sp-lab b{display:flex;align-items:center;gap:5px;font-size:.75rem;font-weight:500;color:var(--text);white-space:nowrap}
.sp-lab b i{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.sp-lab span{display:block;padding-left:13px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.7rem;color:var(--text3);white-space:nowrap}

/* Legende als Liste: bei schmalem Panel (unter 860 px, Smartphone und Tablet). Dort ist
   je Abschnitt zu wenig Platz für Namen unter dem Balken. Ab 860 px übernimmt
   .sp-labels (Namen direkt unter dem Balken, eine Reihe). */
.sp-leg{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 16px}
.sp-li{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text)}
.sp-li i{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.sp-li span{flex:1}
.sp-li b{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:600;font-size:.75rem}
.sp-li em{font-style:normal;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.75rem;color:var(--text3);min-width:34px;text-align:right}

@container (min-width:560px){
  .sp-grid{grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-areas:
      "g1 g1 g1 g1 g1 g1 g3 g3 g3 g3 g3 g3"
      "g2 g2 g2 g2 g2 g2 gs gs gs gs gs gs"
      "rg rg rg rg rg rg bm bm bm bm bm bm"
      "t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4"}
}
@container (min-width:860px){
  .sp-labels{display:flex;flex-wrap:nowrap}
  .sp-leg{display:none}
  .sp-grid{grid-template-areas:
      "g1 g1 g1 g1 g3 g3 g3 g3 g2 g2 g2 g2"
      "gs gs gs gs gs rg rg rg rg bm bm bm"
      "t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4"}
  /* "Meldungen gesamt" und "Beschwerdemails" gleich: größere Zahl, senkrecht zentriert
     (Rückmeldung 07.10.2026 - Beschwerdemails war oben angeheftet und kleiner) */
  .sp-a-gs .sp-num,.sp-a-bm .sp-num{font-size:2rem}
  .sp-a-gs,.sp-a-bm{display:flex;flex-direction:column;justify-content:center}
}