/* ═══════════════════════════════════════════════════════════════
   AIS.Portal – téma zákaznického portálu.
   Vychází z prezentačního webu polygonaurel.cz: zelená značky, šedá nadpisů,
   Montserrat pro titulky (verzálky), Work Sans pro text, ostré rohy tlačítek
   a zelené lomítko před nadpisy. Barvy a rozměry jen přes proměnné.
   Vzhled komponent Syncfusion (téma Bootstrap 5.3) se přebarvuje přes jeho
   CSS proměnné --color-sf-*, žádné přepisování selektorů tématu.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Značka */
    --portal-zelena: #8ABD00;
    --portal-zelena-tmava: #79A403;
    --portal-zelena-tmavsi: #6E9503;
    --portal-zelena-svetla: #C4DE80;
    --portal-zelena-pozadi: #EEF5DA;
    --portal-seda: #53565A;
    --portal-seda-text: #787878;
    --portal-antracit: #3A3A3C;

    /* Plochy a text */
    --portal-text: #2B2B2D;
    --portal-text-tlumeny: var(--portal-seda-text);
    --portal-pozadi: #F6F6F6;
    --portal-panel: #FFFFFF;
    --portal-ram: #E1E4E8;
    --portal-chyba: #B3261E;
    --portal-chyba-pozadi: #FBEAE8;

    --portal-font-text: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --portal-font-nadpis: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

    --portal-mezera: 1rem;
    --portal-sirka-obsahu: 72rem;
    --portal-stin: 0 2px 8px rgb(16 24 32 / 8%);

    /* Syncfusion (téma Bootstrap 5.3) – primární barva a písmo podle značky */
    --e-font-family: var(--portal-font-text);
    --color-sf-primary: var(--portal-zelena);
    --color-sf-primary-bg-color-hover: var(--portal-zelena-tmava);
    --color-sf-primary-border-color-hover: var(--portal-zelena-tmava);
    --color-sf-primary-bg-color-pressed: var(--portal-zelena-tmavsi);
    --color-sf-primary-border-color-pressed: var(--portal-zelena-tmavsi);
    --color-sf-primary-bg-color-disabled: rgb(138 189 0 / 55%);
    --color-sf-primary-light: var(--portal-zelena-svetla);
    --color-sf-primary-lighter: var(--portal-zelena-pozadi);
    --color-sf-primary-dark: var(--portal-zelena-tmava);
    --color-sf-primary-darker: #4F6B02;
    --color-sf-primary-shadow: 138, 189, 0;
    --color-sf-border-focus: var(--portal-zelena-svetla);
    --color-sf-content-bg-color-selected: var(--portal-zelena);
    --color-sf-content-text-color: var(--portal-text);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--portal-font-text);
    font-size: 16px;
    line-height: 1.55;
    color: var(--portal-text);
    background: var(--portal-pozadi);
}

h1, h2, h3 {
    margin: 0 0 var(--portal-mezera);
    font-family: var(--portal-font-nadpis);
    font-weight: 700;
    line-height: 1.2;
    color: var(--portal-seda);
}

h1 {
    font-size: 1.9rem;
    text-transform: uppercase;
}

h2 {
    font-size: 1.35rem;
    text-transform: uppercase;
}

h1:focus {
    outline: none;
}

a {
    color: var(--portal-zelena-tmava);
}

a:hover {
    color: var(--portal-zelena);
}

/* Zelené lomítko před nadpisem – poznávací prvek webu polygonu */
.portal-nadpis::before {
    content: "";
    display: inline-block;
    width: 0.62em;
    height: 0.78em;
    margin-right: 0.28em;
    vertical-align: -0.06em;
    background: url("../icons/ico-headingline-green.svg") no-repeat center / contain;
}

/* ── Kostra stránky ─────────────────────────────────────────── */

.portal-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portal-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--portal-mezera);
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 2rem;
    background: var(--portal-panel);
    border-bottom: 1px solid var(--portal-ram);
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.portal-brand img {
    height: 38px;
    width: auto;
}

.portal-nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.portal-nav a,
.portal-user {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--portal-seda);
}

.portal-nav a:hover {
    color: var(--portal-zelena);
}

/* Přepínač jazyka – tři krátké odkazy, aktuální jazyk zvýrazněný a označený aria-current. */
.portal-jazyky {
    display: inline-flex;
    gap: 0.25rem;
}

.portal-jazyky a {
    padding: 0.2rem 0.45rem;
    border: 1px solid transparent;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--portal-seda);
}

.portal-jazyky a.aktivni {
    border-color: var(--portal-zelena);
    color: var(--portal-zelena);
}

/* Odkaz „přeskočit na obsah“ – viditelný jen při fokusu z klávesnice (WCAG 2.4.1). */
.portal-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--portal-zelena);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s;
}

.portal-skip:focus {
    top: 1rem;
    outline: 3px solid var(--portal-antracit);
}

/* Jednotný viditelný fokus pro klávesovou obsluhu (odkazy, tlačítka, select). */
a:focus-visible,
button:focus-visible,
select:focus-visible,
.e-btn:focus-visible {
    outline: 3px solid var(--portal-zelena);
    outline-offset: 2px;
}

.portal-nav form {
    margin: 0;
}

.portal-main {
    flex: 1;
    width: 100%;
    max-width: var(--portal-sirka-obsahu);
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

/* Stránky s obsahem přes celou šířku (přihlášení, hero) */
.portal-main-bleed {
    max-width: none;
    padding: 0;
}

/* ── Patička podle webu: antracit, bílý text, zelené odkazy ──── */

.portal-footer {
    background: var(--portal-antracit);
    color: #fff;
    font-size: 0.9rem;
}

.portal-footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 2rem;
    max-width: var(--portal-sirka-obsahu);
    margin: 0 auto;
    padding: 2.5rem 2rem 1.5rem;
}

.portal-footer h2 {
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

.portal-footer p {
    margin: 0 0 0.35rem;
    color: rgb(255 255 255 / 85%);
}

.portal-footer a {
    color: var(--portal-zelena);
    text-decoration: none;
}

.portal-footer a:hover {
    color: var(--portal-zelena-svetla);
}

.portal-footer img {
    height: 34px;
}

.portal-footer-bottom {
    max-width: var(--portal-sirka-obsahu);
    margin: 0 auto;
    padding: 0.9rem 2rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
    font-size: 0.8rem;
    color: rgb(255 255 255 / 65%);
}

/* ── Úvodní hero ────────────────────────────────────────────── */

.portal-hero {
    position: relative;
    padding: 5rem 2rem;
    /* Letecký snímek polygonu z prezentačního webu pod tmavým překryvem – jako hero na polygonaurel.cz */
    background:
        linear-gradient(rgb(58 58 60 / 78%), rgb(58 58 60 / 78%)),
        var(--portal-antracit) url("../images/polygon-letecky.webp") center / cover no-repeat;
    color: #fff;
}

.portal-hero-inner {
    max-width: var(--portal-sirka-obsahu);
    margin: 0 auto;
}

.portal-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
}

.portal-lead {
    max-width: 40rem;
    margin-bottom: 1.75rem;
    font-size: 1.15rem;
    line-height: 1.6;
}

.portal-hero-akce {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.portal-hero-kontakt {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
}

.portal-hero-kontakt:hover {
    color: var(--portal-zelena-svetla);
}

.portal-sekce {
    max-width: var(--portal-sirka-obsahu);
    margin: 0 auto;
    padding: 3rem 2rem;
}

.portal-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
}

.portal-karta {
    padding: 1.5rem;
    background: var(--portal-panel);
    border-top: 4px solid var(--portal-zelena);
    box-shadow: var(--portal-stin);
}

.portal-karta i {
    font-size: 1.6rem;
    color: var(--portal-zelena);
    margin-bottom: 0.75rem;
}

.portal-karta h2 {
    font-size: 1rem;
}

.portal-karta p {
    margin: 0;
    color: var(--portal-text-tlumeny);
}

/* ── Bloky obsahu ───────────────────────────────────────────── */

.portal-panel {
    padding: 2rem;
    background: var(--portal-panel);
    border: 1px solid var(--portal-ram);
    box-shadow: var(--portal-stin);
}

.portal-panel-narrow {
    max-width: 30rem;
    margin: 0 auto;
}

.portal-muted {
    color: var(--portal-text-tlumeny);
    font-size: 0.9rem;
}

/* ── Tlačítka: ostré rohy a verzálky jako na webu ───────────── */

.e-btn.portal-btn,
.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--portal-zelena);
    border-radius: 0;
    background: var(--portal-zelena);
    color: #fff;
    font-family: var(--portal-font-nadpis);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.e-btn.portal-btn:hover,
.portal-btn:hover {
    border-color: var(--portal-zelena-tmava);
    background: var(--portal-zelena-tmava);
    color: #fff;
}

.portal-btn-obrys {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.portal-btn-obrys:hover {
    background: #fff;
    border-color: #fff;
    color: var(--portal-antracit);
}

/* Sekundární akce vedle primárního tlačítka (zrušit, změnit heslo) – obrys místo výplně. */
.portal-btn-sekundarni,
.portal-btn-sekundarni.e-btn {
    background: transparent;
    color: var(--portal-zelena);
}

.portal-btn-sekundarni:hover,
.portal-btn-sekundarni.e-btn:hover {
    background: var(--portal-zelena);
    color: #fff;
}

/* Řada akčních tlačítek pod formulářem – na úzkém displeji se zalomí s mezerou. */
.portal-akce {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.portal-btn-blok {
    width: 100%;
}

/* ── Formuláře (Syncfusion vstupy bez JavaScriptu – statické SSR) ── */

.portal-field {
    margin-bottom: 1.1rem;
}

/* Dvojice polí na jednom řádku (např. titul + jméno) – bez Bootstrap grid komponent,
   jen d-flex/gap utility třídy by na užší sloupec (titul, IČO) nestačily. */
.portal-field-row {
    display: flex;
    gap: 1rem;
}

.portal-field-row > .portal-field {
    flex: 1;
    min-width: 0;
}

.portal-field-row > .portal-field-uzke {
    flex: 0 0 6.5rem;
}

.portal-field-checkbox {
    margin-bottom: 0.9rem;
}

.portal-field-checkbox label {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--portal-text);
    cursor: pointer;
}

/* Zaškrtnutí ve statickém SSR.
   Syncfusion přidává třídu .e-check až JavaScriptem, ten ale na těchto stránkách neběží
   (žádný interaktivní render mód). Stav proto kreslíme přímo ze stavu :checked skutečného
   inputu – vzhled i glyf odpovídají pravidlům motivu pro .e-frame.e-check. */
.e-checkbox-wrapper .e-checkbox:checked + .e-frame {
    background-color: var(--color-sf-primary);
    border-color: var(--color-sf-primary);
    color: var(--color-sf-primary-text-color);
}

.e-checkbox-wrapper .e-checkbox:checked + .e-frame::before {
    content: "\e727";
}

@media (max-width: 480px) {
    .portal-field-row {
        flex-wrap: wrap;
    }

    .portal-field-row > .portal-field-uzke {
        flex-basis: 100%;
    }
}

.portal-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--portal-seda);
}

.portal-field .e-input-group {
    border-radius: 0;
}

/* Fokus bez JS: téma spoléhá na třídu e-input-focus, kterou přidává skript komponenty. */
.portal-field .e-input-group:focus-within {
    border-color: var(--portal-zelena);
    box-shadow: 0 0 0 0.2rem rgb(138 189 0 / 25%);
}

.portal-field .e-input-group.invalid,
.portal-field .e-input-group:has(.invalid) {
    border-color: var(--portal-chyba);
}

.validation-message {
    display: block;
    margin-top: 0.3rem;
    color: var(--portal-chyba);
    font-size: 0.85rem;
}

.portal-alert {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--portal-chyba);
    background: var(--portal-chyba-pozadi);
    color: var(--portal-chyba);
}

/* Potvrzení úspěšné akce (uložený profil, změněné heslo) – protějšek .portal-alert. */
.portal-uspech {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--portal-zelena);
    background: color-mix(in srgb, var(--portal-zelena) 12%, #fff);
    color: var(--portal-antracit);
}

/* Údaje jen ke čtení v profilu (e-mail, firma). */
.portal-udaje {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0 0 0.5rem;
}

.portal-udaje dt {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--portal-seda);
}

.portal-udaje dd {
    margin: 0;
}

/* Nativní select ve statickém SSR (SfDropDownList bez JavaScriptu hodnotu neodešle) –
   vzhled sladěný se Syncfusion vstupy .e-input-group. */
.portal-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-sf-border, #ced4da);
    background: #fff;
    font: inherit;
    color: var(--portal-text);
}

.portal-select:focus {
    outline: none;
    border-color: var(--portal-zelena);
}

/* Informační hláška (čekající propojení účtu, údaje z providera) – neutrální protějšek .portal-alert. */
.portal-info {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--portal-seda);
    background: color-mix(in srgb, var(--portal-seda) 10%, #fff);
    color: var(--portal-antracit);
}

/* Externí přihlášení – oddělovač „nebo“ a tlačítka providerů (obrys, ikona značky). */
.auth-oddelovac {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.9rem;
    color: var(--portal-text-tlumeny);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-oddelovac::before,
.auth-oddelovac::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--portal-ram);
}

.auth-provideri {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.portal-btn-externi,
.portal-btn-externi.e-btn {
    background: #fff;
    border-color: var(--portal-ram);
    color: var(--portal-antracit);
    text-transform: none;
    letter-spacing: 0;
}

.portal-btn-externi:hover,
.portal-btn-externi.e-btn:hover {
    border-color: var(--portal-zelena);
    background: color-mix(in srgb, var(--portal-zelena) 8%, #fff);
    color: var(--portal-antracit);
}

.portal-btn-externi i {
    font-size: 1.1rem;
}

/* Propojené účty v profilu. */
.portal-nadpis-maly {
    font-size: 1.1rem;
}

.portal-provideri {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-provideri li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--portal-ram);
}

.portal-provideri form {
    margin: 0;
}

.portal-provider-nazev {
    flex: 1 1 8rem;
    font-weight: 600;
}

.portal-provider-nazev i {
    width: 1.4rem;
    text-align: center;
    margin-right: 0.3rem;
}

.portal-provider-stav {
    flex: 1 1 6rem;
    font-size: 0.85rem;
}

.portal-btn-maly,
.portal-btn-maly.e-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
}

.portal-btn-maly[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Widget Cloudflare Turnstile – vykresluje se přes celou šířku formuláře nad tlačítkem. */
.portal-turnstile {
    margin-bottom: 1.1rem;
    min-height: 65px;
}

/* ── Přihlášení: dělená stránka podle bloku Sign In (Essential UI Kit) ── */

.auth {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px);
}

.auth-panel {
    display: flex;
    align-items: center;
    padding: 3rem 2rem;
    /* Fotka polygonu pod zeleným překryvem značky */
    background:
        linear-gradient(rgb(138 189 0 / 88%), rgb(121 164 3 / 92%)),
        var(--portal-zelena) url("../images/polygon-letecky.webp") center / cover no-repeat;
    color: #fff;
}

.auth-panel-inner {
    max-width: 30rem;
    margin: 0 auto;
}

.auth-panel img {
    height: 44px;
    margin-bottom: 2rem;
}

.auth-panel h1 {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.auth-panel p {
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
}

.auth-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-panel li {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 0.9rem;
    font-weight: 500;
}

.auth-panel li i {
    width: 1.5rem;
    text-align: center;
    font-size: 1.15rem;
}

.auth-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 3rem 1.5rem;
    background: var(--portal-panel);
}

.auth-card {
    width: 100%;
    max-width: 30rem;
}

.auth-card h1 {
    font-size: 1.5rem;
    text-align: center;
}

.auth-card-uvod {
    margin: -0.5rem 0 1.75rem;
    text-align: center;
    color: var(--portal-text-tlumeny);
}

.auth-card-odkazy {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-card-odkazy a {
    font-weight: 600;
    text-decoration: none;
}

@media (min-width: 992px) {
    .auth {
        flex-direction: row;
    }

    .auth-panel {
        flex: 0 0 52%;
        padding: 4rem 3rem;
    }
}

/* ── Chybová vrstva Blazoru ─────────────────────────────────── */

/* Pruh se zobrazuje až při chybě circuitu – blazor.web.js mu nastaví display: block. */
#blazor-error-ui {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 0.7rem 3rem 0.7rem 1.25rem;
    background: #FFF4CE;
    border-top: 3px solid var(--portal-chyba);
    color: var(--portal-text);
    box-shadow: 0 -1px 4px rgb(0 0 0 / 15%);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.9rem;
    cursor: pointer;
}

.blazor-error-boundary {
    padding: 1rem;
    background: var(--portal-chyba);
    color: #fff;
}

.blazor-error-boundary::after {
    content: "Došlo k neočekávané chybě. / An unexpected error occurred.";
}

@media (max-width: 640px) {
    .portal-header {
        padding: 0.75rem 1rem;
    }

    .portal-main,
    .portal-sekce,
    .portal-hero {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .portal-main-bleed {
        padding: 0;
    }

    .portal-nav {
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .portal-user {
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Průvodce požadavkem na test (InteractiveServer) a přehled požadavků
   – přebarvení Syncfusion přes tokeny, vlastní layout wizardu.
   ═══════════════════════════════════════════════════════════════ */
.wizard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 5rem; /* místo pro sticky lištu */
}

.wizard-hlavicka {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.wizard-krok-cislo {
    font-family: var(--portal-font-nadpis);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--portal-zelena-tmava);
    background: var(--portal-zelena-pozadi);
    padding: .35rem .75rem;
    white-space: nowrap;
}

/* Stepper – zelený průběh, hranaté indikátory, FA ikony */
.wizard-stepper.e-stepper {
    padding: .75rem .5rem .25rem;
    background: var(--portal-panel);
    border: 1px solid var(--portal-ram);
}

.wizard-stepper .e-step-label-container .e-label {
    font-family: var(--portal-font-nadpis);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.wizard-stepper .e-step-selected .e-step,
.wizard-stepper .e-step-completed .e-step {
    background: var(--portal-zelena);
    border-color: var(--portal-zelena);
    color: #fff;
}

.wizard-stepper .e-step-selected .e-label {
    color: var(--portal-zelena-tmava);
}

.wizard-stepper .e-progressbar .e-progressbar-value {
    background: var(--portal-zelena);
}

.wizard-stepper .e-step-invalid .e-step {
    border-color: var(--portal-chyba);
}

.wizard-krok {
    min-height: 20rem;
}

.wizard-nacitani {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 0;
    position: relative;
    min-height: 12rem;
}

.wizard-sekce + .wizard-sekce {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--portal-ram);
}

.wizard-nadpis {
    font-family: var(--portal-font-nadpis);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--portal-antracit);
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.wizard-nadpis i,
.wizard-podnadpis i {
    color: var(--portal-zelena);
}

.wizard-podnadpis {
    font-family: var(--portal-font-nadpis);
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wizard-nadpis-radek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.wizard-pole {
    margin-bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.wizard-pole-vnorene {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--portal-zelena-svetla);
}

.wizard-pole-radek {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 1rem;
}

.wizard-popisek {
    font-size: .8rem;
    font-weight: 600;
    color: var(--portal-text-tlumeny);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.wizard-textarea textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Přepínače (SfSwitch) v řádcích */
.wizard-prepinace {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.wizard-prepinac {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    font-weight: 500;
}

.wizard-prepinac span i {
    width: 1.25rem;
    text-align: center;
    color: var(--portal-zelena-tmava);
    margin-right: .25rem;
}

/* Výběr polygonu – karty */
.wizard-polygony {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    margin-bottom: .5rem;
}

.wizard-polygon {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    text-align: left;
    padding: .85rem 1rem;
    background: var(--portal-panel);
    border: 2px solid var(--portal-ram);
    cursor: pointer;
    font: inherit;
    color: var(--portal-text);
    transition: border-color .2s, background .2s;
}

.wizard-polygon:hover,
.wizard-polygon:focus-visible {
    border-color: var(--portal-zelena-svetla);
    background: var(--portal-zelena-pozadi);
    outline: none;
}

.wizard-polygon.vybrany {
    border-color: var(--portal-zelena);
    background: var(--portal-zelena-pozadi);
}

.wizard-polygon-ikona {
    font-size: 1.4rem;
    color: var(--portal-zelena);
    line-height: 1;
}

.wizard-polygon-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.wizard-polygon-text small {
    color: var(--portal-text-tlumeny);
}

.wizard-polygon-jediny {
    margin: 0;
}

.wizard-polygon-jediny i {
    color: var(--portal-zelena);
}

/* Chipy, štítky */
.wizard-chipy {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.wizard-stitky {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.wizard-stitek {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .55rem;
    background: var(--portal-pozadi);
    border: 1px solid var(--portal-ram);
    color: var(--portal-antracit);
}

.wizard-stitek-zelena {
    background: var(--portal-zelena-pozadi);
    border-color: var(--portal-zelena-svetla);
    color: var(--portal-zelena-tmavsi);
}

.wizard-stitek-tlumeny {
    color: var(--portal-text-tlumeny);
}

.wizard-osoba {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.wizard-osoba small {
    color: var(--portal-text-tlumeny);
}

/* Karty (SfCard) */
.wizard-karty,
.wizard-shrnuti {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.wizard-shrnuti {
    margin-top: 1rem;
}

.wizard-karta-sirka {
    grid-column: 1 / -1;
}

.e-card.wizard-karta {
    border-radius: 0;
    border: 1px solid var(--portal-ram);
    box-shadow: var(--portal-stin);
    border-top: 3px solid var(--portal-zelena);
    justify-content: flex-start; /* obsah karty nahoře, ne svisle na střed */
}

.e-card.wizard-karta .e-card-header-title {
    font-family: var(--portal-font-nadpis);
    font-weight: 700;
    color: var(--portal-antracit);
}

.e-card.wizard-karta .e-card-footer {
    justify-content: flex-end;
    gap: .25rem;
}

.wizard-dl {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
    gap: .35rem 1rem;
    margin: 0 0 .75rem;
}

.wizard-dl dt {
    color: var(--portal-text-tlumeny);
    font-weight: 500;
}

.wizard-dl dd {
    margin: 0;
}

.wizard-text {
    white-space: pre-wrap;
}

.wizard-seznam {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.wizard-seznam li i:first-child {
    color: var(--portal-zelena);
    margin-right: .25rem;
}

/* Prázdný stav */
.wizard-prazdno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    border: 2px dashed var(--portal-ram);
    color: var(--portal-text-tlumeny);
    text-align: center;
}

.wizard-prazdno i {
    font-size: 2.5rem;
    color: var(--portal-zelena-svetla);
}

.wizard-prazdno p {
    margin: 0;
}

/* Zdroje a mapa */
.wizard-zdroje {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.wizard-zdroje-bez-mapy {
    grid-template-columns: 1fr;
}

.wizard-mapa {
    min-width: 0;
}

.wizard-listview.e-listview {
    border: 1px solid var(--portal-ram);
}

.wizard-listview.e-listview .e-list-item {
    padding: 0;
    height: auto;
    border-bottom: 1px solid var(--portal-ram);
}

/* Výběr položky v seznamu nic nevybírá (otevře dialog) – zvýraznění „aktivní“ položky nechceme. */
.wizard-listview.e-listview .e-list-item.e-active,
.wizard-listview.e-listview .e-list-item.e-focused {
    background: transparent;
    color: inherit;
}

.wizard-zdroj {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    cursor: pointer;
    transition: background .15s;
}

.wizard-zdroj:hover,
.wizard-zdroj.zvyrazneny {
    background: var(--portal-zelena-pozadi);
}

.wizard-zdroj i {
    width: 1.25rem;
    text-align: center;
    color: var(--portal-antracit);
}

.wizard-zdroj-nazev {
    flex: 1;
    font-weight: 500;
}

.wizard-zdroj-barva {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    flex: none;
    vertical-align: middle;
    margin-right: .25rem;
}

.wizard-zdroj-pocet {
    background: var(--portal-zelena);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    min-width: 1.4rem;
    text-align: center;
    padding: .1rem .35rem;
}

.wizard-zdroj-plus {
    color: var(--portal-zelena) !important;
    opacity: 0;
    transition: opacity .15s;
}

.wizard-zdroj:hover .wizard-zdroj-plus,
.wizard-zdroj.zvyrazneny .wizard-zdroj-plus {
    opacity: 1;
}

/* Grid */
.wizard-grid.e-grid {
    border: 1px solid var(--portal-ram);
}

.wizard-grid.e-grid .e-headercell {
    background: var(--portal-pozadi);
    color: var(--portal-text-tlumeny);
    font-family: var(--portal-font-nadpis);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Přílohy */
.wizard-priloha-sekce {
    margin-top: 1.25rem;
}

.wizard-uploader {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .75rem;
}

.portal-uploader.e-upload {
    border: 2px dashed var(--portal-ram);
    border-radius: 0;
    background: var(--portal-pozadi);
    transition: border-color .2s, background .2s;
}

.portal-uploader.e-upload:hover,
.portal-uploader.e-upload.e-upload-drag-hover {
    border-color: var(--portal-zelena);
    background: var(--portal-zelena-pozadi);
}

.portal-uploader.e-upload .e-file-select-wrap {
    padding: 1rem;
}

.wizard-prilohy {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.wizard-priloha {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    background: var(--portal-panel);
    border: 1px solid var(--portal-ram);
}

.wizard-priloha-ikona {
    color: var(--portal-zelena-tmava);
    font-size: 1.1rem;
}

.wizard-priloha-nazev {
    flex: 1;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Souhlasy, chybějící položky */
.wizard-souhlasy {
    margin-top: 1.5rem;
}

.wizard-souhlas {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .6rem;
    cursor: pointer;
}

.wizard-chybi ul {
    padding-left: 1.1rem;
    margin-top: .35rem;
}

/* Ikonová tlačítka */
.portal-btn-ikona,
.portal-btn-ikona.e-btn {
    border-radius: 0;
    color: var(--portal-antracit);
    padding: .3rem .5rem;
    min-width: 0;
    text-decoration: none;
}

.portal-btn-ikona:hover,
.portal-btn-ikona.e-btn:hover,
.portal-btn-ikona.e-btn:focus,
.portal-btn-ikona.e-btn.e-active {
    color: var(--portal-zelena-tmava);
    background: var(--portal-zelena-pozadi);
    box-shadow: none;
}

.portal-btn-nebezpecne:hover,
.portal-btn-nebezpecne.e-btn:hover {
    color: var(--portal-chyba) !important;
    background: var(--portal-chyba-pozadi) !important;
}

.portal-odkaz {
    color: var(--portal-zelena-tmavsi);
    font-weight: 600;
}

/* Sticky lišta tlačítek */
.wizard-lista {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    margin: 0 -1rem;
    background: rgb(255 255 255 / 88%);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--portal-ram);
    box-shadow: 0 -4px 12px rgb(16 24 32 / 6%);
}

.wizard-lista-mezera {
    flex: 1;
}

/* Dialog a toast */
.wizard-dialog.e-dialog {
    border-radius: 0;
}

.wizard-dialog.e-dialog .e-dlg-header {
    font-family: var(--portal-font-nadpis);
    font-weight: 700;
    color: var(--portal-antracit);
}

.wizard-dialog.e-dialog .e-dlg-header::before {
    content: "/ ";
    color: var(--portal-zelena);
}

.wizard-toast .e-toast {
    border-radius: 0;
}

/* Přehled požadavků */
.prehled-hlavicka {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.prehled-seznam {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.prehled-karta {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid var(--portal-ram);
    border-left: 4px solid var(--portal-zelena);
    background: var(--portal-panel);
}

.prehled-karta-hlavicka {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
}

.prehled-karta h3 {
    font-family: var(--portal-font-nadpis);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.prehled-udaje {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: .3rem .5rem;
    margin: 0;
    font-size: .9rem;
}

.prehled-udaje dt {
    color: var(--portal-zelena-tmava);
    text-align: center;
}

.prehled-udaje dd {
    margin: 0;
    color: var(--portal-text-tlumeny);
}

.portal-stav {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .55rem;
    white-space: nowrap;
    background: var(--portal-pozadi);
    border: 1px solid var(--portal-ram);
    color: var(--portal-antracit);
}

.portal-stav-new { border-color: #F0C24B; background: #FFF7DD; color: #7A5A00; }
.portal-stav-request { border-color: var(--portal-zelena-svetla); background: var(--portal-zelena-pozadi); color: var(--portal-zelena-tmavsi); }
.portal-stav-accepted { border-color: var(--portal-zelena); background: var(--portal-zelena); color: #fff; }
.portal-stav-deleted { border-color: var(--portal-ram); color: var(--portal-text-tlumeny); text-decoration: line-through; }

@media (max-width: 576px) {
    .wizard-stepper.e-stepper .e-step-label-container {
        display: none !important;
    }

    .wizard-lista-text {
        display: none;
    }

    .wizard-zdroje {
        grid-template-columns: 1fr;
    }

    .wizard-dl {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .wizard-dl dt {
        margin-top: .5rem;
    }
}

/* ── Přehled požadavků (/pozadavky), detail, šablony ─────────────────── */

.portal-nav .aktivni {
    color: var(--portal-zelena-tmava);
    box-shadow: inset 0 -2px 0 var(--portal-zelena);
}

.prehled-sekce-hlavicka {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.prehled-vsechny {
    text-decoration: none;
    white-space: nowrap;
}

.prehled-karta-odkaz {
    color: inherit;
    text-decoration: none;
}

.prehled-karta-odkaz:hover {
    color: var(--portal-zelena-tmava);
}

.prehled-karta-akce {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

/* Rychlé filtry stavu – chipy Syncfusion přebarvené do tématu */
.pozadavky-filtry {
    margin-bottom: 1rem;
}

.pozadavky-chipy.e-chip-list .e-chip {
    border-radius: 0;
    border: 1px solid var(--portal-ram);
    background: var(--portal-panel);
    color: var(--portal-antracit);
    font-weight: 600;
    height: 2.1rem;
}

.pozadavky-chipy.e-chip-list .e-chip:hover {
    background: var(--portal-zelena-pozadi);
}

.pozadavky-chipy.e-chip-list .e-chip.e-active {
    background: var(--portal-zelena);
    border-color: var(--portal-zelena);
    color: #fff;
}

.pozadavky-chipy.e-chip-list .e-chip.e-active .e-chip-icon,
.pozadavky-chipy.e-chip-list .e-chip.e-active .e-chip-text {
    color: #fff;
}

/* Grid přes celou šířku panelu; na úzkém displeji se posouvá vodorovně jen grid */
.pozadavky-grid-obal {
    overflow-x: auto;
}

.pozadavky-grid.e-grid .e-row {
    cursor: pointer;
}

.pozadavky-grid.e-grid .e-toolbar {
    border: 1px solid var(--portal-ram);
    border-bottom: 0;
    background: var(--portal-panel);
}

.pozadavky-odkaz {
    color: var(--portal-text);
    font-weight: 600;
    text-decoration: none;
}

.pozadavky-odkaz:hover {
    color: var(--portal-zelena-tmava);
    text-decoration: underline;
}

.pozadavky-akce {
    display: inline-flex;
    gap: .1rem;
}

.portal-btn-nebezpecne-plne.e-btn,
.portal-btn-nebezpecne-plne.e-btn.e-primary {
    background: var(--portal-chyba);
    border-color: var(--portal-chyba);
    color: #fff;
}

.portal-btn-nebezpecne-plne.e-btn:hover,
.portal-btn-nebezpecne-plne.e-btn.e-primary:hover {
    background: #8F1E18;
    border-color: #8F1E18;
}

/* Štítky stavu termínu (barvy podle staré aplikace) */
.portal-stav-udalost-novy { border-color: #F0C24B; background: #FFF7DD; color: #7A5A00; }
.portal-stav-udalost-odeslany { border-color: var(--portal-zelena-svetla); background: var(--portal-zelena-pozadi); color: var(--portal-zelena-tmavsi); }
.portal-stav-udalost-potvrzeny { border-color: var(--portal-zelena); background: var(--portal-zelena); color: #fff; }
.portal-stav-udalost-podminka { border-color: #8E6BC6; background: #F1EBFA; color: #4F2E8A; }
.portal-stav-udalost-probiha { border-color: #E38A1B; background: #FDF0DF; color: #8A4B00; }
.portal-stav-udalost-hotovo { border-color: #4A90D9; background: #E7F1FC; color: #1F4E82; }
.portal-stav-udalost-zruseny { border-color: var(--portal-chyba); background: var(--portal-chyba-pozadi); color: var(--portal-chyba); }

/* Detail požadavku */
.detail-hlavicka {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.detail-hlavicka .portal-nadpis {
    margin-bottom: .25rem;
    overflow-wrap: anywhere;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    color: var(--portal-text-tlumeny);
    font-size: .9rem;
    margin: 0;
}

.detail-meta i {
    color: var(--portal-zelena-tmava);
    margin-right: .3rem;
}

.detail-akce {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.detail-zpet {
    display: inline-block;
    margin-bottom: .75rem;
    text-decoration: none;
    color: var(--portal-text-tlumeny);
}

.detail-zpet:hover {
    color: var(--portal-zelena-tmava);
}

.detail-terminy-obal {
    overflow-x: auto;
}

.detail-termin-cas {
    white-space: nowrap;
}

/* Historie stavů termínu – svislá časová osa */
.timeline {
    list-style: none;
    margin: .25rem 0 .25rem .5rem;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--portal-zelena-svetla);
}

.timeline li {
    position: relative;
    padding: 0 0 .75rem 0;
    font-size: .9rem;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: calc(-1.25rem - 6px);
    top: .35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--portal-zelena);
    border: 2px solid var(--portal-panel);
    box-shadow: 0 0 0 1px var(--portal-zelena-svetla);
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline-cas {
    font-family: var(--portal-font-nadpis);
    font-size: .78rem;
    font-weight: 700;
    color: var(--portal-text-tlumeny);
    margin-right: .5rem;
    white-space: nowrap;
}

.timeline-kdo {
    color: var(--portal-text-tlumeny);
    font-size: .82rem;
}

.timeline-text {
    display: block;
    margin-top: .15rem;
}

/* Šablony požadavků */
.sablony-vyber {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.sablona-karta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border: 1px solid var(--portal-ram);
    background: var(--portal-panel);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
}

.sablona-karta:hover,
.sablona-karta:focus-visible {
    border-color: var(--portal-zelena);
    box-shadow: var(--portal-stin);
    outline: none;
}

.sablona-karta-prazdna {
    border-style: dashed;
}

.sablona-karta h3 {
    font-family: var(--portal-font-nadpis);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.sablona-karta h3 i {
    color: var(--portal-zelena);
    margin-right: .4rem;
}

.sablona-karta-pocty {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    font-size: .82rem;
    color: var(--portal-text-tlumeny);
    margin-top: auto;
}

.sablona-karta-autor {
    font-size: .8rem;
    color: var(--portal-text-tlumeny);
}

/* Doporučené zdroje ze šablony / předlohy */
.wizard-zdroj.doporuceny .wizard-zdroj-nazev::after {
    content: "★";
    color: var(--portal-zelena);
    margin-left: .35rem;
    font-size: .8em;
}

.wizard-doporucene {
    margin: .25rem 0 .75rem;
}

@media (max-width: 576px) {
    .detail-akce {
        justify-content: flex-start;
    }

    .detail-akce .e-btn {
        flex: 1 1 auto;
    }

    .pozadavky-chipy.e-chip-list .e-chip .e-chip-icon {
        display: none;
    }
}

/* ── Kalendář termínů (SfSchedule) ───────────────────────────────────── */

.kalendar-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}

.kalendar-lista-mezera {
    flex: 1;
}

.kalendar-prepinac {
    margin: 0;
}

.kalendar-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .8rem;
    color: var(--portal-text-tlumeny);
}

.kalendar-legenda-polozka {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.kalendar-legenda-barva {
    width: .9rem;
    height: .9rem;
    border: 1px solid transparent;
}

.kalendar-obal {
    overflow-x: auto;
}

.kalendar-schedule.e-schedule {
    border: 1px solid var(--portal-ram);
    border-radius: 0;
}

.kalendar-schedule.e-schedule .e-schedule-toolbar {
    background: var(--portal-panel);
    border-bottom: 1px solid var(--portal-ram);
}

.kalendar-schedule.e-schedule .e-resource-cells,
.kalendar-schedule.e-schedule .e-header-cells,
.kalendar-schedule.e-schedule .e-date-header {
    font-family: var(--portal-font-nadpis);
    font-size: .8rem;
    font-weight: 600;
}

/* Barvy událostí podle skupiny stavu – stejná paleta jako štítky portal-stav-udalost-* */
.kalendar-schedule.e-schedule .e-appointment.kalendar-udalost {
    border-radius: 0;
    border-left-width: 4px;
    border-left-style: solid;
    color: var(--portal-text);
}

.kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-cizi {
    opacity: .75;
    border-style: dashed;
}

/* Selektor musí přebít výchozí barvu události Syncfusion (primary) i v každém pohledu. */
.kalendar-udalost-novy, .kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-novy { background: #FFF7DD; border-color: #F0C24B; }
.kalendar-udalost-odeslany, .kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-odeslany { background: var(--portal-zelena-pozadi); border-color: var(--portal-zelena-svetla); }
.kalendar-udalost-potvrzeny, .kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-potvrzeny { background: var(--portal-zelena); border-color: var(--portal-zelena-tmavsi); color: #fff; }
.kalendar-udalost-podminka, .kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-podminka { background: #F1EBFA; border-color: #8E6BC6; }
.kalendar-udalost-probiha, .kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-probiha { background: #FDF0DF; border-color: #E38A1B; }
.kalendar-udalost-hotovo, .kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-hotovo { background: #E7F1FC; border-color: #4A90D9; }
.kalendar-udalost-zruseny, .kalendar-schedule.e-schedule .e-appointment.kalendar-udalost-zruseny { background: var(--portal-chyba-pozadi); border-color: var(--portal-chyba); text-decoration: line-through; }

.kalendar-schedule.e-schedule .e-appointment.kalendar-udalost .e-appointment-details,
.kalendar-schedule.e-schedule .e-appointment.kalendar-udalost .e-subject {
    color: inherit;
}

.kalendar-udalost-obsah {
    display: flex;
    flex-direction: column;
    padding: .15rem .35rem;
    line-height: 1.2;
    overflow: hidden;
}

.kalendar-udalost-nazev {
    font-weight: 600;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kalendar-udalost-cas {
    font-size: .72rem;
    opacity: .85;
}

.kalendar-info-hlavicka {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem .25rem;
}

.kalendar-info {
    margin: .25rem 0 .5rem;
    font-size: .9rem;
}

.kalendar-info-paticka {
    display: flex;
    justify-content: flex-end;
    padding: .25rem 1rem .75rem;
}

.kalendar-schedule.e-schedule .e-quick-popup-wrapper .e-event-popup .e-popup-content {
    padding: 0 1rem;
}

@media (max-width: 576px) {
    .kalendar-legenda {
        display: none;
    }
}

/* ── Dokumenty ke stažení ────────────────────────────────────────────── */

.dokumenty-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dokumenty-seznam li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: .1rem .5rem;
    align-items: baseline;
}

.dokumenty-seznam li > i {
    color: var(--portal-zelena-tmava);
    text-align: center;
    grid-row: 1 / span 2;
}

.dokumenty-seznam li small {
    grid-column: 2;
    font-size: .78rem;
}

.dokumenty-skupiny {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.25rem 2rem;
}

.dokumenty-skupina .wizard-podnadpis {
    margin-bottom: .5rem;
}

.verejne-dokumenty {
    margin-top: 1.5rem;
}

.verejne-dokumenty-nadpis {
    display: block;
    font-family: var(--portal-font-nadpis);
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.verejne-dokumenty ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.verejne-dokumenty a {
    color: var(--portal-zelena-tmavsi);
    font-weight: 600;
    text-decoration: none;
}

.verejne-dokumenty a:hover {
    text-decoration: underline;
}

.verejne-dokumenty-tmave a,
.verejne-dokumenty-tmave .verejne-dokumenty-nadpis {
    color: #fff;
}

.verejne-dokumenty-tmave a i {
    color: var(--portal-zelena);
}

/* ── Dohoda o mlčenlivosti (/nda) ─────────────────────────────────────── */

.nda-hlavicka {
    margin-bottom: 1.25rem;
}

.nda-nahled {
    border: 1px solid var(--portal-ram);
    background: var(--portal-pozadi);
    height: 70vh;
    min-height: 320px;
    margin-bottom: .5rem;
}

.nda-nahled iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.nda-plocha {
    border: 2px dashed var(--portal-ram);
    background: #fff;
    padding: .25rem;
    margin-bottom: 1rem;
}

.nda-plocha .e-signature {
    /* Komponenta si výšku dopočítá z poměru plátna – bez tohoto omezení zabere celou stránku. */
    border: 0;
    width: 100%;
    height: 200px;
    display: block;
    touch-action: none;
}

.nda-souhlas {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1rem;
}

.nda-akce {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.nda-profil-stav {
    margin-bottom: .75rem;
}

.nda-profil-akce {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

@media (max-width: 576px) {
    .nda-nahled {
        height: 50vh;
    }

    .nda-akce .e-btn {
        flex: 1 1 auto;
    }
}

/* ── Školení DSC (F3): stav, termíny, online test ── */
.dsc-stav {
    margin-bottom: .75rem;
}

.dsc-stav .portal-stav i,
.prehled-dsc i {
    margin-right: .35rem;
}

.dsc-body {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.dsc-body li + li {
    margin-top: .25rem;
}

.dsc-terminy {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.dsc-terminy li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
}

.dsc-otazky {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dsc-otazka {
    padding: .25rem .5rem .25rem .25rem;
    border-left: 3px solid transparent;
}

.dsc-otazka-chybna {
    border-left-color: var(--portal-chyba);
    background: var(--portal-chyba-pozadi);
}

.dsc-otazka-text {
    font-weight: 600;
    margin: 0 0 .5rem;
}

.dsc-moznosti {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.dsc-moznost {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .75rem;
    border: 1px solid var(--portal-ram);
    background: var(--portal-panel);
    cursor: pointer;
}

.dsc-moznost:hover {
    border-color: var(--portal-zelena);
}

.dsc-moznost input {
    margin-top: .2rem;
    accent-color: var(--portal-zelena);
}

.dsc-moznost:has(input:checked) {
    border-color: var(--portal-zelena);
    background: var(--portal-zelena-pozadi);
}

/* ── iCal odběr v profilu ── */
.ical-odkaz {
    margin: 0 0 .5rem;
}

.ical-odkaz-pole {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--portal-zelena);
    background: var(--portal-zelena-pozadi);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .85rem;
    color: var(--portal-text);
}

.nda-profil-akce form {
    display: inline;
}

/* ── Polygon (info) a Kontakty ── */
.info-plochy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

.info-plocha-nadpis {
    font-family: var(--portal-font-nadpis);
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 .35rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.info-plocha-cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .3rem;
    background: var(--portal-zelena);
    color: #fff;
    font-size: .8rem;
}

.info-plocha ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .92rem;
}

.info-plocha li + li {
    margin-top: .15rem;
}

.info-mapa {
    max-width: 720px;
    margin-bottom: 1rem;
}

.info-zdroje {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .3rem 1rem;
}

.kontakty-rozlozeni {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.4fr);
    gap: 1.5rem;
}

.kontakty-osoby {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.kontakty-osoba {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .8rem;
    border-left: 3px solid var(--portal-zelena);
    background: var(--portal-pozadi);
}

.kontakty-osoba .portal-odkaz i {
    width: 1.1rem;
    margin-right: .25rem;
    color: var(--portal-zelena-tmava);
}

.kontakty-mapa {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.kontakty-mapa-ramec {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 280px;
    border: 1px solid var(--portal-ram);
}

.kontakty-mapa-odkazy {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 768px) {
    .kontakty-rozlozeni {
        grid-template-columns: 1fr;
    }
}

/* ── Profil: dva sloupce (údaje | dohoda, školení, kalendář, účty), na užších displejích pod sebou ── */
.profil-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.profil-hlavni,
.profil-bocni {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.profil-mrizka .portal-panel {
    margin: 0;
}

@media (max-width: 900px) {
    .profil-mrizka {
        grid-template-columns: 1fr;
    }
}