:root {
  --bg: #eceff1;
  --fg: #1c2326;
  --muted: #607d8b;
  --card: #fff;
  --bar: #263238;
  --ok: #1b8a3a;
  --warn: #e08a00;
  --err: #c62828;
  --zone: 110px; /* wysokosc wolnej strefy na wirtualny przycisk skanera */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 15px/1.3 system-ui, -apple-system, Roboto, sans-serif; }
/* caly ekran bez przewijania strony – przewija sie tylko lista ostatnich skanow */
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* --- gorny pasek --- */
.bar { display: flex; align-items: center; gap: 8px; background: var(--bar); color: #fff; padding: 6px 10px; flex: none; }
.opbtn { background: none; border: 0; color: #fff; font-weight: 600; padding: 0; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opbtn.armed { color: #ffcc80; }
.manifest-btn { flex: 1; min-width: 0; background: #37474f; border: 0; border-radius: 6px; color: #fff; font-size: 12px; text-align: left; padding: 4px 6px !important;
  padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* wybor manifestu */
.mpanel { position: fixed; left: 0; right: 0; top: 36px; bottom: 0; z-index: 4; background: var(--bg);
  display: flex; flex-direction: column; padding: 8px 10px; }
.mp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.mp-head .close { position: static; }
.mp-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; }
.mp-list li { margin-bottom: 6px; }
.mp-list button { width: 100%; text-align: left; border: 0; border-radius: 10px; background: #fff; padding: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); font-size: 15px; }
.mp-list button.sel { outline: 3px solid var(--ok); }
.mp-list .mp-name { font-weight: 600; word-break: break-word; }
.mp-list .mp-prog { color: var(--muted); font-size: 12px; margin-top: 2px; }
.mp-list .mp-bar { height: 5px; background: #eceff1; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.mp-list .mp-bar div { height: 100%; background: var(--ok); }
.mp-list .hint { text-align: center; color: var(--muted); padding: 24px 10px; }
.mp-finish { flex: none; padding: 8px 0 calc(var(--zone) * .5); }
.mp-current { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.finish { width: 100%; min-height: 54px; border: 0; border-radius: 10px; background: #455a64; color: #fff; font-size: 17px; font-weight: 700; }
.finish.armed { background: var(--err); font-size: 15px; }
.sync { font-size: 12px; padding: 3px 8px; border-radius: 10px; background: var(--ok); white-space: nowrap; }
.sync.pending { background: var(--warn); }
.sync.offline { background: var(--err); }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 0; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; }
.icon { min-width: 40px; height: 34px; border: 0; border-radius: 8px; background: #cfd8dc; font-size: 18px; }

/* --- gotowosc do skanowania / pole kodu --- */
.scanrow { display: flex; gap: 6px; flex: none; }
.ready { flex: 1; height: 34px; border: 0; border-radius: 8px; background: #e8f5e9; color: var(--ok);
  font-size: 14px; font-weight: 600; }
.ready.off { background: var(--warn); color: #fff; }
#scan { flex: 1; height: 34px; font-size: 17px; padding: 0 10px; border: 2px solid #90a4ae; border-radius: 8px; background: #fff; }
#scan:focus { outline: none; border-color: var(--bar); }
/* niewidoczne, ale nadal moze miec fokus (display:none by go odebralo i skaner nie mialby gdzie pisac) */
#scan.offscreen { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }

/* --- karta produktu (kompaktowa) --- */
.card { position: relative; margin-top: 8px; background: var(--card); border-radius: 10px; padding: 8px 36px 8px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); border-left: 5px solid var(--ok); flex: none; }
.card.empty { border-left-color: #b0bec5; color: var(--muted); padding: 10px; text-align: center; font-size: 14px; }
.card.unknown { border-left-color: var(--warn); }
.card.over { border-left-color: var(--err); }
.card.change { border-left-color: #1565c0; background: #e3f2fd; }
.card .changeinfo { font-size: 13px; color: #0d47a1; margin-top: 2px; }
.pieces { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.piece { border: 1px solid #90caf9; background: #fff; border-radius: 12px; padding: 2px 9px; font-size: 12px; }
.piece.sel { background: #1565c0; border-color: #1565c0; color: #fff; }
.statuses button.current { box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); }
.card .sku { font-size: 17px; font-weight: 700; word-break: break-all; }
.card .desc { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { color: var(--muted); font-size: 13px; }
.card .meta b { color: var(--fg); }
.card .warn { color: var(--warn); font-weight: 600; font-size: 13px; }
.card .err { color: var(--err); font-weight: 600; font-size: 13px; }
.card .saved { font-size: 16px; font-weight: 700; word-break: break-all; }
.card .close { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; border-radius: 15px;
  background: #eceff1; color: var(--muted); font-size: 16px; line-height: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { font-size: 12px; color: #fff; padding: 1px 7px; border-radius: 9px; }

/* --- statusy --- */
.actions { padding: 6px 0; flex: none; }
.actions.disabled .statuses button { filter: grayscale(1); opacity: .35; }
.statuses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.statuses button { min-height: 54px; border: 0; border-radius: 10px; color: #fff; font-size: 17px; font-weight: 700; }
.statuses button small { display: block; font-weight: 400; font-size: 12px; opacity: .9; }
.statuses button:active { filter: brightness(.85); }

/* --- sortowanie dostawy na palety --- */
.card.sort { border-left-color: #1565c0; text-align: center; padding-right: 10px; }
.card.sort.x { border-left-color: var(--warn); background: #fff8e1; }
.pallet-big { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: 2px; }
.card.sort .desc { white-space: normal; }
.place { width: 100%; min-height: 64px; border: 0; border-radius: 10px; background: var(--ok); color: #fff; font-size: 20px; font-weight: 700; }
.place:disabled { background: #cfd8dc; color: #90a4ae; }
.recent li .pal { font-weight: 800; font-size: 18px; min-width: 44px; text-align: center; }
.recent li .ok-btn { border: 0; background: var(--ok); color: #fff; border-radius: 6px; padding: 8px 10px; font-weight: 700; }
.recent li.placed { opacity: .6; }
.mp-sec { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin: 6px 0 4px; }

/* --- ostatnie skany: przewijana lista nad strefa przycisku --- */
.recent-h { margin: 10px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; flex: none; }
.recent { list-style: none; margin: 0; padding: 0 0 6px; flex: 1; min-height: 0; overflow-y: auto; }
.recent li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px;
  padding: 5px 8px; margin-bottom: 4px; font-size: 13px; }
.recent li .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent li .q { color: var(--muted); font-size: 11px; }
.recent li.queued { opacity: .7; }
.recent li .undo { border: 0; background: #ffebee; color: var(--err); border-radius: 6px; padding: 5px 9px; }
.recent li .undo.armed { background: var(--err); color: #fff; font-weight: 700; }
.recent li.pending { border-left: 5px solid var(--warn); background: #fff8e1; font-weight: 600;
  animation: pulse 1.2s ease-in-out infinite; }
.recent li.fresh { animation: flash 1.5s ease-out; }
@keyframes pulse { 50% { background: #ffe0a3; } }
@keyframes flash { 0% { background: #a5d6a7; } 100% { background: #fff; } }

/* --- wolna strefa na dole na wirtualny przycisk skanowania --- */
.scan-zone { flex: none; height: var(--zone); display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px; color: #b0bec5; font-size: 11px; border-top: 1px dashed #cfd8dc; }

/* komunikaty u gory, zeby nie zaslanialy przycisku skanera */
.toast { position: fixed; left: 10px; right: 10px; top: 44px; padding: 10px; border-radius: 10px;
  color: #fff; font-weight: 600; text-align: center; transform: translateY(-160px); transition: transform .15s; z-index: 5; }
.toast.show { transform: none; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }
.toast.warn { background: var(--warn); }

/* logowanie operatora */
.login { padding: 12px; flex: 1; overflow-y: auto; }
.pairbox p { color: var(--muted); margin: 0 0 12px; }
.paircode { width: 100%; font: 700 22px/1.2 ui-monospace, monospace; letter-spacing: 2px; text-transform: uppercase; text-align: center;
  padding: 12px; border: 2px solid #b0bec5; border-radius: 10px; margin-bottom: 10px; }
.pairbox button { width: 100%; padding: 14px; border: 0; border-radius: 10px; background: var(--ok); color: #fff; font-size: 17px; font-weight: 700; }
.login h2 { margin: 6px 0 12px; font-size: 18px; }
.oplist { display: grid; gap: 8px; }
.oplist button { min-height: 52px; border: 0; border-radius: 10px; background: #fff; font-size: 18px;
  text-align: left; padding: 0 14px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.oplist .hint { text-align: center; color: var(--muted); padding: 20px; }
.pinname { font-size: 20px; font-weight: 700; text-align: center; }
.pindots { font-size: 28px; letter-spacing: 8px; text-align: center; margin: 8px 0 12px; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keys button { height: 58px; border: 0; border-radius: 10px; background: #fff; font-size: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.keys button.ok { background: var(--ok); color: #fff; font-weight: 700; }
.pinpad .link { display: block; margin: 12px auto 0; }
.loginmsg { color: var(--err); font-weight: 600; text-align: center; margin-top: 10px; }