/* ── theme.css ────────────────────────────────────────────────────────────────
   Single stylesheet linked by all pages (base.html + standalone kiosk templates).
   Contains: design tokens, Bootstrap overrides, shared component styles.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
    --primary: #f7932c;
    --secondary: #777;
    --accent: #666;
    --danger: #d32f2f;
    --success: #388e3c;
    --warning: #ff9800;
    --light: #f5f5f5;
    --white: #fff;
    --gray: #ccc;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --sidebar: #28292b;
    --sidebar-hover: #3a3b3e;
    --surface-dark: #28292b;

    /* Interaction states */
    --primary-hover: #d97c1e;
    --primary-tint: rgba(247,147,44,0.12);
    --primary-ring: 0 0 0 0.25rem rgba(247,147,44,0.25);

    /* Surfaces */
    --surface-alt: #f8f9fa;
    --border: #dee2e6;

    /* Status trio (+ info for awareness-only alerts) */
    --status-overdue: #d32f2f;
    --status-warn: #f0ad4e;
    --status-ok: #388e3c;
    --status-info: #4a6fa5;

    /* Status tints: quiet backgrounds/borders for stateful pills (renewal
       pipeline), plus a darker warn ink — #f0ad4e text is illegible on a tint. */
    --status-overdue-tint: rgba(211, 47, 47, 0.09);
    --status-overdue-line: rgba(211, 47, 47, 0.35);
    --status-warn-tint: rgba(240, 173, 78, 0.18);
    --status-warn-line: rgba(240, 173, 78, 0.55);
    --status-warn-text: #b17110;
    --status-ok-tint: rgba(56, 142, 60, 0.12);
    --status-ok-line: rgba(56, 142, 60, 0.35);
    --status-info-tint: rgba(74, 111, 165, 0.10);
    --status-info-line: rgba(74, 111, 165, 0.35);

    /* Typography scale */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;

    /* Border-radius scale */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-pill: 50rem;

    /* Shadow scale */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.07);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.10);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.13);
}

/* ── Bootstrap overrides ────────────────────────────────────────────────────── */
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--surface-alt);
    border-color: var(--border);
    color: var(--text-muted);
    opacity: 1;
    box-shadow: none;
}
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: var(--white); }
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--primary);
    border-color: var(--primary);
    background-color: transparent;
    opacity: 1;
    box-shadow: none;
}

.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-muted { color: var(--text-muted) !important; }

.alert-success { background-color: #d4edda; border-color: var(--success); color: #155724; }
.alert-danger  { background-color: #f8d7da; border-color: var(--danger);  color: #721c24; }
.alert-warning { background-color: #fff3cd; border-color: var(--warning); color: #856404; }

.card { border: none; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 8px; }
.card-header { border: none; border-radius: 8px 8px 0 0 !important; }
.card-header:not(.bg-white) { background: var(--primary); color: white; }

/* ── Kiosk primitives ───────────────────────────────────────────────────────── */
/* Exercise dots (exercise name pills at the bottom of the delivery view) */
.dot {
    border-radius: 20px;
    background: var(--border);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.dot.active {
    background: var(--primary);
    color: var(--white);
}

/* Completion checkmark badge on dots */
.dot-check {
    position: absolute;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}
.dot .dot-check::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 7px;
}

/* Performance trend chip */
.trend-chip {
    background: var(--primary-tint);
    border: 1px solid rgba(247,147,44,0.3);
    font-weight: 600;
    border-radius: 12px;
}

/* Trend label (small uppercase header above trend chip) */
.trend-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Separator between trend items */
.trend-sep { color: #adb5bd; }

/* Kiosk nav button: Bootstrap handles mechanics; this class preserves tap-target sizing */
.kiosk-nav-btn { padding: 12px 20px; min-width: 120px; font-size: 1rem; border-radius: 8px; }


/* Sortable tables */
.sortable-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th.sortable:hover { opacity: 0.8; }
.sort-indicator { font-size: 0.75em; margin-left: 2px; }

/* Client-side table row filtering */
.row-hidden { display: none !important; }

/* Allow flex children to shrink below content size */
.min-width-0 { min-width: 0; }

/* ── DataTables theme overrides ─────────────────────────────────────────────── */
/* Search input + length select: match Bootstrap form controls */
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.25rem 0.5rem;
    font-size: var(--fs-sm);
    color: var(--text-dark);
    background-color: var(--white);
}
div.dt-container .dt-search input:focus {
    border-color: var(--primary) !important;
    outline: 0;
    box-shadow: var(--primary-ring);
}

/* Pagination: current page orange, hover uses primary-hover */
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: var(--white) !important;
    border: 1px solid var(--primary) !important;
    background: var(--primary) !important;
}
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    color: var(--white) !important;
    border: 1px solid var(--primary-hover) !important;
    background: var(--primary-hover) !important;
}

/* ColumnControl search inputs: match Bootstrap border tokens */
table.dataTable {
    --dtcc-search-input_border: 1px solid var(--border);
    --dtcc-search-input_border-radius: var(--radius-sm);
}

/* Keep wide DataTables inside their card/container on smaller screens.
   The wrapper becomes the horizontal scroll area while the table keeps the
   width it needs for all columns. */
div.dt-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
div.dt-container table.dataTable {
    min-width: 100%;
    width: max-content !important;
}

/* Compact alert tables size columns to content and keep rows on one line. */
table.alerts-compact-table th,
table.alerts-compact-table td {
    white-space: nowrap;
}
table.alerts-compact-table {
    width: auto !important;
}
/* Free-text cells opt out of nowrap so long comments wrap inside their own
   column instead of overflowing onto the neighbouring ones. */
table.alerts-compact-table td.alerts-wrap-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 260px;
    max-width: 420px;
}

/* Columns picker (dt-columns-panel): active entries highlighted in primary */
.dt-columns-panel button.dtcc-button_active { background: rgba(0, 0, 0, 0.06); }
.dt-columns-panel button.dtcc-button_active span.dtcc-button-state svg {
    color: var(--primary);
    stroke: var(--primary);
}

/* ColumnControl UX defaults (apply to all themed DataTables) */
/* Hide native sort arrows — ColumnControl's 'order' element handles this */
table.dataTable thead th span.dt-column-order { display: none; }
/* Labels left, controls right (DT reverses flex for date/numeric columns) */
table.dataTable thead tr:first-child th div.dt-column-header { flex-direction: row !important; }
table.dataTable thead tr:first-child th .dt-column-title { text-align: left; }
/* Search inputs: fill column width rather than driving it */
table.dataTable [class*="dtcc-search"] > div { min-width: 0; }
table.dataTable [class*="dtcc-search"] input { min-width: 0 !important; width: 100%; box-sizing: border-box; }
/* Date search inputs: operator icon on the right */
table.dataTable .dtcc-searchDateTime > div .dtcc-search-type-icon { right: 0; left: auto; }
table.dataTable .dtcc-searchDateTime > div select               { right: 0; left: auto; }
table.dataTable .dtcc-searchDateTime > div .dtcc-search-clear   { right: 28px; left: auto; }
table.dataTable .dtcc-searchDateTime > div input {
    padding-right: 46px;
    padding-left: var(--dtcc-search-input_padding);
    text-align: left;
}

/* ── ROM Camera Overlay ────────────────────────────────────────────────────── */
.rom-camera-overlay {
    position: fixed; inset: 0; z-index: 1060;
    background: #000;
    display: flex; flex-direction: column;
}
.rom-camera-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.85);
    color: var(--white);
    font-size: var(--fs-sm); font-weight: 600;
}
.rom-camera-body {
    position: relative; flex: 1; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: #000;
}
.rom-camera-body video,
.rom-camera-body canvas {
    position: absolute;
    top: 50%; left: 50%;
    width: auto; height: auto;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
}
.rom-angle-display {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    text-align: center;
    background: rgba(0,0,0,0.75);
    border-radius: var(--radius-lg);
    padding: 14px 32px;
    min-width: 160px;
}
.rom-angle-number {
    font-size: 3.2rem; font-weight: 700;
    color: var(--white);
    line-height: 1;
}
.rom-angle-number.compliant    { color: var(--status-ok); }
.rom-angle-number.limited      { color: var(--status-warn); }
.rom-angle-number.non-compliant { color: var(--status-overdue); }
.rom-angle-target {
    color: rgba(255,255,255,0.55);
    font-size: var(--fs-xs);
    margin-top: 6px;
}
/* Square-on hint — a valid side-view ROM reading needs the client lateral. */
.rom-square-warn {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    background: var(--status-warn);
    color: #000;
    font-size: var(--fs-sm); font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-lg);
    z-index: 6;
}
/* Live rep / ROM readout (Monitor mode). */
.rom-stats {
    display: flex; align-items: center; gap: 14px;
    color: var(--white);
}
.rom-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.rom-stat > span:last-child { font-size: 1.15rem; font-weight: 700; }
.rom-stat-label {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5);
}
.rom-flags { display: flex; gap: 4px; }
.rom-camera-footer {
    display: flex; align-items: center; gap: 12px; justify-content: flex-end;
    padding: 10px 14px;
    background: rgba(0,0,0,0.85);
    position: relative;
    z-index: 2;
}
.rom-step-label {
    flex: 1;
    color: rgba(255,255,255,0.6);
    font-size: var(--fs-sm);
}
.rom-settings-panel {
    position: absolute; top: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.92);
    color: var(--white);
    padding: 16px;
    z-index: 10;
    overflow-y: auto;
    max-height: 75%;
}
.rom-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.rom-settings-row {
    display: flex; flex-direction: column; gap: 4px;
}
.rom-settings-row label {
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
}
.rom-settings-input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: var(--fs-sm);
    width: 100%;
}
.rom-settings-val {
    font-size: var(--fs-sm);
    min-width: 36px;
    text-align: right;
    color: rgba(255,255,255,0.7);
}
.rom-settings-panel .form-range::-webkit-slider-runnable-track { background: rgba(255,255,255,0.2); }
.rom-settings-panel .form-range::-webkit-slider-thumb { background: var(--primary); }
.rom-settings-panel .form-range::-moz-range-thumb { background: var(--primary); border: none; }
.rom-settings-help {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: var(--fs-xs);
}
.rom-settings-help dl { margin: 0; }
.rom-settings-help dt {
    font-weight: 700; color: var(--primary);
    margin-top: 8px;
}
.rom-settings-help dt:first-child { margin-top: 0; }
.rom-settings-help dd {
    margin-left: 0;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}
.rom-settings-actions {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.chart-grid-locked,
.session-col-locked {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.chart-grid-locked .exercise-row-header,
.chart-grid-locked #collapse-all-btn {
    pointer-events: auto;
    cursor: pointer;
}

/* ── Renewal pipeline (alerts queue + delivery kiosk prompt card) ─────────────
   Shared here because the kiosk templates don't load alerts.css: the state pill
   renders in the /alerts Renewals queue AND in the delivery prompt card. */
.renewal-state-pill {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 50rem;
    border: 1px solid transparent;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
/* Tinted (not solid) so the pill reads as state, not as an alarm — the row's
   severity stripe already carries urgency. */
.renewal-state-not_raised {
    background: var(--surface-alt);
    color: var(--text-muted);
    border-color: var(--border);
}
/* A critical row still unraised is the one place the pill itself escalates. */
.renewal-state-not_raised.is-urgent {
    background: var(--status-overdue-tint);
    color: var(--status-overdue);
    border-color: var(--status-overdue-line);
}
.renewal-state-raised {
    background: var(--status-warn-tint);
    color: var(--status-warn-text);
    border-color: var(--status-warn-line);
}
.renewal-state-deciding {
    background: var(--status-info-tint);
    color: var(--status-info);
    border-color: var(--status-info-line);
}
.renewal-state-ready_to_sign {
    background: var(--status-ok-tint);
    color: var(--status-ok);
    border-color: var(--status-ok-line);
}
/* Declined renders only on the client-detail panel (the re-open surface) —
   the queue and the delivery prompt drop declined rows entirely. */
.renewal-state-declined {
    background: var(--surface-alt);
    color: var(--text-muted);
    border-color: var(--border);
    border-style: dashed;
}

/* Delivery-view renewal prompt card (kiosk primitive: touch targets, no hover). */
.renewal-prompt-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 8px 10px 0;
    padding: 10px 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
}
.renewal-prompt-main { flex: 1 1 260px; min-width: 0; }
.renewal-prompt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-dark);
}
.renewal-prompt-title i { color: var(--primary); }
.renewal-prompt-detail {
    margin-top: 2px;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--text-muted);
}
.renewal-prompt-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.renewal-prompt-actions .btn { min-height: 36px; }
.renewal-prompt-logged {
    font-weight: 600;
    color: var(--status-ok);
    white-space: nowrap;
}

/* Strength Plus promo launch card (kiosk primitive, shared by both delivery
   templates via _promo_launch_card.html) — same shell as the renewal prompt:
   a flat card between the notes row and the exercise area, touch targets
   >=36px, no hover states (touch-only device). */
.promo-launch-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 8px 10px 0;
    padding: 10px 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
}
.promo-launch-main { flex: 1 1 260px; min-width: 0; }
.promo-launch-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-dark);
}
.promo-launch-title i { color: var(--primary); }
.promo-launch-detail {
    margin-top: 2px;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--text-muted);
}
.promo-launch-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.promo-launch-actions .btn { min-height: 36px; }
.promo-launch-form { display: inline-flex; }

/* Deliver-modal next-appointment callout (kiosk primitive, shared by both
   delivery templates): the coach reads it aloud on the client's way out, so
   it must not scan as fine print next to the form fields. */
.deliver-next-appt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--primary-tint);
    border: 1px solid rgba(247,147,44,0.3);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}
.deliver-next-appt i {
    color: var(--primary);
    font-size: 1.15rem;
}

/* ── Client-area panel primitives (ca-*) ──────────────────────────────────────
   The hero + stat-chips + tabs page shell introduced on Client Detail and now
   shared by the Client Feedback results page. Promoted here from
   client_detail.html's inline block so pages share one definition (single-
   stylesheet rule). Page-specific styles (m4-acc*, cd-*) stay on their page. */
.ca-panel { border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 1rem; overflow: hidden; margin-bottom: 1.5rem; }
.ca-hero { background: var(--white); padding: 1.25rem 1.5rem 0; }
.ca-hero h1 { font-size: 1.55rem; font-weight: 700; margin: 0; color: var(--surface-dark); }
.ca-hero .ca-subtitle { color: var(--text-muted); margin: 0.35rem 0 0; }
.ca-chips { display: flex; gap: 0.75rem; flex-wrap: wrap; padding: 0.85rem 0 0.85rem; }
.ca-chip { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 0.9rem; padding: 0.65rem 0.85rem; min-width: 110px; }
.ca-chip-value { color: var(--surface-dark); font-size: 1.15rem; font-weight: 700; line-height: 1; }
.ca-chip-label { color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.06em; margin-top: 0.25rem; text-transform: uppercase; }
.ca-tabs { display: flex; gap: 0; padding: 0; border-bottom: none; flex-wrap: wrap; }
.ca-tabs .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.ca-tabs .nav-link:hover { color: var(--surface-dark); border-bottom-color: var(--border); background: transparent; }
.ca-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.ca-tab-badge { font-size: 0.62rem; font-weight: 700; background: var(--primary); color: #fff; border-radius: 10px; padding: 0px 5px; line-height: 1.5; }
.ca-body { background: var(--surface-alt); min-height: 400px; }
.ca-body .tab-pane { padding: 1.25rem 1.5rem; }
.ca-chip-status-green { border-color: var(--status-ok); }
.ca-chip-status-green .ca-chip-value { color: var(--status-ok); }
.ca-chip-status-yellow { border-color: var(--status-warn); }
.ca-chip-status-yellow .ca-chip-value { color: #c47d0e; }
.ca-chip-status-red { border-color: var(--status-overdue); }
.ca-chip-status-red .ca-chip-value { color: var(--status-overdue); }

/* ── Coach Shifts week grid ─────────────────────────────────────────────── */
.coach-shifts-grid th.coach-shifts-today { border-top: 2px solid var(--primary); color: var(--primary); }
.coach-shifts-cell { cursor: pointer; position: relative; min-height: 52px; }
.coach-shifts-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.coach-shifts-cell.coach-shifts-today { background: var(--surface-alt); }
.coach-shift-chip { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.15rem 0.5rem; font-size: 0.82rem; white-space: nowrap; display: inline-block; margin: 1px 0; }
.coach-shift-chip-override { border-color: var(--primary); }
.coach-shift-chip-label { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.coach-shift-override-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.coach-shifts-closed { background: var(--surface-alt); }
td.coach-shifts-closed .coach-shift-chip { opacity: .55; }
.coverage-cell-ok { background: var(--status-ok-tint); color: var(--status-ok); }
.coverage-cell-warn { background: var(--status-warn-tint); color: #c47d0e; }
.coverage-cell-danger { background: var(--status-overdue-tint); color: var(--status-overdue); }

/* ── Coach Shifts coverage heat strips (week tfoot) ─────────────────────── */
.coverage-heat { position: relative; height: 110px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 0.3rem; overflow: hidden; margin-bottom: 0.25rem; }
.coverage-heat .heat-left { position: absolute; left: 0; width: 46%; }
.coverage-heat .heat-right { position: absolute; right: 0; width: 46%; }
.coverage-heat .heat-full { position: absolute; left: 0; right: 0; }
.heat-demand.depth-1 { background: var(--primary-tint); }
.heat-demand.depth-2 { background: rgba(247, 147, 44, 0.32); }
.heat-demand.depth-3 { background: rgba(247, 147, 44, 0.5); }
.heat-supply.depth-1 { background: var(--status-ok-tint); }
.heat-supply.depth-2 { background: rgba(56, 142, 60, 0.3); }
.heat-supply.depth-3 { background: rgba(56, 142, 60, 0.48); }
.heat-gap { background: var(--status-overdue-tint); border-top: 2px solid var(--status-overdue); border-bottom: 2px solid var(--status-overdue); }
.coverage-info { font-size: 0.7rem; color: var(--text-muted); }

/* ── Coach Shifts day ribbon (drill-in modal) ───────────────────────────── */
.day-ribbon { min-width: 640px; }
.ribbon-lane { display: grid; grid-template-columns: 110px 1fr; align-items: center; margin-bottom: 0.45rem; }
.ribbon-label { font-size: 0.8rem; font-weight: 600; padding-right: 0.75rem; text-align: right; color: var(--text-muted); }
.ribbon-track { position: relative; height: 26px; background: var(--surface-alt); border-radius: 0.3rem; }
.ribbon-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 0.25rem; font-size: 0.68rem; font-weight: 600; color: #fff; display: flex; align-items: center; padding-left: 0.4rem; overflow: hidden; white-space: nowrap; }
.lane-c0 { background: var(--status-info); }
.lane-c1 { background: var(--primary-hover); }
.lane-c2 { background: var(--status-ok); }
.lane-c3 { background: var(--secondary); }
.ribbon-window { position: absolute; height: 10px; border: 1.5px solid var(--primary); background: var(--primary-tint); border-radius: 3px; }
.ribbon-gap { position: absolute; top: 0; bottom: 0; background: var(--status-overdue-tint); border-left: 2px solid var(--status-overdue); border-right: 2px solid var(--status-overdue); }
.ribbon-gap-flag { position: absolute; top: -16px; transform: translateX(-50%); font-size: 0.64rem; font-weight: 700; color: var(--status-overdue); white-space: nowrap; }
.ribbon-track-windows { overflow: visible; margin-top: 14px; }
.ribbon-axis { position: relative; height: 18px; margin-left: 110px; font-size: 0.68rem; color: var(--text-muted); }
.ribbon-axis span { position: absolute; transform: translateX(-50%); }

/* ── Appointments page: coach shift shading on MB columns ───────────────── */
td.coach-shade-0 { background: rgba(74, 111, 165, 0.22); }
td.coach-shade-1 { background: rgba(247, 147, 44, 0.22); }
td.coach-shade-2 { background: rgba(56, 142, 60, 0.18); }
td.coach-shade-3 { background: rgba(119, 119, 119, 0.18); }
td.coach-cell-uncov { background: var(--status-overdue-tint); }
.coach-shade-swatch { display: inline-block; width: 0.85em; height: 0.85em; border-radius: 2px; margin-right: 0.3em; vertical-align: -0.05em; border: 1px solid var(--border); }
.coach-shade-swatch.coach-shade-0 { background: rgba(74, 111, 165, 0.35); }
.coach-shade-swatch.coach-shade-1 { background: rgba(247, 147, 44, 0.35); }
.coach-shade-swatch.coach-shade-2 { background: rgba(56, 142, 60, 0.3); }
.coach-shade-swatch.coach-shade-3 { background: rgba(119, 119, 119, 0.3); }
.coach-shade-swatch.coach-cell-uncov { background: var(--status-overdue-tint); border-color: var(--status-overdue); }
.coach-cell-shaded { /* marker; the tint itself is the coach's chosen color, inlined */ }
/* A rowspan appointment cell: its content stretches to fill the covered
   rows so the appointment reads as one tall button spanning its duration. */
td.coach-cell-span { vertical-align: middle; height: 1px; /* lets height:100% resolve inside table cells */ }
td.coach-cell-span .dropdown,
td.coach-cell-span > a.btn,
td.coach-cell-span > span.small { height: 100%; }
td.coach-cell-span .dropdown > .btn,
td.coach-cell-span > a.btn { height: 100%; display: flex; align-items: center; justify-content: center; }

/* ── Studio scope picker (shared combobox, _studio_scope_picker.html) ───── */
.ssp-combobox { position: relative; width: 280px; max-width: 100%; }
.ssp-input { cursor: pointer; }
.ssp-list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    max-height: 320px;
    overflow-y: auto;
}
.ssp-opt { padding: 0.4rem 0.7rem; cursor: pointer; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssp-opt:hover, .ssp-opt.ssp-active { background: var(--surface-alt); }
.ssp-opt[aria-selected="true"] { font-weight: 600; color: var(--primary); }
.ssp-empty { padding: 0.5rem 0.7rem; font-size: 0.82rem; color: var(--text-muted); }

/* ── Contextual help button (base.html, all authenticated pages) ────────────── */
.page-help-fab {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1035; /* above content, below modals (1055) and mobile navbar (1040) */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text-muted);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.page-help-fab:hover, .page-help-fab:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
}