@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root {
  /* Core HSL Tokens - Base Hue: 224 (Blue) */
  --h: 224;
  --bg: hsl(var(--h), 40%, 98%);
  --bg2: hsl(var(--h), 30%, 95%);
  --bg3: hsl(var(--h), 25%, 92%);
  --ink: hsl(var(--h), 45%, 12%);
  --ink2: hsl(var(--h), 35%, 25%);
  --muted: hsl(var(--h), 12%, 45%);
  --muted2: hsl(var(--h), 10%, 65%);
  --border: hsla(var(--h), 20%, 85%, 0.6);
  --border2: hsla(var(--h), 20%, 75%, 0.5);
  
  /* Brand Colors */
  --primary: hsl(225, 73%, 38%);    /* LotController Blue */
  --primary-deep: hsl(225, 85%, 25%);
  --primary-lite: hsla(225, 73%, 38%, 0.08);

  /* Legacy aliases — a lot of inline styles in index.html and a handful
     of JS-generated class names reference --blue / --blue-bg / --blue-mid
     even though these names were never declared. Rather than sweep 30+
     callsites, we alias them here so the old references render correctly.
     Any new code should use --primary / --primary-lite directly. */
  --blue: var(--primary);
  --blue-bg: var(--primary-lite);
  --blue-mid: hsla(225, 73%, 38%, 0.35);
  
  --red: hsl(0, 72%, 51%);
  --red-bg: hsl(0, 100%, 97%);
  --amber: hsl(38, 92%, 50%);
  --amber-bg: hsl(45, 100%, 96%);
  --green: hsl(142, 71%, 35%);
  --green-bg: hsl(142, 71%, 95%);
  
  /* Effects & Glassmorphism */
  --glass-bg: hsla(0, 0%, 100%, 0.65);
  --glass-blur: blur(14px);
  --glass-border: hsla(0, 0%, 100%, 0.35);
  
  /* Elevation Tokens */
  --shadow-xs: 0 1px 2px rgba(11, 27, 61, 0.05);
  --shadow-sm: 0 4px 12px rgba(11, 27, 61, 0.08);
  --shadow-md: 0 12px 32px rgba(11, 27, 61, 0.12);
  --shadow-lg: 0 24px 64px rgba(11, 27, 61, 0.16);
  
  /* Radius Tokens */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 18px;
  --r-xl: 32px;
  
  /* Transitions */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t-med: 0.3s var(--ease);
  --t-slow: 0.5s var(--ease);
}
*{margin:0;padding:0;box-sizing:border-box}
body{margin:0;padding:0;background:var(--bg2);color:var(--ink);font-family:'Inter',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;width:100%;overflow-x:hidden}

.login-card{width:100%;max-width:860px;display:flex;background:var(--bg);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 8px 40px rgba(26,63,166,0.15);border:1px solid var(--border)}

/* LEFT */
.login-aside{width:320px;flex-shrink:0;background:#0F1629;padding:48px 36px;display:flex;flex-direction:column;justify-content:space-between}
.brand-lockup{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.brand-wm{font-weight:800;font-size:1.4rem;letter-spacing:-0.04em;color:#fff;line-height:1}
.brand-tag{font-size:0.62rem;color:rgba(255,255,255,0.3);letter-spacing:0.22em;text-transform:uppercase;font-weight:500}
.login-feats{list-style:none;display:flex;flex-direction:column;gap:13px}
.login-feats li{font-size:0.78rem;color:rgba(255,255,255,0.55);display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.feat-mark{width:16px;height:16px;border-radius:4px;background:rgba(79,126,232,0.2);border:1px solid rgba(79,126,232,0.35);display:flex;align-items:center;justify-content:center;font-size:0.55rem;color:#7BA8FF;flex-shrink:0;margin-top:1px}
.aside-foot{font-size:0.6rem;color:rgba(255,255,255,0.18)}

/* RIGHT */
.login-form{flex:1;padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.login-heading{font-size:1.75rem;font-weight:800;letter-spacing:-0.03em;color:var(--ink);margin-bottom:28px;line-height:1.2}
.fl{margin-bottom:16px}
.fl-label{display:block;font-size:0.65rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:7px}
.fl-input{width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);color:var(--ink);font-family:'Inter',sans-serif;font-size:0.88rem;padding:11px 14px;outline:none;transition:border-color 0.18s,box-shadow 0.18s}
.fl-input:focus{border-color:var(--primary);background:var(--bg);box-shadow:0 0 0 3px rgba(26,63,166,0.08)}
.login-btn{width:100%;background:var(--primary);color:#fff;border:none;border-radius:var(--r);font-family:'Inter',sans-serif;font-weight:700;font-size:0.88rem;padding:13px;cursor:pointer;transition:all 0.2s;margin-top:8px}
.login-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.login-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.login-err{margin-top:12px;padding:10px 14px;background:var(--red-bg);border:1px solid var(--red);border-radius:var(--r);font-size:0.75rem;color:var(--red);display:none}
.login-note{margin-top:16px;font-size:0.7rem;color:var(--muted2);text-align:center}

/* MOCK HINT */
.mock-hint{margin-top:20px;padding:12px 14px;background:#f0f7ff;border:1px solid #c0d8ff;border-radius:var(--r);font-size:0.72rem;color:var(--primary);text-align:center;line-height:1.6}
.mock-hint strong{font-weight:700}

@media(max-width:640px){.login-card{flex-direction:column}.login-aside{width:100%;padding:32px 24px;min-height:auto}.login-feats{display:none}.login-form{padding:32px 24px}}
/* ── DASHBOARD ── */
.app{width:100%;max-width:880px;margin:0 auto;padding:110px 16px 100px;position:relative;box-sizing:border-box}
/* Header is visually the mirror of .nav-dock (footer): same glass bg, same
   radius but on the BOTTOM corners, same shadow depth, same vertical rhythm. */
header{display:flex;align-items:center;justify-content:space-between;min-height:88px;padding:20px 20px;padding-top:calc(20px + env(safe-area-inset-top));gap:14px;position:fixed;top:0;left:0;right:0;z-index:800;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);border-radius:0 0 28px 28px;box-shadow:var(--shadow-md);box-sizing:border-box;transition:var(--t-med)}
.h-logo{display:flex;align-items:center;gap:14px;flex-shrink:0}
/* Header logos 40x40. */
.h-logo svg{width:36px;height:36px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
.h-logo-wm{font-weight:900;font-size:1.4rem;letter-spacing:-0.05em;color:var(--ink);background:linear-gradient(135deg, var(--primary), var(--ink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Circular avatar button in the header */
.avatar-btn{width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;font-size:1.1rem;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;border:3px solid #fff;padding:0;box-shadow:var(--shadow-sm);transition:var(--t-fast);overflow:hidden;position:relative}
.avatar-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-md)}
.avatar-btn:active{transform:scale(0.96)}
.avatar-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Profile modal avatar preview (96px) */
#profileAvatarPreview{position:relative}
#profileAvatarPreview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.u-avatar{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-size:0.62rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.dash-card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 18px;cursor:pointer;transition:var(--t-med);box-shadow:var(--shadow-xs);text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;height:140px;overflow:hidden;background:linear-gradient(135deg, #fff, hsla(var(--h), 30%, 98%, 1))}
.dash-card > *{position:relative;z-index:1}
.dash-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary)}
.dash-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg, hsla(var(--h), 50%, 50%, 0.03), transparent);opacity:0;transition:var(--t-med)}
.dash-card:hover::after{opacity:1}
.dash-card:active{transform:scale(0.97)}
.dash-card-icon-wrap{position:absolute;top:20px;left:18px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.dash-card-arrow{position:absolute;top:20px;right:16px;width:24px;height:24px;border-radius:50%;background:var(--bg2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:0.6rem}
.dash-card-title{font-size:1.05rem;font-weight:800;letter-spacing:-0.025em;color:var(--ink);line-height:1.1;margin-bottom:3px;margin-top:40px}
.dash-card-sub{font-size:0.72rem;color:var(--muted);line-height:1.2;font-weight:500}
.sec-head{font-size:0.9rem;font-weight:800;letter-spacing:-0.01em;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.badge-sm{font-size:0.62rem;font-weight:700;background:var(--bg2);border:1px solid var(--border);color:var(--muted);padding:3px 9px;border-radius:20px}
.flag-item{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #FDE68A;border-left:3px solid #D97706;border-radius:var(--r);background:#FFFBEB;margin-bottom:6px}
.flag-item-ico{font-size:1.1rem;flex-shrink:0}
.flag-item-body{flex:1;min-width:0}
.flag-item-name{font-size:0.78rem;font-weight:700;color:#92400E}
.flag-item-meta{font-size:0.6rem;color:#B45309;margin-top:1px}
.flag-resolve-btn{font-size:0.62rem;font-weight:700;padding:3px 9px;border:1px solid #D97706;border-radius:20px;background:transparent;color:#D97706;cursor:pointer;flex-shrink:0}
.flag-resolve-btn:hover{background:#D97706;color:#fff}
.act-feed{display:flex;flex-direction:column;gap:5px}
.act-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:white;border:1px solid var(--border);border-radius:var(--r)}
.act-ico{width:30px;height:30px;border-radius:var(--r);background:#EEF2FB;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0;border:1px solid #C0CFF0}
.act-txt{flex:1;min-width:0}
.act-main{font-size:0.75rem;font-weight:600;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-when{font-size:0.58rem;color:var(--muted2);margin-top:1px}
.scan-fab{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;width:86px;height:86px;border-radius:50%;background:var(--primary);color:#fff;border:none;cursor:pointer;box-shadow:0 8px 28px rgba(26,63,166,0.5);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.18s}
.scan-fab:hover{background:#0D2FA0;transform:translateX(-50%) translateY(-2px)}
.scan-fab:active{transform:translateX(-50%) scale(0.93)}
/* ── SCANNER ── */
.back-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1.4rem;padding:0;line-height:1;display:flex;align-items:center}
.page-title{font-size:1rem;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}



/* CAMERA BOX */
.cam-box{position:relative;width:100%;aspect-ratio:4/3;background:#0e0e0e;border-radius:var(--r-lg);overflow:hidden;margin-bottom:0;border:2.5px solid #1A3FA6;box-shadow:0 0 0 4px rgba(26,63,166,0.12)}
.cam-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#E8ECF5;cursor:pointer;z-index:2}
.cam-idle:hover{background:var(--bg2)}
.cam-icon-wrap{width:72px;height:72px;border-radius:14px;background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(26,63,166,0.35)}
video{width:100%;height:100%;object-fit:cover;}
#capturedImg{width:100%;height:100%;object-fit:contain;display:none;background:#000}

/* scan overlay */
.scan-ovl{display:none;position:absolute;inset:0;pointer-events:none}
.scan-frame{position:absolute;left:8%;right:8%;top:25%;bottom:25%;border:2px solid rgba(255,255,255,0.7);border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,0.45)}
.scan-label{position:absolute;top:-22px;left:0;right:0;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:0.5rem;color:rgba(255,255,255,0.7);letter-spacing:0.2em}
.scan-beam{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,#4F7EE8,transparent);box-shadow:0 0 10px rgba(26,63,166,0.8);animation:slide 2s ease-in-out infinite}
@keyframes slide{0%{top:26%}100%{top:74%}}

/* progress */
.prog-wrap{display:none;position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.2)}
.prog-bar{height:100%;background:var(--primary);width:0%;transition:width 0.3s}

/* status */
.status-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);margin-bottom:12px}
.s-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:all 0.3s}
.s-dot.active{background:var(--primary);animation:blink 1.4s infinite}
.s-dot.success{background:var(--primary)}
.s-dot.error{background:var(--red)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
#sMsg{font-size:0.74rem;color:var(--muted)}

/* camera controls */
.cam-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:18px 0 12px}
.ctrl-btn{width:58px;height:58px;border-radius:50%;border:2px solid var(--border2);background:var(--bg);color:var(--muted);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.18s;box-shadow:var(--shadow-xs)}
.ctrl-btn:active{transform:scale(0.92);background:var(--bg2)}
.ctrl-btn:disabled{opacity:0.38;cursor:not-allowed}
.shutter{width:82px;height:82px;border-radius:50%;border:5px solid #1A3FA6;background:var(--bg);box-shadow:0 4px 20px rgba(26,63,166,0.25);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:2rem;transition:transform 0.12s}
.shutter:disabled{opacity:0.38;cursor:not-allowed}
.shutter:active{transform:scale(0.88)}

/* manual VIN */
.manual-row{display:flex;gap:8px;margin-bottom:14px}
.vin-inp{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:0.84rem;font-weight:500;padding:10px 13px;text-transform:uppercase;letter-spacing:0.1em;outline:none;transition:border-color 0.18s}
.vin-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,63,166,0.07)}
.vin-inp::placeholder{color:var(--muted2);font-size:0.7rem;letter-spacing:0.04em;text-transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--ink2);font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.18s;white-space:nowrap}
.btn:hover{border-color:var(--border2);background:var(--bg2)}
.btn-dark{background:#111827;border-color:#111827;color:#fff}
.btn-dark:hover{background:var(--primary);border-color:var(--primary)}
.btn-green{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-green:hover{background:#0D2FA0}

/* ── Trade-In Scanner Theme ── */
#screen-scanner.trade-in-mode .cam-box{border:2.5px solid #16a34a;box-shadow:0 0 0 4px rgba(22,163,74,0.12)}
#screen-scanner.trade-in-mode .scan-frame{border-color:rgba(22,163,74,0.8);box-shadow:0 0 0 9999px rgba(0,0,0,0.5)}
#screen-scanner.trade-in-mode .scan-beam{background:linear-gradient(90deg,transparent,#16a34a,transparent);box-shadow:0 0 10px rgba(22,163,74,0.8)}
#screen-scanner.trade-in-mode .shutter{border-color:#16a34a;box-shadow:0 4px 20px rgba(22,163,74,0.25)}
#screen-scanner.trade-in-mode .shutter svg{color:#16a34a!important}
#screen-scanner.trade-in-mode .status-bar{border-color:rgba(22,163,74,0.2);background:linear-gradient(135deg,#f0fdf4,var(--bg2))}
#screen-scanner.trade-in-mode .s-dot.active{background:#16a34a}
#screen-scanner.trade-in-mode .s-dot.success{background:#16a34a}
#screen-scanner.trade-in-mode .prog-bar{background:#16a34a}
#screen-scanner.trade-in-mode .cam-icon-wrap{background:#16a34a;box-shadow:0 4px 20px rgba(22,163,74,0.35)}
.ti-scanner-badge{display:none;align-items:center;gap:6px;padding:4px 12px;background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:20px;font-size:0.64rem;font-weight:800;color:#166534;letter-spacing:0.08em;text-transform:uppercase;margin-left:auto}
#screen-scanner.trade-in-mode .ti-scanner-badge{display:inline-flex}

/* result card */
.result-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);display:none;animation:up 0.25s ease;margin-bottom:20px}
/* When a scan has a result, hide the camera/capture UI and let the info
   take the full screen. The "Scan Again" button at the bottom of the result
   card calls resetAll() which removes this class. */
#screen-scanner.scan-has-result .cam-box,
#screen-scanner.scan-has-result .status-bar,
#screen-scanner.scan-has-result .cam-controls,
#screen-scanner.scan-has-result .manual-row { display:none !important }
/* Big full-width "Scan Another VIN" primary button at the bottom of the result */
.scan-again-primary{width:100%;padding:14px;margin:12px 15px;background:var(--primary);color:#fff;border:none;border-radius:var(--r);font-family:'Inter',sans-serif;font-weight:800;font-size:0.92rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 8px rgba(26,63,166,0.25);width:calc(100% - 30px)}
.scan-again-primary:hover{background:#0D2FA0}
.scan-again-primary:active{transform:scale(0.98)}
@keyframes up{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.res-head{background:var(--primary);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.res-vin{font-family:'IBM Plex Mono',monospace;font-size:clamp(0.74rem,2.4vw,0.96rem);color:#fff;letter-spacing:0.12em;font-weight:500}
.res-tags{display:flex;gap:6px;flex-wrap:wrap}
.res-tag{font-size:0.58rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:0.08em}
.rt-new{background:rgba(30,79,140,0.3);color:#7ab3f0}
.rt-used{background:rgba(184,114,10,0.3);color:#e0a040}
.rt-ok{background:rgba(26,63,166,0.35);color:#7BA8FF}
.rt-stock{background:rgba(22,101,52,0.3);color:#4ade80}
.rt-nostock{background:rgba(107,114,128,0.3);color:#9ca3af}
.res-loc{padding:9px 18px;background:var(--primary-lite);border-bottom:1px solid #C0CFF0;display:none;align-items:center;gap:7px;font-size:0.72rem;color:var(--primary);font-weight:600}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));border-top:1px solid var(--border)}
/* Inside the Vehicle Detail modal the available width is ~305px (sheet
   minus padding), which falls just shy of fitting two 155px columns.
   Drop the min to 140px there so the grid always lays out as 2-up. */
#vehicleModal .res-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.rg-cell{padding:12px 15px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.rg-lbl{font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.rg-val{font-size:0.84rem;font-weight:700;color:var(--ink)}
.rg-val.hi{color:var(--primary)}
.res-actions{padding:13px 15px;display:flex;gap:8px;background:var(--bg2);flex-wrap:wrap}
.flag-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--ink2);font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.18s}
.flag-btn:hover{border-color:#E8A020;background:#FFF8EC;color:#B86A00}

canvas{display:none}
/* ── INVENTORY ── */
.inv-tabs{display:flex;gap:0;margin-bottom:16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.inv-tab{flex:1;padding:10px;border:none;background:transparent;color:var(--muted);font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.18s}
.inv-tab.active{background:var(--primary);color:#fff}
.inv-top{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.inv-search{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);color:var(--ink);font-family:'Inter',sans-serif;font-size:0.84rem;padding:9px 13px;outline:none;box-shadow:var(--shadow-xs);transition:border-color 0.18s}
.inv-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,63,166,0.07)}
.inv-search::placeholder{color:var(--muted2)}
.exp-btn{padding:7px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);color:var(--muted);font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:0.06em;box-shadow:var(--shadow-xs);transition:all 0.18s}
.exp-btn:hover{border-color:var(--primary);color:var(--primary)}
.filter-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.fp{padding:5px 13px;border-radius:20px;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:700;cursor:pointer;transition:all 0.18s}
.fp:hover{color:var(--ink);border-color:var(--border2)}
.fp.fa{background:var(--ink);color:#fff;border-color:var(--ink)}
.fp.fn{background:var(--primary-lite);color:var(--primary);border-color:var(--primary)}
.fp.fu{background:var(--amber-bg);color:var(--amber);border-color:var(--amber)}
.fp.fav{background:var(--primary-lite);color:var(--primary);border-color:var(--primary)}
.fp.fs{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.inv-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.inv-table{width:100%;border-collapse:collapse;font-size:0.78rem;min-width:680px}
.inv-table thead tr{background:var(--primary)}
.inv-table thead th{padding:11px 14px;text-align:left;font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.85);white-space:nowrap;border-right:1px solid rgba(255,255,255,0.1)}
.inv-table thead th:last-child{border-right:none}
.inv-table tbody tr{border-bottom:1px solid var(--border);transition:background 0.15s}
.inv-table tbody tr:hover{background:var(--bg2)}
.inv-table tbody tr:last-child{border-bottom:none}
.inv-table tbody td{padding:11px 14px;color:var(--ink2);vertical-align:middle;border-right:1px solid var(--border)}
.inv-table tbody td:last-child{border-right:none}
.td-year{font-weight:800;font-size:1rem;letter-spacing:-0.03em;color:var(--ink)}
.td-make{font-weight:700;color:var(--ink)}
.td-trim{color:var(--muted);font-size:0.72rem}
.td-stock{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;color:var(--muted);background:var(--bg2);padding:3px 7px;border-radius:4px;white-space:nowrap}
.td-price{font-weight:700;color:var(--ink);white-space:nowrap}
.td-price.empty{color:var(--muted2);font-weight:400;font-style:italic;font-size:0.7rem}
.td-carfax{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;font-size:0.65rem;font-weight:700;color:var(--muted);background:var(--bg);cursor:default;white-space:nowrap}
.alerts-cell{white-space:nowrap}
.alert-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:6px;font-size:0.65rem;font-weight:700;cursor:pointer;border:1px solid #FDE68A;background:#FFFBEB;color:#92400E}
.alert-badge.none{border-color:var(--border);background:var(--bg);color:var(--muted2)}
.del-btn-sm{background:transparent;border:none;color:var(--muted2);cursor:pointer;font-size:0.78rem;padding:4px 6px;border-radius:5px;transition:all 0.18s}
.del-btn-sm:hover{color:var(--red)}
/* Inventory card row — reuses .vehicle-row but with inline share/delete actions */
.inv-row .vr-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.inv-row-btns{display:flex;gap:4px}
.inv-icon-btn{background:var(--bg2);border:1px solid var(--border);color:var(--muted);cursor:pointer;padding:7px 9px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;transition:all 0.15s;text-decoration:none}
.inv-icon-btn:hover{background:var(--bg);border-color:var(--primary);color:var(--primary)}
.inv-icon-btn.inv-del-btn:hover{border-color:var(--red);color:var(--red)}
.inv-icon-btn.inv-carfax-btn:hover{border-color:#16a34a;color:#16a34a}
.empty{text-align:center;padding:48px 20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r)}
.empty-i{font-size:1.8rem;margin-bottom:10px;opacity:0.35}
.empty-t{font-size:0.78rem;color:var(--muted);line-height:1.8}
/* flag-modal / flag-sheet: see consolidated definition below lot-tracker */
.send-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--bg);cursor:pointer;text-align:left;font-family:'Inter',sans-serif;width:100%;transition:border-color 0.18s;margin-bottom:10px}
.send-opt:hover{border-color:var(--primary)}
.send-opt-icon{font-size:1.4rem;flex-shrink:0}
.send-opt-title{font-size:0.84rem;font-weight:700;color:var(--ink)}
.send-opt-sub{font-size:0.62rem;color:var(--muted);margin-top:2px}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* ── LOT-TRACKER ── */
/* STAT CARDS — same style as dashboard cards */
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:22px}
.stat-card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px 14px 16px;box-shadow:var(--shadow-xs);text-align:center}
.stat-icon{font-size:1.6rem;margin-bottom:10px}
.stat-label{font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.stat-number{font-size:2.6rem;font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--ink)}
.stat-sub{font-size:0.58rem;color:var(--muted);margin-top:6px;line-height:1.5}

/* SORT ROW */
.sort-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sort-label{font-size:0.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;flex-shrink:0}
.sort-pill{padding:5px 13px;border-radius:20px;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:700;cursor:pointer;transition:all 0.18s;white-space:nowrap;display:flex;align-items:center;gap:4px}
.sort-pill:hover{color:var(--ink);border-color:var(--border2)}
.sort-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.sort-pill .arrow{font-size:0.6rem;opacity:0.7}

/* LOT-TRACKER: additional filter pill states */
.fp.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.fp.fnh{background:#F3E8FF;color:#6B21A8;border-color:#A855F7}
/* Top search bar — sticky under the header so it stays visible while scrolling */
/* Lot Tracker search — fixed footer, mirrored spec of .nav-dock (same
   glass bg, same 28px top-corner radius, same height rhythm & shadow).
   On iOS the on-screen keyboard would normally hide a fixed-bottom input,
   so main.js wires up the Visual Viewport API to bump `bottom` up by the
   keyboard height when it appears. That keeps the bar anchored above the
   keyboard rather than being covered by it. */
.lot-top-search{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  min-height:88px;
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-top:1px solid var(--glass-border);
  border-radius:28px 28px 0 0;
  box-shadow:var(--shadow-md);
  transition:bottom 0.18s ease;
}
.lot-top-search-icon{width:22px!important;height:22px!important;color:var(--muted);flex-shrink:0}
.lot-top-search input{flex:1;background:transparent;border:none;outline:none;font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:600;color:var(--ink);padding:4px 0;min-width:0}
.lot-top-search input::placeholder{color:var(--muted);font-weight:500}
.lot-top-search-count{flex-shrink:0;font-size:0.72rem;font-weight:700;color:var(--muted);background:var(--bg2);padding:5px 12px;border-radius:20px;border:1px solid var(--border);white-space:nowrap}

/* Push the Lot Tracker content above the fixed search footer so the last
   vehicle row + pagination aren't hidden behind it. */
#screen-lot-tracker .app{padding-bottom:130px}
/* Pagination controls for Lot Tracker (25 per page) */
.lot-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.lot-page-nav{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.15s}
.lot-page-nav:hover:not([disabled]){border-color:var(--primary);color:var(--primary)}
.lot-page-nav[disabled]{opacity:0.4;cursor:not-allowed}
.lot-page-btns{display:flex;gap:4px}
.lot-page-btn{min-width:36px;padding:8px 11px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.15s}
.lot-page-btn:hover{border-color:var(--primary);color:var(--primary)}
.lot-page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.lot-page-meta{text-align:center;font-size:0.68rem;color:var(--muted);margin-top:8px;font-weight:600}
/* Vehicle detail modal — location + alert sections */
.vd-section{border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:var(--bg)}
.vd-section-head{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--bg2);border-bottom:1px solid var(--border);font-size:0.62rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.vd-section-head span{flex:1}
.vd-section-body{padding:12px 14px;font-size:0.78rem;color:var(--ink);line-height:1.45}
.vd-badge{flex-shrink:0;font-size:0.6rem;font-weight:800;background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:2px 8px;border-radius:20px;letter-spacing:0}
.vd-history-btn{flex-shrink:0;font-size:0.58rem;font-weight:800;background:var(--bg);border:1px solid var(--border);color:var(--primary);padding:4px 10px;border-radius:20px;cursor:pointer;letter-spacing:0.05em;text-transform:uppercase;transition:all 0.15s;font-family:'Inter',sans-serif}
.vd-history-btn:hover{background:var(--primary-lite);border-color:var(--primary);color:var(--primary)}
.vd-history-btn.open{background:var(--primary);color:#fff;border-color:var(--primary)}
.vd-history-btn.vd-update-btn{color:#166534}
.vd-history-btn.vd-update-btn:hover{background:#dcfce7;border-color:#16a34a;color:#166534}
.vd-history-btn.vd-update-btn.open{background:#16a34a;color:#fff;border-color:#16a34a}
/* Inline "move location" form */
.vd-loc-form{animation:vdSlide 0.22s ease}
.vd-loc-form input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:0.88rem;color:var(--ink);outline:none;background:var(--bg)}
.vd-loc-form input:focus{border-color:var(--primary)}
.vd-loc-form-row{display:flex;gap:8px;margin-top:10px}
.vd-loc-gps-btn{flex:1;padding:10px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);color:var(--ink);font-weight:700;font-size:0.78rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all 0.15s}
.vd-loc-gps-btn:hover{border-color:var(--primary);color:var(--primary)}
.vd-loc-gps-btn[disabled]{opacity:0.5;cursor:not-allowed}
.vd-loc-save-btn{flex:1;padding:10px;background:var(--primary);color:#fff;border:none;border-radius:var(--r);font-weight:800;font-size:0.82rem;cursor:pointer;transition:background 0.15s}
.vd-loc-save-btn:hover{background:#0D2FA0}
.vd-loc-save-btn[disabled]{opacity:0.5;cursor:not-allowed;background:var(--muted)}
.vd-loc-form-status{font-size:0.68rem;color:var(--muted);margin-top:8px;min-height:1em;font-family:'IBM Plex Mono',monospace}
.vd-loc-form-status.error{color:var(--red)}
.vd-loc-form-status.success{color:#166534}
.vd-history-divider{height:1px;background:var(--border);margin:12px 0 10px}
.vd-history-label{font-size:0.56rem;font-weight:800;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted2);margin-bottom:8px}
.vd-inline-history{animation:vdSlide 0.22s ease}
@keyframes vdSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.vd-history-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border)}
.vd-history-row:last-child{border-bottom:none}
.vd-history-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:6px;flex-shrink:0}
.vd-history-body{flex:1;min-width:0}
.vd-history-main{font-size:0.78rem;font-weight:700;color:var(--ink);word-break:break-word}
.vd-history-meta{font-size:0.64rem;color:var(--muted);margin-top:2px;font-family:'IBM Plex Mono',monospace}
.vd-history-prev{font-size:0.64rem;color:var(--muted2);margin-top:3px;font-style:italic}
/* Sales Leaderboard — Goal cards (Monthly + New/Used side-by-side) */
.lb-goals{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.lb-goal{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-xs)}
.lb-goal-main{border-color:var(--primary);border-width:2px;background:linear-gradient(180deg,var(--bg),var(--primary-lite))}
.lb-goal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lb-goal-label{font-size:0.62rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.lb-goal-main .lb-goal-label{color:var(--primary)}
.lb-goal-target{font-size:1.6rem;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.lb-goal-main .lb-goal-target{font-size:2rem;color:var(--primary)}
.lb-goal-bar{height:8px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-bottom:6px}
.lb-goal-main .lb-goal-bar{height:10px}
.lb-goal-bar-fill{height:100%;background:linear-gradient(90deg,#1A3FA6,#4B6FD4);border-radius:999px;transition:width 0.5s ease;width:0%}
.lb-goal-bar-fill.lb-goal-bar-new{background:linear-gradient(90deg,#1A3FA6,#4B6FD4)}
.lb-goal-bar-fill.lb-goal-bar-used{background:linear-gradient(90deg,#B87203,#E09A2A)}
.lb-goal-foot{display:flex;align-items:center;justify-content:space-between;font-size:0.68rem;color:var(--muted);font-weight:700;font-family:'IBM Plex Mono',monospace}
.lb-goal-foot span:last-child{font-weight:800;color:var(--ink)}
.lb-goal-main .lb-goal-foot span:last-child{color:var(--primary)}
.lb-goal-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lb-goal-new{border-color:var(--primary)}
.lb-goal-used{border-color:var(--amber)}
.lb-goal-used .lb-goal-target{color:var(--amber)}
.lb-goal-new .lb-goal-target{color:var(--primary)}
.fp.fp-more{display:inline-flex;align-items:center;gap:4px;background:var(--bg);color:var(--ink);border-color:var(--border2)}
.fp.fp-more.open{background:var(--ink);color:#fff;border-color:var(--ink)}
.adv-filters{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 14px 12px;margin-bottom:14px;animation:up 0.2s ease}
.adv-filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.adv-filter-item{display:flex;flex-direction:column;gap:4px}
.adv-filter-item label{font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted)}
.adv-filter-item select, .adv-filter-item input{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);color:var(--ink);font-family:'Inter',sans-serif;font-size:0.78rem;padding:8px 10px;outline:none;font-weight:600;min-width:0;width:100%}
.adv-filter-item select:focus, .adv-filter-item input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(26,63,166,0.12)}
.adv-clear{padding:6px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);color:var(--muted);font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all 0.15s}
.adv-clear:hover{border-color:var(--red);color:var(--red)}
.adv-count{font-size:0.65rem;color:var(--muted);font-weight:600;align-self:center}
/* Clickable stat cards in Lot Tracker */
.lot-stat{cursor:pointer;transition:border-color 0.18s, box-shadow 0.18s, transform 0.12s;user-select:none;-webkit-tap-highlight-color:transparent}
.lot-stat:hover{border-color:var(--ink);box-shadow:var(--shadow-md)}
.lot-stat:active{transform:scale(0.98)}
.lot-stat.lot-stat-active{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.lot-stat.lot-stat-active[data-filter="new"]{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary) inset}
.lot-stat.lot-stat-active[data-filter="used"]{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber) inset}

/* VEHICLE CARDS */
.vehicle-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:white;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);margin-bottom:8px;transition:box-shadow 0.18s}
.vehicle-row:hover{box-shadow:var(--shadow-sm)}
.vr-num{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;color:var(--muted2);min-width:24px;text-align:center}
.vr-photo{position:relative;width:80px;height:60px;flex-shrink:0;border-radius:var(--r);background:var(--bg2);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vr-photo img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.vr-photo svg.vr-photo-fallback{position:absolute;inset:0;margin:auto;width:22px;height:22px;color:var(--muted2);opacity:0.4;z-index:0}
.vr-info{flex:1;min-width:0}
.vr-name{font-size:0.88rem;font-weight:700;color:var(--ink)}
.vr-vin{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;color:var(--muted2);margin-top:2px}
.vr-tags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.tag{font-size:0.58rem;font-weight:700;padding:2px 8px;border-radius:20px}
.vr-right{text-align:right;flex-shrink:0}
.vr-price{font-size:0.88rem;font-weight:800;color:var(--ink)}
.vr-days{font-size:0.6rem;color:var(--muted2);margin-top:3px}
.vr-days.warn{color:var(--amber);font-weight:700}
.vr-days.alert{color:var(--red);font-weight:700}
.vr-stock{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;color:var(--muted2);margin-top:2px}

.flag-modal{display:none;position:fixed;inset:0;z-index:10000;background:hsla(var(--h), 50%, 10%, 0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:flex-end;justify-content:center;transition:var(--t-med)}
.flag-modal.open{display:flex}
.flag-sheet{background:var(--bg);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:28px 24px calc(40px + env(safe-area-inset-bottom));width:100%;max-width:520px;box-shadow:var(--shadow-lg);max-height:92vh;overflow-y:auto;position:relative;border:1px solid var(--glass-border);border-bottom:none}

/* Profile modal takes over the full screen rather than being a bottom
   sheet — feels more like a dedicated settings screen on mobile.
   Padding reset on top/sides so the in-sheet header can reach screen
   edges the same way the real fixed headers do. The body wrapper
   (.profile-body) handles horizontal padding for the form. */
#profileModal{align-items:stretch;justify-content:stretch;background:var(--bg)}
#profileModal .flag-sheet{max-width:100%;width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;padding:0 0 calc(30px + env(safe-area-inset-bottom))}
#profileModal .profile-body{padding:18px 20px 0}
/* Header inside the sheet — mirrors the look of the fixed app headers
   (glass bg, 88px rhythm, 28px bottom-corner radius, shadow-md). */
#profileModal .profile-header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:88px;
  padding:20px 20px;
  padding-top:calc(20px + env(safe-area-inset-top));
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  border-radius:0 0 28px 28px;
  box-shadow:var(--shadow-md);
  position:sticky;top:0;z-index:2;
}

@media(max-width:640px){
  .flag-sheet {
    width: 95%;
    margin: 10px auto;
    border-radius: 28px;
    max-height: 85vh;
  }
}
/* ── TEAM ── */
/* LEADERSHIP — GM + GSM */
.leadership{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.leader-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-xs)}
.leader-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-lite);color:var(--primary);font-size:0.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--border2)}
.leader-info{flex:1;min-width:0}
.leader-role{font-size:0.55rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.leader-name{font-size:0.88rem;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leader-phone{font-size:0.65rem;color:var(--muted);margin-top:3px;font-family:'IBM Plex Mono',monospace}
.leader-actions{display:flex;gap:6px;flex-shrink:0}
.action-btn{width:32px;height:32px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.85rem;transition:background 0.18s}
.action-btn:hover{background:var(--primary-lite);border-color:var(--border2)}

/* GROUP SECTION */
.group-section{margin-bottom:20px}
.group-header{display:flex;align-items:center;justify-content:space-between}
.group-title{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.group-count{font-size:0.62rem;font-weight:700;background:var(--bg2);border:1px solid var(--border);color:var(--muted2);padding:2px 8px;border-radius:20px}

/* MEMBER CARD */
.member-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:white;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-xs);margin-bottom:0;border-radius:0;border-left:none;border-right:none;border-top:none;transition:box-shadow 0.18s;cursor:pointer}
.member-card:hover{box-shadow:var(--shadow-sm)}
.member-avatar{position:relative;width:44px;height:44px;border-radius:50%;background:var(--primary-lite);color:var(--primary);font-size:0.82rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--border2);overflow:hidden}
.member-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.member-info{flex:1;min-width:0}
.member-name{font-size:0.84rem;font-weight:700;color:var(--ink)}
.member-role{font-size:0.62rem;color:var(--muted);margin-top:1px}
.member-phone{font-size:0.62rem;color:var(--muted2);font-family:'IBM Plex Mono',monospace;margin-top:2px}
.member-actions{display:flex;gap:6px;flex-shrink:0}
.m-btn{width:30px;height:30px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.78rem;transition:all 0.18s}
.m-btn:hover{background:var(--primary-lite);border-color:var(--border2)}

/* ADD BUTTON */
.add-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--primary);color:#fff;border:none;border-radius:var(--r);font-family:'Inter',sans-serif;font-size:0.72rem;font-weight:700;cursor:pointer;transition:all 0.18s}
.add-btn:hover{background:#0D2FA0}

/* ADD FORM */
.add-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;margin-bottom:16px;display:none;animation:up 0.22s ease}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}

/* MODAL (used by Team detail, VLC move, Recon report) */
.modal-bg{display:none;position:fixed;inset:0;z-index:500;background:hsla(var(--h), 50%, 10%, 0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:flex-end;justify-content:center}
.modal-bg.open{display:flex}
.modal-sheet{background:var(--bg);border-radius:20px 20px 0 0;padding:24px 20px 40px;width:100%;max-width:500px;box-shadow:0 -8px 40px rgba(0,0,0,0.2);animation:slideUp 0.22s ease;max-height:90vh;overflow-y:auto}

/* ── VEHICLE-LIFECYCLE ── */
/* STAGE PIPELINE */


/* VEHICLE CARD */
.vlc-card{background:white;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 18px 16px;margin-bottom:10px;box-shadow:var(--shadow-xs);cursor:pointer;transition:box-shadow 0.18s;position:relative;overflow:hidden}
.vlc-card:hover{box-shadow:var(--shadow-sm)}
.vlc-card.readonly{cursor:default}
.vlc-card.readonly:hover{box-shadow:var(--shadow-xs)}
.vlc-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stage-color)}
.vlc-top{display:flex;align-items:flex-start;gap:10px}
.vlc-info{flex:1;min-width:0}
.vlc-name{font-size:0.88rem;font-weight:700;color:var(--ink)}
.vlc-vin{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;color:var(--muted2);margin-top:2px}
.vlc-tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.vlc-stage-tag{display:inline-flex;align-items:center;gap:5px;font-size:0.62rem;font-weight:700;padding:3px 10px;border-radius:20px}
.vlc-days{font-size:0.6rem;font-weight:700;color:var(--muted2)}
.vlc-days.warn{color:#b8720a}
.vlc-days.alert{color:#b83232}
.vlc-days.justified{color:#1A3FA6}
.vlc-right{text-align:right;flex-shrink:0}
.vlc-stock{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;color:var(--muted2);margin-top:2px}
.vlc-move-btn{font-size:0.65rem;font-weight:700;padding:4px 10px;border-radius:20px;border:1.5px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;margin-top:6px;transition:all 0.18s}
.vlc-move-btn:hover{border-color:var(--primary);color:var(--primary)}
.vlc-justify-btn{font-size:0.6rem;font-weight:700;padding:3px 10px;border-radius:20px;border:1.5px solid #eab308;background:#fefce8;color:#a16207;cursor:pointer;white-space:nowrap;transition:all 0.18s}
.vlc-justify-btn:hover{background:#fef08a;border-color:#a16207}
.vlc-justified-note{display:inline-flex;align-items:center;gap:4px;font-size:0.6rem;font-weight:700;padding:3px 10px;border-radius:20px;background:#EEF2FF;color:#1A3FA6;border:1px solid #c7d2fe;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.justify-preset-chip{font-size:0.72rem;font-weight:600;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border2);background:var(--bg2);color:var(--ink);cursor:pointer;transition:all 0.15s;white-space:nowrap}
.justify-preset-chip:hover{border-color:#1A3FA6;color:#1A3FA6}
.justify-preset-chip.selected{border-color:#1A3FA6;background:#EEF2FF;color:#1A3FA6;font-weight:700}
/* Trade-in initial status selector (Ready vs Finance Hold) */
.ti-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ti-status-btn{padding:12px 10px;border:1.5px solid var(--border2);background:var(--bg);border-radius:var(--r);cursor:pointer;text-align:left;transition:all 0.15s;font-family:'Inter',sans-serif;color:var(--ink)}
.ti-status-btn:hover{border-color:var(--muted);background:var(--bg2)}
.ti-status-btn.selected[data-ti-status="trade_in"]{border-color:#16a34a;background:#f0fdf4;color:#15803d}
.ti-status-btn.selected[data-ti-status="finance_hold"]{border-color:#7c3aed;background:#f5f3ff;color:#5b21b6}
.ti-status-title{font-size:0.82rem;font-weight:800;line-height:1.2}
.ti-status-sub{font-size:0.62rem;font-weight:500;opacity:0.75;margin-top:3px;line-height:1.3}
/* ── Vehicle Lifecycle vertical flow ── */
.vlc-stage-block{margin-bottom:0}
.vlc-stage-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;border-radius:var(--r-lg);box-shadow:var(--shadow-xs);transition:transform 0.15s}
.vlc-stage-head:active{transform:scale(0.98)}
.vlc-stage-head .vlc-stage-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.vlc-stage-head .vlc-stage-icon svg{width:20px;height:20px}
.vlc-stage-head .vlc-stage-title{font-size:1.08rem;font-weight:800;color:#fff;letter-spacing:-0.02em;flex:1;line-height:1.1}
.vlc-stage-head .vlc-stage-sub{font-size:0.6rem;font-weight:700;letter-spacing:0.06em;color:rgba(255,255,255,0.75);margin-top:3px;display:block;text-transform:uppercase}
.vlc-stage-head .vlc-stage-count{font-size:0.7rem;font-weight:800;background:rgba(255,255,255,0.22);color:#fff;padding:4px 12px;border-radius:20px;flex-shrink:0}
.vlc-stage-head .vlc-stage-chev{color:rgba(255,255,255,0.8);font-size:1.2rem;transition:transform 0.22s;margin-left:6px;flex-shrink:0}
.vlc-stage-body{padding:12px 0 4px 0;animation:up 0.22s ease}
.vlc-stage-empty{text-align:center;padding:20px 16px;color:var(--muted2);font-size:0.74rem;background:var(--bg2);border:1px dashed var(--border);border-radius:var(--r);margin:4px 0 8px}
.vlc-arrow-row{display:flex;justify-content:center;padding:6px 0 2px 0}
.vlc-arrow-row svg{width:30px;height:30px;color:var(--muted2);stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* Stage history timeline inside the move modal */
.vlc-history-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.vlc-history-head{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--bg);border-bottom:1px solid var(--border);font-size:0.6rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.vlc-history-head span:first-of-type{flex:1}
.vlc-history-count{flex-shrink:0;font-size:0.56rem;font-weight:800;background:var(--bg2);border:1px solid var(--border);color:var(--muted);padding:2px 8px;border-radius:20px;letter-spacing:0}
.vlc-history-body{padding:12px 14px;max-height:260px;overflow-y:auto}
.vlc-history-entry{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border)}
.vlc-history-entry:last-child{border-bottom:none}
.vlc-history-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:5px;box-shadow:0 0 0 2px var(--bg2)}
.vlc-history-content{flex:1;min-width:0}
.vlc-history-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.vlc-history-stage{font-size:0.8rem;font-weight:800;color:var(--ink)}
.vlc-history-duration{font-size:0.62rem;font-weight:800;color:var(--primary);font-family:'IBM Plex Mono',monospace;background:var(--primary-lite);padding:2px 8px;border-radius:10px;white-space:nowrap}
.vlc-history-duration.active{color:#16a34a;background:#dcfce7}
.vlc-history-meta{font-size:0.62rem;color:var(--muted);line-height:1.5;font-family:'IBM Plex Mono',monospace}
.vlc-history-meta strong{color:var(--ink2);font-weight:700}

/* STAGE COUNTS SUMMARY */


/* MOVE MODAL */
.move-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-lg);cursor:pointer;margin-bottom:8px;transition:all 0.18s;background:var(--bg)}
.move-opt:hover{border-color:var(--primary);background:var(--primary-lite)}
.move-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.move-label{font-size:0.84rem;font-weight:700;color:var(--ink)}
.move-sub{font-size:0.62rem;color:var(--muted);margin-top:1px}

.screen{display:none;width:100%}
.screen.active{display:block;animation:screenIn 0.2s ease}
#screen-login.active{display:flex;align-items:center;justify-content:center;padding:20px;min-height:100vh;background:var(--bg2)}
/* IMPORTANT: no transform — any transform on .screen.active becomes the
   containing block for its fixed children (.nav-dock) and breaks them. */
@keyframes screenIn{from{opacity:0}to{opacity:1}}
.mock-bar{display:none!important}

/* ═══ TOAST NOTIFICATIONS (for realtime alerts) ═══ */
#toastContainer{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:900;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:calc(100vw - 32px);width:420px}
.toast{pointer-events:auto;background:#fff;border:1px solid var(--border);border-left:4px solid #D97706;border-radius:var(--r);box-shadow:0 8px 32px rgba(26,63,166,0.2),0 2px 8px rgba(0,0,0,0.08);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;animation:toastIn 0.3s ease;cursor:pointer;width:100%}
.toast.closing{animation:toastOut 0.25s ease forwards}
.toast-icon{width:36px;height:36px;border-radius:50%;background:#FFFBEB;color:#D97706;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:0.78rem;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-sub{font-size:0.62rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-close{background:none;border:none;cursor:pointer;color:var(--muted2);padding:4px;display:flex;align-items:center;flex-shrink:0}
.toast-close:hover{color:var(--ink)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px) scale(0.96)}}
/* Realtime connection indicator (live dot) */
.rt-pulse{display:inline-flex;align-items:center;gap:4px;font-size:0.55rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#166534}
.rt-pulse::before{content:'';width:6px;height:6px;border-radius:50%;background:#22C55E;animation:rtPulse 1.8s ease-in-out infinite}
@keyframes rtPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,0.7)}50%{opacity:0.6;box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* ═══ HEROICONS HELPER ═══ */
.icon{width:1.1em;height:1.1em;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.18em;display:inline-block}
.icon-sm{width:0.9em;height:0.9em}
.icon-lg{width:1.5em;height:1.5em}
.icon-xl{width:2rem;height:2rem}
.icon-2xl{width:2.4rem;height:2.4rem}
.icon-3xl{width:3rem;height:3rem}
/* Filled-style icon variant — flips stroke→fill for symbols designed solid (e.g. hi-car-pin). */
.icon.icon-fill{fill:currentColor;stroke:none}

/* Dashboard Metrics Pills */
.stat-pill { flex:1; min-width:0; max-width:33.33%; background:#fff; border:1px solid var(--border); border-radius:22px; padding:20px 10px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 4px 12px rgba(0,0,0,0.04); transition:all 0.2s ease; text-align:center; min-height:115px; overflow:hidden; }
.stat-pill .sp-val { font-family: 'Inter', sans-serif; font-size:1.75rem; font-weight:900; color:var(--ink); line-height:1; letter-spacing:-0.04em; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-pill .sp-lbl { font-size:0.62rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; line-height:1.2; word-wrap:break-word; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-pill .sp-delta { font-size:0.6rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:3px; margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-delta.green { color:#059669; }
.sp-delta.amber { color:#D97706; }
.sp-delta.red { color:#DC2626; }
.picker-slot { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); cursor:pointer; transition:all 0.15s; }
.picker-slot:hover { border-color:var(--border2); }
.picker-slot.ghost { border-style:dashed; opacity:0.6; cursor:default; }
.sec-title-modulos{font-size:0.7rem;font-weight:700;color:rgba(11,27,61,0.4);text-transform:uppercase;letter-spacing:0.12em;margin-left:4px;margin-bottom:10px;margin-top:0px;}

/* ── PEmium CHAT UI ── */
.chat-room-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; position:fixed; top:0; left:0; right:0; z-index:100; box-shadow:0 4px 20px rgba(0,0,0,0.05); border-bottom:1px solid var(--border); padding-top:calc(12px + env(safe-area-inset-top)); box-sizing:border-box; }

/* ── Chat room: keep header pinned to the flex layout so the iOS keyboard
   cannot pan it off-screen. Override the global header{position:fixed}. ── */
#chatRoomView {
  padding-top: 0 !important;
}
#chatRoomView > header {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important;
  z-index: 1 !important;
  min-height: auto !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 10px 14px !important;
  padding-top: calc(10px + env(safe-area-inset-top)) !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.chat-group-avatar { width:38px; height:38px; border-radius:50%; background:var(--primary-lite); border:1.5px solid var(--border2); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; flex-shrink:0; }
.chat-group-avatar img { width:100%; height:100%; object-fit:cover; }
#chatRoomTitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chat-view { position:fixed; inset:0; z-index:900; background:var(--bg); display:flex; flex-direction:column; padding-top:calc(75px + env(safe-area-inset-top)); box-sizing:border-box; }

.chat-list-item { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border); transition:background 0.2s; cursor:pointer; min-height:72px; box-sizing:border-box; }
.chat-list-item:active { background:var(--bg2); }
.chat-list-item .chat-group-avatar { width:52px; height:52px; font-size:1.1rem; font-weight:800; margin-right:4px; flex-shrink:0; }

.chat-msg-row { display:flex; gap:8px; margin-bottom:8px; align-items:flex-end; }
.chat-msg-row.me { flex-direction:row-reverse; }
.chat-msg-row.grouped { margin-bottom: 2px; }
.chat-msg-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-lite); color: var(--primary); font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; }
.chat-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-msg-avatar-spacer { width: 34px; flex-shrink: 0; }
/* Column wrapper stacks bubble + actions vertically so actions appear BELOW */
.chat-msg-col { display: flex; flex-direction: column; max-width: 75%; min-width: 0; }
.chat-msg-row.me    .chat-msg-col { align-items: flex-end; }
.chat-msg-row.other .chat-msg-col { align-items: flex-start; }
.chat-msg-bubble { width: fit-content; padding: 7px 11px 7px 12px; border-radius: 14px; position: relative; font-size: 0.87rem; line-height: 1.35; box-shadow: 0 1px 1.5px rgba(0,0,0,0.08); }
.chat-msg-row.other .chat-msg-bubble { background: #fff; color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg-row.me .chat-msg-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
/* Group position corner tweaks — flatten the "tail" corner for continuation messages.
   Avatar sits next to grp-end (last), so keep the tail sharp on that corner. */
.chat-msg-row.other .chat-msg-bubble.grp-start { border-bottom-left-radius: 5px; }
.chat-msg-row.other .chat-msg-bubble.grp-mid   { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.chat-msg-row.other .chat-msg-bubble.grp-end   { border-top-left-radius: 5px; /* bottom-left keeps 4px tail toward avatar */ }
.chat-msg-row.me    .chat-msg-bubble.grp-start { border-bottom-right-radius: 5px; }
.chat-msg-row.me    .chat-msg-bubble.grp-mid   { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.chat-msg-row.me    .chat-msg-bubble.grp-end   { border-top-right-radius: 5px; /* bottom-right keeps 4px tail */ }
.chat-msg-sender { display: block; font-size: 0.75rem; font-weight: 800; margin-bottom: 3px; }

/* WhatsApp-style text + inline meta (time + checks).
   Meta is inline-block at the end of the text, so the bubble's
   fit-content width accounts for text + meta together on one line.
   For wrapped text, the meta sits after the last line naturally. */
.chat-msg-text {
  font-size: 0.87rem;
  line-height: 1.35;
  overflow-wrap: break-word;   /* only break when a single word is too long for the bubble */
  word-break: normal;
  hyphens: none;
}
.chat-msg-meta {
  display: inline-block;
  margin-left: 8px;
  transform: translateY(3px);  /* drop to visual baseline of text */
  font-size: 0.62rem;
  color: var(--muted2);
  white-space: nowrap;
  line-height: 1;
  opacity: 0.85;
  user-select: none;
  vertical-align: baseline;
}
.chat-msg-row.me .chat-msg-meta { color: rgba(255,255,255,0.82); opacity: 1; }
.chat-msg-meta svg { vertical-align: middle; }
/* Legacy hook (kept for any dynamically injected content still using the old class) */
.chat-msg-time { font-size: 0.62rem; color: var(--muted2); opacity: 0.85; }
.chat-msg-row.me .chat-msg-time { color: rgba(255,255,255,0.78); opacity: 1; }

/* ── Link preview card (shown below message text for URLs) ── */
.chat-link-preview { display:block; border-radius:10px; overflow:hidden; margin-top:7px; text-decoration:none; cursor:pointer; border:1px solid rgba(255,255,255,0.22); background:rgba(0,0,0,0.08); transition:opacity 0.15s; }
.chat-link-preview:active { opacity:0.75; }
.chat-msg-row.other .chat-link-preview { background:var(--bg2); border-color:var(--border); }
.chat-link-preview-img { width:100%; max-height:130px; object-fit:cover; display:block; }
.chat-link-preview-body { padding:8px 10px 9px; }
.chat-link-preview-title { font-size:0.8rem; font-weight:700; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:var(--ink); }
.chat-link-preview-desc { font-size:0.72rem; color:var(--ink2); margin-top:3px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; }
.chat-link-preview-domain { font-size:0.66rem; color:var(--muted); margin-top:5px; display:flex; align-items:center; gap:4px; }
.chat-link-preview-domain img { border-radius:2px; flex-shrink:0; }
.chat-link-preview-shimmer .chat-link-preview-title { opacity:0.5; font-style:italic; font-weight:400; }
/* White text inside my (blue) bubbles */
.chat-msg-row.me .chat-link-preview-title { color:#fff; }
.chat-msg-row.me .chat-link-preview-desc  { color:rgba(255,255,255,0.82); }
.chat-msg-row.me .chat-link-preview-domain { color:rgba(255,255,255,0.6); }

/* Replied-to message preview inside a bubble */
.chat-reply-quote { display:block; border-left:3px solid var(--primary); background:rgba(26,63,166,0.07); border-radius:10px; padding:6px 10px; margin-bottom:6px; font-size:0.74rem; color:var(--ink2); cursor:pointer; line-height:1.35; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-msg-row.me .chat-reply-quote { border-left-color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.92); }
.chat-reply-quote-sender { display:block; font-size:0.62rem; font-weight:800; color:var(--primary); margin-bottom:2px; letter-spacing:0.02em; }
.chat-msg-row.me .chat-reply-quote-sender { color:#fff; opacity:0.9; }

/* Existing reactions, shown below the bubble as chips */
.chat-reactions-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.chat-reaction-chip { display:inline-flex; align-items:center; gap:3px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:2px 8px; font-size:0.72rem; color:var(--ink2); cursor:pointer; transition:transform 0.12s, background 0.15s; user-select:none; }
.chat-reaction-chip:active { transform:scale(0.92); }
.chat-reaction-chip.me { background:rgba(26,63,166,0.1); border-color:var(--primary); color:var(--primary); font-weight:700; }
.chat-msg-row.me .chat-reaction-chip { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.35); color:#fff; }
.chat-msg-row.me .chat-reaction-chip.me { background:#fff; color:var(--primary); border-color:#fff; }
.chat-reaction-count { font-size:0.66rem; font-weight:700; opacity:0.85; }

/* Emoji picker popup. Opened by the react action button; hidden otherwise. */
.chat-reaction-picker { display:none; gap:4px; margin-top:6px; padding:6px 8px; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:0 6px 18px rgba(0,0,0,0.08); width:fit-content; animation:msgIn 0.18s ease; }
.chat-msg-row.me .chat-reaction-picker { margin-left:auto; }
.reaction-option { font-size:1.25rem; line-height:1; padding:4px 6px; border-radius:12px; cursor:pointer; transition:background 0.15s, transform 0.12s; }
.reaction-option:hover { background:var(--bg2); }
.reaction-option:active { transform:scale(0.85); }

/* Per-message action row — hidden until the bubble is tapped */
.chat-msg-actions { display:none; gap:2px; margin-top:4px; align-items:center; animation:msgIn 0.12s ease; }
.chat-msg-row.show-actions .chat-msg-actions { display:flex; }
.chat-msg-row.me .chat-msg-actions { justify-content:flex-end; }
.chat-msg-actions > div { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; color:var(--muted2); background:rgba(0,0,0,0.04); transition:background 0.15s, color 0.15s, transform 0.12s; }
.chat-msg-actions > div:hover { background:rgba(0,0,0,0.09); color:var(--ink); }
.chat-msg-actions > div:active { transform:scale(0.88); }
.chat-msg-row.me .chat-msg-actions > div { color:var(--muted); background:rgba(0,0,0,0.04); }
.chat-msg-row.me .chat-msg-actions > div:hover { background:rgba(0,0,0,0.08); color:var(--ink); }

/* ═══ CHAT GROUP INFO PANEL ═══ */
.gi-tab { flex:1; padding:11px 8px; font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:700; color:var(--muted); background:none; border:none; border-bottom:2.5px solid transparent; cursor:pointer; transition:color 0.15s, border-color 0.15s; }
.gi-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.gi-member-row { display:flex; align-items:center; gap:12px; padding:13px 16px; background:#fff; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.12s; }
.gi-member-row:active { background:var(--bg2); }
.gi-member-avatar { width:42px; height:42px; border-radius:50%; background:var(--primary-lite); color:var(--primary); font-size:0.88rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; position:relative; }
.gi-member-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gi-status-dot { position:absolute; bottom:1px; right:1px; width:11px; height:11px; border-radius:50%; border:2px solid #fff; }
.gi-media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.gi-media-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; cursor:pointer; display:block; }
.gi-link-row { padding:13px 16px; background:#fff; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.12s; }
.gi-link-row:active { background:var(--bg2); }
.gi-empty { padding:50px 24px; text-align:center; color:var(--muted); font-size:0.84rem; line-height:1.5; }
/* Member search bar */
.gi-search-wrap { padding:10px 12px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1; }
.gi-search-box { display:flex; align-items:center; gap:8px; background:var(--bg2); border-radius:10px; padding:7px 12px; }
.gi-search-box input { border:none; background:transparent; font-family:'Inter',sans-serif; font-size:0.84rem; color:var(--ink); width:100%; outline:none; }
.gi-search-box input::placeholder { color:var(--muted); }
/* Spin animation for upload loading */
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin 0.8s linear infinite; transform-origin:center; }
/* Member contact bottom sheet */
.member-contact-sheet { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0); display:flex; align-items:flex-end; justify-content:center; transition:background 0.25s; pointer-events:none; }
.member-contact-sheet.open { background:rgba(0,0,0,0.45); pointer-events:auto; }
.member-contact-inner { background:#fff; border-radius:24px 24px 0 0; padding:28px 24px calc(28px + env(safe-area-inset-bottom)); width:100%; max-width:520px; transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1); box-shadow:0 -8px 40px rgba(0,0,0,0.15); }
.member-contact-sheet.open .member-contact-inner { transform:translateY(0); }
.mc-action-btn { display:inline-flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; cursor:pointer; color:var(--primary); }
.mc-action-btn span { font-size:0.68rem; font-weight:700; }
.mc-action-icon { width:52px; height:52px; border-radius:50%; background:var(--primary-lite); display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.mc-action-btn:active .mc-action-icon { background:var(--primary); color:#fff; }

/* ═══ FLOOR STATUS SYSTEM ═══ */
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:24px; border:1.5px solid var(--border); background:var(--bg); color:var(--ink2); font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:700; cursor:pointer; transition:all 0.18s; }
.status-pill:active { transform:scale(0.95); }
.status-pill.active { border-color:var(--ink); background:var(--ink); color:#fff; }
.status-pill.active .status-dot { box-shadow:0 0 0 2px #fff; }
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Status dropdown (floats over everything) */
.status-dropdown { display:none; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,0.18); padding:6px; min-width:180px; z-index:99990; }
.status-dropdown-opt { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; font-size:0.84rem; font-weight:700; color:var(--ink); cursor:pointer; transition:background 0.12s; font-family:'Inter',sans-serif; }
.status-dropdown-opt:active { background:var(--bg2); }
.status-dropdown-opt.active { background:var(--bg2); }

.floor-grid { display:flex; flex-direction:column; gap:8px; }
.floor-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 12px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-xs); transition:border-color 0.2s; }
.floor-card-avatar { width:38px; height:38px; border-radius:50%; font-size:0.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; position:relative; }
.floor-card-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.floor-card-name { font-size:0.78rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.floor-card-status { font-size:0.62rem; font-weight:700; display:inline-flex; align-items:center; gap:4px; margin-top:3px; }

/* New/Used dept toggle — only shown for GM/GSM/Admin (both-scope users) */
.floor-dept-toggle{display:flex;gap:6px;padding:4px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;margin-bottom:14px}
.floor-dept-btn{flex:1;padding:10px 14px;border:none;background:transparent;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent}
.floor-dept-btn:hover{color:var(--ink)}
.floor-dept-btn.active[data-floor-dept="new"]{background:#fff;color:var(--primary);box-shadow:0 2px 6px rgba(26,63,166,0.15)}
.floor-dept-btn.active[data-floor-dept="used"]{background:#fff;color:#D97706;box-shadow:0 2px 6px rgba(217,119,6,0.15)}

/* Status card grid inside Floor Flow — 2 columns, all 6 statuses always visible */
.floor-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.floor-stat-card{display:flex;align-items:center;gap:10px;padding:14px 14px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);cursor:pointer;font-family:'Inter',sans-serif;text-align:left;box-shadow:var(--shadow-xs);transition:all 0.15s;-webkit-tap-highlight-color:transparent}
.floor-stat-card:hover{background:var(--sbg)}
.floor-stat-card.active{border-color:var(--sc);background:var(--sbg);box-shadow:0 0 0 2px var(--sc)}
.floor-stat-card.empty{opacity:0.55}
.floor-stat-card.empty.active{opacity:1}
.floor-stat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.floor-stat-label{font-size:0.78rem;font-weight:700;color:var(--ink);flex:1}
.floor-stat-card.active .floor-stat-label{color:var(--sc);font-weight:800}
.floor-stat-count{font-size:1rem;font-weight:800;min-width:20px;text-align:right}
/* People section — appears below the grid when a status is "entered" */
.floor-people-section{background:var(--sbg);border:1.5px solid var(--sc);border-radius:var(--r-lg);padding:10px;margin-bottom:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;animation:fadeIn 0.15s ease}
.floor-people-empty{grid-column:1/-1;padding:16px;text-align:center;color:var(--sc);font-size:0.82rem;font-weight:600}
.floor-person-card{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border-radius:12px;box-shadow:var(--shadow-xs)}
.floor-person-avatar{width:34px;height:34px;border-radius:50%;font-size:0.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}
.floor-person-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.floor-person-name{font-size:0.8rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── SKELETON LOADERS (replaces "Loading..." text) ── */
.skeleton-row{display:flex;flex-direction:column;gap:10px;padding:16px}
.skeleton-bar{height:14px;border-radius:8px;background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skeleton-bar.short{width:60%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── TOAST NOTIFICATIONS ── */
.lc-toast-container{position:fixed;top:env(safe-area-inset-top, 12px);left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:6px;width:calc(100% - 32px);max-width:380px;pointer-events:none}
.lc-toast{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:rgba(17,17,17,0.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 20px rgba(0,0,0,0.2);font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:500;color:#fff;pointer-events:all;animation:toastIn 0.2s ease;line-height:1.35}
.lc-toast-icon{display:none}
.lc-toast-msg{flex:1;min-width:0}
.lc-toast-close{background:none;border:none;font-size:0.7rem;opacity:0.4;cursor:pointer;padding:4px;color:#fff;flex-shrink:0}
.lc-toast-close:hover{opacity:0.8}
.lc-toast-out{animation:toastOut 0.3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-8px)}}

/* ── UP SYSTEM — walk-in turn queue (modelled after the paper list) ── */
.up-system-block{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:18px;box-shadow:var(--shadow-xs);overflow:hidden}
.up-system-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg2);border-left:4px solid var(--muted2);font-size:0.7rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase}
.up-join-btn{font-size:0.68rem;font-weight:800;padding:6px 12px;border-radius:20px;border:none;background:#1A3FA6;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:4px;letter-spacing:0.04em}
.up-join-btn:hover{background:#122e8a}
.up-queue-list{padding:8px 10px 12px}
.up-date{font-size:0.62rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.14em;padding:6px 4px;margin-bottom:2px;text-align:right}
.up-empty{padding:18px;text-align:center;color:var(--muted2);font-size:0.78rem}
.up-table{display:flex;flex-direction:column}
.up-row{display:grid;grid-template-columns:36px 1fr 110px 88px;align-items:center;gap:8px;padding:8px 8px;border-radius:10px;transition:background 0.15s}
.up-row:hover:not(.up-header){background:var(--bg2)}
.up-row + .up-row{border-top:1px solid var(--border)}
.up-row.up-header{font-size:0.58rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.14em;padding:6px 8px;border-bottom:2px solid var(--border);border-top:none}
.up-row.up-header .up-col-pos{text-align:center}
.up-row.up-first{background:linear-gradient(90deg,#f0fdf4,#ffffff);border-left:4px solid #22c55e;padding-left:4px}
.up-row.up-me{box-shadow:inset 0 0 0 1.5px #1A3FA6}
.up-row.up-me.up-first{box-shadow:inset 0 0 0 1.5px #16a34a}
.up-col{min-width:0}
.up-col-pos{font-size:0.92rem;font-weight:800;color:var(--muted);text-align:center}
.up-row.up-first .up-col-pos{color:#15803d;font-size:1rem}
.up-col-name{display:flex;align-items:center;gap:10px;min-width:0}
.up-name-wrap{min-width:0;flex:1}
.up-avatar{width:32px;height:32px;border-radius:50%;font-size:0.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}
.up-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.up-name{font-size:0.8rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.up-status{font-size:0.6rem;font-weight:600;display:inline-flex;align-items:center;gap:4px;margin-top:2px}
.up-col-turns{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.up-tally-dot{width:9px;height:9px;border-radius:50%;background:#1A3FA6;display:inline-block}
.up-tally-empty{font-size:0.7rem;color:var(--muted2);font-weight:700}
.up-tally-more{font-size:0.62rem;font-weight:800;color:#1A3FA6;margin-left:2px}
.up-row.up-first .up-tally-dot{background:#16a34a}
.up-row.up-first .up-tally-more{color:#16a34a}
.up-tag{font-size:0.52rem;font-weight:800;letter-spacing:0.08em;padding:2px 6px;border-radius:20px;text-transform:uppercase;white-space:nowrap}
.up-tag.up-you{background:#EEF2FF;color:#1A3FA6;border:1px solid #c7d2fe}
.up-tag.up-next{background:#22c55e;color:#fff}
.up-col-actions{display:flex;justify-content:flex-end}
.up-actions{display:flex;gap:4px;flex-shrink:0}
.up-took-btn{font-size:0.64rem;font-weight:800;padding:6px 10px;border-radius:20px;border:none;background:#16a34a;color:#fff;cursor:pointer;white-space:nowrap}
.up-took-btn:hover{background:#15803d}
.up-leave-btn,.up-kick-btn{font-size:0.72rem;font-weight:800;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--muted2);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.up-leave-btn:hover,.up-kick-btn:hover{border-color:var(--red);color:var(--red)}
@media (max-width:480px){
  .up-row{grid-template-columns:28px 1fr auto;gap:6px}
  .up-col-turns{display:none}
}

/* ── Chat image lightbox buttons ── */
.lb-btn { width:54px; height:54px; border-radius:50%; border:none; background:rgba(255,255,255,0.12); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.6rem; line-height:1; transition:background 0.15s, transform 0.12s; flex-shrink:0; }
.lb-btn:active { transform:scale(0.88); background:rgba(255,255,255,0.22); }
.lb-action { width:auto; height:48px; border-radius:24px; padding:0 24px; gap:8px; font-size:0.82rem; font-weight:700; font-family:'Inter',sans-serif; color:#fff; min-width:120px; }

/* Chat Date Separators — sticky within each day group (replaces like WhatsApp) */
.chat-day-group { position:relative; }
.chat-date-sep { display:flex; align-items:center; justify-content:center; padding:6px 0; position:sticky; top:0; z-index:2; }
.chat-date-sep span { background:rgba(255,255,255,0.92); color:var(--muted); font-size:0.68rem; font-weight:700; padding:5px 14px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ── BOTTOM NAV DOCK (GLASS) ── */
.nav-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right:0;
  height: 88px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 28px 28px 0 0;
  border-top: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 900;
}
.nav-btn {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: var(--t-fast);
}
.nav-btn:active { background: rgba(0,0,0,0.03); transform: scale(0.92); }
.nav-btn svg { width: 32px; height: 32px; stroke-width: 2.2; }

.nav-scan-wrapper {
  flex: 0 0 80px;
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
}
.nav-scan-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px hsla(var(--h), 80%, 30%, 0.45);
  cursor: pointer;
  position: absolute;
  top: -24px;
  transition: var(--t-fast);
  border: 4px solid var(--primary);
}
.nav-scan-btn:active { transform: translateY(4px) scale(0.9); }
.nav-scan-btn svg { width: 44px; height: 44px; stroke-width: 2.2; }

.chat-badge {
  position: absolute;
  top: 14px;
  right: calc(50% - 22px);
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  pointer-events: none;
  box-shadow: var(--shadow-xs);
}

/* ── PREMIUM ANIMATIONS ── */
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes screenOut { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(1.02); } }
/* No transform — see note on the earlier screenIn definition above. */
@keyframes screenIn { from { opacity:0; } to { opacity:1; } }
@keyframes msgIn { from { opacity:0; transform:translateX(10px) translateY(5px); } to { opacity:1; transform:translateX(0) translateY(0); } }

.screen.fade-out { animation: screenOut 0.25s var(--ease) forwards; }
.screen.active { display:block; animation: screenIn 0.35s var(--ease) forwards; }

.animate-stagger > * { opacity:0; animation: slideUp 0.4s var(--ease) forwards; }
.animate-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.animate-stagger > *:nth-child(n+6) { animation-delay: 0.3s; }

/* Auto-animate key cards across every screen — no HTML changes required.
   Each immediate card element fades + slides up on first paint. Browsers
   run these animations once (forwards) so they don't loop on scroll. */
@keyframes cardFadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
.screen.active .floor-stat-card,
.screen.active .floor-status-group,
.screen.active .floor-dept-btn,
.screen.active .up-row,
.screen.active .member-card,
.screen.active .vlc-card,
.screen.active .lb-row,
.screen.active .inv-session-card,
.screen.active .lot-tracker-card,
.screen.active .vlc-stage-block {
  animation: cardFadeIn 0.35s var(--ease) both;
}
/* Per-index stagger — works on any container that lists cards sequentially */
.screen.active .floor-stat-card:nth-child(1),
.screen.active .up-row:nth-child(1) { animation-delay: 0.02s }
.screen.active .floor-stat-card:nth-child(2),
.screen.active .up-row:nth-child(2) { animation-delay: 0.07s }
.screen.active .floor-stat-card:nth-child(3),
.screen.active .up-row:nth-child(3) { animation-delay: 0.12s }
.screen.active .floor-stat-card:nth-child(4),
.screen.active .up-row:nth-child(4) { animation-delay: 0.17s }
.screen.active .floor-stat-card:nth-child(5),
.screen.active .up-row:nth-child(5) { animation-delay: 0.22s }
.screen.active .floor-stat-card:nth-child(6) { animation-delay: 0.27s }

/* Respect OS-level reduced-motion preferences — turn everything off cleanly */
@media (prefers-reduced-motion: reduce) {
  .animate-stagger > *,
  .screen.active *,
  .screen.active { animation: none !important; }
}

/* Chat message entry */
.chat-msg-row { animation: msgIn 0.3s var(--ease) forwards; }

/* Birthdays mini-row — informational only, not clickable */
#teamBirthdaysScroller::-webkit-scrollbar { display: none; }
.team-bday-card {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  width: 56px;
}
.team-bday-name {
  font-size: 0.66rem; font-weight: 700; color: var(--ink);
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; line-height: 1.1;
}
.team-bday-day {
  font-size: 0.6rem; font-weight: 700; color: var(--muted);
  letter-spacing: 0.02em; line-height: 1;
}
.team-bday-day.is-today { color: #B91C1C; font-weight: 800; }

/* Sticky search footer for Team Network — mirrors the Lot Tracker footer
   (.lot-top-search) spec: same min-height, padding, glass bg, 28px top-corner
   radius, same box-shadow. Consistent visual weight across the app's search
   footers so users get the same affordance on every screen. */
.team-search-footer {
  position: fixed; left: 0; right: 0;
  bottom: 0;
  z-index: 800;
  display: flex; align-items: center;
  min-height: 88px;
  padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-md);
  transition: bottom 0.18s ease;
}
.team-search-pill {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  /* Vertical padding tuned so the total footer height matches .lot-top-search
     (88px) exactly — pill content is ~28px + 2px borders, footer has 40px
     of its own padding, so 8px vertical here lands us on 88. */
  padding: 8px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.team-search-pill > svg.icon { width: 22px !important; height: 22px !important; color: var(--muted); flex-shrink: 0; }
.team-search-pill input { flex: 1; background: transparent; border: none; outline: none; font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--ink); padding: 4px 0; min-width: 0; }
.team-search-pill input::placeholder { color: var(--muted); font-weight: 500; }
.team-search-pill input::-webkit-search-cancel-button { display: none; }

/* Scroll freeze applied while a footer search input is focused. Plain
   overflow:hidden is ignored by iOS's "scroll focused input into view"
   behavior, so we pin the body with position:fixed at the current scroll
   offset instead (JS sets body.top = -scrollY). The fixed search bar is
   unaffected because it's positioned against the viewport, not the body. */
html.search-kb-open {
  overflow: hidden;
  overscroll-behavior: none;
}
html.search-kb-open body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.team-search-empty {
  text-align: center; padding: 40px 20px;
  color: var(--muted); font-size: 0.85rem;
}
.team-bday-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary-lite); color: var(--primary);
  font-size: 0.82rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;        /* let the cake badge spill outside */
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
}
.team-bday-avatar-photo {
  position: absolute; inset: 0;     /* cover the initials underneath */
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.team-bday-avatar::after {
  content: "🎂";
  position: absolute; bottom: -4px; right: -6px;
  font-size: 0.95rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  pointer-events: none;
}
.team-bday-avatar.is-today::after {
  font-size: 1.05rem;       /* a touch larger to mark today, but no animation */
}

/* ═══════════════════════════════════════════════════════════════════
   Appointments Hub
   ═══════════════════════════════════════════════════════════════════ */

/* Tabs */
.appt-tabs {
  display: flex; gap: 8px;
  padding: 12px 16px; margin: 0 -16px 8px -16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.appt-tabs::-webkit-scrollbar { display: none; }
.appt-tab {
  flex: 0 0 auto;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 14px; font-size: 0.78rem; font-weight: 700;
  color: var(--muted); border-radius: 999px; transition: all 0.18s;
  white-space: nowrap;
}
.appt-tab:hover { background: var(--bg2); color: var(--ink); }
.appt-tab.active { background: #7C3AED; color: #fff; }

/* Day group header */
.appt-day-header {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  padding: 14px 4px 6px; margin-top: 4px;
}

/* Card */
.appt-card {
  display: flex; gap: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  box-shadow: var(--shadow-xs);
}
.appt-time-col {
  flex: 0 0 72px; display: flex; flex-direction: column; align-items: flex-start;
  padding-top: 2px; border-right: 1px solid var(--border); padding-right: 10px;
}
.appt-time { font-size: 0.92rem; font-weight: 800; color: var(--ink); letter-spacing: 0.01em; }
.appt-rel  { font-size: 0.65rem; color: var(--muted); margin-top: 2px; font-weight: 600; }
.appt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.appt-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em;
}
.appt-ico { font-size: 1rem; }
.appt-type { flex: 1; }
.appt-customer { font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.appt-vehicle  { font-size: 0.72rem; color: var(--muted); }
.appt-vehicle code {
  font-family: 'SF Mono', Menlo, monospace;
  background: var(--bg2); padding: 1px 5px; border-radius: 4px; font-size: 0.68rem;
}
.appt-notes {
  font-size: 0.72rem; color: var(--muted);
  margin-top: 2px; padding: 6px 8px; background: var(--bg2); border-radius: 6px;
}
.appt-chip {
  display: inline-block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  margin-left: auto;
}
.appt-chip-sync { background: #E0E7FF; color: #3730A3; }
.appt-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.appt-actions button {
  flex: 1; min-width: 70px; padding: 7px 10px; font-size: 0.7rem; font-weight: 700;
  background: var(--bg2); color: var(--ink); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.appt-actions button:hover { background: #7C3AED; color: #fff; border-color: #7C3AED; }

/* Empty state */
.appt-empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
  font-size: 0.82rem; font-weight: 600;
}

/* Modal: type & vehicle-type pills */
.appt-type-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.appt-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); cursor: pointer; transition: all 0.18s;
  font-size: 0.72rem; font-weight: 700; color: var(--ink);
}
.appt-type-btn > :first-child { font-size: 1.3rem; }
.appt-type-btn.selected { border-color: #7C3AED; background: #F5F3FF; color: #5B21B6; }
.appt-vtype-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.appt-vtype-btn {
  padding: 10px 8px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); cursor: pointer; transition: all 0.18s;
  font-size: 0.74rem; font-weight: 700; color: var(--ink);
}
.appt-vtype-btn.selected { border-color: #7C3AED; background: #F5F3FF; color: #5B21B6; }

/* Dashboard next-appointment widget */
.appt-dash-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  color: #fff; padding: 14px 16px; border-radius: 14px;
  margin: 0 0 18px 0; box-shadow: 0 6px 16px rgba(124,58,237,0.25);
}
.appt-dash-ico { font-size: 1.6rem; flex: 0 0 auto; }
.appt-dash-body { flex: 1; min-width: 0; }
.appt-dash-title {
  font-size: 0.84rem; font-weight: 800; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appt-dash-meta { font-size: 0.68rem; opacity: 0.9; margin-top: 2px; font-weight: 600; }
.appt-dash-go {
  background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px; padding: 7px 12px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.04em; cursor: pointer;
}
.appt-dash-go:hover { background: rgba(255,255,255,0.3); }

/* ═══════════════════════════════════════════════════════════════════
   Leads Control
   ═══════════════════════════════════════════════════════════════════ */

/* Lead row card in the main list */
.lead-row {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s;
  box-shadow: var(--shadow-xs);
}
.lead-row:hover { border-color: #7C3AED; transform: translateY(-1px); }
.lead-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lead-row-name { font-weight: 800; font-size: 0.92rem; color: var(--ink); }
.lead-row-status {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.lead-row-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 0.7rem; color: var(--muted); margin-top: 6px; font-weight: 600;
}
.lead-row-meta span { white-space: nowrap; }
.lead-row-interest {
  font-size: 0.74rem; color: var(--ink); margin-top: 6px;
  padding: 5px 8px; background: var(--bg2); border-radius: 6px;
}

/* Lead detail screen */
.lead-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 2px 10px 2px;
}
.lead-head-name { font-size: 1.2rem; font-weight: 800; color: var(--ink); }

.lead-contact {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.lead-contact-btn {
  flex: 1; min-width: 110px; text-align: center;
  padding: 10px 12px; background: var(--bg2); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: 0.82rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lead-contact-btn:hover { background: #7C3AED; color: #fff; border-color: #7C3AED; }

.lead-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  padding: 12px; background: var(--bg2); border-radius: 10px;
  margin-bottom: 14px; font-size: 0.78rem;
}
.lead-meta div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lead-meta-label {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.lead-meta code {
  font-family: 'SF Mono', Menlo, monospace; background: var(--bg);
  padding: 1px 5px; border-radius: 4px; font-size: 0.72rem;
}

.lead-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.lead-actions button {
  flex: 1; min-width: 80px; padding: 9px 10px; font-size: 0.74rem; font-weight: 700;
  background: var(--bg2); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.lead-actions button:hover { background: #7C3AED; color: #fff; border-color: #7C3AED; }

.lead-section-title {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin: 14px 2px 8px 2px;
}

.lead-status-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lead-status-pill {
  padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--bg); cursor: pointer; font-size: 0.7rem; font-weight: 700;
  color: var(--ink); transition: all 0.15s;
}
.lead-status-pill.selected { background: #7C3AED; color: #fff; border-color: #7C3AED; }
.lead-status-pill:hover:not(.selected) { border-color: #7C3AED; color: #7C3AED; }

.lead-appt {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.lead-appt-top {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 0.82rem; color: var(--ink);
}
.lead-appt-when { font-size: 0.72rem; color: var(--muted); margin-top: 3px; font-weight: 600; }
.lead-appt-notes {
  font-size: 0.72rem; color: var(--muted);
  margin-top: 6px; padding: 6px 8px; background: var(--bg2); border-radius: 6px;
}
.lead-appt-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lead-appt-actions button {
  flex: 1; min-width: 70px; padding: 6px 10px; font-size: 0.68rem; font-weight: 700;
  background: var(--bg2); color: var(--ink); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
}
.lead-appt-actions button:hover { background: #7C3AED; color: #fff; border-color: #7C3AED; }

.lead-new-appt {
  width: 100%; padding: 10px; margin-top: 4px;
  background: #F5F3FF; color: #5B21B6; border: 1.5px dashed #7C3AED;
  border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.78rem;
}
.lead-new-appt:hover { background: #7C3AED; color: #fff; border-style: solid; }

.lead-save-notes {
  margin-top: 8px; padding: 8px 14px;
  background: #7C3AED; color: #fff; border: none; border-radius: 8px;
  cursor: pointer; font-weight: 700; font-size: 0.74rem;
}

/* Manager team summary card */
#leadsTeamCard {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow-xs);
}
.lt-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px;
}
.lt-stat {
  background: var(--bg2); border-radius: 10px; padding: 10px 8px; text-align: center;
}
.lt-stat-big { font-size: 1.4rem; font-weight: 800; color: #7C3AED; }
.lt-stat-label {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.lt-sec-title {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin: 10px 0 6px;
}
.lt-rows { display: flex; flex-direction: column; gap: 4px; }
.lt-row {
  display: flex; justify-content: space-between;
  padding: 8px 10px; background: var(--bg2); border-radius: 8px;
  font-size: 0.78rem; font-weight: 600;
}
.lt-row-name { font-family: 'SF Mono', Menlo, monospace; color: var(--muted); font-size: 0.72rem; }

/* ═══════════════════════════════════════════════════════════════════
   Missing-vehicles dashboard widget
   ═══════════════════════════════════════════════════════════════════ */
/* Team-appointments widget + sheet (manager read-only) */
.team-appt-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #0369A1 0%, #075985 100%);
  color: #fff; padding: 14px 16px; border-radius: 14px;
  margin: 0 0 18px 0; box-shadow: 0 6px 16px rgba(3,105,161,0.25);
  cursor: pointer; transition: transform 0.15s;
}
.team-appt-card:hover { transform: translateY(-1px); }
.team-appt-ico { font-size: 1.6rem; flex: 0 0 auto; }
.team-appt-body { flex: 1; min-width: 0; }
.team-appt-title { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.01em; }
.team-appt-meta  { font-size: 0.68rem; opacity: 0.85; margin-top: 2px; font-weight: 600; }
.team-appt-go { font-size: 1.4rem; opacity: 0.6; flex: 0 0 auto; font-weight: 600; }
.team-appt-demo {
  display: inline-block; background: rgba(255,255,255,0.2); color: #fff;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle;
  text-transform: uppercase;
}
.team-appt-summary {
  background: var(--bg2, #F3F4F6); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.team-appt-summary-main { font-size: 1rem; font-weight: 800; color: var(--ink); }
.team-appt-summary-main .team-appt-demo {
  background: #0369A1; color: #fff;
}
.team-appt-summary-sub  { font-size: 0.72rem; color: var(--muted); margin-top: 2px; font-weight: 600; }
.team-appt-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 6px;
}
.team-appt-row-name { font-size: 0.84rem; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-appt-row-role {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6B7280;
  background: #F3F4F6; padding: 3px 8px; border-radius: 6px;
}
.team-appt-row-count {
  font-size: 1.1rem; font-weight: 800; color: #0369A1;
  min-width: 32px; text-align: right;
}

/* Daily Log — porter bitácora */
.daily-log-summary {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin: 0 0 14px 0;
}
.daily-log-summary-main { font-size: 1rem; font-weight: 800; color: var(--ink); }
.daily-log-summary-sub  { font-size: 0.72rem; color: var(--muted); margin-top: 2px; font-weight: 600; }
.daily-log-day { margin-bottom: 18px; }
.daily-log-day-head {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin: 4px 0 8px 0; display: flex; align-items: center; gap: 8px;
}
.daily-log-day-count {
  background: #E0F2FE; color: #0369A1; padding: 2px 8px;
  border-radius: 10px; font-size: 0.6rem; letter-spacing: 0.06em;
}
.daily-log-row {
  display: flex; gap: 12px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 6px;
}
.daily-log-row-time {
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
  font-family: 'SF Mono', Menlo, monospace; flex: 0 0 auto; padding-top: 2px;
}
.daily-log-row-body { flex: 1; min-width: 0; }
.daily-log-row-desc { font-size: 0.82rem; color: var(--ink); line-height: 1.35; }
.daily-log-row-vin  { font-size: 0.7rem; color: var(--muted); margin-top: 3px; font-family: 'SF Mono', Menlo, monospace; }

.missing-dash-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
  color: #fff; padding: 14px 16px; border-radius: 14px;
  margin: 0 0 18px 0; box-shadow: 0 6px 16px rgba(180,83,9,0.3);
  cursor: pointer; transition: transform 0.15s;
}
.missing-dash-card:hover { transform: translateY(-1px); }
.missing-dash-ico { font-size: 1.5rem; flex: 0 0 auto; }
.missing-dash-body { flex: 1; min-width: 0; }
.missing-dash-title { font-size: 0.84rem; font-weight: 800; letter-spacing: 0.01em; }
.missing-dash-meta  { font-size: 0.68rem; opacity: 0.9; margin-top: 2px; font-weight: 600; }
.missing-dash-go {
  background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px; padding: 7px 12px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
}
.missing-list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 6px;
}
.missing-list-row.never {
  background: #FEF3C7; border-color: #F59E0B;
}
.missing-list-main {
  font-size: 0.82rem; font-weight: 700; color: var(--ink);
}
.missing-list-sub {
  font-size: 0.7rem; color: var(--muted); margin-top: 2px;
}
.missing-list-sub code {
  font-family: 'SF Mono', Menlo, monospace;
  background: var(--bg2); padding: 1px 5px; border-radius: 4px;
}
.missing-list-age {
  font-size: 0.72rem; font-weight: 800; color: #B45309;
  white-space: nowrap;
}

/* VLC receipt badge */
.vlc-receipt-awaiting, .vlc-receipt-late {
  margin-top: 6px; padding: 6px 10px; border-radius: 6px;
  font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.vlc-receipt-awaiting { background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; }
.vlc-receipt-late     { background: #FEE2E2; color: #991B1B; border: 1px solid #DC2626; }
.vlc-receipt-btn {
  padding: 4px 10px; font-size: 0.6rem; font-weight: 800;
  background: #fff; border: 1px solid currentColor; color: inherit;
  border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.vlc-receipt-btn:hover { background: currentColor; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   Garage (physical row management)
   ═══════════════════════════════════════════════════════════════════ */

.garage-row {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 14px; overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.garage-row-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--bg2);
}
.garage-row-title { font-size: 0.88rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.garage-row-type {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.garage-row-count { font-size: 0.68rem; color: var(--muted); font-weight: 700; }
.garage-row-empty {
  padding: 18px; text-align: center; color: var(--muted);
  font-size: 0.74rem; font-style: italic;
}
.garage-row-add {
  width: 100%; padding: 10px; background: var(--bg2); color: #1A3FA6;
  border: 0; border-top: 1px dashed var(--border); cursor: pointer;
  font-size: 0.74rem; font-weight: 700;
}
.garage-row-add:hover { background: #EFF4FF; }

.garage-car {
  display: flex; align-items: stretch; gap: 10px;
  padding: 10px 12px; border-top: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
}
.garage-car:hover { background: var(--bg2); }
.garage-car-pos {
  flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border-radius: 8px;
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 800; font-size: 0.82rem; color: var(--ink);
}
.garage-car-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.garage-car-label { font-size: 0.84rem; font-weight: 700; color: var(--ink); }
.garage-car-meta {
  font-size: 0.68rem; color: var(--muted);
}
.garage-car-meta code {
  font-family: 'SF Mono', Menlo, monospace; background: var(--bg2);
  padding: 1px 5px; border-radius: 4px; font-size: 0.66rem;
}
.garage-car-notes {
  font-size: 0.7rem; color: var(--muted); margin-top: 3px;
  padding: 4px 8px; background: var(--bg2); border-radius: 6px;
}

.garage-car-order { display: flex; flex-direction: column; gap: 4px; }
.garage-car-order button {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 0.8rem;
  color: var(--ink);
}
.garage-car-order button:disabled { opacity: 0.3; cursor: not-allowed; }
.garage-car-order button:not(:disabled):hover { background: #1A3FA6; color: #fff; border-color: #1A3FA6; }

.garage-car-actions { display: flex; flex-direction: column; gap: 4px; }
.garage-handoff-btn {
  padding: 5px 10px; font-size: 0.66rem; font-weight: 800;
  background: #059669; color: #fff; border: none; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.garage-handoff-btn:hover { background: #047857; }
.garage-remove-btn {
  padding: 5px 10px; font-size: 0.66rem; font-weight: 800;
  background: var(--bg2); color: var(--red); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
}
.garage-remove-btn:hover { background: #FEE2E2; }

/* Dashboard card */
.garage-dash-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #1A3FA6 0%, #0D2FA0 100%);
  color: #fff; padding: 14px 16px; border-radius: 14px;
  margin: 0 0 18px 0; box-shadow: 0 6px 16px rgba(26,63,166,0.25);
}
.garage-dash-ico { font-size: 1.5rem; flex: 0 0 auto; }
.garage-dash-body { flex: 1; min-width: 0; }
.garage-dash-title { font-size: 0.84rem; font-weight: 800; letter-spacing: 0.01em; }
.garage-dash-meta { font-size: 0.68rem; opacity: 0.9; margin-top: 2px; font-weight: 600; }
.garage-dash-go {
  background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px; padding: 7px 12px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  cursor: pointer;
}

/* Timeline */
.garage-timeline { display: flex; flex-direction: column; gap: 10px; }
.gt-event {
  display: flex; gap: 10px; padding: 10px 12px;
  background: var(--bg2); border-radius: 8px;
  border-left: 3px solid #1A3FA6;
}
.gt-event.gt-handoff { border-left-color: #059669; }
.gt-event.gt-removed { border-left-color: #DC2626; }
.gt-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; margin-top: 4px;
}
.gt-title { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.gt-meta  { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }

/* Chat vehicle detail sheet */
.cvs-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.cvs-title { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.cvs-status {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.cvs-status.green { background: #D1FAE5; color: #065F46; }
.cvs-status.red   { background: #FEE2E2; color: #991B1B; }

.cvs-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  padding: 12px; background: var(--bg2); border-radius: 10px;
  margin-bottom: 14px; font-size: 0.78rem;
}
.cvs-meta > div { display: flex; flex-direction: column; gap: 2px; }
.cvs-label {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.cvs-meta code {
  font-family: 'SF Mono', Menlo, monospace; background: var(--bg);
  padding: 1px 5px; border-radius: 4px; font-size: 0.72rem;
}

.cvs-actions { display: flex; flex-direction: column; gap: 8px; }
.cvs-action {
  width: 100%; padding: 12px 14px; font-size: 0.84rem; font-weight: 700;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; text-align: left; transition: all 0.15s;
}
.cvs-action:hover:not(:disabled) { border-color: #1A3FA6; background: #EFF4FF; color: #1A3FA6; }
.cvs-action:disabled { opacity: 0.5; cursor: not-allowed; }
.cvs-action.cvs-mgr {
  background: #FFFBEB; border-color: #F59E0B; color: #92400E;
}
.cvs-action.cvs-mgr:hover { background: #F59E0B; color: #fff; border-color: #F59E0B; }