:root{
  --ground:#f4f3ef; --ink:#1c1b18; --muted:#6b6862; --line:#e3e1da;
  --panel:#ffffff; --nav:#191713; --nav-ink:#e9e7e1;
  --accent:#2b5fb3; --warn:#b4530a; --danger:#b3261e; --ok:#2f7a3d;
  --warn-bg:#fbf1e6; --danger-bg:#fbeceb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  background:var(--ground); color:var(--ink); font-size:15px; line-height:1.45;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code,.mono,td.mono,.sku{font-family:"IBM Plex Mono",ui-monospace,monospace}

.app{display:flex; min-height:100vh}
.sidenav{
  width:210px; flex:0 0 210px; background:var(--nav); color:var(--nav-ink);
  padding:22px 14px; position:sticky; top:0; height:100vh;
}
.sidenav .brand{font-weight:700; font-size:19px; padding:2px 10px 18px}
.sidenav ul{list-style:none; margin:0; padding:0}
.sidenav li{margin:2px 0}
.sidenav a{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--nav-ink); padding:9px 12px; border-radius:8px; font-size:15px;
}
.sidenav a:hover{background:rgba(255,255,255,.06); text-decoration:none}
.sidenav a.active{background:var(--accent); color:#fff}
.sidenav .badge{
  background:var(--warn); color:#fff; border-radius:999px; font-size:12px;
  min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
}
.sidenav a.active .badge{background:rgba(0,0,0,.25)}
.sidenav .who{position:absolute; bottom:16px; left:14px; right:14px; font-size:12px; color:#8a877f; padding:0 10px}

.content{flex:1; padding:30px 40px; max-width:1500px}
.pagehead{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px}
.pagehead h1{margin:0; font-size:30px; letter-spacing:-.01em}
.pagehead .sub{margin:4px 0 0; color:var(--muted)}
.pagehead .actions{display:flex; gap:10px; align-items:center}

.btn{
  display:inline-block; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:9px 16px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer;
}
.btn:hover{text-decoration:none; border-color:#cfccc3}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.primary:hover{background:#254f95}
.btn.small{padding:6px 12px; font-weight:500}
.btn.danger{color:var(--danger); border-color:#e6c9c6}
.btn.danger:hover{background:var(--danger-bg); border-color:#d9b3af}
.btn.danger-armed{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.danger-armed:hover{background:#8f1e17; color:#fff}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.panel .foot{padding:12px 18px; color:var(--muted); font-size:13px; border-top:1px solid var(--line)}

table{width:100%; border-collapse:collapse}
thead th{
  text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:14px 18px; background:#faf9f6; border-bottom:1px solid var(--line);
}
tbody td{padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable:hover{background:#fafaf8; cursor:pointer}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.low{background:var(--warn-bg)}
tr.out{background:var(--danger-bg)}
.t-warn{color:var(--warn); font-weight:600}
.t-danger{color:var(--danger); font-weight:600}
.t-ok{color:var(--ok); font-weight:600}
.t-muted{color:var(--muted)}
.strong{font-weight:700}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px}
.card .k{color:var(--muted); font-size:14px}
.card .v{font-size:34px; font-weight:700; margin-top:6px}

input[type=text],input[type=number],input[type=search],select,textarea{
  font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
input[type=search]{min-width:280px}
.chip{display:inline-block; background:#eaf0fb; color:var(--accent); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600}
.pill{display:inline-block; border:1px solid var(--line); border-radius:999px; padding:2px 9px; font-size:12px; color:var(--muted)}
.form-row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:10px 0}
.form-row label{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
.banner{border-radius:10px; padding:14px 18px; margin-bottom:18px; border:1px solid}
.banner.warn{background:var(--warn-bg); border-color:#e9d3b8; color:#6d3506}
.banner.ok{background:#eef6ef; border-color:#cfe4d2; color:#245c30}
.grid2{display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start}
.back{color:var(--muted); font-size:14px; display:inline-block; margin-bottom:10px}
h2.section{font-size:16px; margin:26px 0 10px}
.subtle{color:var(--muted); font-size:13px}

/* Product variant folders */
tr.group-row{cursor:pointer}
tr.group-row:hover{background:#f5f4f1}
.caret{display:inline-block; width:14px; transition:transform .12s ease; color:var(--muted)}
tr.group-row.open .caret{transform:rotate(90deg)}
tr.variant-row td:first-child{padding-left:34px}
tr.variant-row{background:#fbfbf9}
tr.variant-row:hover{background:#f4f6fb}
.vcount{color:var(--muted); font-weight:500; font-size:13px; margin-left:8px}

/* Section separators on the products table */
tr.section-row td{
  background:#eeece6; color:var(--muted); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; padding:10px 18px;
  border-top:2px solid var(--line); border-bottom:1px solid var(--line);
}
tr.section-row:first-child td{border-top:0}

/* Products section editor (drag & drop) */
.sec-panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:16px; overflow:hidden}
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; background:#eeece6; border-bottom:1px solid var(--line)}
.sec-head .nm{font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.sec-head .controls{display:flex; gap:6px; align-items:center}
.sec-body{min-height:44px}
.sec-body.dragover{background:#eef3fc; outline:2px dashed var(--accent); outline-offset:-4px}
.drag-row{cursor:grab}
.drag-row td:first-child::before{content:"⠿"; color:var(--muted); margin-right:10px}
.drag-row.dragging{opacity:.4}
.sec-empty{padding:14px 18px; color:var(--muted); font-size:13px}

/* BOM staged editor */
tr.pending-remove td{opacity:.5; text-decoration:line-through}
tr.pending-add{background:#eef6ef}
tr.pending-swap .part-cell{color:var(--warn)}
.edit-only{display:none}
body.bom-editing .edit-only{display:inline-block}
body.bom-editing .view-only{display:none}
.overlay{position:fixed; inset:0; background:rgba(20,18,14,.45); display:flex; align-items:center; justify-content:center; z-index:50}
.modal{background:#fff; border-radius:12px; max-width:560px; width:92%; max-height:82vh; overflow:auto; padding:22px 24px; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h3{margin:0 0 12px; font-size:20px}
.modal .change{padding:8px 0; border-bottom:1px solid var(--line); font-size:14px}
.modal .change:last-of-type{border-bottom:0}
.modal .tag{display:inline-block; min-width:64px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.tag.add{color:var(--ok)} .tag.remove{color:var(--danger)} .tag.qty{color:var(--accent)} .tag.swap{color:var(--warn)}
.modal .actions{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.picker-results{max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:8px; margin-top:10px}
.picker-results .row{padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer}
.picker-results .row:hover{background:#f4f6fb}
.picker-results .row:last-child{border-bottom:0}

/* Scan kiosk */
.scan-line{padding:10px 14px; border-radius:8px; margin-bottom:8px; font-size:15px; font-weight:600}
.scan-line.ok{background:#eef6ef; color:#245c30; border:1px solid #cfe4d2}
.scan-line.err{background:var(--danger-bg); color:#8f1e17; border:1px solid #e6c9c6}

/* Printable label */
.label-card{width:280px; border:1px solid var(--line); border-radius:10px; padding:18px; text-align:center; background:#fff}
.label-qr svg{width:200px; height:200px}
.label-name{font-weight:700; font-size:16px; margin-top:8px}
.label-sub{color:var(--muted); font-size:13px}
.label-sku{margin-top:4px; font-size:14px}
@media print {
  .sidenav, .pagehead, .no-print, .back { display:none !important; }
  .content{padding:0}
  .label-card{border:none}
}