/* ============================================================
   BikeBid — hi-fi dashboard
   Clean modern SaaS · Plus Jakarta Sans · blue + green on white
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#015ae6;            /* primary — settable by Tweaks */
  --blue-d:color-mix(in oklab, var(--blue) 84%, #000);
  --blue-50:color-mix(in oklab, var(--blue) 8%, #fff);
  --blue-100:color-mix(in oklab, var(--blue) 17%, #fff);
  --green:#16a34a;
  --green-50:#dcfce7;
  --green-700:#15803d;
  --red:#dc2626;

  --ink:#0f172a;
  --ink-2:#475569;
  --ink-3:#64748b;
  --ink-4:#94a3b8;

  --bg:#f5f6f8;
  --card:#ffffff;
  --line:#e8eaee;
  --line-2:#eef0f3;

  --r-lg:18px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.04);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --sidebar:264px;
  font-family:'Poppins', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Poppins', system-ui, sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
i[data-lucide]{ width:18px; height:18px; stroke-width:2; }

/* ---------------- layout shell ---------------- */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar); flex:none; background:var(--card);
  border-right:1px solid var(--line); padding:22px 16px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh;
  transition:width .26s cubic-bezier(.4,0,.2,1);
}
.brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 22px; }
.brand-home{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; border-radius:8px;
  cursor:pointer; transition:opacity .12s ease; }
.brand-home:hover{ opacity:.78; }
.brand .glyph{ height:34px; flex:none; display:flex; align-items:center; justify-content:center; }
.brand .glyph img{ height:34px; width:auto; display:block; }
.brand .glyph i[data-lucide]{ width:30px; height:30px; stroke-width:2.2; }
.brand .word{ font-size:21px; font-weight:800; letter-spacing:-.02em; }
.brand .word b{ color:var(--blue); font-weight:800; }

/* notification bell */
.brand .bell{ margin-left:auto; position:relative; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s; flex:none; }
.brand .bell i[data-lucide]{ width:18px; height:18px; }
.brand .bell:hover{ background:var(--bg); color:var(--ink); }
.brand .bell.has-notif{ color:var(--blue); border-color:color-mix(in oklab, var(--blue) 30%, var(--line)); }
.brand .bell.muted{ color:var(--ink-4); }                 /* greyed when nothing new */
.brand .bell-badge{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--red); color:#fff; font-size:10.5px; font-weight:800; line-height:1; display:flex; align-items:center;
  justify-content:center; border:2px solid var(--card); }
.brand .bell.muted .bell-badge{ display:none; }

/* collapse toggle — its own row under the logo (subtle) */
.nav-collapse{ display:flex; align-items:center; justify-content:center; gap:5px; width:auto; align-self:flex-start;
  height:26px; margin:0 0 8px 6px; padding:0 8px; border-radius:7px; border:none; background:transparent; color:var(--ink-4);
  font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; transition:background .12s, color .12s; position:relative; }
.nav-collapse:hover{ background:var(--bg); color:var(--ink-2); }
.nav-collapse i[data-lucide]{ width:15px; height:15px; }
/* notification bubble mirrored onto the collapse arrow — only while collapsed */
.nav-collapse .collapse-badge{ display:none; position:absolute; top:-5px; right:-5px; min-width:16px; height:16px;
  padding:0 4px; border-radius:8px; background:var(--red); color:#fff; font-size:10px; font-weight:800; line-height:1;
  align-items:center; justify-content:center; border:2px solid var(--card); }
.app.collapsed .nav-collapse.has-notif .collapse-badge{ display:flex; }

.nav{ display:flex; flex-direction:column; gap:3px; }
.nav-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4);
  padding:12px 12px 6px; }
.nav a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:600; font-size:14px; cursor:pointer; }
.nav a:hover{ background:var(--bg); color:var(--ink); }
.nav a.active{ background:var(--blue-50); color:var(--blue); }
.nav a.active i[data-lucide]{ color:var(--blue); }
.nav a i[data-lucide]{ color:var(--ink-3); }

.profile{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-md);
  border:1px solid var(--line); cursor:pointer; position:relative; transition:background .12s, border-color .12s; }
.profile:hover{ background:var(--bg); }
.profile.menu-open{ background:var(--bg); border-color:color-mix(in oklab, var(--blue) 28%, var(--line)); }
.profile .pic{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:14px; letter-spacing:.03em; text-transform:uppercase; }
.profile .pic i[data-lucide]{ width:22px; height:22px; stroke-width:2; }
.profile .pic img{ width:100%; height:100%; object-fit:cover; }
.profile .nm{ font-weight:700; font-size:13.5px; line-height:1.15; }
.profile .org{ font-size:12px; color:var(--ink-3); line-height:1.2; }
.profile .role{ font-size:10.5px; color:var(--ink-4); font-weight:600; letter-spacing:.02em; margin-top:1px; }
.profile .chev{ margin-left:auto; color:var(--ink-4); transition:transform .16s ease; }
.profile.menu-open .chev{ transform:rotate(180deg); }

/* profile popover menu */
.profile-menu{ position:fixed; width:248px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 18px 50px rgba(16,24,40,.22); z-index:1300; overflow:hidden; padding:7px;
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
.profile-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.profile-menu button{ width:100%; display:flex; align-items:center; gap:12px; padding:11px 12px; border:none;
  background:transparent; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2);
  border-radius:9px; cursor:pointer; text-align:left; }
.profile-menu button:hover{ background:var(--bg); color:var(--ink); }
.profile-menu button i[data-lucide]{ width:17px; height:17px; color:var(--ink-3); }
.profile-menu button.danger{ color:var(--red); }
.profile-menu button.danger:hover{ background:color-mix(in oklab, var(--red) 8%, #fff); }
.profile-menu button.danger i[data-lucide]{ color:var(--red); }
.profile-menu .sep{ height:1px; background:var(--line-2); margin:6px 8px; }

/* collapsed sidebar */
.app.collapsed .sidebar{ width:78px; }
.app.collapsed .brand .word,
.app.collapsed .brand .bell,
.app.collapsed .nav-collapse .lbl,
.app.collapsed .nav a span,
.app.collapsed .nav-label,
.app.collapsed .profile .nm,
.app.collapsed .profile .org,
.app.collapsed .profile .role,
.app.collapsed .profile .chev{ display:none; }
.app.collapsed .nav a{ justify-content:center; }
.app.collapsed .brand{ justify-content:center; }
.app.collapsed .brand-home{ justify-content:center; }
.app.collapsed .nav-collapse{ align-self:center; margin:0 auto 8px; padding:0; width:34px; }
.app.collapsed .nav-collapse svg,
.app.collapsed .nav-collapse i[data-lucide]{ transform:rotate(180deg); }
.app.collapsed .profile{ justify-content:center; }

/* back button — small chevron in the gutter, left of the page title */
.back-btn{ position:absolute; left:-30px; top:12px; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border:none; background:transparent; color:var(--ink-4); cursor:pointer; padding:0;
  border-radius:7px; transition:color .12s, background .12s, transform .08s; }
.back-btn:hover{ color:var(--ink-2); background:var(--bg); }
.back-btn:active{ transform:translateX(-2px); }
.back-btn i[data-lucide]{ width:23px; height:23px; }

/* notifications dropdown panel */
.notif-panel{ position:fixed; width:330px; max-width:calc(100vw - 24px); background:var(--card); border:1px solid var(--line);
  border-radius:15px; box-shadow:0 18px 50px rgba(16,24,40,.22); z-index:1300; overflow:hidden; display:none; }
.notif-panel.open{ display:block; }
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 17px; border-bottom:1px solid var(--line); }
.notif-head h4{ margin:0; font-size:15px; font-weight:700; }
.notif-head .mark{ font-size:12.5px; font-weight:600; color:var(--blue); cursor:pointer; background:none; border:none; font-family:inherit; padding:0; }
.notif-head .mark:hover{ text-decoration:underline; }
.notif-list{ max-height:344px; overflow:auto; }
.notif-item{ display:flex; gap:11px; padding:12px 17px; border-bottom:1px solid var(--line-2); cursor:pointer; }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--bg); }
.notif-item.unread{ background:color-mix(in oklab, var(--blue) 5%, #fff); }
.notif-item .nico{ width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--blue-50); color:var(--blue); }
.notif-item .nico i[data-lucide]{ width:16px; height:16px; }
.notif-item .nt{ font-size:13.5px; font-weight:700; line-height:1.25; }
.notif-item .ns{ font-size:12.5px; color:var(--ink-3); margin-top:1px; }
.notif-item .ntime{ font-size:11px; color:var(--ink-4); margin-top:3px; }
.notif-item .nbody{ flex:1; min-width:0; }
.notif-item .notif-view{ align-self:center; flex:none; font-family:inherit; font-size:12px; font-weight:700;
  color:var(--blue); background:var(--blue-50); border:1px solid color-mix(in oklab,var(--blue) 22%,#fff);
  border-radius:8px; padding:5px 11px; cursor:pointer; transition:background .12s, border-color .12s; }
.notif-item .notif-view:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.notif-item .dotunread{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; align-self:center; }
.notif-empty{ padding:34px 16px; text-align:center; color:var(--ink-4); font-size:13.5px; font-weight:600; }
.notif-foot{ padding:12px 16px; text-align:center; border-top:1px solid var(--line); }
.notif-foot a{ color:var(--blue); font-weight:700; font-size:13px; cursor:pointer; }

/* ---------------- main ---------------- */
.main{ flex:1; min-width:0; padding:30px 38px 56px; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }

/* hero row */
.hero{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:26px; align-items:start; margin-bottom:26px; }
.welcome h1{ font-size:42px; line-height:1.04; font-weight:800; letter-spacing:-.025em; margin:6px 0 14px; }
.welcome p{ font-size:16px; color:var(--ink-3); margin:0 0 26px; max-width:30ch; }
.cta-col{ display:flex; flex-direction:column; gap:14px; max-width:320px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:inherit;
  font-weight:700; font-size:15px; padding:15px 20px; border-radius:var(--r-md); cursor:pointer; border:1px solid transparent;
  transition:transform .08s ease, box-shadow .12s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn.primary{ background:var(--blue); color:#fff; box-shadow:0 6px 18px color-mix(in oklab,var(--blue) 30%,transparent); }
.btn.primary:hover{ background:var(--blue-d); }
.btn.outline{ background:var(--card); color:var(--blue); border-color:var(--line); }
.btn.outline:hover{ border-color:var(--blue); }
.btn i[data-lucide]{ width:20px; height:20px; }

/* featured appraisal card */
.featured{ padding:20px; }
.featured .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.featured .top .ttl{ font-size:18px; font-weight:700; }
.featured-body{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; }
.featured-photo{ width:100%; height:172px; border-radius:var(--r-md); }
.fstats{ display:flex; flex-direction:column; gap:2px; }
.fstat{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.fstat:last-child{ border-bottom:none; }
.fstat i[data-lucide]{ color:var(--ink-4); width:17px; height:17px; }
.fstat .k{ color:var(--ink-3); font-size:13.5px; }
.fstat .v{ margin-left:auto; font-weight:700; font-size:14px; }
.fstat .v.green{ color:var(--green); }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; }
.badge.green{ background:var(--green-50); color:var(--green-700); }
.badge.blue{ background:var(--blue-100); color:var(--blue-d); }
.badge.gray{ background:#f1f5f9; color:var(--ink-3); }
.badge.dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

.cmp-title{ font-size:14px; font-weight:700; margin:20px 0 10px; }
.otable{ width:100%; border-collapse:collapse; }
.otable th{ text-align:left; font-size:11.5px; font-weight:600; color:var(--ink-4); text-transform:uppercase;
  letter-spacing:.03em; padding:0 0 9px; border-bottom:1px solid var(--line); }
.otable td{ padding:12px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; vertical-align:top; }
.otable td.buyer{ width:30%; padding-right:12px; }
.otable td.offer{ width:18%; white-space:nowrap; padding-right:12px; }
.otable td.note{ color:var(--ink-3); line-height:1.4; text-wrap:pretty; }
.otable tr:last-child td{ border-bottom:none; }
.otable .buyer{ font-weight:700; white-space:nowrap; }
.tag-high{ font-size:10.5px; font-weight:700; color:var(--green-700); background:var(--green-50); padding:2px 8px; border-radius:6px; align-self:flex-start; }
.otable .offer{ font-weight:800; color:var(--green); font-size:15px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.otable .offer .amt{ white-space:nowrap; }
.viewlink{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--blue); font-weight:700;
  padding:14px 0 4px; cursor:pointer; }
.viewlink i[data-lucide]{ width:18px; height:18px; }

/* stat tiles */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:18px; }
.tile{ padding:18px; display:flex; flex-direction:column; gap:8px; }
.tile .ico{ width:42px; height:42px; border-radius:11px; background:var(--blue-50); color:var(--blue);
  display:flex; align-items:center; justify-content:center; }
.tile .ico i[data-lucide]{ width:21px; height:21px; }
.tile .lbl{ font-size:13px; color:var(--ink-3); font-weight:600; margin-top:2px; }
.tile .big{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.tile .delta{ font-size:12.5px; font-weight:600; color:var(--ink-4); display:flex; align-items:center; gap:5px; }
.tile .delta.up{ color:var(--green); }
.tile .delta.down{ color:var(--red); }
.tile .delta i[data-lucide]{ width:14px; height:14px; }

/* action cards */
.actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:26px; }
.action{ padding:18px 20px; display:flex; align-items:center; gap:16px; cursor:pointer; transition:border-color .12s, transform .08s; }
.action:hover{ border-color:var(--blue); transform:translateY(-1px); }
.action .ico{ width:46px; height:46px; border-radius:12px; background:var(--blue-50); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex:none; }
.action .ico i[data-lucide]{ width:22px; height:22px; }
.action .nm{ font-weight:700; font-size:15px; }
.action .ds{ font-size:13px; color:var(--ink-3); }
.action .arrow{ margin-left:auto; color:var(--blue); }

/* bottom row */
.bottom{ display:grid; grid-template-columns:1.62fr 1fr; gap:22px; align-items:start; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; }
.panel-head .h{ font-size:18px; font-weight:700; }
.panel-head .link{ color:var(--blue); font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.panel-head .link i[data-lucide]{ width:15px; height:15px; }

/* recent appraisals table */
.rtable{ width:100%; border-collapse:collapse; }
.rtable th{ text-align:left; font-size:11.5px; font-weight:600; color:var(--ink-4); text-transform:uppercase;
  letter-spacing:.03em; padding:6px 22px 12px; }
.rtable th:first-child{ padding-left:22px; }
.rtable td{ padding:14px 22px; border-top:1px solid var(--line-2); vertical-align:middle; }
.rtable tr:hover td{ background:#fafbfc; }
.bikecell{ display:flex; align-items:center; gap:12px; }
.bikecell .thumb{ width:54px; height:40px; border-radius:8px; flex:none; }
.bikecell .nm{ font-weight:700; font-size:14px; line-height:1.15; }
.bikecell .vin{ font-size:11.5px; color:var(--ink-4); font-family:ui-monospace,monospace; margin-top:1px; }
.muted{ color:var(--ink-3); font-size:13px; }
.offernum{ font-weight:700; }
.hioffer{ font-weight:800; color:var(--green); }
.upd{ font-size:12.5px; color:var(--ink-4); white-space:nowrap; }
.rtable .more{ color:var(--ink-4); cursor:pointer; }
.tfoot{ padding:14px 22px 18px; color:var(--ink-4); font-size:12.5px; }

/* right column panels */
.feed{ display:flex; flex-direction:column; gap:2px; padding:4px 22px 20px; }
.fitem{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.fitem:last-child{ border-bottom:none; }
.fitem .fico{ width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--blue-50); color:var(--blue); }
.fitem .fico.green{ background:var(--green-50); color:var(--green); }
.fitem .fico i[data-lucide]{ width:16px; height:16px; }
.fitem .ft{ font-size:13.5px; font-weight:600; line-height:1.3; }
.fitem .fs{ font-size:12.5px; color:var(--ink-3); }
.fitem .ftime{ margin-left:auto; font-size:11.5px; color:var(--ink-4); white-space:nowrap; }

.buyers{ padding:4px 22px 18px; }
.empty-state{ padding:30px 10px; text-align:center; color:var(--ink-4); font-size:13.5px; font-weight:600; }
.brow{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.brow:last-child{ border-bottom:none; }
.brank{ width:24px; height:24px; border-radius:7px; background:var(--bg); color:var(--ink-3); font-weight:700;
  font-size:12.5px; display:flex; align-items:center; justify-content:center; flex:none; }
.brow:first-child .brank{ background:var(--blue-50); color:var(--blue); }
.bname{ font-weight:700; font-size:14px; }
.bamt{ margin-left:auto; font-weight:800; font-size:14px; }
.report-link{ display:flex; align-items:center; gap:8px; color:var(--blue); font-weight:700; font-size:14px;
  padding:16px 22px 18px; border-top:1px solid var(--line-2); cursor:pointer; }
.report-link i[data-lucide]{ width:16px; height:16px; }

/* placeholder slot look */
image-slot{ --slot-bg:#eef1f5; }

/* tweaks mount */
#tweaks-root{ position:fixed; inset:0; pointer-events:none; z-index:9999; }
#tweaks-root > *{ pointer-events:auto; }
.tk-l{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }

@media (max-width:1180px){
  .hero{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .bottom{ grid-template-columns:1fr; }
}

/* ============================================================
   DARK MODE
   Set <html data-theme="dark"> (theme.js does this from localStorage).
   Token overrides flip the whole app; the targeted rules below fix the
   handful of places that hardcoded light colours. Every selector is
   prefixed with :root[data-theme="dark"] so it out-specifies page CSS.
   ============================================================ */
:root[data-theme="dark"]{
  --blue-50:color-mix(in oklab, var(--blue) 24%, var(--card));
  --blue-100:color-mix(in oklab, var(--blue) 36%, var(--card));
  --green:#26c281;
  --green-50:color-mix(in oklab, var(--green) 22%, var(--card));
  --green-700:#5fd6a0;

  --ink:#eef2f7;
  --ink-2:#c3ccd8;
  --ink-3:#93a0ad;
  --ink-4:#6a7785;

  --bg:#0e1217;
  --card:#161b22;
  --line:#262d37;
  --line-2:#1e242c;

  --shadow:0 1px 2px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
}
:root[data-theme="dark"]{ color-scheme:dark; }

/* neutral slate chips / pills / badges that were hardcoded light */
:root[data-theme="dark"] .badge.gray,
:root[data-theme="dark"] .sbadge.draft,
:root[data-theme="dark"] .sbadge.deleted,
:root[data-theme="dark"] .cond-pill.na,
:root[data-theme="dark"] .cond-pill.gray,
:root[data-theme="dark"] .tl-dot.gray,
:root[data-theme="dark"] .offer-state.declined,
:root[data-theme="dark"] .dm-ic.gray,
:root[data-theme="dark"] .va-chip,
:root[data-theme="dark"] .wholesalers .bchip,
:root[data-theme="dark"] .atab .ct{ background:#222a35; color:var(--ink-3); }

/* placeholder thumbnails / image tiles */
:root[data-theme="dark"] .va-photos .pg,
:root[data-theme="dark"] .va-photos.edit .pg-edit,
:root[data-theme="dark"] .bthumb,
:root[data-theme="dark"] .bikecell .thumb,
:root[data-theme="dark"] .pdf-photos .pp{ background:#1d242d; color:var(--ink-4); }
:root[data-theme="dark"] image-slot{ --slot-bg:#1d242d; }

/* row hovers that used near-white */
:root[data-theme="dark"] .rtable tr:hover td,
:root[data-theme="dark"] .at-row:hover,
:root[data-theme="dark"] .wt-row:hover{ background:rgba(255,255,255,.035); }

/* amber tints */
:root[data-theme="dark"] .cond-pill.fair,
:root[data-theme="dark"] .cond-pill.amber,
:root[data-theme="dark"] .badge.amber,
:root[data-theme="dark"] .atab .ct.amber,
:root[data-theme="dark"] .pill-pending-tag,
:root[data-theme="dark"] .ract .rico.won{ background:color-mix(in oklab,#f59e0b 26%, var(--card)); color:#f7c259; }

/* red tints */
:root[data-theme="dark"] .cond-pill.poor,
:root[data-theme="dark"] .cond-pill.red,
:root[data-theme="dark"] .sbadge.lost,
:root[data-theme="dark"] .atab .ct.red,
:root[data-theme="dark"] .ract .rico.lost{ background:color-mix(in oklab,var(--red) 28%, var(--card)); color:#fca5a5; }

/* purple tint (reports) */
:root[data-theme="dark"] .ract .rico.offer{ background:color-mix(in oklab,#7c3aed 32%, var(--card)); color:#c4b5fd; }

/* accent text / glyphs brightened so they read on dark tints */
:root[data-theme="dark"] .nav a.active,
:root[data-theme="dark"] .nav a.active i[data-lucide],
:root[data-theme="dark"] .badge.blue{ color:color-mix(in oklab, var(--blue) 55%, #fff); }
:root[data-theme="dark"] .tile .ico,
:root[data-theme="dark"] .action .ico,
:root[data-theme="dark"] .notif-item .nico,
:root[data-theme="dark"] .profile .pic,
:root[data-theme="dark"] .fitem .fico,
:root[data-theme="dark"] .dm-ic.blue,
:root[data-theme="dark"] .offer-state.countered{ color:color-mix(in oklab, var(--blue) 60%, #fff); }
:root[data-theme="dark"] .fitem .fico.green,
:root[data-theme="dark"] .dm-ic.green{ color:color-mix(in oklab, var(--green) 55%, #fff); }

/* unread notification row (was mixed against #fff) */
:root[data-theme="dark"] .notif-item.unread{ background:color-mix(in oklab, var(--blue) 16%, var(--card)); }

/* white separators / borders */
:root[data-theme="dark"] .brand .bell-badge,
:root[data-theme="dark"] .nav-collapse .collapse-badge{ border-color:var(--card); }
:root[data-theme="dark"] .notif-item .notif-view{ border-color:color-mix(in oklab,var(--blue) 30%, var(--card)); }

/* near-white modal / card footers */
:root[data-theme="dark"] .dm-modal .modal-foot,
:root[data-theme="dark"] .set-card .sc-foot,
:root[data-theme="dark"] .modal-foot{ background:rgba(255,255,255,.025); }

/* edit-mode form fields that were #fff */
:root[data-theme="dark"] .spec-input,
:root[data-theme="dark"] .cond-select,
:root[data-theme="dark"] .note-input,
:root[data-theme="dark"] .dm-money,
:root[data-theme="dark"] .dm-field textarea{ background:#1d242d; color:var(--ink); }

/* decline hover */
:root[data-theme="dark"] .btn.mini-decline:hover{ background:color-mix(in oklab,var(--red) 16%, var(--card));
  border-color:color-mix(in oklab,var(--red) 45%, var(--line)); }

/* banners / notes */
:root[data-theme="dark"] .va-banner.warn{ background:color-mix(in oklab,#f59e0b 16%, var(--card));
  border-color:color-mix(in oklab,#f59e0b 40%, var(--line)); color:#fcd9a3; }
:root[data-theme="dark"] .va-banner.warn > i[data-lucide]{ color:#fbbf24; }
:root[data-theme="dark"] .va-banner.success{ background:color-mix(in oklab,var(--green) 16%, var(--card));
  border-color:color-mix(in oklab,var(--green) 38%, var(--line)); color:#bbf7d0; }
:root[data-theme="dark"] .reqnote{ background:color-mix(in oklab,#f59e0b 14%, var(--card));
  border-color:color-mix(in oklab,#f59e0b 36%, var(--line)); color:#f4d9a6; }

/* toast (uses var(--ink) as bg → would invert in dark) */
:root[data-theme="dark"] .toast{ background:#eaeff5; color:#0f141a; }
:root[data-theme="dark"] .toast i[data-lucide]{ color:#16a34a; }