/* ============================================================================
   KYROS — base styles (structure and page layouts)
   ----------------------------------------------------------------------------
   Moved out of index.html on 6 Sep 2026 (stage 6 of the UI reset). Tokens and
   themes live in ui.css, which loads after this file and wins. Every colour /
   radius / shadow token declaration that ui.css defines was deleted from here;
   what remains is the layout and page-specific CSS the pages are drawn with.
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}

html{height:100%}
body{background:var(--bg);color:#dcdce8;font-family:'Barlow',sans-serif;font-size:13px;height:100%;overflow:hidden;overscroll-behavior:none}
input,select,textarea,button{font-family:'Barlow',sans-serif}
.hidden{display:none!important}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* PIN SCREEN */
.pin-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}
.pin-logo{font-family:Barlow Condensed,sans-serif;font-size:42px;font-weight:900;letter-spacing:0.2em;background:var(--silver);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;text-align:center}
.pin-sub{font-size:9px;letter-spacing:0.3em;color:var(--dim);text-transform:uppercase;margin-bottom:36px;text-align:center}
.pin-card{background:var(--card);border:1px solid var(--border2);border-radius:10px;padding:26px;width:300px}
.pin-title{font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--chrome);text-align:center;margin-bottom:18px}
.pin-staff-list{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;max-height:min(52vh,420px);overflow-y:auto}
.pin-staff-btn{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:9px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color 0.15s}
.pin-staff-btn:hover{border-color:var(--border2)}
.pin-staff-btn.selected{border-color:var(--chrome2);background:rgba(144,144,168,0.08)}
.pin-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Barlow Condensed,sans-serif;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.pin-staff-info{flex:1}
.pin-staff-name{font-size:12px;font-weight:500;color:var(--chrome)}
.pin-staff-role{font-size:9px;color:var(--dim)}
.pin-dots{display:flex;gap:8px;justify-content:center;margin-bottom:14px;min-height:14px}
.pin-dot{width:10px;height:10px;border-radius:50%;background:var(--border2);transition:background 0.15s}
.pin-dot.filled{background:var(--chrome)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pin-key{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:13px;text-align:center;font-family:Barlow Condensed,sans-serif;font-size:18px;font-weight:700;color:var(--chrome);cursor:pointer;transition:all 0.15s;user-select:none}
.pin-key:hover{background:var(--border);border-color:var(--border2)}
.pin-key:active{transform:scale(0.95)}
.pin-key.del{font-size:15px;color:var(--chrome2)}
.pin-key.empty{background:transparent;border-color:transparent;cursor:default}
.pin-error{font-size:11px;color:#e06060;text-align:center;margin-top:8px;min-height:14px}

/* LAYOUT */
.shell{display:grid;grid-template-columns:190px 1fr;height:100vh;height:100dvh;overflow:hidden}
.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
/* The topbar scrolled away with the content and the whole app rubber-banded,
   which is what made it feel like a web page rather than an app. Cause: .main had
   overflow:auto but only min-height, so it grew to fit its content and never
   scrolled — the WINDOW scrolled instead, carrying the sticky topbar with it.
   Giving .main a definite height makes it the scroll container, so the topbar
   stays put and only the content moves. */
.main{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.sb-logo{padding:16px 14px 14px}
.sb-logo-main{font-family:Barlow Condensed,sans-serif;font-size:18px;font-weight:900;letter-spacing:0.18em;background:var(--silver);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.sb-logo-sub{font-size:9px;letter-spacing:0.28em;color:var(--dim);text-transform:uppercase;margin-top:3px}
.sb-user{padding:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Barlow Condensed,sans-serif;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.sb-user-name{font-size:12px;font-weight:500;color:var(--chrome);line-height:1.4}
.sb-user-role{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;line-height:1.4}
.sb-user-tasks{font-size:9px;color:#d09030;margin-top:3px;line-height:1.4;cursor:pointer;display:flex;align-items:center;gap:4px}
.sb-user-tasks:hover{color:#e0a040}
.sb-user-tasks.clear{color:#5aaa5a}
.sb-user-tasks i{font-size:10px}
.sb-icon-btn{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:2px}
.sb-icon-btn:hover{color:var(--chrome2)}
.sb-nav{padding:10px 0;flex:1}
.sb-link{display:flex;align-items:center;gap:10px;padding:11px 16px;color:var(--chrome2);font-size:13px;font-weight:500;cursor:pointer;border-left:2px solid transparent;transition:all 0.15s;position:relative}
.sb-link:hover{color:var(--chrome);background:rgba(255,255,255,0.02)}
.sb-link.active{color:var(--chrome);border-left-color:var(--chrome2);background:rgba(255,255,255,0.03)}
.sb-link i{font-size:15px}
.sb-badge{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block}
:root{--safe-top:env(safe-area-inset-top,0px)}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--safe-top) 20px 0;height:calc(46px + var(--safe-top));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.tb-title{font-family:Barlow Condensed,sans-serif;font-size:15px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--chrome)}
.tb-right{display:flex;gap:8px;align-items:center}
.tb-date{font-size:10px;color:var(--dim)}

.page{display:none;padding:16px 18px}.page.active{display:block}
.btn{font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:8px 15px;border-radius:4px;cursor:pointer;border:none;transition:all 0.15s}
.btn-primary{background:var(--chrome);color:#111}.btn-primary:hover{background:#e0e0f0}
.btn-ghost{background:transparent;color:var(--chrome2);border:1px solid var(--border2)}.btn-ghost:hover{border-color:var(--chrome2);color:var(--chrome)}
.btn-sm{padding:5px 11px;font-size:10px}
.btn-xs{padding:3px 8px;font-size:9px}
.btn-danger{background:var(--red-t);color:#e06060;border:1px solid rgba(192,48,48,0.3)}
.btn-green{background:var(--green-t);color:var(--green);border:1px solid rgba(42,122,42,0.3)}
.btn-amber{background:var(--amber-t);color:var(--amber);border:1px solid rgba(160,96,16,0.3)}
.btn-blue{background:var(--blue-t);color:var(--blue);border:1px solid rgba(26,74,138,0.3)}
.btn-purple{background:var(--purple-t);color:var(--purple);border:1px solid rgba(106,26,138,0.3)}
.btn-grey{background:var(--grey-t);color:#999;border:1px solid rgba(120,120,120,0.25)}
.btn:disabled{opacity:0.35;cursor:not-allowed}

.stats-row{display:grid;gap:10px;margin-bottom:14px}
.stats-4{grid-template-columns:repeat(4,1fr)}
.stats-3{grid-template-columns:repeat(3,1fr)}
.stats-5{grid-template-columns:repeat(5,1fr)}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px}
.stat-val{font-family:Barlow Condensed,sans-serif;font-size:22px;font-weight:900;color:var(--chrome);line-height:1}
.stat-label{font-size:9px;color:var(--dim);letter-spacing:0.08em;text-transform:uppercase;margin-top:2px}
.stat-card.green{border-color:rgba(42,122,42,0.3)}.stat-card.red{border-color:rgba(192,48,48,0.3)}.stat-card.amber{border-color:rgba(160,96,16,0.3)}.stat-card.blue{border-color:rgba(26,74,138,0.3)}.stat-card.purple{border-color:rgba(106,26,138,0.3)}
/* ── Dashboard Redesign ──────────────────────────────────────────── */
.db-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.db-hero-tile{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 10px 15px;text-align:center;position:relative;overflow:hidden;cursor:default}
.db-hero-tile::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:10px 10px 0 0}
.db-tile-red::after{background:linear-gradient(90deg,#e06060,#c03030)}
.db-tile-amber::after{background:linear-gradient(90deg,#d09030,#a06010)}
.db-tile-green::after{background:linear-gradient(90deg,#2e7d4f,#2a7a2a)}
.db-tile-icon{font-size:18px;display:block;margin-bottom:8px}
.db-tile-red .db-tile-icon{color:#e06060}.db-tile-amber .db-tile-icon{color:#d09030}.db-tile-green .db-tile-icon{color:#2e7d4f}
.db-tile-num{font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:900;line-height:1;margin-bottom:5px}
.db-tile-red .db-tile-num{color:#e06060}.db-tile-amber .db-tile-num{color:#d09030}.db-tile-green .db-tile-num{color:#2e7d4f}
.db-tile-lbl{font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}
.db-section-label{font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);margin:0 0 10px 2px;display:flex;align-items:center;gap:8px}
.db-section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.db-car-card{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:8px;margin-bottom:8px;overflow:hidden;transition:border-color .15s}
.db-car-card.urgent{border-left-color:#e06060}
.db-car-card:not(.urgent){border-left-color:#d09030}
.db-car-head{display:flex;align-items:center;gap:8px;padding:10px 13px 9px;cursor:pointer}
.db-car-head:active{opacity:0.85}
.db-car-name{font-size:12px;font-weight:600;color:var(--chrome);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-task-pill{font-size:9px;font-weight:700;letter-spacing:0.05em;color:var(--dim);background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;padding:2px 7px;flex-shrink:0}
.db-task-row{display:flex;align-items:center;gap:8px;padding:7px 13px;border-top:1px solid var(--border);min-height:34px}
.db-dept-badge{font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;flex-shrink:0;white-space:nowrap}
.db-task-text{font-size:11px;color:var(--chrome2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-pl-grid{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0}
.db-pl-chip{border:1px solid var(--border);border-radius:8px;padding:9px 14px;display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:border-color .15s;min-width:72px}
.db-pl-chip:hover{border-color:var(--border2)}
.db-pl-n{font-size:18px;font-weight:900;font-family:'Barlow Condensed',sans-serif;line-height:1}
.db-pl-stage{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.db-vs-booking{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-left:3px solid #6090e0;border-radius:7px;padding:10px 13px;margin-bottom:7px}
.db-vs-ready{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-left:3px solid #2e7d4f;border-radius:7px;padding:10px 13px;margin-bottom:7px;cursor:pointer}
.db-vs-clean{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-left:3px solid #d09030;border-radius:7px;padding:10px 13px;margin-bottom:7px;cursor:pointer}

.card{background:var(--card);border:1px solid var(--border);border-radius:6px;margin-bottom:12px}
.card-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}
.card-title{font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--chrome)}
.card-body{padding:12px 14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);padding:7px 10px;border-bottom:1px solid var(--border)}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:11px;color:#c0c0d0;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,0.015)}
.tbl-make{font-weight:600;color:var(--chrome);font-size:13px}
.tbl-reg{font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.06em;background:#F5C518;border:1px solid #c9a000;padding:3px 8px;border-radius:3px;color:#1a1a1a;cursor:pointer}

.badge{display:inline-block;font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
.badge-green{background:var(--green-t);color:var(--green);border:1px solid rgba(42,122,42,0.3)}
.badge-red{background:var(--red-t);color:var(--red);border:1px solid rgba(192,48,48,0.3)}
.badge-amber{background:var(--amber-t);color:var(--amber);border:1px solid rgba(160,96,16,0.3)}
.badge-blue{background:var(--blue-t);color:var(--blue);border:1px solid rgba(26,74,138,0.3)}
.badge-purple{background:var(--purple-t);color:var(--purple);border:1px solid rgba(106,26,138,0.3)}
.badge-grey{background:rgba(255,255,255,0.05);color:var(--chrome2);border:1px solid var(--border2)}

/* BIG CLEAR STATUS PILLS — colour coded, minimal text */
.status-pill{display:inline-flex;align-items:center;gap:6px;font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:6px 13px;border-radius:5px}
.status-pill i{font-size:13px}
.pill-inspection{background:rgba(26,74,138,0.18);color:#6090e0;border:1px solid rgba(26,74,138,0.4)}
.pill-mechanic{background:rgba(192,48,48,0.18);color:#e06060;border:1px solid rgba(192,48,48,0.4)}
.pill-bodywork{background:rgba(106,26,138,0.18);color:#a060e0;border:1px solid rgba(106,26,138,0.4)}
.pill-valet{background:rgba(160,96,16,0.18);color:#d09030;border:1px solid rgba(160,96,16,0.4)}
.pill-photos{background:rgba(26,106,106,0.18);color:#40b0b0;border:1px solid rgba(26,106,106,0.4)}
.pill-ready{background:rgba(42,122,42,0.18);color:#5aaa5a;border:1px solid rgba(42,122,42,0.4)}
.pill-sold{background:rgba(120,120,120,0.15);color:#999;border:1px solid rgba(120,120,120,0.3)}
.pill-deposit{background:rgba(208,150,30,0.15);color:#e0b040;border:1px solid rgba(208,150,30,0.35)}

.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0}
.dot-mechanic{background:#e06060}.dot-valet{background:#d09030}.dot-bodywork{background:#a060e0}
.dot-inspection{background:#6090e0}.dot-photos{background:#3aa0a0}.dot-ready{background:#5aaa5a}.dot-sold{background:#777}

.field{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.field label{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--border2);color:#dcdce8;font-size:13px;padding:9px 11px;border-radius:5px;outline:none;transition:border-color 0.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--chrome2)}
.field input::placeholder,.field textarea::placeholder{color:#333}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-full{grid-column:1/-1}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border2);border-radius:8px;width:520px;max-height:88vh;overflow-y:auto}
.modal-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--chrome)}
.modal-close{background:none;border:none;color:var(--dim);cursor:pointer;font-size:18px}
.modal-body{padding:14px 16px}
.modal-foot{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.divider{height:1px;background:var(--border);margin:10px 0}

.task-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:6px;padding:11px 13px;margin-bottom:8px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.task-card.urgent{border-left-color:#e06060}
.task-card.normal{border-left-color:#d09030}
.task-card.low{border-left-color:#5a5a6a}
.task-info{flex:1;min-width:0}
.task-car{font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:700;color:var(--chrome);letter-spacing:0.03em;display:flex;align-items:center;gap:6px;cursor:pointer;flex-wrap:wrap}
.task-note{font-size:12px;color:var(--chrome2);margin-top:4px;line-height:1.6}
.task-meta{font-size:9px;color:var(--dim);margin-top:5px}
.task-actions{display:flex;gap:6px;flex-shrink:0}

.dept-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.dept-pill{font-family:Barlow Condensed,sans-serif;font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 11px;border-radius:20px;border:1px solid var(--border2);background:var(--surface);color:var(--chrome2);cursor:pointer;transition:all 0.15s}
.dept-pill.on{border-color:transparent}
.dept-pill[data-dept="mechanic"].on{background:var(--red-t);color:#e06060;border-color:rgba(192,48,48,0.4)}
.dept-pill[data-dept="valet"].on{background:var(--amber-t);color:#d09030;border-color:rgba(160,96,16,0.4)}
.dept-pill[data-dept="bodywork"].on{background:var(--purple-t);color:#a060e0;border-color:rgba(106,26,138,0.4)}
.dept-pill[data-dept="sales"].on{background:var(--green-t);color:#5aaa5a;border-color:rgba(42,122,42,0.4)}
.dept-pill[data-dept="logistics"].on{background:var(--blue-t);color:#6090e0;border-color:rgba(26,74,138,0.4)}

.sell-type-pill{font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:11px 14px;border-radius:6px;border:1px solid var(--border2);background:var(--surface);color:var(--chrome2);cursor:pointer;transition:all 0.15s;text-align:center;flex:1}
.sell-type-pill:hover{border-color:var(--chrome2)}
.sell-type-pill.selected{background:#fff;color:#0a0a0e;border-color:#fff;font-weight:900}

.stock-row{display:grid;grid-template-columns:10px 82px 1fr auto auto;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.stock-row:hover{background:rgba(255,255,255,0.02)}
.stock-row:last-child{border-bottom:none}
.stock-row.sold-row{opacity:0.55}
.stock-row.sold-row:hover{opacity:0.8}
.stock-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}

.note-item{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin-bottom:8px}
.note-item.done{opacity:0.55}
.note-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px;flex-wrap:wrap}
.note-text{font-size:13px;color:var(--chrome);line-height:1.6}
.note-meta{font-size:9px;color:var(--dim);margin-top:5px}
.note-done-strike{text-decoration:line-through;color:var(--dim)}

.tasks-done-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer}
.tasks-done-item:last-child{border-bottom:none}
.tdi-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;margin-top:1px}
.tdi-text{font-size:11px;color:var(--chrome2);line-height:1.5}
.tdi-text strong{color:var(--chrome)}
.tdi-time{font-size:9px;color:var(--dim);margin-top:2px}
.staff-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.staff-row:last-child{border-bottom:none}
.staff-info{display:flex;align-items:center;gap:10px}
.staff-stats{font-size:10px;color:var(--dim);text-align:right}
.staff-stats span{color:var(--chrome2);font-weight:500}

.doc-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.doc-item:hover{background:rgba(255,255,255,0.02)}
.doc-item:last-child{border-bottom:none}
.doc-thumb{width:40px;height:40px;background:var(--surface);border:1px solid var(--border2);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.search-box{position:relative;margin-bottom:12px}
.search-box input{width:100%;background:var(--surface);border:1px solid var(--border2);color:#dcdce8;font-size:13px;padding:10px 14px 10px 38px;border-radius:6px;outline:none}
.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:15px}
.filter-pills{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.filter-pill{font-family:Barlow Condensed,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 14px;border-radius:20px;border:1px solid var(--border2);background:var(--surface);color:var(--chrome2);cursor:pointer}
.filter-pill.on{background:var(--chrome);color:#111;border-color:var(--chrome)}

.car-diagram-wrap{position:relative;display:inline-block}
.car-diagram-wrap svg{display:block;max-width:100%}
.damage-pin{position:absolute;width:20px;height:20px;background:#e06060;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;z-index:5}

.expense-row{display:grid;grid-template-columns:90px 1fr 90px 90px auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:11px}
.fin-section-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;width:100%}
.fin-collapsible{overflow:hidden;transition:max-height 0.25s ease}
.fin-collapsible.collapsed{max-height:0!important;overflow:hidden}
.expense-row:last-child{border-bottom:none}

.doc-viewer{background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:24px;text-align:center}
.doc-viewer i{font-size:32px;color:var(--dim);margin-bottom:10px;display:block}

.mot-warning{background:rgba(192,48,48,0.1);border:1px solid rgba(192,48,48,0.3);border-radius:6px;padding:10px 12px;font-size:11px;color:#e06060;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mot-warning-amber{background:rgba(160,96,16,0.1);border:1px solid rgba(160,96,16,0.3);color:#d09030}

/* ── Calendar ── */
.cal-topbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cal-topbar-nav{display:flex;align-items:center;gap:6px}
.cal-period-label{font-family:Barlow Condensed,sans-serif;font-size:18px;font-weight:700;letter-spacing:0.06em;color:var(--chrome);min-width:200px;text-align:center}
.cal-view-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--dim);font-size:11px;font-weight:600;padding:4px 14px;border-radius:5px;cursor:pointer;transition:all 0.15s}
.cal-view-btn.active{background:var(--gold);color:#000;border-color:var(--gold)}
.cal-legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
/* Month view */
/* A day someone is off: a soft diagonal wash behind the whole cell, with the
   name in small muted text under the date. Deliberately not a chip — it is a
   state of the day, not a thing to click. */
.cal-cell.c-holiday{background-image:repeating-linear-gradient(135deg,rgba(120,150,200,0.10) 0 8px,rgba(120,150,200,0.04) 8px 16px)}
.cal-cell.c-holiday.c-today{background-image:repeating-linear-gradient(135deg,rgba(120,150,200,0.16) 0 8px,rgba(120,150,200,0.07) 8px 16px)}
.cal-hol{font-size:9px;letter-spacing:.04em;color:var(--chrome2);opacity:.85;line-height:1.25;margin:1px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── LOGIN: three routes, one screen ─────────────────────────────────────── */
.pin-tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:3px;margin-bottom:16px}
.pin-tab{flex:1;background:none;border:none;border-radius:6px;padding:8px;cursor:pointer;
  font-family:Barlow,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);transition:background .15s,color .15s}
.pin-tab.active{background:var(--card);color:var(--chrome);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pin-help{font-size:11px;color:var(--dim);line-height:1.55;margin-bottom:11px}
.pin-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:11px 12px;color:var(--chrome);font-size:13px;margin-bottom:8px;
  font-family:Barlow,sans-serif;transition:border-color .15s}
.pin-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t)}
/* Keyboard focus is visible on every control. :focus-visible leaves mouse clicks alone. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pin-code{text-transform:uppercase;letter-spacing:.18em;font-weight:600;text-align:center}
.pin-btn{width:100%;border-radius:6px;padding:12px;font-family:Barlow,sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-top:4px;
  transition:opacity .15s,border-color .15s}
.pin-btn-primary{border:none;background:var(--brand);color:#fff}
.pin-btn-primary:hover{opacity:.9}
.pin-btn-primary:disabled{opacity:.45;cursor:not-allowed}
.pin-btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--chrome2)}
.pin-btn-ghost:hover{border-color:var(--chrome2);color:var(--chrome)}
.pin-rule{display:flex;align-items:center;gap:9px;margin:20px 0 10px}
.pin-rule:before,.pin-rule:after{content:'';flex:1;height:1px;background:var(--border)}
.pin-rule span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.su-steps{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.su-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background .2s}
.su-dot.on{background:var(--brand)}
.su-bar{flex:1;height:1px;background:var(--border)}
/* A label that stays put. Every field on the sign-up used to be placeholder
   only, so the moment you typed, the only thing telling you what the box was
   for disappeared. That is the difference between a form that reads as a
   product and one that reads as a prototype. */
.su-flabel{display:block;font-size:11px;font-weight:600;color:var(--chrome2);margin:0 0 5px 2px;letter-spacing:0}
.su-flabel + .pin-input{margin-bottom:12px}
.su-opt{font-weight:400;color:var(--dim)}
/* .pin-code is bold and centred, which made its PLACEHOLDER look like a
   value someone had already typed. A hint should read as a hint. */
.pin-code::placeholder{font-weight:400;letter-spacing:.1em;opacity:.75}
.su-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  text-align:center;margin-bottom:14px}

/* ── GETTING STARTED CHECKLIST ───────────────────────────────────────────── */
.onb{background:var(--card);border:1px solid var(--brand-border);border-radius:12px;
  padding:16px 18px 14px;margin-bottom:16px}
.onb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.onb-title{font-family:Barlow Condensed,sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.04em;color:var(--chrome)}
.onb-sub{font-size:11px;color:var(--dim);margin-top:2px}
.onb-hide{background:none;border:none;color:var(--dim);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;padding:2px 4px;font-family:Barlow,sans-serif}
.onb-hide:hover{color:var(--chrome2)}
.onb-track{height:4px;background:var(--surface);border-radius:2px;overflow:hidden;margin-bottom:14px}
.onb-fill{height:100%;background:var(--brand);border-radius:2px;transition:width .45s ease}
.onb-steps{display:flex;flex-direction:column;gap:2px}
.onb-step{display:flex;align-items:center;gap:11px;padding:9px 4px;border-radius:7px;
  cursor:pointer;transition:background .13s}
.onb-step:hover{background:var(--surface)}
.onb-step.done{cursor:default}
.onb-step.done:hover{background:none}
.onb-check{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.onb-step.done .onb-check{background:var(--brand);border-color:var(--brand);color:#fff}
.onb-txt{flex:1;min-width:0}
.onb-t{font-size:13px;color:var(--chrome);font-weight:500}
.onb-step.done .onb-t{color:var(--dim);text-decoration:line-through}
.onb-d{font-size:11px;color:var(--dim);margin-top:1px}
.onb-go{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
  font-weight:600;flex-shrink:0}
.onb-step.done .onb-go{display:none}

/* ── SETTINGS ─────────────────────────────────────────────────────────────
   Built from the same tokens as everything else, so it follows whichever
   light/dark theme is chosen without a second set of colours. */
.set-wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.set-card .card-sub{font-size:9px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.set-you{display:flex;align-items:center;gap:13px;padding:4px 0 16px;border-bottom:1px solid var(--border);margin-bottom:10px}
.set-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Barlow Condensed,sans-serif;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
.set-name{font-size:15px;font-weight:600;color:var(--chrome)}
.set-sub{font-size:11px;color:var(--dim);text-transform:capitalize}
.set-rows{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;gap:12px;padding:12px 2px;cursor:pointer;border-bottom:1px solid var(--border);transition:padding-left .12s}
.set-row:last-child{border-bottom:none}
.set-row:hover{padding-left:5px}
.set-row > .ti:first-child{font-size:15px;color:var(--chrome2);width:20px;text-align:center;flex-shrink:0}
.set-row-txt{flex:1;min-width:0}
.set-row-t{font-size:13px;color:var(--chrome);font-weight:500}
.set-row-s{font-size:11px;color:var(--dim);margin-top:1px}
.set-chev{font-size:15px;color:var(--dim);flex-shrink:0}
.set-row-danger .set-row-t{color:var(--red)}
.set-row-danger > .ti:first-child{color:var(--red)}
.set-steps{margin:0;padding-left:18px;font-size:12px;color:var(--chrome2);line-height:1.75}
.set-note{font-size:11px;color:var(--dim);margin-top:10px;line-height:1.5}
.set-theme-group{margin-bottom:14px}
.set-theme-group:last-child{margin-bottom:0}
.set-theme-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.set-theme-row{display:flex;gap:9px;flex-wrap:wrap}
.set-theme{flex:1;min-width:130px;border:1px solid var(--border2);border-radius:8px;padding:11px;cursor:pointer;
  display:flex;align-items:center;gap:9px;background:var(--surface);transition:border-color .15s}
.set-theme:hover{border-color:var(--chrome2)}
.set-theme.on{border-color:var(--brand);box-shadow:var(--brand-glow)}
.set-theme-sw{width:26px;height:26px;border-radius:6px;border:1px solid var(--border2);flex-shrink:0}
.set-theme-name{font-size:12px;color:var(--chrome);font-weight:500}
.set-theme .ti{margin-left:auto;color:var(--brand);font-size:15px}
.set-access{display:flex;flex-wrap:wrap;gap:6px}
.set-access-chip{font-size:11px;color:var(--chrome2);background:var(--surface);border:1px solid var(--border2);
  border-radius:5px;padding:4px 9px;display:flex;align-items:center;gap:5px}
.set-access-chip .ti{font-size:12px;color:var(--dim)}
@media(max-width:640px){ .set-theme{min-width:100%} }

.cal-month-wrap{display:grid;grid-template-columns:1fr 262px;gap:14px;align-items:start}
.cal-month-outer{background:var(--card);border:1px solid var(--border2);border-radius:10px;overflow:hidden}
/* minmax(0,1fr), NOT 1fr. A bare 1fr is minmax(auto,1fr), and `auto` will not
   shrink a track below its content's min-content width — which for a nowrap chip
   like "SOLD — LA11FGE" is the whole string. On a phone that pushed the seven
   columns wider than the screen, and because .card-body scrolls horizontally on
   mobile the overflow was silent: the month LOOKED like a three-column grid with
   Thu–Sun simply missing. minmax(0,...) lets the tracks shrink so the chips'
   existing text-overflow:ellipsis finally applies. */
.cal-dh{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--surface);border-bottom:1px solid var(--border2)}
.cal-dh span{text-align:center;padding:9px 0;font-size:10px;font-weight:700;letter-spacing:0.1em;color:var(--dim);text-transform:uppercase}
.cal-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-cell{min-width:0;min-height:96px;border-right:1px solid var(--border2);border-bottom:1px solid var(--border2);padding:5px 4px;cursor:pointer;box-sizing:border-box;transition:background 0.1s}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:var(--surface)}
.cal-cell.c-other{opacity:0.3}
.cal-cell.c-today{background:rgba(212,175,55,0.07)}
.cal-cell.c-sel{background:rgba(212,175,55,0.15)!important;box-shadow:inset 0 0 0 1px var(--gold)}
.cal-dn{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--dim);margin-bottom:3px}
.cal-cell.c-today .cal-dn{background:var(--gold);color:#000}
.cal-chip{font-size:10px;padding:2px 4px 2px 7px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45;position:relative;cursor:pointer}
.cal-chip.ev-viewing{background:rgba(37,99,235,0.30);color:#1d4ed8;border-left:4px solid #2563eb}
.cal-chip.ev-collection{background:rgba(22,163,74,0.30);color:#15803d;border-left:4px solid #16a34a}
.cal-chip.ev-sale{background:rgba(13,148,136,0.26);color:#0f766e;border-left:4px solid #0d9488;font-weight:700}
.cal-chip.ev-delivery{background:rgba(234,88,12,0.30);color:#c2410c;border-left:4px solid #ea580c}
.cal-chip.ev-other{background:rgba(147,51,234,0.30);color:#7e22ce;border-left:4px solid #9333ea}
.cal-chip.cal-done{opacity:0.32}
.cal-more{font-size:9px;color:var(--gold);margin-top:2px;cursor:pointer}
/* Day panel (sidebar) */
.cal-dpanel{background:var(--card);border:1px solid var(--border2);border-radius:10px;overflow:hidden}
.cal-dpanel-head{padding:12px 14px;border-bottom:1px solid var(--border2);background:var(--surface);display:flex;justify-content:space-between;align-items:center}
.cal-dpanel-ev{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border2);align-items:flex-start}
.cal-dpanel-ev:last-child{border-bottom:none}
.cal-dpanel-bar{width:4px;border-radius:2px;flex-shrink:0;align-self:stretch;min-height:42px}
.cal-dpanel-body{flex:1;min-width:0}
/* Week view */
.cal-week-outer{background:var(--card);border:1px solid var(--border2);border-radius:10px;overflow:hidden}
.cal-week-cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-week-col{min-width:0}
.cal-week-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-week-col{border-right:1px solid var(--border2);min-height:320px}
.cal-week-col:last-child{border-right:none}
.cal-week-head{padding:10px 6px 8px;text-align:center;border-bottom:1px solid var(--border2);background:var(--surface);cursor:pointer}
.cal-week-head:hover{background:var(--surface2)}
.cal-week-head.wh-today{background:rgba(212,175,55,0.09)}
.cal-wdn{font-size:10px;font-weight:700;letter-spacing:0.1em;color:var(--dim);text-transform:uppercase;margin-bottom:5px}
.cal-wdd{font-size:18px;font-weight:700;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin:0 auto;color:var(--chrome)}
.cal-week-head.wh-today .cal-wdd{background:var(--gold);color:#000}
.cal-week-body{padding:6px 5px}
.cal-week-chip{font-size:10px;padding:4px 6px;border-radius:4px;margin-bottom:4px;cursor:pointer;border-left:4px solid transparent}
.cal-week-chip:hover{filter:brightness(1.15)}
.cal-week-chip.ev-viewing{background:rgba(37,99,235,0.30);color:#1d4ed8;border-left-color:#2563eb}
.cal-week-chip.ev-collection{background:rgba(22,163,74,0.30);color:#15803d;border-left-color:#16a34a}
.cal-week-chip.ev-sale{background:rgba(13,148,136,0.26);color:#0f766e;border-left-color:#0d9488;font-weight:700}
.cal-week-chip.ev-delivery{background:rgba(234,88,12,0.30);color:#c2410c;border-left-color:#ea580c}
.cal-week-chip.ev-other{background:rgba(147,51,234,0.30);color:#7e22ce;border-left-color:#9333ea}
.cal-week-chip.cal-done{opacity:0.32}
/* Day view */
.cal-day-outer{background:var(--card);border:1px solid var(--border2);border-radius:10px;overflow:hidden;max-width:680px}
.cal-day-head{padding:16px 20px;border-bottom:1px solid var(--border2);background:var(--surface)}
.cal-day-ev{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border2);align-items:flex-start;transition:background 0.1s}
.cal-day-ev:hover{background:var(--surface)}
.cal-day-ev:last-child{border-bottom:none}
.cal-day-bar{width:4px;border-radius:2px;flex-shrink:0;align-self:stretch;min-height:52px}
/* Event popup */
.cal-popup-overlay{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.25)}
.cal-popup{position:fixed;z-index:9999;background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:18px;width:300px;box-shadow:0 12px 40px rgba(0,0,0,0.5);top:50%;left:50%;transform:translate(-50%,-50%);display:none}

@media(max-width:768px){
  /* Touch targets: these three are not .btn and were 13–22 px tall on a phone. */
  .modal-close,.sb-icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .cal-more{padding:6px 4px;font-size:10px}
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:240px;z-index:600;
    transform:translateX(-100%);
    transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
    display:flex!important;
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,0.5)
  }
  .sidebar.mob-open{transform:translateX(0)}
  .nav-overlay{z-index:599}
  .main{padding-bottom:70px}
  .topbar{padding:0 12px;height:50px}
  .tb-title{font-size:13px}.tb-date{display:none}
  .page{padding:12px}
  .stats-4,.stats-3,.stats-5{grid-template-columns:repeat(2,1fr)}.db-hero{grid-template-columns:repeat(3,1fr);gap:7px}.cal-month-wrap{grid-template-columns:1fr}.cal-dpanel{margin-top:12px}
  /* Seven columns on a ~360px screen is ~50px each. The desktop cell is built for
     three readable chips; here there is room for a coloured marker and not much
     else, so shrink the furniture rather than pretend the text will fit. Tapping
     a day still opens the day panel with the full detail. */
  .cal-cell{min-height:58px;padding:3px 2px}
  .cal-dn{width:18px;height:18px;font-size:10px;margin-bottom:2px}
  .cal-dh span{font-size:9px;letter-spacing:0.02em;padding:6px 0}
  .cal-chip{font-size:9px;padding:1px 2px 1px 4px;border-left-width:3px;line-height:1.35;margin-bottom:1px}
  .cal-more{font-size:9px}
  .stat-val{font-size:18px}.stat-card{padding:10px}
  .two-col,.three-col{grid-template-columns:1fr;gap:10px}
  .card-body{overflow-x:auto}
  .tbl{min-width:480px}
  .form-grid{grid-template-columns:1fr}.form-full{grid-column:1}
  .modal{width:100%;max-height:90vh;overflow-y:auto}
  .pin-card{width:90vw;padding:18px}
  .stock-row{grid-template-columns:10px 62px 1fr auto;font-size:12px}
  .expense-row{grid-template-columns:1fr;gap:4px}
  .stock-split-grid{grid-template-columns:1fr}
}
/* ── SLIDE-UP DRAWER NAV (mobile) ── */
/* Topbar icon buttons */
.tb-icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--chrome2);border-radius:6px;font-size:18px;position:relative;transition:color 0.15s}
.tb-icon-btn:hover{color:var(--chrome)}
.mobile-only{display:none}
.notif-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
/* Notification panel */
.notif-panel{position:fixed;top:50px;right:12px;width:320px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.5);z-index:500;max-height:480px;overflow:hidden;display:flex;flex-direction:column}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);align-items:flex-start}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(255,255,255,0.02)}
.notif-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px}
.notif-body{flex:1;min-width:0}
.notif-text{font-size:11px;color:var(--chrome);line-height:1.5}
.notif-meta{font-size:10px;color:var(--dim);margin-top:2px}
.notif-empty{padding:24px;text-align:center;font-size:11px;color:var(--dim)}
#notif-list{overflow-y:auto;max-height:420px}
@media(max-width:768px){.mobile-only{display:flex}}
/* Remove old bottom handle on mobile */
/* ── BOTTOM TAB BAR (mobile) ── */
.nav-handle{display:none}
.nav-drawer{display:none}
.nav-drawer-grid{display:none}
.mobile-tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:400;background:var(--card);border-top:1px solid var(--border2);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -4px 20px rgba(0,0,0,0.3)}
.mobile-tab-bar-inner{display:flex;align-items:stretch;height:58px}
.mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--dim);font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;transition:color 0.15s;position:relative;border:none;background:none;-webkit-tap-highlight-color:transparent;padding:8px 4px}
.mob-tab i{font-size:18px;line-height:1}
.mob-tab.active{color:var(--chrome)}
.mob-tab .mob-badge{position:absolute;top:6px;right:calc(50% - 16px);background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:10px;padding:1px 5px;min-width:14px;text-align:center;display:none}
/* More sheet */
.mob-more-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border2);border-radius:16px 16px 0 0;z-index:500;transform:translateY(100%);transition:transform 0.28s cubic-bezier(0.32,0.72,0,1);padding-bottom:env(safe-area-inset-bottom,0px)}
.mob-more-sheet.open{transform:translateY(0)}
.mob-more-pill{width:40px;height:4px;border-radius:2px;background:var(--border2);margin:12px auto 8px}
.mob-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin:0 0 1px}
.mob-more-item{background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 8px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);border:none}
.mob-more-item i{font-size:22px}
.mob-more-footer{display:flex;gap:1px;background:var(--border)}
.mob-more-action{flex:1;background:var(--card);padding:14px;text-align:center;font-size:11px;color:var(--dim);cursor:pointer;border:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.06em;text-transform:uppercase}
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:490}
.mob-overlay.show{display:block}
/* Mobile full-screen modals */
.fin-accordion-section{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.fin-acc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;background:var(--surface);user-select:none}
.fin-acc-head:hover{background:var(--surface2)}
.fin-acc-title{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--chrome);display:flex;align-items:center;gap:8px}
.fin-acc-chevron{font-size:13px;color:var(--dim);transition:transform 0.2s}
.fin-acc-body{display:none;padding:12px 14px;border-top:1px solid var(--border)}
.fin-acc-body.open{display:block}
.fin-acc-chevron.open{transform:rotate(180deg)}
.nav-drawer-item i{font-size:22px}
.nav-drawer-item.active{color:var(--chrome);background:var(--surface)}
.nav-drawer-item .bn-badge{position:absolute;top:12px;right:28%;width:8px;height:8px;border-radius:50%;background:var(--red)}
.nav-drawer-bottom{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.nav-drawer-action{background:var(--card);display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;font-family:Barlow Condensed,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);cursor:pointer;border:none}
.nav-drawer-action i{font-size:18px}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:250}
.nav-overlay.open{display:block}
/* Keep old bottom-nav hidden — replaced by drawer */
.bottom-nav{display:none}
.bn-item{display:none}
@media(max-width:768px){.mobile-tab-bar{display:block}.main{padding-bottom:70px}}
@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.db-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border2);border-top-color:var(--chrome2);border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:6px}
/* A save in flight must look unavailable, so nobody presses it a second time */
button[disabled],.btn[disabled]{opacity:0.55;cursor:not-allowed;pointer-events:none}
/* ── AUCTION LOT ROWS ──────────────────────────────────────────────────────
   Dense enough to follow a live hall, but the warning chips have to read at a
   glance while a lot is going through — so flags are colour-coded by severity
   and sit on their own line rather than competing with the specs.            */
.auc-row{
  display:grid;grid-template-columns:44px 52px minmax(0,1fr) max-content max-content;gap:11px;
  padding:10px 14px;border-bottom:1px solid var(--border);align-items:start;
}
.auc-lot{min-width:0;overflow:hidden}
.auc-thumb{width:52px;height:40px;object-fit:cover;border-radius:8px;background:var(--surface);display:block}
.auc-thumb-none{display:flex;align-items:center;justify-content:center;color:var(--border2);font-size:15px;border:1px solid var(--border)}
.auc-row:last-child{border-bottom:none}
.auc-picked{box-shadow:inset 3px 0 0 var(--brand)}
.auc-lot{text-align:center}
.auc-lotno{font-family:Barlow Condensed,sans-serif;font-size:15px;font-weight:900;color:var(--chrome);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auc-lane{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.auc-main{min-width:0}
.auc-title{font-size:12px;font-weight:600;color:var(--chrome);line-height:1.35}
.auc-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:10px;color:var(--chrome2)}
.auc-flags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.auc-flag{font-size:10px;border:1px solid;border-radius:3px;padding:1px 6px;white-space:nowrap}
.auc-ann{font-size:10px;color:#c05050;margin-top:4px;font-style:italic}
.auc-cap{font-size:10px;color:var(--dim);min-width:96px}
.auc-cap-row{white-space:nowrap}
.auc-cap-row{display:flex;justify-content:space-between;gap:6px;padding:1px 0}
.auc-cap-row b{color:var(--chrome);font-variant-numeric:tabular-nums}
.auc-act{text-align:right}
@media(max-width:768px){
  /* Compact the lane/filter chips so the first car is reachable without a
   * long scroll — this block occupied most of the first screen. */
  #page-purchases .btn-sm{padding:5px 9px;font-size:10px}
  #page-purchases select{padding:6px 9px;font-size:11px}
  #page-purchases input[type=text],#page-purchases input[type=search]{padding:7px 10px;font-size:12px}
  #page-purchases .stat-val{font-size:15px}
  #page-purchases .stat-label{font-size:9px}
}
.auc-status{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.auc-btns{display:flex;gap:3px;justify-content:flex-end;margin-bottom:4px}
.auc-btns .btn{min-width:26px;padding:3px 6px;font-size:11px}
@media(max-width:768px){
  /* On a phone in a hall: lot number and actions stay put, specs wrap under */
  .auc-row{grid-template-columns:40px 48px minmax(0,1fr);gap:8px;row-gap:6px;padding:11px 12px}
  .auc-thumb{width:48px;height:37px}
  .auc-cap{grid-column:3}
  .auc-act{grid-column:3}
  .auc-cap{display:flex;gap:12px;flex-wrap:wrap}
  .auc-cap-row{display:flex;gap:4px}
  /* One row for Track / Bought / edit / report. It used to wrap the report
   * button onto its own line; forcing nowrap then pushed it past the card edge,
   * because the status word held a fixed width. The status now takes the slack
   * and truncates, so the four controls always sit inside the card. */
  .auc-act{text-align:left;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;width:100%}
  .auc-btns{flex-wrap:nowrap;margin-bottom:0}
  .auc-act .btn-xs,.auc-act .btn{flex:0 0 auto}
  /* The status word is dropped on a phone: the highlighted Track/Bought button
   * already says the same thing, and squeezing it in truncated it to "INT...".
   * It stays on desktop where there is room. */
  .auc-act .auc-status{display:none}
  .auc-act{justify-content:flex-end}
  .auc-btns{margin-bottom:0}
  .auc-btns .btn{min-width:40px;min-height:36px}
  .auc-status{margin-bottom:0}
}
/* Collapsible "Completed" sections — keeps a car's page about what still needs doing */
.note-fold{border-top:1px solid var(--border)}
.note-fold summary::-webkit-details-marker{display:none}
.note-fold summary:hover{color:var(--chrome2)}
.note-fold .note-fold-chev{transition:transform 0.18s ease;font-size:13px}
.note-fold[open] .note-fold-chev{transform:rotate(90deg)}

/* ── v58 UI Polish ────────────────────────────────────── */
/* Sidebar section dividers */
.sb-section{padding:16px 14px 4px;font-size:9px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim)}
/* Sidebar active link — more visible */
.sb-link.active{color:var(--chrome);border-left-color:var(--chrome);background:rgba(200,200,216,0.06);font-weight:600}
/* Topbar tighter */
.topbar{height:calc(44px + var(--safe-top))}
/* Cards — slightly more rounded and refined */
.card{border-radius:8px}
/* Page header utility */
.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.page-hdr-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;letter-spacing:0.06em;color:var(--chrome);text-transform:uppercase}
.page-hdr-sub{font-size:10px;color:var(--dim);margin-top:2px}
/* CRM tab buttons clean state */
#crm-tab-customers,#crm-tab-pipeline{transition:all .2s;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer}
/* Empty states */
.empty-state{padding:48px 20px;text-align:center;color:var(--dim)}
.empty-state i{font-size:32px;display:block;margin-bottom:12px}
.empty-state h3{font-size:13px;color:var(--chrome2);margin-bottom:6px;font-weight:600}
/* Smoother modal open */
.modal-overlay.open .modal{animation:fadeInUp 0.15s ease}

/* ══ SHIFTS (Finance staff) ══ */
.shift-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.shift-cal-hdr{text-align:center;font-size:9px;font-weight:700;color:var(--dim);text-transform:uppercase;padding:4px 0}
.shift-cal-day{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;cursor:pointer;border:1px solid var(--border);background:var(--bg);position:relative;transition:all 0.12s;user-select:none}
.shift-cal-day:hover{border-color:var(--chrome2)}
.shift-cal-day.worked{background:rgba(80,180,120,0.13);border-color:#50b478}
.shift-cal-day.other-month{opacity:0.25;pointer-events:none}
.shift-cal-day.today-mark{border-color:var(--chrome2);box-shadow:0 0 0 1px var(--chrome2) inset}
.shift-cal-day .sc-num{font-weight:700;color:var(--chrome);line-height:1}
.shift-cal-day .sc-dot{width:5px;height:5px;border-radius:50%;background:#50b478;margin-top:3px}
.shift-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.shift-stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
.shift-stat-val{font-size:22px;font-weight:700;color:var(--chrome);font-family:Barlow Condensed,sans-serif;letter-spacing:0.02em}
.shift-stat-lbl{font-size:10px;color:var(--dim);margin-top:2px;text-transform:uppercase;letter-spacing:0.05em}
.shift-row{padding:13px 16px;border-bottom:1.5px solid rgba(255,255,255,0.07);cursor:pointer}
.shift-row:hover{background:rgba(255,255,255,0.025)}
.shift-row-head{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.shift-row-date{font-weight:700;color:var(--chrome);font-size:13px}
.shift-chips{display:flex;gap:5px;flex-wrap:wrap}
.schip{font-size:10px;padding:2px 9px;border-radius:20px;font-weight:600}
.schip-exp{background:rgba(220,100,80,0.15);color:#e07060}
.schip-com{background:rgba(80,180,120,0.15);color:#50b478}
.schip-war{background:rgba(140,100,220,0.15);color:#a080e0}
/* shift detail inner lists */
.shift-item-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.shift-item-row:last-child{border-bottom:none}
/* ══ JOB CARDS (Mechanic) ══ */
.job-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1.5px solid rgba(255,255,255,0.07);cursor:pointer}
.job-row:hover{background:rgba(255,255,255,0.025)}
.job-row-info{flex:1;min-width:0}
.job-amount{font-weight:700;font-size:15px;color:var(--chrome);font-family:Barlow Condensed,sans-serif;white-space:nowrap}
.job-outstanding-bar{background:rgba(220,100,80,0.1);border:1px solid rgba(220,100,80,0.3);border-radius:10px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.job-outstanding-amt{font-size:22px;font-weight:800;color:#e07060;font-family:Barlow Condensed,sans-serif;letter-spacing:0.02em}
/* admin finance staff section */
.staff-fin-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
.staff-fin-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer}
.staff-fin-name{font-weight:700;color:var(--chrome);font-size:13px}
.staff-fin-totals{display:flex;gap:14px;font-size:11px;color:var(--chrome2)}
.staff-fin-body{border-top:1px solid var(--border)}

/* ══ CRM ══ */
.crm-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:12px}
.crm-customer-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s}
.crm-customer-row:hover{background:rgba(255,255,255,0.025)}
.crm-customer-row:last-child{border-bottom:none}
.crm-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Barlow Condensed,sans-serif;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.crm-source-badge{display:inline-flex;align-items:center;gap:4px;font-family:Barlow Condensed,sans-serif;font-size:9px;font-weight:700;letter-spacing:0.08em;padding:2px 8px;border-radius:10px;border:1px solid var(--border2);color:var(--dim)}
.src-autotrader{background:rgba(200,0,50,0.1);color:#ff4466;border-color:rgba(200,0,50,0.25)}
.src-whatsapp{background:rgba(37,211,102,0.1);color:#25d366;border-color:rgba(37,211,102,0.25)}
.src-phone{background:rgba(26,74,138,0.1);color:#6090e0;border-color:rgba(26,74,138,0.25)}
.src-email{background:rgba(160,96,16,0.1);color:#d09030;border-color:rgba(160,96,16,0.25)}
.src-walk-in{background:rgba(106,26,138,0.1);color:#a060e0;border-color:rgba(106,26,138,0.25)}
.src-manual{background:rgba(120,120,120,0.1);color:#888;border-color:rgba(120,120,120,0.25)}
.crm-tl-item{display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)}
.crm-tl-item:last-child{border-bottom:none}
.crm-tl-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px}
.crm-tl-body{flex:1;min-width:0}
.crm-tl-type{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim)}
.crm-tl-note{font-size:12px;color:var(--chrome);line-height:1.5;margin-top:2px}
.crm-tl-meta{font-size:10px;color:var(--dim);margin-top:3px}
.crm-detail-wrap{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
@media(max-width:900px){.crm-detail-wrap{grid-template-columns:1fr}}

/* ══ INVOICES ══ */
.inv-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-draft{background:#d09030}.dot-final{background:#6090e0}.dot-paid{background:#5aaa5a}
.inv-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s}
.inv-item:hover{background:rgba(255,255,255,0.025)}
.inv-item:last-child{border-bottom:none}
.inv-line-row{display:grid;grid-template-columns:1fr 60px 90px 90px 32px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}
.inv-line-row:last-child{border-bottom:none}
.inv-print{background:#fff;color:#111;padding:28px 32px;font-family:Arial,sans-serif;font-size:13px;line-height:1.6;max-width:640px}
.inv-print h1{font-size:22px;font-weight:900;letter-spacing:0.12em;margin-bottom:4px}

/* ══ P&L per car ══ */
.pl-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.pl-row:last-child{border-bottom:none}
.pl-bar{height:6px;border-radius:3px;background:var(--border2);overflow:hidden;margin-top:6px;margin-bottom:12px}
.pl-bar-fill{height:100%;border-radius:3px;transition:width 0.4s ease}
.pl-expense-row{display:grid;grid-template-columns:90px 1fr 90px auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:11px}
.pl-expense-row:last-child{border-bottom:none}

/* ══ Staff Performance Leaderboard ══ */
.perf-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.perf-row:last-child{border-bottom:none}
.perf-rank{font-family:Barlow Condensed,sans-serif;font-size:22px;font-weight:900;width:30px;text-align:center;color:var(--dim);flex-shrink:0}
.perf-rank.gold{color:#b8860b}.perf-rank.silver{color:#6b7280}.perf-rank.bronze{color:#cd7f32}
.perf-bar-wrap{flex:1;min-width:0}
.perf-bar{height:5px;border-radius:3px;background:var(--border2);margin-top:5px;overflow:hidden}
.perf-bar-fill{height:100%;border-radius:3px;transition:width 0.5s ease}

/* ══ Follow-ups ══ */
.followup-item{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s}
.followup-item:hover{background:rgba(255,255,255,0.02)}
.followup-item:last-child{border-bottom:none}
.followup-type-badge{font-family:Barlow Condensed,sans-serif;font-size:9px;font-weight:700;letter-spacing:0.08em;padding:2px 8px;border-radius:10px}
.fu-overdue{background:var(--red-t);color:#e06060;border:1px solid rgba(192,48,48,0.3)}
.fu-today{background:var(--amber-t);color:#d09030;border:1px solid rgba(160,96,16,0.3)}
.fu-soon{background:var(--blue-t);color:#6090e0;border:1px solid rgba(26,74,138,0.3)}
.fu-future{background:var(--grey-t);color:var(--dim);border:1px solid var(--border2)}

/* ══ Notification improvements ══ */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:340px}
.toast2{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:12px 16px;font-size:12px;color:var(--chrome);display:flex;align-items:center;gap:10px;box-shadow:0 4px 24px rgba(0,0,0,0.5);animation:slideInRight 0.2s ease;pointer-events:all;line-height:1.5}
.toast2.success{border-left:3px solid #5aaa5a}.toast2.error{border-left:3px solid #e06060}.toast2.info{border-left:3px solid #6090e0}.toast2.warn{border-left:3px solid #d09030}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ══ 2026 UI Refresh ══ */
.card{transition:border-color 0.15s}
.card:hover{border-color:var(--border2)}
.modal{border-radius:12px}
.btn{border-radius:6px}
.stat-card{border-radius:8px;transition:transform 0.15s,border-color 0.15s}
.stat-card:hover{transform:translateY(-1px);border-color:var(--border2)}

/* ══ v60 Visual Polish ══════════════════════════════════════════ */
/* Richer surfaces */

/* Sidebar — cleaner active state */
.sb-link{transition:all 0.15s;border-radius:0 6px 6px 0;margin-right:8px}
.sb-link.active{background:rgba(200,200,216,0.09);border-left-color:#b0b0cc;color:#e8e8f0;font-weight:600}
.sb-link:hover{background:rgba(255,255,255,0.03)}
.sb-section{font-size:9px;letter-spacing:0.2em;opacity:0.7}

/* Cards — depth */
.card{border-radius:10px;box-shadow:0 2px 16px rgba(0,0,0,0.4)}
.card-head{border-radius:10px 10px 0 0}
.modal{border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,0.65)}
.modal-overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(0,0,0,0.7)}
.modal-overlay.open .modal{animation:modalPop 0.18s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes modalPop{from{opacity:0;transform:scale(0.95) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Hero dashboard tiles */
.db-hero-tile{border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.5);transition:transform 0.18s,box-shadow 0.18s}
.db-hero-tile:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.6)}
.db-tile-red{background:linear-gradient(145deg,#1a0a0a,#1e0f0f)}
.db-tile-amber{background:linear-gradient(145deg,#130e00,#1a1200)}
.db-tile-green{background:linear-gradient(145deg,#050f05,#0a160a)}

/* Stat cards */
.stat-card{border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,0.3);transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.45)}

/* Inputs — better focus ring */
.field input,.field select,.field textarea{border-radius:7px;transition:border-color 0.2s,box-shadow 0.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#7070a0;box-shadow:0 0 0 3px rgba(112,112,160,0.14)}
.field input::placeholder,.field textarea::placeholder{color:#444456}
.search-box input{border-radius:8px;transition:border-color 0.2s,box-shadow 0.2s}
.search-box input:focus{border-color:#7070a0;box-shadow:0 0 0 3px rgba(112,112,160,0.12);outline:none}

/* Buttons */
.btn{border-radius:7px;transition:all 0.15s;letter-spacing:0.1em}
.btn-primary{box-shadow:0 2px 8px rgba(200,200,216,0.1)}
.btn-primary:hover{background:#f0f0ff;box-shadow:0 4px 16px rgba(200,200,216,0.2);transform:translateY(-1px)}
.btn-ghost:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)!important}

/* Badges */
.badge{border-radius:5px}

/* Reg plate chip */
.tbl-reg{border-radius:4px}

/* Status pills */
.status-pill{border-radius:7px}
.filter-pill{transition:all 0.15s;font-size:11px}
.filter-pill.on{box-shadow:0 2px 10px rgba(200,200,216,0.15)}

/* Car dashboard cards */
.db-car-card{border-radius:10px;box-shadow:0 1px 8px rgba(0,0,0,0.35);transition:box-shadow 0.15s,border-color 0.15s}
.db-car-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.5)}

/* Toast */
.toast2{border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.55)}

/* CRM cards */
.crm-card{box-shadow:0 2px 12px rgba(0,0,0,0.35)}

/* Stock rows */
.stock-row{transition:background 0.12s}

/* Notif panel */
.notif-panel{border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.55)}

/* Topbar subtle separator */
.topbar{box-shadow:0 1px 0 var(--border2)}

/* Smooth page fade */

/* Sidebar pinscreen */
.pin-card{box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.pin-key{border-radius:8px;transition:all 0.12s}
.pin-key:hover{box-shadow:0 2px 8px rgba(0,0,0,0.3)}

/* Dept pills */
.dept-pill{border-radius:20px;transition:all 0.15s}

/* CRM pipeline */
#pipeline-board>.pipeline-col{border-radius:10px}

/* Shift/job rows */
.shift-stat{border-radius:10px;box-shadow:0 1px 8px rgba(0,0,0,0.25)}

/* ================================================================
   AAG BRAND GREEN THEME - unified with aminautomotive.co.uk
   All rules here intentionally cascade over previous definitions.
   Build: v80-20260727
   ================================================================ */
:root{/* was blue #7090c0 */}

/* Logo — sidebar + PIN screen: white-to-green gradient */
.sb-logo-main,.pin-logo{
  background:linear-gradient(155deg,#fff 0%,#b5d9be 28%,#35855a 56%,#b0ccb6 82%,#fff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Primary action button → brand green */
.btn-primary{
  background:linear-gradient(135deg,#1e4a2e 0%,#2d6b42 100%);
  color:#c0e4c8;border:1px solid rgba(61,122,82,0.5);
  box-shadow:0 2px 10px rgba(21,60,35,0.35);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#234d31 0%,#387a4e 100%);
  color:#d8f0de;box-shadow:0 6px 22px rgba(35,77,49,0.5);transform:translateY(-1px);
}

/* Sidebar active link → green */
.sb-link.active{color:#35855a;border-left-color:#3d7a52;background:rgba(61,122,82,0.09);font-weight:600}
.sb-link:hover{background:rgba(61,122,82,0.04);color:#a8d4b4}
.sidebar{border-right:1px solid rgba(61,122,82,0.12)}

/* Topbar green accent underline */
.topbar{box-shadow:0 1px 0 rgba(61,122,82,0.2)}

/* PIN screen green selections */
.pin-dot.filled{background:#2e7d4f}
.pin-staff-btn.selected{border-color:rgba(61,122,82,0.7);background:rgba(61,122,82,0.09)}
.pin-key:hover{background:rgba(61,122,82,0.07);border-color:rgba(61,122,82,0.3);box-shadow:none}

/* Input / search focus → green glow (matching website) */
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(61,122,82,0.6)!important;box-shadow:var(--brand-glow)!important}
.search-box input:focus{border-color:rgba(61,122,82,0.5)!important;box-shadow:0 0 0 3px rgba(61,122,82,0.1)!important}

/* Active filter pills → green */
.filter-pill.on{background:rgba(61,122,82,0.15);color:#35855a;border-color:rgba(61,122,82,0.4);box-shadow:none}

/* Loading spinner → brand green */
.db-spinner{border-top-color:#2e7d4f}

/* Mobile bottom nav active → green */
.mob-tab.active{color:#2e7d4f}

/* Row hover tints → subtle green instead of plain white */
.tbl tr:hover td,.stock-row:hover,.crm-customer-row:hover,.inv-item:hover,
.followup-item:hover,.shift-row:hover,.job-row:hover,.doc-item:hover{background:rgba(61,122,82,0.035)}

/* Shift calendar */
.shift-cal-day.worked{background:rgba(61,122,82,0.13);border-color:rgba(61,122,82,0.5)}
.shift-cal-day.today-mark{border-color:#3d7a52;box-shadow:0 0 0 1px #3d7a52 inset}
.shift-cal-day:hover{border-color:rgba(61,122,82,0.4)}
.shift-cal-day .sc-dot{background:#2e7d4f}

/* Sell type pill selected */
.sell-type-pill.selected{background:linear-gradient(135deg,#1e4a2e,#2d6b42);color:#c0e4c8;border-color:rgba(61,122,82,0.5);font-weight:900}

/* Calendar view button active */
.cal-view-btn.active{background:var(--brand);color:#c8e0cc;border-color:var(--brand)}

/* Dept pill — sales department → brand green */
.dept-pill[data-dept="sales"].on{background:rgba(61,122,82,0.15);color:#35855a;border-color:rgba(61,122,82,0.4)}

/* Toasts */
.toast2.success{border-left-color:#2e7d4f}
.toast2.info{border-left-color:#2e7d4f}

/* Cards — hover shows brand-green tint instead of plain border */
.card:hover{border-color:rgba(61,122,82,0.22)}
.db-hero-tile:hover{box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 0 1px rgba(61,122,82,0.1)}

/* Dashboard green tile — slightly richer bg */
.db-tile-green{background:linear-gradient(145deg,#040e06,#07150a)}

/* Stat card — green variant stronger */
.stat-card.green{border-color:rgba(61,122,82,0.4)}

/* Stat value default colour — keep chrome but brand-tint green values */
/* Notif panel scrollbar thumb */
::-webkit-scrollbar-thumb{background:rgba(61,122,82,0.25);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(61,122,82,0.4)}

/* User tasks link */
.sb-user-tasks{color:#2e7d4f}.sb-user-tasks:hover{color:#35855a}.sb-user-tasks.clear{color:#2e7d4f}

/* Schip completed badge → brand green */
.schip-com{background:rgba(61,122,82,0.15);color:#2e7d4f}

/* Pipeline drag-over column highlight */
[data-stage].drag-over{border-color:rgba(61,122,82,0.5)!important;background:rgba(61,122,82,0.05)!important}

/* Reservation status — pending badge */
.badge-amber.res-pending{background:rgba(61,122,82,0.1);color:#35855a;border-color:rgba(61,122,82,0.3)}

/* ── R5 polish: smooth buttons, chat access, spotless mobile ─────────── */
.tb-chat-unread{position:absolute;top:1px;right:0;background:#e06060;color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;border:2px solid var(--bg)}
.btn,.tb-icon-btn,.mob-tab,.mob-bar-btn,.dept-pill,.sb-link,.pin-key,.mob-more-action{-webkit-tap-highlight-color:transparent}
.btn{transition:transform .1s ease, filter .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease}
.btn:active{transform:scale(.96);filter:brightness(1.15)}
.tb-icon-btn:active,.mob-tab:active,.dept-pill:active,.mob-more-action:active{transform:scale(.94)}
.tb-icon-btn,.mob-tab{transition:transform .1s ease,color .15s ease,background .15s ease}
@media(max-width:768px){
  /* comfortable thumb targets everywhere */
  .btn{min-height:42px}
  .btn-sm{min-height:40px}
  .btn-xs{min-height:34px;padding:6px 10px}
  input,select,textarea{min-height:42px;font-size:15px !important} /* 16px stops iOS zoom-on-focus */
  textarea{min-height:64px}
  .db-hero-tile{padding:13px 6px 11px}
  .db-tile-num{font-size:22px}
  .modal-foot .btn{flex:1}
  .card{border-radius:10px}
  .stock-row{padding:12px 10px}
  .main{padding-left:12px;padding-right:12px}
  .page{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 8px)}
}
.mobile-tab-bar{padding-bottom:env(safe-area-inset-bottom, 0px)}

/* ── CHAT ──────────────────────────────────────────────────────────────────
   The chat page used to be sized with hand-tuned magic numbers
   (100dvh - 190px), which never matched a real device — hence the band of dead
   space under the composer. The page now FILLS its area with flex and the card
   grows into it, so the composer always sits at the bottom of the screen.
   --kb is the on-screen keyboard height, published by the keyboard tracker.   */
:root{--kb:0px;--chat-chrome:78px}
@media(max-width:768px){:root{--chat-chrome:150px}}

#page-chat.active{
  display:flex;flex-direction:column;min-height:0;
  height:calc(100dvh - var(--chat-chrome) - var(--kb));
}
#page-chat .card{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
  height:auto;overflow:hidden;
}
#chat-messages{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
/* composer pinned to the foot of the card */
#page-chat .card > div:last-child{
  flex-shrink:0;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
.kb-open #page-chat .card > div:last-child{padding-bottom:10px}
@media(max-width:768px){
  #chat-input{min-height:44px}
  #chat-send-btn{min-width:52px;min-height:44px}
  /* keyboard up: the tab bar is unreachable, so reclaim its space for messages */
  .kb-open .mobile-tab-bar{display:none}
  .kb-open #page-chat.active{height:calc(100dvh - 92px - var(--kb))}
}

/* Bubbles are direct children of the scroller, each pinned to one side.
   The px cap matters as much as the percentage: on a wide desktop 82% is a
   1,300px line, which is unreadable — real chat apps cap the measure.        */
.chat-bubble{
  max-width:min(82%, 560px);width:fit-content;flex-shrink:0;
  border-radius:12px;padding:7px 12px;border:1px solid var(--border);
  background:var(--surface);
}
.chat-bubble-who{font-size:10px;font-weight:700;margin-bottom:2px}
.chat-bubble-text{font-size:13px;color:var(--chrome);line-height:1.45;word-break:break-word;overflow-wrap:anywhere}
#chat-messages > .chat-mine{
  align-self:flex-end;
  background:rgba(61,122,82,0.18);border-color:rgba(61,122,82,0.35);
  border-bottom-right-radius:4px;
}
#chat-messages > .chat-theirs{align-self:flex-start;border-bottom-left-radius:4px}
/* Runs of messages from one person read as one turn: the name appears once and
   the follow-ons tuck in underneath, which is what stops the thread looking
   like a list of disconnected cards. */
#chat-messages > .chat-run{margin-top:-6px}
#chat-messages > .chat-run.chat-mine{border-top-right-radius:4px}
#chat-messages > .chat-run.chat-theirs{border-top-left-radius:4px}
.chat-bubble-time{font-size:9px;color:var(--dim);margin-top:2px;text-align:right}
/* An emoji-only reply is a reaction, not a paragraph — show it without a card */
#chat-messages > .chat-emoji{
  background:none;border:none;padding:2px 4px;max-width:none;
}
#chat-messages > .chat-emoji .chat-bubble-text{font-size:30px;line-height:1.1}
#chat-messages > .chat-system{
  align-self:center;max-width:100%;width:auto;
  text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;
  color:var(--dim);margin:6px 0 2px;
}

/* ── R6: stock rows become clean cards on phones ── */
@media(max-width:768px){
  .stock-row{grid-template-columns:10px 74px 1fr !important;grid-template-areas:"dot thumb info" "actions actions actions";gap:10px 12px;align-items:start;padding:14px 12px}
  .stock-row .status-dot{grid-area:dot;margin-top:26px}
  .sr-thumb{grid-area:thumb}
  .sr-thumb img{width:74px !important;height:56px !important}
  .sr-info{grid-area:info}
  .sr-meta{line-height:1.7}
  .sr-meta-spec{display:block}
  .sr-meta-price{display:block}
  .sr-meta-mot{display:block}
  .sr-meta-price .sr-sep, .sr-meta-mot .sr-sep{display:none}
  .sr-actions{grid-area:actions;display:flex !important;gap:8px;align-items:stretch}
  .sr-actions .btn{flex:0 0 auto}
  .sr-actions .btn:first-child{margin-right:0}
  .sr-pill{grid-area:actions;justify-self:end;align-self:center;z-index:1}
  .stock-row .sr-actions button[title="Actions"], .stock-row .sr-actions button[title*="website"]{width:44px !important;height:40px}
}

/* ── R6b: mobile topbar never overlaps; thumbs always sized ── */
@media(max-width:768px){
  .topbar{height:auto;min-height:50px;flex-wrap:wrap;padding:7px 12px;row-gap:7px}
  .tb-title{font-size:13px;line-height:1.2;flex:1 1 auto;padding-right:8px}
  .tb-right{margin-left:auto;flex-wrap:wrap;row-gap:6px;justify-content:flex-end}
  #topbar-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  #topbar-actions .btn{padding:8px 11px;font-size:10px;min-height:38px;white-space:nowrap}
  .tb-date{display:none}
}
.sr-thumb img, .sr-thumb > div{border-radius:8px}
@media(max-width:768px){
  .sr-thumb img, .sr-thumb > div{width:74px !important;height:56px !important;object-fit:cover;display:flex}
}

/* ═════════════════════════════════════════════════════════════════════════
   CLEAN LOOK (Option A) — approved from the mockup 12 Aug 2026.
   Same pages, same organisation; quieter chrome. One deletable block.
   ═════════════════════════════════════════════════════════════════════════ */

/* Cards breathe; borders whisper */
.card,.crm-card{border-radius:var(--r-card);border-color:rgba(255,255,255,0.055)}
.card-head{padding:13px 16px 10px}
.modal{border-radius:16px}
.stat-card{border-radius:12px}

/* Buttons: soft pills, ghosts lose their boxes until touched */
.btn{border-radius:var(--r-ctl)}
.btn-ghost{border-color:transparent;background:rgba(255,255,255,0.035)}
.btn-ghost:hover{border-color:var(--border2)}
.btn-xs{border-radius:8px}

/* Topbar: a title and you — not a toolbar */
.tb-title{font-family:'Barlow',sans-serif;font-size:15px;font-weight:800;letter-spacing:-0.01em;text-transform:none}
.tb-icon-btn{background:transparent;border:none}
.tb-avatar{width:31px;height:31px;border-radius:50%;background:#24523a;color:#e8f2ea;
  display:none;align-items:center;justify-content:center;font-size:11px;font-weight:800;
  letter-spacing:0.02em;cursor:pointer;flex-shrink:0;border:1.5px solid rgba(255,255,255,0.14)}

/* Tab bar: the mockup's four quiet tabs */
.mobile-tab-bar{box-shadow:none;border-top-color:rgba(255,255,255,0.06);background:color-mix(in srgb,var(--card) 92%,black)}
.mobile-tab-bar-inner{height:60px}
.mob-tab{font-size:9px;letter-spacing:0.09em;text-transform:uppercase;font-weight:700;color:#5d675f;gap:4px}
.mob-tab .ti{font-size:18px}
.mob-tab.active{color:#8fc3a4;background:none}
.mob-tab.active .ti{color:#8fc3a4}

/* More: the sheet from the mockup */
.mob-more-sheet{border-radius:20px 20px 0 0;border:1px solid rgba(255,255,255,0.07);border-bottom:none}
.mob-more-item{border-radius:12px;font-size:10px;font-weight:700}

/* Pull-to-refresh indicator */
#ptr-ind{position:fixed;top:calc(var(--safe-top) + 56px);left:50%;z-index:450;
  width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:15px;
  opacity:0;transform:translateX(-50%);pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,0.35)}
#ptr-ind.ready{color:#8fc3a4;border-color:#3d7a52}
#ptr-ind.spin i{display:inline-block;animation:spin 0.7s linear infinite}

@media(max-width:768px){
  /* The mobile topbar is title + bell + avatar. Refresh = pull down; Chat = tab. */
  #refresh-btn,#tb-chat-btn{display:none !important}
  .tb-avatar{display:flex}
  .tb-date{display:none}
  /* Stock rows read as rows: the website toggle retreats into the car page
     (it is also in the dots menu); one dots button per row is the ceiling. */
  .stock-row .btn[title$="website"]{display:none}
  .stock-row{padding:12px 12px}
  /* Dashboard tiles lose their heavy gradients for flat tints */
  .db-hero-tile{border-radius:14px}
  .page{padding-top:10px}
}

/* ================================================================
   LIGHT THEME — 15 Aug 2026
   Everything above was built dark. Rather than rewrite it, this block
   flips the tokens and then fixes only the rules that assumed a dark
   background (light-on-dark overlays, glow gradients, heavy shadows).
   ONE DELETABLE BLOCK — remove it and the app goes back to dark.
   ================================================================ */
:root{/* primary text */
  --chrome2:#4d545e;/* secondary text */
  --dim:#6b7280;/* muted labels — was #858c96, 3.4:1 on white;this passes 4.5:1 */
  /* Semantic colours darkened slightly so they pass contrast on white */
  --red:#b3261e;/* The wordmark was a white→grey gradient;invisible on white */
  --silver:linear-gradient(160deg,#2f6b45 0%,#1d4a2f 45%,#2f6b45 100%)}

body,.shell{background:var(--bg)}
.pin-screen{background:var(--bg)}
.sb-logo-main,.pin-logo{background:var(--silver);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Depth comes from a soft shadow, not from a darker surface */
.card{box-shadow:0 1px 2px rgba(16,24,40,0.04),0 1px 3px rgba(16,24,40,0.06);border-color:var(--border)}
.topbar{box-shadow:0 1px 0 var(--border)}
.sidebar{background:var(--surface);border-right:1px solid var(--border)}

/* These were light overlays designed to lift off a dark surface —
   on white they were invisible, so they become tinted instead. */
.sb-link.active{background:var(--brand-t);border-left-color:var(--brand);color:var(--brand-text);font-weight:600}
.sb-link:hover{background:rgba(16,24,40,0.04)}
.stock-row:hover,.auc-row:hover{background:rgba(16,24,40,0.03)}

/* Form controls sit on white with a visible edge */
input,select,textarea{background:#fff;color:var(--chrome);border-color:var(--border2)}
input::placeholder,textarea::placeholder{color:var(--dim)}
.search-box{background:#fff;border-color:var(--border2)}

/* Primary action: solid brand green, white label */
.btn-primary{background:linear-gradient(135deg,#2f6b45 0%,#26583a 100%);color:#fff;border:1px solid var(--brand)}
.btn-primary:hover{background:linear-gradient(135deg,#357a4f 0%,#2b6342 100%)}
.btn-ghost{background:#fff;color:var(--chrome2);border:1px solid var(--border2)}
.btn-ghost:hover{border-color:var(--chrome2);color:var(--chrome);background:#fff}

/* Modal scrim can stay dark; the panel goes white */
.modal{background:var(--card);box-shadow:0 12px 40px rgba(16,24,40,0.18)}
.mob-more-sheet,.notif-panel{background:var(--card);box-shadow:0 -6px 30px rgba(16,24,40,0.14)}
.mobile-tab-bar{background:var(--surface);border-top:1px solid var(--border)}

/* Tinted tiles/pills: readable text on a pale wash */
.db-hero-tile{box-shadow:0 1px 2px rgba(16,24,40,0.05)}
/* Hero tiles were near-black gradients with a bright number. On white they
   become a pale tint of the same colour, with the number darkened to match. */
.db-tile-red{background:#fdf3f2;border-color:#f6dcd9}
.db-tile-amber{background:#fdf7ec;border-color:#f4e6cc}
.db-tile-green{background:#f1f8f3;border-color:#d8ebdf}
.db-hero-tile:hover{box-shadow:0 4px 14px rgba(16,24,40,0.10)}
.db-tile-red .db-tile-icon,.db-tile-red .db-tile-num{color:#b3261e}
.db-tile-amber .db-tile-icon,.db-tile-amber .db-tile-num{color:#8a5a00}
.db-tile-green .db-tile-icon,.db-tile-green .db-tile-num{color:#1f6b34}
.stat-card{background:var(--card);border:1px solid var(--border)}
.toast2{background:#161a20;color:#fff}

/* Text colours that were hardcoded light hexes rather than tokens — these are
   the only ones that don't follow the token flip, so they'd render near-white
   on white. (The ~44 color:#fff are all on coloured or dark backgrounds and
   are left alone, including the whole invoice/document generator.) */
body{color:var(--chrome)}
.tbl td{color:var(--chrome2)}
.field input,.field select,.field textarea,.search-box input,#reg-input{color:var(--chrome)}

/* Panels painted dark by inline styles (the private stock widget). Those inline
   styles now read var(--x, <old dark value>), so deleting this block restores
   the dark look exactly. */
:root{--panel-strong:linear-gradient(145deg,#f2f7f3,#e9f1eb);--panel-inset:#f6f7f9}

/* ================================================================
   THEME COLOURS — 22 Aug 2026
   Three looks, chosen per person and remembered on their device.
   Default (no data-theme) is the green-and-white the app already had.
   These blocks only ADD overrides — nothing above is modified.
   ================================================================ */

:root[data-theme="blue"] .btn-primary{background:linear-gradient(135deg,#1d4ed8 0%,#1740a8 100%);border-color:#1d4ed8}
:root[data-theme="blue"] .btn-primary:hover{background:linear-gradient(135deg,#2a5ce8 0%,#1d4ed8 100%)}
:root[data-theme="blue"] .db-tile-green{background:#eef3fd;border-color:#d6e2fa}
:root[data-theme="blue"] .db-tile-green .db-tile-icon,
:root[data-theme="blue"] .db-tile-green .db-tile-num{color:#1d4ed8}

/* Dark, blue brand. Inherits every rule above via the ^="black" prefix match
   and only restates the brand colours. */

:root[data-theme="black-blue"] .btn-primary{background:linear-gradient(135deg,#5a8fd8 0%,#3f6fb5 100%);border-color:#5a8fd8;color:#fff}
:root[data-theme="black-blue"] .btn-primary:hover{background:linear-gradient(135deg,#6b9ee6 0%,#4a7ec5 100%)}

:root[data-theme^="black"] input,:root[data-theme^="black"] select,
:root[data-theme^="black"] textarea,:root[data-theme^="black"] .search-box{
  background:var(--surface);color:var(--chrome);border-color:var(--border2)}
:root[data-theme^="black"] .btn-ghost{background:var(--surface);color:var(--chrome2);border-color:var(--border2)}
:root[data-theme^="black"] .btn-ghost:hover{background:var(--card);color:var(--chrome);border-color:var(--chrome2)}
:root[data-theme^="black"] .btn-primary{background:linear-gradient(135deg,#3d9a5f 0%,#2a6e42 100%);border-color:#3d9a5f;color:#fff}
:root[data-theme^="black"] .btn-primary:hover{background:linear-gradient(135deg,#48b06d 0%,#357f4d 100%)}
:root[data-theme^="black"] .card{box-shadow:none;border-color:var(--border)}
:root[data-theme^="black"] .modal{box-shadow:0 12px 40px rgba(0,0,0,0.55)}
:root[data-theme^="black"] .mob-more-sheet,:root[data-theme^="black"] .notif-panel{box-shadow:0 -6px 30px rgba(0,0,0,0.5)}
:root[data-theme^="black"] .sb-link:hover{background:rgba(255,255,255,0.05)}
:root[data-theme^="black"] .stock-row:hover,:root[data-theme^="black"] .auc-row:hover{background:rgba(255,255,255,0.04)}
:root[data-theme^="black"] .db-tile-red{background:rgba(224,108,96,0.10);border-color:rgba(224,108,96,0.28)}
:root[data-theme^="black"] .db-tile-amber{background:rgba(217,154,60,0.10);border-color:rgba(217,154,60,0.28)}
:root[data-theme^="black"] .db-tile-green{background:rgba(76,175,114,0.10);border-color:rgba(76,175,114,0.28)}
:root[data-theme^="black"] .db-tile-red .db-tile-icon,:root[data-theme^="black"] .db-tile-red .db-tile-num{color:#e06c60}
:root[data-theme^="black"] .db-tile-amber .db-tile-icon,:root[data-theme^="black"] .db-tile-amber .db-tile-num{color:#d99a3c}
:root[data-theme^="black"] .db-tile-green .db-tile-icon,:root[data-theme^="black"] .db-tile-green .db-tile-num{color:#4caf72}
:root[data-theme^="black"] .toast2{background:#e8eaed;color:#12151a}

/* the picker itself */
.theme-menu{position:absolute;top:44px;right:0;background:var(--card);border:1px solid var(--border2);
 border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,0.18);padding:6px;z-index:900;min-width:186px}
.theme-opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;cursor:pointer;
 font-size:13px;color:var(--chrome);white-space:nowrap}
.theme-opt:hover{background:var(--brand-t)}
.theme-opt.on{background:var(--brand-t);font-weight:600}
.theme-sw{width:30px;height:16px;border-radius:4px;flex-shrink:0;border:1px solid rgba(128,128,128,0.35)}