/* ============================================================
   DRIVO v3 — Monochrome Blue Design System
   "Stripe / Linear level" — deep, alive, premium
   ============================================================ */

/* Font loaded non-blocking via <link> in index.html */

/* ── Design Tokens ── */
:root {
  /* Blue scale */
  --blue-950: #051e38;
  --blue-900: #072f57;
  --blue-800: #094780;
  --blue-700: #0c5a9e;
  --blue-600: #0f6ab8;
  --blue-500: #1a82d4;
  --blue-400: #3a8dde;
  --blue-300: #5ba3e8;
  --blue-200: #93c5fd;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  --primary:        var(--blue-800);
  --primary-dark:   var(--blue-900);
  --primary-light:  var(--blue-600);
  --accent:         var(--blue-400);
  --accent-light:   var(--blue-300);
  --accent-glow:    rgba(58,141,222,.28);

  --white:    #ffffff;
  --bg:       #f2f6fc;
  --bg-2:     #e8f0fa;
  --bg-card:  #ffffff;

  --text:       #0c1a2e;
  --text-2:     #243756;
  --text-muted: #6b7a90;
  --text-light: #9aadc4;

  --border:       #d2e3f5;
  --border-light: #eaf2fb;

  /* Category shades — all blue */
  --cat-audit:     #094780;
  --cat-financial: #0c5a9e;
  --cat-fleet:     #1470be;
  --cat-tolls:     #1a82d4;

  /* Shadows — blue-tinted */
  --sh-xs:  0 1px 3px  rgba(9,71,128,.06);
  --sh-sm:  0 2px 10px rgba(9,71,128,.08);
  --sh:     0 4px 20px rgba(9,71,128,.11);
  --sh-lg:  0 12px 36px rgba(9,71,128,.15);
  --sh-xl:  0 24px 60px rgba(9,71,128,.20);

  /* Glow */
  --glow-xs: 0 0 10px rgba(58,141,222,.25);
  --glow-sm: 0 0 20px rgba(58,141,222,.32);
  --glow:    0 0 36px rgba(58,141,222,.42);

  --sidebar-w:  256px;
  --radius:     14px;
  --radius-sm:  9px;
  --radius-xs:  5px;
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* Category modifiers — components read --cat-c / --cat-c2 */
.cat-audit     { --cat-c: #094780; --cat-c2: #072f57; }
.cat-financial { --cat-c: #0c5a9e; --cat-c2: #094780; }
.cat-fleet     { --cat-c: #1470be; --cat-c2: #0c5a9e; }
.cat-tolls     { --cat-c: #1a82d4; --cat-c2: #1470be; }
.cat-claims    { --cat-c: #2196e8; --cat-c2: #1a82d4; }
.cat-cs        { --cat-c: #2ea8f0; --cat-c2: #2196e8; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── Global focus ring (keyboard nav) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Button micro-interaction ── */
.btn:active   { transform: scale(.97); }
.nav-item:active { transform: scale(.98); }

/* ── Main content scrolls smoothly ── */
.main-content { scroll-behavior: smooth; }

/* ── Page container — will-change set/unset dynamically by JS during animation only ── */

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background:
    radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(175deg, #0d5494 0%, #094780 38%, #072f57 100%);
  background-size: 22px 22px, 100% 100%;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--transition);
  border-right: 1px solid rgba(255,255,255,.06);
}
/* top shimmer line */
.sidebar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* Logo */
.sidebar-logo {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: white; letter-spacing: -1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
  transition: box-shadow var(--transition);
}
.sidebar:hover .sidebar-logo-icon { box-shadow: 0 2px 8px rgba(0,0,0,.2), var(--glow-xs), inset 0 1px 0 rgba(255,255,255,.2); }
.sidebar-logo-text { font-size: 20px; font-weight: 900; color: white; letter-spacing: -.6px; }
.sidebar-logo-badge {
  margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: rgba(255,255,255,.45); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12); padding: 2px 7px; border-radius: 20px;
}

/* ── Sidebar search box (sits between logo and nav) ──────────── */
.sidebar-search {
  margin: 14px 14px 4px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: 0 10px;
  transition: background .15s ease, border-color .15s ease;
}
.sidebar-search:focus-within {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}
.sb-search-icon {
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,.5);
  flex-shrink: 0;
}
.sb-search-icon svg.lucide { width: 14px; height: 14px; }
.sb-search-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 13px; font-family: inherit;
  color: white;
  padding: 9px 0;
}
.sb-search-input::placeholder { color: rgba(255,255,255,.45); }
.sb-search-clear {
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,.55);
  padding: 2px; display: inline-flex;
  border-radius: 4px;
}
.sb-search-clear:hover { color: white; background: rgba(255,255,255,.10); }
.sb-search-clear svg.lucide { width: 12px; height: 12px; }

/* Search results popover — anchored to the right of the sidebar */
.sb-search-popover {
  position: fixed;
  top: 110px;
  left: var(--sidebar-w);
  margin-left: 8px;
  width: 460px;
  max-width: calc(100vw - var(--sidebar-w) - 24px);
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-lg, 0 10px 40px rgba(15,23,42,.18));
  z-index: 200;
  padding: 8px 4px;
  animation: sbPopFade .15s ease-out;
}
.sb-search-popover[hidden] { display: none; }
@keyframes sbPopFade {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.sb-search-empty {
  padding: 18px 14px;
  font-size: 12.5px; color: var(--text-muted);
  text-align: center;
}
.sb-search-section {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  padding: 10px 12px 6px;
  display: flex; align-items: center; gap: 8px;
}
.sb-search-count {
  background: var(--n-100, #f1f5f9);
  color: var(--text-2);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
}
.sb-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease;
}
.sb-search-item:hover { background: var(--n-50, #f8fafc); }
.sb-search-item.sb-search-note { cursor: default; }
.sb-search-icon-wrap {
  width: 28px; height: 28px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-search-icon-wrap svg.lucide { width: 14px; height: 14px; }
.sb-search-avatar {
  width: 28px; height: 28px;
  background: var(--brand);
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.sb-search-body { flex: 1; min-width: 0; overflow: hidden; }
.sb-search-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.sb-search-sub, .sb-search-meta {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  margin-top: 1px;
}
.sb-search-badge {
  font-size: 10px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand);
  padding: 3px 8px; border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sb-search-popover mark { background: rgba(20,112,190,.18); color: var(--brand); padding: 0 1px; border-radius: 2px; }

/* ── Announcements badge on the nav item ─────────────────────── */
.nav-item-action { position: relative; }
.nav-badge {
  margin-left: auto;
  background: var(--brand);
  color: white;
  font-size: 10px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-badge[hidden] { display: none; }

/* ── Slide-out panel (used by Announcements) ─────────────────── */
.sb-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(8,18,38,.42);
  z-index: 199;
  opacity: 0;
  transition: opacity .22s ease;
}
.sb-panel-overlay.open { opacity: 1; }
.sb-panel-overlay[hidden] { display: none; }
.sb-panel {
  position: fixed;
  top: 0; bottom: 0;
  left: var(--sidebar-w);
  width: 380px;
  max-width: calc(100vw - var(--sidebar-w));
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  z-index: 200;
  display: flex; flex-direction: column;
  transform: translateX(-12px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  box-shadow: 4px 0 20px rgba(15,23,42,.10);
}
.sb-panel.open { transform: translateX(0); opacity: 1; }
.sb-panel[hidden] { display: none; }
.sb-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.sb-panel-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--text);
}
.sb-panel-title svg.lucide { width: 16px; height: 16px; color: var(--brand); }
.sb-panel-close {
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.sb-panel-close:hover { background: var(--n-100); color: var(--text); border-color: var(--border); }
.sb-panel-body {
  flex: 1; overflow-y: auto;
  padding: 8px 12px;
}
.sb-panel-compose {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex; gap: 8px;
  background: var(--n-50, #f8fafc);
}
.sb-panel-compose .home-notes-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px; font-family: inherit;
}

/* Mobile: panel takes most of the screen */
@media (max-width: 768px) {
  .sb-panel { left: 0; width: 100vw; }
  .sb-search-popover { left: 0; right: 0; width: auto; margin: 4px 8px 0; max-height: 60vh; }
}

/* Nav */
.sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
  color: rgba(255,255,255,.32);
  padding: 18px 8px 7px;
}
.sidebar-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.sidebar-section-label:first-child { padding-top: 4px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  color: rgba(255,255,255,.62);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 2px;
  border: none; background: none; width: 100%; text-align: left;
  position: relative;
}
.nav-item:hover {
  background: rgba(255,255,255,.09);
  color: white;
  transform: translateX(3px);
}
.nav-item.active {
  background: rgba(255,255,255,.14);
  color: white; font-weight: 700;
  box-shadow: 0 0 20px rgba(58,141,222,.18), inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, var(--accent-light), var(--accent));
  box-shadow: 0 0 8px var(--accent);
}
.nav-icon {
  width: 20px; height: 20px; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: .8;
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-text { }
.nav-badge {
  margin-left: auto; background: rgba(255,255,255,.18); color: white;
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
}
.nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 4px; }

/* User block */
.sidebar-user {
  padding: 14px 16px; gap: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  display: flex; align-items: center;
  cursor: pointer;
  transition: background var(--transition);
}
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.08));
  border: 1.5px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: white;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role {
  font-size: 10px; font-weight: 600; text-transform: capitalize; letter-spacing: .3px;
  color: rgba(255,255,255,.48);
  display: flex; align-items: center; gap: 5px;
}
.user-role-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-light); display: inline-block; }
.btn-logout {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.48); background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; transition: all var(--transition); font-size: 13px;
}
.btn-logout:hover { background: rgba(255,255,255,.12); color: white; border-color: rgba(255,255,255,.22); }

/* ============================================================
   MOBILE
   ============================================================ */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; }
.mobile-header {
  display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px;
  background: var(--blue-800); align-items: center; padding: 0 16px; z-index: 98; gap: 12px;
}
.mobile-header-logo { font-size: 18px; font-weight: 800; color: white; }
.btn-menu { background: none; border: none; color: white; font-size: 22px; cursor: pointer; padding: 4px; display: flex; align-items: center; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.app-layout { display: flex; width: 100%; min-height: 100vh; }
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1; min-width: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
}
.page-container { flex: 1; padding: 32px 36px; width: 100%; }
.page-container.page-wide { padding-left: 20px; padding-right: 20px; }

/* ============================================================
   AUTH SCREEN
   ============================================================ */
/* ── Auth screen: shared shell ── */
.auth-screen {
  min-height: 100vh;
  display: flex;
  background: #f0f5fc;
}

/* ══ LOGIN — split layout ══ */
.auth-screen.auth-login {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}

/* Login stats row */
.auth-login-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 44px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px 24px;
  backdrop-filter: blur(6px);
}
.auth-login-stat {
  flex: 1;
  text-align: center;
}
.auth-login-stat-val {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
  line-height: 1;
}
.auth-login-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,.50);
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.auth-login-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

/* Floating preview cards */
.auth-login-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 36px;
}
.auth-preview-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: -8px;
  transition: transform .2s;
}
.auth-preview-card-icon {
  font-size: 24px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-preview-card-body { flex: 1; }
.auth-preview-card-title {
  font-size: 13.5px; font-weight: 700; color: #fff;
}
.auth-preview-card-sub {
  font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px;
}
.auth-preview-card-badge {
  font-size: 10px; font-weight: 800;
  color: #10b981;
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(16,185,129,.30);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Larger input for login */
.form-input-lg { height: 48px; font-size: 14.5px; }

/* Responsive login */
@media (max-width: 860px) {
  .auth-screen.auth-login { flex-direction: column; }
  .auth-login-cards { display: none; }
}
@media (max-width: 540px) {
  .auth-login-stats { display: none; }
}

/* legacy centered card — kept for fallback */
.auth-card {
  background: white; border-radius: 18px;
  padding: 44px 40px; width: 100%; max-width: 420px;
  box-shadow: var(--sh-xl);
}

/* ══ REGISTER — split layout ══ */
.auth-screen.auth-register {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}

/* Left branded panel */
.auth-split-left {
  flex: 0 0 42%;
  background:
    radial-gradient(ellipse at 10% 80%, rgba(26,130,212,.45) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(9,71,128,.60) 0%, transparent 55%),
    linear-gradient(155deg, #051e38 0%, #083d6e 45%, #0d5494 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
}

/* decorative grid dots */
.auth-split-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* decorative glow orb */
.auth-split-left::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,130,212,.30) 0%, transparent 70%);
  pointer-events: none;
}

.auth-brand-top { position: relative; z-index: 1; }
.auth-brand-logo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 60px;
}
.auth-brand-logo-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: white;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.auth-brand-logo-text {
  font-size: 26px; font-weight: 900; color: white; letter-spacing: -.5px;
}

.auth-brand-headline {
  font-size: 32px; font-weight: 900; color: white;
  line-height: 1.18; letter-spacing: -.6px; margin-bottom: 16px;
}
.auth-brand-headline em {
  font-style: normal;
  background: linear-gradient(90deg, #5ba3e8, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-brand-sub {
  font-size: 14px; color: rgba(255,255,255,.60); line-height: 1.65; max-width: 300px;
}

.auth-brand-features {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 16px; margin-top: 52px;
}
.auth-brand-feature {
  display: flex; align-items: center; gap: 14px;
}
.auth-brand-feature-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.auth-brand-feature-text { font-size: 13.5px; color: rgba(255,255,255,.78); font-weight: 500; }

.auth-brand-bottom {
  position: relative; z-index: 1;
  font-size: 11.5px; color: rgba(255,255,255,.30); margin-top: 48px;
}

/* Right form panel */
.auth-split-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  overflow-y: auto;
}

.auth-form-box {
  width: 100%; max-width: 520px;
}

.auth-form-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px;
}

/* Shared card (login only) */
.auth-card {
  background: white; border-radius: 18px;
  padding: 44px 40px; width: 100%; max-width: 420px;
  box-shadow: var(--sh-xl);
}

.auth-logo { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.auth-logo-icon {
  width: 46px; height: 46px; background: var(--primary); border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 20px; font-weight: 900; letter-spacing: -1px;
  box-shadow: 0 4px 14px rgba(9,71,128,.38);
}
.auth-logo-text { font-size: 23px; font-weight: 900; color: var(--primary); letter-spacing: -.6px; }
.auth-title { font-size: 26px; font-weight: 900; color: var(--text); margin-bottom: 5px; letter-spacing: -.5px; }
.auth-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.auth-link { text-align: center; margin-top: 22px; font-size: 13px; color: var(--text-muted); }
.auth-link a { color: var(--primary); font-weight: 700; cursor: pointer; }
.auth-link a:hover { text-decoration: underline; }

/* Inline mini-link inside the password label row ("Forgot password?") */
.auth-mini-link {
  font-size: 12px; font-weight: 600; color: var(--brand);
  cursor: pointer;
}
.auth-mini-link:hover { text-decoration: underline; }
.form-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }

/* Section divider inside form */
.auth-section-label {
  font-size: 10.5px; font-weight: 700; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 1px;
  margin: 20px 0 14px; display: flex; align-items: center; gap: 10px;
}
.auth-section-label::before,
.auth-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border-light);
}

/* Wide auth card — legacy, keep for compat */
.auth-card-wide { max-width: 600px; }
.auth-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .auth-two-col { grid-template-columns: 1fr; } }

/* Register responsive */
@media (max-width: 860px) {
  .auth-screen.auth-register { flex-direction: column; }
  .auth-split-left {
    flex: 0 0 auto;
    padding: 32px 28px;
    min-height: unset;
  }
  .auth-brand-headline { font-size: 24px; }
  .auth-brand-features { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .auth-brand-feature-icon { width: 32px; height: 32px; font-size: 14px; }
  .auth-brand-feature-text { font-size: 12.5px; }
  .auth-brand-bottom { display: none; }
  .auth-split-right { padding: 32px 20px; }
}
@media (max-width: 540px) {
  .auth-split-left { padding: 24px 20px; }
  .auth-brand-logo { margin-bottom: 24px; }
  .auth-brand-features { display: none; }
}

.label-opt { font-weight: 400; color: var(--text-light); font-size: 11px; }

/* Password show/hide */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--text-muted); padding: 4px; line-height: 1;
}
.pw-toggle:hover { color: var(--primary); }

/* Password strength */
.pw-strength { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 16px; }
.pw-bars { display: flex; gap: 3px; }
.pw-bar { width: 28px; height: 4px; border-radius: 2px; transition: background .2s; }

/* NDA / Confidentiality notice box */
.reg-nda-box {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 20px;
}
.reg-nda-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.reg-nda-icon { font-size: 16px; }
.reg-nda-title {
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
  letter-spacing: .1px;
}
.reg-nda-text {
  font-size: 12.5px;
  color: #78350f;
  line-height: 1.6;
  margin-bottom: 10px;
}
.reg-nda-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reg-nda-list li {
  font-size: 12px;
  color: #78350f;
  line-height: 1.55;
}

/* Terms checkbox */
.auth-checkbox {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
}
.auth-checkbox input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--primary); cursor: pointer;
}

/* Notify modal */
.notify-modal-body { margin-bottom: 4px; }
.notify-dash-card {
  background: var(--bg); border: 1.5px solid var(--border-light);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
}
.notify-dash-label {
  font-size: 11px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
}
.notify-dash-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.notify-dash-desc  { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.notify-recipients-info {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13px; color: var(--text-muted);
}
.notify-rec-icon { font-size: 18px; }

/* Notify user selector */
.notify-loading { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.notify-users-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.notify-users-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.notify-select-actions { display: flex; align-items: center; gap: 6px; }
.notify-sel-btn {
  font-size: 12px; font-weight: 600; color: var(--primary); background: none;
  border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px;
  transition: background var(--transition);
}
.notify-sel-btn:hover { background: rgba(9,71,128,.08); }
.notify-sel-sep { font-size: 12px; color: var(--border); }
.notify-user-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow-y: auto;
  border: 1.5px solid var(--border-light); border-radius: 10px;
  padding: 6px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.notify-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  transition: background var(--transition);
}
.notify-user-row:hover { background: var(--bg); }
.notify-user-row input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--primary); cursor: pointer;
}
.notify-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  color: white; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.notify-user-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.notify-user-name  { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notify-user-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notify-selected-count {
  font-size: 12px; font-weight: 600; color: var(--primary);
  text-align: right; margin-top: 8px;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 11.5px; font-weight: 700;
  color: var(--text-2); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.form-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text); background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58,141,222,.16);
}
.form-input::placeholder { color: var(--text-light); }
textarea.form-input { resize: vertical; min-height: 90px; }
select.form-input { appearance: none; cursor: pointer; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700;
  transition: all var(--transition); cursor: pointer; border: none; line-height: 1;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-800));
  color: white;
  box-shadow: 0 2px 10px rgba(9,71,128,.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  box-shadow: 0 4px 20px rgba(9,71,128,.4), var(--glow-xs);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: rgba(9,71,128,.08); color: var(--primary); border: 1.5px solid transparent; }
.btn-secondary:hover { background: var(--primary); color: white; box-shadow: var(--glow-xs); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: white; box-shadow: var(--glow-xs); transform: translateY(-1px); }
.btn-danger { background: #1a4a8a; color: rgba(255,255,255,.85); }
.btn-danger:hover { background: #c0392b; color: white; }
.btn-ghost { background: transparent; color: var(--text-muted); padding: 8px 12px; }
.btn-ghost:hover { background: var(--bg-2); color: var(--text); }
.btn-sm  { padding: 7px 13px; font-size: 12px; }
.btn-lg  { padding: 13px 28px; font-size: 15px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ============================================================
   HOME HERO
   ============================================================ */
.home-hero {
  background:
    radial-gradient(ellipse at 80% 0%,  rgba(58,141,222,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 100%, rgba(7,47,87,.6)    0%, transparent 50%),
    linear-gradient(135deg, #094780 0%, #0b5090 50%, #1470be 100%);
  border-radius: var(--radius);
  padding: 34px 40px;
  margin-bottom: 30px;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-lg);
}
/* decorative circles */
.home-hero::before {
  content: '';
  position: absolute; top: -70px; right: -50px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.home-hero::after {
  content: '';
  position: absolute; bottom: -90px; right: 140px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.03); pointer-events: none;
}
.home-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.home-greeting { font-size: 27px; font-weight: 900; color: white; letter-spacing: -.5px; margin-bottom: 4px; }
.home-date { font-size: 13px; color: rgba(255,255,255,.55); font-weight: 500; }
.home-stats { display: flex; gap: 0; }
.home-stat {
  text-align: center; padding: 12px 28px;
  border-right: 1px solid rgba(255,255,255,.14);
}
.home-stat:last-child { border-right: none; }
.home-stat-val { display: block; font-size: 30px; font-weight: 900; color: white; line-height: 1; letter-spacing: -.5px; }
.home-stat-label { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  color: var(--text-muted); display: flex; align-items: center; gap: 9px;
}
.section-title::before { content: ''; width: 20px; height: 2.5px; background: var(--accent); border-radius: 2px; }

/* ============================================================
   HOME — CATEGORY CARDS  (all blue variants)
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px; margin-bottom: 32px;
}

/* staggered entrance */
.cat-card { animation: fadeUp .38s ease backwards; }
.cat-card:nth-child(1) { animation-delay: .04s; }
.cat-card:nth-child(2) { animation-delay: .10s; }
.cat-card:nth-child(3) { animation-delay: .16s; }
.cat-card:nth-child(4) { animation-delay: .22s; }

.cat-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--border-light);
  display: flex; flex-direction: column;
}
.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(58,141,222,.14);
}
.cat-card-top {
  height: 90px;
  background: linear-gradient(135deg, var(--cat-c, var(--primary)), var(--cat-c2, var(--blue-900)));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: relative; overflow: hidden;
}
.cat-card-top::before {
  content: '';
  position: absolute; top: -35px; right: -20px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.cat-card-top::after {
  content: '';
  position: absolute; bottom: -20px; left: 30px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.cat-card-icon-big { font-size: 34px; position: relative; z-index: 1; }
.cat-card-count-badge {
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  color: white; font-size: 11px; font-weight: 800;
  padding: 4px 12px; border-radius: 20px;
  position: relative; z-index: 1;
}
.cat-card-body { padding: 18px 22px 14px; flex: 1; }
.cat-card-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  color: var(--cat-c, var(--primary)); margin-bottom: 5px;
}
.cat-card-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: -.2px; }
.cat-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.cat-card-footer {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.cat-card-link {
  font-size: 13px; font-weight: 700; color: var(--cat-c, var(--primary));
  display: flex; align-items: center; gap: 6px;
  transition: gap var(--transition);
}
.cat-card:hover .cat-card-link { gap: 10px; }

/* ============================================================
   PAGE / CATEGORY HEADER
   ============================================================ */
.page-header-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500;
}
.breadcrumb-sep { opacity: .4; }
.breadcrumb-link { cursor: pointer; transition: color var(--transition); }
.breadcrumb-link:hover { color: var(--primary); }
.page-title { font-size: 26px; font-weight: 900; color: var(--text); letter-spacing: -.5px; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.category-hero {
  border-radius: var(--radius);
  padding: 26px 32px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--cat-c, var(--primary)), var(--cat-c2, var(--blue-900)));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-lg);
}
.category-hero::before {
  content: '';
  position: absolute; top: -50px; right: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.category-hero::after {
  content: '';
  position: absolute; bottom: -70px; right: 120px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.category-hero-left { position: relative; z-index: 1; }
.category-hero-icon { font-size: 38px; margin-bottom: 8px; line-height: 1; }
.category-hero-title { font-size: 22px; font-weight: 900; color: white; letter-spacing: -.4px; }
.category-hero-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 4px; }
.category-hero-right { position: relative; z-index: 1; }
.category-hero-stat {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  padding: 14px 24px; text-align: center;
  backdrop-filter: blur(8px);
}
.category-hero-stat-val { font-size: 32px; font-weight: 900; color: white; line-height: 1; }
.category-hero-stat-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .7px; margin-top: 4px; }

/* ============================================================
   DASHBOARD CARDS
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* staggered entrance */
.dashboard-card { animation: fadeUp .38s ease backwards; }
.dashboard-card:nth-child(1) { animation-delay: .04s; }
.dashboard-card:nth-child(2) { animation-delay: .10s; }
.dashboard-card:nth-child(3) { animation-delay: .16s; }
.dashboard-card:nth-child(4) { animation-delay: .22s; }
.dashboard-card:nth-child(5) { animation-delay: .28s; }
.dashboard-card:nth-child(6) { animation-delay: .34s; }

.dashboard-card {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--border-light);
  display: flex; flex-direction: column;
}
.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(9,71,128,.08);
}
.card-accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--cat-c, var(--primary)), var(--accent));
}
.card-inner { padding: 20px 22px 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.card-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  background: rgba(9,71,128,.07);
  color: var(--cat-c, var(--primary));
}
.card-cat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cat-c, var(--primary)); flex-shrink: 0; }
.card-index {
  font-size: 11px; font-weight: 700; color: var(--text-light);
  background: var(--border-light); padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
}
.card-title { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.3; letter-spacing: -.2px; }
.card-description { font-size: 13px; color: var(--text-muted); line-height: 1.55; flex: 1; }
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px 16px;
  border-top: 1px solid var(--border-light);
}
.card-open-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--cat-c, var(--primary));
  transition: gap var(--transition);
}
.dashboard-card:hover .card-open-btn { gap: 10px; }
.card-admin-actions { display: flex; gap: 4px; }
.card-admin-btn {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; transition: all var(--transition);
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
}
.card-admin-btn:hover { background: white; box-shadow: var(--sh-xs); }
.card-admin-btn.del:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.card-admin-btn.edit:hover { border-color: var(--accent); color: var(--primary); background: var(--blue-50); }

.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 72px 24px;
  background: white; border-radius: var(--radius);
  box-shadow: var(--sh-xs); border: 1.5px dashed var(--border);
}
.empty-state-icon { font-size: 52px; margin-bottom: 14px; opacity: .2; }
.empty-state-title { font-size: 16px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.empty-state-sub { font-size: 13px; color: var(--text-muted); }

/* ============================================================
   DASHBOARD VIEW
   ============================================================ */
.dashboard-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 18px; cursor: pointer;
  transition: color var(--transition); border: none; background: none; padding: 0;
}
.dashboard-back:hover { color: var(--primary); }
.dashboard-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.dash-title-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
  background: rgba(9,71,128,.08); color: var(--cat-c, var(--primary));
}

/* iframe — isolated from parent CSS */
.iframe-wrapper {
  background: var(--bg-2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 1.5px solid var(--border);
  position: relative;
  max-width: 1600px; width: 100%;
}
.iframe-wrapper::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cat-c, var(--primary)), var(--accent));
  z-index: 2;
}
.iframe-aspect { position: relative; width: 100%; padding-top: 56.25%; }
.iframe-aspect iframe {
  all: unset;
  position: absolute; top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  border: 0 !important; display: block !important;
  background: white;
}
.iframe-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--text-muted); font-size: 14px; background: var(--bg-2);
}
.iframe-placeholder .icon { font-size: 44px; opacity: .22; }
.iframe-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: white; z-index: 3;
}

/* ============================================================
   NOTES — Chat bubble style
   ============================================================ */
.notes-section {
  margin-top: 28px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--border-light);
  overflow: hidden;
}
.notes-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 22px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(to right, var(--bg), var(--bg-card));
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.notes-header:hover { background: linear-gradient(to right, var(--bg-2), var(--bg)); }
.notes-title {
  font-size: 13.5px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.notes-count {
  background: var(--primary);
  color: white; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 10px; min-width: 22px; text-align: center;
}
.notes-body {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 20px;
  max-height: 2000px;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  opacity: 1;
}
.notes-body-collapsed {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
}
.notes-collapse-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  transition: background var(--transition), color var(--transition);
  pointer-events: none;
}
.notes-header:hover .notes-collapse-btn {
  background: var(--border);
  color: var(--text);
}
.notes-collapse-icon {
  font-size: 10px;
  transition: transform .3s ease;
  display: inline-block;
}
.notes-collapse-label { letter-spacing: .2px; }
.note-compose {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.note-compose:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58,141,222,.12);
  background: white;
}
.note-compose textarea {
  width: 100%; border: none; background: transparent; outline: none;
  font-size: 13.5px; color: var(--text); resize: none; min-height: 70px;
  font-family: inherit; line-height: 1.55;
}
.note-compose textarea::placeholder { color: var(--text-light); }
.note-compose-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.note-compose-hint { font-size: 11px; color: var(--text-light); }

/* Chat list */
.notes-list { display: flex; flex-direction: column; gap: 16px; }
.note-item {
  display: flex; gap: 12px; align-items: flex-start;
  animation: fadeUp .3s ease backwards;
}
.note-item:nth-child(1) { animation-delay: .05s; }
.note-item:nth-child(2) { animation-delay: .10s; }
.note-item:nth-child(3) { animation-delay: .15s; }
.note-avatar-wrap { flex-shrink: 0; }
.note-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  color: white; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-xs);
}
.note-body { flex: 1; min-width: 0; }
.note-meta {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px;
}
.note-author { font-size: 13px; font-weight: 700; color: var(--text-2); }
.note-time { font-size: 11px; color: var(--text-light); }
.note-edited { font-style: italic; opacity: .7; }
.note-bubble {
  background: var(--bg);
  border: 1.5px solid var(--border-light);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 16px;
  transition: border-color var(--transition);
  position: relative;
}
.note-item.note-own { flex-direction: row-reverse; }
.note-item.note-own .note-meta { flex-direction: row-reverse; }
.note-item.note-own .note-bubble {
  background: rgba(9,71,128,.05);
  border-color: rgba(9,71,128,.12);
  border-radius: 14px 4px 14px 14px;
}
.note-bubble:hover { border-color: var(--border); }
.note-content { font-size: 13.5px; color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.note-actions {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.note-action-btn {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  padding: 3px 9px; border-radius: 5px; cursor: pointer;
  transition: all var(--transition); background: none; border: none;
  display: flex; align-items: center; gap: 4px;
}
.note-action-btn:hover { background: white; color: var(--primary); }
.note-action-btn.del:hover { color: #dc2626; background: #fef2f2; }
.note-edit-area { display: none; margin-top: 10px; flex-direction: column; gap: 8px; }
.note-edit-area.visible { display: flex; }
.note-item-editing .note-content { display: none; }
.notes-empty {
  text-align: center; padding: 40px;
  color: var(--text-muted); font-size: 13px;
}
.notes-empty .icon { font-size: 40px; margin-bottom: 10px; opacity: .18; }

/* ============================================================
   ANNOUNCEMENT ITEMS — used by the sidebar slide-out panel.
   (The old home-page notes card was removed when announcements
   moved into the sidebar — these classes are now panel-only.)
   ============================================================ */
.hn-item {
  display: flex; gap: 10px; align-items: flex-start;
  animation: fadeUp .25s ease backwards;
}
.hn-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  color: white; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.hn-main { flex: 1; min-width: 0; }
.hn-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.hn-author { font-size: 12px; font-weight: 700; color: var(--text-2); }
.hn-time   { font-size: 11px; color: var(--text-light); }

/* Delete button on each announcement — sits in the top-right of the
   meta row. Hidden by default, fades in on hover so the panel reads
   calm at rest but lets you act on a row when you focus on it. */
.hn-item { position: relative; }
.hn-delete-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-light);
  opacity: 0;
  transition: opacity .15s ease, color .12s ease, background .12s ease, border-color .12s ease;
  flex-shrink: 0;
}
.hn-item:hover .hn-delete-btn,
.hn-delete-btn:focus-visible { opacity: 1; }
.hn-delete-btn:hover {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.hn-delete-btn svg.lucide { width: 13px; height: 13px; }
.hn-delete-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Unread indicator on individual announcements. Tiny navy dot in the
   meta row + a subtle left rail on the whole item — once the user
   opens the panel both fade as the row gets marked seen. */
.hn-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(20,112,190,.15);
  display: inline-block;
  margin-left: 2px;
  animation: hnUnreadPulse 1.6s ease-in-out infinite;
}
@keyframes hnUnreadPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(20,112,190,.15); }
  50%      { box-shadow: 0 0 0 5px rgba(20,112,190,.05); }
}
.hn-item-unread { background: linear-gradient(90deg, rgba(20,112,190,.05) 0%, transparent 60%); }
.hn-item-unread .hn-text { color: var(--text); }
.hn-text   { font-size: 13px; color: var(--text); line-height: 1.5; word-break: break-word; }
.hn-empty  { font-size: 13px; color: var(--text-light); text-align: center; padding: 12px 0; }
/* Announcement compose input — used by the sidebar panel's "Add an
   announcement" textbox. */
.home-notes-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--text);
  background: var(--bg); outline: none; font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.home-notes-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58,141,222,.12);
}
.home-notes-input::placeholder { color: var(--text-light); }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-tabs {
  display: flex; gap: 4px; margin-bottom: 22px;
  border-bottom: 2px solid var(--border);
}
.admin-tab {
  padding: 10px 20px; font-size: 13.5px; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all var(--transition);
  background: none; border-top: none; border-left: none; border-right: none;
}
.admin-tab:hover { color: var(--primary); }
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }
.admin-tab-count {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: var(--bg-2); color: var(--text-muted);
  border-radius: 9px; padding: 1px 7px; margin-left: 4px;
}
.admin-tab.active .admin-tab-count { background: rgba(9,71,128,.1); color: var(--primary); }

/* Admin page header */
.admin-header-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
/* Admin page description — matches .page-subtitle for cross-page parity */
.admin-page-desc {
  font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5;
}

/* Admin header right-side stack: Invite + primary action */
.admin-header-actions {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* Modal hint — small explainer text inside modal forms */
.modal-hint {
  font-size: 12.5px; color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Invite-locked email field — small hint under the input */
.form-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 6px;
}
.form-hint svg.lucide { width: 12px; height: 12px; }

/* Personal-message card on the invited register page */
.invite-message-card {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 18px;
}
.invite-message-label {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand);
  margin-bottom: 4px;
}
.invite-message-text {
  font-size: 13px; color: var(--text-2);
  font-style: italic;
  line-height: 1.5;
}

/* Read-only email field — visually distinct so users know it's locked */
input.form-input[readonly] {
  background: var(--n-50, #f8fafc);
  color: var(--text-2);
  cursor: not-allowed;
}

/* Table */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); background: var(--bg); border-bottom: 1.5px solid var(--border);
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); color: var(--text); vertical-align: middle; }
.data-table tr:hover td { background: var(--bg); }
.data-table tr:last-child td { border-bottom: none; }
.table-wrap {
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--sh-sm); border: 1.5px solid var(--border-light);
  overflow: hidden; margin-bottom: 20px;
}

/* Table actions */
.tbl-actions { display: flex; gap: 6px; }
.tbl-btn {
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 7px;
  cursor: pointer; border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-2); transition: all var(--transition);
}
.tbl-btn:hover { background: var(--bg-2); border-color: var(--border); color: var(--primary); }
.tbl-btn.danger { border-color: transparent; color: #b91c1c; background: #fef2f2; }
.tbl-btn.danger:hover { background: #fee2e2; }
.tbl-btn:disabled { opacity: .5; cursor: default; }

/* Table cell helpers */
.url-configured { font-size: 12px; color: var(--primary); font-weight: 600; }
.url-missing    { font-size: 12px; color: var(--text-light); }
.order-badge    { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-2); border-radius: 5px; padding: 2px 7px; }
.you-badge      { font-size: 12px; color: var(--text-light); font-style: italic; }
.user-email     { font-size: 12.5px; color: var(--text-muted); }
.user-joined    { font-size: 12px; color: var(--text-muted); }
.user-cell      { display: flex; align-items: center; gap: 9px; }
.user-cell-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  color: white; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.cat-chip {
  display: inline-block; padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 700; text-transform: capitalize; letter-spacing: .2px;
  background: rgba(9,71,128,.08); color: var(--primary);
}

/* Badges */
.role-badge { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.role-admin { background: rgba(9,71,128,.1); color: var(--primary); }
.role-user  { background: var(--bg-2); color: var(--text-muted); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(5,30,56,.55);
  backdrop-filter: blur(5px);
  z-index: 200; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; animation: fadeIn .2s ease; }
.modal {
  background: var(--white); border-radius: 16px;
  padding: 32px; width: 100%; max-width: 500px;
  box-shadow: var(--sh-xl); max-height: 90vh; overflow-y: auto;
  animation: scaleIn .2s ease;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.modal-title { font-size: 18px; font-weight: 900; color: var(--text); letter-spacing: -.3px; }
.modal-close {
  width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; font-size: 18px;
  transition: all var(--transition); background: none; border: none;
}
.modal-close:hover { background: var(--bg-2); color: var(--text); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  box-shadow: var(--sh); animation: toastIn .25s ease;
  display: flex; align-items: center; gap: 10px; max-width: 340px;
  border: 1px solid transparent;
}
.toast-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.toast-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.toast-info    { background: var(--blue-50); color: var(--blue-800); border-color: var(--blue-100); }
.toast-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.toast-success .toast-icon { background: #d1fae5; }
.toast-error   .toast-icon { background: #fee2e2; }
.toast-info    .toast-icon { background: var(--blue-100); }
@keyframes toastIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to   { opacity:0; transform:translateY(10px); } }
.toast.out { animation: toastOut .25s ease forwards; }

/* ============================================================
   SPINNER & LOADING
   ============================================================ */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.page-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; }
.alert-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-page { max-width: 980px; }
.profile-header { margin-bottom: 28px; }

.profile-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

/* Avatar card */
.profile-avatar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.profile-avatar-circle {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  box-shadow: 0 0 0 4px var(--blue-100);
}
.profile-avatar-circle:hover .profile-avatar-overlay { opacity: 1; }

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9,71,128,.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition);
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}
.profile-avatar-overlay-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}

.profile-avatar-name  { font-size: 15px; font-weight: 700; color: var(--text); }
.profile-avatar-role  { margin: 2px 0; }
.profile-avatar-email { font-size: 12px; color: var(--text-muted); word-break: break-all; }

/* Sidebar avatar image */
.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Note avatar image */
.note-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Form sections */
.profile-forms { display: flex; flex-direction: column; gap: 20px; }

.profile-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  padding: 24px;
}

.profile-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.profile-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.profile-form-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.profile-save-status {
  font-size: 13px;
  font-weight: 600;
}
.profile-save-status.success { color: #10b981; }
.profile-save-status.error   { color: #ef4444; }

/* Sidebar user area — pointer + hover (properties merged into base rule above) */
.sidebar-user:hover { background: rgba(255,255,255,.12); }

/* Responsive */
@media (max-width: 860px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-avatar-card { flex-direction: row; align-items: center; text-align: left; gap: 18px; }
  .profile-avatar-circle { width: 80px; height: 80px; flex-shrink: 0; margin-bottom: 0; }
  .profile-avatar-initials { font-size: 24px; }
}
@media (max-width: 560px) {
  .profile-two-col { grid-template-columns: 1fr; }
  .profile-avatar-card { flex-direction: column; align-items: center; text-align: center; }
}

/* ============================================================
   NPS DASHBOARD
   ============================================================ */
.nps-page { width: 100%; position: relative; }
.nps-refresh-row { display: flex; justify-content: flex-end; margin-bottom: 16px; }

/* Loading skeleton */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skel {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--bg) 50%, var(--border-light) 75%);
  background-size: 800px 100%; animation: shimmer 1.4s infinite; border-radius: 6px;
}
.skel-circle  { width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0; }
.skel-line    { height: 14px; margin-bottom: 8px; }
.skel-block   { height: 120px; margin-bottom: 20px; border-radius: var(--radius); }
.w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }
.skel-group   { flex: 1; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; }
.nps-skeleton { padding: 4px 0; }
.nps-skeleton-kpi { display: flex; align-items: center; gap: 20px; background: var(--bg-card); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }

/* Filter bar */
.nps-filter-bar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.nps-filter-group { display: flex; flex-direction: column; gap: 4px; }
.nps-filter-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.nps-filter-input {
  height: 34px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg); color: var(--text);
  font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s;
}
.nps-filter-input:focus { border-color: var(--primary); }
select.nps-filter-input { padding-right: 28px; min-width: 140px; cursor: pointer; }
input[type="date"].nps-filter-input { min-width: 130px; }
.nps-filter-actions { display: flex; align-items: flex-end; gap: 6px; }
.nps-filter-refresh { margin-left: auto; }

/* Filter hint "multi" label */
.nps-filter-hint {
  font-size: 9px; font-weight: 600; color: var(--primary);
  background: #e8f0fe; border-radius: 4px; padding: 1px 5px;
  text-transform: uppercase; letter-spacing: .3px; margin-left: 4px;
}

/* Location toggle buttons */
.nps-loc-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.nps-loc-btn {
  height: 34px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg); color: var(--text);
  font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .3px;
  transition: background .15s, border-color .15s, transform .1s;
}
.nps-loc-btn:hover { background: #e8f0fe; border-color: var(--primary); color: var(--primary); transform: scale(1.04); }
.nps-loc-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Star rating buttons */
.nps-star-btns { display: flex; gap: 4px; }
.nps-star-btn {
  height: 34px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg); color: #f59e0b;
  font-size: 11px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.nps-star-btn:hover { background: #fef3c7; border-color: #f59e0b; transform: scale(1.05); }
.nps-star-btn.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }

/* Active filter chips */
.nps-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.nps-filter-chips:empty { display: none; }
.nps-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 20px; background: #e8f0fe; color: var(--primary);
  font-size: 11.5px; font-weight: 600; border: 1px solid #c7d9fa;
}

/* KPI row */
.nps-kpi-row {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr minmax(220px, 300px);
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  padding: 14px 20px;
  margin-bottom: 20px;
  align-items: center;
}
.nps-kpi-main { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nps-score-ring {
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--sh-xs);
}
.nps-score-val  { font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.nps-score-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.nps-score-tag {
  font-size: 11.5px; font-weight: 700;
  border: 1px solid; border-radius: 20px; padding: 3px 12px;
}

/* Breakdown bar */
.nps-kpi-breakdown { flex: 1; padding: 0 20px; }
.nps-breakdown-bar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 14px;
}
.nps-bd-seg { transition: width .5s ease; }
.nps-bd-legend { display: flex; flex-direction: column; gap: 7px; }
.nps-bd-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-muted);
}
.nps-bd-item span {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.nps-bd-item strong { color: var(--text); margin-left: 2px; }
.nps-bd-item em     { color: var(--text-light); font-style: normal; font-size: 12px; }

/* Stat boxes */
.nps-kpi-stats { display: flex; flex-direction: column; gap: 8px; }
.nps-stat-box {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 20px; text-align: center; min-width: 110px;
}
.nps-stat-val   { font-size: 20px; font-weight: 900; color: var(--text); letter-spacing: -.5px; }
.nps-stat-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }

/* Section */
.nps-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.nps-section-title {
  font-size: 13.5px; font-weight: 800; color: var(--text);
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.nps-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nps-two-col .nps-section { margin-bottom: 0; }

/* Sparkline trend */
.nps-sparkline {
  display: flex; align-items: stretch; gap: 6px; height: 108px;
}
.nps-spark-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; cursor: default;
}
.nps-spark-value {
  font-size: 9px; font-weight: 700; line-height: 1; padding-top: 2px; flex-shrink: 0;
}
.nps-spark-bar {
  width: 100%; border-radius: 3px 3px 0 0; min-height: 4px;
  transition: opacity .2s; margin-top: auto; flex-shrink: 0;
}
.nps-spark-col:hover .nps-spark-bar { opacity: .75; }
.nps-spark-label {
  display: flex; flex-direction: column; align-items: center;
  font-size: 10px; color: var(--text-light); font-weight: 600; line-height: 1.2; flex-shrink: 0;
}
.nps-spark-year { font-size: 9px; color: var(--text-muted); font-weight: 500; }

/* Location rows */
.nps-loc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}
.nps-loc-row:last-child { border-bottom: none; }
.nps-loc-name  { flex: 1; min-width: 0; }
.nps-loc-biz   { display: block; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nps-loc-city  { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.nps-loc-bar-wrap { width: 80px; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.nps-loc-bar   { height: 100%; border-radius: 3px; transition: width .5s ease; }
.nps-loc-score { font-size: 14px; font-weight: 900; width: 36px; text-align: right; flex-shrink: 0; }
.nps-loc-total { font-size: 11px; color: var(--text-light); flex-shrink: 0; width: 52px; text-align: right; }

/* Reviews grid */
.nps-reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.nps-review-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.nps-review-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; flex-wrap: wrap; gap: 6px;
}
.nps-review-badge {
  font-size: 10.5px; font-weight: 800;
  border: 1px solid; border-radius: 20px; padding: 2px 9px;
  text-transform: uppercase; letter-spacing: .4px;
}
.nps-review-score { font-size: 12px; font-weight: 700; margin-left: 8px; }
.nps-review-meta  { display: flex; align-items: center; gap: 8px; }
.nps-review-stars { font-size: 12px; color: #f59e0b; letter-spacing: 1px; }
.nps-review-date  { font-size: 11px; color: var(--text-light); }
.nps-review-text  { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 8px; }
.nps-review-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-muted);
}
.nps-review-provider { font-weight: 600; color: var(--text-light); }
.nps-empty { font-size: 13px; color: var(--text-light); padding: 12px 0; }

/* Responsive */
@media (max-width: 900px) {
  .nps-kpi-row { grid-template-columns: 1fr; }
  .nps-kpi-main { flex-direction: row; }
  .nps-kpi-stats { flex-direction: row; }
  .nps-two-col { grid-template-columns: 1fr; }
  .nps-reviews-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.hidden { display: none !important; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   RESPONSIVE — 3-tier
   Desktop   > 1100px : full sidebar 256px
   Tablet   769–1100px: icon sidebar 72px
   Mobile    < 769px  : overlay sidebar
   ============================================================ */

/* ── Tablet ── */
@media (max-width: 1100px) and (min-width: 769px) {
  :root { --sidebar-w: 72px; }
  .sidebar { width: 72px; overflow: visible; }

  .nav-text, .sidebar-logo-text, .sidebar-logo-badge,
  .sidebar-section-label, .nav-badge,
  .user-info, .btn-logout { display: none !important; }

  .sidebar-logo { justify-content: center; padding: 20px 10px; }
  .nav-item { justify-content: center; padding: 11px 0; gap: 0; }
  .nav-item:hover { transform: translateX(0) scale(1.06); }
  .sidebar-user { justify-content: center; padding: 14px 0; gap: 0; }

  /* tooltip */
  .nav-item { position: relative; }
  .nav-item:hover::after {
    content: attr(data-tooltip);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--blue-900); color: #fff;
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 7px;
    white-space: nowrap; z-index: 999; pointer-events: none;
    box-shadow: var(--sh-sm);
  }
  .cat-grid   { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { width: 256px; transform: translateX(-256px); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }

  .nav-text              { display: inline   !important; }
  .sidebar-logo-text     { display: block    !important; }
  .sidebar-section-label { display: flex     !important; }
  .nav-badge             { display: inline   !important; }
  .user-info             { display: block    !important; }
  .btn-logout            { display: flex     !important; }

  .sidebar-logo { justify-content: flex-start; padding: 22px 20px; }
  .nav-item     { justify-content: flex-start; padding: 9px 12px; gap: 11px; }
  .nav-item:hover { transform: translateX(3px); }
  .nav-item:hover::after { display: none; }
  .sidebar-user { justify-content: flex-start; padding: 14px 16px; gap: 10px; }

  .main-content  { margin-left: 0 !important; }
  .mobile-header { display: flex; }
  .page-container { padding: 76px 14px 24px; }
  .page-container.page-wide { padding-left: 10px; padding-right: 10px; }

  .cat-grid   { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .home-stats { display: none; }
  .home-hero  { padding: 22px 20px; }
  .category-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .category-hero-stat  { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
  .category-hero-stat-val { font-size: 22px; }
}

/* (Old home-page search styles `.home-search-wrap`/`.hs-*` removed —
   search lives in the sidebar now and uses `.sb-search-*` styles.) */

/* ── Small phones ── */
@media (max-width: 480px) {
  .auth-card { padding: 28px 18px; }
  .page-header-bar { flex-direction: column; }
  .dashboard-title-row { flex-direction: column; }
  .notes-header { flex-wrap: wrap; gap: 8px; }
  .modal { padding: 24px 18px; }
  .home-hero { padding: 18px; }
}

/* ═══════════════════════════════════════
   SHARED FLEET UI (refresh footer used by Fleet Status, Utilization,
   Maintenance History dashboards)
═══════════════════════════════════════ */
.fleet-refresh-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 0;
}
.fleet-refresh-note { font-size: 11px; color: var(--text-light); }

/* ═══════════════════════════════════════
   FLEET STATUS DASHBOARD
═══════════════════════════════════════ */

/* ── Data freshness indicator (internal dashboards) */
.data-freshness {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px;
  font-size: 11.5px; font-weight: 500; color: var(--text-muted);
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  transition: color .2s;
}
.data-freshness-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-light);
  transition: background .3s;
}
.data-freshness.data-freshness-ready { color: var(--text-2); }
.data-freshness.data-freshness-ready .data-freshness-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}

/* ── Fleet Availability section */
.fsd-avail-section { margin-bottom: 14px; }

/* "Global view" tag — marks the unfiltered Fleet Availability section */
.fsd-avail-global {
  background: linear-gradient(180deg, #fbfcfe 0%, white 100%);
  border-color: #d6e4f5;
}
.fsd-global-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin-left: 6px;
  font-size: 10.5px; font-weight: 600;
  background: #eef4fc; color: var(--primary);
  border-radius: 10px; border: 1px solid #c7d9fa;
  text-transform: none; letter-spacing: 0;
}
.fsd-global-tag svg.lucide { width: 11px; height: 11px; }

/* Divider between unfiltered (above) and filtered (below) data */
.fsd-section-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 18px;
  color: var(--text-light);
}
.fsd-section-divider::before,
.fsd-section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 50%, transparent);
}
.fsd-section-divider-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 4px;
}

.fsd-avail-summary {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}
.fsd-avail-summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 14px;
}
.fsd-avail-stat {
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
}
.fsd-avail-stat-val {
  font-size: 24px; font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.fsd-avail-stat-big .fsd-avail-stat-val { font-size: 28px; }
.fsd-avail-stat-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.fsd-avail-bar-wrap {
  display: flex; height: 8px; border-radius: 4px;
  overflow: hidden; background: #f1f5f9;
}
.fsd-avail-bar-large { height: 14px; border-radius: 7px; }
.fsd-avail-bar-avail {
  background: linear-gradient(90deg, #10b981, #059669);
  transition: flex 0.3s ease;
}
.fsd-avail-bar-unavail {
  background: linear-gradient(90deg, #f87171, #ef4444);
  transition: flex 0.3s ease;
}

.fsd-avail-list {
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Anomaly trigger — newsroom-style alert chip.
   "● ANOMALY · 1 unit at EWRCON depot   ⌄"
   Restrained corporate look: white surface, subtle slate border,
   small red dot for status, uppercase eyebrow + readable title.
   Click opens a wider floating popover with header + table. */
.anomaly-card {
  display: inline-block;
  position: relative;
  margin-bottom: 12px;
  vertical-align: top;
}
.anomaly-header {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: border-color 0.12s, box-shadow 0.15s, background 0.12s;
  font-family: inherit;
  min-width: 320px;
}
.anomaly-header:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
.anomaly-card:not(.anomaly-collapsed) .anomaly-header {
  border-color: #cbd5e1;
  background: #f8fafc;
}

/* Status dot — small red circle with soft halo. */
.anomaly-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}

/* "ANOMALY" eyebrow inside the trigger */
.anomaly-eyebrow {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b91c1c;
  flex-shrink: 0;
}
.anomaly-sep {
  color: #cbd5e1; flex-shrink: 0;
  font-weight: 400;
}
.anomaly-title {
  font-size: 13px; font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.05px;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}

.anomaly-chevron {
  display: inline-flex; align-items: center;
  flex-shrink: 0; margin-left: auto;
}
.anomaly-chevron svg.lucide {
  width: 13px; height: 13px;
  color: #94a3b8;
  transition: transform 0.2s, color 0.12s;
}
.anomaly-card:not(.anomaly-collapsed) .anomaly-chevron svg.lucide {
  transform: rotate(180deg);
  color: var(--text);
}

/* Legacy markup hooks no longer rendered — kept harmless if they ever appear */
.anomaly-icon { display: none !important; }
.anomaly-header-left, .anomaly-header-right { display: contents; }
.anomaly-titles { display: contents; }
.anomaly-count { display: none; }

/* ── Floating popover ──────────────────────────────────────────── */
.anomaly-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.04);
  /* Use intrinsic sizing — `clamp` with a 760px PREFERRED width but a
     hard upper bound at viewport-width-minus-margin. Was `min-width: 760px`
     which forced a 760px popover even on a 360px phone, causing massive
     horizontal overflow. */
  width: clamp(280px, 760px, calc(100vw - 32px));
  max-width: min(1040px, calc(100vw - 32px));
  max-height: 64vh;
  overflow: auto;
}
.anomaly-card.anomaly-collapsed .anomaly-body { display: none; }

/* Popover header strip — title + close × */
.anomaly-pop-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #e2e8f0;
}
.anomaly-pop-titles {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.anomaly-pop-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b91c1c;
}
.anomaly-pop-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.1px;
  flex-wrap: wrap;
}
.anomaly-pop-count {
  background: #f1f5f9; color: var(--text);
  border-radius: 10px; padding: 2px 10px;
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.anomaly-pop-close {
  width: 28px; height: 28px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.anomaly-pop-close:hover {
  background: #f1f5f9; color: var(--text);
  border-color: #e2e8f0;
}

.anomaly-subtitle {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-muted);
  padding: 12px 20px 14px;
}
.anomaly-subtitle strong { color: var(--text); font-weight: 600; }

.anomaly-body > .util-table-wrap {
  padding: 0 16px 16px;
}

.util-table.anomaly-table { background: white; }
.util-table.anomaly-table thead th {
  background: #f8fafc; color: var(--text-muted);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 12px;
  border-top: none;
}
/* Match cell alignment — header gets left-aligned via .col-text class on
   most columns; numeric headers (no .col-text) right-align as default below. */
.util-table.anomaly-table thead .util-col-row th { text-align: right; }
.util-table.anomaly-table thead .util-col-row th.col-text { text-align: left; }
/* Use combined selector .util-table.anomaly-table to win specificity vs the
   .util-table tbody td default (which lives later in this file and would
   otherwise re-apply text-align: right). */
.util-table.anomaly-table tbody td {
  padding: 8px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--border-light);
  /* Default to left so cells line up under their (col-text) headers.
     Numeric columns add .anomaly-num to right-align where needed. */
  text-align: left;
}
.util-table.anomaly-table tbody tr:last-child td { border-bottom: none; }
/* Override the global util-table-wrap navy top stripe inside anomaly popovers — it reads as
   a yellow stripe against the warm header bg and visually clashes with the popover. */
.anomaly-body .util-table-wrap { border-top: none; }
.util-table.anomaly-table tbody td.anomaly-num { text-align: right; }
.anomaly-unit { font-family: monospace; font-weight: 700; color: var(--text); }
.anomaly-num  { text-align: right; font-variant-numeric: tabular-nums; }
.anomaly-status-pill {
  display: inline-block; padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  background: #f1f5f9; color: var(--text);
  border-radius: 10px;
}
.anomaly-pill {
  display: inline-block; padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  border-radius: 10px;
}

.fsd-avail-note {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border-light);
  font-size: 11.5px; color: var(--text-muted);
  line-height: 1.5;
}
.fsd-avail-note strong { color: var(--text); font-weight: 600; }

/* Depot row tweaks (EWRCON):
   pct column shows "share of total fleet" rather than availability. */
.fsd-avail-row-depot { opacity: 0.95; }
.fsd-avail-depot-tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; margin-left: 6px;
  background: #f1f5f9; color: var(--text-muted);
  border-radius: 8px; vertical-align: middle;
}
.fsd-avail-pct-depot { color: var(--primary); }
.fsd-avail-pct-sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-light); display: inline-block; margin-left: 2px;
}

/* Maintenance History availability table — depot row */
.fh-av-depot-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 5px; margin-left: 4px;
  background: #f1f5f9; color: var(--text-muted);
  border-radius: 6px; vertical-align: middle;
}
.fh-av-pct-sub {
  font-size: 9px; font-weight: 600;
  color: var(--text-light); margin-left: 1px;
}
.fsd-avail-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px 220px;
  align-items: center;
  gap: 12px;
}
.fsd-avail-loc {
  font-size: 12.5px; font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.3px;
}
.fsd-avail-pct {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  text-align: right;
}
.fsd-avail-counts {
  font-size: 11.5px;
  color: var(--text-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fsd-avail-num-avail   { color: #10b981; font-weight: 700; }
.fsd-avail-num-unavail { color: #ef4444; font-weight: 700; }
.fsd-avail-sep         { color: var(--border); margin: 0 3px; }
.fsd-avail-num-total   { color: var(--text-light); margin-left: 6px; }

@media (max-width: 700px) {
  .fsd-avail-summary-stats { grid-template-columns: repeat(2, 1fr); }
  .fsd-avail-row { grid-template-columns: 80px 1fr 40px; }
  .fsd-avail-counts { display: none; }
}

/* ── Breakdown card header */
.fsd-bd-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.fsd-bd-title {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  letter-spacing: 0;
}
.fsd-bd-badge {
  font-size: 11px; font-weight: 600;
  background: #e8f1fb; color: var(--primary);
  border-radius: 10px; padding: 2px 9px;
}

/* ── Breakdown rows */
.fsd-bd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  transition: background .12s;
}
.fsd-bd-row:last-child { border-bottom: none; }
.fsd-bd-row:hover { background: #f7faff; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.fsd-bd-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.fsd-bd-name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsd-bd-bar-wrap {
  width: 90px; height: 5px;
  background: var(--border-light); border-radius: 3px;
  overflow: hidden; flex-shrink: 0;
}
.fsd-bd-bar {
  height: 100%; border-radius: 3px; transition: width .45s ease;
}
.fsd-bd-pct {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  width: 30px; text-align: right; flex-shrink: 0;
}
.fsd-bd-count {
  font-size: 13px; font-weight: 800; color: var(--text);
  width: 28px; text-align: right; flex-shrink: 0;
}
.fsd-bd-extra {
  font-size: 11px; color: var(--text-light);
  width: 56px; text-align: right; flex-shrink: 0; white-space: nowrap;
}

/* Table count badge in section title */
.fsd-table-count {
  font-size: 11px; font-weight: 500;
  background: #e8f1fb; color: var(--primary);
  border-radius: 10px; padding: 2px 8px;
  text-transform: none; letter-spacing: 0;
}

/* Table toolbar */
.fsd-table-section { padding-bottom: 0; margin-top: 20px; border-top: 3px solid var(--blue-600) !important; }
.fsd-table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.fsd-table-title {
  font-size: 12px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 8px;
}

/* Table wrapper */
.fsd-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); margin-top: 4px; }
.fsd-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 900px;
}

/* Sortable headers */
.fsd-table thead th {
  padding: 10px 14px;
  text-align: left; font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--border);
  background: #f8faff; white-space: nowrap;
  user-select: none;
}
.fsd-table thead th[data-col] {
  cursor: pointer; transition: color .15s, background .15s;
}
.fsd-table thead th[data-col]:hover { color: var(--primary); background: #f0f5ff; }
.fsd-sort-icon   { margin-left: 4px; font-size: 11px; }
.fsd-sort-idle   { color: var(--border); }
.fsd-sort-active { color: var(--primary); }
.fsd-notes-th   { min-width: 200px; }

/* Column filter button (▾) inside th */
.fsd-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 3px;
  font-size: 11px; line-height: 1;
  border: 1px solid var(--border); border-radius: 4px;
  background: white; color: var(--text-muted);
  cursor: pointer; vertical-align: middle;
  transition: background .12s, color .12s, border-color .12s;
  padding: 0;
}
.fsd-filter-btn:hover        { background: #e8f1fb; color: var(--primary); border-color: var(--primary); }
.fsd-filter-btn.fsd-filter-active {
  background: var(--primary); color: white; border-color: var(--primary);
}

/* Floating column-filter dropdown */
.fsd-col-dropdown {
  position: absolute; z-index: 9999;
  background: white; border: 1.5px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(9,71,128,.14);
  padding: 6px 0; overflow: hidden;
  animation: fsdDdIn .12s ease;
}
@keyframes fsdDdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fsd-dd-item {
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: background .1s;
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.fsd-dd-item:hover      { background: #f0f6ff; }
.fsd-dd-item input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--primary);
  cursor: pointer; margin: 0; flex-shrink: 0;
}
.fsd-dd-item span { flex: 1; }

/* Multi-select All / Clear actions strip */
.fsd-dd-actions {
  display: flex; gap: 4px;
  padding: 8px; border-bottom: 1px solid var(--border-light);
}
.fsd-dd-action {
  flex: 1; padding: 5px 8px; font-size: 11px; font-weight: 600;
  background: white; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; color: var(--text-muted);
  transition: background .1s, color .1s, border-color .1s;
}
.fsd-dd-action:hover {
  background: var(--primary); color: white; border-color: var(--primary);
}

.fsd-dd-options { max-height: 240px; overflow-y: auto; padding: 4px 0; }

.fsd-dd-search { padding: 8px; border-bottom: 1px solid var(--border-light); }
.fsd-dd-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; outline: none;
}
.fsd-dd-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.fsd-dd-empty { padding: 10px 12px; color: var(--text-light); font-size: 12px; text-align: center; }
.fsd-dd-empty { padding: 10px 16px; font-size: 12px; color: var(--text-muted); }

/* Rows — fixed height, single-line cells (ellipsis on overflow) so every
   row in the table stays the same size. Long sub-status / status labels
   are still readable on hover via the native [title] tooltip. */
.fsd-table tbody tr { height: 42px; }
.fsd-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid #eef1f8;
  color: var(--text); vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.fsd-table tbody tr:last-child td { border-bottom: none; }
.fsd-table tbody tr:hover td { background: #f5f8ff; }
.fsd-table tbody tr:hover .fsd-note-input { border-color: var(--primary-light, #b3d0f5); }

.fsd-unit    { font-weight: 700; font-family: monospace; font-size: 13px; white-space: nowrap; }
.fsd-vehicle { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.fsd-sub-cell { font-size: 12px; max-width: 140px; }
.fsd-since   { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.fsd-days-cell { white-space: nowrap; }
.fsd-empty-row { text-align: center; padding: 32px; color: var(--text-muted); }

/* Location tag */
.fsd-loc-tag {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: #e8f1fb; color: var(--primary);
}

/* EDT column */
.fsd-edt-cell { white-space: nowrap; }
.fsd-edt {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.fsd-edt-ok       { background: #d1fae5; color: #065f46; }
.fsd-edt-over     { background: #fee2e2; color: #991b1b; border: 1px solid #ef444440; }
.fsd-edt-assigned { background: #f1f5f9; color: #64748b; }
.fsd-edt-unknown  { color: var(--text-light); }

/* Row highlight when over EDT */
.fsd-row-over-edt td { background: #fff8f8 !important; }
.fsd-row-over-edt:hover td { background: #fef2f2 !important; }

/* Notes cell — read-only TSD note (Cfleet01.Options on the unit page).
   Fixed width keeps every row the same height; the pill clamps to one line
   with ellipsis. Hovering or clicking the pill expands it as a popover that
   floats above neighbouring rows without changing the table layout. */
.fsd-note-cell {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  padding: 6px 10px !important;
  position: relative;          /* anchor for the absolute popover */
  vertical-align: middle;
  /* Override the body-wide td { overflow: hidden } so the expanded popover
     can paint past the cell boundaries instead of being clipped. */
  overflow: visible !important;
}

/* Pill — neutral, matches the table's row palette. Single-line ellipsis
   by default; full text appears in the floating popover on hover/click.
   The "Display Note" variant is intentionally rendered identically so
   the column reads as one calm corporate block, not a colour code. */
.fsd-tsd-note,
.fsd-tsd-note-display {
  font-size: 12px; line-height: 1.4;
  color: var(--text);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.fsd-tsd-note:hover,
.fsd-tsd-note-display:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.fsd-tsd-note-empty {
  color: var(--text-light, #aab4c4);
  font-size: 12px;
}

/* Floating popover with the full note. Appended to <body> so it can paint
   over the table's overflow-clipped wrap. JS positions it at the cell's
   getBoundingClientRect() and clamps it within the viewport. */
.fsd-tsd-popover {
  position: fixed;
  z-index: 1000;
  display: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 9px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: min(560px, calc(100vw - 60px));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
  pointer-events: auto;
}
.fsd-tsd-popover.visible { display: block; }
.fsd-note-wrap {
  display: flex; align-items: flex-start; gap: 6px;
  background: var(--bg); border: 1.5px solid var(--border-light);
  border-radius: 8px; padding: 5px 8px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.fsd-note-wrap:focus-within {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,130,212,.09);
}
.fsd-note-wrap.has-note {
  background: rgba(9,71,128,.04);
  border-color: rgba(9,71,128,.18);
}
.fsd-note-icon {
  font-size: 13px; color: var(--text-muted); flex-shrink: 0;
  line-height: 1.6; opacity: .55; pointer-events: none;
}
.fsd-note-wrap:focus-within .fsd-note-icon { opacity: .9; color: var(--primary); }
.fsd-note-input {
  flex: 1; padding: 0;
  border: none; background: transparent; color: var(--text);
  font-size: 12px; font-family: inherit; line-height: 1.5;
  resize: none; overflow: hidden; min-height: 20px;
  outline: none;
}
.fsd-note-input::placeholder { color: var(--text-light, #aab4c4); font-style: italic; font-size: 11.5px; }
.fsd-note-status {
  font-size: 11px; flex-shrink: 0; line-height: 1.9;
}
.fsd-note-status.saving { color: var(--text-muted); }
.fsd-note-status.saved  { color: #10b981; font-weight: 700; }
.fsd-note-status.error  { color: #ef4444; font-weight: 700; }

/* Table footer */
.fsd-table-footer {
  font-size: 11px; color: var(--text-muted);
  padding: 8px 14px; text-align: right;
  border-top: 1px solid var(--border);
}

/* Status badges */
.fsd-status-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.fsd-status-maint { background: #fff3cd; color: #92400e; border: 1px solid #f59e0b50; }
.fsd-status-na    { background: #fee2e2; color: #991b1b; border: 1px solid #ef444450; }

/* Days badges */
.fsd-badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.fsd-badge-green  { background: #d1fae5; color: #065f46; }
.fsd-badge-yellow { background: #fef9c3; color: #854d0e; }
.fsd-badge-amber  { background: #ffedd5; color: #9a3412; }
.fsd-badge-red    { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════
   UTILIZATION DASHBOARD
   ══════════════════════════════════════════ */
.util-page { }

.util-filter-bar { flex-wrap: wrap; }

/* ── Quick presets row ── */
.util-presets {
  display: flex; gap: 8px; margin: -4px 0 18px 0; flex-wrap: wrap;
  align-items: center;
}
.util-presets-label {
  font-size: 11px; font-weight: 600; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px;
}
.util-preset-btn {
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  background: white; border: 1px solid var(--border); border-radius: 20px;
  color: var(--text); cursor: pointer;
  transition: all 0.15s;
}
.util-preset-btn:hover {
  background: var(--primary); color: white; border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* ── KPI cards ── */
.util-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 24px;
}
.util-kpi-card {
  background: white; border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 92px;
  position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.util-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.util-kpi-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary); opacity: 0;
  transition: opacity 0.15s;
}
.util-kpi-card:hover::before { opacity: 1; }
.util-kpi-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-light); margin-bottom: 8px;
}
.util-kpi-value {
  font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1;
  letter-spacing: -0.5px;
}
.util-kpi-period { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.util-kpi-sub {
  font-size: 11px; color: var(--text-light); margin-top: 6px;
  font-weight: 500;
}

/* ── Table section ── */
.util-table-section { padding: 0; overflow: hidden; border-radius: 12px; }
.util-table-section .fsd-table-toolbar {
  padding: 16px 20px 12px 20px;
  margin-bottom: 0;
}

.util-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 240px);
  border-top: 2px solid var(--primary);
  scrollbar-width: thin;
}
.util-table-wrap::-webkit-scrollbar { height: 8px; }
.util-table-wrap::-webkit-scrollbar-track { background: #f1f5f9; }
.util-table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.util-table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.util-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12px;
}

/* Column groups: header rendered as 2 rows for grouping.
   Sticky inside .util-table-wrap (which is the scrolling container with
   max-height + overflow:auto) so headers stay visible while scrolling rows. */
.util-table thead .util-group-row th {
  background: #f1f5f9;
  color: var(--text);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.7px; text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: sticky; top: 0; z-index: 5;
  box-shadow: 0 1px 0 var(--border);
}
.util-table thead .util-group-row th.util-group-blank { background: #f8fafc; }
.util-table thead .util-group-row th.util-group-total   { background: #dbeafe; color: #1e40af; }
.util-table thead .util-group-row th.util-group-useable { background: #d1fae5; color: #065f46; }
.util-table thead .util-group-row th.util-group-revenue { background: #fef3c7; color: #92400e; }

.util-table thead .util-col-row th {
  background: #f8fafc; color: var(--text-light);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 12px; text-align: right;
  border-bottom: 2px solid var(--border);
  white-space: nowrap; position: sticky; top: 32px; z-index: 4;
  box-shadow: 0 2px 0 var(--border);
}
.util-table thead .util-col-row th.col-text { text-align: left; }

/* Sticky left columns (Total Units + Loc/Class) — work alongside sticky thead.
   z-index hierarchy: corner intersection (header+left) > thead > body sticky col */
.util-table th.util-sticky-1, .util-table td.util-sticky-1 {
  position: sticky; left: 0; z-index: 3; background: white;
}
.util-table th.util-sticky-2, .util-table td.util-sticky-2 {
  position: sticky; left: 70px; z-index: 3; background: white;
  border-right: 1px solid var(--border);
}
.util-table thead .util-col-row th.util-sticky-1,
.util-table thead .util-col-row th.util-sticky-2 { background: #f8fafc; z-index: 6; }
.util-table thead .util-group-row th.util-sticky-group {
  position: sticky; left: 0; z-index: 7;
  background: #f8fafc;
}

.util-table tbody td {
  padding: 9px 12px; text-align: right;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.util-table tbody td.col-text { text-align: left; font-weight: 500; }
.util-table tbody tr:not(.util-loc-header):not(.util-grand-total):hover td {
  background: #f9fafb;
}
.util-table tbody tr:not(.util-loc-header):not(.util-grand-total):hover td.util-sticky-1,
.util-table tbody tr:not(.util-loc-header):not(.util-grand-total):hover td.util-sticky-2 {
  background: #f9fafb;
}

/* Vertical group separators */
.util-table .util-group-sep { border-left: 1px solid #e2e8f0; }

/* Location subtotal row */
.util-table .util-loc-header td {
  background: #eff6ff;
  font-weight: 700;
  color: var(--primary);
  border-top: 2px solid var(--primary);
  border-bottom: 1px solid #cbd5e1;
  font-size: 12px;
}
.util-table .util-loc-header td.util-sticky-1,
.util-table .util-loc-header td.util-sticky-2 { background: #eff6ff; }
.util-table .util-loc-header td.col-text { text-align: left; letter-spacing: 0.3px; }

/* Grand total row — floor it darker */
.util-table .util-grand-total td {
  background: #1e3a5f;
  color: white;
  font-weight: 800;
  border-top: 2px solid #0c1f3a;
  font-size: 12.5px;
}
.util-table .util-grand-total td.util-sticky-1,
.util-table .util-grand-total td.util-sticky-2 { background: #1e3a5f; }
.util-table .util-grand-total td.col-text { font-weight: 900; letter-spacing: 0.7px; }

.util-table .util-class { font-weight: 600; color: var(--text); }
.util-table .util-units { color: var(--text-light); font-size: 11.5px; }
.util-table .util-zero { color: #cbd5e1; font-weight: 400; }
.util-table .util-grand-total .util-zero { color: rgba(255,255,255,0.4); }
.util-table .util-loc-header .util-zero { color: rgba(30,64,175,0.35); }

/* Miles Driven sub-report — twin tables (Local | Non-Local) inside Utilization */
.miles-driven-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 0 16px 12px;
  position: relative;
}
.miles-driven-grid::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #cbd5e1 12%, #cbd5e1 88%, transparent);
  transform: translateX(-0.5px);
}
.miles-driven-half { min-width: 0; }
.miles-driven-table { width: 100%; }
.miles-driven-table .util-group-revenue {
  text-align: center;
  padding: 8px 12px;
  font-size: 12.5px;
  letter-spacing: 0.4px;
}
.miles-driven-table th.col-text,
.miles-driven-table td.col-text { text-align: left; padding-left: 14px; }
.miles-driven-table tbody tr:hover { background: #f8fafc; }
.miles-driven-note {
  font-size: 12px;
  color: var(--text-light);
  padding: 8px 16px 14px;
  line-height: 1.5;
}
.miles-driven-note strong { color: var(--text); font-weight: 600; }

/* Responsive */
@media (max-width: 1100px) {
  .util-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .miles-driven-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .util-kpi-row { grid-template-columns: 1fr; }
  .util-presets-label { display: none; }
}

/* ══════════════════════════════════════════
   MAINTENANCE HISTORY DASHBOARD
   ══════════════════════════════════════════ */
.fh-page { }

/* ── Hero KPI strip ───────────────────────────────────────────── */
.fh-kpi-row { margin-bottom: 16px; }
.fh-kpi-row .util-kpi-value { display: inline-flex; align-items: baseline; gap: 8px; }
.fh-kpi-pct {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0;
}
.fh-kpi-unit {
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  margin-left: 2px;
}
.fh-kpi-good { color: var(--text); }
.fh-kpi-warn { color: #92400e; }
.fh-kpi-bad  { color: #b91c1c; }
.fh-kpi-row .util-kpi-value.fh-kpi-warn .fh-kpi-pct,
.fh-kpi-row .util-kpi-value.fh-kpi-bad  .fh-kpi-pct { color: inherit; }

/* ── Comparison matrix — substatus rows × location cols ───────── */
.fh-matrix-section { padding: 0; }
.fh-matrix-wrap { padding: 0; max-height: none; border-top: none; }
.fh-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.fh-matrix thead .util-col-row th,
.fh-matrix thead th {
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.fh-matrix thead .util-col-row th.fh-mx-label-th,
.fh-matrix thead th.fh-mx-label-th {
  text-align: left;
  padding-left: 18px;
  min-width: 200px;
}
.fh-matrix thead th.fh-mx-loc-th {
  font-variant-numeric: tabular-nums;
}
.fh-mx-depot-tag {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  background: #f1f5f9; color: var(--text-muted);
  border-radius: 8px;
}
.fh-matrix thead th.fh-mx-total-th {
  background: #eef2f6;
  color: var(--text);
}
.fh-matrix thead th.fh-mx-over-th {
  min-width: 88px;
}

/* Group divider rows */
.fh-mx-group-row td {
  background: #f1f5f9;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 18px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* Body cells */
.fh-matrix tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.fh-mx-row:last-child td { border-bottom: none; }

.fh-mx-label-cell {
  text-align: left !important;
  padding-left: 18px !important;
}
.fh-mx-label {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.3;
}
.fh-mx-edt {
  font-size: 10.5px; color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Cells: number + optional over-edt badge.
   Right-aligned content with the badge sitting before the number so the
   primary digit stays flush with the column right-edge — keeps every
   row's main number aligned vertically across rows, regardless of badge
   presence. */
.fh-mx-cell {
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
  white-space: nowrap;
}
.fh-mx-cell:hover { background: #f8fafc; }
.fh-mx-cell.fh-mx-zero { cursor: default; color: #cbd5e1; }
.fh-mx-cell.fh-mx-zero:hover { background: transparent; }
.fh-mx-q {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  letter-spacing: -0.1px;
}
.fh-mx-over {
  display: inline-block; margin-right: 8px;
  font-size: 10.5px; font-weight: 600;
  color: #b91c1c;
  background: #fef2f2;
  border-radius: 8px; padding: 1px 6px;
  vertical-align: 1px;
}
/* Severity tints — kept very subtle. Only when the cell itself is heavy with over-edt. */
.fh-mx-cell-warn { background: #fffaf0; }
.fh-mx-cell-warn:hover { background: #fff4e0; }
.fh-mx-cell-bad  { background: #fff1f0; }
.fh-mx-cell-bad:hover  { background: #ffe0dd; }

/* Total + over-EDT % columns */
.fh-mx-total {
  font-size: 13.5px; font-weight: 700;
  background: #f8fafc;
  color: var(--text);
}
.fh-mx-overpct {
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.fh-mx-tier-warn { color: #92400e; }
.fh-mx-tier-bad  { color: #b91c1c; }

.fh-mx-empty {
  padding: 28px !important; text-align: center;
  color: var(--text-muted); font-size: 13px; font-style: italic;
}

/* Responsive — let the table scroll horizontally on narrow viewports */
.fh-matrix-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

.fh-table .fh-loc-header td {
  background: #eff6ff;
  color: var(--primary);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.4px;
  border-top: 2px solid var(--primary);
  border-bottom: 1px solid #cbd5e1;
}
.fh-table .fh-grand-total td {
  background: #1e3a5f;
  color: white;
  font-weight: 800;
  border-top: 2px solid #0c1f3a;
}

.fh-substatus { display: flex; align-items: center; gap: 8px; }
.fh-status-pill {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 10px; letter-spacing: 0.4px;
}
.fh-status-30 { background: #fef3c7; color: #92400e; }
.fh-status-40 { background: #fee2e2; color: #991b1b; }

.fh-over-high { color: #ef4444; font-weight: 700; }
.fh-over-mid  { color: #f59e0b; font-weight: 600; }
.fh-over-low  { color: #10b981; font-weight: 500; }
.fh-over-pct  { color: var(--text-light); font-size: 10px; margin-left: 4px; }

.btn-xs {
  padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 6px;
}
.fh-drill {
  border: 1px solid var(--border);
}
.fh-drill:hover {
  background: var(--primary); color: white; border-color: var(--primary);
}

.fh-drill-section {
  border-top: 3px solid var(--primary);
}
.fh-drill-section .fsd-table-toolbar {
  background: #f8fafc;
}

/* ══════════════════════════════════════════
   MAINTENANCE HISTORY — Modern card design
   ══════════════════════════════════════════ */

/* ── Availability table v2 — strict, minimal, colour reserved for status ── */
.fh-av-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  margin-bottom: 28px;
}

.fh-av-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
}
.fh-av-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fh-av-card-period {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 10px;
}

/* Tier dots / fills — only this triplet of colours is allowed in the table */
.fh-tier-good { background: #16794e; }   /* var(--ok)   matches */
.fh-tier-warn { background: #b45309; }   /* var(--warn) matches */
.fh-tier-bad  { background: #b42318; }   /* var(--err)  matches */

.fh-av-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.fh-av-table thead th {
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: right;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.fh-av-table thead th.fh-av-loc      { text-align: left; width: 28%; }
.fh-av-table thead th.fh-av-num-th   { width: 14%; }
.fh-av-table thead th.fh-av-pct-th   { width: 30%; }

.fh-av-table tbody td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
}
.fh-av-table tbody tr.fh-av-row:hover td { background: var(--n-50); }

.fh-av-loc {
  text-align: left;
  display: flex; align-items: center; gap: 10px;
}
.fh-av-loc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.fh-av-loc-name {
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}

.fh-av-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-2);
}
.fh-av-cell-num.fh-av-cell-warn { color: var(--warn); }
.fh-av-cell-num.fh-av-cell-bad  { color: var(--err); }

/* % unavailable cell — bar + numeric label, single line */
.fh-av-cell-pct { text-align: right; }
/* Plain variant for aggregate rows (number only, no bar) */
.fh-av-cell-pct-plain {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* Inner wrapper takes the flex layout — keeping flex on the <td> itself
   collapses the cell's vertical metrics in some engines (broken borders/bg). */
.fh-av-pct-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.fh-av-pct-track {
  flex: 1;
  max-width: 160px;
  height: 6px;
  background: var(--n-100);
  border-radius: 999px;
  overflow: hidden;
}
.fh-av-pct-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.fh-av-pct-text {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  min-width: 38px;
  text-align: right;
}

/* Subtotal & Total — calmer than before, still distinct */
.fh-av-table tbody tr.fh-av-subtotal td {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  border-top: 1px solid var(--border);
}
.fh-av-table tbody tr.fh-av-subtotal .fh-av-loc-name,
.fh-av-table tbody tr.fh-av-subtotal .fh-av-cell-num,
.fh-av-table tbody tr.fh-av-subtotal .fh-av-pct-text { color: var(--brand); }
.fh-av-table tbody tr.fh-av-subtotal .fh-av-pct-track { background: rgba(15,58,100,.18); }

/* Separator row collapsed — accent line moves onto the Total row's
   border-top instead. Single CSS border guarantees uniform 2px thickness
   across every column with no per-cell rendering quirks. */
.fh-av-table tbody tr.fh-av-total-sep { display: none; }
.fh-av-table tbody tr.fh-av-total td {
  background: var(--n-50);
  color: var(--text);
  font-weight: 700;
  border-top: 2px solid var(--brand);
  border-bottom: none;
}
.fh-av-table tbody tr.fh-av-total .fh-av-loc-name,
.fh-av-table tbody tr.fh-av-total .fh-av-cell-num,
.fh-av-table tbody tr.fh-av-total .fh-av-pct-text { color: var(--text); }
.fh-av-table tbody tr.fh-av-total .fh-av-pct-track { background: var(--n-200); }

.fh-av-note {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 20px;
  background: var(--n-50);
  border-top: 1px solid var(--border-light);
  line-height: 1.55;
}
.fh-av-note-key {
  font-weight: 600;
  color: var(--text-2);
}

/* Depot (EWRCON) — pulled out from rental rollup with a soft separator */
.fh-av-table tbody tr.fh-av-depot-sep td {
  background: var(--n-50);
  border-top: 1px solid var(--border);
  border-bottom: none;
  padding: 6px 20px;
}
.fh-av-depot-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-light);
}
.fh-av-table tbody tr.fh-av-depot td {
  background: var(--n-50);
}
.fh-av-table tbody tr.fh-av-depot:hover td { background: var(--n-100); }
.fh-av-table tbody tr.fh-av-depot .fh-av-loc-name {
  color: var(--text-2);
}
.fh-av-table tbody tr.fh-av-depot .fh-av-loc-name::after {
  content: ' · DEPOT';
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: .04em;
}

/* Per-location cards — depot divider + muted depot card */
.fh-cards-depot-divider {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-light);
  padding: 14px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Depot-specific card (EWRCON) ───────────────────────────────────
   Replaces availability bar + sparkline with depot-relevant analytics:
   episode mix, top categories, bottlenecks. */
.fh-card-v2-depot { grid-column: 1 / -1; }

/* Header — neutral, only the over-EDT % uses a tier colour */
.fh-depot-header { padding-bottom: 10px; }
.fh-depot-header-pct {
  font-size: 22px; font-weight: 800; line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.fh-depot-header-pct-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-light);
}

/* KPI row — neutral, only Over EDT can carry a tier colour */
.fh-depot-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
}
.fh-depot-kpi { text-align: center; }
.fh-depot-kpi-val {
  font-size: 22px; font-weight: 800; color: var(--text);
  line-height: 1.1; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.fh-depot-kpi-unit { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-left: 1px; }
.fh-depot-kpi-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Block separators */
.fh-depot-block {
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
}
.fh-depot-block:first-of-type { border-top: none; padding-top: 4px; }
.fh-depot-section-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 8px;
}
.fh-depot-section-sub {
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-light); text-transform: none; margin-left: 4px;
}

/* Episode-mix stacked bar */
.fh-depot-comp-bar {
  display: flex; height: 10px; border-radius: 5px;
  overflow: hidden; background: #f1f5f9; margin-bottom: 8px;
}
.fh-depot-comp-bar > div { min-width: 2px; }
.fh-depot-comp-legend {
  display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 16px;
}
.fh-depot-comp-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px;
}
.fh-depot-comp-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  flex-shrink: 0;
}
.fh-depot-comp-label { color: var(--text-muted); }
.fh-depot-comp-val   { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.fh-depot-comp-pct   { color: var(--text-light); font-weight: 500; }

/* Category colours — kept (functional, distinguish categories) */
.fh-cat-sale   { background: #2563eb; }   /* blue   — Sale Prep */
.fh-cat-heavy  { background: #dc2626; }   /* red    — Heavy Repair */
.fh-cat-light  { background: #f59e0b; }   /* amber  — Light Maintenance */
.fh-cat-trans  { background: #8b5cf6; }   /* purple — Transfer */
.fh-cat-assign { background: #94a3b8; }   /* slate  — Assigned */

/* Top + Bottlenecks side-by-side */
.fh-depot-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
}
.fh-depot-two-col .fh-depot-block {
  padding: 0; border-top: none;
}

/* Top-N substatus bars — denser */
.fh-depot-top-list { display: flex; flex-direction: column; gap: 4px; }
.fh-depot-top-row {
  display: grid;
  grid-template-columns: minmax(110px, 35%) 1fr 30px 110px;
  align-items: center; gap: 8px;
  font-size: 12px; padding: 3px 0;
  border-bottom: 1px solid #f1f5f9;
}
.fh-depot-top-row:last-child { border-bottom: none; }
.fh-depot-top-label { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-depot-top-bar-wrap {
  background: #f1f5f9; height: 4px; border-radius: 2px; overflow: hidden;
}
.fh-depot-top-bar {
  background: var(--primary); height: 100%; border-radius: 2px;
}
.fh-depot-top-q   { font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.fh-depot-top-meta {
  font-size: 11px; color: var(--text-light);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* Bottleneck rows — denser */
.fh-depot-bot-list { display: flex; flex-direction: column; gap: 4px; }
.fh-depot-bot-row {
  display: grid;
  grid-template-columns: minmax(110px, 40%) 50px 1fr;
  align-items: center; gap: 8px;
  font-size: 12px; padding: 3px 0;
  border-bottom: 1px solid #f1f5f9;
}
.fh-depot-bot-row:last-child { border-bottom: none; }
.fh-depot-bot-label { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-depot-bot-pct {
  font-weight: 800; font-size: 12.5px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.fh-depot-bot-meta {
  font-size: 11px; color: var(--text-light); font-variant-numeric: tabular-nums;
}

/* Trend text colours — used only for severity signalling (over EDT etc.) */
.fh-text-bad  { color: #dc2626; }
.fh-text-warn { color: #b45309; }

/* ── Episode edit (admin) — pencil button + edited tag ───────────── */
.fh-ep-edit-th { width: 36px; }
.fh-ep-edit-cell { width: 36px; padding: 4px !important; text-align: center; }
.fh-ep-edit-btn {
  background: transparent; border: 1px solid transparent;
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
  color: var(--text-light); transition: all 0.1s;
}
.fh-ep-edit-btn:hover {
  background: #eef4fc; border-color: #c7d9fa; color: var(--primary);
}
.fh-ep-edit-btn svg.lucide { width: 13px; height: 13px; }

.fh-ep-edit-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 5px; margin-left: 4px;
  background: #fef3c7; color: #92400e;
  border-radius: 6px; vertical-align: middle;
}
.fh-ep-edited td { background: #fffdf3 !important; }
.fh-ep-edited:hover td { background: #fef9c3 !important; }

/* Episode edit modal */
.fh-ep-edit-modal {
  width: 90%; max-width: 540px;
}
.fh-ep-edit-body { padding: 16px 20px; max-height: 70vh; overflow-y: auto; }
.fh-ep-edit-meta {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--bg-2); border-radius: 6px;
  font-size: 12px;
}
.fh-ep-edit-meta-k {
  font-weight: 600; color: var(--text-light); margin-right: 4px;
}
.fh-ep-edit-meta-v { color: var(--text); font-weight: 500; }

@media (max-width: 760px) {
  .fh-depot-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .fh-depot-two-col { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Per-location maintenance cards (TSD Status Maintenance format) ── */
.fh-rep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.fh-rep-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fh-rep-card-header {
  background: #1e3a5f;
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  text-align: center;
}
.fh-rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.fh-rep-table thead th {
  background: #2563eb;
  color: white;
  font-weight: 700;
  padding: 8px 12px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.fh-rep-table thead th:last-child  { border-right: none; }
.fh-rep-table thead th.fh-rep-sub  { text-align: left; }
.fh-rep-table thead th.fh-rep-edt  { text-align: center; }
.fh-rep-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.fh-rep-table tbody td:last-child  { border-right: none; }
.fh-rep-table tbody td.fh-rep-sub  { text-align: left; font-weight: 600; color: var(--text); }
.fh-rep-table tbody td.fh-rep-num  { text-align: center; font-variant-numeric: tabular-nums; }
.fh-rep-table tbody td.fh-rep-edt  { text-align: center; color: var(--text-light); font-size: 11px; }

.fh-rep-table tbody tr[data-location]:not(.fh-rep-zero) {
  cursor: pointer; transition: background 0.1s;
}
.fh-rep-table tbody tr[data-location]:not(.fh-rep-zero):hover td { background: #eff6ff; }
.fh-rep-table tbody tr.fh-rep-zero td { color: var(--text-light); }
.fh-rep-table tbody tr.fh-rep-spacer td {
  padding: 4px 0;
  background: #f8fafc;
  border-right: none;
}
.fh-rep-table tbody tr.fh-rep-total td {
  background: #1e3a5f !important;
  color: white;
  font-weight: 800;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid #0c1f3a;
}
.fh-rep-table tbody tr.fh-rep-total td:last-child  { border-right: none; }

.fh-over-high { color: #ef4444; font-weight: 700; }
.fh-over-mid  { color: #f59e0b; font-weight: 600; }

/* ── Inline % bar in availability table ── */
.fh-av-pct-cell {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end;
}
.fh-av-pct-bar {
  flex: 1; max-width: 70px;
  height: 6px; background: #f1f5f9; border-radius: 3px;
  overflow: hidden;
}
.fh-av-pct-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}
.fh-av-pct-val {
  font-weight: 700;
  min-width: 38px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.fh-av-total .fh-av-pct-bar { background: rgba(255,255,255,0.12); }
.fh-av-total .fh-av-pct-fill { background: white !important; }
.fh-av-total .fh-av-pct-val  { color: white !important; }
.fh-av-subtotal .fh-av-pct-bar { background: #bfdbfe; }
.fh-av-subtotal .fh-av-pct-fill { background: #1e40af !important; }
.fh-av-subtotal .fh-av-pct-val  { color: #1e40af !important; }

/* ══════════════════════════════════════════
   NEW LOCATION CARDS (modern)
   ══════════════════════════════════════════ */
.fh-cards-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.fh-card-v2 {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.fh-card-v2::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #10b981, #34d399);
  opacity: 0.6;
}
.fh-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.08);
}

.fh-card-v2-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.fh-card-v2-loc {
  font-size: 18px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  display: flex; align-items: center; gap: 8px;
}
.fh-card-v2-loc-pin {
  font-size: 14px; opacity: 0.7;
}
.fh-card-v2-pct {
  font-size: 28px; font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}
.fh-pct-good { color: #059669; }
.fh-pct-warn { color: #d97706; }
.fh-pct-bad  { color: #dc2626; }

/* Stacked availability bar */
.fh-card-bar {
  display: flex; height: 12px;
  border-radius: 6px; overflow: hidden;
  background: #f1f5f9;
  margin-bottom: 8px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.fh-card-bar-seg {
  transition: flex 0.4s ease;
}
.fh-card-bar-avail   { background: linear-gradient(90deg, #10b981, #059669); }
.fh-card-bar-main    { background: linear-gradient(90deg, #fbbf24, #d97706); }
.fh-card-bar-nonact  { background: linear-gradient(90deg, #f87171, #dc2626); }

.fh-card-bar-legend {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--text-light);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fh-card-bar-legend span { display: flex; align-items: center; gap: 5px; }
.fh-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.fh-dot-avail  { background: #10b981; }
.fh-dot-main   { background: #f59e0b; }
.fh-dot-nonact { background: #ef4444; }

/* KPI mini-row */
.fh-card-kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
}
.fh-card-kpi { text-align: center; }
.fh-card-kpi-val {
  font-size: 22px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.fh-card-kpi-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light); margin-top: 4px;
}

/* Sparkline */
.fh-card-spark-wrap {
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.fh-card-spark-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light);
  margin-bottom: 6px;
}
.fh-spark { width: 100%; height: 44px; display: block; }

.fh-card-v2-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 6px -22px 14px -22px;
}
.fh-card-v2-section-title {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.fh-card-v2 .fh-rep-table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.fh-card-v2 .fh-rep-table thead th {
  background: #f8fafc;
  color: var(--text-light);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fh-card-v2 .fh-rep-table tbody tr.fh-rep-total td {
  background: linear-gradient(135deg, #1e3a5f 0%, #0c1f3a 100%) !important;
}
/* Hide blank spacer rows inside per-location cards (keep zero-qty rows visible) */
.fh-card-v2 .fh-rep-table tbody tr.fh-rep-spacer { display: none; }

/* ── Drill-down modal (episodes list) — wide enough to fit all 8 columns
   (Unit, Vehicle, Class, Status, Substatus raw, Started, Ended, Duration)
   without forcing horizontal scroll on typical 1080p+ screens. ── */
.fh-drill-overlay { padding: 24px 16px; }
.fh-drill-modal {
  max-width: min(96vw, 1600px);
  width: 100%;
  max-height: 88vh;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
}
.fh-drill-modal .modal-header { margin-bottom: 16px; flex-shrink: 0; }
.fh-drill-modal .modal-title { font-size: 16px; }
.fh-drill-table-wrap {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

/* (Old .fh-od-* anomaly card styles removed —
   the Off-Depot card now uses the shared .anomaly-* classes,
   matching the Fleet Status depot anomaly card.) */
.anomaly-table tbody tr[data-location] { cursor: pointer; }
.anomaly-table tbody tr[data-location]:hover td { background: #fffbeb; }

/* Single header row — override util-col-row's sticky top:32px assumption
   (used when a group-row sits above it) and pin to top:0 instead. */
.util-table.anomaly-table thead th,
.util-table.anomaly-table thead .util-col-row th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
  box-shadow: 0 1px 0 var(--border-light);
}

/* Extended substatus group header (Heavy / Sale / Assigned) */
.fh-rep-group-head td {
  background: linear-gradient(90deg, #f1f5f9 0%, #f8fafc 100%) !important;
  color: var(--text-light) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 8px 12px !important;
  text-align: left !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* Drill-down episodes table — single header row, no group row above.
   Override util-col-row top:32px (which assumes a group-row above) and
   force top:0 with stronger specificity + box-shadow for visual divider. */
.fh-ep-table thead th,
.fh-ep-table thead .util-col-row th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
  box-shadow: 0 2px 0 var(--border);
}
.fh-ep-table tbody tr.fh-ep-over {
  background: #fef2f2;
}
.fh-ep-table tbody tr.fh-ep-over:hover td {
  background: #fee2e2 !important;
}
.fh-ep-table .fh-unit {
  font-family: 'SF Mono', monospace; font-weight: 700; color: var(--primary);
}
.fh-flag-over {
  background: #fee2e2; color: #991b1b;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}

/* ============================================================
   v4 — STRICT MINIMAL OVERRIDE LAYER
   Keeps brand navy as accent on a neutral grayscale base.
   Removes gradients/glow, flattens depth, tightens radii.
   Loaded last → wins specificity ties.
   ============================================================ */
:root {
  /* Neutral grayscale (Tailwind-ish slate, leans cool to harmonise w/ navy) */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f6f7f9;
  --n-100: #eef0f3;
  --n-200: #e3e6eb;
  --n-300: #cdd2da;
  --n-400: #9ba2ad;
  --n-500: #6b7380;
  --n-600: #4a525e;
  --n-700: #323841;
  --n-800: #1f2329;
  --n-900: #11141a;

  /* Brand accent — single navy, used sparingly */
  --brand:        #0f3a64;
  --brand-hover:  #0c2f52;
  --brand-soft:   #eaf0f7;
  --brand-ring:   rgba(15,58,100,.18);

  /* Semantic */
  --bg:         var(--n-50);
  --bg-2:       var(--n-100);
  --bg-card:    var(--n-0);
  --white:      var(--n-0);

  --text:       var(--n-900);
  --text-2:     var(--n-700);
  --text-muted: var(--n-500);
  --text-light: var(--n-400);

  --border:       var(--n-200);
  --border-light: var(--n-100);

  --primary:        var(--brand);
  --primary-dark:   var(--brand-hover);
  --primary-light:  #1d5083;
  --accent:         var(--brand);
  --accent-light:   #1d5083;
  --accent-glow:    transparent;

  /* Status */
  --ok:    #16794e;
  --warn:  #b45309;
  --err:   #b42318;

  /* Shadows — subtle only */
  --sh-xs: 0 1px 2px rgba(17,20,26,.04);
  --sh-sm: 0 1px 2px rgba(17,20,26,.05), 0 1px 3px rgba(17,20,26,.06);
  --sh:    0 2px 4px rgba(17,20,26,.05), 0 4px 12px rgba(17,20,26,.06);
  --sh-lg: 0 6px 16px rgba(17,20,26,.08), 0 12px 32px rgba(17,20,26,.06);
  --sh-xl: 0 12px 32px rgba(17,20,26,.10), 0 24px 48px rgba(17,20,26,.08);
  --glow-xs: none;
  --glow-sm: none;
  --glow:    none;

  /* Tighter radii */
  --radius:    8px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  /* ── Responsive design tokens (consolidating ad-hoc values) ─────
     The platform accumulated 14+ different breakpoints over time —
     these tokens give every new responsive rule a canonical anchor.
     Existing code keeps its values; new code uses these.

     Breakpoint philosophy:
       --bp-xs  (≤360px) — Z Flip cover, narrow phones
       --bp-sm  (≤480px) — most phones portrait
       --bp-md  (≤768px) — tablets / phones landscape — sidebar drawer
       --bp-lg  (≤1024px) — small laptops
       --bp-xl  (>1024px) — desktop default

     Spacing scale (Tailwind-aligned):
       2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
  */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;

  /* Fluid typography — clamps that scale between mobile and desktop.
     Avoids hard breakpoint jumps for headlines. */
  --fs-page-title: clamp(20px, 4.2vw, 26px);
  --fs-section:    clamp(13px, 1.6vw, 14.5px);
  --fs-body:       clamp(13px, 1.4vw, 14px);
  --fs-meta:       clamp(11px, 1.2vw, 12.5px);
  --fs-kpi:        clamp(22px, 5.5vw, 32px);
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE SAFETY NET
   These rules prevent entire classes of mobile bugs without per-
   component handling. Applied site-wide so any future component
   added inherits sane defaults.
   ════════════════════════════════════════════════════════════════ */

/* 1. min-width: 0 on flex children
   Default min-width for flex children is `auto` which equals their
   intrinsic content width — when content is a long URL, table, or
   pre-formatted text, the parent grows past the viewport causing
   horizontal scroll on the whole page. Setting min-width: 0 lets
   flex actually shrink.
*/
.app-layout > *,
.main-content > *,
.page-container > *,
.dashboard-content > *,
.dashboard-title-row > div,
.owner-hero-text,
.home-hero-text,
.home-hero-inner > div { min-width: 0; }

/* 2. Long-text overflow handling — break absurdly long words/URLs
   instead of pushing the container wider. Applies to user-generated
   content: notes, dashboard titles/descriptions, announcements,
   user names, error messages. */
.hn-text,
.note-content,
.notify-dash-desc,
.cat-card-desc,
.page-subtitle,
.alert,
.toast,
.sb-search-title,
.sb-search-sub,
.oa-item-title,
.oa-item-sub,
.fsd-note-content,
.cat-card-title { overflow-wrap: anywhere; word-break: normal; }

/* 3. Image safety — never wider than container */
img, svg, video, canvas { max-width: 100%; }

/* 4. Tables — never overflow body. Wrap them in a scroll container
   manually if you want horizontal scroll on data tables. */
table { max-width: 100%; }

/* 5. Scrollbars on touch devices — use system default for good
   inertia, hide on hover/inactive. */
@media (hover: none) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 2px; }
}

/* 6. (SVG fluid rule was here — consolidated into rule 7b below.) */

/* 7. Universal chart container responsive contract ───────────────
   Every chart wrapper across the platform — Daily revenue (otrend),
   Sales chart, IS chart, NPS trend, Repair Costs chart, sparklines,
   plus the generic `.chart-container` and `.chart-card` — gets these
   defaults:
     • width: 100%             never wider than parent
     • min-width: 0            can shrink inside flex/grid (default
                                 was `auto` = intrinsic content width,
                                 which would push past the viewport
                                 with wide SVG paths)
     • max-width: 100%         belt-and-suspenders against absolute
                                 child widths
     • overflow: hidden        clip any chart bits that escape (axis
                                 ticks etc) instead of pushing the page
   The inner SVG keeps `viewBox + preserveAspectRatio` so the chart
   itself rescales without distortion.
*/
.chart-container,
.chart-card,
.otrend-wrap,
.otrend-chart,
.otrend-plot,
.sales-chart-section,
.sales-chart-body,
.nps-trend-card,
.nps-trend-svg-wrap,
.rc-chart-card,
.rc-chart-wrap,
.fh-spark-wrap,
[class*="chart-wrap"],
[class*="-chart-card"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
/* Outer wrappers clip — inner plot areas DO NOT.
   Some charts (Daily revenue) intentionally render value labels
   above the topmost bar, which means children need to escape
   the plot bounds. Clipping happens one level up at the wrap. */
.chart-container,
.chart-card,
.otrend-wrap,
.sales-chart-section,
.sales-chart-body,
.nps-trend-card,
.rc-chart-card,
[class*="-chart-card"] {
  overflow: hidden;
}
.otrend-chart,
.otrend-plot { overflow: visible; }

/* 7b. SVG charts — fluid by default. Each chart's wrapper element is
   responsible for its OWN height; the SVG fills 100% of its wrapper.
   Combined with viewBox + preserveAspectRatio, this means a chart
   always fits its container regardless of viewport size. */
.sales-chart-svg,
.fh-spark,
.otrend-svg,
.nps-trend-svg,
.rc-chart-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* 7c. Standard "card with chart" container — keeps chart wrappers
   fluid and applies consistent responsive padding via tokens. New
   dashboards can use `.chart-card` for instant correct behavior. */
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);   /* 16px desktop */
}
@media (max-width: 768px) {
  .chart-card { padding: var(--space-4); /* 12px */ }
}

/* 8. Container queries (where supported) — let cards adapt to their
   own slot rather than viewport. Catches edge cases like a card in
   a sidebar where viewport is wide but available space is narrow. */
@supports (container-type: inline-size) {
  .owner-card,
  .owner-section,
  .chart-card { container-type: inline-size; }
}

/* 9. Long-content guard — no element should ever exceed its parent
   width unless explicitly opted in (.scroll-x). Common culprit:
   `<pre>`, `<code>` and dynamically-injected content. */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 10. Sticky-header z-index normalization — ensures dropdowns and
    popovers always render above sticky table headers. */
.fsd-table thead,
.util-table thead,
.fh-rep-table thead { z-index: 1; }
.fsd-dd-pop,
.ms-popover,
.modal,
.sb-search-popover { z-index: 250; }

/* Sidebar — solid brand, no patterns/gradients */
.sidebar {
  background: var(--brand) !important;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar::before, .sidebar::after { display: none !important; }

/* Kill all gradient backgrounds across the app — replace with solid brand/neutral */
.fh-card-v2::before { display: none !important; }
.fh-card-bar-avail   { background: var(--ok) !important; }
.fh-card-bar-main    { background: var(--warn) !important; }
.fh-card-bar-nonact  { background: var(--err) !important; }

.fh-rep-table tbody tr.fh-rep-total td,
.fh-card-v2 .fh-rep-table tbody tr.fh-rep-total td {
  background: var(--n-50) !important;
  color: var(--text) !important;
  border-top: 2px solid var(--brand) !important;
  font-weight: 700;
}

.fh-od-card .fh-od-header,
[class*="fsd-table-header"],
.util-table thead th,
.fh-rep-table thead th {
  background: var(--n-100) !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border);
}
.fh-rep-table thead th { color: var(--text-muted) !important; }

/* Cards — flat, hairline border, subtle shadow */
.card, .fh-card-v2, .fsd-card, .util-card,
.nps-section, .fh-od-card, .modal {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--sh-xs) !important;
  background: var(--bg-card) !important;
}
.fh-card-v2:hover { transform: none !important; box-shadow: var(--sh-sm) !important; }

/* KPI / values — drop coloured glows, keep accent text only */
.fh-card-v2-pct { letter-spacing: -0.4px; }
.fh-pct-good { color: var(--ok) !important; }
.fh-pct-warn { color: var(--warn) !important; }
.fh-pct-bad  { color: var(--err) !important; }

/* Buttons — flat */
.btn {
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary {
  background: var(--brand) !important;
  color: var(--n-0) !important;
  border: 1px solid var(--brand) !important;
}
.btn-primary:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }
.btn-outline {
  background: var(--n-0) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
}
.btn-outline:hover { background: var(--n-50) !important; border-color: var(--n-300) !important; }
.btn-ghost { background: transparent !important; color: var(--text-2) !important; }
.btn-ghost:hover { background: var(--n-100) !important; }

/* Inputs */
input, select, textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border);
  background: var(--n-0);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
  outline: none !important;
}

/* Modals — flat */
.modal-overlay { background: rgba(17,20,26,.42); backdrop-filter: blur(2px); }
.modal { box-shadow: var(--sh-lg) !important; }

/* Tables — minimal grid */
.util-table, .fh-rep-table, .fh-ep-table, .fsd-table {
  background: var(--bg-card);
}
.util-table thead th { font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; }
.util-table tbody td { border-bottom: 1px solid var(--border-light); }
.util-table tbody tr:not(.util-loc-header):not(.util-grand-total):hover td { background: var(--n-50); }
/* Total / Grand-Total — light bg + dark text + brand top border (no black block) */
.util-table tbody tr.util-grand-total:hover td,
.util-table tbody tr.util-grand-total td {
  background: var(--n-50) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  border-top: 2px solid var(--brand) !important;
}

/* Lucide icons baseline — stroke uses currentColor, so the parent's color drives it.
   Default: inherit (text color). Override per dark surface below. */
[data-lucide], svg.lucide {
  width: 16px; height: 16px;
  stroke-width: 1.75;
  vertical-align: -3px;
  flex-shrink: 0;
  color: inherit;
}
/* Dark surfaces → white icons */
.sidebar [data-lucide], .sidebar svg.lucide,
.auth-split-left [data-lucide], .auth-split-left svg.lucide,
.auth-preview-card [data-lucide], .auth-preview-card svg.lucide,
.auth-brand-feature [data-lucide], .auth-brand-feature svg.lucide,
.btn-primary [data-lucide], .btn-primary svg.lucide {
  color: #fff;
}
.sidebar [data-lucide], .sidebar svg.lucide { color: rgba(255,255,255,.85); }
.sidebar .nav-item.active [data-lucide], .sidebar .nav-item.active svg.lucide { color: #fff; }

.nav-icon { font-size: 0 !important; opacity: 1 !important; }
.nav-icon svg.lucide { width: 18px; height: 18px; }
.auth-preview-card-icon svg.lucide { width: 22px; height: 22px; }
.auth-brand-feature-icon svg.lucide { width: 18px; height: 18px; }

/* Replace decorative emoji-bearing rows: hide raw emoji in pin slot, Lucide handles it */
.fh-card-v2-loc-pin { display: none; }
.fh-card-v2-loc { display: flex; align-items: center; gap: 8px; }
.fh-card-v2-loc::before {
  content: '';
  width: 4px; height: 16px;
  background: var(--brand);
  border-radius: 2px;
  display: inline-block;
}

/* Anomaly Watch — flat */
.fh-od-anomaly-bar, .fh-od-card .fh-od-header { background: #fff8e1 !important; color: #7c5e00 !important; }
.fh-od-card { background: #fffbeb !important; }

/* Refresh-bar */
.fleet-refresh-bar {
  background: var(--n-100) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Auth split — flat brand panel */
.auth-split-left {
  background: var(--brand) !important;
}
.auth-split-left::before, .auth-split-left::after { display: none !important; }
.auth-preview-card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
.auth-preview-card-icon {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff;
}
.auth-preview-card-icon svg.lucide { width: 22px; height: 22px; color: #fff; }
.auth-brand-feature-icon {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  color: #fff;
}
.auth-brand-feature-icon svg.lucide { width: 18px; height: 18px; color: #fff; }
.auth-card { box-shadow: var(--sh-sm) !important; border: 1px solid var(--border) !important; }

/* Sidebar logo — flat */
.sidebar-logo-icon {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}

/* Home / category cards — flat */
.cat-card, .home-cat-card, .dash-card {
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-xs) !important;
  background: var(--bg-card) !important;
}
.cat-card:hover, .home-cat-card:hover, .dash-card:hover {
  transform: none !important;
  box-shadow: var(--sh-sm) !important;
  border-color: var(--n-300) !important;
}
/* Category card top band — flat brand, no gradient/orbs, white icons */
.cat-card-top {
  background: var(--brand) !important;
  height: 84px !important;
}
.cat-card-top::before, .cat-card-top::after { display: none !important; }
.cat-card-icon-big { font-size: 0 !important; color: #fff !important; }
.cat-card-icon-big svg.lucide { width: 24px; height: 24px; color: #fff; stroke-width: 1.75; }
.cat-card-count-badge {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: none !important;
}
/* Strip per-category accent colours — single brand navy across all 6 cards */
.cat-card-label, .cat-card-link { color: var(--brand) !important; }
.cat-card-link svg.lucide { color: var(--brand); }
/* Dashboard-card category chip + dot — flat brand-soft pill, brand text, navy dot */
.card-cat-chip {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}
.card-cat-dot, [class*="card-cat-dot"] { background: var(--brand) !important; }
/* Top accent bar — solid brand, no gradient */
.card-accent-bar { background: var(--brand) !important; }
/* "Open Dashboard →" — single brand colour, no per-category override */
.card-open-btn,
.dashboard-card .card-open-btn,
.cat-fleet .card-open-btn,
.cat-financial .card-open-btn,
.cat-tolls .card-open-btn,
.cat-claims .card-open-btn,
.cat-cs .card-open-btn,
.cat-audit .card-open-btn { color: var(--brand) !important; }

/* Dashboard-card hover/lift — flatter (no transform, just border + shadow) */
.dashboard-card:hover {
  transform: none !important;
  box-shadow: var(--sh-sm) !important;
  border-color: var(--n-300) !important;
}

/* Admin pencil/trash buttons — neutral, only colour on action hover */
.card-admin-btn {
  background: var(--n-0) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.card-admin-btn svg.lucide { width: 14px; height: 14px; }
.card-admin-btn.edit:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}
.card-admin-btn.del:hover {
  border-color: var(--err) !important;
  color: var(--err) !important;
  background: #fef2f2 !important;
}

/* Admin table small Edit/Delete buttons */
.tbl-btn {
  border-radius: var(--radius-xs) !important;
  border: 1px solid var(--border) !important;
  background: var(--n-0) !important;
  color: var(--text-2) !important;
}
.tbl-btn:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
.tbl-btn.danger { color: var(--err) !important; }
.tbl-btn.danger:hover { border-color: var(--err) !important; background: #fef2f2 !important; }

/* Filter chips (NPS) — flat brand-soft pill */
.nps-chip, [class*="filter-chip"] {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
}
.nps-chip svg.lucide,
[class*="filter-chip"] svg.lucide { width: 12px; height: 12px; vertical-align: -2px; }

/* Notes section header */
.notes-title { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.notes-title svg.lucide { width: 16px; height: 16px; color: var(--brand); }

/* NPS section title icons */
.nps-section-title { display: flex; align-items: center; gap: 8px; }
.nps-section-title svg.lucide { width: 14px; height: 14px; color: var(--brand); }

/* Empty state icon */
.empty-state-icon { display: flex; align-items: center; justify-content: center; }
.empty-state-icon svg.lucide { width: 32px; height: 32px; color: var(--text-light); }

/* Column-filter dropdowns (FSD) — flat */
.fsd-col-dropdown {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--sh-sm) !important;
  background: var(--n-0) !important;
  padding: 4px !important;
}
.fsd-dd-item {
  border-radius: var(--radius-xs) !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
}
.fsd-dd-item:hover { background: var(--n-100) !important; color: var(--text) !important; }
.fsd-dd-item.fsd-dd-active { background: var(--brand-soft) !important; color: var(--brand) !important; }
.fsd-dd-item.fsd-dd-active::before { color: var(--brand) !important; }
.fsd-filter-btn {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
}
.fsd-filter-btn:hover { color: var(--brand) !important; }
.fsd-filter-btn.fsd-filter-active { color: var(--brand) !important; }

/* Sort icons in headers */
.fsd-sort-icon { color: var(--text-light) !important; }
.fsd-sort-icon.fsd-sort-active { color: var(--brand) !important; }

/* Generic dropdown menus */
[class*="-dropdown"], [class*="-menu"] {
  box-shadow: var(--sh-sm);
}

/* Dashboard title row — strip per-category background tints */
.dashboard-title-row.cat-fleet,
.dashboard-title-row.cat-audit,
.dashboard-title-row.cat-financial,
.dashboard-title-row.cat-tolls,
.dashboard-title-row.cat-claims,
.dashboard-title-row.cat-cs { background: transparent !important; }

/* FSD note pencil */
.fsd-note-icon { color: var(--text-light); }
.fsd-note-wrap.has-note .fsd-note-icon { color: var(--brand); }

/* ══════════════════════════════════════════
   SALES REPORT — same shell as Utilization, Sales-specific bits below
   ══════════════════════════════════════════ */

/* YoY pills (re-used in KPI sub-text and in the breakdown table) */
.sales-yoy {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--n-100);
  color: var(--text-2);
  white-space: nowrap;
}
.sales-yoy svg.lucide { width: 12px; height: 12px; }
.sales-yoy-good    { background: #e6f4ec; color: var(--ok); }
.sales-yoy-bad     { background: #fdecea; color: var(--err); }
.sales-yoy-neutral { background: var(--n-100); color: var(--text-muted); }

/* Chart legend (placed in the section toolbar) */
.sales-chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); }
.sales-legend-item  { display: inline-flex; align-items: center; gap: 6px; }
.sales-legend-dot   { width: 16px; height: 2px; border-radius: 2px; display: inline-block; }
.sales-legend-cur   { background: var(--brand); height: 2px; }
.sales-legend-prev  {
  background: transparent;
  border-top: 2px dashed var(--n-400);
  border-radius: 0;
}

/* Unified header-block treatment for every section on Sales / IS / FH pages.
   Title sits flush against the section frame, separated from the content
   by a thin gray rule — same as the Daily Sales chart. */
.sales-page .nps-section,
.is-page    .nps-section,
.fh-page    .nps-section { padding: 0; }
.sales-page .nps-section > .fsd-table-toolbar,
.is-page    .nps-section > .fsd-table-toolbar,
.fh-page    .nps-section > .fsd-table-toolbar {
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid var(--border-light);
}
.sales-page .nps-section > .util-table-wrap,
.is-page    .nps-section > .util-table-wrap,
.fh-page    .nps-section > .util-table-wrap {
  padding: 14px 16px 16px;
  /* These table sections are short enough that thead sticky-positioning is
     more harmful than helpful — the global util-table sticky rules cause
     thead rows to overlap data rows at certain scroll positions because
     the page-level scrolling header sits above the sticky-anchor zone.
     Disable sticky here so thead simply scrolls with content. */
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  border-top: none;
}
.sales-page .nps-section .util-table thead .util-group-row th,
.sales-page .nps-section .util-table thead .util-col-row   th,
.is-page    .nps-section .util-table thead .util-group-row th,
.is-page    .nps-section .util-table thead .util-col-row   th,
.fh-page    .nps-section .util-table thead .util-group-row th,
.fh-page    .nps-section .util-table thead .util-col-row   th {
  position: static;
  box-shadow: none;
}
/* Comparison matrix gets its own padding override — table is flush so
   the section borders frame it cleanly. */
.fh-page .nps-section.fh-matrix-section > .util-table-wrap {
  padding: 0;
}

.nps-section.sales-chart-section { padding: 0; }
.sales-chart-section .sales-chart-body {
  padding: 14px 8px 10px;
}
.sales-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  /* Trim implicit SVG bottom whitespace */
  vertical-align: middle;
}

/* Top-categories + breakdown side-by-side */
.sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .sales-grid { grid-template-columns: 1fr; }
}

/* ── Top Movers (Income Statement — keep card style) ──────────── */
.is-movers-section { padding: 0; }
.is-movers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.is-movers-col {
  padding: 14px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.is-movers-col + .is-movers-col { border-left: 1px solid var(--border-light); }
.is-movers-col-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-light);
  margin-bottom: 2px;
}
.is-movers-col-up   { color: #047857; }
.is-movers-col-down { color: #b91c1c; }
.is-mover-card {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
.is-mover-up   { border-left: 3px solid #10b981; }
.is-mover-down { border-left: 3px solid #ef4444; }
.is-mover-label {
  font-size: 12.5px; color: var(--text-light); font-weight: 500;
  margin-bottom: 4px;
}
.is-mover-delta {
  font-size: 19px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.is-mover-up .is-mover-delta   { color: #047857; }
.is-mover-down .is-mover-delta { color: #b91c1c; }
.is-mover-sub {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--text-light);
  flex-wrap: wrap;
}
.is-movers-empty {
  font-size: 12.5px; color: var(--text-light); font-style: italic;
  padding: 6px 4px;
}
@media (max-width: 700px) {
  .is-movers-grid { grid-template-columns: 1fr; }
  .is-movers-col + .is-movers-col { border-left: none; border-top: 1px solid var(--border-light); }
}

/* ── Sales-only restrained styles (text rows, no card chrome) ─── */
.sales-movers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.sales-movers-col {
  padding: 14px 20px 18px;
}
.sales-movers-col + .sales-movers-col { border-left: 1px solid var(--border-light); }
.sales-movers-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-light);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}
.sales-mover-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.sales-mover-row:last-child { border-bottom: none; }
.sales-mover-row-label {
  font-size: 13px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sales-mover-row-delta {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  letter-spacing: -0.1px;
  min-width: 110px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.sales-mover-row-delta.up   { color: #047857; }
.sales-mover-row-delta.down { color: #b91c1c; }
.sales-mover-row-yoy {
  font-size: 11.5px; color: var(--text-light);
  min-width: 56px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.sales-movers-empty {
  font-size: 12px; color: var(--text-light); font-style: italic;
  padding: 4px 0;
}
@media (max-width: 700px) {
  .sales-movers-grid { grid-template-columns: 1fr; }
  .sales-movers-col + .sales-movers-col { border-left: none; border-top: 1px solid var(--border-light); }
}

/* ── Sales group share bars — horizontal bar list, monochrome ── */
.sales-group-bars {
  padding: 14px 20px 18px;
}
.sales-group-bar-row {
  display: grid;
  grid-template-columns: 260px 140px 1fr 60px 70px;
  gap: 16px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}
.sales-group-bar-row:last-child { border-bottom: none; }
.sales-group-bar-label {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4;
}
.sales-group-bar-amount {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1px;
  text-align: right;
}
.sales-group-bar-track {
  background: #f1f5f9;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.sales-group-bar-fill {
  background: #475569;
  height: 100%;
  border-radius: 4px;
}
.sales-group-bar-share {
  font-size: 12px; color: var(--text-light);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sales-group-bar-yoy {
  text-align: right;
}
@media (max-width: 900px) {
  .sales-group-bar-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "label amount yoy"
      "bar bar share";
    gap: 6px 12px;
  }
  .sales-group-bar-label  { grid-area: label; }
  .sales-group-bar-amount { grid-area: amount; }
  .sales-group-bar-track  { grid-area: bar; }
  .sales-group-bar-share  { grid-area: share; text-align: left; }
  .sales-group-bar-yoy    { grid-area: yoy; }
}

/* ── Income Statement: 3 sections side-by-side, stat-list rows ── */
.is-sections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1280px) { .is-sections-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px)  { .is-sections-grid { grid-template-columns: 1fr; } }

.is-section { padding: 0; }
.is-rows { padding: 0 16px 12px; }
.is-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.is-row:last-child { border-bottom: none; }
.is-row-label {
  font-size: 13px; color: var(--text); font-weight: 500;
}
.is-row-vals { text-align: right; }
.is-row-cur {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1px;
}
.is-row-prev {
  font-size: 11px; color: var(--text-light);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.is-row-yoy {
  min-width: 70px; text-align: right;
}
.is-row-total {
  background: #f1f5f9;
  margin: 4px -16px 0;
  padding: 12px 16px;
  border-bottom: none;
}
.is-row-total .is-row-label { font-weight: 700; }
.is-row-total .is-row-cur { font-size: 16px; font-weight: 800; }

/* Group subtotal rows in the merged breakdown table */
.sales-table tr.sales-group-row {
  background: #f8fafc;
}
.sales-table tr.sales-group-row td {
  font-weight: 700; color: var(--text);
  border-top: 2px solid #cbd5e1;
}
.sales-table tr.sales-group-row td.sales-cat {
  letter-spacing: 0.2px;
}
.sales-top-body { padding: 6px 16px 14px; }

/* Top-categories bar list — keep all category names on one line */
.sales-top-row {
  display: grid;
  grid-template-columns: max-content minmax(60px, 1fr) auto auto;
  gap: 12px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.sales-top-row:last-child { border-bottom: none; }
.sales-top-label  {
  font-size: 13px; color: var(--text); font-weight: 500;
  white-space: nowrap;
}
.sales-top-bar-wrap {
  height: 6px; background: var(--n-100); border-radius: 999px; overflow: hidden;
}
.sales-top-bar {
  height: 100%; background: var(--brand);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.sales-top-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 13px;
  text-align: right; min-width: 80px;
}
.sales-top-yoy { min-width: 70px; text-align: right; }

/* Breakdown table — extends .util-table; no group-row above so sticky=0 */
.util-table.sales-table thead .util-col-row th { top: 0; }

.util-table.sales-table tbody td.sales-cat {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.util-table.sales-table thead th.sales-cat,
.util-table.sales-table thead th.sales-num-th,
.util-table.sales-table thead th.sales-yoy-th { text-align: right; }
.util-table.sales-table thead th.sales-cat { text-align: left; }
.util-table.sales-table tbody td.sales-num {
  text-align: right;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.util-table.sales-table tbody td.sales-yoy-cell {
  text-align: right; white-space: nowrap;
}
.util-table.sales-table tbody tr.sales-zero-row td { color: var(--text-light); }
.util-table.sales-table tbody tr.sales-zero-row .sales-yoy { background: transparent; color: var(--text-light); }
.util-table.sales-table tbody tr.sales-total-row td {
  background: var(--n-50);
  color: var(--text);
  font-weight: 700;
  border-top: 2px solid var(--brand);
}

/* Allow YoY pill text colour to win over inherited .sales-total-row colour */
.util-table.sales-table tbody tr.sales-total-row .sales-yoy-good { color: var(--ok); }
.util-table.sales-table tbody tr.sales-total-row .sales-yoy-bad  { color: var(--err); }

.sales-empty {
  font-size: 13px; color: var(--text-muted);
  text-align: center;
  padding: 24px;
}

/* Within Utilization-style KPI cards: place YoY pill inline with the sub-line */
.util-kpi-sub .sales-yoy { margin-right: 4px; }

/* Notes / announcements blocks — flat */
.home-notes, .nps-section, .notes-list { box-shadow: none !important; }

/* Notify / user / dash modal headers — neutralise gradient bands */
[class*="modal-header"] { background: transparent !important; }

/* Tighten typography globally */
body, html { -webkit-font-smoothing: antialiased; }
h1, h2, h3, .page-title { letter-spacing: -.4px !important; }

/* ── Home hero — same flat treatment as category-hero (single source of truth for page headers) */
.home-hero {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 4px 0 18px !important;
  margin-bottom: 24px !important;
  overflow: visible !important;
}
.home-hero::before, .home-hero::after { display: none !important; }
/* ── New executive welcome header ──────────────────────────────
   Three-line hierarchy: tiny eyebrow (time of day), big greeting
   with the user's name in a navy gradient, date + period below.
   The result reads as "morning briefing" rather than "loading…". */
.home-hero-text {
  /* Stretch to fill available row width so the greeting and date
     can use the full line — without this the text block shrinks to
     hug its content and everything looks cramped on the left. */
  flex: 1 1 auto;
  min-width: 0;
}

.home-greeting-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
  line-height: 1.2;
}

.home-greeting {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.6px !important;
  /* block-level flex so the greeting takes its own line — was
     inline-flex earlier which let the date row stack next to it. */
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  line-height: 1.15 !important;
}
.home-greeting-name {
  /* Subtle in-family navy gradient on the user's name. Stays within
     the brand palette so the highlight reads as a refinement, not a
     different color — start slightly darker than --brand, end on the
     brand-paired lighter navy var(--primary-light). */
  background: linear-gradient(135deg, var(--brand-hover) 0%, var(--brand) 50%, var(--primary-light) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.home-greeting-icon {
  width: 26px; height: 26px;
  color: #f59e0b;
  /* One short wave on page mount, then settles. Animation runs
     once thanks to forwards + iteration count. */
  transform-origin: 70% 75%;
  animation: handWaveOnce 1.6s ease-in-out 0.2s 1 both;
}
@keyframes handWaveOnce {
  0%   { transform: rotate(0); }
  15%  { transform: rotate(14deg); }
  30%  { transform: rotate(-8deg); }
  45%  { transform: rotate(14deg); }
  60%  { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

.home-date {
  /* block-level flex — same fix as .home-greeting so the date sits
     on its own line beneath the welcome heading. */
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--text-muted) !important;
  margin-top: 14px !important;
}
.home-date-icon {
  width: 14px; height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.home-date-pill {
  background: var(--brand-soft);
  color: var(--brand);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .01em;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .home-greeting { font-size: 26px !important; gap: 8px; }
  .home-greeting-icon { width: 22px; height: 22px; }
  .home-greeting-eyebrow { font-size: 11px; }
  .home-date { font-size: 12.5px !important; gap: 6px; }
}
.home-stat {
  border-right: 1px solid var(--border) !important;
  padding: 0 18px !important;
}
.home-stat:last-child { border-right: none !important; padding-right: 0 !important; }
.home-stat-val {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.4px !important;
}
.home-stat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: .04em !important;
}

/* (Old home-page search & announcements card overrides removed —
   those widgets moved to the sidebar (`sb-search-*`, `sb-panel-*`).) */
.notes-collapse-icon svg.lucide { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
   OWNER HOME — KPI strip + revenue breakdown + fleet pulse
   Designed as a calm, restrained executive overview. Matches the
   rest of the platform: white cards, var(--border), subtle hover,
   navy accents.
   ════════════════════════════════════════════════════════════════ */

/* Hero date now wears a separator dot */
.home-date-sep { opacity: .4; margin: 0 4px; }

/* Right-aligned actions in the hero (How it works button etc.) */
.home-hero-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  /* Anchor to the start of the row so on tall hero blocks the button
     stays at the top edge while the multi-line greeting expands below. */
  align-self: flex-start;
  margin-top: 4px;
}
/* Top-align the inner row so a tall greeting block doesn't shove the
   action button vertically away from the eyebrow. */
.home-hero-inner {
  align-items: flex-start !important;
}

/* ── 4-up KPI strip ──────────────────────────────────────────── */
.owner-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) { .owner-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .owner-kpi-strip { grid-template-columns: 1fr; } }

.owner-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 104px;
}
.owner-kpi:hover {
  border-color: var(--n-300);
  box-shadow: var(--sh-sm);
}
.owner-kpi.owner-kpi-disabled { cursor: default; opacity: .85; }
.owner-kpi.owner-kpi-disabled:hover { border-color: var(--border); box-shadow: none; }

.okpi-label {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.okpi-val {
  font-size: 28px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1.1;
}
.okpi-delta {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  margin-top: auto;
}
.okpi-delta-up   { color: #15803d; }
.okpi-delta-down { color: #b91c1c; }
.okpi-delta-flat { color: var(--text-muted); }

/* Optional secondary line under the KPI delta — used by the utilization
   tile to surface the "all-fleet" number alongside the controllable one. */
.okpi-secondary {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-light);
  font-size: 11.5px;
}
.okpi-secondary-val { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.okpi-secondary-lbl { color: var(--text-muted); }

/* NPS tile — left edge dot indicates band, like the FSD badges */
.owner-kpi-nps      { border-left: 3px solid #94a3b8; padding-left: 16px; }
.owner-kpi-nps.okpi-nps-high { border-left-color: #10b981; }
.owner-kpi-nps.okpi-nps-mid  { border-left-color: #f59e0b; }
.owner-kpi-nps.okpi-nps-low  { border-left-color: #ef4444; }

/* ── 2-up grid: Revenue breakdown + Fleet pulse ──────────────── */
.owner-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .owner-grid { grid-template-columns: 1fr; } }

.owner-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* flex column so the body can grow & the Total row can be pinned to the
     bottom — keeps Total revenue and Total fleet on the same Y position
     even when the two cards have a different number of detail rows. */
  display: flex; flex-direction: column;
}
.owner-card-hd {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-light);
}
.owner-card-title {
  font-size: 14px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.1px;
}
.owner-card-sub {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px;
}
.owner-card-body {
  padding: 6px 0 8px;
  /* Flex column so totals pin to the bottom of the card. */
  display: flex; flex-direction: column;
  flex: 1 1 auto;
}

/* Revenue rows */
.orev-row {
  display: grid;
  grid-template-columns: 1fr auto 84px;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  border-top: 1px solid var(--border-light);
}
.orev-row:first-child { border-top: none; }
.orev-label { color: var(--text-2); }
.orev-val   { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.orev-yoy   { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.orev-yoy-up   { color: #15803d; }
.orev-yoy-down { color: #b91c1c; }
.orev-yoy-flat { color: var(--text-muted); }
.orev-row.orev-total {
  border-top: 2px solid var(--brand);
  background: var(--n-50, #f8fafc);
  font-weight: 800;
  /* Pin to the bottom of the card body so Total revenue lines up with
     Total fleet across both cards regardless of detail-row count. */
  margin-top: auto;
}
.orev-row.orev-total .orev-label { color: var(--text); font-weight: 800; }

/* Fleet pulse rows */
.opulse-row {
  display: grid;
  grid-template-columns: 14px 1fr auto 56px;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  border-top: 1px solid var(--border-light);
}
.opulse-row:first-child { border-top: none; }
.opulse-label { color: var(--text-2); }
.opulse-val   { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.opulse-pct   { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.opulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; justify-self: center;
}
.opulse-dot-on    { background: #10b981; }
.opulse-dot-avail { background: #3b82f6; }
.opulse-dot-maint { background: #f59e0b; }
.opulse-dot-sale  { background: #8b5cf6; }
.opulse-dot-other { background: #94a3b8; }
.opulse-row.opulse-total {
  /* Drop the dot column so "Total fleet" text starts flush-left at the
     same x as "Total revenue" in the sibling card. The value column
     (auto) stays at the same right-anchored position because the 1fr
     label column expands to fill the freed space. */
  grid-template-columns: 1fr auto 56px;
  border-top: 2px solid var(--brand);
  background: var(--n-50, #f8fafc);
  font-weight: 800;
  /* Pin to bottom so Total fleet aligns with Total revenue. */
  margin-top: auto;
}
.opulse-row.opulse-total .opulse-label { color: var(--text); font-weight: 800; }

/* ════════════════════════════════════════════════════════════════
   ATTENTION NEEDED — operational alerts derived from owner data.
   Each row is severity-tinted (red = critical, amber = warning) with
   a subtle left bar. Clean state collapses to a green "all clear"
   ribbon so the absence of alerts also reads as a positive signal.
   ════════════════════════════════════════════════════════════════ */
.owner-attention {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.oa-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
}
.oa-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--text);
}
.oa-title svg.lucide { width: 16px; height: 16px; color: #b91c1c; }
.oa-tally { display: flex; gap: 8px; }
.oa-tally-pill {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 10px;
}
.oa-tally-critical { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.oa-tally-warning  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

.oa-list { display: flex; flex-direction: column; }
.oa-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px 13px 14px;
  border-top: 1px solid var(--border-light);
  border-left: 3px solid transparent;
  transition: background .12s ease, border-left-color .12s ease;
}
.oa-item:first-child { border-top: none; }
.oa-item[data-embed] { cursor: pointer; }
.oa-item[data-embed]:hover { background: var(--n-50, #f8fafc); }
.oa-item[data-embed]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Severity ─ left bar + icon tint */
.oa-critical { border-left-color: #b91c1c; }
.oa-warning  { border-left-color: #f59e0b; }

.oa-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.oa-critical .oa-icon { background: #fef2f2; color: #b91c1c; }
.oa-warning  .oa-icon { background: #fffbeb; color: #b45309; }
.oa-icon svg.lucide { width: 16px; height: 16px; }

.oa-body { min-width: 0; }
.oa-item-title {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  line-height: 1.3;
}
.oa-item-sub {
  font-size: 12px; color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.oa-action {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .12s ease, transform .15s ease;
}
.oa-item[data-embed]:hover .oa-action {
  color: var(--brand);
  transform: translateX(2px);
}
.oa-action svg.lucide { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .oa-action-label { display: none; }
}

/* ── Clean state: green "all systems normal" ─────────────────── */
.owner-attention-clear {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3px solid #16a34a;
}
.oa-clear-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.oa-clear-icon svg.lucide { width: 20px; height: 20px; }
.oa-clear-title {
  font-size: 14px; font-weight: 800; color: #166534;
}
.oa-clear-sub {
  font-size: 12px; color: #15803d;
  margin-top: 2px;
}

/* ── Incomplete-data state: amber, "still loading" ───────────── */
.owner-attention-incomplete {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
}
.oa-incomplete-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.oa-incomplete-icon svg.lucide {
  width: 20px; height: 20px;
  animation: oaSpin 1.4s linear infinite;
}
@keyframes oaSpin {
  100% { transform: rotate(360deg); }
}
.oa-incomplete-title {
  font-size: 14px; font-weight: 800; color: #92400e;
}
.oa-incomplete-sub {
  font-size: 12px; color: #b45309;
  margin-top: 2px;
}

/* ── Full-width owner sections (trend, top locations) ───────── */
.owner-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.osec-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-light);
}
.osec-title {
  font-size: 14px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.1px;
}
.osec-sub {
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}
.osec-meta {
  display: flex; gap: 24px;
  flex-wrap: wrap;
}
.osec-meta-item { text-align: right; }
.osec-meta-lbl {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.osec-meta-val {
  font-size: 16px; font-weight: 800; color: var(--text);
  margin-top: 1px; font-variant-numeric: tabular-nums;
}
.osec-meta-yoy {
  font-size: 11px; font-weight: 600; margin-top: 1px;
}
.osec-up   { color: #15803d; }
.osec-down { color: #b91c1c; }
.osec-flat { color: var(--text-muted); }

/* Daily revenue chart — HTML axes + SVG bars overlay.
   Axes/labels rendered as HTML so font sizes are real CSS pixels (the
   pure-SVG version was scaling text along with the viewBox and ended
   up with $100K labels at 22px on wide screens). */
.otrend-wrap { padding: 14px 18px 14px; }
.otrend-chart {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  height: 220px;            /* fixed pixel height — predictable rendering */
  position: relative;
}
/* Y-axis: dollar labels positioned at percent of plot area */
.otrend-y-axis {
  position: relative;
  height: 100%;
}
.otrend-y-tick {
  position: absolute;
  right: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateY(-50%);  /* center on its grid line */
}
.otrend-y-tick:first-child { transform: translateY(0); }
.otrend-y-tick:last-child  { transform: translateY(-100%); }

/* Plot area — holds grid + bars overlay. Position: relative so the
   absolutely-positioned grid lines and SVG can stack. */
.otrend-plot {
  position: relative;
  height: 100%;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.otrend-grid {
  position: absolute; inset: 0;
  pointer-events: none;
}
.otrend-grid-line {
  position: absolute; left: 0; right: 0;
  height: 0;
  border-top: 1px dashed var(--border-light);
}
.otrend-grid-line:last-child { display: none; }  /* baseline already drawn */

.otrend-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}

/* Value labels positioned just above each bar. Rendered in HTML so the
   font size stays a real CSS pixel value at any container width. */
.otrend-bar-labels {
  position: absolute; inset: 0;
  pointer-events: none;
}
.otrend-bar-label {
  position: absolute;
  transform: translate(-50%, -100%);
  /* small lift off the bar top so the label visually breathes */
  margin-bottom: 4px;
  padding: 1px 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: rgba(255,255,255,.85);
  border-radius: 3px;
  line-height: 1.3;
}
.otrend-bar {
  fill: var(--brand);
  transition: fill .12s ease;
}
.otrend-bar:hover { fill: #1470be; cursor: default; }
.otrend-prev {
  fill: none;
  /* `vector-effect: non-scaling-stroke` (set on the path) makes BOTH
     stroke-width AND stroke-dasharray use screen-pixel units. So
     `5 4` here means real 5px dashes with 4px gaps — clearly visible
     as dashed against the bars and won't merge into a solid line at
     any width.
     Color: slate-500 — visible on white but visually subordinate to
     the navy bars (current year is the focus, prior year is reference). */
  stroke: #64748b;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: butt; stroke-linejoin: round;
}

/* X-axis: spacer (matches Y-axis column) + evenly-distributed date ticks
   that sit directly under bar centers. Flex with `flex: 1` per tick gives
   each one 1/N of the plot width, with the label centered — that exactly
   aligns with bars whose centers are at (i + 0.5) × slot in the SVG. */
.otrend-x-axis {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  margin-top: 8px;
}
.otrend-x-spacer { /* empty cell under Y-axis */ }
.otrend-x-ticks {
  display: flex;
}
.otrend-x-tick {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.otrend-legend {
  display: flex; justify-content: flex-end; gap: 18px;
  margin-top: 12px;
  font-size: 11.5px; color: var(--text-muted);
}
.otrend-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.otrend-legend-bar {
  width: 12px; height: 10px; border-radius: 2px;
  background: var(--brand);
  display: inline-block;
}
.otrend-legend-line {
  width: 18px; height: 0;
  border-top: 2px dashed #64748b;  /* match new line color/weight */
  display: inline-block;
}

/* Top locations table */
.otop-table {
  display: flex; flex-direction: column;
}
.otop-row {
  display: grid;
  grid-template-columns: 28px 90px 1fr 100px 80px 90px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  font-size: 13px;
  border-top: 1px solid var(--border-light);
}
.otop-row:first-child { border-top: none; }
.otop-row.otop-head {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  padding-top: 8px; padding-bottom: 8px;
  background: var(--n-50, #f8fafc);
}
.otop-rank {
  font-size: 12px; font-weight: 800; color: var(--text-muted);
  text-align: center;
}
.otop-loc { font-weight: 700; color: var(--text); }
.otop-bar {
  height: 8px;
  background: var(--n-100, #f1f5f9);
  border-radius: 4px;
  overflow: hidden;
}
.otop-bar-fill {
  display: block; height: 100%;
  /* Stay inside the brand navy family — the prior gradient drifted
     into bright cyan and broke the calm corporate palette. */
  background: linear-gradient(90deg, var(--brand-hover) 0%, var(--brand) 60%, var(--primary-light) 100%);
  border-radius: 4px;
}
.otop-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  font-size: 12.5px;
}
.otop-num-money { color: var(--text); font-weight: 700; }

@media (max-width: 700px) {
  .otop-row { grid-template-columns: 28px 1fr auto; }
  .otop-row .otop-bar, .otop-row .otop-num:not(.otop-num-money) { display: none; }
  .osec-meta { display: none; }
}

/* Skeleton placeholder while owner summary loads.
   Shown for the first paint, then swapped for stale-cache content
   (instant on return visits) or fresh data when network resolves. */
.owner-skeleton { animation: ownerFade .25s ease-out; }
.owner-skeleton-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.owner-skeleton-tile {
  height: 104px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative; overflow: hidden;
}
.owner-skeleton-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.owner-skeleton-card {
  height: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative; overflow: hidden;
}
/* Subtle shimmer — keeps the page feeling alive */
.owner-skeleton-tile::after,
.owner-skeleton-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(15,23,42,.04) 50%,
    transparent 100%);
  animation: ownerShimmer 1.4s ease-in-out infinite;
}
@keyframes ownerShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes ownerFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 1100px) { .owner-skeleton-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .owner-skeleton-grid  { grid-template-columns: 1fr; } }
@media (max-width: 600px)  { .owner-skeleton-strip { grid-template-columns: 1fr; } }

/* Empty / unavailable states */
.owner-summary-empty {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.owner-empty-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--brand-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.owner-empty-icon svg.lucide { width: 18px; height: 18px; }
.owner-empty-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.owner-empty-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.owner-empty-mini  { padding: 14px 18px; font-size: 12.5px; color: var(--text-muted); }

/* ── Dashboard page header — same flat treatment as category-hero / home-hero */
.dashboard-title-row {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
}
.dash-title-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border: 1px solid transparent !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
}
.dash-title-badge svg.lucide { width: 13px; height: 13px; color: var(--brand); }
.data-freshness {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}
.data-freshness-dot { background: var(--ok) !important; }

/* Fleet Availability table — styling moved to v2 block below; nothing to override here. */

/* Fleet refresh bar (bottom) */
.fleet-refresh-bar {
  font-size: 12px !important;
  padding: 10px 14px !important;
}

/* Inline icons in buttons */
.btn svg.lucide { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.btn-sm svg.lucide { width: 13px; height: 13px; }

/* ── Per-location maintenance cards v3 — strict, dense, calm ── */
.fh-cards-v2-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 16px !important;
}
.fh-card-v2 {
  border-radius: var(--radius) !important;
  padding: 16px 18px !important;
  box-shadow: var(--sh-xs) !important;
  border: 1px solid var(--border) !important;
}
.fh-card-v2:hover {
  transform: none !important;
  box-shadow: var(--sh-sm) !important;
}
.fh-card-v2::before { display: none !important; }

/* Header — small location label + small % */
.fh-card-v2-header { margin-bottom: 12px !important; }
.fh-card-v2-loc {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.1px !important;
  gap: 8px !important;
}
.fh-card-v2-loc::before {
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
}
.fh-card-v2-pct {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
}

/* Tier colours — same triple used elsewhere on the page */
.fh-pct-good { color: var(--ok)   !important; }
.fh-pct-warn { color: var(--warn) !important; }
.fh-pct-bad  { color: var(--err)  !important; }

/* Stacked bar — slim, flat */
.fh-card-bar {
  height: 6px !important;
  border-radius: 999px !important;
  margin-bottom: 6px !important;
  box-shadow: none !important;
  background: var(--n-100) !important;
}
.fh-card-bar-avail  { background: var(--ok)   !important; }
.fh-card-bar-main   { background: var(--warn) !important; }
.fh-card-bar-nonact { background: var(--err)  !important; }
.fh-card-bar-legend {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-bottom: 12px !important;
  letter-spacing: .02em !important;
}
.fh-card-bar-legend span { gap: 4px !important; }
.fh-dot { width: 6px !important; height: 6px !important; }
.fh-dot-avail  { background: var(--ok)   !important; }
.fh-dot-main   { background: var(--warn) !important; }
.fh-dot-nonact { background: var(--err)  !important; }

/* KPI row — compact */
.fh-card-kpi-row {
  padding: 10px 0 !important;
  margin-bottom: 12px !important;
  gap: 6px !important;
  border-color: var(--border-light) !important;
}
.fh-card-kpi-val {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  font-variant-numeric: tabular-nums;
}
.fh-card-kpi-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--text-muted) !important;
  margin-top: 3px !important;
}

/* Sparkline — flat surface, no fill panel */
.fh-card-spark-wrap {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}
.fh-card-spark-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--text-muted) !important;
  margin-bottom: 4px !important;
}
.fh-spark { height: 36px !important; }

/* Divider + section title */
.fh-card-v2-divider {
  background: var(--border) !important;
  margin: 0 -18px 12px -18px !important;
  height: 1px !important;
}
.fh-card-v2-section-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: var(--text-muted) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

/* Inner table — compact + tabular numbers */
.fh-card-v2 .fh-rep-table {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px !important;
}
.fh-card-v2 .fh-rep-table thead th {
  background: var(--n-50) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--border-light) !important;
}
.fh-card-v2 .fh-rep-table tbody td {
  padding: 6px 10px !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  font-variant-numeric: tabular-nums;
}
.fh-card-v2 .fh-rep-table tbody td.fh-rep-sub { font-weight: 500 !important; }
.fh-card-v2 .fh-rep-table tbody tr.fh-rep-zero td { color: var(--text-light) !important; }
.fh-card-v2 .fh-rep-table tbody tr.fh-rep-total td {
  background: var(--n-50) !important;
  color: var(--text) !important;
  border-top: 2px solid var(--brand) !important;
  font-weight: 700 !important;
  padding: 7px 10px !important;
}
/* Status colour for over-EDT counts inside card tables */
.fh-card-v2 .fh-over-high { color: var(--err)  !important; }
.fh-card-v2 .fh-over-mid  { color: var(--warn) !important; }
/* Group heading rows (Heavy / Sale / Assigned) — uppercase muted */
.fh-card-v2 .fh-rep-table tbody tr.fh-rep-group-head td {
  background: var(--n-50) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 7px 10px !important;
  border-top: 1px solid var(--border-light) !important;
}

/* ── Unified page header — used by all pages (category, dashboards, profile, etc.)
      Format: small breadcrumb + label · large title · short subtitle · optional right slot.
      No gradient hero, no decorative orbs, no large stat badges. */
.category-hero {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 4px 0 18px !important;
  margin-bottom: 24px !important;
  align-items: flex-end !important;
}
.category-hero::before, .category-hero::after { display: none !important; }
.category-hero-left { z-index: auto !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.category-hero-icon {
  font-size: 0 !important;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.category-hero-icon svg.lucide { width: 18px; height: 18px; color: #fff; }
.category-hero-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.4px !important;
  line-height: 1.15 !important;
}
.category-hero-sub {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
  flex-basis: 100%;
}
.category-hero-right { z-index: auto !important; }
.category-hero-stat {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: right !important;
  display: flex; align-items: baseline; gap: 6px;
  backdrop-filter: none !important;
}
.category-hero-stat-val {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.4px !important;
}
.category-hero-stat-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 0 !important;
}

/* Re-style title row layouts that are not yet using .category-hero */
.page-header-bar {
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.page-title {
  font-size: 22px !important;
  font-weight: 700 !important;
}
.page-subtitle {
  font-size: 13px !important;
  color: var(--text-muted) !important;
}
.section-header {
  margin-bottom: 14px !important;
}
.section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--text-muted) !important;
}

/* ============================================================
   MULTI-SELECT FILTER WIDGET
   Used for Location/Class/Status filters across dashboards.
   ============================================================ */
.ms-wrap { position: relative; display: block; min-width: 160px; }
.ms-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; cursor: pointer; text-align: left; width: 100%;
}
.ms-trigger:hover { border-color: var(--primary); }
.ms-trigger-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: 13px;
}
.ms-trigger svg.lucide {
  width: 14px; height: 14px; color: var(--text-light); flex-shrink: 0;
  transition: transform 0.15s;
}
.ms-trigger[aria-expanded="true"] svg.lucide { transform: rotate(180deg); }
.ms-popover {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: 280px;
  background: white; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 100; max-height: 320px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ms-popover[hidden] { display: none; }
.ms-popover-actions {
  display: flex; gap: 4px;
  padding: 8px; border-bottom: 1px solid var(--border-light);
}
.ms-action-btn {
  flex: 1; padding: 5px 8px; font-size: 11px; font-weight: 600;
  background: white; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; color: var(--text-muted);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.ms-action-btn:hover {
  background: var(--primary); color: white; border-color: var(--primary);
}
.ms-options { overflow-y: auto; flex: 1; padding: 4px 0; }
.ms-option {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
  user-select: none;
}
.ms-option:hover { background: var(--bg-2); }
.ms-option input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--primary);
  cursor: pointer; margin: 0;
}
.ms-option span { flex: 1; color: var(--text); }
.ms-empty {
  padding: 16px; text-align: center;
  font-size: 12px; color: var(--text-light);
}

/* ── Repair Costs dashboard ───────────────────────────────────── */
.rc-page .rc-table th.rc-num-th { text-align: right; }
.rc-page .rc-table td.rc-num     { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-page .rc-table td.rc-cat     { text-align: left; font-weight: 500; white-space: nowrap; }
.rc-page .rc-table td.rc-cpm     { font-weight: 600; color: #0f3a64; }
.rc-page .rc-empty { text-align: center; padding: 18px; color: var(--text-light); font-size: 12px; }
.rc-page .rc-legend-bar  {
  width: 14px; height: 10px; border-radius: 2px;
  background: #0f3a64; display: inline-block;
}
.rc-page .rc-legend-line {
  width: 14px; height: 0; border-top: 2px dashed #d97706;
  display: inline-block; vertical-align: middle;
}
.rc-page .rc-legend-sell {
  width: 14px; height: 0; border-top: 2px dashed #16a34a;
  display: inline-block; vertical-align: middle;
}
.rc-page .rc-legend-sparse {
  width: 14px; height: 10px; border-radius: 2px;
  display: inline-block;
  background-image: repeating-linear-gradient(
    45deg, #94a3b8, #94a3b8 3px, #cbd5e1 3px, #cbd5e1 6px
  );
}
.rc-page .rc-inflection-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: #92400e; background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.30);
  padding: 2px 8px; border-radius: 999px;
  margin-left: 10px;
  cursor: help;
}

/* Quick-filter group bar (Maintenance & Repairs / Body Work / Other) */
.rc-page .rc-group-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
}
.rc-page .rc-group-bar-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-right: 4px;
}
.rc-page .rc-group-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 500;
  color: var(--text);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: all .12s ease;
}
.rc-page .rc-group-btn:hover {
  border-color: #0f3a64;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.rc-page .rc-group-btn-active {
  color: #fff;
  background: #0f3a64;
  border-color: #0f3a64;
}
.rc-page .rc-group-btn-active:hover {
  background: #0c2f55;
}
.rc-page .rc-group-btn-count {
  font-size: 11px; font-weight: 700;
  padding: 1px 6px;
  background: rgba(15, 58, 100, 0.10);
  color: #0f3a64;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.rc-page .rc-group-btn-active .rc-group-btn-count {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.rc-page .rc-group-info {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.rc-page .rc-group-info:hover {
  color: var(--text);
  border-color: var(--border);
  background: #f8fafc;
}
.rc-page .rc-group-info svg.lucide { width: 14px; height: 14px; }

/* Expandable legend with full category lists — hidden by default, opens
   on click of the "What's in each?" button. The explicit [hidden] rule
   overrides the .rc-group-legend display: grid (HTML's hidden attribute
   alone doesn't beat an explicit display value). */
.rc-page .rc-group-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: -8px 0 14px;
}
.rc-page .rc-group-legend[hidden] { display: none; }
@media (max-width: 900px) {
  .rc-page .rc-group-legend { grid-template-columns: 1fr; }
}
.rc-page .rc-legend-col-title {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.rc-page .rc-legend-col-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
.rc-page .rc-legend-col-list {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.rc-page .rc-legend-chip {
  font-size: 11px; font-weight: 500;
  padding: 3px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: var(--text);
  border-radius: 4px;
  white-space: nowrap;
}

/* "Sold N" pill in the per-model table */
.rc-page .rc-sold-pill {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px;
  background: rgba(15, 58, 100, 0.08);
  color: #0f3a64;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.rc-page .rc-sold-empty { color: var(--text-light); }

/* Methodology card */
.rc-page .rc-method-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 10px;
  cursor: pointer;
}
.rc-page .rc-method-btn:hover {
  color: var(--text);
  background: #f8fafc;
  border-color: #cbd5e1;
}
.rc-page .rc-method-btn svg.lucide { width: 13px; height: 13px; }
.rc-page .rc-methodology {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #0f3a64;
  border-radius: 10px;
  padding: 16px 18px;
  margin: -8px 0 14px;
}
.rc-page .rc-methodology[hidden] { display: none; }
.rc-page .rc-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
@media (max-width: 900px) {
  .rc-page .rc-method-grid { grid-template-columns: 1fr; }
}
.rc-page .rc-method-title {
  font-size: 12.5px; font-weight: 700;
  color: #0f3a64;
  margin-bottom: 6px;
}
.rc-page .rc-method-body {
  font-size: 12.5px; line-height: 1.5;
  color: var(--text);
}
.rc-page .rc-method-body code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Clickable unit number — opens the Unit Profile dashboard */
.unit-link {
  color: #0f3a64;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .12s ease, color .12s ease;
}
.unit-link:hover {
  color: var(--primary);
  border-bottom-color: currentColor;
}

/* ── Unit Profile dashboard ─────────────────────────────────────── */
.up-page .up-search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
}
.up-page .up-search-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.up-page .up-search-input {
  flex: 0 1 280px;
  font-size: 14px; font-family: ui-monospace, monospace;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.up-page .up-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 130, 212, 0.10);
}

.up-page .up-empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.up-page .up-empty-icon {
  font-size: 32px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.up-page .up-empty-icon svg.lucide { width: 32px; height: 32px; opacity: 0.4; }
.up-page .up-empty-title {
  font-size: 16px; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.up-page .up-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* Header card */
.up-page .up-header {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #0f3a64;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.up-page .up-header-title {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.up-page .up-unit-num {
  font-size: 22px; font-weight: 800;
  font-family: ui-monospace, monospace;
  color: #0f3a64;
}
.up-page .up-vehicle {
  font-size: 18px; font-weight: 600;
  color: var(--text);
}
.up-page .up-class-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: var(--text-muted);
}
.up-page .up-header-meta {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text);
}
.up-page .up-header-meta-sub {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.up-page .up-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
}
.up-page .up-meta-item svg.lucide { width: 14px; height: 14px; }

.up-page .up-status {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.up-page .up-status-avail { background: #dcfce7; color: #166534; }
.up-page .up-status-rent  { background: #dbeafe; color: #1e3a8a; }
.up-page .up-status-maint { background: #fef3c7; color: #92400e; }
.up-page .up-status-na    { background: #fee2e2; color: #991b1b; }
.up-page .up-status-sold  { background: #e0e7ff; color: #3730a3; }
.up-page .up-status-other { background: #f1f5f9; color: var(--text-muted); }

.up-page .up-tsd-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12.5px;
  white-space: pre-wrap;
  color: var(--text);
}
.up-page .up-tsd-note-display {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}

.up-page .up-corp-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 5px;
  background: #fef3c7;
  border-radius: 3px;
  color: #92400e;
  vertical-align: 1px;
}
.up-page .up-claim-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 6px;
  background: #fee2e2;
  border-radius: 3px;
  color: #991b1b;
  vertical-align: 1px;
  cursor: help;
}

.up-page .up-legend-rev {
  width: 14px; height: 10px; border-radius: 2px;
  background: #16a34a; display: inline-block;
}
.up-page .up-legend-rep {
  width: 14px; height: 10px; border-radius: 2px;
  background: #d97706; display: inline-block;
}

/* ── Generic methodology card (shared across all internal dashboards) ──
   The same look-and-feel as the repair-costs card, but unscoped so it can
   live inside NPS, Fleet Status, Utilization, etc. without the .rc-page
   wrapper. Toggled via [data-method-toggle="<id>"] — handler is wired up
   once at app-init time and works for every dashboard. */
/* The per-dashboard `.methodology-row` is now hidden — the "How it works"
   trigger lives in the page title-row alongside Excel/PDF/Edit Dashboard,
   so it sits OUTSIDE the dashboard frame and never claims its own line.
   The card itself is still rendered inline (id matches the title-row btn). */
.methodology-row { display: none !important; }
/* `.methodology-btn` is now just a behavior marker — the visual styling
   comes from the shared `.btn .btn-outline .btn-sm` system so the
   toolbar buttons (Excel, PDF, Edit, Notify, How it works) read as one
   uniform row. The icon color hint below keeps the info-glyph slightly
   muted to match the "passive" affordance of the trigger. */
.methodology-btn svg.lucide { color: var(--text-muted); }
.methodology-btn:hover svg.lucide { color: var(--text); }
/* When the methodology card is open, hide the trigger button so it
   doesn't compete with the in-card × close. */
.dashboard-title-row .methodology-btn[aria-expanded="true"] { display: none; }
.methodology-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #0f3a64;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 14px;
}
.methodology-card[hidden] { display: none; }
.methodology-close {
  position: absolute;
  top: 8px; right: 10px;
  width: 26px; height: 26px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  z-index: 1;
}
.methodology-close:hover {
  background: #f1f5f9; color: var(--text);
  border-color: #e2e8f0;
}
.methodology-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
@media (max-width: 900px) {
  .methodology-grid { grid-template-columns: 1fr; }
}
.methodology-title {
  font-size: 12.5px; font-weight: 700;
  color: #0f3a64;
  margin-bottom: 6px;
}
.methodology-body {
  font-size: 12.5px; line-height: 1.5;
  color: var(--text);
}
.methodology-body strong { color: #0f3a64; }
.methodology-body em     { font-style: normal; color: var(--text-muted); }

/* Sortable column headers — clickable, with up/down arrow when active */
.rc-page .rc-sort-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.rc-page .rc-sort-th:hover { background: #f0f5ff; color: var(--primary); }
.rc-page .rc-sort-active   { color: #0f3a64; font-weight: 700; }
.rc-page .rc-sort-arrow {
  display: inline-block;
  font-size: 11px;
  color: #0f3a64;
  margin-left: 2px;
  min-width: 8px;
}

/* Per-table tools: search input + (optionally) class multi-select.
   The toolbar items must line up vertically — flex with align-items:center
   takes care of it, and we strip the multi-select's stacked label so the
   trigger button sits flat next to the search input. */
.rc-page .rc-table-tools {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.rc-page .rc-table-search {
  font-size: 12.5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  width: 180px;
  height: 30px;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.rc-page .rc-table-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 130, 212, 0.10);
}
/* Inline the multi-select inside the table toolbar: drop the stacked
   "CLASS" label, make the trigger match the search-input height. */
.rc-page .rc-table-tools .nps-filter-group {
  flex-direction: row;
  gap: 0;
  margin: 0;
}
.rc-page .rc-table-tools .nps-filter-label { display: none; }
.rc-page .rc-table-tools .ms-wrap { font-size: 12.5px; }
.rc-page .rc-table-tools .ms-trigger {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE POLISH — comprehensive pass
   Targets two breakpoints:
     • ≤ 768px — tablet portrait + phones (sidebar collapses to drawer)
     • ≤ 480px — phones in portrait
   Goals: every page legible without horizontal scroll, all touch
   targets ≥ 44px (Apple HIG), forms don't trigger iOS zoom on focus.
   ════════════════════════════════════════════════════════════════ */

/* ── iOS zoom prevention ─────────────────────────────────────────
   iOS Safari zooms the viewport when an input with font-size < 16px
   gets focus. Bumping inputs to 16px on mobile keeps the layout
   stable. We only override on mobile to keep desktop tight. */
@media (max-width: 768px) {
  input.form-input,
  select.form-input,
  textarea.form-input,
  .nps-filter-input,
  .ms-trigger,
  .home-notes-input {
    font-size: 16px !important;
  }
}

/* ── Touch-friendly tap targets ──────────────────────────────────
   Apple HIG = 44pt; we use 44px. Buttons get a min-height bump on
   mobile only — desktop tightness preserved. */
@media (max-width: 768px) {
  .btn { min-height: 40px; padding: 10px 18px; }
  .btn-sm { min-height: 36px; padding: 8px 14px; }
  .btn-lg { min-height: 48px; padding: 14px 26px; }
  .nav-item { min-height: 44px; }
  .modal-close, .pw-toggle,
  .sb-search-clear, .sb-panel-close, .hn-delete-btn {
    min-width: 36px; min-height: 36px;
  }
  /* Anchor-style links inside tap-friendly contexts */
  a, .breadcrumb-link { min-height: 24px; display: inline-flex; align-items: center; }
}

/* ── Sidebar drawer improvements ─────────────────────────────────
   Slightly wider drawer on phones (current 256px feels narrow with
   nav text) and a smoother slide. */
@media (max-width: 768px) {
  .sidebar { width: min(85vw, 300px); transform: translateX(-100%); transition: transform .26s cubic-bezier(.32,.72,.4,1); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
  .sidebar-overlay { transition: opacity .26s ease; opacity: 0; pointer-events: none; }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
  /* Sidebar search — keep full width inside drawer */
  .sidebar-search { margin: 12px 12px 4px; }
  /* Search popover on mobile fills the drawer */
  .sb-search-popover {
    left: 0 !important; right: 0 !important; top: auto !important;
    width: auto !important; max-width: 100% !important; margin: 4px 12px 0 !important;
    max-height: 50vh !important;
  }
}

/* ── Mobile header polish ────────────────────────────────────────
   Existing component, just adding shadow on scroll and bigger tap
   zone for the menu button. */
@media (max-width: 768px) {
  .mobile-header {
    height: 56px;
    padding: 0 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .btn-menu { width: 40px; height: 40px; font-size: 22px; }
}

/* ── Page container & content padding ────────────────────────── */
@media (max-width: 768px) {
  .page-container { padding: 70px 14px 32px; }
}
@media (max-width: 480px) {
  .page-container { padding: 64px 12px 28px; }
}

/* ════════════════════════════════════════════════════════════════
   HOME PAGE — mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .home-hero { padding: 18px 16px !important; margin-bottom: 18px !important; }
  .home-hero-inner { gap: 12px; }
  .home-hero-actions { align-self: stretch; margin-top: 8px; }
  .home-hero-actions .methodology-btn { width: 100%; justify-content: center; }
  .home-greeting-eyebrow { margin-bottom: 6px; }
  .home-greeting { font-size: 26px !important; gap: 8px; }
  .home-greeting-icon { width: 22px; height: 22px; }
  .home-date {
    font-size: 12.5px !important;
    gap: 6px;
    margin-top: 10px !important;
  }
  .home-date-pill { font-size: 11px; padding: 2px 8px; }
}
@media (max-width: 480px) {
  .home-greeting { font-size: 22px !important; }
  .home-greeting-eyebrow { font-size: 10.5px; }
  /* Hide year from date string would be nice but it's a single string —
     instead make the row wrap gracefully. */
  .home-date { flex-wrap: wrap; }
}

/* KPI strip — already stacks on mobile, just polish padding */
@media (max-width: 600px) {
  .owner-kpi-strip { gap: 10px; margin-bottom: 14px; }
  .owner-kpi { padding: 14px 16px; }
  .okpi-val { font-size: 26px !important; }
  .okpi-secondary { padding-top: 5px; }
}

/* Owner grid — already stacks at 900px. Tighten the cards. */
@media (max-width: 768px) {
  .owner-card-hd { padding: 12px 14px 8px; }
  .owner-card-title { font-size: 13.5px; }
  .owner-card-sub { font-size: 11px; }
  .orev-row, .opulse-row { padding: 9px 14px; font-size: 12.5px; }
  .opulse-row { grid-template-columns: 12px 1fr auto 50px; gap: 10px; }
  .opulse-row.opulse-total { grid-template-columns: 1fr auto 50px; }
}

/* Attention card */
@media (max-width: 600px) {
  .oa-hd { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
  .oa-title { font-size: 13px; }
  .oa-tally-pill { font-size: 9.5px; padding: 2px 7px; }
  .oa-item { padding: 11px 14px 11px 11px; gap: 10px; }
  .oa-item-title { font-size: 12.5px; }
  .oa-item-sub { font-size: 11px; }
  .oa-icon { width: 28px; height: 28px; }
  .oa-icon svg.lucide { width: 14px; height: 14px; }
}

/* Daily revenue chart — narrower padding, smaller axes */
@media (max-width: 700px) {
  .otrend-wrap { padding: 12px 12px 14px; }
  .otrend-chart { grid-template-columns: 44px 1fr; gap: 6px; height: 200px; }
  .otrend-y-tick { font-size: 10px; }
  .otrend-x-axis { grid-template-columns: 44px 1fr; gap: 6px; }
  .otrend-x-tick { font-size: 10px; }
  .otrend-bar-label { font-size: 9.5px; padding: 1px 3px; }
  .otrend-legend { gap: 12px; font-size: 10.5px; }
}
@media (max-width: 480px) {
  /* Show every 2nd date label to avoid overlap on narrow screens */
  .otrend-x-tick:nth-child(even) { visibility: hidden; }
  .otrend-bar-label { display: none; }
  .otrend-chart { height: 180px; }
}

/* Top locations table — already collapses bar/extra cols on mobile.
   Polish the remaining 3-column layout. */
@media (max-width: 700px) {
  .otop-row { padding: 9px 14px; gap: 10px; font-size: 12.5px; }
  .otop-row.otop-head { padding: 8px 14px; }
  .otop-loc { font-size: 12.5px; }
  .otop-rank { font-size: 11px; }
}

/* Section toolbars (Top locations / trend headers) */
@media (max-width: 700px) {
  .osec-hd { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px 8px; }
  .osec-title { font-size: 13.5px; }
  .osec-sub { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD CONTENT — generic mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Title row stacks vertically */
  .dashboard-title-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dashboard-title-row > div:last-child {
    /* The action button cluster */
    width: 100%; flex-wrap: wrap; gap: 8px;
  }
  .dashboard-title-row .btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .dashboard-title-row .btn-primary { flex: 1 1 100%; }
  .page-title { font-size: 22px !important; }
  .page-subtitle { font-size: 12.5px !important; }

  /* Filter bars stack on mobile */
  .nps-filter-bar, .util-presets, .fsd-table-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .nps-filter-group { width: 100%; }
  .nps-filter-input, .ms-trigger { width: 100%; }
}

/* ── Dashboard tables → card layout below 600px ──────────────────
   Tables with many columns become unreadable on phones. Convert to
   a "card per row" layout where columns stack vertically with their
   header label on the left. Apply via `data-mobile="cards"` attr. */
@media (max-width: 600px) {
  table[data-mobile="cards"],
  table[data-mobile="cards"] thead,
  table[data-mobile="cards"] tbody,
  table[data-mobile="cards"] tr,
  table[data-mobile="cards"] td,
  table[data-mobile="cards"] th { display: block; width: 100%; }
  table[data-mobile="cards"] thead { position: absolute; left: -9999px; }
  table[data-mobile="cards"] tr {
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    background: var(--bg-card);
  }
  table[data-mobile="cards"] td {
    padding: 4px 14px;
    text-align: right;
    border: none;
    position: relative;
    padding-left: 45%;
    min-height: 22px;
  }
  table[data-mobile="cards"] td::before {
    content: attr(data-label);
    position: absolute;
    left: 14px;
    top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    text-align: left;
    width: 40%;
  }
}

/* ════════════════════════════════════════════════════════════════
   MODALS — mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal {
    margin: 0;
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 14px 14px 0 0;
    /* Slide from bottom on phones — feels more native */
    align-self: flex-end;
  }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-header { padding: 16px 18px; position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
  .modal-title { font-size: 16px; }
  .modal-close { width: 36px; height: 36px; }
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 14px 18px;
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
  }
  .modal-footer .btn { width: 100%; }
}

/* Methodology card — cap height + scroll on phones */
@media (max-width: 600px) {
  .methodology-card { padding: 14px 14px; }
  .methodology-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .methodology-title { font-size: 12px; }
  .methodology-body { font-size: 12px; }
}

/* Slide-out panels (announcements) — already full-screen on mobile;
   tighten internal padding for small screens. */
@media (max-width: 480px) {
  .sb-panel-hd { padding: 14px 16px; }
  .sb-panel-title { font-size: 14px; }
  .sb-panel-body { padding: 6px 10px; }
  .sb-panel-compose { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  .sb-panel-compose .home-notes-input { flex: 1 1 100%; }
  .sb-panel-compose .btn { flex: 1; }
}

/* ════════════════════════════════════════════════════════════════
   AUTH SCREENS — mobile (login / register)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .auth-screen.auth-register, .auth-screen { flex-direction: column; }
  .auth-split-left {
    padding: 28px 22px 22px;
    min-height: auto;
  }
  .auth-brand-headline { font-size: 22px; line-height: 1.2; }
  .auth-brand-sub { font-size: 13px; }
  .auth-brand-features { display: none; }
  .auth-brand-bottom { display: none; }
  .auth-split-right { padding: 24px 18px 32px; }
  .auth-form-box { width: 100%; }
  .auth-title { font-size: 22px; }
  .auth-subtitle { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   TABLES & TOOLBARS — universal mobile cleanup
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Smaller font in dense tables */
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 10px; }

  /* Table-wrap should scroll horizontally rather than wrap weirdly */
  .table-wrap, .util-table-wrap, .fsd-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* ════════════════════════════════════════════════════════════════
   TOAST — mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    font-size: 13px;
  }
}

/* ════════════════════════════════════════════════════════════════
   PROFILE PAGE — mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .profile-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .profile-avatar-card { padding: 18px; }
  .profile-avatar-circle { width: 90px !important; height: 90px !important; }
  .profile-section { padding: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN — mobile
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .admin-header-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .admin-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .admin-header-actions .btn { flex: 1; }
  .admin-tabs { gap: 4px; }
  .admin-tab { padding: 8px 12px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   FOLDABLE DEVICES
   Targets two key form factors:
     • Cover screens — Galaxy Z Flip cover (~360×500), narrow phones
       (≤ 360px). Tighten everything.
     • Inner screens — Galaxy Z Fold inner (~768×1812 portrait,
       ~840×920 landscape-ish), small tablets. Use 2-col layouts
       where they read better than a single tall column.
   We use safe-area-inset-* env vars where available so content
   stays clear of the notch / status bar on edge-to-edge screens.
   ════════════════════════════════════════════════════════════════ */

/* ── Very narrow (Z Flip cover, very small phones) ──────────────
   Anything below 360px gets the tightest layout — KPI numbers
   shrink, padding tightens, decorative elements hide. */
@media (max-width: 360px) {
  .page-container { padding: 62px 8px 24px; }
  .home-hero { padding: 14px 12px !important; }
  .home-greeting { font-size: 20px !important; gap: 6px; }
  .home-greeting-icon { width: 18px; height: 18px; }
  .home-greeting-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .home-date { font-size: 11.5px !important; gap: 4px; margin-top: 8px !important; }
  .home-date-icon { display: none; }     /* save horizontal space */
  .home-date-pill { font-size: 10.5px; padding: 2px 7px; }

  .owner-kpi { padding: 12px 14px; }
  .okpi-label { font-size: 10.5px; letter-spacing: .03em; }
  .okpi-val { font-size: 22px !important; }
  .okpi-delta { font-size: 11px; }

  .otrend-chart { height: 160px; grid-template-columns: 36px 1fr; gap: 4px; }
  .otrend-x-axis { grid-template-columns: 36px 1fr; gap: 4px; }
  .otrend-y-tick, .otrend-x-tick { font-size: 9.5px; }

  .otop-row { padding: 8px 12px; gap: 8px; font-size: 12px; }
  .oa-item { padding: 10px 12px 10px 9px; gap: 8px; }
  .oa-icon { width: 26px; height: 26px; }

  .modal-header { padding: 14px 14px; }
  .modal-title { font-size: 15px; }

  /* Sidebar fills more of the screen at this size */
  .sidebar { width: 92vw; }
}

/* ── Z Fold inner / small tablet (700-840px) ────────────────────
   Inner screens are wider but still effectively portrait. Use 2
   columns for KPI + grid blocks where 1-col would look stretched. */
@media (min-width: 700px) and (max-width: 900px) {
  /* Home owner-grid stays 2-col instead of stacking */
  .owner-grid { grid-template-columns: 1fr 1fr !important; }
  /* KPI strip — 4 in a row would be cramped, 2×2 reads well */
  .owner-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  /* Top locations — show all columns */
  .otop-row { grid-template-columns: 28px 90px 1fr 100px 80px 90px !important; }
  .otop-row .otop-bar, .otop-row .otop-num { display: revert !important; }
  .osec-meta { display: flex !important; }
  .osec-hd { flex-direction: row !important; align-items: flex-start !important; }
  /* Filter rows — 2 fields per row instead of stacking each */
  .nps-filter-bar, .util-presets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    flex-direction: initial !important;
    align-items: stretch !important;
  }
  /* IS sections grid stays 2-col */
  .is-sections-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Foldable in landscape orientation ─────────────────────────
   When user unfolds a Z Flip / opens Z Fold landscape, treat as
   a small landscape tablet — push categories into 3-col grid. */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
  .owner-kpi-strip { grid-template-columns: repeat(4, 1fr) !important; }
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Safe-area for edge-to-edge screens (iPhone notch, foldables) ─
   Push content away from physical edges where the status bar /
   home indicator might sit. Only applies on real edge-to-edge
   contexts (PWA standalone or foldable with cutouts). */
@supports (padding: env(safe-area-inset-top)) {
  .mobile-header {
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-top:   env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
  .page-container {
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .sidebar { padding-top: env(safe-area-inset-top); }
  /* Bottom-sheet style modals respect home-indicator */
  @media (max-width: 600px) {
    .modal { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  }
}

/* ── Avoid the hinge crease on Z Fold inner screen ─────────────
   Experimental CSS for foldable viewport segments (Edge / Chrome
   on Galaxy devices). When a hinge splits the viewport, we add
   space around the crease so no content lands inside it. */
@media (horizontal-viewport-segments: 2) {
  .owner-grid,
  .owner-kpi-strip,
  .is-sections-grid {
    column-gap: env(viewport-segment-left 0 0) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE FILTER BOTTOM SHEET
   On phones, dashboard filter bars hide and a "Filters" trigger
   button appears in their place. Tapping the trigger slides the
   bar up from the bottom as a sheet.
   On desktop / tablet (≥ 769px) the trigger is hidden and the
   filter bar shows inline as before.
   ════════════════════════════════════════════════════════════════ */

/* Trigger pill — mobile only */
.mobile-filter-trigger {
  display: none;     /* hidden on desktop */
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  width: 100%;
  margin-bottom: 12px;
  box-shadow: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04));
  transition: background .12s ease, border-color .12s ease;
}
.mobile-filter-trigger:hover { background: var(--n-50, #f8fafc); border-color: var(--n-300, #cbd5e1); }
.mobile-filter-trigger svg.lucide { width: 16px; height: 16px; color: var(--brand); }
.mft-label { flex: 1; text-align: left; }

/* "Done" close button inside the sheet — desktop hidden */
.mobile-filter-done {
  display: none;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

@media (max-width: 768px) {
  .mobile-filter-trigger { display: inline-flex; }

  /* Hide bar by default — show as bottom sheet when class added */
  .mobile-filter-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 250;
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(15,23,42,.18);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.32,.72,.4,1);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px max(16px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    /* Drag handle bar at the top */
  }
  .mobile-filter-sheet::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--n-300, #cbd5e1);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .mobile-filter-sheet.mobile-filter-sheet-open {
    transform: translateY(0);
  }
  .mobile-filter-sheet .mobile-filter-done {
    display: block;
    margin-top: 14px;
    min-height: 48px;
  }

  /* Backdrop */
  .mobile-filter-backdrop {
    position: fixed; inset: 0;
    background: rgba(8,18,38,.42);
    z-index: 249;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .mobile-filter-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Body lock when a filter sheet is open — prevents background scroll */
  body.mobile-filter-active { overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD TABLES — comprehensive mobile pass
   Each dashboard table gets targeted polish at ≤ 600px so headers
   don't overlap, numbers stay aligned, and decorative bars don't
   squish. The card-style "data-mobile=cards" is reserved for very
   simple tables; reference tables (FSD, RC) keep horizontal scroll.
   ════════════════════════════════════════════════════════════════ */

/* ── Fleet Availability table (Maintenance History → Fleet Avail.) ──
   On phones the 5 columns ("Location", "Fleet", "In Main",
   "Non Active", "% Unavailable") cram together. Strategy:
   • Drop the % progress bar viz — keep just the number
   • Shorten/wrap headers cleanly via white-space: normal
   • Tighten cell padding + numbers
   • Hide the loc-name dot on the very narrow Z Flip screens */
@media (max-width: 600px) {
  .fh-av-card-head { padding: 12px 14px; flex-wrap: wrap; gap: 4px; }
  .fh-av-card-title { font-size: 13px; }
  .fh-av-card-period { font-size: 11px; }

  .fh-av-table { font-size: 11.5px; table-layout: fixed; width: 100%; }
  .fh-av-table thead th {
    font-size: 9.5px; padding: 8px 4px;
    white-space: normal; line-height: 1.15;
    word-break: keep-all;
  }
  .fh-av-table thead th.fh-av-loc      { width: 25%; padding-left: 10px; }
  .fh-av-table thead th.fh-av-num-th   { width: 14%; }
  .fh-av-table thead th.fh-av-pct-th   { width: 18%; }
  .fh-av-table tbody td { padding: 9px 4px; font-size: 12px; }
  .fh-av-table tbody td.fh-av-loc { padding-left: 10px; }

  /* Numbers — slightly smaller, tabular */
  .fh-av-cell-num { font-size: 12px; }

  /* Drop the visual bar viz on phones — leaves just the percent text.
     Frees ~80px of horizontal space and stops the bar+text overlap. */
  .fh-av-pct-cell { justify-content: flex-end; }
  .fh-av-pct-track { display: none !important; }
  .fh-av-pct-text { font-size: 12px; font-weight: 700; }
  .fh-av-pct-sub { display: none !important; }

  /* Location dot — smaller on tight screens */
  .fh-av-loc-dot { width: 6px; height: 6px; margin-right: 4px; }
  .fh-av-loc-name { font-size: 12px; }

  /* Total / All locations rows — emphasize via background, not bigger text */
  .fh-av-subtotal td, .fh-av-total td { font-size: 12.5px; padding: 11px 4px; }
}
@media (max-width: 360px) {
  /* Z Flip cover — hide the location dot entirely, free more space */
  .fh-av-loc-dot { display: none; }
  .fh-av-table thead th { font-size: 9px; }
  .fh-av-table tbody td { font-size: 11.5px; padding: 8px 3px; }
  .fh-av-table thead th.fh-av-loc, .fh-av-table tbody td.fh-av-loc { padding-left: 6px; }
}

/* ── Maintenance card detail rows (.fh-rep-table) ───────────────
   Sub-status rows ("Major Body Work", "Sale - Pending", etc.) under
   each location card. 5 columns: name, qty, over EDT, avg time, EDT.
   On phones, hide the EDT column (it's static reference data) and
   tighten everything. */
@media (max-width: 600px) {
  .fh-rep-table { font-size: 11.5px; }
  .fh-rep-table thead th { font-size: 9.5px; padding: 6px 4px; white-space: normal; line-height: 1.2; }
  .fh-rep-table tbody td { padding: 8px 4px; font-size: 12px; }
  .fh-rep-table .fh-rep-sub { font-size: 12px; padding-left: 10px; }
  /* Hide the static EDT column on narrow screens — it never changes */
  .fh-rep-table .fh-rep-edt { display: none; }
  .fh-rep-table thead th:last-child { display: none; }
  .fh-rep-table .fh-rep-group-head td { font-size: 10px; padding: 8px 10px; }
}

/* ── Utilization / Sales / IS tables (.util-table) ──────────────
   Cap min-width so they horizontal-scroll cleanly inside their wrap. */
@media (max-width: 768px) {
  .util-table { min-width: 480px; font-size: 12px; }
  .util-table th, .util-table td { padding: 8px 10px; }
  .util-table th { font-size: 10px; white-space: normal; line-height: 1.2; }
  /* Sticky numeric columns become non-sticky on mobile (less confusing) */
  .util-table .util-sticky-col { position: static !important; }

  /* Sticky FIRST COLUMN (label) on mobile so when user scrolls
     horizontally to see CURRENT / PRIOR YEAR / YOY numbers, the
     category name stays anchored at the left and doesn't get
     clipped (was: "Waiver)" / "le" / "ble" instead of full names). */
  .util-table.sales-table tbody td.sales-cat,
  .util-table.sales-table thead th.sales-cat {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 2;
    /* Soft shadow on the right edge of the sticky column — visual hint
       that the rest of the table scrolls behind it. */
    box-shadow: 1px 0 0 var(--border-light);
  }
  /* Total rows + zero-rows already have a tinted background — keep it
     visible on the sticky cell so it doesn't look like a glitch. */
  .util-table.sales-table tbody tr.sales-total-row td.sales-cat { background: var(--n-50); }
  .util-table.sales-table tbody tr.sales-group-row td.sales-cat { background: var(--n-50); }
  .util-table.sales-table thead th.sales-cat { background: var(--bg-card); }
}
@media (max-width: 600px) {
  .util-table { font-size: 11.5px; }
  .util-table th, .util-table td { padding: 7px 8px; }
  /* Slightly smaller sticky column — leaves more room for the numbers */
  .util-table.sales-table tbody td.sales-cat,
  .util-table.sales-table thead th.sales-cat {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Miles Driven mini-table — single column on mobile */
@media (max-width: 600px) {
  .miles-driven-table { font-size: 11.5px; }
  .miles-driven-table th, .miles-driven-table td { padding: 7px 6px; }
}

/* Maintenance matrix (.fh-matrix) — already centered, just tighten */
@media (max-width: 600px) {
  .fh-matrix { font-size: 11.5px; }
  .fh-matrix th, .fh-matrix td { padding: 7px 5px; }
  .fh-matrix th { font-size: 10px; line-height: 1.2; }
}

/* Maintenance episode drill-in table */
@media (max-width: 600px) {
  .fh-ep-table { font-size: 11.5px; }
  .fh-ep-table th, .fh-ep-table td { padding: 7px 6px; }
}

/* Anomaly tables (small popovers) */
@media (max-width: 600px) {
  .anomaly-card .anomaly-table { font-size: 11.5px; }
  .anomaly-card .anomaly-body {
    /* Full-width popover on phones — pin to viewport edges instead of
       absolutely-positioned next to the trigger. */
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 75vh;
    padding: 12px;
  }
}

/* ── Repair Costs tables (.rc-table) ───────────────────────────
   At-risk units + Top units tables. Many columns; horizontal scroll. */
@media (max-width: 768px) {
  .rc-table { min-width: 520px; }
}

/* ── Fleet Status table (.fsd-table) ───────────────────────────
   Reference table with many columns (unit#, status, sub, location,
   idle days, etc.). Always horizontal scroll on mobile. */
@media (max-width: 768px) {
  .fsd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fsd-table { min-width: 720px; font-size: 12px; }
  .fsd-table th, .fsd-table td { padding: 7px 8px; white-space: nowrap; }
  /* Filter dropdowns under headers — keep functional but compact */
  .fsd-dd-pop { min-width: 200px; }
}

/* ── NPS dashboard ─────────────────────────────────────────────
   Score / promoters / passives / detractors KPI cards stack on
   mobile via existing rules. The trend line chart needs a smaller
   height + axis labels. */
@media (max-width: 600px) {
  .nps-score-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .nps-score-card { padding: 14px 12px; }
  .nps-score-val { font-size: 28px !important; }
  .nps-score-lbl { font-size: 11px; }
  .nps-trend-svg { height: 220px !important; }
  .nps-trend-card, .nps-bylocation-card, .nps-recent-card { padding: 14px; }
  .nps-bylocation-row { padding: 8px 4px; font-size: 12px; }
  .nps-review-card { padding: 12px; }
  .nps-review-body { font-size: 12.5px; }
}
@media (max-width: 360px) {
  .nps-score-grid { grid-template-columns: 1fr !important; }
}

/* ── Section toolbars ──────────────────────────────────────────
   The "X locations · Y rentals" header above each major table
   should wrap nicely on phones. */
@media (max-width: 600px) {
  .fsd-table-toolbar, .util-table-toolbar, .rc-table-tools {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .fsd-toolbar-meta, .util-toolbar-meta { font-size: 11.5px; }
}

/* ── Methodology card (How it works popup) ─────────────────────
   On phones the 2-col grid stacks (already done). Tighten title/
   close button + scrollable body on very long methodologies. */
@media (max-width: 600px) {
  .methodology-card {
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .methodology-close { width: 30px; height: 30px; top: 6px; right: 6px; }
  .methodology-grid { gap: 14px; }
  .methodology-title { font-size: 12.5px; margin-bottom: 4px; }
  .methodology-body { font-size: 12.5px; line-height: 1.5; }
}

/* ── Anomaly compact pill ─────────────────────────────────────
   The collapsed anomaly trigger ("⚠ 12 EWRCON anomalies") should
   not overflow on narrow screens. */
@media (max-width: 600px) {
  .anomaly-card.anomaly-collapsed { width: auto !important; max-width: 100% !important; }
  .anomaly-header { padding: 10px 12px; }
  .anomaly-eyebrow { font-size: 10px; }
  .anomaly-title { font-size: 12.5px; }
  .anomaly-chevron { width: 14px; height: 14px; }
}

/* ── KPI / metric cards in dashboards ──────────────────────────
   Generic styling for "$1.2M / +15% YoY" stat blocks across NPS,
   Sales, IS, Repair Costs. */
@media (max-width: 600px) {
  .nps-summary-grid, .sales-summary-grid, .is-summary-grid, .rc-summary-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .nps-summary-card, .sales-summary-card, .is-summary-card, .rc-summary-card {
    padding: 12px 14px;
  }
  .nps-summary-val, .sales-summary-val, .is-summary-val, .rc-summary-val {
    font-size: 22px !important;
  }
}
@media (max-width: 360px) {
  .nps-summary-grid, .sales-summary-grid, .is-summary-grid, .rc-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Table-wrap scroll cue ─────────────────────────────────────
   On phones, when a table overflows horizontally, give a subtle
   gradient fade on the right edge so users know to scroll. */
@media (max-width: 768px) {
  .table-wrap, .fsd-table-wrap, .util-table-wrap, .rc-table-wrap {
    position: relative;
  }
  .table-wrap::after, .fsd-table-wrap::after,
  .util-table-wrap::after, .rc-table-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 18px;
    background: linear-gradient(to left, var(--bg-card) 0%, transparent 100%);
    pointer-events: none;
  }
}

/* ── Unit Profile (single-unit detail page) ──────────────────────
   Header has unit number + vehicle name + class badge + status
   chips. On phones the row was wrapping but the unit number was
   getting orphaned. Stack the title cleanly and shrink the number
   so vehicle name fits next to it. */
@media (max-width: 600px) {
  .up-page .up-header { padding: 14px 14px; }
  .up-page .up-header-title { gap: 8px; }
  .up-page .up-unit-num { font-size: 18px; }
  .up-page .up-vehicle { font-size: 15px; line-height: 1.25; min-width: 0; flex: 1 1 100%; }
  .up-page .up-class-badge,
  .up-page .up-status,
  .up-page .up-corp-badge,
  .up-page .up-claim-badge { font-size: 10px; padding: 2px 7px; }
  .up-page .up-header-meta { gap: 10px; font-size: 12px; }
  .up-page .up-header-meta-sub { font-size: 11px; }
  .up-page .up-tsd-note {
    font-size: 12px;
    padding: 10px 12px;
    /* Long internal notes — let them wrap, never overflow */
    overflow-wrap: anywhere;
  }
  .up-page .up-search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ── Reset / forgot-password / verify-email screens ───────────────
   Single-card auth screens reuse the login layout. The card was
   already capped at 460px max-width, but on very narrow phones the
   internal padding (32px) ate too much horizontal space. */
@media (max-width: 480px) {
  .auth-card { padding: 24px 18px; }
  .auth-eyebrow { font-size: 10.5px; }
}

/* ── Sales / IS daily charts wrapper ──────────────────────────────
   The SVG charts already scale via viewBox, but the surrounding
   legend/axis text needs tighter spacing on phones. */
@media (max-width: 600px) {
  .sales-chart-section .sales-chart-body { padding: 10px 4px 6px; }
  .sales-chart-legend { gap: 10px; font-size: 11px; flex-wrap: wrap; }
}

/* ── Profile page additions ──────────────────────────────────────
   Already 1fr on mobile via earlier pass. Add safety: long emails
   wrap, save-status doesn't push button off-screen. */
@media (max-width: 600px) {
  .profile-avatar-email,
  .profile-avatar-name { overflow-wrap: anywhere; text-align: center; }
  .profile-form-footer { flex-wrap: wrap; gap: 8px; }
  .profile-save-status { flex: 1 1 100%; order: 2; }
  .profile-form-footer .btn { flex: 1; }
}

/* ── 2FA setup screens (TOTP code entry) ─────────────────────────
   The 6-digit code input row needs each cell to be tappable. */
@media (max-width: 480px) {
  .totp-code-input,
  input[autocomplete="one-time-code"] {
    font-size: 22px;
    letter-spacing: .15em;
    padding: 12px;
  }
}

/* ── Pre-build hand off — scroll inertia for any new scrollable container ── */
.scrollable, .scroll-x, .scroll-y,
[class*="-list"], [class*="-table-wrap"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}