/* ============================================================
   Design language: Ventrax Motorsport's own identity - the
   three-bar chevron mark (used standalone as their icon when
   there's no room for the wordmark) and their orange brand
   accent, carried through as the single accent colour here.
   Tabular data (SKUs, quantities, prices, PO numbers) is set
   in a monospace face, like a timing-board readout.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg:#0a0b0d;
  --panel:#131519;
  --panel2:#1a1d22;
  --line:#24282f;
  --text:#edf0f2;
  --muted:#8b929c;
  --accent:#ff6a00;
  --accent-2:#ff8f3d;
  --accent-3:#e8480c;
  --good:#48b57e;
  --warn:#e0b23c;
  --bad:#d6564f;
  --heat: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-3) 100%);
  --font-display: 'Space Grotesk', 'Inter', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);
  background-image:
    linear-gradient(var(--bg),var(--bg)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 28px);
}
a{color:inherit;text-decoration:none}
code{font-family:var(--font-mono)}

.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{border-right:1px solid var(--line);padding:22px;background:#0d0f12;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;font-size:21px;padding-bottom:14px;border-bottom:3px solid transparent;border-image:var(--heat) 1;margin-bottom:4px}
.brand span{color:var(--accent-3)}
.demo{font-size:10.5px;color:var(--muted);margin:9px 0 26px;font-family:var(--font-mono);letter-spacing:.03em;text-transform:uppercase}
.nav{flex:1;min-height:0;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:3px 0;border-radius:8px;color:#c6ccd4;border-left:3px solid transparent;font-size:14px;font-weight:500;transition:background .12s,border-color .12s}
.nav a:hover{background:var(--panel2)}
.nav a.active{background:var(--panel2);border-left:3px solid;border-image:var(--heat) 1;color:var(--text)}
.nav .sep{height:1px;background:var(--line);margin:16px 0}

.main{padding:30px 36px}
.top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px;gap:20px}
.who{font-size:12.5px;color:var(--muted);font-family:var(--font-mono);white-space:nowrap;padding-top:4px}
h1{font-family:var(--font-display);font-size:26px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em;
   display:inline-block;position:relative;padding-bottom:10px}
h1:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:64px;background:var(--heat);border-radius:2px}
h2{font-family:var(--font-display);font-size:16px;margin:0 0 14px;font-weight:700;letter-spacing:.01em}
.sub{color:var(--muted);font-size:13.5px;margin-top:2px}

.cards{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin:20px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.card .small{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.card .num{font-family:var(--font-mono);font-size:28px;font-weight:600;margin-top:8px;font-variant-numeric:tabular-nums}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin:14px 0}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.mini-grid .panel{margin:0;display:flex;flex-direction:column}
.mini-grid .panel h2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mini-grid .mini-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:520px}
.mini-grid .mini-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.mini-grid .mini-row:hover{border-color:#ff6a00}
.mini-grid .mini-row-main{min-width:0}
.mini-grid .mini-row-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-grid .mini-row-sub{color:var(--muted);font-size:12px;margin-top:2px}
.mini-grid .mini-row-right{text-align:right;flex-shrink:0}

.status-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:22px}
.status-col{display:flex;flex-direction:column;align-items:center;padding:18px 12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);transition:transform .1s,border-color .12s}
.status-col:hover{transform:translateY(-2px);border-color:#ff6a00}
.status-col-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:14px;text-align:center}
.status-bar-track{width:100%;height:130px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:12px}
.status-bar-fill{width:60px;border-radius:8px 8px 3px 3px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;min-height:32px;font-weight:800;font-size:20px;color:#fff}
.status-bar-blue{background:linear-gradient(180deg,#3b82f6,#1e40af)}
.status-bar-orange{background:linear-gradient(180deg,#ff8a3d,#c2410c)}
.status-bar-green{background:linear-gradient(180deg,#4ade80,#15803d)}
.status-bar-grey{background:linear-gradient(180deg,#9ca3af,#4b5563)}
.status-col-value{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
@media (max-width:640px){
  .status-board{grid-template-columns:1fr}
}

.badge{display:inline-block;padding:4px 10px;border-radius:99px;background:var(--panel2);font-size:11.5px;font-weight:600;letter-spacing:.02em;border:1px solid var(--line)}
.bad{color:var(--bad)}
.warn{color:var(--warn)}
.good{color:var(--good)}
.review-badge{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:700;padding:2px 9px;margin-left:6px}
.notice.review{background:rgba(214,86,79,.08);border-color:rgba(214,86,79,.4)}
.source-alibaba{background:rgba(232,72,12,.12);color:var(--accent-3);border:1px solid rgba(232,72,12,.3)}
.confidence-high{color:var(--good);font-weight:600}
.confidence-medium{color:var(--warn);font-weight:600}
.confidence-low,.confidence-none{color:var(--bad);font-weight:600}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid #1d2127;font-variant-numeric:tabular-nums}
td.mono, .money-big, .money-gbp, .num{font-family:var(--font-mono)}
tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto}

.btn{display:inline-block;border:0;border-radius:8px;padding:10px 14px;background:var(--accent);color:#08090b;
     font-weight:700;font-size:13px;cursor:pointer;transition:filter .12s,transform .05s;font-family:var(--font-body)}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent);background:rgba(79,143,224,.08)}
.btn.mini{padding:7px 10px;font-size:12px;border-radius:7px}

.notice{border-radius:10px;padding:13px 15px;margin:14px 0;border:1px solid var(--line);font-size:13px;background:var(--panel2)}
.notice.success{background:rgba(72,181,126,.08);border-color:rgba(72,181,126,.35)}
.notice.error{background:rgba(214,86,79,.08);border-color:rgba(214,86,79,.35)}
.muted-copy{color:#c0c6cf;line-height:1.55;font-size:13px}
.hint{margin-top:14px;padding:11px 13px;background:#0d0f12;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:12px;line-height:1.5}
.text-link{color:var(--accent);font-weight:700;font-size:13px}
.text-link:hover{text-decoration:underline}

.small{font-size:12.5px;color:var(--muted)}
.eyebrow{font-size:10px;letter-spacing:.11em;color:var(--accent-3);font-weight:800;margin-bottom:5px;text-transform:uppercase}

input,select,textarea,button{font-family:var(--font-body);font-size:13.5px}
input,select,textarea{background:#0d0f12;border:1px solid var(--line);border-radius:7px;padding:9px 11px;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.formgrid label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:600}
.formgrid input,.formgrid select,.formgrid textarea{width:100%;color:var(--text);font-weight:500}
.formgrid textarea{min-height:82px;resize:vertical}
.formgrid .wide{grid-column:1/-1}
.formgrid .check{display:flex;grid-template-columns:auto 1fr;align-items:center;justify-content:start}
.formgrid .check input{width:auto}
.file-input{max-width:100%;margin-right:8px}

.money-big{font-size:32px;font-weight:600;margin-top:14px;font-variant-numeric:tabular-nums}
.money-gbp{font-size:19px;color:var(--good);margin:4px 0 18px;font-variant-numeric:tabular-nums}
.section-title{margin:26px 0 10px}
.item-title{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.item-title h2{margin-bottom:5px}
.product-card-img{width:110px;height:85px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#0d0f12}
.profit-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:9px;font-size:13px}
.edit-image-wrap{min-height:360px;display:grid;place-items:center;background:#0d0f12;border-radius:12px}
.edit-image{max-width:100%;max-height:500px;border-radius:12px}
.view-switch{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.thumb{width:58px;height:58px;object-fit:cover;border-radius:8px;background:#0d0f12;border:1px solid var(--line);display:block}
.thumb.tiny{width:42px;height:42px}
.warnbadge{background:rgba(217,161,59,.12);color:var(--warn);border:1px solid rgba(217,161,59,.3)}
.goodbadge{background:rgba(72,181,126,.12);color:var(--good);border:1px solid rgba(72,181,126,.3)}
.compact-panel{padding:12px 16px}
.switchline{margin-right:18px}
.order-card{padding:20px}
.order-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.order-money{text-align:right;display:grid;gap:4px;justify-items:end}
.order-money>b{font-size:19px;font-family:var(--font-mono)}
.order-money>span:not(.badge){color:var(--muted)}
.order-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}
.inner-table{margin-top:6px}

.locked-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;background:#0d0f12;border:1px solid var(--line);border-radius:8px;margin-bottom:14px;font-size:13px}
.raw-email{white-space:pre-wrap;font-family:var(--font-mono);font-size:12px;background:#0d0f12;border:1px solid var(--line);border-radius:8px;padding:14px;max-height:420px;overflow:auto;color:#b7bdc6}
.line-row{border-bottom:1px solid var(--line);padding:14px 0}
.line-row:last-child{border-bottom:0}

/* Smart Paste - the ai autofill box, styled like a scan/import slot */
.smart-paste-wrap{border:1px dashed #3a4048;border-radius:10px;padding:13px;margin-bottom:14px;background:#0d0f12;position:relative}
.smart-paste-wrap:before{content:"";position:absolute;top:0;left:14px;right:14px;height:2px;background:var(--heat);opacity:.6;border-radius:2px}
.smart-paste-label{font-family:var(--font-mono);font-size:11px;color:var(--accent-3);font-weight:600;margin-bottom:9px;text-transform:uppercase;letter-spacing:.05em}
.smart-paste-box{min-height:70px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:7px;padding:10px;background:#08090b;color:var(--text);font-size:13px}
.smart-paste-box:empty:before{content:attr(data-placeholder);color:var(--muted)}
.smart-paste-box img{max-width:100%;border-radius:6px;margin-top:6px}
.smart-paste-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.smart-paste-status{font-size:11.5px;color:var(--muted);font-family:var(--font-mono)}
.quick-add-wrap{margin-top:12px}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--bg);
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 30px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 30px);}
.login{width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px;text-align:center}
.login .brand{border-bottom:0;display:inline-block;margin-bottom:4px}
.login h1{font-size:20px;padding-bottom:0}
.login h1:after{display:none}
.login .creds{text-align:left;margin-top:18px;font-size:11.5px;color:var(--muted);font-family:var(--font-mono);line-height:1.7;background:#0d0f12;border:1px solid var(--line);border-radius:8px;padding:12px}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:relative;height:auto}
  .order-head{display:block}
  .order-money{text-align:left;justify-items:start;margin-top:12px}
  .formgrid{grid-template-columns:1fr}
  .product-card-img{width:88px;height:70px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .quick-links{gap:8px}
  .quick-link{padding:11px 14px;font-size:13px;flex:1 1 calc(50% - 8px)}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}

.rowform{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rowform select,.rowform input{width:auto}

.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:26px;height:26px;flex-shrink:0}

.nav-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin:18px 0 6px;padding:0 12px}
.nav a{padding:9px 12px}

.quick-links{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 22px}
.quick-link{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px;font-weight:700;font-size:14px;transition:border-color .12s,transform .05s}
.quick-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.quick-link-icon{font-size:18px}

.customer-picker{position:relative}
.customer-picker-results{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;background:#0d0f12;border:1px solid var(--line);border-radius:8px;margin-top:4px;max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.customer-picker-row{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #1d2127}
.customer-picker-row:last-child{border-bottom:0}
.customer-picker-row:hover{background:var(--panel2)}
.customer-picker-add{color:var(--accent);font-weight:600}
.customer-picker-addbox{display:none;margin-top:10px;padding:12px;border:1px dashed #3a4048;border-radius:8px;background:#0d0f12}
.customer-picker-addbox .formgrid{margin-top:0}

.product-picker{position:relative}
.product-picker-results{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;background:#0d0f12;border:1px solid var(--line);border-radius:8px;margin-top:4px;max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* Invoice document - always a clean white "paper" look regardless of the
   app's dark theme, since this is what actually gets printed/sent out. */
.invoice-paper{background:#ffffff;color:#181818;border-radius:10px;padding:44px;max-width:760px;font-family:var(--font-body)}
.invoice-paper .small{color:#6b7280}
.invoice-paper table{width:100%;border-collapse:collapse}
.invoice-paper th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;padding:9px 6px;border-bottom:2px solid #e5e7eb}
.invoice-paper td{padding:10px 6px;border-bottom:1px solid #eef0f2;color:#181818;vertical-align:middle}
.invoice-paper table.items{table-layout:fixed}
.invoice-paper table.items td.amt,.invoice-paper table.items th{white-space:nowrap}
.invoice-paper table.items td.desc{overflow-wrap:break-word}
.invoice-paper .status-pill{display:inline-block;padding:4px 12px;border-radius:99px;font-weight:700;font-size:12px;letter-spacing:.03em}
.invoice-paper .status-draft{background:#fef3c7;color:#92400e}
.invoice-paper .status-approved,.invoice-paper .status-sent{background:#dbeafe;color:#1e40af}
.invoice-paper .status-partially_paid{background:#fed7aa;color:#9a3412}
.invoice-paper .status-paid{background:#dcfce7;color:#166534}
@media print{
  body *{visibility:hidden}
  #invoice-doc, #invoice-doc *{visibility:visible}
  #invoice-doc{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0}
  .side, .top, .no-print{display:none !important}
}

.li-section{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px;background:#111318}
.li-section-header{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.li-section-header input{font-weight:700;flex:1}
.li-col-headers,.li-line{display:grid;grid-template-columns:110px 1fr 84px 80px 80px 80px 84px 65px 65px 80px 30px 26px;gap:7px;align-items:center}
.li-col-headers{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:0 2px 6px}
.li-line{padding:5px 0;border-top:1px solid #1d2127}
.li-line:first-of-type{border-top:0}
.li-line input{width:100%;padding:7px 8px;font-size:13px}
.li-line-total{font-family:var(--font-mono);text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.li-remove-line{background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--bad);cursor:pointer;width:26px;height:26px;font-size:12px}
.li-remove-line:hover{border-color:var(--bad);background:rgba(214,86,79,.08)}
@media(max-width:900px){
  .li-col-headers{display:none}
  .li-line{grid-template-columns:1fr;gap:6px;padding:12px 0}
}

.customer-picker-info{margin-top:8px;padding:9px 12px;background:#111318;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--muted)}

.job-buckets{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.job-bucket{display:block;border-radius:12px;padding:18px 20px;border:1px solid var(--line);transition:transform .1s,border-color .12s}
.job-bucket:hover{transform:translateY(-2px)}
.job-bucket-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-bottom:8px}
.job-bucket-count{font-size:32px;font-weight:800;line-height:1}
.job-bucket-value{margin-top:6px;font-family:var(--font-mono);font-size:13px;opacity:.85}
.bucket-ongoing{background:linear-gradient(135deg,#1e3a5f,#16283f);color:#bfdbfe;border-color:#2c4a6e}
.bucket-completed{background:linear-gradient(135deg,#1f3d2e,#17301f);color:#bbf7d0;border-color:#2b5540}
.bucket-draft{background:linear-gradient(135deg,#4a2a1a,#3a2013);color:#fed7aa;border-color:#8a4a22}
.bucket-awaiting{background:linear-gradient(135deg,#4f2020,#3b1717);color:#fecaca;border-color:#7f2f2f}
@media(max-width:900px){
  .job-buckets{grid-template-columns:1fr}
}

.qty-stepper{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0d0f12}
.qty-stepper .qty-input{border:0;background:transparent;text-align:center;padding:6px 2px;width:32px;font-size:13px;-moz-appearance:textfield}
.qty-stepper .qty-input::-webkit-outer-spin-button,.qty-stepper .qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-step-up,.qty-step-down{background:#181b20;border:0;color:var(--text);width:24px;font-size:15px;font-weight:700;cursor:pointer;line-height:1}
.qty-step-up:hover,.qty-step-down:hover{background:var(--accent);color:#111}
.qty-step-down{border-right:1px solid var(--line)}
.qty-step-up{border-left:1px solid var(--line)}

.trax-confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;align-items:center;justify-content:center;padding:20px}
.trax-confirm-box{background:var(--panel,#131519);border:1px solid var(--line);border-radius:14px;padding:26px 28px;max-width:400px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.trax-confirm-message{font-size:15px;line-height:1.5;margin-bottom:22px}
.trax-confirm-actions{display:flex;justify-content:flex-end;gap:10px}

/* Invoicing Overview: clicking a bar keeps the board and greys out the rest */
.status-col.dimmed{opacity:.42;filter:grayscale(1)}
.status-col.dimmed:hover{opacity:.85;filter:none}
.status-col.selected{border-color:#ff6a00;box-shadow:0 0 0 1px #ff6a00}
.list-panel{padding:0;overflow:hidden}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;color:#fff}
.list-head h2{margin:0;color:#fff;font-size:16px}
.list-head a.list-close{color:#fff;font-weight:700;margin-left:10px;text-decoration:none}
.list-head input{max-width:240px;margin:0}
.list-head-grey{background:#4b5563}.list-head-blue{background:#1e40af}.list-head-orange{background:#c2410c}.list-head-green{background:#15803d}
.list-body{padding:0 4px}
.list-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.list-foot select{width:auto;margin:0 6px}
.status-bar-purple{background:linear-gradient(180deg,#a78bfa,#6d28d9)}
.list-head-purple{background:#6d28d9}

/* Sidebar: Estimates and Invoices as two clearly separate colour-coded groups */
.nav-group{--g:#ff6a00;margin:12px 0;padding:6px 6px 8px;border-radius:12px;border:1px solid var(--line);border-top:3px solid var(--g);background:rgba(255,255,255,.025)}
.nav-group-est{--g:#3b82f6}
.nav-group-inv{--g:#ff6a00}
.nav-group-cust{--g:#22c55e}
.nav-group-deal{--g:#a855f7}
.nav-group-supp{--g:#06b6d4}
.nav-group-head{display:flex;align-items:center;gap:7px;padding:6px 8px 4px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--g)}
.nav-group-head::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g)}
.nav .nav-group a{margin:2px 0}
.nav .nav-group a.nav-new{font-weight:700;color:#fff}
.nav .nav-group a:hover{background:color-mix(in srgb,var(--g) 12%,transparent)}
.nav .nav-group a.active{border-left:3px solid var(--g);border-image:none;background:color-mix(in srgb,var(--g) 18%,transparent);color:#fff}
.nav-plus{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff;font-weight:800;font-size:15px;line-height:1}
.nav-bars{display:inline-block;width:18px;height:16px;background:linear-gradient(var(--g),var(--g)) 1px 100%/4px 45% no-repeat,linear-gradient(var(--g),var(--g)) 7px 100%/4px 75% no-repeat,linear-gradient(var(--g),var(--g)) 13px 100%/4px 100% no-repeat}

/* Parts audit status */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent}
.pill-green{background:rgba(72,181,126,.16);color:var(--good);border-color:rgba(72,181,126,.5)}
.pill-red{background:rgba(214,86,79,.14);color:var(--bad);border-color:rgba(214,86,79,.5)}
.pill-amber{background:rgba(224,178,60,.16);color:var(--warn);border-color:rgba(224,178,60,.55)}
tr.part-red td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
tr.part-green td:first-child{box-shadow:inset 3px 0 0 var(--good)}
tr.part-amber td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

.badge-orange{background:#f08a24;border-color:#f08a24;margin-left:4px}

/* order status traffic lights: green = complete, amber = ordered not finished, red = not ordered */
.badge[class*="tone-"]{font-size:14px;font-weight:800;padding:7px 16px;letter-spacing:.03em;text-transform:uppercase;border-width:2px!important}
.tone-green{background:#2fbf71!important;color:#04170d!important;border-color:#2fbf71!important}
.tone-amber{background:#f5b82e!important;color:#1d1400!important;border-color:#f5b82e!important}
.tone-red{background:#e5484d!important;color:#fff!important;border-color:#e5484d!important}
.tone-green::before{content:"\2714\00a0"}
.tone-amber::before{content:"\25CF\00a0"}
.tone-red::before{content:"\2716\00a0"}
.order-card.card-green{border:1px solid rgba(47,191,113,.55);border-left:12px solid #2fbf71;background:linear-gradient(90deg,rgba(47,191,113,.13),transparent 55%),var(--panel)}
.order-card.card-amber{border:1px solid rgba(245,184,46,.55);border-left:12px solid #f5b82e;background:linear-gradient(90deg,rgba(245,184,46,.13),transparent 55%),var(--panel)}
.order-card.card-red{border:1px solid rgba(229,72,77,.55);border-left:12px solid #e5484d;background:linear-gradient(90deg,rgba(229,72,77,.13),transparent 55%),var(--panel)}
.tone-row-green{border-left:8px solid #2fbf71;padding-left:12px!important;background:linear-gradient(90deg,rgba(47,191,113,.10),transparent 50%)}
.tone-row-amber{border-left:8px solid #f5b82e;padding-left:12px!important;background:linear-gradient(90deg,rgba(245,184,46,.10),transparent 50%)}
.tone-row-red{border-left:8px solid #e5484d;padding-left:12px!important;background:linear-gradient(90deg,rgba(229,72,77,.10),transparent 50%)}
.tone-dot{display:inline-block;width:16px;height:16px;border-radius:50%;margin-right:8px;vertical-align:middle}
.tone-dot.green{background:#2fbf71}.tone-dot.amber{background:#f5b82e}.tone-dot.red{background:#e5484d}

.li-suggest{position:fixed;z-index:9999;background:#0d0f12;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.55);max-height:340px;overflow-y:auto;min-width:380px}
.li-suggest-row{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #1d2127;display:flex;gap:10px;align-items:center}
.li-suggest-row:hover,.li-suggest-row.on{background:#1a1f26}
.li-suggest-row .sg-name{flex:1}.li-suggest-row .sg-sub{color:var(--muted);font-size:11.5px}
.li-suggest-row .sg-price{font-family:var(--font-mono);font-size:12px}
.sg-tag{font-size:10px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:5px;text-transform:uppercase}
.sg-tag.service{background:#f5b82e;color:#1d1400}.sg-tag.part{background:#2a6fdb;color:#fff}

.li-line.li-auto{background:rgba(245,184,46,.15);border-radius:6px;transition:background .3s}

.tidy-panel{margin-top:12px;padding:12px;border:1px solid rgba(245,184,46,.5);border-radius:10px;background:rgba(245,184,46,.06)}
.tidy-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}

.li-inc{border-color:rgba(72,181,126,.45)!important}
#trax-calc-btn{position:fixed;right:22px;bottom:22px;z-index:9998;width:54px;height:54px;border-radius:50%;border:0;background:#ff6a00;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#trax-calc{position:fixed;right:22px;bottom:86px;z-index:9998;width:290px;background:#14171c;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.6);padding:12px;display:none}
#trax-calc .cx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700}
#trax-calc input.cx-in{width:100%;font-size:18px;padding:9px;font-family:var(--font-mono);text-align:right}
#trax-calc .cx-res{font-size:26px;font-weight:800;text-align:right;padding:6px 2px;font-family:var(--font-mono);min-height:38px}
#trax-calc .cx-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
#trax-calc .cx-keys button,#trax-calc .cx-row button{padding:9px 0;border-radius:8px;border:1px solid var(--line);background:#1d2127;color:#fff;font-size:15px;cursor:pointer}
#trax-calc .cx-keys button.op{background:#2a2f37}
#trax-calc .cx-keys button.eq{background:#ff6a00;border-color:#ff6a00}
#trax-calc .cx-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
#trax-calc .cx-row button{font-size:12.5px;padding:8px 4px}
#trax-calc .cx-vat{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-top:6px}
#trax-calc .cx-vat input{width:56px;padding:4px 6px}
@media print{#trax-calc-btn,#trax-calc{display:none!important}}

.li-save-svc{background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:4px 0;font-size:13px;color:#fff}
.li-svc-note{grid-column:1/-1;padding:4px 2px;color:#48b57e}
@media(max-width:700px){.li-save-svc{justify-self:start;padding:6px 12px}}
.li-svc-sim{padding:4px 0;color:var(--text,#fff)}
.li-svc-note b{color:#f5b82e}

#trax-bell-btn{position:fixed;right:88px;bottom:22px;z-index:9998;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:#1d2127;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#trax-bell-btn.has{border-color:#e5484d}
#trax-bell-btn .bell-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#e5484d;color:#fff;font-size:12px;font-weight:800;align-items:center;justify-content:center;border:2px solid #0d0f12}
#trax-bell{position:fixed;right:22px;bottom:86px;z-index:9997;width:380px;max-width:calc(100vw - 30px);max-height:70vh;overflow-y:auto;background:#14171c;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:none}
#trax-bell .bl-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
#trax-bell .bl-x{background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
#trax-bell .bl-empty{padding:22px 14px;text-align:center;color:var(--muted)}
#trax-bell .bl-item{padding:11px 14px;border-bottom:1px solid #1d2127;cursor:pointer;border-left:5px solid #f5b82e}
#trax-bell .bl-item.sev-red{border-left-color:#e5484d}
#trax-bell .bl-item.muted{opacity:.55;border-left-color:#555;cursor:default}
#trax-bell .bl-item:hover{background:#1a1f26}
#trax-bell .bl-title{font-weight:700;font-size:13.5px}
#trax-bell .bl-detail{font-size:12.5px;color:var(--muted);margin-top:3px}
#trax-bell .bl-actions{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
#trax-bell .bl-go{font-size:12px;color:#ff6a00;font-weight:700}
#trax-bell .bl-dismiss,#trax-bell .bl-restore,#trax-bell .bl-toggle{font-size:11.5px;padding:4px 9px;border-radius:7px;border:1px solid var(--line);background:#1d2127;color:#fff;cursor:pointer}
#trax-bell .bl-foot{padding:10px 14px;font-size:12.5px}
@media print{#trax-bell-btn,#trax-bell{display:none!important}}

#trax-chat-btn{position:fixed;right:154px;bottom:22px;z-index:9998;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:#1d2127;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#trax-chat{position:fixed;right:22px;bottom:86px;z-index:9997;width:400px;max-width:calc(100vw - 30px);height:520px;max-height:75vh;background:#14171c;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:none;flex-direction:column}
#trax-chat .ch-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
#trax-chat .ch-x{background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
#trax-chat .ch-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
#trax-chat .ch-msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5}
#trax-chat .ch-msg.me{align-self:flex-end;background:#ff6a00;color:#fff}
#trax-chat .ch-msg.bot{align-self:flex-start;background:#1d2127}
#trax-chat .ch-msg a{color:#ff9a4d;text-decoration:underline}
#trax-chat .ch-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
#trax-chat .ch-chip{font-size:12px;padding:6px 10px;border-radius:14px;border:1px solid var(--line);background:#1d2127;color:#fff;cursor:pointer}
#trax-chat .ch-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
#trax-chat .ch-in{flex:1;padding:9px}
#trax-chat .ch-send{padding:8px 14px;border-radius:8px;border:0;background:#ff6a00;color:#fff;font-weight:700;cursor:pointer}
@media print{#trax-chat-btn,#trax-chat{display:none!important}}

/* ---- Ventrax look for the floating buttons and panels ---- */
#trax-calc-btn,#trax-bell-btn,#trax-chat-btn{width:52px;height:52px;border-radius:14px;padding:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1c2026,#12151a);border:1px solid #2c323b;color:var(--accent);
  box-shadow:0 8px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .12s,box-shadow .12s,background .12s,color .12s,border-color .12s;position:fixed}
#trax-calc-btn::after,#trax-bell-btn::after,#trax-chat-btn::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--heat);opacity:.9}
#trax-calc-btn:hover,#trax-bell-btn:hover,#trax-chat-btn:hover{transform:translateY(-2px);background:var(--heat);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(255,106,0,.38)}
#trax-calc-btn:hover::after,#trax-bell-btn:hover::after,#trax-chat-btn:hover::after{opacity:0}
#trax-calc-btn{background:var(--heat);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(255,106,0,.35)}
#trax-calc-btn::after{background:rgba(255,255,255,.55)}
#trax-calc-btn:hover{background:linear-gradient(160deg,#ff8f3d,#ff6a00);}
#trax-calc-btn:hover::after{opacity:.9}
#trax-bell-btn.has{border-color:rgba(255,106,0,.65);box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 0 3px rgba(255,106,0,.16)}
#trax-bell-btn .bell-badge{top:-8px;right:-8px;background:var(--heat);border:2px solid #0a0b0d;font-family:var(--font-mono);box-shadow:0 2px 8px rgba(0,0,0,.5)}
#trax-calc,#trax-bell,#trax-chat{border-radius:16px;border:1px solid #2c323b;background:var(--heat) top/100% 3px no-repeat,#14171c;padding-top:3px}
#trax-calc{padding:15px 12px 12px}
#trax-calc .cx-head,#trax-bell .bl-head b,#trax-chat .ch-head b{font-family:var(--font-display);letter-spacing:.02em}
#trax-calc .cx-keys button.eq{background:var(--heat);border-color:transparent}
#trax-chat .ch-msg.me{background:linear-gradient(160deg,#ff8f3d,#ff6a00 60%,#e8480c)}
#trax-chat .ch-send{background:var(--heat)}
#trax-chat .ch-chip:hover{border-color:var(--accent);color:var(--accent-2)}
#trax-bell .bl-item:hover{background:#1a1f26}
#trax-chat .ch-new{background:none;border:1px solid var(--line);color:var(--muted);font-size:11.5px;padding:4px 9px;border-radius:7px;cursor:pointer;margin-right:8px}
#trax-chat .ch-new:hover{color:var(--accent-2);border-color:var(--accent)}

/* running total under the line items */
.li-totals{display:flex;justify-content:flex-end;position:sticky;bottom:92px;z-index:5;pointer-events:none;margin-top:10px}
.li-totals-in{pointer-events:auto;min-width:260px;padding:12px 16px;border:1px solid #2c323b;border-radius:14px;background:var(--heat) top/100% 3px no-repeat,#14171c;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.li-totals-in>div{display:flex;justify-content:space-between;gap:28px;font-size:13px;color:var(--muted);padding:2px 0}
.li-totals-in b{font-family:var(--font-mono);color:var(--text);font-variant-numeric:tabular-nums}
.li-totals-in .lt-grand{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:15px;color:var(--text);font-weight:700}
.li-totals-in .lt-grand b{font-size:20px;color:var(--accent-2)}
@media print{.li-totals{display:none!important}}
#trax-calc .cx-clear{background:none;border:1px solid rgba(214,86,79,.6);color:#ff7a72;font-size:12px;font-weight:700;padding:3px 10px;border-radius:7px;cursor:pointer;margin-right:8px}
#trax-calc .cx-clear:hover{background:rgba(214,86,79,.15)}
#trax-calc .cx-keys button.clr{color:#ff7a72;border-color:rgba(214,86,79,.5)}

.btn[disabled],button.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}

/* readable on both the white invoice panels and the dark theme */
.btn.btn-solid-dark{background:#262b33;color:#ffffff;border:1px solid #3f4650;font-weight:600}
.btn.btn-solid-dark:hover{background:#323946;border-color:var(--accent)}

/* Preview / Edit toggle on invoice + estimate forms */
.doc-preview-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.doc-preview-bar .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.doc-preview-bar .seg-btn{background:rgba(255,255,255,.04);color:var(--text,#eee);border:0;padding:8px 16px;font-weight:600;cursor:pointer;font-size:14px}
.doc-preview-bar .seg-btn.active{background:#ff6a00;color:#fff}
.doc-previewing > *:not(.doc-preview-bar):not(.doc-preview):not(.doc-actions):not(input[type=hidden]){display:none !important}
.doc-preview .dp-paper{background:#fff;color:#1a1a1a;border-radius:10px;padding:28px 32px;max-width:900px;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.doc-preview .dp-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #ff6a00;padding-bottom:12px;margin-bottom:16px}
.doc-preview .dp-brand{font-size:22px;font-weight:800}
.doc-preview .dp-draft{font-size:11px;letter-spacing:.08em;color:#b45309;margin-top:4px;font-weight:700}
.doc-preview .dp-title{font-size:26px;font-weight:800;color:#ff6a00;letter-spacing:.06em}
.doc-preview .dp-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#777}
.doc-preview .dp-cust{font-size:17px;font-weight:700;margin-top:2px}
.doc-preview .dp-meta{margin-top:6px;color:#444;font-size:14px}
.doc-preview .dp-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px}
.doc-preview .dp-table th{text-align:left;border-bottom:2px solid #1a1a1a;padding:8px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#333;background:none}
.doc-preview .dp-table td{padding:8px 6px;border-bottom:1px solid #e3e3e3;vertical-align:top;color:#1a1a1a}
.doc-preview .dp-table .r{text-align:right;white-space:nowrap}
.doc-preview .dp-sec td{background:#f4f4f4;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.doc-preview .dp-part{font-family:var(--font-mono,monospace);font-size:12px;color:#666}
.doc-preview .dp-empty{color:#888;font-style:italic}
.doc-preview .dp-totals{margin-left:auto;max-width:280px;margin-top:16px}
.doc-preview .dp-totals div{display:flex;justify-content:space-between;padding:5px 0}
.doc-preview .dp-grand{border-top:2px solid #1a1a1a;margin-top:4px;padding-top:8px !important;font-size:18px;font-weight:800}

.doc-preview .dp-date{font-size:13px;font-weight:600;color:#444;letter-spacing:0;text-align:right;margin-top:4px}
.doc-preview .dp-loading{color:#aaa;padding:30px;text-align:center}
.doc-preview .dp-note{font-size:12px;letter-spacing:.04em;color:#f5b82e;margin:4px 0 8px;font-weight:600}
.doc-preview .dp-frame{width:100%;max-width:900px;border:0;border-radius:10px;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.35);display:block;min-height:400px}
.doc-preview-bar .doc-date-field{margin-left:auto;display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;white-space:nowrap}
.doc-preview-bar .doc-date-field input{width:auto;min-width:150px;padding:8px 10px}

/* Compact sidebar groups so all five (Estimates, Invoices, Customers, Dealers, Suppliers) fit on one screen */
.nav-group{margin:6px 0;padding:3px 5px 4px}
.nav-group-head{padding:4px 8px 2px}
.nav .nav-group a{padding:6px 10px;margin:1px 0;white-space:nowrap}
.nav .sep{margin:10px 0}
.nav-label{margin:12px 0 4px}
/* keep the menu icons full size even when a label is long */
.nav-plus,.nav-bars{flex:none}
.nav .nav-group a{padding:7px 10px}
/* a little more room inside the menu so labels like "Customers Overview" fit beside the scrollbar */
.side{padding-left:14px;padding-right:12px}

/* Menu cards size themselves to the window (see fit-menu.js); these are the values it adjusts */
.nav .nav-group a{padding:var(--navpad,7px) 12px;font-size:var(--navfont,14px)}
.nav-group-head{font-size:calc(var(--navfont,14px) * .8)}
.nav-group{margin:calc(var(--navpad,7px) * .6) 0}

.badbadge{background:rgba(214,86,79,.12);color:var(--bad);border:1px solid rgba(214,86,79,.3)}

.li-includes-box{grid-column:1/-1;font-size:12px;color:var(--muted);padding:2px 0 4px 118px;border-left:3px solid #2a3340;margin-left:2px}
.li-includes-box .li-inc-label{font-weight:700;color:#9fb0c4}.li-includes-box a{margin-left:8px;font-size:11px;color:var(--muted)}
.sg-tag.assembly{background:#2a3340;color:#cfe0f5}
@media(max-width:700px){.li-includes-box{padding-left:8px}}

#trax-msg-btn{position:fixed;right:220px;bottom:22px;z-index:9998;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:#1d2127;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#trax-msg-btn:hover{background:var(--heat);border-color:transparent}
#trax-msg-btn .msg-dot{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:#e5392b;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
#trax-msg{position:fixed;right:22px;bottom:86px;z-index:9996;width:380px;max-width:calc(100vw - 30px);height:500px;max-height:75vh;background:#14171c;border:1px solid #2c323b;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden}
#trax-msg .mg-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
#trax-msg .mg-head b{flex:1;font-size:14px}
#trax-msg .mg-head button{background:none;border:0;color:#fff;font-size:16px;cursor:pointer}
#trax-msg .mg-list{flex:1;overflow-y:auto}
#trax-msg .mg-row{position:relative;padding:10px 14px 10px 24px;border-bottom:1px solid #1d2127;cursor:pointer}
#trax-msg .mg-row:hover{background:#1a1f26}
#trax-msg .mg-new{position:absolute;left:10px;top:16px;width:8px;height:8px;border-radius:50%;background:#ff6a00}
#trax-msg .mg-all{display:block;padding:12px 14px;font-size:13px;color:#ff9a4d}
#trax-msg .mg-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
#trax-msg .mg-msg{max-width:86%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.45}
#trax-msg .mg-msg.me{align-self:flex-end;background:#ff6a00;color:#fff}
#trax-msg .mg-msg.them{align-self:flex-start;background:#1d2127}
#trax-msg .mg-msg.sys{font-style:italic;opacity:.92}
#trax-msg .mg-who{font-size:10.5px;opacity:.7;margin-bottom:2px}
#trax-msg .mg-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
#trax-msg .mg-in{flex:1;padding:9px}
#trax-msg .mg-send{padding:8px 14px;border-radius:8px;border:0;background:var(--heat);color:#fff;font-weight:700;cursor:pointer}
.thread-log{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;padding:4px 2px}
.thread-msg{max-width:78%;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.5}
.thread-msg.mine{align-self:flex-end;background:#2a2118;border:1px solid #5b3a1a}
.thread-msg.theirs{align-self:flex-start;background:#1d2127}
.thread-msg.sys .thread-body{font-style:italic}
.thread-who{font-size:11px;opacity:.65;margin-bottom:2px}
.thread-body{white-space:pre-wrap}
@media print{#trax-msg-btn,#trax-msg{display:none!important}}
@media(max-width:700px){#trax-msg-btn{right:22px;bottom:150px}}

/* v166: the single links above the coloured cards (Dashboard, Messages, Order Inbox) shrink with the menu so Suppliers stays on screen; no sideways scrollbar */
.nav{overflow-x:hidden}
.nav > a{padding-top:calc(var(--navpad,7px) * .6);padding-bottom:calc(var(--navpad,7px) * .6);margin:1px 0}
.nav-label{margin:calc(var(--navpad,7px) * .7) 0 2px}

/* v169: Chrome paints saved-address / autofilled boxes pale blue with black text; keep them dark like the rest of Trax */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,
select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #0d0f12 inset !important;box-shadow:0 0 0 1000px #0d0f12 inset !important;
  -webkit-text-fill-color:var(--text) !important;caret-color:var(--text);border-color:var(--line);
  transition:background-color 99999s ease-out 0s}
input:autofill,textarea:autofill,select:autofill{box-shadow:0 0 0 1000px #0d0f12 inset !important;-webkit-text-fill-color:var(--text) !important}

/* v172: stock number sits apart from the yellow / red tags beside it */
.stock-cell{display:flex;align-items:center;gap:0}
.stock-num{display:inline-block;min-width:34px;font-size:16px;padding-right:12px;margin-right:14px;border-right:1px solid var(--line);text-align:right;line-height:1.6}
.stock-tags{display:flex;flex-wrap:wrap;gap:6px 6px;align-items:center}
.stock-tags .pill{white-space:nowrap}