/* ============================================================================
   Delivery Schedule skin - everything here is scoped to .sm-schedule-page.

   Built from the designer's mockup: a warning-toned Unassigned panel at the top,
   then one card per block with a blue-railed identity strip on the left, the
   block's driver/truck/pay along the header as labelled icon pairs, and the
   stops beneath as a table with numbered green stop markers.

   Deliberately its own file rather than more of theme.css: this is a page skin,
   the same way .sm-order-page is, and keeping it separate means a change here
   cannot leak into the twenty other pages that share theme.css. The zebra stripes
   are the exception - those are the app's stripes now and come from theme.css,
   so this file must not restate them.

   Every control stays a real control. The mockup draws Driver, Truck Type and
   the pay fields as plain text; they are selects and number inputs and always
   were, so they are styled to sit quietly rather than being flattened into
   something that cannot be edited.
   ============================================================================ */

.sm-schedule-page {
    --sm-sched-ink: #0F2A43;
    --sm-sched-muted: #64748B;
    --sm-sched-line: #E2E8F0;
    --sm-sched-rail: #2563EB;
    --sm-sched-stop: #16A34A;
    --sm-sched-warn: #F59E0B;
    --sm-sched-card-radius: 14px;

    /* The deep green used for the Unassigned Orders bar and every table header on these pages. */
    --sm-sched-head: #3B574D;

    /* Buttons match the Order page exactly - same values as --sm-order-green there, repeated
       rather than shared because that page's variables are scoped to .sm-order-page. */
    --sm-sched-btn: #1c5336;
    --sm-sched-btn-dark: #14402a;

    /* The same green for when it is painted ON the page - links, outline buttons - rather than used
       as a fill behind white type. Identical in light mode; lifted in dark, where #1c5336 on a dark
       card is 1.9:1. See the dark block at the foot of this file. */
    --sm-sched-btn-on: #1c5336;
}

/* ---------- page heading ---------- */

.sm-schedule-page .sm-sched-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sm-sched-ink);
    margin: 0;
}

.sm-schedule-page .sm-sched-datebox {
    width: auto;
    min-width: 170px;
    border-radius: 10px;
    border: 1px solid var(--sm-sched-line);
    font-weight: 600;
    color: var(--sm-sched-ink);
}

/* ---------- cards ---------- */

.sm-schedule-page .sm-sched-card {
    background: #fff;
    border: 1px solid var(--sm-sched-line);
    border-radius: var(--sm-sched-card-radius);
    box-shadow: 0 1px 2px rgba(15, 42, 67, 0.04), 0 8px 24px rgba(15, 42, 67, 0.04);
    overflow: hidden;
}

/* The Unassigned panel is the one thing on this page that wants attention: an order
   sitting here is work nobody has been given yet. A solid deep green bar, with the
   amber warning mark left as the one warm note on it - loud enough to find, not so
   loud it reads as a fault.

   Fixed colours rather than the theme's tokens: white on this green clears 7.9:1, so
   the bar works as-is in both light and dark mode with nothing to re-tune. */
.sm-schedule-page .sm-sched-card-warn {
    border-color: var(--sm-sched-head);
}

.sm-schedule-page .sm-sched-warn-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: var(--sm-sched-head);
    border-bottom: 1px solid var(--sm-sched-head);
}

.sm-schedule-page .sm-sched-warn-head i {
    color: var(--sm-sched-warn);
    font-size: 1.15rem;
}

.sm-schedule-page .sm-sched-warn-title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

/* SLC Non-Sod Deliveries head. Same bar as the Unassigned panel so the two read as one family,
   but the icon is not the warning triangle: nothing here needs anybody to do anything, and
   borrowing the alarm colour would have put a second standing warning on the page. */
.sm-schedule-page .sm-sched-slc-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: var(--sm-sched-head);
    border-bottom: 1px solid var(--sm-sched-head);
}

.sm-schedule-page .sm-sched-slc-head i {
    color: #fff;
    font-size: 1.05rem;
    opacity: 0.85;
}

.sm-schedule-page .sm-sched-slc-title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

/* ---------- block card: left rail + header ---------- */

.sm-schedule-page .sm-sched-block {
    display: grid;
    grid-template-columns: 108px 1fr;
    border-left: 5px solid var(--sm-sched-rail);
}

/* The identity strip is tinted by shift - warm for the morning runs, cool for the afternoon -
   so which half of the day a block belongs to reads from across the room.

   Both tints are fixed rather than themed: they deliberately stay light in dark mode too, so the
   dark ink below keeps working against them. (The AM cream was matched to the Unassigned header
   when that header was cream; the header is deep green now, so the two no longer agree.) */
.sm-schedule-page .sm-sched-block-id {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 1rem 0.5rem;
    background: #FFFBEB;
    border-right: 1px solid var(--sm-sched-line);
    text-align: center;
}

.sm-schedule-page .sm-sched-block-pm .sm-sched-block-id {
    background: #CBE2FF;
}

/* Fixed dark ink rather than the theme's --sm-sched-ink: both tints stay light in dark mode, so
   type that followed the theme would turn pale and vanish against them. */
.sm-schedule-page .sm-sched-block-key {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #0F2A43;
}

.sm-schedule-page .sm-sched-shift {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #475569;
}

.sm-schedule-page .sm-sched-shift-icon {
    font-size: 1rem;
    color: var(--sm-sched-warn);
}

/* PM keeps the same shape in a cooler tone, so a glance down the page separates
   the morning runs from the afternoon ones without reading a word. */
.sm-schedule-page .sm-sched-shift-icon-pm {
    color: #6366F1;
}

.sm-schedule-page .sm-sched-block-pm {
    border-left-color: #6366F1;
}

.sm-schedule-page .sm-sched-block-body {
    min-width: 0; /* lets the stops table scroll inside the grid cell instead of stretching it */
}

.sm-schedule-page .sm-sched-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--sm-sched-line);
}

/* One labelled control: icon on the left, caption over the field. */
.sm-schedule-page .sm-sched-field {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.sm-schedule-page .sm-sched-field > i {
    font-size: 1rem;
    color: #94A3B8;
    margin-top: 0.9rem;
}

.sm-schedule-page .sm-sched-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sm-sched-muted);
    margin-bottom: 2px;
}

.sm-schedule-page .sm-sched-field .form-select,
.sm-schedule-page .sm-sched-field .form-control {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sm-sched-ink);
    border: 1px solid var(--sm-sched-line);
    border-radius: 8px;
    padding: 0.2rem 1.6rem 0.2rem 0.5rem;
    background-color: #fff;
}

.sm-schedule-page .sm-sched-field .form-control {
    padding-right: 0.5rem;
}

.sm-schedule-page .sm-sched-field .form-select:focus,
.sm-schedule-page .sm-sched-field .form-control:focus {
    border-color: var(--sm-sched-btn);
    box-shadow: 0 0 0 3px rgba(28, 83, 54, 0.15);
}

.sm-schedule-page .sm-sched-field .form-control:disabled,
.sm-schedule-page .sm-sched-field .form-select:disabled {
    background-color: #F1F5F9;
    color: var(--sm-sched-muted);
}

/* The block's totals, pushed to the far right of the header. */
.sm-schedule-page .sm-sched-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    align-self: center;
    padding: 0.4rem 0.9rem;
    background: #F8FAFC;
    border: 1px solid var(--sm-sched-line);
    border-radius: 999px;
    white-space: nowrap;
}

.sm-schedule-page .sm-sched-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sm-sched-ink);
}

.sm-schedule-page .sm-sched-summary-item i {
    color: var(--sm-sched-muted);
}

.sm-schedule-page .sm-sched-summary-sep {
    width: 1px;
    height: 16px;
    background: var(--sm-sched-line);
}

/* ---------- tables ---------- */

.sm-schedule-page table {
    margin-bottom: 0;
}

/* Table headers are a solid deep-green band with white type - the same green as the Unassigned
   Orders bar, so one colour marks "this is a heading" across every page wearing this skin. White on
   it measures 7.9:1, so it holds up in both light and dark mode without a separate rule. */
.sm-schedule-page thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--sm-sched-head);
    border-bottom: 0;
    white-space: nowrap;
}

/* Header cells inherit a link colour otherwise - the sort links on some list tables. */
.sm-schedule-page thead th a {
    color: #fff;
}

/* The spanning "Delivery" / "Product" captions over the Unassigned panel's figures. */
/* White like the column names beneath them - these sit on the same green band, and the theme's
   dark ink left them all but unreadable against it. */
.sm-schedule-page .sm-sched-group-head th {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-bottom: 0;
    padding-bottom: 0;
}

.sm-schedule-page tbody td {
    font-size: 0.8rem;
    color: var(--sm-sched-ink);
    vertical-align: middle;
}

.sm-schedule-page .sm-sched-customer {
    font-weight: 700;
    white-space: nowrap;
}

/* The numbered marker in the Stop column. */
.sm-schedule-page .sm-sched-stopno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sm-sched-stop);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Reorder arrows sit beside the marker, quiet until hovered - they are used
   occasionally and should not compete with the stop number itself. */
.sm-schedule-page .sm-sched-reorder {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.7;
    margin-left: 0.3rem;
}

.sm-schedule-page .sm-sched-reorder .btn {
    padding: 0;
    font-size: 0.62rem;
    color: #94A3B8;
    line-height: 0.9;
}

.sm-schedule-page .sm-sched-reorder .btn:hover:not(:disabled) {
    color: var(--sm-sched-rail);
}

.sm-schedule-page .sm-sched-reorder .btn:disabled {
    opacity: 0.25;
}

.sm-schedule-page .sm-sched-remove {
    color: #DC2626;
    padding: 0;
}

.sm-schedule-page .sm-sched-remove:hover {
    color: #991B1B;
}

/* ---------- driver schedule ----------
   The Driver Schedule shows one block as a run of drop cards rather than a table of stops, but it
   is the same page furniture: the railed block header above, then a card per drop. These are the
   few pieces that view needs on top of everything already defined. */

/* A value that is shown, not edited - the driver's own name on their schedule. Sized to match the
   controls beside it so a read-only field and an editable one sit on the same line. */
.sm-schedule-page .sm-sched-static {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sm-sched-ink);
    padding: 0.2rem 0;
}

/* The trainee / main-driver line. Red because it is the one thing on the card that changes who is
   responsible for the run. */
.sm-schedule-page .sm-sched-pair {
    font-size: 0.8rem;
    font-weight: 700;
    color: #B91C1C;
}

.sm-schedule-page .sm-sched-stop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    background: #F8FAFC;
    border-bottom: 1px solid var(--sm-sched-line);
}

.sm-schedule-page .sm-sched-stop-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--sm-sched-ink);
}

.sm-schedule-page .sm-sched-stop-sub {
    font-size: 0.75rem;
    color: var(--sm-sched-muted);
}

.sm-schedule-page .sm-sched-stop-body {
    padding: 0.85rem 1.1rem;
}

/* The customer and address block. The address is a maps link, so it stays obviously tappable. */
.sm-schedule-page .sm-sched-stop-customer {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sm-sched-ink);
}

.sm-schedule-page .sm-sched-stop-line {
    font-size: 0.85rem;
    margin-top: 1px;
}

/* The drop's coordinates, sitting after the address on the same line. Pushed away from the address
   with a margin rather than a separator character: on a phone the line wraps, and a dangling
   bullet or pipe at the end of a line reads as something missing. */
.sm-schedule-page .sm-sched-coords {
    margin-left: 0.75rem;
    white-space: nowrap;
}

.sm-schedule-page .sm-sched-coords i {
    margin-right: 0.15rem;
}

/* "No coordinates" is information, not a fault - stated quietly so it does not compete with the
   address, and never in the red the rest of this page keeps for things that are wrong. */
.sm-schedule-page .sm-sched-coords-none {
    color: var(--bs-secondary-color, #6c757d);
    opacity: 0.75;
    font-style: italic;
}

.sm-schedule-page .sm-sched-stop-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-size: 0.8rem;
    color: var(--sm-sched-muted);
}

.sm-schedule-page .sm-sched-stop-facts strong {
    color: var(--sm-sched-ink);
    font-weight: 700;
}

/* Consolidation - what to pull from the yard before the run starts. */
.sm-schedule-page .sm-sched-consolidation {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--sm-sched-ink);
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-stop-head {
    background: #16202D;
}

/* Padding for anything that isn't a table sitting directly inside a card - the cards have none of
   their own so a table can run edge to edge. */
.sm-schedule-page .sm-sched-card-pad {
    padding: 0.85rem 1.1rem;
}

/* Tab strips inside a card (the Pickup Orders pages). Quieter than Bootstrap's default: the active
   tab is marked by weight and a green underline rather than a box drawn around it. */
.sm-schedule-page .nav-tabs {
    border-bottom: 1px solid var(--sm-sched-line);
    gap: 0.25rem;
}

.sm-schedule-page .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sm-sched-muted);
    background: transparent;
}

.sm-schedule-page .nav-tabs .nav-link:hover {
    color: var(--sm-sched-ink);
}

.sm-schedule-page .nav-tabs .nav-link.active {
    color: var(--sm-sched-ink);
    border-bottom-color: var(--sm-sched-stop);
    background: transparent;
}

/* ---------- trucking sheet ----------
   Block-pay rows are a running total in the middle of the detail lines, so they are tinted rather
   than striped: amber for a block the driver drove, green for one they rode as a trainee.

   box-shadow:none is doing real work. The app's zebra stripes are painted as an inset shadow, which
   covers a row's own background - these rows used to set their tint inline and it never showed. */
.sm-schedule-page .sm-sched-payrow > * {
    background-color: #FEF3C7 !important;
    box-shadow: none !important;
    font-weight: 700;
}

.sm-schedule-page .sm-sched-payrow-trainee > * {
    background-color: #DCFCE7 !important;
}

/* ---------- buttons ----------
   The same green as the Order page, so a button means the same thing wherever it is. Outline
   buttons are given the green too - left as Bootstrap's grey they read as disabled next to a
   filled one. */

.sm-schedule-page .btn-primary {
    background: linear-gradient(180deg, var(--sm-sched-btn) 0%, var(--sm-sched-btn-dark) 100%);
    border-color: var(--sm-sched-btn-dark);
    color: #fff;
}

.sm-schedule-page .btn-primary:hover:not(:disabled),
.sm-schedule-page .btn-primary:focus:not(:disabled) {
    background: var(--sm-sched-btn-dark);
    border-color: var(--sm-sched-btn-dark);
    box-shadow: 0 0 0 0.15rem rgba(28, 83, 54, 0.25);
}

.sm-schedule-page .btn-outline-primary,
.sm-schedule-page .btn-outline-secondary {
    border-color: var(--sm-sched-btn-on);
    color: var(--sm-sched-btn-on);
}

.sm-schedule-page .btn-outline-primary:hover:not(:disabled),
.sm-schedule-page .btn-outline-primary:focus:not(:disabled),
.sm-schedule-page .btn-outline-secondary:hover:not(:disabled),
.sm-schedule-page .btn-outline-secondary:focus:not(:disabled) {
    background: var(--sm-sched-btn);
    border-color: var(--sm-sched-btn-dark);
    color: #fff;
    box-shadow: 0 0 0 0.15rem rgba(28, 83, 54, 0.25);
}

/* Left red: removing a stop and deleting a recipient are the destructive ones, and they are the
   only buttons on these pages that should look different from the rest. */

/* Links take the house green rather than Bootstrap's blue: BOL numbers, "add trainee driver", the
   log's cross-references. Underlined so a link is still obviously a link without leaning on colour
   alone - green type on a green stripe is not a strong enough signal by itself. */
.sm-schedule-page a:not(.btn),
.sm-schedule-page .btn-link {
    color: var(--sm-sched-btn-on);
}

.sm-schedule-page a:not(.btn):hover,
.sm-schedule-page .btn-link:hover {
    color: var(--sm-sched-btn-dark);
}

/* Header cells are the exception - white on the green band, and already handled above. */
.sm-schedule-page thead th a {
    text-decoration: underline;
}

/* A button tucked against the top-right corner of a table - "Load All" above a long list. Tighter
   than a standalone button, and nudged so it sits square over the table's corner rather than
   floating away from it. */
.sm-schedule-page .sm-sched-corner-btn {
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    position: relative;
    top: 2px;
    left: -5px;
}

/* Tickboxes and switches take the same green rather than Bootstrap's blue. */
.sm-schedule-page .form-check-input:checked {
    background-color: var(--sm-sched-btn);
    border-color: var(--sm-sched-btn);
}

.sm-schedule-page .form-check-input:focus {
    border-color: var(--sm-sched-btn);
    box-shadow: 0 0 0 0.15rem rgba(28, 83, 54, 0.25);
}

/* Every other input on these pages - search boxes, the recipient field, modal forms. */
.sm-schedule-page .form-control:focus,
.sm-schedule-page .form-select:focus {
    border-color: var(--sm-sched-btn);
    box-shadow: 0 0 0 0.15rem rgba(28, 83, 54, 0.15);
}

/* The reorder arrows hovered blue, matching the rail. */
.sm-schedule-page .sm-sched-reorder .btn:hover:not(:disabled) {
    color: var(--sm-sched-btn-on);
}

/* ---------- inline help ----------
   A circled question mark beside a page title, with its explanation tucked behind it. The text is
   worth having but not worth a paragraph of preamble above every table - people read a page like
   this one daily and stop seeing standing prose after the second visit. */

.sm-schedule-page .sm-sched-help-wrap {
    position: relative;
    display: inline-flex;
}

.sm-schedule-page .sm-sched-help-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sm-sched-muted);
    font-size: 1rem;
    line-height: 1;
}

.sm-schedule-page .sm-sched-help-btn:hover {
    color: var(--sm-sched-btn-on);
}

/* Catches a click anywhere else on the page and closes the bubble. Transparent and unpainted - it
   exists only to be clicked, and sits under the bubble so the bubble's own content stays usable. */
.sm-help-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.sm-schedule-page .sm-sched-help-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 20;
    /* Focused on open so Escape reaches it; the ring would just be noise on a panel of text. */
    outline: none;
    width: 360px;
    max-width: 80vw;
    padding: 0.7rem 0.9rem;
    background: #fff;
    border: 1px solid var(--sm-sched-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 42, 67, 0.14);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--sm-sched-ink);
    text-align: left;
    white-space: normal;
}

/* Room for the close button in the top-right corner, and the button itself. */
.sm-schedule-page .sm-sched-help-bubble {
    padding-right: 2rem;
}

.sm-schedule-page .sm-help-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    font-size: 0.65rem;
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-help-bubble {
    background: #1B2635;
}

/* ---------- status pills ----------
   Given a white fill and a coloured edge rather than the mockup's tinted fill:
   these sit on the app's green zebra stripes, and a pale green "Active" pill on a
   green row loses its edges entirely. White reads cleanly on both halves. */

.sm-schedule-page .sm-sched-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    background: #fff;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.sm-schedule-page .sm-sched-pill-good { color: #15803D; }
.sm-schedule-page .sm-sched-pill-muted { color: #475569; }
.sm-schedule-page .sm-sched-pill-warn { color: #B45309; }
.sm-schedule-page .sm-sched-pill-bad { color: #B91C1C; }

/* ---------- legend ---------- */

.sm-schedule-page .sm-sched-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    padding: 0.7rem 1.1rem;
    background: #fff;
    border: 1px solid var(--sm-sched-line);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--sm-sched-muted);
}

.sm-schedule-page .sm-sched-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- narrow screens ----------
   The rail becomes a strip across the top: 108px of identity column is a lot to
   give up when the stops table already needs to scroll. */
@media (max-width: 767.98px) {
    .sm-schedule-page .sm-sched-block {
        grid-template-columns: 1fr;
    }

    .sm-schedule-page .sm-sched-block-id {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.6rem;
        padding: 0.6rem 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--sm-sched-line);
    }

    .sm-schedule-page .sm-sched-summary {
        margin-left: 0;
    }
}

/* ---------- dark mode ----------
   Driven by the account-menu switch (see wwwroot/js/theme.js), not by prefers-color-scheme.

   This block used to guess at the OS setting, and it only covered the card, the rules and the muted
   type. Everything it missed stayed light while --sm-sched-ink turned near-white on top of it -
   which is what made these pages the worst offenders on a phone in dark mode. The misses are all
   fixed below; they are marked so it is clear what each one is for. */

[data-sm-theme="dark"] .sm-schedule-page {
    --sm-sched-ink: #E2E8F0;
    --sm-sched-muted: #94A3B8;
    --sm-sched-line: #334155;
    --sm-sched-btn-on: #7CC79B;
}

/* thead is deliberately absent: its green band and white type are fixed in both modes. */
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-card,
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-legend {
    background: #1B2635;
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-summary {
    background: #16202D;
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-field .form-select,
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-field .form-control {
    background-color: #16202D;
    color: #E2E8F0;
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-pill {
    background: #16202D;
}

/* Hovering a link went DARKER (--sm-sched-btn-dark, #14402a), which is the right direction on a
   white card and exactly wrong on a dark one - it is darker than the card itself, so the link
   disappeared under the cursor. Most visibly on the "view completion log" clock, which is icon-only
   and so had nothing left to see. The resting colour was lifted for dark mode; this was missed.
   Goes lighter than the resting green instead, so hover still reads as "this is live". */
[data-sm-theme="dark"] .sm-schedule-page a:not(.btn):hover,
[data-sm-theme="dark"] .sm-schedule-page .btn-link:hover {
    color: #A8DCC0;
}

/* A disabled field kept a #F1F5F9 fill under --sm-sched-muted type - pale grey on near-white. */
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-field .form-control:disabled,
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-field .form-select:disabled {
    background-color: #202A38;
    color: var(--sm-sched-muted);
}

/* The date box beside the page title sets a border and an ink colour but no fill, so it picked up
   Bootstrap's - which is now dark. Spelled out anyway so the two cannot drift apart. */
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-datebox {
    background-color: #16202D;
    color: var(--sm-sched-ink);
}

/* Trucking sheet block-pay rows. These opt out of the zebra stripes and paint their own amber and
   green with !important, so in dark mode they were the one place left where near-white type landed
   on a genuinely light fill - and they are the rows carrying the money. Same two signals, dark
   enough to read against. */
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-payrow > * {
    background-color: #4A3B12 !important;
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-payrow-trainee > * {
    background-color: #17371F !important;
}

/* Status pills are a white chip with a coloured edge and matching type. The chip goes dark above,
   which leaves the four colours far too deep to read on it - #15803D on #16202D is 2.4:1. Same four
   meanings, lifted to clear 4.5:1. */
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-pill-good { color: #4ADE80; }
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-pill-muted { color: #A9B6C6; }
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-pill-warn { color: #FBBF24; }
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-pill-bad { color: #FB7185; }

/* The trainee / main-driver line and the remove control, for the same reason. */
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-pair {
    color: #FB7185;
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-remove {
    color: #FB7185;
}

[data-sm-theme="dark"] .sm-schedule-page .sm-sched-remove:hover {
    color: #FDA4AF;
}

/* The AM cream and PM blue identity strips stay light in both modes by design - see the note where
   they are defined - and the type on them is already pinned to a fixed dark ink. The one thing that
   is not pinned is a Bootstrap .btn-close dropped onto them, which Bootstrap inverts to white in
   dark mode and would vanish. */
[data-sm-theme="dark"] .sm-schedule-page .sm-sched-block-id .btn-close {
    filter: none;
}