/* Adil Autos - inventory, purchase & sales */
:root{
  --bg:#f4f6fa; --panel:#fff; --ink:#16202e; --ink2:#5b6b80; --line:#e2e8f2;
  --brand:#12467e; --brand2:#1c6fc4; --accent:#f0a020;
  --ok:#137a4c; --ok-bg:#e6f6ee; --bad:#b3261e; --bad-bg:#fdecea; --warn:#8a5a00; --warn-bg:#fff5e0;
  --radius:10px; --shadow:0 1px 2px rgba(18,32,54,.06), 0 4px 16px rgba(18,32,54,.06);
  /* Surfaces that were hard-coded before. They have to be tokens for the dark
     palette below to reach them. */
  --field:#fff; --field-line:#cfd8e6; --field-off:#f1f4f9; --focus:#bcd7f5;
  --head:#f7f9fc; --hover:#f8fafd; --btn:#fff; --btn-hover:#f2f5fa;
  --brand2-hover:#15619f; --tag-grey:#eef1f6;
  --tab-on-bg:#fff; --tab-on-ink:var(--brand);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.45 "Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%;
}
b,strong{font-weight:600}
a{color:var(--brand2)}
.muted{color:var(--ink2)}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--brand); color:#fff; padding:10px 16px;
  position:sticky; top:0; z-index:40; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.brand{display:flex; align-items:center; gap:10px}
.brand b{display:block; font-size:15px; letter-spacing:.2px}
.brand small{display:block; font-size:11px; opacity:.75}
.logo{
  width:36px;height:36px;border-radius:9px;background:var(--accent);color:#3a2a00;
  display:grid;place-items:center;font-weight:700;font-size:15px;
}
.tabs{display:flex; gap:2px; flex-wrap:wrap; flex:1}
.tabs button{
  background:transparent;border:0;color:#cfe0f2;padding:8px 13px;border-radius:8px;
  font:inherit;font-weight:500;cursor:pointer;
}
.tabs button:hover{background:rgba(255,255,255,.1);color:#fff}
.tabs button.on{background:var(--tab-on-bg);color:var(--tab-on-ink);font-weight:600}
.who{display:flex;align-items:center;gap:10px;font-size:13px}

/* ---------- layout ---------- */
main{padding:18px; max-width:1500px; margin:0 auto}
.loading{padding:60px;text-align:center;color:var(--ink2)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}
.panel > h2{
  margin:0;padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.panel > h2 .sp{flex:1}
.panel-body{padding:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row > *{flex:1 1 150px}
.row > .fixed{flex:0 0 auto}

/* ---------- stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2)}
.stat .v{font-size:22px;font-weight:600;margin-top:5px;line-height:1.2}
.stat .s{font-size:12px;color:var(--ink2);margin-top:3px}
.stat.bad .v{color:var(--bad)} .stat.ok .v{color:var(--ok)} .stat.brand .v{color:var(--brand2)}
/* A tile that opens a screen has to look like it does, and behave for keyboards. */
.stat.clickable{cursor:pointer;transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease}
.stat.clickable:hover{border-color:var(--brand2);box-shadow:0 4px 18px rgba(18,32,54,.14);transform:translateY(-1px)}
.stat.clickable:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.stat.clickable::after{content:"\2192";float:right;margin-top:-18px;color:var(--ink2);opacity:.35;font-size:15px}
.stat.clickable:hover::after{opacity:.9;color:var(--brand2)}

/* ---------- forms ---------- */
label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:3px}
label.inline{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink)}
input,select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);
  font:inherit;color:var(--ink);
}
input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);border-color:var(--brand2)}
input:disabled,input[readonly]{background:var(--field-off);color:var(--ink2)}
textarea{min-height:60px;resize:vertical}
.field{margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--field-line);border-radius:7px;overflow:hidden;background:var(--field)}
.seg button{background:var(--field);border:0;padding:8px 14px;font:inherit;cursor:pointer;color:var(--ink2)}
.seg button + button{border-left:1px solid var(--field-line)}
.seg button.on{background:var(--brand2);color:#fff;font-weight:600}
.seg.sm button{padding:5px 10px;font-size:12px}

.btn{
  display:inline-block;border:1px solid var(--field-line);background:var(--btn);color:var(--ink);
  padding:8px 14px;border-radius:7px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--btn-hover)}
.btn.primary{background:var(--brand2);border-color:var(--brand2);color:#fff}
.btn.primary:hover{background:var(--brand2-hover)}
.btn.danger{background:var(--btn);border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn.block{width:100%;margin-top:6px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.linkbtn{background:none;border:0;color:var(--brand2);cursor:pointer;font:inherit;padding:0;text-decoration:underline}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{
  background:var(--head);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink2);font-weight:600;white-space:nowrap;position:sticky;top:0;
}
tbody tr:hover{background:var(--hover)}
tfoot td{font-weight:600;background:var(--head);border-top:2px solid var(--line)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:34px;text-align:center;color:var(--ink2)}
tr.low td{background:var(--warn-bg)}
tr.out td{background:var(--bad-bg)}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.tag.cash{background:var(--ok-bg);color:var(--ok)}
.tag.credit{background:var(--warn-bg);color:var(--warn)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.low{background:var(--warn-bg);color:var(--warn)}
.tag.out{background:var(--bad-bg);color:var(--bad)}
.tag.grey{background:var(--tag-grey);color:var(--ink2)}

.alert{padding:10px 13px;border-radius:8px;margin-bottom:12px;font-size:13px}
.alert.error{background:var(--bad-bg);color:var(--bad);border:1px solid #f3c3bf}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #f0dcaa}
.alert.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #bfe4d1}

/* ---------- voucher lines ---------- */
.lines td{padding:6px 6px}
.lines input,.lines select{padding:6px 8px}
.lines .calc{font-size:11.5px;color:var(--ink2);margin-top:2px;display:block}
.totals{margin-left:auto;width:min(340px,100%)}
.totals div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line)}
.totals div:last-child{border:0;border-top:2px solid var(--line);margin-top:4px;padding-top:9px;font-size:17px;font-weight:600}

/* ---------- modal ---------- */
.backdrop{position:fixed;inset:0;background:rgba(16,26,40,.5);display:grid;place-items:center;padding:16px;z-index:60}
.modal{background:var(--panel);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(720px,100%);max-height:90vh;overflow:auto}
.modal h3{margin:0;padding:14px 18px;border-bottom:1px solid var(--line);font-size:16px;display:flex;align-items:center}
.modal h3 .sp{flex:1}
.modal .body{padding:18px}
.modal .foot{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:var(--head);position:sticky;bottom:0}
.x{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--ink2)}

#toast-root{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toast{background:#16202e;color:#fff;padding:11px 16px;border-radius:9px;box-shadow:0 8px 26px rgba(0,0,0,.3);max-width:380px;font-size:13.5px}
.toast.err{background:var(--bad)}
.toast.ok{background:var(--ok)}

/* ---------- login ---------- */
.login-body{display:grid;place-items:center;min-height:100vh;background:linear-gradient(150deg,#12467e,#0b2b50)}
.login-card{background:var(--panel);padding:32px;border-radius:14px;width:min(370px,92vw);box-shadow:0 22px 60px rgba(0,0,0,.35);text-align:center}
.login-card h1{margin:14px 0 2px;font-size:21px}
.login-card p.muted{margin:0 0 18px;font-size:13px}
.login-card label{text-align:left;margin-top:11px}
.login-logo{width:56px;height:56px;border-radius:14px;background:var(--accent);color:#3a2a00;display:grid;place-items:center;font-weight:700;font-size:21px;margin:0 auto}
.hint{font-size:12px;color:var(--ink2);margin-top:16px;line-height:1.5}

/* ---------- print ---------- */
.print-only{display:none}
@media print{
  .topbar,.who,#toast-root,.noprint,.btn,.x,.modal .foot{display:none !important}
  body{background:#fff}
  main{padding:0;max-width:none}
  .panel{border:0;box-shadow:none;margin:0}
  .print-only{display:block}
  th{position:static}
  /* When a ledger or invoice is open, print that alone. */
  .backdrop{position:static;background:none;padding:0;display:block}
  .modal{box-shadow:none;max-height:none;width:auto;overflow:visible}
  .modal h3{border:0;padding:0 0 10px;font-size:18px}
  .modal .body{padding:0}
  body:has(.modal) main{display:none}
}

@media (max-width:760px){
  .topbar{gap:10px;padding:9px 12px}
  .tabs{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .tabs button{white-space:nowrap}
  .who{margin-left:auto}
  main{padding:12px}
  .panel-body{padding:12px}
  .stat .v{font-size:19px}
}

/* ---------- dark mode ----------
   Two triggers, one palette. The media query follows the device setting unless
   the reader has explicitly chosen light; the attribute rule lets the in-app
   toggle win in either direction. Only tokens are redefined - no component
   rule is duplicated, so the two themes cannot drift apart. */
:root[data-theme="dark"], html[data-theme="dark"] body { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e141d; --panel:#161f2c; --ink:#e7eefa; --ink2:#93a4bb; --line:#26334a;
    --brand:#0b2946; --brand2:#4b9bec; --brand2-hover:#6fb0f2;
    --ok:#4ade80; --ok-bg:#12291d; --bad:#fb7185; --bad-bg:#2c1620;
    --warn:#fbbf24; --warn-bg:#2b2211;
    --field:#0f1825; --field-line:#31405c; --field-off:#182233; --focus:#2a5b8f;
    --head:#131c28; --hover:#1b2534; --btn:#1a2432; --btn-hover:#222f42;
    --tag-grey:#222e42; --tab-on-bg:#22304a; --tab-on-ink:#e7eefa;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0e141d; --panel:#161f2c; --ink:#e7eefa; --ink2:#93a4bb; --line:#26334a;
  --brand:#0b2946; --brand2:#4b9bec; --brand2-hover:#6fb0f2;
  --ok:#4ade80; --ok-bg:#12291d; --bad:#fb7185; --bad-bg:#2c1620;
  --warn:#fbbf24; --warn-bg:#2b2211;
  --field:#0f1825; --field-line:#31405c; --field-off:#182233; --focus:#2a5b8f;
  --head:#131c28; --hover:#1b2534; --btn:#1a2432; --btn-hover:#222f42;
  --tag-grey:#222e42; --tab-on-bg:#22304a; --tab-on-ink:#e7eefa;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
}

/* Printing is always on white paper, whatever the screen is doing. */
@media print {
  :root, :root[data-theme="dark"] {
    --bg:#fff; --panel:#fff; --ink:#000; --ink2:#444; --line:#bbb;
    --head:#f2f2f2; --hover:#fff; --field:#fff; --btn:#fff;
  }
}

/* ---------- user manual ---------- */
.manual h3{margin:22px 0 8px;font-size:15px;color:var(--brand2)}
.manual h3:first-child{margin-top:0}
.manual p{margin:0 0 10px;max-width:70ch}
.manual ol,.manual ul{margin:0 0 12px;padding-left:22px;max-width:70ch}
.manual li{margin-bottom:5px}
.manual .step{
  background:var(--head);border:1px solid var(--line);border-left:3px solid var(--brand2);
  border-radius:8px;padding:12px 14px;margin:0 0 12px;
}
.manual .step b{color:var(--brand2)}
.manual code{background:var(--field-off);padding:1px 5px;border-radius:4px;font-size:12.5px}