/* =========================================================
   Flecso — Logistics OS
   Design Tokens
   ========================================================= */
:root {
  /* Brand */
  --orange-50:  #FFF5EC;
  --orange-100: #FFE7D1;
  --orange-200: #FFCBA0;
  --orange-300: #FFA85F;
  --orange-400: #FF8A2B;
  --orange-500: #FF6B1A;   /* primary */
  --orange-600: #F25108;
  --orange-700: #C43E04;
  --orange-grad: linear-gradient(135deg,#FF8A2B 0%,#FF5500 100%);

  /* Neutrals */
  --black:     #0A0A0B;
  --ink-900:   #111114;
  --ink-800:   #1C1C21;
  --ink-700:   #2A2A31;
  --ink-600:   #3F3F46;
  --ink-500:   #5B5B63;
  --ink-400:   #6B6B75;   /* UIB-004 / UIA-020: was #8C8C95 (3.33:1 on white) — darkened to ~5:1 so muted body text (profile role, labels, timestamps, breadcrumbs) meets WCAG AA. */
  --ink-300:   #B5B5BD;
  --ink-200:   #E2E2E6;
  --ink-100:   #EFEFF2;
  --ink-50:    #F7F7F9;
  --white:     #FFFFFF;

  /* Semantic */
  --success-50: #E8F8EE;
  --success-500:#10B981;
  --success-700:#057A55;
  --warn-50:    #FFF6E0;
  --warn-500:   #F59E0B;
  --danger-50:  #FEECEC;
  --danger-500: #EF4444;
  --danger-700: #B91C1C;
  --info-50:    #E8F0FE;
  --info-500:   #3B82F6;

  /* Surfaces */
  --bg:            #F5F5F7;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFB;
  --surface-line:  #ECECEF;

  /* Radii & Shadows */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  --shadow-xs: 0 1px 2px rgba(10,10,11,.04);
  --shadow-sm: 0 1px 3px rgba(10,10,11,.06), 0 1px 2px rgba(10,10,11,.04);
  --shadow-md: 0 8px 24px -10px rgba(10,10,11,.10), 0 2px 6px rgba(10,10,11,.04);
  --shadow-lg: 0 24px 60px -20px rgba(10,10,11,.18), 0 8px 18px -8px rgba(10,10,11,.08);
  --shadow-orange: 0 14px 30px -12px rgba(255,107,26,.55);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;

  /* Motion */
  --ease: cubic-bezier(.22,.8,.22,1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 300ms;   /* UI pass 1: was 420ms — entrance motion stays within 150–300ms */

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h: 72px;

  /* UI pass 1 (2026-09-30) — shared fit-and-finish tokens */
  --text-muted: var(--ink-500);       /* 6.9:1 on white; --ink-400 (3.3:1) is for icons/decoration only */
  --warn-700: #8A5100;                /* text on --warn-50 (was repeated as a raw hex) */
  --info-700: #1E4FC7;                /* text on --info-50 (was repeated as a raw hex) */
  --focus-color: var(--orange-600);   /* ≥3:1 against white and the dark active nav */
  --focus-ring: 0 0 0 3px rgba(242,81,8,.28);
  --tap: 44px;                        /* minimum touch target below 1024px */
  --gutter-phone: 16px;
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
@supports (padding: max(0px)) {
  .topbar { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--ink-900); }

h1,h2,h3,h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; color: var(--ink-900); }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }
p { margin: 0; }

.muted { color: var(--text-muted); font-size: 13px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* =========================================================
   App Shell
   ========================================================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--white);
  border-right: 1px solid var(--surface-line);
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  gap: 14px;
  overflow-y: auto;
  z-index: 40;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 10px 10px;
  border-bottom: 1px solid var(--surface-line);
  margin-bottom: 8px;
}
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg,#1c1c21 0%,#000 100%);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 80% at 80% 0%, rgba(255,107,26,.5), transparent 50%);
}
.brand-text { display:flex; flex-direction: column; line-height:1.15; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand-tag  { font-size: 11px; color: var(--ink-400); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-section-label {
  font-size: 11px; font-weight: 600; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 14px 12px 6px;
}
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink-600);
  font-weight: 500;
  font-size: 13.5px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
}
.nav-link:hover { background: var(--ink-50); color: var(--ink-900); }
.nav-link .nav-icon { width: 18px; height: 18px; color: var(--ink-400); transition: color var(--dur) var(--ease); }
.nav-link:hover .nav-icon { color: var(--orange-500); }
.nav-link.active {
  background: linear-gradient(180deg,#111114 0%,#1C1C21 100%);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.nav-link.active .nav-icon { color: var(--orange-400); }
.nav-link.active::before {
  content:""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px;
  background: var(--orange-grad); border-radius: 0 3px 3px 0;
}
.nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: var(--ink-100); color: var(--ink-500);
  padding: 2px 8px; border-radius: 999px;
}
.nav-link.active .nav-badge { background: rgba(255,255,255,.1); color: var(--white); }
.nav-badge--danger {
  background: var(--danger-50); color: var(--danger-700);
  position: relative;
}
.nav-badge--danger::before {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger-500);
  animation: pulse 1.4s infinite;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}
.nav-link.active .nav-badge--danger { background: rgba(239,68,68,.18); color: #FDA4A4; }
.nav-dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-500); box-shadow: 0 0 0 3px rgba(255,107,26,.2);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.sidebar__upgrade { padding: 10px 4px 4px; }
.upgrade-card {
  background: linear-gradient(135deg,#0A0A0B 0%, #1C1C21 70%, #2A2A31 100%);
  border-radius: var(--r-lg);
  padding: 16px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.upgrade-card::before {
  content:""; position:absolute; inset:-40% -20% auto auto;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,26,.45), transparent 70%);
  filter: blur(8px);
}
.upgrade-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--orange-grad);
  display: grid; place-items: center; color: #fff;
  margin-bottom: 10px; position: relative;
}
.upgrade-card h4 { color: #fff; font-size: 14px; margin-bottom: 4px; position: relative; }
.upgrade-card p { color: rgba(255,255,255,.65); font-size: 12px; margin-bottom: 12px; position: relative; }

/* Main */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: 14px;
  height: var(--topbar-h);
  padding: 0 28px;
  background: rgba(245,245,247,.75);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--surface-line);
  z-index: 30;
}
.topbar .topbar__menu { display: none; }
.topbar__search {
  display: flex; align-items: center; gap: 10px;
  flex: 1; max-width: 540px;
  height: 42px; padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  color: var(--ink-400);
}
.topbar__search:focus-within {
  border-color: var(--orange-400);
  box-shadow: 0 0 0 4px rgba(255,107,26,.10);
}
.topbar__search input { flex:1; border: none; outline: none; background: transparent; color: var(--ink-900); }
.topbar__search input::placeholder { color: var(--ink-400); }
.kbd {
  font-size: 11px; font-weight: 600; padding: 2px 6px;
  background: var(--ink-50); border: 1px solid var(--surface-line);
  border-radius: 6px; color: var(--ink-500);
}

.topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  background: var(--success-50); color: var(--success-700);
  border-radius: 999px; font-weight: 600; font-size: 12.5px;
}
.chip-dot { width:8px; height: 8px; border-radius: 50%; background: var(--success-500); box-shadow: 0 0 0 3px rgba(16,185,129,.2); animation: pulse 2s infinite; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--surface-line);
  border-radius: 12px;
  color: var(--ink-600);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
}
.icon-btn:hover { transform: translateY(-1px); border-color: var(--ink-200); color: var(--ink-900); }
.icon-btn--notify .notify-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--orange-grad); color: #fff;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(255,107,26,.4);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.icon-btn--notify .notify-badge.hidden { transform: scale(0); opacity: 0; }

.notify-wrap { position: relative; }
.notify-pop {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 380px; max-width: calc(100vw - 32px);
  background: var(--white);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 50;
  overflow: hidden;
}
.notify-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.notify-pop__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--surface-line);
}
.notify-pop__head h3 { font-size: 15px; }
.notify-pop__body { max-height: 420px; overflow-y: auto; padding: 6px 0; }
.notify-pop__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--surface-line);
  background: var(--surface-2);
  font-size: 12.5px; font-weight: 600;
}
.notify-pop__foot a { color: var(--ink-600); }
.notify-pop__foot a.link-primary { color: var(--orange-600); }
.notify-pop__foot a:hover { color: var(--ink-900); }

.notify-item {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  transition: background var(--dur) var(--ease);
  position: relative;
}
.notify-item:hover { background: var(--ink-50); }
.notify-item.unread::before {
  content:""; position: absolute; top: 18px; left: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange-500);
}
.notify-item__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex: none;
}
.notify-item__icon--danger  { background: var(--danger-50); color: var(--danger-700); }
.notify-item__icon--warn    { background: var(--warn-50);   color: #8A5100; }
.notify-item__icon--success { background: var(--success-50);color: var(--success-700); }
.notify-item__icon--info    { background: var(--info-50);   color: var(--info-500); }
.notify-item__icon--orange  { background: var(--orange-50); color: var(--orange-700); }
.notify-item__title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.notify-item__sub   { font-size: 12px; color: var(--ink-500); line-height: 1.4; }
.notify-item__time  { font-size: 11px; color: var(--ink-400); white-space: nowrap; padding-top: 2px; }
.notify-empty {
  text-align: center; padding: 34px 16px; color: var(--ink-400); font-size: 13px;
}

.profile-pop { width: 280px; }
.profile-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--ink-700);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.profile-link:hover { background: var(--ink-50); color: var(--ink-900); }
.profile-link svg { color: var(--ink-400); flex: none; }
.profile-link:hover svg { color: var(--orange-500); }
.profile-link--danger { color: var(--danger-700); background: var(--danger-50); }
.profile-link--danger:hover { background: #FCDADA; color: var(--danger-700); }
.profile-link--danger svg { color: var(--danger-700); }
.profile-link--danger:hover svg { color: var(--danger-700); }

/* Anchored floating menu (date range, quick add) */
.flymenu {
  position: absolute;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 55;
  opacity: 0; transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.flymenu.open { opacity: 1; transform: none; pointer-events: auto; }
.flymenu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-700);
  cursor: pointer; text-align: left;
  transition: background var(--dur) var(--ease);
}
.flymenu__item:hover { background: var(--ink-50); color: var(--ink-900); }
.flymenu__item.active { background: var(--orange-50); color: var(--orange-700); }
.flymenu__item svg { color: var(--ink-400); flex: none; }
.flymenu__item:hover svg { color: var(--orange-500); }
.flymenu__item small { margin-left: auto; color: var(--ink-400); font-size: 11px; font-weight: 500; }
.flymenu__sep { height: 1px; background: var(--surface-line); margin: 4px 0; }

.topbar__profile { cursor: pointer; }

.topbar__profile {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  background: var(--white); border: 1px solid var(--surface-line);
  border-radius: 999px; cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.topbar__profile:hover { border-color: var(--ink-200); }
.topbar__profile img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.profile-meta { display: flex; flex-direction: column; line-height: 1.2; }
.profile-name { font-size: 13px; font-weight: 600; }
.profile-role { font-size: 11px; color: var(--ink-400); }

/* Page */
.page {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: pageIn var(--dur-slow) var(--ease);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Page Header
   ========================================================= */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.page-head h1 { font-size: 26px; }
.page-head__sub { color: var(--ink-500); font-size: 13.5px; margin-top: 4px; }
.breadcrumb {
  display: flex; gap: 6px; align-items: center;
  color: var(--ink-400); font-size: 12px; font-weight: 500;
  margin-bottom: 6px;
}
.breadcrumb span { color: var(--ink-900); }

.page-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: 13px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn--primary {
  background: var(--orange-grad); color: #fff;
  box-shadow: var(--shadow-orange);
}
.btn--primary:hover { transform: translateY(-1px); }
.btn--dark { background: var(--ink-900); color: #fff; }
.btn--dark:hover { background: var(--ink-700); }
.btn--ghost { background: var(--white); color: var(--ink-700); border: 1px solid var(--surface-line); }
.btn--ghost:hover { border-color: var(--ink-200); color: var(--ink-900); }
.btn--block { width: 100%; justify-content: center; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
/* UIB-003 — a disabled primary button ("Esegui" with 0 selected, "Chiudi viaggio operativamente")
   used to render identically to an enabled one (full opacity, orange gradient, cursor:pointer), so
   users clicked it expecting an action. Make disabled look disabled, everywhere. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn:disabled:hover,
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* =========================================================
   Cards
   ========================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--surface-line);
  gap: 10px; flex-wrap: wrap;
}
.card__title { display: flex; align-items: center; gap: 10px; }
.card__title h3 { font-size: 15px; }
.card__body { padding: 18px 20px; }
.card__footer { padding: 14px 20px; border-top: 1px solid var(--surface-line); display: flex; justify-content: space-between; align-items: center; }

/* =========================================================
   Stats Grid
   ========================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat {
  position: relative;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 14px;
}
.stat__icon--orange { background: var(--orange-50); color: var(--orange-600); }
.stat__icon--dark   { background: var(--ink-900); color: #fff; }
.stat__icon--green  { background: var(--success-50); color: var(--success-700); }
.stat__icon--blue   { background: var(--info-50); color: var(--info-500); }
.stat__label { color: var(--ink-500); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.stat__value { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; }
.stat__trend {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
}
.trend-up   { background: var(--success-50); color: var(--success-700); }
.trend-down { background: var(--danger-50);  color: var(--danger-700); }
.stat__spark {
  position: absolute; right: 12px; bottom: 12px; opacity: .85;
}

/* =========================================================
   Dashboard Grids
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-live { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

.chart-wrap { height: 260px; position: relative; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-500); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Activity list */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: flex; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--surface-line);
}
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-avatar {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; flex: none;
}
.activity-item h5 { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.activity-item p { font-size: 12.5px; color: var(--ink-500); }
.activity-time { font-size: 11.5px; color: var(--ink-400); margin-left: auto; white-space: nowrap; }

/* SOS Card */
.sos-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--danger-50);
  border-radius: 12px; margin-bottom: 10px;
  border: 1px solid rgba(239,68,68,.15);
}
.sos-item:last-child { margin-bottom: 0; }
.sos-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger-500);
  box-shadow: 0 0 0 4px rgba(239,68,68,.18);
  animation: pulse 1.4s infinite;
}
.sos-item h5 { font-size: 13px; font-weight: 700; color: var(--danger-700); }
.sos-item p { font-size: 11.5px; color: var(--ink-600); }

/* Map */
.map-wrap {
  position: relative;
  height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--surface-line);
}
#mapEl { height: 100%; width: 100%; }
.map-legend {
  position: absolute; bottom: 14px; left: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--surface-line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; gap: 12px; font-size: 12px; font-weight: 500;
  box-shadow: var(--shadow-sm);
  z-index: 400;
}
.map-legend span { display:inline-flex; align-items:center; gap:6px; }
.map-overlay-stat {
  position: absolute; top: 14px; left: 14px; z-index: 400;
  display: grid; grid-template-columns: repeat(3, auto); gap: 10px;
}
.map-overlay-stat .pill {
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid var(--surface-line);
  border-radius: 12px; padding: 8px 12px;
  font-size: 12px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.pill strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.pill em { font-style: normal; color: var(--ink-400); font-weight: 500; font-size: 11px; }

.leaflet-pane .leaflet-tile-pane { filter: grayscale(.45) contrast(1.03); }

.truck-marker {
  width: 36px; height: 36px; position: relative;
}
.truck-marker::before {
  content:""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--orange-grad);
  box-shadow: 0 8px 18px -4px rgba(255,107,26,.55);
}
.truck-marker::after {
  content:""; position: absolute; inset: -8px;
  border-radius: 50%; border: 2px solid rgba(255,107,26,.35);
  animation: ping 2s infinite;
}
.truck-marker svg { position:absolute; inset: 0; margin:auto; color:#fff; }
@keyframes ping {
  0% { transform: scale(.8); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Schedule list */
.schedule-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--surface-line);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-date {
  text-align: center;
  background: var(--ink-900); color: #fff;
  padding: 8px 6px; border-radius: 12px;
  font-family: var(--font-display);
}
.schedule-date strong { display:block; font-size: 18px; line-height: 1; }
.schedule-date small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.schedule-title { font-weight: 600; font-size: 13.5px; }
.schedule-sub   { font-size: 12px; color: var(--ink-500); }

/* =========================================================
   Tables
   ========================================================= */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 0;
}
.toolbar .search {
  position: relative; flex: 1; max-width: 360px;
}
.toolbar .search input {
  width: 100%; height: 40px; padding: 0 12px 0 38px;
  background: var(--white);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-md); outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.toolbar .search input:focus { border-color: var(--orange-400); box-shadow: 0 0 0 4px rgba(255,107,26,.1); }
.toolbar .search svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--ink-400); }
.toolbar .filters { display: inline-flex; gap: 6px; padding: 4px; background: var(--white); border: 1px solid var(--surface-line); border-radius: var(--r-md); }
.toolbar .filters button {
  padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 12px; color: var(--ink-500);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.toolbar .filters button.active { background: var(--ink-900); color: #fff; }

.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px;
}
table.data thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  text-align: left;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-500);
  padding: 14px 16px;
  border-bottom: 1px solid var(--surface-line);
  white-space: nowrap;
}
table.data tbody td {
  padding: 14px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--surface-line);
  vertical-align: middle;
}
table.data tbody tr { transition: background var(--dur) var(--ease); }
table.data tbody tr:hover { background: var(--ink-50); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data .cell-asset { display: flex; align-items: center; gap: 12px; }
table.data .asset-thumb {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  background: var(--ink-100); flex: none;
}
table.data .asset-name { font-weight: 600; }
table.data .asset-sub  { font-size: 12px; color: var(--ink-400); }

/* Status badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.1;
}
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--warn,
.badge--warning { background: var(--warn-50);    color: var(--warn-700); } /* --warning: alias used by trips/drivers/trucks views */
.badge--danger  { background: var(--danger-50);  color: var(--danger-700); }
.badge--info,
.badge--primary { background: var(--info-50);    color: var(--info-700); } /* --primary: alias used by containers/show */
.badge--neutral { background: var(--ink-100);    color: var(--ink-600); }
.badge--orange  { background: var(--orange-50);  color: var(--orange-700); }
.badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Row actions */
.row-actions { display: inline-flex; gap: 6px; }
.mini-btn {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--white); border: 1px solid var(--surface-line);
  display: grid; place-items: center; color: var(--ink-500);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mini-btn:hover { transform: translateY(-1px); color: var(--ink-900); border-color: var(--ink-200); }
.mini-btn--qr:hover { color: var(--orange-600); border-color: var(--orange-300); }
.mini-btn--danger:hover { color: var(--danger-700); border-color: #FBB4B4; }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; gap: 12px;
}
.pagination .meta { color: var(--ink-500); font-size: 12.5px; }
.pagination .pager { display: inline-flex; gap: 4px; }
.pager button {
  min-width: 32px; height: 32px; padding: 0 10px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600;
  background: var(--white); border: 1px solid var(--surface-line);
  color: var(--ink-600);
}
.pager button.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

/* =========================================================
   Forms (Drawer)
   ========================================================= */
.form-section {
  padding: 18px 0;
  border-bottom: 1px dashed var(--surface-line);
}
.form-section:last-child { border-bottom: none; }
.form-section h4 {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.form-section h4 .sec-num {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--orange-50); color: var(--orange-700);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.form-section .muted { margin-bottom: 16px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-700); }
.field label .req { color: var(--orange-600); margin-left: 3px; }
.input, select, textarea {
  width: 100%;
  height: 42px; padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { padding: 10px 14px; min-height: 88px; resize: vertical; height: auto; line-height: 1.5; }
.input:focus, select:focus, textarea:focus {
  border-color: var(--orange-400);
  box-shadow: 0 0 0 4px rgba(255,107,26,.10);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8C95' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.checkbox input { margin-top: 3px; accent-color: var(--orange-500); }

.upload {
  border: 1.5px dashed var(--ink-200);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  background: var(--surface-2);
  color: var(--ink-500);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  cursor: pointer;
}
.upload:hover { border-color: var(--orange-400); background: var(--orange-50); color: var(--orange-700); }
.upload svg { margin-bottom: 6px; }
.upload strong { display: block; font-size: 13px; color: var(--ink-900); }
.upload span { font-size: 11.5px; }

/* Pills filter row */
.delivery-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.delivery-opt {
  padding: 14px; border-radius: 12px;
  border: 1px solid var(--surface-line);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.delivery-opt.active { border-color: var(--orange-400); background: var(--orange-50); box-shadow: 0 0 0 4px rgba(255,107,26,.08); }
.delivery-opt h5 { font-size: 13px; margin-bottom: 2px; }
.delivery-opt p { font-size: 11.5px; color: var(--ink-500); }

/* =========================================================
   Modal
   ========================================================= */
.modal, .drawer {
  position: fixed; inset: 0;
  display: none;
  z-index: 60;
}
.modal.open, .drawer.open { display: block; }
.modal__backdrop, .drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,11,.42);
  backdrop-filter: blur(4px);
  animation: fade var(--dur) var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal__dialog {
  position: relative;
  width: min(440px, calc(100% - 40px));
  margin: 8vh auto 0;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popIn var(--dur-slow) var(--ease);
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal__header, .drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--surface-line);
}
.modal__body { padding: 26px; }
.modal__body--center { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qr-frame {
  padding: 18px; background: var(--white);
  border: 1px solid var(--surface-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.qr-data {
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: 12px; color: var(--ink-500);
  padding: 6px 12px; background: var(--ink-50); border-radius: 8px;
}
.modal__footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--surface-line);
  background: var(--surface-2);
}

/* =========================================================
   Drawer
   ========================================================= */
.drawer__panel {
  position: absolute; top: 0; right: 0;
  height: 100%;
  width: min(620px, 100%);
  background: var(--white);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideIn var(--dur-slow) var(--ease);
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: none; }
}
.drawer__body {
  flex: 1; overflow-y: auto; padding: 8px 22px 24px;
}
.drawer__footer {
  padding: 14px 22px; border-top: 1px solid var(--surface-line);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--surface-2);
}

/* =========================================================
   Toast
   ========================================================= */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--ink-900); color: #fff;
  padding: 12px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px); opacity: 0;
  pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
}
.toast.show { transform: none; opacity: 1; }
.toast::before {
  content:""; width: 8px; height: 8px; border-radius:50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(255,107,26,.3);
}

/* =========================================================
   Settings tabs
   ========================================================= */
.tabs-vertical {
  display: grid; grid-template-columns: 240px 1fr; gap: 20px;
}
.tabs-list {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--surface-line);
  border-radius: var(--r-lg); padding: 10px;
  height: fit-content; position: sticky; top: calc(var(--topbar-h) + 12px);
}
.tab-item {
  padding: 10px 12px; border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-600); font-weight: 500; font-size: 13px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab-item:hover { background: var(--ink-50); color: var(--ink-900); }
.tab-item.active { background: var(--orange-50); color: var(--orange-700); }
.tab-item svg { width: 16px; height: 16px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: pageIn var(--dur) var(--ease); }

/* Role matrix */
.role-matrix { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 0; }
.role-matrix > div { padding: 12px 14px; border-bottom: 1px solid var(--surface-line); font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.role-matrix > div:first-child, .role-matrix .role-label { justify-content: flex-start; font-weight: 500; color: var(--ink-700); }
.role-matrix .role-head { font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); background: var(--surface-2); border-bottom: 1px solid var(--surface-line); }
.role-matrix .check {
  width: 18px; height: 18px; border-radius: 5px; background: var(--ink-100);
  display: grid; place-items: center; color: var(--ink-300);
}
.role-matrix .check.on { background: var(--orange-50); color: var(--orange-600); }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan {
  padding: 22px; background: var(--white); border: 1px solid var(--surface-line);
  border-radius: var(--r-lg); position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan.featured { background: linear-gradient(180deg,#111114 0%,#1c1c21 100%); color: #fff; border-color: transparent; }
.plan.featured h3 { color: #fff; }
.plan.featured .plan-tag { background: var(--orange-grad); color: #fff; }
.plan-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--ink-100); color: var(--ink-500);
  margin-bottom: 10px;
}
.plan h3 { font-size: 20px; margin-bottom: 4px; }
.plan-price { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; margin: 8px 0; }
.plan-price small { font-size: 13px; font-weight: 500; color: var(--ink-400); }
.plan.featured .plan-price small { color: rgba(255,255,255,.6); }
.plan ul { list-style: none; padding: 0; margin: 14px 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.plan ul li { display: flex; gap: 8px; align-items: flex-start; }
.plan ul li svg { flex:none; color: var(--orange-500); margin-top: 2px; }

/* =========================================================
   Trip Detail bits
   ========================================================= */
.trip-map { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--surface-line); }
.timeline { display: flex; flex-direction: column; gap: 14px; }
.tl-item { display: grid; grid-template-columns: 14px 1fr; gap: 14px; position: relative; }
.tl-item::before {
  content:""; position: absolute; left: 6px; top: 16px; bottom: -14px; width: 2px; background: var(--surface-line);
}
.tl-item:last-child::before { display: none; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; background: var(--ink-200); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--surface-line); }
.tl-item.done .tl-dot { background: var(--success-500); box-shadow: 0 0 0 1px var(--success-500); }
.tl-item.active .tl-dot { background: var(--orange-500); box-shadow: 0 0 0 4px rgba(255,107,26,.15); }
.tl-title { font-weight: 600; font-size: 13px; }
.tl-sub { font-size: 12px; color: var(--ink-500); }

/* =========================================================
   Small util
   ========================================================= */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

/* =========================================================
   Sidebar backdrop (mobile)
   ========================================================= */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,11,.42);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 45;
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

/* =========================================================
   Responsive
   ========================================================= */

/* === Wide laptop / 13-14" === */
@media (max-width: 1280px) {
  :root { --sidebar-w: 240px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .page { padding: 24px; }
}

/* === Small laptop / Tablet landscape === */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-live { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; gap: 14px; }
  .map-wrap { height: 340px; }
}

/* === Tablet: collapse sidebar into an off-canvas drawer below 1024px === */
@media (max-width: 1023.98px) {
  :root { --sidebar-w: 0px; --topbar-h: 64px; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 280px; max-width: 85vw;
    transform: translateX(-100%);
    /* visibility keeps the closed drawer's links out of the Tab order and the a11y tree */
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    box-shadow: var(--shadow-lg);
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 50;               /* above .sidebar-backdrop (45); was 40 = drawn UNDER the blur */
    overscroll-behavior: contain;
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform var(--dur) var(--ease); }
  .topbar .topbar__menu { display: grid; }
  .topbar__search { max-width: none; flex: 1; min-width: 0; }
  .topbar { padding: 0 18px; gap: 10px; }
  .tabs-vertical { grid-template-columns: 1fr; gap: 14px; }
  .tabs-list { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .tab-item { flex: none; white-space: nowrap; padding: 8px 14px; }
  .role-matrix { grid-template-columns: 1fr 1fr; }
  .role-matrix .role-head { display: none; }
  .role-matrix > div { justify-content: flex-start; gap: 10px; }
  .stat { padding: 16px; }
  .stat__value { font-size: 26px; }
  .stat__spark { width: 70px; right: 10px; bottom: 10px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .map-wrap { height: 320px; }
  .map-overlay-stat { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .map-overlay-stat .pill { padding: 6px 8px; }
  .pill strong { font-size: 15px; }
  .delivery-options { grid-template-columns: 1fr 1fr; }
  .schedule-row { grid-template-columns: 60px 1fr auto; }
  .upgrade-card { padding: 14px; }
}

/* === Large phone / phablet === */
@media (max-width: 768px) {
  .page { padding: 18px 16px; gap: 18px; }
  .page-head h1 { font-size: 22px; }
  .page-head__sub { font-size: 13px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card__head { padding: 14px 16px; }
  .card__body { padding: 14px 16px; }
  .chart-wrap { height: 220px; }
  .profile-meta { display: none; }
  .topbar__profile { padding: 2px; }
  .topbar__profile img { width: 34px; height: 34px; }
  .kbd { display: none; }
  .modal__dialog { margin-top: 6vh; }
  .drawer__body { padding: 8px 16px 20px; }
  .drawer__header, .drawer__footer { padding: 14px 16px; }
  .delivery-options { grid-template-columns: 1fr; }
  .pagination { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .btn { height: 42px; font-size: 13px; }
  .btn--sm { height: 34px; }
  .icon-btn { width: 38px; height: 38px; }
  .toolbar { gap: 8px; }
  .toolbar .search { max-width: none; flex: 1 1 100%; }
  .toolbar .filters { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar .filters::-webkit-scrollbar { display: none; }
  .role-matrix { grid-template-columns: 1fr; }
  .role-matrix > div { border-bottom: 1px solid var(--surface-line); justify-content: flex-start; }
}

/* === Phone === */
@media (max-width: 600px) {
  h1 { font-size: 22px; }
  .page-head__actions .btn:not(.btn--primary) { padding: 0 12px; }
  .stats-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .notify-pop { width: calc(100vw - 24px); right: -12px; }
  .profile-pop { width: calc(100vw - 24px); }
  .map-wrap { height: 260px; }
  .map-overlay-stat { top: 8px; left: 8px; }
  .map-legend { bottom: 8px; left: 8px; font-size: 11px; padding: 8px 10px; }
  .sos-item { grid-template-columns: auto 1fr; }
  .sos-item .btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .schedule-row { grid-template-columns: 54px 1fr; row-gap: 6px; }
  .schedule-row .badge { grid-column: 2; justify-self: flex-start; }
  .activity-item { flex-wrap: wrap; }
  .activity-time { margin-left: 0; width: 100%; padding-left: 50px; }
  .chip { height: 32px; padding: 0 10px; font-size: 11.5px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar__search { height: 40px; padding: 0 12px; }
  .topbar__search input { font-size: 16px; }
  .input, select, textarea { font-size: 16px; }
  .upgrade-card h4 { font-size: 13px; }
  .plan { padding: 18px; }
  .plan-price { font-size: 28px; }
  .stat__value { font-size: 24px; }
  .stat__spark { display: none; }
  .modal__dialog { margin: 5vh 12px 0; width: auto; }
  .modal__body { padding: 20px; }
  .qr-frame { padding: 14px; }
  .qr-frame #qrCanvas { width: 200px !important; height: 200px !important; }
  .drawer__panel { width: 100%; }
  .breadcrumb { font-size: 12px; }   /* UI pass 2: was 11.5px (below the 12px floor) */
}

/* === Small phone === */
@media (max-width: 420px) {
  .page { padding: 14px 12px; gap: 14px; }
  .topbar__actions { gap: 6px; }
  .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
  .topbar__profile img { width: 30px; height: 30px; }
  .brand-text .brand-tag { display: none; }
  .page-head__actions { gap: 8px; width: 100%; }
  .page-head__actions .btn { flex: 1; justify-content: center; padding: 0 10px; font-size: 12px; }
  .card__head { flex-direction: column; align-items: flex-start; }
  .chart-legend { font-size: 11px; }
  .pager button { min-width: 30px; height: 30px; font-size: 12px; }
}

/* Prevent horizontal overflow from long words */
.notify-item__sub, .muted {
  overflow-wrap: anywhere;
}
.asset-name { white-space: nowrap; }
table.data td, table.data th { white-space: nowrap; }
table.data .cell-asset .asset-name,
table.data .cell-asset .asset-sub { white-space: nowrap; }

/* Ensure tables always scroll on narrow containers */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* Bigger touch targets on coarse pointers */
@media (pointer: coarse) {
  .mini-btn { width: 36px; height: 36px; }
  .nav-link { padding: 12px; }
  .tab-item { padding: 12px; }
  .profile-link { padding: 12px; }
}

/* Inline validation message under a .field. Previously these used Bootstrap's
   `.text-danger`, which this app never loads — so validation errors rendered in
   ordinary body text and did not read as errors at all. */
.field-error {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--danger-700);
  margin-top: 2px;
}

/* =========================================================
   Alerts — platform-level (BEM, matches the `alert--danger`
   usage already present in the views). Bootstrap's single-dash
   `.alert-danger` is NOT loaded by this app, so anything using
   it renders as unstyled body text.
   ========================================================= */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid transparent;
  margin-bottom: 16px;
}
.alert ul { margin: 0; padding-left: 18px; }
.alert svg { flex: none; margin-top: 1px; }
/* UIA-025 — a validation error summary is an .alert holding several message lines. With the
   default `display:flex;flex-direction:row` those lines were laid out as squeezed side-by-side
   columns (2-4 words each, unreadable). When an alert carries a list (a <ul> or more than one
   block child), stack it vertically and let each line take the full width. */
.alert:has(> ul),
.alert:has(> div + div) { flex-direction: column; }
.alert:has(> div + div) > div { width: 100%; }
.alert--danger  { background: var(--danger-50);  color: var(--danger-700);  border-color: #F6C9C9; }
.alert--success { background: var(--success-50); color: var(--success-700); border-color: #BFE9D2; }
.alert--warn    { background: var(--warn-50);    color: #8A5100;            border-color: #F3DDA8; }
.alert--info    { background: var(--info-50);    color: #1E4FC7;            border-color: #C8D9FB; }
.alert--neutral { background: var(--surface-2);  color: var(--ink-600);     border-color: var(--surface-line); }

/* =========================================================
   UI pass 1 (2026-09-30) — responsive shell + shared components
   ---------------------------------------------------------
   Fit and finish only: same colours, type, layout and navigation.
   Breakpoints (mobile-first thinking, max-width queries to match
   the rules above): phone < 768 · tablet 768–1023 (sidebar is an
   off-canvas drawer) · laptop ≥ 1024 · wide ≥ 1440.
   Motion uses transform/opacity only and honours reduced motion.
   ========================================================= */

/* ---------- Base safety ---------- */
img, video { max-width: 100%; }
.page-head h1, .card__title h3, .detail-hero h1 { overflow-wrap: break-word; }
/* A grid track sized 1fr grows to its widest unbreakable child (a long URL, a nowrap table) and
   pushes the page off-screen (trips/show at 768px). Grid children may shrink instead. */
.grid-2 > *, .grid-3 > *, .grid-live > *, .detail-grid > *, .tabs-vertical > *, .stats-grid > * { min-width: 0; }

/* A .page nested in a .page (the dashboard's Digital Twin KPI band) doubled the side gutter,
   squeezing phone content to ~310px. */
@media (max-width: 767.98px) {
  .page .page { padding-left: 0; padding-right: 0; }
}

/* ---------- Skip link + focus ---------- */
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--ink-900); color: #fff; font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: none; }
#main-content:focus { outline: none; }

a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
[tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
.nav-link:focus-visible, .nav-sublink:focus-visible, .table-wrap:focus-visible,
.profile-link:focus-visible, .flymenu__item:focus-visible { outline-offset: -2px; }

/* ---------- Sidebar drawer (below 1024px) ---------- */
.sidebar__close { display: none; }
.sidebar .brand-text { min-width: 0; }
@media (max-width: 1023.98px) {
  .sidebar__close { display: grid; margin-left: auto; flex: none; }
  .sidebar__brand { padding-right: 0; }
  body.nav-open { overflow: hidden; }          /* scroll lock while the drawer is open */
  .sidebar-backdrop { backdrop-filter: blur(2px); }
}

/* ---------- Topbar on tablets / phones ---------- */
@media (max-width: 1023.98px) {
  .topbar .chip { min-height: var(--tap); }
}
@media (max-width: 767.98px) {
  /* Copilot stays reachable on phones as a 44px icon button; its text stays for screen readers. */
  .topbar .copilot-btn { width: var(--tap); padding: 0; justify-content: center; }
  .topbar .copilot-btn .copilot-label,
  .topbar .copilot-btn .copilot-badge {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Header popovers become full-width panels under the bar instead of hanging off one edge. */
  .topbar .notify-pop,
  .topbar .profile-pop {
    position: fixed; top: calc(var(--topbar-h) + 6px); left: 12px; right: 12px;
    width: auto; max-width: none;
  }
  .topbar .notify-pop__body { max-height: min(420px, calc(100dvh - var(--topbar-h) - 150px)); }
}
.lang-code {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 20px; border-radius: 5px;
  background: var(--ink-100); color: var(--ink-700);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.lang-switch.active .lang-code { background: var(--orange-100); color: var(--orange-700); }

/* ---------- Touch targets (below 1024px: tablets and phones are touch-first) ---------- */
@media (max-width: 1023.98px) {
  .btn, .btn--sm { min-height: var(--tap); }
  .icon-btn, .mini-btn { min-width: var(--tap); min-height: var(--tap); }
  .topbar__profile { min-height: var(--tap); }
  .nav-link, .nav-sublink, .profile-link, .flymenu__item, .tab-item, .ui-subnav a {
    min-height: var(--tap); display: flex; align-items: center;
  }
  .toolbar .filters button { min-height: 40px; white-space: nowrap; flex: none; }
  .input, select,
  input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input[type="month"] { min-height: var(--tap); }
  .row-actions, .action-left, .action-right { gap: 8px; }
  .pagination .pager a,
  .pagination .pager span[aria-current="page"] span,
  .pagination .pager span[aria-disabled="true"] span { min-width: var(--tap); min-height: var(--tap); }
}

/* ---------- Forms on phones: one column, 44px controls, 16px text (no iOS zoom) ---------- */
@media (max-width: 767.98px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .input, select, textarea,
  input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input[type="month"] { font-size: 16px; }
  .field label { font-size: 13px; }
  .field-error { font-size: 12.5px; }
}

/* ---------- Stats: compact 2-up on phones instead of one 150px card per row ---------- */
@media (max-width: 599.98px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats-grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats-grid .stat { padding: 14px; }
  .stats-grid .stat__icon { width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; }
  .stats-grid .stat__icon svg { width: 18px; height: 18px; }
  .stats-grid .stat__label { font-size: 11px; letter-spacing: .04em; }
  .stats-grid .stat__value { font-size: 22px; }
}

/* ---------- Page head / filter bars ---------- */
/* A toolbar is usually a flex child (card__head, trip-toolbar-card): let it shrink so its filter
   pills scroll inside it instead of widening the page. */
.toolbar { min-width: 0; max-width: 100%; }
.toolbar .filters { max-width: 100%; }
@media (max-width: 767.98px) {
  /* UI pass 2: only actions stretch — status chips / "Updated at" labels in the bar keep their size */
  .page-head__actions > .btn, .page-head__actions > .more-menu, .page-head__actions > form { flex: 1 1 auto; justify-content: center; }
  .page-head__actions > .btn--primary { flex-basis: 100%; }   /* the one primary action gets its own row */
  .toolbar .filters { scroll-snap-type: x proximity; }
  .toolbar .filters button { scroll-snap-align: start; }
}
.more-menu { position: relative; flex: 0 0 auto !important; }
.more-menu__pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 35;
  min-width: 220px; max-width: calc(100vw - 32px);
  display: none; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--white); border: 1px solid var(--surface-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.more-menu.open .more-menu__pop { display: flex; }
.more-menu__pop > *, .more-menu__pop > form > button { width: 100%; justify-content: flex-start !important; box-shadow: none; }
.more-menu__pop > .btn, .more-menu__pop > form > .btn { border-color: transparent; background: transparent; }
.more-menu__pop > .btn:hover, .more-menu__pop > form > .btn:hover { background: var(--ink-50); }

/* ---------- Tables ---------- */
/* Horizontal-scroll wrapper: a soft edge shadow appears only on the side that has hidden columns
   (background-attachment local/scroll trick, no JS). */
.table-wrap, .ui-table-wrap {   /* .ui-table-wrap = the module pages' scroller (module-ui.css) */
  overscroll-behavior-x: contain;
  background:
    linear-gradient(90deg, var(--surface) 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10,10,11,.16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10,10,11,.16), transparent) right center / 12px 100% no-repeat scroll;
  background-color: var(--surface);
}
/* Card rows: add class "table--stack" to a LIST table (one record per row). Below 768px each row
   becomes a card; every cell is labelled from data-label (Blade, or copied from <thead> by common.js).
   The first cell is the card title, a cell holding .row-actions is the card footer. */
@media (max-width: 767.98px) {
  table.table--stack { min-width: 0 !important; width: 100%; display: block; }
  /* visually hidden, still announced; display:block so the clip applies (a table-header-group
     ignores overflow and its row kept the table's full desktop width) */
  .table--stack thead {
    display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table--stack tbody { display: block; }
  .table--stack tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px;
    padding: 14px 16px; border-bottom: 1px solid var(--surface-line);
  }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack tbody tr:hover { background: transparent; }
  table.data.table--stack tbody td,
  .table--stack tbody td {
    display: block; padding: 0; border: 0; min-width: 0;
    white-space: normal; overflow-wrap: anywhere; font-size: 14px;
  }
  .table--stack tbody td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .table--stack tbody td:first-child,
  .table--stack tbody td[colspan],
  .table--stack tbody td:has(.row-actions) { grid-column: 1 / -1; }
  .table--stack tbody td:first-child::before,
  .table--stack tbody td[colspan]::before,
  .table--stack tbody td:has(.row-actions)::before { display: none !important; }
  .table--stack tbody td:has(.row-actions) { padding-top: 10px; border-top: 1px dashed var(--surface-line); }
  .table--stack .row-actions { flex-wrap: wrap; }
  .table--stack .asset-name, .table--stack .asset-sub { white-space: normal; }
}

/* ---------- Status chips: icon + text, never colour alone ---------- */
.badge--success, .badge--warn, .badge--warning, .badge--danger, .badge--info, .badge--primary {
  --badge-icon: none;
}
.badge--success::before, .badge--warn::before, .badge--warning::before,
.badge--danger::before, .badge--info::before, .badge--primary::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
          mask: var(--badge-icon) center / contain no-repeat;
}
.badge:has(> svg)::before { display: none; }
.badge--success .badge-dot, .badge--warn .badge-dot, .badge--warning .badge-dot,
.badge--danger .badge-dot, .badge--info .badge-dot, .badge--primary .badge-dot { display: none; }
.badge--success { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.badge--warn, .badge--warning { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.badge--danger { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E"); }
.badge--info, .badge--primary { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }

/* ---------- Empty / loading states ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 32px 16px; text-align: center; color: var(--text-muted);
}
.empty-state--compact { padding: 20px 12px; }
.empty-state__icon {
  width: 48px; height: 48px; margin-bottom: 4px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--orange-50); color: var(--orange-600);
}
.empty-state__title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.empty-state__hint { font-size: 13px; max-width: 42ch; }
.empty-state__action { margin-top: 8px; }
td > .empty-state { white-space: normal; }

.skeleton {
  position: relative; overflow: hidden; display: block;
  background: var(--ink-100); border-radius: var(--r-sm); color: transparent !important;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: skeleton-sweep 1.2s var(--ease) infinite;
}
.skeleton-line { height: 12px; margin: 8px 0; }
.skeleton-line--short { width: 45%; }
.skeleton-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 12px 16px; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 10px; }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

/* ---------- Modals: bottom sheet on phones, scrollable body, sticky footer ---------- */
@media (max-width: 767.98px) {
  .modal.open { display: flex; align-items: flex-end; }
  .modal__dialog {
    width: 100%; margin: 0; max-height: calc(100dvh - 24px);
    display: flex; flex-direction: column;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: sheetIn var(--dur) var(--ease);
  }
  .modal__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .modal__footer { flex-wrap: wrap; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .modal__footer .btn { flex: 1 1 auto; justify-content: center; }
  .drawer__footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
@keyframes sheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Toast ---------- */
@media (max-width: 767.98px) {
  .toast { left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); justify-content: flex-start; }
}

/* ---------- Pagination (moved from an inline <style> in layouts/app) ----------
   That block sat BEFORE this stylesheet, so where both defined a property this file already won
   (padding, gap, meta colour, column-reverse on phones); only the properties it added live here. */
.pagination { border-top: 1px solid var(--surface-line); background: var(--white); }
.pagination .meta { white-space: nowrap; }
.pagination .pager { align-items: center; justify-content: flex-end; }
/* The old block sized EVERY span to 34px — including Laravel's wrapper <span> around the links — so
   the page links overflowed a 34px box to the right, and a `margin-right: 200px !important` hack
   pulled the row back on screen (the "next" link was still cut off at 1280px). Only the leaf items
   (links, and spans that hold no span) are sized now, and the hack is gone. */
.pagination .pager nav { display: flex; align-items: center; justify-content: flex-end; }
.pagination .pager > nav > div:first-child { display: none; }
.pagination .pager > nav > div:last-child { display: flex; align-items: center; gap: 6px; }
.pagination .pager span:has(span) { display: inline-flex; align-items: center; gap: 6px; }
.pagination .pager span:not(:has(span)),
.pagination .pager a {
  width: 34px; height: 34px; min-width: 34px;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 4px;
  border-radius: 10px; border: 1px solid var(--ink-200);
  background: var(--white); color: var(--ink-900);
  font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pagination .pager a:hover { background: var(--orange-50); border-color: var(--orange-600); color: var(--orange-700); }
.pagination .pager span[aria-current="page"] span { background: var(--orange-600) !important; border-color: var(--orange-600) !important; color: #fff !important; }
.pagination .pager svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; display: block; }
.pagination .pager p { display: none; }
.pagination .pager span[aria-disabled="true"] span { color: var(--ink-400); background: var(--surface-2); border-color: var(--ink-200); cursor: not-allowed; }
@media (max-width: 1023.98px) {
  .pagination .pager span:not(:has(span)),
  .pagination .pager a { width: auto; min-width: var(--tap); height: var(--tap); }
  /* 44px links make a long pager wider than a tablet card: it scrolls inside itself */
  .pagination .pager { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
}
@media (max-width: 767.98px) {
  .pagination .pager { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .pagination .pager > nav > div:last-child { gap: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   UI pass 2 (2026-09-30) — module pages on the shared layer
   ========================================================= */

/* Breadcrumb links: a 44px tap area on touch screens without moving the text (negative margin). */
@media (max-width: 1023.98px) {
  .breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 6px; margin: -12px -6px; }
}

/* Card rows for inboxes (Delays, Cases, Inquiries, Maintenance): cells marked .stack-minor are left
   out of the phone card (the detail page has them); the first cell is the card title and its link a
   full-width 44px tap target with a chevron. */
@media (max-width: 767.98px) {
  table.table--stack tbody td.stack-minor { display: none; }
  /* row tints (critical / stale / unknown) belong to the whole card, not to each cell */
  .table--stack tbody tr[class*="ui-row--"] > td { background: transparent; }
  .table--stack tbody tr.ui-row--critical { background: rgba(239, 68, 68, .05); box-shadow: inset 3px 0 0 var(--danger-500); }
  .table--stack tbody tr.ui-row--stale { background: rgba(245, 158, 11, .06); }
  .table--stack tbody td:first-child > a:first-child {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: var(--tap); margin: -6px 0; font-size: 15px;
  }
  .table--stack tbody td:first-child > a:first-child::after {
    content: ""; flex: none; width: 16px; height: 16px; background: var(--ink-400);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .table--stack tbody td .badge { white-space: normal; }
}
/* Numbers in tables line up (tabular figures) */
table.data td, table.data th { font-variant-numeric: tabular-nums; }

/* Trips page modals (.custom-modal, fuel / account / transactions): bottom sheets on phones like the shared
   .modal — full width, scrollable body, 44px close. Higher specificity than the page's own inline rules. */
@media (max-width: 767.98px) {
  .custom-modal-overlay.active { align-items: flex-end; padding: 0; }
  .custom-modal-overlay .custom-modal {
    max-width: 100%; max-height: calc(100dvh - 24px); display: flex; flex-direction: column;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
    animation: sheetIn var(--dur) var(--ease);
  }
  .custom-modal-overlay .custom-modal__head { padding: 16px; flex: none; }
  .custom-modal-overlay .custom-modal__body {
    flex: 1 1 auto; max-height: none; padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .custom-modal-overlay .custom-modal__close { width: var(--tap); height: var(--tap); flex: none; }
}

/* Chat: the record button shows a microphone / stop SVG from its aria-pressed state (was an emoji swapped by script). */
.chat-mic { display: inline-grid; place-items: center; }
.chat-mic__icon--stop { display: none; }
.chat-mic[aria-pressed="true"] .chat-mic__icon--mic { display: none; }
.chat-mic[aria-pressed="true"] .chat-mic__icon--stop { display: block; color: var(--danger-500); }
@media (max-width: 1023.98px) { .chat-mic { min-width: var(--tap); min-height: var(--tap); } }

/* Feature 28 — an existing record created before a field became required. */
.incomplete-badge { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-size: 13px; }
.incomplete-badge strong { font-weight: 700; }
.incomplete-badge a { margin-left: auto; color: #92400e; font-weight: 600; text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }

/* Owner 2026-10-10: unfinished company profile reminder (partials/ui/onboarding-banner) */
.onb-banner-wrap { padding-bottom: 0; animation: none; }
.onb-banner-wrap .alert { margin-bottom: 0; }