/* Doplněk stylů: záložky Cena a Konkurence detailu zakázky, stránky /konkurence a /konkurence/<firma>.
   Jen třídy .cena-*, .pasmo-*, .leg-*, .konk-*; barvy výhradně z proměnných v app.css. Načítá se na všech stránkách za app.css. */

/* ---------- Cena: uložená cena ---------- */
.cena-ulozena-radek { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: flex-end; }
.cena-blok { display: grid; gap: 2px; min-width: 0; }
.cena-blok .popis, .cena-vysledek .popis { font-size: 12px; color: var(--text-3); font-weight: 500; }
.cena-velka { font: 500 28px/1.15 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cena-stredni { font: 500 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cena-rozpis { margin-top: 10px; }
.cena-pozn { margin-top: 8px; max-width: 78ch; white-space: pre-line; overflow-wrap: anywhere; }
.cena-ulozena .hlaska { margin-top: 12px; }
.cena-historie { margin-top: 12px; }
.karta .cena-historie ul { padding-left: 0; list-style: none; gap: 3px; }

/* ---------- Cena: kalkulačka ---------- */
.cena-karta { container: cena-kalk / inline-size; }
.cena-karta > .hlaska { margin-bottom: 12px; }
.cena-pole { display: grid; gap: 14px; min-width: 0; }
.cena-form input[type="text"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cena-form textarea { min-height: 76px; }
.cena-form .pole-radek { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cena-vysledek { display: grid; gap: 4px 24px; align-content: start; padding: 14px 16px; border: 1px solid var(--linka); border-radius: var(--r2); background: var(--plocha-2); min-width: 0; }
.cena-dph { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.cena-dph .cislo { font-size: 16px; font-weight: 500; }
.cena-vysledek .hlaska { margin-top: 6px; padding: 10px 12px; font-size: 13px; }
.cena-vzorec { max-width: 70ch; }
@container cena-kalk (min-width: 520px) {
  .cena-vysledek { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .cena-vysledek .popis { grid-column: 1; }
  .cena-vysledek .cena-velka { grid-column: 1; }
  .cena-vysledek .cena-dph { grid-column: 2; grid-row: 1 / span 2; justify-self: end; flex-direction: column; align-items: flex-end; gap: 0; }
  .cena-vysledek .cena-dph .cislo { font-size: 20px; }
  .cena-vysledek > .male, .cena-vysledek > .hlaska { grid-column: 1 / -1; }
}

/* ---------- Cena: Trh (pásmo cen) ---------- */
/* Popisky se rozmisťují v Pythonu (obrazovky/cena.py) do řad nad a pod osou, zvlášť pro úzkou a širokou osu; tady se jen vybere sada
   proměnných podle šířky kontejneru. --x je poloha v % osy, --lt/--st/--sh/--az/--ta poloha popisku a svislice v px. */
.cena-trh .pasmo-obal { container: pasmo / inline-size; margin: 2px 0 6px; }
.cena-trh .pasmo { --at: var(--at-m); height: var(--v-m); margin: 0 6px; }
.cena-trh .pasmo-osa, .cena-trh .pasmo-rozsah { top: var(--at); }
.cena-trh .pasmo-rozsah { outline: 1px solid color-mix(in srgb, var(--akcent) 55%, transparent); outline-offset: -1px; }
.cena-trh .znacka-pasma { --lt: var(--lt-m); --st: var(--st-m); --sh: var(--sh-m); --az: var(--az-m); --ta: var(--ta-m);
  top: 0; bottom: 0; width: 0; transform: none; display: block; }
.cena-trh .znacka-pasma i { position: absolute; left: -1px; top: var(--st); height: var(--sh); width: 2px; z-index: 1; }
.cena-trh .znacka-pasma span { position: absolute; top: var(--lt); left: 0; z-index: 2; height: 33px; padding: 1px 4px; border-radius: 4px; background: var(--plocha);
  transform: translateX(var(--az)); text-align: var(--ta); line-height: 1.35; font-size: 11.5px; }
.cena-trh .znacka-pasma span b { text-align: var(--ta); }
.cena-trh .znacka-nase i { width: 3px; left: -1.5px; }
.cena-trh .znacka-ph i { background: var(--text-2); }
.cena-trh .znacka-median i { background: var(--ok); }
.cena-trh .znacka-pasmo-rozsah i { width: 1px; left: -.5px; background: color-mix(in srgb, var(--akcent) 60%, transparent); }
.cena-trh .znacka-pasmo-rozsah span { color: var(--text-2); }
.cena-trh .znacka-median span { color: var(--ok); }
@container pasmo (min-width: 520px) {
  .cena-trh .pasmo { --at: var(--at-d); height: var(--v-d); }
  .cena-trh .znacka-pasma { --lt: var(--lt-d); --st: var(--st-d); --sh: var(--sh-d); --az: var(--az-d); --ta: var(--ta-d); }
}

.cena-trh .pasmo-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 28px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cena-trh .pasmo-legenda li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; min-width: 0; }
.cena-trh .pasmo-legenda .nazev { color: var(--text-2); min-width: 0; }
.cena-trh .pasmo-legenda .cislo { margin-left: auto; white-space: nowrap; font-weight: 500; }
.cena-trh .pasmo-legenda .osa-info { grid-column: 1 / -1; font-size: 12px; }
.pasmo-legenda .vzorek { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--text-2); align-self: center; }
.pasmo-legenda .leg-strop .vzorek { background: var(--low); }
.pasmo-legenda .leg-ph .vzorek { background: var(--text-2); }
.pasmo-legenda .leg-median .vzorek { background: var(--ok); }
.pasmo-legenda .leg-nase .vzorek { background: var(--akcent); }
.pasmo-legenda .leg-rozsah .vzorek { width: 18px; background: color-mix(in srgb, var(--akcent) 30%, transparent); outline: 1px solid color-mix(in srgb, var(--akcent) 55%, transparent); outline-offset: -1px; }

.cena-doporuceni { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linka); }
.cena-trh .pasmo-obal + .pasmo-legenda + .cena-doporuceni { margin-top: 16px; }
.cena-trh > .hlaska + .cena-doporuceni, .cena-trh > .karta-hlava + .cena-doporuceni { margin-top: 0; padding-top: 0; border-top: 0; }
.cena-trh > .hlaska { margin-bottom: 4px; }
.karta .cena-vety { list-style: none; padding: 0; gap: 8px; max-width: 78ch; }
.cena-vety li { position: relative; padding-left: 16px; }
.cena-vety li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--linka-silna); }
.cena-vety .veta-mid::before { background: var(--mid); }

/* ---------- Konkurence: tabulky, statistika ---------- */
.konk-statistika .hodnota { font-size: 20px; font-weight: 500; }
.konk-statistika .pod { display: block; }
.konk-varovani { color: var(--mid); }
.konk-tab .nazev-r { display: block; max-width: 58ch; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.konk-tab .pod-nazvem { overflow-wrap: anywhere; }
.konk-tab .pod-nazvem:empty { display: none; }
.konk-tab td.vpravo, .konk-tab .konk-datum, .konk-tab .konk-pomer .pod-nazvem { white-space: nowrap; }
.konk-firmy td.vpravo { white-space: nowrap; }
.konk-tab .konk-vitez { overflow-wrap: anywhere; }
.konk-tab .konk-proc { font-style: italic; }
@media (min-width: 721px) {
  .konk-vysledky { table-layout: fixed; }
  .konk-vysledky th, .konk-vysledky td { padding-left: 10px; padding-right: 10px; }
  .konk-vysledky .h-datum { width: 104px; }
  .konk-vysledky .h-vitez { width: 26%; }
  .konk-vysledky .h-cena { width: 112px; }
  .konk-vysledky .h-pomer { width: 92px; }
}
.konk-firmy th, .konk-firmy td { padding-left: 8px; padding-right: 8px; }
@media (min-width: 721px) {
  .konk-tab th:first-child, .konk-tab td:first-child { padding-left: 20px; }
  .konk-tab th:last-child, .konk-tab td:last-child { padding-right: 20px; }
}
.konk-firmy .konk-nazev { min-width: 170px; }
.konk-firmy .konk-nazev .nazev { max-width: 30ch; overflow-wrap: anywhere; }
.konk-firmy .konk-zadavatele { min-width: 150px; }
.konk-zadavatel { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.konk-zadavatel + .konk-zadavatel { margin-top: 2px; }
.konk-filtry { align-items: flex-end; }
.konk-filtry .pole:not(.pole-hledat) { flex: 0 1 220px; }
.konk-zdroje-seznam { display: grid; gap: 4px; }
.karta .konk-zdroje-seznam { list-style: none; padding: 0; }
.karta .konk-casti { list-style: none; padding: 0; gap: 0; }
.konk-casti li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linka); overflow-wrap: anywhere; }
.konk-casti li:first-child { border-top: 0; padding-top: 0; }
.konk-casti li > :first-child { min-width: 0; }
.pocet-vyher { flex: none; margin-left: auto; color: var(--text-3); white-space: nowrap; }
.konk-strany { justify-content: space-between; }
.konk-strany-cisla { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* na mobilu karty místo tabulky (popisek buňky z data-label) */
@media (max-width: 720px) {
  .konk-tab thead { display: none; }
  .konk-tab, .konk-tab tbody, .konk-tab tr, .konk-tab td { display: block; }
  .konk-tab tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linka); }
  .konk-tab tr:last-child { border-bottom: 0; }
  .konk-tab td, .konk-tab tr:last-child td { padding: 0; border: 0; min-width: 0; max-width: none; }
  .konk-tab tbody tr:hover td { background: none; }
  .konk-tab td.vpravo { text-align: left; }
  .konk-tab td.vpravo, .konk-tab .konk-datum, .konk-tab .konk-pomer .pod-nazvem { white-space: normal; }
  .konk-tab td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
  .konk-tab .konk-nazev { grid-column: 1 / -1; order: -4; }
  .konk-tab .konk-vitez, .konk-tab .konk-zadavatele { grid-column: 1 / -1; order: -3; }
  .konk-tab .konk-datum { order: -2; }
  .konk-tab .konk-datum .pod-nazvem, .konk-tab .konk-cena .pod-nazvem, .konk-tab .konk-pomer .pod-nazvem { margin-top: 1px; }
  .konk-tab .nazev-r, .konk-firmy .konk-nazev .nazev { max-width: none; }
  .konk-firmy .konk-nazev .nazev { font-size: 15px; }
  .konk-strany { flex-direction: column; align-items: flex-start; }
}

.konk-vic { padding: 12px 20px 16px; border-top: 1px solid var(--linka); }
.konk-vic > summary { margin-bottom: 0; }
.konk-vic[open] > summary { margin-bottom: 10px; }
.konk-vic .tabulka-obal { margin: 0 -20px; }
@media (max-width: 720px) { .konk-vic { padding: 12px 16px 12px; } .konk-vic .tabulka-obal { margin: 0 -16px; } }