/* ============================================================
   MOBILE OVERRIDES — applies on top of wireframe.css + v05-shell.css
   Breakpoints (from user spec):
     ≤1024px → tablet (sidebar becomes drawer, rails stack, tables scroll-x)
     ≤640px  → phone  (compact topbar, FAB, card-tables, bottom sheets)
   ============================================================ */

/* ============================================================
   FAB, HAMBURGER, SCRIM — base styles (hidden on desktop)
   ============================================================ */
.m-hamburger,
.m-fab,
.m-scrim,
.m-ol-cards,
.m-action-bar,
.m-mobile-only {
  display: none;   /* .m-ol-cards / .m-action-bar revealed (flex) only at ≤640px — keeps the desktop view clean (Tweak 045) */
}

/* Tweak 059: the ctx-card "Details" collapse toggle is a phone-only affordance —
   its styling AND the collapse behaviour both live in the ≤640px block below.
   mobile.js injects the button on every viewport, so hide it on desktop;
   otherwise it renders as an unstyled, no-op button beside the context card. */
.ctx-card__toggle { display: none; }

.m-hamburger {
  appearance: none;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  color: #fff;
  width: 44px; height: 44px;   /* ADR 0005: >=44px tap target (UX-24) */
  border-radius: var(--radius-md);
  padding: 0;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}
.m-hamburger:hover { background: rgba(255,255,255,0.12); }
.m-hamburger svg { width: 18px; height: 18px; display: block; }

.m-scrim {
  position: fixed; inset: 0;
  background: rgba(10,13,11,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 70;
}
.m-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Body scroll-lock while a drawer / bottom sheet / hamburger menu is open
   (UX-25). mobile.js adds .m-locked on open and removes it on close so the
   page underneath can't scroll behind the scrim/backdrop. */
.m-locked {
  overflow: hidden;
}

.m-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  appearance: none;
  border: 0;
  cursor: pointer;
  /* a11y-visual-02: white 14px label needs >=4.5:1 — green-700 CTA fill (5.64:1). */
  background: var(--cta-bg);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 0 20px 0 18px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(0,170,61,0.35), 0 2px 6px rgba(10,13,11,0.14);
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.m-fab:hover { background: var(--cta-bg-hover); }
.m-fab:active { transform: translateY(1px); }
.m-fab svg { width: 18px; height: 18px; flex: none; }
.m-fab--icon-only { padding: 0; width: 56px; }
.m-fab--icon-only .m-fab__lbl { display: none; }

/* Account for FAB-covered content at bottom of pages */
.m-fab-pad { display: none; }

/* Account for sticky-action-bar-covered content on order detail (UX-09) */
.m-action-bar-pad { display: none; }

/* ============================================================
   TABLET (≤1024) — sidebar becomes drawer, rails stack
   ============================================================ */
@media (max-width: 1024px) {

  /* ----- Shell: collapse to single column, sidebar becomes drawer ----- */
  .hf-shell {
    grid-template-columns: 1fr !important;
  }

  .hf-side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    z-index: 80 !important;
    transform: translateX(-100%);
    /* a11y-code-03: the closed drawer was only translated off-screen, leaving
       ~8 invisible Tab stops (nav links + Sign out sit BEFORE <main> in DOM
       order) on every authenticated mobile page. visibility:hidden removes
       them from the Tab order; the 0s visibility flip is DELAYED 240ms on
       close so the slide-out still animates, and undelayed on open. Media-
       scoped, so the always-visible desktop sidebar is untouched. */
    visibility: hidden;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
                visibility 0s linear 240ms;
    box-shadow: 8px 0 32px rgba(10,13,11,0);
    border-right: 0 !important;
  }
  .hf-side.is-open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
    box-shadow: 8px 0 32px rgba(10,13,11,0.18);
  }

  /* Show hamburger in the topbar */
  .m-hamburger { display: inline-flex; }
  .m-scrim { display: block; }

  /* feat-operator-05: quick-find swaps home — the topbar input hides (the
     header is too tight next to page CTAs at this width) and the
     sidebar/drawer Find form shows instead (the sidebar IS the drawer here). */
  .hf-find { display: none; }
  .hf-side__find { display: block; }

  /* The brand title in topbar — keep visible since sidebar is hidden */
  .hf-header__title { display: inline-flex; align-items: center; gap: 0; }

  /* ----- Order detail: action rail moves below content (we'll FAB the primary) ----- */
  .od-grid,
  [data-rail="right"] .od-grid,
  [data-rail="left"]  .od-grid {
    grid-template-columns: 1fr !important;
  }
  .od-rail { order: 2; }
  [data-rail="left"] .od-rail { order: 2; }

  /* ----- Place order / form pages: rail goes to top, becomes collapsible summary ----- */
  .form-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .form-grid > .ctx-card {
    order: -1;
    position: static;
    top: auto;
  }
  /* Instructional ctx-cards (no .ctx-card__id summary anchor; not collapsed) drop below
     the form on mobile so the form comes first rather than a wall of help text. */
  .form-grid > .ctx-card:not(:has(.ctx-card__id)) {
    order: 1;
  }
  .form-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    /* Match the base rule's zero inline padding so the heading keeps sharing the
       form-card's edges at mobile widths too (was 0 6px, a small re-inset). */
    padding: 0 0 var(--space-3);
    max-width: 100%;
  }
  .form-intro__actions { flex-wrap: wrap; }
  /* Confirmation/done/invalid auth pages keep their lone CTA full-width on
     mobile (UX-32), matching the prior .form-card__actions .btn behaviour. */
  .form-intro__actions .btn { width: 100%; justify-content: center; }

  /* Dashboard side rail / two-col grids stack */
  .db-grid {
    grid-template-columns: 1fr !important;
  }
  .db-today-strip {
    flex-wrap: wrap;
    gap: 4px 14px;
    padding-bottom: 8px;
  }
  .db-today-strip .greeting { margin-left: 0; }
  .db-today-strip h1.db-day { margin: 0; }
  .db-today-strip h1.db-day span { font-size: 24px !important; line-height: 1.15 !important; }

  /* Place-order page split panes stack */
  .po-grid,
  .po-split,
  .po-row--split,
  .po-row--3 {
    grid-template-columns: 1fr !important;
  }

  /* Export filter rail stacks */
  .exp-grid,
  .ex-grid,
  .ex-layout {
    grid-template-columns: 1fr !important;
  }

  /* Amendment / cancellation review: stack decision/meta panes */
  .ar-decision,
  .cr-decision,
  .cr-meta {
    grid-template-columns: 1fr !important;
  }
  /* Per-field diff: keep each field's label + before + after together so the
     current-vs-proposed pairing survives the narrow layout (UX-22). The two
     pane headers stack, and each row becomes a single labelled block. The
     !important mirrors the .ar-diff/.ar-decision rules above: amendment-review.css
     loads after mobile.css, so its base grid-template-columns would otherwise win. */
  .ar-diff__head { grid-template-columns: 1fr !important; }
  .ar-diff__hd--left { grid-column: auto !important; border-right: 0 !important; }
  .ar-diff__hd--right { grid-column: auto !important; border-top: 1px solid var(--border-1); }
  .ar-row { grid-template-columns: 1fr !important; gap: 6px; }
  .ar-row__after {
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Accept-internal corrections diff: stack */
  .acc-diff,
  .am-row[data-on="true"] .am-row__body {
    grid-template-columns: 1fr !important;
  }
  .acc-diff .arr,
  .am-row .arr { display: none; }

  /* Request location coords + Use current */
  .rl-coords { grid-template-columns: 1fr 1fr !important; }
  .rl-coords .btn { grid-column: 1 / -1; }

  /* Import errors row */
  .imp-err-row { grid-template-columns: 1fr; gap: 6px; }
  .imp-stats { grid-template-columns: 1fr; }

  /* Dashboard rows */
  .db-today-strip h1.db-day span { font-size: 20px !important; }
  .db-today__row,
  .db-recent__row,
  .db-docs__row {
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
  }
  /* Stacked single-column cards: keep the date with the rest of the card body
     instead of orphaning it right-aligned at the far edge (UX-37). The compound
     selector out-specifies dashboard.css's `.db-today__ref { text-align:right }`,
     which loads after mobile.css (page CSS is appended via head_extra). */
  .db-today__row .db-today__ref { text-align: left; }
  .db-ctas { grid-template-columns: 1fr 1fr; }

  /* Tables: horizontal scroll on tablet */
  .ol-table-wrap,
  .surface table,
  table.ex-preview,
  .am-table-wrap,
  .cn-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ol-table,
  .ex-preview {
    min-width: 920px;
  }

  /* Mobile responsive repair (MINORs): wrap two flex rows before they overflow in the
     640–1024 landscape gap / on narrow phones. Both only wrap when content can't fit,
     so wider widths are unchanged.
       - .ol-toolbar overran 667px landscape (Export button clipped 76px).
       - .form-card__hd title/subtitle competed on one row below ~360px. */
  .ol-toolbar { flex-wrap: wrap; }
  .form-card__hd { flex-wrap: wrap; }

  /* Drawers slide up from bottom (bottom sheet) on tablet+phone */
  .drawer {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
  }
  .drawer.open { transform: translateY(0); }
  .drawer__hd {
    padding: 18px 18px 14px;
    position: relative;
  }
  .drawer__hd::before {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: var(--enroute-ink-200);
    border-radius: var(--radius-pill);
  }

  /* Make header center area collapse gracefully — convert grid to flex so it wraps */
  .hf-header {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 14px !important;
    min-height: 55px;
    height: auto !important;
    grid-template-columns: none !important;
  }
  .hf-header__title { flex: 0 0 auto; }
  .hf-header__center {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hf-header__controls {
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 6px;
  }
  .hf-search { min-width: 0; max-width: 100%; }

  /* Calendar: hide redundant "Show by" label, keep the toggle */
  body[data-page="calendar"] .hf-header__controls .v4-label {
    display: none;
  }

  /* Main padding reduction */
  .hf-main { padding: 14px; }

  /* Tweaks panel: hide on mobile (desktop-only review tool) */
  #tweaks-root,
  .tweaks-root,
  .tweaks-panel,
  [class*="tweaks-panel"] {
    display: none !important;
  }
}

/* ============================================================
   PHONE (≤640) — compact topbar, FAB, card tables, agenda calendar
   ============================================================ */
@media (max-width: 640px) {

  /* ----- Compact 48px topbar ----- */
  .hf-header {
    height: 48px;
    padding: 0 10px;
    gap: 8px;
    grid-template-columns: auto auto 1fr auto;
  }
  .hf-shell {
    grid-template-rows: 48px 1fr;
  }
  .hf-header__title {
    font-size: 15px;
    letter-spacing: -0.02em;
  }
  /* Hide breadcrumb/search center on phone — title visible in sidebar's pagetitle */
  .hf-header__center { display: none; }

  /* Header right controls: hide non-essential ghost buttons, hide primary (moved to FAB) */
  .hf-header__controls .hf-hlabel { display: none; }
  .hf-header__controls .hf-hbtn:not(.m-keep) {
    /* Will be cloned to FAB by mobile.js; hide originals labelled as such */
    display: none;
  }
  .hf-header__controls .hf-hbtn--ghost.m-keep-ghost {
    display: inline-flex;
    padding: 6px 8px;
    width: 36px; height: 36px;
    justify-content: center;
  }
  .hf-header__controls .hf-hbtn--ghost.m-keep-ghost span,
  .hf-header__controls .hf-hbtn--ghost.m-keep-ghost .hf-hbtn__lbl { display: none; }

  /* FAB on phone (cloned): kept in the layout so it can fade in/out as mobile.js makes
     it scroll-aware (hidden at the top and while the page's own primary action is on
     screen, so it stops covering first-screen and form content). */
  .m-fab {
    display: inline-flex;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .m-fab.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .m-fab-pad { display: block; height: 80px; }

  /* ----- Main padding: tighter ----- */
  .hf-main { padding: 12px 10px; }

  /* ----- Dashboard tighter ----- */
  .db-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .db-kpi { padding: 12px 14px; }
  .db-kpi__num { font-size: 24px; }
  .db-attn { grid-template-columns: 1fr !important; }

  /* ----- Form rows: stack to single column always ----- */
  .form-row--2,
  .form-row--3 {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 18px 16px;
  }
  .form-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-card__actions .btn { width: 100%; justify-content: center; }
  .form-intro__copy h1 { font-size: 22px; }

  /* ----- ctx-card / po-summary become collapsible summary at top ----- */
  .ctx-card.m-collapsible,
  .po-summary.m-collapsible {
    /* Default to collapsed look */
    padding: 12px 14px;
    position: relative;
  }
  .ctx-card.m-collapsible[data-collapsed="true"] > *:not(.ctx-card__id):not(.po-summary__title):not(.ctx-card__toggle):not(.ctx-card__hd):not(.po-summary__hd),
  .po-summary.m-collapsible[data-collapsed="true"] > *:not(.po-summary__title):not(.po-summary__id):not(.ctx-card__toggle):not(.po-summary__hd):not(h2):not(h3) {
    display: none;
  }
  .ctx-card.m-collapsible[data-collapsed="true"] .ctx-card__id,
  .po-summary.m-collapsible[data-collapsed="true"] h2,
  .po-summary.m-collapsible[data-collapsed="true"] h3 { margin-bottom: 0; }
  .ctx-card__toggle {
    display: inline-flex;
    align-items: center; gap: 6px;
    appearance: none; background: transparent; border: 0; cursor: pointer;
    position: absolute;
    top: 12px; right: 14px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--enroute-cobalt-500);
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 1;
  }
  .ctx-card__toggle:hover { background: var(--enroute-ink-100); }
  .ctx-card.m-collapsible[data-collapsed="false"] .ctx-card__toggle svg,
  .po-summary.m-collapsible[data-collapsed="false"] .ctx-card__toggle svg { transform: rotate(180deg); }

  /* ----- Orders list: hide native table, show card list ----- */
  /* order-list-htmx: the mobile cards are now ALWAYS server-rendered (no scraper,
     so no runtime .m-has-cards class), so hide the desktop table unconditionally
     at <=640 — the .m-ol-cards partial is the mobile surface. */
  .ol-table-wrap .ol-table { display: none; }
  /* FP-3: the bulk assign-transporter bar is a desktop ops tool. Once the table
     is rebuilt into cards (no row checkboxes), hide it — graceful omission. */
  .ol-table-wrap.m-has-cards .ol-bulk-bar { display: none; }

  /* ----- Amendment / cancellation queues: same card treatment (buildQueueCardView) ----- */
  .q-tablewrap.m-has-cards .q-table { display: none; }
  .q-tablewrap.m-has-cards {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;        /* no table to scroll once cards are shown */
  }
  .m-q-card__fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .m-q-card__action { color: var(--enroute-cobalt-600); font-weight: 700; white-space: nowrap; }
  .m-ol-card__foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ol-toolbar { flex-wrap: wrap; padding: 8px 4px 12px; gap: 8px; row-gap: 10px; }
  .ol-toolbar > * { flex: 0 1 auto; min-width: 0; }
  .ol-toolbar__count { font-size: 12px; flex-basis: 100%; order: -1; }
  .ol-toolbar .ol-pager { flex-basis: 100%; order: 99; justify-content: space-between; }
  .ol-toolbar .ol-filter-chip { font-size: 12px; }
  /* Hide Columns/Filters/Export overflow actions to keep toolbar slim — they're rarely used on phone */
  .ol-toolbar .ol-tb-action { display: none; }

  .m-ol-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }
  .m-ol-card {
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    padding: 14px 14px 12px;
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border-1);
    display: flex; flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: var(--fg-1);
    position: relative;   /* bulk-select S2: anchor for the per-card checkbox */
  }
  /* bulk-select S2: per-card checkbox. Hidden until selection mode; in mode it
     shifts the card content right so it does not overlap the order id. The
     label is a 44px tap target. */
  .m-ol-card__sel { display: none; }
  body.is-selecting .m-ol-card { padding-left: 50px; }
  body.is-selecting .m-ol-card__sel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 4px;
    top: 8px;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  body.is-selecting .m-ol-card__sel .ol-rowcb {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--brand);
  }
  /* The charcoal selection bar spans the mobile card list too (it is rendered
     above .ol-table-wrap, so it already sits above the cards). Give it a bit of
     side margin to line up with the card gutter. */
  .ol-selbar { margin: 8px; }
  .m-ol-card__hd {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  .m-ol-card__idgrp {
    display: flex; align-items: baseline; gap: 7px;
    min-width: 0;
  }
  .m-ol-card__id {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-1);
    flex: 0 0 auto;
  }
  /* T-054: customer reference, muted, beside the order id on the mobile card. */
  .m-ol-card__cref {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .m-ol-card__route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    line-height: 1.3;
    min-width: 0;
  }
  .m-ol-card__route-from,
  .m-ol-card__route-to {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 0;
  }
  .m-ol-card__route-arrow {
    flex: none;
    color: var(--fg-3);
    font-weight: 400;
  }
  .m-ol-card__meta {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--fg-3);
    font-weight: 500;
  }
  .m-ol-card__meta > span[aria-hidden="true"] {
    color: var(--enroute-ink-200);
  }
  /* order-list-htmx: the server card emits a LEADING "·" separator before EVERY
     meta item (simpler than the scraper's join); hide the first so the row never
     opens with a stray dot. */
  .m-ol-card__meta > span[aria-hidden="true"]:first-child { display: none; }
  .m-ol-card__meta b { color: var(--fg-2); font-weight: 600; }
  .m-ol-card__foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border-1);
    font-size: 11.5px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
  }
  /* V0.11 transporter card: a labelled detail grid for the date/ETA sublines
     (Loading date, Delivery date, ETA) that the route line can't carry. Each
     .m-ol-card__kv is a [label, value] column; .m-ol-card__k is the small
     uppercase eyebrow, matching the table-header label treatment. */
  .m-ol-card__detail {
    display: flex; flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border-1);
    font-size: 12px;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
  }
  .m-ol-card__kv {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .m-ol-card__k {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
  }

  /* ----- Order detail ----- */
  .od-head { padding: 16px 16px 14px; }
  .od-head__title { font-size: 22px; }
  .od-head__title .num { font-size: 18px; }
  .od-head__sub { font-size: 11.5px; gap: 8px; }
  /* Timeline: hide labels on phone, keep dots+line */
  .od-tl-step__lbl { display: none; }
  .od-tl-step__num { font-size: 10px; }

  /* Status bottom-bar: primary action + overflow */
  .m-action-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-paper);
    border-top: 1px solid var(--border-1);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    gap: 8px;
    align-items: center;
    box-shadow: 0 -4px 12px rgba(10,13,11,0.04);
  }
  .m-action-bar.is-active { display: flex; }
  /* Spacer so the fixed bar never covers the last detail row (mirrors .m-fab-pad).
     Bar height ≈ 10px + 44px primary + 10px padding = 64px, plus the safe-area inset. */
  .m-action-bar-pad { display: block; height: calc(64px + env(safe-area-inset-bottom)); }
  .m-action-bar .btn { flex: 1; }
  .m-action-bar .btn--primary { min-height: 44px; }
  .m-action-bar__more {
    appearance: none; border: 0;
    background: var(--enroute-ink-100);
    color: var(--enroute-ink-900);
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer;
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .m-action-bar__more:hover { background: var(--enroute-ink-200); }

  /* Hide desktop action rail on phone, show m-action-bar instead */
  .od-rail { display: none !important; }

  /* ----- Calendar: hide month grid, show agenda ----- */
  .hf-cal__weekdays,
  .hf-cal__grid {
    display: none !important;
  }
  .hf-cal {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .m-cal-agenda { display: block; }

  /* Hide the originals INSIDE the topbar (not the cloned ones in the sub-bar) */
  body[data-page="calendar"] .hf-header > .hf-header__center,
  body[data-page="calendar"] .hf-header > .hf-header__controls {
    display: none !important;
  }

  /* Sub-bar with month nav + Show-by toggle, visible only on phone */
  .m-cal-subbar { display: flex; }

  /* ----- Place order: stack split panes ----- */
  .po-split,
  .po-grid { grid-template-columns: 1fr; }

  /* ----- Export ----- */
  .ex-filters { padding: 12px; }

  /* ----- Notification prefs table -----
     Card layout moved up to the ≤1024px block so landscape phones get it too
     (mobile responsive repair). */

  /* ----- Drawer adjustments ----- */
  .drawer { height: 85vh; }
  .drawer__body { padding: 14px; }
  .drawer__ft { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }

  /* ----- Buttons: tap targets ----- */
  /* controller-role mobile pass: raised 40 → 44 to meet the WCAG/V05 44px
     tap-target floor (controllers are phone-first; the e2e suite enforces it). */
  .btn { min-height: 44px; }
  .btn--lg { min-height: 48px; }

  /* Hide table-only columns marked with .m-hide-mobile */
  .m-hide-mobile { display: none !important; }

  /* Generic mobile-only blocks (e.g., m-summary cards) */
  .m-mobile-only { display: block; }
}

/* ============================================================
   AGENDA VIEW — used on phone for calendar
   ============================================================ */
.m-cal-agenda {
  display: none;
  background: transparent;
  padding: 0;
}
.m-cal-agenda__hd {
  /* Hide the agenda's own month header — sub-bar above already shows it */
  display: none;
}
.m-cal-agenda__day {
  background: var(--bg-paper);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin: 0 0 8px;
  box-shadow: inset 0 0 0 1px var(--border-1);
}
.m-cal-agenda__day-hd {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.m-cal-agenda__day-num {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.m-cal-agenda__day-num.is-today {
  background: var(--enroute-ink-900);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.m-cal-agenda__day-name {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.m-cal-agenda__day-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--enroute-ink-100);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 18px;
  text-align: center;
  flex: none;
}
.m-cal-agenda__day-empty {
  font-size: 12.5px;
  color: var(--fg-4);
  font-style: italic;
}
.m-cal-agenda__chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  /* F115: agenda chips are the primary tap (and long-press) target to open a
     load on the phone calendar; they measured 32px. Raise to the 44px touch
     minimum (ADR 0005 / UX-24). */
  min-height: 44px;
  box-sizing: border-box;
  border-top: 1px solid var(--border-1);
  text-decoration: none;
  color: var(--fg-1);
}
.m-cal-agenda__chip:first-of-type { border-top: 0; padding-top: 4px; }
.m-cal-agenda__chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--enroute-ink-400);
  flex: none;
}
.m-cal-agenda__chip-dot.s-pending,
.m-cal-agenda__chip-dot.s-accepted { background: var(--enroute-amber-500); }
.m-cal-agenda__chip-dot.s-loading,
.m-cal-agenda__chip-dot.s-transit  { background: var(--enroute-green-500); }
.m-cal-agenda__chip-dot.s-cancelled { background: var(--enroute-rose-500); }
.m-cal-agenda__chip-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
  flex: none;
}
/* UX-18: customer reference carried from the desktop chip (.hf-chip__ref). */
.m-cal-agenda__chip-ref {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  flex: none;
  white-space: nowrap;
}
/* emergency badge (#31 SP5): the urgent marker carried into the mobile agenda
   from the desktop chip's .hf-chip__urgent sub-element. Dedicated rose marker,
   never an s-* status class (the dot already carries lifecycle). */
.m-cal-agenda__chip-urgent {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--emergency-bg);
  color: var(--emergency-fg);
  flex: none;
  white-space: nowrap;
}
.m-cal-agenda__chip-route {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-cal-agenda__chip-time {
  font-size: 11.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  flex: none;
  white-space: nowrap;
}
/* UX-17: cancelled agenda rows are muted + struck so they don't read as live. */
.m-cal-agenda__chip--cancelled { opacity: 0.7; }
.m-cal-agenda__chip--cancelled .m-cal-agenda__chip-id {
  text-decoration: line-through;
  color: var(--fg-3);
}
.m-cal-agenda__chip--cancelled .m-cal-agenda__chip-route { color: var(--fg-3); }
.m-cal-agenda__chip--cancelled .m-cal-agenda__chip-ref { color: var(--fg-4); }

/* ============================================================
   CALENDAR SUB-BAR — month nav + show-by toggle below topbar (phone only)
   ============================================================ */
.m-cal-subbar {
  display: none;
  flex-wrap: wrap;          /* month-nav + toggle wrap to two rows on narrow phones */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  row-gap: 8px;
  padding: 8px 12px;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--border-1);
  position: sticky;
  top: 48px;
  z-index: 10;
}
.m-cal-subbar__nav {
  display: flex; align-items: center; gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.m-cal-subbar__nav .hf-header__center,
.m-cal-subbar__nav .mc-min {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: var(--fg-1) !important;
}
.m-cal-subbar__nav .mc-icon {
  appearance: none; border: 0;
  background: transparent;
  color: var(--fg-2) !important;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}
.m-cal-subbar__nav .mc-icon:hover { background: var(--enroute-ink-100); color: var(--fg-1) !important; }
.m-cal-subbar__nav .mc-icon svg { width: 14px; height: 14px; }
.m-cal-subbar__nav .mc-month {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg-1) !important;
  white-space: nowrap;
  padding: 0 4px;
}
.m-cal-subbar__nav .mc-month .y {
  color: var(--fg-3) !important;
  font-weight: 500;
  margin-left: 4px;
}
.m-cal-subbar__nav .mc-today {
  appearance: none; border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px; font-weight: 600;
  color: var(--enroute-cobalt-500) !important;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 4px;
}
.m-cal-subbar__nav .mc-today:hover { background: var(--enroute-cobalt-100); color: var(--enroute-cobalt-500) !important; }

.m-cal-subbar__ctrl {
  display: flex; align-items: center;
  flex: none;
}
.m-cal-subbar__ctrl .hf-header__controls {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.m-cal-subbar__ctrl .v4-label { display: none; }
.m-cal-subbar__ctrl .odt { transform: scale(0.92); transform-origin: right center; }
/* The toggle is cloned out of the dark page header (with its .hf-header__controls
   wrapper) onto this white sub-bar, so its dark-header styling — transparent-white
   track, white inset borders and near-white inactive text — renders "Upliftment"
   invisibly. Restyle for a LIGHT background: visible track + dark inactive-option
   text, dropping the white insets. The green active pill stays as-is. */
.m-cal-subbar__ctrl .hf-header__controls .odt {
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.m-cal-subbar__ctrl .hf-header__controls .odt__thumb { box-shadow: none; }
/* Stream C (Feature 3): the Filters trigger (.hf-hbtn--ghost) is cloned out of
   the dark page header the same way the basis toggle is, above — its white
   text/near-white fill is invisible on this light sub-bar. Same treatment. */
.m-cal-subbar__ctrl .hf-header__controls .hf-hbtn--ghost {
  background: var(--bg-sunken);
  color: var(--fg-2);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.m-cal-subbar__ctrl .hf-header__controls .hf-hbtn--ghost:hover {
  background: var(--enroute-ink-100);
  color: var(--fg-1);
}
.m-cal-subbar__ctrl .odt__option {
  color: var(--fg-2);
  /* F114: the basis toggle is the ONLY way to switch date basis on a phone and
     measured ~25px. Make each option a >=44px touch target. The .odt is scaled
     to 0.92 on the sub-bar, so 48px box-height renders ~44px. */
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m-cal-subbar__ctrl .odt__option:not([aria-current="true"]):hover { color: var(--fg-1); }

/* ============================================================
   Calendar agenda + sub-bar: REVEAL on phone (source-order fix)
   ------------------------------------------------------------
   .m-cal-agenda / .m-cal-subbar default to display:none (desktop). The reveal
   rules inside the ≤640px block far above are overridden by these component base
   styles, which follow them in source order — and an @media query adds no
   specificity, so the later display:none won and the agenda never appeared (page 05
   rendered blank on phones even though mobile.js builds the markup). Re-assert the
   phone reveal here, AFTER the base styles, so it wins.
   ============================================================ */
@media (max-width: 640px) {
  .m-cal-agenda { display: block; }
  .m-cal-subbar { display: flex; }
}