/* ============================================================
   Dealer Dashboard — styles
   Mirrors the design tokens used on template.dealerwebsites.co.uk
   ============================================================ */

/* ---- Design tokens ---- */
:root, [data-theme="light"] {
  --bg:#f7f6f5; --bg-elevated:#ffffff; --bg-subtle:#f2f1f0;
  --text:#171717; --text-muted:#737373; --border:#e5e5e5;
  --primary:#0a1120; --primary-hover:#16233d; --primary-soft:#eeeeec; --primary-contrast:#ffffff;
  --cta:#10a5e9; --cta-hover:#0e93d1; --cta-contrast:#ffffff;
  --sidebar-bg:#0a1120; --nav-highlight:rgba(10,17,32,.05); --nav-active:rgba(10,17,32,.07);
  --success:#16a34a; --warning:#d97706; --info:#2563eb; --danger:#dc2626;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06);
  --dw-btn-radius:.5rem;
}
[data-theme="dark"] {
  --bg:#0a0a0a; --bg-elevated:#171717; --bg-subtle:#1f1f1f;
  --text:#fafafa; --text-muted:#a3a3a3; --border:#262626;
  --primary:#fafafa; --primary-hover:#d4d4d4; --primary-soft:#262626; --primary-contrast:#0a0a0a;
  --sidebar-bg:#111111; --nav-highlight:rgba(255,255,255,.06); --nav-active:rgba(255,255,255,.08);
  --success:#22c55e; --warning:#f59e0b; --info:#3b82f6; --danger:#ef4444;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
}

* { -webkit-font-smoothing:antialiased; }

/* No animation on initial load / refresh — transitions are enabled only after
   app.js has applied the saved sidebar + theme state and added .dw-ready. */
body:not(.dw-ready) * { transition:none !important; }
body {
  background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Utility bridges to CSS vars ---- */
.dw-surface { background:var(--bg-elevated); border-color:var(--border); box-shadow:var(--shadow); }
.dw-subtle  { background:var(--bg-subtle); }
.dw-muted   { color:var(--text-muted); }
.dw-border  { border-color:var(--border); }

/* ---- Sidebar ---- */
/* Dark navy surface — scope light foreground tokens so contents stay legible
   on the dark background in both light and dark themes. */
#sidebar {
  background:var(--sidebar-bg); width:16rem; transition:transform .22s ease;
  color:var(--text);
  --bg-elevated:rgba(255,255,255,.045);
  --text:#f1f5f9;
  --text-muted:#94a3b8;
  --border:rgba(255,255,255,.08);
  --nav-highlight:rgba(255,255,255,.06);
  --nav-active:rgba(255,255,255,.10);
  border-color:var(--border);
}

/* Grouped, expandable nav blocks */
.nav-block { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--dw-btn-radius); overflow:hidden; }
.nav-block + .nav-block { margin-top:.75rem; }
.nav-block__head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .65rem; font-size:.8125rem; font-weight:600;
  color:var(--text-muted); background:transparent; border:0; cursor:pointer; }
.nav-block__head:hover { color:var(--text); }
.nav-block__chevron { flex:none; transition:transform .18s ease; opacity:.7; }
.nav-block.open .nav-block__chevron { transform:rotate(90deg); }
.nav-block__body { display:none; padding:.15rem .3rem .35rem; }
.nav-block.open .nav-block__body { display:block; }

.nav-sub { display:block; padding:.3rem .55rem; margin:.06rem 0; font-size:.8125rem; line-height:1.2rem;
  color:var(--text-muted); text-decoration:none; border-radius:calc(var(--dw-btn-radius) - .15rem);
  transition:background .15s,color .15s; }
.nav-sub:hover { background:var(--nav-highlight); color:var(--text); }
.nav-sub.active { background:var(--nav-active); color:var(--text); font-weight:600; }

/* Dropdown items (user menu) reuse .nav-item */
.nav-item { color:var(--text-muted); border-radius:var(--dw-btn-radius); transition:background .15s,color .15s; }
.nav-item:hover { background:var(--nav-highlight); color:var(--text); }
.nav-item.active { background:var(--nav-active); color:var(--text); font-weight:600; }

/* ---- Buttons ---- */
.btn-primary { background:var(--cta); color:var(--cta-contrast); border-radius:var(--dw-btn-radius); }
.btn-primary:hover { background:var(--cta-hover); }
.btn-ghost { color:var(--text-muted); border-radius:var(--dw-btn-radius); }
.btn-ghost:hover { background:var(--nav-highlight); color:var(--text); }

/* ---- Badges ---- */
.badge { border-radius:999px; font-size:.72rem; font-weight:600; padding:.15rem .55rem; display:inline-block; }
.badge-success { background:color-mix(in srgb,var(--success) 15%,transparent); color:var(--success); }
.badge-warning { background:color-mix(in srgb,var(--warning) 15%,transparent); color:var(--warning); }
.badge-info    { background:color-mix(in srgb,var(--info) 15%,transparent); color:var(--info); }
.badge-muted   { background:var(--primary-soft); color:var(--text-muted); }

/* ---- Tables ---- */
table.dw-table { width:100%; border-collapse:collapse; }
.dw-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:600; padding:.75rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.dw-table td { padding:.85rem 1rem; border-bottom:1px solid var(--border); font-size:.9rem; }
.dw-table tbody tr:hover { background:var(--nav-highlight); }
.dw-table tbody tr:last-child td { border-bottom:0; }

/* ---- Forms ---- */
.dw-input { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); border-radius:var(--dw-btn-radius); }
.dw-input::placeholder { color:var(--text-muted); }
.dw-input:focus { outline:none; border-color:var(--cta); box-shadow:0 0 0 3px color-mix(in srgb,var(--cta) 20%,transparent); }
.dw-input:disabled { background:var(--bg-subtle); color:var(--text-muted); cursor:not-allowed; }
textarea.dw-input { resize:vertical; min-height:2.75rem; }
.dw-lock { color:var(--text-muted); cursor:help; display:inline-flex; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }