/*
 * Show Orchestrator HUD — styles for Meta Ray-Ban Display.
 *
 * Hard constraints (from Meta Wearables Web App display guidelines):
 *   - 600×600 fixed viewport, top-anchored.
 *   - #000000 black is TRANSPARENT on the additive waveguide. Backgrounds
 *     use #1C1E21 (dark gray) so the HUD is visually grounded; transient
 *     elements fade to black when dismissed to vanish from view.
 *   - 4.5:1 contrast minimum. Text is #FFFFFF or #E4E6EB; muted #B0B3B8.
 *   - No touch input. D-pad (Neural Band → arrow keys) only.
 *
 * Layout philosophy (rev D, 2026-05-27):
 *   The SM's primary read is the Next Cue countdown — every other element
 *   exists to support that decision. Next Cue countdown is rendered at
 *   ~88-104px so it remains legible through the waveguide at a glance,
 *   even when the operator is moving. Sections flex-grow so the layout
 *   actually fills the 600×600 viewport rather than leaving dead space.
 *
 * Cue countdown colors match the dashboard / WPF palette exactly so the
 * wearer's HUD agrees with what the operator's eye sees on every surface.
 * The color class is set per-cue from cue.highlightColor on the wire,
 * which comes from CueHighlightHelper.GetCallerHighlightColor server-side.
 * NO client-side threshold math — values are pure passthrough.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 600px;
    height: 600px;
    background: #1C1E21;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.screen-root {
    position: relative;
    width: 600px;
    height: 600px;
}

.screen {
    position: absolute;
    inset: 0;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hidden { display: none !important; }

/* ---------- Connecting / error screens ---------- */

.centered-block {
    margin: auto;
    text-align: center;
    max-width: 480px;
}

.logo-mark {
    display: inline-block;
    width: 96px;
    height: 96px;
    line-height: 96px;
    border-radius: 50%;
    border: 4px solid #4FC3F7;
    font-size: 36px;
    font-weight: 700;
    color: #4FC3F7;
    margin-bottom: 28px;
}

.status-text {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.status-sub {
    font-size: 16px;
    color: #B0B3B8;
}

.error-icon {
    font-size: 48px;
    color: #FF5252;
    margin-bottom: 16px;
}

/* ---------- 1. Header (time remaining + end-of-show TOD) ---------- */

.hud-header {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2C2E31;
    flex-shrink: 0;
}

.hud-header-remaining {
    font-size: 52px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 1;
}

.hud-header-end {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.hud-header-end-label {
    font-size: 12px;
    color: #B0B3B8;
    letter-spacing: 1.6px;
}
.hud-header-end-tod {
    /* Cyan blue — reads cleanly on additive waveguide. Deep blue tends
     * to disappear because the waveguide adds light rather than blocking
     * it; cyan stays distinct against varied real-world backdrops. */
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #4FC3F7;
    line-height: 1;
}

.hud-stale {
    margin-left: 8px;
    font-size: 16px;
    color: #FF5252;
    font-weight: 600;
}

/* ---------- 2. Next Cue (color-coded, DOMINATES the layout) ---------- */

.hud-cue {
    background: #25282C;
    border-left: 6px solid #4FC3F7;
    padding: 18px 22px;
    border-radius: 8px;
    transition: border-left-color 0.15s, background 0.15s;
    /* flex: 1 so Next Cue absorbs all unused vertical space — the freed
     * area from cutting the chart section flows into the SM's most
     * actionable read. Min-height keeps the layout sane if for some
     * reason all the data is empty (no current cue + show stopped). */
    flex: 1 1 auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hud-cue-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #B0B3B8;
    margin-bottom: 8px;
}
.hud-cue-line {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}
.hud-cue-dept {
    font-size: 22px;
    font-weight: 700;
    color: #4FC3F7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hud-cue-name {
    font-size: 32px;
    font-weight: 600;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    line-height: 1.1;
}
.hud-cue-countdown {
    font-size: 96px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: -1px;
}

/* ---------- 3. After-Next Cue (color-coded, compact but readable) ---------- */

.hud-cue-secondary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 18px;
    border-left: 4px solid #4FC3F7;
    background: #1F2225;
    border-radius: 6px;
    color: #E4E6EB;
    flex-shrink: 0;
}
.hud-cue-label-inline { font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; color: #B0B3B8; }
.hud-cue-dept-inline { font-size: 16px; font-weight: 700; color: #4FC3F7; text-transform: uppercase; }
.hud-cue-name-inline {
    font-size: 20px;
    color: #E4E6EB;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.hud-cue-countdown-inline {
    margin-left: auto;
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #E4E6EB;
}

/* ---------- Cue color palette (passthrough from cue.highlightColor) ----
 * Mirrors dashboard helpers getCueColor() + getCallerColor() in
 * Services/Web/Dashboard/app.js. Same input string → same color on every
 * surface. Adding a new color here requires also adding it to the
 * server-side CueHighlightHelper string set; otherwise it'll never appear
 * on the wire.
 */

.color-purple  { border-left-color: #BA68C8; }
.color-purple  .hud-cue-countdown,
.color-purple  .hud-cue-countdown-inline { color: #BA68C8; }

.color-green   { border-left-color: #66BB6A; }
.color-green   .hud-cue-countdown,
.color-green   .hud-cue-countdown-inline { color: #66BB6A; }

.color-yellow  { border-left-color: #FFEB3B; }
.color-yellow  .hud-cue-countdown,
.color-yellow  .hud-cue-countdown-inline { color: #FFEB3B; }

.color-orange  { border-left-color: #FFA726; }
.color-orange  .hud-cue-countdown,
.color-orange  .hud-cue-countdown-inline { color: #FFA726; }

.color-go      { border-left-color: #66BB6A; background: #1F2F1F; }
.color-go      .hud-cue-countdown,
.color-go      .hud-cue-countdown-inline { color: #66BB6A; }

.color-none    { border-left-color: #4FC3F7; }

.color-caller-late      { border-left-color: #FFA726; }
.color-caller-late      .hud-cue-countdown,
.color-caller-late      .hud-cue-countdown-inline { color: #FFA726; }

.color-caller-standby   { border-left-color: #FFEB3B; background: #2D2C1F; }
.color-caller-standby   .hud-cue-countdown,
.color-caller-standby   .hud-cue-countdown-inline { color: #FFEB3B; }

.color-caller-go        { border-left-color: #66BB6A; background: #1F2F1F; }
.color-caller-go        .hud-cue-countdown,
.color-caller-go        .hud-cue-countdown-inline { color: #66BB6A; }

.color-caller-skipped   { border-left-color: #EF5350; background: #2F1F1F; opacity: 0.7; }
.color-caller-skipped   .hud-cue-countdown,
.color-caller-skipped   .hud-cue-countdown-inline { color: #EF5350; }

.color-caller-dimmed    { opacity: 0.5; }

/* ---------- 4. Current Song (name + remaining + progress bar) ---------- */

.hud-song {
    padding: 10px 18px;
    background: #1F2225;
    border-radius: 6px;
    flex-shrink: 0;
}
.hud-song-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.hud-song-name {
    font-size: 22px;
    color: #E4E6EB;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.hud-song-times {
    font-size: 17px;
    color: #B0B3B8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 500;
}
.hud-song-progress-track {
    height: 10px;
    background: #2C2F33;
    border-radius: 5px;
    overflow: hidden;
}
.hud-song-progress-fill {
    height: 100%;
    width: 0%;
    background: #4FC3F7;
    transition: width 0.3s linear;
}

/* ---------- 5. Next Chart (HIDDEN by sm.json profile flag) ---------- */
/* Rules retained so flipping profile.showNextChart back to true via sm.json
 * is a profile-only change with no CSS/JS edit. */

.hud-next-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #1F2225;
    border-radius: 4px;
    padding: 4px 8px 8px 8px;
}
.hud-chart-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.hud-chart-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #B0B3B8;
}
.hud-chart-name {
    font-size: 15px;
    color: #E4E6EB;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.hud-chart-imagewrap {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #0F1112;
}
.hud-chart-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.hud-chart-countdown {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.85);
    padding: 2px 8px;
    background: rgba(0,0,0,0.45);
    border-radius: 4px;
    line-height: 1;
}

/* ---------- GO flash banner ---------- */
.hud-go-banner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2E7D32;
    color: #FFFFFF;
    padding: 22px 24px;
    text-align: center;
    box-shadow: 0 -2px 20px rgba(46, 125, 50, 0.6);
    animation: hud-go-pulse 1.5s ease-out forwards;
    z-index: 10;
}
.hud-go-text { font-size: 36px; font-weight: 700; letter-spacing: 1.5px; }
.hud-go-name { font-size: 22px; margin-top: 4px; opacity: 0.9; }
@keyframes hud-go-pulse {
    0%   { opacity: 0; transform: translateY(20px); }
    10%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(0); }
}