/* =================================================================
   MSS Global Stylesheet
   Shared across: opportunities.html, workbench.html, tracker.html
   ================================================================= */

/* ── MB Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family:'MBCorpoSTitle';
  src:url('fonts/MBCorpoSTitle-Regular-Web.ttf') format('truetype');
  font-weight:400; font-style:normal;
}
@font-face {
  font-family:'MBCorpoSTitle';
  src:url('fonts/MBCorpoSTitle-Bold-Web.ttf') format('truetype');
  font-weight:700; font-style:normal;
}
@font-face {
  font-family:'MBCorpoSTitle';
  src:url('fonts/MBCorpoSTitle-Light-Web.ttf') format('truetype');
  font-weight:300; font-style:normal;
}
@font-face {
  font-family:'MBCorpoSText';
  src:url('fonts/MBCorpoSText-Regular-Web.ttf') format('truetype');
  font-weight:400; font-style:normal;
}
@font-face {
  font-family:'MBCorpoSText';
  src:url('fonts/MBCorpoSText-Bold-Web.ttf') format('truetype');
  font-weight:700; font-style:normal;
}
@font-face {
  font-family:'MBCorpoSText';
  src:url('fonts/MBCorpoSText-Light-Web.ttf') format('truetype');
  font-weight:300; font-style:normal;
}
@font-face {
  font-family:'MBCorpoSTextCond';
  src:url('fonts/MBCorpoSText-CondRegular-Web.ttf') format('truetype');
  font-weight:400; font-style:normal;
}

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:               #f4f4f4;
  --bg-card:          #ffffff;
  --bg-hover:         rgba(0,0,0,0.04);
  --bg-nav:           #000000;
  --bg-nav-active:    rgba(255,255,255,0.16);

  /* Borders / dividers */
  --border:           rgba(0,0,0,0.12);

  /* Text */
  --text-primary:     rgba(0,0,0,0.87);
  --text-secondary:   rgba(0,0,0,0.6);
  --text-muted:       rgba(0,0,0,0.38);

  /* Accent / primary */
  --accent:           #0078d6;
  --accent-dim:       rgba(0,120,214,0.08);

  /* KPI big number */
  --kpi-num:          #008dfc;

  /* Semantic */
  --green:            #198025;
  --green-bg:         rgba(25,128,37,0.08);
  --amber:            #B45309;
  --amber-bg:         rgba(245,158,11,0.08);

  /* Revenue bar segments */
  --bar-paid:         #0078d6;
  --bar-approved:     #99c9ef;
  --bar-processing:   #dbdbdb;

  /* Typography */
  --font:             'MBCorpoSText',    -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title:       'MBCorpoSTitle',   -apple-system, BlinkMacSystemFont, sans-serif;
  --font-cond:        'MBCorpoSTextCond',-apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --nav-h:            64px;
  --drawer-w:         480px;
  --vin-drawer-w:     440px;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--font); background:var(--bg); color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
a { text-decoration:none; color:inherit; }
button, select, input { font-family:var(--font); }
button { border:none; background:none; cursor:pointer; }

/* ── Top Navigation ───────────────────────────────────────────── */
.top-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:var(--bg-nav);
  height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:0 24px;
  gap:16px;
}
.nav-brand {
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-title); font-size:20px; font-weight:400;
  color:#ffffff; white-space:nowrap; line-height:26px;
}
.nav-items {
  display:flex; align-items:center; gap:12px; height:44px;
}
.nav-item {
  display:flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:2px;
  font-family:var(--font); font-size:16px; font-weight:400;
  color:#ffffff; line-height:24px; white-space:nowrap;
  cursor:pointer; transition:background 0.12s;
}
.nav-item:hover { background:rgba(255,255,255,0.08); }
.nav-item.active { background:var(--bg-nav-active); }
.nav-right {
  display:flex; align-items:center; justify-content:flex-end;
}
.nav-icon-btn {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.85); border-radius:24px;
  cursor:pointer; transition:background 0.12s;
}
.nav-icon-btn:hover { background:rgba(255,255,255,0.1); }
/* Workbench badge on nav item */
.nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--accent); color:#fff;
  border-radius:9px; font-size:11px; font-weight:700; line-height:1;
  margin-left:6px;
}

/* ── Admin mode pill (nav bar) ──────────────────────────────── */
.admin-mode-pill {
  display:inline-flex; align-items:center;
  border:1px solid rgba(255,255,255,.55); color:rgba(255,255,255,.9);
  border-radius:20px; padding:3px 11px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  margin-right:6px; user-select:none;
}

/* ── Account dropdown ───────────────────────────────────────── */
.nav-acct-wrap { position:relative; }
.nav-acct-dropdown {
  display:none; position:fixed; top:64px; right:12px;
  width:272px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.15); z-index:600;
  overflow:hidden;
}
.nav-acct-dropdown.open { display:block; }
.acct-identity {
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; gap:10px;
}
.acct-avatar {
  width:34px; height:34px; border-radius:17px; flex-shrink:0;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.acct-info { flex:1; min-width:0; }
.acct-name { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:1px; }
.acct-email { font-size:12px; color:var(--text-muted); margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-role-badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:10px;
  background:var(--accent-dim); color:var(--accent);
  font-size:11px; font-weight:600;
}
.acct-admin-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 16px; border-bottom:1px solid var(--border);
  gap:12px;
}
.acct-admin-label { font-size:13px; font-weight:600; color:var(--text-primary); }
.acct-admin-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.acct-menu-group { padding:5px 0; border-bottom:1px solid var(--border); }
.acct-menu-group:last-child { border-bottom:none; }
.acct-menu-btn {
  display:block; width:100%; text-align:left; padding:9px 16px;
  background:transparent; border:none; cursor:pointer;
  font-size:13px; color:var(--text-primary); font-family:var(--font);
  transition:background .1s;
}
.acct-menu-btn:hover { background:rgba(0,0,0,.04); }
.acct-menu-btn.danger { color:#c0392b; }

/* ── Toggle switch ──────────────────────────────────────────── */
.toggle-switch { position:relative; width:36px; height:20px; flex-shrink:0; display:inline-block; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track {
  position:absolute; inset:0; background:rgba(0,0,0,.15);
  border-radius:10px; cursor:pointer; transition:background .2s;
}
.toggle-track::before {
  content:''; position:absolute; width:16px; height:16px;
  left:2px; top:2px; background:#fff; border-radius:50%;
  transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-track { background:var(--accent); }
.toggle-switch input:checked + .toggle-track::before { transform:translateX(16px); }

/* ── Sub-header (page title + tabs) ──────────────────────────── */
.sub-header {
  padding-top:calc(var(--nav-h) + 40px);
  padding-left:24px; padding-right:24px;
  padding-bottom:0;
  background:var(--bg);
  flex-shrink:0;
}
.page-title {
  font-family:var(--font-title); font-size:40px; font-weight:300;
  color:var(--text-primary); line-height:48px;
}
.tabs {
  display:flex; align-items:flex-end;
  border-bottom:1px solid var(--border);
  margin-top:16px;
}
.tab {
  font-family:var(--font); font-size:14px; font-weight:700;
  color:var(--text-secondary);
  padding:9px 16px;
  cursor:pointer; position:relative; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color 0.15s; line-height:24px;
}
.tab:hover { color:var(--text-primary); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Page content wrapper ─────────────────────────────────────── */
.page {
  flex:1; overflow:hidden;
  padding:28px 20px 0;
  display:flex; flex-direction:column; gap:28px;
}

/* ── KPI Row ──────────────────────────────────────────────────── */
.kpi-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; flex-shrink:0;
}
.kpi-card {
  background:var(--bg-card); border:1px solid var(--border);
  position:relative; height:118px; overflow:hidden;
}
.kpi-icon {
  position:absolute; top:13px; right:13px;
  width:24px; height:24px; color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
}
.kpi-label {
  position:absolute; top:15px; left:15px; right:40px;
  font-family:var(--font); font-size:14px; font-weight:700;
  color:var(--text-primary); line-height:20px; white-space:nowrap;
}
.kpi-value {
  position:absolute; top:43px; left:15px;
  font-family:var(--font-cond); font-size:32px; font-weight:400;
  color:var(--kpi-num); line-height:40px; white-space:nowrap;
}
.kpi-sub {
  position:absolute; top:87px; left:15px;
  font-family:var(--font); font-size:12px; font-weight:400;
  color:var(--text-secondary); line-height:16px; white-space:nowrap;
}

/* ── Combined KPI + action card row ──────────────────────────── */
.kpi-combined {
  display:flex; align-items:stretch; flex-shrink:0; gap:0;
}
.kpi-combined .action-cards {
  display:flex; align-items:stretch; gap:12px;
  padding-right:20px; margin-right:20px;
  border-right:1px solid var(--border);
}
.kpi-combined .kpi-row { flex:1; }

/* ── Actionable KPI cards ─────────────────────────────────────── */
.action-kpi-card {
  position:relative; height:118px; width:188px;
  background:var(--bg-card); border:1px solid var(--border);
  border-left:2px solid var(--accent);
  cursor:pointer; overflow:hidden; flex-shrink:0;
  transition:box-shadow 0.14s, background 0.14s, border-color 0.14s;
}
.action-kpi-card:hover { box-shadow:0 2px 10px rgba(0,0,0,0.09); }
.action-kpi-card.active {
  background:rgba(0,120,214,0.05); border-color:var(--accent);
}
.action-kpi-label {
  position:absolute; top:15px; left:14px; right:32px;
  font-size:12px; font-weight:700; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.action-kpi-value {
  position:absolute; top:40px; left:14px;
  font-family:var(--font-cond); font-size:32px; font-weight:400;
  color:var(--kpi-num); line-height:40px;
}
.action-kpi-sub {
  position:absolute; top:87px; left:14px;
  display:flex; align-items:center; gap:5px;
  font-size:12px; color:var(--text-secondary); white-space:nowrap;
}
.action-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.action-dot.amber { background:#B45309; }
.action-dot.blue  { background:var(--accent); }
.action-dot.green { background:var(--green); }
.action-kpi-clear {
  position:absolute; top:11px; right:10px;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:none; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; cursor:pointer;
  border:none; padding:0; line-height:1;
}
.action-kpi-card.active .action-kpi-clear { display:flex; }

/* ── Toolbar ──────────────────────────────────────────────────── */
.toolbar { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Filled search — Material filled text field style */
.search-wrap {
  display:flex; align-items:center; gap:8px;
  width:320px; min-height:36px; padding:0 12px;
  background:transparent;
  border:none; border-bottom:1px solid rgba(0,0,0,0.42);
  border-radius:4px 4px 0 0; transition:border-color 0.15s;
}
.search-wrap:focus-within { border-bottom-color:var(--accent); }
.search-wrap svg { color:var(--text-secondary); flex-shrink:0; }
.search-input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:16px; color:var(--text-primary); font-family:var(--font); line-height:24px;
}
.search-input::placeholder { color:var(--text-secondary); }

/* Icon button (round) */
.icon-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); border-radius:4px; transition:background 0.12s;
}
.icon-btn:hover { background:rgba(0,0,0,0.06); }

/* Labeled filter/action button */
.filter-btn {
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 14px;
  border:1px solid var(--border); border-radius:4px;
  background:transparent; color:var(--text-secondary);
  font-size:13px; font-weight:500; cursor:pointer;
  transition:background 0.12s; white-space:nowrap; flex-shrink:0;
}
.filter-btn:hover { background:rgba(0,0,0,0.06); }

/* Toolbar vertical divider */
.toolbar-divider { width:1px; height:36px; background:var(--border); flex-shrink:0; }

/* Date toggle — segmented button */
.date-toggle {
  display:flex; align-items:stretch;
  border:1px solid var(--border); border-radius:4px;
  overflow:hidden; height:36px; flex-shrink:0;
}
.date-seg {
  display:flex; align-items:center; justify-content:center;
  padding:0 16px;
  font-family:var(--font); font-size:13px; font-weight:400;
  color:var(--text-secondary); line-height:23px;
  border-right:1px solid var(--border);
  cursor:pointer; transition:background 0.1s, color 0.1s; white-space:nowrap;
}
.date-seg:last-child { border-right:none; }
.date-seg:hover { background:rgba(0,0,0,0.04); color:var(--text-primary); }
.date-seg.active { background:var(--accent-dim); color:var(--accent); }
.date-seg-icon {
  padding:0 12px; border-right:1px solid var(--border);
  color:var(--text-secondary); cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:400; white-space:nowrap;
  transition:background 0.1s;
}
.date-seg-icon:hover { background:rgba(0,0,0,0.04); }

.toolbar-spacer { flex:1; }
.sort-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sort-label { font-size:12px; color:var(--text-secondary); white-space:nowrap; }
.sort-select {
  height:36px; padding:0 28px 0 10px; border-radius:4px;
  border:1px solid var(--border); background:var(--bg-card);
  background-image:url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%23888' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
  font-family:var(--font); font-size:13px; color:var(--text-primary);
  outline:none; appearance:none; -webkit-appearance:none; cursor:pointer;
}

/* ── Data Table ───────────────────────────────────────────────── */
.table-wrap {
  background:var(--bg-card); border:1px solid var(--border);
  overflow:hidden; flex:1; display:flex; flex-direction:column;
}
table { width:100%; border-collapse:collapse; }
thead { background:var(--bg-card); }
thead tr { border-bottom:none; }
th {
  padding:0 10px; height:52px; text-align:left;
  font-family:var(--font); font-size:14px; font-weight:700;
  color:var(--text-primary); white-space:nowrap; vertical-align:middle;
  position:sticky; top:0; z-index:2; background:var(--bg-card);
  box-shadow:inset 0 -1px 0 var(--border);
}
th:not(:last-child)::after {
  content:''; position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:33%; background:var(--border);
}
th.right { text-align:right; }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.1s; cursor:pointer; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg-hover); }
td { padding:13px 10px; vertical-align:middle; }
td.right { text-align:right; }

/* Vehicle cell */
.vehicle-cell { display:flex; align-items:center; gap:16px; }
.v-thumb { width:120px; height:72px; flex-shrink:0; overflow:hidden; }
.v-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.v-name {
  font-family:var(--font); font-size:14px; font-weight:700;
  color:var(--text-primary); margin-bottom:3px;
}
.v-sub { font-size:12px; color:var(--text-secondary); white-space:nowrap; }

/* Units */
.units-val { font-family:var(--font); font-size:14px; color:var(--text-primary); }

/* Programs chip */
.prog-pill {
  display:inline-flex; align-items:center;
  height:32px; padding:0 12px; border-radius:9999px;
  background:rgba(0,0,0,0.08);
  font-family:var(--font); font-size:13px; color:var(--text-primary); white-space:nowrap;
}

/* Revenue bar */
.rev-wrap { min-width:200px; max-width:300px; }
.rev-bar {
  height:8px; border-radius:2px; overflow:hidden; display:flex;
  background:var(--bar-processing); margin-bottom:8px;
}
.rev-paid       { background:var(--bar-paid); }
.rev-approved   { background:var(--bar-approved); }
.rev-legend { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rev-item { display:flex; align-items:center; gap:4px; }
.rev-dot { width:6px; height:6px; border-radius:3px; flex-shrink:0; }
.rev-dot-paid       { background:var(--bar-paid); }
.rev-dot-approved   { background:var(--bar-approved); }
.rev-dot-processing { background:var(--bar-processing); }
.rev-lbl { font-size:11px; color:var(--text-secondary); letter-spacing:0.065px; white-space:nowrap; }

/* Eligibility chip */
.elig {
  display:inline-flex; align-items:center;
  height:32px; padding:0 12px; border-radius:9999px;
  font-family:var(--font); font-size:13px; white-space:nowrap;
}
.elig-eligible { background:var(--green-bg); border:1px solid var(--green-bg); color:var(--green); }
.elig-partial  { background:var(--amber-bg); border:1px solid var(--amber-bg); color:var(--amber); }

/* Amounts */
.amt       { font-family:var(--font); font-size:14px; font-weight:400; color:var(--text-primary); }
.amt-total { font-family:var(--font); font-size:14px; font-weight:700; color:var(--text-primary); }

/* ── Table footer / Pagination ────────────────────────────────── */
.pagination {
  display:flex; align-items:center; justify-content:flex-end; gap:32px;
  padding:0 20px; height:52px; min-height:52px;
  border-top:1px solid var(--border); flex-shrink:0; background:var(--bg-card);
}
.pag-inner { display:flex; align-items:center; gap:10px; }
.pag-label  { font-family:var(--font); font-size:13px; color:var(--text-secondary); }
.pag-select {
  height:28px; padding:0 22px 0 8px; border-radius:4px;
  border:1px solid var(--border); background:var(--bg-card);
  background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23888' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
  font-family:var(--font); font-size:13px; color:var(--text-primary);
  outline:none; appearance:none; -webkit-appearance:none; cursor:pointer;
}
.pag-range { font-family:var(--font); font-size:13px; color:var(--text-secondary); }
.pag-nav   { display:flex; align-items:center; gap:4px; }
.pag-btn {
  width:32px; height:32px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); cursor:pointer; transition:background 0.1s;
}
.pag-btn:hover    { background:rgba(0,0,0,0.06); }
.pag-btn.disabled { opacity:0.3; pointer-events:none; }

/* ── Utility Buttons ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 16px; border-radius:4px;
  font-family:var(--font); font-size:14px; font-weight:700;
  cursor:pointer; transition:background 0.12s, color 0.12s; white-space:nowrap;
  border:1px solid transparent; box-sizing:border-box;
}
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:#0068c0; border-color:#0068c0; }
.btn-ghost {
  background:transparent; color:var(--text-primary);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:rgba(0,0,0,0.04); }
.btn-danger { background:transparent; color:#c0392b; border:1px solid rgba(192,57,43,0.3); }
.btn-danger:hover { background:rgba(192,57,43,0.06); }

/* ── Backdrop (shared by all drawers/modals) ──────────────────── */
.backdrop {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,0.32);
  opacity:0; pointer-events:none;
  transition:opacity 0.2s;
}
.backdrop.open { opacity:1; pointer-events:all; }

/* ── Drawer (side panel) ──────────────────────────────────────── */
.drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:310;
  width:var(--drawer-w); background:var(--bg-card);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 0.22s cubic-bezier(.4,0,.2,1);
  border-left:1px solid var(--border);
}
.drawer.open { transform:translateX(0); }
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.drawer-title {
  font-family:var(--font-title); font-size:20px; font-weight:400;
  color:var(--text-primary); line-height:28px;
}
.drawer-close {
  width:36px; height:36px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); cursor:pointer; transition:background 0.12s;
}
.drawer-close:hover { background:rgba(0,0,0,0.06); }
.drawer-body { flex:1; overflow-y:auto; padding:24px; }

/* VIN drawer (narrower) */
.vin-drawer { width:var(--vin-drawer-w); }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,0.32);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.18s;
}
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-card); border-radius:4px;
  width:440px; max-width:calc(100vw - 48px);
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  transform:scale(0.96); transition:transform 0.18s;
}
.modal-backdrop.open .modal { transform:scale(1); }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px; border-bottom:1px solid var(--border);
}
.modal-title {
  font-family:var(--font); font-size:16px; font-weight:700;
  color:var(--text-primary);
}
.modal-body { padding:20px 24px; }
.modal-footer {
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:16px 24px; border-top:1px solid var(--border);
}

/* ── Add to List Modal specifics ──────────────────────────────── */
.atl-vehicle {
  display:flex; align-items:center; gap:14px;
  padding:14px 0; margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.atl-vehicle-thumb {
  width:72px; height:44px; flex-shrink:0; overflow:hidden;
}
.atl-vehicle-thumb img { width:100%; height:100%; object-fit:contain; }
.atl-vehicle-name { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.atl-vehicle-vin  { font-size:12px; color:var(--text-secondary); font-family:monospace; }
.atl-list-section { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.atl-list-option {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:4px; cursor:pointer;
  transition:background 0.1s;
}
.atl-list-option:hover { background:var(--bg-hover); }
.atl-list-option.selected { background:var(--accent-dim); }
.atl-list-option input[type=radio] { accent-color:var(--accent); flex-shrink:0; }
.atl-list-name  { font-size:14px; color:var(--text-primary); }
.atl-divider    { height:1px; background:var(--border); margin:8px 0; }
.atl-new-row    { display:flex; align-items:center; gap:8px; }
.atl-new-input  {
  flex:1; height:36px; padding:0 10px; border-radius:4px;
  border:1px solid var(--border); background:var(--bg-card);
  font-family:var(--font); font-size:14px; color:var(--text-primary); outline:none;
}
.atl-new-input:focus { border-color:var(--accent); }
.atl-new-add {
  height:36px; padding:0 14px; border-radius:4px;
  background:var(--accent); color:#fff;
  font-family:var(--font); font-size:13px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:background 0.12s;
}
.atl-new-add:hover { background:#0068c0; }

/* ── Remove Confirm Modal specifics ───────────────────────────── */
.rmv-message {
  font-size:14px; color:var(--text-secondary); line-height:20px; margin-bottom:16px;
}

/* ── Placeholder (shell pages) ────────────────────────────────── */
.page-placeholder {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:80px 24px; color:var(--text-muted);
}
.page-placeholder-icon { opacity:0.35; }
.page-placeholder-title {
  font-family:var(--font-title); font-size:24px; font-weight:400;
  color:var(--text-secondary);
}
.page-placeholder-sub { font-size:14px; color:var(--text-muted); text-align:center; }

/* ── Table + AI Panel layout ───────────────────────────────────── */
.table-ai-wrap {
  flex:1; min-height:0; overflow:hidden;
  display:flex; gap:24px; align-items:stretch;
  padding-bottom:20px;
}
.table-ai-wrap > .table-wrap { flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; }
.table-col { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); background:var(--bg-card); }
.table-col > .table-wrap { flex:1; min-height:0; overflow-y:auto; overflow-x:auto; border:none; }

/* ── AI Panel ──────────────────────────────────────────────────── */
.ai-panel {
  width:300px; flex-shrink:0; display:flex; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--border);
  overflow:hidden; min-height:0;
  transition:width 0.22s cubic-bezier(.4,0,.2,1);
}
.ai-panel.collapsed { width:48px; min-width:48px; }

/* Header */
.ai-panel-header {
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--border);
  flex-shrink:0; background:var(--bg-card); min-width:0;
}
.ai-panel.collapsed .ai-panel-header {
  flex-direction:column; justify-content:flex-start; border-bottom:none;
  padding:14px 0 0; align-items:center; gap:14px; height:100%;
}
.ai-panel-icon {
  width:22px; height:22px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:11px; color:#fff;
}
.ai-panel-title {
  font-family:var(--font); font-size:13px; font-weight:700;
  color:var(--text-primary); white-space:nowrap; flex-shrink:0;
}
/* context label — JS generates .ai-ctx-label */
.ai-ctx-label {
  flex:1; min-width:0;
  font-size:11px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* collapse button — JS generates .ai-collapse-btn */
.ai-collapse-btn {
  width:24px; height:24px; border:none; background:transparent;
  cursor:pointer; color:var(--text-secondary); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s; flex-shrink:0;
}
.ai-collapse-btn:hover { background:rgba(0,0,0,.06); color:var(--text-primary); }
.ai-panel.collapsed .ai-panel-title,
.ai-panel.collapsed .ai-ctx-label { display:none; }
.ai-panel.collapsed .ai-panel-body,
.ai-panel.collapsed .ai-panel-footer { display:none; }
/* vertical label when collapsed — JS generates .ai-collapsed-label */
.ai-collapsed-label {
  display:none; writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); white-space:nowrap; cursor:pointer;
  padding:12px 0;
}
.ai-panel.collapsed .ai-collapsed-label { display:block; }

/* Body */
.ai-panel-body {
  flex:1; overflow-y:auto; padding:16px 14px;
  display:flex; flex-direction:column; gap:16px;
}

/* Empty state */
.ai-empty { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ai-empty-icon {
  width:36px; height:36px; background:var(--accent-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--accent);
}
/* JS generates .ai-empty-title */
.ai-empty-title {
  font-family:var(--font); font-size:13px; font-weight:700;
  color:var(--text-primary); line-height:1.3;
}
.ai-empty-sub { font-size:12px; color:var(--text-secondary); line-height:1.5; }

/* Suggestion chips — JS generates .ai-chip buttons */
.ai-suggestions { display:flex; flex-direction:column; gap:6px; width:100%; }
.ai-chip {
  display:block; width:100%; padding:9px 11px;
  background:var(--bg); border:1px solid var(--border);
  cursor:pointer; text-align:left; font-family:var(--font);
  font-size:12px; color:var(--text-primary); line-height:1.4;
  transition:border-color .12s, background .12s;
}
.ai-chip:hover { border-color:rgba(0,120,214,.4); background:var(--accent-dim); }

/* Chat thread */
.ai-thread { display:flex; flex-direction:column; gap:14px; }
/* User message — JS: div.ai-msg.ai-msg-user > span.ai-msg-text */
.ai-msg-user { display:flex; justify-content:flex-end; }
.ai-msg-user .ai-msg-text {
  max-width:88%; padding:8px 12px;
  background:var(--accent-dim); font-family:var(--font);
  font-size:12px; color:var(--text-primary); line-height:1.5;
}
/* AI message — JS: div.ai-msg.ai-msg-ai > span.ai-msg-icon + span.ai-msg-text */
.ai-msg-ai { display:flex; gap:8px; align-items:flex-start; }
.ai-msg-ai .ai-msg-icon {
  width:20px; height:20px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; font-size:10px; color:#fff;
}
.ai-msg-ai .ai-msg-text {
  flex:1; min-width:0;
  font-family:var(--font); font-size:12px; color:var(--text-primary); line-height:1.6;
}
.ai-inline-ref {
  display:inline-flex; align-items:center; padding:1px 7px;
  background:var(--accent-dim); font-family:var(--font);
  font-size:11px; font-weight:700; color:var(--accent); white-space:nowrap;
}
/* Action buttons — JS generates .ai-action-btn */
.ai-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ai-action-btn {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border:1px solid rgba(0,120,214,.3); background:var(--accent-dim);
  font-family:var(--font); font-size:11px; font-weight:700; color:var(--accent);
  cursor:pointer; transition:all .12s;
}
.ai-action-btn:hover { background:rgba(0,120,214,.15); border-color:rgba(0,120,214,.5); }

/* Typing indicator — JS: span.ai-typing > span (×3) */
.ai-typing-row { align-items:center; }
.ai-typing { display:flex; gap:4px; padding:4px 0; align-items:center; }
.ai-typing > span {
  width:6px; height:6px; border-radius:50%; background:var(--text-muted);
  animation:ai-bounce 1.2s ease-in-out infinite; flex-shrink:0;
}
.ai-typing > span:nth-child(2) { animation-delay:.2s; }
.ai-typing > span:nth-child(3) { animation-delay:.4s; }
@keyframes ai-bounce {
  0%,80%,100% { transform:translateY(0); opacity:.4; }
  40%          { transform:translateY(-5px); opacity:1; }
}

/* Footer */
.ai-panel-footer {
  border-top:1px solid var(--border); padding:10px 12px; flex-shrink:0;
  display:flex; align-items:center; gap:8px;
  background:var(--bg-card);
}
/* Input is a direct child of footer (no wrapper div) */
.ai-input {
  flex:1; min-width:0;
  height:34px; padding:0 10px;
  background:var(--bg); border:1px solid var(--border); outline:none;
  font-family:var(--font); font-size:12px; color:var(--text-primary);
  transition:border-color .12s;
}
.ai-input:focus { border-color:var(--accent); }
.ai-input::placeholder { color:var(--text-muted); }
.ai-send-btn {
  width:32px; height:32px; border:none; flex-shrink:0;
  background:var(--accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, opacity .12s; opacity:.35;
}
.ai-send-btn:not([disabled]) { opacity:1; }
.ai-send-btn:not([disabled]):hover { background:#0068c0; }