/* MwStageRider — Global Stylesheet
   Prefix: mw-sr-*
   Page:   StageRiderPage.razor  (/booking/stage-rider)
   A full-screen mobile view of one stage: acts stacked with times, the live act
   highlighted, the tech rider as focus, a time-aligned Stage-Care sliver, and a
   finger-swipe (mw-swipe.ts, reusing .mw-dg-swap-track) between stages.
   ========================================================================= */

.mw-sr-app {
    /* mockup palette (dark, "dezent") scoped to this surface */
    --sr-bg: #15151d;
    --sr-bg2: #191922;
    --sr-surface: #20202c;
    --sr-lines: #30303d;
    --sr-lines2: #3c3c4a;
    --sr-text: #e2e2ea;
    --sr-text2: #9696aa;
    --sr-text3: #66667a;
    --sr-primary: #7c6cff;
    --sr-care: #34d4c8;
    --sr-live: #f97362;
    --sr-warn: #ffb24d;
    --sr-rail-w: 46px;
    --sr-care-w: 54px;

    position: relative;
    /* height comes from the MwStageRider `Height` parameter (inline style): the full page
       content height on the standalone page, 100% inside the Artist Office popover. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    background: var(--sr-bg2);
    color: var(--sr-text);
    background-image:
        radial-gradient(680px 380px at 92% -8%, #34d4c812, transparent 62%),
        radial-gradient(520px 340px at -8% 8%, #7c6cff0e, transparent 60%);
    font-variant-numeric: tabular-nums;
}

.mw-sr-mono { font-family: var(--mud-typography-mono-family, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* ── header ───────────────────────────────────────────────────────────── */
.mw-sr-header { flex: 0 0 auto; padding: 4px 8px 6px; }
/* three columns: view-mode toggle (left), stage indicator (centre), jetzt/care (right) */
.mw-sr-hrow { display: flex; align-items: center; gap: 8px; }
.mw-sr-left { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.mw-sr-center { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mw-sr-right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }

.mw-sr-name { flex: 1 1 auto; min-width: 0; text-align: center; }
.mw-sr-name .mw-sr-nm {
    font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw-sr-name .mw-sr-nm::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: var(--sr-care); box-shadow: 0 0 9px var(--sr-care);
}

/* rail dots: bigger, carry the stage's first letter, tappable to jump */
.mw-sr-dots { display: flex; gap: 5px; justify-content: center; margin-top: 7px; flex-wrap: wrap; }
.mw-sr-dot {
    width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--sr-lines2); background: var(--sr-bg2);
    color: var(--sr-text3); font-size: 10px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; transition: .18s;
}
.mw-sr-dot.on { background: var(--sr-care); color: #0c0c12; border-color: var(--sr-care); box-shadow: 0 0 8px color-mix(in srgb, var(--sr-care) 50%, transparent); }

.mw-sr-tgl {
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    color: var(--sr-text2); border: 1px solid var(--sr-lines); background: var(--sr-bg2); cursor: pointer; transition: .18s;
}
.mw-sr-tgl:active { transform: scale(.9); }
.mw-sr-tgl:disabled { opacity: .3; cursor: default; }
.mw-sr-tgl.mw-sr-jetzt.on { color: var(--sr-live); border-color: color-mix(in srgb, var(--sr-live) 55%, transparent); background: color-mix(in srgb, var(--sr-live) 12%, transparent); }
.mw-sr-tgl.mw-sr-care-btn.on { color: var(--sr-care); border-color: color-mix(in srgb, var(--sr-care) 55%, transparent); background: color-mix(in srgb, var(--sr-care) 12%, transparent); }
.mw-sr-tgl.mw-sr-view.on { color: var(--sr-primary); border-color: color-mix(in srgb, var(--sr-primary) 55%, transparent); background: color-mix(in srgb, var(--sr-primary) 12%, transparent); }

/* ── swipe viewport / track / panes ───────────────────────────────────────
   Vertical scroll lives on the VIEWPORT (not the panes), and every pane shares one
   global time window, so a stage swipe (a horizontal translate of the track) keeps the
   same wall-clock time in view. mw-swipe.ts owns the horizontal transform. */
.mw-sr-viewport {
    flex: 1; min-height: 0; position: relative;
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mw-sr-viewport::-webkit-scrollbar { width: 0; }
.mw-sr-viewport > .mw-dg-swap-track {
    display: flex; align-items: flex-start; min-height: 100%; width: calc(var(--sr-cells, 1) * 100%);
    transition: transform .34s cubic-bezier(.32, .72, .28, 1);
    touch-action: pan-y; will-change: transform;
}
.mw-sr-viewport > .mw-dg-swap-track.mw-dg-swap-track--dragging { transition: none; }
.mw-sr-pane {
    flex: 0 0 calc(100% / var(--sr-cells, 1)); width: calc(100% / var(--sr-cells, 1));
    min-height: 100%; padding-bottom: 40px;
}

.mw-sr-empty { padding: 40px 20px; text-align: center; color: var(--sr-text3); font-size: 13px; }

/* ── pinned NOW hero (Jetzt oben) — chrome above the scroll, for the active stage ── */
.mw-sr-hero { flex: 0 0 auto; z-index: 12; padding: 6px 10px 8px; border-bottom: 1px solid var(--sr-lines); background: var(--sr-bg2); }
.mw-sr-hero-care { margin-top: 6px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sr-care); }
.mw-sr-hero-care b { color: var(--sr-text); }
.mw-sr-hero-care .mud-icon-root { font-size: 15px; }

/* ── act card (shared skeleton) ───────────────────────────────────────── */
.mw-sr-act {
    position: relative; overflow: hidden; border-radius: 14px; border-top-left-radius: 4px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--sr-surface), var(--sr-surface)) padding-box,
        linear-gradient(var(--sr-lines2), var(--sr-lines2)) border-box;
}
.mw-sr-top { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px 7px; }
.mw-sr-actname { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.08; flex: 1; min-width: 0; }
.mw-sr-time { font-size: 10.5px; color: var(--sr-text2); white-space: nowrap; text-align: right; line-height: 1.3; }
.mw-sr-time b { display: block; color: var(--sr-text); font-size: 11.5px; }
.mw-sr-kind { font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-radius: 5px; padding: 2px 6px; flex: 0 0 auto; margin-top: 2px; color: var(--sr-care); border: 1px solid color-mix(in srgb, var(--sr-care) 45%, transparent); }

/* rider — the focus */
.mw-sr-rider { margin: 0 11px 10px; padding-top: 8px; border-top: 1px solid var(--sr-lines); }
.mw-sr-rider-h { font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--sr-text3); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.mw-sr-rider-h .mud-icon-root { font-size: 12px; color: var(--sr-care); }
.mw-sr-r { display: flex; gap: 8px; align-items: baseline; line-height: 1.3; margin-bottom: 3px; }
.mw-sr-rk { font-size: 10px; font-weight: 600; color: var(--sr-care); flex: 0 0 auto; min-width: 46px; }
.mw-sr-rv { font-size: 12.5px; color: var(--sr-text); min-width: 0; }
.mw-sr-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mw-sr-tag { font-size: 9.5px; font-weight: 500; border-radius: 7px; padding: 3px 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; color: var(--sr-care); background: color-mix(in srgb, var(--sr-care) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sr-care) 34%, transparent); }
.mw-sr-tag .mud-icon-root { font-size: 12px; }
.mw-sr-pdf {
    font-size: 9.5px; font-weight: 600; border-radius: 8px; padding: 4px 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
    color: #fff; cursor: pointer; border: 1px solid color-mix(in srgb, var(--sr-primary) 62%, transparent);
    background: linear-gradient(color-mix(in srgb, var(--sr-primary) 44%, transparent), color-mix(in srgb, var(--sr-primary) 26%, transparent));
    box-shadow: 0 3px 10px -5px var(--sr-primary);
}
.mw-sr-pdf:active { transform: scale(.94); }
.mw-sr-pdf .mud-icon-root { font-size: 13px; }

/* TBA / no act */
.mw-sr-act.mw-sr-tba { background: var(--sr-bg2); border-style: dashed; border-color: var(--sr-lines2); }
.mw-sr-act.mw-sr-tba .mw-sr-actname { color: var(--sr-text3); font-style: italic; }

/* soundcheck slot (act-less, named via the slot Note) — amber tint, mirrors the stage
   planner / timetable soundcheck color, defined after .mw-sr-tba so it wins on both */
.mw-sr-act.mw-sr-soundcheck {
    background:
        linear-gradient(color-mix(in srgb, var(--sr-warn) 7%, var(--sr-surface)), color-mix(in srgb, var(--sr-warn) 7%, var(--sr-surface))) padding-box,
        linear-gradient(color-mix(in srgb, var(--sr-warn) 36%, var(--sr-lines2)), color-mix(in srgb, var(--sr-warn) 36%, var(--sr-lines2))) border-box;
    border-style: solid;
}
.mw-sr-act.mw-sr-soundcheck .mw-sr-actname { color: var(--sr-text); font-style: normal; }
.mw-sr-act.mw-sr-soundcheck .mw-sr-kind { color: var(--sr-warn); border-color: color-mix(in srgb, var(--sr-warn) 45%, transparent); }

/* NOW act glow (edge-glow, live accent) */
.mw-sr-act.mw-sr-now {
    background:
        linear-gradient(color-mix(in srgb, var(--sr-live) 7%, var(--sr-surface)), color-mix(in srgb, var(--sr-live) 7%, var(--sr-surface))) padding-box,
        radial-gradient(135% 125% at 0% 100%, color-mix(in srgb, var(--sr-live) 78%, transparent) 0%, color-mix(in srgb, var(--sr-live) 44%, transparent) 40%, transparent 72%) border-box,
        linear-gradient(var(--sr-lines2), var(--sr-lines2)) border-box;
    box-shadow: -3px 2px 14px -9px color-mix(in srgb, var(--sr-live) 75%, transparent);
}
.mw-sr-act.mw-sr-now .mw-sr-actname { color: #fff; }
.mw-sr-badge { font-size: 8.5px; font-weight: 700; letter-spacing: .09em; color: #fff; background: var(--sr-live); border-radius: 99px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-top: 1px; }
.mw-sr-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: mw-sr-puls 1.7s infinite; }
.mw-sr-remain { padding: 0 11px 2px; font-size: 10px; color: var(--sr-live); }

@keyframes mw-sr-puls { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-live) 34%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sr-live) 8%, transparent); } }

/* ── LINEAR (Zeitgetreu) layout ───────────────────────────────────────── */
.mw-sr-linear { position: relative; }
.mw-sr-rail { position: absolute; left: 0; top: 0; width: var(--sr-rail-w); }
.mw-sr-tick { position: absolute; left: 0; right: 7px; text-align: right; transform: translateY(-50%); font-size: 10px; color: var(--sr-text3); }
.mw-sr-tick::after { content: ''; position: absolute; right: -7px; top: 50%; width: 5px; height: 1px; background: var(--sr-lines); }
.mw-sr-tick-day { color: var(--sr-text2); font-weight: 600; }
.mw-sr-tick-dow { display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sr-care); line-height: 1.1; }
.mw-sr-timeline { position: relative; }
.mw-sr-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--sr-lines) 60%, transparent); z-index: 0; }
.mw-sr-slot { position: absolute; left: 0; right: 0; }
.mw-sr-slot .mw-sr-act { display: flex; flex-direction: column; height: 100%; }
.mw-sr-lrider { flex: 1; min-height: 0; overflow: hidden; margin: 0 11px 8px; padding-top: 8px; border-top: 1px solid var(--sr-lines); }
.mw-sr-lfade { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 26px; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(transparent, var(--sr-surface)); border-radius: 0 0 13px 13px; }
.mw-sr-act.mw-sr-now .mw-sr-lfade { background: linear-gradient(transparent, color-mix(in srgb, var(--sr-live) 7%, var(--sr-surface))); }
.mw-sr-act.mw-sr-clipped .mw-sr-lfade { opacity: 1; }
.mw-sr-lpdfs { position: absolute; right: 8px; bottom: 7px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }

/* now line (linear) */
.mw-sr-nowline { position: absolute; left: 0; right: 0; height: 0; z-index: 9; pointer-events: none; }
.mw-sr-nowline::before { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 1.6px solid var(--sr-live); opacity: .92; }
.mw-sr-nowline .mw-sr-nl-tag { position: absolute; left: 0; top: 0; transform: translateY(-50%); font-size: 9px; font-weight: 700; color: #fff; background: var(--sr-live); padding: 2px 6px; border-radius: 6px; box-shadow: 0 2px 10px -3px var(--sr-live); }
.mw-sr-nowline .mw-sr-nl-dot { position: absolute; right: 2px; top: 0; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--sr-live); animation: mw-sr-puls 1.7s infinite; }

/* ── COMPACT layout (CSS grid, care spans rows) ───────────────────────── */
.mw-sr-compact { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 6px 10px 4px; align-items: start; }
.mw-sr-compact.mw-sr-has-care { grid-template-columns: 1fr var(--sr-care-w); column-gap: 8px; }
.mw-sr-cell { grid-column: 1; }
.mw-sr-gap {
    grid-column: 1; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 11px; border-top-left-radius: 4px; overflow: hidden;
    border: 1px dashed color-mix(in srgb, var(--sr-care) 32%, transparent); background: color-mix(in srgb, var(--sr-care) 5%, transparent); color: var(--sr-text2);
}
.mw-sr-gap .mud-icon-root { font-size: 15px; color: color-mix(in srgb, var(--sr-care) 70%, var(--sr-text3)); }
.mw-sr-gap .mw-sr-gt { font-size: 11.5px; }
.mw-sr-gap .mw-sr-gw { font-size: 10px; color: var(--sr-text3); margin-left: auto; white-space: nowrap; }
.mw-sr-gap.mw-sr-livegap { border-style: solid; border-color: color-mix(in srgb, var(--sr-live) 45%, transparent); background: color-mix(in srgb, var(--sr-live) 7%, transparent); color: var(--sr-text); }
.mw-sr-gap.mw-sr-livegap .mud-icon-root { color: var(--sr-live); }

/* care column in compact: each block sits in grid column 2 spanning its rows */
.mw-sr-cgrid { grid-column: 2; position: relative; }

/* ── care sliver — shared bar look (linear absolute + compact grid) ────── */
.mw-sr-carelane { position: absolute; top: 0; right: 0; width: var(--sr-care-w); z-index: 6; pointer-events: none; }
.mw-sr-cl-cap { position: absolute; top: -1px; right: 0; width: var(--sr-care-w); text-align: center; font-size: 8px; letter-spacing: .14em; color: var(--sr-care); font-weight: 600; }
.mw-sr-care {
    position: absolute; overflow: hidden; border-radius: 9px; border-top-left-radius: 3px;
    background: color-mix(in srgb, var(--sr-care) 13%, var(--sr-surface)); border: 1px solid color-mix(in srgb, var(--sr-care) 32%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 5px 2px; gap: 2px;
}
.mw-sr-care.mw-sr-now { background: color-mix(in srgb, var(--sr-care) 26%, var(--sr-surface)); border-color: var(--sr-care); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-care) 12%, transparent); }
.mw-sr-care-who { font-size: 8.5px; color: var(--sr-care); font-weight: 600; line-height: 1.05; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; max-height: 100%; overflow: hidden; text-overflow: ellipsis; }
.mw-sr-care.mw-sr-now .mw-sr-care-who, .mw-sr-care.mw-sr-now .mw-sr-care-t { color: #eafffb; }
.mw-sr-care-t { font-size: 7.5px; color: var(--sr-text3); line-height: 1.1; text-align: center; }
.mw-sr-care-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sr-care); flex: 0 0 auto; }

/* compact care blocks: direct grid children in column 2, spanning their rows via grid-row */
.mw-sr-compact > .mw-sr-care {
    position: relative; top: auto; right: auto; grid-column: 2;
    align-self: stretch; margin-top: 2px; margin-bottom: 2px; min-height: 32px;
}

.mw-sr-swipehint { flex: 0 0 auto; text-align: center; font-size: 9px; color: var(--sr-text3); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 7px; }
.mw-sr-swipehint .mud-icon-root { font-size: 13px; opacity: .7; }