/* =========================================================================
   portlet-manager.css (admin3_frontend/assets/css/)
   Náhrada portlet_manager.css — CSS custom properties, lazy loading fade-in
   ========================================================================= */

:root {
    --portlet-bg: #f5f5f5;
    --portlet-border: #f5f5f5;
    --portlet-cell-padding: 4px 7px;
    --portlet-gap: 14px;

    /* Náhledové dlaždice dokumentů (Dok. ost. / Kat. ost. — display=preview)
       Záměrně minimální — jen rozvržení; vzhled (rámečky, zaoblení, stíny)
       si řeší každá šablona sama. */
    --portlet-tile-min: 160px;
    --portlet-tile-col-gap: 28px;

    /* Barvy odznaku a ikony dle typu souboru (jediný barevný default) */
    --portlet-badge-pdf: #d9463e;
    --portlet-badge-doc: #2b6cb0;
    --portlet-badge-xls: #2f855a;
    --portlet-badge-ppt: #c05621;
    --portlet-badge-image: #6b46c1;
    --portlet-badge-archiv: #8a6d1f;
    --portlet-badge-text: #4a5568;
    --portlet-badge-default: #6b7280;
}

/* ***** PORTLET ****** */

.portlet {
    margin-bottom: var(--portlet-gap);
}

.portlet-content-photo a {
    display: block;
    border-radius: 0;
}

.portlet-content-photo-container img {
    display: block;
    object-fit: cover !important;
    max-width: 100%;
    border-radius: 0;
}

.portlet-content-subtitle,
.portlet-content-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portlet-content-desc {
    display: none;
}

.portlet .portlet-content-subtitle,
.portlet .portlet-content-desc {
    display: block;
}

.portlet-content-subtitle {
    padding-top: 7px;
    font-weight: bolder;
}

.portlet-content-desc {
    opacity: .7;
}

.portlet-content-gallery a {
    display: block;
    border-radius: 0;
}

.portlet-content-gallery-container {
    height: 150px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

/* Řada náhledů galerie / dlaždic alba drží na RODIČI.
   Dřív ji nesl jen `display: inline-block` na dětech — jenže baseline se ve skinu načítá
   PŘED CSS šablony, takže při shodné specificitě vyhraje skin: jediné `display: block`
   v šabloně složilo celou řadu pod sebe. Flexový rodič děti blokifikuje, takže je na
   `display` dítěte nezávislý. Rozestupy zůstávají na marginech dětí (skin je smí přepsat
   na `gap`). */
.portlet-gallery-thumbs,
.portlet-album-tiles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Dlaždice se ve flexu smí zúžit — pevných 290 px jinak v úzkém sloupci přeteče.
   `min-width: 0` je nutné, jinak je minimem intrinsická šířka fotky. */
.portlet-album-tiles > .portlet-fixed-width-container {
    flex: 0 1 290px;
    min-width: 0;
    max-width: 100%;
}

.portlet-content-full-gallery {
    width: 140px;
    height: 140px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    margin-right: 7px;
    margin-bottom: 7px;
    display: inline-block;
}

/* album v režimu "rozbalené" — každá galerie jako plný výpis pod sebou */
.portlet-album-expanded-gallery {
    margin-bottom: calc(var(--portlet-gap) * 1.5);
}

.portlet-album-expanded-gallery:last-child {
    margin-bottom: 0;
}

.portlet-content-full-gallery img {
    display: block;
    object-fit: cover !important;
    border-radius: 0;
    max-width: initial !important;
    max-height: 100% !important;
}

.portlet-content-gallery-container img {
    display: block;
    object-fit: cover !important;
    max-width: 100%;
    border-radius: 0;
}

.portlet-content-gallery.fixed-width {}

.portlet img {
    min-width: initial !important;
    border-radius: 0;
}

.portlet-fixed-width-container {
    display: inline-block;
    width: 290px;
    margin-right: var(--portlet-gap);
    margin-bottom: var(--portlet-gap);
}

.portlet-content-desc {
    max-width: 600px;
}

.portlet-dokument-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 24px;
    border-collapse: collapse;
}

.portlet-dokument-nazev {
    display: table-cell;
    font-weight: bolder;
}

.portlet-table-border {
    border-bottom: 2px solid var(--portlet-border);
    border-right: 2px solid var(--portlet-border);
}

.portlet-cell-border {
    border-top: 2px solid var(--portlet-border);
    border-left: 2px solid var(--portlet-border);
    padding: var(--portlet-cell-padding);
}

.portlet-row-bg:hover {
    background-color: var(--portlet-bg);
}

.portlet-dokument-prop {
    display: table-cell;
    width: 50px;
    text-align: right;
}

.portlet-dokument-prop small span {
    text-transform: lowercase !important;
}



.portlet-content-deska .portlet-dokument-prop {
    width: 72px;
}

.portlet-dokument-prop.portlet-wider-prop {
    width: 80px;
}

/* Portlet jednoho dokumentu má jedinou buňku údaje („Vyvěšeno") — datum
   sejmutí se na aktuální desce nevypisuje. Zbytek šířky patří názvu. */
.portlet-content-deska .portlet-dokument-nazev {
    max-width: calc(100% - 79px);
}

.portlet-list-all .portlet-content-subtitle {
    margin-top: var(--portlet-gap);
}

.portlet-search-header {
    display: table;
    table-layout: fixed;
}

.portlet-search-col {
    display: table-cell;
    padding-right: var(--portlet-gap);
}

.portlet-w-160 {
    width: 160px;
}

/* Akce filtru desky: „Hledat" je <button>, „Zrušit filtr" <a> (filtr jede
   serverově, viz portlet/dokument.php) — obojí drží stejný vzhled a skiny
   je stylují jediným selektorem, který na ně měly odjakživa. */
.portlet_cancel_btn {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 var(--portlet-gap);
    text-align: center;
    vertical-align: middle;
    background-color: var(--portlet-bg);
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Prázdný výpis pod zapnutým filtrem */
.a3-deska-prazdno,
.a3-portlet-prazdno {
    padding: var(--portlet-gap) 0;
}

/* Řádek s vysvětlením filtru, který lišta nenabízí jako pole — dnes jediný
   takový je omezení na den z grafického kalendáře (?od=&do=). Bez něj vypadá
   výpis jednoho dne jako porouchaná stránka. */
.a3-portlet-filtr-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--portlet-gap);
    margin-bottom: var(--portlet-gap);
}

/* Záložky kategorií nad výpisem aktualit (props zalozky=1). Baseline drží jen
   tvar řádku — barvy a odsazení jsou věc skinu, stejně jako u odznaku kategorie
   v dlaždici. Barvu své kategorie nese záložka v `--a3-kategorie-barva`. */
.a3-kat-zalozky {
    display: flex;
    flex-wrap: wrap;
    gap: var(--portlet-gap);
    margin-bottom: var(--portlet-gap);
}

.a3-kat-zalozka {
    text-decoration: none;
}

.search_by_cat {
    height: 24px;
}

.portlet-horizontal-spacer {
    width: 100%;
    display: table-cell;
}

.portlet-cat-prop {
    width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

@media (max-width: 698px) {
    .portlet-search-header {
        display: block;
    }
    .portlet-search-col {
        margin-bottom: var(--portlet-gap);
        display: inline-block;
    }
    .portlet-cat-prop {
        display: none;
    }
    .portlet-dokument-container .portlet-wider-prop:nth-child(4) {
        display: none;
    }
}

@media (max-width: 480px) {
    .portlet-dokument-prop {
        width: 40px;
    }
    .portlet-dokument-prop.portlet-wider-prop {
        width: 60px;
    }
    .portlet-content-deska .portlet-dokument-nazev {
        max-width: calc(100% - 79px);
    }
}

.no-break-btns {
    width: 110px;
}

.no-break-btns button {
    display: inline-block;
}

.portlet-cell-border small {
    white-space: nowrap;
}

.portlet-table-header {
    background-color: var(--portlet-bg);
    font-weight: bolder;
}

.portlet-sidebar-box {
    background-color: var(--portlet-bg);
    padding: var(--portlet-gap);
    margin-bottom: var(--portlet-gap);
}

.portlet-sidebar-title {
    font-weight: bolder;
    padding-bottom: 7px;
}

.portlet .info-th {
    font-weight: bolder;
}

.portlet .info-title {
    font-size: 14px;
}

.portlet .info-box {
    padding: 7px;
}

.portlet-subheader {
    font-weight: bolder;
    margin-top: 7px;
    margin-bottom: 4px;
}

.portlet-subcontent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portlet-sidebar-box .portlet-content-photo img {
    max-height: 179px;
}

.portlet-content-photo-container.portlet-photo-align-center {
    text-align: center;
}

.portlet-content-photo-container.portlet-photo-align-center img {
    display: inline-block !important;
}

.portlet-content-photo-container.portlet-photo-align-right {
    text-align: right;
}

.portlet-content-photo-container.portlet-photo-align-right img {
    display: inline-block !important;
}

.portlet-sidebar-content .portlet-content-photo-container img {
    margin: 0 auto;
}

/* Lazy loading fade-in */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity .3s ease;
}
img[loading="lazy"].loaded {
    opacity: 1;
}

/* =========================================================================
   VÝPIS INFORMACÍ O OBCI (a3_vypis_info / vypis_urad)
   ========================================================================= */

/* Řadu drží rodič, ne `display` sloupců — a šířky jsou pružné. Dřív to byly dva
   inline-blocky s pevnou px matematikou (calc(100% - 230px) + 210px + gap), takže
   stačil gap přes 20 px z tokenů skinu a lišta se zalomila pod obsah. */
.a3-info-urad {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--portlet-gap);
}

.info_left_normal {
    flex: 1 1 320px;
    min-width: 0;
}

.info_right {
    flex: 0 1 210px;
    min-width: 0;
}

.info_novy_nadpis {
    display: inline-block;
    color: inherit;
    border-bottom: 1px solid var(--portlet-border);
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.urad_lista_box {
    margin-bottom: var(--portlet-gap);
}

.urad_lista_box_nadpis {
    background-color: var(--portlet-bg);
    font-weight: bolder;
    font-size: 0.85em;
    padding: var(--portlet-cell-padding);
    margin-bottom: 4px;
}

.urad_lista_box_obsah {
    padding: 4px 0;
}

.urad_lista_box_obsah img {
    max-width: 100%;
    height: auto;
}

/* Geografické údaje — popisek nad hodnotou. Dlouhá adresa mapy se v úzké liště
   zlomí, jinak by z boxu vytekla. */
.a3-info-geo {
    margin: 0;
}

.a3-info-geo dt {
    font-weight: bolder;
}

.a3-info-geo dd {
    margin-left: 0;
    overflow-wrap: anywhere;
}

/* Užší výpis (úzký sloupec i mobil) — lišta pod obsah přes celou šířku.
   `flex-basis: 100%` na obou, tedy bez ohledu na to, kdo se kam vešel. */
@media (max-width: 768px) {
    .info_left_normal,
    .info_right {
        flex-basis: 100%;
    }
}

/* =========================================================================
   ZASTUPITELÉ (a3_vypis_zastupitele)
   ========================================================================= */

.zastupitel_info {
    margin-right: var(--portlet-gap);
    overflow: hidden;
}

/* =========================================================================
   POVINNĚ ZVEŘEJŇOVANÉ INFORMACE (a3_povinne_info)
   ========================================================================= */

.povinf_heading {
    font-size: 1.15em;
    font-weight: bolder;
    margin-bottom: var(--portlet-gap);
}

.povinf_oddil {
    background-color: var(--portlet-bg);
    font-weight: bolder;
    padding: var(--portlet-cell-padding);
    margin: var(--portlet-gap) 0;
    /* Cíl kotvy z obsahu dokumentu nesmí skončit pod lepivou hlavičkou skinu.
       Skin s plovoucí hlavičkou si přepíše `--a3-kotva-odstup` na její výšku. */
    scroll-margin-top: var(--a3-kotva-odstup, var(--portlet-gap));
}

/* Obsah dokumentu (A–E) — obyčejné odkazy na kotvy, bez odrážek. */
.povinf_obsah {
    list-style: none;
    margin: 0 0 var(--portlet-gap);
    padding: 0;
}

.povinf_obsah li {
    margin-bottom: calc(var(--portlet-gap) / 4);
}

.oddelovnik {
    border: none;
    border-top: 2px solid var(--portlet-border);
    margin: var(--portlet-gap) 0;
}

/* =========================================================================
   VÝPIS ČLÁNKŮ / UDÁLOSTÍ — portlet (a3_port_c_clanky, a3_port_c_udalosti)
   ========================================================================= */

.article-clear {
    clear: both;
}

.article-meta-datetime {
    font-size: 0.9em;
    opacity: 0.75;
}

.datetime-clanek,
.datetime-udalost {
    font-size: 0.9em;
    opacity: 0.75;
}

/* =========================================================================
   NÁHLEDOVÉ DLAŽDICE DOKUMENTŮ (Dok. ost. / Kat. ost. — display=preview)
   Náhledy generuje prohlížeč (PDF.js / <img>), viz portlet-manager.js.
   Záměrně MINIMÁLNÍ: jen rozvržení + čitelnost. Žádné rámečky/zaoblení/stíny/
   hover animace — ty ať si dodá každá šablona ve svém CSS.
   ========================================================================= */

.portlet-doc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--portlet-tile-min), 1fr));
    column-gap: var(--portlet-tile-col-gap);
    row-gap: var(--portlet-gap);
    margin-top: var(--portlet-gap);
}

.portlet-doc-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Náhledová plocha — mírně na výšku (ne plné A4), náhled zarovnaný nahoru */
.portlet-doc-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--portlet-bg);
    overflow: hidden;
    text-align: center;
}

/* Fallback pro prohlížeče bez aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .portlet-doc-thumb {
        height: 0;
        padding-bottom: 75%;
    }
    .portlet-doc-thumb > * {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.portlet-doc-thumb .portlet-doc-img,
.portlet-doc-thumb canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* PDF náhled — celá stránka (contain), zarovnaná nahoru */
.portlet-doc-thumb canvas {
    object-fit: contain;
}

.portlet-doc-thumb.is-loading {
    opacity: .6;
}

/* Typový odznak (fallback / neobrázkové typy) — vycentrovaný v ploše */
.portlet-doc-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 10px;
    font-weight: 700;
    font-size: 0.8em;
    color: #fff;
    background-color: var(--portlet-badge-default);
}

.portlet-doc-badge-pdf     { background-color: var(--portlet-badge-pdf); }
.portlet-doc-badge-doc     { background-color: var(--portlet-badge-doc); }
.portlet-doc-badge-xls     { background-color: var(--portlet-badge-xls); }
.portlet-doc-badge-ppt     { background-color: var(--portlet-badge-ppt); }
.portlet-doc-badge-image   { background-color: var(--portlet-badge-image); }
.portlet-doc-badge-default { background-color: var(--portlet-badge-default); }

.portlet-doc-caption {
    padding: 6px 2px;
}

.portlet-doc-name {
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portlet-doc-meta {
    font-size: 0.8em;
    opacity: 0.7;
}

/* ***** STRÁNKOVÁNÍ (pager list-portletů) *****
   Záměrně MINIMÁLNÍ kostra: jen rozvržení + klikatelnost, aby byl pager čitelný.
   Barvy, rámečky, zaoblení, velikosti a hover si dodá každá šablona ve svém CSS. */

.a3-portlet-paged.a3-pager-loading {
    opacity: 0.5;   /* funkční indikace probíhajícího AJAX načtení */
}

.strankovani.a3-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    gap: 4px;
}

.strankovani.a3-pager a,
.strankovani.a3-pager strong,
.strankovani.a3-pager .pager-disabled {
    padding: 2px 6px;
    text-decoration: none;
}

/* =========================================================================
   GRAFICKÝ KALENDÁŘ (portlet vypis_kalendar) — admin3-vlastní widget
   Používá admin3 kopii pluginu responsiveCalendar (donačte portlet-manager.js).
   Soběstačný baseline, aby kalendář fungoval i na skinu bez vlastního kalendář-CSS.
   Vzhled lze v každé šabloně přebarvit přes --a3cal-* proměnné — je to JEDINÝ
   určený rozšiřovací bod. Skin, který místo toho přepisuje samotná pravidla,
   prohraje specificitou (`.a3-cal .responsive-calendar .day a` = 0,3,1).
   Barvy pruhu jsou data-driven (inline z barvy kategorie).
   ========================================================================= */
:root {
    --a3cal-accent:        #3b82f6;   /* admin3 accent — kategorie bez vlastní barvy */
    --a3cal-day-bg:        #ebebeb;
    --a3cal-day-hover:     #e0e0e0;
    --a3cal-day-color:     #333333;
    /* Aktivní den je jen JEMNĚ podbarvený — nese barevný pruh kategorie a na
       plné accent ploše by ty barvy zanikly. Rozlišuje ho i tučné číslo. */
    --a3cal-active-bg:     #dbe8fb;
    --a3cal-active-hover:  #c7dcfa;
    --a3cal-active-color:  #1a2b45;
    --a3cal-today-bg:      #333333;
    --a3cal-today-color:   #ffffff;
    --a3cal-weekend-bg:    #cccccc;
    --a3cal-gridline:      #ffffff;
    --a3cal-bar-height:    4px;
    --a3cal-bar-radius:    2px;
    --a3cal-badge-bg:      #333333;
    --a3cal-badge-color:   #ffffff;
}

.a3-cal {
    margin-bottom: var(--portlet-gap);
}

.a3-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.a3-cal-title {
    font-weight: bolder;
}

.a3-cal-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.a3-cal-nav {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 20px;
    text-decoration: none;
    color: inherit;
}

.a3-cal-period {
    min-width: 9em;
    text-align: center;
}

/* mřížka dnů (plugin renderuje .days > .day > a) */
.a3-cal .responsive-calendar .days {
    font-size: 0;
}

.a3-cal .responsive-calendar .day {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 14.2857142857%;
    font-size: 14px;
    text-align: center;
}

.a3-cal .responsive-calendar .day a {
    display: block;
    cursor: pointer;
    /* Dole je místo navíc na barevný pruh (je absolutní, sám si ho neudělá). */
    padding: 12% 0 calc(12% + var(--a3cal-bar-height) + 4px);
    color: var(--a3cal-day-color);
    background-color: var(--a3cal-day-bg);
    border-top: 1px solid var(--a3cal-gridline);
    border-left: 1px solid var(--a3cal-gridline);
    text-decoration: none;
}

.a3-cal .responsive-calendar .day a:hover {
    background-color: var(--a3cal-day-hover);
    text-decoration: none;
}

/* POŘADÍ JE ZÁVAZNÉ: všechna stavová pravidla mají stejnou specificitu (0,4,1),
   takže rozhoduje, které stojí níž. Od nejslabšího stavu k nejsilnějšímu:
   víkend → den s akcí → dnešek. Dokud byl víkend až za `.active`, víkendový den
   s akcí zůstával šedý a vypadal jako prázdný. */
.a3-cal .responsive-calendar .day.sat a,
.a3-cal .responsive-calendar .day.sun a {
    background-color: var(--a3cal-weekend-bg);
}

.a3-cal .responsive-calendar .day.active a {
    background-color: var(--a3cal-active-bg);
    color: var(--a3cal-active-color);
    font-weight: bold;
}

.a3-cal .responsive-calendar .day.today a {
    background-color: var(--a3cal-today-bg);
    color: var(--a3cal-today-color);
    font-weight: bold;
}

/* Bez tohohle by den s akcí neměl žádnou odezvu na najetí — obecný
   `.day a:hover` má stejnou specificitu a stojí v souboru výš. */
.a3-cal .responsive-calendar .day.active a:hover {
    background-color: var(--a3cal-active-hover);
}

.a3-cal .responsive-calendar .day.not-current a {
    visibility: hidden;   /* dny sousedních měsíců — prázdná buňka, zachová mřížku */
}

/* počet akcí toho dne (jen když jich je víc než jedna) */
.a3-cal .responsive-calendar .day .badge {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 2;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--a3cal-badge-bg);
    color: var(--a3cal-badge-color);
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* barevný pruh pod číslem dne — jeden segment na kategorii
   (vkládá addOthers v admin3 kopii pluginu) */
.a3-cal .responsive-calendar .day .a3-cal-bar {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 8px;
    display: flex;
    gap: 2px;
    height: var(--a3cal-bar-height);
    border-radius: var(--a3cal-bar-radius);
    overflow: hidden;   /* zaoblí krajní segmenty, aniž by je muselo řešit JS */
    pointer-events: none;
    z-index: 1;
}

.a3-cal-bar-segment {
    flex: 1 1 0;
    min-width: 0;
}

.a3-cal .responsive-calendar .day.not-current .a3-cal-bar,
.a3-cal .responsive-calendar .day.not-current .badge {
    display: none;   /* buňka sousedního měsíce je skrytá jen `visibility` na <a> */
}

/* legenda barev kategorií pod kalendářem */
.a3-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 12px;
}

/* Položka legendy je odkaz na výpis kategorie — barvu písma bere z okolí skinu,
   podtržení až na hover/fokus (v legendě by trvalé podtržení tříštilo řádek). */
.a3-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: inherit;
    text-decoration: none;
}

a.a3-cal-legend-item:hover,
a.a3-cal-legend-item:focus-visible {
    text-decoration: underline;
}

.a3-cal-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ============================================================
   ODBĚR NOVINEK (a3_odber_form) — jen minimální kostra:
   rozvržení a funkční stavy; vzhled si dodá šablona webu
   ============================================================ */
.a3-odber-form .a3-odber-radek {
    margin-bottom: 14px;
}

/* Honeypot, stavy odesílacího tlačítka a text „Ověřuji prohlížeč…" drží
   sdílená rodina .a3-form-* níž — prvky nesou obě jména tříd, takže skiny
   navěšené na .a3-odber-* fungují dál. */

.a3-odber-form .a3-odber-volba {
    display: block;
    margin: 4px 0;
    font-weight: normal;
    cursor: pointer;
}

.a3-odber-kategorie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 10px 0;
}

.a3-odber-sekce {
    min-width: 180px;
}

.a3-odber-sekce ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

/* sbalený výběr jednotlivých kategorií — <details>, funguje i bez JS */
.a3-odber-vyber > summary {
    cursor: pointer;
    display: list-item;
}

.a3-odber-vyber > summary .a3-odber-pocet {
    opacity: .7;
}

.a3-odber-sekce label {
    font-weight: normal;
    cursor: pointer;
}

/* =========================================================================
   REZERVAČNÍ SYSTÉM (portlet 'rezervace') — jen MINIMÁLNÍ funkční kostra.
   Vzhled (barvy/rámečky/typografie formuláře) patří CSS konkrétní šablony.
   ========================================================================= */
/* Výšku mřížky řídí FullCalendar (pevná výška + vnitřní scroller) — žádné
   min-height, jinak by se pod kalendářem dělalo prázdné místo. */
.a3rez-cal { margin: 12px 0; }
.a3rez-form { margin-top: 16px; }
.a3rez-field { margin-bottom: 10px; }
.a3rez-field > label { display: block; margin-bottom: 3px; }

/* Řádek Datum / Od / Do — druhá cesta k zadání termínu vedle kalendáře.
   Drží STEJNOU šířku jako ostatní pole formuláře (420 px), aby měl formulář jeden
   levý i pravý okraj: Datum přes celou šířku, Od a Do na půl pod ním. Šířku určuje
   buňka, ne prvek — pole si tak nese vzhled ze šablony jako každý jiný input. */
.a3rez-termin { display: flex; flex-wrap: wrap; gap: 10px; }
.a3rez-termin .a3rez-field { flex: 1 1 8rem; margin-bottom: 0; }
.a3rez-termin .a3rez-field:first-child { flex-basis: 100%; }
.a3rez-termin input,
.a3rez-termin select { min-width: 0; }

/* Čas se vybírá ze <select> (nabídku plní initOne z volných úseků dne), ne
   z input[type=time] — nativní pole nabídne 24 hodin bez ohledu na limity
   a vzhled si drží prohlížeč. Šířku a vzhled tak řeší CSS šablony jako
   u kteréhokoli jiného pole formuláře. */
.a3rez-termin select.a3rez-i-cas { width: 100%; }
/* Obal existuje kvůli vlastní šipce šablony (`.a3rez-cas-obal::after`) — tady jen
   kotva pro její absolutní pozici, vzhled patří CSS skinu. */
.a3rez-cas-obal { position: relative; display: block; }

/* Klik kamkoli do pole otevírá picker (datum řeší flatpickr, viz initReservations)
   — kurzor to musí přiznat, jinak pole vypadá jen jako textový vstup. */
.a3rez-form input.a3rez-i-datum,
.a3rez-termin input.a3rez-i-datum,
.a3rez-termin select.a3rez-i-cas { cursor: pointer; }

/* Nedostupné úseky (minulost, mimo limity, uzavření) a vlastní výběr.
   Bez těchhle dvou pravidel je šeď i výběr neviditelný — FC background událost
   sama žádnou barvu nemá. */
.fc .a3rez-off  { background: rgba(0, 0, 0, 0.075); }
.fc .a3rez-mysel { background: rgba(47, 133, 90, 0.30); }
.fc .fc-day.a3rez-den-off { background: rgba(0, 0, 0, 0.05); }

/* Výpis vybraného termínu / důvodu, proč zvolený termín nejde použít. */
.a3rez-selected { margin: 8px 0; }
.a3rez-selected-err { color: var(--a3msg-err-text, #742020); }
.a3rez-field-check > label,
.a3rez-gdpr > label { display: inline-flex; align-items: flex-start; gap: 6px; }
/* Výčet typů musí obsahovat i pole termínu — vynechaný typ vypadne ze šířky
   i z rámečků šablony a formulář je nesourodý. Datum je od zavedení flatpickr
   viditelný text input s class .a3rez-i-datum (původní je flatpickrem skrytý),
   čas je <select> (.a3rez-i-cas), který spadá pod obecné `select` níž. */
.a3rez-form input[type="text"],
.a3rez-form input[type="email"],
.a3rez-form input[type="tel"],
.a3rez-form input[type="number"],
.a3rez-form input.a3rez-i-datum,
.a3rez-form textarea,
.a3rez-form select { width: 100%; }
/* Honeypot, výpis chybějících polí a stavy tlačítka drží sdílená rodina
   .a3-form-* níž — prvky nesou obě jména tříd, takže skiny navěšené na
   .a3rez-* fungují dál. */

/* -------------------------------------------------------------------------
   POJISTKA: FullCalendar staví svou mřížku z <table>. Skinové pravidlo typu
   `table { margin-bottom: … }` (naprosto běžná typografie obsahu) se do těch
   tabulek propíše a ZAMRZNE PROHLÍŽEČ: kalendář s `height:'auto'` + `expandRows`
   po každém přeměření dopočítá výšku řádků, margin ji zvětší, FC přeměří znovu —
   a tak pořád dokola. Vlákno se nikdy nevrátí, stránka se donekonečna načítá
   a skončí hláškou „Unresponsive". Rezervační kalendář od srpna 2026 jede na
   PEVNÉ výšce, takže tuhle smyčku sám neroztočí — pravidlo ale zůstává: platí
   pro měsíční kalendář aktualit i pro kterýkoli skin, který si výšku přenastaví.
   Proto se marginy uvnitř `.fc` srážejí na nulu, a to `!important` — pořadí
   načtení portlet-manager.css vůči skinu není zaručené (vejvanovice ji bere
   dřív než své styly). FC si vlastní odsazení řeší paddingem, o nic nepřijde.
   (Vzniklo 2026-07 na skinu ukazka: `p, ul, ol, dl, table, … { margin: … }`
   v base.css.) Platí pro oba kalendáře — portlet rezervace i správu přes token.
   ------------------------------------------------------------------------- */
.fc table,
.fc thead,
.fc tbody,
.fc tr,
.fc td,
.fc th { margin: 0 !important; }

/* =========================================================================
   Hlášky frontendu (.a3-msg z a3_ok/a3_err/a3_warning/a3_info) + stavy
   rezervačního formuláře. Minimalistické; hex zde v pořádku (a3-tokens.css
   se na zákaznický skin nenačítá — vlastní custom properties jako --portlet-*).
   ========================================================================= */
:root {
    --a3msg-radius:      6px;
    --a3msg-ok-bg:       #eaf7ee;   --a3msg-ok-border:   #2f855a;   --a3msg-ok-text:   #1c4d33;
    --a3msg-err-bg:      #fdecec;   --a3msg-err-border:  #c53030;   --a3msg-err-text:  #742020;
    --a3msg-warn-bg:     #fdf6e3;   --a3msg-warn-border: #b7791f;   --a3msg-warn-text: #6b4c14;
    --a3msg-info-bg:     #eaf2fb;   --a3msg-info-border: #2b6cb0;   --a3msg-info-text: #1e4568;
}

.a3-msg {
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--a3msg-radius);
    line-height: 1.4;
}
.a3-msg:empty { display: none; }
.a3-msg-ok      { background: var(--a3msg-ok-bg);   border-color: var(--a3msg-ok-border);   color: var(--a3msg-ok-text); }
.a3-msg-err     { background: var(--a3msg-err-bg);  border-color: var(--a3msg-err-border);  color: var(--a3msg-err-text); }
.a3-msg-warning { background: var(--a3msg-warn-bg); border-color: var(--a3msg-warn-border); color: var(--a3msg-warn-text); }
.a3-msg-info    { background: var(--a3msg-info-bg); border-color: var(--a3msg-info-border); color: var(--a3msg-info-text); }

/* Kontejner AJAX hlášky, výpis chybějících polí i stavy odesílacího tlačítka
   drží sdílená rodina .a3-form-* níž — prvky rezervačního formuláře nesou obě
   jména tříd, takže skiny navěšené na .a3rez-* fungují dál. */

/* =========================================================================
   VEŘEJNÉ FORMULÁŘE — SPOLEČNÁ KOSTRA (a3-form.js + security_public.php)
   Jedna rodina tříd pro odběr novinek, rezervace i kontaktní formulář.
   Jen rozvržení a funkční stavy; vzhled (barvy, rámečky, typografie) patří
   CSS konkrétní šablony — viz system_instructions.md → 7.

   Prvky nesou během převodu OBĚ jména tříd (`a3rez-submit a3-form-submit`),
   aby zákaznické skiny navěšené na stará jména dál fungovaly. Duplicitní
   baseline pravidla `.a3rez-*` / `.a3-odber-*` výše se ruší až ve chvíli,
   kdy jejich formulář nová jména skutečně dostane.
   ========================================================================= */

/* Honeypot — MUSÍ být pro člověka neviditelný, ale NIKDY display:none;
   chytřejší boti skryté pole detekují a nevyplní ho. */
.a3-form-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.a3-form-pole { margin-bottom: 10px; }
.a3-form-pole > label { display: block; margin-bottom: 3px; }
.a3-form-check > label { display: inline-flex; align-items: flex-start; gap: 6px; }

/* Stavový text proof-of-work („Ověřuji prohlížeč…"). */
.a3-form-cekejte {
    margin-left: 10px;
    font-size: .9em;
}

/* Hláška ze serveru a výpis chybějících polí — dokud jsou prázdné, nezabírají místo. */
.a3-form-msg:empty { display: none; }
.a3-form-missing {
    margin: 8px 0;
    font-size: 0.9em;
    color: var(--a3msg-err-text, #742020);
}
.a3-form-missing:empty { display: none; }

/* Hláška pro prohlížeč bez JS — PoW nemá fallback, tohle je jediná cesta k úřadu. */
.a3-form-noscript { margin: 8px 0; }

/* Stavy odesílacího tlačítka: zamčené do vyřešení PoW, spinner při AJAX odeslání. */
.a3-form-submit { transition: opacity 0.15s ease; }
.a3-form-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.a3-form-submit.is-loading { opacity: 0.7; cursor: progress; }
.a3-form-submit.is-loading::after {
    content: "";
    display: inline-block;
    width: 0.8em; height: 0.8em;
    margin-left: 8px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: a3-form-spin 0.6s linear infinite;
}
@keyframes a3-form-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
   KONTAKTNÍ FORMULÁŘ (portlet 'vypis_kontaktform') — jen kostra nad
   .a3-form-*. Prvky nesou i legacy třídy `podatelna_input1/2` a `sendbutton`,
   aby zákaznické skiny navěšené na stará jména dál fungovaly; `podatelna_input3`
   zanikl s bezcennou kontrolní otázkou.
   ------------------------------------------------------------------------- */
.a3kf-popis { margin-bottom: 14px; }
.a3kf-napoveda { font-size: .9em; opacity: .75; margin-top: 3px; }
.a3kf-form input[type="text"],
.a3kf-form input[type="email"],
.a3kf-form input[type="tel"],
.a3kf-form input[type="number"],
.a3kf-form textarea,
.a3kf-form select { width: 100%; }

/* =========================================================================
   TYP SOUBORU (admin3_frontend/soubor_ikony.php)
   Textová zkratka přípony + ikona listu s barevným štítkem. Barvu má jen
   štítek — v odstínech, na které jsou lidé zvyklí (PDF červená, Word modrá,
   Excel zelená, PowerPoint oranžová); obrys listu drží barvu okolního textu.
   Bez tohoto CSS zůstane ikona jednobarevná a čitelná.
   ========================================================================= */

/* Zarovnání řeší flex řádek, ne posun ikony přes vertical-align. */
.a3-filetype {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.a3-filetype-zkratka {
    text-transform: uppercase;
    white-space: nowrap;
}

/* Rozměr v rem, ne v em: výpis dokumentů obaluje typ do <small> a v em by
   zkratka na štítku spadla pod čitelnost. Text zkratky vedle ikony se
   kontextu drží dál — je to text. */
.a3-fileicon {
    flex: none;
    width: 1.8rem;
}

/* Obrys listu ustupuje štítku — nese tvar, ne pozornost. */
.a3-fileicon-list {
    opacity: 0.55;
}

/* Barevný je jen štítek se zkratkou. */
.a3-fileicon-stitek         { fill: var(--portlet-badge-default); }
.a3-fileicon-pdf    .a3-fileicon-stitek { fill: var(--portlet-badge-pdf); }
.a3-fileicon-doc    .a3-fileicon-stitek { fill: var(--portlet-badge-doc); }
.a3-fileicon-xls    .a3-fileicon-stitek { fill: var(--portlet-badge-xls); }
.a3-fileicon-ppt    .a3-fileicon-stitek { fill: var(--portlet-badge-ppt); }
.a3-fileicon-image  .a3-fileicon-stitek { fill: var(--portlet-badge-image); }
.a3-fileicon-archiv .a3-fileicon-stitek { fill: var(--portlet-badge-archiv); }
.a3-fileicon-text   .a3-fileicon-stitek { fill: var(--portlet-badge-text); }

/* Odznaky dlaždic pro nové rodiny (zbytek viz sekce NÁHLEDOVÉ DLAŽDICE). */
.portlet-doc-badge-archiv { background-color: var(--portlet-badge-archiv); }
.portlet-doc-badge-text   { background-color: var(--portlet-badge-text); }

/* =========================================================================
   ROZCESTNÍK (portlet 'rozcestnik') — jen MINIMÁLNÍ funkční kostra.
   Rozvržení, klikatelnost a odsazení úrovní. Barvy, rámečky, zaoblení, stíny
   a hover si dodá CSS konkrétní šablony.
   ========================================================================= */

/* Rozvržení řídí šířka výpisu, ne šířka okna — týž rozcestník stojí na celé
   stránce i ve 4/12 sloupci (stejný kontrakt jako .a3-deska). */
.a3-rozcestnik {
    container-type: inline-size;
    margin-bottom: var(--portlet-gap);
}

.a3-rozcestnik ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Odsazení podúrovní — jediné, co o hierarchii říká kostra. */
.a3-rozcestnik-seznam .a3-rozcestnik-seznam,
.a3-rozcestnik-podseznam ul {
    padding-left: var(--portlet-gap);
}

.a3-rozcestnik-odkaz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--portlet-gap);
    padding: var(--portlet-cell-padding);
    text-decoration: none;
    color: inherit;
}

.a3-rozcestnik-nazev {
    min-width: 0;   /* dlouhý název se zalomí místo přetečení řádku */
}

/* Řadu dlaždic drží RODIČ, ne display dětí — skin přebíjí baseline při shodné
   specificitě a jedno `display: block` na odkazu by řadu složilo pod sebe. */
.a3-rozcestnik-dlazdice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--portlet-tile-min), 1fr));
    column-gap: var(--portlet-tile-col-gap);
    row-gap: var(--portlet-gap);
}

.a3-rozcestnik-dlazdice-odkaz {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Rozbalovací režim — nativní <details>, funguje i bez JS. */
.a3-rozcestnik-sumar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--portlet-gap);
    padding: var(--portlet-cell-padding);
    cursor: pointer;
}

/* Vlastní šipka .a3-rozcestnik-sipka nahrazuje nativní trojúhelník; ten se
   skrývá v obou syntaxích (WebKit má vlastní pseudoprvek). */
.a3-rozcestnik-sumar { list-style: none; }
.a3-rozcestnik-sumar::-webkit-details-marker { display: none; }

.a3-rozcestnik-obsah {
    padding: var(--portlet-cell-padding);
}

/* =========================================================================
   WEBKAMERA (portlet 'webkamera')
   Minimální kostra: rám s poměrem stran, výplň obrazem, popisek pod ním.
   Barvy, rámečky ani zaoblení tu nejsou — vzhled patří skinu.
   ========================================================================= */

.a3-kamera {
    margin-bottom: var(--portlet-gap);
}

/* Poměr stran nese inline proměnná --a3-kamera-pomer (16/9, 4/3). U volby
   „Podle obrázku" ji renderer nevypíše a `aspect-ratio: auto` nechá rám růst
   podle obsahu — proto fallback v var(), ne pevná hodnota. */
.a3-kamera-ram {
    position: relative;
    aspect-ratio: var(--a3-kamera-pomer, auto);
    overflow: hidden;
}

/* Jedno pravidlo pro <img>, <video> i <iframe> — všechny tři typy zdroje
   vyplňují týž rám a nesmí z něj vyčnívat. `object-fit` na iframe nic nedělá
   a nevadí; šířka a výška ano. */
.a3-kamera-obraz {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    border: 0;
}

/* Bez zadaného poměru nemá rám výšku, takže by `height: 100%` obrázek srazil
   na nulu — tam se řídí vlastními rozměry. */
.a3-kamera-ram:not([style*="--a3-kamera-pomer"]) .a3-kamera-obraz {
    height: auto;
}

/* Tlačítko zvětšení vkládá až JS (a jen když prohlížeč Fullscreen API umí),
   takže se nikdy nenabízí akce, která by nefungovala. */
.a3-kamera-zvetsit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: var(--portlet-cell-padding);
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.a3-kamera-popisek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--portlet-gap);
    padding: var(--portlet-cell-padding);
}

/* Dlouhý název kamery se zalomí místo přetečení; čas se nikdy nezalamuje —
   „aktualizováno 14:32" rozseknuté na dva řádky vypadá jako chyba. */
.a3-kamera-nazev { min-width: 0; }
.a3-kamera-cas   { white-space: nowrap; }

/* Fullscreen: rám je v tu chvíli celá obrazovka, takže se poměr stran zahodí
   a obraz se vejde celý (`contain`), ne ořízne. */
.a3-kamera-ram:fullscreen {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
}

.a3-kamera-ram:fullscreen .a3-kamera-obraz {
    height: 100%;
    object-fit: contain;
}

/* =========================================================================
   VÝSTRAHY ČHMÚ (portlet 'chmi')
   Minimální kostra: rozvržení hlavičky, ikona, rozbalovací doporučení.

   BARVY ÚROVNÍ JSOU VÝJIMKA z pravidla „vzhled patří skinu". Žlutá, oranžová
   a červená tu nejsou dekorace, ale VÝZNAM výstrahy — skin, který si tenhle
   soubor nelinkuje nebo si barvy přebije, nesmí červenou výstrahu zobrazit
   jako šedou. Proto je barevný jen levý pruh a ikona; rámečky, zaoblení,
   stíny a typografii dál řeší skin.

   Barva přesto NENÍ jediný nositel informace — renderer vypisuje úroveň
   i slovem („Oranžová výstraha") a tvar ikony se liší podle jevu.
   ========================================================================= */

.a3-chmi {
    margin-bottom: var(--portlet-gap);
}

.a3-chmi-vystraha {
    /* Levý pruh nese barvu úrovně. Je to `border`, ne `background`, aby si
       skin mohl nastavit vlastní pozadí a pruh zůstal čitelný na obojím. */
    border-left: 4px solid var(--a3-chmi-barva, currentColor);
    padding: var(--portlet-cell-padding);
    padding-left: var(--portlet-gap);
    margin-bottom: var(--portlet-gap);
}

.a3-chmi-vystraha:last-of-type { margin-bottom: 0; }

.a3-chmi-hlava {
    display: flex;
    align-items: flex-start;
    gap: var(--portlet-gap);
}

/* Ikona nesmí zmizet, když se název zalomí — flex by ji jinak stlačil. */
.a3-chmi-ikona {
    flex: 0 0 auto;
    display: block;
    color: var(--a3-chmi-barva, currentColor);
}

.a3-chmi-svg { display: block; }

/* min-width: 0 je nutné, jinak dlouhé slovo v názvu roztáhne flex položku
   nad šířku sloupce a blok přeteče (typicky na mobilu). */
.a3-chmi-titulek { min-width: 0; }

.a3-chmi-nazev {
    margin: 0;
    overflow-wrap: break-word;
}

.a3-chmi-stitek,
.a3-chmi-popis {
    margin: 0;
    overflow-wrap: break-word;
}

/* Úroveň a platnost stojí na jednom řádku, dokud se vejdou. */
.a3-chmi-uroven   { font-weight: 700; }
.a3-chmi-platnost { white-space: normal; }

.a3-chmi-popis { margin-top: var(--portlet-gap); }

.a3-chmi-instrukce { margin-top: var(--portlet-cell-padding); }

/* Bez tohohle si WebKit kreslí vlastní trojúhelníček a `list-style` ho
   neodstraní — táž past jako u rozcestníku. */
.a3-chmi-instrukce-nadpis { cursor: pointer; }
.a3-chmi-instrukce-nadpis::-webkit-details-marker { display: none; }

.a3-chmi-instrukce-text { padding-top: var(--portlet-cell-padding); }

.a3-chmi-zdroj { margin: 0; }

/* Barvy úrovní. Tón odpovídá stupnici ČHMÚ a je zvolený tak, aby text téže
   barvy prošel kontrastem na bílém pozadí (žlutá proto jde do jantarové —
   čistá žlutá by na bílé byla nečitelná). */
.a3-chmi--zelena   { --a3-chmi-barva: #15803d; }
.a3-chmi--zluta    { --a3-chmi-barva: #b45309; }
.a3-chmi--oranzova { --a3-chmi-barva: #c2410c; }
.a3-chmi--cervena  { --a3-chmi-barva: #b91c1c; }
.a3-chmi--klid     { --a3-chmi-barva: #15803d; }

/* Výhled je předběžné varování, ne platná výstraha — pruh proto přerušovaný,
   ať je rozdíl vidět i bez čtení štítku. */
.a3-chmi--vyhled { border-left-style: dashed; }

@media (prefers-color-scheme: dark) {
    .a3-chmi--zelena,
    .a3-chmi--klid     { --a3-chmi-barva: #4ade80; }
    .a3-chmi--zluta    { --a3-chmi-barva: #fbbf24; }
    .a3-chmi--oranzova { --a3-chmi-barva: #fb923c; }
    .a3-chmi--cervena  { --a3-chmi-barva: #f87171; }
}

/* =========================================================================
   KOMPATIBILITA BOOTSTRAP 3 ↔ BOOTSTRAP 5
   Renderery emitují bootstrapové třídy i tyhle admin3-vlastní ekvivalenty
   vedle sebe. Starý skin (BS3) si vezme svoje, nový (BS5) tyhle.
   Jen struktura a viditelnost — žádný vzhled (viz pravidlo "minimální kostra").
   ========================================================================= */

/* Náhrada .input-group-addon / .add-on (BS3), které BS5 nezná. */
.a3-input-addon {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
}

/* Náhrada .hidden-sm / .hidden-xs (BS3). */
@media (max-width: 991px) {
    .a3-hide-sm { display: none; }
}

/* =========================================================================
   VYHLEDÁVÁNÍ (a3-hledani-*)
   Minimální kostra výsledkové stránky a AI odpovědi — jen struktura, žádný
   vzhled. Barvy, rámečky a typografii dodává skin (viz template/ukazka).
   ========================================================================= */

.a3-hledani-filtry {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.a3-hledani-vysledky {
    list-style: none;
    margin: 0;
    padding: 0;
}

.a3-hledani-polozka { margin: 0 0 1.25rem; }

.a3-hledani-odkaz {
    display: inline-block;
    font-weight: 600;
}

.a3-hledani-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.a3-hledani-uryvek { margin: 0.35rem 0 0; }

/* Zvýraznění shody nesmí spoléhat na výchozí žluté <mark> prohlížeče —
   v tmavém režimu je na něm text nečitelný. */
.a3-hledani mark {
    background: transparent;
    font-weight: 700;
}

/* AI odpověď. Skrytý stav drží [hidden]; autorské `display` by ho jinak přebilo. */
.a3-hledani-ai[hidden] { display: none; }

/* Odpověď se vypisuje, jak ji model píše (a3-hledani.js). Kurzor za textem říká
   „ještě to není celé"; barva je currentColor, aby fungoval v každé šabloně
   i v tmavém režimu. Třídu sundá klient, jakmile dorazí konec. */
.a3-hledani-ai-text.is-stream::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: 0.15em;
    vertical-align: text-bottom;
    background: currentColor;
    opacity: 0.6;
    animation: a3-hledani-ai-kurzor 1s steps(2, start) infinite;
}

@keyframes a3-hledani-ai-kurzor {
    to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .a3-hledani-ai-text.is-stream::after { animation: none; }
}

.a3-hledani-ai-zdroje {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

/* Našeptávač — panel visí pod polem, takže jeho obal musí být pozicovaný. */
.a3-naseptavac {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.a3-naseptavac[hidden] { display: none; }

.a3-naseptavac-polozka { cursor: pointer; }

/* =========================================================================
   ANKETA (.a3-anketa-*)

   Minimální kostra — barvy, písmo a rámečky patří skinu (system_instructions
   § 7). Žádné pevné px šířky: renderer nezná šířku sloupce ani gap skinu.
   Podíl v pruhu jde CSS proměnnou `--a3-anketa-podil`, kterou vysází server —
   je to HODNOTA, ne layout, takže se pravidlo o inline `style` neporušuje.
   ========================================================================= */

.a3-anketa {
    container-type: inline-size;
    margin-bottom: var(--portlet-gap);
}

.a3-anketa-otazka {
    font-weight: 600;
    margin-bottom: calc(var(--portlet-gap) / 2);
}

.a3-anketa-popis {
    margin-bottom: var(--portlet-gap);
}

/* Možnosti pod sebou. Celý řádek je klikatelný <label>, ne jen kolečko —
   na dotykovém displeji je terč o velikosti radia netrefitelný. */
.a3-anketa-moznosti {
    display: flex;
    flex-direction: column;
    gap: calc(var(--portlet-gap) / 2);
    margin-bottom: var(--portlet-gap);
}

.a3-anketa-moznost {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--portlet-gap) / 2);
    padding: var(--portlet-cell-padding);
    margin: 0;
    font-weight: normal;   /* skiny na BS3 dávají <label> tučné písmo */
    cursor: pointer;
}

.a3-anketa-moznost > span {
    min-width: 0;   /* dlouhá odpověď se zalomí místo přetečení řádku */
}

.a3-anketa-moznost input {
    flex-shrink: 0;
    margin-top: 0.2em;   /* kolečko na účaří prvního řádku, ne nad ním */
}

/* ── Jedna odpověď = jeden klik ──────────────────────────────────────────
   Kolečko ani tlačítko „Hlasovat" tam, kde návštěvník stejně jen ukazuje na
   jednu odpověď, nedávají smysl — klik na odpověď hlas odešle. Oba prvky
   ZŮSTÁVAJÍ v DOM (přepínač nese hodnotu i ovládání klávesnicí, tlačítko
   vyžaduje a3-form.js), jen je vidět nejsou. */
.a3-anketa-form[data-a3-anketa-jedna] .a3-anketa-moznost {
    position: relative;
}

.a3-anketa-form[data-a3-anketa-jedna] .a3-anketa-vyber {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Klávesnice i klik potřebují vidět, kde stojí a co je vybráno. `currentColor`
   schválně — obrys si skin přebije, ale baseline nesmí nechat volbu bez
   jakékoli zpětné vazby po dobu, než hlas odejde. */
.a3-anketa-form[data-a3-anketa-jedna] .a3-anketa-moznost:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.a3-anketa-form[data-a3-anketa-jedna] .a3-anketa-moznost:has(.a3-anketa-vyber:checked) {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.a3-anketa-submit[hidden] {
    display: none;
}

/* Nastavení „Vidět výsledky hned": ve volbě stojí TENTÝŽ `.a3-anketa-radek`
   jako v bloku výsledků (procenta, pruh, počet hlasů) — jen s přepínačem
   před ním. Vlastní zjednodušená podoba výsledku tu není schválně: rozešla by
   se s tou po odhlasování. Zbývá jen dát řádku zbytek šířky volby. */
.a3-anketa-moznost > .a3-anketa-radek {
    flex: 1;
    min-width: 0;
}

/* ── Výsledky ────────────────────────────────────────────────────────── */

.a3-anketa-vysledky {
    display: flex;
    flex-direction: column;
    gap: var(--portlet-gap);
}

.a3-anketa-radek-hlavicka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--portlet-gap);
}

.a3-anketa-radek-text {
    min-width: 0;
}

.a3-anketa-procenta {
    flex-shrink: 0;
    font-weight: 600;
}

/* Dráha pruhu. Výška i barva jsou baseline — skin je přebíjí při shodné
   specificitě. `overflow: hidden` drží zaoblení výplně uvnitř dráhy. */
.a3-anketa-pruh {
    height: 8px;
    margin: calc(var(--portlet-gap) / 4) 0;
    background: var(--portlet-bg);
    border-radius: 4px;
    overflow: hidden;
}

/* Šířku určuje proměnná od serveru. Přechod je tu kvůli tomu, že výsledky
   po odhlasování naskočí AJAXem — bez něj pruhy problesknou naplno. */
.a3-anketa-pruh-vypln {
    width: var(--a3-anketa-podil, 0%);
    height: 100%;
    background: currentColor;
    transition: width 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .a3-anketa-pruh-vypln { transition: none; }
}

.a3-anketa-pocet,
.a3-anketa-celkem,
.a3-anketa-hotovo {
    font-size: 0.9em;
    opacity: 0.8;
}

.a3-anketa-celkem,
.a3-anketa-hotovo {
    margin-top: calc(var(--portlet-gap) / 2);
}

/* =========================================================================
   POČASÍ (portlet 'pocasi') — jen MINIMÁLNÍ funkční kostra.
   Rozvržení lišty, řada dnů a velikost ikon. Barvy, rámečky, zaoblení,
   stíny, hover a velikosti písma si dodá CSS konkrétní šablony.
   ========================================================================= */

/* Rozvržení řídí šířka výpisu, ne šířka okna — týž blok stojí na celé
   stránce i ve 4/12 sloupci a v boxu v liště (stejný kontrakt jako
   .a3-deska a .a3-rozcestnik). */
.a3-pocasi {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--portlet-gap);
    margin-bottom: var(--portlet-gap);
}

/* Aktuální stav: ikona vedle údajů. Nesmršťuje se — údaje ustoupí dřív. */
.a3-pocasi-ted {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.a3-pocasi-ted-ikona {
    display: flex;
    flex: 0 0 auto;
}

.a3-pocasi-doplnky {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Řadu dnů drží RODIČ, ne display dětí — skin přebíjí baseline při shodné
   specificitě a jedno `display: block` na položce by řadu složilo pod sebe.
   Je to <ol>, takže se musí zrušit i výchozí odrážky a odsazení prohlížeče. */
.a3-pocasi-dny {
    display: flex;
    flex-wrap: wrap;
    gap: var(--portlet-gap);
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.a3-pocasi-den {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Aby dny nepoletovaly do různých šířek podle délky popisku („Dnes"
       versus „St 27. 8."). Bez pevné podlahy by se řada rozjela. */
    min-width: 4.5em;
}

.a3-pocasi-den-ikona {
    display: flex;
}

.a3-pocasi-den-teploty {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

/* Atribuce MET Norway — licenční podmínka, ne dekorace. Zalomí se na celou
   šířku pod lištu, aby ji nikdy nevytlačil žádný jiný prvek.
   ŠABLONA JI SMÍ PŘEBARVIT A ZMENŠIT, ALE NE SKRÝT. */
.a3-pocasi-zdroj {
    flex: 1 0 100%;
    margin: 0;
}

/* Název jevu u jednotlivých dnů. Je vidět jen pro čtečky obrazovky — v řadě
   dnů by se text nevešel, ale bez něj by z dne zbyla dvě čísla a obrázek.
   Neschovává se přes `display: none` ani `visibility` — to by ho čtečky
   přeskočily taky. */
.a3-pocasi-skryte {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SVG jevu. Rozměr nese atribut width/height v em přímo v renderu (kvůli
   skinům, které si tenhle soubor nelinkují) — tady se jen srovná účaří,
   aby ikona neseděla na základní lince textu jako písmeno. */
.a3-pocasi-svg {
    display: block;
    flex: 0 0 auto;
}

/* Úzký sloupec: aktuální stav a řada dnů pod sebou, dny na plnou šířku.
   Řídí se šířkou VÝPISU (container query), takže totéž platí ve 4/12
   sloupci na širokém monitoru i na telefonu. */
@container (max-width: 30em) {
    .a3-pocasi-ted {
        flex: 1 0 100%;
    }

    .a3-pocasi-dny {
        flex: 1 0 100%;
        /* Vodorovné rolování jen tady a jen uvnitř řady — stránka sama
           se posouvat nesmí. */
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}