:root{
  --bg:#F7F7F4; --card:#FFFFFF; --line:#E5E5E0; --line2:#D5D5CE;
  --ink:#1C2321; --muted:#666; --faint:#999;
  --accent:#E20812; --accent-soft:#FDE7E8; --brand-yellow:#FCD114;
  --green:#1D7A4F; --green-bg:#E8F4EE;
  --red:#C0392B; --red-bg:#FBEAE8;
  --amber:#B7791F; --amber-bg:#FCF3E3;
  --blue:#2C5F8A; --blue-bg:#E9F0F6;
  --radius:8px;
  --sans:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit}
a{color:var(--blue);text-decoration:none}

#app{min-height:100vh}
.shell{display:flex;min-height:100vh}
.sidebar{width:224px;flex-shrink:0;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.brand{padding:20px 18px 14px;border-bottom:1px solid var(--line)}
.brand .nm{font-weight:800;font-size:16px;letter-spacing:.2px}
.brand .nm span{color:var(--accent)}
.brand .sub{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px}
nav.nv{padding:8px 10px;flex:1;overflow-y:auto}
.nv-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);padding:14px 12px 5px;font-weight:700}
.nv-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius);color:var(--muted);cursor:pointer;font-weight:600;margin-bottom:2px;user-select:none;font-size:13.5px}
.nv-item:hover{background:var(--bg);color:var(--ink)}
.nv-item.active{background:var(--accent);color:#fff}
.nv-item .ic{width:18px;height:18px;flex-shrink:0}
.nv-item .nbadge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px}
.side-foot{padding:12px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.role-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:var(--accent-soft);color:var(--accent);margin-bottom:6px}

.topbar{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.topbar h1{font-size:18px;margin:0;font-weight:800}
.topbar .sub{color:var(--muted);font-size:12.5px}
.spacer{flex:1}
.content{padding:24px 26px 80px;max-width:1240px;width:100%}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius);border:1px solid var(--line2);background:var(--card);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;transition:.12s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--bg)}
.btn.danger{color:var(--red)}
.btn.sm{padding:6px 11px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.kpis{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.kpi .lbl{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.kpi .val{font-size:26px;font-weight:800;margin-top:8px;letter-spacing:-.5px}
.kpi .foot{font-size:11.5px;color:var(--faint);margin-top:3px}
.section-head{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.section-head h2{font-size:15px;margin:0;font-weight:800}

.tbl-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:10px 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;background:var(--bg);border-bottom:1px solid var(--line);white-space:nowrap}
/* Row divider is deliberately stronger than a table-wide grid line: a
   medium (not thick) border in the body's own ink/font color, at low
   opacity so it reads as a clean separator rather than a heavy rule.
   This makes it easy to tell where one item's row ends and the next
   begins, which matters most on mobile once numbers are scrolling
   under a frozen item name. */
tbody td{padding:10px 14px;border-bottom:2px solid rgba(28,35,33,.16);vertical-align:middle;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FBFBF9}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:44px;text-align:center;color:var(--faint)}

/* Freeze the item-identity column on mobile: it pins in place while the
   rest of a row's numbers slide underneath it, so it's always clear
   which item a Qty/Balance/PV figure belongs to, however far you've
   scrolled. Smaller text on the frozen cell itself leaves more of the
   narrow screen for the columns that actually need to slide. */
@media(max-width:760px){
  /* The TD's own width/max-width is only a hint in table-layout:auto and
     browsers can ignore it, so the column is sized down instead by
     constraining the CONTENT it holds (the item-link button, or the
     name div for cells that don't use it) — the cell then shrinks to
     fit that, reliably, regardless of table layout quirks. Long names
     clamp to 2 lines with an ellipsis rather than growing the row. */
  .col-freeze{
    position:sticky;left:0;z-index:2;
    background:var(--card);
    box-shadow:2px 0 6px -2px rgba(0,0,0,.18);
    padding-left:10px;padding-right:8px;
    vertical-align:middle;
  }
  thead th.col-freeze{background:var(--bg)}
  tbody tr:hover td.col-freeze{background:#FBFBF9}
  tr.row-flagged td.col-freeze{background:#FFF9F9}
  .col-freeze .item-link{width:78px}
  .col-freeze .item-link .nm,
  .col-freeze>div:first-child{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;white-space:normal!important;
    font-size:10.5px!important;line-height:1.25;font-weight:700;
    max-width:78px;word-break:break-word;
  }
  .col-freeze .item-link .code,
  .col-freeze>div.tiny{
    font-size:9.5px!important;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;display:block;max-width:78px;
  }
  /* Keep the row-divider visible on the frozen cell too, so the
     boundary between items lines up across the sticky name column
     and the scrolling data columns. */
  tbody td.col-freeze{border-bottom:2px solid rgba(28,35,33,.16)}

  /* Pick List's item column: the name must stay fully readable (a
     picker choosing the wrong item is the exact mistake freezing this
     column was meant to prevent), so it gets more room than the
     generic frozen column above and is never clipped with an ellipsis
     — it just wraps onto as many lines as it needs. The SKU sits right
     under it. To make room, the neighboring "Available now" column
     (a short number) is pulled in narrower. */
  .col-freeze-item{max-width:none;width:118px}
  .col-freeze-item .item-link{width:112px}
  .col-freeze-item .item-link .nm,
  .col-freeze-item>div:first-child{
    display:block!important;-webkit-box-orient:unset!important;
    -webkit-line-clamp:unset!important;overflow:visible!important;
    white-space:normal!important;word-break:normal;overflow-wrap:break-word;
    font-size:12px!important;line-height:1.3;font-weight:700;
    width:112px;max-width:112px;
  }
  .col-freeze-item .item-link .code,
  .col-freeze-item>div.tiny{
    font-size:10px!important;white-space:normal;text-overflow:clip;
    overflow:visible;width:112px;max-width:112px;
  }
  th.col-narrow,td.col-narrow{padding-left:6px;padding-right:6px}
  td.col-narrow{font-size:12px;max-width:44px}
}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
.chip-in{background:var(--green-bg);color:var(--green)}
.chip-out{background:var(--red-bg);color:var(--red)}
.chip-tr{background:var(--blue-bg);color:var(--blue)}
.chip-low{background:var(--red-bg);color:var(--red)}
.chip-ok{background:var(--green-bg);color:var(--green)}
.chip-dry{background:var(--amber-bg);color:var(--amber)}
.chip-cold{background:var(--blue-bg);color:var(--blue)}
.mono{font-variant-numeric:tabular-nums}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--blue)}
.muted{color:var(--muted)}.tiny{font-size:11.5px}.center{text-align:center}

.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#444;margin-bottom:6px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:13.5px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder{color:var(--faint)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.row2>*,.row3>*{min-width:0}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search{position:relative;flex:1;min-width:180px;max-width:340px}
.search input{padding-left:34px}
.search .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
select.inline,input.inline{width:auto;min-width:130px}

.overlay{position:fixed;inset:0;background:rgba(28,35,33,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto}
.modal{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);width:100%;max-width:560px}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:16px;font-weight:800}
.modal-body{padding:22px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line)}

.toasts{position:fixed;bottom:22px;right:22px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--card);border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:10px;padding:12px 16px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:240px;max-width:340px;font-size:13px}
.toast.ok{border-left-color:var(--green)}
.toast.err{border-left-color:var(--red)}

.warnbox{background:var(--amber-bg);border:1px solid #E8D5A8;color:#7A5714;border-radius:var(--radius);padding:10px 13px;font-size:12.5px;margin:-4px 0 14px}
.errbox{background:var(--red-bg);border:1px solid #EFC4BE;color:var(--red);border-radius:var(--radius);padding:10px 13px;font-size:12.5px;margin-bottom:14px}

/* Auth screens */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px 28px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.auth-card h1{font-size:18px;margin:0 0 4px;font-weight:800}
.auth-card h1 span{color:var(--accent)}
.auth-card p.sub{font-size:12.5px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.auth-card button.go{margin-top:16px;width:100%;padding:11px;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.auth-card button.go:disabled{background:#eee;color:#999;cursor:default}
.auth-card .msg{margin-top:12px;font-size:12.5px;line-height:1.5}
.auth-card .ok{color:var(--green)}.auth-card .err{color:var(--red)}
.auth-foot{text-align:center;margin-top:16px;font-size:12px;color:var(--faint)}

.refresh-banner{position:fixed;top:0;left:0;right:0;background:var(--brand-yellow);color:#1C2321;font-weight:700;font-size:13px;text-align:center;padding:9px;z-index:200;cursor:pointer}

.hamburger{display:none;background:transparent;border:none;color:var(--ink);cursor:pointer;padding:6px}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(28,35,33,.4);z-index:55}
.sb-backdrop.show{display:block}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .hamburger{display:inline-flex}
  .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:60;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 12px 40px rgba(0,0,0,.2)}
  .sidebar.open{transform:translateX(0)}
  .row2,.row3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .content{padding:18px 16px 90px}
  .topbar{padding:14px 16px;flex-wrap:wrap;row-gap:10px}
  /* Page actions (Export, Add item, etc.) drop to their own full-width row
     below the title instead of squeezing the title/subtitle down to a
     sliver next to them. The spacer forces the line break. */
  .topbar .spacer{flex-basis:100%;height:0}
  #sl-actions{display:flex;gap:8px;flex-wrap:wrap;width:100%}
  #sl-actions:empty{display:none}
}

/* Brand logo */
.brand{background:var(--brand-yellow);border-bottom:2px solid #E8BD0E;padding:14px 16px}
.brand img.brand-logo{display:block;max-width:130px;height:auto;margin:0 auto;border-radius:6px}
.brand .sub{color:#6B5A00;text-align:center;margin-top:6px}
.auth-logo{display:block;max-width:170px;height:auto;margin:0 auto 16px;border-radius:8px}

/* Item link (clickable name in tables) */
.item-link{display:block;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;line-height:1.35;min-width:0;max-width:100%;overflow-wrap:break-word}
.item-link .nm{display:block;font-weight:700;font-size:13px;color:var(--ink);border-bottom:1px dashed transparent}
.item-link .code{display:block}
.item-link:hover .nm{color:var(--accent);border-bottom-color:var(--accent)}

/* Item profile */
.profile-head{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
.ip-name{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.ip-total{text-align:right;min-width:150px}
.ip-qty{font-size:30px;font-weight:800;letter-spacing:-.6px;color:var(--green);line-height:1.15}
.ip-qty.is-low{color:var(--red)}
.ip-h2{font-size:15px;margin:0 0 12px;font-weight:800}
.wh-pill{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-width:130px}
.note-row{border-left:3px solid var(--line2);padding:8px 0 8px 12px;margin-bottom:10px;font-size:13px}
.note-row:last-child{margin-bottom:0}
@media(max-width:760px){
  .profile-head{flex-direction:column}
  .ip-total{text-align:left}
}

/* Stock count — verify panel */
.verify-card{margin-bottom:16px}
.verify-detail{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:14px}
.verify-actual{text-align:right;min-width:150px}
.verify-inputs{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:14px}
tr.row-flagged{background:#FFF9F9}
tr.row-flagged:hover{background:#FFF2F2}
/* Pick list barcode scan — momentary highlight on the line a scan landed on */
tr.row-scanhit{background:#F1FBF4;transition:background 1.4s ease}
@media(max-width:760px){
  .verify-detail{flex-direction:column}
  .verify-actual{text-align:left}
  .verify-inputs>div{flex:1 1 100%!important}
}

/* Vendor typeahead */
.ac-wrap{position:relative}
.ac-list{position:absolute;top:calc(100% - 18px);left:0;right:0;background:var(--card);border:1px solid var(--line2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:230px;overflow-y:auto;z-index:30;display:none}
.ac-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.active{background:var(--bg)}

/* Permission grid */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.perm-item{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;background:var(--card);text-transform:none;letter-spacing:0;font-weight:400}
.perm-item:hover{border-color:var(--line2)}
.perm-item.on{border-color:var(--accent);background:var(--accent-soft)}
.perm-item input{pointer-events:none}
@media(max-width:760px){.perm-grid{grid-template-columns:1fr}}

/* Stock count — shortage callout */
.shortage-banner{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--red-bg);border:1px solid var(--red);border-left:4px solid var(--red);color:var(--red);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.reason-inline{margin-top:6px;font-size:12.5px;padding:6px 9px;max-width:230px}
.reason-inline:placeholder-shown{border-style:dashed;border-color:var(--red)}

/* Voided transactions */
tr.row-voided td{opacity:.55}
tr.row-voided td:first-child{position:relative}
tr.row-voided-note td{padding-top:0;border-bottom:1px solid var(--line);background:#FBFBF9}

/* ---- Barcode labels ---- */
.label-preview{display:flex;flex-wrap:wrap;gap:10px}
.label{border:1px dashed var(--line2);border-radius:4px;padding:2mm 3mm;background:#fff;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-sizing:border-box}
.lb-name{font-size:9pt;font-weight:700;line-height:1.15;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lb-meta{font-size:7pt;color:#333;margin-top:1mm;letter-spacing:.2px}
.lb-code{width:100%;margin-top:auto}
.label-sheet{display:flex;flex-wrap:wrap;gap:2mm}
#print-area{display:none}

@media print{
  body{background:#fff}
  body>*{display:none!important}
  #print-area{display:block!important;position:absolute;left:0;top:0;width:100%}
  .label{border:1px solid #ddd;page-break-inside:avoid;break-inside:avoid}
  @page{margin:6mm}
}