/* -- Calendar time-gutter hour banding ---------------------------------------
   Owner spec 2026-07-04: the LEFT TIME COLUMN ONLY alternates background by
   FULL HOUR (the 5:00 label and its 5:30 half share one band; 6:00 + 6:30 the
   next), subtle - a scan aid, not spreadsheet striping. The main grid stays
   clean. Refined 2026-07-04: bands softened (0.04 -> 0.035 dark) and a gutter
   LINE HIERARCHY added in dark - hour boundary 0.16, in-hour 30-min line 0.06
   (the stock theme leaves the 30-min gutter line fully transparent).

   Lives in its own file ONLY because app.css is another agent's in-flight
   working file (they also have a `sched-hour-band` class mid-build - at merge
   time keep ONE mechanism: either their class styling or this file, and
   delete the other). Linked from App.razor with the ?v= cache-buster.

   Mechanics (verified against the LIVE rendered DOM 2026-07-03 via a
   Playwright probe): in vertical Day/Week views the time gutter is
   `.e-time-cells-wrap` with ONE tbody of uniform 30-min rows - hour-label
   rows are `td.e-time-slots` (NO e-time-cells class), half-hour rows are
   `td.e-time-cells.e-time-slots` - so we target the row's td generally,
   NOT `.e-time-cells` (that class filter was the earlier one-row-in-four
   bug). Two rows per hour, row 1 = the grid's first hour, so bands are row
   PAIRS: rows 4n+1/4n+2 = base, rows 4n+3/4n+4 = alternate. Scoped to
   `.e-vertical-view` (a verified ancestor) so Timeline views are untouched,
   and to `.e-time-cells-wrap` so the content grid is untouched. !important
   because the theme/app.css paint the gutter tds with a solid base that
   otherwise wins (the standing Tailwind-3 lesson). */

/* Dark - explicit toggle. (Softened 2026-07-04 per owner: "I can tell where each
   hour begins", not "the time column is striped".) */
:root[data-theme="dark"] .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+3) td,
:root[data-theme="dark"] .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+4) td {
    background: rgba(148, 163, 184, 0.035) !important;
}

/* Gutter line hierarchy (dark): the theme draws gutter lines as border-BOTTOM -
   the HOUR boundary is the bottom of the half-hour cell (td.e-time-cells), and
   the in-hour 30-min line is the bottom of the hour-label cell, TRANSPARENT in
   the stock theme (which is what made the gutter read as solid blocks). Faint
   line on every row first, stronger hour boundary overrides after. */
:root[data-theme="dark"] .e-schedule .e-vertical-view .e-time-cells-wrap tbody td {
    border-bottom-color: rgba(148, 163, 184, 0.06) !important;
}
:root[data-theme="dark"] .e-schedule .e-vertical-view .e-time-cells-wrap tbody td.e-time-cells {
    border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}

/* Dark - "system" mode following the OS (data-theme unset). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+3) td,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+4) td {
        background: rgba(148, 163, 184, 0.035) !important;
    }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .e-schedule .e-vertical-view .e-time-cells-wrap tbody td {
        border-bottom-color: rgba(148, 163, 184, 0.06) !important;
    }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .e-schedule .e-vertical-view .e-time-cells-wrap tbody td.e-time-cells {
        border-bottom-color: rgba(148, 163, 184, 0.16) !important;
    }
}

/* Light - same idea, whisper-quiet slate tint. */
:root[data-theme="light"] .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+3) td,
:root[data-theme="light"] .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+4) td {
    background: rgba(15, 23, 42, 0.025) !important;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+3) td,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .e-schedule .e-vertical-view .e-time-cells-wrap tbody tr:nth-child(4n+4) td {
        background: rgba(15, 23, 42, 0.025) !important;
    }
}