/* WillpowerCloud head-office UI. Same tokens as ThemeManager in the POS/BO
   (Accent #1A6EF5, amber #F5A623, navy #1A1F36) so the family matches. */
:root{
  --bg:#F0F2F7; --surf:#FFFFFF; --surf2:#F7F8FC; --surf3:#EEF0F6; --border:#DCDEE4;
  --t1:#111827; --t2:#4B5568; --t3:#9CA3AF;
  --rail:#1A1F36; --rail-t:#B9BFD8; --rail-t1:#FFFFFF; --rail-hi:#252B4A;
  --accent:#1A6EF5; --accent-h:#1558C8; --accent-soft:#E8F0FF;
  --amber:#F5A623; --amber-soft:#FFF4E0; --amber-t:#8A5A00;
  --green:#15803D; --green-soft:#E3F5EA; --red:#C81E1E; --red-soft:#FDE8E8;
  --hdr:#F7F8FC;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1E2130; --surf:#252836; --surf2:#2C3045; --surf3:#32365F; --border:#373C50;
    --t1:#DDE1F0; --t2:#8B90AA; --t3:#6B7090;
    --rail:#151829; --rail-t:#8B90AA; --rail-hi:#22273F;
    --accent:#4D8DF7; --accent-h:#6FA3FA; --accent-soft:#1E2E52;
    --amber-soft:#3A2F14; --amber-t:#F5C36A;
    --green:#4ADE80; --green-soft:#16301F; --red:#F87171; --red-soft:#3A1919;
    --hdr:#2C3045;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--t1);font-family:"DM Sans",system-ui,"Segoe UI",sans-serif;font-size:14px;line-height:1.45}
a{color:var(--accent);text-decoration:none}
.mono{font-family:"IBM Plex Mono","Cascadia Mono",Consolas,monospace}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.rail{background:var(--rail);color:var(--rail-t);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
.brand .tile{width:32px;height:32px;border-radius:8px;background:#0F1530;border:1px solid #2E3760;display:grid;place-items:center;flex:none}
.brand .tile i{display:block;width:16px;height:16px;border-radius:4px;background:var(--accent)}
.brand b{color:var(--rail-t1);font-size:15px;font-weight:700;display:block;line-height:1.1}
.brand small{display:block;font-size:11px;margin-top:2px}
.nav{padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.nav .sec{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5E6588;padding:12px 8px 4px}
.nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--rail-t);font-size:13.5px;font-weight:500}
.nav a:hover{background:var(--rail-hi);color:var(--rail-t1)}
.nav a.active{background:var(--accent);color:#fff}
.nav .note{font-size:12px;color:#5E6588;padding:4px 10px}
.who{margin-top:auto;padding:14px 16px;border-top:1px solid #262C48;font-size:12.5px}
.who b{display:block;color:var(--rail-t1)}
.main{min-width:0}
.top{display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--surf);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.top h1{font-size:18px;margin:0;font-weight:700}
.top .sub,.sub{color:var(--t3);font-size:12.5px}
.top .sp,.sp{flex:1}
.hint{font-size:12px;color:var(--t3)}
.page{padding:20px 24px 40px}
.grid{display:grid;gap:14px;margin-bottom:14px}
.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g12{grid-template-columns:1fr 2fr}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.g4,.g2,.g12{grid-template-columns:1fr}.app{grid-template-columns:64px 1fr}.rail .nav a,.rail .who,.rail .brand small,.rail .note,.rail .sec{display:none}}
.card{background:var(--surf);border:1px solid var(--border);border-radius:12px;min-width:0}
.card .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.card .hd h3{margin:0;font-size:13.5px;font-weight:600}
.card .hd .r{margin-left:auto;display:flex;gap:8px}
.card .bd{padding:14px 16px}
.stat{padding:14px 16px}
.stat .k{font-size:12px;color:var(--t2);font-weight:500}
.stat .v{font-size:26px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.stat .v.small{font-size:18px}
.stat .d{font-size:12px;color:var(--t3);margin-top:2px}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{background:var(--hdr);text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
th.r,td.r{text-align:right}
tr.row{cursor:pointer}
tr.row:hover td{background:var(--surf2)}
td.name{font-weight:500}
td.dim{color:var(--t3)}
td.trunc{max-width:340px;overflow:hidden;text-overflow:ellipsis}
td.empty{text-align:center;color:var(--t3);padding:26px;white-space:normal}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.ok{background:var(--green-soft);color:var(--green)}
.warn{background:var(--amber-soft);color:var(--amber-t)}
.bad{background:var(--red-soft);color:var(--red)}
.mute{background:var(--surf3);color:var(--t2)}
.info{background:var(--accent-soft);color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--border);background:var(--surf);color:var(--t1);font-family:inherit}
.btn:hover{background:var(--surf2)}
.btn.p{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.p:hover{background:var(--accent-h)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.frow{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;margin-bottom:12px;font-size:13px}
.frow label{color:var(--t2);font-weight:500}
.frow input,.frow select{font:inherit;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surf2);color:var(--t1);width:100%}
.row-r{display:flex;justify-content:flex-end;gap:8px}
.err{color:var(--red);font-size:13px;margin:0 0 10px}
.flash{background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:8px 12px;font-size:13px;margin:0 0 14px}
.keybox{margin-bottom:14px;border-color:var(--amber)}
.bigkey{font-size:26px;letter-spacing:.06em;font-weight:500;padding:6px 0;user-select:all}
td.hot{color:var(--red);font-weight:600}
td.ord{color:var(--accent);font-weight:700}
td.diff{color:var(--amber-t);font-weight:600}
.rule{display:inline-flex;gap:8px;align-items:center;background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:6px 10px;font-size:12.5px;font-weight:600;font-family:"IBM Plex Mono",monospace}
.g13{grid-template-columns:1fr 2.4fr}
@media(max-width:760px){.g13{grid-template-columns:1fr}}
.brlist{max-height:620px;overflow:auto}
.brlist .it{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 16px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}
.brlist .it:hover{background:var(--surf2)}
.brlist .it.sel{background:var(--sel,#E6EEFF)}
.brlist .it b{font-weight:600}
.brlist .it small{color:var(--t3);font-size:11.5px}
.brlist .it .n{font-weight:700;color:var(--accent);text-align:right}
.brlist .it .n.zero{color:var(--t3);font-weight:500}
.stepper{display:flex;font-size:12px}
.stepper span{flex:1;padding:6px 8px;border:1px solid var(--border);background:var(--surf2);text-align:center;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper span:first-child{border-radius:8px 0 0 8px}.stepper span:last-child{border-radius:0 8px 8px 0}
.stepper span.done{background:var(--green-soft);color:var(--green);font-weight:600;border-color:transparent}
.stepper span.cur{background:var(--accent-soft);color:var(--accent);font-weight:600;border-color:transparent}
.stepper span.wait{background:var(--amber-soft);color:var(--amber-t);font-weight:600;border-color:transparent}
.stat .d.warn{color:var(--amber-t)}
.stat .d.dn{color:var(--red)}
.stat.link{cursor:pointer}.stat.link:hover{border-color:var(--accent)}
.alert{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border)}
.alert:last-child{border-bottom:0}
.alert .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:14px}
.alert .t{font-weight:600;font-size:13.5px}
.alert .s{color:var(--t2);font-size:12.5px}
.bar{height:6px;border-radius:4px;background:var(--surf3);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.g21{grid-template-columns:2fr 1fr}
@media(max-width:900px){.g21{grid-template-columns:1fr}}
/* picking document (also the print layout) */
.printpage{padding:20px 24px;background:var(--bg);min-height:100vh}
.pick{background:#fff;color:#111;border:1px solid var(--border);border-radius:12px;padding:22px 26px;max-width:960px}
.pick .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #111;padding-bottom:12px;margin-bottom:12px}
.pick .ph h2{margin:0;font-size:22px;letter-spacing:-.01em}
.pick .ph .meta{font-size:12.5px;color:#444;line-height:1.5;text-align:right}
.pick .grp{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#333;padding:12px 0 4px}
.pick table{font-size:13.5px;color:#111}
.pick th{background:#F3F4F6;color:#333;border-bottom:1px solid #999}
.pick td{border-bottom:1px solid #DDD;padding:8px 10px;color:#111}
.pick td.hot{color:#C81E1E}
.pick td.box{width:64px}
.pick .bx{display:inline-block;width:54px;height:26px;border:1.5px solid #333;border-radius:4px;vertical-align:middle}
.pick .tick{display:inline-block;width:18px;height:18px;border:1.5px solid #333;border-radius:4px;vertical-align:middle}
.pick .qty{font-size:17px;font-weight:700}
.pick .sig{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:22px;font-size:12px;color:#444}
.pick .sig span{display:block;border-top:1px solid #333;padding-top:6px;margin-top:28px}
@media print{.noprint{display:none!important}.printpage{padding:0;background:#fff}.pick{border:0;border-radius:0;max-width:none}}