/* =================================================================
   MotoDesk — "Motorsport CRM" design language
   Motorsport racing blue + sharp red accent, blue-tinted neutrals,
   flat icons, asymmetric rhythm, purposeful motion.
   ================================================================= */

:root {
  /* Brand */
  --brand-900: #061b5e;
  --brand-700: #0c2a86;
  --brand:     #14379b;   /* primary brand blue */
  --brand-500: #2b53cc;
  --brand-300: #93a9ea;
  --brand-100: #dbe3f9;
  --brand-50:  #eef2fd;

  --accent:    #e2231a;   /* sharp accent red */
  --accent-600:#c01910;
  --accent-50: #fdecea;

  /* Neutrals — tinted toward brand blue, never pure black/white */
  --ink:    #111a30;
  --body:   #3c465f;
  --muted:  #6c7691;
  --faint:  #9aa3bb;
  --line:   #e4e8f2;
  --line-2: #eef1f8;
  --bg:     #f3f5fb;
  --surface:#ffffff;
  --surface-2:#f7f9ff;

  /* Status */
  --won:    #157a48;  --won-bg:#e7f6ee;
  --lost:   #b23030;  --lost-bg:#fbeaea;
  --open:   #1f55c9;  --open-bg:#e9effd;
  --warn:   #b5710a;  --warn-bg:#fdf2dc;

  --radius:   14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow:   0 1px 2px rgba(17,26,48,.04), 0 6px 20px -8px rgba(17,26,48,.12);
  --shadow-lg:0 24px 60px -20px rgba(12,26,72,.35);
  --ring:     0 0 0 3px var(--brand-100);

  --ease: cubic-bezier(.16,1,.3,1);          /* ease-out-expo-ish */
  --sidebar-w: 256px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  color: var(--body);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: "Archivo", sans-serif; color: var(--ink); margin: 0; line-height: 1.1; letter-spacing: -.02em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem); font-weight: 800; }
h2 { font-size: 1.18rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-700); }
.icon { display: inline-block; vertical-align: middle; flex: none; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tnum  { font-variant-numeric: tabular-nums; }
.eyebrow { font: 700 .7rem/1 "Archivo",sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-500); }
.danger-text { color: var(--accent-600); }

/* ---- App shell --------------------------------------------------- */
.app-shell { min-height: 100vh; }   /* single column — the only menu is the hamburger drawer */

/* ---- Sidebar (desktop) ------------------------------------------- */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: linear-gradient(185deg, var(--brand-900), var(--brand) 60%, var(--brand-700));
  color: #dde6ff; padding: 22px 16px; display: none; flex-direction: column;
  overflow: hidden;
}
.sidebar::before {  /* speed motif: faint diagonal stripes */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
}
.sidebar::after {  /* red rail down the edge */
  content:""; position:absolute; top:0; right:0; width:3px; height:100%;
  background: linear-gradient(var(--accent), transparent 70%);
}
@media (min-width: 920px) { .sidebar { display: flex; } }
.sidebar-brand { display:flex; justify-content:center; padding:2px 2px 22px; position:relative; z-index:1; }
.brand-logo { display:flex; justify-content:center; align-items:center; width:100%; background:#fff;
  border-radius:13px; padding:15px 18px; box-shadow:0 12px 26px -16px rgba(0,0,0,.75); }
.brand-logo img { width:100%; max-width:172px; height:auto; display:block; }
.nav { display:flex; flex-direction:column; gap:3px; position:relative; z-index:1; }
.nav-section { font:700 .62rem/1 "Archivo",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#7e93d6; padding:18px 12px 8px; }
.nav-link {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px;
  color:#c5d2f7; font-weight:600; font-size:.92rem; transition:.18s var(--ease);
  position:relative;
}
.nav-link:hover { background:rgba(255,255,255,.09); color:#fff; }
.nav-link.is-active { background:#fff; color:var(--brand-700); box-shadow:0 6px 18px -8px rgba(0,0,0,.5); }
.nav-link.is-active .icon { color:var(--accent); }
.nav-spacer { flex:1; }
.sidebar-user {
  position:relative; z-index:1; display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:12px; background:rgba(255,255,255,.08); margin-top:10px;
}
.sidebar-user .meta { min-width:0; }
.sidebar-user .meta b { color:#fff; font-size:.86rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .meta span { font-size:.7rem; color:#9fb4ef; }

/* ---- Topbar (mobile) --------------------------------------------- */
.topbar {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:var(--brand); color:#fff; position:sticky; top:0; z-index:40;
}
.topbar .t-flex { flex:1; }
.topbar .brand-logo { width:auto; padding:6px 12px; border-radius:10px; box-shadow:0 6px 16px -10px rgba(0,0,0,.55); }
.topbar .brand-logo img { width:auto; max-width:none; height:22px; }
.icon-btn {
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--body); cursor:pointer;
  transition:.16s var(--ease);
}
.icon-btn:hover { border-color:var(--brand-300); color:var(--brand); }
.topbar .icon-btn { background:rgba(255,255,255,.14); border-color:transparent; color:#fff; }

/* ---- Main + page head -------------------------------------------- */
.main { padding: clamp(18px,3vw,34px); max-width: 1180px; margin-inline: auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head .titles { min-width:0; }
.page-head h1 { margin-top:4px; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Buttons ----------------------------------------------------- */
.btn {
  --bg:var(--brand); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:11px; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg); font:700 .9rem/1 "Manrope",sans-serif;
  cursor:pointer; transition:.16s var(--ease); white-space:nowrap; text-decoration:none;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(20,55,155,.6); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:none; box-shadow:var(--ring); }
.btn-accent  { --bg:var(--accent); }
.btn-accent:hover { box-shadow:0 10px 22px -12px rgba(226,35,26,.6); }
.btn-ghost   { --bg:var(--surface); --fg:var(--body); --bd:var(--line); }
.btn-ghost:hover { --fg:var(--brand); --bd:var(--brand-300); box-shadow:none; }
.btn-soft    { --bg:var(--brand-50); --fg:var(--brand-700); }
.btn-danger  { --bg:var(--surface); --fg:var(--accent-600); --bd:var(--accent-50); }
.btn-danger:hover { --bg:var(--accent); --fg:#fff; box-shadow:none; }
.btn-sm { padding:7px 12px; font-size:.82rem; border-radius:9px; }
.btn-block { width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---- Cards / panels ---------------------------------------------- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad { padding: clamp(16px,2vw,22px); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-head h2 { display:flex; align-items:center; gap:9px; }
.panel-head h2 .icon { color:var(--brand-500); }
.divider { height:1px; background:var(--line); border:0; margin:16px 0; }

/* speed rail accent strip */
.rail { position:relative; overflow:hidden; }
.rail::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--accent), var(--brand-500));
}

/* ---- KPI tiles --------------------------------------------------- */
.kpi-grid { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:22px; }
@media (min-width:720px){ .kpi-grid{ grid-template-columns:repeat(4,1fr); } }
.kpi {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 15px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi .ico { position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; background:var(--brand-50); color:var(--brand-500); }
.kpi.k-accent .ico { background:var(--accent-50); color:var(--accent); }
.kpi.k-won .ico { background:var(--won-bg); color:var(--won); }
.kpi.k-warn .ico { background:var(--warn-bg); color:var(--warn); }
.kpi .label { font:700 .72rem/1.25 "Archivo",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-right:42px; }
.kpi .value { font:800 clamp(1.4rem,1rem+1.4vw,1.9rem)/1 "Archivo",sans-serif; color:var(--ink); margin-top:8px; letter-spacing:-.02em; }
.kpi .sub { font-size:.78rem; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:5px; }
.kpi .sub b { color:var(--won); }

/* ---- Grid helpers ------------------------------------------------ */
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:1fr; }
@media (min-width:960px){ .grid-2 { grid-template-columns: 1.6fr 1fr; } }
.stack { display:flex; flex-direction:column; gap:18px; }

/* ---- Badges / pills ---------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px;
  font:700 .72rem/1 "Manrope",sans-serif; letter-spacing:.01em;
}
.badge .icon { width:13px; height:13px; }
.badge--open { background:var(--open-bg); color:var(--open); }
.badge--won  { background:var(--won-bg);  color:var(--won); }
.badge--lost { background:var(--lost-bg); color:var(--lost); }
.badge--hot  { background:#fde7e4; color:#c4231a; }
.badge--warm { background:#fef3c7; color:#92400e; }
.badge--cold { background:#e0e7ff; color:#3730a3; }
.badge--role-admin { background:#ede9fe; color:#6d28d9; }
.badge--role-sales { background:var(--brand-50); color:var(--brand-700); }
.badge--muted{ background:var(--line-2); color:var(--muted); }

.due { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:.82rem; }
.due--overdue { color:var(--lost); }
.due--today   { color:var(--accent-600); }
.due--soon    { color:var(--warn); }
.due--later   { color:var(--body); font-weight:600; }
.due--none    { color:var(--faint); font-weight:500; }

.chip-row { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--body);
  font-weight:600; font-size:.84rem; cursor:pointer; transition:.16s var(--ease); text-decoration:none;
}
.chip:hover { border-color:var(--brand-300); color:var(--brand); }
.chip.is-active { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---- Avatar ------------------------------------------------------ */
.avatar {
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(150deg,var(--brand-500),var(--brand-900)); color:#fff;
  font:800 .8rem/1 "Archivo",sans-serif; letter-spacing:.02em;
}
.avatar.sm { width:30px; height:30px; border-radius:9px; font-size:.7rem; }
.avatar.lg { width:54px; height:54px; border-radius:14px; font-size:1.1rem; }

/* ---- Forms ------------------------------------------------------- */
.form-grid { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:560px){ .form-grid.cols-2 { grid-template-columns:1fr 1fr; } }
.field { display:flex; flex-direction:column; gap:6px; }
.field.col-span { grid-column:1/-1; }
.label { font:700 .78rem/1 "Manrope",sans-serif; color:var(--ink); }
.label .req { color:var(--accent); }
.input, .select, .textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface-2); color:var(--ink); font:500 .92rem/1.4 "Manrope",sans-serif;
  transition:.16s var(--ease);
}
.textarea { resize:vertical; min-height:84px; }
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--brand-300); background:var(--surface); box-shadow:var(--ring);
}
.input::placeholder { color:var(--faint); }
.input-affix { position:relative; display:flex; align-items:center; }
.input-affix .pre { position:absolute; left:12px; color:var(--muted); font-weight:700; pointer-events:none; }
.input-affix .input { padding-left:26px; }
.help { font-size:.76rem; color:var(--muted); }
.check { display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink); cursor:pointer; }
.check input { width:18px; height:18px; accent-color:var(--brand); }

/* ---- Table ------------------------------------------------------- */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table.data { width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th {
  text-align:left; padding:12px 14px; font:700 .68rem/1 "Archivo",sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--surface-2);
}
table.data td { padding:13px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
table.data tbody tr { transition:background .14s ease; }
table.data tbody tr:hover { background:var(--surface-2); }
table.data tbody tr:last-child td { border-bottom:0; }
.cust { display:flex; align-items:center; gap:11px; }
.cust .nm { font-weight:700; color:var(--ink); }
.cust .ph { font-size:.78rem; color:var(--muted); }
.remark-cell { max-width:260px; color:var(--body); font-size:.85rem; }
.row-actions { display:flex; gap:6px; justify-content:flex-end; }
.lead-locked { color:var(--faint); font-style:italic; font-size:.82rem; }

/* Remark cell button + history modal */
.remark-btn {
  display:flex; align-items:center; gap:8px; width:100%; max-width:260px; text-align:left;
  background:none; border:0; padding:6px 8px; margin:-6px -8px; border-radius:9px;
  cursor:pointer; color:var(--body); font:inherit; transition:.15s var(--ease);
}
.remark-btn:hover { background:var(--brand-50); color:var(--brand-700); }
.rmk-snip { flex:1; min-width:0; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmk-count {
  flex:none; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-700); font:800 .72rem/1 "Archivo",sans-serif;
}
.remark-btn:hover .rmk-count { background:#fff; }

.rmk-list { display:flex; flex-direction:column; gap:10px; max-height:42vh; overflow-y:auto; margin-bottom:16px; padding-right:2px; }
.rmk-item { position:relative; padding:11px 13px 11px 15px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); }
.rmk-item::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--brand-300); }
.rmk-item:first-child::before { background:var(--accent); }
.rmk-item .body { color:var(--ink); font-size:.9rem; white-space:pre-wrap; word-break:break-word; }
.rmk-item .meta { display:flex; align-items:center; gap:7px; margin-top:6px; font-size:.74rem; color:var(--muted); }
.rmk-item .meta b { color:var(--brand-700); font-weight:700; }
.rmk-item .meta .dot { width:3px; height:3px; border-radius:50%; background:var(--faint); }
.rmk-ops { display:inline-flex; gap:2px; margin-left:auto; }
.rmk-op { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:8px; background:none; color:var(--muted); cursor:pointer; transition:.15s var(--ease); }
.rmk-op:hover { background:var(--brand-50); color:var(--brand-700); }
.rmk-op-del:hover { background:#fdeaea; color:var(--accent-600,#c4231a); }
.rmk-item.editing .rmk-ops { display:none; }
.rmk-edit-ta { width:100%; margin-bottom:7px; }
.rmk-edit-actions { display:flex; justify-content:flex-end; gap:7px; }
.rmk-empty { text-align:center; color:var(--muted); padding:22px 10px; font-size:.88rem; }
.rmk-add { border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:7px; }
.rmk-loading { text-align:center; padding:20px; }
.rmk-due { margin:2px 0 16px; padding:12px 13px; border:1px solid var(--brand-200,var(--line)); border-radius:11px; background:var(--brand-50); }
.rmk-due .label { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.rmk-due-row { display:flex; gap:8px; align-items:center; }
.rmk-due-row .input { flex:1; min-width:0; }
.rmk-due-row .btn { flex:none; white-space:nowrap; }
.rmk-due-msg { margin:8px 0 0; font-weight:600; }
.rmk-due-msg.ok  { color:#157f43; }
.rmk-due-msg.err { color:var(--accent); }

/* Mobile lead list: one compact horizontal row per customer (replaces the table) */
.lead-list { display:none; }
.lrow {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--brand-300);
  border-radius:14px; overflow:hidden;
}
.lrow--won  { border-left-color:#1aa251; }
.lrow--lost { border-left-color:var(--faint); }
.lrow--hot  { border-left-color:#e0301e; }
.lrow--warm { border-left-color:#f0b429; }
.lrow--cold { border-left-color:#6366f1; }

/* Lead stage tabs (sub-pages) */
.lead-tabs { display:flex; gap:2px; overflow-x:auto; border-bottom:2px solid var(--line); margin-bottom:16px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.lead-tabs::-webkit-scrollbar { display:none; }
.lead-tab { display:inline-flex; align-items:center; gap:7px; padding:11px 15px; white-space:nowrap;
  font:700 .92rem/1 "Manrope",sans-serif; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-2px; transition:.15s var(--ease); }
.lead-tab:hover { color:var(--ink); }
.lead-tab-n { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--surface-2); color:var(--muted); font:800 .68rem/1 "Archivo",sans-serif; }
.lead-tab.is-active { color:var(--brand); border-bottom-color:var(--brand); }
.lead-tab.is-active .lead-tab-n { background:var(--brand-50); color:var(--brand-700); }
.lead-tab.tab-hot.is-active  { color:#c4231a; border-bottom-color:#e0301e; }
.lead-tab.tab-hot.is-active .lead-tab-n  { background:#fde7e4; color:#c4231a; }
.lead-tab.tab-warm.is-active { color:#92400e; border-bottom-color:#f0b429; }
.lead-tab.tab-warm.is-active .lead-tab-n { background:#fef3c7; color:#92400e; }
.lead-tab.tab-cold.is-active { color:#3730a3; border-bottom-color:#6366f1; }
.lead-tab.tab-cold.is-active .lead-tab-n { background:#e0e7ff; color:#3730a3; }
.lead-tab.tab-won.is-active  { color:#157f43; border-bottom-color:#1aa251; }
.lead-tab.tab-won.is-active .lead-tab-n  { background:#e7f6ee; color:#157f43; }
.lead-tab.tab-lost.is-active { color:var(--muted); border-bottom-color:var(--faint); }
.lrow-tap {
  display:flex; align-items:center; gap:11px; width:100%;
  background:none; border:0; padding:11px 13px; text-align:left; cursor:pointer; font:inherit; color:inherit;
}
.lrow-tap:active { background:var(--brand-50); }
.lrow-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.lrow-r1 { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.lrow-name { font-weight:700; color:var(--ink); font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lrow-amt { flex:none; font:700 .92rem/1 "Archivo",sans-serif; color:var(--ink); }
.lrow-r2 { display:flex; align-items:center; gap:8px; min-width:0; }
.lrow-model { font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.lrow-due { flex:none; }
.lrow-due .due { font-size:.72rem; padding:2px 8px; white-space:nowrap; }
.lrow-r2 .rmk-count { flex:none; font-size:.7rem; padding:2px 7px; }
/* action bar across the bottom — full-size, finger-friendly buttons */
.lrow-act {
  display:flex; align-items:center; justify-content:space-between; gap:7px;
  padding:7px 12px; border-top:1px solid var(--line-2); background:var(--surface-2);
}
.lrow-actbtns { display:flex; align-items:center; gap:7px; }
.lrow-act .icon-btn { width:40px; height:40px; border-radius:11px; }
.lrow-act .icon-btn svg { width:19px; height:19px; }
.lrow-act form { display:inline; line-height:0; }
.lrow-owner { display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:.78rem; font-weight:600; color:var(--muted); }
.lrow-owner > :last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar.xs { width:22px; height:22px; font-size:.58rem; flex:none; }

/* Remark modal: tappable customer → details micro-card. */
.rmk-cust { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:none; border:0; padding:2px 0 8px; cursor:pointer; font:inherit; text-align:left; }
.rmk-cust-hint { display:inline-flex; align-items:center; gap:3px; font-size:.74rem; font-weight:700; color:var(--brand); white-space:nowrap; }
.rmk-cust[aria-expanded="true"] .rmk-cust-hint .icon { transform:rotate(180deg); }
.rmk-cust-hint .icon { transition:.15s var(--ease); }
.rmk-micro { position:relative; margin:0 0 14px; padding:13px 14px; border:1px solid var(--brand-200,var(--line)); border-radius:12px; background:var(--brand-50); }
.rmk-micro-x { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:26px; height:26px; border:0; border-radius:8px; background:#fff; color:var(--muted); cursor:pointer; }
.rmk-micro-x:hover { color:var(--accent); }
.rmk-micro-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-bottom:12px; }
.rmk-micro-grid > div { display:flex; flex-direction:column; min-width:0; }
.rmk-micro-grid span { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.rmk-micro-grid b { color:var(--ink); font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmk-call { width:100%; }
.rmk-call.is-disabled { opacity:.5; pointer-events:none; }
@media (max-width:760px){
  /* Leads has a purpose-built mobile list instead of the table. */
  .table-wrap.is-leads { display:none; }
  .lead-list { display:flex; flex-direction:column; gap:9px; }

  /* Every other data table collapses to stacked cards (label : value rows). */
  .table-wrap:not(.is-leads) { overflow:visible; border-radius:0; }
  .table-wrap:not(.is-leads) table.data,
  .table-wrap:not(.is-leads) table.data tbody,
  .table-wrap:not(.is-leads) table.data tr,
  .table-wrap:not(.is-leads) table.data td { display:block; width:100%; }
  .table-wrap:not(.is-leads) table.data thead { display:none; }
  .table-wrap:not(.is-leads) table.data tr {
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); margin-bottom:12px; padding:5px 4px;
  }
  .table-wrap:not(.is-leads) table.data td {
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    border:0; padding:9px 14px; text-align:right;
  }
  .table-wrap:not(.is-leads) table.data td::before {
    content:attr(data-label); flex:none; text-align:left;
    font:700 .64rem/1.3 "Archivo",sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  }
  .table-wrap:not(.is-leads) table.data td.row-actions-cell { justify-content:flex-end; padding-top:4px; }
  .table-wrap:not(.is-leads) table.data td.row-actions-cell::before { display:none; }
  .table-wrap:not(.is-leads) table.data td .cust { text-align:left; }
}

/* Bike photo uploader + thumbnails */
.bimg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; margin-bottom:10px; }
.bimg-grid:empty { display:none; }
.bimg { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.bimg img { width:100%; height:100%; object-fit:cover; display:block; }
.bimg-del { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(17,24,39,.72); color:#fff; font-size:15px; line-height:1; display:grid; place-items:center; transition:.15s var(--ease); }
.bimg-del:hover { background:var(--accent); }
.uploader { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:11px; cursor:pointer;
  border:1.5px dashed var(--brand-300); color:var(--brand-700); background:var(--brand-50); font-weight:600; font-size:.9rem; transition:.15s var(--ease); }
.uploader:hover { border-color:var(--brand); background:#fff; }
.img-count { position:absolute; bottom:10px; right:10px; display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:999px; background:rgba(17,24,39,.66); color:#fff; font:700 .7rem/1 "Archivo",sans-serif; }

/* ---- Attendance admin --------------------------------------------- */
.att-pills { display:inline-flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.att-pills a { padding:6px 14px; border-radius:999px; font:700 .78rem/1 "Manrope",sans-serif; color:var(--muted); transition:.14s var(--ease); }
.att-pills a.is-on { background:var(--brand); color:#fff; }
.att-pills a:not(.is-on):hover { color:var(--brand-700); }

.att-search { padding:0 14px 12px; }
.att-search .input { max-width:340px; }
.att-grid-wrap { overflow-x:auto; padding:0 8px; scroll-snap-type:x mandatory; scroll-padding-left:158px; }
table.att-grid tbody td:not(.sticky), table.att-grid thead th:not(.sticky) { scroll-snap-align:start; }
table.att-grid { border-collapse:separate; border-spacing:0; width:100%; font-size:.78rem; }
table.att-grid th, table.att-grid td { padding:4px 3px; text-align:center; border-bottom:1px solid var(--line-2); }
table.att-grid thead th { font:700 .64rem/1 "Archivo",sans-serif; color:var(--muted); padding-bottom:8px; }
/* Sticky staff column: opaque + drop-shadow so scrolling cells sit clearly BEHIND it. */
table.att-grid .sticky { position:sticky; left:0; background:var(--surface); text-align:left;
  width:158px; min-width:158px; max-width:158px; padding-left:10px; padding-right:10px; z-index:3;
  overflow:hidden; clip-path:inset(0); box-shadow:7px 0 9px -4px rgba(2,6,23,.18); }
table.att-grid thead .sticky { z-index:4; }
table.att-grid td.sticky b { display:block; max-width:100%; color:var(--ink); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.att-grid td.sticky small { display:block; max-width:100%; color:var(--muted); font-size:.66rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.att-grid .sun { background:var(--brand-50); }
table.att-grid .sum { font:800 .8rem/1 "Archivo",sans-serif; }
table.att-grid td.sum.p  { color:#157f43; }
table.att-grid td.sum.a  { color:var(--accent-600); }
table.att-grid td.sum.ot { color:#b45309; }

.att-cell { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px;
  font:800 .66rem/1 "Archivo",sans-serif; border:0; font-style:normal; }
button.att-cell { cursor:pointer; transition:.12s var(--ease); }
button.att-cell:hover { transform:scale(1.18); }

/* Times view: each marked cell shows in / out time, stacked. */
.att-cell .ct { display:none; flex-direction:column; align-items:center; line-height:1.15; }
.att-cell .ct i { font-style:normal; font-weight:700; font-size:.56rem; letter-spacing:-.02em; }
.att-cell .ct i:first-child { color:#0f7a3d; }
.att-cell .ct i:last-child  { color:var(--muted); }
.att-grid.times-mode .att-cell .cl { display:none; }
.att-grid.times-mode .att-cell .ct { display:flex; }
.att-grid.times-mode .att-cell { width:auto; min-width:42px; height:auto; padding:4px 4px; }
.att-grid.times-mode th, .att-grid.times-mode td { min-width:48px; }
.att-grid.times-mode button.att-cell:hover { transform:none; }
.att-p     { background:#dcf3e6; color:#157f43; }
.att-half  { background:#fef3c7; color:#92400e; box-shadow:inset 0 -3px 0 #d97706; }
.att-a     { background:#fdeceb; color:var(--accent-600); }
.att-ot    { background:#fef3c7; color:#b45309; }
.att-off   { background:transparent; color:var(--faint); }
.att-today { background:var(--brand-50); color:var(--brand); }
.att-fut   { background:transparent; }
.att-legend { display:flex; flex-wrap:wrap; gap:14px; padding-top:12px; font-size:.74rem; color:var(--muted); }
.att-legend span { display:inline-flex; align-items:center; gap:6px; }

.att-two { display:grid; gap:18px; }
@media (min-width:1080px){ .att-two { grid-template-columns:1fr 1fr; align-items:start; } }
.att-link-row { display:flex; gap:8px; }
.att-link-row .input { flex:1; min-width:0; font-size:.8rem; }
.section-title { display:flex; align-items:center; gap:8px; font:800 1.02rem/1 "Archivo",sans-serif; color:var(--ink); margin:0 0 8px; }
.section-title .icon { color:var(--brand); }
.att-loctest { margin-top:12px; }
.att-loctest-out { margin:9px 0 0; padding:10px 13px; border-radius:10px; font-size:.85rem; font-weight:600;
  background:var(--brand-50); color:var(--brand-700); }
.att-loctest-out.ok  { background:#e7f6ee; color:#157f43; }
.att-loctest-out.err { background:#fdeaea; color:var(--accent-600,#c4231a); }
.att-roster { display:flex; flex-direction:column; padding:4px 0 8px; max-height:430px; overflow-y:auto; }
.att-staff-row { display:flex; align-items:center; gap:10px; padding:9px 18px; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.att-staff-row .meta { flex:1; min-width:120px; }
.att-staff-row .meta b { display:block; color:var(--ink); font-size:.88rem; }
.att-staff-row .meta small { color:var(--muted); font-size:.72rem; }

.att-day-detail { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.att-day-detail .slot { border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.att-day-detail .slot h4 { font:700 .68rem/1 "Archivo",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.att-day-detail .slot img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:9px; background:var(--surface-2); }
.att-day-detail .noimg { width:100%; aspect-ratio:3/4; border-radius:9px; background:var(--surface-2); display:grid; place-items:center; color:var(--faint); }
.att-day-detail .t { font:800 1.05rem/1 "Archivo",sans-serif; color:var(--ink); margin-top:8px; }
.att-day-detail .d { font-size:.72rem; color:var(--muted); margin-top:3px; }

.purge-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; border-radius:13px;
  background:#fef3c7; border:1px solid #fcd34d; color:#92400e; margin-bottom:18px; }
.purge-banner .icon { flex:none; }
.purge-banner p { flex:1; min-width:220px; margin:0; font-size:.86rem; font-weight:600; }
.purge-banner .pb-actions { display:flex; gap:8px; }
.purge-banner form { display:inline; }

/* ---- Attendance kiosk (public wizard) ----------------------------- */
.kiosk-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px; background:linear-gradient(160deg,var(--brand-900),var(--brand) 70%,var(--brand-700)); }
.kiosk-card { width:min(440px,100%); background:var(--surface); border-radius:20px; padding:22px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6); }
.kiosk-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px; margin-bottom:18px; }
.kiosk-head .brand-logo { width:auto; padding:9px 16px; border:1px solid var(--line); border-radius:12px; box-shadow:none; }
.kiosk-head .brand-logo img { display:block; width:auto; max-width:none; height:26px; }
.kiosk-head h1 { font:800 1.3rem/1.1 "Archivo",sans-serif; color:var(--ink); }
.kiosk-head p { margin:3px 0 0; font-size:.8rem; }
.kiosk-foot { margin-top:14px; color:rgba(255,255,255,.55); font:600 .72rem/1 "Manrope",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.kiosk-note { text-align:center; padding:26px 8px; color:var(--body); }
.kiosk-note .icon { color:var(--brand); }
.kiosk-note h2 { font:800 1.2rem/1.2 "Archivo",sans-serif; color:var(--ink); margin:10px 0 6px; }
.kiosk-note p { font-size:.9rem; color:var(--muted); }

.kiosk-geo { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:11px; font-size:.8rem; font-weight:600; margin-bottom:16px; }
.kiosk-geo[data-state="locating"] { background:var(--brand-50); color:var(--brand-700); }
.kiosk-geo[data-state="locating"] .icon { animation:pulse 1.2s ease-in-out infinite; }
.kiosk-geo[data-state="ok"]  { background:#e7f6ee; color:#157f43; }
.kiosk-geo[data-state="err"] { background:#fdeceb; color:var(--accent-600); }
.kiosk-geo button { margin-left:auto; border:0; background:#fff; border-radius:8px; padding:4px 10px; font:700 .75rem/1 "Manrope",sans-serif; cursor:pointer; color:inherit; }
@keyframes pulse { 50% { opacity:.35; } }

.kiosk-q { font:800 1.05rem/1.2 "Archivo",sans-serif; color:var(--ink); margin:4px 0 12px; }
.ksection-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ksection { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 16px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--surface-2); cursor:pointer; text-align:left; transition:.16s var(--ease); font:inherit; }
.ksection:hover, .ksection:focus-visible { border-color:var(--brand); background:var(--brand-50); transform:translateY(-2px); }
.ksection .icon { color:var(--brand); }
.ksection b { font:800 1rem/1 "Archivo",sans-serif; color:var(--ink); }
.ksection span { font-size:.74rem; color:var(--muted); }

.kback { display:inline-flex; align-items:center; gap:5px; border:0; background:none; color:var(--brand-700);
  font:700 .8rem/1 "Manrope",sans-serif; cursor:pointer; padding:0 0 12px; }
.klookup { font-size:1.05rem; padding:13px 15px; }
.kstaff-list { margin-top:10px; display:flex; flex-direction:column; gap:7px; max-height:42vh; overflow-y:auto; }
.khint { color:var(--muted); font-size:.82rem; text-align:center; padding:14px 6px; }
.kstaff { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; text-align:left; transition:.14s var(--ease); font:inherit; width:100%; }
.kstaff:hover, .kstaff:focus-visible { border-color:var(--brand); background:var(--brand-50); }
.kstaff b { display:block; color:var(--ink); font-size:.95rem; }
.kstaff small { color:var(--muted); font-size:.74rem; }

.kwho { display:flex; align-items:center; gap:11px; padding:10px 0 14px; }
.kwho b { display:block; color:var(--ink); font-size:1rem; }
.kwho .muted { font-size:.76rem; }
.kstatus { padding:11px 13px; border-radius:11px; background:var(--brand-50); color:var(--brand-700);
  font-size:.86rem; font-weight:600; margin-bottom:14px; }
.kstatus.done { background:#e7f6ee; color:#157f43; }
.kstatus.err  { background:#fdeaea; color:var(--accent-600, #c4231a); }

/* Live camera viewport */
.kcam { position:relative; width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:var(--brand-900, #0d1b3e); margin:2px 0 14px; }
.kcam video { width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(-1); }
.kcam canvas { display:none; }
.kcam-msg { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; text-align:center; padding:18px; color:#cdd8f5; font-size:.9rem; font-weight:600; }
.kcam[data-state="live"] .kcam-msg { display:none; }
.kcam[data-state="err"]  .kcam-msg { color:#ffd9d4; }
.kcam[data-state="idle"], .kcam[data-state="err"] { cursor:pointer; }
.kcam[data-state="idle"] .kcam-msg::before {
  content:""; width:46px; height:46px; border-radius:50%; border:2px solid rgba(255,255,255,.55);
  background:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.kcam[data-state="starting"] .kcam-msg::before {
  content:""; width:26px; height:26px; border-radius:50%; border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff; animation:kspin .7s linear infinite; }
@keyframes kspin { to { transform:rotate(360deg); } }
.kshutter { width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 16px;
  border-radius:16px; border:0; cursor:pointer; background:var(--accent); color:#fff; transition:.18s var(--ease);
  font:800 1rem/1.2 "Archivo",sans-serif; box-shadow:0 14px 30px -12px rgba(230,9,23,.55); }
.kshutter:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(230,9,23,.6); }
.kshutter:disabled { background:var(--faint); box-shadow:none; cursor:not-allowed; }
.kresult { display:flex; align-items:flex-start; gap:13px; padding:18px 16px; border-radius:14px; margin-bottom:14px; }
.kresult.ok  { background:#e7f6ee; }
.kresult.err { background:#fdeceb; }
.kresult .kr-icon { width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  font:800 1.2rem/1 "Archivo",sans-serif; color:#fff; }
.kresult.ok  .kr-icon { background:#1da45c; }
.kresult.err .kr-icon { background:var(--accent); }
.kresult .kr-text { font:700 .98rem/1.35 "Manrope",sans-serif; color:var(--ink); }
.kresult .kr-text small { display:block; margin-top:4px; font-weight:600; font-size:.8rem; color:var(--muted); }

/* ---- Empty state ------------------------------------------------- */
.empty {
  text-align:center; padding:48px 20px; color:var(--muted);
}
.empty .icon { color:var(--brand-300); margin-bottom:10px; }
.empty h3 { margin-bottom:6px; }

/* ---- Bike catalogue ---------------------------------------------- */
.bike-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.bike-card { display:flex; flex-direction:column; overflow:hidden; transition:.2s var(--ease); }
.bike-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand-100); }
.bike-media {
  position:relative; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(150deg, var(--brand-900), var(--brand) 65%, var(--brand-700));
}
.bike-media img { width:100%; height:100%; object-fit:cover; }
.bike-media .ghost {
  font:900 clamp(2.6rem,8vw,3.6rem)/.85 "Archivo",sans-serif; color:rgba(255,255,255,.16);
  letter-spacing:-.04em; text-align:center; padding:0 16px; position:relative; z-index:1;
}
.bike-media::after { /* diagonal speed slash */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 30px);
}
.bike-media .cat-tag {
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.92); color:var(--brand-700);
  font:700 .68rem/1 "Archivo",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
}
.bike-body { padding:16px 17px 18px; display:flex; flex-direction:column; gap:13px; flex:1; }
.bike-title { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.bike-title h3 { font-size:1.12rem; }
.price { font:800 1.05rem/1 "Archivo",sans-serif; color:var(--brand-700); white-space:nowrap; }
.price small { font-size:.66rem; color:var(--muted); font-weight:600; display:block; text-align:right; }
.bike-desc { color:var(--body); font-size:.86rem; min-height:0; }
.spec-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-top:4px; border-top:1px dashed var(--line); }
.spec { text-align:center; }
.spec .v { font:800 .92rem/1 "Archivo",sans-serif; color:var(--ink); }
.spec .k { font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; display:flex; align-items:center; gap:3px; justify-content:center; }
.spec .k .icon { width:12px; height:12px; color:var(--brand-300); }
.bike-foot { display:flex; gap:8px; margin-top:auto; padding-top:4px; }

/* ---- Leaderboard / bars ------------------------------------------ */
.lb { display:flex; flex-direction:column; gap:14px; }
.lb-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
.lb-rank { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font:800 .8rem/1 "Archivo",sans-serif; background:var(--brand-50); color:var(--brand-700); }
.lb-rank.gold { background:#fef3c7; color:#a16207; }
.lb-bar-track { height:30px; border-radius:8px; background:var(--surface-2); position:relative; overflow:hidden; border:1px solid var(--line-2); }
.lb-bar { position:absolute; left:0; top:0; bottom:0; border-radius:8px; background:linear-gradient(90deg,var(--brand),var(--brand-500)); min-width:6px; transition:width .9s var(--ease); }
.lb-bar.top { background:linear-gradient(90deg,var(--accent-600),var(--accent)); }
.lb-name { display:flex; align-items:center; gap:9px; min-width:0; }
.lb-name b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-val { text-align:right; }
.lb-val b { font:800 .95rem/1 "Archivo",sans-serif; color:var(--ink); }
.lb-val span { font-size:.74rem; color:var(--muted); display:block; }

/* list rows (follow-ups, models) */
.list { display:flex; flex-direction:column; }
.list-row { display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line-2); }
.list-row:last-child { border-bottom:0; }
.list-row .grow { flex:1; min-width:0; }
.list-row .grow b { color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-row .grow span { font-size:.78rem; color:var(--muted); }

/* ---- Modal ------------------------------------------------------- */
.modal { position:fixed; inset:0; z-index:80; display:none; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(10,18,46,.5); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s var(--ease); }
.modal.open .modal-backdrop { opacity:1; }
.modal-dialog {
  position:relative; z-index:1; background:var(--surface); border-radius:var(--radius-lg);
  width:min(640px, 94vw); max-height:92vh; overflow:auto; margin:5vh auto;
  box-shadow:var(--shadow-lg); transform:translateY(16px) scale(.98); opacity:0;
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
.modal.open .modal-dialog { transform:translateY(0) scale(1); opacity:1; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0; z-index:2; }
.modal-head h2 { display:flex; align-items:center; gap:9px; }
.modal-head h2 .icon { color:var(--accent); }
.modal-body { padding:20px; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:16px 20px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--surface); }
@media (max-width:560px){
  .modal-dialog { width:100vw; max-height:100vh; height:100vh; margin:0; border-radius:0; }
  .modal-foot { padding-bottom:max(16px, env(safe-area-inset-bottom)); }
}

/* ---- Toast / flash ----------------------------------------------- */
.toasts { position:fixed; top:14px; right:14px; left:14px; z-index:120; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
@media (min-width:560px){ .toasts{ left:auto; width:380px; } }
.toast {
  pointer-events:auto; display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  border-left:4px solid var(--brand); animation:slideIn .4s var(--ease) both;
}
.toast.success { border-left-color:var(--won); }
.toast.error   { border-left-color:var(--accent); }
.toast .ti { flex:none; margin-top:1px; }
.toast.success .ti { color:var(--won); }
.toast.error .ti   { color:var(--accent); }
.toast .msg { font-size:.88rem; color:var(--ink); font-weight:600; flex:1; }
.toast .close { background:none; border:0; color:var(--faint); cursor:pointer; padding:0; }
.toast.hide { animation:slideOut .35s var(--ease) forwards; }

/* ---- Bottom nav (mobile) ----------------------------------------- */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  padding:6px 4px max(6px, env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px -16px rgba(17,26,48,.4);
}
@media (min-width:920px){ .bottom-nav{ display:none; } }
.bottom-nav a {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
  color:var(--muted); font:700 .62rem/1 "Manrope",sans-serif; border-radius:10px;
}
.bottom-nav a.is-active { color:var(--brand); }
.bottom-nav a.is-active .icon { color:var(--accent); }

/* ---- Auth screens ------------------------------------------------ */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .auth-wrap{ grid-template-columns:1.05fr .95fr; } }
.auth-hero {
  display:none; position:relative; overflow:hidden; color:#fff; padding:48px;
  flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg,var(--brand-900),var(--brand) 55%,var(--brand-700));
}
@media (min-width:900px){ .auth-hero{ display:flex; } }
.auth-hero::before { content:""; position:absolute; inset:0; opacity:.6;
  background:repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px); }
.auth-hero::after { content:""; position:absolute; right:-80px; bottom:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(226,35,26,.55), transparent 70%); filter:blur(10px); }
.auth-hero .hbrand { display:flex; position:relative; z-index:1; }
.auth-hero .hbrand .brand-logo { width:auto; padding:14px 22px; }
.auth-hero .hbrand .brand-logo img { width:auto; max-width:none; height:34px; }
.auth-hero h2 { color:#fff; font-size:clamp(1.8rem,1.2rem+2vw,2.8rem); position:relative; z-index:1; max-width:15ch; }
.auth-hero p { color:#c5d2f7; position:relative; z-index:1; max-width:38ch; }
.auth-hero .hi-stats { display:flex; gap:26px; position:relative; z-index:1; }
.auth-hero .hi-stats .v { font:800 1.6rem/1 "Archivo",sans-serif; }
.auth-hero .hi-stats .k { font-size:.74rem; color:#9fb4ef; }
.auth-form-side { display:flex; align-items:center; justify-content:center; padding:28px 20px; }
.auth-card { width:min(420px,100%); }
.auth-card .mob-brand { display:flex; justify-content:center; margin-bottom:24px; }
.auth-card .mob-brand .brand-logo { width:auto; padding:0; background:none; box-shadow:none; }
.auth-card .mob-brand .brand-logo img { width:auto; max-width:none; height:30px; }
@media (min-width:900px){ .auth-card .mob-brand{ display:none; } }
.demo-creds { margin-top:18px; padding:13px 15px; border:1px dashed var(--brand-100); background:var(--brand-50); border-radius:12px; font-size:.82rem; color:var(--brand-700); }
.demo-creds b { font-family:"Archivo",sans-serif; }
.demo-creds code { background:#fff; padding:1px 6px; border-radius:6px; font-weight:700; }

/* ---- Motion ------------------------------------------------------ */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes slideIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes slideOut { to { opacity:0; transform:translateX(40px); } }
@keyframes pop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }

.rise { animation:rise .55s var(--ease) both; }
.stagger > * { animation:rise .55s var(--ease) both; }
.stagger > *:nth-child(1){ animation-delay:.02s; }
.stagger > *:nth-child(2){ animation-delay:.07s; }
.stagger > *:nth-child(3){ animation-delay:.12s; }
.stagger > *:nth-child(4){ animation-delay:.17s; }
.stagger > *:nth-child(5){ animation-delay:.22s; }
.stagger > *:nth-child(6){ animation-delay:.27s; }
.stagger > *:nth-child(7){ animation-delay:.32s; }
.stagger > *:nth-child(8){ animation-delay:.37s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-delay:0 !important; transition-duration:.001ms !important; }
}

/* ---- Mobile drawer ----------------------------------------------- */
.mobile-drawer { position:fixed; inset:0; z-index:90; display:none; }
.mobile-drawer.open { display:block; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(10,18,46,.5); backdrop-filter:blur(2px); animation:fade .25s var(--ease) both; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.drawer-panel {
  position:absolute; top:0; left:0; bottom:0; width:min(290px,82vw);
  background:linear-gradient(185deg,var(--brand-900),var(--brand) 70%); color:#dde6ff;
  padding:20px 16px; display:flex; flex-direction:column; overflow-y:auto;
  box-shadow:var(--shadow-lg); animation:slideLeft .3s var(--ease) both;
}
@keyframes slideLeft { from { transform:translateX(-100%); } to { transform:none; } }
.drawer-panel .sidebar-brand { padding-top:0; }

/* utility */
.flex { display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; } .flex-wrap{ flex-wrap:wrap; }
.mt-1{ margin-top:6px; } .mt-2{ margin-top:12px; } .mt-3{ margin-top:18px; } .mb-2{ margin-bottom:12px; }
.text-sm{ font-size:.85rem; } .text-xs{ font-size:.76rem; } .w-full{ width:100%; }
.hide-sm{ } @media (max-width:760px){ .hide-sm{ display:none !important; } }
.grow{ flex:1; }
.ta-right{ text-align:right; } .ta-center{ text-align:center; }

/* ============================================================
   Demo-build components (inventory, insurance, docs, dashboard+)
   ============================================================ */

/* Status colour completion */
.badge--warm-soft{ background:var(--warn-bg); color:var(--warn); }
.badge--warn{ background:var(--warn-bg); color:var(--warn); }
.badge-xs{ font-size:.66rem; padding:2px 7px; }

/* Count pill inside chips */
.chip-n{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:5px;
  border-radius:9px; background:var(--brand-50); color:var(--brand-700); font:700 .68rem/1 "Archivo",sans-serif; }
.chip.is-active .chip-n{ background:rgba(255,255,255,.22); color:#fff; }

/* Mono identifier tag (SKU, invoice no, reg no) */
.mono-tag{ font:600 .76rem/1 ui-monospace,"SF Mono",Menlo,monospace; color:var(--brand-700);
  background:var(--brand-50); border:1px solid var(--line); padding:3px 7px; border-radius:7px; white-space:nowrap; letter-spacing:-.01em; }

/* Compact select used in row actions */
.select-mini{ width:auto; min-width:96px; padding:5px 26px 5px 9px; font-size:.78rem; height:auto; }

/* Inventory type marker */
.type-dot{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; color:#fff; }
.type-bike{ background:linear-gradient(135deg,var(--brand-500),var(--brand)); }
.type-part{ background:linear-gradient(135deg,#0e8a6b,#0b6e55); }
.type-accessory{ background:linear-gradient(135deg,#b5710a,#946012); }
.type-misc{ background:linear-gradient(135deg,#6d5bd0,#5840b8); }

/* Stock health cell */
.stock-cell{ min-width:130px; }
.stock-top{ display:flex; align-items:center; gap:8px; }
.stock-top b{ font:800 1rem/1 "Archivo",sans-serif; color:var(--ink); }
.stock-track{ height:6px; border-radius:4px; background:var(--line-2); margin:6px 0 3px; overflow:hidden; }
.stock-bar{ height:100%; border-radius:4px; transition:width .8s var(--ease); }
.sb-ok{ background:linear-gradient(90deg,var(--won),#1aa05f); }
.sb-low{ background:linear-gradient(90deg,#b5710a,#e0922a); }
.sb-out{ background:var(--lost); }

/* Insurance partner cards */
.partner-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:680px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .partner-grid{ grid-template-columns:repeat(3,1fr); } }
.partner-card{ padding:18px; display:flex; flex-direction:column; gap:14px; transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.partner-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.partner-card.is-paused{ opacity:.72; }
.pc-head{ display:flex; align-items:flex-start; gap:11px; }
.pc-head h3{ font-size:1.02rem; line-height:1.2; }
.pc-logo{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-700),var(--brand-900)); color:#fff; font:800 .9rem/1 "Archivo",sans-serif; }
.pc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.pc-stats .v{ display:block; font:800 1.05rem/1 "Archivo",sans-serif; color:var(--ink); }
.pc-stats .k{ font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }
.pc-note{ font-size:.82rem; color:var(--body); margin:0; }
.pc-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.pc-contact{ font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }

/* Bar chart (sales trend) */
.bar-chart{ display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:8px; }
.bc-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.bc-track{ flex:1; width:100%; display:flex; align-items:flex-end; }
.bc-bar{ width:100%; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,var(--brand-500),var(--brand)); min-height:4px;
  animation:growBar .8s var(--ease) both; transform-origin:bottom; }
.bc-bar.is-cur{ background:linear-gradient(180deg,var(--accent),var(--accent-600)); }
@keyframes growBar{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.bc-val{ font:700 .68rem/1 "Archivo",sans-serif; color:var(--ink); }
.bc-label{ font-size:.72rem; color:var(--muted); }

/* Meter rows + sales mix */
.meter-row{ margin-bottom:13px; }
.meter-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font-size:.85rem; }
.meter-top b{ color:var(--ink); }
.mix-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mix-cell{ display:flex; flex-direction:column; gap:4px; padding:11px; border:1px solid var(--line-2); border-radius:11px; background:var(--surface-2); }
.mix-cell b{ font:800 1.05rem/1 "Archivo",sans-serif; color:var(--ink); }

/* Dashboard pulse strip */
.pulse-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:22px; }
@media (min-width:680px){ .pulse-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .pulse-grid{ grid-template-columns:repeat(6,1fr); } }
.pulse{ display:flex; flex-direction:column; gap:3px; padding:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease); }
.pulse:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-300); }
.pulse .p-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--brand-50); color:var(--brand); margin-bottom:4px; }
.pulse .p-v{ font:800 1.15rem/1 "Archivo",sans-serif; color:var(--ink); }
.pulse .p-k{ font-size:.72rem; color:var(--muted); }
.pulse.is-warn .p-ic{ background:var(--warn-bg); color:var(--warn); }
.pulse.is-warn .p-v{ color:var(--warn); }

/* Clickable list rows */
.list-row--link{ text-decoration:none; color:inherit; border-radius:10px; padding-left:8px; padding-right:8px; margin:0 -8px;
  transition:background .18s var(--ease); }
.list-row--link:hover{ background:var(--surface-2); }
.list-row--link b{ color:var(--ink); }

/* Demo notices */
.demo-bar{ display:flex; align-items:center; gap:13px; padding:13px 16px; margin-bottom:20px; border-radius:var(--radius);
  background:linear-gradient(100deg,var(--brand-50),#fff); border:1px solid var(--brand-100); }
.demo-bar .demo-ico{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--brand); color:#fff; }
.demo-bar b{ color:var(--ink); font-family:"Archivo",sans-serif; }
.demo-inline{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:11px; font-size:.84rem;
  background:var(--warn-bg); color:#7a4d06; border:1px dashed #e3b765; }
.demo-inline b{ color:#5e3a02; }
.demo-pill{ display:inline-flex; align-items:center; gap:3px; font:700 .64rem/1 "Archivo",sans-serif; color:var(--muted);
  background:var(--line-2); padding:2px 6px; border-radius:6px; vertical-align:middle; }

/* Enhanced demo-creds on login */
.demo-creds .dc-rows{ display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.demo-creds .dc-row{ display:flex; align-items:center; gap:7px; width:100%; text-align:left; font:inherit; color:inherit;
  background:#fff; border:1px solid var(--brand-100); border-radius:9px; padding:7px 10px; cursor:pointer;
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.demo-creds button.dc-row:hover{ border-color:var(--brand-300); transform:translateY(-1px); box-shadow:var(--shadow); }
.demo-creds button.dc-row:active{ transform:translateY(0); }
.demo-creds .dc-role{ display:inline-grid; place-items:center; min-width:48px; padding:2px 8px; border-radius:6px;
  background:var(--brand); color:#fff; font:700 .66rem/1.4 "Archivo",sans-serif; }
.demo-creds .dc-sep{ color:var(--faint); }
.demo-creds .dc-note{ margin:10px 0 0; font-size:.74rem; color:var(--brand-700); opacity:.85; }

/* Price breakup (bike cards) */
.price-break{ margin:4px 0 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); overflow:hidden; }
.price-break summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 13px; font-size:.82rem; color:var(--brand-700); font-weight:600; }
.price-break summary::-webkit-details-marker{ display:none; }
.price-break summary b{ font-family:"Archivo",sans-serif; color:var(--ink); }
.price-break summary b small{ font-weight:600; color:var(--muted); font-size:.66rem; margin-left:3px; }
.price-break[open] summary{ border-bottom:1px solid var(--line); background:#fff; }
.pb-lines{ padding:8px 13px 12px; }
.pb-line{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:.82rem; border-bottom:1px dashed var(--line-2); }
.pb-line:last-child{ border-bottom:0; }
.pb-line b{ color:var(--ink); }
.pb-note{ font-style:normal; color:var(--faint); font-size:.72rem; }
.pb-total{ margin-top:4px; padding-top:9px; border-top:1.5px solid var(--ink); border-bottom:0; font-weight:700; }
.pb-total span{ color:var(--ink); } .pb-total b{ color:var(--brand); font-family:"Archivo",sans-serif; font-size:1rem; }

/* Document builder (quote/invoice forms) */
.doc-builder .back-link{ color:var(--muted); }
.doc-items{ margin-top:6px; }
.di-head{ display:grid; grid-template-columns:1fr 1fr 130px 36px; gap:10px; padding:0 2px 8px;
  font:700 .66rem/1 "Archivo",sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.di-head.inv{ grid-template-columns:1fr 64px 120px 110px 36px; }
.di-row{ display:grid; grid-template-columns:1fr 1fr 130px 36px; gap:10px; align-items:center; margin-bottom:9px; }
.di-row.inv{ grid-template-columns:1fr 64px 120px 110px 36px; }
.di-desc{ display:flex; flex-direction:column; gap:5px; }
.di-note{ font-size:.8rem; }
.di-amt{ text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.di-del{ color:var(--accent-600); }
@media (max-width:760px){
  .di-head{ display:none; }
  .di-row,.di-row.inv{ grid-template-columns:1fr 1fr; gap:8px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); }
  .di-row .di-desc{ grid-column:1/-1; }
  .di-row.inv .di-amt{ grid-column:1/-1; text-align:left; }
}
.doc-summary .sum-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:.9rem; }
.doc-summary .sum-row span{ color:var(--muted); }
.doc-summary .sum-row b{ color:var(--ink); font-family:"Archivo",sans-serif; }
.doc-summary .sum-total span{ color:var(--ink); font-weight:700; }
.doc-summary .sum-total b{ font-size:1.4rem; color:var(--brand); transition:color .2s var(--ease); }
@media (min-width:960px){ .doc-summary{ position:sticky; top:18px; } }
.back-link{ display:inline-flex; align-items:center; gap:5px; }

/* ---- Motion polish ------------------------------------------------ */
/* Tactile button press */
.btn:active{ transform:scale(.975); }
.icon-btn:active{ transform:scale(.92); }

/* Data-table row hover (data-heavy pages read better with a hover cue) */
@media (min-width:760px){
  table.data tbody tr{ transition:background .16s var(--ease); }
  table.data tbody tr:hover{ background:var(--surface-2); }
}

/* Price-breakup reveal + chevron */
.price-break summary::after{
  content:""; width:8px; height:8px; margin-left:6px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease); opacity:.6;
}
.price-break[open] summary::after{ transform:rotate(-135deg); }
.price-break summary{ transition:background .2s var(--ease); }
.price-break[open] .pb-lines{ animation:pbReveal .32s var(--ease) both; }
@keyframes pbReveal{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } }

/* Live total feedback in the document builder */
@keyframes totalBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.doc-summary .sum-total b.bump{ animation:totalBump .28s var(--ease); color:var(--won); }

/* KPI icon settles in after the card rises */
.kpi .ico{ animation:icoPop .5s var(--ease) .15s both; }
@keyframes icoPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }

/* Pulse tiles: icon nudge on hover */
.pulse .p-ic{ transition:transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease); }
.pulse:hover .p-ic{ transform:translateY(-2px) scale(1.06); }