/* Kano Products — tokens from kanocamps.com */
:root {
  --ink:#2C2E35; --paper:#F7F6F3; --white:#fff;
  --gray-700:#4C4F58; --gray-500:#7D8089; --gray-400:#9A9DA5; --gray-300:#C3C5CA; --gray-200:#DCDDE0; --gray-100:#ECEDEF;
  --red:#D82838; --red-deep:#901820; --amber:#F0B860; --amber-light:#F8D090; --green:#2E7D4F;
  --f-display:'Oswald','Arial Narrow',sans-serif;
  --f-ui:'Jost','Futura',sans-serif;
  --f-body:'Roboto',sans-serif;
  --track-wide:.28em; --track-btn:.14em;
  --gutter:18px; --maxw:1480px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { background:var(--paper); color:var(--ink); font:400 13px/1.45 var(--f-body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
[hidden] { display:none !important; }

/* primitives */
.kicker { font:500 10px/1.4 var(--f-ui); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--gray-500); }
.kicker.red { color:var(--red); }
.title { font-family:var(--f-display); font-weight:800; text-transform:uppercase; line-height:1.02; letter-spacing:.01em; }
h1.title { font-size:34px; }
h2.title { font-size:20px; }
h3.title { font-size:15px; font-weight:700; }
.rule { height:2px; background:var(--ink); margin:10px 0 18px; }
.muted { color:var(--gray-500); }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; border:none; font-family:var(--f-ui); font-weight:700;
  letter-spacing:var(--track-btn); text-transform:uppercase; border-radius:0; transition:background .2s, color .2s, box-shadow .2s;
  padding:11px 18px; font-size:11px; white-space:nowrap; background:var(--ink); color:#fff; }
.btn:hover { background:#000; }
.btn-red { background:var(--red); } .btn-red:hover { background:var(--red-deep); }
.btn-outline { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.btn-outline:hover { background:var(--ink); color:#fff; }
.btn-ghost { background:transparent; color:var(--gray-700); padding:8px 10px; }
.btn-ghost:hover { background:var(--gray-100); color:var(--ink); }
.btn-sm { padding:7px 12px; font-size:10px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > span { font:600 10px/1 var(--f-ui); letter-spacing:var(--track-btn); text-transform:uppercase; color:var(--gray-700); }
.field small { color:var(--gray-500); font-size:11px; }
.inp { width:100%; background:#fff; border:1px solid var(--gray-300); border-radius:0; padding:9px 10px; font-size:13px; outline:none; transition:border-color .15s, box-shadow .15s; }
.inp:focus { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
textarea.inp { min-height:120px; resize:vertical; font-family:ui-monospace,Menlo,monospace; font-size:12px; }
select.inp { appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232C2E35'/%3E%3C/svg%3E") no-repeat right 10px center; padding-right:28px; }

.tag { display:inline-block; font:600 9px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; padding:4px 7px; background:var(--gray-100); color:var(--gray-700); }
.tag.red { background:var(--red); color:#fff; } .tag.amber { background:var(--amber); color:var(--ink); } .tag.green { background:#DDEFE3; color:var(--green); } .tag.ink { background:var(--ink); color:#fff; }

/* nav */
nav.top { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px var(--gutter); background:#fff; border-bottom:1px solid var(--gray-200); }
nav.top .brand { display:flex; align-items:center; gap:12px; }
nav.top .brand img { height:15px; width:auto; }
nav.top .brand .sep { width:1px; height:16px; background:var(--gray-200); }
nav.top .links { display:flex; align-items:center; gap:22px; }
nav.top .links a { font:600 11px/1 var(--f-ui); letter-spacing:var(--track-btn); text-transform:uppercase; color:var(--gray-500); padding:6px 0; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
nav.top .links a:hover { color:var(--ink); }
nav.top .links a.on { color:var(--ink); border-bottom-color:var(--red); }
nav.top .user { font:500 10px/1 var(--f-ui); letter-spacing:var(--track-btn); text-transform:uppercase; color:var(--gray-500); display:flex; align-items:center; gap:10px; }
nav.top .user button { background:none; border:none; cursor:pointer; color:var(--gray-500); font:inherit; letter-spacing:inherit; text-transform:inherit; }
nav.top .user button:hover { color:var(--red); }

main { max-width:var(--maxw); margin:0 auto; padding:28px var(--gutter) 80px; }
.head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.head .actions { display:flex; gap:8px; flex-wrap:wrap; }

.card { background:#fff; border:1px solid var(--gray-200); padding:20px; }
.card + .card { margin-top:16px; }
.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .g6 { grid-template-columns:repeat(6,minmax(0,1fr)); }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--gray-200); border:1px solid var(--gray-200); margin-bottom:18px; }
.stat { background:#fff; padding:14px 16px; }
.stat b { display:block; font:700 26px/1 var(--f-display); margin-top:6px; }
.stat.red b { color:var(--red); }

/* toolbar */
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:18px 0 12px; }
.toolbar .inp { width:auto; }
.toolbar .search { flex:1 1 260px; min-width:200px; }
.toolbar .count { margin-left:auto; }
.bulkbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--ink); color:#fff; padding:10px 12px; margin-bottom:10px; }
.bulkbar .inp { width:auto; color:var(--ink); padding:7px 9px; }
.bulkbar .btn-outline { color:#fff; box-shadow:inset 0 0 0 1px #fff; }

/* data table */
.tablewrap { background:#fff; border:1px solid var(--gray-200); overflow:auto; max-height:calc(100vh - 230px); }
table.data { width:100%; border-collapse:separate; border-spacing:0; }
table.data th { position:sticky; top:0; z-index:2; background:var(--ink); color:#fff; text-align:left; font:600 10px/1 var(--f-ui); letter-spacing:var(--track-btn); text-transform:uppercase; padding:11px 9px; white-space:nowrap; cursor:pointer; user-select:none; }
table.data th.nosort { cursor:default; }
table.data th .arr { color:var(--amber); margin-left:4px; }
table.data td { padding:6px 9px; border-bottom:1px solid var(--gray-100); white-space:nowrap; vertical-align:middle; }
table.data tr:hover td { background:#FBFAF8; }
table.data tr.sel td { background:#FFF6E6; }
table.data tr.newstyle td { border-top:1px solid var(--gray-300); }
table.data td.ed { cursor:text; }
table.data td.ed:hover { box-shadow:inset 0 0 0 1px var(--gray-300); }
table.data td.editing { padding:0; box-shadow:inset 0 0 0 2px var(--ink); }
table.data td.editing input, table.data td.editing select { width:100%; min-width:80px; border:none; outline:none; padding:6px 9px; background:#fff; font-size:13px; }
table.data td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.data td.name { max-width:360px; overflow:hidden; text-overflow:ellipsis; }
table.data td.flash { animation:flash 1s ease; }
@keyframes flash { from { background:#DDEFE3; } to { background:transparent; } }
table.data td.err { background:#FDE8EA !important; }
td .miss { color:var(--red); font:600 10px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; }
.chk { width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }

/* drawer */
.scrim { position:fixed; inset:0; background:rgba(44,46,53,.45); z-index:80; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(520px,100vw); background:var(--paper); z-index:90; overflow:auto; box-shadow:-10px 0 40px rgba(0,0,0,.2); }
.drawer header { position:sticky; top:0; background:var(--ink); color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:10px; z-index:2; }
.drawer header .title { color:#fff; font-size:18px; }
.drawer .body { padding:20px; display:grid; gap:14px; }
.drawer footer { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--gray-200); padding:12px 20px; display:flex; gap:8px; justify-content:space-between; }
.x { background:none; border:none; color:inherit; font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }

/* add product */
.steps { display:grid; gap:16px; }
.step h2 { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.step h2 .n { display:inline-grid; place-items:center; width:24px; height:24px; background:var(--red); color:#fff; font:700 12px/1 var(--f-display); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; background:#fff; border:1px solid var(--gray-300); font:600 11px/1 var(--f-ui); letter-spacing:.06em; cursor:pointer; user-select:none; transition:all .15s; }
.chip:hover { border-color:var(--ink); }
.chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip .code { font:500 10px/1 ui-monospace,Menlo,monospace; opacity:.7; }
.chip input.code-in { width:70px; border:none; border-bottom:1px solid currentColor; background:transparent; color:inherit; font:500 11px/1 ui-monospace,Menlo,monospace; padding:1px 2px; outline:none; }
.chip .rm { font-size:14px; line-height:1; opacity:.6; } .chip .rm:hover { opacity:1; color:var(--red); }
.runs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.skuprev { font:600 14px/1.2 ui-monospace,Menlo,monospace; background:var(--ink); color:var(--amber-light); padding:10px 12px; display:inline-block; }
.warn { color:var(--red); font-size:12px; }
.okc { color:var(--green); }

/* purchase orders */
.po-head { display:grid; grid-template-columns:1.2fr 1.4fr 1fr 1fr 1fr; gap:14px; }
.picker { position:relative; }
.picker .results { position:absolute; left:0; right:0; top:100%; z-index:20; background:#fff; border:1px solid var(--ink); border-top:none; max-height:380px; overflow:auto; box-shadow:0 12px 30px rgba(0,0,0,.12); }
.picker .res { display:grid; grid-template-columns:1fr auto auto auto; gap:12px; align-items:center; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--gray-100); }
.picker .res:hover, .picker .res.act { background:var(--paper); }
.picker .res.added { opacity:.45; }
.picker .res-all { padding:9px 12px; background:var(--gray-100); display:flex; justify-content:space-between; align-items:center; gap:10px; }

.pogrid { margin-top:18px; }
.pogrid .block { margin-bottom:20px; background:#fff; border:1px solid var(--gray-200); overflow:auto; }
table.qgrid { border-collapse:collapse; width:100%; }
table.qgrid th { background:var(--ink); color:#fff; font:600 10px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; padding:10px 6px; text-align:center; white-space:nowrap; }
table.qgrid th.l { text-align:left; padding-left:10px; }
table.qgrid th.tot { background:var(--red); }
table.qgrid td { border-bottom:1px solid var(--gray-100); border-right:1px solid var(--gray-100); padding:4px; text-align:center; white-space:nowrap; }
table.qgrid td.l { text-align:left; padding:6px 10px; }
table.qgrid td.pname { font-weight:500; min-width:180px; }
table.qgrid td.q { padding:2px; width:58px; }
table.qgrid td.q input { width:54px; text-align:center; border:1px solid var(--gray-200); padding:7px 2px; outline:none; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
table.qgrid td.q input::-webkit-outer-spin-button, table.qgrid td.q input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
table.qgrid td.q input:focus { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
table.qgrid td.q input.has { background:#FFF6E6; border-color:var(--amber); font-weight:700; }
table.qgrid td.na { background:repeating-linear-gradient(45deg,#fafafa 0 4px,#f1f1f1 4px 8px); color:var(--gray-300); }
table.qgrid td.tot { font:700 15px/1 var(--f-display); background:#FBF3F3; min-width:64px; }
table.qgrid tfoot td { background:var(--gray-100); font:700 12px/1 var(--f-display); padding:9px 4px; }
table.qgrid tfoot td.tot { background:var(--red); color:#fff; }
table.qgrid .rmrow { background:none; border:none; cursor:pointer; color:var(--gray-400); font-size:16px; }
table.qgrid .rmrow:hover { color:var(--red); }
.grand { display:flex; justify-content:flex-end; gap:30px; align-items:baseline; background:var(--ink); color:#fff; padding:16px 20px; }
.grand b { font:800 28px/1 var(--f-display); color:var(--amber); }
.unsaved { vertical-align:middle; margin-left:8px; color:var(--red); font:600 10px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; }

/* login */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; background:var(--ink); }
.login .box { background:#fff; width:min(380px,100%); padding:34px 30px; display:grid; gap:14px; }
.login img { height:22px; margin-bottom:6px; }

/* toast */
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:100; display:grid; gap:8px; }
.toast { background:var(--ink); color:#fff; padding:12px 18px; font:500 12px/1.3 var(--f-ui); letter-spacing:.04em; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.toast.err { background:var(--red); }

.empty { padding:40px; text-align:center; color:var(--gray-500); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spacer { flex:1; }

@media (max-width:900px) {
  .g3,.g4,.g6,.po-head { grid-template-columns:repeat(2,minmax(0,1fr)); }
  nav.top { flex-wrap:wrap; }
  nav.top .links { gap:14px; order:3; width:100%; overflow:auto; }
  h1.title { font-size:26px; }
}

/* print (purchase orders) */
.print-only { display:none; }
@media print {
  @page { size:A4 landscape; margin:10mm; }
  body { background:#fff; font-size:10px; }
  nav.top, .no-print, .toolbar, .picker, #toast { display:none !important; }
  .print-only { display:block; }
  main { padding:0; max-width:none; }
  .card { border:none; padding:0; }
  .pogrid .block { border:1px solid #999; overflow:visible; break-inside:avoid; }
  table.qgrid th { background:#2C2E35 !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  table.qgrid td.q input { border:none; font-weight:700; background:none !important; }
  table.qgrid td.q input:not(.has) { color:#bbb; }
  table.qgrid tr.zero { display:none; }
  .grand { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}