:root {
    /* --- Typografie --- */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
    --rz-font-family: var(--font-sans);
    --rz-text-font-family: var(--font-sans);

    /* --- Neutral-Skala (bg/surface/border/text) --- */
    --rz-base-50: #ffffff; /* surface (Karten) */
    --rz-base-100: #f4f5f8; /* bg */
    --rz-base-200: #f0f1f4; /* surface-2 (Toggles/Pills) */
    --rz-base-300: #e3e6ec; /* border */
    --rz-base-400: #cdd2db; /* border-strong */
    --rz-base-500: #8b929d; /* text-3 */
    --rz-base-600: #8b929d; /* text-3 */
    --rz-base-700: #565d68; /* text-2 */
    --rz-base-800: #191c22; /* text */
    --rz-base-900: #191c22; /* text-title */

    --rz-base-background-color: #ffffff; /* Karten/Dialoge/Menüs */
    --rz-body-background-color: #f4f5f8; /* App-Hintergrund */
    --rz-text-color: #191c22;
    --rz-text-title-color: #191c22;
    --rz-text-secondary-color: #565d68;
    --rz-text-tertiary-color: #8b929d;
    /* --- Akzent (Indigo) --- */
    --rz-primary: #5b53c6;
    --rz-primary-lighter: #ecebf9; /* = accent-soft */
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: #5b53c6;
    /* --- Status --- */
    --rz-success: #15a24a;
    --rz-success-lighter: #e2f4e8;
    --rz-on-success-lighter: #15a24a;
    --rz-warning: #c98a06;
    --rz-warning-lighter: #f9f0dc;
    --rz-on-warning-lighter: #c98a06;
    --rz-danger: #d92d2d;
    --rz-danger-lighter: #fbe5e5;
    --rz-on-danger-lighter: #d92d2d;
    --rz-gold: #b8860b;
    --rz-gold-lighter: #fdf3d6;
    --rz-on-gold-lighter: #8a6508;
    /* --- Kraft & Mobility (SessionKindUi) --- */
    --rz-strength: #0e8f8a;
    --rz-mobility: #c2418e;
    /* --- Rahmen --- */
    --rz-border-normal: 1px solid #e3e6ec;
    --rz-border-hover: 1px solid #cdd2db;
    --rz-border-focus: 1px solid #cdd2db;
    /* --- Steps (fehlen ohne benanntes RadzenTheme) --- */
    --rz-steps-color: var(--rz-text-secondary-color);
    --rz-steps-number-background-color: var(--rz-base-300);
    --rz-steps-number-color: var(--rz-text-secondary-color);
    --rz-steps-number-selected-background: var(--rz-primary);
    --rz-steps-number-selected-color: var(--rz-on-primary);
    --rz-steps-number-border-radius: 50%;
    --rz-steps-number-width: 2.25rem;
    --rz-steps-number-height: 2.25rem;
    --rz-steps-number-line-height: 2.25rem;
    --rz-steps-number-padding-block: 0;
    --rz-steps-number-padding-inline: 0;
    --rz-steps-number-focus-outline: none;
    --rz-steps-number-focus-outline-offset: 0;
    --rz-steps-title-selected-color: var(--rz-text-color);
    --rz-steps-title-margin-block: 0.5rem 0;
    --rz-steps-title-margin-inline: 0;
    --rz-steps-button-color: var(--rz-primary);
    --rz-steps-buttons-padding-block: 0.5rem;
    --rz-steps-buttons-padding-inline: 0;
    --rz-steps-transition-duration: 300ms;
    /* --- Grid: standard-base.css haerdcodiert diese hell, ohne benanntes Theme --- */
    --rz-grid-stripe-background-color: var(--rz-base-100);
    --rz-grid-selected-background-color: var(--rz-primary-lighter);
    /* --- App-eigene Trainingszonen-Tokens (kein Radzen-Pendant) --- */
    --zone-1: #8b929d; /* Recovery */
    --zone-2: #3b82f6; /* Endurance */
    --zone-3: #15a24a; /* Tempo */
    --zone-4: #e08a1e; /* Threshold */
    --zone-5: #d92d2d; /* VO2max */
    --zone-6: #a3195b; /* Anaerobic */
    --zone-7: #191c22; /* Neuromuscular */
}

[data-theme="dark"] {
    --rz-base-50: #20242d; /* surface */
    --rz-base-100: #171a21; /* bg */
    --rz-base-200: #282d38; /* surface-2 */
    --rz-base-300: #333a47; /* border */
    --rz-base-400: #454d5d; /* border-strong */
    --rz-base-500: #767e8b; /* text-3 */
    --rz-base-600: #767e8b;
    --rz-base-700: #a8afbb; /* text-2 */
    --rz-base-800: #eef0f4; /* text */
    --rz-base-900: #eef0f4; /* text-title */

    --rz-base-background-color: #20242d;
    --rz-body-background-color: #171a21;
    --rz-text-color: #eef0f4;
    --rz-text-title-color: #eef0f4;
    --rz-text-secondary-color: #a8afbb;
    --rz-text-tertiary-color: #767e8b;
    --rz-primary: #8b84e0;
    --rz-primary-lighter: #22203a;
    --rz-on-primary: #171a21; /* dunkler Text auf dem helleren Dark-Akzent, sonst zu wenig Kontrast */
    --rz-on-primary-lighter: #8b84e0;
    --rz-success: #2fce68;
    --rz-success-lighter: #16301f;
    --rz-on-success-lighter: #2fce68;
    --rz-warning: #f0be1e;
    --rz-warning-lighter: #33290c;
    --rz-on-warning-lighter: #f0be1e;
    --rz-danger: #f55a5a;
    --rz-danger-lighter: #341a1c;
    --rz-on-danger-lighter: #f55a5a;
    --rz-gold: #e8c547;
    --rz-gold-lighter: #3a2f0c;
    --rz-on-gold-lighter: #e8c547;
    --rz-strength: #2cc7c0;
    --rz-mobility: #ee7ab8;
    --rz-border-normal: 1px solid #333a47;
    --rz-border-hover: 1px solid #454d5d;
    --rz-border-focus: 1px solid #454d5d;
    --surface-inset: #1b1f27;
    /* Trainingszonen bleiben identisch (Z1-Z5 wie im Light-Block) */
}

html, body {
    background: var(--rz-body-background-color);
    color: var(--rz-text-color);
    font-family: var(--font-sans);
}

.font-mono, .rz-numeric-input {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* --- Onboarding-Assistent: gemeinsame Bausteine ueber alle Schritte --- */
.onboarding-shell {
    max-width: 50rem;
    margin: 3rem auto;
    padding: 0 1rem 3rem;
}

.onboarding-eyebrow {
    color: var(--rz-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.onboarding-title {
    margin: 0 0 1.5rem !important;
}

.onboarding-card {
    background: var(--rz-base-background-color);
    border: var(--rz-border-normal);
    border-radius: 16px;
    padding: 1.75rem;
}

@media (max-width: 480px) {
    .onboarding-shell {
        margin: 1.5rem auto;
        padding: 0 0.75rem 2rem;
    }

    .onboarding-card {
        padding: 1.25rem;
    }
}

.onboarding-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
}

    .onboarding-nav.end {
        justify-content: flex-end;
    }

.summary-box {
    background: var(--rz-primary-lighter);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    width: 100%;
}

.summary-eyebrow {
    color: var(--rz-on-primary-lighter);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.onboarding-shell .rz-steps-title {
    display: none;
}

/* RadzenSteps rendert Nummern-Kreise als inline-block <li> ohne Verbindungslinie (die kommt
   normalerweise aus dem benannten Theme-CSS, das wir bewusst nicht laden) — gilt global für
   jeden RadzenSteps in der App, nicht nur den im Onboarding. */
.rz-steps > ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.rz-steps-item {
    display: flex;
    align-items: center;
}

    .rz-steps-item:not(:last-child) {
        flex: 1;
    }

        .rz-steps-item:not(:last-child)::after {
            content: "";
            flex: 1;
            height: 2px;
            background: var(--rz-base-300);
            margin: 0 0.5rem;
        }

    .rz-steps-item:has(~ .rz-steps-current)::after {
        background: var(--rz-primary);
    }

/* RadzenSelectBar ist display:inline-flex ohne flex-wrap -> Optionsgruppen mit mehreren/langen
   Labels (Onboarding-Präferenzen, Wochen-Check-in, Wochenübergang) laufen auf Phone-Breiten sonst
   über den Rand statt umzubrechen. Jeder Button ist bereits ein eigenständiges rundes Pill-Element
   (siehe Radzen's .rz-button{border-radius:var(--rz-border-radius) !important}), Umbruch ist also
   optisch unproblematisch -> global statt pro Vorkommen fixen. */
.rz-selectbar {
    flex-wrap: wrap;
}

/* WorkoutDetailDialog Action-Button-Reihe: "Bearbeiten" + "Struktur bearbeiten" teilen sich auf Desktop
   die Zeile zu gleichen Teilen (50/50) statt unterschiedlich breit am Inhalt zu hängen — flex:1 1 0
   (Basis 0) laesst beide gleich wachsen, unabhaengig vom jeweiligen Text/Icon. Auf Mobile ueberschrieben
   auf volle Breite (siehe @media unten), stapeln sich dann wie die restlichen Action-Buttons. */
.wd-half-btn {
    flex: 1 1 0;
}

/* Inline-Umbenennen im Workout-Detail-Dialog (siehe WorkoutDetailDialog.razor, DisplayName-Textfeld) —
   Optik analog zum Workout-Builder-Header (.wb-name-input in workout-builder.css), aber ohne feste
   Breite, weil der Titel hier alleine in der Kopfzeile steht statt neben Logo/Trennstrich. */
.wd-name-input {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--rz-text-color);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--rz-primary);
    outline: none;
    padding: 0.1rem 0;
    width: 100%;
    max-width: 100%;
}

/* Renn-Bezug im Workout-Detail-Dialog (Key-Einheit mit PlannedSession.CourseClimbNumber) — antippbar,
   fuehrt ins Renn-Cockpit /rennen/{id}. */
.wd-race-ref {
    border: 1px solid var(--rz-primary);
    background: var(--rz-primary-lighter);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
}

/* Eigene Dialoge (ShowTitle=false/ShowClose=false, Header+Card selbst gebaut) tragen als Hook fuer
   den Mobile-Fullscreen-Override die Klasse "dialog-card" auf ihrem Root-Div, ihr sonstiges Styling
   (Desktop-Breite/Padding/Radius) bleibt unveraendert Inline auf jedem einzelnen Dialog. Radzen
   selbst zwingt .rz-dialog unter 768px schon auf volle Breite (siehe standard-base.css eigene
   @media(max-width:768px)-Regel), aber NICHT auf volle Hoehe -> das hier ergaenzt "echtes"
   Fullscreen (volle Breite UND Hoehe, kein Radius) fuer alle Dialoge außer Radzens eigenen
   Confirm/Alert-Popups (die sollen als kleine zentrierte Prompts bestehen bleiben). */
@media (max-width: 768px) {
    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) > .rz-dialog-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        padding: 0 !important;
    }

    .dialog-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        overflow-y: auto;
        box-sizing: border-box;
    }

    /* RadzenSteps-Titel ("Check-in", "Plan bearbeiten", ...) laufen als Flex-Items ohne Wrap
       auf Phone-Breiten über den Rand statt zu schrumpfen -> auf Mobile nur die Nummern-Kreise
       zeigen, die Step-Bezeichnung steht in Dialogen ohnehin schon separat (z.B. "Schritt X von
       4 · <Label>" im WeekTransitionDialog-Header). */
    .rz-steps-title {
        display: none;
    }

    /* Auf Mobile stapeln sich ALLE WorkoutDetailDialog-Action-Buttons einzeln volle Breite statt der
       50/50-Aufteilung vom Desktop (siehe .wd-half-btn oben) -> überschreibt die Desktop-Regel gezielt
       für die schmale Breite, wo eine Halbe-Breite-Karte für Icon+Text sonst zu eng wird. */
    .wd-half-btn {
        flex: 1 1 100%;
    }
}

.done-badge {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--rz-success-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
}