/* ==========================================================================
   FL510 Design System — CALENDAR GRID SKELETON (BACKLOG 49a)
   --------------------------------------------------------------------------
   Scoped under .ds (opt-in). Two scaffolds:
     .ds-cal--month  — month grid (7 columns x week rows)
     .ds-cal--day    — day timeline (hour rows, single event lane)

   Verified rules (docs/AREAS/mobile-design-standards.md):
   - rule 1  the interactive grid is a semantic <table role="grid">; tr/th/td
             imply row/columnheader/gridcell. Roving tabindex + arrow keys are
             the ONE JS-required piece (design-system.js); everything here is
             pure server-rendered CSS.
   - rule 2  CSS Grid drives layout, redefinable per breakpoint with media
             queries ALONE (no markup change phone<->desktop). NEVER a desktop
             table shrunk to mobile.

   Per-aircraft color system (mobile-ui.md, approved 2026-07-11):
   - month cells carry per-tail micro density bars (one thin bar per tail with
     bookings that day, tail color via --ds-aircraft-N, CONSISTENT ORDER).
   - event-kind within a tail hue: reservation = solid; maintenance =
     striped/hollow (same hue); non-aircraft = neutral gray. Cancelled =
     strikethrough; checked-out (flying now) = brightened/active.

   SCOPE BOUNDARY: single-lane same-cell stacking only. The interval-
   partitioning lane algorithm for side-by-side conflicts is 49b's problem
   (named follow-up in mobile-design-standards.md). This skeleton also does
   NOT own routing — prev/next URLs come from the view model.
   ========================================================================== */

/* --- Shared table reset: keep <table role="grid"> semantics, drop the
       spreadsheet look. Layout is imposed by CSS Grid on the rows. --- */
.ds .ds-cal {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--ds-text-primary);
}
.ds .ds-cal caption {
    text-align: left;
    font-weight: 700;
    font-size: clamp(var(--ds-type-lg), 1.05rem + 0.5vw, var(--ds-type-xl));
    padding-bottom: var(--ds-space-2);
}

/* Roving-tabindex focus ring. The enhanced grid moves focus to the [data-ds-cell]
   itself (the cell is the widget; design-system.js demotes the child links), so
   the focused cell — not the inner link — must show the visible focus indicator.
   The .ds-cal-daylink:focus-visible rule below still covers the no-JS/mouse case
   where the link itself receives focus. */
.ds [data-ds-cell]:focus-visible {
    outline: 3px solid var(--ds-accent);
    outline-offset: -3px;
}

/* --- Calendar chrome (prev / title / next as plain links — no-JS nav) --- */
.ds .ds-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-3);
}
.ds .ds-cal-nav__title {
    font-weight: 700;
    font-size: clamp(var(--ds-type-lg), 1.05rem + 0.6vw, var(--ds-type-2xl));
    text-align: center;
    flex: 1 1 auto;
}
.ds .ds-cal-nav a {
    min-height: var(--ds-touch-min);
    min-width: var(--ds-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-2);
    text-decoration: none;
    background: var(--ds-surface-raised);
    color: var(--ds-accent);
    font-weight: 600;
}

/* ==========================================================================
   MONTH GRID — CSS Grid on each week row (rule 2)
   ========================================================================== */
.ds .ds-cal--month thead tr,
.ds .ds-cal--month tbody tr {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.ds .ds-cal--month thead th {
    padding: var(--ds-space-1) 0;
    font-size: var(--ds-type-xs);
    font-weight: 600;
    color: var(--ds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.ds .ds-cal--month td {
    /* each day cell is a gridcell (roving tabindex target) */
    position: relative;
    min-height: 3.25rem;
    padding: var(--ds-space-1);
    border: 1px solid var(--ds-line);
    background: var(--ds-surface-raised);
    vertical-align: top;
    overflow: hidden;
}
.ds .ds-cal--month td.is-outside {
    background: var(--ds-surface);
    color: var(--ds-text-secondary);
    opacity: 0.6;
}
.ds .ds-cal--month td.is-today .ds-cal-daynum {
    background: var(--ds-danger);   /* iOS-model "today" = red (mobile-ui.md) */
    color: #fff;
}
/* iOS reference model (mobile-ui.md): the SELECTED day is a filled circle on the day number,
   distinct from today's red fill; a cell outline reads as a focus ring, not a selection. */
.ds .ds-cal--month td.is-selected .ds-cal-daynum {
    background: var(--ds-accent);
    color: var(--ds-accent-on, #fff);
}
.ds .ds-cal--month td.is-selected.is-today .ds-cal-daynum {
    background: var(--ds-danger);   /* today keeps its red identity even when selected */
    color: #fff;
}
.ds .ds-cal-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-type-sm);
    font-weight: 600;
}
/* Day cell body is a full-size link so the whole cell is a >=44px target and
   navigation works with no JS (URL comes from the view model). */
.ds .ds-cal-daylink {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}
.ds .ds-cal-daylink:focus-visible {
    outline: 3px solid var(--ds-accent);
    outline-offset: -3px;
}

/* --- Per-aircraft micro density bars (consistent order per tail) --- */
.ds .ds-densitybars {
    position: absolute;
    left: var(--ds-space-1);
    right: var(--ds-space-1);
    bottom: var(--ds-space-1);
    display: flex;
    flex-direction: column;
    gap: var(--ds-densitybar-gap);
    pointer-events: none;
}
.ds .ds-densitybar {
    height: var(--ds-densitybar-h);
    border-radius: 2px;
    background: var(--ds-event-neutral);
}
.ds .ds-densitybar--overflow {
    height: 2px;
    background: var(--ds-text-secondary);
    opacity: 0.7;
}

/* ==========================================================================
   DAY TIMELINE — hour rows, single event lane (rule 2)
   ========================================================================== */
.ds .ds-cal--day tbody {
    display: grid;
    grid-template-columns: [gutter] 3.5rem [lane] 1fr;
}
.ds .ds-cal--day tr {
    display: contents;
}
.ds .ds-cal--day th[scope="row"] {
    grid-column: gutter;
    padding: var(--ds-space-1) var(--ds-space-2);
    font-size: var(--ds-type-xs);
    font-weight: 500;
    color: var(--ds-text-secondary);
    text-align: right;
    border-top: 1px solid var(--ds-line);
    white-space: nowrap;
}
.ds .ds-cal--day td {
    grid-column: lane;
    min-height: 2.75rem;
    padding: var(--ds-space-1);
    border-top: 1px solid var(--ds-line);
}

/* ==========================================================================
   EVENT BLOCKS — kind + status treatments (single lane, same-cell stack)
   Tail hue is set inline per event via --ds-ac / --ds-ac-on custom props
   sourced from --ds-aircraft-N (Services/DesignSystemPalette.cs owns which N).
   ========================================================================== */
.ds .ds-event {
    display: block;
    min-height: var(--ds-touch-min);
    padding: var(--ds-space-2) var(--ds-event-pad-x);
    border-radius: var(--ds-event-radius);
    border-left: 4px solid var(--ds-ac, var(--ds-event-neutral));
    background: var(--ds-ac, var(--ds-event-neutral));
    color: var(--ds-ac-on, var(--ds-event-neutral-on));
    font-size: var(--ds-type-sm);
    text-decoration: none;
    overflow: hidden;
}
.ds .ds-event + .ds-event { margin-top: var(--ds-densitybar-gap); }
.ds .ds-event__title { font-weight: 600; }
.ds .ds-event__meta {
    display: block;
    font-size: var(--ds-type-xs);
    opacity: 0.9;
}

/* reservation = solid (default above). maintenance = striped/hollow, same hue */
.ds .ds-event--maintenance {
    background: transparent;
    color: var(--ds-ac, var(--ds-event-neutral));
    background-image: repeating-linear-gradient(
        45deg,
        var(--ds-ac, var(--ds-event-neutral)) 0,
        var(--ds-ac, var(--ds-event-neutral)) 2px,
        transparent 2px,
        transparent 7px);
    /* hollow tint so text stays legible over the stripes */
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--ds-surface) 78%, transparent);
}
/* non-aircraft block = neutral gray */
.ds .ds-event--neutral {
    --ds-ac: var(--ds-event-neutral);
    --ds-ac-on: var(--ds-event-neutral-on);
}
/* cancelled = strikethrough + muted */
.ds .ds-event--cancelled {
    opacity: 0.55;
    text-decoration: line-through;
}
/* checked-out (flying now) = brightened/active */
.ds .ds-event--active {
    box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-ac, var(--ds-accent));
    filter: saturate(1.15) brightness(1.05);
}

/* A wrench glyph marks maintenance so "down for maintenance" reads at a glance
   without relying on the stripe alone (colorblind secondary cue). */
.ds .ds-event--maintenance .ds-event__title::before {
    content: "\1F527\00A0"; /* wrench + nbsp */
}

/* Legend swatch (style guide + agenda accent bars) */
.ds .ds-accent-bar {
    display: inline-block;
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--ds-ac, var(--ds-event-neutral));
}

/* --- Wider viewports: taller month cells, no markup change (rule 2) --- */
@media (min-width: 700px) {
    .ds .ds-cal--month td { min-height: 5.5rem; }
    .ds .ds-densitybar { height: 5px; }
}

/* ==========================================================================
   LIVE INTERNAL SCHEDULE SURFACE (BACKLOG 49b)
   --------------------------------------------------------------------------
   The iOS-model /Portal/Schedule live surface built on the 49a skeleton: the
   view-mode toggle, a 7-column WEEK grid variant, the selected-day AGENDA list
   (colored accent bar + structured title + location line + right-aligned
   stacked times), the mobile FILTER aircraft rows, and the "Today" pill bottom
   chrome. All scoped under .ds; mobile-first with min-width enhancements only.
   ========================================================================== */

/* Screen-reader-only helper (the live grids show their title in the nav chrome,
   so the <caption> is hidden visually but kept for the ARIA grid's accessible name). */
.ds .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* View-mode toggle (month / week / day / list) — URL-driven plain links. */
.ds .ds-cal-viewtoggle {
    display: flex;
    gap: var(--ds-space-1);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-3);
}
.ds .ds-cal-viewtoggle a {
    min-height: var(--ds-touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ds-space-3);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-pill);
    text-decoration: none;
    color: var(--ds-accent);
    background: var(--ds-surface-raised);
    font-weight: 600;
    font-size: var(--ds-type-sm);
}
.ds .ds-cal-viewtoggle a[aria-current="page"] {
    background: var(--ds-accent);
    color: var(--ds-accent-on);
    border-color: var(--ds-accent);
}

/* ---------- WEEK grid — 7 day columns, each a stack of event chips ---------- */
.ds .ds-cal--week tbody tr {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.ds .ds-cal--week td {
    position: relative;
    border: 1px solid var(--ds-line);
    background: var(--ds-surface-raised);
    min-height: 7rem;
    padding: var(--ds-space-1);
    vertical-align: top;
    overflow: hidden;
}
.ds .ds-cal--week td.is-selected .ds-cal-daynum {
    background: var(--ds-accent);
    color: var(--ds-accent-on, #fff);
}
.ds .ds-cal--week td.is-selected.is-today .ds-cal-daynum {
    background: var(--ds-danger);
    color: #fff;
}
.ds .ds-cal-weekhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    min-height: var(--ds-touch-min);
    justify-content: center;
}
.ds .ds-cal-weekhead__dow {
    font-size: var(--ds-type-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-secondary);
}
.ds .ds-cal--week td.is-today .ds-cal-daynum {
    background: var(--ds-danger);
    color: #fff;
}
.ds .ds-cal-weekchips {
    display: flex;
    flex-direction: column;
    gap: var(--ds-densitybar-gap);
    margin-top: var(--ds-space-1);
}
/* Compact week chip: a slimmer .ds-event variant. */
.ds .ds-cal-weekchips .ds-event {
    min-height: 1.75rem;
    padding: 2px var(--ds-event-pad-x);
    font-size: var(--ds-type-xs);
}

/* ---------- Selected-day AGENDA list ---------- */
.ds .ds-agenda {
    margin-top: var(--ds-space-4);
}
.ds .ds-agenda__heading {
    font-weight: 700;
    font-size: clamp(var(--ds-type-lg), 1rem + 0.5vw, var(--ds-type-xl));
    margin-bottom: var(--ds-space-2);
}
.ds .ds-agenda__empty {
    color: var(--ds-text-secondary);
}
.ds .ds-agenda__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}
.ds .ds-agenda-item {
    display: flex;
    gap: var(--ds-space-2);
    align-items: stretch;
    padding: var(--ds-space-2);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-2);
    background: var(--ds-surface-raised);
}
.ds .ds-agenda-item__accent {
    flex: 0 0 4px;
    width: 4px;
    border-radius: 2px;
    background: var(--ds-ac, var(--ds-event-neutral));
}
.ds .ds-agenda-item__body {
    flex: 1 1 auto;
    min-width: 0;
}
.ds .ds-agenda-item__title {
    font-weight: 600;
    text-decoration: none;
    color: var(--ds-text-primary);
    display: inline-block;
    min-height: var(--ds-touch-min);
    line-height: var(--ds-touch-min);
}
.ds .ds-agenda-item__loc,
.ds .ds-agenda-item__status {
    display: block;
    font-size: var(--ds-type-xs);
    color: var(--ds-text-secondary);
}
.ds .ds-agenda-item__loc::before {
    content: "\1F4CD\00A0"; /* round pushpin + nbsp */
}
.ds .ds-agenda-item__times {
    flex: 0 0 auto;
    text-align: right;
    font-size: var(--ds-type-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ds .ds-agenda-item__times span {
    display: block;
}
.ds .ds-agenda-item__tz {
    font-size: var(--ds-type-xs);
    color: var(--ds-text-secondary);
}
.ds .ds-agenda-item--cancelled .ds-agenda-item__title {
    opacity: 0.6;
    text-decoration: line-through;
}
.ds .ds-agenda-item--active {
    box-shadow: inset 0 0 0 2px var(--ds-ac, var(--ds-accent));
}
.ds .ds-agenda-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-1);
}
.ds .ds-agenda-item__actions a {
    min-height: var(--ds-touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ds-space-3);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-2);
    text-decoration: none;
    color: var(--ds-accent);
    background: var(--ds-surface);
    font-size: var(--ds-type-sm);
    font-weight: 600;
}

/* ---------- Mobile filter bottom sheet — per-aircraft color rows ---------- */
.ds .ds-filter-aircraft {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
    margin: var(--ds-space-2) 0;
}
.ds .ds-filter-aircraft__row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: var(--ds-touch-min);
    padding: 0 var(--ds-space-3);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-2);
    text-decoration: none;
    color: var(--ds-text-primary);
    background: var(--ds-surface-raised);
}
.ds .ds-filter-aircraft__row[aria-current="true"] {
    border-color: var(--ds-accent);
    box-shadow: inset 0 0 0 1px var(--ds-accent);
}
.ds .ds-filter-aircraft__swatch {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    background: var(--ds-ac, var(--ds-event-neutral));
}
.ds .ds-filter-aircraft__tail {
    font-weight: 600;
}

/* ---------- "Today" pill bottom chrome ---------- */
.ds .ds-cal-chrome {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-4);
    padding: var(--ds-space-2);
    padding-bottom: calc(var(--ds-space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-line);
}
.ds .ds-cal-chrome__today {
    min-height: var(--ds-touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ds-space-4);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-accent);
    color: var(--ds-accent-on);
    text-decoration: none;
    font-weight: 600;
}
.ds .ds-cal-chrome__today[aria-current="date"] {
    background: var(--ds-surface-raised);
    color: var(--ds-accent);
    border: 1px solid var(--ds-accent);
}
.ds .ds-cal-chrome__tz {
    font-size: var(--ds-type-xs);
    color: var(--ds-text-secondary);
}