/* REVO Base 0.97.0 – wersja mobilna (telefon ≤ 760 px): menu i statusy jako wysuwane szuflady, dolny pasek, lista zamówień jako kafelki,
   pakowanie na pełnym ekranie pod kciuk, osobny TRYB PAKOWANIA (body.mpack). Ładowany po app.css – nadpisuje. */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  /* ---- szkielet ---- */
  .shell,.shell.rail-open,.shell.rail-mini,.shell:has(.stat.hidden),.shell.rail-open:has(.stat.hidden){display:block!important;grid-template-columns:none!important}
  .main{min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  /* menu boczne = szuflada z lewej */
  .shell .rail,.shell.rail-open .rail,.shell.rail-auto .rail{position:fixed!important;left:0;top:0;height:100dvh!important;width:min(300px,86vw)!important;transform:translateX(-105%);transition:transform .25s cubic-bezier(.2,.9,.3,1);z-index:420;display:flex!important;overflow-y:auto;box-shadow:0 0 60px #0007}
  .shell.m-rail .rail{transform:none}
  .shell .rail .lbl{opacity:1!important}
  /* statusy = szuflada z lewej (druga) */
  .stat,.stat.closed{position:fixed!important;left:0;top:0;height:100dvh!important;width:min(300px,86vw)!important;transform:translateX(-105%);transition:transform .25s cubic-bezier(.2,.9,.3,1);z-index:410;box-shadow:0 0 60px #0007;display:flex!important}
  .shell.m-stat .stat{transform:none}
  .m-backdrop{position:fixed;inset:0;background:#0006;z-index:400;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(1px)}
  .shell.m-rail~.m-backdrop,.shell.m-stat~.m-backdrop,body.m-open .m-backdrop{opacity:1;pointer-events:auto}
  /* pasek górny: jedna linia, przewijany poziomo */
  .topbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;padding:6px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar::-webkit-scrollbar{display:none}
  .topbar>*{flex:0 0 auto}
  .topbar .ver,.topbar #newsbtn span,.topbar #bgpill span,.topbar .tog{display:none}
  .topbar .search{flex:1 1 150px;min-width:150px}
  .topbar #topsrc{min-width:0}
  .topbar .mwrap .ubtn #uname,.topbar .mwrap .car{display:none}
  /* ---- dolny pasek nawigacji ---- */
  #mnav{position:fixed;left:0;right:0;bottom:0;z-index:380;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 20px #0001}
  #mnav button{border:0;background:none;font:inherit;font-size:11px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #mnav button i{font-style:normal;font-size:20px;line-height:1}
  #mnav button.on,#mnav button:active{color:var(--link);background:color-mix(in srgb,var(--accent) 10%,transparent)}
  /* ---- nagłówki i karty ---- */
  .head{padding:10px 10px 6px}.head h1{font-size:16px}
  .card-wrap,.pnl{padding:10px}
  .ohead{gap:8px}.ohead h1{font-size:16px;line-height:1.3;flex-wrap:wrap}
  .qhead .qhr{flex-wrap:wrap}
  .dgrid{grid-template-columns:1fr}
  .dlg .dbox,.dbox,.dbox.wide{width:100%!important;max-width:100%!important;max-height:100dvh;border-radius:14px 14px 0 0;padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px))}
  #dlg{align-items:flex-end!important}
  .tbl,table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .obar{flex-wrap:wrap;gap:6px}.obar .tb{padding:7px 9px}
  .ofpanel{padding:8px}.ofgrid{grid-template-columns:1fr!important}
  input,select,textarea,.inp{font-size:16px}   /* iOS nie powiększa strony */
  /* ---- lista zamówień jako kafelki ---- */
  table.list{display:block;width:100%;border:0}
  table.list thead{display:none}
  table.list tbody{display:block}
  table.list tr.o{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:auto;gap:2px 8px;padding:10px 10px 10px 12px;border-bottom:1px solid var(--line);position:relative;align-items:start}
  table.list tr.o>td{display:block;padding:0;border:0;min-width:0;font-size:13px;white-space:normal}
  table.list tr.o>td{grid-row:auto!important}
  table.list tr.o>td:nth-child(2){order:1;grid-column:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}   /* numer */
  table.list tr.o>td:nth-child(6){order:2;grid-column:2;font-weight:700;text-align:right;white-space:nowrap}   /* kwota */
  table.list tr.o>td:nth-child(3){order:3;grid-column:1;font-weight:600}                  /* klient */
  table.list tr.o>td:nth-child(1){order:4;grid-column:2;justify-self:end}                 /* ptaszek */
  table.list tr.o>td:nth-child(7){order:5;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}   /* status · dostawa */
  table.list tr.o>td:nth-child(4){order:6;grid-column:1/-1;color:var(--muted);font-size:12px;max-height:3.2em;overflow:hidden}   /* przedmioty */
  table.list tr.o>td:nth-child(5){order:7;grid-column:1;font-size:11.5px;color:var(--muted)}   /* płatność */
  table.list tr.o>td:nth-child(8){order:8;grid-column:2;justify-self:end;display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;max-width:160px}                 /* ikonki */
  table.list tr.o>td:nth-child(9){order:9;grid-column:1/-1;font-size:11px;color:var(--muted);display:flex;gap:8px}   /* daty */
  table.list tr.o>td:nth-child(n+10){order:10;grid-column:1/-1}
  table.list tr.o .onum{font-size:15px}
  table.list tr.o .ostar{font-size:18px}
  table.list tr.sep,table.list tr.grp{display:block;padding:6px 10px}
  /* ---- pakowanie na telefonie ---- */
  .pk{padding:0}
  .pk-top{display:grid;grid-template-columns:1fr auto;gap:6px 8px;padding:8px 10px}
  .pk-top h2,.pk-top .ver{display:none}
  .pk-top .mid{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
  .pk-top .pkno{max-width:100%}.pk-top .pkno b{font-size:22px}
  .pk-top .pkreset{margin:0;grid-column:1/-1;justify-self:start;font-size:12px;padding:5px 9px}
  .pk-top>.tb{align-self:start;font-size:18px;padding:6px 12px}
  .pk-ro{padding:8px 10px;font-size:13px}
  .pk-body{display:flex;flex-direction:column;min-height:0;overflow:auto}
  .pk-body.pk-noleft .pk-left{display:none}
  .pk-left{flex:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;padding:6px 10px;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none;max-height:none}
  .pk-left .qo{flex:0 0 auto;width:auto;min-width:120px;max-width:200px;height:auto;padding:6px 10px;border-radius:10px}
  .pk-left .qo b{font-size:15px}.pk-left .qo span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pk-left .qsep{display:none}
  .pk-main{flex:1;overflow:visible;padding:0 0 90px}
  .pk-info{flex-wrap:wrap;gap:4px 10px;font-size:12.5px;padding:8px 10px}
  .pk-ship{padding:8px 10px;flex-wrap:wrap}.pk-ship .pks-m b{font-size:16px}
  .pk-btns{padding:6px 10px;flex-wrap:wrap;gap:6px}.pk-btns .ab{min-height:44px;font-size:13px}
  .pk-lines{padding:6px 8px}
  .pl-row{grid-template-columns:72px minmax(0,1fr);gap:6px 10px;padding:10px;border-radius:14px;margin-bottom:8px;border:1px solid var(--line);background:var(--surface)}
  .pl-row .pl-img{width:72px;height:60px}
  .pl-row .qcol{grid-column:1/-1;display:flex;align-items:center;gap:8px;justify-content:space-between}
  .pl-row .qbox{grid-column:auto;justify-self:end}
  .pl-row .qbox button,.pl-row .qcol button{min-width:48px;min-height:44px;font-size:18px}
  .pl-row.full{border-color:#16a34a;background:#f0fdf4}
  .pk-scan{position:fixed;left:0;right:0;bottom:calc(44px + env(safe-area-inset-bottom,0px));z-index:5;padding:8px 10px;background:var(--surface);border-top:1px solid var(--line);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .pk-scan .hint{width:100%;font-size:11.5px}
  .pkc-bar{display:none!important}
  .pk-bot{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
  .pk-bot .tb{min-height:40px}
  .pk-done{position:sticky;top:0;z-index:4;margin:0 8px}
  .nalerts{padding:6px 10px}
  /* ---- TRYB PAKOWANIA (telefon przy regale): tylko lista do spakowania + skaner ---- */
  body.mpack .topbar,body.mpack #mnav,body.mpack .rail,body.mpack .stat,body.mpack .qhead .qhr,body.mpack .obar .ofbtn,body.mpack .obar .fclear,body.mpack #topsrc,body.mpack .nalerts{display:none!important}
  body.mpack .main{padding-bottom:12px}
  #mpbar{position:sticky;top:0;z-index:70;background:var(--rail);color:#fff;padding:8px 10px calc(8px);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;box-shadow:0 2px 12px #0004}
  #mpbar .mpscan{grid-column:1/-1;display:flex;gap:6px}
  #mpbar .mpscan input{flex:1;font-size:18px;padding:12px 14px;border-radius:12px;border:0;background:#fff;color:#111}
  #mpbar .mpscan button{font-size:18px;padding:0 16px;border-radius:12px;border:0;background:var(--accent);color:#fff;font-weight:700}
  #mpbar .mpt{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
  #mpbar .mpt small{font-weight:400;opacity:.8}
  #mpbar .mpx{background:#fff2;color:#fff;border:1px solid #fff4;border-radius:10px;padding:6px 10px;font:inherit;font-size:13px}
  body.mpack table.list tr.o{padding:12px 10px 12px 14px}
  body.mpack table.list tr.o .onum{font-size:17px}
  body.mpack table.list tr.o>td:nth-child(4),body.mpack table.list tr.o>td:nth-child(5),body.mpack table.list tr.o>td:nth-child(8),body.mpack table.list tr.o>td:nth-child(n+10){display:none}
  body.mpack table.list tr.o>td:nth-child(7)::after{content:'⛟ Pakuj ›';margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;box-shadow:0 4px 12px -4px var(--accent)}
}
@media (max-width:760px) and (display-mode:standalone){.topbar{padding-top:calc(6px + env(safe-area-inset-top,0px))}}
.mbonly{display:none}@media (max-width:760px){.mbonly{display:block}}
@media (max-width:760px){
  .pk{z-index:95}
  .pk-btns{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:8px}.pk-btns .ab{flex:0 0 auto;white-space:nowrap}
  .pk-bot{flex-wrap:wrap}.pk-bot [data-markall]{flex:1 1 100%;order:3;min-height:48px;font-size:15px}.pk-bot .c{margin-left:auto;font-size:12px}
  body.mpack #qbar,body.mpack .qhead,body.mpack .obar,body.mpack .nalert,body.mpack #msgstrip,body.mpack .pag{display:none!important}
  body.mpack .list-wrap,body.mpack #view{padding-top:0}
}
@media (max-width:760px){.rclkpop{left:12px!important;right:12px;width:auto}.shell .rail .it{height:auto!important;min-height:44px}.shell .rail .it .lbl{white-space:normal!important;overflow:visible!important}}