/* ============================================================
   Dealers Think bridge — generic reskin layer for legacy pages.
   Load AFTER shared/styles.css. Same approach proven on admin.html
   (admin.css keeps its own copy of this layer + page-specific styles;
   consolidation onto this file is a later cleanup).
   1) dt tokens (light/dark via [data-theme], key 'dt-theme')
   2) legacy Triad token bridge (--text/--amber/--sage/… → dt palette)
   3) shared shell + component restyle (topbar/sidebar/nav/login/forms)
   ============================================================ */

:root{
  --dt-bg:#f4f6f3; --dt-surface:#ffffff; --dt-surface-2:#f7faf8;
  --dt-border:#e7eae5; --dt-border-soft:#eef1ee;
  --ink:#0b0f0c; --ink-soft:#525c55; --ink-faint:#8a948c;
  --neon:#39ff14; --neon-ink:#1f7a36; --on-neon:#08220c; --neon-rgb:57,255,20;
  --pop:#ff2e9a; --pop-rgb:255,46,154; --pop-ink:#b8005f;
  --dt-info:#2f6df0; --dt-info-rgb:47,109,240;
  --side-bg:#0a120c; --side-ink:#e8f3ea; --side-soft:#88a890; --side-faint:#5e7466;
  --side-border:rgba(255,255,255,.08); --side-hover:rgba(255,255,255,.05);
  --dt-shadow:0 1px 2px rgba(11,15,12,.05), 0 10px 26px -18px rgba(11,15,12,.22);
  --ok:#1f8a5b;
  /* status hues that must stay their own color (not bridged to neon):
     warn = amber warnings, violet = tertiary category */
  --warn:#b45309; --warn-strong:#f59e0b; --warn-soft:rgba(245,158,11,.14);
  --violet:#7c3aed; --violet-soft:rgba(139,92,246,.12);

  /* legacy token bridge */
  --bg:var(--dt-bg); --surface:var(--dt-surface);
  --sidebar-bg:var(--side-bg); --sidebar-hover:var(--side-hover);
  --sidebar-active:rgba(var(--neon-rgb),.13);
  --topbar-bg:var(--dt-surface);
  --amber:var(--neon-ink); --amber-light:rgba(var(--neon-rgb),.1);
  --amber-dark:var(--neon-ink); --golden:var(--neon-ink); --gold:var(--neon-ink);
  --sage:var(--neon-ink); --sage-light:rgba(var(--neon-rgb),.1);
  --charcoal:var(--ink); --earth:var(--ink);
  --text:var(--ink); --text-secondary:var(--ink-soft);
  --border:var(--dt-border);
  --stone-50:var(--dt-surface-2); --stone-200:var(--dt-border);
  --stone-400:var(--ink-faint); --stone-600:var(--ink-soft);
  --danger:#e11d48; --danger-light:rgba(var(--pop-rgb),.09);
  --success:var(--neon-ink); --success-light:rgba(var(--neon-rgb),.1);
  --info:var(--dt-info); --info-light:rgba(var(--dt-info-rgb),.1);
  --accent-blue:var(--dt-info); --accent-green:var(--neon-ink);
  --radius:14px;
  --shadow:var(--dt-shadow);
  --shadow-md:0 20px 44px -26px rgba(11,15,12,.34);
  color-scheme:light;
}
[data-theme="dark"]{
  --dt-bg:#04100a; --dt-surface:#0a1a12; --dt-surface-2:#08160f;
  --dt-border:rgba(255,255,255,.09); --dt-border-soft:rgba(255,255,255,.06);
  --ink:#ffffff; --ink-soft:#a9cdb1; --ink-faint:#7e9d86;
  --neon-ink:#7fe08f; --on-neon:#06210a; --pop-ink:#ff9ecb;
  --dt-info:#6fa0ff; --dt-info-rgb:111,160,255;
  --side-bg:#02100a; --side-border:rgba(255,255,255,.07); --side-hover:rgba(255,255,255,.04);
  --dt-shadow:0 0 0 1px rgba(255,255,255,.02), 0 16px 36px -22px rgba(0,0,0,.7);
  --danger:#ff5c8a; --ok:#5fd39a;
  --warn:#fbbf24; --violet:#a78bfa;
  --shadow-md:0 20px 44px -26px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* base type */
body{font-family:'Sora',system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.heading{font-family:'Sora',system-ui,sans-serif; letter-spacing:-.3px;}
/* styles.css sets legacy Playfair on these MORE-specific selectors, which
   out-specify the h1,h2,h3 rule above — force them back to Sora (e.g. the
   "All clients" list header, detail/modal headers, empty-state titles). */
.list-header-left h2,.detail-header-info h2,.modal-header h3,.detail-empty h3{font-family:'Sora',system-ui,sans-serif;}
.page-header h1{font-family:'Sora',system-ui,sans-serif; font-size:1.45rem; font-weight:800; letter-spacing:-.8px;}
.page-header .subtitle{font-family:'Sora',system-ui,sans-serif;}
[tabindex]:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--neon); outline-offset:2px;}

/* topbar (light) */
.topbar{background:var(--dt-surface); border-bottom:1px solid var(--dt-border); height:56px; gap:16px; padding:0 20px;}
.topbar-search{flex:1; max-width:520px; background:var(--dt-bg); border:1px solid var(--dt-border); border-radius:10px; padding:8px 13px;}
.topbar-search svg{color:var(--ink-faint);}
.topbar-search input{color:var(--ink);}
.topbar-search input::placeholder{color:var(--ink-faint);}
.topbar-icon{border:1px solid var(--dt-border); background:var(--dt-surface); border-radius:9px; width:34px; height:34px;}
.topbar-icon svg{color:var(--ink-soft);}
.topbar-icon:hover{background:var(--dt-surface); border-color:var(--ink);}
.topbar-avatar{background:linear-gradient(135deg,var(--neon),var(--pop)) !important; color:#04110a !important; font-weight:800;}
#theme-toggle{font-size:14px; color:var(--ink); cursor:pointer; border:1px solid var(--dt-border); background:none; font-family:inherit;}

/* sidebar (warm-dark) + Dealers Think lockup slot */
/* height: shared/styles.css hardcodes calc(100vh - 48px) for the LEGACY 48px
   topbar; the dt topbar is 56px, which pushed the sidebar footer 8px off-screen. */
.sidebar{display:flex; flex-direction:column; background:var(--side-bg); border-right:1px solid var(--side-border); height:calc(100vh - 56px);}
.dt-sidelogo{order:0; padding:18px 16px 10px;}
.dt-sidelogo a{display:inline-flex; flex-direction:column; align-items:flex-start; line-height:.78; text-decoration:none;}
.dt-sidelogo .d{font-family:'Allura',cursive; font-size:24px; line-height:.7; color:#fff; margin-left:-2px;}
.dt-sidelogo .t-row{display:inline-flex; align-items:flex-end; gap:2px;}
.dt-sidelogo .t{font-weight:700; font-size:13px; letter-spacing:3.5px; text-transform:uppercase; color:#fff; font-family:'Sora',sans-serif;}
.dt-sidelogo .dot{width:5px;height:5px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);margin-bottom:1px;}
.sidebar-switcher{order:1; margin:2px 12px 10px; padding:9px 11px; background:var(--side-hover); border:1px solid var(--side-border); border-radius:10px;}
.sidebar-switcher .sw-icon{background:var(--neon); color:var(--on-neon); width:28px; height:28px; border-radius:7px; font-size:13px; font-weight:800;}
.sidebar-switcher .sw-label{color:#fff; font-size:13.5px; font-weight:600;}
/* rail (collapsed): the 12px side margins don't fit the 56px rail — the pill
   squished into a vertical capsule. Compact centered chip instead; restore the
   normal pill when the rail hover/focus-peeks open. */
.app.nav-rail .sidebar-switcher{margin:2px 8px 10px; padding:8px 0;}
.app.nav-rail .sidebar:hover .sidebar-switcher, .app.nav-rail .sidebar:focus-within .sidebar-switcher{margin:2px 12px 10px; padding:9px 11px;}
.product-dropdown{order:1;}
/* switcher dropdown active state — neon, not the legacy Triad amber */
.product-option.active{background:rgba(var(--neon-rgb),.14);}
.product-option.active .product-option-link{color:#fff;}
.product-option.active .product-option-icon{stroke:var(--neon);}
.product-option-check{color:var(--neon); stroke:var(--neon);}
.product-option-newtab:hover{color:#fff;}
.product-option-newtab:focus-visible{outline:1px solid var(--neon);}
.sidebar-nav{order:2;}
.sidebar-products{order:3;}
.sidebar-admin{order:4; border-top:1px solid var(--side-border);}
.nav-section-label{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.5px; color:var(--side-faint);}
.nav-section-label:hover{color:var(--side-soft);}
/* unified sidebar metrics — same values as Service BDC's page layer so every
   product's nav reads identically (13.5px rows, 17px icons, 28px switcher chip) */
.nav-item{color:var(--side-soft); font-weight:500; position:relative; border-radius:9px; margin:0 8px; font-size:13.5px; gap:9px; padding:9px 12px;}
.nav-item svg{width:17px; height:17px;}
.nav-item:hover{background:var(--side-hover); color:var(--side-ink);}
.nav-item.active{background:linear-gradient(90deg, rgba(var(--neon-rgb),.16), rgba(var(--neon-rgb),.04)); color:#fff;}
.nav-item.active::before{content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--neon); box-shadow:0 0 10px var(--neon);}
.nav-item.active svg{stroke:var(--neon); opacity:1;}
.nav-badge{background:var(--neon); color:var(--on-neon); font-family:'Space Mono',monospace; font-weight:700;}
.nav-badge-red{background:var(--pop) !important; color:#fff !important;}
.nav-dot.amber{background:var(--neon);}
.nav-dot.sage{background:var(--pop);}
.list-panel{background:var(--dt-surface); border-right:1px solid var(--dt-border);}

/* components */
.card{border:1px solid var(--dt-border); border-radius:16px; box-shadow:var(--dt-shadow);}
.btn{border-radius:10px; font-weight:600;}
.btn-primary{background:var(--neon); color:var(--on-neon); font-weight:700; box-shadow:0 8px 20px rgba(var(--neon-rgb),.3);}
.btn-primary:hover{background:var(--neon); transform:translateY(-1px);}
.btn-primary svg{stroke:var(--on-neon);}
.btn-secondary{background:var(--dt-surface); color:var(--ink); border:1px solid var(--dt-border);}
.btn-secondary:hover{border-color:var(--ink);}
.btn-danger{background:rgba(var(--pop-rgb),.08); color:var(--pop-ink); border:1px solid rgba(var(--pop-rgb),.35); font-weight:700;}
.btn-danger:hover{background:rgba(var(--pop-rgb),.14);}
.login-btn{background:var(--neon); color:var(--on-neon); font-weight:700;}
.login-screen{background:var(--dt-bg);}
.login-card{background:var(--dt-surface); border:1px solid var(--dt-border); color:var(--ink);}
.login-card h2{color:var(--ink);} .login-card p{color:var(--ink-soft);}
.login-field{background:var(--dt-surface); color:var(--ink); border-color:var(--dt-border);}
.login-field:focus{border-color:var(--neon);}

/* forms */
select{-webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a948c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
  padding-right:30px; cursor:pointer;}
select option{background:var(--dt-surface); color:var(--ink);}
input:focus, select:focus, textarea:focus{border-color:var(--neon) !important; box-shadow:0 0 0 3px rgba(var(--neon-rgb),.15) !important; outline:none;}