/* LKF verkoop-app — phones and iPads of sellers and packers.
   SuKassa palette (same as the kassa and the back office), system fonts and inline SVG
   icons only, so it starts offline. Touch targets >= 48px, safe areas for iPhone. */
: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:14px; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;overscroll-behavior:none}
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:650}
button:active{background:var(--panel3)}
button:disabled{opacity:.45;cursor:default}
svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}
[hidden]{display:none !important}
.muted{color:var(--ink-soft)} .small{font-size:.85rem} .center{text-align:center}
.msg{min-height:20px;color:var(--warn);font-weight:650;font-size:.95rem}
.msg.bad{color:var(--danger)} .msg.good{color:var(--ok)}
.inp{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;width:100%;min-height:50px}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,184,255,.22)}
textarea.inp{resize:vertical;min-height:60px}
.inp--code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:800;letter-spacing:.18em;text-align:center;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn--big{min-height:56px;font-size:1.05rem;font-weight:800;width:100%}
.btn--primary{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
.btn--primary:active{background:var(--yellow-dark)}
.btn--ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn--ok:disabled{background:var(--panel3);border-color:var(--line);color:var(--ink-soft);opacity:1}
.btn--danger{color:var(--danger);border-color:#F3C2BE}
.row2{display:flex;gap:10px}.row2 > *{flex:1}
.check{display:flex;align-items:center;gap:10px;font-weight:650;min-height:44px}
.check input{width:22px;height:22px;accent-color:var(--blue-dark)}

#app{height:100%}
.scr{display:none;height:100%}
.scr.on{display:flex;flex-direction:column}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 38px rgba(15,58,82,.12);padding:22px}
.card--center{margin:auto;width:min(440px,94vw);display:flex;flex-direction:column;gap:12px;text-align:center}
.card--center h1{font-size:1.4rem;font-weight:850}
.logo{width:76px;height:76px;align-self:center;border-radius:18px}
#scr-pair,#scr-lock{padding:calc(16px + var(--sat)) 12px calc(16px + var(--sab));background:linear-gradient(170deg,var(--blue-deep),var(--blue-dark) 55%,var(--blue))}

/* PIN */
.pin-dots{display:flex;gap:14px;justify-content:center;min-height:20px;padding:4px 0}
.pin-dots span{width:16px;height:16px;border-radius:50%;background:var(--line)}
.pin-dots span.f{background:var(--blue-dark)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pad button{min-height:62px;font-size:1.55rem;font-weight:750}
.pad .key--ok{grid-column:1/-1;background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink);font-size:1.1rem}
.numview{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:2.1rem;font-weight:800;text-align:right;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:8px 16px;color:var(--blue-deep)}

/* signed in: header / views / tabs */
#scr-main.on{display:flex;flex-direction:column;height:100%}
.top{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:calc(8px + var(--sat)) 12px 8px;background:var(--blue-deep);color:#fff}
.top-logo{width:36px;height:36px;border-radius:10px;background:#fff}
.top-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.top-title b{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-title small{font-size:.8rem;color:rgba(255,255,255,.75)}
.net{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.net--on{background:#3BD17E;box-shadow:0 0 0 4px rgba(59,209,126,.25)}
.net--off{background:var(--danger);box-shadow:0 0 0 4px rgba(214,69,60,.3)}
.iconbtn{min-width:48px;min-height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-color:transparent;color:#fff}
.iconbtn--dark{color:var(--ink)}
#views{flex:1;min-height:0;position:relative}
.view{display:none;position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 90px}
.view.on{display:block}
.view--sub{padding-bottom:24px}
.view-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 2px 10px;flex-wrap:wrap}
.view-head h2{font-size:1.25rem;font-weight:850}
.tabs{flex:0 0 auto;display:flex;background:var(--panel);border-top:1px solid var(--line);padding-bottom:var(--sab)}
.tabs button{flex:1;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:62px;font-size:.78rem;font-weight:700;color:var(--ink-soft);position:relative}
.tabs button.on{color:var(--blue-deep)}
.tabs button.on svg{fill:var(--blue-dark)}
.tabn{position:absolute;top:6px;left:calc(50% + 6px);background:var(--danger);color:#fff;font-style:normal;font-size:.72rem;font-weight:800;border-radius:999px;padding:0 6px;min-width:20px;line-height:18px}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.seg button{flex:1;min-height:44px;font-size:.92rem}
.seg button.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.seg--sm button{min-height:38px;font-size:.85rem;padding:4px 10px}

/* selling */
.sell-head{position:sticky;top:-12px;z-index:5;background:var(--bg);margin:-12px -12px 6px;padding:12px 12px 6px;display:flex;flex-direction:column;gap:8px}
.custchip{display:flex;align-items:center;gap:10px;text-align:left;min-height:50px}
.custchip span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custchip.set{border-color:var(--blue-dark);background:#E4F3FE;color:var(--blue-deep)}
.custchip--wide{width:100%}
.lvl{font-style:normal;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}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 12px}
.search svg{fill:var(--ink-soft)}
.search input{flex:1;border:0;background:transparent;font:inherit;min-height:48px;outline:none;color:var(--ink)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;min-height:38px;border-radius:999px;font-size:.85rem;padding:4px 14px;border-left-width:4px}
.chips button.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.plist{display:grid;grid-template-columns:1fr;gap:8px}
.prow{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:var(--r);padding:8px 8px 8px 10px;min-height:72px}
.prow.has{border-color:var(--blue-dark);background:#F4FAFF}
.prow.out{opacity:.6}
.prow .ph{width:54px;height:54px;border-radius:10px;background:var(--panel2) center/cover no-repeat;flex:0 0 54px;border:1px solid var(--line)}
.prow .pm{flex:1;min-width:0}
.prow .pn{font-weight:750;line-height:1.2;word-break:break-word}
.prow .ps{font-size:.8rem;color:var(--ink-soft);margin-top:2px}
.prow .ps .low{color:var(--warn);font-weight:700}
.prow .ps .zero{color:var(--danger);font-weight:700}
.prow .pp{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;color:var(--blue-deep);white-space:nowrap}
.prow .pp.wh{color:#8A5A10}
.prow .pr{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{min-width:44px;min-height:44px;padding:0;font-size:1.4rem;font-weight:800;border-radius:12px}
.stepper .sv{min-width:38px;text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:850;font-size:1.1rem}
.stepper .plus{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.empty{text-align:center;color:var(--ink-soft);padding:30px 10px}
.cartbar{position:absolute;left:12px;right:12px;bottom:12px;z-index:8;display:flex;align-items:center;gap:10px;min-height:60px;background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 10px 26px rgba(15,58,82,.28);border-radius:18px}
.cartbar #cb-count{flex:1;text-align:left;font-weight:700}
.cartbar b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.15rem}
.cartbar .cb-go{font-weight:800}
.outbox{background:#FFF4E0;border:1px solid #F6DFB1;color:#8A5A10;border-radius:var(--r);padding:10px 12px;margin-top:10px;font-weight:650;font-size:.9rem}

/* order lists */
.olist{display:flex;flex-direction:column;gap:8px}
.olist--tight{gap:6px;max-height:52vh;overflow-y:auto}
.ocard{text-align:left;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-left:6px solid var(--line);background:var(--panel)}
.ocard .o1{display:flex;align-items:center;gap:10px}
.ocard .ono{font-size:1.5rem;font-weight:900;color:var(--blue-deep);line-height:1}
.ocard .ocust{flex:1;min-width:0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocard .ometa{font-size:.82rem;color:var(--ink-soft)}
.ocard .otot{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;color:var(--blue-deep)}
.ocard .obar{height:6px;border-radius:4px;background:var(--panel3);overflow:hidden}
.ocard .obar i{display:block;height:100%;background:var(--ok)}
.ocard.st-open{border-left-color:var(--blue)}
.ocard.st-picking{border-left-color:var(--yellow)}
.ocard.st-packed{border-left-color:var(--ok);background:#F3FBF6}
.ocard.st-invoiced,.ocard.st-cancelled{opacity:.65}
.ocard.mine{box-shadow:inset 0 0 0 2px var(--yellow)}
.st{font-style:normal;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 9px;white-space:nowrap}
.st-open .st,.st.st-open{background:#E4F4FF;color:#12628F}
.st.st-picking{background:#FFF4E0;color:#8A5A10}
.st.st-packed{background:#E6F7EE;color:#147241}
.st.st-invoiced{background:var(--panel3);color:var(--ink-soft)}
.st.st-cancelled{background:#FBEDEC;color:#A6322B}
.st.st-queued{background:#FFF4E0;color:#8A5A10}
.crow{text-align:left;display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-height:56px}
.crow b{font-weight:800}
.crow small{color:var(--ink-soft)}
.info{display:flex;flex-direction:column;gap:6px;font-size:.92rem;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.info .r{display:flex;justify-content:space-between;gap:10px}

/* packing */
.subhead{position:sticky;top:-12px;z-index:5;margin:-12px -12px 8px;padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.pk-no{font-size:2rem;font-weight:900;color:var(--blue-deep);line-height:1}
.pk-who{flex:1;min-width:0;display:flex;flex-direction:column}
.pk-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-who small{color:var(--ink-soft);font-size:.8rem}
.pk-note{background:#FFF4E0;border:1px solid #F6DFB1;border-radius:var(--r);padding:10px 12px;margin-bottom:8px;font-weight:650;color:#8A5A10}
.pk-progress{display:flex;align-items:center;gap:10px;margin:4px 2px 10px}
.pk-progress .bar{flex:1;height:10px;border-radius:6px;background:var(--panel3);overflow:hidden}
.pk-progress .bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .2s}
.pk-progress span{font-weight:850;font-family:ui-monospace,Menlo,Consolas,monospace}
.pk-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pkl{display:flex;align-items:center;gap:10px;background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:10px}
.pkl.on{border-color:var(--ok);background:#F1FBF5}
.pkl.zero{border-color:#F3C2BE;background:#FDF3F2}
.pkl .tick{width:58px;height:58px;flex:0 0 58px;border-radius:14px;border:3px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.pkl.on .tick{background:var(--ok);border-color:var(--ok)}
.pkl .tick svg{width:34px;height:34px;fill:#fff}
.pkl .pm{flex:1;min-width:0}
.pkl .pn{font-weight:800;line-height:1.2;word-break:break-word}
.pkl .ps{font-size:.8rem;color:var(--ink-soft);margin-top:2px}
.pkl .ps b{color:var(--ink)}
.pkl .ps .diff{color:var(--warn);font-weight:800}
.pkl .pq{display:flex;flex-direction:column;align-items:center;gap:4px}
.pkl .qbtn{min-width:76px;min-height:52px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.3rem;font-weight:900;color:var(--blue-deep);padding:0 8px}
.pkl .qbtn small{display:block;font-family:inherit;font-size:.65rem;font-weight:700;color:var(--ink-soft)}
.pkl .nolev{min-height:34px;font-size:.72rem;padding:2px 8px;color:var(--danger);border-color:#F3C2BE}
.pk-actions{display:flex;gap:8px;margin-bottom:10px}
.pk-actions .btn{flex:1}

/* sent */
.sent{margin-top:4vh}
.sent-ok{width:72px;height:72px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;align-self:center}
.sent-ok svg{width:44px;height:44px;fill:#fff}
.sent-no{font-size:4.2rem;font-weight:900;color:var(--blue-deep);line-height:1;letter-spacing:-1px}
.sent-cust{font-size:1.1rem;font-weight:800}
.sent-total{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:1.2rem}

/* sheets */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(11,78,119,.45);display:none;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
.sheet--center{align-items:center}
.sheet-box{background:var(--panel);width:min(640px,100vw);max-height:92vh;overflow-y:auto;border-radius:22px 22px 0 0;padding:14px 14px calc(14px + var(--sab));display:flex;flex-direction:column;gap:10px;box-shadow:0 -10px 30px rgba(15,58,82,.2)}
.sheet--center .sheet-box{border-radius:22px;width:min(400px,94vw)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet-head h2{font-size:1.2rem;font-weight:850}
#sh-qty{z-index:60}
.clines{display:flex;flex-direction:column;gap:6px}
.cl{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:6px 0}
.cl .cm{flex:1;min-width:0}
.cl .cm b{display:block;font-weight:750;line-height:1.2}
.cl .cm small{color:var(--ink-soft)}
.cl .ct{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;white-space:nowrap;min-width:84px;text-align:right}
.cart-tot{display:flex;justify-content:space-between;align-items:center;font-size:1.15rem;font-weight:850;padding:4px 2px}
.cart-tot b{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--blue-deep);font-size:1.35rem}

#toast{position:fixed;left:50%;bottom:calc(84px + var(--sab));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:92vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--danger)}
#toast.good{background:var(--ok)}

/* tablets: two columns of articles, wider sheets */
@media (min-width:700px){
  .plist{grid-template-columns:repeat(2,1fr)}
  .olist:not(.olist--tight){display:grid;grid-template-columns:repeat(2,1fr)}
  .cartbar{left:auto;width:420px;right:16px}
}
@media (min-width:1100px){
  .plist{grid-template-columns:repeat(3,1fr)}
  .olist:not(.olist--tight){grid-template-columns:repeat(3,1fr)}
  .view{padding-left:20px;padding-right:20px}
}