/* ═══════════════════════════════════════════════════════════════════════════
 * KATALOG VOZIDEL V SUPERSPRÁVĚ — vzhled obrazovky „Vozidla“
 *
 * Soubor je samostatný schválně: `poweradmin.css` i `poweradmin.html` patří
 * jinému vlastníkovi a tahle obrazovka se nasazuje zvlášť. Kdyby styly bydlely
 * tam, čekalo by nasazení na cizí soubor — a rozestavěná obrazovka bez stylu
 * vypadá jako rozbitá aplikace.
 *
 * Proměnné (`--line`, `--muted`, `--brand`…) přebíráme z `styles.css`; fallbacky
 * jsou tu proto, aby obrazovka nezešedla, kdyby se hlavní styl nenačetl.
 *
 * ČITELNOST: `--muted` (#617174) na bílé má kontrast 5,07 : 1, tedy nad
 * požadovaných 4,5 : 1. Nic světlejšího se tu na text nepoužívá — odvozená
 * mýtná kategorie je „šedá“ právě touhle barvou, ne světlejší.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rozvržení: vlevo kategorie, vpravo tabulka typů ────────────────────── */
.vz-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.5fr) minmax(0, 2fr);
  gap: 14px;
  align-items: start;
}

/* Na užší obrazovce (notebook 1280) se kategorie posadí nad tabulku —
   slisované dva sloupce by z nabídky udělaly nečitelný sloupeček. */
@media (max-width: 1180px) {
  .vz-grid { grid-template-columns: minmax(0, 1fr); }
}

.vz-panel { min-width: 0; }   /* bez toho mřížka nedovolí tabulce se zúžit */

/* ── Levý sloupec: kategorie s počty ───────────────────────────────────── */
.vz-kat-list { display: grid; gap: 6px; }

.vz-kat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line, #d9e1e3);
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: var(--ink, #102326);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vz-kat:hover { background: #f2fafa; border-color: var(--brand, #0d5961); }
.vz-kat:focus-visible {
  outline: none;
  border-color: var(--brand, #0d5961);
  box-shadow: 0 0 0 3px rgba(13, 89, 97, 0.2);
}
.vz-kat.is-active {
  background: #eaf6f6;
  border-color: var(--brand, #0d5961);
  border-left-color: var(--brand, #0d5961);
}

.vz-kat__main { display: grid; gap: 2px; min-width: 0; }
.vz-kat__main strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vz-kat__sub {
  font-size: 10.5px;
  color: var(--muted, #617174);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vz-kat__pocet {
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 6px;
  background: #dff2f2;
  color: var(--brand-deep, #073f46);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.vz-kat.is-prazdna .vz-kat__pocet { background: #eef2f3; color: var(--muted, #617174); }

/* ── Nástroje nad tabulkou ─────────────────────────────────────────────── */
.vz-nastroje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 0 10px; }
.vz-nastroje input[type="search"] { flex: 1 1 180px; min-width: 150px; padding: 6px 10px; font-size: 12.5px; }
.vz-nastroje select { flex: 0 0 auto; padding: 6px 8px; font-size: 12.5px; }
.vz-nastroje label.vz-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted, #617174);
  white-space: nowrap;
}
/* Zaškrtávátko 16 × 16 (pravidlo o kompaktních prvcích). `!important` proti
   past `label{display:grid}` z hlavního stylu, která popisek zalomí pod box. */
.vz-nastroje label.vz-check { display: inline-flex !important; }
.vz-nastroje input[type="checkbox"] {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--brand, #0d5961);
}

/* ── Tabulka typů ──────────────────────────────────────────────────────── */
/* Vlastní `overflow-x` — dvanáct sloupců se na notebook nevejde a posuvník
   patří tabulce, ne celé stránce (pravidlo o tabulkách). */
.vz-tabulka-obal { overflow-x: auto; border: 1px solid var(--line, #d9e1e3); border-radius: var(--radius, 8px); background: #fff; }

#vz-typy { min-width: 1120px; }

#vz-typy th,
#vz-typy td {
  padding: 6px 9px;
  font-size: 12.5px;
  line-height: 1.3;
  vertical-align: middle;
  /* Nic nepřeteče do sousední buňky — radši useknout (pravidlo o tabulkách). */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Záhlaví se ZÁMĚRNĚ nepřilepuje (`position: sticky`) — přilepené záhlaví
   uvnitř vodorovně rolujícího obalu se překrývalo s obsahem nad tabulkou. */
#vz-typy th {
  background: #f3f7f8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: default;
}
#vz-typy th[data-vz-sort] { cursor: pointer; }
#vz-typy th[data-vz-sort]:hover { color: var(--brand-deep, #073f46); }
.vz-sind { margin-left: 3px; opacity: 0.55; font-size: 10px; }
#vz-typy th.je-razeno .vz-sind { opacity: 1; }

#vz-typy tbody tr:hover { background: #f6fbfb; }
#vz-typy tr.je-skryty td { background: #fbfbf7; }
#vz-typy tr.je-skryty td:first-child { box-shadow: inset 3px 0 0 var(--gold-deep, #d4a317); }

/* Čísla na jednom řádku a zarovnaná pod sebe. */
#vz-typy td.vz-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.vz-bok {
  display: block;
  width: 56px;
  height: 26px;
  object-fit: contain;
  object-position: left center;
}
.vz-bok-chybi {
  display: inline-block;
  width: 56px;
  color: var(--muted, #617174);
  font-size: 11px;
}

.vz-nazev { display: grid; gap: 1px; min-width: 0; }
.vz-nazev strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-nazev small {
  color: var(--muted, #617174);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Odvozená hodnota je šedá, ručně zadaná tučná — na první pohled je vidět,
   co systém spočítal a co člověk přebil. */
.vz-odvozene { color: var(--muted, #617174); }
.vz-rucne { font-weight: 800; color: var(--ink, #102326); }
/* Chybějící údaj pro mýto (17. 9. 2026). Je to PRÁCE K DODĚLÁNÍ, ne porucha,
 * proto jantarová, ne červená. #7a3a10 na #fff7ed = 8,2 : 1. */
.vz-chybi {
  display: inline-block;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid #f0b27a;
  background: #fff7ed;
  color: #7a3a10;
  font-size: 10.5px;
  font-weight: 700;
}

.vz-znacka {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.vz-znacka.je-trida { background: #e6f0fa; color: #1c4b7a; }
.vz-znacka.je-model { background: #e7f3ec; color: #1d6b46; }
.vz-znacka.je-skryto { background: #fdf0d2; color: #6b4e00; }

/* ── Akce = čtvercové piktogramy s bublinou (pravidla ovládání) ─────────── */
.vz-akce { display: flex; gap: 4px; flex-wrap: nowrap; }
/* V pevném rozvržení (uživatel si zúžil sloupec) se tlačítka zalomí,
   nikdy nepřetečou do sousední buňky. */
table[style*="table-layout: fixed"] .vz-akce { flex-wrap: wrap; }

.vz-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 0;
  border: 1px solid var(--line, #d9e1e3);
  border-radius: 6px;
  background: #fff;
  color: var(--brand-deep, #073f46);
  cursor: pointer;
}
.vz-ikona svg { width: 14px; height: 14px; display: block; }
.vz-ikona:hover { border-color: var(--brand, #0d5961); background: #eef8f8; }
.vz-ikona:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13, 89, 97, 0.25); }
.vz-ikona[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Nebezpečná akce zčervená až při najetí, ne trvale. */
.vz-ikona.je-nebezpecne:hover { border-color: var(--red, #b94242); color: var(--red, #b94242); background: #fdeeee; }

/* ── Stav „katalog se nenačetl“ ────────────────────────────────────────── */
.vz-pruh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin: 0 0 12px;
  border-radius: 6px;
  background: #7f1d1d;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}
.vz-pruh button {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 7px;
  padding: 5px 12px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.vz-pruh button:hover { background: rgba(255, 255, 255, 0.14); }

.vz-prazdno { padding: 16px; color: var(--muted, #617174); font-weight: 800; }

/* ── Dialog typu ───────────────────────────────────────────────────────── */
/*
 * Dialog musí být NEPRŮHLEDNÝ, vejít se do okna a nemít vlastní posuvník.
 * `overflow-y: auto` je jen pojistka pro opravdu malé okno — obsah je
 * navržený tak, aby se na 1280 × 800 vešel bez rolování. Kombinace
 * `overflow: visible` + `max-height` (kterou při zvětšení písma nastaví
 * `okna.js`) je přesně to, co v superspávě utrhlo bílé pozadí dialogu.
 */
#vz-typ-modal .modal-card {
  width: min(1020px, 96vw);
  max-height: 94vh;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 10px;
  padding: 16px 18px;
  background: #fff;   /* nikdy průhledné pozadí */
}

.vz-dialog-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: start;
}
@media (max-width: 760px) {
  .vz-dialog-cols { grid-template-columns: minmax(0, 1fr); }
}

.vz-blok {
  min-width: 0;
  margin: 0;
  padding: 9px 11px 11px;
  border: 1px solid var(--line, #d9e1e3);
  border-radius: 6px;
  background: #fbfdfd;
}
.vz-blok > legend {
  padding: 0 5px;
  color: var(--muted, #617174);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vz-radek { display: grid; gap: 8px; margin-top: 7px; }
.vz-radek.je-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vz-radek.je-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vz-radek.je-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vz-pole {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted, #617174);
  font-size: 11px;
  font-weight: 900;
}
.vz-pole input,
.vz-pole select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--line, #d9e1e3);
  border-radius: 6px;
  background: #fff;
  color: var(--ink, #102326);
  font-size: 12.5px;
  font-weight: 600;
}
.vz-pole input:focus,
.vz-pole select:focus { outline: none; border-color: var(--brand, #0d5961); box-shadow: 0 0 0 2px rgba(13, 89, 97, 0.18); }
.vz-pole input.je-chybne { border-color: var(--red, #b94242); background: #fdf3f3; }
.vz-pole small { font-weight: 700; color: var(--muted, #617174); }

/* Zaškrtávátko v dialogu: 16 × 16 a popisek VEDLE, ne pod ním. */
.vz-pole.vz-check-pole { display: inline-flex !important; align-items: center; gap: 7px; min-height: 30px; }
.vz-pole.vz-check-pole input[type="checkbox"] {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--brand, #0d5961);
}

/* Živý výsledek odvození — co systém spočítá, vidí člověk hned. */
.vz-odvozeni {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px dashed var(--line, #d9e1e3);
  border-radius: 6px;
  background: #fff;
  font-size: 11.5px;
  color: var(--ink, #102326);
}
.vz-odvozeni b { font-variant-numeric: tabular-nums; }
.vz-odvozeni .vz-odvozeni-popis { color: var(--muted, #617174); font-size: 10.5px; }

/* Pohledy schématu — jen náhled, obrázky se doplňují u vozidla v Dispečinku. */
.vz-pohledy { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.vz-pohled {
  display: grid;
  gap: 2px;
  justify-items: center;
  width: 82px;
  padding: 5px;
  border: 1px solid var(--line, #d9e1e3);
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted, #617174);
  text-align: center;
}
.vz-pohled img { width: 68px; height: 34px; object-fit: contain; }
.vz-pohled.je-prazdny { border-style: dashed; background: #f7fafa; }
.vz-pohled .vz-pohled-prazdno {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 34px;
  font-size: 15px;
  opacity: 0.5;
}

#vz-typ-modal .form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 2px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line, #d9e1e3);
}

.vz-dialog-chyba {
  margin: 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: #fdeeee;
  color: #7a2f2f;   /* kontrast na #fdeeee = 6,8 : 1 */
  font-size: 12px;
  font-weight: 800;
}
.vz-dialog-chyba.is-hidden { display: none; }