/* ============================================================================
   Feedback — Callouts/Infoboxen + Flash. Baustein: Core\Design::infobox/flash.
   EINE Ton-Skala fürs ganze System (Farben aus Kern-Tokens), damit „Achtung"
   nicht mal orange und mal rot ist. Kein Modul baut eigene .alert/.info-box.
   ============================================================================ */
.cc-infobox {
    display: flex; align-items: flex-start; gap:var(--sp-3);
    padding:var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-left: 3px solid var(--info);
    border-radius: var(--radius);
    background: var(--grey-50);
    font-size: var(--fs-base);
    margin: 0 0 var(--sp-5);
}
.cc-infobox .cc-ico { color: var(--info); margin-top: .1em; }
.cc-infobox-body { flex: 1; min-width: 0; }
.cc-infobox-body :last-child { margin-bottom: 0; }
.cc-infobox[hidden] { display: none; }   /* hidden-Attribut gewinnt gegen display:flex */

.cc-infobox-success { border-left-color: var(--ok); background: var(--ok-bg); }
.cc-infobox-success .cc-ico { color: var(--ok); }
.cc-infobox-warning { border-left-color: var(--warn); background: var(--warn-bg); }
.cc-infobox-warning .cc-ico { color: var(--warn); }
.cc-infobox-danger  { border-left-color: var(--danger); background: var(--danger-bg); }
.cc-infobox-danger  .cc-ico { color: var(--danger); }

/* Flash = kompakter, für Post-Action-Rückmeldung. */
.cc-flash { padding:var(--sp-2) var(--sp-4); font-size: var(--fs-sm); margin-bottom:var(--sp-3); }

/* Fortschrittsbalken (Design::progress) — Status-Feedback. */
.cc-progress { position: relative; height:var(--sz-8); background: var(--grey-200); border-radius:var(--radius-pill); }   /* kein overflow:hidden — sonst ist die Prozentzahl (oben) abgeschnitten */
.cc-progress-bar { max-width: 100%; }
.cc-progress-bar { height: 100%; background: var(--info); border-radius:var(--radius-pill); transition: width var(--dur); }
.cc-progress-success .cc-progress-bar { background: var(--ok); }
.cc-progress-warning .cc-progress-bar { background: var(--warn); }
.cc-progress-danger .cc-progress-bar { background: var(--danger); }
.cc-progress-num { position: absolute; right: 6px; top: -18px; font-size: var(--fs-xs); color: var(--muted); }

/* SKALA MIT NADEL (Design::gauge) — 0–100 von rot nach gruen, die Nadel sitzt auf dem Wert.
   Gehoert zum feedback-Kernmodul, weil hier schon der Fortschrittsbalken wohnt: beide sagen
   „wie steht es?", nur mit anderer Frage (Fuellung vs. Position). Kein Fach-Modul bringt eigene
   Barometer-Optik mit — sonst sieht die Stimmung im Ticketing anders aus als beim Kunden.
   Farben ausschliesslich aus den Kern-Tokens (danger/warn/ok), Groessen aus der Groessenskala;
   die Nadel ist bewusst per calc() aus einem Token abgeleitet statt als roher Pixelwert. */
.cc-gauge { display: inline-flex; align-items: center; gap: var(--sp-3); vertical-align: middle; }
.cc-gauge-track { position: relative; width: var(--sz-100); height: var(--sz-8); border-radius: var(--radius);
                  background: linear-gradient(to right, var(--danger) 0%, var(--warn) 45%, var(--ok) 100%); }
/* Der helle Saum um die Nadel ist ein RAHMEN, kein Schatten: Schatten kommen im System aus der
   Kern-Skala (--shadow-*) und meinen „liegt darueber" — hier geht es nur um Lesbarkeit auf dem
   farbigen Verlauf. */
.cc-gauge-needle { position: absolute; top: calc(var(--sp-1) * -1); width: calc(var(--sz-6) / 2); height: var(--sz-14);
                   background: var(--text); border: 1px solid var(--surface); box-sizing: content-box;
                   border-radius: var(--radius); transform: translateX(-50%); }
.cc-gauge-val { font-size: var(--fs-sm); font-weight: var(--fw-bold); min-width: var(--sz-32); color: var(--text); }
.cc-gauge-empty { font-size: var(--fs-sm); color: var(--muted); }
.cc-gauge-lg .cc-gauge-track { width: var(--sz-200); height: var(--sz-12); }
.cc-gauge-lg .cc-gauge-needle { top: calc(var(--sp-2) * -1); height: var(--sz-20); }
.cc-gauge-lg .cc-gauge-val { font-size: var(--fs-lg); }

/* Toast (CC.notify.show): flüchtige Rückmeldung unten rechts — dieselbe Flash-Plakette wie
   Design::flash, gestapelt, klickbar zum Schliessen. EIN Toast fürs ganze System. */
.cc-toasts { position: fixed; right: var(--sp-8); bottom: var(--sp-8); z-index: var(--z-tooltip);
             display: flex; flex-direction: column; gap: var(--sp-3); max-width: min(90vw, var(--sz-440)); pointer-events: none; }
.cc-toasts .cc-flash { margin: 0; box-shadow: var(--shadow-md); background: var(--surface); pointer-events: auto; cursor: pointer;
                       animation: cc-slide-up var(--dur) var(--ease); }
.cc-toasts .cc-flash.cc-toast-out { opacity: 0; transition: opacity var(--dur) var(--ease); }