/* Scheduler Module Styles */

.sch-container {
    max-width: 1300px;
    margin: 20px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

/* ─── Tutorial Tab ───────────────────────────────────────────────────────── */

.sch-tutorial {
    max-width: 820px;
    padding: 8px 0 40px;
    color: #333;
    line-height: 1.55;
}

.sch-tutorial-intro {
    margin-bottom: 20px;
}
.sch-tutorial-intro h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.01em;
}

.sch-tutorial-heading {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.01em;
}

.sch-tutorial-video {
    margin: 0 0 32px;
}
.sch-tutorial-video-frame {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    background: #fff;
    border: 1px solid #e3e8ed;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.05),
                0 14px 34px -20px rgba(20, 40, 70, 0.14);
    overflow: hidden;
}
.sch-tutorial-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.sch-tutorial-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9aa3ad;
    font-size: 14px;
    background:
        linear-gradient(180deg, #fbfcfd 0%, #f5f7fa 100%);
}
.sch-tutorial-video-placeholder svg {
    color: #bbdefb;
}

.sch-tutorial-steps {
    background: #fff;
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    padding: 22px 28px 10px;
    margin-bottom: 24px;
    max-width: 760px;
}
.sch-tutorial-steps h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Step list — numbered pill + mini-heading + body block per step. */
.sch-tut-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: sch-tut-step;
}

.sch-tut-step {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    padding: 20px 0;
    border-top: 1px solid #eef1f4;
    counter-increment: sch-tut-step;
    align-items: start;
}
.sch-tut-step:first-child {
    border-top: none;
    padding-top: 6px;
}
.sch-tut-step:last-child {
    padding-bottom: 6px;
}

/* Numbered pill via CSS counter — numbers auto-update if steps are
   added or reordered. Pulls from the same blue-pill palette as
   .sch-location-pill and .sch-onb-kicker so it feels native. */
.sch-tut-step::before {
    content: counter(sch-tut-step);
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 50%;
    color: #1565c0;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.sch-tut-step-title {
    grid-column: 2;
    grid-row: 1;
    margin: 4px 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1c2733;
    letter-spacing: -0.003em;
    line-height: 1.3;
}

.sch-tut-step-body {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5f6a74;
}
.sch-tut-step-body p {
    margin: 0 0 10px;
}
.sch-tut-step-body p:last-child {
    margin-bottom: 0;
}
.sch-tut-step-body a {
    color: #1976D2;
    text-decoration: none;
    border-bottom: 1px solid #bbdefb;
}
.sch-tut-step-body a:hover {
    color: #1565c0;
    border-bottom-color: #1565c0;
}
.sch-tut-step-body strong {
    color: #1c2733;
}
.sch-tut-step-body em {
    font-style: italic;
    color: #1565c0;
}

/* ─── Updates Tab ────────────────────────────────────────────────────────── */

.sch-updates {
    max-width: 820px;
    padding: 8px 0 40px;
    color: #333;
    line-height: 1.55;
}

.sch-updates-heading {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.01em;
}

.sch-updates-section {
    background: #fff;
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    padding: 18px 28px;
    margin-bottom: 20px;
    max-width: 760px;
}

.sch-updates-section-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #1565c0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sch-updates-section-title--upcoming {
    color: #2e7d32;
}

.sch-updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sch-update-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 14px;
    padding: 10px 0;
    border-top: 1px solid #eef1f4;
    align-items: start;
}
.sch-update-item:first-child {
    border-top: none;
    padding-top: 4px;
}
.sch-update-item:last-child {
    padding-bottom: 4px;
}

.sch-update-item::before {
    content: "";
    grid-column: 1;
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 50%;
    background: #bbdefb;
}
.sch-updates-list--upcoming .sch-update-item::before {
    background: #a5d6a7;
}

.sch-update-body {
    grid-column: 2;
    font-size: 14px;
    line-height: 1.6;
    color: #5f6a74;
}
.sch-update-body p {
    margin: 0;
}
.sch-update-body strong {
    color: #1c2733;
}
.sch-update-body ul {
    margin: 6px 0 0;
    padding-left: 20px;
}
.sch-update-body ul li {
    margin: 2px 0;
}
/* Inline pill styling for picker affordance labels (+ OR / + AND / + OR) so
   they read as actual UI controls rather than plain text. Matches
   .sch-branched-picker .sch-pill defaults — dashed border, gray text. */
.sch-update-body code {
    display: inline-block;
    padding: 1px 6px;
    border: 1px dashed rgba(26, 38, 58, 0.25);
    border-radius: 4px;
    color: #6b7a8c;
    font: 500 0.9em/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
    background: transparent;
    vertical-align: 1px;
}
/* Divider-style "+ OR" — flex layout puts solid flanking lines INSIDE the
   dashed pill border, mirroring the picker's add-new-branch affordance
   which renders the whole ---- + OR ---- strip wrapped in one dashed
   button. Used to differentiate the new-branch + OR from the in-row + OR
   which has no flanking lines. */
.sch-update-body code.is-divider {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 1px 8px;
}
.sch-update-body code.is-divider::before,
.sch-update-body code.is-divider::after {
    content: "";
    width: 24px;
    height: 1px;
    background: #8a98a8;
}

/* ─── Tab Navigation ─────────────────────────────────────────────────────── */

.sch-tabs {
    display: flex;
    border-bottom: 2px solid #d7dde2;
    margin-bottom: 20px;
}

/* Resting tabs: muted fill, matching transparent top accent so active-state
   swap doesn't shift vertical alignment. */
.sch-tab {
    padding: 10px 24px 12px;
    cursor: pointer;
    background: #eef1f4;
    font-size: 15px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border: 1px solid transparent;
    border-top: 3px solid transparent;
    border-radius: 6px 6px 0 0;
    margin-right: 2px;
    color: #5f6a74;
}

.sch-tab:hover {
    background: #e3e8ed;
    color: #3b4149;
}

/* Active tab: colored top cap + side borders + white fill with a white
   bottom seam that covers the parent's gray border so it "connects" to the
   content panel. The combination reads as a clearly lifted, selected panel
   instead of floating text. */
.sch-tab.active {
    background: #fff;
    border-top-color: #1565c0;
    border-left-color: #d7dde2;
    border-right-color: #d7dde2;
    border-bottom: 2px solid #fff;
    margin-bottom: -2px;
    font-weight: 600;
    color: #1565c0;
}

.sch-tab.active:hover {
    background: #fff;
    color: #1565c0;
}

.sch-tab.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── Tutorial: Video Walkthrough button + slot (9.27) ───────────────────── */

/* Wrapper around the section's <h2> + Video Walkthrough button so they sit
   inline as a logical title group on the left side of .sch-section-header
   (or .sch-saved-header). */
.sch-section-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* The "Video Walkthrough" trigger button sits beside each section's <h2>.
   Click toggles the panel slot below. The collapsed state implicitly
   signals "already watched" — no separate watched indicator. */
.sch-tut-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(180deg, #2196f3 0%, #1976d2 100%);
    border: 1px solid rgba(13, 71, 161, 0.35);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.01em;
    box-shadow:
        0 1px 2px rgba(20, 50, 110, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}
.sch-tut-trigger:hover {
    background: linear-gradient(180deg, #42a5f5 0%, #1e88e5 100%);
    box-shadow:
        0 2px 6px rgba(20, 50, 110, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.sch-tut-trigger:active {
    transform: translateY(0);
    box-shadow:
        0 1px 1px rgba(20, 50, 110, 0.18),
        inset 0 1px 2px rgba(13, 71, 161, 0.18);
}
.sch-tut-trigger.is-active {
    /* Panel-open state: deeper, slightly pressed-in look. */
    background: linear-gradient(180deg, #1565c0 0%, #0d47a1 100%);
    box-shadow:
        0 1px 1px rgba(20, 50, 110, 0.18),
        inset 0 1px 2px rgba(13, 71, 161, 0.30);
    transform: translateY(0);
}
.sch-tut-trigger:focus-visible {
    outline: 2px solid #64b5f6;
    outline-offset: 2px;
}
.sch-tut-trigger-icon {
    font-size: 9px;
    line-height: 1;
    color: #fff;
}

/* Slot beneath each section header — empty when collapsed; populated with
   the video panel when expanded. The inner panel carries its own card chrome. */
.sch-tut-slot { margin: 0 0 16px 0; }
.sch-tut-slot:not(.is-open) { display: none; }
.sch-tut-panel {
    padding: 14px;
    background: #fff;
    border: 1px solid #d6e1f2;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 50, 110, 0.04);
}
.sch-tut-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.sch-tut-video iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.sch-tut-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Bump the action buttons up from the global sch-btn-sm size — they're
   the primary CTA in a contained panel, so a larger hit-target reads as
   intentional rather than cramped. */
.sch-tut-actions .sch-btn {
    font-size: 14px;
    padding: 9px 22px;
}
.sch-tut-already-watched {
    font-size: 13px;
    color: #1b5e20;
}

/* ─── Section Headers ────────────────────────────────────────────────────── */

.sch-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sch-section-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.sch-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sch-btn-primary { background: #2196F3; color: #fff; }
.sch-btn-primary:hover { background: #1976D2; }

.sch-btn-success { background: #4CAF50; color: #fff; }
.sch-btn-success:hover { background: #388E3C; }

.sch-btn-danger { background: #f44336; color: #fff; font-size: 11px; padding: 4px 8px; }
.sch-btn-danger:hover { background: #d32f2f; }

.sch-btn-ghost { background: transparent; color: #666; border: 1px solid #ddd; }
.sch-btn-ghost:hover { background: #f5f5f5; }

.sch-btn-sm { font-size: 11px; padding: 3px 8px; }

/* Disabled state — used when the Run button is blocked because the session's
   equipment usage shows a forced overload and no schedule has been generated
   yet. Visually muted; cursor signals "can't click me". Hover doesn't darken
   since :hover styles are scoped to non-disabled buttons via :not(:disabled). */
.sch-btn:disabled,
.sch-btn[disabled] {
    background: #cfd6e0;
    color: #6b7380;
    cursor: not-allowed;
    opacity: 0.85;
}
.sch-btn-primary:disabled,
.sch-btn-primary[disabled] {
    background: #cfd6e0;
}
.sch-btn-primary:disabled:hover,
.sch-btn-primary[disabled]:hover {
    background: #cfd6e0;
}

/* Inline note next to / above a disabled Run button explaining WHY it can't
   be clicked. Restrained red so it reads as a warning without looking like
   an error. */
.sch-session-run-blocked-note {
    font-size: 11px;
    color: #c62828;
    font-weight: 500;
    margin-right: 8px;
}
.sch-session-schedules-single .sch-session-run-blocked-note {
    margin: 0 0 6px 0;
    text-align: center;
}

/* 9.6 Phase B: hard-check failure list rendered above the Schedules header
   when preflight returns hard_failures. Visible only on expanded cards; the
   collapsed header still uses data-preflight-status to drive its tint. */
.sch-session-preflight-failures {
    background: #fff5f5;
    border: 1px solid #f1bcbc;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 10px;
    color: #862020;
    font-size: 12px;
}
.sch-session-preflight-failures-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: #c62828;
}
.sch-session-preflight-failures ul {
    margin: 0;
    padding-left: 18px;
}
.sch-session-preflight-failures li {
    margin: 2px 0;
}

/* 9.6 Phase B: soft pressure preview rendered inside the per-week equipment
   popdown for unrun + run-but-stale weeks. Run-and-fresh weeks skip the
   fetch and render nothing. */
.sch-preflight-preview {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f6f8fb;
    border: 1px solid #d6dde6;
    border-radius: 4px;
    font-size: 12px;
    color: #2c3a4a;
}
.sch-preflight-preview-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: #41546b;
}
.sch-preflight-preview-list {
    margin: 0;
    padding-left: 18px;
}
.sch-preflight-preview-list li {
    margin: 2px 0;
}
.sch-preflight-preview-loading,
.sch-preflight-preview-empty {
    color: #6a7a8c;
    font-style: italic;
}
.sch-preflight-preview-error {
    color: #862020;
}

/* ─── Equipment Table ────────────────────────────────────────────────────── */

.sch-equip-table {
    width: 100%;
    border-collapse: collapse;
}

.sch-equip-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    padding: 6px 10px 8px;
    border-bottom: 2px solid #eee;
}

.sch-equip-table .sch-equip-th-code { width: 36px; }
.sch-equip-table .sch-equip-th-qty { width: 60px; text-align: center; }
.sch-equip-table .sch-equip-th-actions { width: 50px; }

.sch-equip-row {
    transition: background 0.1s;
    cursor: default;
}

.sch-equip-row:hover {
    background: #f8f9fa;
}

.sch-equip-row td {
    padding: 9px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.sch-equip-td-qty {
    text-align: center;
    color: #555;
    cursor: pointer;
}

.sch-equip-td-qty:hover {
    color: #1565c0;
}

.sch-tree-label {
    cursor: pointer;
}

.sch-tree-label:hover {
    color: #1565c0;
}

.sch-row-action {
    opacity: 0;
    transition: opacity 0.15s;
}

.sch-equip-row:hover .sch-row-action {
    opacity: 1;
}

.sch-equip-code {
    font-family: monospace;
    font-size: 11px;
    background: #e0e0e0;
    padding: 2px 6px;
    border-radius: 3px;
    color: #555;
}

/* ─── Add Row ───────────────────────────────────────────────────────────── */

.sch-equip-add-row td {
    padding: 8px 10px;
    border-bottom: none;
}

.sch-equip-add-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}

.sch-equip-add-input:focus {
    border-color: #2196F3;
    outline: none;
}

.sch-equip-add-qty {
    width: 56px;
    text-align: center;
}

/* ─── Events List (nested, drag-and-drop) ────────────────────────────────── */

/* Container for the Events tab. Mirrors the classes list styling so the two
 * tabs feel structurally identical — category tree, drop targets, delete-on-
 * hover row actions. */
.sch-events-list {
    background: #fff;
}

.sch-event-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    transition: background 0.1s;
    cursor: default;
}

.sch-event-list-item:hover {
    background: #f8f9fa;
}

.sch-event-name {
    /* Fixed basis so the nickname column next to it has a consistent left
     * edge across all rows, regardless of name length. */
    flex: 0 0 180px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sch-event-name:hover {
    color: #1565c0;
}

.sch-event-qty {
    min-width: 44px;
    text-align: center;
    color: #555;
    font-size: 13px;
    cursor: pointer;
}

.sch-event-qty:hover {
    color: #1565c0;
}

.sch-event-list-item .sch-row-action {
    opacity: 0;
    transition: opacity 0.15s;
}

.sch-event-list-item:hover .sch-row-action {
    opacity: 1;
}

.sch-event-list-item.sch-drag-over {
    border-top: 2px solid #2196F3 !important;
}

/* Add-event inline form at the bottom of the list */
.sch-event-add-row {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-top: 1px solid #e4e8ed;
    align-items: center;
}

.sch-event-add-qty {
    max-width: 72px;
    text-align: center;
}

/* Destructive "Delete Location" demoted to the foot of the Events tab —
 * visible but separated by whitespace so it doesn't sit next to the primary
 * Add affordance. */
.sch-location-actions-bottom {
    display: flex;
    justify-content: flex-end;
    padding: 24px 10px 8px;
}

/* ─── Mode-group alternate badge ─────────────────────────────────────────── */

.sch-mode-alt-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 6px;
    font-size: 11px;
    color: #5a4b00;
    background: #fff3c4;
    border: 1px solid #e8d782;
    border-radius: 3px;
    white-space: nowrap;
}

/* ─── Per-Station Nicknames (qty > 1) ────────────────────────────────────── */

/* Inline middle column of .sch-event-list-item. Always present (empty span
 * when qty = 1) so every row's name column stays the same width and the qty
 * / Del columns line up vertically across all rows. */
.sch-event-nicknames {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    margin-left: 20px;
}

.sch-equip-label-input {
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    width: 150px;
    background: #fff;
    text-align: center;
}

.sch-equip-label-input:focus {
    border-color: #2196F3;
    outline: none;
}

/* ─── Inline Edit ────────────────────────────────────────────────────────── */

.sch-inline-input {
    padding: 3px 8px;
    border: 1px solid #2196F3;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    width: 200px;
}

.sch-event-name .sch-inline-input {
    width: 100%;
    box-sizing: border-box;
}

/* ─── Empty State ────────────────────────────────────────────────────────── */

.sch-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.sch-empty p {
    margin: 8px 0;
}

/* ─── App Title ──────────────────────────────────────────────────────────── */

.sch-app-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

/* ─── Status Toast ───────────────────────────────────────────────────────── */

.sch-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    z-index: 1000;
    transition: opacity 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.sch-toast.success { background: #e8f5e9; color: #2e7d32; }
.sch-toast.error { background: #ffebee; color: #c62828; }
.sch-toast.hidden { opacity: 0; pointer-events: none; }

/* ─── Field-level Error Popup ────────────────────────────────────────────── */
/* Used by Scheduler.showFieldError() — positioned via JS with getBoundingClientRect,
   so the transform here just lifts it above the input and the arrow points down. */

.sch-field-error-popup {
    position: fixed;
    transform: translateY(-100%);
    background: #c62828;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.35;
    max-width: 340px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 10000;
    pointer-events: auto;
}

.sch-field-error-popup::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 14px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #c62828;
}

input.sch-field-error {
    outline: 2px solid #c62828;
    outline-offset: -1px;
    background: #fff5f5;
}

/* ─── Inline Steppers (Qty, Minutes on Class Events) ─────────────────────── */

.sch-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.sch-stepper-btn {
    width: 22px;
    height: 24px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #333;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    user-select: none;
}
.sch-stepper-btn:hover:not(:disabled) {
    background: #e3f2fd;
    border-color: #64b5f6;
    color: #0d47a1;
}
.sch-stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Wrapper that carries the hover title for a disabled stepper button.
   A bare <button disabled> doesn't fire pointer events on some browsers, so
   wrapping it in a span with pointer-events: auto lets the native tooltip
   appear when the user hovers the now-disabled "+". */
.sch-stepper-disabled-wrap {
    display: inline-flex;
    pointer-events: auto;
    cursor: not-allowed;
}
.sch-stepper-disabled-wrap > .sch-stepper-btn {
    pointer-events: none;
}

.sch-stepper-val {
    display: inline-block;
    min-width: 28px;
    padding: 0 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #222;
}

/* ─── Location Bar ──────────────────────────────────────────────────────── */

#sch-location-bar {
    margin-bottom: 12px;
}

.sch-location-pills {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.sch-location-pill {
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #f5f5f5;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.sch-location-pill:hover {
    background: #e3f2fd;
    border-color: #bbdefb;
    color: #1976D2;
}

.sch-location-pill.active {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
    font-weight: 600;
}

.sch-location-pill.sch-location-add {
    background: transparent;
    border-style: dashed;
    color: #999;
    font-size: 16px;
    padding: 4px 12px;
    line-height: 1;
}

.sch-location-pill.sch-location-add:hover {
    background: #e8f5e9;
    border-color: #4CAF50;
    color: #4CAF50;
}

/* Inline rename pencil: hidden until the pill is hovered. Clicking it
   (rather than the pill body) opens the inline rename input — the pill's
   switchLocation handler is suppressed via stopPropagation. The "+"
   add-button doesn't get a pencil since it has no name to edit.
   Uses display:none (not opacity) so an opacity rule from elsewhere can't
   accidentally make it visible. */
.sch-location-pencil {
    display: none;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
}
.sch-location-pill:hover .sch-location-pencil {
    display: inline-block;
}
.sch-location-pencil:hover {
    opacity: 1;
}

/* Delete X: hover-shown sibling of the pencil. Coloured to read as
   destructive without screaming red on every pill the user happens to
   mouse past. Hidden entirely on single-location tenants (the JS doesn't
   render the span at all in that case). */
.sch-location-delete {
    display: none;
    margin-left: 4px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: #c0392b;
    opacity: 0.6;
}
.sch-location-pill:hover .sch-location-delete {
    display: inline-block;
}
.sch-location-delete:hover {
    opacity: 1;
}

.sch-location-input {
    font-size: 13px;
    padding: 4px 10px;
    width: 120px;
}

/* ─── Onboarding + Sign-in card ──────────────────────────────────────────
   Matches the scheduler's own design language: system font, neutral gray
   ground, white card, Material Blue accents. One distinctive flourish —
   a blue gradient strip along the top of the card — echoes the active-tab
   top cap used throughout the app so this reads as the first panel of
   the same tool, not a guest visit from a different brand. */

body.sch-onb-active #sch-location-bar,
body.sch-onb-active #sch-tabs-wrapper,
body.sch-onb-active .sch-container > .sch-app-title { display: none !important; }

.sch-onb {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 64px;
    min-height: calc(100vh - 220px);
}

.sch-onb-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border: 1px solid #e3e8ed;
    border-radius: 12px;
    padding: 48px 44px 40px;
    box-shadow:
        0 1px 3px rgba(20, 40, 70, 0.05),
        0 14px 34px -14px rgba(20, 40, 70, 0.14);
    overflow: hidden;
    animation: sch-onb-rise 0.55s cubic-bezier(.22, .84, .39, 1) both;
}

/* Top accent strip — the one flourish. Pulls from the scheduler's
   deep active-tab blue through the primary into the light hover tint,
   then adds a subtle mint touch that nods to the success color used
   elsewhere. Reads like a quiet "loading complete" band. */
.sch-onb-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        #1565c0 0%,
        #2196F3 45%,
        #64b5f6 80%,
        #90caf9 100%);
}

/* Small blue-pill kicker label — styled exactly like .sch-location-pill's
   active state so it feels native to the app. */
.sch-onb-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1565c0;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    padding: 5px 12px;
    border-radius: 14px;
    margin: 0 0 22px;
    animation: sch-onb-fade 0.45s 0.08s ease-out both;
}

/* Video embed inside the onboarding card. */
.sch-onb-video {
    width: 100%;
    max-width: 560px;
    margin: 28px 0 0;
    animation: sch-onb-fade 0.45s 0.56s ease-out both;
}
.sch-onb-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.05),
                0 14px 34px -14px rgba(20, 40, 70, 0.14);
}
.sch-onb-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.sch-onb-title {
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.015em;
    line-height: 1.24;
    margin: 0 0 12px;
    animation: sch-onb-fade 0.45s 0.16s ease-out both;
}

/* Accent word inside the heading — blue, matching the scheduler's
   primary color. No italics, no serif, no underline: restraint is the
   whole point. */
.sch-onb-accent {
    color: #1976D2;
}
.sch-onb-accent em { font-style: normal; }

.sch-onb-lead {
    font-size: 15px;
    line-height: 1.58;
    color: #5f6a74;
    margin: 0 0 28px;
    max-width: 52ch;
    animation: sch-onb-fade 0.45s 0.24s ease-out both;
}

/* Input field — same focus treatment as the rest of the scheduler's
   inputs: 1.5px neutral border, #2196F3 border + blue glow on focus. */
.sch-onb-field {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1.5px solid #d7dde2;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
    animation: sch-onb-fade 0.45s 0.32s ease-out both;
}
.sch-onb-field:focus-within {
    border-color: #2196F3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
}

.sch-onb-field-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px 0 18px;
    color: #7b8896;
    background: #f8f9fa;
    border-right: 1px solid #eef1f4;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.sch-onb-field:focus-within .sch-onb-field-prefix {
    background: #e3f2fd;
    color: #1976D2;
    border-right-color: #bbdefb;
}

.sch-onb-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: #222;
    outline: none;
    padding: 14px 16px;
}
.sch-onb-field input::placeholder {
    color: #9aa3ad;
}

.sch-onb-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    border: none;
    border-left: 1px solid #1565c0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0 22px;
    cursor: pointer;
    transition: filter 0.18s;
}
.sch-onb-submit:hover {
    filter: brightness(1.08);
}
.sch-onb-submit svg {
    transition: transform 0.25s;
}
.sch-onb-submit:hover svg {
    transform: translateX(3px);
}

/* Pulse when an example chip auto-fills the input. Uses the scheduler's
   primary blue so it visually matches the rest of the app. */
@keyframes sch-onb-field-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.35); }
    60%  { box-shadow: 0 0 0 12px rgba(33, 150, 243, 0); }
    100% { box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15); }
}
.sch-onb-field.sch-onb-field-pulse {
    animation: sch-onb-field-pulse 0.8s ease-out;
}

/* Example chips — mirror the .sch-location-pill pattern used in the
   main scheduler UI so they feel like siblings of the existing controls. */
.sch-onb-examples {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    animation: sch-onb-fade 0.45s 0.4s ease-out both;
}
.sch-onb-examples-label {
    font-size: 12px;
    color: #8a95a0;
    margin-right: 4px;
    font-weight: 500;
}
.sch-onb-chip {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #f5f5f5;
    color: #5f6a74;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sch-onb-chip:hover {
    background: #e3f2fd;
    border-color: #bbdefb;
    color: #1976D2;
}
.sch-onb-chip:active {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.sch-onb-foot {
    margin: 32px 0 0 0;
    font-size: 13px;
    color: #8a95a0;
    text-align: center;
    animation: sch-onb-fade 0.45s 0.48s ease-out both;
}
.sch-onb-foot a {
    color: #1976D2;
    text-decoration: none;
    border-bottom: 1px solid #bbdefb;
    padding-bottom: 1px;
    transition: color 0.15s, border-bottom-color 0.15s;
}
.sch-onb-foot a:hover {
    color: #1565c0;
    border-bottom-color: #1565c0;
}

/* Post-submit confirmation / error banner. Uses the scheduler's toast
   color families (success green, error red) so these feel like the
   same system, just pinned into the card instead of the corner. */
.sch-onb-message {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    animation: sch-onb-fade 0.4s ease-out both;
}
.sch-onb-message-ok {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
}
.sch-onb-message-ok strong { color: #1b5e20; font-weight: 600; }
.sch-onb-message-err {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    color: #c62828;
}

/* ── Motion keyframes ── */
@keyframes sch-onb-rise {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes sch-onb-fade {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Small screens ── */
@media (max-width: 640px) {
    .sch-onb { padding: 20px 12px 48px; }
    .sch-onb-card { padding: 36px 26px 32px; }
    .sch-onb-title { font-size: 22px; }
    .sch-onb-field { flex-direction: column; }
    .sch-onb-field-prefix {
        border-right: none;
        border-bottom: 1px solid #eef1f4;
        padding: 12px 16px;
        justify-content: flex-start;
    }
    .sch-onb-submit {
        padding: 14px;
        width: 100%;
        justify-content: center;
        border-left: none;
        border-top: 1px solid #1565c0;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .sch-onb *, .sch-onb-card { animation: none !important; }
}

/* ─── Classes Tab: Split Panel ────────────────────────────────────────────── */

.sch-classes-split {
    display: flex;
    gap: 0;
    min-height: 400px;
}

.sch-classes-list {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
}

.sch-classes-detail {
    flex: 1;
    padding: 0 0 0 24px;
    overflow-y: auto;
}

/* Category headers in list */
.sch-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f0f4f8;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    cursor: default;
}

.sch-cat-header-left {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sch-cat-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sch-cat-add-equip-input {
    max-width: 140px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
}

.sch-category-name {
    cursor: pointer;
    display: inline-block;
}

.sch-category-name:hover {
    color: #1565c0;
}

/* Class list items */
.sch-class-list-item {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 13px;
}

.sch-class-list-item:hover {
    background: #f5f5f5;
}

.sch-class-list-item.active {
    background: #e3f2fd;
    border-right: 3px solid #2196F3;
}

.sch-class-list-item .sch-tree-label {
    flex: 1;
    font-weight: 500;
    font-size: 13px;
}

.sch-class-list-dur {
    color: #999;
    font-size: 12px;
    margin-left: 8px;
    white-space: nowrap;
}

/* New category input at top of list */
.sch-new-category-row {
    padding: 8px 10px;
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 2px;
    background: #f8f9fa;
}

/* In the Events tab the list spans the full page width, so a full-width
 * "New category" row dominates the header visually and reads like a section
 * title. Tucking it into the right third keeps it discoverable without
 * competing with the category list below. Scoped to .sch-events-list so the
 * Class Types tab (which lives in a narrower split pane) is unaffected. */
/* New-category input sits inline in the section header (right of the "Events"
 * title). Compact, outlined, slight tint — reads as a secondary action, not a
 * primary row. Doesn't override the standalone .sch-new-category-row style
 * the Class Types tab uses (which keeps its full-width inline form). */
.sch-section-header .sch-new-category-row {
    padding: 4px 8px;
    margin: 0;
    background: #f3f6fa;
    border: 1px solid #dce3ec;
    border-radius: 6px;
}

.sch-section-header .sch-new-category-row .sch-class-add-input {
    max-width: 180px;
    font-size: 12px;
}

/* Add class input in list */
.sch-class-add-row-list {
    padding: 6px 10px;
    display: flex;
    gap: 4px;
}

.sch-class-add-input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}

.sch-class-add-input:focus {
    border-color: #2196F3;
    outline: none;
}

/* Drag handle */
.sch-drag-handle {
    cursor: grab;
    color: #ccc;
    font-size: 12px;
    margin-right: 6px;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
}

.sch-drag-handle:hover {
    color: #888;
}

.sch-class-list-item[draggable]:active .sch-drag-handle,
.sch-cat-header[draggable]:active .sch-drag-handle,
.sch-coach-row[draggable]:active .sch-drag-handle,
.sch-coach-cat-header[draggable]:active .sch-drag-handle {
    cursor: grabbing;
}

/* Drag-over highlight on coach drop targets — matches the class tab feel. */
.sch-coach-row.sch-drag-over,
.sch-coach-cat-header.sch-drag-over,
.sch-coach-empty.sch-drag-over {
    background: #dbeafe;
    outline: 2px dashed #3b82f6;
    outline-offset: -2px;
}

/* Drag states */
.sch-dragging {
    opacity: 0.4;
}

/* ── Coaches Tab (9.1a) ──────────────────────────────────────────────────── */

.sch-coach-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 16px;
    flex-wrap: wrap;
}
.sch-coach-add-input {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 14px;
    min-width: 180px;
}
.sch-coach-add-sep {
    color: #94a3b8;
    margin: 0 4px;
}
.sch-coach-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sch-coach-cat-block {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.sch-coach-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.sch-coach-cat-header.sch-coach-cat-uncat {
    background: #f8fafc;
    color: #64748b;
    font-style: italic;
}
.sch-coach-cat-name {
    font-weight: 600;
    flex: 1;
    cursor: text;
}
.sch-coach-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.sch-coach-row:last-child {
    border-bottom: 0;
}
.sch-coach-row:hover {
    background: #fafafa;
}
.sch-coach-name {
    flex: 1;
    cursor: text;
    padding: 2px 4px;
}
.sch-coach-cat-select {
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
}
.sch-coach-empty {
    padding: 10px 16px;
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
}
.sch-coach-mv {
    min-width: 24px;
    padding: 2px 6px;
}
.sch-coach-mv:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Coach chip picker on session_class rows (9.1b Phase 7). Replaces the
   single-coach <select> — class rows now carry a chip strip + "+ Coach"
   pill, and per-rotation override controls live in the expanded panel. */
.sch-session-class-coach-cell {
    padding: 4px 6px;
}

.sch-coach-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.sch-coach-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0f4f9;
    border-radius: 4px;
    padding: 2px 4px 2px 7px;
    font-size: 12.5px;
    color: #1e2b3c;
    line-height: 1.2;
    transition: background 0.12s;
}
.sch-coach-chip:hover { background: #e8eff7; }

.sch-coach-chip-name { font-weight: 500; }

.sch-coach-chip-x {
    background: none;
    border: none;
    color: #b0bccb;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.12s;
}
.sch-coach-chip-x:hover { color: #d94a4a; }

.sch-coach-chip-add {
    background: transparent;
    border: 1px dashed rgba(26, 38, 58, 0.25);
    color: #6b7a8c;
    font: 500 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sch-coach-chip-add:hover {
    color: #3566c7;
    background: rgba(91, 141, 239, 0.08);
    border-color: #5b8def;
    border-style: solid;
}

/* Per-rotation coach cell in the expanded class panel. Phase 5: switched
   from inline-flex to a vertical stack so multi-variant rotations can
   display OR alternatives one per row. Single-variant rotations still
   show as a single horizontal chip strip — the .sch-coach-variant wrapper
   keeps its chips inline. */
.sch-coach-rot-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Phase 5: one row per CoachVariant. Holds a chip strip + optional
   remove-variant button on the right. */
.sch-coach-variant {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* "— OR —" separator between adjacent CoachVariants. Subtle: faded gray,
   small, narrowly-spaced lines. */
.sch-coach-or {
    color: #8a98a8;
    font: 600 10px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.5px;
    padding: 2px 4px;
}

/* Drop-this-variant × button. Same visual language as .sch-coach-chip-x
   but slightly larger so it's clear it removes the whole row, not a chip. */
.sch-coach-variant-rm {
    background: transparent;
    border: 1px solid transparent;
    color: #8a98a8;
    font: 500 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sch-coach-variant-rm:hover {
    color: #d94a4a;
    border-color: rgba(217, 74, 74, 0.4);
    background: rgba(217, 74, 74, 0.06);
}

/* "+ alternative" footer affordance under the variant stack. Same dashed-
   pill language as .sch-coach-chip-add but with explicit copy. */
.sch-coach-add-variant {
    background: transparent;
    border: 1px dashed rgba(26, 38, 58, 0.25);
    color: #6b7a8c;
    font: 500 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    margin-top: 2px;
}
.sch-coach-add-variant:hover {
    color: #3566c7;
    background: rgba(91, 141, 239, 0.08);
    border-color: #5b8def;
    border-style: solid;
}

/* Coach picker popup — mirrors .sch-equip-picker. Fixed-position panel
   anchored to the clicked button by openCoachPicker. */
.sch-coach-picker {
    position: fixed;
    z-index: 2000;
    background: #fff;
    border: 1px solid #c9d4e1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sch-coach-picker-header {
    background: #f5f8fc;
    border-bottom: 1px solid #e4ebf2;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #4a6584;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sch-coach-picker-search {
    padding: 6px 8px;
    border-bottom: 1px solid #e4ebf2;
    background: #fafbfd;
    flex-shrink: 0;
}
.sch-coach-picker-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    font: 500 12px/1.3 inherit;
    color: #1e2b3c;
    background: #fff;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.sch-coach-picker-search-input:focus {
    border-color: #5b8def;
    box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.15);
}
.sch-coach-picker-search-input::placeholder { color: #a0adbf; }
.sch-coach-picker-body {
    overflow-y: auto;
    padding: 4px 0;
}
.sch-coach-picker-cat-header {
    font-size: 11px;
    font-weight: 600;
    color: #8695a8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 16px 2px;
}
.sch-coach-picker-item {
    font-size: 13px;
    color: #213040;
    padding: 5px 16px 5px 24px;
    cursor: pointer;
}
.sch-coach-picker-item:hover {
    background: #eef4fb;
    color: #3566c7;
}
.sch-coach-picker-empty {
    font-size: 12px;
    color: #8695a8;
    font-style: italic;
    padding: 10px 12px;
    text-align: center;
}

/* "↺ Reset rotation coaches" affordance pinned to the bottom of the
   rotations table inside the expanded class panel. Only renders when
   at least one rotation's effective coach set differs from the class
   coach set (so the user never sees a button that would visibly do
   nothing). Right-aligned to keep the rotations table visually anchored
   from the left; matches the placement the user iterated to. */
.sch-session-class-rot-reset-row {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 2px;
    padding-top: 8px;
    /* Closing line for the rotations table above — only present when the
       reset button is, so the table doesn't get an orphan bottom HR when
       every rotation already matches the class coach set. */
    border-top: 1px solid #e0e6ed;
}
.sch-coach-rot-reset-btn {
    background: transparent;
    border: 1px dashed rgba(91, 141, 239, 0.4);
    color: #3566c7;
    font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sch-coach-rot-reset-btn:hover {
    background: rgba(91, 141, 239, 0.1);
    border-color: #3566c7;
    border-style: solid;
}

/* Coach column inside the per-class rotations table. Wraps gracefully on
   narrow viewports so the chip strip + toggle don't blow out the cell. */
.sch-session-class-rot-coach {
    white-space: normal;
    min-width: 140px;
}

.sch-drag-over {
    border-top: 2px solid #2196F3 !important;
}

.sch-cat-header.sch-drag-over {
    background: #e3f2fd;
    /* Items dropped onto a category header get appended at the end of its
     * contents, so the highlight goes on the bottom edge (not the top — that
     * convention is reserved for "insert before" when reordering siblings). */
    border-top: 0 !important;
    border-bottom: 2px solid #2196F3 !important;
}

/* Uncat divider in list */
/* Match .sch-cat-header visually so "Uncategorized" reads as just another
 * group, not a demoted afterthought. Drop-target affordance is identical too
 * since it uses the same .sch-drag-over override. */
.sch-uncat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f0f4f8;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}

/* ─── Detail Panel ───────────────────────────────────────────────────────── */

.sch-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #bbb;
    font-size: 14px;
}

.sch-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e4ebf2;
}
.sch-detail-header-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}
.sch-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    padding-left: 20px;
    border-left: 1px solid #e4ebf2;
}
.sch-detail-actions .sch-btn-sm {
    padding: 3px 10px;
    justify-content: center;
}

.sch-detail-name {
    font: 600 26px/1.15 Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    letter-spacing: -0.015em;
    color: #18202e;
    cursor: text;
    border: none;
    background: transparent;
    padding: 2px 2px;
    border-bottom: 1px dashed transparent;
    outline: none;
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    flex: 1 1 auto;
    /* Auto-size to content so the full class name is always visible; if the
       header runs out of room, the right-side controls wrap to the next line
       rather than this input clipping to "Thur". */
    field-sizing: content;
    min-width: 8ch;
    max-width: 100%;
}

.sch-detail-name:hover {
    border-bottom-color: rgba(26, 38, 58, 0.18);
}

.sch-detail-name:focus {
    border-bottom: 1px solid #5b8def;
}

.sch-detail-section {
    margin-bottom: 20px;
}

.sch-detail-section h4 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin: 0 0 8px 0;
}

.sch-class-usedin {
    text-align: center;
    background: #f4f6fa;
    border: 1px solid #e3e8f0;
    border-radius: 6px;
    padding: 14px 16px;
}

.sch-class-usedin-row:hover {
    background: #e8edf6;
}

.sch-class-usedin-table {
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 13px;
}

.sch-class-usedin-row {
    cursor: pointer;
    transition: background 0.1s ease;
}

.sch-class-usedin-row:hover .sch-class-usedin-name,
.sch-class-usedin-row:hover .sch-class-usedin-time {
    color: #1a4480;
}

.sch-class-usedin-row > td {
    padding: 6px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.sch-class-usedin-row:last-child > td {
    border-bottom: none;
}

.sch-class-usedin-name {
    font-weight: 500;
    color: #333;
    text-align: left;
}

.sch-class-usedin-time {
    color: #666;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.sch-class-usedin-empty {
    font-size: 13px;
    color: #999;
    font-style: italic;
    padding: 4px 0;
    text-align: center;
}

/* Event rows in detail panel */
.sch-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.sch-event-row:last-child {
    border-bottom: none;
}

.sch-event-label {
    width: 110px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sch-event-field {
    display: flex;
    align-items: center;
    gap: 3px;
}

.sch-event-field label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.sch-event-row input,
.sch-event-row select {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.sch-event-row input:focus,
.sch-event-row select:focus {
    border-color: #2196F3;
    outline: none;
}

.sch-event-row input[type="number"] {
    width: 55px;
    text-align: center;
}

.sch-event-row input[type="text"] {
    width: 80px;
}

.sch-event-row select {
    width: auto;
}

.sch-event-remove {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
    margin-left: auto;
}

.sch-event-remove:hover {
    color: #f44336;
}

/* ─── Event Table ────────────────────────────────────────────────────────── */

.sch-event-table {
    border-collapse: collapse;
    margin-bottom: 4px;
    /* Force true shrink-to-fit. Plain block tables with `width: auto` still
       get stretched by the flow context in some containers; `display:
       inline-table` guarantees the table only takes as much horizontal
       space as its content requires. */
    display: inline-table;
}

.sch-event-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    padding: 4px 4px 6px;
    border-bottom: 2px solid #eee;
    white-space: nowrap;
}

.sch-event-table tbody td,
.sch-event-table tfoot td {
    padding: 3px 4px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: middle;
    overflow: hidden;
}

.sch-event-table tbody tr:last-child td {
    border-bottom: none;
}

.sch-event-table tfoot td {
    border-top: 1px solid #eee;
    border-bottom: none;
    padding-top: 10px;
}

.sch-event-table input,
.sch-event-table select {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.sch-event-table input:focus,
.sch-event-table select:focus {
    border-color: #2196F3;
    outline: none;
}

.sch-evt-td-also {
    width: 1%;
    white-space: nowrap;
}

.sch-evt-td-also select {
    width: auto;
}

/* Multi-addon picker: button-triggered dropdown with a checkbox list.
   Replaces the single-value <select> so an event can declare it also uses
   any number of other equipment pieces. */
.sch-also-picker {
    position: relative;
    display: inline-block;
}

.sch-also-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    max-width: 220px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    color: #333;
    cursor: pointer;
    text-align: left;
}

.sch-also-btn:hover {
    border-color: #bbb;
}

.sch-also-btn:focus {
    border-color: #2196F3;
    outline: none;
}

.sch-also-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sch-also-caret {
    flex: 0 0 auto;
    color: #888;
    font-size: 10px;
    line-height: 1;
}

/* position:fixed (anchored via JS against the button's bounding rect) because
   .sch-event-table td uses overflow:hidden, which would clip an absolutely-
   positioned child that hangs below the cell. */
.sch-also-panel {
    position: fixed;
    z-index: 1000;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.sch-also-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
}

.sch-also-opt:hover {
    background: #f5f5f5;
}

.sch-also-opt input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.sch-also-opt input[type="checkbox"]:disabled + span {
    color: #aaa;
    cursor: not-allowed;
}

.sch-evt-td-dur {
    width: 64px;
}

.sch-evt-td-dur input[type="text"],
.sch-dur-input {
    width: 64px;
    text-align: center;
    padding: 3px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.sch-evt-td-qty {
    width: 36px;
}

.sch-evt-td-qty input {
    width: 36px;
    text-align: center;
}

/* Position column — narrow inline select, blank option renders as a dash. */
.sch-evt-td-pos {
    width: 1%;
    white-space: nowrap;
}
.sch-evt-pos {
    width: 64px;
}

/* Add-custom-event form (lives below the events table, not in its tfoot, so
   the table's column widths don't have to accommodate the name input). */
.sch-add-custom {
    margin-top: 10px;
    padding: 8px 10px;
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: 4px;
    max-width: 720px;
}
.sch-add-custom-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 6px;
}
.sch-add-custom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sch-add-custom-row input,
.sch-add-custom-row select {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}
.sch-add-custom-name {
    flex: 1 1 200px;
    min-width: 160px;
}
.sch-add-custom-dur {
    width: 80px;
}
.sch-add-custom-range {
    width: 70px;
}
.sch-add-custom-pos {
    width: 92px;
}

.sch-evt-td-name {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    width: 1%;
}

.sch-cell-na {
    color: #ccc;
    display: block;
    text-align: center;
}

.sch-evt-custom-name {
    vertical-align: middle;
}

.sch-evt-edit-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 13px;
    padding: 0 3px;
    vertical-align: middle;
    transition: color 0.15s;
}

.sch-evt-edit-btn:hover {
    color: #666;
}

.sch-evt-delete-btn:hover {
    color: #c62828;
}

/* Tooltips */
.sch-tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #bbb;
}

.sch-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10;
}

.sch-tooltip:hover::after {
    opacity: 1;
}

.sch-tooltip-below::after {
    bottom: auto;
    top: calc(100% + 6px);
    left: 0;
    transform: none;
}

.sch-tooltip-right::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Wrapping variant — for tooltips longer than a phrase. pre-line preserves
   real newlines in the data-tip attribute so we can structure paragraphs. */
.sch-tooltip-wrap::after {
    white-space: pre-line;
    width: 280px;
    line-height: 1.4;
}

/* Small info icon used next to section headings — round, unobtrusive,
   inherits the tooltip behavior from .sch-tooltip. */
.sch-info-icon {
    display: inline-block;
    margin-left: 6px;
    color: #90a4ae;
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
    border-bottom: none;
}
.sch-info-icon:hover {
    color: #1565c0;
}


.sch-custom-badge {
    display: inline-block;
    padding: 1px 6px;
    background: #f3e5f5;
    color: #7b1fa2;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    float: right;
    margin-top: 4px;
}

/* Event timing columns (earliest/latest start) */
.sch-evt-td-range {
    width: 52px;
}

.sch-evt-td-range input {
    width: 52px;
    text-align: center;
}

/* Event ordering (first/last) */
.sch-event-order {
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

.sch-event-order-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sch-event-order-row label {
    font-size: 12px;
    font-weight: 600;
    color: #777;
    min-width: 30px;
}

.sch-event-order-row select {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.sch-event-order-row select:focus {
    border-color: #2196F3;
    outline: none;
}

/* Declared class length input (replaces the old Total Duration row) */
/* Declared-minutes input (lives inside .sch-detail-totals grid). Harmonized
   with row inputs but bolder so it reads as the primary editable total. */
.sch-detail-length {
    font-size: 13px !important;
    font-weight: 600;
    color: #213040;
}

/* Phase 6.8 — class type rotation (week_count) selector */
.sch-detail-weeks-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
}

.sch-detail-weeks-label {
    font-size: 13px;
    color: #777;
    font-weight: 500;
}

.sch-detail-weeks {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}

.sch-detail-weeks:focus {
    border-color: #2196F3;
    outline: none;
}

/* Phase 6.8 (tabbed editor) — week tab strip + Copy from control above the
   event table. Only rendered when the class type has week_count > 1. */
.sch-week-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 12px;
    padding: 8px 10px;
    background: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.sch-week-tabs-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sch-week-tab {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.sch-week-tab:hover {
    background: #e3f2fd;
    color: #1565c0;
}

.sch-week-tab-active {
    background: #1565c0;
    color: #fff;
    border-color: #1565c0;
}

.sch-week-tab-active:hover {
    background: #1565c0;
    color: #fff;
}

/* Infeasible week: red tint so the user can see which week is causing the
   class-level red mark in the sidebar. The active state still wins visually. */
.sch-week-tab-infeasible {
    background: #fdeaea;
    color: #b93535;
    border-color: #f3c0c0;
}
.sch-week-tab-infeasible:hover {
    background: #fbdcdc;
    color: #b93535;
}
.sch-week-tab-active.sch-week-tab-infeasible {
    background: #b93535;
    color: #fff;
    border-color: #b93535;
}
.sch-week-tab-active.sch-week-tab-infeasible:hover {
    background: #b93535;
    color: #fff;
}

.sch-copy-from-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sch-copy-from-select {
    padding: 5px 6px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}

/* Class-length feasibility error */
.sch-length-error {
    margin: -8px 0 16px;
    padding: 8px 12px;
    background: #ffebee;
    border-left: 3px solid #f44336;
    color: #c62828;
    font-size: 13px;
    border-radius: 0 4px 4px 0;
}

.sch-event-table-infeasible {
    outline: 2px solid #f44336;
    outline-offset: 2px;
    border-radius: 4px;
}

.sch-class-list-item-infeasible {
    background: #ffebee !important;
    color: #c62828;
}

.sch-class-list-item-infeasible .sch-tree-label,
.sch-class-list-item-infeasible .sch-class-list-dur {
    color: #c62828;
}

.sch-class-list-item-infeasible.active {
    background: #ffcdd2 !important;
    border-right-color: #f44336;
}

.sch-session-warn {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.4;
}

/* Per-event row warning: qty>0 with no duration, or qty=0 with duration set —
   either case silently drops the event from schedule generation. */
.sch-evt-row-bad td {
    background: #ffebee;
}
.sch-evt-row-bad td:first-child {
    border-left: 3px solid #c62828;
}

/* "Doubled" rows: equipment qty > 1 (uses multiple units of the same equipment).
   Green tint to visually distinguish from single-station events. */
.sch-evt-row-doubled td {
    background: #e8f5e9;
}
.sch-evt-row-doubled td:first-child {
    border-left: 3px solid #2e7d32;
}

/* Delete class */
.sch-detail-footer {
    padding-top: 16px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* ─── Sessions Tab ────────────────────────────────────────────────────────── */

.sch-session-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sch-session-card {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 14px 16px 6px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sch-session-card:hover {
    border-color: #cfd8dc;
}

.sch-session-card.expanded {
    border-color: #2196F3;
}

/* Collapsed cards: drop the bottom padding and header margin so the colored
   header sits flush with the card's bottom edge instead of leaving an empty
   strip below it. */
.sch-session-card:not(.expanded) {
    padding-bottom: 0;
}
.sch-session-card:not(.expanded) .sch-session-header {
    margin-bottom: 0;
    border-radius: 8px;
}

/* Hover-reveal for secondary actions: keeps the resting state calm, shows
   Duplicate/Delete only when the card is under the pointer. */
.sch-session-card .sch-session-meta {
    opacity: 0;
    transition: opacity 0.15s;
}
.sch-session-card:hover .sch-session-meta,
.sch-session-card.expanded .sch-session-meta {
    opacity: 1;
}

.sch-session-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 8px 12px;
    margin: -14px -16px 6px;
    border-radius: 8px 8px 0 0;
    transition: background-color 0.15s;
}

/* Equipment-usage status surfaced on the header so users see the warning
   without expanding the card. Color tokens match the per-week Equipment
   button (.sch-session-week-equip-btn.status-red / .status-yellow). */
.sch-session-card[data-equip-status="red"] .sch-session-header {
    background: #fdecea;
}
.sch-session-card[data-equip-status="red"]:hover .sch-session-header {
    background: #fbd9d4;
}
.sch-session-card[data-equip-status="yellow"] .sch-session-header {
    background: #fff8e1;
}
.sch-session-card[data-equip-status="yellow"]:hover .sch-session-header {
    background: #fff0c2;
}
/* 9.6 Phase B: same tint when preflight reports hard failures. data-equip-
   status takes precedence visually (same color), so listing both selectors
   covers the case where only preflight fired. */
.sch-session-card[data-preflight-status="red"] .sch-session-header {
    background: #fdecea;
}
.sch-session-card[data-preflight-status="red"]:hover .sch-session-header {
    background: #fbd9d4;
}

.sch-session-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.sch-session-name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.01em;
}

.sch-session-name:hover {
    color: #1565c0;
}

.sch-session-time {
    font-size: 12px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.sch-session-stale-tag {
    font-size: 10px;
    font-weight: 500;
    color: #b54708;
    background: #fef4e7;
    padding: 1px 7px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    cursor: help;
}

/* Inline session-level cycle tag — e.g. "2-week cycle" next to the name for
   multi-week sessions. Muted blue text, no pill, to stay quiet in the header. */
.sch-session-cycle-tag {
    font-size: 11px;
    font-weight: 500;
    color: #1565c0;
    letter-spacing: 0.02em;
}
/* Class-row variant: tagging individual classes inside a session card with
   their N-week cycle. The session header keeps the quiet text-only look;
   per-class rows want more visual punch so the user can spot multi-week
   classes at a glance amid a list of single-week ones. */
.sch-session-class-name .sch-session-cycle-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: #e3f0fb;
    border-radius: 999px;
    color: #0d47a1;
    vertical-align: 1px;
}

.sch-session-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.sch-session-action {
    font: inherit;
    font-size: 11px;
    color: #888;
    background: none;
    border: none;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sch-session-action:hover {
    background: #f3f5f7;
    color: #333;
}

.sch-session-action-danger {
    color: #b0544a;
}

.sch-session-action-danger:hover {
    background: #fdecea;
    color: #c62828;
}

/* Classes subtitle — reads as secondary text under the session name. Left-
   aligned, single line, truncates gracefully if the list is very long. */
.sch-session-classes-summary {
    font-size: 13px;
    color: #6b6b6b;
    line-height: 1.5;
    padding: 1px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sch-session-classes-empty {
    color: #b0b0b0;
    font-style: italic;
}

/* Inline per-class rotation tag, e.g. "Bronze 2w · Silver". Rendered as
   muted text, not a pill — it shouldn't outshout the class name it annotates. */
.sch-session-class-week-tag {
    font-size: 11px;
    font-weight: 500;
    color: #1565c0;
    letter-spacing: 0.02em;
}

/* Weeks list — tight rows separated by hairline dividers. Lives inside the
   right column of the session detail grid; no edge-bleed needed. */
.sch-session-weeks {
    display: flex;
    flex-direction: column;
}

/* Single-week schedules: centered call-to-action block instead of a row.
   Solutions count stacked above the action button, both centered in the
   Schedules column. */
.sch-session-schedules-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 12px 8px;
}

.sch-session-schedules-single-count {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.005em;
}

.sch-session-week-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
}

.sch-session-week-row + .sch-session-week-row {
    border-top: 1px solid #f4f4f4;
}

.sch-session-week-label {
    font-weight: 600;
    color: #333;
    min-width: 48px;
}

.sch-session-week-sep {
    color: #ccc;
}

.sch-session-week-status {
    flex: 1;
    color: #888;
}
.sch-session-week-status-stale {
    color: #b54708;
    font-weight: 500;
}

/* Extra-compact button size for the Run/View actions inside week rows. */
.sch-btn-xs {
    font-size: 11px;
    padding: 3px 10px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Session detail (expanded) — two-column grid, equal halves. Left: assigned
   classes + add-class form. Right: per-week run/view rows. */
.sch-session-detail {
    margin-top: 10px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
    align-items: start;
}

.sch-session-detail-col-classes {
    min-width: 0;
}

.sch-session-detail-col-weeks {
    border-left: 1px solid #f0f0f0;
    padding-left: 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

/* Weeks stack flows top-down with the column header, matching the classes
   column's vertical alignment on the left. */
.sch-session-detail-col-weeks .sch-session-weeks {
    flex: 0 0 auto;
}

/* Small uppercase label above each detail column — establishes hierarchy
   without being loud. */
.sch-session-col-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7380;
    background: #f0f3f7;
    padding: 9px 12px;
    border-radius: 4px;
    margin-top: 4px;
    margin-bottom: 14px;
    text-align: center;
}

.sch-session-classes-none {
    color: #999;
    font-size: 13px;
    margin: 4px 0 0;
    font-style: italic;
}

.sch-session-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.sch-session-detail-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.sch-session-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.sch-session-field label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 4px;
}

.sch-session-field input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}

.sch-session-field input:focus {
    border-color: #2196F3;
    outline: none;
}

/* Session class list (expanded detail, left column).
   Compact information row: strong class name, muted time, quiet nickname,
   hover-revealed × remove button. No decorative backgrounds — information
   density comes from typography, not from fill colors. */
.sch-session-class-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sch-session-class-table td {
    padding: 4px 0;
    border-bottom: 1px solid #f4f4f4;
    vertical-align: middle;
}

.sch-session-class-table tr:last-child td {
    border-bottom: none;
}

.sch-session-class-table td + td {
    padding-left: 10px;
}

.sch-session-class-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.005em;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.sch-session-class-caret {
    display: inline-block;
    width: 20px;
    color: #2c3e50;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
}

/* Read-only rotations dropdown — shown under each Classes-column row when
   expanded. Compact table inside a grey container, matching the equipment
   popdown's visual language. */
.sch-session-class-detail-row > td {
    padding: 0 0 8px 0 !important;
    background: transparent !important;
}
.sch-session-class-detail-panel {
    /* Stylized left accent bar instead of a full outline — visually nests
       the rotations under their class without boxing them off from the
       page (UX feedback 2026-05-28). The blue accent matches the app's
       interactive color so the bar reads as a "this is an expanded child
       of the row above" signal. */
    border-left: 3px solid #5b8def;
    padding: 8px 12px 8px 14px;
    margin: 4px 0 6px 24px;
    overflow-x: auto;
}
.sch-session-class-detail-empty {
    font-size: 12px;
    color: #8695a8;
    font-style: italic;
}

/* Week tabs — multi-week classes filter the rotations list by active week. */
.sch-session-class-detail-weeks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.sch-session-class-detail-week {
    background: #f5f7fa;
    border: 1px solid #e0e6ed;
    color: #4a5568;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.sch-session-class-detail-week:hover {
    background: #eef4fb;
    border-color: #c5d4e3;
}
.sch-session-class-detail-week.active {
    background: #2196F3;
    border-color: #1976D2;
    color: #fff;
}
.sch-session-class-detail-muted {
    color: #8695a8;
}

.sch-session-class-rot-table {
    width: auto;
    border-collapse: collapse;
    font-size: 12px;
}
.sch-session-class-rot-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7380;
    padding: 4px 18px 6px 0;
    border-bottom: 1px solid #d4dae3;
    white-space: nowrap;
}
.sch-session-class-rot-table thead th:last-child,
.sch-session-class-rot-table tbody td:last-child {
    padding-right: 0;
}
.sch-session-class-rot-table tbody td {
    /* Tight vertical padding — the row-separator border between rotations
       already provides clear visual separation; extra cell padding just
       inflates the row height (UX feedback 2026-05-28). The branched picker
       in the coach column is compact enough that 2px top/bottom is enough
       breathing room. */
    padding: 2px 18px 2px 0;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
    color: #4a5568;
    font-variant-numeric: tabular-nums;
}
.sch-session-class-rot-table tbody tr + tr td {
    border-top: 1px solid #e0e6ed;
}
/* Border above the first rotation row, so the table always opens with a
   wrap line. The matching bottom line is conditional — see the reset-row
   border-top rule below; we only draw a closing line when there's content
   beneath the table (the reset button) for it to separate from. */
.sch-session-class-rot-table tbody tr:first-child td {
    border-top: 1px solid #e0e6ed;
}
/* Subtle hover highlight clarifies row boundaries — important now that
   inner picker borders are gone for multi-branch cells where the OR divider
   between branches could otherwise read ambiguously between adjacent rows
   (UX feedback 2026-05-28). Same blue tint as .sch-rot:hover for visual
   consistency across the Schedules and Class Types rotation surfaces. */
.sch-session-class-rot-table tbody tr:hover td {
    background: rgba(91, 141, 239, 0.035);
}
.sch-session-class-rot-or {
    color: #4a5568;
}

.sch-session-class-time {
    white-space: nowrap;
    width: 1%;  /* shrink-to-fit trick: table auto-sizes this to its content */
}

.sch-session-class-time-input,
.sch-session-class-end {
    display: inline;
    vertical-align: baseline;
}

/* Compact text-based time editor — accepts "4:30pm", "16:30", etc. and
   parses on blur. Styled to read as plain text at rest so it doesn't compete
   with the class name; a subtle border appears on hover to signal editability. */
.sch-session-class-time-input {
    width: 58px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: inherit;
    font-size: 12px;
    color: #444;
    background: transparent;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sch-session-class-time-input:hover {
    border-color: #e6e6e6;
}

.sch-session-class-time-input:focus {
    border-color: #2196F3;
    background: #fff;
    outline: none;
}

.sch-session-class-end {
    font-size: 12px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.sch-session-class-nickname-cell {
    width: auto;
}

.sch-session-class-remove-cell {
    width: 1%;
    text-align: right;
}

.sch-session-class-nickname {
    width: 100%;
    min-width: 0;
    padding: 2px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 12px;
    color: #555;
    background: transparent;
    box-sizing: border-box;
    font-family: inherit;
    font-style: italic;
}

.sch-session-class-nickname::placeholder {
    color: #c4c4c4;
    font-style: normal;
}

.sch-session-class-nickname:hover {
    border-color: #e6e6e6;
}

.sch-session-class-nickname:focus {
    border-color: #2196F3;
    background: #fff;
    outline: none;
    font-style: normal;
    color: #222;
}

.sch-session-class-remove {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 15px;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.sch-session-class-row:hover .sch-session-class-remove {
    opacity: 1;
}

.sch-session-class-remove:hover {
    color: #e53935;
}

.sch-session-add-class {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
}

.sch-session-add-class select {
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    color: #444;
    background: #fff;
}

.sch-session-add-class .sch-session-class-time-input {
    width: 72px;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: left;
    background: #fff;
}

/* New session form */
.sch-new-session-form {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
}

.sch-new-session-form .sch-session-detail-grid {
    margin-bottom: 12px;
}

.sch-session-actions {
    display: flex;
    gap: 8px;
}

/* ─── Rotations UI — editorial playbook (Phase 3 polish) ──────────────────
   Each rotation is a numbered line in a coach's program. Numbered gutter on
   the left creates visual rhythm without outer boxes. Equipment as soft pills
   on top; constraints below as prose ("15 min · First · earliest — · latest —").
   Secondary controls fade in on hover to keep the default calm. */

/* List is an 8-column grid (drag handle + 7 content cols). Header + each
   rotation row use subgrid so columns align regardless of equipment height. */
.sch-rotations-list {
    display: grid;
    grid-template-columns: 44px minmax(180px, 1fr) 72px 72px 72px 110px 28px;
    column-gap: 12px;
    padding: 2px 0 0;
}

.sch-rotations-empty {
    grid-column: 1 / -1;
    color: #9aa7b8;
    font-size: 13px;
    padding: 28px 8px;
    text-align: center;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Column header row */
.sch-rot-header {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 12px;
    padding: 0 8px 6px 0;
    border-bottom: 2px solid #dbe3ed;
}
.sch-rot-header > div {
    font: 600 10px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: #a0adbf;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 2px 0;
    align-self: end;
}
.sch-rot-header .sch-rot-col-equip { padding-left: 2px; }
.sch-rot-header .sch-rot-col-min,
.sch-rot-header .sch-rot-col-early,
.sch-rot-header .sch-rot-col-late,
.sch-rot-header .sch-rot-col-pos { text-align: center; }

.sch-rot {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 12px;
    align-items: stretch;
    /* Tight vertical padding — the border-top alone reads as the section
       separator; the prior 10px padding inflated the row beyond what the
       condensed v2 picker needs (UX feedback 2026-05-28). Border-top goes
       on every row (rather than border-bottom) because `.sch-rot-header`
       sits as the actual first child of the rotations list — :first-child
       never matches a `.sch-rot`. With border-top everywhere we get the
       wrap-above for row 1 automatically; we add a closing border-bottom
       on the last rotation below. */
    padding: 3px 0;
    border-top: 1px solid #8a98a8;
    position: relative;
    transition: background 0.1s;
}
/* :last-of-type, not :last-child — the actual last child of
   .sch-rotations-list is a `.sch-add-rotation-btn` button, but the last
   DIV (= last rotation row, since `.sch-rot-header` precedes all `.sch-rot`s
   and is the same element type) is what we want to close out with a
   border-bottom. */
.sch-rot:last-of-type {
    border-bottom: 1px solid #8a98a8;
}
.sch-rot:hover { background: rgba(91, 141, 239, 0.035); }
.sch-rot.sch-dragging { opacity: 0.35; background: rgba(91, 141, 239, 0.06); }
.sch-rot.sch-drag-over {
    box-shadow: inset 0 2px 0 0 #5b8def;
}


.sch-rot-col-num {
    font: 600 13px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: #a0adbf;
    letter-spacing: 0.04em;
    user-select: none;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.sch-rot-num-text { display: inline-block; }

/* Drag handle lives inside the num gutter so the dots sit right next to 01 */
.sch-rot-drag {
    display: inline-flex;
    align-items: center;
    color: #c5ced9;
    cursor: grab;
    opacity: 0.55;
    transition: opacity 0.12s, color 0.12s;
    user-select: none;
}
.sch-rot-drag:active { cursor: grabbing; }
.sch-rot:hover .sch-rot-drag { opacity: 1; }
.sch-rot-drag:hover { color: #7d8da2; }

.sch-rot-col-equip { min-width: 0; display: flex; align-items: center; }

/* Numeric + select cells vertically center their inputs/selects in the row. */
.sch-rot-col-min,
.sch-rot-col-early,
.sch-rot-col-late,
.sch-rot-col-pos {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* ─ Slots row ─ */

/* Slots cell stacks each slot_group on its own line (AND relationship). "+ slot"
   sits at the bottom as the last flex item. */
.sch-rot-slots {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 22px;
    min-width: 0;
}

/* Within a slot group, alternatives flow left-to-right separated by "or"
   labels (the OR relationship). "+ alt" sits at the end of the row. */
.sch-rot-slot-group {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* A single equipment pill (one pill per alternative). Children stack
   vertically: name + × on top, qty stepper below. Both rows are centered
   horizontally AND vertically within the pill. */
.sch-rot-slot {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: #f0f4f9;
    border-radius: 4px;
    padding: 2px 7px;
    min-height: 22px;
    font-size: 12.5px;
    color: #1e2b3c;
    line-height: 1.2;
    transition: background 0.12s;
}
.sch-rot-slot:hover { background: #e8eff7; }

/* Top row of the pill: equipment name + × remove */
.sch-rot-slot-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sch-rot-slot-alt-name { font-weight: 500; }

/* "or" separator between alternatives in a slot group — sits outside the pill
   backgrounds as a small monospace label. */
.sch-rot-slot-or {
    font: 500 10px/1 ui-monospace, 'SF Mono', Menlo, monospace;
    color: #9aa7b8;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    user-select: none;
}

.sch-rot-slot-alt-x {
    background: none;
    border: none;
    color: #b0bccb;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    border-radius: 3px;
    display: none;
    transition: color 0.12s;
}
.sch-rot-slot:hover .sch-rot-slot-alt-x { display: inline-block; }
.sch-rot-slot-alt-x:hover { color: #d94a4a; }

/* Qty stepper sits beneath the equipment name inside the pill. */
.sch-rot-slot-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10.5px;
    line-height: 1;
    color: #6b7a8c;
}
.sch-rot-slot-qty-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    user-select: none;
    display: none;
    align-items: center;
    justify-content: center;
    height: 14px;
}
.sch-rot-col-equip:hover .sch-rot-slot-qty-btn { display: inline-flex; }

.sch-rot-qty-chev {
    width: 10px;
    height: 6px;
    display: block;
}
.sch-rot-slot-qty-btn:disabled { opacity: 0.25; cursor: default; }
.sch-rot-slot-qty-btn:hover:not(:disabled) { color: #3566c7; }
.sch-rot-slot-qty-val {
    font-variant-numeric: tabular-nums;
    min-width: 14px;
    text-align: center;
    font-weight: 500;
}
/* When qty == 1, the whole stepper collapses at rest so the pill hugs the
   equipment name. Row hover brings it back. */
.sch-rot-slot-qty-idle-hide { display: none; }
.sch-rot-col-equip:hover .sch-rot-slot-qty-idle-hide { display: inline-flex; }

/* Add-alternative button — styled to visually match the static "OR" label
   (monospace, uppercase, muted) so it reads as a quiet textual affordance
   rather than a prominent button. Hidden at rest, appears on row hover. */
.sch-rot-slot-alt-add {
    background: transparent;
    border: 1px dashed rgba(26, 38, 58, 0.2);
    color: #9aa7b8;
    font: 500 10px/1 ui-monospace, 'SF Mono', Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    opacity: 0.75;
    transition: color 0.12s, background 0.12s, border-color 0.12s, opacity 0.12s;
}
.sch-rot-col-equip:hover .sch-rot-slot-alt-add { display: inline-block; }
.sch-rot-slot-alt-add:hover {
    opacity: 1;
    color: #3566c7;
    background: rgba(91, 141, 239, 0.08);
    border-color: #5b8def;
    border-style: solid;
}

/* Add-slot button — dashed outline with the same monospace-OR typography. */
.sch-rot-slot-add {
    background: transparent;
    border: 1px dashed rgba(26, 38, 58, 0.2);
    color: #9aa7b8;
    font: 500 10px/1 ui-monospace, 'SF Mono', Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    opacity: 0.75;
    transition: color 0.12s, background 0.12s, border-color 0.12s, opacity 0.12s;
}
.sch-rot-col-equip:hover .sch-rot-slot-add { display: inline-block; }
.sch-rot-slot-add:hover {
    opacity: 1;
    color: #3566c7;
    background: rgba(91, 141, 239, 0.08);
    border-color: #5b8def;
    border-style: solid;
}

/* Empty-rotation variant: always visible, more inviting copy + sizing so an
   empty row clearly tells the user "click here to start configuring." Drops
   the all-caps monospace treatment of the "+ AND" hover button since the
   target audience here is "user who hasn't realized they need to click yet,"
   not "user already in editing flow." */
.sch-rot-slot-add-empty {
    display: inline-block;
    opacity: 1;
    color: #3566c7;
    border-color: rgba(53, 102, 199, 0.45);
    border-style: solid;
    text-transform: none;
    letter-spacing: 0;
    font: 500 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 6px 12px;
}
.sch-rot-slot-add-empty:hover {
    background: rgba(91, 141, 239, 0.12);
    border-color: #3566c7;
}


/* Editable values read as inline text — dashed underline on hover, solid on focus */
.sch-rot-input {
    font: inherit;
    font-variant-numeric: tabular-nums;
    background: transparent;
    border: none;
    border-bottom: 1px dashed transparent;
    padding: 1px 3px;
    width: auto;
    text-align: center;
    color: #1e2b3c;
    min-width: 20px;
}
.sch-rot-input:hover { border-bottom-color: rgba(26, 38, 58, 0.18); }
.sch-rot-input:focus {
    outline: none;
    border-bottom: 1px solid #5b8def;
    background: rgba(91, 141, 239, 0.07);
    border-radius: 2px;
}
.sch-rot-input::placeholder { color: #c0cbd9; }

.sch-rot-input-min {
    font-weight: 600;
    color: #213040;
}

.sch-rot-select {
    font: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px dashed transparent;
    color: #1e2b3c;
    cursor: pointer;
    padding: 1px 4px 1px 2px;
    appearance: none;
    -webkit-appearance: none;
}
.sch-rot-select:hover { border-bottom-color: rgba(26, 38, 58, 0.18); }
.sch-rot-select:focus {
    outline: none;
    border-bottom: 1px solid #5b8def;
    background: rgba(91, 141, 239, 0.07);
}

/* ─ Delete rotation (right-edge ×) ─ */
.sch-rot-del {
    background: none;
    border: none;
    color: #b0bccb;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    align-self: center;
    transition: opacity 0.15s, color 0.12s, background 0.12s;
}
.sch-rot:hover .sch-rot-del { opacity: 0.5; }
.sch-rot-del:hover { opacity: 1; color: #d94a4a; background: #fdeaea; }

/* ─ Add-rotation button — prominent primary CTA ─ */
.sch-add-rotation-btn {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: flex-start;
    margin: 18px 0 4px 46px;
    background: #5b8def;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font: 500 13px/1 inherit;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(91, 141, 239, 0.25);
    transition: transform 0.08s ease-out, box-shadow 0.15s;
}
.sch-add-rotation-btn:hover {
    box-shadow: 0 2px 8px rgba(91, 141, 239, 0.35);
    transform: translateY(-1px);
}
.sch-add-rotation-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(91, 141, 239, 0.3); }

/* Infeasible duration → red accent on the number gutter + faint row tint */
.sch-rotations-infeasible .sch-rot-col-num { color: #d94a4a; }
.sch-rotations-infeasible .sch-rot { background: rgba(217, 74, 74, 0.025); }
.sch-rotations-infeasible .sch-rot:hover { background: rgba(217, 74, 74, 0.045); }

/* Whole-row flag for broken rotations (equipment without duration, OR
   duration without equipment). Both halves of a rotation are required for
   it to actually run; the engine drops broken rows silently, so the editor
   needs to make them unmissable. Tints the row red, paints the number
   gutter red, and pairs with .sch-rot-col-min-broken below for the cell-
   level cue on the duration input. */
.sch-rot-broken { background: rgba(217, 74, 74, 0.06); }
.sch-rot-broken:hover { background: rgba(217, 74, 74, 0.10); }
.sch-rot-broken .sch-rot-col-num { color: #d94a4a; }

/* Broken minutes cell (equipment without duration, or duration without equipment) */
.sch-rot-col-min-broken .sch-rot-input-min {
    background: #fdeaea;
    border-radius: 4px;
    color: #b93535;
    border-bottom: 1px dashed #d94a4a !important;
    padding: 2px 8px;
}
.sch-rot-col-min-broken .sch-rot-input-min::placeholder {
    color: #d94a4a;
    font-weight: 700;
}
.sch-rot-col-min-broken .sch-rot-input-min:focus {
    background: #fdeaea;
    border-bottom: 1px solid #d94a4a !important;
}

/* Earliest / Latest inputs read as secondary constraints — smaller + muted */
.sch-rot-input-sec {
    font-size: 12px;
    color: #8a97a8;
    font-weight: 400;
}
.sch-rot-input-sec:focus { color: #213040; }

/* Position cell: custom display-over-select pattern so an "Any order" value
   renders as a subtle dash but the native select dropdown still opens when
   clicked. The select overlays transparently on top of the view text. */
.sch-rot-pos-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    min-width: 64px;
    padding: 0 4px;
}
.sch-rot-pos-view {
    font-size: 13px;
    color: #1e2b3c;
    pointer-events: none;
    font-weight: 500;
}
.sch-rot-pos-any .sch-rot-pos-view {
    color: #c5ced9;
    font-weight: 400;
}
.sch-rot-pos-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.sch-rot-pos-wrap:hover .sch-rot-pos-view { color: #3566c7; }
.sch-rot-pos-any.sch-rot-pos-wrap:hover .sch-rot-pos-view { color: #7d8da2; }

/* ─ Configured / Declared totals (ledger-style, two-row grid) ─
   Columns: label | value | unit | verdict. Stacks two rows so both totals
   occupy the vertical space of a single inline item. */
.sch-detail-totals {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: baseline;
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 10px;
    border-left: 1px solid #e4ebf2;
    border-right: 1px solid #e4ebf2;
}
.sch-feas-label {
    font-variant: small-caps;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #a0adbf;
    justify-self: end;
    white-space: nowrap;
}
.sch-feas-val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #213040;
    text-align: right;
    justify-self: end;
    min-width: 36px;
}
.sch-feas-val-empty { color: #c5ced9; font-weight: 400; }
.sch-feas-unit {
    font-variant: small-caps;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #8a97a8;
}
.sch-feas-verdict {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    justify-self: start;
    white-space: nowrap;
}
.sch-feas-ok .sch-feas-verdict {
    background: rgba(52, 168, 83, 0.1);
    color: #1e7d38;
}
.sch-feas-warn .sch-feas-verdict {
    background: rgba(217, 74, 74, 0.08);
    color: #b93535;
}

/* The Declared input is the one editable value in this block, so give it a
   visible bordered-box treatment to distinguish it from the read-only
   Configured value above. */
.sch-detail-totals .sch-detail-length {
    justify-self: end;
    text-align: right;
    width: 54px;
    background: #fff;
    border: 1px solid #d8e0ea;
    border-bottom: 1px solid #d8e0ea;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: text;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.sch-detail-totals .sch-detail-length:hover {
    border-color: #a7bbd7;
    border-bottom-color: #a7bbd7;
    background: #fafbfd;
}
.sch-detail-totals .sch-detail-length:focus {
    outline: none;
    border: 1px solid #5b8def;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.14);
}

/* ─── Equipment Picker (used by "+ slot" and "+ alternative") ──────────── */

.sch-equip-picker {
    position: fixed;
    z-index: 2000;
    background: #fff;
    border: 1px solid #c9d4e1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    max-width: 280px;
    /* max-height set inline by openEquipmentPicker based on viewport space */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sch-equip-picker-search {
    padding: 6px 8px;
    border-bottom: 1px solid #e4ebf2;
    background: #fafbfd;
    flex-shrink: 0;
}
.sch-equip-picker-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    font: 500 12px/1.3 inherit;
    color: #1e2b3c;
    background: #fff;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.sch-equip-picker-search-input:focus {
    border-color: #5b8def;
    box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.15);
}
.sch-equip-picker-search-input::placeholder { color: #a0adbf; }

.sch-equip-picker-header {
    background: #f5f8fc;
    border-bottom: 1px solid #e4ebf2;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #4a6584;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sch-equip-picker-body {
    overflow-y: auto;
    padding: 4px 0;
}

.sch-equip-picker-cat-header {
    font-size: 11px;
    font-weight: 600;
    color: #8695a8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 16px 2px;
}

.sch-equip-picker-item {
    font-size: 13px;
    color: #213040;
    padding: 5px 16px 5px 24px;
    cursor: pointer;
}
.sch-equip-picker-item:hover {
    background: #eef4fb;
    color: #3566c7;
}

.sch-equip-picker-empty {
    font-size: 12px;
    color: #8695a8;
    font-style: italic;
    padding: 10px 12px;
    text-align: center;
}

/* ─── Equipment Usage Breakdown ──────────────────────────────────────────
   Pre-solve demand vs. capacity check. Sits below the two-column session
   detail grid (Classes | Schedules), full-width. Red rows = forced
   overload (min demand > capacity); yellow = may overload at max
   durations; green = fits. Red/yellow rows are clickable to expand a
   per-window breakdown of contributing classes. */

.sch-equip-usage-loading,
.sch-equip-usage-error,
.sch-equip-usage-empty {
    font-size: 12px;
    color: #8695a8;
    font-style: italic;
    padding: 6px 0;
}

.sch-equip-usage-error {
    color: #c62828;
    font-style: normal;
}

/* Per-week Equipment button — sits in the Schedules row next to the Week
   label and toggles a popdown directly underneath that row showing the
   equipment table for that week. Status colour reflects this week's worst
   equipment pressure (or "pending" while the data is still being fetched). */
.sch-session-week-equip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f3f7;
    border: 1px solid #e0e6ed;
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.sch-session-week-equip-btn:hover {
    background: #e6ebf2;
}
.sch-session-week-equip-btn.status-red {
    background: #fdecea;
    border-color: #f5b2ad;
    color: #8a1a14;
}
.sch-session-week-equip-btn.status-red:hover {
    background: #fbd9d4;
}
.sch-session-week-equip-btn.status-yellow {
    background: #fff8e1;
    border-color: #ffd966;
    color: #6b4f00;
}
.sch-session-week-equip-btn.status-yellow:hover {
    background: #fff0c2;
}
.sch-session-week-equip-btn.status-green {
    background: #f3faf5;
    border-color: #c4dfca;
    color: #2c6e3a;
}
.sch-session-week-equip-btn.status-green:hover {
    background: #e6f3ea;
}
.sch-session-week-equip-btn.open {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

.sch-session-week-equip-caret {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    color: inherit;
    opacity: 0.75;
}
.sch-session-week-equip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cdd5df;
}
.sch-session-week-equip-dot.status-red    { background: #c62828; }
.sch-session-week-equip-dot.status-yellow { background: #f9a825; }
.sch-session-week-equip-dot.status-green  { background: #43a047; }

/* Container that wraps a Week row + its (optional) equipment popdown so they
   stack vertically inside the .sch-session-weeks list. */
.sch-session-week-block {
    display: flex;
    flex-direction: column;
}

/* 9.28: yellow soft-warning block above the Classes column when a coach
   is double-booked across overlapping classes. Lists the offending classes
   and their time ranges. Soft semantics: Run button stays enabled because
   a gym may legitimately split a coach across simultaneous classes. */
.sch-session-coach-conflict {
    background: #fff8e1;
    border: 1px solid #f3d77a;
    border-left: 4px solid #d4a017;
    border-radius: 4px;
    color: #6b4f00;
    font-size: 12px;
    padding: 8px 12px;
    margin: 0 0 10px 0;
}
.sch-session-coach-conflict-headline {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.35;
}
.sch-session-coach-conflict-icon {
    font-size: 14px;
    line-height: 1.2;
    flex-shrink: 0;
}
/* Bulleted list of conflicting classes — left-aligned with the headline
   text above (no extra indent past the warning icon's gutter). The
   !important defeats any inherited text-align: center we might not have
   tracked down in an ancestor. */
.sch-session-coach-conflict-list {
    list-style: none;
    margin: 4px 0 0 0;
    padding-left: 20px; /* aligns with text after the ⚠ icon in the headline */
    line-height: 1.5;
    text-align: left !important;
}
.sch-session-coach-conflict-list li {
    margin: 1px 0;
    text-align: left !important;
}

.sch-session-week-equip-panel {
    background: #f0f3f7;
    border: 1px solid #e0e6ed;
    border-radius: 4px;
    padding: 12px;
    margin: 6px 0 10px;
    overflow-x: auto;
}

.sch-equip-usage-table {
    width: auto;
    border-collapse: collapse;
    font-size: 13px;
}
.sch-equip-usage-table thead th,
.sch-equip-usage-table tbody td {
    white-space: nowrap;
}
.sch-equip-usage-table thead th:not(:first-child),
.sch-equip-usage-table tbody td:not(:first-child) {
    padding-left: 24px;
}

.sch-equip-usage-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7380;
    padding: 6px 10px;
    border-bottom: 1px solid #e0e6ed;
    background: transparent;
}

.sch-equip-usage-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.sch-equip-usage-table tbody tr:last-child td {
    border-bottom: none;
}

/* Status row backgrounds — subtle tints, with a left border in the same
   hue for at-a-glance scanning. */
.sch-equip-usage-row.status-red td {
    background: #fdecea;
}
.sch-equip-usage-row.status-red td:first-child {
    border-left: 3px solid #c62828;
}
/* Yellow rows: status dot in the Status column carries the signal. We don't
   shade the row or add a left border — when many pieces of equipment are
   yellow at once (common for tightly-packed sessions) the wash of color reads
   as "everything is broken" when most is just "tight but feasible". Reserve
   the loud row tint for red (forced overload). */
.sch-equip-usage-row.status-yellow td:first-child,
.sch-equip-usage-row.status-green td:first-child {
    border-left: 3px solid transparent;
}

/* Max Load column: bold + colored only when the percentage carries new info
   (red = >100% mandatory, yellow = >100% worst-case). Green stays muted. */
.sch-equip-usage-load {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.sch-equip-usage-load.status-red {
    font-weight: 700;
    color: #c62828;
}
.sch-equip-usage-load.status-yellow {
    font-weight: 600;
    color: #b07b00;
}
.sch-equip-usage-load.status-green {
    color: #6b7380;
}

.sch-equip-usage-row.expandable {
    cursor: pointer;
}
.sch-equip-usage-row.expandable:hover td {
    filter: brightness(0.97);
}

.sch-equip-usage-caret {
    display: inline-block;
    width: 20px;
    color: #2c3e50;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
}

/* Detail row: revealed when a red/yellow row is clicked. Shows each
   overloaded window with the contributing classes. Direct-child selector
   ('>') prevents the !important padding from leaking into the inner
   .sch-equip-usage-class-table cells, which were ending up with
   padding-top:0 and padding-bottom:10px (content top-aligned). */
.sch-equip-usage-detail-row > td {
    background: #fafbfc !important;
    border-left: 3px solid transparent !important;
    padding: 0 10px 2px 10px !important;
}

.sch-equip-usage-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 4px 18px;
}

.sch-equip-usage-window {
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 18px;
    align-items: start;
}
.sch-equip-usage-window.status-red    { border-color: #f5b2ad; }
.sch-equip-usage-window.status-yellow { border-color: #ffd966; }

/* Left column: just the union time range. */
.sch-equip-usage-window-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #4a5568;
}
.sch-equip-usage-window-time {
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
    font-family: ui-monospace, 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Right column: stacked per-class blocks. Each block is a circle badge + a
   3-line text stack (name+original, class window, forced range with hover-?). */
.sch-equip-usage-class-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sch-equip-usage-class-list li { margin: 0; }

.sch-equip-usage-class-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 2px 0;
}

/* Circle badge — minutes-needed for this class. Status-colored so the same
   layout works for red/yellow/green expandable rows. */
.sch-equip-usage-class-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    background: #c62828;
    box-shadow: 0 1px 2px rgba(198, 40, 40, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.sch-equip-usage-class-badge.status-yellow {
    background: #d49f1d;
    box-shadow: 0 1px 2px rgba(212, 159, 29, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.sch-equip-usage-class-badge.status-green {
    background: #58a86a;
    box-shadow: 0 1px 2px rgba(88, 168, 106, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
/* Used for classes that only OPTIONALLY use this equipment (Beam OR Bars
   alternatives) — they aren't forced into anything, so the status colour
   isn't appropriate. Neutral grey signals "may use" without raising alarm. */
.sch-equip-usage-class-badge.status-neutral {
    background: #b6c0cd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}
.sch-equip-usage-class-badge-num {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-family: ui-monospace, 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.sch-equip-usage-class-badge-unit {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 2px;
}

.sch-equip-usage-class-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sch-equip-usage-class-name-line {
    font-size: 12.5px;
    line-height: 1.35;
    color: #2c3e50;
}
.sch-equip-usage-class-name-line strong { font-weight: 600; }
.sch-equip-usage-class-name-line em {
    font-style: italic;
    color: #8695a8;
    font-weight: 400;
    font-size: 11px;
    margin-left: 5px;
}
.sch-equip-usage-class-window-line {
    font-size: 11px;
    line-height: 1.35;
    color: #4a5568;
    font-family: ui-monospace, 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* Yellow/green dropdown — compact table listing every class using the
   equipment in this week. Scoped under .sch-equip-usage-detail so it
   doesn't pick up the parent .sch-equip-usage-table tbody td white-space:
   nowrap (which is fine for the equipment table but would force narrow
   columns here). */
.sch-equip-usage-class-table {
    width: auto;
    border-collapse: collapse;
    font-size: 12px;
    margin: 2px 0;
}
.sch-equip-usage-class-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7380;
    padding: 4px 18px 6px 0;
    border-bottom: 1px solid #d4dae3;
    white-space: nowrap;
}
.sch-equip-usage-class-table thead th:last-child,
.sch-equip-usage-class-table tbody td:last-child {
    padding-right: 0;
}
.sch-equip-usage-class-table tbody td {
    padding: 6px 18px 6px 0;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
}
.sch-equip-usage-class-table tbody tr + tr td {
    border-top: 1px solid #e8ecf0;
}
.sch-equip-usage-class-table-name strong {
    font-weight: 600;
    color: #2c3e50;
}
.sch-equip-usage-class-table-original {
    font-style: italic;
    color: #8695a8;
    font-size: 11px;
    margin-left: 6px;
}
.sch-equip-usage-class-table-mono {
    font-variant-numeric: tabular-nums;
    color: #4a5568;
}
.sch-equip-usage-class-table-empty {
    color: #c5d4e3;
}
.sch-equip-usage-class-forced-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
}
.sch-equip-usage-class-forced {
    color: #4a5568;
    font-variant-numeric: tabular-nums;
    /* Render embedded \n line-breaks (one per forced rotation) while
       overriding the cell-level white-space: nowrap. */
    white-space: pre-line;
}

/* Hover-? tooltip — replaces the inline reason chip for the narrowing
   explanation. Pure CSS, no JS dependency. */
.sch-equip-usage-class-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cdd5df;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    cursor: help;
    user-select: none;
    transition: background 120ms ease;
}
.sch-equip-usage-class-info:hover { background: #8695a8; }
.sch-equip-usage-class-info::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #3a4654;
    color: #fff;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
    width: max-content;
    max-width: 260px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 10;
}
.sch-equip-usage-class-info::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #3a4654;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
    z-index: 10;
}
.sch-equip-usage-class-info:hover::after,
.sch-equip-usage-class-info:hover::before { opacity: 1; }

/* Legend below the table — small dots with status colors. */
.sch-equip-usage-legend {
    margin-top: 8px;
    font-size: 11px;
    color: #8695a8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sch-equip-usage-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: middle;
}
.sch-equip-usage-dot.status-red    { background: #c62828; }
.sch-equip-usage-dot.status-yellow { background: #f9a825; }
.sch-equip-usage-dot.status-green  { background: #43a047; }

.sch-equip-usage-sep {
    color: #c5d4e3;
}

/* ─── Saved Schedules archive tab (9.17) ───────────────────────────────── */

.sch-saved-tab {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 0 40px;
}
.sch-saved-header {
    margin-bottom: 16px;
}
.sch-saved-heading {
    margin: 0 0 4px 0;
    font-size: 22px;
}
.sch-saved-blurb {
    margin: 14px auto 0 0 !important;
    padding: 0;
    color: #5b6b7e;
    max-width: 1100px;
    line-height: 1.4;
    text-align: left;
    text-indent: 0;
    /* Two sentences sit side-by-side when wide enough; flex-wrap stacks
       them on narrow windows with row-gap providing extra breathing room. */
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px; /* row-gap, column-gap */
}
.sch-saved-blurb-line {
    /* Each sentence asks for 1100px; flex-shrink lets it scale down on
       narrower viewports without overflow. */
    flex: 0 1 1100px;
    max-width: 1100px;
}
.sch-saved-tab-body {
    margin-top: 12px;
}
.sch-saved-tab-loading,
.sch-saved-tab-empty {
    padding: 32px 16px;
    text-align: center;
    color: #5b6b7e;
    background: #f6f9fc;
    border: 1px dashed #cdd8e4;
    border-radius: 6px;
}
.sch-saved-tab-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border-radius: 6px;
    overflow: hidden;
}
.sch-saved-tab-table th,
.sch-saved-tab-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
}
.sch-saved-tab-table thead th {
    background: #f0f4f9;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6b7e;
}
.sch-saved-tab-table tbody tr:last-child td {
    border-bottom: none;
}
.sch-saved-tab-table tbody tr:hover {
    background: #fafcff;
}
.sch-saved-tab-col-label {
    font-weight: 500;
    width: 30%;
}
.sch-saved-tab-col-source {
    color: #2c3e50;
    width: 30%;
}
.sch-saved-tab-col-week {
    width: 70px;
    color: #5b6b7e;
    font-size: 13px;
}
.sch-saved-tab-col-saved {
    width: 140px;
    color: #5b6b7e;
    font-size: 13px;
    white-space: nowrap;
}
.sch-saved-tab-col-actions {
    width: 140px;
    text-align: right;
    white-space: nowrap;
}
.sch-saved-tab-col-actions .sch-btn {
    margin-left: 4px;
}
.sch-saved-tab-rename {
    border: none;
    background: transparent;
    color: #5b6b7e;
    cursor: pointer;
    margin-left: 4px;
    padding: 2px 4px;
    font-size: 13px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.sch-saved-tab-rename:hover {
    opacity: 1;
    color: #1976d2;
}
.sch-saved-tab-deleted {
    color: #c62828;
    font-style: italic;
    font-size: 12px;
    margin-left: 4px;
}
.sch-saved-tab-muted {
    color: #8a98aa;
    font-style: italic;
}

/* 9.26: ?focus_equipment=N flash highlight. Triggered by the results.php
   red-equipment gate's "Open the [equipment] row →" deep link — the
   targeted row scrolls into view and fades from yellow back to its normal
   background over 1.5s so the user's eye lands on it without a permanent
   visual change. Applied to either the Equipment-tab row (legacy) or the
   per-session per-week equipment-usage row (preferred — closer to the
   class breakdown the user needs to actually fix the saturation). */
@keyframes sch-focus-highlight {
    0%   { background-color: #ffd54f; }
    100% { background-color: transparent; }
}
.sch-flash {
    animation: sch-focus-highlight 1.5s ease-out 1;
}

/* 9.26: snapshot card styling. The card uses the same .sch-session-card
   base layout; these overrides give it a distinct dashed border + tinted
   header so admin can tell snapshot rows from live sessions at a glance. */
.sch-snapshot-card {
    border: 1.5px dashed #b39ddb;
    background: #faf7ff;
}
.sch-snapshot-card .sch-session-header {
    background: #ede7f6;
}
.sch-snapshot-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: #5e35b1;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-right: 8px;
    vertical-align: middle;
}
.sch-snapshot-badge.sch-snapshot-verdict-infeasible {
    background: #c62828;
}
.sch-snapshot-badge.sch-snapshot-verdict-timeout {
    background: #e65100;
}
.sch-snapshot-detail {
    padding: 12px 16px 16px;
}
.sch-snapshot-banner {
    background: #fff;
    border: 1px solid #d1c4e9;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.6;
}
.sch-snapshot-banner code {
    background: #f3f0fa;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
}
.sch-snapshot-section {
    margin-bottom: 14px;
}
.sch-snapshot-section h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #4527a0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sch-snapshot-equipment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.sch-snapshot-equipment-list li {
    background: #fff;
    border: 1px solid #d1c4e9;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 13px;
}
.sch-snapshot-class {
    background: #fff;
    border: 1px solid #d1c4e9;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.sch-snapshot-class-header {
    margin-bottom: 4px;
}
.sch-snapshot-meta {
    color: #666;
    font-size: 12px;
    margin-left: 8px;
}
.sch-snapshot-coach {
    color: #00695c;
    font-weight: 500;
}
.sch-snapshot-coach-none {
    color: #999;
    font-style: italic;
}
.sch-snapshot-rotations {
    margin: 4px 0 0 18px;
    padding: 0;
    font-size: 13px;
    line-height: 1.7;
}
.sch-snapshot-error {
    color: #c62828;
    font-size: 13px;
    padding: 8px;
    background: #ffebee;
    border-radius: 3px;
}
.sch-snapshot-raw {
    margin-top: 12px;
    font-size: 12px;
}
.sch-snapshot-raw summary {
    cursor: pointer;
    color: #5e35b1;
    user-select: none;
    padding: 4px 0;
}
.sch-snapshot-raw pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 11px;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
}
/* Read-only cells in the snapshot's classes table. The live cells have
   inputs / selects with their own padding; matching it keeps row height
   even between live and snapshot views. */
.sch-snapshot-readonly {
    padding: 6px 8px;
    color: #555;
    font-size: 13px;
}
/* Frozen rotations table inside the class-detail panel. */
.sch-session-class-rotation-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}
.sch-session-class-rotation-table th,
.sch-session-class-rotation-table td {
    text-align: left;
    padding: 4px 10px;
    border-bottom: 1px solid #e0e6ed;
}
.sch-session-class-rotation-table th {
    font-weight: 600;
    color: #4527a0;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #d1c4e9;
}
.sch-session-class-rotation-table tr:last-child td {
    border-bottom: none;
}
/* Snapshot rotation variants: stack each OR-alternative on its own line,
   keep contribs within a variant inline (joined with `+` for AND). */
.sch-session-class-rotation-table .sch-rot-variant {
    line-height: 1.5;
}
.sch-session-class-rotation-table .sch-rot-variant + .sch-rot-variant {
    margin-top: 2px;
}
.sch-session-class-rotation-table .sch-rot-or {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

/* ─── Phase 5b branched-DNF picker (Schedules-tab coach + Class Types equipment) ─── */
/* Hover-reveal affordances, narrow content-sized cards, branched DNF expression. */
/* Reuses existing chip styles (.sch-coach-chip etc.) inside; this block      */
/* contributes the branch / row / affordance structure.                      */
.sch-branched-picker { padding: 0; }
/* Class-header coach picker has no branch border — borders only belong on
   per-rotation pickers, where they distinguish individual rotation entries.
   At the class scope the picker sits in the class header beside the
   nickname field, where a border would visually compete with the row's
   own structure. */
.sch-session-class-coach-cell .sch-branched-picker .sch-branch {
    border: none;
    padding: 0;
}
.sch-branched-picker.narrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sch-branched-picker .sch-branch {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    border-radius: 4px;
    position: relative;          /* anchor for absolute .sch-branch-x */
}
/* Every branch carries its own border — same in single-branch and
   multi-branch cases (UX feedback 2026-05-29: each alternative chunk is
   its own bounded "what would the rotation use" expression; the big OR
   divider between them is the inter-chunk separator). */
.sch-branched-picker .sch-branch {
    border: 1px solid #d8dde4;
}
.sch-branched-picker.narrow .sch-branch {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}
/* Add-slot stretches edge-to-edge so the divider lines on the "+ OR" button
   can span the picker width. */
.sch-branched-picker.narrow .sch-branched-add-slot {
    align-self: stretch;
    width: auto;
    max-width: 100%;
}
.sch-branched-picker.narrow .sch-branch-or {
    align-self: stretch;
}

.sch-branch-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.sch-chip-or {
    color: #8a98a8;
    font-size: 11px;
    padding: 0 2px;
}
.sch-chip-or::before { content: "or"; }

/* Generic chip — coach / equipment chips drop their own background through
   their existing class names (e.g. .sch-coach-chip) inside. Kept compact so
   chips sit inline with the rest of the rotation row's content rather than
   inflating the row height (UX feedback 2026-05-28). */
.sch-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    padding: 2px 4px 2px 7px;
    font-size: 12.5px;
    line-height: 1.2;
}
.sch-chip-x {
    background: transparent;
    border: none;
    color: #6b7a8c;
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sch-chip-x:hover {
    color: #d94a4a;
    background: rgba(217, 74, 74, 0.08);
}

/* "+ Or" / "+ AND" / "+ OR" pills. Shared affordance language; v2 keeps them
   visually identical so the user reads the structural difference from
   placement (inside a row vs below rows vs below all branches). */
.sch-branched-picker .sch-pill {
    background: transparent;
    border: 1px dashed rgba(26, 38, 58, 0.25);
    color: #6b7a8c;
    font: 500 12.5px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s, border-style 0.12s;
}
.sch-branched-picker .sch-pill:hover {
    color: #3566c7;
    background: rgba(91, 141, 239, 0.08);
    border-color: #3566c7;
    border-style: solid;
}

/* Empty-state "+ Coach" / "+ Equipment" button — visible always (not
   hover-revealed) and slightly bolder than the dashed hover affordances so
   it reads as a "fill this in" call to action rather than a quiet hint. */
.sch-branched-picker .sch-pill-empty-add {
    border-style: solid;
    color: #4a5868;
}

/* "+ AND row" sits below the rows in a branch with a small top gap. */
.sch-branched-picker .sch-branch-add-row { margin-top: 4px; }

/* OR divider between branches — explicit, visible, the same word as the
   in-row "or" but in a different visual register so scope is obvious. */
.sch-branch-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2a3450;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 11px;
    padding: 8px 14px;
}
.sch-branch-or::before,
.sch-branch-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #b4bcc7;
}
.sch-branch-or-text::before { content: "OR"; }

/* "+ OR" add-new-branch row — a full-width dashed-pill button (like the
   other `+ Or` / `+ AND` affordances) containing solid divider lines
   flanking the "+ OR" text. The dashed border wraps the whole strip; the
   solid inner lines mirror the .sch-branch-or visual between existing
   branches (UX feedback 2026-05-29). */
.sch-branched-picker .sch-branched-add-slot {
    border: none;
    margin-top: 4px;
    padding: 0;
    align-self: stretch;
    width: auto;
}
/* The wrap span just stretches to full width so the dashed-pill button
   fills the picker. Override the inline-flex set by the hover-reveal rule
   with matching specificity. */
.sch-branched-picker.hover-reveal:hover .sch-branched-add-slot .sch-pill-wrap,
.sch-branched-picker.hover-reveal.sch-picker-pinned .sch-branched-add-slot .sch-pill-wrap {
    display: block;
    width: 100%;
}
.sch-branched-picker .sch-pill-newbranch {
    /* Inherits .sch-pill's dashed-border + dashed-blue-on-hover treatment.
       Layout the inside as ---- + OR ----. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    color: #2a3450;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.sch-branched-picker .sch-pill-newbranch::before,
.sch-branched-picker .sch-pill-newbranch::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #b4bcc7;
    transition: background 0.12s;
}
.sch-branched-picker .sch-pill-newbranch:hover::before,
.sch-branched-picker .sch-pill-newbranch:hover::after {
    background: #3566c7;
}

/* Hover-reveal modifier — every affordance collapses out of layout (not just
   visually hidden) when the cursor is outside the picker, so idle state is
   just chips. Picker grows on hover; we accept that small layout jump since
   the "+ OR" slot below already produces one anyway. Mirrors the mockup. */
.sch-branched-picker.hover-reveal .sch-chip-x,
.sch-branched-picker.hover-reveal .sch-pill-wrap,
.sch-branched-picker.hover-reveal .sch-branched-add-slot {
    display: none;
}
.sch-branched-picker.hover-reveal:hover .sch-chip-x,
.sch-branched-picker.hover-reveal.sch-picker-pinned .sch-chip-x { display: inline-flex; }
.sch-branched-picker.hover-reveal:hover .sch-pill-wrap,
.sch-branched-picker.hover-reveal.sch-picker-pinned .sch-pill-wrap { display: inline-flex; }
.sch-branched-picker.hover-reveal:hover .sch-branched-add-slot,
.sch-branched-picker.hover-reveal.sch-picker-pinned .sch-branched-add-slot { display: flex; }