/* ==========================================================================
   ekipa-back.css · back-office screens QR plačila, Meni, HACCP, Integracije (/ekipa, theme ops)
   Loaded once by js/ekipa/{placila,meni,haccp,integracije}.js (or linked by the shell). Prefix: bo- / ig-.
   Semantic tokens of burja.css only; shared components (.dtable, .panel, .kv, .exc, .steps, ...) live there.
   ========================================================================== */

/* ---------- layout ---------- */
.bo-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.bo-stack--wide { gap: var(--s-7); }
.bo-cols { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .bo-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.bo-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; }
.bo-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); min-width: 0; }
.bo-sec__title { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
.bo-sec__sub { font-size: var(--fs-xs); color: var(--text-3); min-width: 0; overflow-wrap: anywhere; }
.bo-sec__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.bo-fieldset { border: 0; padding: 0; margin: 0; }
.bo-fieldset > legend { padding: 0; margin-bottom: var(--s-3); }
.bo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.bo-grow { flex: 1 1 auto; min-width: 0; }
.bo-min0 { min-width: 0; }
.bo-gap-b { margin-bottom: var(--s-5); }
.bo-pad { padding: var(--s-3) 0; }
.bo-plain { list-style: none; margin: 0; padding: 0; }
.bo-mono { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: -.01em; }
.bo-num { font-variant-numeric: tabular-nums; }
.bo-nowrap { white-space: nowrap; }
.bo-auto { width: auto; }
.bo-tabs { margin-bottom: var(--s-5); max-width: 100%; overflow-x: auto; }
.bo-tabs .seg { flex-wrap: nowrap; }
.bo-tabs .seg > button { white-space: nowrap; }
.bo-notices { margin-bottom: var(--s-4); }
.bo-fail { align-items: center; flex-wrap: wrap; }
.bo-ico { flex: none; display: inline-flex; }
.bo-ico svg { width: 20px; height: 20px; }
.bo-state { margin-top: 4px; color: var(--text-2); }
.bo-state--bad { color: var(--danger); }
.bo-state--warn { color: var(--warn); }
.bo-count { margin-top: var(--s-2); }
.bo-foot { margin-top: var(--s-4); max-width: 72ch; }
details.bo-data summary { cursor: pointer; font-size: var(--fs-xs); color: var(--link); width: max-content; max-width: 100%; }
details.bo-data[open] summary { margin-bottom: var(--s-2); }
.bo-steps-list { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); max-width: 78ch; }

/* ---------- toolbar, search, chips ---------- */
.bo-search { position: relative; flex: 1 1 220px; max-width: 340px; }
.bo-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.bo-search .input { padding-left: 38px; }
.bo-toolbar .select { width: auto; min-width: 150px; max-width: 100%; }
.bo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }

/* ---------- responsive data table: rows become blocks under 760px ---------- */
@media (max-width: 760px) {
  .bo-rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bo-rtable, .bo-rtable tbody { display: block; }
  .bo-rtable tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .bo-rtable tr:last-child { border-bottom: 0; }
  .bo-rtable td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .bo-rtable td.num { text-align: left; }
  .bo-rtable td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-sans); font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
  .bo-rtable td.bo-span { grid-column: 1 / -1; }
  .bo-rtable td.bo-actions { text-align: left; white-space: normal; }
  .bo-rtable td.bo-actions .bo-exc-actions { justify-content: flex-start; }
}
.dtable td.bo-actions { text-align: right; white-space: nowrap; }
.dtable tr.bo-row-low td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.dtable tr.bo-row-bad td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* ---------- QR plačila ---------- */
.bo-exc-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
@media (max-width: 640px) { .bo-exc-actions { justify-content: flex-start; } }
.bo-sev { color: var(--warn); }
.bo-sev[data-severity="danger"] { color: var(--danger); }
.bo-sev[data-severity="info"] { color: var(--info); }
.bo-exc-detail { font-size: var(--fs-sm); color: var(--text-2); margin-top: 4px; max-width: 70ch; }
.bo-exc-help { font-size: var(--fs-sm); color: var(--text); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line-strong); max-width: 70ch; }
.bo-allok { display: grid; justify-items: start; gap: 6px; padding: var(--s-5); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-bg); border-radius: var(--r-3); color: var(--ok); }
.bo-allok strong { font-size: 1.25rem; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.bo-allok span { color: var(--text-2); font-size: var(--fs-sm); }
.bo-zoi { display: grid; gap: 1px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.35; }
.bo-zoi b { font-weight: 500; color: var(--text-3); margin-right: 4px; }
.bo-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.bo-timeline li { display: grid; grid-template-columns: 76px 14px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding-bottom: var(--s-3); position: relative; font-size: var(--fs-sm); }
.bo-timeline li::before { content: ""; position: absolute; left: calc(76px + var(--s-3) + 6px); top: 14px; bottom: 0; width: 2px; background: var(--line); }
.bo-timeline li:last-child::before { display: none; }
.bo-timeline i { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); margin-top: 3px; box-shadow: 0 0 0 3px var(--surface); z-index: 1; }
.bo-timeline li[data-bad="true"] i { background: var(--danger); }
.bo-timeline time { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); padding-top: 1px; }

/* ---------- Meni ---------- */
.bo-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); vertical-align: middle; font-size: var(--fs-xs); }
th .bo-lock { font-size: inherit; cursor: help; }
.bo-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); flex: none; border: 1px solid var(--line); }
.bo-art { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.bo-art__name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bo-art__meta { font-size: var(--fs-micro); color: var(--text-3); }
.bo-langs { display: inline-flex; gap: 3px; }
.bo-lang { font-family: var(--font-mono); font-size: 10px; line-height: 1; padding: 4px 4px 3px; border-radius: 3px; border: 1px dashed var(--line-strong); color: var(--text-3); text-transform: uppercase; }
.bo-lang[data-ok="true"] { border-style: solid; border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.bo-changes { margin-bottom: var(--s-4); }
.bo-diff { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.bo-diff li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.bo-diff del { color: var(--text-3); }
.bo-diff ins { text-decoration: none; font-weight: 650; }
.bo-lang-set { border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-3) var(--s-4) var(--s-4); margin: 0; display: grid; gap: var(--s-3); min-width: 0; }
.bo-lang-set legend { padding: 0 6px; font-size: var(--fs-micro); font-weight: 650; letter-spacing: .05em; color: var(--text-3); }
.bo-photo-box { max-width: 360px; }
.bo-photo { display: block; width: 100%; max-width: 360px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--surface-2); }
.bo-photo--none { display: grid; place-items: center; aspect-ratio: 16 / 7; color: var(--text-3); font-size: var(--fs-xs); border-style: dashed; border-color: var(--line-strong); }
.bo-alg-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px var(--s-3); }
.bo-alg-pick .check { font-size: var(--fs-xs); align-items: center; min-height: 40px; }
.bo-alg-pick .check input { margin: 0; }
.bo-alg-pick .allergen { flex: none; }
.bo-switch-row { align-items: center; min-height: 44px; }
.bo-switch-row input { margin: 0; }

/* ---------- HACCP (phone in the kitchen: large targets, large figures) ---------- */
.bo-due { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bo-due span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--surface); border: 1px solid var(--line); }
.bo-due span[data-state="done"] { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.bo-due span[data-state="overdue"] { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.bo-temps { display: grid; }
.bo-temp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.bo-temps > :last-child { border-bottom: 0; }
.bo-temp label { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.bo-temp small { display: block; font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); }
.bo-temp__in { display: flex; gap: 6px; align-items: center; }
.bo-temp .input, .t-ops .bo-temp .input { width: 104px; min-height: 52px; text-align: right; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; }
.bo-sign, .t-ops .bo-sign { --btn-h: 52px; min-width: 48px; padding: 0; font-family: var(--font-mono); font-size: 1.25rem; }
.bo-temp .field__error { grid-column: 1 / -1; }
.bo-sup { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.bo-sup .select, .t-ops .bo-sup .select, .bo-add-sup .input, .t-ops .bo-add-sup .input { min-height: 52px; font-size: 1rem; }
.bo-add-sup { display: flex; gap: var(--s-2); align-items: center; }
.bo-add-sup[hidden] { display: none; }
.bo-add-sup .input { flex: 1 1 auto; min-width: 0; }
.bo-add-sup .btn { --btn-h: 52px; flex: none; }
.bo-ticks { display: grid; }
.bo-tick { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.bo-temps > .bo-tick:last-child, .bo-ticks > .bo-tick:last-child { border-bottom: 0; }
.bo-tick input { width: 28px; height: 28px; margin: 0; }
.bo-save { width: 100%; }
@media (min-width: 760px) { .bo-save { width: auto; min-width: 240px; } }
.bo-last > li { display: grid; gap: 2px; padding-block: var(--s-3); }
.bo-last > li:first-child { border-top: 0; padding-top: 0; }
.bo-last > li:last-child { border-bottom: 0; padding-bottom: 0; }
.bo-paper { margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-2); align-items: flex-start; }

/* print view: a plain sheet on screen (preview) and on A4 paper */
.bo-print { margin-bottom: var(--s-6); }
.bo-print[hidden] { display: none; }
.bo-print__sheet { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-5); font-size: 12.5px; line-height: 1.4; overflow-x: auto; }
.bo-print__sheet h2 { font-family: var(--font-sans); font-size: 18px; font-weight: 650; margin: 0 0 2px; }
.bo-print__sheet h3 { font-family: var(--font-sans); font-size: 13px; font-weight: 650; margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.bo-print__sheet table { width: 100%; border-collapse: collapse; }
.bo-print__sheet th, .bo-print__sheet td { border: 1px solid var(--line-strong); padding: 4px 6px; text-align: left; vertical-align: top; }
.bo-print__sheet th { background: var(--surface-2); font-weight: 600; }
.bo-print__sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-print__sheet .bad { color: var(--danger); font-weight: 700; }
.bo-print__note { margin-top: 14px; }
.bo-print__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.bo-print__sign div { border-top: 1px solid var(--text); padding-top: 4px; }
.bo-print-root { display: none; }
@page bo-haccp { size: A4 portrait; margin: 14mm 12mm; }
@media print {
  body.bo-printing > :not(.bo-print-root) { display: none !important; }
  body.bo-printing > .bo-print-root { display: block !important; page: bo-haccp; }
  .bo-print-root .bo-print__sheet { border: 0; border-radius: 0; padding: 0; overflow: visible; font-size: 10.5px; }
  .bo-print-root .bo-print__sheet h2 { font-size: 15px; }
  .bo-print-root .bo-print__sheet h3 { font-size: 11px; margin-top: 14px; break-after: avoid; }
  .bo-print-root .bo-print__sheet thead { display: table-header-group; }
  .bo-print-root .bo-print__sheet tr, .bo-print-root .bo-print__sign { break-inside: avoid; }
  .bo-print-root .bo-print__sheet th, .bo-print-root .bo-print__sheet td { padding: 3px 5px; }
}

/* ---------- Integracije ---------- */
.bo-conns { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.bo-conn { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); min-width: 0; }
.bo-conn[data-status="down"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.bo-conn__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.bo-conn__name { font-family: var(--font-sans); font-weight: 650; font-size: 1.05rem; }
.bo-conn__head .badge { margin-left: auto; }
.bo-conn .kv { font-size: var(--fs-xs); gap: 6px var(--s-3); grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.bo-conn .notice { margin: 0; }
.ig-split { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: stretch; }
.ig-list { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.45; }
.ig-list li::marker { color: var(--text-3); }