/* ═══════════════════════════════════════════════════════════════════════
   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;

    --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-miss: #c62828;
    --mw-stt-miss-bg: #ffebee;
    --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-missing-count {
    font-family: var(--mw-stt-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--mw-stt-miss);
    background: var(--mw-stt-miss-bg);
    border: 1px solid var(--mw-stt-miss);
    border-radius: 2px;
    padding: 2px 8px;
}

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

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

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

/* ── 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: 190px;
    border-right: 1px solid var(--mw-stt-grid);
}

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

.mw-stt-stage-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    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%;
}

/* Who does stage care during the printed day — resolved from the stage's
   designated artist-care shift position. */
.mw-stt-stage-care {
    font-family: var(--mw-stt-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

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

/* ── 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 ── */
.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: center;
    overflow: hidden;
    z-index: 3;
}

.mw-stt-act-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-stt-act-time {
    font-family: var(--mw-stt-mono);
    font-size: 10.5px;
    color: #777;
    margin-top: 3px;
    white-space: nowrap;
}

.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; }

/* Rider missing: tinted block + explicit flag (the ONLY rider marker) */
.mw-stt-act-no-rider {
    background: #fff6f6;
    border-color: var(--mw-stt-miss);
}

.mw-stt-no-rider-flag {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    background: var(--mw-stt-miss);
    border-radius: 2px;
    padding: 2px 5px;
}

/* 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 headers 11mm (name + stage-care line) + borders
   ≈ 22mm → track 168mm. */
@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;
        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-missing-count { font-size: 8px; padding: 1px 5px; }

    .mw-stt-col-header { height: 11mm; font-size: 8px; letter-spacing: 1px; }
    .mw-stt-stage-header { padding: 0 8px; gap: 1px; }
    .mw-stt-stage-name { font-size: 10.5px; }
    .mw-stt-stage-care { font-size: 7px; }

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

    .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-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-no-rider-flag { font-size: 6.5px; padding: 1px 3px; top: 2px; right: 2px; }

    .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;
    }
}