:root {
  --accent: #D08A12; --accent-h: #B37510; --accent-fg: #111;
  --bg: #F3F4F7; --card: #FFFFFF; --text: #1D1D1F; --muted: #6B7280; --line: #E3E5EA;
  --side: #1E2128; --side-fg: #D7DAE0; --input: #FFFFFF; --input-line: #CDD1D8;
  --bad: #C62828; --warn: #B26A00; --ok: #1E7D32; --sel: #FDEBC8; --row-alt: #F8F9FB; --head: #F0F1F4;
  --danger: #C0392B;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #E3A12B; --accent-h: #C98B1E; --bg: #17191E; --card: #23262D; --text: #E6E6E6; --muted: #9AA0AA;
    --line: #30343C; --side: #111317; --input: #2B2F37; --input-line: #3B404A; --bad: #FF7B7B; --warn: #F5B041;
    --ok: #7BD88F; --sel: #4A3A1A; --row-alt: #262A31; --head: #2A2E36; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent: #E3A12B; --accent-h: #C98B1E; --bg: #17191E; --card: #23262D; --text: #E6E6E6; --muted: #9AA0AA;
  --line: #30343C; --side: #111317; --input: #2B2F37; --input-line: #3B404A; --bad: #FF7B7B; --warn: #F5B041;
  --ok: #7BD88F; --sel: #4A3A1A; --row-alt: #262A31; --head: #2A2E36; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
#app { display: flex; height: 100vh; }

/* ---------- splash / setup ---------- */
#splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 1000; }
.splash-box { text-align: center; max-width: 420px; padding: 24px; }
.splash-logo { font-size: 56px; }
.splash-title { font-size: 22px; font-weight: 700; margin: 6px 0 16px; }
.splash-note { color: var(--muted); font-size: 12px; margin-top: 12px; }
#splash-text { margin-top: 12px; }
.spinner { width: 34px; height: 34px; border: 4px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.9s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.setup-wrap { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 32px 16px; }
.setup { background: var(--card); border-radius: 16px; padding: 28px; max-width: 640px; width: 100%; height: fit-content;
  box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.setup h1 { margin: 0 0 4px; font-size: 24px; }
.setup h2 { font-size: 17px; margin: 18px 0 8px; }
.setup input { width: 100%; margin-bottom: 10px; }
.note { color: var(--muted); font-size: 12px; }

/* ---------- izbornik ---------- */
.side { width: 236px; flex: none; background: var(--side); color: var(--side-fg); display: flex; flex-direction: column; }
.brand { padding: 16px 16px 8px; }
.brand-logo img { max-width: 190px; max-height: 70px; display: block; }
.brand-txt { color: var(--accent); font-size: 22px; font-weight: 800; }
.brand-name { color: #9AA0AA; font-size: 12px; margin-top: 4px; }
.nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.nav-sec { color: #6F7682; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; margin: 12px 8px 4px; min-height: 4px; }
.nav-btn { display: flex; gap: 10px; align-items: center; color: var(--side-fg); text-decoration: none; padding: 7px 10px;
  border-radius: 9px; font-size: 14px; }
.nav-btn:hover { background: #2A2E37; }
.nav-btn.active { background: var(--accent); color: #111; font-weight: 600; }
.nav-btn .ico { width: 20px; text-align: center; }
.side-foot { padding: 10px 14px 14px; font-size: 11.5px; }
.sync-status { margin-bottom: 4px; cursor: default; }
.sync-status.ok { color: #7BD88F; } .sync-status.warn { color: #F5B041; } .sync-status.bad { color: #FF7B7B; cursor: pointer; }
.sync-status.muted { color: #9AA0AA; }
.ver { color: #5F6672; }
.burger { display: none; }
.scrim { display: none; }

/* ---------- stranica ---------- */
.main { flex: 1; overflow: auto; min-width: 0; }
.page { padding: 20px 24px 28px; max-width: 1600px; }
.page-head h1 { margin: 0; font-size: 26px; }
.page-head .sub { color: var(--muted); margin-top: 2px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 12px; }
.tb-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.content { display: flex; flex-direction: column; gap: 12px; }
.search { width: 220px; }
.card { background: var(--card); border-radius: 14px; padding: 16px 18px; }
.card h3 { margin: 0 0 8px; font-size: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border-radius: 14px; padding: 12px 16px; cursor: pointer; }
.kpi .bar { height: 4px; border-radius: 2px; margin-bottom: 6px; }
.kpi .lab { color: var(--muted); font-size: 12px; }
.kpi .val { font-size: 26px; font-weight: 700; }
.kpi .s { color: var(--muted); font-size: 11.5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 8px; }
.muted { color: var(--muted); }
.banner { border-radius: 10px; padding: 9px 14px; font-weight: 600; }
.banner.warn { background: #FFF1C2; color: #7A5200; } .banner.ok { background: #D9F2DC; color: #1E5B2A; }
.banner.bad { background: #FDE2E0; color: #8B1E15; }
:root[data-theme="dark"] .banner.warn { background: #4A3B12; color: #F5D27A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner.warn { background: #4A3B12; color: #F5D27A; }
  :root:not([data-theme="light"]) .banner.ok { background: #1F3B26; color: #9BE3A8; }
  :root:not([data-theme="light"]) .banner.bad { background: #4A1E1A; color: #FFB3AB; } }
.seg { display: inline-flex; background: var(--card); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--text); padding: 5px 11px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; }
.seg button.on { background: var(--accent); color: #111; font-weight: 600; }
.subnav { display: flex; gap: 14px; }
.subnav .side2 { width: 220px; flex: none; background: var(--card); border-radius: 14px; padding: 8px; height: fit-content; }
.subnav .side2 a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; cursor: pointer; font-size: 13.5px; }
.subnav .side2 a.on { background: var(--accent); color: #111; font-weight: 600; }
.subnav .side2 .sec { border: 0; padding: 0; color: var(--muted); font-size: 10.5px; font-weight: 700; margin: 10px 10px 2px; }
.subnav .panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.panel-head h2 { margin: 0; font-size: 19px; }

/* ---------- tipke i polja ---------- */
.btn { border: 0; border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: var(--accent); color: #111; font-weight: 600; }
.btn-primary:hover { background: var(--accent-h); }
.btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-danger { background: var(--danger); color: #fff; }
input, select, textarea { font: inherit; color: var(--text); background: var(--input); border: 1.5px solid var(--input-line);
  border-radius: 8px; padding: 7px 9px; min-height: 36px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type=checkbox] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); vertical-align: middle; }
textarea { resize: vertical; width: 100%; }

/* ---------- tablica ---------- */
.table-wrap { background: var(--card); border-radius: 12px; overflow: auto; padding: 6px; max-height: calc(100vh - 230px); min-height: 120px; }
.table-wrap.fixed { min-height: 0; }
table.grid { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 13px; }
table.grid td { max-width: 360px; }
table.grid th { position: sticky; top: 0; background: var(--head); text-align: left; padding: 7px 8px; font-weight: 600;
  cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
table.grid td { padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line); }
table.grid tbody tr:nth-child(even) { background: var(--row-alt); }
table.grid tbody tr { cursor: default; }
table.grid tbody tr:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
table.grid tbody tr.sel { background: var(--accent) !important; color: #111 !important; }
table.grid tr.bad { color: var(--bad); } table.grid tr.warn { color: var(--warn); } table.grid tr.ok { color: var(--ok); }
table.grid tr.muted { color: var(--muted); } table.grid tr.bold { font-weight: 700; }
table.grid tr.empty td { color: var(--muted); text-align: center; padding: 18px; }
.al-e { text-align: right !important; } .al-center { text-align: center !important; }

/* ---------- dijalozi ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(10, 12, 16, .45); display: flex; align-items: flex-start;
  justify-content: center; padding: 3vh 12px; overflow: auto; }
.modal { background: var(--bg); border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,.35); display: flex; flex-direction: column;
  max-height: 94vh; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 4px; font-weight: 700; font-size: 16px; }
.modal-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.modal-body { padding: 8px 18px; overflow: auto; flex: 1; }
.modal-err { display: none; color: var(--bad); padding: 0 18px; font-size: 13px; white-space: pre-line; }
.modal-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; flex-wrap: wrap; }
.msg { white-space: pre-line; padding: 4px 0 8px; }
.msg.pre { white-space: pre-wrap; }
.form { display: grid; gap: 4px 14px; }
.fcell { display: flex; flex-direction: column; padding: 3px 0; min-width: 0; }
.fcell.full { grid-column: 1 / -1; }
.fcell input, .fcell select { width: 100%; }
.fcell input[type=checkbox] { width: 18px; flex: none; }
.flab { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.sec { font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--accent); padding: 10px 0 3px; }
.finfo { font-weight: 700; padding: 4px 0; }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.chk.big { font-size: 13.5px; padding-top: 18px; }
.mcheck { display: grid; gap: 4px 14px; }
.busy { position: fixed; inset: 0; background: rgba(10,12,16,.35); display: grid; place-items: center; z-index: 900; }
.busy-box { background: var(--card); padding: 22px 28px; border-radius: 14px; text-align: center; min-width: 260px; }
.busy-text { margin-top: 10px; }
#toast { position: fixed; right: 16px; bottom: 16px; background: #2A2E37; color: #fff; padding: 10px 16px; border-radius: 10px;
  opacity: 0; transform: translateY(10px); transition: .25s; pointer-events: none; z-index: 2000; max-width: 80vw; }
#toast.show { opacity: 1; transform: none; }
.chart { background: var(--card); border-radius: 14px; padding: 12px 16px; }
.chart h4 { margin: 0; font-size: 15px; } .chart .s { color: var(--muted); font-size: 12px; }
.chart svg { width: 100%; height: auto; display: block; }
.logo-prev { width: 200px; height: 86px; border-radius: 10px; background: var(--head); display: grid; place-items: center; color: var(--muted); }
.logo-prev img { max-width: 190px; max-height: 78px; }

/* ---------- mobitel ---------- */
@media (max-width: 860px) {
  .side { position: fixed; z-index: 95; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s; }
  body.menu-open .side { transform: none; }
  body.menu-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 92; }
  .burger { display: block; position: fixed; left: 10px; top: 10px; z-index: 90; border: 0; background: var(--card);
    color: var(--text); border-radius: 10px; width: 40px; height: 40px; font-size: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
  .page { padding: 16px 12px 24px; }
  .page-head { padding-left: 48px; }
  .grid2 { grid-template-columns: 1fr; }
  .subnav { flex-direction: column; }
  .subnav .side2 { width: 100%; display: flex; flex-wrap: wrap; }
  .subnav .side2 .sec { display: none; }
  .tb-right { margin-left: 0; }
  .search { width: 100%; }
  .table-wrap { max-height: none; }
  .form { grid-template-columns: 1fr !important; }
}

/* ---------- rad s kegovima ---------- */
.hidden { display: none !important; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--card); color: var(--text); border: 0; border-top: 5px solid var(--accent); border-radius: 14px;
  padding: 16px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); min-height: 110px; }
.tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.tile-ico { font-size: 28px; } .tile-name { font-size: 17px; font-weight: 700; } .tile-sub { color: var(--muted); font-size: 12.5px; }
.tile-cart { color: var(--warn); font-size: 12px; font-weight: 600; min-height: 15px; }
.badge { color: #fff; border-radius: 8px; padding: 2px 9px; font-size: 12.5px; font-weight: 700; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin-bottom: 10px; }
.fact { display: flex; flex-direction: column; gap: 2px; } .fact .muted { font-size: 12px; }
.scanner { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; background: #000; border-radius: 12px;
  overflow: hidden; margin-bottom: 10px; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 14% 18%; border: 3px solid rgba(255,255,255,.75); border-radius: 14px; }
.scan-frame.ok { animation: flashok .6s; } .scan-frame.bad { animation: flashbad .9s; }
@keyframes flashok { 0% { border-color: #5BBF7A; box-shadow: 0 0 0 999px rgba(91,191,122,.35); } 100% { border-color: rgba(255,255,255,.75); } }
@keyframes flashbad { 0% { border-color: #E0675A; box-shadow: 0 0 0 999px rgba(224,103,90,.45); } 100% { border-color: rgba(255,255,255,.75); } }
.scan-msg { margin-top: 8px; font-weight: 600; min-height: 20px; }
.offer-lines { display: flex; flex-direction: column; gap: 2px; }
.ol-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 130px 110px 100px 76px; gap: 8px; align-items: center;
  padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ol-head { font-size: 12px; font-weight: 700; color: var(--muted); border-bottom-width: 2px; }
.ol-row input { width: 100%; text-align: right; }
.ol-name { display: flex; flex-direction: column; min-width: 0; }
.ol-q { display: flex; align-items: center; gap: 4px; }
.ol-amt { text-align: right; font-weight: 700; }
.ol-act { display: flex; gap: 4px; justify-content: flex-end; } .ol-act .btn { padding: 4px 8px; min-height: 0; }
.ol-head span:nth-child(n+3) { text-align: right; }
.offer-tot { text-align: right; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.offer-sum { font-size: 18px; } .offer-sum b { font-size: 20px; }
@media (max-width: 700px) {
  .ol-head { display: none; }
  .ol-row { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "n name act" "n q amt" "n p amt"; row-gap: 4px; }
  .ol-row > :nth-child(1) { grid-area: n; } .ol-row > :nth-child(2) { grid-area: name; } .ol-row > :nth-child(3) { grid-area: q; }
  .ol-row > :nth-child(4) { grid-area: p; } .ol-row > :nth-child(5) { grid-area: amt; align-self: center; }
  .ol-row > :nth-child(6) { grid-area: act; }
  .ol-q input, .ol-row > :nth-child(4) input { max-width: 110px; }
}
.kw-recent > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; user-select: none; }
.kw-recent > summary::-webkit-details-marker { display: none; }
.kw-recent-btn { margin-left: auto; border: 1px solid var(--line, #ccc); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.kw-recent-btn::before { content: "▾ Prikaži"; }
.kw-recent[open] .kw-recent-btn::before { content: "▴ Sakrij"; }
.kw-recent[open] > summary { margin-bottom: 8px; }
.fill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.fill-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.fill-row .fill-code { flex: 1; font-weight: 600; }
.fill-row.last { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 8px; padding: 3px 6px; }
.fill-row input.manual { border-color: var(--accent); font-weight: 700; }
.fill-row .btn { padding: 4px 8px; min-height: 0; }
.scan-msg.ok { color: var(--ok); } .scan-msg.bad { color: var(--bad); }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; } .tile { min-height: 96px; padding: 12px; }
  .kw-counts { grid-template-columns: repeat(3, 1fr); gap: 8px; } .kw-counts .kpi { padding: 8px 10px; }
  .kw-counts .kpi .val { font-size: 20px; } .kw-counts .kpi .s { display: none; } }
.who { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #D7DAE0; }
.who a { color: #E3A12B; text-decoration: none; }
.setup.login { max-width: 420px; }

/* ---------- mobitel: tablice kao kartice, dijalozi preko cijelog zaslona ---------- */
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px; }           /* iPhone ne povećava stranicu kod upisa */
  .page { padding: 12px 10px 24px; }
  .page-head h1 { font-size: 21px; }
  .page-head .sub { font-size: 12.5px; }
  .toolbar { gap: 6px; margin: 10px 0; }
  .toolbar .btn { padding: 7px 10px; font-size: 13px; }
  .tb-right { order: -1; flex-basis: 100%; }
  .tb-right .search { flex: 1; }
  .btn { min-height: 38px; }
  .card { padding: 12px; }
  .table-wrap { padding: 0; background: transparent; max-height: none !important; overflow: visible; min-height: 0; }
  table.grid, table.grid tbody { display: block; width: 100% !important; min-width: 0 !important; }
  table.grid colgroup, table.grid thead { display: none; }
  table.grid tbody tr { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 1px 10px; background: var(--card) !important;
    border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); border-left: 4px solid transparent; }
  table.grid tbody tr:hover { outline: none; }
  table.grid tbody tr.sel { background: var(--sel) !important; color: inherit !important; border-left-color: var(--accent); }
  table.grid tbody tr.bad { border-left-color: var(--bad); } table.grid tbody tr.warn { border-left-color: var(--warn); }
  table.grid tbody tr.ok { border-left-color: var(--ok); }
  table.grid td { display: contents; border: 0; padding: 0; white-space: normal; }
  table.grid td::before { content: attr(data-label); color: var(--muted); font-size: 12px; padding: 2px 0; }
  table.grid td { font-size: 14px; }
  table.grid td.empty { display: none; }
  table.grid td.ttl { display: block; grid-column: 1 / -1; font-weight: 700; font-size: 15px; }
  table.grid td.al-e, table.grid td.al-center { text-align: left !important; }
  table.grid td.ttl::before { display: none; }
  table.grid tr.empty { display: block; text-align: center; color: var(--muted); }
  table.grid tr.empty td { display: block; }
  table.grid tr.empty td::before { display: none; }
  /* dijalog = cijeli zaslon, tipke uvijek dolje */
  .modal-back { padding: 0; align-items: stretch; }
  .modal { width: 100% !important; max-height: none; height: 100%; border-radius: 0; }
  .modal-body { padding: 8px 14px; }
  .modal-bar { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .modal-bar .btn { flex: 1; justify-content: center; }
  /* podizbornik (HACCP) u jednom redu koji se pomiče prstom */
  .subnav .side2 { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
  .subnav .side2 a { white-space: nowrap; flex: none; }
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi .val { font-size: 21px; }
  .chart { padding: 10px; }
  .grid2 > * { min-width: 0; }
}
/* tablet: uži izbornik */
@media (min-width: 861px) and (max-width: 1180px) {
  .side { width: 200px; }
  .nav-btn { font-size: 13px; padding: 6px 8px; }
  .page { padding: 16px 16px 24px; }
}
/* veliki zaslon: više prostora za tablice */
@media (min-width: 1700px) { .page { max-width: 1900px; } }

.qr-box { background: #fff; border-radius: 10px; padding: 6px; text-align: center; }
.qr-code { color: #111; font-weight: 700; font-size: 13px; }
.install { display: block; color: #E3A12B; text-decoration: none; margin-bottom: 8px; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; }
.chip .btn { padding: 2px 7px; min-height: 0; border: 0; }
.grid2 > .span2 { grid-column: 1 / -1; }
.dash-alerts { margin: 0; }
.dash-alerts > summary { font-size: 16px; flex-wrap: wrap; }
.dash-alerts-sum { flex-basis: 100%; order: 9; font-weight: 400; }