/* Ryden Ops admin — mobile-first, Ryden navy/amber, light + dark */
:root{
  --navy:#12295E;--amber:#F5B400;--bg:#F6F7FB;--surface:#fff;--surface-2:#F1F3F8;--fg:#18213A;--muted:#5C6680;--line:#DCE1EC;
  --ok:#1E7A4C;--ok-bg:#E3F4EA;--warn:#A4461B;--warn-bg:#FCEFE6;--info:#1F4FA8;--info-bg:#E6EEFB;--head:#12295E;--link:#1F4FA8;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B1328;--surface:#15223F;--surface-2:#101B36;--fg:#EEF2FA;--muted:#B6C1D9;--line:rgba(238,242,250,.13);
  --ok:#7FD3A4;--ok-bg:rgba(127,211,164,.14);--warn:#FFB38A;--warn-bg:rgba(255,179,138,.13);--info:#A8C2F5;--info-bg:rgba(168,194,245,.14);
  --head:#F4F7FF;--link:#A8C2F5;color-scheme:dark;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 Figtree,system-ui,-apple-system,Segoe UI,sans-serif}
a{color:var(--link)} a:hover{text-decoration-thickness:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
h1{font:800 26px/1.2 "Baloo 2",system-ui,sans-serif;color:var(--head);margin:6px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font:700 17px/1.3 Figtree,system-ui,sans-serif;color:var(--head);margin:0 0 10px}
code{font:600 12.5px ui-monospace,Menlo,monospace;background:var(--surface-2);padding:2px 6px;border-radius:4px;word-break:break-all}
.muted{color:var(--muted)} .small{font-size:13px} .nowrap{white-space:nowrap} .pre{white-space:pre-wrap}
.lead{font-size:16px;margin:-6px 0 16px}

/* header */
.top{background:#12295E;color:#fff;position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap}
.mark{color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:8px;margin-right:auto}
.mark b{font:800 24px/1 "Baloo 2",system-ui,sans-serif}.mark span{font-size:11px;font-weight:700;letter-spacing:.2em;color:#F5B400}
.navtoggle{display:inline-flex;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:8px;padding:6px 12px;font:inherit;font-weight:700;cursor:pointer}
.nav{display:none;width:100%;flex-direction:column;padding:4px 0 12px}
.nav.open{display:flex}
.nav a{color:#E6ECFA;text-decoration:none;padding:10px 4px;font-weight:600;border-top:1px solid rgba(255,255,255,.08)}
.nav a[aria-current]{color:#F5B400}
.signout button{background:transparent;color:#E6ECFA;border:1.5px solid rgba(255,255,255,.35);border-radius:8px;padding:7px 12px;margin-top:8px;font:inherit;font-weight:600;cursor:pointer}
.subnav{background:#0E2150}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav a{color:#C9D5F2;text-decoration:none;padding:9px 10px;font-size:14px;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent}
.subnav a[aria-current]{color:#fff;border-bottom-color:#F5B400}
@media (min-width:900px){
  .navtoggle{display:none}
  .nav{display:flex!important;flex-direction:row;width:auto;padding:0;align-items:center;gap:2px}
  .nav a{border:0;padding:8px 10px;border-radius:8px}
  .nav a:hover{background:rgba(255,255,255,.08)}
  .signout button{margin:0 0 0 8px}
}

main.wrap{padding-top:18px;padding-bottom:48px}
.foot{color:var(--muted);font-size:12.5px;padding-bottom:28px}

/* cards & layout */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 16px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.card-h h2{margin:0}
.cols{display:grid;gap:0 16px}
@media (min-width:860px){.cols{grid-template-columns:1fr 1fr}}
.titlebar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.titlebar h1{margin-bottom:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.titlebar .actions{margin:0 0 10px}
.actions.sticky{position:sticky;bottom:0;background:var(--surface);padding:10px 0;margin-bottom:-6px;border-top:1px solid var(--line)}
.crumbs{font-size:13px;color:var(--muted);margin:0}
.crumbs a{color:var(--muted)}

/* tiles */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:4px}
.tile .k{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tile .v{font:800 30px/1.1 "Baloo 2",system-ui,sans-serif;color:var(--head);font-variant-numeric:tabular-nums}
.tile .v small{font-size:18px;color:var(--muted)}
.tile .s{font-size:13px;color:var(--muted)}
.tile.muted .v{color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;background:#F5B400;border-radius:99px;min-width:4px}

/* forms */
.grid{display:grid;gap:12px 16px;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.field{display:grid;gap:4px;align-content:start}
.field.wide{grid-column:1/-1}
.field small{color:var(--muted);font-size:12.5px}
label{font-weight:600;font-size:13.5px;display:grid;gap:4px}
label i{color:var(--warn);font-style:normal}
label.check{display:flex;align-items:center;gap:8px;font-weight:500}
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;min-height:42px}
textarea{min-height:80px;resize:vertical}
input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:#12295E}
input[type=file]{padding:7px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #F5B400;outline-offset:2px}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:6px 0 12px}
.inline-form>label{flex:1 1 150px}
.inline-form>label.grow{flex:3 1 220px}
.inline-form.tight{margin:0;gap:6px;align-items:center}
.inline-form.tight input{width:auto;flex:1 1 130px;min-height:36px;padding:6px 8px}
.stack{display:grid;gap:12px}
.filters-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filters-form>*{flex:1 1 160px;width:auto}
.filters-form .btn{flex:0 0 auto}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}
.filters a{padding:5px 12px;border-radius:99px;border:1.5px solid var(--line);text-decoration:none;color:var(--fg);font-size:13.5px;font-weight:600}
.filters a[aria-current]{background:#12295E;border-color:#12295E;color:#fff}

/* buttons */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;border:0;border-radius:8px;padding:9px 16px;min-height:42px;cursor:pointer;background:#F5B400;color:#12295E;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(.96)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--fg)}
.btn.sm{min-height:34px;padding:5px 11px;font-size:13.5px}
.btn.warn{background:var(--warn);color:#fff}
.warn-t{color:var(--warn)!important}

/* tables */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 6px;border-top:1px solid var(--line);vertical-align:top}
thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:0;white-space:nowrap}
tr.off td,tr.off th{opacity:.55}
.thumb{width:40px;height:40px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--line);display:block}
.thumb.lg{width:56px;height:56px;display:inline-block}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acts form{display:flex;gap:6px;align-items:center}
details>summary{cursor:pointer;font-weight:600;font-size:13.5px}
.acts details summary{color:var(--warn)}

/* planogram */
table.slots th[scope=row]{font:700 15px ui-monospace,Menlo,monospace;color:var(--head);vertical-align:middle}
table.slots td{padding:5px 4px;vertical-align:middle}
table.slots input{min-height:38px;padding:6px 8px}
table.slots input.prod{min-width:220px}
table.slots input.n{width:64px}
table.slots input.m{width:76px}
table.slots input.c{width:90px}

@media (max-width:640px){
  table.slots thead{display:none}
  table.slots tr{display:grid;grid-template-columns:repeat(4,1fr) 44px;gap:6px 8px;padding:10px 4px;border-top:1px solid var(--line)}
  table.slots th[scope=row]{grid-column:1/2;border:0;padding:0}
  table.slots td{border:0;padding:0;display:grid;gap:2px}
  table.slots td.pc{grid-column:2/-1}
  table.slots td[data-l]::before{content:attr(data-l);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  table.slots input.prod{min-width:0}
  table.slots input.n,table.slots input.m,table.slots input.c{width:100%}
}
/* bits */
.pill{display:inline-block;font:700 12px/1.6 Figtree,system-ui,sans-serif;border-radius:99px;padding:1px 9px;background:var(--surface-2);color:var(--muted);vertical-align:middle}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.info{background:var(--info-bg);color:var(--info)}
.flash{padding:10px 14px;border-radius:10px;font-weight:600;margin:0 0 12px;background:var(--ok-bg);color:var(--ok)}
.flash.err{background:var(--warn-bg);color:var(--warn)}
.flash.warn{background:#FFF4D1;color:#6B4D00}
@media (prefers-color-scheme:dark){.flash.warn{background:rgba(245,180,0,.14);color:#FFCB45}}
.flash a{color:inherit}
.empty{color:var(--muted);padding:6px 0;margin:0}
dl.kv{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;margin:0}
dl.kv dt{color:var(--muted);font-size:13px;font-weight:600}
dl.kv dd{margin:0}
ul.plain{list-style:none;padding:0;margin:0;display:grid;gap:6px}
ul.todo{margin:0;padding-left:20px;display:grid;gap:8px}
details.danger{margin:8px 0 24px;color:var(--warn)}
details.danger form{margin-top:10px;color:var(--fg)}
details.card>summary{margin:-2px 0}
details.card[open]>summary{margin-bottom:12px}
.soon{border-style:dashed}

/* bare pages (sign-in / install) */
.center{min-height:calc(100vh - 56px);display:grid;place-items:center;padding-block:24px}
.card.narrow{width:100%;max-width:440px}

@media print{
  .top,.subnav,.foot,.actions,.filters,.filters-form,form button,details.danger{display:none!important}
  body{background:#fff;color:#000} .card{border:0;padding:0}
}

/* machine view (front of machine) */
.vm{background:#12295E;border-radius:14px;padding:10px;margin:4px 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:inset 0 0 0 3px #0B1A40}
.vm-in{min-width:700px;display:grid;gap:8px}
.shelf{display:flex;gap:5px;align-items:stretch;background:#0B1A40;border-radius:8px;padding:6px 6px 9px;border-bottom:3px solid #2A3F73}
.shelf-l{flex:0 0 22px;display:grid;place-items:center;color:#F5B400;font:800 16px/1 "Baloo 2",system-ui,sans-serif}
.coil{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 4px 10px;background:#fff;color:#18213A;border-radius:6px;text-decoration:none;font-size:11px;line-height:1.2}
.coil.dbl{flex-grow:2}
.coil::after{content:"";position:absolute;left:6px;right:6px;bottom:3px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,#8C97B3 0 2px,transparent 2px 6px)}
.coil.dbl::after{background:repeating-linear-gradient(90deg,#8C97B3 0 2px,transparent 2px 6px) left/calc(50% - 3px) 100% no-repeat,repeating-linear-gradient(90deg,#8C97B3 0 2px,transparent 2px 6px) right/calc(50% - 3px) 100% no-repeat}
.coil .sc{align-self:flex-start;font:700 11px/1.4 ui-monospace,Menlo,monospace;background:#12295E;color:#fff;border-radius:4px;padding:0 5px}
.coil .ph{width:100%;height:58px;background:center/contain no-repeat}
.coil .ph.none{display:grid;place-items:center;max-width:58px;border-radius:50%;background:#F1F3F8;color:#5C6680;font-weight:800;font-size:15px}
.coil .nm{text-align:center;font-weight:600;min-height:2.4em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.coil .pr{font-weight:800;color:#12295E;white-space:nowrap}
.coil .pr i{font-style:normal;font-weight:600;color:#5C6680}
.coil.empty{background:rgba(255,255,255,.04);border:1.5px dashed rgba(255,255,255,.28);color:#B6C1D9}
.coil.empty .sc{background:rgba(255,255,255,.16)}
.coil.empty .pr i{color:#8C97B3}
.coil.empty .ph{height:34px}
.coil.off{opacity:.4}
.coil:hover,.coil:focus-visible{outline:2px solid #F5B400;outline-offset:1px}
table.slots tr{scroll-margin-top:80px}
table.slots tr:target{background:var(--info-bg);box-shadow:inset 3px 0 0 #F5B400}
table.slots tr.hit{background:var(--info-bg);box-shadow:inset 3px 0 0 #F5B400}

/* ---------- Phase 2 ---------- */
.tabs{display:flex;gap:.25rem;margin:0 0 1rem;border-bottom:1px solid var(--line,#d8dce6);overflow-x:auto}
.tabs a{padding:.5rem .9rem;text-decoration:none;color:inherit;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a[aria-current]{border-bottom-color:var(--amber,#F5B400);font-weight:700}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr.group th{background:var(--surface-2);text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
table.plines input,table.plines select{min-width:4.5rem;width:100%}
table.plines .desc{min-width:12rem}table.plines .split{min-width:10rem}table.plines .code{min-width:6.5rem}
.balance{padding:.6rem .8rem;border-radius:8px;font-weight:600;margin:.5rem 0}
.balance.ok{background:#e6f6ec;color:#17643a}.balance.off{background:#fff4d6;color:#7a5600}
@media (prefers-color-scheme:dark){.balance.ok{background:#173a26;color:#a7e3bd}.balance.off{background:#3d3209;color:#f5d77a}}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.75rem;margin-bottom:1rem}
.vc{background:var(--surface);border:1px solid var(--line,#d8dce6);border-radius:12px;padding:.7rem}
.vc.done{border-color:#3aa66a;box-shadow:inset 4px 0 0 #3aa66a}
.vc-h{display:flex;gap:.6rem;align-items:center;margin-bottom:.5rem}
.vc-h .sc{font-weight:800;background:var(--navy,#12295E);color:#fff;border-radius:6px;padding:.1rem .45rem;font-size:.85rem}
.vc-h .ph{width:42px;height:42px;flex:0 0 42px;background:center/contain no-repeat;border-radius:6px}
.vc-h .ph.none{background:var(--surface-2)}
.vc-h .nm{font-weight:600;line-height:1.2}
.vc-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;align-items:end}
.vc-in .fill{grid-column:1/-1;min-height:38px}
.vc-in label{font-size:.75rem;font-weight:600;display:flex;flex-direction:column;gap:.2rem;margin:0}
.step{display:flex;align-items:stretch}
.step input{width:100%;min-width:0;text-align:center;font-size:1.05rem;padding:.35rem .1rem;border-radius:0;min-height:42px}
.step button{border:1px solid var(--line,#c9cfdb);background:var(--surface-2);width:1.9rem;flex:0 0 1.9rem;padding:0;font-size:1.2rem;line-height:1;cursor:pointer;color:inherit}
.step button:first-child{border-radius:8px 0 0 8px}.step button:last-child{border-radius:0 8px 8px 0}
.vc-f{display:flex;gap:.5rem;align-items:center;margin-top:.45rem;min-height:1.5rem;flex-wrap:wrap}
.vc-f select{flex:1;min-width:9rem}
table.pick .tick{width:2rem;text-align:center}.box{display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-radius:3px;opacity:.6}
ul.alerts{list-style:none;padding:0;margin:0}ul.alerts li{padding:.5rem 0;border-bottom:1px solid var(--line,#e2e5ec)}
.pill.err{background:#fde3e3;color:#9b1c1c}
a.tile{text-decoration:none;color:inherit}
@media print{.top,.subnav,.foot,.noprint,.flash,.filters-form{display:none!important}body{background:#fff}.card{box-shadow:none;border:0;padding:0}main.wrap{max-width:none;padding:0}table.pick td,table.pick th{padding:.25rem .4rem;font-size:11pt}}

/* ---------- Phase 3: sales, exceptions, commissions ---------- */
form.inline{display:inline}
button.link{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;cursor:pointer;font:inherit;min-height:0;width:auto}
tfoot th{border-top:2px solid var(--line);font-weight:700}
tr.warnrow td{background:var(--warn-bg)}
.row-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.row-form label{display:grid;gap:4px;font-size:13.5px;font-weight:600;flex:1 1 220px}
.row-form .btn{flex:0 0 auto}
ol.steps{padding-left:20px;display:grid;gap:6px;margin:12px 0}
h2.inline-h{display:inline;font-size:1.05rem;margin:0}
.btn.on{border-color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}
.tile .v.small-v{font-size:22px}
ul.exc{list-style:none;padding:0;margin:0;display:grid;gap:0}
.exc-item{padding:12px 0;border-top:1px solid var(--line)}
.exc-item:first-child{border-top:0;padding-top:0}
.exc-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.exc-item p{margin:6px 0}
table.mini{width:auto;margin:4px 0 8px}
table.mini td{padding:3px 10px 3px 0;border:0}
.exc-item .inline-form{margin-top:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.statement{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;max-width:760px;margin:12px 0}
.st-h{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--head);padding-bottom:14px;margin-bottom:16px}
.st-h h1{margin:0 0 4px;font-size:1.4rem}
.st-h .r{text-align:right}
.st-brand{font-family:"Baloo 2",sans-serif;font-size:1.3rem;color:var(--head)}
table.st-t{width:100%;margin:12px 0}
table.st-t td{padding:8px 4px}
table.st-t tr.sub td{font-weight:600}
table.st-t tr.total td{font-weight:800;font-size:1.1rem;border-top:2px solid var(--head)}
@media (max-width:560px){.st-h .r{text-align:left}.statement{padding:16px}}
@media print{.statement{border:0;padding:0;max-width:none;margin:0}.st-brand,.st-h h1{color:#000}}
.filters-form select{max-width:100%;min-width:0;text-overflow:ellipsis}