/* LKF POS — touch-first kassa for a 15.6" landscape touch terminal (Chrome/Edge app window).
   Light theme in the SuKassa back-office palette. Hit targets >= 48px, big type,
   no hover-dependent UI, no web fonts (the till must start offline). */
:root{
  --bg:#F1F8FD; --panel:#FFFFFF; --panel2:#F1F8FD; --panel3:#E4F1FA;
  --line:#D8E8F4; --ink:#0F3A52; --ink-soft:#5B7FA6;
  --blue:#35B8FF; --blue-dark:#1E86C9; --blue-deep:#0B4E77;
  --yellow:#F6B33D; --yellow-dark:#D9942A; --yellow-ink:#3B2A08;
  --ok:#1E9E5A; --warn:#D9942A; --danger:#D6453C;
  --r:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.4 "Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
button{font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; min-height:48px; padding:8px 14px; font-weight:600}
button:active{background:var(--panel3)}
button:disabled{opacity:.4; cursor:default}
button.danger{color:var(--danger); border-color:#F3C2BE}
input[type=text],input[type=password]{
  font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; width:100%; min-height:48px;
}
input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,184,255,.22)}
.muted{color:var(--ink-soft)}
.msg{min-height:24px; color:var(--warn); font-size:.95rem; padding:4px 0; font-weight:600}
[hidden]{display:none !important}
.flabel{display:flex; flex-direction:column; gap:6px; text-align:left; font-size:.9rem; font-weight:700; color:var(--ink-soft)}
.flabel input{font-weight:600; color:var(--ink)}

/* ── app frame ─────────────────────────────────────────────── */
#app{display:flex; flex-direction:column; height:100vh}
#statusbar{
  height:56px; flex:0 0 56px; background:var(--blue-deep); color:#fff;
  display:flex; align-items:center; gap:12px; padding:0 12px;
}
#sb-brand{font-weight:800; letter-spacing:.02em; white-space:nowrap}
#sb-term{color:rgba(255,255,255,.7); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-spacer{flex:1}
.pill{padding:6px 12px; border-radius:999px; font-size:.78rem; font-weight:800; letter-spacing:.03em; white-space:nowrap}
.pill--on{background:#1E9E5A; color:#fff}
.pill--off{background:#D6453C; color:#fff}
.pill--warn{background:var(--yellow); color:var(--yellow-ink)}
.sb-badge{background:var(--yellow); color:var(--yellow-ink); border-radius:999px; padding:4px 12px; font-weight:800; font-size:.85rem; white-space:nowrap}
.sbbtn{min-height:40px; padding:4px 14px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; font-weight:700; white-space:nowrap}
.sbbtn b{background:var(--yellow); color:var(--yellow-ink); border-radius:999px; padding:0 8px; margin-left:4px}
.iconbtn{min-width:52px; font-size:1.4rem; background:transparent; border-color:transparent; color:#fff}

#screens{flex:1; min-height:0; position:relative}
.scr{display:none; height:100%}
.scr.on{display:flex}

.panel--center{
  margin:auto; width:min(470px,94vw); max-height:100%; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:24px;
  box-shadow:0 14px 38px rgba(15,58,82,.14);
  padding:26px; display:flex; flex-direction:column; gap:12px; text-align:center;
}
.panel--center h1{font-size:1.4rem; font-weight:800}
.setup-logo{width:72px; height:72px; align-self:center; border-radius:18px}

/* ── numpads ───────────────────────────────────────────────── */
.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pad button{min-height:60px; font-size:1.5rem; font-weight:700}
.pad .key--ok{grid-column:1 / -1; background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink)}
.pad .key--ok:active{background:var(--yellow-dark)}
.numview{
  font-family:Consolas,"Cascadia Mono",monospace; font-size:2.1rem; font-weight:700; text-align:right;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 16px; min-height:64px; color:var(--blue-deep);
}
.pin-dots{display:flex; gap:14px; justify-content:center; min-height:20px; padding:6px 0}
.pin-dots span{width:16px; height:16px; border-radius:50%; background:var(--line)}
.pin-dots span.f{background:var(--blue-dark)}

/* ── denomination grid ─────────────────────────────────────── */
.dgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:8px; text-align:left; align-content:start}
.drow{display:grid; grid-template-columns:4.2rem 54px 3.4rem 54px 1fr; gap:8px; align-items:center;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:6px 10px}
.drow.has{border-color:var(--blue-dark); background:#E4F3FE}
.dval{font-family:Consolas,monospace; font-weight:700; color:var(--blue-deep)}
.dbtn{min-width:54px; min-height:52px; font-size:1.4rem; font-weight:700; padding:0}
.dcount{min-width:54px; min-height:52px; padding:0; text-align:center; font-family:Consolas,monospace; font-size:1.25rem; font-weight:700}
.damt{font-family:Consolas,monospace; text-align:right; color:var(--ink-soft)}
.drow.has .damt{color:var(--ink)}
.dtot{display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--line); padding:10px 4px 2px; font-size:1.05rem; font-weight:700}
.dtot b{font-family:Consolas,monospace; font-size:1.35rem; color:var(--blue-deep)}
.fxrecap{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px 16px; font-family:Consolas,monospace; font-size:.95rem; color:var(--ink-soft)}
.linkrow{display:flex; justify-content:center; gap:14px}
.linkbtn{background:transparent; border:none; min-height:48px; padding:6px 8px; color:var(--blue-dark); text-decoration:underline; font-size:.95rem}
#scr-open{padding:10px}
#scr-open .panel--center{width:min(900px, 95vw); padding:20px 22px; gap:10px}
#scr-open .panel--center > *{flex:0 0 auto}
#scr-open #open-count{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:8px}
#scr-open #dg-open{flex:1 1 auto; min-height:0; overflow-y:auto}
#open-count .dtot, #open-count > .seg, #open-count > .fxrecap{flex:0 0 auto}
#open-manual{align-self:center; width:min(360px, 100%)}
.modal-box--close > *{flex:0 0 auto}
.modal-box--close #dg-close{flex:1 1 auto; min-height:0; overflow-y:auto}

.bigbtn{min-height:58px; font-size:1.1rem; font-weight:800; width:100%}
.bigbtn--primary{background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink)}
.bigbtn--primary:active{background:var(--yellow-dark)}
.bigbtn--credit{background:#FFF4E0; border-color:var(--warn); color:#8A5A10}
.rowbtns{display:flex; gap:10px}
.rowbtns .bigbtn{flex:1}

/* ── sell screen: categories | items | bon ─────────────────── */
#scr-sell.on{display:grid; grid-template-columns:180px 1fr 430px; height:100%}
#cat-side{background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; gap:6px; scrollbar-width:thin}
.catbtn{min-height:62px; text-align:left; padding:8px 12px 8px 14px; font-weight:700; font-size:1rem; line-height:1.2; border-left:5px solid var(--line); border-radius:10px; overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto; display:flex; align-items:center; justify-content:space-between; gap:6px}
.catbtn small{flex:none; font-weight:600; color:var(--ink-soft); font-size:.75rem}
.catbtn.on{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
.catbtn.on small{color:rgba(255,255,255,.75)}
#catalog{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg)}
#cat-head{display:flex; align-items:center; gap:12px; padding:10px 12px 6px; flex:0 0 auto}
#cat-title{font-weight:800; font-size:1.05rem; white-space:nowrap; color:var(--blue-deep)}
#search{flex:1; width:auto; font-size:1.05rem; min-height:50px}
#prod-grid{flex:1; overflow-y:auto; padding:6px 12px 12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; align-content:start}
.prod{min-height:104px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; gap:6px; padding:0; position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-top:6px solid var(--blue)}
.prod .prod-body{display:flex; flex-direction:column; gap:6px; padding:10px 12px 10px; flex:1; justify-content:space-between}
.prod.soldout{background:#FBEDEC; border-color:#F3C2BE}
.prod.soldout .prod-name{color:#96574F; text-decoration:line-through}
.prod-name{font-size:1rem; line-height:1.22; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; font-weight:700}
.prod-foot{display:flex; justify-content:space-between; align-items:baseline; gap:6px}
.prod-price{font-family:Consolas,monospace; font-weight:700; color:var(--blue-deep); font-size:1.05rem}
.prod-unit{font-size:.78rem; font-weight:700; color:var(--ink-soft)}
.prod-tag{font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft)}
.prod-tag.off{color:var(--danger)}
.grid-empty{grid-column:1/-1; text-align:center; padding:40px 0; color:var(--ink-soft)}

#order{background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
#order-head{display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); flex:0 0 auto; align-items:center}
.custbtn{flex:1; min-height:52px; text-align:left; display:flex; align-items:center; gap:10px; font-size:1rem; overflow:hidden}
.custbtn .material{font-size:1.2rem}
.custbtn #cust-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1}
.custbtn.set{border-color:var(--blue-dark); color:var(--blue-deep); background:#E4F3FE}
.xbtn--cust{min-width:52px; min-height:52px; margin:0; font-size:1.3rem}
.cust-info{padding:6px 12px; font-size:.85rem; background:var(--panel2); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap}
.cust-info b{font-family:Consolas,monospace}
.cust-info .bad{color:var(--danger); font-weight:700}
.seg{display:flex; gap:8px; flex-wrap:wrap}
.seg button{flex:1; min-height:50px; font-weight:700}
.seg button.on{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
#cart-lines{flex:1; overflow-y:auto; padding:0 10px}
.cline{border-bottom:1px solid var(--line); padding:8px 4px; display:flex; gap:8px; align-items:flex-start; cursor:pointer}
.cline:active{background:var(--panel2)}
.cline-qty{font-family:Consolas,monospace; font-size:1.05rem; font-weight:800; min-width:64px; color:var(--blue-deep); padding-top:2px; white-space:nowrap}
.cline-main{flex:1; min-width:0}
.cline-name{font-weight:700; word-break:break-word}
.cline-sub{font-size:.82rem; color:var(--ink-soft)}
.cline-sub .note{color:var(--warn); font-weight:700}
.cline-total{font-family:Consolas,monospace; font-size:1.05rem; font-weight:700; white-space:nowrap; padding-top:2px}
.cline-disc{font-size:.8rem; color:var(--danger)}
.cart-empty{text-align:center; padding:34px 0; color:var(--ink-soft)}

#totals{border-top:1px solid var(--line); padding:10px 14px 6px; display:flex; flex-direction:column; gap:4px; flex:0 0 auto}
#totals .trow{display:flex; justify-content:space-between; align-items:center; font-size:.95rem}
#totals .trow b{font-family:Consolas,monospace}
#totals .trow--disc{color:var(--danger)}
#totals .trow--tax{color:var(--ink-soft); font-size:.88rem}
.xbtn{min-width:32px; min-height:32px; padding:0 8px; margin-left:6px; font-size:1rem; font-weight:700; line-height:1; color:var(--danger); vertical-align:middle}
#totals .trow--grand{font-size:1.5rem; font-weight:800; margin-top:4px}
#totals .trow--grand b{color:var(--blue-deep)}
.orderbtns{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:6px 10px 0}
.orderbtns button{min-height:50px; font-size:.82rem; padding:4px; line-height:1.15}
.orderbtns button.hot{background:#E4F3FE; border-color:var(--blue-dark); color:var(--blue-deep)}
#btn-pay{margin:8px 10px 10px; min-height:74px; font-size:1.25rem; font-weight:900; letter-spacing:.06em;
  background:var(--ok); border-color:var(--ok); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:8px 20px}
#btn-pay b{font-family:Consolas,monospace; font-size:1.6rem; letter-spacing:0}
#btn-pay:active{background:#17834A}
#btn-pay:disabled{background:var(--panel2); border-color:var(--line); color:var(--ink-soft)}

/* ── modals ────────────────────────────────────────────────── */
.modal{position:fixed; inset:0; background:rgba(11,78,119,.45); display:none; align-items:center; justify-content:center; z-index:50; padding:12px}
.modal.on{display:flex}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:0 14px 38px rgba(15,58,82,.2);
  padding:18px; width:min(440px,96vw); max-height:94vh; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.modal-box h2{font-size:1.15rem; font-weight:800}
.modal-box--pay{width:min(820px,97vw)}
.modal-box--cust{width:min(640px,96vw)}
.modal-box--close{width:min(900px,96vw)}
#modal-num{z-index:72}
#modal-text{z-index:73}
#modal-custform{z-index:71}
.list{display:flex; flex-direction:column; gap:8px; max-height:56vh; overflow-y:auto}
.quickchips{display:flex; gap:8px; flex-wrap:wrap}
.quickchips button{min-height:42px; border-radius:999px; font-size:.9rem; padding:4px 14px}
.quickchips button.on{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
.linegrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.linegrid button{min-height:56px}
.seg--rec button{min-height:44px; font-size:.9rem}

/* list rows (orders, receipts, sessions, customers) */
.row-item{text-align:left; display:flex; flex-direction:column; gap:3px; min-height:62px; padding:10px 14px}
.row-item small{color:var(--ink-soft)}
.row-item .s-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.row-item .s-top b{font-family:Consolas,monospace}
.row-item .s-top b.name{font-family:inherit}
.s-status{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:var(--panel3); color:var(--ink-soft); border-radius:999px; padding:3px 10px}
.s-status.s-open{background:#E6F7EE; color:#147241}
.s-status.s-warn{background:#FFF4E0; color:#8A5A10}
.s-status.s-bad{background:#FBEDEC; color:#A6322B}
.s-gross{margin-left:auto; font-family:Consolas,monospace; font-weight:700; color:var(--blue-deep)}
.s-gross.bad{color:var(--danger)}

/* discount modal */
.seg--disc{width:100%; max-width:300px; align-self:center; gap:10px}
.seg--disc button{min-height:52px; font-size:1.15rem}
#disc-hint{font-size:.9rem; text-align:right}

/* pay modal */
.pay-head{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:1.2rem; font-weight:800}
.pay-head .big{font-family:Consolas,monospace; font-size:1.7rem; color:var(--blue-deep)}
.pay-cust{flex:1; text-align:center; font-size:.95rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.quick{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0}
.quick button{min-height:50px; font-weight:700}
#tender-list{display:flex; flex-direction:column; gap:8px; min-height:60px}
.modal-box--pay{height:min(900px, 94vh); padding:14px; gap:10px}
.modal-box--pay > .pay-head, .modal-box--pay > .seg, .modal-box--pay > input, .modal-box--pay > .acc-sales{flex:0 0 auto}
.modal-box--pay .seg button{min-height:46px}
.modal-box--pay .numview{min-height:0; font-size:1.9rem; padding:8px 14px}
.modal-box--pay .pay-grid{flex:1 1 auto; min-height:0}
.pay-left, .pay-right{display:flex; flex-direction:column; gap:8px; min-height:0}
.pay-left > *, .pay-right > *{flex:0 0 auto}
.modal-box--pay .quick{margin:0}
.modal-box--pay .quick button{min-height:42px}
.pay-left #pay-pad, .pay-left #acc-pad{flex:1 1 auto; min-height:0; grid-auto-rows:1fr}
.pay-left #pay-pad button, .pay-left #acc-pad button{min-height:0}
.pay-right #tender-list{flex:1 1 auto; min-height:60px; overflow-y:auto}
.tender{display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px}
.tender .t-x{min-width:48px; min-height:44px; color:var(--danger); font-weight:700}
.tender .t-main{flex:1}
.tender .t-ref{display:block; color:var(--ink-soft); font-size:.8rem}
.tender .t-base{font-family:Consolas,monospace}
.pay-sums{display:flex; flex-direction:column; gap:6px; padding:8px 2px}
.pay-sums .row{display:flex; justify-content:space-between; font-size:1.1rem}
.pay-sums b{font-family:Consolas,monospace; font-size:1.25rem}
.pay-sums .row--credit{color:#8A5A10}
.pay-sums .row--credit b{color:var(--warn)}
#pay-chg.has{color:var(--ok)}
#pay-due, #acc-due{text-align:right; padding:2px 2px 6px; font-size:1rem}
.acc-sales{display:flex; flex-direction:column; gap:4px; max-height:120px; overflow-y:auto; font-size:.9rem; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px}
.acc-sales .row{display:flex; justify-content:space-between; gap:8px}
.acc-sales b{font-family:Consolas,monospace}
@media (max-height:800px){
  .modal-box--pay{padding:10px; gap:7px}
  .modal-box--pay .pay-head{font-size:1rem}
  .modal-box--pay .pay-head .big{font-size:1.3rem}
  .modal-box--pay .seg button{min-height:40px; font-size:.95rem}
  .modal-box--pay .numview{font-size:1.5rem; padding:5px 12px}
  .modal-box--pay .quick button{min-height:34px; font-size:.95rem}
  .modal-box--pay .bigbtn{min-height:44px; font-size:1rem}
  .pay-sums .row{font-size:1rem}
  .pay-sums b{font-size:1.1rem}
}

/* ── drawer menu ───────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(11,78,119,.4); z-index:58; display:none}
.scrim.on{display:block}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(340px,92vw); z-index:60; background:var(--panel); border-left:1px solid var(--line);
  transform:translateX(102%); transition:transform .18s ease; display:flex; flex-direction:column; gap:10px; padding:18px; overflow-y:auto}
.drawer.on{transform:none}
.drawer h2{font-size:1.2rem; margin-bottom:4px}
.drawer button{min-height:54px; font-weight:700; text-align:left; padding-left:16px}
.dr-info{display:flex; flex-direction:column; gap:6px; font-size:.9rem; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:12px}
.dr-info .row{display:flex; justify-content:space-between; gap:10px}
.dr-info .row b{font-family:Consolas,monospace}
.dr-problems{color:var(--warn); font-size:.9rem; font-weight:700}
.dr-version{font-size:.78rem; text-align:center; margin-top:auto}

/* ── toast ─────────────────────────────────────────────────── */
#toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); background:var(--blue-deep); color:#fff;
  padding:12px 18px; border-radius:999px; font-size:.95rem; font-weight:700; opacity:0; transition:.2s; pointer-events:none; z-index:90; max-width:90vw}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--danger)}
#toast.good{background:var(--ok)}

@media (max-height:820px){
  .dgrid{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:6px}
  .drow{grid-template-columns:3.8rem 46px 3rem 46px 1fr; gap:6px; padding:4px 8px}
  .dbtn{min-width:46px; min-height:44px; font-size:1.25rem}
  .dcount{min-width:46px; min-height:44px; font-size:1.1rem}
  #scr-open .panel--center{padding:14px 18px; gap:8px}
  #scr-open .numview{min-height:0; font-size:1.6rem; padding:6px 14px}
  .modal-box--close{padding:14px; gap:8px}
}
@media (max-width:1400px){
  #scr-sell.on{grid-template-columns:160px 1fr 400px}
}
@media (max-width:1100px){
  #scr-sell.on{grid-template-columns:150px 1fr 370px}
  .catbtn{min-height:52px; font-size:.88rem; padding:6px 8px 6px 10px}
}
@media (max-width:820px){
  #scr-sell.on{grid-template-columns:1fr}
  #cat-side{flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:8px}
  .catbtn{min-width:120px; min-height:48px}
  #order{border-left:none; border-top:1px solid var(--line)}
  .pay-grid{grid-template-columns:1fr}
  .modal-box--pay{height:auto; max-height:94vh}
  .pay-left #pay-pad, .pay-left #acc-pad{flex:0 0 auto; grid-auto-rows:auto}
  .pay-left #pay-pad button, .pay-left #acc-pad button{min-height:52px}
}


/* ── LKF: photos, stock, price level, order queue, returns ──── */
.small{font-size:.85rem}
.prod.has-img{min-height:156px}
.prod-img{display:block;height:88px;flex:0 0 88px;background:var(--panel2) center/cover no-repeat;border-bottom:1px solid var(--line)}
.prod-sku{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft);letter-spacing:.02em}
.prod-tag.low{color:var(--warn)}
.prod-tag.res{color:var(--blue-dark)}
.prod-foot{flex-wrap:wrap}
.prod-unit{white-space:nowrap}
.prod-price.wh{color:#8A5A10}
.lvl{font-size:.68rem;font-weight:900;letter-spacing:.06em;background:var(--yellow);color:var(--yellow-ink);border-radius:999px;padding:2px 8px;white-space:nowrap}
.custbtn .lvl{flex:0 0 auto}

/* the order linked to the factuur being built */
.order-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#FFF4E0;border-bottom:1px solid #F6DFB1}
.order-link b{font-size:1.15rem;font-weight:900;color:var(--blue-deep)}
.order-link small{display:block;color:#8A5A10;font-weight:600}
.order-link .xbtn{color:#8A5A10}

/* status bar queue button */
.sbbtn--queue{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink);position:relative}
.sbbtn--queue b{background:var(--blue-deep);color:#fff}
.sb-ready{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:2px solid #fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,158,90,.6)}70%{box-shadow:0 0 0 10px rgba(30,158,90,0)}100%{box-shadow:0 0 0 0 rgba(30,158,90,0)}}

/* queue */
.modal-box--queue{width:min(1100px,97vw);height:min(900px,94vh)}
.modal-box--queue > *{flex:0 0 auto}
.q-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.qgrid{flex:1 1 auto !important;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-content:start;padding:2px}
.qcard{text-align:left;display:flex;flex-direction:column;gap:6px;padding:12px 14px;min-height:130px;border-left:6px solid var(--line);position:relative}
.qcard.st-open{border-left-color:var(--blue)}
.qcard.st-picking{border-left-color:var(--yellow)}
.qcard.st-packed{border-left-color:var(--ok);background:#F3FBF6}
.qcard.st-invoiced,.qcard.st-cancelled{opacity:.6}
.qcard .q-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qcard .q-no{font-size:1.6rem;font-weight:900;color:var(--blue-deep);line-height:1}
.qcard .q-cust{font-weight:800;font-size:1rem;word-break:break-word}
.qcard .q-meta{font-size:.82rem;color:var(--ink-soft)}
.qcard .q-tot{font-family:Consolas,monospace;font-weight:800;font-size:1.1rem;color:var(--blue-deep)}
.qcard .q-bar{height:6px;border-radius:4px;background:var(--panel3);overflow:hidden}
.qcard .q-bar i{display:block;height:100%;background:var(--ok)}
.qcard .q-kassa{font-size:.75rem;font-weight:800;color:#8A5A10}
.s-status.st-open{background:#E4F4FF;color:#12628F}
.s-status.st-picking{background:#FFF4E0;color:#8A5A10}
.s-status.st-packed{background:#E6F7EE;color:#147241}
.s-status.st-invoiced{background:var(--panel3);color:var(--ink-soft)}
.s-status.st-cancelled{background:#FBEDEC;color:#A6322B}
.s-status.lvl-w{background:var(--yellow);color:var(--yellow-ink)}

/* one order */
.ov-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ov-no{font-size:2.4rem;font-weight:900;color:var(--blue-deep);line-height:1}
.ov-meta{text-align:right;font-size:.9rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:2px}
.ov-meta b{color:var(--ink);font-size:1.05rem}
.ovline{display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line);padding:8px 4px}
.ovline .ck{width:26px;height:26px;border-radius:8px;border:2px solid var(--line);flex:0 0 26px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff}
.ovline .ck.on{background:var(--ok);border-color:var(--ok)}
.ovline .q{font-family:Consolas,monospace;font-weight:800;min-width:70px;color:var(--blue-deep)}
.ovline .q s{color:var(--danger);font-weight:600;margin-right:4px}
.ovline .n{flex:1;min-width:0;font-weight:700}
.ovline .n small{display:block;color:var(--ink-soft);font-weight:600}
.ovline .t{font-family:Consolas,monospace;font-weight:700;white-space:nowrap}
.ovline.zero .n{color:var(--danger);text-decoration:line-through}

/* returns */
.modal-box--ret{width:min(860px,97vw);max-height:94vh}
.ret-lines{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow-y:auto}
.retline{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.retline.on{border-color:var(--blue-dark);background:#E4F3FE}
.retline .n b{display:block}
.retline .n small{color:var(--ink-soft)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{min-width:52px;min-height:52px;font-size:1.4rem;padding:0}
.stepper .sv{min-width:64px;text-align:center;font-family:Consolas,monospace;font-size:1.3rem;font-weight:800}
.restock{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;font-weight:700;color:var(--ink-soft);min-height:52px;min-width:92px;padding:4px 6px}
.restock.on{background:#E6F7EE;border-color:var(--ok);color:#147241}
.restock.off{background:#FBEDEC;border-color:#F3C2BE;color:#A6322B}
.ret-opts{display:flex;flex-direction:column;gap:8px}
#ret-settle button{min-height:50px}