/* ================================================================
   FLEET MOT CONTROL PANEL — MASTER STYLESHEET
   Theme: Inter · Clean white · White cards · #10161F sidebar
================================================================ */


/* -------------------------------------------------------
   DESIGN TOKENS
------------------------------------------------------- */
:root {
  /* Brand — deep navy instrument-panel sidebar */
  --brand-navy:    #10161F;
  --brand-navy-2:  #16243A;

  /* Nav bar */
  --nav-bg:        #10161F;
  --nav-border:    #0A0E15;
  --nav-text:      #f0f4f8;
  --nav-btn-bg:    #16243A;
  --nav-btn-hover: #1C2C46;
  --nav-btn-bdr:   #263243;
  --nav-btn-bdr-h: #6E9BF7;

  /* Page background — clean white, cool-tinted neutral */
  --page-bg:       #EDF1F6;
  --card-bg:       #FFFFFF;
  --card-border:   #DCE3EC;
  --card-shadow:   0 1px 3px rgba(16,22,31,0.06), 0 8px 24px rgba(16,22,31,0.08);

  /* Buttons — sky primary */
  --btn-bg:        #2F6FED;
  --btn-hover:     #1E4FC4;
  --btn-text:      #FFFFFF;
  --btn-border:    #1E4FC4;
  --btn-bdr-hover: #17398F;

  /* Text */
  --text-primary:  #131B26;
  --text-muted:    #5B6B81;
  --text-light:    #D1D5DB;

  /* Accents */
  --accent-blue:   #2F6FED;
  --sky-tint:      #E7EFFE;
  --accent-teal:   #0D9488;
  --accent-teal-tint: #E1F5F2;
  --accent-green:  #10B981;
  --accent-amber:  #F59E0B;
  --accent-yellow: #F59E0B;
  --accent-red:    #F75555;

  /* Fonts — Inter/Segoe for UI text, monospace for anything counted
     (stat numbers, table figures, VRMs) so digits line up like a gauge */
  --font-mono: "Cascadia Mono", "JetBrains Mono", ui-monospace, "Consolas", monospace;


  /* Form fields */
  --field-bg:      #FFFFFF;
  --field-border:  #CBD5E1;

  /* Table rows */
  --table-row-bg:    #FFFFFF;
  --table-row-alt:   #F8FAFC;
  --table-row-hover: #EFF6FF;
  --table-cell-line: #F0F2F8;

  /* Secondary/neutral button + chip surface */
  --surface-2:       #F1F5F9;
  --surface-2-hover: #E2E8F0;

  /* Filled status pills */
  --pill-ok-bg:       #DCFCE7; --pill-ok-fg:       #047857;
  --pill-soon-bg:     #FEF3C7; --pill-soon-fg:     #B45309;
  --pill-expired-bg:  #FCE7ED; --pill-expired-fg:  #BE123C;
  --pill-sorn-bg:     #EAEEF3; --pill-sorn-fg:     #5B6B81;
  --pill-info-bg:     #E7EFFE; --pill-info-fg:     #1E4FC4;

  /* Footer */
  --footer-bg:     #FFFFFF;
  --footer-border: #DCE3EC;
  --footer-text:   #131B26;
  --footer-muted:  #5B6B81;

  /* Select arrow */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");

  /* Background-image overlay tint (behind the page photo) */
  --bg-overlay-tint: rgba(245, 247, 250, 0.55);

  /* Heatmap palette */
  --hm-fail:     #991B1B;
  --hm-fail-txt: #FEE2E2;
  --hm-warn:     #92400E;
  --hm-warn-txt: #FEF3C7;
  --hm-caution:  #78350F;
  --hm-caut-txt: #FEF3C7;
  --hm-info:     #1E4FC4;
  --hm-info-txt: #DBEAFE;
  --hm-ok:       #065F46;
  --hm-ok-txt:   #D1FAE5;
  --hm-prs:      #92400E;
  --hm-prs-txt:  #FEF3C7;
}

/* -------------------------------------------------------
   RESET
------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  height: 100%;
  background-color: var(--page-bg);
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Background image — fills content area only (not behind sidebar).
   background-attachment: fixed sizes the image to the viewport and keeps it
   stationary while only the #main-content box clips what's visible, so the
   sidebar area stays unaffected on desktop. */
#main-content {
  background-image:
    linear-gradient(var(--bg-overlay-tint), var(--bg-overlay-tint)),
    url("background.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--page-bg);
}

html.no-bg #main-content { background-image: none; }

#help-sidebar,
#main-content {
  position: relative;
  z-index: 1;
}

/* Footer container: isolated at z-index 0 so popups (z-index 9999) always paint above it.
   The footer itself still sits above the dimming overlay via DOM order. */
#footer-mount {
  position: relative;
  z-index: 0;
}


/* -------------------------------------------------------
   PAGE LAYOUT
------------------------------------------------------- */
#main-content,
#footer-mount {
  transition: margin-left 0.28s cubic-bezier(0.4,0,0.2,1);
}

#main-content {
  flex: 1 0 auto;
}

/* Mobile: push content when drawer opens */
body.drawer-open #main-content,
body.drawer-open #footer-mount {
  margin-left: 240px;
}

footer.mot-footer {
  flex-shrink: 0;
}

/* -------------------------------------------------------
   APP SPLASH SCREEN
------------------------------------------------------- */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #F5F7FA;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease;
}
#app-splash.splash-out {
  opacity: 0;
  pointer-events: none;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.splash-logo {
  width: 300px;
  height: auto;
  margin: 0 0 36px;
}
/* Preserved — unused until dark splash is re-enabled */
.splash-brand {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(30, 41, 59, 0.4);
  margin: 0 0 10px;
}
.splash-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.splash-tricolor {
  width: 160px;
  height: 3px;
  background: linear-gradient(to right, #ffa400 0% 33.333%, #0077c8 33.333% 66.667%, #1da17e 66.667% 100%);
  border-radius: 2px;
  margin: 0 0 36px;
}
.splash-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E2E8F0;
  border-top-color: var(--accent-blue, #2F6FED);
  border-radius: 50%;
  animation: splash-spin 0.75s linear infinite;
  margin: 0 0 14px;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
.splash-status {
  font-size: 0.75rem;
  color: var(--text-muted, #6B7280);
  min-height: 18px;
  margin: 0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

/* -------------------------------------------------------
   FLEET OVERVIEW LOADER OVERLAY
------------------------------------------------------- */
.ov-loader {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(245, 247, 250, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.ov-loader.hidden {
  display: none;
}
.ov-loader.ov-loader-out {
  opacity: 0;
  pointer-events: none;
}
.ov-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
}
.ov-loader-logo {
  width: 220px;
  height: auto;
  margin: 0 0 28px;
}
.ov-loader-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------
   TOP NAV — slim page-title bar
------------------------------------------------------- */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 8px rgba(0,0,0,0.18);
  transition: margin-left 0.28s cubic-bezier(0.4,0,0.2,1);
}

.top-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-nav-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mot-logo {
  height: 38px;
  width: auto;
  filter: none;
}

.govuk-header__title {
  color: var(--nav-text);
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0.9;
}

/* Hamburger / nav burger */
.nav-burger-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
  min-width: unset;
  padding: 0;
}
.nav-burger-btn:hover { background: rgba(255,255,255,0.18); }

/* -------------------------------------------------------
   SIDEBAR — persistent on desktop, slide-out on mobile
------------------------------------------------------- */
#nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1998;
  background: rgba(0,0,0,0.45);
}
#nav-drawer-overlay.open { display: block; }

#nav-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 240px;
  height: 100vh;
  background: var(--brand-navy);
  z-index: 1999;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: visible;
  box-shadow: 4px 0 28px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
#nav-drawer.open { transform: translateX(0); }

/* Desktop — persistent sidebar, top bar hidden */
@media (min-width: 800px) {
  #nav-drawer {
    transform: translateX(0) !important;
    transition: width 0.22s ease;
    box-shadow: 1px 0 0 rgba(255,255,255,0.05);
  }
  #nav-drawer-overlay { display: none !important; }
  .nav-drawer-close   { display: none !important; }
  #nav-burger         { display: none !important; }
  .top-nav-left       { display: none !important; }  /* sidebar owns nav/title; only the scope pill survives on desktop */
  .top-nav            { justify-content: flex-end; padding: 8px 20px; }
  #main-content, #footer-mount { margin-left: 240px; }
  body.drawer-open #main-content,
  body.drawer-open #footer-mount { margin-left: 240px; }
}

/* ── Sidebar top bar — burger only row ───────────────── */
.sidebar-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 4px;
  flex-shrink: 0;
}

/* ── Sidebar brand header — logo only ────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sidebar-brand-link {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  flex: 1; min-width: 0;
}
.sidebar-logo { width: 160px; height: auto; max-height: 100px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.75; }
.sidebar-brand-name {
  font-size: 0.95rem; font-weight: 800; color: #fff; letter-spacing: -0.01em;
}

/* ── Nav links ────────────────────────────────────── */
.nav-drawer-body { padding: 8px 0 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(30,41,59,0.15) transparent; }
.nav-drawer-section { margin-bottom: 2px; }

.nav-drawer-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.60);
  padding: 14px 16px 4px;
}

.nav-drawer-label-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-drawer-label-text svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }

.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 1px 8px;
  border-radius: 8px;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  font-size: 0.845rem;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav-drawer-link svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.12s;
}
.nav-drawer-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.nav-drawer-link:hover svg { opacity: 1; }
.nav-drawer-link.active {
  background: rgba(47,111,237,0.20);
  color: #fff;
  font-weight: 600;
  border-left: 2px solid var(--nav-btn-bdr-h);
  padding-left: 10px;
}
.nav-drawer-link.active svg { opacity: 1; }
.nav-drawer-link--signout { color: rgba(255,180,180,0.65); }
.nav-drawer-link--signout:hover { background: rgba(220,50,50,0.15); color: #ffaaaa; }

/* ── Icon-enhanced buttons ────────────────────────── */
.btn svg, button svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: block;
}
.btn-icon {
  min-width: unset;
  padding: 9px 10px;
  gap: 0;
}
/* icon + text gap handled by flex gap in button */
button, .btn { gap: 7px; }

.nav-drawer-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 8px 12px;
}

/* ── Sidebar footer ───────────────────────────────── */
.sidebar-footer {
  flex-shrink: 0;
  padding: 0 0 8px;
}
.sidebar-bg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 1px 8px;
  border-radius: 8px;
}
.sidebar-bg-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.845rem;
  color: rgba(255,255,255,0.60);
  font-weight: 500;
}
.sidebar-bg-label svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Close button (mobile only — hidden on desktop via media query) */
.nav-drawer-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  border-radius: 6px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  min-width: unset; padding: 0;
  transition: background 0.12s;
}
.nav-drawer-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ── Sidebar collapse toggle (desktop only) ──────────────── */
.sidebar-collapse-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  min-width: unset;
  padding: 0;
}

.sidebar-collapse-btn svg { width: 16px; height: 16px; }
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }

@media (min-width: 800px) { .sidebar-collapse-btn { display: flex; } }

/* ── Sidebar account header (expandable, top of nav) ──────── */
.sidebar-account-header {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sidebar-account-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px 10px 12px;
  background: none;
  border: none;
  border-radius: 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.845rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  min-width: unset;
  transition: background 0.12s;
  letter-spacing: 0;
  line-height: 1.3;
}

.sidebar-account-toggle:hover { background: rgba(255,255,255,0.07); color: #fff; }

.sidebar-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-account-avatar svg { width: 16px; height: 16px; opacity: 0.80; }

.sidebar-account-name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.25;
}

.sidebar-account-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.sidebar-account-chevron svg {
  width: 14px;
  height: 14px;
  opacity: 0.45;
  transition: transform 0.20s ease;
}

.sidebar-account-toggle.account-open .sidebar-account-chevron svg {
  transform: rotate(90deg);
}

/* Expandable panel — hidden by default */
.sidebar-account-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}

.sidebar-account-panel.open { max-height: 200px; }

.sidebar-account-panel .nav-drawer-link {
  font-size: 0.82rem;
}

/* Sign-in row (shown when logged out) */
.sidebar-account-login {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 4px 0;
}

/* -------------------------------------------------------
   HELP SIDEBAR
------------------------------------------------------- */
#help-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 100vh;
  background-color: var(--brand-navy);
  color: #F2F4F7;
  border-right: 3px solid #0e1828;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: 9999;
}

#help-sidebar.open { transform: translateX(0); }

.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.help-header h2 { margin: 0; font-size: 1.2rem; color: #F2F4F7; }

.help-close-btn {
  background: none;
  border: 1px solid #254474;
  color: #F2F4F7;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s;
  min-width: unset;
}

.help-close-btn:hover { background-color: #254474; }

#help-sidebar details {
  background-color: #1e3351;
  border: 1px solid #0e1828;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

#help-sidebar summary {
  cursor: pointer;
  color: #F2F4F7;
  font-weight: 600;
  list-style: none;
  padding: 2px 0;
}

#help-sidebar summary::-webkit-details-marker { display: none; }
#help-sidebar summary::before { content: '▶ '; font-size: 0.75em; opacity: 0.7; }
#help-sidebar details[open] summary::before { content: '▼ '; }
#help-sidebar summary:hover { color: #C9D7E3; }

#help-sidebar p, #help-sidebar li {
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.5;
}

#help-sidebar ul { margin: 6px 0 0; padding-left: 18px; }

.help-content .govuk-heading-s { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }

/* -------------------------------------------------------
   APP WRAPPER
------------------------------------------------------- */
.app {
  width: 100%;
  padding: 28px 32px;
}

.app-main {
  width: 100%;
  max-width: 100%;
}

/* -------------------------------------------------------
   CARDS
------------------------------------------------------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  margin-bottom: 24px;
  position: relative;
}


.card h2 { margin-top: 0; margin-bottom: 6px; font-size: 1.5rem; font-weight: 700; }

.card-hint { margin-top: 2px; margin-bottom: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

/* -------------------------------------------------------
   SECTION TITLE / UNDERLINE
------------------------------------------------------- */
.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.section-title i[data-lucide] { flex-shrink: 0; }

.section-underline {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--card-border), transparent);
  margin-bottom: 20px;
}

/* ── Standalone page header (outside any card) ─────── */
.page-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 10px;
  flex-wrap: wrap;
}
.page-hd > :first-child { flex: 1; min-width: 0; }
.page-hd .section-title { font-size: 1.2rem; }
.page-hd .card-hint { margin-top: 3px; }

/* Card header — title + hint left, action buttons right */
.card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.card-hd > div:first-child { flex: 1; min-width: 0; }
.card-hd .card-hint { margin-bottom: 0; }

.section-bar {
  width: 100%;
  background: var(--brand-navy);
  padding: 14px 20px;
  margin: 20px 0;
  border-radius: 10px;
  color: #F2F4F7;
  box-shadow: 0 2px 8px rgba(30,41,59,0.18);
}

.section-bar h2 { margin: 0; font-size: 1.3rem; font-weight: 700; color: #F2F4F7; }

/* -------------------------------------------------------
   BUTTONS — unified muted nav-bar style
------------------------------------------------------- */
button, .btn, .govuk-button {
  appearance: none;
  cursor: pointer;
  padding: 9px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  letter-spacing: 0.01em;
}

/* A bare <button> with no .btn class defaults to the same neutral grey as
   .btn.secondary below, not the primary-action blue — only something
   explicitly marked .btn (or .govuk-button) is meant to read as the main
   call-to-action on a page and gets the blue treatment. Without this split,
   any plain unstyled button (icon toggles, close buttons, etc.) picks up
   the primary blue by accident, which is what happened to the nav bar's
   section-collapse toggles. */
button {
  border: 1px solid var(--field-border);
  background-color: var(--surface-2);
  color: var(--text-primary);
}
button:hover {
  background-color: var(--surface-2-hover);
  border-color: #94A3B8;
}

.btn, .govuk-button {
  border: 1px solid var(--btn-border);
  background-color: var(--btn-bg);
  color: var(--btn-text);
}
.btn:hover, .govuk-button:hover {
  background-color: var(--btn-hover);
  border-color: var(--btn-bdr-hover);
}

button:active, .btn:active, .govuk-button:active { transform: scale(0.97); }

.btn:disabled, .govuk-button:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover, .govuk-button:disabled:hover {
  background-color: var(--btn-bg);
  border-color: var(--btn-border);
}
.btn.secondary:disabled:hover, .govuk-button--secondary:disabled:hover {
  background-color: var(--surface-2);
  border-color: var(--field-border);
}

button:focus-visible, .btn:focus-visible, .govuk-button:focus-visible,
a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.btn.secondary, .govuk-button--secondary {
  background-color: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--field-border);
}

.btn.secondary:hover, .govuk-button--secondary:hover {
  background-color: var(--surface-2-hover);
  border-color: #94A3B8;
}

.btn.danger {
  background-color: #DC2626;
  border-color: #B91C1C;
  color: #fff;
}
.btn.danger:hover { background-color: #B91C1C; border-color: #991B1B; }

.btn.success {
  background-color: #059669;
  border-color: #047857;
  color: #fff;
}
.btn.success:hover { background-color: #047857; border-color: #065f46; }

.btn.sm {
  padding: 4px 10px;
  font-size: 0.78rem;
  min-width: unset;
  border-radius: 4px;
}

.govuk-button--warning {
  background-color: var(--accent-yellow);
  color: var(--text-primary);
  border-color: #d49000;
}

.govuk-button--warning:hover { background-color: #d49000; }

/* -------------------------------------------------------
   FORM ELEMENTS
------------------------------------------------------- */
.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  align-items: flex-start;
}

.form-row-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.form-row-vertical .govuk-label { font-weight: 600; font-size: 16px; }
.form-row-vertical .govuk-select { max-width: 100%; width: 100%; }

input[type="text"],
input[type="file"],
textarea,
.govuk-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
textarea:focus,
.govuk-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.12);
}

textarea, .govuk-textarea { resize: vertical; width: 100%; }

.govuk-select {
  height: 42px;
  padding: 8px 12px;
  font-size: 0.95rem;
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.govuk-select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,237,0.12); }

/* Baseline for every plain <select> in the app — .govuk-select above exists
   but went almost unused, so most pages hand-rolled their own select CSS
   (different heights/padding/radius) instead. This is the real fix: style
   the element itself, so new selects are consistent by default. Compact
   inline-styled selects (dense admin toolbars, per-row table selects) keep
   their own sizing — inline styles and more specific page rules still win. */
select {
  height: 42px;
  padding: 8px 12px;
  font-size: 0.95rem;
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,111,237,0.12); }

.large-input { height: 48px; font-size: 18px; }

.vrm-input-wrapper { position: relative; flex: 1; display: flex; }

/* VRM hero search bar */
.vrm-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #F8FAFC;
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  padding: 6px 8px 6px 16px;
  margin-bottom: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vrm-search-bar:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.10);
  background: #FFFFFF;
}
.vrm-search-bar input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 7px 4px;
  box-shadow: none;
  outline: none;
}
.vrm-search-bar input::placeholder {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.vrm-search-bar input:focus { box-shadow: none; border: none; }
.vrm-search-bar .btn { min-width: 80px; padding: 8px 16px; font-size: 0.85rem; }
.vrm-search-bar .btn.secondary { min-width: unset; padding: 8px 12px; }

#singleVrmInput { flex: 1; width: 100%; padding-right: 36px; text-transform: uppercase; }
#bulkVrmTextarea { text-transform: uppercase; }

.clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #C5CAD0;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-width: unset;
}

.clear-btn.hidden { display: none; }

.govuk-label { font-weight: 600; font-size: 1rem; margin-bottom: 4px; display: block; }
.govuk-hint  { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }

/* -------------------------------------------------------
   PHASE BANNER
------------------------------------------------------- */
.phase-banner { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 6px; }
.phase-tag { background: var(--accent-blue); color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; }

/* -------------------------------------------------------
   STAT CARDS
------------------------------------------------------- */
.mot-stats-container { margin-top: 20px; }

.mot-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--accent-blue);
  border-radius: 12px;
  padding: 20px 16px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(30,41,59,0.05);
}

.stat-number {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.stats-bar { display: flex; gap: 16px; margin-bottom: 24px; }

.stat {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: var(--card-shadow);
}

.stat-value { font-size: 1.4rem; font-weight: 700; margin-top: 4px; }

/* -------------------------------------------------------
   HEALTH SCORE
------------------------------------------------------- */
.health-score { margin-top: 20px; padding: 14px; border-radius: 6px; font-weight: bold; }
.health-score.good { background: #dff0d8; color: var(--accent-green); }
.health-score.ok   { background: #fff3cd; color: #8a6d3b; }
.health-score.bad  { background: #f8d7da; color: #721c24; }

/* -------------------------------------------------------
   RESULT / MESSAGE PANELS
------------------------------------------------------- */
.result-panel {
  margin-top: 12px;
  font-size: 0.95rem;
  /* No max-height or overflow — content displays fully, no scroll */
}

.message-area { font-size: 0.95rem; min-height: 40px; margin-bottom: 16px; }

.message { padding: 12px 14px; border-radius: 6px; margin-bottom: 10px; font-size: 0.9rem; }
.message.info    { background: #e7f0f8; border-left: 5px solid var(--accent-blue); }
.message.error   { background: #fbeae9; border-left: 5px solid var(--accent-red); }
.message.success { background: #e6f4ea; border-left: 5px solid var(--accent-green); }
.message.warning { background: #fef9c3; border-left: 5px solid var(--accent-amber); }

/* -------------------------------------------------------
   STATUS MESSAGE — page-level inline status div
   Use .status-msg as the container; JS adds/removes type class
------------------------------------------------------- */
.status-msg { display: none; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 0.9rem; }
.status-msg.visible { display: block; }
.status-msg.info    { background: #e7f0f8; border-left: 5px solid var(--accent-blue); color: #1e3a5f; }
.status-msg.error   { background: #fbeae9; border-left: 5px solid var(--accent-red);  color: #7f1d1d; }
.status-msg.success { background: #e6f4ea; border-left: 5px solid var(--accent-green); color: #14532d; }
.status-msg.warning { background: #fef9c3; border-left: 5px solid var(--accent-amber); color: #713f12; }

/* -------------------------------------------------------
   FILTER BAR — shared across period-analysis, fleet-performance,
   fleet-age-profile, analytics-dashboard, fleet-tech-list
------------------------------------------------------- */
.filter-row   { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 4px; }
.filter-col   { display: flex; flex-direction: column; gap: 5px; min-width: 180px; flex: 1; }
.filter-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

@media (max-width: 900px) { .filter-col { min-width: 140px; } }
@media (max-width: 640px) { .filter-col { flex: 1 1 100%; } }

/* -------------------------------------------------------
   STATUS PILLS
------------------------------------------------------- */
.status-pill { font-size: 0.85rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--card-border); color: var(--text-muted); }
.status-pill.ok  { border-color: var(--accent-green); color: var(--accent-green); }
.status-pill.bad { border-color: var(--accent-red);   color: var(--accent-red); }

/* Filled pill — colour + dot + text, never colour alone.
   Use for MOT/tax/PCN status wherever a state needs to read at a glance. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; padding: 3px 11px 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
.pill i, .pill .pill-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pill-ok      { background: var(--pill-ok-bg);      color: var(--pill-ok-fg); }      .pill-ok i      { background: var(--pill-ok-fg); }
.pill-soon    { background: var(--pill-soon-bg);    color: var(--pill-soon-fg); }    .pill-soon i    { background: var(--pill-soon-fg); }
.pill-expired { background: var(--pill-expired-bg); color: var(--pill-expired-fg); } .pill-expired i { background: var(--pill-expired-fg); }
.pill-sorn    { background: var(--pill-sorn-bg);    color: var(--pill-sorn-fg); }    .pill-sorn i    { background: var(--pill-sorn-fg); }
.pill-info    { background: var(--pill-info-bg);    color: var(--pill-info-fg); }    .pill-info i    { background: var(--accent-blue); }

/* VRM shown as plain monospace text (the old plate-chip styling was removed) */
.vrm-text { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.5px; }

/* -------------------------------------------------------
   KPI STRIP — headline numbers, above the fold
------------------------------------------------------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.kpi-tile {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--accent-blue);
  border-radius: 10px;
  padding: 12px 14px;
}
.kpi-tile.warn { border-left-color: var(--accent-amber); }
.kpi-tile.crit { border-left-color: #BE123C; }
.kpi-tile.good { border-left-color: var(--accent-green); }
.kpi-tile.teal { border-left-color: var(--accent-teal); }
.kpi-tile .kpi-num {
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem; font-weight: 800; color: var(--text-primary); line-height: 1.15;
}
.kpi-tile .kpi-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-top: 3px;
}

/* Tabular figures wherever numbers sit in a column — stat counts,
   table cells of dates/counts. Keeps the site's regular UI font,
   just aligns digit widths so a column of numbers lines up. */
.mono-num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------
   SPINNER
------------------------------------------------------- */
.spinner { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-muted); margin-top: 12px; }
.spinner.hidden { display: none; }

.spinner-circle {
  width: 20px;
  height: 20px;
  border: 3px solid #C5CAD0;
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* -------------------------------------------------------
   PROGRESS BAR
------------------------------------------------------- */
.progress-container {
  width: 100%;
  height: 14px;
  background: #D8DBE0;
  border-radius: 4px;
  margin: 10px 0 16px;
  overflow: hidden;
}

.progress-bar { height: 100%; width: 0%; background: var(--accent-green); border-radius: 4px; transition: width 0.25s ease; }
.progress-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* -------------------------------------------------------
   EXPIRY HEATMAP
------------------------------------------------------- */
.expiry-heatmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  width: 100%;
}

/* -------------------------------------------------------
   HEATMAP PALETTE — semantic, consistent across all views
   Expired:   deep red    #991B1B
   0-7 days:  amber       #B45309
   8-30 days: mid-amber   #D97706
   90+/ok:    emerald     #065F46
------------------------------------------------------- */

.expiry-heatmap .bucket {
  background: var(--card-bg);
  padding: 22px 14px 18px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--card-border);
  color: var(--text-primary);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(30,41,59,0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}
.expiry-heatmap .bucket .count {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}
.expiry-heatmap .bucket .label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  opacity: 1;
}

.expiry-heatmap .bucket[data-bucket="expired"] { border-top-color: #DC2626; }
.expiry-heatmap .bucket[data-bucket="expired"] .count { color: #DC2626; }
.expiry-heatmap .bucket[data-bucket="7"]       { border-top-color: #D97706; }
.expiry-heatmap .bucket[data-bucket="7"]  .count { color: #D97706; }
.expiry-heatmap .bucket[data-bucket="30"]      { border-top-color: #F59E0B; }
.expiry-heatmap .bucket[data-bucket="30"] .count { color: #F59E0B; }
.expiry-heatmap .bucket[data-bucket="ok"]      { border-top-color: #10B981; }
.expiry-heatmap .bucket[data-bucket="ok"]  .count { color: #10B981; }

/* Clickable ov-bucket hover/active states */
.expiry-heatmap .ov-bucket { cursor: pointer; }
.expiry-heatmap .ov-bucket:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30,41,59,0.10); }
.expiry-heatmap .ov-bucket.ov-active { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(47,111,237,0.14); }

/* -------------------------------------------------------
   BULK RESULTS
------------------------------------------------------- */
.bulk-results-block { width: 100%; margin-top: 20px; margin-bottom: 24px; }
.bulk-results-wrapper, .export-buttons { max-width: none; width: 100%; }

#bulkResultsTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 5px;
  table-layout: fixed;
}

#bulkResultsTable th,
#bulkResultsTable td { text-align: left; vertical-align: middle; padding: 11px 16px; white-space: nowrap; }

#bulkResultsTable thead th {
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--card-border);
  cursor: pointer;
}
#bulkResultsTable tbody td { background: #FFFFFF; border-bottom: 1px solid #F0F2F8; font-size: 0.9rem; }
#bulkResultsTable tbody tr:nth-child(even) td { background: #F8FAFC; }
#bulkResultsTable tbody tr:hover td { background: #EFF6FF; }

#bulkResultsTable th:nth-child(1), #bulkResultsTable td:nth-child(1) { width: 20%; }
#bulkResultsTable th:nth-child(2), #bulkResultsTable td:nth-child(2) { width: 20%; }
#bulkResultsTable th:nth-child(3), #bulkResultsTable td:nth-child(3) { width: 25%; position: relative; overflow: visible; }
#bulkResultsTable th:nth-child(4), #bulkResultsTable td:nth-child(4) { width: 20%; }

td { position: relative; overflow: visible !important; }

.expired  { color: var(--accent-red);   font-weight: bold; }
.due-soon { color: #c88a00;             font-weight: bold; }
.ok       { color: var(--accent-green); font-weight: bold; }
.fail-row td { color: var(--accent-red) !important; font-weight: bold; }

/* -------------------------------------------------------
   SORT ICONS
------------------------------------------------------- */
th.sortable { position: relative; cursor: pointer; padding-right: 24px; }
th.sortable::after { content: "⇅"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.4; }
th.sortable.sorted-asc::after  { content: "▲"; opacity: 0.9; }
th.sortable.sorted-desc::after { content: "▼"; opacity: 0.9; }

.sort-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: 0.7; pointer-events: none; }

/* -------------------------------------------------------
   TOOLTIP / BADGE
------------------------------------------------------- */
.expiry-fallback-badge { position: relative; cursor: pointer; width: 8px; height: 8px; background: var(--accent-red); border-radius: 50%; display: inline-block; }

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  top: 24px;
  left: 0;
  background: var(--accent-blue);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 320px;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  display: none;
}
.tooltip:hover::after { display: block; }

/* -------------------------------------------------------
   EXPORT ROW
------------------------------------------------------- */
.export-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* -------------------------------------------------------
   TABLE ROW VISIBILITY
------------------------------------------------------- */
tr.hidden { display: none !important; }
tr:not(.hidden) { display: table-row; }

.period-details-row { display: table-row !important; }
.period-details-row td { display: table-cell !important; background: #F1F5F9; padding: 16px 20px; border-left: 4px solid var(--accent-blue); }

.period-row:hover { background: #e6f4fb; cursor: pointer; }
.period-row td { padding: 10px 12px; }

/* -------------------------------------------------------
   MOT HISTORY
------------------------------------------------------- */
.mot-history-expandable { margin-top: 20px; border-top: 1px solid var(--card-border); padding-top: 16px; overflow: visible; max-height: none; }

.history-item { border-bottom: 1px solid #D8DBE0; padding: 12px 0; }

.history-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 1rem; }
.history-header .result-pass { color: var(--accent-green); }
.history-header .result-fail { color: var(--accent-red); }
.history-header .status-text { margin-left: auto; margin-right: 10px; font-weight: 600; }
.history-header .arrow { transition: transform 0.2s ease; }
.history-header.expanded .arrow { transform: rotate(180deg); }
.history-header.expanded .status-text { display: none; }

.history-details { margin-top: 8px; padding-left: 12px; font-size: 0.95rem; }
.history-details.hidden { display: none; }
.history-details ul { margin: 0; padding-left: 20px; }

.history-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
  min-width: unset;
}
.history-btn:hover { background: var(--btn-hover); border-color: var(--btn-bdr-hover); }

.mot-details p      { margin: 0 0 8px; font-size: 16px; }
.mot-details strong { font-weight: 600; }
.mot-details ul     { margin: 10px 0 0; padding-left: 20px; }
.mot-details li     { margin-bottom: 6px; line-height: 1.4; }

/* -------------------------------------------------------
   SUMMARY LIST
------------------------------------------------------- */
.govuk-summary-list__row { display: grid; grid-template-columns: 30% 70%; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.govuk-summary-list__key { font-weight: 700; color: var(--text-muted); }

/* -------------------------------------------------------
   FLEET BOX
------------------------------------------------------- */
.fleet-box { background: #E4E7EA; padding: 16px; border-radius: 6px; margin-bottom: 24px; }
.fleet-box h3 { margin-top: 0; }
.fleet-box .form-row { margin-bottom: 12px; }

/* -------------------------------------------------------
   POPUP SYSTEM
------------------------------------------------------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 9998;
  display: none;
}

.popup-overlay.hidden { display: none; }

.popup-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  z-index: 9999;
  display: none;
  animation: popupFadeIn 0.25s ease-out;
}

@keyframes popupFadeIn {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.popup-header h2 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.popup-header .section-underline { margin-bottom: 0; }

.popup-close {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: unset;
  padding: 0;
  transition: background-color 0.15s, border-color 0.15s;
}
.popup-close:hover {
  background-color: var(--card-border);
  border-color: #A8ADB5;
}

.popup-body { padding: 0; margin-bottom: 16px; }

.popup-actions { margin-top: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.modal-box { position: relative; }

/* Accent line — top of modal/popup windows */
.modal-box::before,
.popup-card::before,
#cacheEditorPopup::before,
#periodAnalysisPopup::before,
#refreshPopup::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, #2F6FED, #6E9BF7);
  border-radius: 12px 12px 0 0;
}

/* Cache editor */
.cache-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9998; display: none; }

#cacheEditorPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 680px;
  max-width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  z-index: 9999;
  display: none;
  animation: popupFadeIn 0.25s ease-out;
}

#cacheEditorPopup .form-row-vertical input,
#cacheEditorPopup .form-row-vertical select {
  border-radius: 5px;
  padding: 9px 12px;
  font-size: 16px;
  border: 2px solid var(--accent-blue);
  background: #ffffff;
}

#cacheEditorPopup .govuk-summary-list { border-radius: 8px; padding: 12px; background: #F8FAFC; }

/* Refresh popup */
#refreshPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 28px;
  width: 620px;
  max-width: 95vw;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 9999;
}

#refreshOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998; display: none; }

/* -------------------------------------------------------
   PERIOD ANALYSIS POPUP
------------------------------------------------------- */
#periodAnalysisPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  z-index: 9999;
  display: none;
  animation: popupFadeIn 0.25s ease-out;
}

#periodResults { margin-bottom: 28px; animation: slideDown 0.28s ease-out; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#periodResults .expiry-heatmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; width: 100%; }

#periodResults .bucket {
  padding: 22px 14px 18px; border-radius: 12px; text-align: center;
  border-top-width: 3px; cursor: pointer; width: 100%; box-sizing: border-box;
  transition: transform 0.15s, box-shadow 0.15s;
}
#periodResults .bucket:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30,41,59,0.10); }
#periodResults .bucket .count { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
#periodResults .bucket .label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }

#periodResults .bucket {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-top-width: 3px;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(30,41,59,0.05);
}
#periodResults .bucket[data-bucket="pass"] { border-top-color: #10B981; }
#periodResults .bucket[data-bucket="pass"] .count { color: #10B981; }
#periodResults .bucket[data-bucket="pwd"]  { border-top-color: #2F6FED; }
#periodResults .bucket[data-bucket="pwd"]  .count { color: #2F6FED; }
#periodResults .bucket[data-bucket="prs"]  { border-top-color: #D97706; }
#periodResults .bucket[data-bucket="prs"]  .count { color: #D97706; }
#periodResults .bucket[data-bucket="fail"] { border-top-color: #DC2626; }
#periodResults .bucket[data-bucket="fail"] .count { color: #DC2626; }
#periodResults .bucket .label { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; opacity: 1; }

#periodVehicleList {
  margin-top: 28px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  animation: fadeInVehicleList 0.25s ease-out;
}

@keyframes fadeInVehicleList {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#periodVehicleList h3 { margin-top: 0; margin-bottom: 16px; font-size: 1.2rem; font-weight: 700; }
#periodVehicleList table { width: 100%; border-collapse: collapse; }
#periodVehicleList th { text-align: left; padding: 10px 6px; font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--card-border); }
#periodVehicleList td { padding: 10px 6px; font-size: 15px; border-bottom: 1px solid #D8DBE0; }
#periodVehicleList tbody tr:hover td { background: #F1F5F9; }
#periodVehicleList td:first-child { font-weight: 600; color: var(--accent-blue); }

#periodSelector {
  height: 46px;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 5px;
  border: 2px solid #8A9099;
  background: #ffffff;
  width: 100%;
}

#periodSelector:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(29,112,184,0.25);
}

/* Period checkbox group — replaces the old single <select> */
#historicalPeriodSelectorPopup {
  max-height: 220px;
  overflow-y: auto;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 5px;
  border: 2px solid #8A9099;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

/* -------------------------------------------------------
   HISTORICAL POPUP
------------------------------------------------------- */
#historicalPopup .govuk-label { display: block; margin-bottom: 8px; }

#historicalPopup .govuk-select {
  height: 46px;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 5px;
  border: 2px solid #8A9099;
  background-color: #ffffff;
  width: 100%;
  margin-bottom: 20px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231A2530' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

#historicalPopup .govuk-select:focus { outline: 3px solid var(--accent-blue); border-color: var(--accent-blue); }

.hd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

/* app.js injects a .mot-stats-grid inside #historicalSummaryPopup —
   force it horizontal regardless of container width */
#historicalSummaryPopup .mot-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0;
}

.hd-card { background: #fff; border-radius: 8px; padding: 18px 20px; box-shadow: var(--card-shadow); text-align: center; }
.hd-card .value { font-size: 2rem; font-weight: 700; }
.hd-card .label { font-size: 0.9rem; color: var(--text-muted); }

.hd-select { padding: 8px 12px; border-radius: 5px; border: 1px solid #B0B6BD; font-size: 0.95rem; }

.hd-advisory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.hd-adv-box { border-radius: 8px; padding: 14px 16px; color: #fff; font-weight: 600; box-shadow: var(--card-shadow); }
.hd-adv-box .heading { font-size: 0.9rem; text-transform: uppercase; opacity: 0.9; }
.hd-adv-box .line { font-size: 0.95rem; margin-top: 4px; }

.hd-adv-advisory { background: #1E4FC4; color: #DBEAFE; }
.hd-adv-minor    { background: #B45309; color: #FEF3C7; }
.hd-adv-prs      { background: #92400E; color: #FEF3C7; }
.hd-adv-major    { background: #991B1B; color: #FEE2E2; }

/* -------------------------------------------------------
   HEATMAP (defect categories)
------------------------------------------------------- */
.heatmapGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 12px; margin-bottom: 24px; }
.heatmapCell { padding: 14px; border-radius: 6px; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: inset 0 0 4px rgba(0,0,0,0.12); }

.heatmap-advisory   { background: #1E4FC4; color: #DBEAFE; }
.heatmap-minor      { background: #B45309; color: #FEF3C7; }
.heatmap-prs        { background: #92400E; color: #FEF3C7; }
.heatmap-major      { background: #991B1B; color: #FEE2E2; }
.heatmap-dangerous  { background: #450a0a; color: #FECACA; }

.heatmap-results { margin-top: 20px; padding: 15px; background: #F8FAFC; border-radius: 6px; border: 1px solid var(--card-border); }
#heatmapResults h3 { margin: 0 0 14px; font-size: 1.2rem; font-weight: 600; color: var(--accent-blue); }

.results-table { display: flex; flex-direction: column; gap: 10px; }
.result-row { display: grid; grid-template-columns: 80px 120px 120px 120px 80px 1fr; gap: 10px; padding: 12px; background: white; border: 1px solid #D8DBE0; border-radius: 4px; align-items: start; }
.result-row > div { font-size: 0.9rem; line-height: 1.3; }
.result.PASS { color: var(--accent-green); font-weight: 600; }
.result.FAIL { color: var(--accent-red);   font-weight: 600; }
.defects { display: flex; flex-direction: column; gap: 4px; }
.defect { background: #F1F5F9; padding: 4px 6px; border-radius: 3px; font-size: 0.85rem; border-left: 3px solid var(--accent-blue); }

/* -------------------------------------------------------
   DEPOT / OPCO CHECKBOXES
------------------------------------------------------- */
.depot-checkbox-group, .opco-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #ffffff;
  max-height: 260px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

.depot-checkbox-group::-webkit-scrollbar,
.opco-checkbox-group::-webkit-scrollbar { width: 6px; }
.depot-checkbox-group::-webkit-scrollbar-thumb,
.opco-checkbox-group::-webkit-scrollbar-thumb { background: #A8ADB5; border-radius: 3px; }

.checkbox-row, .period-depot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

/* govuk-checkboxes__item is used by populatePeriodDepotCheckboxes() on initial
   popup open — must match period-depot-row so checkboxes stay inline with labels */
.depot-checkbox-group .govuk-checkboxes__item,
.opco-checkbox-group .govuk-checkboxes__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  margin: 0;
}

/* govuk-checkboxes__label inside these containers — strip default block styling */
.depot-checkbox-group .govuk-checkboxes__label,
.opco-checkbox-group .govuk-checkboxes__label {
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
}

.period-depot-checkbox,
.opco-checkbox-group input[type="checkbox"],
.depot-checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-blue);
  flex-shrink: 0;
}

.opco-checkbox-group label,
.depot-checkbox-group label,
.period-depot-row label { font-size: 15px; color: var(--text-primary); cursor: pointer; user-select: none; }

.depot-filter-group { margin-bottom: 24px; }

.depot-select { width: 100%; max-height: 220px; padding: 6px; font-size: 16px; border: 2px solid #8A9099; border-radius: 8px; background: #ffffff; }
.depot-select:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(0,121,193,0.25); }

.clear-depots-btn { padding: 8px 14px; font-size: 15px; border-radius: 5px; background: #E4E7EA; border: 1px solid #B0B6BD; color: var(--text-primary); cursor: pointer; min-width: unset; }
.clear-depots-btn:hover { background: #CDD2D8; }

/* -------------------------------------------------------
   PROCESSING OVERLAY
------------------------------------------------------- */
.processing-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; justify-content: center; align-items: center; }
.processing-box { background: #fff; border-radius: 8px; padding: 32px 48px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); font-size: 1.1rem; font-weight: 500; }

/* -------------------------------------------------------
   HEADER REPORT ROW
------------------------------------------------------- */
.header-row { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.report-logo { width: 60px; height: auto; }
.header-text { display: flex; flex-direction: column; }
.header-text h1 { margin: 0; padding: 0; }
.header-text p  { margin: 4px 0 0; color: var(--text-muted); }

/* -------------------------------------------------------
   GOVUK TABLE
------------------------------------------------------- */
.govuk-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.govuk-table__head .govuk-table__header {
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 8px 14px 10px;
  border-bottom: 2px solid var(--card-border);
  text-align: left;
}
.govuk-table__body .govuk-table__cell { padding: 11px 14px; border-bottom: 1px solid var(--table-cell-line); background: var(--table-row-bg); font-size: 0.9rem; }
.govuk-table__body .govuk-table__row:nth-child(even) .govuk-table__cell { background: var(--table-row-alt); }
.govuk-table__body .govuk-table__row:hover .govuk-table__cell { background: var(--table-row-hover) !important; }

/* -------------------------------------------------------
   GOVUK SECTION BREAK
------------------------------------------------------- */
.govuk-section-break { border: none; margin: 0; }
.govuk-section-break--visible { border-top: 1px solid var(--card-border); }

/* -------------------------------------------------------
   FLEET OVERVIEW — clickable heatmap tiles
------------------------------------------------------- */
.ov-bucket {
  cursor: pointer;
  user-select: none;
}

/* -------------------------------------------------------
   FLEET OVERVIEW LIST TOOLBAR + PAGINATION
------------------------------------------------------- */

/* Top bar: title | exports | close */
.ov-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  flex-wrap: wrap;
}

.ov-list-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-list-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.ov-list-subtitle.hidden { display: none; }

.ov-toolbar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

/* Pagination bar: page-size pills | nav | count */
#overviewPagination {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--table-row-alt);
  border: 1px solid var(--card-border);
  border-radius: 0;
  flex-wrap: wrap;
}

/* Page size section label */
.ov-ps-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 2px;
}

/* Page size toggle pills */
.ov-ps-btn {
  min-width: unset;
  padding: 4px 9px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ov-ps-btn:hover:not(.ov-ps-active) { background: var(--table-row-hover); color: var(--accent-blue); border-color: var(--accent-blue); }
.ov-ps-btn.ov-ps-active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

/* Custom page size input */
.ov-ps-custom {
  width: 54px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 0.76rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--card-bg);
  text-align: center;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ov-ps-custom:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(47,111,237,0.12); }

/* Separator between page-size and navigation */
.ov-pg-sep {
  width: 1px;
  height: 20px;
  background: var(--card-border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Table wrapper that connects flush under the toolbar */
.ov-table-wrap {
  border: 1px solid var(--card-border);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  overflow-x: auto;
}
.ov-table-wrap .govuk-table { margin: 0; }

/* Pagination nav buttons — same as before */

.ov-pg-btn {
  min-width: unset;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ov-pg-btn:hover:not(:disabled):not(.ov-pg-active) {
  background: var(--table-row-hover);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.ov-pg-btn.ov-pg-active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

.ov-pg-btn:disabled { opacity: 0.35; cursor: default; }
.ov-pg-btn.ov-pg-arrow { font-size: 1.05rem; width: 32px; }

.ov-pg-ellipsis {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 24px;
  height: 32px;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  padding-bottom: 4px;
}

.ov-pg-info {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 10px;
  white-space: nowrap;
  align-self: center;
}

/* -------------------------------------------------------
   QUICK LOOKUP FAB
------------------------------------------------------- */
.quick-lookup-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  padding: 14px 20px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 999;
  transition: background 0.15s;
}
.quick-lookup-btn:hover { background: var(--btn-hover); }

/* -------------------------------------------------------
   DARK MODE
------------------------------------------------------- */
body.theme-dark { background: #0b0c0c; color: #f3f2f1; }
body.theme-dark .card, body.theme-dark .result-panel, body.theme-dark .stat { background: #1b1c1c; border-color: #4c4c4c; }

/* -------------------------------------------------------
   RESPONSIVE
------------------------------------------------------- */
@media (max-width: 900px) {
  .app { padding: 16px; }
  .expiry-heatmap { grid-template-columns: repeat(3, 1fr); }
  .mot-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hd-stats-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .top-nav { flex-wrap: wrap; gap: 8px; }
  .top-nav-right { flex-wrap: wrap; }
  .expiry-heatmap { grid-template-columns: repeat(2, 1fr); }
}

/* govuk button group */
.govuk-button-group .govuk-button { margin-right: 10px; }

/* ================================================================
   FOOTER
   Two-row: logo + DVSA/DVLA attribution | copyright bar
   Shifts with sidebar when drawer is open
================================================================ */
.mot-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top: 2px solid var(--footer-border);
  padding: 10px 32px 8px;
}

/* Row 1: logo + attribution */
.mot-footer__main {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mot-footer__left {
  flex: 0 0 auto;
}

.mot-footer__logo {
  width: 160px;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 0.75;
}

.mot-footer__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Attribution cards — one per government data source */
.mot-footer__api-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  border: 1px solid #cdd0d4;
  border-radius: 5px;
  background: #f8f9fa;
  min-width: 260px;
}

/* GOV.UK logo link — crown + "GOV.UK" text */
.mot-footer__govuk-logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  width: fit-content;
}

.mot-footer__govuk-crown {
  height: 18px;
  width: auto;
  display: block;
}

.mot-footer__govuk-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0b0c0c;
  letter-spacing: 0.02em;
  line-height: 1;
}

.mot-footer__govuk-logo:hover .mot-footer__govuk-text {
  color: #1d70b8;
  text-decoration: underline;
}

/* Agency info */
.mot-footer__api-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.mot-footer__agency-abbr {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0b0c0c;
  line-height: 1.2;
}

.mot-footer__agency-full {
  font-size: 0.75rem;
  color: #505a5f;
  line-height: 1.3;
}

.mot-footer__api-service {
  font-size: 0.66rem;
  color: #1d70b8;
  font-weight: 600;
}

/* OGL badge */
.mot-footer__ogl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 0.75rem;
  color: #505a5f;
  margin-top: 0;
  flex-shrink: 0;
}

.mot-footer__ogl:hover {
  color: #1d70b8;
  text-decoration: underline;
}

.mot-footer__ogl-icon {
  height: 16px;
  width: auto;
  flex-shrink: 0;
}

/* Divider */
.mot-footer__divider {
  height: 1px;
  background: #e0e2e6;
  margin: 8px 0 6px;
}

/* Row 2: copyright bar */
.mot-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mot-footer__back-top {
  color: #2F6FED;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.mot-footer__back-top:hover {
  text-decoration: underline;
}

.mot-footer__ogl-inline {
  color: var(--text-muted);
  text-decoration: underline;
}

.mot-footer__ogl-inline:hover {
  color: #1d70b8;
}
/* -------------------------------------------------------
   VEHICLE CARD (single MOT lookup result)
------------------------------------------------------- */
.vc-card {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 16px;
  box-shadow: var(--card-shadow);
}
.vc-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  padding: 16px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.vc-header-left { flex: 1; min-width: 0; }
.vc-header-actions { flex-shrink: 0; }
.vc-header-top  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.vc-vrm {
  display: inline-block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--text-primary);
  color: #F2F4F7;
  border-radius: 6px;
  padding: 2px 12px 4px;
  font-family: "Inter", monospace;
}
.vc-fleet-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-blue);
}
.vc-status-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  color: #fff;
}
.vc-status-pill.status-inservice  { background: #059669; }
.vc-status-pill.status-training   { background: #0079c1; }
.vc-status-pill.status-reserve    { background: #D97706; }
.vc-status-pill.status-disposal   { background: #505A63; }
.vc-make-model { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.vc-fleet-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 2px; }
.vc-fleet-meta strong { color: var(--text-primary); font-weight: 600; }
.vc-first-used { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.vc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--card-border);
}
.vc-section {
  padding: 18px 22px;
}
.vc-section + .vc-section {
  border-left: 1px solid var(--card-border);
}
.vc-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.vc-source {
  background: var(--card-border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.75rem;
  margin-left: 6px;
  vertical-align: middle;
}
.vc-dl { margin: 0; }
.vc-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  padding: 6px 0;
}
.vc-row dt { color: var(--text-muted); }
.vc-row dd { font-weight: 600; text-align: right; }
.vc-no-dvla { color: var(--text-muted); font-size: 0.88rem; margin: 0; }
/* vc-body stack handled in the 700px block above */

/* -------------------------------------------------------
   VEHICLE SCORE — ring, factors, metrics, timeline
------------------------------------------------------- */
/* MOT Insights band — donut ring + stats/factors */
.vc-insight-band {
  display: flex;
  align-items: flex-start;
  gap: 0;
  border-top: 1px solid var(--card-border);
  background: var(--card-bg);
}
.vc-insight-ring-col {
  flex: 0 0 210px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-bg);
}
.vc-insight-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 14px;
  align-self: flex-start;
}
.vc-insight-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
.vc-ring-area {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}
.vc-insight-svg {
  width: 130px;
  height: 130px;
}
.vc-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.vc-ring-total     { font-size: 2.2rem; font-weight: 800; color: var(--text-primary); }
.vc-ring-total-lbl { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 5px; }
.vc-ring-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  align-self: flex-start;
  width: 100%;
}
.vc-ring-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.vc-ring-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Insight stats / factors column */
.vc-insight-stats {
  flex: 1;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border-left: 1px solid var(--card-border);
}
.vc-is-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--card-border);
}
.vc-is-row:last-of-type { border-bottom: none; }
.vc-is-lbl { color: var(--text-muted); font-size: 0.84rem; }
.vc-is-val { font-weight: 700; color: var(--text-primary); }
.vc-is-sep { height: 10px; border: none !important; }
.vc-factors-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.vc-factor {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.35;
  padding: 4px 9px;
  border-radius: 6px;
}
.vc-fi { font-size: 0.75rem; font-weight: 800; flex-shrink: 0; margin-top: 2px; }
.vc-factor-pos { background: #F0FDF4; color: #14532D; }
.vc-factor-pos .vc-fi { color: #059669; }
.vc-factor-neg { background: #FEF2F2; color: #7F1D1D; }
.vc-factor-neg .vc-fi { color: #DC2626; }

/* Mileage section */
.vc-mileage-section {
  border-top: 1px solid var(--card-border);
  padding: 18px 22px 16px;
  background: var(--card-bg);
}
.vc-mileage-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.vc-chart-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
}

/* In-card bucket tiles — identical to site-wide .bucket / .stat-card pattern */
.vc-buckets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--card-border);
  background: var(--page-bg);
}
.vc-bucket {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px 15px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--accent-blue);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(30,41,59,0.05);
}
.vc-bucket-val {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.vc-bucket-lbl {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* Timeline */
.vc-timeline {
  border-top: 1px solid var(--card-border);
  padding: 0;
}
.vc-tl-hd-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 12px 20px 8px;
  border-bottom: 1px solid var(--card-border);
}
.vc-tl-list { padding: 0 0 8px; }
.vc-tl-item {
  border-top: 1px solid var(--card-border);
  border-left: 4px solid transparent;
  transition: border-left-color 0.15s;
}
.vc-tl-item-pass { border-left-color: #059669; }
.vc-tl-item-fail { border-left-color: #DC2626; }
.vc-tl-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.vc-tl-hd:hover { background: var(--row-hover, rgba(0,0,0,0.03)); }
.vc-tl-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}
.vc-tl-pass { background: #D1FAE5; color: #065F46; }
.vc-tl-fail { background: #FEE2E2; color: #991B1B; }
.vc-tl-date  { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.vc-tl-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.vc-tl-miles { font-size: 0.78rem; color: var(--text-muted); }
.vc-tl-cnt   { font-size: 0.75rem; color: var(--text-muted); }
.vc-tl-chev  {
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.18s;
  display: inline-block;
  line-height: 1;
}
.vc-tl-chev.open { transform: rotate(90deg); }
.vc-tl-body { padding: 0 20px 12px; }
.vc-tl-defects { display: flex; flex-direction: column; gap: 5px; }
.vc-tl-defect {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.vc-dt-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}
.vc-dt-danger  { background: #FEE2E2; color: #991B1B; }
.vc-dt-major   { background: #FFEDD5; color: #9A3412; }
.vc-dt-minor   { background: #FEF9C3; color: #713F12; }
.vc-dt-prs     { background: #FEF3C7; color: #92400E; }
.vc-dt-advisory { background: #F3F4F6; color: #374151; }
.vc-dt-text    { color: var(--text-primary); }

/* ── Mobile: vc-card breaks out of parent .card padding (full bleed) ── */
@media (max-width: 768px) {
  .vc-card {
    margin-left: -16px;
    margin-right: -16px;
    margin-top: 12px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}
@media (max-width: 400px) {
  .vc-card {
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* ── Mobile: layout adjustments ── */
@media (max-width: 700px) {
  /* Insight band: column, children stretch to full width */
  .vc-insight-band { flex-direction: column; align-items: stretch; }

  /* Ring col: row (ring SVG left, legend fills right) */
  .vc-insight-ring-col {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border-bottom: 1px solid var(--card-border);
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px;
  }
  .vc-ring-area { width: 110px; height: 110px; flex-shrink: 0; }
  .vc-insight-svg { width: 110px; height: 110px; }
  .vc-ring-legend { flex: 1; margin-top: 0; }
  .vc-insight-title { display: none; }

  /* Stats panel: full width, no orphan left-border */
  .vc-insight-stats { border-left: none; width: 100%; box-sizing: border-box; }

  /* Buckets: 2-col, smaller numbers so dates don't overflow */
  .vc-buckets { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 12px; }
  .vc-bucket { padding: 16px 8px 12px; }
  .vc-bucket-val { font-size: 1.55rem; }

  /* vc-body: stack DVSA/DVLA sections */
  .vc-body { grid-template-columns: 1fr; }
  .vc-section + .vc-section { border-left: none; border-top: 1px solid var(--card-border); }
}

/* ── Very small phones: single-col buckets ── */
@media (max-width: 380px) {
  .vc-buckets { grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px; }
  .vc-bucket-val { font-size: 1.35rem; }
  .vc-bucket-lbl { font-size: 0.75rem; }
}

/* VED status colour classes */
.ved-ok       { color: var(--accent-green) !important; font-weight: 700; }
.ved-warn     { color: #c88a00 !important; font-weight: 700; }
.ved-sorn     { color: var(--accent-red) !important; font-weight: 700; }
.ved-expired  { color: var(--accent-red) !important; font-weight: 700; }
.ved-bold     { font-weight: 700; }
.ved-ok-text      { color: var(--accent-green); font-weight: 600; }
.ved-sorn-text    { color: var(--accent-red); font-weight: 600; }
.ved-expired-text { color: var(--accent-red); font-weight: 600; }
.ved-warn-text    { color: #c88a00; font-weight: 600; }

/* -------------------------------------------------------
   FLEET OVERVIEW — VED stat tiles
------------------------------------------------------- */
.ov-ved-stats { margin-top: 14px; }
.ov-ved-heading {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px;
}
.ov-ved-source { background: var(--card-border); border-radius: 3px; padding: 1px 5px; font-size: 0.75rem; font-weight: 700; }
.ov-ved-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
@media (max-width: 720px) { .ov-ved-grid { grid-template-columns: repeat(2, 1fr); } }
.ov-ved-tile {
  padding: 22px 12px 18px; border-radius: 12px;
  border: 1px solid var(--card-border); border-top: 3px solid #9CA3AF;
  cursor: pointer; text-align: center; width: 100%; box-sizing: border-box;
  background: var(--card-bg); color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(30,41,59,0.05);
  transition: transform 0.15s, box-shadow 0.15s; font-family: inherit; min-width: unset;
}
.ov-ved-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30,41,59,0.10); }
.ov-ved-tile.ov-ved-active { outline: 2px solid var(--accent-blue); outline-offset: 2px; transform: translateY(-2px); }
.ov-ved-taxed   { border-top-color: #10B981; }
.ov-ved-taxed   .ov-ved-count { color: #10B981; }
.ov-ved-soon    { border-top-color: #F59E0B; }
.ov-ved-soon    .ov-ved-count { color: #F59E0B; }
.ov-ved-sorn    { border-top-color: #DC2626; }
.ov-ved-sorn    .ov-ved-count { color: #DC2626; }
.ov-ved-expired { border-top-color: #D97706; }
.ov-ved-expired .ov-ved-count { color: #D97706; }
.ov-ved-unknown { border-top-color: #9CA3AF; }
.ov-ved-unknown .ov-ved-count { color: #6B7280; }
.ov-ved-count { display: block; font-variant-numeric: tabular-nums; font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }

/* Filler/preview state — tiles shown before overview data loads */
.ov-filler { pointer-events: none; }
.ov-filler .bucket,
.ov-filler .ov-ved-tile { opacity: 0.35; filter: grayscale(0.5); cursor: default; }
.ov-ved-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }

/* -------------------------------------------------------
   NAV — background toggle, user pill, login button
------------------------------------------------------- */
.bg-toggle-label {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
}
.bg-toggle-label input { display: none; }
.bg-toggle-track {
  width: 34px; height: 18px; border-radius: 9px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  position: relative; display: block; transition: background .2s;
}
.bg-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.45); transition: left .2s, background .2s;
}
.bg-toggle-label input:checked + .bg-toggle-track { background: rgba(47,111,237,0.45); }
.bg-toggle-label input:checked + .bg-toggle-track::after { left: 18px; background: #6E9BF7; }
.bg-toggle-text { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.5); letter-spacing: .04em; }
html.no-bg { background-color: var(--page-bg); }

.user-logout-btn {
  background: none; border: 1px solid var(--nav-btn-bdr); color: var(--nav-text);
  border-radius: 4px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer;
}
.nav-login-btn {
  background: var(--nav-btn-bg); border: 1px solid var(--nav-btn-bdr);
  color: var(--nav-text); border-radius: 4px; padding: 6px 14px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.nav-login-btn:hover { background: var(--nav-btn-hover); }

/* -------------------------------------------------------
   UNIFORM NAV BUTTONS — all pages
------------------------------------------------------- */
.nav-btn {
  display: inline-flex;
  align-items: center;
  background: var(--nav-btn-bg);
  color: var(--nav-text);
  border: 1px solid var(--nav-btn-bdr);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  transition: background .12s, border-color .12s;
  min-width: unset;
  line-height: 1.2;
}
.nav-btn:hover { background: var(--nav-btn-hover); border-color: var(--nav-btn-bdr-h); color: var(--nav-text); }
.nav-btn-active {
  background: #e8f0fb;
  border-color: #4ab0e8;
  color: #0b3a7a;
  font-weight: 700;
  cursor: default;
}
.nav-btn-active:hover { background: #e8f0fb; border-color: #4ab0e8; color: #0b3a7a; }
.nav-btn-login {
  background: #2F6FED;
  border: 1px solid #1E4FC4;
  color: #fff;
  font-weight: 600;
}

/* User pill */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nav-btn-bg);
  border: 1px solid var(--nav-btn-bdr);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.82rem;
  color: var(--nav-text);
}
.user-pill-name {
  color: var(--nav-text);
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}
.user-pill-name:hover { text-decoration: underline; }

.user-admin-link {
  color: var(--nav-text);
  font-size: 1rem;
  text-decoration: none;
  line-height: 1;
}
.user-logout-btn {
  background: none;
  border: 1px solid var(--nav-btn-bdr);
  color: var(--nav-text);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  min-width: unset;
}
.user-logout-btn:hover { background: #e2e5ea; }

.sessions-badge {
  background: var(--brand-navy);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  min-width: unset;
  text-align: center;
  line-height: 18px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sessions-badge:hover { background: #2F6FED; }

/* Login log popup */
#loginLogOverlay { position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1100; }
#loginLogPopup {
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1101;width:min(820px,95vw);max-height:85vh;
  background:#fff;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.22);
  display:flex;flex-direction:column;overflow:hidden;
}
#loginLogPopup::before {
  content:'';display:block;height:4px;flex-shrink:0;
  background:linear-gradient(to right,#2F6FED,#6E9BF7);
}
.ll-header { display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;flex-shrink:0; }
.ll-header h2 { margin:0;font-size:1.05rem;color:var(--text-primary);font-weight:700; }
.ll-close { background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-primary);line-height:1; }
.ll-body { overflow-y:auto;padding:0 18px 18px; }
.ll-section-title { font-size:0.8rem;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:0.07em;margin:14px 0 6px; }
.ll-table { width:100%;border-collapse:collapse;font-size:0.82rem; }
.ll-table th { background:#F1F5F9;color:var(--text-primary);font-weight:700;padding:6px 8px;text-align:left;border-bottom:2px solid #E2E8F0; }
.ll-table td { padding:5px 8px;border-bottom:1px solid #F0F2F8;color:var(--text-primary);vertical-align:top; }
.ll-table tr:last-child td { border-bottom:none; }
.ll-event-login  { color:#065F46;font-weight:700; }
.ll-event-logout { color:#B45309;font-weight:700; }
.ll-ua { color:#888;font-size:0.74rem;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ll-clear-btn { background:none;border:1px solid #c0392b;color:#c0392b;border-radius:4px;padding:3px 10px;font-size:0.78rem;cursor:pointer;font-weight:600; }
.ll-clear-btn:hover { background:#c0392b;color:#fff; }
.ll-end-btn { background:none;border:1px solid #c0392b;color:#c0392b;border-radius:4px;padding:2px 8px;font-size:0.75rem;cursor:pointer;font-weight:600;white-space:nowrap; }
.ll-end-btn:hover { background:#c0392b;color:#fff; }
.ll-event-forcedlogout { color:#c0392b;font-weight:700; }

/* -------------------------------------------------------
   QUICK ACCESS — pinned-pages bar + right-click menu + docked tab panel
------------------------------------------------------- */

/* Right-click "Pin to Quick Access" menu on a sidebar link */
#qa-ctx-menu {
  position: fixed; z-index: 2100; background: #fff; color: var(--text-primary);
  border: 1px solid #D1D5E8; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 4px; min-width: 200px;
}
.qa-ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 8px 10px; border-radius: 6px;
  font-family: inherit; font-size: 0.85rem; color: var(--text-primary);
  text-align: left; cursor: pointer;
}
.qa-ctx-item:hover { background: #F0F4F8; }
.qa-ctx-item svg   { width: 15px; height: 15px; flex-shrink: 0; }

/* Persistent quick-access bar — pinned pages, always visible, centred.
   Styled like the shared .app-tab-bar (see below) so pinned pages read as
   tabs, not buttons — but mirrored for footer placement: the active
   indicator sits on the TOP edge of each tab (against #qa-bar's own
   border-top) rather than the bottom, since .app-tab's border-bottom
   convention assumes a header-position bar. Fixed height so #qa-dock's
   `bottom: 48px` (below) and the page's has-qa-bar padding-bottom stay in
   sync with the bar's actual footprint. Unpinning is right-click only (see
   nav-loader.js's qa-bar contextmenu handler) — no inline remove button. */
#qa-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: flex; align-items: stretch; justify-content: center; gap: 2px; overflow-x: auto;
  height: 48px; padding: 0 14px; background: var(--card-bg);
  border-top: 1px solid #D1D5E8; box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
@media (min-width: 800px) {
  #qa-bar { left: 240px; }
  body.nav-collapsed #qa-bar { left: 60px; }
}
.qa-pin {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 100%; box-sizing: border-box;
  padding: 0 16px; border: none; border-top: 3px solid transparent;
  background: none; color: var(--text-muted); font-family: inherit;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.qa-pin:hover  { color: var(--text-primary); }
.qa-pin.active { color: var(--accent-blue); border-top-color: var(--accent-blue); }
.qa-pin.active:hover { color: var(--accent-blue); }
.qa-pin--here  { opacity: 0.55; cursor: default; }
.qa-pin--here:hover { color: var(--text-muted); }
.qa-pin svg   { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.70; }
.qa-pin.active svg { opacity: 1; }

/* The qa-bar is `position: fixed`, so it overlays whatever's at the true
   bottom of the page rather than pushing it up — without this, the last
   ~48px of every page's content sits behind the bar and can never be
   scrolled into view. Only applied when the bar actually exists. */
body.has-qa-bar .app { padding-bottom: 76px; }

/* Docked tab panel — fills the page above the quick-access bar. Each pinned
   page's iframe is created once and kept in the DOM (see nav-loader.js), so
   this panel just shows/hides content rather than reloading it. Slides up
   from behind the bar rather than growing from 0 height, so it covers the
   full page instead of leaving the underlying page visible above it. */
#qa-dock {
  position: fixed; left: 0; right: 0; top: 0; bottom: 48px; z-index: 949;
  background: var(--card-bg);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
#qa-dock.open { transform: translateY(0); pointer-events: auto; }
@media (min-width: 800px) {
  #qa-dock { left: 240px; }
  body.nav-collapsed #qa-dock { left: 60px; }
}
.qa-dock-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid #E2E8F0; flex-shrink: 0;
}
.qa-dock-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.qa-dock-actions { display: flex; align-items: center; gap: 14px; }
.qa-dock-actions a {
  display: flex; align-items: center; gap: 4px; color: var(--text-muted);
  font-size: 0.8rem; text-decoration: none;
}
.qa-dock-actions a:hover { color: var(--accent-blue); }
.qa-dock-actions a svg { width: 14px; height: 14px; }
#qaDockCollapse {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; padding: 2px;
}
#qaDockCollapse:hover { color: var(--text-primary); }
#qaDockCollapse svg { width: 18px; height: 18px; }
.qa-dock-body { flex: 1; position: relative; overflow: hidden; }
.qa-dock-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Page loaded inside a quick-access dock tab — sidebar/splash are skipped
   by nav-loader.js, so undo the layout margin that assumes they're present. */
html.qa-embedded #main-content,
html.qa-embedded #footer-mount {
  margin-left: 0 !important;
}

/* Login page — no background image ever */
html.login-page, html.login-page body {
  background-image: none !important;
  background-color: #F5F7FA !important;
}

/* -------------------------------------------------------
   CHECKBOX DROPDOWN COMPONENT
   Shared by analytics-dashboard, fleet-age-profile, etc.
------------------------------------------------------- */
.cb-dd          { position:relative; display:block; }
.cb-dd-btn {
  width:100%; padding:8px 30px 8px 12px; border:1.5px solid var(--field-border); border-radius:8px;
  background:var(--field-bg); color:var(--text-primary); font-family:inherit; font-size:0.875rem; text-align:left; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative;
  transition:border-color .12s, background-color .12s, color .12s; min-width:unset;
}
.cb-dd-btn::after {
  content:"▾"; position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:0.75rem; color:var(--text-muted); pointer-events:none; transition:transform .15s;
}
.cb-dd-btn.open               { border-color:var(--accent-blue); box-shadow:0 0 0 3px rgba(47,111,237,0.12); }
.cb-dd-btn.open::after        { transform:translateY(-50%) rotate(180deg); }
.cb-dd-panel {
  position:absolute; top:calc(100% + 3px); left:0; min-width:100%; max-width:340px;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:6px;
  box-shadow:0 4px 18px rgba(0,0,0,0.13); z-index:500; overflow:hidden;
}
.cb-dd-search { padding:7px 8px; border-bottom:1px solid var(--card-border); }
.cb-dd-search input {
  width:100%; padding:5px 8px; border:1px solid var(--field-border); border-radius:4px;
  font-size:0.83rem; font-family:inherit; box-sizing:border-box;
  background:var(--field-bg); color:var(--text-primary);
}
.cb-dd-search input:focus { outline:none; border-color:var(--accent-blue); }
.cb-dd-list    { max-height:220px; overflow-y:auto; padding:4px 0; }
.cb-dd-item    { display:flex; align-items:center; gap:8px; padding:5px 11px; cursor:pointer; user-select:none; }
.cb-dd-item:hover { background:var(--surface-2); }
.cb-dd-item input[type="checkbox"] {
  width:15px; height:15px; flex-shrink:0; accent-color:var(--accent-blue); cursor:pointer; margin:0;
}
.cb-dd-item label { font-size:0.86rem; cursor:pointer; flex:1; margin:0; color:var(--text-primary); }
.cb-dd-divider    { height:1px; background:var(--card-border); margin:3px 0; }
.cb-dd-empty      { padding:8px 12px; font-size:0.83rem; color:var(--text-muted); }

/* -------------------------------------------------------
   GLOBAL SCOPE BAR — two independent OpCo / Depot selectors side by
   side + a Save button, lives in .top-nav-right on every page
   (navbar.html + nav-loader.js). Selecting OpCo(s) auto-filters the
   Depot list's options; nothing applies app-wide until Save is clicked.
------------------------------------------------------- */
.scope-bar   { display:flex; align-items:center; gap:6px; }
.scope-dd    { position:relative; }
.scope-pill {
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:8px;
  color:#fff; font-family:inherit; font-size:0.82rem; font-weight:600; cursor:pointer;
  max-width:150px; transition:background .15s, border-color .15s;
}
.scope-pill:hover  { background:rgba(255,255,255,0.16); }
.scope-pill.open   { border-color:var(--accent-blue); background:rgba(255,255,255,0.16); }
.scope-pill svg    { width:15px; height:15px; flex-shrink:0; opacity:0.85; }
.scope-pill span   { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scope-pill-chevron { transition:transform .15s; }
.scope-pill.open .scope-pill-chevron { transform:rotate(180deg); }

.scope-save-btn {
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  background:var(--accent-blue); border:1px solid var(--accent-blue); border-radius:8px;
  color:#fff; font-family:inherit; font-size:0.82rem; font-weight:700; cursor:pointer;
  transition:filter .15s;
}
.scope-save-btn:hover { filter:brightness(1.1); }
.scope-save-btn svg   { width:15px; height:15px; flex-shrink:0; }

.scope-dd-panel {
  position:absolute; top:calc(100% + 6px); left:0; width:240px; max-width:calc(100vw - 24px);
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,0.22); z-index:2100; overflow:hidden;
}
/* Depot is the rightmost dropdown, sitting close to the viewport edge —
   anchor its panel from the right so it opens leftward instead of running
   off-screen (OpCo, the leftmost one, has room to open rightward as normal). */
#scopeDepotPanel { left:auto; right:0; }
.scope-panel-hd {
  padding:8px 12px 4px; font-size: 0.75rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--text-muted);
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.scope-panel-hd-actions {
  display:flex; align-items:center; gap:4px; font-weight:600; letter-spacing:normal; text-transform:none;
}
.scope-selall-btn {
  background:none; border:none; color:var(--accent-blue); font-size: 0.75rem;
  cursor:pointer; padding:0; font-family:inherit;
}
.scope-selall-btn:hover { text-decoration:underline; }
.scope-panel-list { max-height:220px; padding:4px 0; }
.scope-panel-footer {
  padding:8px 12px; border-top:1px solid var(--card-border);
}
.scope-reset-btn {
  background:none; border:none; color:var(--accent-blue); font-size:0.8rem;
  cursor:pointer; padding:0; text-decoration:underline;
}

/* On desktop the pills sit on dark sidebar-matching nav-bg (unhidden top-nav,
   see the min-width:800px block above); on mobile top-nav is light (mobile.css)
   so they need a darker, non-transparent-on-white treatment there too. */
@media (max-width:768px) {
  .scope-pill {
    background:rgba(30,41,59,0.06); border-color:var(--card-border); color:var(--text-primary);
  }
  .scope-pill:hover, .scope-pill.open { background:rgba(30,41,59,0.11); }
  .scope-pill svg { opacity:0.7; }
  .scope-pill { max-width:96px; }
}

/* top-nav-right only has user pill, icon buttons, sign-in — no big nav-btn links */

/* Logo link in nav-right — styled as a peer nav button */
.nav-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--nav-btn-bdr);
  border-radius: 5px;
  box-sizing: border-box;
  transition: border-color 0.12s, background 0.12s;
}
.nav-logo-link:hover {
  background: #f0f2f4;
  border-color: var(--nav-btn-bdr-h);
}
/* Strip inner badge styling — outer link is now the button shape */
.nav-logo-link .mot-logo {
  height: 26px;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ============================================================
   COLLAPSIBLE SIDEBAR — icon-only mode
   body.nav-collapsed applied by nav-loader.js (desktop only)
============================================================ */
@media (min-width: 800px) {
  body.nav-collapsed #nav-drawer { width: 60px; }

  body.nav-collapsed #main-content,
  body.nav-collapsed #footer-mount { margin-left: 60px; }

  /* Brand (logo row) — hide entirely when collapsed */
  body.nav-collapsed #nav-drawer .sidebar-brand { display: none; }

  /* Top bar — centre the burger when collapsed */
  body.nav-collapsed #nav-drawer .sidebar-top-bar { justify-content: center; }

  /* Account — hide name + chevron, keep avatar centred */
  body.nav-collapsed #nav-drawer .sidebar-account-toggle { justify-content: center; padding: 8px; }
  body.nav-collapsed #nav-drawer .sidebar-account-name,
  body.nav-collapsed #nav-drawer .sidebar-account-chevron { display: none; }
  body.nav-collapsed #nav-drawer .sidebar-account-panel  { max-height: 0 !important; overflow: hidden; }

  /* Login link — icon only */
  body.nav-collapsed #nav-drawer .sidebar-account-login .nav-drawer-link { justify-content: center; padding: 9px; }
  body.nav-collapsed #nav-drawer .sidebar-account-login .nav-drawer-link span { display: none; }

  /* Nav links — icon only, centred */
  body.nav-collapsed #nav-drawer .nav-drawer-link {
    justify-content: center;
    padding: 9px;
    margin: 2px 6px;
  }
  body.nav-collapsed #nav-drawer .nav-drawer-link span { display: none; }
  body.nav-collapsed #nav-drawer .nav-drawer-link svg  { width: 18px; height: 18px; opacity: 0.60; }
  body.nav-collapsed #nav-drawer .nav-drawer-link:hover svg { opacity: 1; }
  body.nav-collapsed #nav-drawer .nav-drawer-link.active {
    border-left: none;
    padding-left: 9px;
  }

  /* Section labels, dividers, settings rows — hide */
  body.nav-collapsed #nav-drawer .nav-drawer-label,
  body.nav-collapsed #nav-drawer .nav-drawer-divider,
  body.nav-collapsed #nav-drawer .sidebar-bg-row { display: none; }

  /* Icon-only mode ignores each section's own expand/collapse state — that
     toggle exists to save vertical space from text labels, which aren't
     shown here anyway, so every icon should always be visible regardless. */
  body.nav-collapsed #nav-drawer .nav-drawer-section.collapsed .nav-drawer-section-body {
    display: block;
  }

    body.nav-collapsed #nav-drawer .nav-drawer-section { margin-bottom: 0; }

  /* Tooltips — label on hover when in icon-only mode */
  body.nav-collapsed #nav-drawer .nav-drawer-body { overflow: visible; }
  body.nav-collapsed #nav-drawer [data-tip] { position: relative; overflow: visible; }

  body.nav-collapsed #nav-drawer [data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #10161F;
    color: #F8FAFC;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    pointer-events: none;
    z-index: 2000;
  }

  body.nav-collapsed #nav-drawer [data-tip]:hover::before {
    content: "";
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #10161F;
    pointer-events: none;
    z-index: 2000;
  }
}

/* ============================================================
   ADMIN-ONLY ELEMENTS
   Placed AFTER .top-nav-right .nav-btn so cascade order AND
   specificity both guarantee these stay hidden until JS removes
   the class for authenticated admins.
============================================================ */
/* ============================================================
   DARK MODE
   Explicit toggle only (html[data-mode="dark"]), not prefers-
   color-scheme — persisted via localStorage("colorMode"), set
   before first paint by the inline script in <head>.

   The sidebar is deliberately NOT overridden — it stays the same
   dark navy in both modes, only the workspace surface changes.
============================================================ */
html[data-mode="dark"] {
  --page-bg:       #0B1017;
  --card-bg:       #131B26;
  --card-border:   #232F40;
  --card-shadow:   0 1px 3px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.45);

  --text-primary:  #E9EEF5;
  --text-muted:    #93A1B5;
  --text-light:    #4B5A6E;

  --accent-blue:   #6E9BF7;
  --sky-tint:      #17233B;
  --accent-teal-tint: #103330;

  --footer-bg:     #0F1621;
  --footer-border: #232F40;
  --footer-text:   #E9EEF5;
  --footer-muted:  #93A1B5;

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2393A1B5'/%3E%3C/svg%3E");
  --bg-overlay-tint: rgba(11, 16, 23, 0.62);

  --field-bg:      #0D141F;
  --field-border:  #2A3849;

  --table-row-bg:    #131B26;
  --table-row-alt:   #17202C;
  --table-row-hover: #17233B;
  --table-cell-line: #202B3A;

  --surface-2:       #1B2431;
  --surface-2-hover: #232F40;

  --pill-ok-bg:      #0F2C22; --pill-ok-fg:      #34D399;
  --pill-soon-bg:    #34260C; --pill-soon-fg:    #FBBF24;
  --pill-expired-bg: #3A1420; --pill-expired-fg: #FB7185;
  --pill-sorn-bg:    #1B2431; --pill-sorn-fg:    #93A1B5;
  --pill-info-bg:    #17233B; --pill-info-fg:    #8FB4FA;
}

/* Message/status banners — same semantic left-border pattern, dark surface */
html[data-mode="dark"] .message.info,
html[data-mode="dark"] .status-msg.info    { background: #17233B; color: #C7D9FB; }
html[data-mode="dark"] .message.error,
html[data-mode="dark"] .status-msg.error   { background: #3A1420; color: #FBD3DC; }
html[data-mode="dark"] .message.success,
html[data-mode="dark"] .status-msg.success { background: #0F2C22; color: #BFF3DC; }
html[data-mode="dark"] .message.warning,
html[data-mode="dark"] .status-msg.warning { background: #34260C; color: #FDE4B0; }

/* Photo background overlay reads far too bright at full opacity on a dark
   workspace — dim the underlying image itself, not just the tint on top. */
html[data-mode="dark"] #main-content { background-blend-mode: multiply; }

/* Shared popups (historicalPopup, cacheEditorPopup, login log, processing
   spinner, etc. all use these) — white by default, never revisited when
   dark mode was added. */
html[data-mode="dark"] .popup-card,
html[data-mode="dark"] .processing-box,
html[data-mode="dark"] #loginLogPopup { background: var(--card-bg); color: var(--text-primary); }

/* ============================================================
   ADMIN-ONLY ELEMENTS
   Placed AFTER all other rules so cascade order AND specificity
   both guarantee these stay hidden until JS removes the class
   for authenticated admins.
============================================================ */
.admin-only,
.admin-only-section,
.top-nav-right .admin-only,
.top-nav-right .admin-only-section,
.superadmin-only,
.fleettools-only {
  display: none !important;
}

/* ── Collapsible nav sections ────────────────────────────────
   Each .nav-drawer-section's label becomes a clickable toggle;
   collapsing hides its .nav-drawer-section-body. State persists
   per-section via localStorage (see nav-loader.js). */
.nav-drawer-label-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  font: inherit; color: rgba(255,255,255,0.60); text-align: left; min-width: 0;
  border-radius: 4px;
}
/* Overrides the site-wide button:hover/:active rules (higher specificity
   than a bare class, since :hover on a tag selector beats a plain class) —
   without this the generic button style's strong blue hover bleeds through
   onto these section headers instead of the subtle nav-link hover. */
.nav-drawer-label-toggle:hover,
.nav-drawer-label-toggle:focus {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.nav-drawer-label-toggle:active { transform: none; }
.nav-section-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s; opacity: .6; }
.nav-drawer-section.collapsed .nav-section-chevron { transform: rotate(-90deg); }
.nav-drawer-section.collapsed .nav-drawer-section-body { display: none; }

/* ============================================================
   INDEX PAGE — TAB BAR + COLUMN SETTINGS
   Prefix: idx-  (no collision with existing styles)
============================================================ */

/* ── Tab bar ─────────────────────────────────────────────── */
.idx-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 2px solid var(--card-border);
  margin-bottom: 20px;
}

.idx-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  min-width: unset;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -2px;
  letter-spacing: 0;
  white-space: nowrap;
}

.idx-tab:hover,
.idx-tab:hover svg { color: var(--text-primary); background: none; opacity: 0.85; }
.idx-tab:active { transform: none; }

.idx-tab svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.60; }

.idx-tab--active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.idx-tab--active svg { opacity: 1; }

/* ── Shared tab bar — use these on all pages ─────────────── */
.app-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 2px solid var(--card-border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  min-width: unset;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -2px;
  letter-spacing: 0;
  white-space: nowrap;
  font-family: inherit;
}
.app-tab:hover { color: var(--text-primary); background: none; border-color: transparent; }
.app-tab:active { transform: none; }
.app-tab svg, .app-tab i { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.70; }
.app-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); background: none; }
.app-tab.active:hover { background: none; color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.app-tab.active svg, .app-tab.active i { opacity: 1; }

/* ── Tab panels ──────────────────────────────────────────── */
.idx-panel--hidden { display: none; }

/* ── Column settings trigger wrapper (sits at bottom of card) */
.idx-col-trigger-wrap {
  position: relative;
  display: inline-flex;
  margin-top: 16px;
}

/* ── Column settings FAB ─────────────────────────────────── */
.idx-col-fab {
  width: 34px;
  height: 34px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(30,41,59,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
  min-width: unset;
  padding: 0;
}

.idx-col-fab:hover {
  background: #EFF6FF;
  color: var(--accent-blue);
  border-color: var(--accent-blue);
  box-shadow: 0 3px 10px rgba(47,111,237,0.15);
}

.idx-col-fab svg { width: 15px; height: 15px; }
.idx-col-fab--hidden { display: none !important; }

/* ── Column settings panel ────────────────────────────────── */
.idx-col-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 201;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(30,41,59,0.16);
  width: 230px;
  overflow: hidden;
  animation: idxColPanelIn 0.16s ease-out;
}

@keyframes idxColPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.idx-col-panel--hidden { display: none; }

.idx-col-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
}

.idx-col-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  min-width: unset;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.idx-col-close:hover { background: var(--card-border); color: var(--text-primary); }
.idx-col-close svg { width: 13px; height: 13px; }

.idx-col-list { padding: 4px 0 6px; }

.idx-col-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.10s;
  user-select: none;
}

.idx-col-row:hover { background: var(--table-row-alt); }
.idx-col-row.idx-col-locked { cursor: default; }
.idx-col-row.idx-col-locked:hover { background: none; }

.idx-col-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--field-border);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--field-bg);
  transition: background 0.12s, border-color 0.12s;
}

.idx-col-check.checked {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.idx-col-check.checked::after {
  content: "";
  width: 8px;
  height: 4.5px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.idx-col-locked .idx-col-check { background: var(--surface-2); border-color: var(--field-border); opacity: 0.6; }
.idx-col-locked .idx-col-check.checked { background: #94A3B8; border-color: #94A3B8; }

.idx-col-label {
  flex: 1;
  font-size: 0.87rem;
  color: var(--text-primary);
}

.idx-col-locked .idx-col-label { color: var(--text-muted); }

.idx-col-drag { flex-shrink: 0; color: #D1D5DB; }
.idx-col-drag svg { width: 13px; height: 13px; display: block; }

/* ── EAM status pill ──────────────────────────────────────── */
.ov-eam-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  background: #FEE2E2;
  color: #991B1B;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Column visibility rules ──────────────────────────────── */
#overviewVehicleTable.hide-fleet      .ov-col-fleet      { display: none; }
#overviewVehicleTable.hide-depot      .ov-col-depot      { display: none; }
#overviewVehicleTable.hide-fuel       .ov-col-fuel       { display: none; }
#overviewVehicleTable.hide-expiry     .ov-col-expiry     { display: none; }
#overviewVehicleTable.hide-days       .ov-col-days       { display: none; }
#overviewVehicleTable.hide-tax-status .ov-col-tax-status { display: none; }
#overviewVehicleTable.hide-tax-due    .ov-col-tax-due    { display: none; }
#overviewVehicleTable.hide-seats      .ov-col-seats      { display: none; }
#overviewVehicleTable.hide-ved-12     .ov-col-ved-12     { display: none; }
#overviewVehicleTable.hide-ved-6      .ov-col-ved-6      { display: none; }
#overviewVehicleTable.hide-eam-status .ov-col-eam-status { display: none; }
#overviewVehicleTable.hide-cert       .ov-col-cert       { display: none; }

/* Overview table — fleet status chip */
#overviewVehicleTable.hide-status .ov-col-status { display: none; }
.ov-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; white-space: nowrap; }
.ov-status--inservice { background: #059669; }
.ov-status--training  { background: #0079c1; }
.ov-status--reserve   { background: #D97706; }
.ov-status--disposal  { background: #505A63; }
.ov-status--ancillary { background: #7C3AED; }
.ov-status--onorder   { background: #64748B; }