/* ═══════════════════════════════════════════════════════════════════════
   Stage Timetable page (mw-stt-*)

   Printable day view of all stages' performance slots, side by side.
   The grid positions everything in PERCENT of the track height, so a single
   variable (--mw-stt-track-h) rescales the whole day: comfortable pixels on
   screen, a fixed millimeter height in print that makes the page always fit
   exactly ONE A4 landscape sheet.
   ═══════════════════════════════════════════════════════════════════════ */

.mw-stt-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 20px 24px;
}

.mw-stt-sheet {
    /* NOTE: One variable scales the whole day grid (see header comment) */
    --mw-stt-track-h: 840px;
    --mw-stt-time-col-w: 58px;
    /* NOTE: Width of the stagecare lane that sits beside each stage's acts */
    --mw-stt-care-w: 54px;

    --mw-stt-border: #1a1a1a;
    --mw-stt-grid: #e2e2e2;
    --mw-stt-grid-hour: #b8b8b8;
    --mw-stt-bg-even: #fafafa;
    --mw-stt-bg-odd: #ffffff;
    --mw-stt-mono: 'SF Mono', 'Cascadia Mono', 'Consolas', 'Roboto Mono', monospace;

    background: #fff;
    color: var(--mw-stt-border);
    border: 1.5px solid var(--mw-stt-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── Toolbar: day navigation + summary ── */
.mw-stt-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-bottom: 2px solid var(--mw-stt-border);
    background: #fafafa;
}

.mw-stt-day {
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

.mw-stt-toolbar-spacer { flex: 1 1 auto; }

.mw-stt-act-count {
    font-family: var(--mw-stt-mono);
    font-size: 11px;
    color: #777;
}

.mw-stt-act-count b { color: #333; font-weight: 700; }

.mw-stt-empty { padding: 24px; }

/* ── Grid layout ── */
.mw-stt-grid-wrap { overflow-x: auto; }

.mw-stt-grid {
    display: flex;
    min-width: 1040px;
}

/* ── Time column ── */
.mw-stt-time-col {
    width: var(--mw-stt-time-col-w);
    min-width: var(--mw-stt-time-col-w);
    flex-shrink: 0;
    border-right: 2px solid var(--mw-stt-border);
}

.mw-stt-col-header {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    border-bottom: 2px solid var(--mw-stt-border);
    background: #fafafa;
}

.mw-stt-track {
    position: relative;
    height: var(--mw-stt-track-h);
}

.mw-stt-time-lbl {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--mw-stt-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: #444;
    transform: translateY(-50%);
    line-height: 1;
    pointer-events: none;
}

/* NOTE: First/last labels are clamped so they aren't clipped by the header
   border / bottom edge */
.mw-stt-time-lbl-first { transform: translateY(2px); }
.mw-stt-time-lbl-last { transform: translateY(calc(-100% - 2px)); }

.mw-stt-time-lbl-half {
    font-weight: 400;
    color: #bbb;
    font-size: 9px;
}

/* ── Stage columns ── */
.mw-stt-stage-col {
    flex: 1;
    min-width: 210px;
    border-right: 1px solid var(--mw-stt-grid);
}

.mw-stt-stage-col:last-child { border-right: none; }

/* One header per stage column, spanning both the acts lane and the stagecare
   lane — it carries only the stage name (+ a fringe tag for a Rahmenprogramm). */
.mw-stt-stage-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    padding: 0 14px;
    letter-spacing: 0.5px;
    color: var(--mw-stt-border);
    position: relative;
    background: color-mix(in srgb, var(--mw-stt-stage-color, #5c6bc0) 8%, #fff);
    overflow: hidden;
}

.mw-stt-stage-name {
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Tag distinguishing a stage's supporting-programme timetable from its main one. */
.mw-stt-stage-sub {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
}

.mw-stt-stage-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--mw-stt-stage-color, #5c6bc0);
}

/* ── Stage column body: acts lane (flex) + stagecare lane (fixed width) ── */
.mw-stt-stage-body {
    display: flex;
    align-items: stretch;
}

.mw-stt-acts-track {
    flex: 1 1 auto;
    min-width: 0;
}

/* Time-aligned stagecare lane — one block per shift, positioned by shift time. */
.mw-stt-care-lane {
    position: relative;
    width: var(--mw-stt-care-w);
    min-width: var(--mw-stt-care-w);
    flex-shrink: 0;
    height: var(--mw-stt-track-h);
    border-left: 1px solid var(--mw-stt-grid-hour);
    background: color-mix(in srgb, var(--mw-stt-stage-color, #5c6bc0) 4%, #fff);
}

/* Tiny caption pinned at the lane top so the strip is unmistakably stagecare. */
.mw-stt-care-cap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    text-align: center;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #999;
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 0;
}

.mw-stt-care-block {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--mw-stt-stage-color, #5c6bc0) 55%, var(--mw-stt-border));
    border-left: 3px solid var(--mw-stt-stage-color, #5c6bc0);
    border-radius: 2px;
    background: color-mix(in srgb, var(--mw-stt-stage-color, #5c6bc0) 12%, #fff);
    padding: 3px 4px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mw-stt-care-name {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mw-stt-border);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mw-stt-care-time {
    font-family: var(--mw-stt-mono);
    font-size: 8px;
    color: #666;
    white-space: nowrap;
}

/* ── Hour stripes & grid lines (positioned in % from Razor) ── */
.mw-stt-stripe {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.mw-stt-stripe-even { background: var(--mw-stt-bg-even); }

.mw-stt-stripe-odd { background: var(--mw-stt-bg-odd); }

.mw-stt-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid var(--mw-stt-grid);
    pointer-events: none;
    z-index: 1;
}

.mw-stt-line-hour { border-top-color: var(--mw-stt-grid-hour); }

/* ── Act blocks ──
   Content flows top-down: name (never clipped) → time → tech-rider. The block is
   as tall as the act is long; on short slots the rider clips from the BOTTOM while
   the name stays put — the name matters more than the time or the gear list. */
.mw-stt-act {
    position: absolute;
    left: 5px;
    right: 5px;
    border: 1.5px solid var(--mw-stt-border);
    border-left: 4px solid var(--mw-stt-stage-color, #5c6bc0);
    border-radius: 3px;
    padding: 4px 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 3;
}

.mw-stt-act-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    flex-shrink: 0;
}

.mw-stt-act-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Indicates a full tech-rider document is attached (📎 + count). */
.mw-stt-rider-doc {
    flex: 0 0 auto;
    font-family: var(--mw-stt-mono);
    font-size: 8.5px;
    font-weight: 600;
    color: #555;
    background: #f0f0f0;
    border-radius: 2px;
    padding: 1px 4px;
    white-space: nowrap;
}

.mw-stt-act-time {
    font-family: var(--mw-stt-mono);
    font-size: 10px;
    color: #777;
    margin-top: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tech-rider facts — what gear must be at the stage for this act. */
.mw-stt-rider {
    margin-top: 3px;
    font-size: 9.5px;
    line-height: 1.25;
    color: #222;
    overflow: hidden;
}

.mw-stt-rider-row { overflow-wrap: anywhere; }

.mw-stt-rider-row + .mw-stt-rider-row { margin-top: 1px; }

.mw-stt-rider-key {
    font-weight: 700;
    color: #555;
}

.mw-stt-rider-val { color: #222; }

.mw-stt-act-sm { padding: 2px 7px; }

.mw-stt-act-sm .mw-stt-act-name { font-size: 11px; }

.mw-stt-act-sm .mw-stt-act-time { font-size: 9px; margin-top: 1px; }

.mw-stt-act-sm .mw-stt-rider { margin-top: 2px; font-size: 8.5px; line-height: 1.2; }

/* Unassigned slot (no act yet) */
.mw-stt-act-tba {
    border-style: dashed;
    border-color: #999;
    background: #f5f5f5;
}

.mw-stt-act-tba .mw-stt-act-name { color: #888; }

/* ── Changeover gap labels ── */
.mw-stt-changeover {
    position: absolute;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.mw-stt-changeover::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0;
    border-top: 1px dashed #ddd;
}

.mw-stt-changeover span {
    position: relative;
    font-family: var(--mw-stt-mono);
    font-size: 8px;
    font-weight: 500;
    color: #bbb;
    background: #fff;
    padding: 0 5px;
    letter-spacing: 0.3px;
}

/* ═══ Print: one A4 landscape page ═══
   Usable area at 8mm margins: 281 × 194 mm.
   Toolbar ~9mm + column header 9mm + borders ≈ 20mm → track 168mm.
   Each stage column = acts lane + a 9mm stagecare lane. */
@media print {
    @page mw-stage-timetable {
        size: A4 landscape;
        margin: 8mm;
    }

    /* NOTE: The named page applies only on a DIRECT print of the live page (Cmd+P).
       Inside the print-preview iframe (body.mw-pp-iframe-body) the dialog's own
       @page rule owns paper size / orientation / margins — referencing the named
       page there would override the dialog's paper controls. */
    body:not(.mw-pp-iframe-body) .mw-stt-sheet {
        page: mw-stage-timetable;
    }

    .mw-stt-sheet {
        --mw-stt-track-h: 168mm;
        --mw-stt-time-col-w: 14mm;
        --mw-stt-care-w: 9mm;
        box-shadow: none;
    }

    .mw-stt-page { max-width: none; padding: 0; }

    .mw-stt-day-nav { display: none !important; }

    .mw-stt-toolbar { padding: 2mm 4mm; }
    .mw-stt-day { font-size: 12px; }
    .mw-stt-act-count { font-size: 8px; }

    .mw-stt-col-header { height: 9mm; font-size: 8px; letter-spacing: 1px; }
    .mw-stt-stage-header { padding: 0 8px; gap: 0; }
    .mw-stt-stage-name { font-size: 10.5px; }
    .mw-stt-stage-sub { font-size: 6.5px; letter-spacing: 0.6px; }

    .mw-stt-grid-wrap { overflow: visible; }
    .mw-stt-grid { min-width: 0; }
    .mw-stt-stage-col { min-width: 0; }

    .mw-stt-care-cap { font-size: 6px; }
    .mw-stt-care-block { padding: 1px 2px; }
    .mw-stt-care-name { font-size: 7.5px; }
    .mw-stt-care-time { font-size: 6px; }

    .mw-stt-act {
        padding: 2px 5px;
        left: 2px;
        right: 2px;
        border-width: 1px;
        border-left-width: 3px;
        border-radius: 2px;
    }

    .mw-stt-act-name { font-size: 10px; }
    .mw-stt-act-time { font-size: 8px; margin-top: 1px; }
    .mw-stt-rider-doc { font-size: 7px; padding: 0 3px; }

    .mw-stt-rider { font-size: 7.5px; line-height: 1.2; margin-top: 1px; }

    .mw-stt-act-sm { padding: 1px 4px; }
    .mw-stt-act-sm .mw-stt-act-name { font-size: 8.5px; }
    .mw-stt-act-sm .mw-stt-act-time { font-size: 7px; margin-top: 0; }
    .mw-stt-act-sm .mw-stt-rider { font-size: 6.5px; }

    .mw-stt-time-lbl { font-size: 8px; }
    .mw-stt-time-lbl-half { font-size: 6.5px; }

    .mw-stt-changeover span { font-size: 6px; }

    .mw-stt-sheet,
    .mw-stt-sheet * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}