/* ==========================================================================
   Roadframe — 2026 Redesign layer
   ---------------------------------------------------------------------
   Loaded AFTER style.css so it overrides selectively. Keeps the "Yard Tag"
   language (asphalt + safety amber, condensed display face) but modernizes
   depth, motion, typography scale, and the dashboard hero.
   ========================================================================== */

:root {
  /* Tells the browser which palette to paint NATIVE UI in -- select popups,
     scrollbars, spinners, date pickers. Without it the used scheme is
     "light" whatever the OS prefers, which is why an open <select> stayed
     white in dark mode: the options themselves are transparent, so the popup
     the browser painted underneath them was the whole problem. */
  color-scheme: light;

  --ink:        #0F1418;
  --ink-2:      #1B2229;
  --ink-soft:   #56606B;
  --paper:      #F5F6F5;
  --panel:      #FFFFFF;
  --line:       #E1E5E8;
  --line-soft:  #EDF0F1;

  --amber:      #E39311;
  --amber-2:    #F0A835;
  --amber-deep: #A96B08;
  --amber-tint: #FCEBCB;
  --amber-glow: rgba(227, 147, 17, .28);
  /* Text sitting ON an amber surface. Deliberately NOT redefined under
     [data-theme="dark"], and that is the entire point: the amber is the same
     colour in both themes, so the text on it has to be too. Pairing it with
     --ink, which does flip, put every primary button at 2.19:1 in dark mode
     -- below even the 3:1 floor for large text. Pinned here it is 7.45:1 at
     rest and 9.14:1 on hover, in both themes. */
  --on-amber:   #0F1418;

  --route:      #1F5A82;
  --route-deep: #123D5B;
  --route-tint: #E5EEF5;

  --go:         #248E51;
  --go-tint:    #DFF3E7;
  --stop:       #C2382A;
  --stop-tint:  #FBE3DF;

  --radius:     8px;
  --radius-lg:  14px;
  --shadow-sm:  0 1px 2px rgba(15, 20, 24, .06), 0 1px 3px rgba(15, 20, 24, .04);
  --shadow-md:  0 6px 20px rgba(15, 20, 24, .09), 0 2px 6px rgba(15, 20, 24, .05);
  --shadow-lg:  0 20px 48px -12px rgba(15, 20, 24, .22), 0 6px 16px rgba(15, 20, 24, .08);
  --shadow-glow: 0 0 0 3px var(--amber-glow);
}

/* ---- Global type & background ---------------------------------------- */
body {
  background:
    radial-gradient(ellipse 800px 400px at 90% -10%, rgba(227,147,17,.06), transparent 60%),
    radial-gradient(ellipse 700px 380px at -10% 5%, rgba(31,90,130,.05), transparent 60%),
    var(--paper);
  color: var(--ink);
  font-size: .94rem;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: .005em; }
.h3 { letter-spacing: .06em; }

a { text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--amber-tint); color: var(--ink); }

/* ---- Navbar - sticky, glassy, refined active state ------------------- */
.navbar {
  background: linear-gradient(180deg, #14191E 0%, #0F1418 100%) !important;
  border-bottom: 0;
  position: sticky;
  top: 0;
  padding-top: .5rem;
  padding-bottom: .5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.4);
}
.navbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--amber) 15%,
    var(--amber-2) 45%,
    var(--amber) 75%,
    transparent 100%);
  opacity: .9;
}

.navbar-brand {
  font-size: 1.4rem;
  color: #fff !important;
  gap: .55rem;
  min-width: 0;
  flex-shrink: 1;
}
.navbar-brand-word { flex: 0 0 auto; }
.navbar-brand-divider {
  flex: 0 0 auto;
  color: rgba(255,255,255,.38);
  font-family: var(--font-body);
  font-weight: 400;
}
.navbar-brand-organization {
  min-width: 0;
  max-width: 14rem;
  overflow-wrap: anywhere;
  white-space: normal;
  color: rgba(255,255,255,.78);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}
.navbar-brand svg {
  flex: 0 0 26px;
  filter: drop-shadow(0 2px 4px rgba(227,147,17,.35));
  transition: transform .35s ease;
}
.navbar-brand:hover svg { transform: rotate(-6deg) scale(1.06); }

.navbar-collapse { min-width: 0; }
.navbar .navbar-nav {
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.navbar .nav-link {
  font-size: .74rem;
  letter-spacing: .11em;
  padding: .55rem .75rem !important;
  color: rgba(255,255,255,.6) !important;
  border-bottom: 2px solid transparent;
  position: relative;
  transition: color .18s ease, transform .18s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: #fff !important;
  border-bottom-color: transparent;
  transform: translateY(-1px);
}
.navbar .nav-link.is-active {
  color: #fff !important;
  border-bottom-color: transparent;
}
.navbar .nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -2px;
  height: 3px;
  background: var(--amber);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 12px var(--amber-glow);
}

.navbar .app-nav-group > .nav-link {
  width: 100%;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

.app-nav-menu {
  min-width: 11rem;
  padding: .4rem;
  background: #151B20;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.app-nav-menu .dropdown-item {
  border-radius: 4px;
  padding: .5rem .65rem;
  color: rgba(255,255,255,.74);
  font-size: .82rem;
  font-weight: 600;
}

.app-nav-menu .dropdown-item:hover,
.app-nav-menu .dropdown-item:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.app-nav-menu .dropdown-item.is-active {
  color: #fff;
  background: rgba(227,147,17,.16);
  box-shadow: inset 3px 0 0 var(--amber);
}

.navbar .app-account-link {
  max-width: 8rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 1399.98px) {
  .navbar-collapse {
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: .5rem;
  }

  .navbar .nav-link {
    padding: .65rem .75rem !important;
  }

  .navbar .theme-toggle {
    width: auto;
    height: auto;
    justify-content: flex-start;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .navbar .app-nav-group > .nav-link {
    text-align: left;
  }

  .navbar .nav-link.is-active::before {
    top: .45rem;
    bottom: .45rem;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
  }

  .app-nav-menu {
    margin: 0 0 .25rem .75rem;
    padding: .2rem;
    background: rgba(255,255,255,.035);
    border: 0;
    box-shadow: none;
  }

  .navbar-collapse .badge.position-absolute {
    position: static !important;
    transform: none !important;
    margin-left: .4rem;
    vertical-align: middle;
  }

  .navbar .app-account-link { max-width: none; }
}

@media (max-width: 575.98px) {
  .navbar-brand {
    gap: .4rem;
    font-size: 1.25rem;
    flex-wrap: wrap;
  }

  .navbar-brand-organization {
    flex: 0 1 100%;
    max-width: 100%;
    font-size: .72rem;
  }
}

/* ---- Footer -------------------------------------------------------- */
.app-footer {
  border-top: 1px solid var(--line);
  margin-top: 1.75rem;
  padding: 1rem 0 1.5rem;
  font-size: .7rem;
}

/* ---- Buttons ------------------------------------------------------- */
.btn {
  border-radius: 6px;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
  font-weight: 600;
  letter-spacing: .015em;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--amber);
  --bs-btn-border-color: var(--amber);
  --bs-btn-hover-bg: var(--amber-2);
  --bs-btn-hover-border-color: var(--amber-2);
  --bs-btn-color: var(--on-amber);
  --bs-btn-hover-color: var(--on-amber);
  box-shadow: 0 1px 2px rgba(169, 107, 8, .35), 0 2px 8px -2px rgba(227, 147, 17, .3);
}
.btn-primary:hover { box-shadow: 0 3px 8px rgba(169, 107, 8, .3), 0 6px 20px -4px rgba(227,147,17,.45); }

/* ---- Cards --------------------------------------------------------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--panel);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card-header {
  background: linear-gradient(180deg, #FAFBFB 0%, #F5F6F6 100%);
  border-bottom: 1px solid var(--line);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  padding: .65rem .95rem;
}

/* ---- Tables -------------------------------------------------------- */
.table-responsive {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* #198: the vehicle register keeps its table-wide comparison layout at
   desktop widths and scrolls that table inside its named region. Paint
   containment prevents the table's visual overflow from contributing to the
   page scroll width while preserving the region's own horizontal scrollport. */
.table-responsive.vehicle-register-region {
  contain: paint;
}

/* #198 narrow large-text reflow: keep the high-value identity and status
   fields readable before the two-column detail grid. The source table still
   owns the desktop comparison layout; this override only refines the
   existing phone field-group treatment from style.css. */
@media (max-width: 575.98px) {
  .vehicle-register-table > tbody > tr.vehicle-register-row > td {
    padding: .45rem .5rem;
  }

  .vehicle-register-table > tbody > tr.vehicle-register-row > .vehicle-register-identity {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .vehicle-register-table > tbody > tr.vehicle-register-row > .vehicle-register-status {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .vehicle-register-table > tbody > tr.vehicle-register-row > .vehicle-register-model {
    grid-row: 3;
  }

  .vehicle-register-table .vehicle-register-link {
    min-width: 0;
  }

  .vehicle-register-table .vehicle-register-label {
    white-space: nowrap;
  }

  .vehicle-register-table .vehicle-register-action {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
.table > thead > tr > th {
  background: linear-gradient(180deg, #F5F6F6 0%, #EEF0F0 100%);
  border-bottom: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .09em;
  padding: .65rem .8rem;
}
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr.row-link:hover {
  background: var(--amber-tint);
  box-shadow: inset 3px 0 0 var(--amber);
}

/* Account tiers are organization labels, not health or permission states.
   Every color keeps the tier name in the badge, while Active/Disabled remains
   a separate status badge. The identifiers are a closed palette; templates
   never interpolate organization-provided CSS. */
.account-tier-badge {
  --account-tier-bg: #E1E5E8;
  --account-tier-fg: #1B2229;
  --account-tier-border: #7D8A94;
  background-color: var(--account-tier-bg);
  border: 1px solid var(--account-tier-border);
  color: var(--account-tier-fg);
  font-size: .72rem;
  letter-spacing: .01em;
  text-transform: none;
  white-space: normal;
}
.account-tier-badge--slate { --account-tier-bg: #E1E5E8; --account-tier-fg: #1B2229; --account-tier-border: #7D8A94; }
.account-tier-badge--blue  { --account-tier-bg: #D9EAF5; --account-tier-fg: #123D5B; --account-tier-border: #5A8EAE; }
.account-tier-badge--amber { --account-tier-bg: #FCEBCB; --account-tier-fg: #6A4300; --account-tier-border: #B27618; }
.account-tier-badge--green { --account-tier-bg: #DFF3E7; --account-tier-fg: #14532D; --account-tier-border: #4E946D; }
.account-tier-badge--plum  { --account-tier-bg: #EEE2F4; --account-tier-fg: #4A235A; --account-tier-border: #9569A5; }

.account-tier-color-options {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.account-tier-color-option .form-check-label {
  align-items: flex-start;
  display: flex;
  gap: .5rem;
}
.account-tier-color-swatch {
  flex: 0 0 auto;
  min-width: 4rem;
  text-align: center;
}
.account-tier-color-preview {
  align-items: center;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem;
}

/* ---- Badges refinement -------------------------------------------- */
.status-badge-active, .status-badge-down, .status-badge-retired,
.pm-badge-ok, .pm-badge-due_soon, .pm-badge-overdue,
.pm-badge-unknown, .pm-badge-not_applicable,
.t-inservice, .t-yard, .t-shop, .t-scrapped, .t-unrecorded {
  border-radius: 999px;
  padding: .32em .7em;
  font-size: .66rem;
  border: 0;
  box-shadow: 0 1px 2px rgba(15,20,24,.08);
}
.status-badge-active { background: linear-gradient(135deg, #2CA05F 0%, #248E51 100%); }
.status-badge-down   { background: linear-gradient(135deg, #D14536 0%, #B23A2E 100%); }
.pm-badge-due_soon   { background: linear-gradient(135deg, var(--amber-2) 0%, var(--amber) 100%); color: var(--ink); }
.pm-badge-overdue    { background: linear-gradient(135deg, #D14536 0%, var(--stop) 100%); }

/* Warranty badges keep the pill radius but not the fill or the shadow. They
   sit next to the PM badges and must not compete with them: a warranty is
   worth a glance, a missed service is worth a stop. */
.warranty-badge-active, .warranty-badge-expiring_soon, .warranty-badge-expired,
.warranty-badge-unknown, .warranty-badge-not_applicable {
  border-radius: 999px;
  padding: .2em .55em;
  font-size: .6rem;
  box-shadow: none;
}

/* ---- Dashboard hero + summary tiles ------------------------------- */
.dashboard-hero {
  position: relative;
  margin: -.75rem -1.5rem 1.1rem;
  padding: 1.25rem 1.5rem 1.35rem;
  background:
    radial-gradient(ellipse 480px 200px at 90% 20%, rgba(227,147,17,.22), transparent 65%),
    radial-gradient(ellipse 380px 200px at 5% 90%, rgba(31,90,130,.28), transparent 60%),
    linear-gradient(120deg, #0F1418 0%, #1B2229 55%, #243139 100%);
  color: #fff;
  overflow: hidden;
  border-bottom: 2px solid var(--amber);
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.35);
}
.dashboard-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.02) 0 12px,
    transparent 12px 26px);
  pointer-events: none;
}
.dashboard-hero-inner {
  position: relative;
  display: flex;
  gap: 2rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.dashboard-hero-eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--amber-2);
  margin-bottom: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.dashboard-hero-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--amber);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .55; transform: scale(1.35);} }

.dashboard-hero h1 {
  color: #fff;
  font-family: var(--font-display);
  /* Big Shoulders is the most characteristic thing on the page, and at a
     fixed 2.3rem it was the one element that did not answer the canvas: a
     hero at 1440px and a small label in a 3440px band. The scale is tuned to
     leave 1440px exactly where it was (36.8px) and stop at 46.4px, which is
     where the container's own 140rem measure stops. */
  font-size: clamp(1.65rem, 1.22rem + 1.2vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}
.delta-up   { color: #55C989; font-size: .8rem; margin-left: .4rem; }
.delta-down { color: #F27363; font-size: .8rem; margin-left: .4rem; }

/* A form whose fields are laid out in a grid grows with the window rather
   than sitting in a fixed column with the other half of the screen empty --
   the vehicle form is three columns of inputs inside what used to be 720px,
   on monitors twice that wide.

   Capped rather than unbounded: past roughly this width a single-line text
   input becomes a scan nobody can follow, and the grid stops gaining
   anything because the columns are already comfortable. Below the cap the
   card is simply 100% of its container, so it shrinks with the window on its
   own -- no breakpoints to keep in sync. */
.form-card-wide { max-width: 1200px; }

/* No-access page. Deliberately plain: a permission boundary is a normal part
   of a system with roles, and a page that shouts at somebody for following a
   link in their own nav teaches them to distrust the nav. */
.access-denied { max-width: 46rem; padding: 2.5rem 0; }
.access-denied-title {
  font-family: var(--font-display);
  font-size: 2.3rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: .25rem 0 .75rem;
}
.access-denied-lead { font-size: 1.05rem; margin-bottom: .5rem; }

/* Dashboard summary card overhaul */
.dashboard-summary { gap: .9rem; }
.dashboard-summary .card {
  border: 1px solid var(--line);
  border-left-width: 0 !important;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-summary .card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--line);
  transition: width .18s ease;
}
.dashboard-summary-link:hover .card {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--amber);
}
.dashboard-summary-link:hover .card::before { width: 6px; }

.dashboard-summary-item:nth-child(1) .card::before { background: var(--go); }
.dashboard-summary-item:nth-child(2) .card::before { background: var(--stop); }
.dashboard-summary-item:nth-child(3) .card::before { background: var(--amber); }
.dashboard-summary-item:nth-child(4) .card::before,
.dashboard-summary-item:nth-child(5) .card::before,
.dashboard-summary-item:nth-child(6) .card::before { background: var(--route); }

.dashboard-summary .card-body {
  padding: .8rem clamp(.25rem, 2.5vw, .95rem) !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.dashboard-summary .display-6 {
  font-size: 1.75rem;
  font-family: var(--font-display);
  line-height: 1.05;
  text-align: left;
  color: var(--ink);
}
.dashboard-summary .text-muted.small {
  text-align: left;
  color: var(--ink-soft) !important;
  font-weight: 700;
  letter-spacing: .09em;
  font-size: .66rem;
}
.dashboard-summary .card-body > .text-muted:not(.small) {
  text-align: left;
  color: var(--ink-soft) !important;
  font-size: .7rem !important;
}

/* Text-color tokens for stat values */
.dashboard-summary .text-success { color: var(--go) !important; }
.dashboard-summary .text-danger  { color: var(--stop) !important; }

/* Panel cards on dashboard */
.dashboard-panel {
  border-radius: var(--radius);
  overflow: hidden;
}
.dashboard-panel .card-header {
  font-weight: 700;
  color: var(--ink);
  padding: .7rem .95rem;
  border-bottom-color: var(--line);
}
.dashboard-panel .card-header .small { font-size: .72rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.dashboard-panel .table > thead > tr > th { background: transparent; border-bottom: 1px solid var(--line-soft); font-size: .65rem; }

/* Currently down / cost outliers get accent lines */
.dashboard-panel.panel-alert   .card-header { box-shadow: inset 3px 0 0 var(--stop); }
.dashboard-panel.panel-warning .card-header { box-shadow: inset 3px 0 0 var(--amber); }
.dashboard-panel.panel-ok      .card-header { box-shadow: inset 3px 0 0 var(--go); }
.dashboard-panel.panel-route   .card-header { box-shadow: inset 3px 0 0 var(--route); }
.dashboard-panel.panel-unavailable .card-header {
  box-shadow: inset 3px 0 0 var(--line);
}

.razor-dtc-panel .table > :not(caption) > * > * {
  vertical-align: middle;
}

.razor-dtc-badge {
  min-width: 2rem;
  background: var(--amber-tint);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--amber) 46%, transparent);
}

.razor-dtc-alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--amber) 48%, var(--line));
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--amber-tint) 55%, var(--panel));
}

.razor-dtc-alert h2 {
  margin: 0 0 .15rem;
  color: var(--ink);
  font-size: .95rem;
}

.razor-dtc-alert p,
.razor-dtc-alert time {
  margin: 0;
  color: var(--ink-soft);
  font-size: .82rem;
}

.razor-dtc-alert time { white-space: nowrap; }

/* Diagnostics are provider observations, not Roadframe alert state. Keep the
   wording and timestamp prominent enough to find without giving a normal
   diagnostic count the same attention treatment as a live exception. */
.vehicle-detail-page .razor-dtc-note {
  border-color: var(--line);
  border-left-color: var(--line);
  background: var(--paper);
}

.razor-telemetry {
  overflow: hidden;
}

.razor-telemetry .card-header {
  color: var(--ink);
  font-weight: 700;
}

.razor-movement {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.razor-movement-moving { background: var(--route-tint); color: var(--route); }
.razor-movement-parked { background: var(--go-tint); color: var(--go); }
.razor-movement-idling { background: var(--amber-tint); color: var(--ink); }
.razor-movement-muted { background: var(--paper); color: var(--ink-soft); }

.razor-telemetry-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1.25rem;
}

.razor-telemetry-body > div {
  display: grid;
  gap: .12rem;
}

.razor-telemetry-label {
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 650;
}

@media (min-width: 768px) {
  .vehicle-detail-page .razor-telemetry-normal .razor-telemetry-body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem 1rem;
    padding-block: .75rem;
  }

  .vehicle-detail-page .razor-telemetry-normal .telemetry-overview-action {
    align-self: end;
  }
}

@media (max-width: 575.98px) {
  .razor-dtc-alert {
    align-items: flex-start;
    flex-direction: column;
    gap: .45rem;
  }

  .razor-telemetry-body { grid-template-columns: 1fr; }
}

.document-deadline-heading {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  min-width: 0;
}

.document-deadline-window {
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.document-deadline-panel .table > :not(caption) > * > * {
  vertical-align: middle;
}

.document-deadline-panel .table-responsive {
  overflow-y: hidden;
}

.document-deadline-document,
.document-deadline-detail {
  white-space: normal !important;
}

.document-deadline-document {
  width: 44%;
}

.document-deadline-vehicle,
.document-deadline-type,
.document-deadline-date,
.document-deadline-relative {
  display: block;
}

.document-deadline-vehicle {
  width: fit-content;
  font-weight: 700;
}

.document-deadline-type,
.document-deadline-relative {
  margin-top: .12rem;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.25;
}

.document-deadline-state {
  display: inline-block;
  margin-bottom: .2rem;
  padding: .24em .52em;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: .64rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.document-deadline-state-expired {
  border-color: var(--stop);
  background: var(--stop);
  color: #fff;
}

.document-deadline-state-due_today {
  border-color: var(--amber);
  background: var(--amber);
  color: #0F1418;
}

.document-deadline-state-expiring_soon {
  border-color: rgba(227, 147, 17, .38);
  background: var(--amber-tint);
  color: var(--ink);
}

@media (max-width: 575.98px) {
  .document-deadline-panel .card-header {
    align-items: flex-start !important;
  }

  .document-deadline-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: .08rem;
  }

  .document-deadline-document {
    width: 42%;
  }
}

/* ---- Login page — split-screen brand panel ------------------------ */
body.login-page {
  background: none;
  min-height: 100vh;
}
body.login-page .navbar { display: none; }
body.login-page .app-footer { display: none; }
body.login-page > .container-fluid { padding: 0 !important; max-width: none; }
body.login-page .alert { max-width: 420px; margin-inline: auto; margin-top: 1rem; }

.login-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
}
.login-brand {
  position: relative;
  padding: 3rem 3.5rem;
  color: #fff;
  background:
    radial-gradient(ellipse 700px 340px at 20% 0%, rgba(227,147,17,.28), transparent 65%),
    radial-gradient(ellipse 700px 340px at 90% 100%, rgba(31,90,130,.35), transparent 65%),
    linear-gradient(140deg, #14191E 0%, #1B2229 50%, #243139 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
}
.login-brand::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 14px, transparent 14px 30px);
  z-index: -1;
}
.login-brand::after {
  content: "";
  position: absolute;
  right: -140px; bottom: -140px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,147,17,.22) 0%, transparent 65%);
  filter: blur(20px);
  z-index: -1;
}
.login-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.login-brand-headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .01em;
  max-width: 16ch;
  margin-bottom: 1rem;
}
.login-brand-headline .accent { color: var(--amber-2); display: inline-block; }
.login-brand-sub {
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  max-width: 42ch;
  line-height: 1.55;
}
.login-brand-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
  max-width: 34rem;
}
.login-brand-stat {
  border-top: 3px solid var(--amber);
  padding-top: .65rem;
}
.login-brand-stat b {
  font-family: var(--font-display);
  font-size: 1.6rem;
  display: block;
  color: #fff;
  line-height: 1;
}
.login-brand-stat span {
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.login-brand-foot {
  color: rgba(255,255,255,.5);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.login-brand-foot::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--amber);
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F5 100%);
}
.login-form-wrap {
  width: 100%;
  max-width: 400px;
}
.login-form-wrap h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .35rem;
  color: var(--ink);
  text-wrap: balance;
}
.login-form-wrap p.lead {
  color: var(--ink-soft);
  font-size: .95rem;
  margin-bottom: 1.75rem;
  text-wrap: pretty;
}
.login-form-wrap .form-control {
  border: 1px solid var(--line);
  padding: .75rem .85rem;
  font-size: 1rem;
  border-radius: 8px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.login-form-wrap .form-control:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-glow);
}
.login-form-wrap .form-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-soft);
}
.login-form-wrap .btn-primary {
  padding: .8rem 1rem;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 8px;
  margin-top: .5rem;
}
.login-hint {
  margin-top: 1.5rem;
  padding: .85rem 1rem;
  background: var(--route-tint);
  border-left: 3px solid var(--route);
  border-radius: 0 6px 6px 0;
  font-size: .8rem;
  color: var(--ink-soft);
}
.login-hint b { color: var(--route-deep); font-family: var(--font-mono); }

@media (max-width: 899.98px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { padding: 2rem 1.75rem; min-height: 40vh; }
  .login-brand-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
  .login-brand-stat b { font-size: 1.25rem; }
  .login-panel { padding: 2rem 1.5rem; }
}

/* ---- Motion primitives ------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dashboard-summary-item { animation: rise .35s ease both; }
.dashboard-summary-item:nth-child(1) { animation-delay: .02s; }
.dashboard-summary-item:nth-child(2) { animation-delay: .06s; }
.dashboard-summary-item:nth-child(3) { animation-delay: .10s; }
.dashboard-summary-item:nth-child(4) { animation-delay: .14s; }
.dashboard-summary-item:nth-child(5) { animation-delay: .18s; }
.dashboard-summary-item:nth-child(6) { animation-delay: .22s; }
.dashboard-panels > * { animation: rise .4s ease both; animation-delay: .26s; }

/* ---- Delta pills for trend indicators ---------------------------- */
.delta-pill {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .18em .5em;
  border-radius: 999px;
  margin-left: .35rem;
  vertical-align: middle;
}
.delta-pill.up   { background: rgba(36, 142, 81, .12); color: #1F6D3F; }
.delta-pill.down { background: rgba(194, 56, 42, .12); color: #8F2A20; }
.delta-pill.flat { background: rgba(86, 96, 107, .12); color: var(--ink-soft); }

/* ---- Empty state polish ------------------------------------------ */
.table tbody td.text-muted.text-center {
  color: var(--ink-soft) !important;
  font-style: italic;
  padding: 1.25rem !important;
}

/* ---- Focus ring ---------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Alerts refined ----------------------------------------------- */
.alert { border-radius: 8px; border-width: 1px; padding: .75rem 1rem; box-shadow: var(--shadow-sm); }
/* The shorthand above also resets the right padding Bootstrap reserves for the
   close button, so give it back or long flash text runs under the X. */
.alert-dismissible { padding-right: 3rem; }

/* Small screen dashboard hero */
@media (max-width: 767.98px) {
  .dashboard-hero { margin: -.5rem -1rem 1rem; padding: 1rem 1rem 1.1rem; }
  .dashboard-hero h1 { font-size: 1.65rem; }
}

/* Fit-viewport dashboard override: give the hero its natural size */
@media (min-width: 992px) {
  body.dashboard-page,
  body.dashboard-page > .container-fluid.px-4 {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  body.dashboard-page .dashboard-panel .table-responsive {
    max-height: none;
    overflow: visible;
  }
  body.dashboard-page .app-footer { margin-top: 1.75rem; }
}

/* ==========================================================================
   Analytics hero + charts
   ========================================================================== */
.analytics-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: .9rem 1.5rem;
  margin: -.5rem -1.5rem 1rem;
  background:
    radial-gradient(ellipse 500px 250px at 90% 15%, rgba(227,147,17,.18), transparent 60%),
    linear-gradient(120deg, #131A20 0%, #1E272F 50%, #253039 100%);
  color: #fff;
  border-bottom: 2px solid var(--amber);
  position: relative;
  overflow: hidden;
}
.analytics-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 12px, transparent 12px 26px);
  pointer-events: none;
}
.analytics-hero > * { position: relative; }
.analytics-hero-title {
  font-family: var(--font-display);
  font-size: 2.05rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.analytics-hero-branch { color: var(--amber-2); font-weight: 700; }
.analytics-filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.analytics-filters .form-select-sm {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #fff;
  width: auto;
  min-width: 11rem;
}
.analytics-filters .form-select-sm:focus {
  background: rgba(255,255,255,.15);
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
  color: #fff;
}
/* var(--panel), not #fff: --ink flips with the theme and the background did
   not, so dark mode painted near-white text on a hardcoded white popup. Both
   sides of the pair have to move together. */
.analytics-filters option { color: var(--ink); background: var(--panel); }
.analytics-charts .card-body { padding: .85rem 1rem; }
.analytics-charts canvas { max-height: 320px; }
.analytics-chart-viewport {
  position: relative;
  width: 100%;
  height: 150px;
  max-height: 550px;
}
.analytics-chart-viewport > canvas { max-height: none; }
.analytics-panel-title {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.chart-data-alternative {
  border-top: 1px solid var(--line-soft);
  padding-top: .55rem;
}
.chart-data-alternative > summary {
  width: max-content;
  color: var(--route);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.chart-data-alternative > summary:hover { text-decoration: underline; }
.chart-data-alternative > summary:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.chart-empty {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
}
.chart-empty p { margin: 0; }
.chart-empty p + p { margin-top: .45rem; }

/* ---- Online-only saves ------------------------------------------------ */
.connectivity-notice {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1085;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: max-content;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: .7rem .85rem;
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--amber);
  border-radius: 5px;
  background: #151B20;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  color: #F5F6F5;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.35;
}
.connectivity-notice[hidden] { display: none; }
.connectivity-notice[data-state="blocked"] { border-left-color: var(--stop); }
.connectivity-notice[data-state="online"] { border-left-color: var(--go); }
.connectivity-notice__mark {
  flex: 0 0 auto;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(227,147,17,.16);
}
.connectivity-notice[data-state="blocked"] .connectivity-notice__mark {
  background: var(--stop);
  box-shadow: 0 0 0 3px rgba(194,56,42,.18);
}
.connectivity-notice[data-state="online"] .connectivity-notice__mark {
  background: var(--go);
  box-shadow: 0 0 0 3px rgba(36,142,81,.18);
}

@media (max-width: 575.98px) {
  .connectivity-notice {
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   Theme toggle button
   ========================================================================== */
.theme-toggle {
  width: 34px; height: 34px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(255,255,255,.06) !important;
  border-bottom: 0 !important;
}
.theme-toggle:hover { background: rgba(255,255,255,.14) !important; }
.theme-toggle-icon {
  width: 16px; height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 65% 40%, #0F1418 0 6px, transparent 7px),
    #F1C24C;
  box-shadow: 0 0 8px rgba(241,194,76,.55);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
[data-theme="dark"] .theme-toggle-icon {
  background:
    radial-gradient(circle at 65% 40%, #E39311 0 6px, transparent 7px),
    #FFF3D6;
  transform: rotate(-25deg);
  box-shadow: 0 0 12px rgba(255,243,214,.35);
}

/* ==========================================================================
   Dark mode palette
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --ink: #EDF1F5;
  --ink-2: #C9D2DB;
  --ink-soft: #96A2AE;
  --paper: #0C1116;
  --panel: #151C22;
  --line: #232D36;
  --line-soft: #1B2329;
  --amber-tint: rgba(227,147,17,.15);
  --route-tint: rgba(31,90,130,.22);
  --go-tint: rgba(36,142,81,.16);
  --stop-tint: rgba(194,56,42,.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.65);
}
[data-theme="dark"] .account-tier-badge--slate { --account-tier-bg: #33404A; --account-tier-fg: #F5F6F5; --account-tier-border: #92A2AF; }
[data-theme="dark"] .account-tier-badge--blue  { --account-tier-bg: #1F5A82; --account-tier-fg: #E5F2FA; --account-tier-border: #8BBBD6; }
[data-theme="dark"] .account-tier-badge--amber { --account-tier-bg: #6A4A13; --account-tier-fg: #FFF2D0; --account-tier-border: #E7B85D; }
[data-theme="dark"] .account-tier-badge--green { --account-tier-bg: #1E6B43; --account-tier-fg: #E2F7E9; --account-tier-border: #85D4A7; }
[data-theme="dark"] .account-tier-badge--plum  { --account-tier-bg: #6B4380; --account-tier-fg: #F4E8FB; --account-tier-border: #D3A9E2; }
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 900px 500px at 90% -10%, rgba(227,147,17,.09), transparent 60%),
    radial-gradient(ellipse 800px 480px at -10% 8%, rgba(31,90,130,.12), transparent 60%),
    var(--paper);
  color: var(--ink);
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 { color: var(--ink); }

[data-theme="dark"] .card,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .dropdown-menu {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .card-header {
  background: linear-gradient(180deg, #1A2229 0%, #151C22 100%);
  color: var(--ink-2);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .table {
  color: var(--ink);
  --bs-table-color: var(--ink);
  --bs-table-hover-bg: rgba(227,147,17,.1);
  --bs-table-bg: transparent;
}
[data-theme="dark"] .table > thead > tr > th {
  background: linear-gradient(180deg, #1A2229 0%, #131A20 100%);
  color: var(--ink-soft);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}
[data-theme="dark"] .table tbody tr.row-link:hover {
  background: rgba(227,147,17,.14);
  box-shadow: inset 3px 0 0 var(--amber);
}
[data-theme="dark"] .table tfoot td,
[data-theme="dark"] .table .table-light {
  background: #1A2229 !important;
  color: var(--ink) !important;
}

/* Bootstrap's contextual row classes are light-theme colours: .table-warning
   paints #FFF3CD and expects dark text on it. Dark mode flips --ink to
   #EDF1F5 and the cell rule above applies it to every cell, so a highlighted
   row rendered near-white text on cream -- measured at 1.02:1, against a
   4.5:1 floor. Not dimmed: gone. And the row is highlighted precisely
   because it is the one asking the reader a question.

   The tints are the palette's own dark-mode washes, which is what
   --bs-table-hover-bg already uses a few rules up. .table-light above was
   given this treatment when it hit the same problem; this covers the rest
   of the set rather than waiting for each one to be found in use. */
[data-theme="dark"] .table > :not(caption) > .table-warning > *,
[data-theme="dark"] .table > :not(caption) > .table-danger > *,
[data-theme="dark"] .table > :not(caption) > .table-success > *,
[data-theme="dark"] .table > :not(caption) > .table-info > * {
  color: var(--ink);
}
[data-theme="dark"] .table > :not(caption) > .table-warning > * {
  background-color: var(--amber-tint);
}
[data-theme="dark"] .table > :not(caption) > .table-danger > * {
  background-color: var(--stop-tint);
}
[data-theme="dark"] .table > :not(caption) > .table-success > * {
  background-color: var(--go-tint);
}
[data-theme="dark"] .table > :not(caption) > .table-info > * {
  background-color: var(--route-tint);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #1A2229;
  color: var(--ink);
  border-color: var(--line);
}
[data-theme="dark"] .form-control::placeholder { color: var(--ink-soft); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: #1E262E;
  border-color: var(--amber);
  color: var(--ink);
  box-shadow: 0 0 0 4px var(--amber-glow);
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-text {
  color: var(--ink-soft) !important;
}

/* Integration catalog: scan providers first, then act on one explicit state. */
.integrations-page,
.organization-settings-page {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.organization-settings-page {
  display: grid;
  gap: 1rem;
}
.integrations-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin: -.25rem 0 1.5rem;
  padding: 1rem 0 1.15rem;
  border-bottom: 2px solid var(--amber);
}
.page-kicker {
  margin: 0 0 .25rem;
  color: var(--amber-deep);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.integrations-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: .85rem;
}
.integration-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  align-items: stretch;
}
.integration-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.integration-card.is-enabled { border-color: color-mix(in srgb, var(--go) 55%, var(--line)); }
.integration-card.needs-setup { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.integration-card-body { flex: 1 1 auto; padding: 1.1rem 1.15rem 1rem; }
.integration-card-title-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.integration-mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--route);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}
.integration-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.integration-card-source {
  margin: .12rem 0 0;
  color: var(--ink-soft);
  font-size: .74rem;
}
.integration-card-summary {
  min-height: 4.2rem;
  margin: 1rem 0;
  color: var(--ink-soft);
  font-size: .86rem;
  line-height: 1.55;
}
.integration-facts {
  margin: 0;
  padding-top: .75rem;
  border-top: 1px solid var(--line-soft);
}
.integration-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem 0;
  font-size: .78rem;
}
.integration-facts dt { color: var(--ink-soft); font-weight: 500; }
.integration-facts dd { margin: 0; color: var(--ink); font-weight: 700; text-align: right; }
.integration-setup-note {
  display: grid;
  gap: .15rem;
  margin-top: .8rem;
  padding: .65rem .7rem;
  border-left: 3px solid var(--amber);
  background: var(--amber-tint);
  color: var(--ink);
  font-size: .76rem;
  line-height: 1.4;
}
.integration-card-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 4.2rem;
  padding: .7rem 1.15rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 76%, var(--panel));
}
.integration-card.is-enabled .integration-card-state { border-top: 3px solid var(--go); }
.integration-card.needs-setup .integration-card-state { border-top: 3px solid var(--amber); }
.integration-card.connection-error .integration-card-state { border-top-color: var(--stop); }
.integration-card.connection-pending .integration-card-state { border-top-color: var(--amber); }
.integration-card-state > div { display: grid; line-height: 1.1; }
.integration-state-label {
  color: var(--ink-soft);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.integration-switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 4.8rem;
  min-height: 44px;
  padding: .35rem .2rem .35rem .5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
}
.integration-switch-track {
  position: relative;
  width: 2.5rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--ink-soft);
}
.integration-switch-track span {
  position: absolute;
  top: .175rem;
  left: .18rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
}
.integration-switch[aria-checked="true"] .integration-switch-track { background: var(--go); }
.integration-switch[aria-checked="true"] .integration-switch-track span { left: 1.32rem; }
.integration-switch:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}
.integration-connections { border-top: 1px solid var(--line); }
.integration-connection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1.15rem;
}
.integration-connection + .integration-connection { border-top: 1px solid var(--line-soft); }
.integration-connection > div:first-child { display: grid; min-width: 0; }
.integration-connection > div:first-child span { color: var(--ink-soft); font-size: .7rem; }
.integration-connection > div:first-child .integration-connection-health {
  color: var(--ink);
  font-size: .76rem;
  font-weight: 800;
}
.integration-connection > div:first-child .integration-connection-health.is-connected { color: var(--go); }
.integration-connection > div:first-child .integration-connection-health.is-error { color: var(--stop); }
.integration-connection > div:first-child .integration-connection-health.is-pending { color: var(--amber-deep); }
.integration-connection-actions { display: flex; align-items: center; gap: .65rem; font-size: .76rem; }
.integration-connection-actions form { margin: 0; }
.unknown-integrations { margin-top: 2rem; }
.unknown-integration-row {
  margin-top: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.organization-settings-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin: -.25rem 0 1.5rem;
  padding: 1rem 0 1.15rem;
  border-bottom: 2px solid var(--amber);
}
.organization-settings-heading > div { max-width: 42rem; }
.organization-settings-access {
  display: grid;
  gap: .15rem;
  max-width: 23rem;
  padding-left: 1rem;
  border-left: 3px solid var(--route);
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.45;
}
.organization-settings-access strong { color: var(--ink); }
.organization-settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .35rem 0 .85rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .25rem;
}
.organization-settings-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .4rem .85rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}
.organization-settings-nav__link:hover,
.organization-settings-nav__link:focus-visible {
  color: var(--ink);
  background: var(--amber-tint);
  border-color: rgba(217, 138, 15, .35);
}
.organization-settings-nav__link.is-active {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 var(--amber);
}
.organization-settings-card { max-width: none; }
.organization-settings-card--profile { max-width: 52rem; }
.organization-settings-fieldset {
  margin: 1.35rem 0 0;
  padding: 0;
  border: 0;
}
.organization-settings-legend {
  float: none;
  width: auto;
  margin: 0 0 .85rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.organization-settings-card hr { margin: 1.5rem 0; border-color: var(--line); opacity: 1; }
.organization-settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--paper) 76%, var(--panel));
}
.organization-settings-scope {
  flex: 0 0 auto;
  padding: .25rem .5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 700;
}
.organization-settings-lookup {
  display: grid;
  grid-template-columns: minmax(0, 18rem) auto;
  align-items: end;
  gap: .75rem;
}
.organization-settings-source {
  display: grid;
  gap: .1rem;
  margin-top: 1rem;
  padding: .7rem .8rem;
  border-left: 3px solid var(--route);
  background: color-mix(in srgb, var(--route) 6%, var(--paper));
  color: var(--ink-soft);
  font-size: .76rem;
}
.organization-settings-source strong { color: var(--ink); }
.organization-settings-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.organization-settings-audit {
  color: var(--ink-soft);
  font-size: .75rem;
}
.organization-settings-calendar-summary {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--route);
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  gap: .4rem 1rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: .65rem .9rem;
}
.organization-settings-calendar-summary strong { color: var(--ink); }

/* Operating calendar (organization.calendar) */
.operating-calendar-weekday-options { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.operating-calendar-holiday-list,
.operating-calendar-closure-list { display: grid; gap: .55rem; margin-top: .5rem; }
.operating-calendar-holiday-row .form-check-label,
.operating-calendar-closure-row .form-check-label { align-items: baseline; display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.operating-calendar-holiday-date { color: var(--ink-soft); font-size: .78rem; }
.operating-calendar-add-closure { margin-top: 1rem; max-width: 22rem; }

.invoice-workspace-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.invoice-workspace-nav .badge { margin-left: .25rem; }
.notification-list {
  display: grid;
  gap: .75rem;
  max-width: 58rem;
}
.notification-item { border-left: 4px solid var(--amber); }
.notification-item--urgent { border-left-color: var(--stop); }
.notification-item .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.notification-item__category {
  display: block;
  margin-bottom: .25rem;
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.notification-item__action {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .integration-card-summary { min-height: 0; }
  .integration-connection { align-items: flex-start; flex-direction: column; }
  .integration-connection-actions { flex-wrap: wrap; }
  .organization-settings-heading,
  .organization-settings-card-header,
  .organization-settings-actions,
  .organization-settings-calendar-summary { align-items: stretch; flex-direction: column; }
  .organization-settings-nav { flex-direction: column; align-items: stretch; }
  .organization-settings-nav__link { justify-content: flex-start; }
  .organization-settings-lookup { grid-template-columns: 1fr; }
  .organization-settings-lookup .btn { justify-self: start; }
  .organization-settings-heading { gap: 1rem; }
  .organization-settings-access { max-width: none; }
  .organization-settings-scope { align-self: flex-start; }
  .notification-item .card-body { align-items: flex-start; flex-direction: column; }
}

/* ======================================================================
   FMCSA compliance — frontend contract for issue #211
   ----------------------------------------------------------------------
   A ledger rather than a metric-card dashboard: federal source clocks and
   exact attribution are more important here than visual summaries.
   ====================================================================== */
.fmcsa-compliance {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 1.5rem;
}
.fmcsa-heading,
.fmcsa-carrier,
.fmcsa-section-heading,
.fmcsa-condition,
.fmcsa-source-list > li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.fmcsa-heading {
  align-items: flex-start;
  margin: -.25rem 0 1.25rem;
  padding: 1rem 0 1.15rem;
  border-bottom: 2px solid var(--amber);
}
.fmcsa-header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fmcsa-header-actions form { margin: 0; }
.fmcsa-integration-picker {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 30rem;
  margin: -.35rem 0 1.25rem;
}
.fmcsa-integration-picker label {
  color: var(--ink-soft);
  font-size: .76rem;
  font-weight: 700;
}
.fmcsa-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: .95;
  text-transform: uppercase;
}
.fmcsa-read-only,
.fmcsa-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.fmcsa-read-only {
  flex: 0 0 auto;
  padding: .5rem .7rem;
  color: var(--route-deep);
  background: var(--route-tint);
  border: 1px solid color-mix(in srgb, var(--route) 35%, transparent);
  white-space: nowrap;
}
.fmcsa-state-panel {
  padding: clamp(2rem, 7vw, 5rem) 0;
  max-width: 48rem;
}
.fmcsa-state-panel h2,
.fmcsa-state-panel h3 { margin-bottom: .35rem; }
.fmcsa-state-panel p { color: var(--ink-soft); max-width: 62ch; }
.fmcsa-state-panel-compact { padding: 1.25rem 0; }
.fmcsa-progress {
  width: min(28rem, 100%);
  height: 3px;
  overflow: hidden;
  margin-top: 1.25rem;
  background: var(--line);
}
.fmcsa-progress span {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--amber);
  animation: fmcsa-progress 1.4s ease-in-out infinite alternate;
}
@keyframes fmcsa-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(240%); }
}
.fmcsa-notice {
  display: grid;
  gap: .15rem;
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border-left: 4px solid;
  background: var(--panel);
}
.fmcsa-notice-warning { border-color: var(--amber); }
.fmcsa-notice-danger { border-color: var(--stop); }
.fmcsa-attention,
.fmcsa-carrier,
.fmcsa-primary-grid,
.fmcsa-activity,
.fmcsa-sources { margin-bottom: 1.5rem; }
.fmcsa-attention {
  padding: 1rem;
  background: var(--stop-tint);
  border-left: 4px solid var(--stop);
}
.fmcsa-section-heading {
  align-items: baseline;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.fmcsa-section-heading h2 {
  margin: 0;
  font-size: 1.35rem;
}
.fmcsa-condition-list,
.fmcsa-source-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fmcsa-condition {
  align-items: flex-start;
  padding: .85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stop) 25%, transparent);
}
.fmcsa-condition:last-child { border-bottom: 0; padding-bottom: 0; }
.fmcsa-condition p { margin: .15rem 0 0; }
.fmcsa-condition time { white-space: nowrap; font-size: .76rem; }
.fmcsa-carrier {
  align-items: end;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.fmcsa-carrier h2 { margin: 0; font-size: 1.8rem; }
.fmcsa-carrier-identity > p { margin: .15rem 0; color: var(--ink-soft); }
.fmcsa-identifier {
  margin-top: .5rem;
  color: var(--route-deep);
  font-family: var(--font-mono);
  font-weight: 600;
}
.fmcsa-carrier-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(8rem, auto));
  gap: 1rem 1.5rem;
  margin: 0;
}
.fmcsa-carrier-summary dt,
.fmcsa-fact-list dt {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
}
.fmcsa-carrier-summary dd { margin: .2rem 0 0; font-weight: 600; }
.fmcsa-status {
  padding: .34rem .55rem;
  border: 1px solid currentColor;
}
.fmcsa-status-ok { color: #1F6D3F; background: var(--go-tint); }
.fmcsa-status-warning { color: var(--amber-deep); background: var(--amber-tint); }
.fmcsa-status-danger { color: #8F2A20; background: var(--stop-tint); }
.fmcsa-status-unknown { color: var(--ink-soft); background: var(--line-soft); }
.fmcsa-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  gap: 2rem;
}
.fmcsa-fact-list { margin: 0; }
.fmcsa-fact-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1.15fr);
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.fmcsa-fact-list dd { margin: 0; font-weight: 600; }
.fmcsa-fact-list small,
.fmcsa-table-wrap td small {
  display: block;
  margin-top: .12rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 400;
}
.fmcsa-fact-danger { color: var(--stop); }
.fmcsa-fact-warning { color: var(--amber-deep); }
.fmcsa-fact-ok { color: #1F6D3F; }
.fmcsa-fact-unknown { color: var(--ink-soft); }
.fmcsa-table-wrap {
  margin-top: .75rem;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  contain: paint;
  touch-action: pan-x pan-y;
}
.fmcsa-table-wrap:focus-visible { outline-offset: 2px; }
.fmcsa-match { font-weight: 600; color: var(--route-deep); }
.fmcsa-source-list > li {
  align-items: start;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.fmcsa-source-times {
  display: grid;
  justify-items: end;
  gap: .25rem;
  min-width: 15rem;
  color: var(--ink-soft);
  font-size: .74rem;
}
.fmcsa-disclaimer {
  max-width: 62rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .82rem;
}
.fmcsa-disclaimer p { margin: .25rem 0; }

[data-theme="dark"] .fmcsa-read-only { color: #A9C6DE; }
[data-theme="dark"] .fmcsa-identifier,
[data-theme="dark"] .fmcsa-match { color: #98C4E0; }
[data-theme="dark"] .fmcsa-status-ok,
[data-theme="dark"] .fmcsa-fact-ok { color: #71D19A; }
[data-theme="dark"] .fmcsa-status-warning,
[data-theme="dark"] .fmcsa-fact-warning { color: #F4C77A; }
[data-theme="dark"] .fmcsa-status-danger,
[data-theme="dark"] .fmcsa-fact-danger { color: #F19A91; }

@media (max-width: 767.98px) {
  .fmcsa-heading,
  .fmcsa-carrier,
  .fmcsa-condition,
  .fmcsa-source-list > li { align-items: flex-start; flex-direction: column; }
  .fmcsa-carrier-summary,
  .fmcsa-primary-grid { grid-template-columns: 1fr; width: 100%; }
  .fmcsa-primary-grid { gap: 1.25rem; }
  .fmcsa-carrier-summary { gap: .75rem; }
  .fmcsa-fact-list > div { grid-template-columns: minmax(7rem, .7fr) 1.3fr; }
  .fmcsa-condition time { white-space: normal; }
  .fmcsa-source-times { justify-items: start; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fmcsa-progress span { animation: none; width: 100%; }
}

/* :not(.btn) matters more than it looks. This selector is (0,1,1) and
   Bootstrap's own `.btn { color: var(--bs-btn-color) }` is (0,1,0), so without
   the exclusion every ANCHOR styled as a button took link blue instead of its
   button colour -- 1.01:1 on an amber primary, which is invisible rather than
   merely low. Buttons that really are links keep the colour through their own
   .btn-link rule below. */
[data-theme="dark"] a:not(.btn) { color: #6FAAD6; }
[data-theme="dark"] a:not(.btn):hover { color: #98C4E0; }

[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--ink-2);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #1E262E;
  --bs-btn-hover-border-color: var(--line);
}
[data-theme="dark"] .btn-link { --bs-btn-color: #6FAAD6; }

[data-theme="dark"] .alert-info    { background: rgba(31,90,130,.2); color: #A9C6DE; border-color: rgba(31,90,130,.35); }
[data-theme="dark"] .alert-warning { background: rgba(227,147,17,.16); color: #F4C77A; border-color: rgba(227,147,17,.3); }
[data-theme="dark"] .alert-danger  { background: rgba(194,56,42,.16); color: #E9A79F; border-color: rgba(194,56,42,.32); }
[data-theme="dark"] .alert-success { background: rgba(36,142,81,.16); color: #7BC996; border-color: rgba(36,142,81,.32); }

[data-theme="dark"] .dashboard-summary .display-6 { color: var(--ink); }
[data-theme="dark"] .dashboard-summary .card-body > .text-muted:not(.small) { color: var(--ink-soft) !important; }
[data-theme="dark"] .dashboard-summary .text-success { color: #55C989 !important; }
[data-theme="dark"] .dashboard-summary .text-danger { color: #F27363 !important; }

[data-theme="dark"] .document-deadline-state-due_today {
  color: #0F1418;
}

[data-theme="dark"] .modal-content { background: var(--panel); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .modal-header { background: #1A2229; border-bottom-color: var(--line); }

[data-theme="dark"] .badge { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
[data-theme="dark"] code {
  background: rgba(31,90,130,.25);
  color: #A9C6DE;
}
[data-theme="dark"] .app-footer { border-top-color: var(--line); color: var(--ink-soft); }
[data-theme="dark"] .app-footer-sep { color: var(--line); }

[data-theme="dark"] .login-panel {
  background: linear-gradient(180deg, #0C1116 0%, #12181E 100%);
}
[data-theme="dark"] .login-form-wrap h2 { color: var(--ink); }
[data-theme="dark"] .login-form-wrap p.lead { color: var(--ink-soft); }
[data-theme="dark"] .login-hint { background: rgba(31,90,130,.2); color: var(--ink-2); }
[data-theme="dark"] .login-hint b { color: #A9C6DE; }

[data-theme="dark"] .dashboard-hero,
[data-theme="dark"] .analytics-hero { border-bottom-color: var(--amber); }

/* ==========================================================================
   Landing page — public marketing skin
   ========================================================================== */
body.landing-page { background: none; }
body.landing-page > nav.navbar,
body.landing-page > footer.app-footer { display: none !important; }
body.landing-page > .container-fluid { padding: 0 !important; max-width: none; }

.landing-shell {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 480px at 90% 0%, rgba(227,147,17,.12), transparent 60%),
    radial-gradient(ellipse 900px 420px at -5% 5%, rgba(31,90,130,.14), transparent 60%),
    linear-gradient(180deg, #0B0F13 0%, #131A20 45%, #182028 100%);
  color: #EDF1F5;
  overflow-x: hidden;
}
[data-theme="dark"] .landing-shell { background: linear-gradient(180deg, #08090C 0%, #0F1418 60%, #131A20 100%); }

/* ---- Nav ---- */
.landing-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.35rem 2.25rem;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(11, 15, 19, .6);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}
.landing-nav-links {
  display: flex; gap: 1.75rem;
  list-style: none; padding: 0; margin: 0 auto 0 1.25rem;
}
.landing-nav-links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .18s ease;
}
.landing-nav-links a:hover { color: #fff; }
.landing-cta { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; padding: .55rem 1.1rem; }
.landing-cta span { transition: transform .2s ease; display: inline-block; margin-left: .3rem; }
.landing-cta:hover span { transform: translateX(4px); }

/* ---- Hero ---- */
.landing-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
  padding: 4.5rem 3rem 5rem;
  max-width: 1440px;
  margin: 0 auto;
}
.landing-eyebrow, .landing-eyebrow-plain {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-2);
  font-size: .74rem;
}
.landing-eyebrow-plain { color: var(--amber); }
.landing-eyebrow .pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.landing-hero-copy h1 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 1rem 0 1.25rem;
}
.landing-hero-copy h1 .accent {
  background: linear-gradient(120deg, var(--amber-2) 0%, #FCD37D 60%, var(--amber-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}
.landing-lead {
  color: rgba(255,255,255,.75);
  font-size: 1.05rem;
  max-width: 46ch;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.landing-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.landing-primary-cta {
  padding: .95rem 1.6rem;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 8px;
}
.landing-secondary-cta {
  padding: .95rem 1.6rem;
  border-radius: 8px;
  --bs-btn-color: rgba(255,255,255,.8);
  --bs-btn-border-color: rgba(255,255,255,.2);
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: rgba(255,255,255,.3);
  --bs-btn-hover-color: #fff;
}
.landing-hero-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 44rem;
}
.landing-hero-proof > div {
  border-top: 2px solid var(--amber);
  padding-top: .55rem;
}
.landing-hero-proof b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
}
.landing-hero-proof span {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}

/* ---- Preview mockup ---- */
.landing-hero-visual {
  position: relative;
  perspective: 1400px;
}
.preview-window {
  transform: rotate3d(1, -2, 0, 8deg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.55),
    0 20px 40px -10px rgba(227,147,17,.15),
    0 0 0 1px rgba(255,255,255,.06);
  background: #151C22;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: rotate3d(1, -2, 0, 8deg) translateY(0); }
  50%      { transform: rotate3d(1, -2, 0, 8deg) translateY(-8px); }
}
.preview-chrome {
  background: linear-gradient(180deg, #1B2229 0%, #131A20 100%);
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.preview-chrome > span {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.14);
}
.preview-chrome > span:nth-child(1) { background: #E55A4F; }
.preview-chrome > span:nth-child(2) { background: #E6B040; }
.preview-chrome > span:nth-child(3) { background: #52C471; }
.preview-url {
  margin-left: auto;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  font-size: .7rem;
  padding: .2rem .8rem;
  border-radius: 6px;
  font-family: var(--font-mono);
}
.preview-body { padding: 1.1rem 1.2rem; }
.preview-hero {
  background: linear-gradient(120deg, #0F1418 0%, #1B2229 60%, #253039 100%);
  border: 1px solid rgba(255,255,255,.05);
  border-bottom: 2px solid var(--amber);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  color: #fff;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.preview-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 26px);
}
.preview-hero > * { position: relative; }
.preview-eyebrow {
  font-size: .58rem;
  letter-spacing: .16em;
  color: var(--amber-2);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
}
.preview-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  animation: pulse-dot 2s ease-in-out infinite;
}
.preview-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1;
  margin: .4rem 0 .55rem;
}
.preview-stats { display: flex; gap: 1.2rem; }
.preview-stats > div { display: flex; flex-direction: column; }
.preview-stats small {
  font-size: .55rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.preview-stats b { font-family: var(--font-display); font-size: 1.05rem; }
.preview-stats .up { color: #55C989; }

.preview-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}
.preview-tiles .tile {
  background: #1A2229;
  border: 1px solid rgba(255,255,255,.04);
  border-left: 3px solid var(--line);
  border-radius: 6px;
  padding: .55rem .65rem;
  color: #fff;
}
.preview-tiles .tile small {
  display: block;
  font-size: .55rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .15rem;
  font-weight: 700;
}
.preview-tiles .tile b { font-family: var(--font-display); font-size: 1.15rem; }
.preview-tiles .tile.ok    { border-left-color: var(--go); }
.preview-tiles .tile.stop  { border-left-color: var(--stop); }
.preview-tiles .tile.amber { border-left-color: var(--amber); }
.preview-tiles .tile.route { border-left-color: var(--route); }

.preview-chart {
  background: #1A2229;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 6px;
  padding: .6rem;
}
.preview-chart svg { width: 100%; height: 90px; }

.preview-badge {
  position: absolute;
  background: rgba(15, 20, 24, .92);
  border: 1px solid rgba(227,147,17,.4);
  border-radius: 10px;
  padding: .55rem .8rem;
  color: #fff;
  font-size: .72rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.5);
  animation: floatY 5s ease-in-out infinite;
}
.preview-badge b {
  display: block;
  color: var(--amber-2);
  letter-spacing: .12em;
  font-size: .62rem;
  margin-bottom: .15rem;
}
.preview-badge-1 { top: 10%; left: -3%; animation-delay: .5s; }
.preview-badge-2 { bottom: 12%; right: -4%; animation-delay: 1.6s; }

/* ---- Strip ---- */
.landing-strip {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.75rem 2rem;
  color: rgba(255,255,255,.35);
  font-size: .74rem;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap;
}

/* ---- Sections & type ---- */
.landing-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.landing-section-head h2 {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.05;
  margin: 1rem 0 .7rem;
}
.landing-section-head p {
  color: rgba(255,255,255,.6);
  font-size: 1rem;
  max-width: 48ch;
  margin: 0 auto;
}

/* ---- Features ---- */
.landing-features { padding: 5rem 3rem; max-width: 1440px; margin: 0 auto; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(227,147,17,.35);
  background: linear-gradient(180deg, rgba(227,147,17,.06) 0%, rgba(255,255,255,.02) 100%);
}
.feature-card h3 {
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .02em;
  margin: 1rem 0 .5rem;
}
.feature-card p {
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--icon) 22%, transparent);
  color: var(--icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--icon) 40%, transparent);
  position: relative;
}
.feature-icon::before {
  content: attr(data-glyph);
}

/* ---- How ---- */
.landing-how { padding: 4.5rem 3rem; max-width: 1440px; margin: 0 auto; }
.how-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  counter-reset: steps;
}
.how-steps li {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  position: relative;
}
.how-num {
  font-family: var(--font-display);
  color: var(--amber);
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: .04em;
}
.how-steps h3 {
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  margin: 1rem 0 .5rem;
}
.how-steps p {
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- Pricing ---- */
.landing-pricing { padding: 4.5rem 3rem; max-width: 1440px; margin: 0 auto; }
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.price-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.price-card-featured {
  border-color: var(--amber);
  background: linear-gradient(180deg, rgba(227,147,17,.13) 0%, rgba(227,147,17,.03) 100%);
  box-shadow: 0 20px 45px -20px rgba(227,147,17,.35);
  transform: scale(1.02);
}
.price-tier {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.badge-featured {
  background: var(--amber);
  color: var(--on-amber);
  padding: .15em .55em;
  font-size: .58rem;
  border-radius: 4px;
}
.price-figure {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: .1em;
}
.price-figure span { font-size: 1.4rem; color: var(--amber-2); margin-top: .35rem; }
.price-figure em { font-style: normal; font-size: .74rem; color: rgba(255,255,255,.5); align-self: flex-end; margin-left: .35rem; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .08em; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 auto; }
.price-card ul li {
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  padding: .35rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.price-card ul li:last-child { border-bottom: 0; }
.price-card ul li::before {
  content: "✓";
  color: var(--amber);
  margin-right: .5rem;
  font-weight: 700;
}
.price-card .btn { text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; padding: .65rem 1rem; }

/* ---- Final CTA ---- */
.landing-final {
  text-align: center;
  padding: 5rem 2rem;
  background:
    radial-gradient(ellipse 900px 340px at 50% 100%, rgba(227,147,17,.14), transparent 60%);
  border-top: 1px solid rgba(255,255,255,.06);
}
.landing-final h2 {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 22ch;
  margin: 0 auto 1rem;
}
.landing-final p {
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}
.landing-hint {
  margin-top: 1.5rem;
  color: rgba(255,255,255,.5);
  font-size: .82rem;
}
.landing-hint b { color: #fff; font-family: var(--font-mono); }

.landing-footer {
  padding: 2rem 3rem;
  color: rgba(255,255,255,.4);
  font-size: .78rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ---- Responsive ---- */
@media (max-width: 1023.98px) {
  .landing-hero { grid-template-columns: 1fr; padding: 3rem 1.5rem 4rem; }
  .landing-hero-visual { display: none; }
  .feature-grid, .how-steps, .price-grid { grid-template-columns: 1fr; }
  .landing-nav { padding: 1rem 1.25rem; gap: 1rem; }
  .landing-nav-links { display: none; }
  .landing-hero-proof { grid-template-columns: repeat(2, 1fr); }
}

/* The VIN-verified mark on vehicle detail. Uses --go, the palette's existing
   affirmative green, which is deliberately not redefined for dark mode -- the
   same green reads correctly on both surfaces. The SVG paints its circle with
   currentColor, so the colour lives here and the markup stays theme-agnostic. */
.vehicle-vin-value {
  overflow-wrap: anywhere;
}

.vin-verified {
  color: var(--go);
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin-left: .35rem;
}

.vin-state {
  display: inline-flex;
  align-items: center;
  margin-left: .4rem;
  padding: .2em .48em;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
  vertical-align: middle;
}

.vin-state-unchecked {
  background: var(--line-soft);
  color: var(--ink-soft);
}

.vin-state-not-checkable {
  background: var(--amber-tint);
  border-color: rgba(227, 147, 17, .35);
  color: var(--ink);
}

.vin-state-reason {
  display: block;
  max-width: 34rem;
  margin-top: .35rem;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.35;
}

/* Collapsed recall rows on vehicle detail. The marker is the affordance, so
   it stays; the row just needs to read as one line and be comfortable to hit
   on a phone rather than a 12px triangle. */
.recall-item > summary {
  cursor: pointer;
  padding: .15rem 0;
  list-style-position: outside;
}
.recall-item > summary::marker { color: var(--ink-soft); }
.recall-item[open] > summary { margin-bottom: .15rem; }

/* --------------------------------------------------------------------------
   Privileged operating-state rail

   Tenant identity is ordinary context and belongs in the navbar lockup.
   Staff-only and break-glass are operating states: a fixed three-pixel rail
   marks the viewport itself, with a compact text tab above all scrolling UI.
   -------------------------------------------------------------------------- */
body.has-org-banner {
  --org-state-offset: 1.75rem;
  padding-top: var(--org-state-offset);
}

body.has-org-banner > .navbar {
  top: var(--org-state-offset);
}

body.has-org-banner::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1090;
  border: 3px solid var(--amber);
  pointer-events: none;
}

body.is-break-glass::before {
  border-color: var(--stop);
}

.org-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 1091;
  display: flex;
  align-items: center;
  width: auto;
  max-width: calc(100vw - 12px);
  min-height: var(--org-state-offset);
  transform: translateX(-50%);
  font-size: .75rem;
  line-height: 1;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

.org-banner__inner {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: auto;
  min-width: 0;
  padding: .3rem .6rem;
  white-space: nowrap;
}

.org-banner__name {
  flex: 0 0 auto;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Amber, and solid rather than tinted: this must survive being glanced at. */
.org-banner--control {
  background: var(--amber);
  color: #1a1200;
}

.org-banner--control .org-banner__name {
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Break-glass: Roadframe staff inside a customer's organization (E6). --stop
   was reserved for this in E3 and is spent on nothing else. */
.org-banner--break-glass {
  background: var(--stop);
  color: #fff;
}

.org-banner--break-glass .org-banner__name {
  text-transform: uppercase;
  letter-spacing: .08em;
}

.org-banner__who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
}

.org-banner__leave {
  flex: 0 0 auto;
  margin-left: .2rem;
  display: inline;
}

.org-banner__button {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: inherit;
  font: inherit;
  font-size: .75rem;
  padding: .125rem .5rem;
  cursor: pointer;
}

.org-banner__button:hover,
.org-banner__button:focus-visible {
  background: rgba(255,255,255,.15);
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* ---- Phase 1: compact normal-state summaries ------------------------
   Vehicle Detail keeps identity and profile facts first. Maintenance is a
   pair of independently labelled summaries inside that profile; its full
   evidence remains available in native disclosures. Dashboard cards use the
   same footprint only when there is no row to act on. */
.vehicle-detail-page .vehicle-profile-maintenance {
  border-color: var(--line-soft) !important;
}

.vehicle-detail-page .vehicle-profile-maintenance > .d-flex {
  margin-bottom: .55rem;
}

.vehicle-detail-page .vehicle-profile-maintenance h3 {
  font-size: .9rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.vehicle-detail-page .vehicle-profile-maintenance .text-muted {
  max-width: 34rem;
}

.vehicle-detail-page .pm-summary-grid {
  --bs-gutter-x: .75rem;
}

.vehicle-detail-page .pm-panel-compact {
  min-width: 0;
  padding: .25rem .15rem .55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.vehicle-detail-page .pm-panel-compact > .d-flex {
  margin-bottom: .15rem !important;
}

.vehicle-detail-page .pm-panel-compact > .d-flex > strong {
  font-size: .77rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vehicle-detail-page .pm-panel-compact .pm-compact-answer {
  margin: 0;
  color: var(--ink);
  font-size: .84rem;
  line-height: 1.35;
}

.vehicle-detail-page .pm-panel-compact .pm-compact-answer strong {
  font-variant-numeric: tabular-nums;
}

.vehicle-detail-page .pm-panel-compact .pm-compact-answer-unknown {
  color: var(--ink-soft);
}

.vehicle-detail-page .pm-panel-compact .pm-details {
  border-top: 1px solid var(--line-soft);
  padding-top: .35rem;
}

.vehicle-detail-page .pm-panel-compact .pm-details summary {
  color: var(--route);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 650;
}

.vehicle-detail-page .pm-panel-compact .pm-details summary:focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

.vehicle-detail-page .pm-panel-compact .pm-details-body {
  padding-top: .7rem;
}

.vehicle-detail-page .pm-panel-compact .pm-details-body .pm-answer {
  display: none;
}

.vehicle-detail-page .pm-panel-compact .pm-details[open] .pm-facts > dd {
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-compact-panel {
  min-height: 0;
  align-self: flex-start;
  flex: 0 0 auto !important;
  height: auto !important;
  width: 100%;
}

.dashboard-compact-panel .dashboard-compact-body {
  display: flex;
  align-items: center;
  min-height: 4.1rem;
  padding: .75rem .95rem;
  color: var(--ink-soft);
}

.dashboard-compact-panel .dashboard-compact-body p {
  max-width: 58rem;
  line-height: 1.4;
}


.vehicle-detail-page .vehicle-cost-summary .card-body {
  padding-block: .8rem;
}

.vehicle-detail-page .vehicle-cost-summary .display-6 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.12;
}

@media (max-width: 767.98px) {
  .vehicle-detail-page .pm-summary-grid {
    row-gap: .7rem;
  }

  .vehicle-detail-page .pm-panel-compact {
    width: 100%;
  }

  .vehicle-detail-page .pm-panel-compact .pm-details[open] .pm-facts > dd {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .dashboard-compact-panel .dashboard-compact-body {
    min-height: 3.5rem;
    padding: .65rem .8rem;
  }
}

/* The normal vehicle snapshot is a short operational read, not a four-row
   report. Keep two labelled columns on a phone; the action shares the compact
   grid, and long provider values may wrap rather than widening the page. */
.vehicle-detail-page .razor-telemetry-normal .razor-telemetry-body {
  gap: .6rem .85rem;
  padding-block: .65rem;
}

.vehicle-detail-page .razor-telemetry-normal .razor-telemetry-body > div {
  min-width: 0;
}

.vehicle-detail-page .razor-telemetry-normal .razor-telemetry-body strong,
.vehicle-detail-page .razor-telemetry-normal .razor-telemetry-body time {
  overflow-wrap: anywhere;
}

.vehicle-detail-page .pm-compact-qualification {
  border-left: 2px solid var(--line-soft);
  padding-left: .55rem;
  color: var(--ink-soft) !important;
  line-height: 1.35;
}

.vehicle-detail-page .pm-compact-qualification strong {
  color: var(--ink);
  font-weight: 650;
}

@media (max-width: 767.98px) {
  .vehicle-detail-page .razor-telemetry-normal .razor-telemetry-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vehicle-detail-page .razor-telemetry-normal .telemetry-overview-action {
    align-self: end;
    min-width: 0;
  }

  .vehicle-detail-page .razor-telemetry-normal .telemetry-overview-action .btn {
    max-width: 100%;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Phase 3 — Analytics and Location Detail
   Normal analytical information is a quiet ledger. Amber marks the page
   edge; it does not turn every metric into an alert.
   ========================================================================== */
.analytics-page .analytics-hero {
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  margin-bottom: 1rem !important;
  padding: 1rem 1.25rem 1.1rem;
}
.analytics-page .analytics-hero::before { display: none; }
.analytics-page .analytics-hero-copy { min-width: 0; }
.analytics-page .analytics-hero-title {
  color: var(--ink);
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  text-transform: none;
}
.analytics-page .analytics-hero-branch { color: var(--route-deep); }
.analytics-page .analytics-hero-meta {
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.45;
  margin-top: .45rem;
  max-width: 68rem;
}
.analytics-page .analytics-hero-meta strong { color: var(--ink); }
.analytics-page .analytics-filters .form-select-sm {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.analytics-page .analytics-filters .form-select-sm:focus {
  background: var(--panel);
  color: var(--ink);
}
.analytics-page .analytics-scope-note {
  border-left: 2px solid var(--line);
  margin: -.25rem 0 1rem;
  max-width: 72rem;
  padding-left: .65rem;
  line-height: 1.45;
}
.analytics-page .analytics-panel,
.analytics-page .analytics-section {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.analytics-page .analytics-panel .card-header,
.analytics-page .analytics-section .card-header {
  background: var(--panel);
  border-bottom-color: var(--line-soft);
  box-shadow: inset 3px 0 0 var(--route);
  min-width: 0;
}
.analytics-page .analytics-panel-meta,
.analytics-page .location-panel-meta {
  flex: 0 1 auto;
  line-height: 1.35;
  text-align: right;
}
.analytics-page .analytics-section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0;
}
.analytics-page .analytics-section-intro {
  line-height: 1.45;
  max-width: 76rem;
}
.analytics-page .analytics-methodology {
  border-top: 1px solid var(--line-soft);
  color: var(--ink-soft);
  padding-top: .6rem;
}
.analytics-page .analytics-methodology summary {
  color: var(--route);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
  width: max-content;
}
.analytics-page .analytics-methodology summary:hover { text-decoration: underline; }
.analytics-page .analytics-methodology summary:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.analytics-page .analytics-methodology p {
  line-height: 1.5;
  margin: .65rem 0 0;
  max-width: 76rem;
}
.analytics-page .analytics-panel .table-responsive,
.analytics-page .analytics-section .table-responsive {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.analytics-page .analytics-panel .table,
.analytics-page .analytics-section .table {
  margin-bottom: 0;
}

.location-detail-page .location-detail-shell {
  max-width: 94rem;
  margin-inline: auto;
}
.location-detail-page .location-header {
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  display: flex;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  padding: 1rem 1.25rem 1.1rem;
}
.location-detail-page .location-header-copy { min-width: 0; }
.location-detail-page .location-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  line-height: 1.05;
  margin: .15rem 0 .4rem;
  overflow-wrap: anywhere;
}
.location-detail-page .location-address,
.location-detail-page .location-phone {
  color: var(--ink-soft);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.location-detail-page .location-phone { margin-top: .15rem; }
.location-detail-page .location-header-actions { flex: 0 0 auto; }
.location-detail-page .location-identity-panel,
.location-detail-page .location-spend-panel {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.location-detail-page .location-identity-panel .card-header,
.location-detail-page .location-spend-panel .card-header {
  background: var(--panel);
  border-bottom-color: var(--line-soft);
  box-shadow: inset 3px 0 0 var(--route);
}
.location-detail-page .location-section-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.15;
}
.location-detail-page .location-identity-grid {
  align-items: stretch;
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(13rem, .75fr);
}
.location-detail-page .location-facts {
  display: grid;
  gap: .7rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.location-detail-page .location-facts > div { min-width: 0; }
.location-detail-page .location-facts dt {
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 650;
  margin-bottom: .15rem;
}
.location-detail-page .location-facts dd {
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.location-detail-page .location-vehicle-summary,
.location-detail-page .location-spend-total {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--route);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: .9rem 1rem;
}
.location-detail-page .location-summary-label {
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.3;
}
.location-detail-page .location-summary-value,
.location-detail-page .location-total-value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.05;
  margin-top: .25rem;
  overflow-wrap: anywhere;
}
.location-detail-page .location-spend-total {
  border-left-color: var(--amber);
  margin-bottom: 1rem;
  max-width: 32rem;
}
.location-detail-page .location-spend-total .text-muted { line-height: 1.4; }
.location-detail-page .location-spend-state {
  border-left: 2px solid var(--line);
  line-height: 1.45;
  margin: 0 0 1rem;
  padding-left: .65rem;
}
.location-detail-page .location-spend-summary {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.location-detail-page .location-spend-summary-row {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  display: flex;
  gap: .8rem;
  justify-content: space-between;
  min-width: 0;
  padding: .7rem .8rem;
}
.location-detail-page .location-spend-summary-row > span { min-width: 0; }
.location-detail-page .location-spend-summary-row strong,
.location-detail-page .location-spend-summary-row small {
  display: block;
  overflow-wrap: anywhere;
}
.location-detail-page .location-spend-summary-row small {
  color: var(--ink-soft);
  line-height: 1.35;
  margin-top: .15rem;
}
.location-detail-page .location-summary-amount {
  color: var(--ink);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.location-detail-page .location-spend-breakdown {
  border-top: 1px solid var(--line-soft);
  padding-top: .65rem;
}
.location-detail-page .location-spend-breakdown > summary {
  color: var(--route);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
  width: max-content;
}
.location-detail-page .location-spend-breakdown > summary:hover { text-decoration: underline; }
.location-detail-page .location-spend-breakdown > summary:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.location-detail-page .location-breakdown-content { padding-top: .7rem; }
.location-detail-page .location-breakdown-content > p {
  line-height: 1.45;
  max-width: 76rem;
}
.location-detail-page .location-breakdown-content .table-responsive {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.location-detail-page .location-breakdown-content table { min-width: 48rem; }
.location-detail-page .location-breakdown-content th,
.location-detail-page .location-breakdown-content td { vertical-align: top; }

@media (max-width: 767.98px) {
  .analytics-page .analytics-hero,
  .location-detail-page .location-header {
    margin-inline: -.75rem;
    padding-inline: .95rem;
  }
  .analytics-page .analytics-hero { gap: .85rem; }
  .analytics-page .analytics-filters { width: 100%; }
  .analytics-page .analytics-filters .form-select-sm {
    flex: 1 1 12rem;
    min-width: 0;
  }
  .analytics-page .analytics-panel-meta,
  .analytics-page .location-panel-meta { text-align: left; }
  .analytics-page .analytics-panel .card-header { align-items: flex-start !important; flex-direction: column; }
  .analytics-page .analytics-section .card-header { align-items: flex-start !important; flex-direction: column; }
  .location-detail-page .location-header { flex-direction: column; }
  .location-detail-page .location-header-actions { width: 100%; }
  .location-detail-page .location-identity-grid { grid-template-columns: 1fr; }
  .location-detail-page .location-spend-summary { grid-template-columns: 1fr; }
  .location-detail-page .location-spend-panel .card-header { align-items: flex-start !important; }
  .location-detail-page .location-period-form { width: 100%; }
  .location-detail-page .location-period-form .form-select { flex: 1 1 auto; }
}

@media (max-width: 479.98px) {
  .analytics-page .analytics-hero-title,
  .location-detail-page .location-title { font-size: 1.7rem; }
  .analytics-page .analytics-hero-meta { font-size: .8rem; }
  .location-detail-page .location-facts { grid-template-columns: 1fr; }
  .location-detail-page .location-header-actions { flex-wrap: wrap; }
  .location-detail-page .location-header-actions .btn,
  .location-detail-page .location-header-actions form { flex: 1 1 auto; }
  .location-detail-page .location-header-actions form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-page *,
  .location-detail-page * { animation: none !important; transition: none !important; }
}

/* Vehicle Detail density correction: the profile is the working surface, so
   it should consume the available grid width. Optional read-only facts are
   omitted by the template when no value exists; edit controls remain present
   in the editor regardless of the stored value. */
.vehicle-detail-page .vehicle-detail-core > .col-12 {
  min-width: 0;
}

.vehicle-detail-page .vehicle-profile-telemetry-intent {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line-soft);
}

.vehicle-detail-page .vehicle-profile-telemetry-intent h3 {
  margin: 0 0 .2rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.vehicle-detail-page .vehicle-profile-telemetry-intent p {
  max-width: 58rem;
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.4;
}

.vehicle-detail-page .vehicle-profile-telemetry-intent strong {
  color: var(--ink);
}

.vehicle-detail-page .vehicle-profile-telemetry-intent.is-setup {
  border-left: 2px solid var(--line);
  padding-left: .7rem;
}

.form-card-wide .vehicle-telemetry-intent-editor {
  border-top: 1px solid var(--line-soft);
  margin-top: .25rem;
  padding-top: 1rem;
}

.form-card-wide .vehicle-telemetry-intent-editor legend {
  float: none;
  width: auto;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .vehicle-detail-page .vehicle-profile-telemetry-intent {
    flex-direction: column;
  }

  .vehicle-detail-page .vehicle-profile-telemetry-intent .btn {
    align-self: flex-start;
  }
}