:root {
  --bg:#080b10;--bg2:#0d1117;--surface:#111520;--surface2:#161b27;--surface3:#1c2233;
  --border:#1f2840;--border2:#2a3550;
  --cyan:#00d4ff;--cyan-dim:rgba(0,212,255,0.12);--cyan-glow:rgba(0,212,255,0.35);
  --green:#00ff88;--green-dim:rgba(0,255,136,0.12);
  --gold:#ffd700;--gold-dim:rgba(255,215,0,0.12);
  --red:#ff3d5a;--red-dim:rgba(255,61,90,0.12);
  --orange:#ff8c00;--purple:#a855f7;
  --text:#e8eef8;--text-muted:#6b7fa3;--text-dim:#3a4560;
  --tl-green:#22c55e;--tl-amber:#f59e0b;--tl-red:#ef4444;
}

/* ── LIGHT MODE — Burnt Clay (Palette 2) ────────────── */
body.light-mode {
  --bg:#f6f3ef;--bg2:#ede8e2;--surface:#ffffff;--surface2:#f0ebe4;--surface3:#e8e2da;
  --border:#d5cdc5;--border2:#c8beb4;
  --cyan:#b84a00;--cyan-dim:rgba(184,74,0,0.1);--cyan-glow:rgba(184,74,0,0.25);
  --green:#3a7050;--green-dim:rgba(58,112,80,0.1);
  --gold:#805800;--gold-dim:rgba(128,88,0,0.1);
  --red:#c02000;--red-dim:rgba(192,32,0,0.1);
  --orange:#b84a00;--purple:#5a3a8a;
  --text:#1e1a14;--text-muted:#806858;--text-dim:#c0b0a0;
  --tl-green:#2e7a50;--tl-amber:#c07800;--tl-red:#c02000;
}
body.light-mode .sidebar { background:#ffffff; border-right:1px solid var(--border); }
body.light-mode .topbar  { background:#ffffff; border-bottom:1px solid var(--border); }
body.light-mode .card    { background:#ffffff; }
body.light-mode .modal   { background:#ffffff; }

/* ── TECH MODE DARK OVERRIDE ─────────────────────────────────────────────────
   When body.tv-mode is active (job detail screen opened from tech view),
   force ALL styles back to dark regardless of light-mode being active.
   These rules must come AFTER the light-mode rules to win specificity.       */

/* Re-declare dark CSS variables on body when in tv-mode */
body.tv-mode,
body.light-mode.tv-mode {
  --bg:#060810!important;--bg2:#0a0d14!important;
  --surface:#0f1420!important;--surface2:#141b2d!important;--surface3:#1a2540!important;
  --border:#1e2a40!important;--border2:#243050!important;
  --cyan:#00d4ff!important;--cyan-dim:rgba(0,212,255,0.12)!important;--cyan-glow:rgba(0,212,255,0.3)!important;
  --green:#00ff88!important;--green-dim:rgba(0,255,136,0.12)!important;
  --gold:#ffd700!important;--gold-dim:rgba(255,215,0,0.12)!important;
  --red:#ff3d5a!important;--red-dim:rgba(255,61,90,0.12)!important;
  --orange:#ff6b35!important;--purple:#c084fc!important;
  --text:#e2e8f0!important;--text-muted:#6b7fa3!important;--text-dim:#2a3550!important;
  --tl-green:#00ff88!important;--tl-amber:#ffd700!important;--tl-red:#ff3d5a!important;
  background-color:#060810!important;
  color:#e2e8f0!important;
}

/* All elements inside tv-mode body */
body.tv-mode .card,
body.tv-mode .main,
body.tv-mode #job-detail-content,
body.tv-mode .content { background:var(--bg)!important; color:var(--text)!important; }

body.tv-mode .card { background:var(--surface)!important; border-color:var(--border)!important; }

/* Inputs / textareas / selects */
body.tv-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.tv-mode textarea,
body.tv-mode select {
  background:var(--surface2)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
body.tv-mode .jd-input { background:var(--surface2)!important; color:var(--text)!important; border-color:var(--border)!important; }
body.tv-mode .plate    { background:var(--surface2)!important; border-color:var(--border)!important; color:var(--text)!important; }

/* Topbar in tv-mode */
body.tv-mode .topbar { background:var(--surface)!important; border-bottom-color:var(--border)!important; }
body.tv-mode #tv-job-title { color:var(--text)!important; }

/* Section headers / cards in job detail */
body.tv-mode .jd-section,
body.tv-mode [style*="background:var(--surface)"],
body.tv-mode [style*="background:var(--surface2)"] { background:var(--surface)!important; }

/* Buttons */
body.tv-mode .btn-ghost { color:var(--text-muted)!important; border-color:var(--border)!important; }

/* All modals opened in tv-mode must be dark */
body.tv-mode .modal-overlay { background:rgba(0,0,0,0.75)!important; }
body.tv-mode .modal { background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; }
body.tv-mode .modal-header { background:var(--surface2)!important; border-bottom-color:var(--border)!important; }
body.tv-mode .modal-body   { background:var(--surface)!important; color:var(--text)!important; }
body.tv-mode .modal-footer { background:var(--surface2)!important; border-top-color:var(--border)!important; }
body.tv-mode .modal-title  { color:var(--text)!important; }
body.tv-mode .modal-close  { color:var(--text-muted)!important; }
body.tv-mode .modal label  { color:var(--text-muted)!important; }
body.tv-mode .modal .btn-ghost { color:var(--text-muted)!important; border-color:var(--border)!important; }
body.tv-mode .modal input:not([type="checkbox"]):not([type="radio"]),
body.tv-mode .modal textarea,
body.tv-mode .modal select { background:var(--surface2)!important; color:var(--text)!important; border-color:var(--border)!important; }
body.tv-mode #modal-content-generic { background:var(--surface)!important; color:var(--text)!important; }

/* ── TECHVIEW OVERLAY (tech job list screen) always dark ── */
.techview-overlay { background:#060810!important; color:#e2e8f0!important; }
.techview-shell   { background:#0a0d14!important; }
.tv-topbar  { background:#0d1117!important; border-bottom-color:rgba(0,212,255,0.2)!important; }
.tv-user-bar{ background:#0d1117!important; }
.tv-body    { background:#060810!important; }
.tv-job     { background:#141b2d!important; }
.tv-job-request { background:rgba(255,215,0,0.04)!important; }
.techview-overlay input,
.techview-overlay textarea { background:rgba(0,0,0,0.3)!important; color:#e2e8f0!important; border-color:rgba(255,255,255,0.12)!important; }
@keyframes tvShake {
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)}
  60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
}

/* light-mode overrides that must NOT apply in tv-mode */
body.light-mode.tv-mode input:not([type="checkbox"]):not([type="radio"]),
body.light-mode.tv-mode textarea,
body.light-mode.tv-mode select { background:var(--surface2)!important; color:var(--text)!important; border-color:var(--border)!important; }
body.light-mode.tv-mode .jd-input  { background:var(--surface2)!important; }
body.light-mode.tv-mode .plate     { background:var(--surface2)!important; border-color:var(--border)!important; color:var(--text)!important; }
body.light-mode.tv-mode .btn-ghost { color:var(--text-muted)!important; border-color:var(--border)!important; }
body.light-mode.tv-mode .card      { background:var(--surface)!important; border-color:var(--border)!important; }
body.light-mode.tv-mode .insp-item { background:var(--surface2)!important; }
body.light-mode.tv-mode .tv-job-card { background:var(--surface2)!important; }
body.light-mode input, body.light-mode textarea, body.light-mode select {
  background:#f0ebe4; color:var(--text); border-color:var(--border);
}
body.light-mode .nav-item        { color:var(--text-muted); }
body.light-mode .nav-item.active { background:rgba(184,74,0,0.08); color:var(--cyan); }
body.light-mode .nav-item:hover  { background:rgba(184,74,0,0.05); }
body.light-mode .jd-input        { background:#f0ebe4; }
body.light-mode .btn-ghost       { color:var(--text-muted); border-color:var(--border); }
body.light-mode .plate           { background:#f0ebe4; border-color:var(--border); color:var(--text); }
body.light-mode .insp-item       { background:#f0ebe4; border-color:var(--border); }
body.light-mode .tv-job-card     { background:#ffffff; }

/* ── URBAN ORANGE — Dark theme (Palette 2) ──────────── */
body.theme-orange {
  --bg:#0b1014;--bg2:#0f1620;--surface:#0f1822;--surface2:#131c28;--surface3:#1a2535;
  --border:#1e2e3e;--border2:#2e3e4b;
  --cyan:#ee690b;--cyan-dim:rgba(238,105,11,0.12);--cyan-glow:rgba(238,105,11,0.3);
  --green:#7ab090;--green-dim:rgba(122,176,144,0.12);
  --gold:#bbd3eb;--gold-dim:rgba(187,211,235,0.12);
  --red:#c05030;--red-dim:rgba(192,80,48,0.12);
  --orange:#ee690b;--purple:#8060b0;
  --text:#bbd3eb;--text-muted:#5a7080;--text-dim:#1e2e3e;
  --tl-green:#5a9870;--tl-amber:#d07020;--tl-red:#c04020;
}

/* ── BURNT CLAY — Urban Orange light mode ───────────── */
body.theme-orange.light-mode {
  --bg:#f6f3ef;--bg2:#ede8e2;--surface:#ffffff;--surface2:#f0ebe4;--surface3:#e8e2da;
  --border:#d5cdc5;--border2:#c8beb4;
  --cyan:#b84a00;--cyan-dim:rgba(184,74,0,0.1);--cyan-glow:rgba(184,74,0,0.25);
  --green:#3a7050;--green-dim:rgba(58,112,80,0.1);
  --gold:#005080;--gold-dim:rgba(0,80,128,0.1);
  --red:#c02000;--red-dim:rgba(192,32,0,0.1);
  --orange:#b84a00;--purple:#5a3a8a;
  --text:#1e1a14;--text-muted:#806858;--text-dim:#c0b0a0;
  --tl-green:#2e7a50;--tl-amber:#c07800;--tl-red:#c02000;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{font-family:'Exo 2',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;overflow:hidden;height:100vh;font-size:15px;}
body::before{display:none;}

/* SIDEBAR */
.sidebar{width:220px;min-width:220px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative;overflow:hidden;}
.sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);}
.logo{padding:18px 18px 14px;border-bottom:1px solid var(--border);}
.logo-mark{display:flex;align-items:center;gap:9px;margin-bottom:3px;}
.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--cyan),#0088ff);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 16px var(--cyan-glow);}
.logo-text{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.logo-text span{color:var(--cyan);}
.logo-sub{font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);padding-left:41px;}

/* PROFIT WIDGET */
.pw{margin:12px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:10px 12px;position:relative;overflow:hidden;}
.pw::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--cyan));}
.pw-lbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px;}
.pw-val{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;color:var(--green);text-shadow:0 0 16px rgba(0,255,136,0.4);line-height:1;}
.pw-val.neg{color:var(--red);text-shadow:0 0 16px rgba(255,61,90,0.4);}
.pw-sub{font-size:11px;color:var(--text-muted);margin-top:1px;}
.pw-bar-wrap{margin-top:6px;height:3px;background:var(--surface3);border-radius:2px;overflow:hidden;}
.pw-bar{height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:2px;transition:width .5s;}
.pw-bar.neg{background:linear-gradient(90deg,var(--red),var(--orange));}

/* NAV */
.nav{flex:1;padding:12px 0;overflow-y:auto;min-height:0;}
.nav-section{padding:8px 18px 3px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);font-weight:700;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 18px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-muted);transition:all .15s;border-left:2px solid transparent;}
.nav-item:hover{color:var(--text);background:var(--surface2);}
.nav-item.active{color:var(--cyan);background:rgba(0,212,255,0.06);border-left-color:var(--cyan);}
.nav-item .ni{font-size:15px;width:18px;text-align:center;}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center;}
.sb-footer{padding:12px 18px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);}

/* Mobile bottom nav */
#mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:950;background:var(--surface);border-top:1px solid var(--border);height:60px;align-items:stretch;padding-bottom:env(safe-area-inset-bottom,0px);}
#mobile-nav .mn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);cursor:pointer;border:none;background:none;padding:4px 2px;border-top:2px solid transparent;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
#mobile-nav .mn-item .mn-icon{font-size:22px;line-height:1.1;}
#mobile-nav .mn-item.active{color:var(--cyan);border-top-color:var(--cyan);background:rgba(0,212,255,0.07);}


/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;height:100vh;}
.topbar{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:14px;position:relative;}
.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-dim),transparent);}
.page-title{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.topbar-right{display:flex;gap:8px;align-items:center;}

/* BUTTONS */
.btn{padding:8px 18px;border:none;border-radius:5px;font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.5px;text-transform:uppercase;}
.btn-cyan{background:linear-gradient(135deg,var(--cyan),#0088ff);color:#000;box-shadow:0 0 12px rgba(0,212,255,0.25);}
.btn-cyan:hover{box-shadow:0 0 20px rgba(0,212,255,0.45);transform:translateY(-1px);}
.btn-ghost{background:var(--surface2);color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border2);color:var(--text);}
.btn-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,255,136,0.3);}
.btn-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,61,90,0.3);}
.btn-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(255,215,0,0.3);}
.btn-sm{padding:6px 13px;font-size:12px;}
.btn-xs{padding:4px 9px;font-size:10px;border-radius:4px;}

/* CONTENT */
.content{flex:1;overflow-y:auto;padding:20px;min-height:0;}
.view{display:none;} .view.active{display:block;}

/* CARD */
.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:16px;}
.card-header{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card-title{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;}
.card-title.glow{color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);}

/* TABLES */
table{width:100%;border-collapse:collapse;}
th{text-align:left;padding:9px 14px;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);font-weight:600;background:var(--surface2);border-bottom:1px solid var(--border);}
td{padding:11px 14px;font-size:14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:rgba(255,255,255,0.015);}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
.b-service{background:rgba(100,116,139,0.2);color:#94a3b8;border:1px solid rgba(100,116,139,0.3);}
.b-repair{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.3);}
.b-diag{background:rgba(168,85,247,0.15);color:#c084fc;border:1px solid rgba(168,85,247,0.3);}
.b-major{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3);}
.b-wait{background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.2);}
.b-approval{background:rgba(249,115,22,0.12);color:var(--orange);border:1px solid rgba(249,115,22,0.3);}
.b-quote-needed{background:rgba(255,215,0,0.12);color:var(--gold);border:1px solid rgba(255,215,0,0.3);}
.b-advisor{background:rgba(52,211,153,0.12);color:#34d399;border:1px solid rgba(52,211,153,0.3);}
/* Tech mode — hide sidebar, profit panel, advisor-only controls */
body.tv-mode .sidebar{display:none!important;}
body.tv-mode{background:#060810;justify-content:center;}
body.tv-mode .main{max-width:900px;width:100%;}
body.tv-mode.tv-insp .main{max-width:100%!important;box-shadow:none!important;}
@media(min-width:720px){body.tv-mode .main{box-shadow:0 0 0 1px rgba(0,212,255,0.12),0 0 60px rgba(0,0,0,0.8);}}

/* In tech mode, hide the advisor cancel/delete buttons but keep topbar visible */
body.tv-mode .btn-red{display:none!important;}
body.tv-mode .jd-finalise-btn{display:none!important;}
body.tv-mode #jd-status{pointer-events:none!important;opacity:.6;}
body.tv-mode #jd-tech{pointer-events:none!important;opacity:.6;}
body.tv-mode .jd-additional-flag{display:none!important;}
/* Hide all pricing from tech */
body.tv-mode .jd-section-total{display:none!important;}
body.tv-mode .jd-totals-bar{display:none!important;}
body.tv-mode #jd-labour-total{display:none!important;}
body.tv-mode #jd-parts-total{display:none!important;}
/* Hide rate/price columns in labour and parts grids */
body.tv-mode .jd-line-cols{display:none!important;}
/* Make notes textarea read-only in tech mode */
body.tv-mode #jd-notes{pointer-events:none!important;opacity:.7;border-color:var(--border)!important;}
/* Hide the Additional Work Quote builder button */
body.tv-mode [onclick*="openAdditionalQuote"]{display:none!important;}
/* Hide adviser-only section buttons */
body.tv-mode .btn-ghost[onclick*="printJobCard"]{display:none!important;}
body.tv-mode .btn-ghost[onclick*="saveJobDetail"]{display:none!important;}
body.tv-mode .btn-gold[onclick*="convertJobToQuote"]{display:none!important;}
body.tv-mode .btn-sm[onclick*="openRaisePOModal"]{display:none!important;}
/* Hide cost/price inputs inside labour and parts lines */
/* Hide rate and total columns in labour lines grid */
body.tv-mode .jd-line-cols > div:nth-child(3),
body.tv-mode .jd-line-cols > div:nth-child(4),
body.tv-mode #jd-labour-lines input[type="number"][step="5"],
body.tv-mode #jd-labour-lines [id^="lt-"],
body.tv-mode #jd-parts-lines [style*="color:var(--purple)"],
body.tv-mode #jd-parts-lines input[placeholder="Sell $"],
body.tv-mode #jd-parts-lines input[data-role="sell"],
body.tv-mode .doc-actions button[onclick*="print"],
body.tv-mode .doc-actions button[onclick*="save"]{display:none!important;}
body.tv-mode .jd-rate-input{display:none!important;}
body.tv-mode input[placeholder*="$/hr"],
body.tv-mode input[placeholder*="Rate"],
body.tv-mode input[title*="rate"],
body.tv-mode input[title*="Labour rate"]{display:none!important;}
/* ── TECH MODE: lock down all editable fields ── */
/* Hide + Add buttons */
body.tv-mode [onclick*="openLabourPopup"],
body.tv-mode [onclick*="openPartsPopup"],
body.tv-mode [onclick*="openConsPopup"],
body.tv-mode select#jd-labour-preset,
body.tv-mode select[id*="labour-preset"],
body.tv-mode .jd-col-lbl{display:none!important;}
/* Hide delete buttons */
body.tv-mode .jd-del{display:none!important;}
/* Hide expand/edit button on parts lines */
body.tv-mode #jd-parts-lines [title="Edit details"]{display:none!important;}
/* Hide sell price and total columns in parts */
body.tv-mode .part-coll-sell{display:none!important;}
body.tv-mode #jd-parts-lines [id^="lt-"]{display:none!important;}
/* Hide the expand row entirely */
body.tv-mode .part-expanded{display:none!important;}
/* Hide labour rate input and total */
body.tv-mode .jd-rate-input{display:none!important;}
body.tv-mode #jd-labour-lines [id^="lt-"]{display:none!important;}
/* Make qty inputs read-only in tech mode — but NOT the tech note textarea/input */
body.tv-mode #jd-labour-lines input:not([placeholder*="Tech note"]):not([placeholder*="internal"]),
body.tv-mode #jd-parts-lines input[data-pf="qty"]{pointer-events:none!important;background:transparent!important;border-color:rgba(255,255,255,0.1)!important;}
/* Tech note textarea — always editable in tech mode */
body.tv-mode #jd-labour-lines textarea{pointer-events:auto!important;}
/* Labour grid in tech mode — show description and hours only (hide rate/total) */
body.tv-mode .line-row.labour-line{grid-template-columns:1fr 70px 28px!important;}
/* Parts grid in tech mode — show part#, description, qty only */
body.tv-mode .line-row.parts-line{grid-template-columns:90px 1fr 70px 28px!important;}
/* Consumables — hide qty, price and total columns + delete */
body.tv-mode #jd-cons-lines input[type="number"],
body.tv-mode #jd-cons-lines .jd-line-total,
body.tv-mode #jd-cons-lines [class*="lt-"],
body.tv-mode #jd-cons-lines [id^="lt-"],
body.tv-mode #jd-cons-lines [onclick*="remove"],
body.tv-mode #jd-cons-lines .jd-del{display:none!important;}
/* Hide labour line total spans too */
body.tv-mode #jd-labour-lines .jd-line-total{display:none!important;}
/* Hide section totals */
body.tv-mode .jd-section-total{display:none!important;}
body.tv-mode .jd-totals-bar{display:none!important;}
/* Hide Repair Request textarea (shown in tech header instead) */
body.tv-mode #jd-notes,
body.tv-mode [for="jd-notes"],
body.tv-mode label[style*="Repair Request"]{display:none!important;}
.b-parts{background:rgba(168,85,247,0.15);color:#c084fc;border:1px solid rgba(168,85,247,0.35);}
.b-prog{background:rgba(0,212,255,0.12);color:var(--cyan);border:1px solid rgba(0,212,255,0.3);}
.b-done{background:rgba(0,255,136,0.12);color:var(--green);border:1px solid rgba(0,255,136,0.3);}
.b-comeback{background:rgba(255,61,90,0.15);color:var(--red);border:1px solid rgba(255,61,90,0.3);}

.plate{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;background:var(--surface2);border:1px solid var(--border);padding:3px 8px;border-radius:3px;}

/* FILTER ROW */
.filter-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.search-bar{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:7px 13px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:14px;width:220px;outline:none;}
.search-bar:focus{border-color:var(--cyan);}
.filter-btn{padding:6px 13px;border-radius:5px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);transition:all .15s;text-transform:uppercase;letter-spacing:.4px;font-family:'Exo 2',sans-serif;}
.filter-btn.active,.filter-btn:hover{background:var(--cyan-dim);color:var(--cyan);border-color:rgba(0,212,255,0.4);}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center;padding:80px;}
.modal-overlay.priority{z-index:500;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:10px;width:700px;max-width:97vw;max-height:93vh;overflow-y:auto;animation:mIn .2s ease;position:relative;}
.modal.wide{width:900px;}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);}
@keyframes mIn{from{opacity:0;transform:translateY(-20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-family:'Rajdhani',sans-serif;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--cyan);}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:2px 5px;border-radius:4px;transition:all .1s;}
.modal-close:hover{color:var(--text);background:var(--surface2);}
.modal-body{padding:20px;}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;align-items:center;}
.modal-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 20px;}
.modal-tab{padding:11px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;transition:all .15s;font-family:'Exo 2',sans-serif;}
.modal-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);}
.modal-tab-content{display:none;padding:20px;}
.modal-tab-content.active{display:block;}

/* FORM */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fg3{grid-template-columns:repeat(3,minmax(160px,1fr));}
.fg1{grid-template-columns:1fr;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group.span2{grid-column:span 2;}
.form-group.span3{grid-column:span 3;}
label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);font-weight:600;}
input,select,textarea{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:8px 11px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:14px;transition:border .15s;outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,212,255,0.08);}
textarea{resize:vertical;min-height:60px;}
select option{background:var(--surface2);}
input[readonly]{opacity:.55;cursor:default;}

/* ITEMISED LINES */
.lines-section{margin-top:4px;}
.lines-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.lines-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
.line-row{display:grid;gap:8px;align-items:center;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;margin-bottom:7px;position:relative;}
.line-row.labour-line{grid-template-columns:2fr 1fr 1fr 80px 28px;}
.line-row.parts-line{grid-template-columns:2fr 1fr 1fr 80px 28px;}
.line-input{background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:5px 8px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:14px;outline:none;width:100%;}
.line-input:focus{border-color:var(--cyan);}
.line-total{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:var(--cyan);text-align:right;}
.line-del{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;padding:2px;transition:color .1s;line-height:1;}
.line-del:hover{color:var(--red);}
.col-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);text-align:center;}
.lines-cols-header{display:grid;gap:8px;padding:0 10px;margin-bottom:4px;}
.lines-cols-header.labour-line{grid-template-columns:2fr 1fr 1fr 80px 28px;}
.lines-cols-header.parts-line{grid-template-columns:2fr 1fr 1fr 80px 28px;}

/* JOB TOTALS */
.job-totals{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:12px 16px;margin-top:12px;}
.totals-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;}
.tot-item{}
.tot-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);}
.tot-val{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;margin-top:2px;}

/* PLACEHOLDER_INSP */
.insp-category{margin-bottom:16px;}
.insp-cat-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:6px 6px 0 0;cursor:pointer;}
.insp-cat-icon{font-size:16px;}
.insp-cat-name{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.insp-cat-summary{margin-left:auto;display:flex;gap:6px;}
.insp-items{border:1px solid var(--border);border-top:none;border-radius:0 0 6px 6px;overflow:hidden;}
.insp-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:start;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface);}
.insp-item:last-child{border-bottom:none;}
.insp-item:hover{background:var(--surface2);}
.insp-item-name{font-size:12px;font-weight:500;margin-bottom:3px;}
.insp-item-notes{width:100%;}
.insp-notes-input{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:11px;outline:none;width:100%;margin-top:5px;resize:none;min-height:0;transition:height .2s;}
.insp-notes-input:focus{border-color:var(--cyan);}

/* TRAFFIC LIGHTS */
.tl-group{display:flex;gap:4px;align-items:center;}
.tl-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s;opacity:.3;position:relative;}
.tl-btn:hover{opacity:.7;transform:scale(1.1);}
.tl-btn.active{opacity:1;transform:scale(1.15);box-shadow:0 0 10px currentColor;}
.tl-green{background:var(--tl-green);color:var(--tl-green);}
.tl-green.active{border-color:var(--tl-green);}
.tl-amber{background:var(--tl-amber);color:var(--tl-amber);}
.tl-amber.active{border-color:var(--tl-amber);}
.tl-red{background:var(--tl-red);color:var(--tl-red);}
.tl-red.active{border-color:var(--tl-red);}

/* PASS/FAIL */
.pf-group{display:flex;gap:4px;align-items:center;}
.pf-btn{padding:3px 8px;border-radius:4px;border:1px solid;font-size:9px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .15s;background:transparent;}
.pf-pass{border-color:rgba(34,197,94,0.4);color:rgba(34,197,94,0.5);}
.pf-pass.active{background:rgba(34,197,94,0.15);color:var(--tl-green);border-color:var(--tl-green);}
.pf-fail{border-color:rgba(239,68,68,0.4);color:rgba(239,68,68,0.5);}
.pf-fail.active{background:rgba(239,68,68,0.15);color:var(--tl-red);border-color:var(--tl-red);}
.pf-na{border-color:rgba(107,127,163,0.4);color:rgba(107,127,163,0.5);}
.pf-na.active{background:rgba(107,127,163,0.15);color:var(--text-muted);border-color:var(--text-muted);}

/* CUSTOMER CARD */
.cust-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .2s;}
.cust-card:hover{border-color:var(--border2);}
.cust-card-header{padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);}
.cust-avatar{width:40px;height:40px;border-radius:50%;background:var(--cyan-dim);border:2px solid rgba(0,212,255,0.3);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;color:var(--cyan);flex-shrink:0;}
.cust-name{font-weight:700;font-size:15px;font-family:'Rajdhani',sans-serif;}
.cust-phone{font-size:13px;color:var(--text-muted);}
.cust-stats{display:flex;gap:0;border-top:1px solid var(--border);}
.cust-stat{flex:1;padding:8px 12px;text-align:center;border-right:1px solid var(--border);}
.cust-stat:last-child{border-right:none;}
.cust-stat-val{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--cyan);}
.cust-stat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);}
.cust-actions{padding:10px 14px;display:flex;gap:6px;border-top:1px solid var(--border);}
.custs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}

/* VEH LIST */
.veh-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);transition:background .1s;}
.veh-row:last-child{border-bottom:none;}
.veh-row:hover{background:var(--surface2);}
.veh-plate-big{font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;background:var(--surface2);border:1px solid var(--border);padding:4px 10px;border-radius:4px;min-width:86px;text-align:center;}
.veh-info{flex:1;}
.veh-make{font-weight:600;font-size:14px;}
.veh-sub{font-size:12px;color:var(--text-muted);}
.veh-owner-badge{font-size:12px;color:var(--text-muted);background:var(--surface2);border:1px solid var(--border);padding:3px 9px;border-radius:10px;}

/* INSPECTION LIST */
.insp-list-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.insp-list-row:hover{background:var(--surface2);}
.insp-list-row:last-child{border-bottom:none;}
.tl-dot{width:10px;height:10px;border-radius:50%;}
.insp-score-bar{display:flex;gap:2px;}
.insp-score-seg{width:10px;height:10px;border-radius:2px;}

/* EMPTY */
.empty-state{text-align:center;padding:50px 20px;color:var(--text-dim);}
.empty-state .ei{font-size:36px;margin-bottom:8px;opacity:.25;}
.empty-state .et{font-size:14px;}

/* ACTION BTNS */
.action-btns{display:flex;gap:4px;}
.btn-icon{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:11px;color:var(--text-muted);transition:all .15s;}
.btn-icon:hover{border-color:var(--border2);color:var(--text);}

/* DASHBOARD GRIDS */
.dash-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px;}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;position:relative;overflow:hidden;}
.kpi-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.kpi-rev::after{background:linear-gradient(90deg,var(--green),var(--cyan));}
.kpi-exp::after{background:linear-gradient(90deg,var(--red),var(--orange));}
.kpi-pro::after{background:linear-gradient(90deg,var(--gold),var(--orange));}
.kpi-job::after{background:linear-gradient(90deg,var(--cyan),var(--purple));}

.kpi-lbl{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;}
.kpi-val{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;line-height:1;}
.kpi-sub{font-size:9px;color:var(--text-dim);margin-top:2px;}
.dash-grid{display:grid;grid-template-columns:1fr 1fr 280px;gap:14px;}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--surface2);border:1px solid var(--border2);border-left:3px solid var(--cyan);border-radius:6px;padding:11px 18px;font-size:13px;font-weight:500;z-index:1000;transform:translateY(70px);opacity:0;transition:all .3s;max-width:300px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.warn{border-left-color:var(--red);}
.toast.success{border-left-color:var(--green);}

/* FINALISATION */
.jd-locked-banner{background:rgba(0,255,136,0.08);border:1px solid rgba(0,255,136,0.25);border-radius:6px;padding:10px 16px;display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.jd-locked-banner .lock-icon{font-size:20px;}
.jd-locked-banner .lock-text{flex:1;font-size:12px;color:var(--green);}
.jd-locked-banner .lock-date{font-size:10px;color:var(--text-dim);}
.inv-finalised-stamp{display:inline-block;border:3px solid #16a34a;color:#16a34a;padding:6px 18px;font-size:20px;font-weight:900;font-family:'Rajdhani',sans-serif;letter-spacing:3px;text-transform:uppercase;transform:rotate(-8deg);position:absolute;top:20px;right:30px;opacity:.7;border-radius:4px;}

/* FINALISE MODAL */
.fin-section{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:14px 16px;margin-bottom:14px;}
.fin-section-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#64748b;font-weight:700;margin-bottom:10px;}
.fin-total-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:#334155;border-bottom:1px solid #e2e8f0;}
.fin-total-row:last-child{border-bottom:none;}
.fin-total-grand{font-weight:800;font-size:16px;padding-top:8px;border-top:2px solid #334155;margin-top:4px;}
.sms-preview{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:12px;color:var(--text);line-height:1.5;margin-top:8px;position:relative;}
.sms-bubble{background:#1a8cff;color:#fff;border-radius:18px 18px 4px 18px;padding:10px 14px;font-size:13px;line-height:1.5;display:inline-block;max-width:85%;}

/* PIN modal */
.pin-dots{display:flex;gap:10px;justify-content:center;margin:16px 0;}
.pin-dot{width:14px;height:14px;border-radius:50%;background:var(--border);border:2px solid var(--border2);transition:all .15s;}
.pin-dot.filled{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:220px;margin:0 auto;}
.pin-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px;font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;cursor:pointer;color:var(--text);transition:all .15s;text-align:center;}
.pin-btn:hover{background:var(--surface3);border-color:var(--border2);}
.pin-btn:active{transform:scale(.95);}

/* GLOBAL SEARCH */
#global-search:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,212,255,0.1);}
.gs-section-lbl{padding:5px 12px;font-size:8px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);background:var(--surface2);border-bottom:1px solid var(--border);font-weight:600;}
.gs-row{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;}
.gs-row:last-child{border-bottom:none;}
.gs-row:hover{background:var(--surface2);}
.gs-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;flex-shrink:0;}
.gs-no-results{padding:16px;text-align:center;font-size:12px;color:var(--text-dim);}

/* DIARY REVAMP */
.diary-block-slim{padding:3px 6px;border-radius:3px;margin:2px 3px;font-size:10px;font-weight:700;cursor:pointer;border-left:3px solid;transition:opacity .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.diary-block-slim:hover{opacity:.75;}
/* Damage picker accent cards */
.snd-card{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;border:2px solid var(--border2);background:var(--surface2);cursor:pointer;transition:all .15s;margin-bottom:6px;}
.snd-card:hover{border-color:var(--border2);background:var(--surface3);}
.snd-card.selected{border-color:var(--cyan);background:rgba(0,212,255,0.08);}
.snd-card.selected .snd-card-icon{color:var(--cyan);}
.snd-card.selected .snd-card-label{color:var(--cyan);}
.snd-card-icon{font-size:22px;min-width:28px;text-align:center;}
.snd-card-label{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:var(--text);letter-spacing:.5px;}
.snd-card-desc{font-size:11px;color:var(--text-muted);margin-top:1px;}
.snd-card .snd-check{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:all .15s;}
.snd-card.selected .snd-check{border-color:var(--cyan);background:var(--cyan);color:#000;}
/* Photo upload strip */
.snd-photo-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.snd-photo-thumb{width:60px;height:60px;border-radius:6px;object-fit:cover;border:1px solid var(--border2);cursor:pointer;}
.snd-photo-add{width:60px;height:60px;border-radius:6px;border:2px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;color:var(--text-dim);transition:all .15s;}
.snd-photo-add:hover{border-color:var(--cyan);color:var(--cyan);}
.diary-day-col.selected-day .diary-day-header{background:rgba(0,212,255,0.1);border-bottom:2px solid var(--cyan);}
.dl-section{margin-bottom:14px;}
.dl-section-header{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:6px 6px 0 0;border-bottom:none;}
.dl-section-date{font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;color:var(--cyan);}
.dl-section-meta{font-size:12px;color:var(--text-muted);}
.dl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-top:none;background:var(--surface);cursor:pointer;transition:background .1s;}
.dl-row:last-child{border-radius:0 0 6px 6px;}
.dl-row:hover{background:var(--surface2);}
.dl-time{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--text-muted);min-width:48px;}
.dl-plate{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;background:var(--surface2);border:1px solid var(--border);padding:3px 8px;border-radius:3px;}
.dl-cust{font-weight:600;font-size:14px;}
.dl-sub{font-size:13px;color:var(--text-muted);margin-top:3px;font-weight:500;}
.dl-type-pill{padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
.dl-tech{font-size:10px;color:var(--text-dim);}
.dl-status{margin-left:auto;}
.dl-actions{display:flex;gap:5px;margin-left:8px;}

/* BOOKING SEARCH */
.bk-result-row{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;}
.bk-result-row:last-child{border-bottom:none;}
.bk-result-row:hover{background:var(--surface2);}
.bk-result-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;flex-shrink:0;}
.bk-veh-option{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .15s;background:var(--surface2);}
.bk-veh-option:hover{border-color:var(--cyan);background:var(--cyan-dim);}
.bk-veh-option.selected{border-color:var(--cyan);background:var(--cyan-dim);}
.bk-no-results{padding:20px;text-align:center;color:var(--text-dim);font-size:12px;}

/* QUOTE PAGE */
.quote-banner{background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(168,85,247,0.08));border:1px solid var(--border2);border-radius:8px;padding:16px 22px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;position:relative;overflow:hidden;}
.quote-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--purple));}
.quote-id{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;}
.quote-status-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.qs-draft{background:rgba(107,127,163,0.15);color:var(--text-muted);border:1px solid var(--border2);}
.qs-quoted{background:rgba(245,158,11,0.15);color:var(--gold);border:1px solid rgba(245,158,11,0.3);}
.qs-accepted{background:rgba(0,255,136,0.15);color:var(--green);border:1px solid rgba(0,255,136,0.3);}

/* ── UNIFIED DOCUMENT HEADER (Quote / Job Card / Invoice) ── */
.doc-header{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;position:relative;}
.doc-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--purple));}
.doc-header.locked::before{background:linear-gradient(90deg,var(--green),#00ffcc);}
.doc-header-top{padding:18px 22px 14px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.doc-header-left{flex:1;min-width:0;}
.doc-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.doc-id{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:var(--text-dim);letter-spacing:1px;}
.doc-plate{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:800;letter-spacing:2px;background:var(--surface2);border:2px solid var(--border2);padding:4px 14px;border-radius:6px;cursor:pointer;color:var(--text);line-height:1.2;display:inline-block;}
.doc-id{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);font-weight:700;}
.doc-vehicle{font-size:16px;font-weight:600;color:#c8d8f0;margin-top:3px;}
.doc-customer{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;color:var(--cyan);cursor:pointer;line-height:1;}
.doc-vehicle{font-size:14px;font-weight:600;color:#c8d8f0;margin-top:3px;}
.doc-veh-strip{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:10px 14px;background:var(--surface2);border-radius:6px;border:1px solid var(--border);margin-top:10px;}
.doc-bill-to{margin-top:10px;padding:10px 14px;background:rgba(168,85,247,0.04);border:1px solid rgba(168,85,247,0.35);border-radius:6px;}
.doc-bill-to-label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;color:#c084fc;margin-bottom:4px;}
.doc-bill-to-main{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.doc-bill-to-sub{font-size:11px;color:var(--text-muted);line-height:1.5;}
.doc-bill-to-note{font-size:10px;color:var(--text-dim);margin-top:4px;font-style:italic;}
.doc-veh-strip-item{display:flex;flex-direction:column;gap:2px;}
.doc-veh-strip-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;}
.doc-veh-strip-val{font-size:15px;font-weight:700;color:#c8d8f0;}
.doc-controls{padding:10px 22px 0;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.doc-controls label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;}
.doc-controls select,.doc-controls input[type=date]{background:var(--surface2);border:1px solid var(--border2);border-radius:4px;padding:5px 9px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:13px;font-weight:600;outline:none;}
.doc-actions{padding:12px 22px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--border);margin-top:10px;}
.jd-totals-bar{display:none;}

/* VEHICLE DETAIL */
.vd-header{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin-bottom:14px;position:relative;overflow:hidden;}
.vd-header::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--orange),var(--gold));}
.vd-plate{font-family:'Rajdhani',sans-serif;font-size:32px;font-weight:800;letter-spacing:2px;background:var(--surface2);border:2px solid var(--border2);padding:6px 16px;border-radius:6px;display:inline-block;}
.vd-title{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;margin-top:8px;}
.vd-kpis{display:flex;gap:0;margin-top:14px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.vd-kpi{flex:1;padding:10px 14px;text-align:center;border-right:1px solid var(--border);}
.vd-kpi:last-child{border-right:none;}
.vd-kpi-val{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;}
.vd-kpi-lbl{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-top:1px;}
.rego-expired{color:var(--red);}
.rego-soon{color:var(--gold);}
.rego-ok{color:var(--green);}

/* CUSTOMER DETAIL PAGE */
.cd-header{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin-bottom:14px;position:relative;overflow:hidden;}
.cd-header::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--green));}
.cd-avatar{width:56px;height:56px;border-radius:50%;background:var(--cyan-dim);border:2px solid rgba(0,212,255,0.4);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:var(--cyan);flex-shrink:0;}
.cd-company-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:10px;font-size:10px;font-weight:700;background:rgba(168,85,247,0.15);color:var(--purple);border:1px solid rgba(168,85,247,0.3);margin-bottom:4px;}
.cd-name{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;line-height:1;}
.cd-sub{font-size:12px;color:var(--text-muted);margin-top:3px;}
.cd-kpis{display:flex;gap:0;margin-top:14px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.cd-kpi{flex:1;padding:10px 14px;text-align:center;border-right:1px solid var(--border);}
.cd-kpi:last-child{border-right:none;}
.cd-kpi-val{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;}
.cd-kpi-lbl{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-top:1px;}
.cd-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}

/* Inline editable field */
.cd-field-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.cd-field-row:last-child{border-bottom:none;}
.cd-field-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:700;width:120px;flex-shrink:0;}
.cd-field-val{flex:1;font-size:13px;color:var(--text);cursor:pointer;padding:3px 6px;border-radius:4px;border:1px solid transparent;transition:all .15s;}
.cd-field-val:hover{background:var(--surface2);border-color:var(--border);}
.cd-field-val.editing{background:var(--surface2);border-color:var(--cyan);outline:none;cursor:text;}
.cd-field-empty{color:var(--text-dim);font-style:italic;}

.cd-section{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:14px;overflow:hidden;}
.cd-section-header{padding:11px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface2);}
.cd-section-title{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}

/* vehicle mini card */
.cd-veh-row{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border);transition:background .1s;}
.cd-veh-row:last-child{border-bottom:none;}
.cd-veh-row:hover{background:var(--surface2);}

/* job history row */
.cd-job-row{display:flex;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.cd-job-row:last-child{border-bottom:none;}
.cd-job-row:hover{background:var(--surface2);}

/* PLACEHOLDER_AR */
.arrival-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:14px;overflow:hidden;}
.arrival-header{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface2);}
.arrival-locked{background:rgba(0,255,136,0.06);border-color:rgba(0,255,136,0.2);}
.arrival-locked .arrival-header{background:rgba(0,255,136,0.08);}
.snd-diagram{position:relative;width:100%;max-width:340px;margin:0 auto;cursor:default;user-select:none;}
.snd-zone{fill:var(--surface3);stroke:var(--border2);stroke-width:1.5;cursor:pointer;transition:fill .15s;}
.snd-zone:hover{fill:rgba(0,212,255,0.15);stroke:var(--cyan);}
.snd-zone.damaged{fill:rgba(255,61,90,0.25);stroke:var(--red);stroke-width:2;}
.snd-zone.selected{fill:rgba(0,212,255,0.25);stroke:var(--cyan);stroke-width:2;}
.snd-label{font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;fill:var(--text-dim);text-anchor:middle;pointer-events:none;text-transform:uppercase;letter-spacing:.5px;}
.damage-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;background:rgba(255,61,90,0.15);color:var(--red);border:1px solid rgba(255,61,90,0.3);margin:2px;}
.snd-panel{display:flex;gap:16px;padding:16px 18px;align-items:flex-start;flex-wrap:wrap;}
.snd-detail{flex:1;min-width:220px;}


/* TECH VIEW */
/* ── TECH VIEW ── */
.techview-overlay{display:none;position:fixed;inset:0;background:#060810;z-index:800;flex-direction:column;overflow:hidden;font-family:'Exo 2',sans-serif;align-items:center;justify-content:center;}
.techview-overlay.active{display:flex;}
.techview-shell{display:flex;flex-direction:column;width:100%;height:100%;max-width:680px;background:#0a0d14;overflow:hidden;position:relative;}
@media(min-width:720px){
  .techview-shell{height:100vh;box-shadow:0 0 0 1px rgba(0,212,255,0.15),0 32px 80px rgba(0,0,0,0.8);}
}
/* Header bar */
.tv-topbar{height:56px;background:#0d1117;border-bottom:2px solid rgba(0,212,255,0.2);display:flex;align-items:center;gap:10px;padding:0 14px;flex-shrink:0;}
.tv-topbar-shop{font-family:'Rajdhani',sans-serif;font-size:clamp(12px,3.5vw,17px);font-weight:800;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.tv-topbar-time{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:var(--text);margin-left:auto;}
.tv-topbar-date{font-size:11px;color:var(--text-muted);text-align:right;line-height:1.3;}
/* Tech selector screen */
.tv-select-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
.tv-select-title{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:800;color:var(--text);letter-spacing:2px;margin-bottom:6px;}
.tv-select-sub{font-size:13px;color:var(--text-muted);margin-bottom:32px;}
.tv-tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;width:100%;max-width:700px;}
.tv-tech-card{background:#141b2d;border:2px solid var(--border);border-radius:14px;padding:22px 18px;cursor:pointer;transition:all .18s;text-align:center;-webkit-tap-highlight-color:transparent;}
.tv-tech-card:active{transform:scale(0.97);}
.tv-tech-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:800;margin:0 auto 12px;border:3px solid;}
.tv-tech-name{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--text);}
.tv-tech-role{font-size:11px;color:var(--text-muted);margin-top:2px;}
.tv-tech-jobs{font-family:'Rajdhani',sans-serif;font-size:32px;font-weight:800;margin-top:10px;}
.tv-tech-jobs-lbl{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;}
/* Main job screen */
.tv-main{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.tv-user-bar{background:#0d1117;border-bottom:1px solid rgba(0,212,255,0.15);padding:8px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.tv-user-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:800;border:2px solid;flex-shrink:0;}
.tv-user-name{font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;color:var(--text);}
.tv-user-role{font-size:10px;color:var(--text-muted);}

.tv-sign-out{background:none;border:1px solid var(--border);border-radius:6px;padding:5px 12px;color:var(--text-muted);font-family:'Exo 2',sans-serif;font-size:11px;font-weight:600;cursor:pointer;margin-left:auto;}
/* Job stack */
.tv-body{flex:1;overflow-y:auto;padding:14px 14px 80px;}
.tv-section-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);font-weight:700;margin:14px 0 8px 2px;}
/* Job card */
.tv-job{background:#141b2d;border:2px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:12px;-webkit-tap-highlight-color:transparent;}
.tv-job.active-job{border-color:var(--cyan);}
.tv-job.queued-job{border-color:rgba(0,212,255,0.25);}
.tv-job.hold-job{border-color:rgba(168,85,247,0.35);opacity:.7;}
.tv-job-header{padding:14px 16px;display:flex;align-items:flex-start;gap:12px;}
.tv-job-priority{width:30px;height:30px;border-radius:50%;background:rgba(0,212,255,0.12);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:800;color:var(--cyan);flex-shrink:0;margin-top:2px;}
.tv-job-plate{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:800;color:var(--text);letter-spacing:1px;}
.tv-job-vehicle{font-size:12px;color:var(--text-muted);margin-top:1px;}
.tv-job-customer{font-size:11px;color:var(--text-dim);margin-top:2px;}
.tv-job-meta{margin-left:auto;text-align:right;flex-shrink:0;}
.tv-job-type-badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.tv-job-status{font-size:10px;font-weight:700;}
/* Job body — repair request */
.tv-job-request{padding:10px 16px;background:rgba(255,215,0,0.04);border-top:1px solid rgba(255,215,0,0.1);border-bottom:1px solid rgba(255,215,0,0.1);}
.tv-job-request-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:700;margin-bottom:4px;}
.tv-job-request-text{font-size:13px;color:var(--text);line-height:1.55;}
/* Labour & Parts summary */
.tv-job-info{display:flex;gap:0;border-top:1px solid var(--border);}
.tv-info-block{flex:1;padding:10px 14px;border-right:1px solid var(--border);}
.tv-info-block:last-child{border-right:none;}
.tv-info-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;margin-bottom:4px;}
.tv-info-val{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:800;}
.tv-info-sub{font-size:9px;color:var(--text-dim);margin-top:1px;}
/* Parts list */
.tv-parts-list{border-top:1px solid var(--border);padding:10px 16px;}
.tv-parts-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#c084fc;font-weight:700;margin-bottom:8px;}
.tv-part-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(168,85,247,0.1);}
.tv-part-row:last-child{border-bottom:none;}
.tv-part-num{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:#c084fc;min-width:80px;}
.tv-part-name{font-size:12px;color:var(--text);flex:1;}
.tv-part-qty{font-size:11px;color:var(--text-dim);background:var(--surface3);border-radius:4px;padding:2px 7px;font-weight:600;}
/* Labour list */
.tv-labour-list{border-top:1px solid var(--border);padding:10px 16px;}
.tv-labour-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--cyan);font-weight:700;margin-bottom:8px;}
.tv-labour-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(0,212,255,0.08);}
.tv-labour-row:last-child{border-bottom:none;}
.tv-labour-desc{font-size:12px;color:var(--text);flex:1;line-height:1.4;}
.tv-labour-hours{font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;color:var(--cyan);white-space:nowrap;}
/* Alerts / flags on job */
.tv-job-alert{padding:8px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:12px;}
/* Elapsed timer */
.tv-elapsed{display:flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(0,212,255,0.04);border-top:1px solid rgba(0,212,255,0.1);}
.tv-elapsed-bar-bg{flex:1;height:8px;background:var(--surface3);border-radius:4px;overflow:hidden;}
.tv-elapsed-bar-fill{height:100%;border-radius:4px;transition:width 1s;}
/* Action buttons */
.tv-job-actions{padding:12px 16px;display:flex;gap:10px;border-top:1px solid var(--border);background:rgba(0,0,0,0.15);}
.tv-btn{flex:1;padding:13px 10px;border-radius:10px;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;cursor:pointer;border:2px solid;text-align:center;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.tv-btn:active{transform:scale(0.97);}
.tv-btn-start{background:rgba(0,255,136,0.12);border-color:var(--green);color:var(--green);}
.tv-btn-clockoff{background:rgba(239,68,68,0.12);border-color:var(--red);color:var(--red);}
.tv-btn-open{background:rgba(0,212,255,0.1);border-color:var(--cyan);color:var(--cyan);}
.tv-btn-note{background:rgba(255,215,0,0.08);border-color:rgba(255,215,0,0.4);color:var(--gold);}
.tv-btn-insp{background:rgba(0,212,255,0.08);border-color:rgba(0,212,255,0.3);color:var(--cyan);}
/* S&D pending banner */
.tv-snd-banner{padding:10px 16px;background:rgba(245,158,11,0.1);border-top:1px solid rgba(245,158,11,0.25);display:flex;align-items:center;gap:10px;}
/* Empty state */
.tv-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--text-dim);}
.tv-job-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;transition:border-color .2s;}
.tv-job-card:hover{border-color:var(--border2);}
.tv-job-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;}
.tv-job-id{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:var(--cyan);}
.tv-job-body{padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.tv-start-btn{background:linear-gradient(135deg,var(--cyan),#0088ff);color:#000;border:none;border-radius:6px;padding:12px 24px;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:800;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s;box-shadow:0 0 16px rgba(0,212,255,0.3);}
.tv-start-btn:hover{box-shadow:0 0 24px rgba(0,212,255,0.5);transform:translateY(-1px);}
.tv-inprog-btn{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,255,136,0.3);border-radius:6px;padding:12px 24px;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:800;cursor:pointer;text-transform:uppercase;letter-spacing:1px;}
.tv-no-jobs{text-align:center;padding:80px 20px;color:var(--text-dim);}
.tv-no-jobs .ei{font-size:48px;margin-bottom:12px;opacity:.3;}

/* S&D FULLSCREEN */
.snd-fullscreen{display:none;position:fixed;inset:0;background:var(--bg);z-index:900;flex-direction:column;overflow:hidden;}
.snd-fullscreen.active{display:flex;}
.snd-fs-header{background:var(--surface);border-bottom:2px solid var(--gold);padding:14px 20px;flex-shrink:0;}
.snd-fs-content{flex:1;overflow-y:auto;padding:20px;max-width:700px;margin:0 auto;width:100%;}


/* INSPECTION */
.insp-item{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--border);transition:background .1s;}
.insp-item:last-child{border-bottom:none;}
.insp-item:hover{background:var(--surface2);}
.insp-tl{display:flex;gap:7px;}
.insp-tl-btn{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;background:var(--surface3);}
.insp-tl-btn:hover{transform:scale(1.12);}
.insp-tl-btn.active-green{background:rgba(0,255,136,0.2);border-color:var(--green);}
.insp-tl-btn.active-amber{background:rgba(245,158,11,0.2);border-color:var(--gold);}
.insp-tl-btn.active-red{background:rgba(255,61,90,0.2);border-color:var(--red);}
.insp-tl-btn.active-blue{background:rgba(59,130,246,0.2);border-color:#3b82f6;}
.insp-report-item-blue{background:#eff6ff;border-left:4px solid #3b82f6;padding:10px 14px;border-radius:0 6px 6px 0;margin-bottom:8px;}
.insp-name{flex:1;font-size:15px;font-weight:600;}
.insp-note{font-size:12px;color:var(--text-muted);margin-top:2px;}
.insp-upsell{font-size:10px;color:var(--gold);margin-top:2px;font-style:italic;}
.insp-report-section{margin-bottom:20px;}
.insp-report-item-red{background:#fff8f8;border-left:4px solid #ef4444;padding:10px 14px;border-radius:0 6px 6px 0;margin-bottom:8px;}
.insp-report-item-amber{background:#fffbeb;border-left:4px solid #f59e0b;padding:10px 14px;border-radius:0 6px 6px 0;margin-bottom:8px;}
.insp-report-item-green{background:#f0fdf4;border-left:4px solid #16a34a;padding:6px 14px;border-radius:0 6px 6px 0;margin-bottom:4px;}

/* JOB CARD V2 */
.jd-approval-banner{display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:7px;margin-bottom:12px;border:1px solid;}
.jd-approval-pending{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.3);color:var(--gold);}
.jd-approval-approved{background:rgba(0,255,136,0.1);border-color:rgba(0,255,136,0.3);color:var(--green);}
.jd-additional-flag{background:rgba(255,61,90,0.1);border:1px solid rgba(255,61,90,0.3);border-radius:7px;padding:10px 16px;margin-bottom:12px;}
.jd-audit-entry{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:11px;}
.jd-audit-entry:last-child{border-bottom:none;}
.jd-audit-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.jd-audit-time{color:var(--text-dim);min-width:130px;flex-shrink:0;}
.jd-audit-who{color:var(--cyan);font-weight:600;min-width:80px;flex-shrink:0;}
.jd-audit-msg{color:var(--text-muted);}
.jd-tech-note{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:5px;padding:10px 14px;margin-bottom:8px;}
.jd-tech-note-meta{font-size:9px;color:var(--text-dim);margin-bottom:4px;display:flex;justify-content:space-between;}
.jd-tech-note-text{font-size:12px;color:var(--text);}
.jd-additional-item{background:var(--surface2);border:1px solid rgba(255,61,90,0.2);border-radius:5px;padding:8px 12px;margin-bottom:6px;display:flex;align-items:start;gap:10px;}
.jd-additional-urgent{border-color:rgba(255,61,90,0.5);background:rgba(255,61,90,0.06);}

/* JOB DETAIL PAGE */
.jd-header{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px 22px;margin-bottom:16px;position:relative;overflow:hidden;}
.jd-header::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--purple));}
.jd-id{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;color:var(--cyan);letter-spacing:1px;}
.jd-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;}
.jd-meta-item{font-size:11px;color:var(--text-muted);}
.jd-meta-item strong{color:var(--text);font-size:12px;}
.jd-status-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}

.jd-section{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:14px;overflow:hidden;}
.jd-section-header{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface2);}
.jd-section-title{font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.jd-section-total{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;color:var(--cyan);}

.jd-line-cols{display:grid;gap:8px;padding:6px 18px 3px;align-items:center;}
.jd-col-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-weight:600;}
.labour-cols{grid-template-columns:2.5fr 80px 90px 90px 30px;}
.parts-cols{grid-template-columns:100px 2.5fr 70px 90px 80px 28px 28px;}
.consumable-cols{grid-template-columns:2.5fr 80px 90px 90px 30px;}

.jd-line{display:grid;gap:8px;padding:7px 18px;align-items:center;border-bottom:1px solid var(--border);background:var(--surface);}
.jd-line:last-child{border-bottom:none;}
.jd-line:hover{background:var(--surface2);}
.jd-line.labour-cols{grid-template-columns:2.5fr 80px 90px 90px 30px;}
.jd-line.parts-cols{grid-template-columns:100px 2.5fr 70px 90px 80px 28px 28px;}
.jd-line.consumable-cols{grid-template-columns:2.5fr 80px 90px 90px 30px;}

.jd-input{background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:6px 9px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:14px;outline:none;width:100%;}
.jd-input:focus{border-color:var(--cyan);background:var(--surface2);}
.jd-line-total{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:var(--cyan);text-align:right;}
.jd-del{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;padding:2px;transition:color .1s;line-height:1;}
.jd-del:hover{color:var(--red);}

.jd-add-row{padding:8px 18px;display:flex;gap:8px;align-items:center;border-top:1px solid var(--border);background:var(--surface2);}
.jd-add-sel{background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:5px 8px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:11px;outline:none;flex:1;min-width:0;}
.jd-add-sel:focus{border-color:var(--cyan);}

/* TOTALS BAR - pinned to bottom */
.jd-totals-bar{display:none !important;}
.jd-tot-item{flex:1;padding:0 16px;border-right:1px solid var(--border);text-align:center;}
.jd-tot-item:first-child{padding-left:0;}
.jd-tot-item:last-child{border-right:none;}
.jd-tot-lbl{font-size:8px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:3px;}
.jd-tot-val{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;}

/* ── MOBILE RESPONSIVE ── */
@media screen and (max-width: 768px) {

  /* Sidebar hidden — main takes full width */
  .sidebar { display: none !important; }

  /* Main: fixed to screen so iOS Safari 100vh issues don't apply */
  .main {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Topbar */
  .topbar {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 6px 10px 4px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .topbar > div[style*="max-width"] { display: none !important; }
  .topbar > .btn-cyan { display: none !important; }
  .topbar > button[onclick*="toggleLight"] { display: none !important; }
  .topbar > button[id*="owner"] { display: none !important; }
  .topbar > button[id*="online"] { display: none !important; }
  #page-title { font-size: 14px !important; width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 0 !important; flex: none !important; }
  #topbar-actions { gap: 4px !important; flex-shrink: 0 !important; width: 100% !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  #topbar-actions .btn { padding: 6px 10px !important; font-size: 11px !important; min-height: 32px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  #tv-job-title { display: block !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; }

  /* Scrollable content */
  .content {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 10px 72px 10px !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Bottom nav visible */
  #mobile-nav { display: flex !important; }

  /* Diary: hide mini-calendar, list only */
  #diary-grid { display: none !important; }

  /* Job card controls */
  .doc-controls { flex-wrap: wrap !important; gap: 6px !important; padding: 8px 10px !important; }
  .doc-controls label { display: none !important; }
  .doc-controls select { flex: 1 1 110px !important; min-width: 0 !important; font-size: 13px !important; padding: 8px 6px !important; }
  .doc-actions { flex-wrap: wrap !important; padding: 8px 10px !important; gap: 6px !important; }
  .doc-actions > .btn-green { flex: 1 1 100% !important; }

  /* Modals from bottom */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-content, .modal-content-wide {
    width: 100% !important; max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
  }

  /* Grids */
  .veh-grid { grid-template-columns: 1fr 1fr !important; }
  .vd-kpis { grid-template-columns: repeat(2,1fr) !important; }

  /* Touch targets */
  .btn { min-height: 40px; }
  .btn-sm { padding: 8px 12px !important; font-size: 12px !important; }

  /* Settings */
  #settings-content > div { max-width: 100% !important; }

  /* Hide desktop-only */
  .pw { display: none !important; }
}

/* INVOICE PRINT */
@media print{
  body > *{display:none!important;}
  #invoice-print-area{display:block!important;position:fixed;inset:0;background:#fff;color:#000;padding:30px;font-family:'Exo 2',sans-serif;}
  .no-print{display:none!important;}
}
#invoice-print-area{display:none;}
.inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;padding-bottom:18px;border-bottom:2px solid #1a1a2e;}
.inv-shop{font-size:22px;font-weight:800;font-family:'Rajdhani',sans-serif;letter-spacing:2px;text-transform:uppercase;}
.inv-label{font-size:28px;font-weight:800;font-family:'Rajdhani',sans-serif;color:#00b4d8;letter-spacing:2px;}
.inv-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.inv-table th{background:#f0f4f8;padding:8px 12px;font-size:10px;text-transform:uppercase;letter-spacing:1px;text-align:left;font-weight:700;color:#334155;}
.inv-table td{padding:8px 12px;font-size:12px;border-bottom:1px solid #e2e8f0;}
.inv-table tr:last-child td{border-bottom:none;}
.inv-section-row td{background:#f8fafc;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#475569;padding:6px 12px;}
.inv-totals{margin-left:auto;width:280px;}
.inv-tot-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid #e2e8f0;}
.inv-tot-row.grand{font-weight:800;font-size:16px;border-top:2px solid #1a1a2e;border-bottom:none;margin-top:6px;padding-top:8px;}

/* DIARY */
.diary-day-col{flex:1;min-width:0;border-right:1px solid var(--border);}
.diary-day-col:last-child{border-right:none;}
.diary-day-header{padding:8px 10px;text-align:center;border-bottom:1px solid var(--border);background:var(--surface2);}
.diary-day-header.today{background:rgba(0,212,255,0.08);border-bottom-color:var(--cyan);}
.diary-day-name{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);}
.diary-day-date{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;line-height:1;}
.diary-day-date.today-num{color:var(--cyan);text-shadow:0 0 10px var(--cyan-glow);}
.diary-cap{font-size:12px;color:var(--text-muted);margin-top:2px;font-weight:600;}
.diary-slot{position:relative;}
.diary-time-col{width:48px;flex-shrink:0;border-right:1px solid var(--border);}
.diary-time-label{height:44px;display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 6px 0 0;font-size:11px;color:var(--text-dim);font-family:'Rajdhani',sans-serif;font-weight:600;}
.diary-cell{height:44px;border-bottom:1px solid rgba(31,40,64,0.5);cursor:pointer;transition:background .1s;position:relative;}
.diary-cell:hover{background:rgba(0,212,255,0.04);}
.booking-block{position:absolute;left:3px;right:3px;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:600;cursor:pointer;overflow:hidden;z-index:2;border-left:3px solid;transition:opacity .15s;line-height:1.3;}
.booking-block:hover{opacity:.85;}
.bb-name{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bb-detail{font-size:11px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bb-missed{animation:pulse-red 2s infinite;}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(255,61,90,0.4)}50%{box-shadow:0 0 0 4px rgba(255,61,90,0)}}
@keyframes pulse-cyan{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,0.4)}50%{box-shadow:0 0 0 6px rgba(0,212,255,0)}}
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,0.5)}50%{box-shadow:0 0 0 5px rgba(0,255,136,0)}}
.week-booking-pill{padding:4px 8px;border-radius:4px;margin-bottom:3px;cursor:pointer;border-left:3px solid;font-size:10px;font-weight:600;transition:opacity .15s;}
.week-booking-pill:hover{opacity:.8;}
.parts-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;}
.parts-ok{background:rgba(0,255,136,0.12);color:var(--green);border:1px solid rgba(0,255,136,0.3);}
.parts-order{background:rgba(245,158,11,0.12);color:var(--gold);border:1px solid rgba(245,158,11,0.3);}
.parts-missing{background:rgba(255,61,90,0.12);color:var(--red);border:1px solid rgba(255,61,90,0.3);}
.booking-detail-row{display:flex;align-items:start;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.booking-detail-row:last-child{border-bottom:none;}
.bdr-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;width:80px;flex-shrink:0;margin-top:1px;}

/* QUICK ACTION BUTTONS */
.dash-qa-btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 10px;cursor:pointer;color:var(--text-muted);font-family:'Exo 2',sans-serif;font-size:20px;font-weight:500;transition:all .15s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;}
.dash-qa-btn div{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.dash-qa-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
/* TODAY SCHEDULE */
.today-slot{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;transition:background .1s;}
.today-slot:last-child{border-bottom:none;}
.today-slot:hover{background:var(--surface2);}
.today-time{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:var(--text-muted);min-width:44px;}

/* PHOTO THUMBNAILS */
.photo-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.photo-thumb{position:relative;width:64px;height:64px;border-radius:5px;overflow:hidden;border:1px solid var(--border);flex-shrink:0;cursor:pointer;}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-thumb-del{position:absolute;top:1px;right:1px;background:rgba(0,0,0,0.7);border:none;color:#fff;font-size:11px;border-radius:3px;padding:1px 4px;cursor:pointer;line-height:1.4;}
.photo-add-btn{width:64px;height:64px;border-radius:5px;border:1px dashed var(--border2);background:var(--surface2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);font-size:20px;flex-shrink:0;transition:all .15s;}
.photo-add-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);}
.photo-add-btn span{font-size:9px;margin-top:2px;text-transform:uppercase;letter-spacing:.5px;}
#np-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px);z-index:1100;}
#pp-popup,#cp-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;width:540px;max-width:96vw;max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:12px;z-index:1200;box-shadow:0 24px 60px rgba(0,0,0,0.7);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;}
#pp-popup.pp-open,#cp-popup.cp-open{transform:translate(-50%,-50%) scale(1);opacity:1;}
#pp-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c084fc,var(--purple));border-radius:12px 12px 0 0;}
#cp-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:12px 12px 0 0;}
#st-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;width:640px;max-width:96vw;max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:12px;z-index:1200;box-shadow:0 24px 60px rgba(0,0,0,.7);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;}
#st-modal.st-open{transform:translate(-50%,-50%) scale(1);opacity:1;}
#st-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:12px 12px 0 0;}
#lp-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;width:560px;max-width:96vw;max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:12px;z-index:1200;box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 0 1px rgba(0,212,255,0.08);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;}
#lp-popup.lp-popup-open{transform:translate(-50%,-50%) scale(1);opacity:1;}
#lp-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--purple));border-radius:12px 12px 0 0;}
#pp-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;width:580px;max-width:96vw;max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:12px;z-index:1200;box-shadow:0 24px 60px rgba(0,0,0,.7);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;}
#pp-popup.pp-open{transform:translate(-50%,-50%) scale(1);opacity:1;}
#pp-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),#c084fc);border-radius:12px 12px 0 0;}
#cp-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;width:500px;max-width:96vw;max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:12px;z-index:1200;box-shadow:0 24px 60px rgba(0,0,0,.7);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;}
#cp-popup.cp-open{transform:translate(-50%,-50%) scale(1);opacity:1;}
#cp-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:12px 12px 0 0;}
#np-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;width:600px;max-width:96vw;max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border2);border-radius:12px;z-index:1200;box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 0 1px rgba(0,212,255,0.08);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;}
#np-popup.np-popup-open{transform:translate(-50%,-50%) scale(1);opacity:1;}
#np-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--orange),var(--cyan));border-radius:12px 12px 0 0;}
#np-popup.np-update-mode::before{background:linear-gradient(90deg,var(--cyan),var(--purple),var(--cyan));}
.np-popup-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);}
.np-popup-body{padding:20px;}
.np-popup-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;align-items:center;background:var(--surface2);border-radius:0 0 12px 12px;}
.np-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;margin-bottom:4px;}
.np-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:8px 10px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:12px;outline:none;transition:border-color .15s;}
.np-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,158,11,0.1);}
.np-input[type="number"]{font-family:'Rajdhani',sans-serif;font-size:14px;}
select.np-input option{background:var(--surface2);}
.today-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
/* SCROLLBAR */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* INSPECTION REPORT */
.insp-report-header{padding:16px 20px;border-bottom:1px solid var(--border);}
.insp-report-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;}
.irm-item{font-size:11px;color:var(--text-muted);}
.irm-item strong{color:var(--text);}
.insp-summary-pills{display:flex;gap:8px;margin-top:10px;}
.summary-pill{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:700;}
.sp-green{background:rgba(34,197,94,0.15);color:var(--tl-green);border:1px solid rgba(34,197,94,0.3);}
.sp-amber{background:rgba(245,158,11,0.15);color:var(--tl-amber);border:1px solid rgba(245,158,11,0.3);}
.sp-red{background:rgba(239,68,68,0.15);color:var(--tl-red);border:1px solid rgba(239,68,68,0.3);}
/* ── SMS INBOX ── */
.sms-layout{display:grid;grid-template-columns:300px 1fr;height:100%;overflow:hidden;background:var(--bg)}
.sms-thread-list{border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;background:var(--surface)}
.sms-thread-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--surface2)}
.sms-thread-title{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.sms-search{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:12px;outline:none;margin:10px 0 6px}
.sms-search:focus{border-color:var(--cyan)}
.sms-thread-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;position:relative}
.sms-thread-item:hover{background:var(--surface2)}
.sms-thread-item.active{background:rgba(0,212,255,0.08);border-left:3px solid var(--cyan)}
.sms-thread-item.unread{background:rgba(0,212,255,0.04)}
.sms-thread-item.unread .sms-thread-name{color:var(--text)}
.sms-thread-name{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.sms-thread-preview{font-size:11px;color:var(--text-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.sms-thread-time{font-size:10px;color:var(--text-dim);position:absolute;top:12px;right:12px}
.sms-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 5px var(--cyan);flex-shrink:0}
.sms-conv{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--bg2)}
.sms-conv-header{padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:12px;flex-shrink:0}
.sms-conv-avatar{width:38px;height:38px;border-radius:50%;background:rgba(0,212,255,0.12);border:2px solid rgba(0,212,255,0.3);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:800;color:var(--cyan);flex-shrink:0}
.sms-conv-info{flex:1;min-width:0}
.sms-conv-name{font-size:15px;font-weight:700;color:var(--text)}
.sms-conv-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.sms-messages{flex:1;overflow-y:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:10px}
.sms-msg{display:flex;flex-direction:column;max-width:72%}
.sms-msg.out{align-self:flex-end;align-items:flex-end}
.sms-msg.in{align-self:flex-start;align-items:flex-start}
.sms-bubble{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.55;word-break:break-word}
.sms-msg.out .sms-bubble{background:var(--cyan);color:#000;border-radius:14px 14px 2px 14px}
.sms-msg.in .sms-bubble{background:var(--surface);border:1px solid var(--border2);color:var(--text);border-radius:14px 14px 14px 2px}
.sms-msg-meta{font-size:10px;color:var(--text-dim);margin-top:3px;padding:0 2px}
.sms-msg.out .sms-msg-meta{text-align:right}
.sms-date-divider{text-align:center;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-weight:700;padding:4px 0;margin:4px 0}
.sms-input-bar{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);display:flex;align-items:flex-end;gap:10px;flex-shrink:0}
.sms-textarea{flex:1;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;color:var(--text);font-family:'Exo 2',sans-serif;font-size:13px;outline:none;resize:none;min-height:42px;max-height:120px;line-height:1.5;transition:border-color .2s}
.sms-textarea:focus{border-color:var(--cyan)}
.sms-send-btn{width:42px;height:42px;border-radius:50%;background:var(--cyan);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:all .2s;box-shadow:0 0 12px rgba(0,212,255,0.3)}
.sms-send-btn:hover{transform:scale(1.08);box-shadow:0 0 18px rgba(0,212,255,0.5)}
.sms-send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.sms-quick-replies{padding:8px 16px 0;display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}
.sms-qr{background:var(--surface2);border:1px solid var(--border2);border-radius:16px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.sms-qr:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,0.06)}
.sms-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-dim);gap:12px}
.sms-empty .ei{font-size:48px}
.sms-empty p{font-size:13px;color:var(--text-muted)}
.sms-new-btn{background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.3);border-radius:6px;padding:5px 10px;color:var(--cyan);font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s}
.sms-new-btn:hover{background:rgba(0,212,255,0.18)}
.sms-status-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px}
.sms-status-badge.twilio{background:rgba(0,255,136,0.1);color:var(--green);border:1px solid rgba(0,255,136,0.25)}
.sms-status-badge.manual{background:rgba(107,127,163,0.1);color:var(--text-muted);border:1px solid var(--border)}
.sms-setup-banner{margin:16px;padding:16px 18px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:8px;font-size:12px;color:var(--gold);line-height:1.6}
.sms-setup-banner strong{font-weight:700}
@media(max-width:700px){.sms-layout{grid-template-columns:1fr}.sms-thread-list{display:none}.sms-layout.show-list .sms-thread-list{display:flex}.sms-layout.show-list .sms-conv{display:none}}

/* ── Offline banner ── */
#offline-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;background:#c0392b;color:#fff;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;text-align:center;padding:8px 16px;letter-spacing:.5px}
#offline-banner.show{display:block}