/* Stránky s daty webu (Google a Seznam, Pozice, Zdraví webu, Změny). Grafy ze src/grafy.ts jsou v grafy.css.
   Bloky (panely s ouškem) jsou v zaklad.css, tady jsou jen jejich obsahy. Barvy jen z proměnných (sklo.css, zaklad.css): akcent, zelená = růst, červená = chyba. */

.blok { margin-bottom: 16px; }
.blok-pruh { padding: 12px 20px 0; }
.blok-pruh .upozorneni { margin-bottom: 12px; }
.metrika-ok .metrika-cislo { color: var(--zelena); }
.metrika-chyba .metrika-cislo { color: var(--cervena); }
.metrika-varovani .metrika-cislo { color: var(--akcent-tmavy); }
.metrika-info .metrika-cislo { color: var(--ai); } /* čitelnost pro AI: počet nálezů, ne úspěch, proto ne zelená */
.metrika-neutralni .metrika-cislo { color: var(--inkoust-2); }

.audit-akce { display: inline-flex; align-items: center; gap: 4px; }
.audit-akce form { margin: 0; }

.jak { margin: 0 0 16px; border: 1px solid var(--linka); border-radius: var(--polomer); background: var(--pozadi-jemne); }
.jak > summary { padding: 9px 14px; font-weight: 600; font-size: 14px; position: relative; padding-right: 36px; }
.jak > summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; line-height: 1; color: var(--google); }
.jak[open] > summary::after { content: "−"; }
.jak .data-kroky { margin: 0; padding: 4px 18px 12px 38px; }

.data-ukazka { margin: 0 0 16px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--inkoust-2); font-size: 0.9rem; }
.data-akce { margin: 0 0 16px; }
.data-akce form { margin-bottom: 8px; }
.blok-akce form { margin: 0; }

.zdroj-cisla { margin: 10px 0 0; font-size: 0.8rem; color: var(--tlumeny); max-width: 78ch; }
.karta .zdroj-cisla { margin-top: 8px; }

.data-kroky { margin: 0 0 16px; padding-left: 22px; max-width: 70ch; font-size: 0.92rem; }
.data-kroky li { margin-bottom: 4px; }

.data-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.data-mrizka-poli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.data-filtr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; margin-bottom: 14px; }
.data-filtr .pole { flex: 1 1 260px; max-width: 420px; }
.data-filtr .tlacitko { margin-bottom: 18px; }
.data-filtr-radek { margin: 0; align-items: center; flex-wrap: nowrap; gap: 8px; }
.data-filtr-radek .pole { margin: 0; flex: 0 1 220px; }
.data-filtr-radek .pole label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.data-filtr-radek .pole input { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.data-filtr-radek .tlacitko { margin: 0; min-height: 32px; padding: 4px 12px; font-size: 13px; }
.data-strankovani { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 20px; border-top: 1px solid var(--linka); font-size: 0.92rem; }
.tabulka th a { color: inherit; text-decoration: none; }
.tabulka th a:hover, .tabulka th a[aria-current="true"] { color: var(--inkoust); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; }
.tabulka td .male { overflow-wrap: anywhere; color: var(--tlumeny); }
.tabulka td a { overflow-wrap: anywhere; }
.karta input[type="file"] { display: block; width: 100%; padding: 10px; background: var(--karta); border: 1px dashed var(--linka-silna); border-radius: var(--polomer-mala); font: inherit; }

/* hotové opravy nálezů a hotové soubory k nasazení (src/stranky/opravy-ui.ts) */
.oprava-sekce { margin: 12px 0 14px; padding: 12px 14px; background: var(--pozadi-jemne); border: 1px solid var(--linka); border-radius: var(--polomer); }
.oprava-nadpis { margin: 0 0 8px; }
.oprava { margin: 0 0 12px; }
.oprava-hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.oprava-adresa { overflow-wrap: anywhere; font-size: 0.88rem; color: var(--inkoust-2); }
.oprava-stitek { margin: 0 0 6px; }
.oprava-pozn { color: var(--tlumeny); font-size: 0.86rem; }
.oprava-kod { margin: 0 0 8px; padding: 10px 12px; background: var(--pozadi-jemne); border: 1px solid var(--linka-silna); border-radius: var(--polomer-mala); font: 0.85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.oprava-kod code { font: inherit; }
.oprava-akce { margin: 0 0 4px; }
.oprava-formular { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; }
.oprava-formular .pole { margin: 0 0 8px; flex: 1 1 280px; max-width: 520px; }
.oprava-formular .tlacitko { margin-bottom: 8px; }
.soubory-chybi { margin: 0; padding: 4px 18px 12px 38px; font-size: 0.92rem; }
.soubory-chybi li { margin-bottom: 6px; overflow-wrap: anywhere; }

.nalez { background: var(--karta); border: 1px solid var(--linka); border-left-width: 3px; border-radius: var(--polomer); margin: 0 0 8px; }
.nalez:last-child { margin-bottom: 0; }
.nalez-kriticke { border-left-color: var(--cervena); }
.nalez-vazne { border-left-color: var(--akcent-tmavy); }
.nalez-geo { border-left-color: var(--web); }
.nalez-drobne, .nalez-prosle { border-left-color: var(--linka-silna); }
.nalez > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 12px 16px; font-weight: 600; }
.nalez > summary::after { content: "▾"; margin-left: auto; color: var(--tlumeny); }
.nalez[open] > summary::after { content: "▴"; }
.nalez-telo { padding: 0 16px 14px; }
.nalez-telo ul { margin: 0; padding-left: 20px; }
.nalez-telo li { overflow-wrap: anywhere; margin-bottom: 4px; }
.nalez-kde { margin-bottom: 4px; }

@media (max-width: 720px) {
  .data-dva, .data-mrizka-poli, .mrizka-grafu { grid-template-columns: minmax(0, 1fr); }
  .data-dva { gap: 8px; }
  .data-filtr-radek { flex-wrap: wrap; width: 100%; }
  .data-filtr-radek .pole { flex: 1 1 140px; }
  .blok-akce { margin-left: 0; width: 100%; }
}