/* ============================================================
   Brand téma LANO-MOTÚZ / line-twine
   Farby uprav podľa brand manuálu webu lano-motuz.sk –
   stačí zmeniť premenné nižšie, celé UI sa prefarbí.
   ============================================================ */
:root {
  /* skutočné farby lano-motuz.sk: antracitová navigácia + zlaté akcenty */
  --brand-dark: #383f46;     /* antracitová – hlavička, navigácia */
  --brand: #4d555e;          /* tmavšia šedá – panely, akcenty */
  --rope: #b3923c;           /* zlatá – tlačidlá, kategórie (ako na webe) */
  --rope-light: #d9c27d;
  --bg: #f2f3f5;             /* svetlošedý podklad webu */
  --card: #ffffff;
  --ok: #2e7d32;
  --warn: #c62828;
  --muted: #7a7f87;
  --remnant: #f59f00;        /* farebný zostatkový štítok */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--bg);
  color: var(--brand-dark);
}

/* ---------------- hlavička s logom – biely pruh ako na lano-motuz.sk ---------------- */
header {
  background: #fff;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e4e7ea;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo svg { height: 42px; width: 42px; }
.logo .logo-img { height: 52px; max-width: 170px; object-fit: contain; }
.logo .name { font-size: 19px; font-weight: 700; letter-spacing: 0.5px; color: #1c1f24; }
.logo .name span { color: var(--rope); }
.logo .sub { font-size: 11px; color: #8a8f96; display: block; margin-top: -3px; }

nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
nav button {
  background: #fff; color: #495059; border: 1px solid #d4d9de;
  padding: 8px 14px; border-radius: 8px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
nav button:hover { border-color: var(--rope); }
nav button.active { background: var(--rope); border-color: var(--rope); color: #fff; font-weight: 600; }
nav button .ico { font-size: 17px; line-height: 1; }

/* ---------------- sken lišta ---------------- */
.scanbar {
  background: var(--brand);
  padding: 8px 16px;
  display: flex; gap: 8px; align-items: center;
}
.scanbar input {
  flex: 1; max-width: 420px; padding: 10px 12px; font-size: 16px;
  border: none; border-radius: 8px;
}
.scanbar .hint { color: #c6d3e2; font-size: 12px; }

main { padding: 16px; max-width: 1100px; margin: 0 auto; }

.card {
  background: var(--card); border-radius: 12px; padding: 16px;
  box-shadow: 0 1px 4px rgba(31, 48, 68, 0.12); margin-bottom: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 17px; color: var(--brand); }

button.big {
  background: var(--rope); color: #fff; border: none; border-radius: 14px;
  font-size: 22px; font-weight: 700; padding: 20px 28px; cursor: pointer;
  width: 100%; margin: 8px 0; min-height: 64px;
}
button.big:active { transform: scale(0.98); background: #a96d1f; }
button.big.secondary { background: var(--brand); }
button.big.xl { font-size: 24px; min-height: 84px; }

/* farebný pás s povelom – skladník vidí na prvý pohľad, čo robí */
.task-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 24px; font-weight: 800; color: #fff; letter-spacing: 0.5px;
  padding: 16px 10px; border-radius: 12px; margin-bottom: 14px;
}
.task-banner span { font-size: 30px; }
.task-banner.DONASKA { background: var(--brand); }
.task-banner.REZANIE { background: var(--rope); }
.task-banner.PICK { background: #00796b; }
.task-banner.BALENIE { background: var(--ok); }
.task-banner.ZASKLADNENIE { background: #6d4c41; }

/* obrovský kód pozície – hlavná informácia pre nosenie */
.big-loc {
  font-size: 52px; font-weight: 800; text-align: center;
  color: var(--brand); letter-spacing: 2px; margin: 10px 0;
  font-family: monospace;
}

/* výber mena pri prihlásení – žiadne písanie */
.name-pick { display: flex; flex-direction: column; gap: 10px; }
.name-pick button {
  font-size: 24px; font-weight: 700; padding: 20px; min-height: 72px;
  border: 2px solid var(--brand); background: #fff; color: var(--brand-dark);
  border-radius: 14px; cursor: pointer; text-align: left;
}
.name-pick button:active { background: var(--rope-light); }
.name-pick button { display: flex; align-items: center; gap: 14px; }
.avatar { height: 100%; width: auto; }
.card.senior h2 { font-size: 22px; }
.card.senior details summary { font-size: 17px; padding: 10px 0; cursor: pointer; }
button.small {
  background: var(--brand); color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 14px; cursor: pointer; margin: 2px;
}
button.small.ghost { background: #e6e2d8; color: var(--brand-dark); }

.chip {
  display: inline-block; background: #eef2f7; border: 2px dashed var(--brand);
  color: var(--brand-dark); border-radius: 10px; padding: 12px 14px; margin: 4px;
  font-family: monospace; font-size: 17px; font-weight: 700; cursor: pointer;
}
.chip:active { background: var(--rope-light); }
.chip:hover { background: var(--rope-light); }

.measure { font-size: 64px; font-weight: 800; color: var(--rope); text-align: center; margin: 8px 0; }
.measure small { font-size: 18px; color: var(--muted); font-weight: 400; }
.instruction { font-size: 21px; text-align: center; margin: 10px 0; line-height: 1.35; }
.msg-ok { background: #e6f3e6; border-left: 5px solid var(--ok); padding: 10px; border-radius: 6px; margin: 8px 0; }
.msg-err { background: #fdebea; border-left: 5px solid var(--warn); padding: 10px; border-radius: 6px; margin: 8px 0; }
.msg-info { background: #eaf1f8; border-left: 5px solid var(--brand); padding: 10px; border-radius: 6px; margin: 8px 0; }

.numrow { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 12px 0; }
.numrow input { font-size: 34px; width: 150px; text-align: center; padding: 10px; border: 3px solid var(--brand); border-radius: 12px; font-weight: 700; }
.numrow button { font-size: 26px; width: 66px; height: 66px; border-radius: 12px; border: none; background: var(--brand); color: #fff; cursor: pointer; font-weight: 700; }
.numrow button:active { background: var(--rope); }

.progress { font-size: 13px; color: var(--muted); text-align: center; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; }
th { color: var(--brand); font-size: 12px; text-transform: uppercase; }

.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; color: #fff; background: var(--muted); }
.badge.NOVY, .badge.NOVA, .badge.OPEN { background: var(--brand); }
.badge.NACATY, .badge.V_VLNE, .badge.ASSIGNED, .badge.ROZPRACOVANA { background: var(--rope); }
.badge.PRAZDNY, .badge.DONE, .badge.EXPEDOVANA { background: var(--ok); }
.badge.BLOCKED, .badge.SKOMPLETIZOVANA { background: #8d6e63; }

/* ---------------- štítky (tlačový spool) ---------------- */
.labels { display: flex; flex-wrap: wrap; gap: 10px; }
.label {
  border: 2px solid var(--brand-dark); border-radius: 6px; padding: 10px;
  width: 250px; background: #fff; font-size: 14px; position: relative;
}
.label.REM { background: var(--remnant); border-color: #b97400; }
.label.RET { background: #e05252; border-color: #8e1f1f; color: #fff; }
.label.RET .meta { color: #ffd7d7; }

.box-hint {
  background: #fff7e0; border: 2px solid var(--rope); border-radius: 12px;
  padding: 12px; text-align: center; font-size: 19px; margin-bottom: 12px;
}
.box-hint small { font-size: 14px; color: #6b5b3a; }
.label.SHIP { width: 330px; background: #fff; border-width: 3px; }
.label .qr { position: absolute; right: 8px; top: 8px; font-size: 26px; }
.label .big-m { font-size: 24px; font-weight: 800; }
.label .meta { font-size: 11px; color: #333; margin-top: 4px; font-family: monospace; }
.label .printer-tag {
  position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: var(--muted);
}
details.zpl pre { font-size: 10px; background: #222; color: #8f8; padding: 6px; overflow-x: auto; }

/* ---------------- mapa skladu ---------------- */
.map-wrap { overflow-x: auto; }
svg.map rect.loc { fill: #dde6ef; stroke: var(--brand); rx: 4; }
svg.map rect.loc.occupied { fill: var(--rope-light); }
svg.map text { font-size: 9px; fill: var(--brand-dark); }

.role-pick { display: flex; gap: 12px; flex-wrap: wrap; }
.role-pick button {
  flex: 1; min-width: 160px; padding: 22px 10px; font-size: 19px; font-weight: 700;
  border: 3px solid var(--brand); background: #fff; color: var(--brand-dark);
  border-radius: 14px; cursor: pointer; line-height: 1.4;
}
.role-pick button .ico { display: block; font-size: 34px; margin-bottom: 6px; }
.role-pick button small { font-weight: 400; color: var(--muted); font-size: 14px; }
.role-pick button.sel, .role-pick button:active { background: var(--rope); border-color: var(--rope); color: #fff; }

/* uzávierky kuriérov */
.cutoffs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.co {
  background: var(--card); border: 2px solid var(--brand); border-radius: 10px;
  padding: 6px 12px; font-size: 15px; font-weight: 700; color: var(--brand-dark);
}
.co.hot { border-color: var(--warn); color: var(--warn); animation: blik 1.2s infinite; }
.co.past { border-color: #bbb; color: var(--muted); font-weight: 400; }
@keyframes blik { 50% { opacity: 0.55; } }

/* inventúra */
.inv-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #eee; flex-wrap: wrap; font-size: 16px;
}
.numrow.compact { margin: 0; gap: 6px; }
.numrow.compact input { width: 96px; font-size: 24px; padding: 6px; }
.chip.sel { background: var(--rope-light); border-style: solid; }

.flexrow { display: flex; gap: 14px; flex-wrap: wrap; }
.flexrow > div { flex: 1; min-width: 280px; }
input.txt, select.txt { padding: 10px; font-size: 16px; border: 1px solid #bbb; border-radius: 8px; width: 100%; margin: 4px 0; }
.worker-info { font-size: 14px; color: #495059; }
.worker-info b { color: var(--rope); }

/* ============================================================
   Mobil (Zebra TC21/TC26 má 5" displej, ~480 px) – navigácia sa
   presunie na spodnú lištu pod palec, všetko na plnú šírku.
   ============================================================ */
@media (max-width: 760px) {
  header { padding: 6px 10px; gap: 8px; }
  .logo .logo-img { height: 40px; max-width: 120px; }
  .logo svg { height: 34px; }
  .logo .name { font-size: 15px; }
  .logo .sub { display: none; }
  .worker-info { margin-left: auto; font-size: 12px; text-align: right; }

  nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; margin: 0;
    background: var(--brand-dark); border-top: 1px solid #4a525b;
    display: flex; gap: 0; flex-wrap: nowrap;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
  }
  nav button {
    flex: 1; flex-direction: column; gap: 2px; border: none;
    font-size: 10px; padding: 6px 2px; border-radius: 8px;
    background: transparent; color: #d7dee6;   /* spodná lišta ostáva tmavá */
  }
  nav button .ico { font-size: 21px; }

  .scanbar { padding: 6px 10px; position: sticky; top: 0; z-index: 90; }
  .scanbar input { max-width: none; }
  .scanbar .hint { display: none; }

  main { padding: 10px; padding-bottom: 84px; }   /* miesto pre spodnú lištu */
  .card { padding: 12px; overflow-x: auto; }      /* tabuľky sa posúvajú prstom */
  .measure { font-size: 54px; }
  .big-loc { font-size: 42px; }
  .instruction { font-size: 19px; }
  .task-banner { font-size: 20px; padding: 14px 8px; }
  button.big { font-size: 20px; padding: 18px 12px; }
  button.big.xl { font-size: 21px; min-height: 80px; }
  .numrow input { width: 120px; font-size: 30px; }
  .numrow button { width: 58px; height: 58px; }
  .role-pick { flex-direction: column; }
  .role-pick button { min-width: 0; padding: 18px 10px; }
  .label { width: 100%; max-width: 300px; }
  .label.SHIP { width: 100%; max-width: 320px; }
  .chip { padding: 8px 10px; font-size: 13px; }   /* väčší dotykový cieľ */
  th, td { padding: 8px 6px; font-size: 13px; }
}

/* ---------------- gamifikácia: nástenka cti + teplomer ---------------- */
.hof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hof-card {
  background: var(--card); border-radius: 14px; padding: 20px; text-align: center;
  box-shadow: 0 1px 4px rgba(31,48,68,.12); border-top: 4px solid var(--rope);
}
.hof-ico { font-size: 44px; }
.hof-title { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0; }
.hof-who { font-size: 26px; font-weight: 800; color: var(--brand-dark); }
.hof-sub { font-size: 14px; color: var(--brand); margin-top: 4px; }

.thermo {
  background: #e8eaed; border-radius: 20px; height: 36px; overflow: hidden; margin: 10px 0;
}
.thermo-fill {
  background: linear-gradient(90deg, var(--rope-light), var(--rope));
  height: 100%; min-width: 36px; border-radius: 20px;
  color: #fff; font-weight: 700; text-align: right; padding-right: 12px;
  line-height: 36px; transition: width .6s ease;
}