/* ---------------------------------------------------------------------
   Symbole: alles Lucide als Inline-SVG (icons.js: lucide(name, cls), LUCIDE_*), kein Symbol-Font mehr.
   Größe über die Klasse, Farbe über currentColor.
   --------------------------------------------------------------------- */
.msym      { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.msym-sm   { width: 18px; height: 18px; }
.btn-icon  { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
/* md-icon (Material-Web-Buttons, FAB, Menü-Knopf) mit Lucide-SVG statt Ligatur */
/* md-icon füllt eingesetzte SVGs (::slotted(svg) { fill: currentColor }) – Lucide sind Konturen */
md-icon > svg { width: 100%; height: 100%; fill: none; }
/* Lucide-Inline-SVG im Fließtext (z.B. Plan-Symbol in der Bedienungsanleitung) */
.text-svg-icon { width: 15px; height: 15px; vertical-align: -2px; }

/* Lucide: Runden-Symbole (circle = offen, circle-check-big = abgeschlossen), Status- und Button-Symbole */
.lucide-icon { width: 15px; height: 15px; color: var(--md-sys-color-outline); flex-shrink: 0; }
.lucide-icon.lucide-icon-done { color: var(--md-sys-color-primary); }
.lucide-icon.lucide-icon-active { color: var(--md-sys-color-primary); } /* laufende Runde (circle-play) */
.lucide-icon.lucide-icon-unscored { color: var(--md-sys-color-error); }
.lucide-icon.lucide-icon-official { color: var(--md-sys-color-on-surface); } /* Schild hinter offizieller Zeit */
.lucide-icon.lucide-icon-best { color: var(--yellow); } /* award/trophy: Bestzeit */
.lucide-icon.lucide-icon-after-end { color: var(--md-sys-color-error); } /* flag-off: Block nach dem Rennende */
.best-lap-icon { display: inline-flex; vertical-align: middle; margin-left: 3px; }
.best-lap-icon .lucide-icon { width: 16px; height: 16px; }
.lucide-icon.lap-finish { color: var(--md-sys-color-primary); } /* Zielrunde: Rennende fällt in diese Runde */
/* Button-Symbole: erben die Textfarbe des Buttons; 21 px auch im Rückfrage-Titel und auf dem Schiebe-Griff */
.lucide-icon.lucide-btn-icon { width: 21px; height: 21px; color: currentColor; vertical-align: middle; }
.lucide-status-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--md-sys-color-on-surface-variant); }

/* ---------------------------------------------------------------------
   Reset, Basis, Hilfsklassen
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }
/* Reset ohne Material-Web-Elemente und ohne geslottete Elemente ([slot="headline"|"content"|"actions"|"icon"]):
   Material Web setzt Abstände per :host (z.B. md-dialog { margin: auto }, Button-Innenabstand) bzw. ::slotted(),
   und Dokument-Styles gewinnen immer gegen Shadow-Styles – sonst kleben Dialoge oben links, haben keinen
   Innenabstand und Button-Texte stoßen an den Rand. Neue md-*-Elemente hier ergänzen.
   :where() hält die Spezifität bei 0 wie beim bisherigen "*". */
:where(*:not(md-dialog, md-filled-button, md-outlined-button, md-text-button, md-icon-button, md-icon, md-circular-progress, md-fab, md-checkbox, md-switch, [slot])) { margin: 0; padding: 0; }
body {
  font-family: 'Roboto', system-ui, sans-serif;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-surface);
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
}

/* Kleine, feste Liste wiederkehrender Textstile für JS-erzeugtes HTML (kein Utility-Framework) */
.text-muted  { color: var(--md-sys-color-on-surface-variant); }
.text-ok     { color: var(--md-sys-color-primary); }
.text-danger { color: var(--md-sys-color-error); }
.hint        { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.empty-state { color: var(--md-sys-color-on-surface-variant); text-align: center; padding: 32px 0; }

/* ---------------------------------------------------------------------
   Zustände
   --------------------------------------------------------------------- */
/* Nur-Ansehen-Gerät: Aktionen ausblenden (Backend lehnt sie ohnehin mit 403 ab) */
body.readonly #page-live .btn,
body.readonly #benchPanel,
body.readonly #page-results .slot-actions,
body.readonly #appendSection,
body.readonly .plan-reset-btn { display: none !important; }

/* Anleitung: je Sprache ein Block (data-lang), passend zu <html lang> (i18n.js) */
html[lang="de"] [data-lang]:not([data-lang="de"]),
html[lang="en"] [data-lang]:not([data-lang="en"]),
html[lang="it"] [data-lang]:not([data-lang="it"]),
html[lang="nl"] [data-lang]:not([data-lang="nl"]) { display: none; }