/*
 * SCM Admin UI Kit - Main Entry Point
 * 
 * This file imports all partial stylesheets.
 * Keep this file minimal - add new styles to the appropriate partial file.
 * 
 * STYLING STRATEGY:
 * - Use CSS variables for all themeable values
 * - Prefix custom classes with 'simx-' to avoid conflicts
 * - Keep specificity low to allow customer overrides
 * - Use !important for critical form input styling to override dark themes
 * - Let Syncfusion handle component internals
 * 
 * IMPORTANT: AdminShell components should use EXPLICIT color values,
 * NOT var(--bs-*) variables, to prevent Oqtane theme leakage.
 * 
 * See: Client/Docs/STYLING-STRATEGY.md for full documentation
 * 
 * PARTIAL FILES:
 * - variables.css          : CSS custom properties (design tokens), dark theme, density
 * - sf-bridge.css          : Syncfusion bootstrap5.3 variables mapped to the tokens (light + dark)
 * - theme.css              : Maps AdminShell structural chrome onto the tokens
 * - typography.css         : Open Sans / Jost / JetBrains Mono, owned by the shell; the type scale
 * - bootstrap-bridge.css   : Bootstrap 5.3 component variables (btn, card, table, badge, nav, modal)
 * - layout.css             : Sidebar, panels, admin page layouts, responsive utilities
 * - workspace.css          : AdminWorkspace tab strip (one destination, several tabs)
 * - chrome.css             : Navy header, sidebar, segmented workspace tabs, SimxCard/Badge/Dialog
 * - palette.css            : Command palette (Ctrl/Cmd+K) overlay
 * - primitives.css         : SimxConfirm, SimxUndoToast, SimxSelectionBar, SimxSavedViews
 * - forms.css              : Form controls, validation, checkboxes, labels
 * - dialogs.css            : Syncfusion dialog customizations
 * - components.css         : Theme configurator, icon picker, module error
 * - grid.css               : SCMPager (the one pager: grids and server-paged lists), SCMGrid defaults
 * - checkin-dialog.css     : Check-in dialog specific styles
 * - session-config-dialog.css : Session config dialog styles
 * - calendar.css           : Calendar view selector, booking scheduler
 * - promocodes.css         : Promo code panel and dialog styles
 * - ops-taskboard.css      : Operations task board, booking cards
 * - active-sessions.css    : Active sessions panel (theme-isolated)
 * - package-booking.css    : Package selection and booking flow
 * - fb-analytics.css       : F&B analytics dashboard (admin theme)
 * - track-config.css       : Karting track configuration dialog
 * - value-redemption.css   : Gift card and membership credit redemption panel
 * - session-control.css    : Sim Racing Session Control (booking banner, session clocks,
 *                            game-actions menu, responsive breakpoints)
 * - display-surface.css   : Pins Bootstrap's light/dark tokens inside a
 *                            data-surface="dark" root (venue TV boards, kiosks,
 *                            overlays) so they survive any site Bootswatch
 *
 * VERSIONED IMPORTS: every @import carries ?v=<token>. This file is requested with the build
 * token (ModuleResources), but an @import is fetched by its own URL, so without a query a
 * release would mix a new entry point with cached partials. The token is derived from
 * SCMModuleVersion.Current (DesignSystemConventionTests.UiKitImports_CarryTheVersionToken prints the value to use after a version
 * bump) and reveals nothing about the version.
 */

@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.variables.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.sf-bridge.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.theme.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.typography.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.bootstrap-bridge.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.layout.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.workspace.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.chrome.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.palette.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.primitives.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.forms.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.dialogs.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.components.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.grid.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.checkin-dialog.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.session-config-dialog.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.calendar.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.promocodes.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.ops-taskboard.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.active-sessions.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.package-booking.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.race-control.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.track-config.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.fb-analytics.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.fb-credits.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.driver-swap.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.member-badge.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.value-redemption.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.mylaps-x2.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.player-activity.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.session-control.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.setup-companion.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.manufacturing.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.maintenance.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.storefront.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.private-events.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.guided-booking.css?v=efe1233825');
@import url('/_content/SCM.Module.Admin.SCMUIKit/css/SCMUIKit.display-surface.css?v=efe1233825');

/* ═══════════════════════════════════════════════════════════════════════════
   Guided Setup (Setup Hub + interviews) — operator onboarding.
   Token-only styling: dark mode and density follow the variable overrides.
   See SCFM.Docs/Features/AdminShell/OPERATOR-ONBOARDING-SETUP-WIZARD-PLAN.md §4.
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-setup-hub { max-width: 1080px; margin: 0 auto; }
.scm-setup-loading { display: flex; justify-content: center; padding: 4rem 0; }

.scm-setup-hero {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: 1.25rem 1.5rem; margin-bottom: 1rem;
    background: var(--simx-bg-surface); border: 1px solid var(--simx-border-subtle);
    border-radius: 12px;
}
.scm-setup-hero-text { flex: 1 1 320px; }
.scm-setup-hero-text h3 { margin: 0 0 .25rem; color: var(--simx-text-primary); }
.scm-setup-hero-text p { margin: 0; color: var(--simx-text-secondary); }
.scm-setup-hero-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.scm-setup-ring {
    --scm-setup-ring-pct: 0;
    width: 56px; height: 56px; border-radius: 50%;
    background: conic-gradient(var(--simx-success-solid) calc(var(--scm-setup-ring-pct) * 1%), var(--simx-bg-sunken) 0);
    display: grid; place-items: center; position: relative;
}
.scm-setup-ring::before {
    content: ""; position: absolute; inset: 5px; border-radius: 50%;
    background: var(--simx-bg-surface);
}
.scm-setup-ring span { position: relative; font-size: .8rem; font-weight: 600; color: var(--simx-text-primary); }

.scm-setup-chip-flag {
    display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px;
    background: var(--simx-warning-bg); border: 1px solid var(--simx-warning-border);
    color: var(--simx-text-primary); font-size: .78rem; font-weight: 600;
}

.scm-setup-newly-added {
    display: flex; align-items: center; padding: .6rem 1rem; margin-bottom: 1rem;
    border-radius: 8px; background: var(--simx-accent-subtle);
    color: var(--simx-accent-text); font-size: .875rem;
}

.scm-setup-hub-body { display: flex; gap: 1.25rem; align-items: flex-start; }
.scm-setup-groups { flex: 1 1 auto; min-width: 0; }
.scm-setup-group { margin-bottom: 1.25rem; }
.scm-setup-group-title {
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--simx-text-tertiary); margin-bottom: .5rem;
}
.scm-setup-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem;
}
.scm-setup-card {
    display: flex; flex-direction: column; gap: .4rem;
    padding: .9rem 1rem; border-radius: 10px;
    background: var(--simx-bg-surface); border: 1px solid var(--simx-border-subtle);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.scm-setup-card:hover { border-color: var(--simx-border-strong); }
.scm-setup-card.locked { opacity: .65; }
.scm-setup-card-head { display: flex; align-items: center; gap: .5rem; }
.scm-setup-card-head i { color: var(--simx-accent); font-size: 1.05rem; }
.scm-setup-card-title { font-weight: 600; color: var(--simx-text-primary); flex: 1; }
.scm-setup-card-promise { font-size: .82rem; color: var(--simx-text-secondary); line-height: 1.4; }
.scm-setup-card-foot { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.scm-setup-card-minutes, .scm-setup-card-when { font-size: .75rem; color: var(--simx-text-tertiary); }

.scm-setup-status {
    font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.scm-setup-status.done { background: var(--simx-success-bg); color: var(--simx-success-text); }
.scm-setup-status.progress { background: var(--simx-accent-subtle); color: var(--simx-accent-text); }
.scm-setup-status.review { background: var(--simx-warning-bg); color: var(--simx-text-primary); }
.scm-setup-status.skipped { background: var(--simx-bg-sunken); color: var(--simx-text-tertiary); }
.scm-setup-status.new { background: var(--simx-bg-sunken); color: var(--simx-text-secondary); }

.scm-setup-rail { flex: 0 0 260px; display: flex; flex-direction: column; gap: .75rem; }
.scm-setup-rail-card {
    padding: .9rem 1rem; border-radius: 10px;
    background: var(--simx-bg-surface); border: 1px solid var(--simx-border-subtle);
}
.scm-setup-rail-card p { font-size: .82rem; color: var(--simx-text-secondary); margin: .35rem 0 .6rem; }
.scm-setup-rail-title { font-weight: 600; color: var(--simx-text-primary); display: flex; align-items: center; }
.scm-setup-rail-warn { border-color: var(--simx-warning-border); }

/* ── Interview shell ─────────────────────────────────────────────────────── */
.scm-setup-interview { max-width: 720px; margin: 0 auto; }
.scm-setup-interview-head {
    display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem;
}
.scm-setup-back-link { color: var(--simx-text-secondary); text-decoration: none; padding-left: 0; }
.scm-setup-interview-title { flex: 1; font-weight: 700; font-size: 1.05rem; color: var(--simx-text-primary); }

.scm-setup-progress { display: flex; align-items: center; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.scm-setup-progress-dot {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--simx-border-strong);
    background: var(--simx-bg-surface); padding: 0; cursor: pointer;
}
.scm-setup-progress-dot.current { border-color: var(--simx-accent); background: var(--simx-accent); }
.scm-setup-progress-dot.done { border-color: var(--simx-success-solid); background: var(--simx-success-solid); }
.scm-setup-progress-line { width: 22px; height: 2px; background: var(--simx-border-subtle); }
.scm-setup-progress-line.done { background: var(--simx-success-solid); }
.scm-setup-progress-label { margin-left: .5rem; font-size: .8rem; color: var(--simx-text-tertiary); }

.scm-setup-screen {
    background: var(--simx-bg-surface); border: 1px solid var(--simx-border-subtle);
    border-radius: 12px; padding: 1.5rem;
}
.scm-setup-screen-title { margin: 0 0 .4rem; color: var(--simx-text-primary); }
.scm-setup-framing { color: var(--simx-text-secondary); font-size: .9rem; margin-bottom: 1.1rem; }

/* A value to paste into somebody else's console. Given visual weight on purpose: on the
   webhook screen it IS the step, not an aside. */
.scm-setup-copyable {
    border: 1px solid var(--simx-border);
    border-radius: var(--simx-radius, .375rem);
    padding: .75rem .85rem;
    background: var(--simx-surface-2, transparent);
}
.scm-setup-copyable-label {
    font-weight: 600;
    color: var(--simx-text-primary);
    margin-bottom: .4rem;
    font-size: .9rem;
}

/* Collapsed "how do I actually do this" panel, for steps that happen in somebody else's
   console. Tokens only — a literal colour here would break the dark theme. */
.scm-setup-guidance {
    border: 1px solid var(--simx-border);
    border-radius: var(--simx-radius, .375rem);
    padding: .65rem .85rem;
    background: var(--simx-surface-2, transparent);
    font-size: .9rem;
}
.scm-setup-guidance > summary { cursor: pointer; color: var(--simx-text-primary); }
.scm-setup-guidance > summary:hover { color: var(--simx-accent, var(--simx-text-primary)); }
.scm-setup-guidance li { color: var(--simx-text-secondary); }

.scm-setup-question { margin-bottom: 1.25rem; }
.scm-setup-question:last-child { margin-bottom: 0; }
.scm-setup-question-label { font-weight: 600; color: var(--simx-text-primary); margin-bottom: .55rem; }

.scm-setup-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .6rem; }
.scm-setup-option {
    display: flex; gap: .65rem; align-items: flex-start; text-align: left;
    padding: .75rem .9rem; border-radius: 10px; cursor: pointer;
    background: var(--simx-bg-surface); border: 1px solid var(--simx-border-default);
    transition: border-color .12s ease, background .12s ease;
}
.scm-setup-option:hover { border-color: var(--simx-border-strong); background: var(--simx-bg-hover); }
.scm-setup-option:focus-visible { outline: 2px solid var(--simx-border-focus); outline-offset: 2px; }
.scm-setup-option.selected { border-color: var(--simx-accent); background: var(--simx-bg-selected); }
.scm-setup-option-radio {
    flex: 0 0 16px; width: 16px; height: 16px; margin-top: .15rem; border-radius: 50%;
    border: 2px solid var(--simx-border-strong); background: var(--simx-bg-surface);
}
.scm-setup-option.selected .scm-setup-option-radio {
    border-color: var(--simx-accent); background: var(--simx-accent);
    box-shadow: inset 0 0 0 3px var(--simx-bg-surface);
}
.scm-setup-option-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.scm-setup-option-title { font-weight: 600; color: var(--simx-text-primary); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.scm-setup-option-consequence { font-size: .8rem; color: var(--simx-text-secondary); line-height: 1.35; }
.scm-setup-recommended {
    font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: var(--simx-accent-subtle); color: var(--simx-accent-text);
    padding: .1rem .4rem; border-radius: 4px;
}

.scm-setup-toggle { display: flex; align-items: center; gap: .55rem; cursor: pointer; color: var(--simx-text-primary); }
.scm-setup-toggle-consequence { font-size: .8rem; color: var(--simx-text-tertiary); margin: .25rem 0 0 1.7rem; }

.scm-setup-number { display: flex; align-items: center; gap: .55rem; }
.scm-setup-number-value { min-width: 3ch; text-align: center; font-weight: 700; color: var(--simx-text-primary); }
.scm-setup-number-suffix { color: var(--simx-text-secondary); font-size: .85rem; }
/* Typeable as well as steppable — large counts must not require dozens of clicks. */
.scm-setup-number-input {
    width: 5.5rem; text-align: center; font-weight: 700; color: var(--simx-text-primary);
}

.scm-setup-textarea {
    max-width: 720px; font-family: var(--simx-font-mono, ui-monospace, monospace);
    font-size: .82rem; line-height: 1.5;
}

.scm-setup-color { display: flex; align-items: center; gap: .6rem; }
.scm-setup-color-swatch {
    width: 3rem; height: 2.4rem; padding: 2px; cursor: pointer;
    border: 1px solid var(--simx-border-default); border-radius: 8px;
    background: var(--simx-bg-surface);
}
.scm-setup-color-hex { max-width: 160px; font-family: var(--simx-font-mono, ui-monospace, monospace); }

/* Repeater: a few structured rows (menu items, bookable offers). */
.scm-setup-repeater { display: flex; flex-direction: column; gap: .5rem; max-width: 720px; }
.scm-setup-repeater-head,
.scm-setup-repeater-row {
    display: grid; grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(0, 1fr)) 2.2rem;
    gap: .5rem; align-items: center;
}
.scm-setup-repeater-head {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--simx-text-tertiary);
}
.scm-setup-repeater-amount { display: flex; align-items: center; gap: .3rem; }
.scm-setup-repeater-prefix { color: var(--simx-text-secondary); font-size: .85rem; }
.scm-setup-repeater-remove { color: var(--simx-text-tertiary); padding: .2rem .35rem; }
.scm-setup-repeater-remove:hover { color: var(--simx-danger-text, #b42318); }
.scm-setup-repeater-add { align-self: flex-start; margin-top: .2rem; }
.scm-setup-repeater-empty { margin: 0; color: var(--simx-text-tertiary); font-size: .84rem; }

@media (max-width: 640px) {
    .scm-setup-repeater-head { display: none; }
    .scm-setup-repeater-row {
        grid-template-columns: 1fr 2.2rem;
        padding: .6rem; border: 1px solid var(--simx-border-subtle); border-radius: 8px;
    }
}

.scm-setup-text { max-width: 420px; }
.scm-setup-time { max-width: 180px; }
.scm-setup-select { max-width: 480px; }

/* Day picker: per-day toggles the way a phone alarm sets a repeat schedule, with the presets
   demoted to shortcuts. A venue open Mon–Fri must be able to say so here. */
.scm-setup-daypicker { display: flex; flex-direction: column; gap: .6rem; }
.scm-setup-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.scm-setup-day {
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--simx-border-default); background: var(--simx-bg-surface);
    color: var(--simx-text-secondary); font-weight: 700; font-size: .85rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.scm-setup-day:hover { border-color: var(--simx-accent); }
.scm-setup-day.open {
    background: var(--simx-accent-strong); border-color: var(--simx-accent-strong);
    color: var(--simx-accent-contrast, #fff);
}
.scm-setup-day:focus-visible { outline: 2px solid var(--simx-accent); outline-offset: 2px; }

.scm-setup-day-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.scm-setup-day-preset {
    border: 1px dashed var(--simx-border-default); background: transparent;
    color: var(--simx-text-secondary); border-radius: 999px; padding: .2rem .7rem;
    font-size: .78rem; cursor: pointer;
}
.scm-setup-day-preset:hover { border-color: var(--simx-accent); color: var(--simx-accent-text); }

@media (prefers-reduced-motion: reduce) {
    .scm-setup-day { transition: none; }
}
.scm-setup-help-text { font-size: .78rem; color: var(--simx-text-tertiary); margin-top: .3rem; }

.scm-setup-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.scm-setup-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--simx-accent-subtle); color: var(--simx-accent-text);
    border-radius: 999px; padding: .25rem .35rem .25rem .7rem; font-size: .82rem; font-weight: 600;
}
.scm-setup-chip button {
    border: none; background: transparent; color: inherit; font-size: 1rem; line-height: 1;
    cursor: pointer; padding: 0 .3rem;
}
.scm-setup-chip-input { max-width: 220px; }
.scm-setup-chip-suggestions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.scm-setup-chip-suggestion {
    border: 1px dashed var(--simx-border-default); background: transparent;
    color: var(--simx-text-secondary); border-radius: 999px; padding: .2rem .6rem;
    font-size: .78rem; cursor: pointer;
}
.scm-setup-chip-suggestion:hover { border-color: var(--simx-accent); color: var(--simx-accent-text); }

.scm-setup-why { margin-top: .5rem; font-size: .8rem; }
.scm-setup-why summary { color: var(--simx-text-tertiary); cursor: pointer; list-style: none; }
.scm-setup-why p { color: var(--simx-text-secondary); margin: .35rem 0 0; }

.scm-setup-summary {
    margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 10px;
    background: var(--simx-bg-sunken); border: 1px solid var(--simx-border-subtle);
}
.scm-setup-summary-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--simx-text-tertiary); margin-bottom: .3rem;
}
.scm-setup-summary p { margin: 0; color: var(--simx-text-primary); font-size: .9rem; line-height: 1.5; }

.scm-setup-drift {
    display: flex; gap: .5rem; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 10px;
    background: var(--simx-warning-bg); border: 1px solid var(--simx-warning-border);
    color: var(--simx-text-primary); font-size: .85rem;
}
.scm-setup-drift-areas { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.scm-setup-drift-area { display: flex; gap: .45rem; align-items: center; cursor: pointer; }

.scm-setup-footer { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; }
/* One paragraph per reason: a refusal can name two unrelated things to go and fix. */
.scm-setup-error { margin-top: 1rem; }
.scm-setup-error p { margin-bottom: .5rem; }
.scm-setup-error p:last-child { margin-bottom: 0; }

/* Cautions: answers that are legal but usually accidental. Informational, never alarming —
   an operator who means it can continue without acknowledging anything. */
.scm-setup-cautions { display: flex; flex-direction: column; gap: .45rem; margin-top: 1rem; }
.scm-setup-caution {
    display: flex; align-items: flex-start; padding: .65rem .9rem; border-radius: 8px;
    background: var(--simx-bg-sunken); border: 1px solid var(--simx-border-subtle);
    color: var(--simx-text-secondary); font-size: .84rem; line-height: 1.45;
}

/* Skip confirmation: skipping is a legitimate answer, but never a silent one. */
.scm-setup-confirm-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgb(0 0 0 / 45%);
}
.scm-setup-confirm {
    position: fixed; z-index: 1051; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 2rem));
    background: var(--simx-bg-surface); color: var(--simx-text-primary);
    border: 1px solid var(--simx-border-default); border-radius: 12px;
    box-shadow: var(--simx-shadow-lg, 0 12px 40px rgb(0 0 0 / 25%));
    padding: 1.4rem 1.5rem;
}
.scm-setup-confirm h5 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 700; }
.scm-setup-confirm p { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.5; color: var(--simx-text-secondary); }
.scm-setup-confirm-note { font-size: .82rem !important; color: var(--simx-text-tertiary) !important; }
.scm-setup-confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* Locked hub cards stay visible: the operator sees the whole itinerary, including what
   needs an owner or a venue first, without being able to answer into a dead end. */
.scm-setup-card-locked-reason {
    font-size: .78rem; color: var(--simx-text-tertiary); text-align: right; max-width: 16rem;
}

/* View only (no SetupHub:Edit): the read-only roles see what each area set up and change nothing. */
.scm-setup-hero-text p.scm-setup-view-only {
    margin-top: .5rem; display: flex; align-items: center; font-size: .85rem;
}
.scm-setup-view-only-chip {
    display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px;
    background: var(--simx-bg-surface); border: 1px solid var(--simx-border-subtle);
    color: var(--simx-text-secondary); font-size: .78rem; font-weight: 600; white-space: nowrap;
}
/* The questions sit in a fieldset so a view disables every control at once; it must not draw a box. */
.scm-setup-questions { border: 0; margin: 0; padding: 0; min-width: 0; }

.scm-setup-summary-screen .scm-setup-receipt-lines { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .scm-setup-confirm { transition: none; }
}

/* ── Receipt ─────────────────────────────────────────────────────────────── */
.scm-setup-narrative {
    padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1rem;
    background: var(--simx-success-bg); border: 1px solid var(--simx-success-border);
    color: var(--simx-success-text); font-size: .92rem; line-height: 1.5;
}
.scm-setup-receipt-lines { display: flex; flex-direction: column; gap: .5rem; }
.scm-setup-receipt-line {
    display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(200px, 2fr);
    gap: .6rem; align-items: baseline; padding: .55rem .75rem;
    background: var(--simx-bg-sunken); border-radius: 8px; font-size: .87rem;
}
.scm-setup-receipt-choice { font-weight: 600; color: var(--simx-text-primary); }
.scm-setup-receipt-arrow { color: var(--simx-text-tertiary); }
.scm-setup-receipt-outcome { color: var(--simx-text-secondary); }
.scm-setup-receipt-link { margin-left: .45rem; font-size: .8rem; }
.scm-setup-capabilities { margin-top: 1.1rem; }
.scm-setup-capabilities-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--simx-text-tertiary); margin-bottom: .4rem;
}
.scm-setup-capability { display: flex; align-items: baseline; gap: .35rem; font-size: .85rem; color: var(--simx-text-secondary); margin-bottom: .3rem; }
.scm-setup-capability a { margin-left: .4rem; }

/* Wave 7: nothing in Setup may widen the page. A web address, a file path or a platform link in a rail card or a
   receipt line is one unbroken word, and a flex or grid child's minimum width is its longest word, so at 1024 px (the
   shell's menu beside it) the hub scrolled sideways. Long words break inside their card instead. */
.scm-setup-rail, .scm-setup-rail-card, .scm-setup-receipt-line, .scm-setup-receipt-line > * { min-width: 0; overflow-wrap: anywhere; }
.scm-setup-rail-card code, .scm-setup-rail-card a { overflow-wrap: anywhere; word-break: break-word; }

/* The rail beside the cards needs about 1,000 px of content width; below the shell's wide layout it goes under them. */
@media (max-width: 1199.98px) {
    .scm-setup-hub-body { flex-direction: column; align-items: stretch; }
    .scm-setup-rail { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 900px) {
    .scm-setup-hub-body { flex-direction: column; }
    .scm-setup-rail { flex: 1 1 auto; width: 100%; }
    .scm-setup-receipt-line { grid-template-columns: 1fr; gap: .15rem; }
    .scm-setup-receipt-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scm-setup-card, .scm-setup-option { transition: none; }
}

/* ── Detailed checklist (entity-level view inside the Setup Hub) ─────────── */
.scm-setup-rail-and-checklist { display: contents; }

.scm-setup-checklist {
    margin-top: 1.25rem; border-radius: 10px;
    background: var(--simx-bg-surface); border: 1px solid var(--simx-border-subtle);
}
.scm-setup-checklist > summary {
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: .85rem 1.1rem; font-weight: 600; color: var(--simx-text-primary);
    list-style: none;
}
.scm-setup-checklist > summary::-webkit-details-marker { display: none; }
.scm-setup-checklist-summary { font-weight: 400; font-size: .82rem; color: var(--simx-text-tertiary); }
.scm-setup-checklist > summary .scm-setup-status { margin-left: auto; }
.scm-setup-checklist-body {
    padding: 0 1.1rem 1rem; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;
}
.scm-setup-checklist-group-title {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--simx-text-tertiary); margin-bottom: .35rem;
}
.scm-setup-checklist-item {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .4rem .55rem; border: none; border-radius: 6px; text-align: left;
    background: transparent; color: var(--simx-text-secondary); font-size: .84rem; cursor: pointer;
}
.scm-setup-checklist-item:hover { background: var(--simx-bg-hover); }
.scm-setup-checklist-item > .bi:first-child { color: var(--simx-text-tertiary); }
.scm-setup-checklist-item.done > .bi:first-child { color: var(--simx-success-solid); }
.scm-setup-checklist-item.blocker { color: var(--simx-text-primary); }
/* The blocker's warning sign takes the warning INK; the border tone it had measured 1.45:1 on the row. */
.scm-setup-checklist-item.blocker > .bi:first-child { color: var(--simx-warning-text); }
.scm-setup-checklist-label { flex: 1; color: var(--simx-text-primary); }
.scm-setup-checklist-status { font-size: .76rem; color: var(--simx-text-tertiary); }
.scm-setup-checklist-item .bi-chevron-right { font-size: .7rem; color: var(--simx-text-tertiary); }

/* ── One-time device credentials (receipt) ───────────────────────────────── */
.scm-setup-credentials {
    margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: 10px;
    background: var(--simx-warning-bg); border: 1px solid var(--simx-warning-border);
}
.scm-setup-credentials-head { color: var(--simx-text-primary); margin-bottom: .35rem; }
.scm-setup-credentials-warn { font-size: .82rem; color: var(--simx-text-secondary); margin-bottom: .6rem; }
.scm-setup-credentials-table { width: 100%; font-size: .84rem; margin-bottom: .7rem; }
.scm-setup-credentials-table th {
    text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--simx-text-tertiary); font-weight: 700; padding-bottom: .25rem;
}
.scm-setup-credentials-table td { padding: .25rem .5rem .25rem 0; color: var(--simx-text-primary); }
.scm-setup-credentials-table code {
    background: var(--simx-bg-surface); border-radius: 4px; padding: .1rem .35rem;
    color: var(--simx-text-primary);
}

@media (max-width: 900px) {
    .scm-setup-checklist-body { grid-template-columns: 1fr; }
}

/* ── lok2-series: RosterTable (series Drivers tab, event guests) ── */
.scm-roster-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--simx-space-2);
    margin-bottom: var(--simx-space-3);
}
.scm-roster-toolbar .btn { min-height: 44px; }
.scm-roster-import {
    margin-bottom: var(--simx-space-3); background: var(--simx-bg-sunken);
    border: 1px solid var(--simx-border-subtle); border-radius: var(--simx-radius-md);
}
.scm-roster-import-text { font-size: var(--simx-font-size-sm); }
.scm-roster-import-file { max-width: 22rem; }
.scm-roster-table th {
    font-size: var(--simx-font-size-xs); text-transform: uppercase; letter-spacing: .04em;
    color: var(--simx-text-tertiary); white-space: nowrap;
}
.scm-roster-table td { color: var(--simx-text-primary); }
.scm-roster-edit-row td { background: var(--simx-accent-subtle); }
.scm-roster-edit-row .form-control { min-width: 7rem; min-height: 36px; }
.scm-roster-row-problem td { background: var(--simx-warning-bg); }
.scm-roster-problem { font-size: var(--simx-font-size-sm); color: var(--simx-danger-text); }
.scm-roster-row-out td { color: var(--simx-text-tertiary); text-decoration: line-through; }
.scm-roster-row-out td:last-child { text-decoration: none; }