/* Hustá tabuľka, ktorá sa dá čítať aj pri 600 riadkoch: lepkavá hlavička,
   číslice s pevnou šírkou, tichá zebra. Bez závislostí, bez JS. */
:root {
  --appbar-h: 44px;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #14181d;
  --muted: #5b6672;
  --line: #d8dee6;
  --line-soft: #eceff3;
  --accent: #1a4f8a;
  --pos: #0b6b3a;
  --pos-bg: #e6f4ec;
  --neg: #9a1c1c;
  --neg-bg: #fbeaea;
  --zebra: #fafbfc;
  /* vystraha sekcie „na kontrolu" — kontrast proti bielemu panelu aj proti zebre */
  --warn-ink: #7a4a00;
  --warn-bg: #fdf6e9;
  --warn-line: #d9a441;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); }
code, .mono, td.right { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.muted { color: var(--muted); }
.unk { color: var(--muted); font-style: italic; }

/* --- appbar --- */
.appbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--appbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: #10243a; color: #eef3f8;
  border-bottom: 1px solid #0a1826;
}
.appbar .brand { color: #fff; font-weight: 700; text-decoration: none; letter-spacing: .2px; }
.appbar .muted { color: #9db3c8; }
.appbar .spacer { flex: 1; }
.appbar .btn { background: transparent; color: #eef3f8; border-color: #35577c; }
.appbar .btn:hover { background: #1b3550; color: #fff; }

main { padding: 14px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
h1 { font-size: 18px; margin: 0 0 8px; }
h2 { font-size: 15px; margin: 18px 0 8px; }
h3 { font-size: 13px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.meta div { font-size: 12px; }
.meta b { font-weight: 600; }

.btn {
  display: inline-block; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 4px; background: #fff; color: var(--accent);
  text-decoration: none; font-size: 12px; cursor: pointer;
}
.btn:hover { background: #f0f4f8; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- formuláre --- */
form.grid-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
form.grid-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
input[type=text], select {
  font: 12px/1.3 inherit; padding: 5px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: #fff; color: var(--ink); min-width: 150px;
}
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .count { font-size: 12px; color: var(--muted); }

.notice { padding: 8px 10px; border-radius: 4px; margin-bottom: 12px; font-size: 12px; }
.notice.ok { background: var(--pos-bg); color: var(--pos); }
.notice.err { background: var(--neg-bg); color: var(--neg); }

/* --- tabuľky --- */
/* Tabuľka má vlastnú rolovaciu plochu: pri 600 riadkoch tak hlavička drží
   navrchu (sticky vnútri kontajnera) a stránka neroluje vodorovne. */
.tablewrap {
  overflow: auto;
  max-height: calc(100vh - var(--appbar-h) - 60px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
}
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
table.grid th {
  position: sticky; top: 0; z-index: 10;
  background: #eef2f6; text-align: left; font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid td {
  padding: 5px 8px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.grid tbody tr:nth-child(even) { background: var(--zebra); }
table.grid tbody tr:hover { background: #eef5ff; }
th.right, td.right { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.k-produkt { min-width: 240px; max-width: 380px; }
td.k-gtiny { min-width: 220px; }

.pname { font-weight: 600; }
.sub { font-size: 11px; color: var(--muted); }

/* SPREAD je produkt — nech je vidieť na prvý pohľad */
th.k-spread { background: #e3ebf4; }
td.k-spread { background: #f4f7fb; font-weight: 700; font-size: 13px; }
.spread.s-pos { color: var(--pos); }
.spread.s-neg { color: var(--neg); }
.spread.s-zero, .spread.s-none { color: var(--muted); }

ul.gtins { list-style: none; margin: 0; padding: 0; }
ul.gtins li { white-space: nowrap; font-size: 11px; }
ul.gtins code { font-size: 11px; }

/* --- štítky --- */
.chip, .flag, .lab, .conf, .tag, .tr, .state {
  display: inline-block; padding: 1px 5px; margin: 1px 3px 1px 0;
  border-radius: 3px; font-size: 10.5px; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.flag { background: #eef0f3; color: #35414e; border-color: #dfe3e8; }
.flag.f-LOW_CONFIDENCE { background: #fdf1d8; color: #7a5200; border-color: #f0dca8; }
.flag.f-PACK_UNKNOWN { background: #eee9f7; color: #4b3b78; border-color: #ddd4ef; }
.flag.f-SINGLE_OFFER { background: #e6eefb; color: #1a3f78; border-color: #cfdcf3; }
.flag.f-SHORT_EXPIRY { background: #fdeadd; color: #8a3d09; border-color: #f4d3bd; }
.flag.f-DAMAGED { background: #fbe3e3; color: #8c1616; border-color: #f0c6c6; }
.flag.f-MULTI_GTIN { background: #dff3f0; color: #0f5c52; border-color: #c3e6e0; }
.flag.f-OFFER_CATALOG_CONFLICT { background: #f6e3f2; color: #6d1a5e; border-color: #ecc9e4; }
.flag.f-PARSE_CONFLICT { background: #fbe3e3; color: #8c1616; border-color: #f0c6c6; }

.conf { border-color: var(--line); background: #fff; font-weight: 600; }
.conf.c-HIGH { background: var(--pos-bg); color: var(--pos); border-color: #bfe0cd; }
.conf.c-MEDIUM { background: #fdf1d8; color: #7a5200; border-color: #f0dca8; }
.conf.c-LOW { background: #fdeadd; color: #8a3d09; border-color: #f4d3bd; }
.conf.c-VETO { background: var(--neg-bg); color: var(--neg); border-color: #f0c6c6; }

.lab { background: #e9edf2; color: #2a3642; border-color: #d9dfe6; font-weight: 600; }
.lab.l-own { background: #e6eefb; color: #1a3f78; border-color: #cfdcf3; }
.lab.l-variant { background: #eee9f7; color: #4b3b78; border-color: #ddd4ef; }

.tr { background: #f1f3f5; color: var(--muted); border-color: #e2e6ea; }
.tr.t-GOOD { background: var(--pos-bg); color: var(--pos); border-color: #bfe0cd; }
.tr.t-BAD { background: var(--neg-bg); color: var(--neg); border-color: #f0c6c6; }

.tag { background: #eef2f6; color: #35414e; border-color: #dfe3e8; }
.tag.p1 { background: var(--pos-bg); color: var(--pos); border-color: #bfe0cd; font-weight: 700; }

.state { background: #eef2f6; color: #25313d; border-color: #dfe3e8; font-weight: 600; font-size: 11px; }

/* --- sekcia „na kontrolu" ------------------------------------------------
   Musi byt na prvy pohlad INA nez hlavna tabulka: kto ju prehliadne, precita
   nepotvrdene cislo ako vysledok. Preto vystrazny ram, tlmene pozadie a
   kandidatsky rozdiel kurzivou, nikdy v stlpci SPREAD. */
.review-section {
  border: 2px solid var(--warn-line);
  border-radius: 6px;
  background: var(--warn-bg);
  padding: 10px 12px 12px;
  margin: 22px 0 14px;
}
.review-head {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  color: var(--warn-ink);
}
.review-warn { color: var(--warn-ink); margin: 0 0 10px; max-width: 105ch; }
.review-warn b { font-weight: 700; }
.review-count { color: var(--warn-ink); }

table.grid.review th { background: #f6ead6; }
table.grid.review tbody tr:hover { background: #fdf3e2; }
th.k-kandidat, th.k-kontrola { background: #f6ead6; }
td.k-kandidat { font-style: italic; color: var(--warn-ink); white-space: nowrap; }
td.k-kontrola { min-width: 260px; max-width: 420px; }
/* akcia je prvy stlpec a drzi sa pri vodorovnom rolovani — bez nej sa riadok
   neda potvrdit a kontrola by ostala nedokoncena */
th.k-potvrdit, td.k-potvrdit {
  position: sticky; left: 0; z-index: 12;
  white-space: nowrap; background: var(--panel);
  border-right: 1px solid var(--line);
}
th.k-potvrdit { z-index: 20; background: #f6ead6; }
table.grid.review tbody tr:nth-child(even) td.k-potvrdit { background: var(--zebra); }

.cand { font-weight: 600; font-style: italic; }
.cand.c-pos, .cand.c-neg, .cand.c-zero, .cand.c-none { color: var(--warn-ink); }

ul.reasons { list-style: none; margin: 0 0 3px; padding: 0; }
ul.reasons li { margin-bottom: 2px; }
ul.reasons .sub { display: block; }
.flag.f-REVIEW { background: #f6ead6; color: var(--warn-ink); border-color: #e8d1a6; font-weight: 600; }

.ident { background: #eef2f6; color: #25313d; border-color: #dfe3e8; font-weight: 600;
  display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10.5px;
  border-style: solid; border-width: 1px; }
.ident.i-AUTO_CONFIRMED, .ident.i-USER_CONFIRMED {
  background: var(--pos-bg); color: var(--pos); border-color: #bfe0cd; }
.ident.i-REVIEW_REQUIRED { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.ident.i-NOT_FOUND { background: #f1f3f5; color: var(--muted); border-color: #e2e6ea; }

.links > * { margin-right: 6px; font-size: 11px; white-space: nowrap; }

/* --- sumár --- */
.cards { display: flex; flex-wrap: wrap; gap: 8px; }
.card {
  border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px;
  background: #fff; min-width: 96px;
}
.card .n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

table.kv { border-collapse: collapse; font-size: 12px; }
table.kv td { padding: 2px 10px 2px 0; }
table.kv td:first-child { color: var(--muted); }

/* D2 — druhý a tretí rozdiel: tlmenejšie než p1, aby bolo vidieť, čo je default */
.spread.alt { font-weight: 600; opacity: .85; }
.sortbar { margin: .35rem 0 .6rem; }
.sortbar .sort-active { padding: .1rem .45rem; border-bottom: 2px solid #1f3b57; }
.btn.small { padding: .1rem .45rem; font-size: .85em; }
/* 🔴 Odznak JEDNA PONUKA je VAROVANIE, nie demotácia — riadok zostáva na mieste */
.badge { display: inline-block; padding: .05rem .35rem; border-radius: .25rem;
         font-size: .78em; font-weight: 700; letter-spacing: .02em; }
.badge.single-offer { background: #8a3d09; color: #fff; }
/* B2 — stará cena sa NESKRÝVA, len sa označí */
.badge.stale-badge { background: #6b4b00; color: #fff; }
.stale { color: #6b4b00; font-weight: 600; }
/* C2 — proveniencia kódu a odznak neúplného zoznamu */
.tag.prov { background: #eef2f6; color: #33475b; }
.badge.partial { background: #33475b; color: #fff; }