/* =====================================================================
   Sottozero Stock Take — brand tokens + shared styles
   Brand v1.0 (May 2026)
   ===================================================================== */
:root{
  --sz-primary:#0A4FD1; --sz-primary-dark:#0034A8; --sz-primary-soft:#EAF1FC;
  --sz-accent:#FF5C1F;
  --sz-good:#0F9E66; --sz-good-soft:rgba(15,158,102,.10);
  --sz-bad:#C9302E;  --sz-bad-soft:rgba(201,48,46,.10);
  --sz-warn:#B27310; --sz-warn-soft:rgba(178,115,16,.12);
  --n0:#FFFFFF; --n1:#F6F8FB; --n2:#EDF1F6; --n3:#DDE3EC;
  --n4:#AEB7C4; --n5:#6B7686; --n6:#3A4250; --n7:#161A20;
  --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 16px rgba(16,24,40,.08);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--n1);color:var(--n7);-webkit-font-smoothing:antialiased;line-height:1.45}
a{color:var(--sz-primary);text-decoration:none}
h1,h2,h3{margin:0 0 .4em;font-weight:800;letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.18rem} h3{font-size:1rem}
small,.muted{color:var(--n5)}
.hidden{display:none!important}

/* Layout */
.app{max-width:1180px;margin:0 auto;padding:18px}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--n0);
  border-bottom:1px solid var(--n2);position:sticky;top:0;z-index:30}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800}
.topbar .brand .dot{width:26px;height:26px;border-radius:8px;background:var(--sz-primary);
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900}
.topbar .spacer{flex:1}
.topbar .who{font-size:.85rem;color:var(--n5);text-align:right}
.topbar .who b{display:block;color:var(--n7)}

/* Cards */
.card{background:var(--n0);border:1px solid var(--n2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card.tight{padding:14px}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* Buttons */
.btn{appearance:none;border:1px solid var(--sz-primary);background:var(--sz-primary);color:#fff;
  font:inherit;font-weight:700;padding:11px 16px;border-radius:var(--radius-sm);cursor:pointer;
  transition:.12s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{background:var(--sz-primary-dark);border-color:var(--sz-primary-dark)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--sz-primary)}
.btn.ghost:hover{background:var(--sz-primary-soft)}
.btn.neutral{background:var(--n0);color:var(--n6);border-color:var(--n3)}
.btn.neutral:hover{background:var(--n1)}
.btn.danger{background:var(--sz-bad);border-color:var(--sz-bad)}
.btn.danger:hover{filter:brightness(.92)}
.btn.sm{padding:7px 11px;font-size:.85rem}
.btn.block{width:100%}
.btn.accent{background:var(--sz-accent);border-color:var(--sz-accent)}

/* Forms */
label{display:block;font-size:.82rem;font-weight:600;color:var(--n6);margin:0 0 5px}
input,select,textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--n3);
  border-radius:var(--radius-sm);background:var(--n0);color:var(--n7)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sz-primary);
  box-shadow:0 0 0 3px var(--sz-primary-soft)}
.field{margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:0}

/* Pills / badges */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  padding:3px 9px;border-radius:999px;text-transform:capitalize}
.pill.good{background:var(--sz-good-soft);color:var(--sz-good)}
.pill.bad{background:var(--sz-bad-soft);color:var(--sz-bad)}
.pill.warn{background:var(--sz-warn-soft);color:var(--sz-warn)}
.pill.info{background:var(--sz-primary-soft);color:var(--sz-primary)}
.pill.muted{background:var(--n2);color:var(--n5)}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--n2)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--n5)}
tbody tr:hover{background:var(--n1)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}

/* KPI tiles */
.kpi{padding:16px}
.kpi .v{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.kpi .l{font-size:.78rem;color:var(--n5);text-transform:uppercase;letter-spacing:.04em}
.kpi .v.primary{color:var(--sz-primary)}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--n2);margin-bottom:16px;overflow-x:auto}
.tab{padding:10px 14px;font-weight:700;color:var(--n5);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab.active{color:var(--sz-primary);border-bottom-color:var(--sz-primary)}

/* Toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--n7);color:#fff;padding:11px 16px;border-radius:10px;box-shadow:var(--shadow);font-size:.9rem;opacity:0;animation:tin .2s forwards}
.toast.good{background:var(--sz-good)} .toast.bad{background:var(--sz-bad)}
@keyframes tin{to{opacity:1}}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(16,24,40,.45);display:grid;place-items:center;z-index:80;padding:16px}
.modal{background:var(--n0);border-radius:var(--radius);max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:22px;box-shadow:var(--shadow)}
.modal.wide{max-width:880px}
.modal h2{margin-top:0}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 500px at 50% -10%,var(--sz-primary-soft),var(--n1))}
.login{background:var(--n0);border:1px solid var(--n2);border-radius:18px;box-shadow:var(--shadow);
  padding:30px;max-width:380px;width:100%}
.login .logo{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-weight:900;font-size:1.15rem}
.login .logo .dot{width:34px;height:34px;border-radius:10px;background:var(--sz-primary);color:#fff;display:grid;place-items:center;font-weight:900}

/* Mobile stock take */
.stmeta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.progressbar{height:8px;background:var(--n2);border-radius:999px;overflow:hidden}
.progressbar>i{display:block;height:100%;background:var(--sz-primary);border-radius:999px;transition:width .25s}
.search{position:sticky;top:54px;background:var(--n1);padding:8px 0;z-index:20}
.catbar{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.chip{padding:6px 12px;border:1px solid var(--n3);border-radius:999px;background:var(--n0);font-size:.82rem;font-weight:600;white-space:nowrap;cursor:pointer;color:var(--n6)}
.chip.active{background:var(--sz-primary);color:#fff;border-color:var(--sz-primary)}

.pline{background:var(--n0);border:1px solid var(--n2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px}
.pline.counted{border-color:var(--sz-good);background:var(--sz-good-soft)}
.pline.missing{border-color:var(--sz-warn);background:var(--sz-warn-soft)}
.pline .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pline .name{font-weight:700}
.pline .sub{font-size:.78rem;color:var(--n5)}
.pline .qtyrow{display:flex;gap:8px;align-items:center;margin-top:10px}
.pline .qtyrow input{text-align:center;font-size:1.15rem;font-weight:700;max-width:120px}
.stepper{width:46px;height:46px;border-radius:12px;border:1px solid var(--n3);background:var(--n0);
  font-size:1.4rem;font-weight:800;display:grid;place-items:center;cursor:pointer;color:var(--sz-primary);flex:0 0 auto}
.stepper:active{background:var(--sz-primary-soft)}
.miss-toggle{font-size:.8rem;font-weight:700;color:var(--sz-warn);cursor:pointer;display:inline-flex;gap:6px;align-items:center}

.sticky-bottom{position:sticky;bottom:0;background:linear-gradient(to top,var(--n1) 70%,transparent);
  padding:12px 0;margin-top:8px}

.notice{padding:16px;border-radius:var(--radius);background:var(--sz-warn-soft);color:var(--sz-warn);
  border:1px solid rgba(178,115,16,.25);font-weight:600}
.empty{text-align:center;color:var(--n5);padding:40px 16px}

.checkbox-row{display:flex;gap:10px;align-items:flex-start;background:var(--n1);padding:12px;border-radius:10px}
.checkbox-row input{width:auto;margin-top:3px}
.list-pick{max-height:240px;overflow:auto;border:1px solid var(--n3);border-radius:10px;padding:6px}
.list-pick label{display:flex;gap:8px;align-items:center;font-weight:500;padding:6px;margin:0;cursor:pointer}
.list-pick label:hover{background:var(--n1);border-radius:6px}
.list-pick input{width:auto}