/* ==========================================================================
   PT Medical V2 — Chrome Theme (Navy)
   Commercial premium look for sidebar/topbar/subnav/bnav surfaces.
   Per-module accent set via body[data-module="..."].
   Content area kept light. Print reverts to white.
   Logic untouched — pure CSS override, additive only.
   ========================================================================== */

/* ===== ROOT TOKENS ===== */
body[data-module] {
  /* Chrome surfaces (navy palette) */
  --chrome-bg-1:   #0a1929;
  --chrome-bg-2:   #112a44;
  --chrome-bg-3:   #1a3a5c;
  --chrome-bg-4:   #244a6f;
  --chrome-glass:  rgba(17,42,68,0.82);
  --chrome-text:   #f8fafc;
  --chrome-text-2: #cbd5e1;
  --chrome-text-3: #94a3b8;
  --chrome-line:   rgba(255,255,255,0.08);
  --chrome-line-2: rgba(255,255,255,0.14);
  --shadow-chrome: 0 8px 32px rgba(10,25,41,0.45);

  /* Fallback accent (overridden per-module below) */
  --accent:       #38bdf8;
  --accent-ink:   #0c4a6e;
  --accent-soft:  rgba(56,189,248,0.16);
  --accent-glow:  rgba(56,189,248,0.40);
}

/* ===== PER-MODULE ACCENT (brightened for navy bg + bumped soft opacity to 0.22) ===== */
body[data-module="location"]  { --accent:#fde047; --accent-ink:#422006; --accent-soft:rgba(253,224,71,0.22);  --accent-glow:rgba(253,224,71,0.45); }
body[data-module="transport"] { --accent:#7dd3fc; --accent-ink:#0c4a6e; --accent-soft:rgba(125,211,252,0.22); --accent-glow:rgba(125,211,252,0.45); }
body[data-module="firstaid"]  { --accent:#34d399; --accent-ink:#022c22; --accent-soft:rgba(52,211,153,0.22);  --accent-glow:rgba(52,211,153,0.45); }
body[data-module="gps"]       { --accent:#fda4af; --accent-ink:#881337; --accent-soft:rgba(253,164,175,0.22); --accent-glow:rgba(253,164,175,0.45); }
body[data-module="fleet"]     { --accent:#93c5fd; --accent-ink:#1e3a8a; --accent-soft:rgba(147,197,253,0.22); --accent-glow:rgba(147,197,253,0.45); }
body[data-module="monitor"]   { --accent:#c4b5fd; --accent-ink:#3b0764; --accent-soft:rgba(196,181,253,0.22); --accent-glow:rgba(196,181,253,0.45); }
body[data-module="admin"]     { --accent:#fdba74; --accent-ink:#7c2d12; --accent-soft:rgba(253,186,116,0.22); --accent-glow:rgba(253,186,116,0.45); }

/* ===== RAIL (sidebar — desktop + mobile drawer) — covers .v2-rail AND admin's .v2-modrail ===== */
body[data-module] .v2-rail,
body[data-module="admin"] .v2-modrail {
  background: linear-gradient(180deg, var(--chrome-bg-1) 0%, var(--chrome-bg-2) 100%) !important;
  border-right: 1px solid var(--chrome-line) !important;
  box-shadow: 4px 0 24px rgba(10,25,41,0.18) !important;
}
body[data-module] .v2-rail a,
body[data-module="admin"] .v2-modrail a {
  color: var(--chrome-text-2) !important;
  transition: background 150ms ease-out, color 150ms ease-out !important;
  border-radius: 10px !important;
}
body[data-module] .v2-rail a:hover,
body[data-module="admin"] .v2-modrail a:hover {
  background: var(--chrome-bg-4) !important;
  color: var(--chrome-text) !important;
}
body[data-module] .v2-rail a.active,
body[data-module="admin"] .v2-modrail a.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
body[data-module] .v2-rail .v2-divider,
body[data-module="admin"] .v2-modrail .v2-divider {
  background: var(--chrome-line) !important;
}
/* Logo — no frame, soft white halo (overrides shared.js inline bg/padding).
   Covers BOTH .v2-rail (most modules) AND .v2-modrail (admin). */
body[data-module] .v2-rail .v2-logo,
body[data-module] .v2-modrail .v2-logo {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
body[data-module] .v2-rail .v2-logo img,
body[data-module] .v2-modrail .v2-logo img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.50))
    drop-shadow(0 0 10px rgba(255,255,255,0.30))
    drop-shadow(0 2px 6px rgba(0,0,0,0.40));
}

/* ===== SUBNAV (desktop) — elevated navy ===== */
body[data-module] .v2-subnav {
  background: var(--chrome-bg-3) !important;
  border-right: 1px solid var(--chrome-line) !important;
  color: var(--chrome-text-2) !important;
}
body[data-module] .v2-subnav-header {
  background: var(--chrome-bg-3) !important;
  /* No border-bottom — would create double-line with section border-top below it.
     Section padding-top provides enough visual separation. */
  border-bottom: 0 !important;
}
body[data-module] .v2-subnav-header .title {
  color: var(--chrome-text) !important;
}
body[data-module] .v2-subnav-header .title .bi {
  color: var(--accent) !important;
}
body[data-module] .v2-subnav-header .sub {
  color: var(--chrome-text-3) !important;
}
body[data-module] .v2-subnav-section {
  color: var(--chrome-text-3) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px !important;
  /* No border-top — was creating visible white lines on navy.
     Separation comes from margin-top + padding-top + small uppercase title. */
  border-top: 0 !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
}
body[data-module] .v2-subnav a {
  color: var(--chrome-text-2) !important;
  /* Nuke inline `border-bottom:1px solid #f1f5f9` from Transport/Location/GPS/Monitor —
     creates visible white lines on navy. Firstaid never had this rule (= reference). */
  border-bottom: 0 !important;
  transition: background 150ms, color 150ms !important;
}
body[data-module] .v2-subnav a:hover {
  background: var(--chrome-bg-4) !important;
  color: var(--chrome-text) !important;
}
body[data-module] .v2-subnav a.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  position: relative;
}
body[data-module] .v2-subnav a.active::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 4px; background: var(--accent); border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px var(--accent-glow);
}
body[data-module] .v2-subnav a .bi { opacity: 0.85 !important; }
body[data-module] .v2-subnav a.active .bi { opacity: 1 !important; }
/* Inline-styled wrapper inside subnav (e.g., "+ เพิ่ม..." button block) */
body[data-module] .v2-subnav > div[style*="border-bottom"] {
  background: var(--chrome-bg-3) !important;
  /* No border-bottom — was the "1 white line" user saw under Transport CTA. */
  border-bottom: 0 !important;
}

/* ===== TRANSPORT subnav case-info card =====
   Inline styles in transport/index.html lines 1208-1212 set background:#f1f5f9
   on the wrapper (light gray, creates a seam on navy chrome) and dark colors
   on #v2-case-id / #v2-case-pt (unreadable on navy). Override here so the card
   blends with the navy subnav and the text uses chrome tokens.
   Selector targets specifically the case-info wrapper that has inline background. */
body[data-module="transport"] #v2-subnav-case > div[style*="background"] {
  background: var(--chrome-bg-3) !important;
}
body[data-module="transport"] #v2-case-id {
  color: var(--chrome-text) !important;
}
body[data-module="transport"] #v2-case-pt {
  color: var(--chrome-text-3) !important;
}
body[data-module="transport"] #v2-subnav-case a[href*="javascript"] {
  color: var(--accent) !important;
}

/* ===== FIRSTAID subnav event context (.back-link + .event-ctx) =====
   firstaid/index.html lines 198-216 define .back-link with bg:#f1f5f9 + dark text
   and .event-ctx .name/.meta with slate-900/slate-500 — all unreadable on navy chrome.
   Override here so the back link blends with the navy subnav and the event name/meta
   use chrome text tokens. Verified via Grep: these selectors are firstaid-only. */
/* Back-link uses chrome-text-2 (slate-300) instead of --accent (emerald-400)
   so it reads as navigation, not decoration. firstaid emerald has higher
   saturation than other modules' pastels and was overpowering on the nav. */
body[data-module="firstaid"] .v2-subnav .back-link {
  background: var(--chrome-bg-3) !important;
  color: var(--chrome-text-2) !important;
  border-bottom: 1px solid var(--chrome-line) !important;
}
body[data-module="firstaid"] .v2-subnav .back-link:hover {
  background: var(--chrome-bg-4) !important;
}
body[data-module="firstaid"] .v2-subnav .event-ctx {
  border-bottom: 1px solid var(--chrome-line) !important;
}
body[data-module="firstaid"] .v2-subnav .event-ctx .name {
  color: var(--chrome-text) !important;
}
body[data-module="firstaid"] .v2-subnav .event-ctx .meta {
  color: var(--chrome-text-3) !important;
}

/* Dropdowns inside subnav */
body[data-module] .v2-subnav select.form-select {
  background-color: var(--chrome-bg-4) !important;
  color: var(--chrome-text) !important;
  border: 1px solid var(--chrome-line-2) !important;
}
body[data-module] .v2-subnav select.form-select option {
  background: var(--chrome-bg-3); color: var(--chrome-text);
}

/* ===== TOPBAR — glass navy (catches per-module sticky header classes) ===== */
body[data-module] .view-section > .d-flex.justify-content-between.align-items-end,
body[data-module] .v2-topbar,
body[data-module] .topbar-sticky,
body[data-module] .v2-colheader,
body[data-module] .v2-gps-colheader,
body[data-module] .v2-form-topbar,
body[data-module] .fa-colhead,
body[data-module] .monitor-page-header,
body[data-module="admin"] .admin-topbar {
  background: var(--chrome-glass) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--chrome-line) !important;
  color: var(--chrome-text) !important;
}
body[data-module] .v2-topbar h2, body[data-module] .v2-topbar h3, body[data-module] .v2-topbar h4,
body[data-module] .v2-colheader h2, body[data-module] .v2-colheader h3, body[data-module] .v2-colheader h4,
body[data-module] .v2-colheader .title,
body[data-module] .v2-gps-colheader .title,
body[data-module] .v2-form-topbar h2, body[data-module] .v2-form-topbar h3,
body[data-module] .fa-colhead .title,
body[data-module] .fa-colhead h2, body[data-module] .fa-colhead h3,
body[data-module] .monitor-page-header h2, body[data-module] .monitor-page-header h3, body[data-module] .monitor-page-header h4,
body[data-module] .view-section > .d-flex.justify-content-between.align-items-end h2,
body[data-module] .view-section > .d-flex.justify-content-between.align-items-end h3,
body[data-module] .view-section > .d-flex.justify-content-between.align-items-end h4,
body[data-module="admin"] .admin-topbar .title {
  color: var(--chrome-text) !important;
}
body[data-module] .v2-colheader .sub,
body[data-module] .v2-gps-colheader .sub,
body[data-module] .fa-colhead .sub,
body[data-module] .monitor-page-header .sub,
body[data-module] .v2-topbar .text-muted,
body[data-module] .v2-topbar small,
body[data-module] .view-section > .d-flex.justify-content-between.align-items-end .text-muted,
body[data-module] .view-section > .d-flex.justify-content-between.align-items-end small {
  color: var(--chrome-text-3) !important;
}
/* Icons in topbar titles → accent color */
body[data-module] .v2-colheader .title .bi,
body[data-module] .v2-gps-colheader .title .bi,
body[data-module] .fa-colhead .title .bi,
body[data-module] .monitor-page-header h3 .bi {
  color: var(--accent) !important;
}

/* ===== RIGHT COLUMN — kept WHITE per user preference (only push down to clear fixed topbar) ===== */
body[data-module] .fa-dash-right,
body[data-module] .fa-evt-right,
body[data-module] .tr-dash-right {
  top: 64px !important;
}
/* (navy right-col block removed — right col stays default white) */
body[data-module] .v2-right-col,
body[data-module] .right-col {
  /* no-op placeholder for future use */
}
/* right col text/badge/row navy overrides removed — defaults to white panel */
/* ===== UNIVERSAL FIXED TOPBAR (desktop ≥992px) — spans full viewport over right col ===== */
/* All per-module topbar/colheader classes get position:fixed, full width minus rail+subnav.
   Right column kept white (overlapped under topbar via z-index). */
/* ===== GPS / FLEET layout overrides REMOVED — module's native sticky layout works.
   chrome.css now only handles COLORS (bg/text/border). Layout stays untouched. */

/* ===== MONITOR — subnav has .v2-mobile-rail-strip (white gap) + ensure subnav matches topbar ===== */
body[data-module="monitor"] .v2-mobile-rail-strip {
  background: rgba(0,0,0,0.20) !important;
  border-bottom: 1px solid var(--chrome-line) !important;
}
body[data-module="monitor"] .v2-mobile-rail-strip a {
  color: var(--chrome-text-3) !important;
}
body[data-module="monitor"] .v2-mobile-rail-strip a.active {
  color: var(--accent) !important;
}

/* ===== MOBILE per-module fixes ===== */
@media (max-width: 991px) {
  /* Transport list view header — clear hamburger (40px @ left:8 = ends 48). 64px = 16px gap.
     Cover both align variants (matches Location pattern). Specificity bumped via #dashboard-view#dashboard-view
     to win over Transport's inline 60px rule. */
  body[data-module="transport"] #dashboard-view#dashboard-view > .d-flex.justify-content-between.align-items-end,
  body[data-module="transport"] #dashboard-view#dashboard-view > .d-flex.justify-content-between.align-items-center {
    padding-left: 64px !important;
  }
  /* Transport bnav notch — 5 cells with 80px pocket for FAB */
  body[data-module="transport"] .pt-bnav.pt-bnav-notch {
    grid-template-columns: 1fr 1fr 80px 1fr 1fr !important;
  }
  body[data-module] .pt-bnav .pt-bnav-pocket,
  body[data-module] .pt-bnav .fa-bnav-pocket {
    display: block;
    pointer-events: none;
    visibility: hidden;
  }

  /* ===== FAB z-index — must be ABOVE bnav (1080) so bottom half of FAB shows over pocket ===== */
  body[data-module] #loc-fab,
  body[data-module] .fab-btn,
  body[data-module] #fa-list-fab,
  body[data-module] [id$="-fab"]:not(.no-chrome) {
    z-index: 1090 !important;
  }
}

/* ===== TABLET PORTRAIT (992-1024px) — Transport JS still shows BNAV here, but old @<=991 missed it ===== */
@media (min-width: 992px) and (max-width: 1024px) and (orientation: portrait) {
  /* Transport bnav notch — 5 cells with 80px pocket for FAB */
  body[data-module="transport"] .pt-bnav.pt-bnav-notch {
    grid-template-columns: 1fr 1fr 80px 1fr 1fr !important;
  }
  body[data-module] .pt-bnav .pt-bnav-pocket,
  body[data-module] .pt-bnav .fa-bnav-pocket {
    display: block;
    pointer-events: none;
    visibility: hidden;
  }
  body[data-module] #loc-fab,
  body[data-module] .fab-btn,
  body[data-module] #fa-list-fab,
  body[data-module] [id$="-fab"]:not(.no-chrome) {
    z-index: 1090 !important;
  }
}

/* ===== ADMIN MOBILE — sidebar drawer (when open) should also be navy ===== */
@media (max-width: 991px) {
  body[data-module="admin"] .admin-sidebar {
    /* Base navy applied via earlier rule. Ensure drawer state preserves it */
    background: linear-gradient(180deg, var(--chrome-bg-2) 0%, var(--chrome-bg-3) 100%) !important;
    color: var(--chrome-text-2) !important;
  }
}

/* ===== ADMIN TOPBAR BUTTONS — burger + topbar-back need contrast on navy bg ===== */
body[data-module="admin"] .admin-topbar .burger,
body[data-module="admin"] .admin-topbar .topbar-back {
  background: var(--chrome-bg-4) !important;
  border: 1px solid var(--chrome-line-2) !important;
  color: var(--chrome-text) !important;
}
body[data-module="admin"] .admin-topbar .burger:hover,
body[data-module="admin"] .admin-topbar .topbar-back:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
body[data-module="admin"] .admin-topbar .title {
  color: var(--chrome-text) !important;
}

/* ===== ADMIN SIDEBAR — admin.html uses .admin-sidebar (NOT .v2-rail/.v2-subnav) ===== */
body[data-module="admin"] .admin-sidebar {
  background: linear-gradient(180deg, var(--chrome-bg-2) 0%, var(--chrome-bg-3) 100%) !important;
  border-right: 1px solid var(--chrome-line) !important;
  color: var(--chrome-text-2) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-brand {
  border-bottom: 1px solid var(--chrome-line) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-brand .brand-name {
  color: var(--chrome-text) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-brand .brand-name .bi {
  color: var(--accent) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-brand .brand-sub,
body[data-module="admin"] .admin-sidebar .sidebar-brand #sb-admin-name {
  color: var(--chrome-text-3) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-group-title,
body[data-module="admin"] .admin-sidebar .sidebar-section {
  color: var(--chrome-text-3) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px !important;
  border-top: 1px solid var(--chrome-line-2) !important;
  margin-top: 8px !important;
  padding: 14px 14px 4px !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-group:first-of-type .sidebar-group-title {
  border-top: none !important;
  margin-top: 0 !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-modswitch {
  background: rgba(0,0,0,0.20) !important;
  border-bottom: 1px solid var(--chrome-line) !important;
  padding: 14px 12px 10px !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-modswitch a {
  background: var(--chrome-bg-4) !important;
  border: 1px solid var(--chrome-line-2) !important;
  color: var(--chrome-text) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-modswitch a:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-modswitch a .bi {
  color: inherit !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-back {
  color: var(--chrome-text-2) !important;
  background: transparent !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-back:hover {
  color: var(--accent) !important;
  background: var(--chrome-bg-4) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-item {
  color: var(--chrome-text-2) !important;
  transition: background 150ms, color 150ms !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-item:hover {
  background: var(--chrome-bg-4) !important;
  color: var(--chrome-text) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-item.active::before {
  background: var(--accent) !important;
  box-shadow: 0 0 8px var(--accent-glow) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-footer {
  background: transparent !important;     /* was var(--asurface) = #fff → white block */
  margin-top: 0 !important;                /* was 20px → unnecessary gap */
  border-top: 1px solid var(--chrome-line-2) !important;
}
body[data-module="admin"] .admin-sidebar .sidebar-footer * {
  color: var(--chrome-text-3) !important;
}

/* ===== MONITOR — match topbar to subnav + wide pane (all 3 cols same navy) ===== */
body[data-module="monitor"] .monitor-page-header {
  background: var(--chrome-bg-3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== MONITOR wide GPS pane (when wallboard mode active) ===== */
body[data-module="monitor"] #monitor-wide-gps-pane .mwgp-head {
  background: var(--chrome-bg-3) !important;
  color: var(--chrome-text) !important;
  border-bottom: 1px solid var(--chrome-line) !important;
}
body[data-module="monitor"] #monitor-wide-gps-pane .mwgp-head h3 {
  color: var(--chrome-text) !important;
}
body[data-module="monitor"] #monitor-wide-gps-pane .mwgp-head .bi {
  color: var(--accent) !important;
}
/* ===== HEADER-OVER-RIGHTCOL (desktop ≥992px) =====
   Per agent review: GPS structure is wrap > [main(>header,search,map), rightcol]. Header is INSIDE main, can't extend over rightcol naturally.
   Fix: pull header out via position:absolute on wrap, spanning full wrap width. Both main + rightcol get padding-top to clear.
   Fleet: rightcol position:fixed top:0 → just push top down to clear header. */
@media (min-width: 992px) {
  /* === GPS structural fix === */
  body[data-module="gps"] .v2-gps-wrap {
    position: relative;
  }
  body[data-module="gps"] .v2-gps-colheader {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    z-index: 30 !important;
    margin: 0 !important;
  }
  body[data-module="gps"] .v2-gps-main {
    padding-top: 56px !important;
  }
  body[data-module="gps"] .v2-gps-rightcol {
    padding-top: 56px !important;
  }
  /* Map container inside main: shrink remaining height accordingly (already flex:1 inside main column) */

  /* === Fleet structural fix ===
     Iteration history (2026-05-25):
     - PR #23: padding-top 64 → 96 (gave breathing room to main content,
       but also pushed rightcol down 96px since .fleet-rc had same value).
     - PR #24: tried right: 280px so rightcol could use top:0 — but then
       the navy colhead bar no longer extended over rightcol, leaving
       rightcol "วันนี้" header on white background above the topbar.
       User feedback: "ทับ Topbar, แก้ไม่ตรงจุด".
     Final layout (this commit):
     - Colhead: right: 0 (full viewport width navy bar) — looks unified.
     - Main: padding-top: 96 — 25px breathing room from colhead bottom.
     - Rightcol: top: 71 — sits directly under colhead (no wasted space,
       no overlap, no need for extra breathing room since rightcol has
       its own internal padding/heading "วันนี้"). */
  body[data-module="fleet"] .v2-colheader {
    position: fixed !important;
    top: 0 !important;
    left: 296px !important;  /* rail 56 + subnav 240 */
    right: 0 !important;     /* full width — covers over rightcol area */
    margin: 0 !important;
    z-index: 30 !important;
  }
  body[data-module="fleet"] #app-main-wrapper {
    padding-top: 96px !important;  /* colhead 71 + 25 breathing */
  }
  body[data-module="fleet"] .fleet-rc {
    top: 71px !important;          /* tight under colhead, no waste */
  }

  /* === Transport structural fix === */
  /* Dashboard list view header */
  body[data-module="transport"] #dashboard-view > .d-flex.justify-content-between.align-items-end {
    position: fixed !important;
    top: 0 !important;
    left: 296px !important;  /* rail 56 + subnav 240 */
    right: 0 !important;
    margin: 0 !important;
    z-index: 30 !important;
    padding: 12px 18px !important;
    background: var(--chrome-glass) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
  }
  body[data-module="transport"] #dashboard-view {
    padding-top: 64px !important;
  }
  body[data-module="transport"] .tr-dash-right {
    top: 64px !important;
  }
  /* Form view topbar */
  body[data-module="transport"] .v2-form-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 296px !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 30 !important;
  }
  /* padding-top uses --form-tb-h set by _ptSyncFormPad() in transport/index.html
     so it tracks the actual topbar height (case-id row + Timeline + patient
     banner with Dx/CC). Falls back to 64px if JS hasn't run yet. */
  body[data-module="transport"] #form-view {
    padding-top: var(--form-tb-h, 64px) !important;
  }

  /* === Other modules: just bump topbar z-index defensively === */
  body[data-module="firstaid"] .fa-colhead,
  body[data-module="monitor"]  .monitor-page-header {
    z-index: 30 !important;
  }
}

/* ===== FORM TOPBAR sub-rows =====
   v2-tb-row1 (top header: case-id, action buttons) + v2-tb-timeline (Timeline strip)
   stay transparent so navy chrome shows through.
   v2-tb-row2 (patient banner — name, triage, Dx, CC, allergies, UD) is WHITE with
   dark text so dense medical info stays readable. */
body[data-module] .v2-form-topbar .v2-tb-row1 {
  background: transparent !important;
  border-bottom-color: var(--chrome-line) !important;
  color: var(--chrome-text) !important;
}
body[data-module] .v2-form-topbar .v2-tb-row2,
body[data-module] .v2-form-topbar .patient-banner {
  background: #fff !important;
  color: #0f172a !important;
  /* Per UX 2026-05-19: strip the card chrome so the white pane sits flush —
     no rounded corners, no outline, no drop-shadow, no side margin. */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body[data-module] .v2-form-topbar .v2-tb-row2 *,
body[data-module] .v2-form-topbar .patient-banner * {
  color: inherit;
}
body[data-module] .v2-form-topbar .v2-tb-row1 #display-case-id,
body[data-module] .v2-form-topbar .v2-tb-row1 .case-id-text {
  color: var(--accent) !important;
}
body[data-module] .v2-form-topbar .v2-tb-btn {
  background: var(--chrome-bg-4) !important;
  color: var(--chrome-text) !important;
  border: 1px solid var(--chrome-line-2) !important;
}
body[data-module] .v2-form-topbar .v2-tb-btn:hover {
  background: var(--chrome-bg-3) !important;
  color: var(--accent) !important;
}
/* Timeline strip + Patient banner inside form topbar — both are WHITE panes now,
   so timeline tabs + banner content use dark slate text (readable on white). */
body[data-module] .v2-form-topbar .timeline-tab,
body[data-module] .v2-form-topbar .v2-tb-row2 > * {
  color: #334155 !important;
}
body[data-module] .v2-form-topbar .timeline-tab.active {
  color: var(--accent) !important;
}

/* ===== DASHBOARD VIEW page header (.d-flex...end inside view-section) ===== */
/* margin:0 (was -18px → caused horizontal overflow + scrollbar → bnav pushed up 15px).
   Padding stays for breathing room. */
body[data-module] #dashboard-view > .d-flex.justify-content-between.align-items-end,
body[data-module] .view-section > .d-flex.justify-content-between.align-items-end {
  margin: 0 0 16px !important;
  padding: 12px 18px !important;
}
body[data-module] #dashboard-view .dashboard-header,
body[data-module] #dashboard-view .dashboard-header * {
  color: var(--chrome-text) !important;
}
body[data-module] #dashboard-view .dashboard-header .bi {
  color: var(--accent) !important;
}
body[data-module] #dashboard-view #v2-tr-dash-sub,
body[data-module] #dashboard-view .text-muted {
  color: var(--chrome-text-3) !important;
}

/* ===== BOTTOM NAV (mobile) — SOLID navy, viewport-anchored ===== */
body[data-module] .pt-bnav {
  background: var(--chrome-bg-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--chrome-line-2) !important;
  box-shadow: var(--shadow-chrome) !important;
  z-index: 1080 !important;
  /* Defensive: reset transform/will-change to ensure position:fixed anchors to true viewport */
  transform: none !important;
  will-change: auto !important;
  /* bottom: 0 keeps FAB visible in notch (safe-area already inside bnav padding) */
}
body[data-module] .pt-bnav a {
  color: var(--chrome-text-3) !important;
  transition: color 150ms ease-out !important;
}
body[data-module] .pt-bnav a.active {
  color: var(--accent) !important;
  position: relative;
}
body[data-module] .pt-bnav a.active::after {
  content: ""; position: absolute; top: -2px; left: 30%; right: 30%; height: 3px;
  background: var(--accent); border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* ===== BOTTOM SHEET — navy chrome ===== */
body[data-module] .pt-bsheet {
  background: var(--chrome-bg-3) !important;
  color: var(--chrome-text) !important;
  box-shadow: 0 -8px 32px rgba(10,25,41,0.45) !important;
}
body[data-module] .pt-bsheet-handle { background: var(--chrome-line-2) !important; }
body[data-module] .pt-bsheet-head { border-bottom: 1px solid var(--chrome-line) !important; }
body[data-module] .pt-bsheet-head h4 { color: var(--chrome-text) !important; }
body[data-module] .pt-bsheet-head .pt-bsheet-close {
  background: var(--chrome-bg-4) !important;
  color: var(--chrome-text-2) !important;
}
body[data-module] .pt-bsheet-body { color: var(--chrome-text-2) !important; }

/* ===== FAB — per-module accent (catches #loc-fab, .fab-btn, [id$="-fab"]) ===== */
body[data-module] #loc-fab,
body[data-module] .fab-btn,
body[data-module] #fa-list-fab,
body[data-module] [class*="fab-btn"],
body[data-module] [id$="-fab"]:not(.no-chrome) {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent), #000 18%) 100%) !important;
  color: var(--accent-ink) !important;
  box-shadow:
    0 6px 20px var(--accent-glow),
    0 16px 40px rgba(10,25,41,0.30),
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 0 4px rgba(248,250,252,0.92) !important;
  transition: transform 150ms cubic-bezier(0.16,1,0.3,1), box-shadow 150ms !important;
}
body[data-module] #loc-fab:hover,
body[data-module] .fab-btn:hover,
body[data-module] #fa-list-fab:hover,
body[data-module] [class*="fab-btn"]:hover,
body[data-module] [id$="-fab"]:not(.no-chrome):hover {
  box-shadow:
    0 8px 26px var(--accent-glow),
    0 20px 48px rgba(10,25,41,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 0 4px rgba(248,250,252,0.95) !important;
}
/* Location FAB is positioned with translateX(-50%) — preserve transform on hover */
body[data-module="location"] #loc-fab:hover {
  transform: translateX(-50%) scale(1.06) !important;
}
body[data-module="location"] #loc-fab:active {
  transform: translateX(-50%) scale(0.96) !important;
}
body[data-module] .fab-btn:hover {
  transform: scale(1.06) !important;
}
/* Firstaid FAB is centered via translateX(-50%) — preserve it on hover/active */
body[data-module] #fa-list-fab:hover {
  transform: translateX(-50%) scale(1.06) !important;
}
body[data-module] #fa-list-fab:active {
  transform: translateX(-50%) scale(0.96) !important;
}
body[data-module] .fab-btn:active {
  transform: scale(0.96) !important;
}

/* ===== MOBILE NAV TOGGLE (hamburger) ===== */
body[data-module] .v2-mobile-nav-toggle {
  background: var(--chrome-glass, var(--chrome-bg-3)) !important;
  color: var(--chrome-text) !important;
  border: 1px solid var(--chrome-line-2) !important;
  box-shadow: 0 2px 8px rgba(10,25,41,0.20) !important;
}

/* ===== PRINT — revert all chrome to white ===== */
@media print {
  body[data-module] .v2-rail,
  body[data-module] .v2-subnav,
  body[data-module] .pt-bnav,
  body[data-module] .pt-bsheet,
  body[data-module] .v2-subnav-header,
  body[data-module] .v2-topbar,
  body[data-module] .topbar-sticky,
  body[data-module] .v2-colheader,
  body[data-module] .v2-gps-colheader,
  body[data-module] .v2-form-topbar,
  body[data-module] .fa-colhead,
  body[data-module] .monitor-page-header,
  body[data-module="admin"] .admin-topbar,
  body[data-module] .fa-dash-right,
  body[data-module] .fa-evt-right,
  body[data-module] .tr-dash-right,
  body[data-module] #monitor-wide-gps-pane,
  body[data-module] .v2-right-col,
  body[data-module] .right-col,
  body[data-module] .v2-form-topbar .v2-tb-row1,
  body[data-module] .v2-form-topbar .v2-tb-row2,
  body[data-module] #dashboard-view > .d-flex.justify-content-between.align-items-end,
  body[data-module] .view-section > .d-flex.justify-content-between.align-items-end {
    background: #fff !important;
    color: #0f172a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-color: #e2e8f0 !important;
  }
  body[data-module] .v2-rail a,
  body[data-module] .v2-subnav a,
  body[data-module] .pt-bnav a {
    color: #475569 !important;
  }
}