/* ============================================================
   Doorworks Stock Control — stylesheet
   Times New Roman · navy · minimal · mobile first
   ============================================================ */

:root{
  --bg:#F7F8F9; --surface:#FFFFFF; --surface2:#FBFBFC;
  --line:#E1E5EA; --line2:#EDF0F3;
  --ink:#16191D; --muted:#6C7480;
  --navy:#12365C; --navy-d:#0A2440; --navy-l:#E9EFF5; --navy-b:#CFDCE8;
  --in:#1B4F7E;  --in-bg:#EAF0F6;
  --out:#94402F; --out-bg:#F7EBE7;
  --warn:#8A6A12;--warn-bg:#F8F2E2;
  --rail:230px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Times New Roman',Times,serif;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit;}
button{cursor:pointer;}
a{color:var(--navy);}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.hidden{display:none !important;}

/* ---------------- login ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
.login{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:3px;}
.login-h{padding:26px 24px 18px;border-bottom:1px solid var(--line);}
.login-h h1{margin:0;font-size:26px;color:var(--navy);}
.login-h p{margin:6px 0 0;color:var(--muted);font-size:14px;letter-spacing:.14em;text-transform:uppercase;}
.login-b{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px;}
.login-err{background:var(--out-bg);color:var(--out);padding:10px 12px;border-radius:2px;font-size:14px;}

/* ---------------- shell ---------------- */
.shell{display:flex;min-height:100vh;}
.rail{
  width:var(--rail);flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{padding:22px 20px 18px;border-bottom:1px solid var(--line);}
.brand b{display:block;font-size:21px;color:var(--navy);line-height:1.15;}
.brand span{display:block;font-size:12px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:5px;}
.rail-menu{padding:12px 10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;}
.rail-menu button{
  display:block;width:100%;background:none;border:0;text-align:left;
  padding:9px 12px;border-radius:3px;font-size:16px;border-left:2px solid transparent;
}
.rail-menu button:hover{background:var(--surface2);}
.rail-menu button.on{background:var(--navy-l);color:var(--navy);font-weight:700;border-left-color:var(--navy);}
.rail-sec{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:15px 12px 5px;}
.rail-fx{padding:12px 20px;border-top:1px solid var(--line);}
.rail-fx div{display:flex;justify-content:space-between;font-size:14px;padding:2px 0;}
.rail-fx div span:first-child{color:var(--muted);font-size:12px;letter-spacing:.08em;}
.rail-foot{padding:10px 20px 16px;font-size:11.5px;color:var(--muted);line-height:1.6;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:14px 26px;display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;position:sticky;top:0;z-index:20;
}
.topbar h1{margin:0;font-size:26px;color:var(--navy);line-height:1.15;}
.topbar p{margin:3px 0 0;color:var(--muted);font-size:14px;max-width:62ch;}
.who{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.who-n{text-align:right;font-size:13.5px;line-height:1.3;}
.who-n b{display:block;}
.who-n span{color:var(--muted);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:3px;padding:6px 11px;font-size:19px;line-height:1;}
.body{padding:20px 26px 70px;}

/* ---------------- primitives ---------------- */
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.card{background:var(--surface);border:1px solid var(--line);border-radius:3px;margin-bottom:18px;}
.card:last-child{margin-bottom:0;}
.card-h{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;}
.card-h h3{margin:0;font-size:18px;color:var(--navy);}
.card-p{padding:16px;}
.note{background:var(--navy-l);border:1px solid var(--navy-b);border-radius:2px;
  padding:11px 14px;font-size:14px;color:var(--navy);margin-bottom:16px;}
.note.warn{background:var(--warn-bg);border-color:#E7D9AE;color:var(--warn);}
.note.err{background:var(--out-bg);border-color:#E9C9BF;color:var(--out);}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:18px;}
.form-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;margin-bottom:18px;}
.form-split .card{margin-bottom:0;}
.split .card{margin-bottom:0;}
.hint{font-size:13px;color:var(--muted);line-height:1.45;}
.spinner{padding:40px;text-align:center;color:var(--muted);}
.empty{padding:44px 20px;text-align:center;color:var(--muted);}
.empty b{display:block;font-size:18px;color:var(--navy);margin-bottom:5px;}

/* ---------------- tiles ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px;}
.tile{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--navy);
  border-radius:3px;padding:13px 15px;}
.tile.i{border-top-color:var(--in);} .tile.o{border-top-color:var(--out);} .tile.w{border-top-color:var(--warn);}
.tile b{display:block;font-size:24px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums;}
.tile small{display:block;font-size:13px;color:var(--muted);margin-top:2px;}

/* ---------------- buttons ---------------- */
.btn{border:1px solid var(--navy);background:var(--navy);color:#fff;padding:8px 17px;
  border-radius:2px;font-size:15.5px;white-space:nowrap;}
.btn:hover{background:var(--navy-d);border-color:var(--navy-d);}
.btn.ghost{background:transparent;color:var(--navy);}
.btn.ghost:hover{background:var(--navy-l);}
.btn.quiet{background:transparent;color:var(--muted);border-color:var(--line);}
.btn.quiet:hover{color:var(--ink);border-color:var(--muted);background:transparent;}
.btn.danger{background:var(--out);border-color:var(--out);}
.btn.danger:hover{background:#7C3527;border-color:#7C3527;}
.btn.sm{padding:5px 11px;font-size:14px;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.linkb{background:none;border:0;color:var(--navy);padding:3px 5px;font-size:14px;
  text-decoration:underline;text-underline-offset:2px;}
.linkb.del{color:var(--out);}
.linkb[disabled]{color:var(--muted);opacity:.5;cursor:not-allowed;text-decoration:none;}
.chips{display:flex;gap:5px;flex-wrap:wrap;}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);
  padding:7px 12px;border-radius:2px;font-size:14.5px;}
.chip:hover{border-color:var(--navy);color:var(--navy);}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;}

/* ---------------- forms ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;padding:16px;}
.f{display:flex;flex-direction:column;gap:4px;min-width:0;}
.f.wide{grid-column:1/-1;}
.f label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.f input,.f select,.f textarea{
  border:1px solid var(--line);border-radius:2px;padding:9px;background:var(--surface);width:100%;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--navy);}
.f input[disabled],.f input[readonly]{background:var(--surface2);color:var(--muted);}
.f .err{color:var(--out);font-size:13px;}
.rule{grid-column:1/-1;border-top:1px solid var(--line);padding-top:7px;margin-top:2px;}
.form-f{padding:14px 16px;border-top:1px solid var(--line);display:flex;gap:10px;
  justify-content:flex-end;flex-wrap:wrap;}
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--surface2);}
.filters .f{min-width:130px;flex:0 1 auto;}
.filters .grow{margin-left:auto;}
.filter-toggle{display:none;}
.calc{background:var(--surface2);border:1px solid var(--line);border-radius:2px;
  padding:12px 14px;display:flex;flex-direction:column;gap:7px;}
.calc.hl{background:var(--navy-l);border-color:var(--navy-b);}
.crow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--muted);}
.crow b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;}
.crow.big{border-top:1px solid var(--line);padding-top:8px;}
.crow.big b{font-size:20px;}

/* ---------------- tables ---------------- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.t{width:100%;border-collapse:collapse;font-size:14.5px;}
table.t th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:400;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  background:var(--surface2);white-space:nowrap;}
table.t th.r,table.t td.r{text-align:right;}
table.t td{padding:8px 12px;border-bottom:1px solid var(--line2);vertical-align:middle;}
table.t tbody tr:hover{background:var(--surface2);}
table.t tfoot td{padding:10px 12px;background:var(--surface2);font-weight:700;
  border-top:1.5px solid var(--navy);font-variant-numeric:tabular-nums;}
.pname{font-weight:700;}
.pattr{font-size:12.5px;color:var(--muted);margin-top:1px;line-height:1.4;}
.rowlow td{background:#FDFBF3;}
.tag{display:inline-block;font-size:12px;padding:2px 7px;border-radius:2px;white-space:nowrap;}
.tag.i{background:var(--in-bg);color:var(--in);}
.tag.o{background:var(--out-bg);color:var(--out);}
.tag.n{background:#EEF0F3;color:var(--muted);}
.tag.w{background:var(--warn-bg);color:var(--warn);}
.cur{display:inline-block;font-size:11.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:2px;padding:1px 5px;}
.mbar{height:6px;background:#EBEEF1;border-radius:1px;overflow:hidden;margin-top:4px;min-width:70px;}
.mbar i{display:block;height:100%;}

/* ---------------- flow strip ---------------- */
.strip{padding:16px;}
.strip-area{display:flex;align-items:stretch;gap:3px;height:150px;}
.strip-c{flex:1;min-width:3px;display:flex;flex-direction:column;}
.strip-u{flex:1;display:flex;flex-direction:column;justify-content:flex-end;}
.strip-d{flex:1;display:flex;flex-direction:column;justify-content:flex-start;}
.strip-l{height:1px;background:var(--line);}
.strip-u i{display:block;background:var(--in);}
.strip-d i{display:block;background:var(--out);}
.strip-x{display:flex;gap:3px;margin-top:6px;}
.strip-x div{flex:1;min-width:3px;text-align:center;font-size:11px;color:var(--muted);overflow:hidden;}
.strip-k{display:flex;gap:18px;align-items:center;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);flex-wrap:wrap;font-size:13px;color:var(--muted);}
.kdot{display:inline-block;width:10px;height:10px;margin-right:6px;}

/* ---------------- modal ---------------- */
.veil{position:fixed;inset:0;background:rgba(10,36,64,.36);z-index:80;display:flex;
  align-items:flex-start;justify-content:center;padding:5vh 14px;overflow-y:auto;}
.modal{background:var(--surface);border-radius:3px;width:100%;max-width:680px;
  box-shadow:0 18px 48px rgba(10,36,64,.3);}
.modal.slim{max-width:440px;}
.modal-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:14px;}
.modal-h h3{margin:0;font-size:20px;color:var(--navy);}
.xbtn{background:none;border:0;font-size:24px;color:var(--muted);line-height:1;padding:0 4px;}

/* ---------------- toast ---------------- */
.toast{position:fixed;right:20px;bottom:20px;z-index:90;background:var(--navy-d);color:#fff;
  padding:12px 17px;border-radius:3px;box-shadow:0 8px 24px rgba(10,36,64,.28);
  max-width:340px;font-size:14.5px;}
.toast b{display:block;margin-bottom:2px;}
.toast.bad{background:#7C3527;}

/* ============================================================
   MOBILE  — rail becomes a drawer, tables become stacked cards
   ============================================================ */
.scrim{display:none;}

@media (max-width:900px){
  .shell{display:block;}
  .rail{
    position:fixed;left:0;top:0;bottom:0;height:100dvh;width:264px;z-index:70;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:0 0 40px rgba(10,36,64,.2);
  }
  body.nav-open .rail{transform:translateX(0);}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(10,36,64,.35);z-index:60;}
  .burger{display:inline-block;}
  .topbar{padding:12px 14px;align-items:center;}
  .topbar h1{font-size:21px;}
  .topbar p{display:none;}
  .topbar-l{display:flex;align-items:center;gap:12px;min-width:0;}
  .who-n{display:none;}
  .body{padding:14px 12px 80px;}
  .card{margin-bottom:14px;}
  .grid{grid-template-columns:1fr;gap:12px;padding:14px;}
  .form-split{grid-template-columns:1fr;}
  .filters{padding:12px 14px;}
  .filters .f{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px);}
  .filters .f.wide,.filters .grow{width:100%;flex:1 1 100%;margin-left:0;}
  /* collapse secondary filters behind a toggle so the data stays near the top */
  .filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    border:1px solid var(--line);background:var(--surface);border-radius:2px;
    padding:9px 12px;font-size:15px;color:var(--navy);}
  .filter-toggle b{font-weight:700;}
  .filters.collapsible.closed > *:not(.filter-toggle){display:none;}
  .tiles{grid-template-columns:1fr 1fr;gap:9px;}
  .tile b{font-size:20px;}
  .split{grid-template-columns:1fr;gap:14px;}
  .form-f{position:sticky;bottom:0;background:var(--surface);z-index:5;}
  .form-f .btn{flex:1;text-align:center;}
  .modal{max-width:100%;}
  .veil{padding:0;align-items:stretch;}
  .modal{border-radius:0;min-height:100dvh;}

  /* stacked table cards */
  table.stack,table.stack thead,table.stack tbody,table.stack tr,
  table.stack th,table.stack td,table.stack tfoot{display:block;width:100%;}
  table.stack thead{display:none;}
  table.stack tbody tr{
    border:1px solid var(--line);border-radius:3px;margin:0 0 10px;padding:10px 12px;background:var(--surface);
  }
  table.stack tbody tr:hover{background:var(--surface);}
  table.stack td{
    border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;
    align-items:baseline;text-align:right;
  }
  table.stack td::before{
    content:attr(data-l);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);text-align:left;flex:0 0 44%;
  }
  table.stack td.lead{display:block;text-align:left;border-bottom:1px solid var(--line2);
    padding-bottom:7px;margin-bottom:5px;}
  table.stack td.lead::before{display:none;}
  table.stack td.acts{display:flex;justify-content:flex-end;gap:6px;border-top:1px solid var(--line2);
    margin-top:6px;padding-top:7px;}
  table.stack td.acts::before{display:none;}
  table.stack td.blank{display:none;}
  table.stack tfoot td{display:flex;justify-content:space-between;border-top:0;}
  .scroll{overflow-x:visible;}
  .strip-area{height:120px;}
  .strip-x div{font-size:9px;}
}

@media (max-width:420px){
  .tiles{grid-template-columns:1fr;}
  .filters .f[data-full]{min-width:100%;flex:1 1 100%;}
}

@media print{
  .rail,.topbar .who,.burger,.filters,.form-f{display:none !important;}
  .body{padding:0;}
  .card{break-inside:avoid;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}