:root{
  --red:#D7141A; --red-d:#A80F14; --ink:#111; --ink2:#2a2a2a; --mut:#6b6b6b; --line:#e4e4e4;
  --bg:#f6f6f6; --card:#fff; --ok:#1f8a4c; --warn:#c77700; --rad:10px;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink);
}
*{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--bg)}
.hidden{display:none!important}
button,input,select,textarea{font:inherit}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:.55rem .9rem;border-radius:8px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover{border-color:#bbb}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}.btn.primary:hover{background:var(--red-d)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--red);border-color:#f0c4c5}
.btn.sm{padding:.3rem .6rem;font-size:.85rem}
.icon-btn{background:none;border:0;font-size:1.3rem;cursor:pointer;padding:.3rem .5rem;color:inherit}
.pill{display:inline-block;font-size:.72rem;padding:.12rem .5rem;border-radius:99px;background:#eee;color:#444;font-weight:600}
.pill.red{background:#fde3e4;color:var(--red-d)}.pill.green{background:#dff3e7;color:var(--ok)}.pill.amber{background:#fff0d6;color:var(--warn)}.pill.dark{background:#222;color:#fff}

/* login */
.login{min-height:100%;display:grid;place-items:center;background:var(--ink);padding:16px}
.login-card{background:#fff;padding:28px;border-radius:14px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;text-align:center;border-top:6px solid var(--red)}
.login-card img{margin:0 auto;border-radius:12px}.login-card h1{font-size:1.25rem;margin:.2rem 0 .4rem}
.login-card label{text-align:left}
.err{color:var(--red);min-height:1.2em;margin:0;font-size:.9rem}

/* layout */
.app{display:flex;min-height:100%}
.sidebar{width:230px;background:var(--ink);color:#ddd;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.brand{display:flex;gap:10px;align-items:center;padding:16px;border-bottom:1px solid #2b2b2b}
.brand img{border-radius:8px}.brand b{color:#fff;display:block}.brand small{color:#999}
#nav{flex:1;overflow:auto;padding:8px}
#nav a{display:flex;gap:10px;align-items:center;padding:.6rem .75rem;color:#ccc;text-decoration:none;border-radius:8px;font-weight:500;margin-bottom:2px}
#nav a:hover{background:#1f1f1f;color:#fff}
#nav a.active{background:var(--red);color:#fff}
#nav .sec{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#777;padding:.9rem .75rem .3rem}
.side-foot{padding:12px;border-top:1px solid #2b2b2b;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem;color:#aaa}
.side-foot .btn{color:#ddd;margin-left:auto}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar h2{margin:0;font-size:1.2rem;flex:1}
#menuBtn{display:none}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.view{padding:20px;max-width:1400px;width:100%}
.scrim{position:fixed;inset:0;background:#0006;z-index:19}

/* cards & tables */
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:16px}
.kpi small{color:var(--mut);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.kpi b{display:block;font-size:1.7rem;margin-top:4px}
.kpi.alert b{color:var(--red)}
.card h3{margin:0 0 10px;font-size:1rem}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.toolbar input[type=search],.toolbar select{padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:0}
.toolbar input[type=search]{flex:1;min-width:180px}
.tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid #eee;vertical-align:middle}
th{background:#fafafa;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#555;position:sticky;top:0;cursor:pointer;user-select:none;white-space:nowrap}
tr.click{cursor:pointer}tr.click:hover td{background:#fff6f6}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.thumb{width:38px;height:38px;border-radius:6px;object-fit:cover;background:#eee;display:block}
.empty{padding:40px;text-align:center;color:var(--mut)}
.low td:first-child{box-shadow:inset 3px 0 0 var(--red)}

/* forms */
label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;color:#333}
input,select,textarea{padding:.55rem .65rem;border:1px solid #d6d6d6;border-radius:8px;background:#fff;color:var(--ink);font-weight:400;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #f4b3b5;border-color:var(--red)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form-grid .full{grid-column:1/-1}
dialog{border:0;padding:0;border-radius:14px;width:min(860px,96vw);max-height:92vh;box-shadow:0 20px 60px #0005}
dialog::backdrop{background:#0008}
.modal-card{display:flex;flex-direction:column;max-height:92vh}
.modal-card header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);border-top:5px solid var(--red)}
.modal-card header h3{margin:0;flex:1}
.modal-body{padding:18px;overflow:auto}
.modal-card footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.lines td input,.lines td select{padding:.35rem .45rem}
.photo-box{display:flex;gap:12px;align-items:center}
.photo-box img{width:96px;height:96px;object-fit:cover;border-radius:10px;background:#eee;border:1px solid var(--line)}
.stock-chips{display:flex;flex-wrap:wrap;gap:6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:10px;transition:.25s;z-index:99;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--mut)}.right{margin-left:auto}
.tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;padding:.45rem .8rem;border-radius:8px;cursor:pointer;font-weight:600}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bar{height:8px;background:#eee;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--red)}
video.scan{width:100%;border-radius:10px;background:#000;max-height:50vh}

@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:20;transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none}
  #menuBtn{display:block}
  .view{padding:14px}
  .topbar{padding:10px 14px}
  .hide-sm{display:none}
}
@media print{
  .sidebar,.topbar,.toolbar,.no-print{display:none!important}
  .view{padding:0}.tbl-wrap{border:0}
}
.toolbar select,.toolbar input[type=date]{width:auto}
.toolbar input[type=search]{width:auto}
@media (max-width:900px){
  .top-actions .btn{padding:.4rem .6rem;font-size:.85rem}
  .topbar{flex-wrap:wrap}
  .toolbar select{flex:1 1 45%}
}
@media (max-width:900px){ .toolbar input[type=search]{flex:1 1 100%} }