@charset "UTF-8";
/* ==========================================================================
   dokumenty.css — doplňkové třídy stránky „Dokumenty“ (vyhledávání
   v knihovnách SharePointu)
   --------------------------------------------------------------------------
   Načítá se AŽ ZA css/intranet.css a platí jen pro dokumenty.html.
   Do css/intranet.css se nesahá — designový systém je hotový, tady jsou
   pouze třídy, které jádro (zatím) nemá: pruh s vysvětlením oprávnění,
   panel filtrů, výsledek hledání a stránkování. Drobečková navigace
   (.drobecky) je sdílená komponenta a bydlí v css/intranet.css.

   Všechno stojí na tokenech z intranet.css, takže stránka drží oba režimy
   (světlý i tmavý) bez jediné natvrdo zapsané barvy plochy.

   Pojmenování tříd: česky bez diakritiky, stejně jako v jádru.

   Obsah:
     1.  Doplňkové tokeny (zvýraznění hledaného výrazu, štítek PPTX)
     2.  Záhlaví stránky + vyhledávací pole + souhrn výsledků
     3.  Pruh s vysvětlením oprávnění
     4.  Rozvržení: panel filtrů + výsledky
     5.  Panel filtrů
     6.  Lišta nad výsledky — řazení a přepínač zobrazení
     7.  Výsledek hledání (seznam i dlaždice)
     8.  Stránkování
     9.  Personalizované sekce pod výsledky
     10. Responzivita
   ========================================================================== */


/* ==========================================================================
   1. Doplňkové tokeny
   --------------------------------------------------------------------------
   Zvýraznění hledaného výrazu (<mark>) musí být čitelné v obou režimech —
   výchozí žlutá prohlížeče má v tmavém režimu mizerný kontrast.
     světlý: #2E2200 na #FCE8A6 .... 12,9 : 1
     tmavý:  #FFE9A3 na #4A3A0C ....  8,4 : 1
   Štítek PPTX jádro nezná, doplňujeme ho z oranžové stavové palety.
   ========================================================================== */

:root {
  --zvyrazneni-plocha: #FCE8A6;
  --zvyrazneni-text: #2E2200;
}

[data-bs-theme="dark"] {
  --zvyrazneni-plocha: #4A3A0C;
  --zvyrazneni-text: #FFE9A3;
}

/* Štítek přípony PPTX — doplněk k .pripona--pdf / --docx / --xlsx z jádra */
.pripona--pptx {
  background: var(--oranzova-zavoj);
  color: var(--oranzova);
}


/* ==========================================================================
   2. Záhlaví stránky, vyhledávací pole, souhrn výsledků
   ========================================================================== */

.hledani {
  padding-top: clamp(14px, 2.4vw, 22px);
  padding-bottom: clamp(6px, 1.4vw, 12px);
}

/* Nadpis a perex jsou sdílená komponenta .zahlavi-stranky z jádra —
   tady jen odsazení, protože pod perexem následuje pruh o oprávněních. */
.hledani .zahlavi-stranky__perex { margin-bottom: var(--m-4); }

/* Vyhledávací pole — stejná stavba jako .hero__dotaz, ale na světlé ploše */
.hledani__formular {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-2);
  padding: 7px;
  background: var(--povrch);
  border: 1px solid var(--ram);
  border-radius: var(--r-xl);
  box-shadow: var(--stin-1);
}

.hledani__pole {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 12px;
  color: var(--akcent-text);
}

.hledani__vstup {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-m);
}

.hledani__vstup:focus-visible {
  outline: 3px solid var(--akcent-text);
  outline-offset: 0;
}

.hledani__tlacitko {
  flex: 0 1 auto;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-l);
  background: var(--akcent);
  color: var(--akcent-na-plose);
  font-size: var(--fs-zaklad);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-2);
}

.hledani__tlacitko:hover { background: var(--akcent-hover); }

.hledani__souhrn {
  margin: var(--m-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

.hledani__dotaz { color: var(--text); }

.hledani__cas { color: var(--text-jemny); }


/* ==========================================================================
   3. Pruh s vysvětlením oprávnění
   --------------------------------------------------------------------------
   Nenápadný, ale vždy viditelný — bez něj úředník nevěří, že výsledky
   nejsou „ořezané náhodou“.
   ========================================================================== */

.pruh-opravneni {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--m-4);
  padding: 11px 14px;
  border: 1px solid var(--ram);
  border-left: 3px solid var(--akcent-text);
  border-radius: var(--r-m);
  background: var(--akcent-zavoj);
}

.pruh-opravneni__ikona {
  flex: none;
  margin-top: 1px;
  color: var(--akcent-text);
}

.pruh-opravneni__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

.pruh-opravneni__text strong { color: var(--text); }


/* ==========================================================================
   4. Rozvržení — panel filtrů vlevo, výsledky vpravo
   ========================================================================== */

.rozvrzeni {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 22px);
  padding-top: clamp(12px, 2vw, 18px);
  padding-bottom: var(--m-7);
}

.rozvrzeni__filtry { flex: 1 1 280px; min-width: 0; }

.rozvrzeni__vysledky { flex: 3 1 520px; min-width: 0; }

/* Cíl odkazu „Přeskočit filtry“ — zaostřuje se programově, rámeček by mátl
   (stejně jako main:focus v jádru). */
.rozvrzeni__vysledky:focus { outline: none; }


/* ==========================================================================
   5. Panel filtrů
   ========================================================================== */

.filtry__hlavicka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--m-3);
}

.filtry__zrusit {
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--akcent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.filtry__zrusit:hover { text-decoration: underline; }

/* Odkaz „Přeskočit filtry“ — dává smysl jen na úzkém displeji,
   kde jsou filtry nad výsledky. */
.filtry__preskocit {
  display: block;
  margin-bottom: var(--m-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.filtr {
  margin: 0 0 var(--m-4);
  padding: 0 0 var(--m-4);
  border: 0;
  border-bottom: 1px solid var(--ram-2);
}

.filtr:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.filtr__nadpis {
  padding: 0 0 var(--m-2);
  font-size: var(--fs-s);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-jemny);
}

.filtr__seznam {
  display: grid;
  gap: 2px;
}

.volba {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: var(--r-s);
  cursor: pointer;
}

.volba:hover { background: var(--povrch-hover); }

.volba__vstup {
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: var(--akcent);
  cursor: pointer;
}

.volba__nazev {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.volba__pocet {
  flex: none;
  font-size: var(--fs-s);
  color: var(--text-jemny);
  font-variant-numeric: tabular-nums;
}

.filtr__vyber {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--ram);
  border-radius: var(--r-s);
  background: var(--povrch);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.filtr__vyber:hover { border-color: var(--ram-vyrazny); }

.filtry__poznamka {
  margin: var(--m-4) 0 0;
  font-size: var(--fs-s);
  color: var(--text-jemny);
}


/* ==========================================================================
   6. Lišta nad výsledky — řazení a přepínač zobrazení
   ========================================================================== */

.vysledky__lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--m-3);
  margin-bottom: var(--m-3);
}

.vysledky__nastroje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--m-3);
}

.razeni {
  display: flex;
  align-items: center;
  gap: 8px;
}

.razeni__popis {
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

.razeni__vyber {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  background: var(--povrch);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.razeni__vyber:hover { border-color: var(--ram-vyrazny); }

/* Přepínač seznam / dlaždice — dva radiobuttony, přepíná se čistě v CSS,
   aby prototyp fungoval i bez JavaScriptu. */
.zobrazeni {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  background: var(--povrch);
}

.zobrazeni__vstup {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.zobrazeni__tlacitko {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-s);
  color: var(--text-tlumeny);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.zobrazeni__tlacitko:hover { color: var(--text); background: var(--povrch-hover); }

.zobrazeni__vstup:checked + .zobrazeni__tlacitko {
  background: var(--akcent);
  color: var(--akcent-na-plose);
}

.zobrazeni__vstup:focus-visible + .zobrazeni__tlacitko {
  outline: 3px solid var(--akcent-text);
  outline-offset: 2px;
}


/* ==========================================================================
   7. Výsledek hledání
   ========================================================================== */

.seznam-vysledku {
  display: grid;
  gap: var(--m-3);
}

.vysledek {
  display: flex;
  gap: var(--m-3);
  padding: var(--m-4);
  background: var(--povrch);
  border: 1px solid var(--ram);
  border-radius: var(--r-l);
  box-shadow: var(--stin-0);
}

.vysledek:hover { border-color: var(--ram-vyrazny); box-shadow: var(--stin-1); }

.vysledek__telo { flex: 1; min-width: 0; }

.vysledek__nadpis {
  margin: 0 0 3px;
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: 1.3;
}

.vysledek__odkaz { color: var(--akcent-text); }

.vysledek__cesta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: var(--fs-s);
  color: var(--text-jemny);
}

.vysledek__uryvek {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  color: var(--text-tlumeny);
}

.vysledek__uryvek mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--zvyrazneni-plocha);
  color: var(--zvyrazneni-text);
  font-weight: 600;
}

.vysledek__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
  color: var(--text-jemny);
}

.vysledek__meta li { display: flex; align-items: center; gap: 8px; }

.vysledek__meta li + li::before {
  content: "·";
  color: var(--ram-vyrazny);
}

.vysledek__akce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-2);
}

.akce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  background: var(--povrch);
  color: var(--akcent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.akce:hover {
  border-color: var(--akcent-text);
  background: var(--akcent-zavoj);
  text-decoration: none;
}

.akce--hlavni {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--akcent-na-plose);
}

.akce--hlavni:hover {
  background: var(--akcent-hover);
  border-color: var(--akcent-hover);
  color: var(--akcent-na-plose);
}

/* Zobrazení „dlaždice“ — řídí radiobutton v liště nad výsledky.
   Bez podpory :has zůstane zobrazení jako seznam, což nevadí. */
.rozvrzeni__vysledky:has(#zobrazeni-dlazdice:checked) .seznam-vysledku {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.rozvrzeni__vysledky:has(#zobrazeni-dlazdice:checked) .vysledek {
  flex-direction: column;
  gap: 10px;
}

.rozvrzeni__vysledky:has(#zobrazeni-dlazdice:checked) .vysledek__uryvek {
  display: none;
}

.rozvrzeni__vysledky:has(#zobrazeni-dlazdice:checked) .vysledek__nadpis {
  font-size: var(--fs-zaklad);
}


/* ==========================================================================
   8. Stránkování
   ========================================================================== */

.strankovani {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--m-5);
}

.strankovani__odkaz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ram);
  border-radius: var(--r-m);
  background: var(--povrch);
  color: var(--text-tlumeny);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.strankovani__odkaz:hover {
  border-color: var(--akcent-text);
  color: var(--akcent-text);
  text-decoration: none;
}

.strankovani__odkaz[aria-current="page"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--akcent-na-plose);
}


/* ==========================================================================
   9. Personalizované sekce pod výsledky
   ========================================================================== */

.personalizace {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(20px, 3vw, 30px);
}


/* ==========================================================================
   10. Responzivita
   ========================================================================== */

/* md — 768px: personalizované sekce vedle sebe */
@media (min-width: 768px) {
  .personalizace { grid-template-columns: 1fr 1fr; }
}

/* lg — 992px: panel filtrů se drží při rolování, odkaz „Přeskočit filtry“
   už nedává smysl (filtry jsou vedle výsledků, ne nad nimi) */
@media (min-width: 992px) {
  .rozvrzeni__filtry {
    position: sticky;
    top: calc(var(--vyska-hlavicky) + 12px);
  }

  .filtry__preskocit { display: none; }
}

/* Úzké displeje: akce pod sebou přes celou šířku */
@media (max-width: 575.98px) {
  .vysledek { flex-direction: column; gap: 10px; }

  .akce { flex: 1 1 100%; justify-content: center; }

  .hledani__tlacitko { flex: 1 1 100%; }
}

/* Dotyková zařízení — cílové plochy nejméně 44 × 44 px
   (vyhláška č. 99/2023 Sb. / EN 301 549). Na myši zůstává hustší sazba. */
@media (pointer: coarse) {
  .volba,
  .filtr__vyber,
  .razeni__vyber,
  .zobrazeni__tlacitko,
  .akce,
  .strankovani__odkaz,
  .filtry__zrusit { min-height: 44px; }
}