/* Detail zakázky: záložky Přehled, Kvalifikace, Podání a pravý sloupec (obrazovky/detail.py).
   Jen proměnné z app.css, žádné vlastní barvy. Třídy začínají „detail-“, ať se nepřetlučou s jinými obrazovkami. */

/* ---------- Text rozboru ---------- */
.detail-uvod-karta { padding: 20px 24px; }
.detail-uvod { font-size: 16px; line-height: 1.65; max-width: 75ch; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.detail-text { white-space: pre-line; overflow-wrap: anywhere; }
.karta ol.detail-body { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 10px; max-width: 78ch; }
.karta ol.detail-body li { padding-left: 4px; overflow-wrap: anywhere; }
.karta ol.detail-body li::marker { color: var(--text-3); font-family: var(--mono); font-size: 12.5px; }
.detail-text + ol.detail-body, .detail-text + .detail-vic { margin-top: 10px; }
.detail-vic { margin-top: 10px; }
.detail-vic .detail-text, .detail-vic ol.detail-body { margin-top: 0; }
.detail-firma { align-items: flex-start; }
.detail-firma > span { flex: 1 1 320px; color: var(--text-2); }
.detail-firma strong { color: var(--text); }
.detail-doklad { margin-top: 6px; }
.detail-kopie { min-height: 26px; padding: 0 6px; vertical-align: middle; }
.detail-take { gap: 8px 18px; }

/* ---------- Klíčové údaje ---------- */
.karta ul.detail-kriteria { list-style: none; padding: 0; margin: 0; gap: 8px; }
.detail-kriteria li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 110px) 46px; gap: 10px; align-items: center; }
.detail-kriteria .cislo { text-align: right; font-size: 13px; }
.detail-kriterium { overflow-wrap: anywhere; }
.detail-pruh { display: block; height: 6px; border-radius: 3px; background: var(--plocha-3); overflow: hidden; }
.detail-pruh i { display: block; height: 100%; width: calc(var(--x, 0) * 1%); background: var(--akcent); border-radius: 3px; }
.detail-pruh-ok i { background: var(--ok); }
.detail-pruh-velky { height: 8px; border-radius: 4px; }
@media (max-width: 520px) {
  .detail-kriteria li { grid-template-columns: minmax(0, 1fr) 46px; }
  .detail-kriteria .detail-pruh { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Kvalifikace: matice ---------- */
.detail-matice { table-layout: auto; }
.detail-matice th.firma { height: 172px; width: 40px; min-width: 40px; padding: 8px 2px; vertical-align: bottom; text-align: center; }
.detail-matice th.firma a { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 156px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.detail-matice th.firma a:hover { color: var(--akcent); text-decoration: none; }
.detail-matice th.firma-doporucena a { color: var(--akcent); font-weight: 600; }
.detail-matice td { width: 40px; min-width: 40px; padding: 10px 2px; text-align: center; }
.detail-matice tbody th.pozadavek { position: static; text-align: left; background: none; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--text); white-space: normal; padding: 10px 12px; border-bottom: 1px solid var(--linka); }
.detail-matice tbody tr:last-child th.pozadavek { border-bottom: 0; }
.detail-matice tbody tr:hover th.pozadavek { background: var(--plocha-2); }
.pozadavek-nazev { display: block; overflow-wrap: anywhere; }
.detail-matice .pod-nazvem { font-weight: 400; }
.detail-firmy-desktop { padding: 10px 20px 4px; border-top: 1px solid var(--linka); }
.detail-firmy-mobil { display: none; }
.detail-matice-karta .karta-pata .stitek .bunka { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; }
.detail-matice-karta .karta-pata .stitek { gap: 6px; padding-left: 4px; }
.detail-podminky { display: grid; gap: 8px; }

/* seznam po firmách: vysvětlení každého políčka */
.detail-firmy { display: grid; }
.detail-firma-karta { border-top: 1px solid var(--linka); padding: 0 0 10px; }
.detail-firma-karta:first-child { border-top: 0; }
.detail-firma-karta > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; cursor: pointer; list-style: none; }
.detail-firma-karta > summary::-webkit-details-marker { display: none; }
.detail-firma-karta > summary::after { content: "▸"; color: var(--text-3); transition: transform .15s; order: 3; }
.detail-firma-karta[open] > summary::after { transform: rotate(90deg); }
.detail-firma-nazev { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.detail-firma-cipy { display: flex; flex-wrap: wrap; gap: 4px; flex: none; justify-content: flex-end; }
.detail-firma-cipy .bunka { width: 22px; height: 22px; font-size: 12px; }
.karta ul.detail-vysvetleni { list-style: none; padding: 0; margin: 2px 0 10px; gap: 10px; }
.detail-vysvetleni li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.detail-vysvetleni li > span { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .detail-matice-obal, .detail-firmy-desktop { display: none; }
  .detail-firmy-mobil { display: block; padding: 0 16px; }
}

/* ---------- Podání ---------- */
.detail-postup { margin-bottom: 4px; }
.detail-skupina h3 { margin: 18px 0 2px; }
.detail-skupina:first-of-type h3 { margin-top: 12px; }
.detail-skupina .kroky { margin-top: 4px; }
.krok form { align-self: start; }
.krok-popis a { white-space: nowrap; }
.detail-krok-kdo { color: var(--ok); }
.detail-krok-kdo .ikona { margin-right: 4px; }
.krok .lhuta { display: block; }

/* ---------- Pravý sloupec ---------- */
.detail-bok-napoveda { margin-top: 10px; }
.karta ul.detail-duvody { gap: 8px; font-size: 13px; color: var(--text-2); }
.detail-duvody li { overflow-wrap: anywhere; }
.detail-smazat { margin-top: 2px; }
.detail-nova-poznamka { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linka); }
.poznamka:last-child { padding-bottom: 0; }
.karta ul.detail-historie { list-style: none; padding: 0; margin: 0; gap: 10px; }
.detail-historie li { display: grid; gap: 1px; overflow-wrap: anywhere; }

/* ---------- Dotyková zařízení: cíle aspoň 44 px ---------- */
@media (pointer: coarse) {
  .detail-kopie { min-height: 44px; min-width: 44px; }
  .detail-smazat .tlacitko, .krok .tlacitko { min-height: 44px; }
  .detail-take .odkaz-ven { display: inline-flex; align-items: center; min-height: 44px; }
  .mrizka-hlavni details.rozbal > summary { min-height: 44px; }
  .mrizka-hlavni .karta-pata a, .mrizka-hlavni .detail-firma-karta > a, .mrizka-hlavni .fakta dd > a.male { display: inline-flex; align-items: center; min-height: 44px; }
}