/* Workout-Builder — eigene Styles, ergaenzt velotrainr-theme.css. Alles hier ist bewusst
   NICHT CSS-isoliert (Blazor Component-CSS-Isolation scoped nur auf das eigene Element,
   nicht auf Kind-Komponenten), weil Dialog/BlockCard/StepRowEditor getrennte .razor-Dateien
   sind aber dieselben Klassen teilen muessen. */

/* Der Workout-Builder-Dialog soll IMMER (nicht nur auf Mobile wie die generische .dialog-card-
   Regel in velotrainr-theme.css) fullscreen sein, mit einem innen zentrierten max-width-Container.
   :has() zielt vom Marker-Div im Dialog-Root auf den umschliessenden Radzen-.rz-dialog, ohne dass
   der Dialog selbst wissen muesste wie Radzen ihn wrapped (Browser-Support: alle aktuellen
   Chrome/Edge/Safari/Firefox — fuer diese private App ausreichend). */
.rz-dialog:has(.wb-dialog-fullscreen) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    inset: 0 !important;
    margin: 0 !important;
}

    .rz-dialog:has(.wb-dialog-fullscreen) > .rz-dialog-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 !important;
        height: 100%;
    }

.wb-name-input {
    width: 220px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-color);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--rz-primary);
    outline: none;
    padding: 0.1rem 0;
}

/* Kopfzeile bewusst NICHT umbrechend (kein Wrap="FlexWrap.Wrap" mehr auf dem RadzenStack) — auf
   schmalen Bildschirmen schrumpft/versteckt sich stattdessen der Name-Bereich (siehe Media Query
   unten), damit Name + Aktionen immer in EINER Zeile bleiben statt eine zweite Zeile zu erzwingen
   (vorher: ~150px Kopfzeile allein auf 375px Breite, siehe [[velotrainr-workout-builder]]). */
.wb-header-name-group {
    min-width: 0;
    flex: 1 1 auto;
}

.wb-header-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wb-header-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Buildingblock-Palette per <details>/<summary> einklappbar (Vorschlag Philipp, 2026-09-08) — per
   Default IMMER zugeklappt (nicht nur mobile), weil sie nur beim Hinzufuegen eines neuen Blocks
   gebraucht wird, waehrend die Block-Karten-Liste (das eigentliche Editier-Ziel) so viel oefter
   sichtbaren Platz braucht. Nativ statt eigenem Bool-Feld, weil Blazors Diffing das <details>-Element
   selbst nicht neu erzeugt (Kinder aendern sich, die Struktur bleibt) -> der offen/zu-Zustand
   uebersteht Re-Renders genau wie z.B. Scroll-Position. */
.wb-toolbar-details {
    flex: 1 1 auto;
}

.wb-toolbar-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    color: var(--rz-text-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 700;
    user-select: none;
    padding: 0.3rem 0;
}

    .wb-toolbar-summary::-webkit-details-marker {
        display: none;
    }

    .wb-toolbar-summary::marker {
        content: "";
    }

.wb-toolbar-chevron {
    transition: transform 150ms ease;
    flex-shrink: 0;
}

details.wb-toolbar-details[open] > .wb-toolbar-summary .wb-toolbar-chevron {
    transform: rotate(180deg);
}

.wb-toolbar-details .wb-toolbar-blocks {
    margin-top: 0.6rem;
}

.wb-toolbar-blocks {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Container um Buildingblock-Accordion + Stats + Einheit-Umschalter — als Klasse statt Inline-Style,
   damit die Mobile-Media-Query unten sie ueberschreiben kann (Inline-Style schlaegt jede externe
   @media-Regel immer, siehe die Falle bei .wb-header-brand weiter oben). */
.wb-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-top: 1px solid var(--rz-base-300);
    border-bottom: 1px solid var(--rz-base-300);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

/* Ab Desktop (>1024px, Radzen-"MD"-Schwelle, siehe [[velotrainr-mobile-optimization]]) bleibt die
   Buildingblock-Palette wie vor dem Accordion IMMER offen/inline sichtbar — genug Platz vorhanden,
   das Accordion ist nur auf Tablet/Mobile noetig (Philipp, 2026-09-08: "ab Tablet erscheinen,
   Desktop kann inline bleiben"). `<details>` OHNE `open`-Attribut versteckt seinen Inhalt per
   Browser-Vorgabe (`display:none` auf allem ausser `summary`) — das per Klasse+!important
   ueberschrieben, die Zusammenfassungszeile bleibt als reines (nicht klickbares) Label stehen. */
@media (min-width: 1025px) {
    /* Geschlossenes <details> versteckt seinen Inhalt ueber content-visibility:hidden am
       ::details-content-Pseudo, NICHT ueber display:none auf den Kindern -> darum das Pseudo
       sichtbar schalten statt am Kind-Div herumzuschrauben. */
    .wb-toolbar-details::details-content {
        content-visibility: visible;
    }

    .wb-toolbar-details > .wb-toolbar-blocks {
        margin-top: 0; /* sonst bleibt der 0.6rem-Abstand ueber den Buttons stehen */
    }

    /* Label + Chevron weg, kein Accordion-Verhalten auf Desktop. */
    .wb-toolbar-summary {
        display: none;
    }
}

.wb-block-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 4.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-200);
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    font-weight: 600;
    transition: border-color 120ms, background 120ms;
}

    .wb-block-btn:hover {
        border-color: var(--rz-base-400);
        background: var(--rz-base-300);
    }

    .wb-block-btn:active {
        transform: translateY(1px);
    }

.wb-block-btn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Timeline --- */
.wb-timeline {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 150px;
    background: var(--rz-base-200);
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
}

.wb-timeline-selection {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 2px solid var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    border-radius: 10px;
    pointer-events: none;
    transition: left 150ms ease, width 150ms ease;
}

/* --- Block-Karten --- */
.wb-block-list {
    display: flex;
    flex-direction: column;
    /* Kein "gap" mehr — der Abstand zwischen Karten kommt jetzt von den Drop-Gap-Streifen
       zwischen ihnen (siehe .wb-drop-gap), die zugleich als DnD-Ziel dienen. */
}

.wb-block-card {
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    transition: border-color 120ms, box-shadow 120ms;
}

    .wb-block-card.wb-selected {
        border-color: var(--rz-primary);
        box-shadow: 0 0 0 1px var(--rz-primary);
    }

    .wb-block-card.wb-dragging {
        opacity: 0.5;
    }

/* Kopfzeile einer Karte: Griff+Farbe+Titel+Badge, Mini-Vorschau (Bar/Dauer/Summary), Aktionen
   (Duplizieren/Entfernen/Auf-Zu). Auf breiten Screens eine einzige Zeile (unveraendert gegenueber
   vorher); ab Tablet/Mobile siehe Media Query unten — die Aktionen wurden dort vom Rand gedrueckt/
   abgeschnitten (Philipp-Screenshot, 2026-09-08), weil die Zeile nie umbrach. */
.wb-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.wb-card-preview {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.wb-card-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 1024px) {
    /* Mini-Vorschau (Balken+Dauer+Summary) erzwingt per flex-basis:100% einen Zeilenumbruch VOR
       sich selbst — Griff/Farbe/Titel/Badge + die Aktionen-Buttons bleiben dadurch garantiert auf
       Zeile 1 zusammen (nie mehr rechts abgeschnitten), die Vorschau rutscht als eigene, volle
       zweite Zeile darunter. `order` bestimmt nur die Reihenfolge INNERHALB der so entstehenden
       Zeilen, nicht die Umbruch-Position selbst. */
    .wb-card-header {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .wb-card-preview {
        order: 10;
        flex: 1 1 100%;
    }

    .wb-card-actions {
        order: 5;
    }
}

/* Duenner Streifen zwischen (und vor/nach) den Karten — Drop-Ziel fuer DnD-Reordering/Duplizieren/
   neue Buildingblocks aus der Toolbar. Waechst beim Drueberziehen sichtbar auf, damit klar ist WO
   eingefuegt wird (statt eine ganze Karte als unklares "irgendwo drauf" hervorzuheben). */
.wb-drop-gap {
    height: 12px;
    border-radius: 6px;
    transition: background 120ms, height 120ms, border-color 120ms;
    border: 2px solid transparent;
}

.wb-drop-gap-active {
    height: 34px;
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
    border-style: dashed;
}

.wb-drag-handle {
    cursor: grab;
    color: var(--rz-text-tertiary-color);
    display: flex;
    align-items: center;
    user-select: none;
}

    .wb-drag-handle:active {
        cursor: grabbing;
    }

/* Touch-faehiges Drag&Drop (siehe workout-builder-dnd.js) statt nativer HTML5-DnD-API — jeder
   Griff braucht `touch-action:none`, sonst interpretiert der Browser das erste touchmove als
   Scroll-Geste, bevor unser Pointer-Handler ueberhaupt den Bewegungs-Schwellwert pruefen kann. */
[data-wb-drag] {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none; /* Safari */
}

/* Schwebende Kopie der gegriffenen Karte/des Toolbar-Buttons, folgt dem Pointer per `transform`
   (siehe workout-builder-dnd.js:makeGhost) — `pointer-events:none`, damit sie selbst nie als
   Drop-Ziel unter dem Finger/Cursor auftaucht. */
.wb-drag-ghost {
    position: fixed;
    z-index: 3000;
    pointer-events: none;
    opacity: 0.92;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    margin: 0 !important;
}

.wb-dnd-active,
.wb-dnd-active * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.wb-kind-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.wb-mini-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 26px;
    flex: 1 1 auto;
    min-width: 60px;
    max-width: 220px;
}

.wb-mini-bar-seg {
    flex: 1 1 auto;
    min-width: 3px;
}

    /* Abgerundete Oberkante: trifft das jeweils OBERSTE der bis zu zwei gestapelten Divs (Cap bei
       einer Range, sonst Basis) — bei einer Rampe hat das Element zusaetzlich einen clip-path,
       der die Rundung optisch ueberschreibt (gewollt, Rampen sollen spitz/schraeg bleiben). */
    .wb-mini-bar-seg > div:first-child {
        border-radius: 2px 2px 0 0;
    }

.wb-nested {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--rz-base-300);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wb-step-card {
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: var(--rz-base-100);
}

/* Kopfzeile einer Step-Card (Titel + Target/Range/Ramp-Umschalter + Entfernen). Umbricht statt zu
   quetschen, wenn beides nicht nebeneinander passt (Philipp-Screenshot, 2026-09-08: "Schritt 1"
   brach sonst selbst mitten im Wort auf 2 Zeilen um, weil die Zeile nie als Ganzes umbrechen
   durfte) — der Titel bleibt so immer intakt auf einer Zeile, der Umschalter+X rutscht bei Bedarf
   darunter. */
.wb-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    row-gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.wb-step-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
}

.wb-step-field-label {
    color: var(--rz-text-secondary-color);
    font-size: 0.82rem;
}

/* --- Zahlen-Stepper (-  value  +) --- */
.wb-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    overflow: hidden;
    background: var(--rz-base-200);
}

.wb-stepper-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
}

    .wb-stepper-btn:hover {
        background: var(--rz-base-300);
        color: var(--rz-text-color);
    }

    .wb-stepper-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

.wb-stepper-input {
    min-width: 3.4rem;
    width: 3.4rem;
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-text-color);
    padding: 0 0.25rem;
    border: none;
    background: transparent;
    outline: none;
}

    .wb-stepper-input:focus {
        background: var(--rz-base-100);
        border-radius: 4px;
    }

/* --- Segmented Toggle (Target/Range, Auf/Ab, Einheit) --- */
.wb-segmented {
    display: inline-flex;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    overflow: hidden;
    background: var(--rz-base-200);
}

.wb-segmented-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

    .wb-segmented-btn.wb-active {
        background: var(--rz-primary);
        color: var(--rz-on-primary);
    }

.wb-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

@media (max-width: 640px) {
    .wb-timeline {
        height: 110px;
    }

    /* Marke ("V"-Logo + "Workout-Builder"-Schriftzug + Trenner) ist reine Deko im ohnehin
       fullscreen-eigenen Dialog — auf schmalen Screens weg, damit der Name der eigentliche
       Blickfang der Kopfzeile bleibt statt um Platz mit ihr zu konkurrieren. */
    .wb-header-brand {
        display: none;
    }

    .wb-name-input {
        width: 100%;
        min-width: 0;
    }

    .wb-header-actions .rz-button {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }

    /* Auf Mobile wirkte der 2.5rem-Abstand zwischen Accordion/Stats/Einheit (die hier immer je
       ihre eigene Zeile bekommen, siehe .wb-toolbar-row) unnoetig gross/leer (Philipp-Screenshot,
       2026-09-08) — auf Tablet blieb genug nebeneinander Platz, dort unveraendert. */
    .wb-toolbar-row {
        gap: 0.85rem;
        justify-content: flex-start;
    }
}