/* Základná typografia a nulovanie okrajov zabezpečujú konzistentný štart naprieč celou aplikáciou. */
html, body {
    font-family: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    min-height: 100%;
    margin: 0;
}

/* Body dostáva minimálnu výšku viewportu, aby layout správne fungoval aj pri krátkom obsahu. */
body {
    min-height: 100vh;
}

:root {
    /* Všetky aplikačné farby a tiene centralizujeme sem.
       V nových komponentoch nepoužívaj natvrdo #hex farby mimo tejto sekcie. */
    --resido-primary: #1f6fe5;
    --resido-primary-dark: #155cc7;
    --resido-primary-hover: #1d63e7;
    --resido-primary-pressed: #1463ef;
    --resido-primary-light: #3b88ff;
    --resido-primary-pastel: #7faef2;
    --resido-primary-soft: #eaf3ff;
    --resido-primary-soft-strong: #e8f1ff;
    --resido-primary-softest: #f3f8ff;
    --resido-secondary: #5b7bb2;
    --resido-secondary-pastel: #9ab3da;
    --resido-secondary-soft: #eef3fb;
    --resido-success: #27a36b;
    --resido-success-strong: #26b050;
    --resido-success-rgb: 39, 163, 107;
    --resido-success-pastel: #78c79d;
    --resido-success-soft: #eaf7f1;
    --resido-warning: #f2a93b;
    --resido-warning-pastel: #f4c677;
    --resido-warning-soft: #fff3cd;
    --resido-warning-soft-strong: #fff1d8;
    --resido-danger: #df4b4b;
    --resido-danger-pastel: #ea8e8e;
    --resido-danger-dark: #b32121;
    --resido-danger-soft: #fff0f0;
    --resido-violet: #8d63ff;
    --resido-violet-pastel: #b59cff;
    --resido-violet-soft: #f3ecff;
    --resido-text: #14233a;
    --resido-text-strong: #102a55;
    --resido-text-brand: #1a325f;
    --resido-text-brand-alt: #1a3b70;
    --resido-text-subtle: #52627a;
    --resido-text-soft: #5a6d88;
    --resido-text-muted: #70819b;
    --resido-text-placeholder: #9aa7bb;
    --resido-icon-muted: #546d93;
    --resido-link-muted: #304b74;
    --resido-border: #d8e1ee;
    --resido-border-soft: #d7e3f3;
    --resido-border-neutral: #929292;
    --resido-neutral-soft: #e5e7eb;
    --resido-neutral-dark: #111827;
    --resido-grid-line: #e9f0fa;
    --resido-background: #f4f9ff;
    --resido-shell-background-start: #f7fbff;
    --resido-shell-background-end: #eef4fb;
    --resido-surface: #ffffff;
    --resido-surface-strong: rgba(255, 255, 255, 0.99);
    --resido-surface-soft: rgba(248, 251, 255, 0.98);
    --resido-surface-raised: rgba(255, 255, 255, 0.96);
    --resido-surface-float: rgba(255, 255, 255, 0.94);
    --resido-on-primary: #ffffff;
    /* Veľký polomer používaj pre dominantné sekčné karty a širšie obsahové panely,
       napríklad keď chceme, aby hlavná karta sekcie pôsobila mäkšie než bežný zoznamový prvok. */
    --resido-radius-card-lg: 24px;
    /* Stredný polomer je základ pre bežné karty aplikácie,
       napríklad BuildingListItem, BuildingDetailOverview a ďalšie hlavné MudPaper povrchy v tomto module. */
    --resido-radius-card-md: 18px;
    /* Menší polomer je určený pre kompaktnejšie vnorené povrchy,
       kde chceme zachovať rovnaký jazyk zaoblenia, ale s jemnejším vizuálnym efektom. */
    --resido-radius-card-sm: 16px;
    /* Väčší ovládací polomer používaj pre plnohodnotné textové tlačidlá,
       napríklad štandardný režim ResidoActionButton. */
    --resido-radius-control-lg: 14px;
    /* Stredný ovládací polomer používaj pre bežné vstupy a mini ikonové tlačidlá,
       napríklad mini režim ResidoActionButton alebo formulárové prvky s jemnejším rohom. */
    --resido-radius-control-md: 12px;
    /* Menší ovládací polomer je rezerva pre veľmi kompaktné ovládacie prvky,
       keď vedome zvolíme hustejšie rozloženie a nechceme pridávať novú hodnotu. */
    --resido-radius-control-sm: 10px;
    /* Plné zaoblenie používaj pre kruhové ikonové odznaky a pill prvky. */
    --resido-radius-pill: 999px;
    /* Legacy token ostáva kvôli existujúcim častiam mimo aktuálneho scope,
       kým ich vedome neprevedieme na novú pomenovanú sadu radiusov. */
    --resido-card-radius: 28px;
    /* Legacy token pre vstupy mapujeme na zdieľaný control radius, aby nové aj staršie formuláre používali rovnaký roh. */
    --resido-input-radius: var(--resido-radius-control-md);
    /* Legacy token pre tlačidlá mapujeme na zdieľaný control radius, aby staršie globálne štýly ostali vizuálne zjednotené. */
    --resido-button-radius: var(--resido-radius-control-md);
    --resido-primary-rgb: 31, 111, 229;
    --resido-shadow-rgb: 31, 66, 120;
    --resido-shadow-card-rgb: 25, 59, 108;
    --resido-overlay-rgb: 16, 30, 58;
    --resido-primary-tint-04: rgba(var(--resido-primary-rgb), 0.04);
    --resido-primary-tint-08: rgba(var(--resido-primary-rgb), 0.08);
    --resido-primary-tint-10: rgba(var(--resido-primary-rgb), 0.10);
    --resido-primary-tint-24: rgba(20, 99, 239, 0.24);
    --resido-primary-focus: rgba(var(--resido-primary-rgb), 0.75);
    --resido-primary-focus-ring: rgba(var(--resido-primary-rgb), 0.25);
    --resido-primary-border-emphasis: rgba(var(--resido-primary-rgb), 0.55);
    --resido-overlay-scrim: rgba(var(--resido-overlay-rgb), 0.38);
    --resido-overlay-modal: rgba(0, 0, 0, 0.4);
    --resido-shadow-sidebar: 10px 0 28px rgba(31, 61, 111, 0.06);
    --resido-shadow-card-md: 0 12px 24px rgba(var(--resido-shadow-card-rgb), 0.08);
    --resido-shadow-card-primary: 0 12px 24px rgba(var(--resido-primary-rgb), 0.25);
    --resido-shadow-control-primary: 0 5px 12px rgba(var(--resido-primary-rgb), 0.14);
    --resido-shadow-card-strong: 0 16px 30px rgba(20, 99, 239, 0.24);
    --resido-shadow-dialog: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    --resido-shadow-banner: 0 -1px 2px rgba(0, 0, 0, 0.2);
    --resido-card-shadow: 0 28px 75px rgba(31, 66, 120, 0.16);
    --resido-soft-shadow: 0 14px 30px rgba(31, 66, 120, 0.1);
    --resido-login-primary: var(--resido-primary);
    --resido-login-primary-dark: var(--resido-primary-dark);
    --resido-login-text: var(--resido-text);
    --resido-login-muted: var(--resido-text-muted);
    --resido-login-border: var(--resido-border);
    --resido-login-background: var(--resido-background);
    --resido-login-card: var(--resido-surface);
    --resido-login-card-radius: var(--resido-card-radius);
    --resido-login-input-radius: var(--resido-input-radius);
    --resido-login-button-radius: var(--resido-button-radius);
    --resido-login-language-background: rgba(255, 255, 255, 0.72);
    --resido-login-card-shadow: var(--resido-card-shadow);
    --resido-login-soft-shadow: var(--resido-soft-shadow);
    --resido-login-language-shadow: 0 10px 24px rgba(var(--resido-shadow-rgb), 0.08);
    --resido-scrollbar-size: 8px;
    --resido-scrollbar-thumb-width: 6px;
    --resido-scrollbar-edge-inset: 12px;
    --resido-scrollbar-thumb: rgba(0, 0, 0, 0.32);
    --resido-scrollbar-thumb-hover: rgba(0, 0, 0, 0.42);
    --resido-scrollbar-radius: 999px;
}

/* Základné odkazy používajú primárnu farbu aplikácie aj mimo špecializovaných komponentov. */
a, .btn-link {
    color: var(--resido-primary);
}

/* Bootstrap primárne tlačidlo mapuje na aplikačné farby pre prípady, kde sa ešte používa mimo MudBlazoru. */
.btn-primary {
    color: var(--resido-on-primary);
    background-color: var(--resido-primary);
    border-color: var(--resido-primary-dark);
}

/* Zjednocuje fokusový prstenec pre základné Bootstrap a formulárové prvky. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--resido-surface), 0 0 0 0.25rem var(--resido-primary-focus-ring);
}

/* Legacy obsahový kontajner si ponecháva malý horný padding pre stránky, ktoré ho ešte používajú. */
.content {
    padding-top: 1.1rem;
}

/* Po fokusovaní cez FocusOnNavigate nechce pri h1 zobrazovať natívny outline. */
h1:focus {
    outline: none;
}

/* Validované polia zvýrazní zeleným obrysom, ak už boli používateľom modifikované. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--resido-success-strong);
}

/* Nevalidné prvky označuje červeným obrysom. */
.invalid {
    outline: 1px solid var(--resido-danger);
}

/* Chybové validačné texty používajú jednotnú červenú farbu. */
.validation-message {
    color: var(--resido-danger);
}

/* Blazor error boundary dostáva výrazné pozadie a odsadenie pre zobrazenie systémovej chyby. */
.blazor-error-boundary {
    background: var(--resido-danger-dark);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--resido-on-primary);
}

/* Tmavší okraj checkboxu pomáha starším form prvkom lepšie sedieť s novým vizuálom aplikácie. */
.darker-border-checkbox.form-check-input {
    border-color: var(--resido-border-neutral);
}

/* Floating placeholders sú v neaktívnom stave zarovnané doprava podľa pôvodného Bootstrap správania. */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

/* Po focusnutí sa placeholder zarovná späť doľava, aby nepôsobil rušivo pri písaní. */
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Povrch login karty je globálny, lebo ho používajú layout a page vrstvy mimo jedného konkrétneho komponentu. */
.login-card-surface {
    width: 100%;
    padding: 54px 60px 56px;
    background: var(--resido-login-card);
    border-radius: var(--resido-login-card-radius);
    box-shadow: var(--resido-login-card-shadow);
}

/* Primárne odosielacie tlačidlo loginu má vlastný globálny vzhľad a gradient. */
.login-submit-button {
    height: 64px;
    border-radius: var(--resido-login-button-radius);
    background: linear-gradient(180deg, var(--resido-login-primary), var(--resido-login-primary-dark));
    color: var(--resido-on-primary);
    font-size: 22px;
    font-weight: 800;
    box-shadow: var(--resido-shadow-card-primary);
    text-transform: none;
}

    /* Hover tlačidla nemení gradient, aby sa nebil s vlastným shadow a fokusovým stavom. */
    .login-submit-button:hover {
        background: linear-gradient(180deg, var(--resido-login-primary), var(--resido-login-primary-dark));
    }

    /* Active stav tlačidla pridá drobný vizuálny stisk. */
    .login-submit-button:active {
        transform: translateY(1px);
    }

/* Login inputy renderuje MudBlazor, preto základný vzhľad nastavujeme priamo na vnorenom HTML inpute. */
.login-page .login-form__field-host input,
.login-page .login-form__field-host input:focus {
    width: 100%;
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    outline: 0 !important;
    background: transparent;
    color: var(--resido-login-text);
    font: 18px/1.4 "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    appearance: none;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
}
    /* Placeholder si drží rovnakú typografiu ako samotný input, aby sa po renderi ani autofille opticky neposúval. */
    .login-page .login-form__field-host input::placeholder {
        color: var(--resido-text-placeholder);
        font: 18px/1.4 "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
        opacity: 1;
    }

    /* Chrome autofill si do vnoreného inputu pridáva vlastné modré pozadie, preto ho na login poli prekrývame povrchovou farbou. */
    .login-page .login-form__field-host input:-webkit-autofill,
    .login-page .login-form__field-host input:-webkit-autofill:hover,
    .login-page .login-form__field-host input:-webkit-autofill:focus,
    .login-page .login-form__field-host input:-webkit-autofill:active {
        color: var(--resido-login-text) !important;
        caret-color: var(--resido-login-text) !important;
        -webkit-text-fill-color: var(--resido-login-text) !important;
        font: 18px/1.4 "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
        box-shadow: 0 0 0 1000px var(--resido-surface) inset !important;
        -webkit-box-shadow: 0 0 0 1000px var(--resido-surface) inset !important;
    }

        /* Prvý riadok autofill textu si Chrome štýluje zvlášť, preto mu zopakujeme rovnakú typografiu ako zvyšku inputu. */
        .login-page .login-form__field-host input:-webkit-autofill::first-line {
            font: 18px/1.4 "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
        }

    /* Vnorený input nesmie zobrazovať všeobecné validačné outline pravidlá, lebo vizuálny stav poľa riadi jeho vonkajší wrapper. */
    .login-page .login-form__field-host input.valid.modified,
    .login-page .login-form__field-host input.invalid {
        outline: 0 !important;
        box-shadow: none !important;
    }

/* Chromium ignoruje ::-webkit-scrollbar-button, ak má prvok zároveň nastavený štandardný scrollbar-width,
   preto pre tieto prehliadače nechávame štýlovanie posuvníkov výhradne na WebKit pseudoelementoch.
   Transparentné scrollbar-button prvky používame ako vnútorný odstup, aby palec nezačínal priamo v zaoblenom rohu. */
@supports selector(::-webkit-scrollbar) {
    html,
    body,
    * {
        scrollbar-color: auto !important;
        scrollbar-width: auto !important;
    }

        html::-webkit-scrollbar,
        body::-webkit-scrollbar,
        *::-webkit-scrollbar {
            height: var(--resido-scrollbar-size) !important;
            width: var(--resido-scrollbar-size) !important;
        }

        html::-webkit-scrollbar-track,
        body::-webkit-scrollbar-track,
        *::-webkit-scrollbar-track {
            background-color: transparent !important;
            border-radius: var(--resido-scrollbar-radius) !important;
        }

        html::-webkit-scrollbar-thumb,
        body::-webkit-scrollbar-thumb,
        *::-webkit-scrollbar-thumb {
            background-color: var(--resido-scrollbar-thumb) !important;
            background-clip: padding-box !important;
            border: calc((var(--resido-scrollbar-size) - var(--resido-scrollbar-thumb-width)) / 2) solid transparent !important;
            border-radius: var(--resido-scrollbar-radius) !important;
            min-height: 36px;
            min-width: 36px;
        }

            html::-webkit-scrollbar-thumb:hover,
            body::-webkit-scrollbar-thumb:hover,
            *::-webkit-scrollbar-thumb:hover {
                background-color: var(--resido-scrollbar-thumb-hover) !important;
            }

        html::-webkit-scrollbar-corner,
        body::-webkit-scrollbar-corner,
        *::-webkit-scrollbar-corner,
        html::-webkit-scrollbar-button,
        body::-webkit-scrollbar-button,
        *::-webkit-scrollbar-button {
            -webkit-appearance: none !important;
            background: transparent !important;
            background-color: transparent !important;
            background-image: none !important;
            border: 0 !important;
            border-radius: var(--resido-scrollbar-radius) !important;
            color: transparent !important;
        }

            html::-webkit-scrollbar-button:single-button:vertical:decrement,
            html::-webkit-scrollbar-button:single-button:vertical:increment,
            body::-webkit-scrollbar-button:single-button:vertical:decrement,
            body::-webkit-scrollbar-button:single-button:vertical:increment,
            *::-webkit-scrollbar-button:single-button:vertical:decrement,
            *::-webkit-scrollbar-button:single-button:vertical:increment {
                display: block !important;
                height: var(--resido-scrollbar-edge-inset) !important;
                width: var(--resido-scrollbar-size) !important;
            }

            html::-webkit-scrollbar-button:single-button:horizontal:decrement,
            html::-webkit-scrollbar-button:single-button:horizontal:increment,
            body::-webkit-scrollbar-button:single-button:horizontal:decrement,
            body::-webkit-scrollbar-button:single-button:horizontal:increment,
            *::-webkit-scrollbar-button:single-button:horizontal:decrement,
            *::-webkit-scrollbar-button:single-button:horizontal:increment {
                display: block !important;
                height: var(--resido-scrollbar-size) !important;
                width: var(--resido-scrollbar-edge-inset) !important;
            }
}

/* Firefox nepoužíva WebKit scrollbar pseudoelementy, preto mu ponechávame štandardný tenký posuvník. */
@supports not selector(::-webkit-scrollbar) {
    html,
    body,
    * {
        scrollbar-color: var(--resido-scrollbar-thumb) transparent;
        scrollbar-width: thin;
    }
}

/* MudBlazor popovery sa renderujú mimo scoped CSS, preto ich papier globálne klipuje podľa svojho zaoblenia. */
.mud-popover .mud-paper {
    overflow: hidden;
}

/* Profilové menu sa renderuje cez MudPopover mimo layout scope, preto jeho rozbalený panel štýlujeme globálne. */
.mud-popover.shell-profile-menu {
    min-width: 236px;
    margin-top: -2px;
    z-index: 1300;
}

/* Papier profilového menu nadväzuje na profilové tlačidlo ako jeden kompaktný rozbalený panel. */
.mud-popover.shell-profile-menu .mud-paper {
    min-width: 236px;
    padding: 6px;
    border: 1px solid var(--resido-border-soft);
    border-radius: 0 0 18px 18px;
    background: var(--resido-surface-raised);
    box-shadow: var(--resido-shadow-card-md);
}

/* Položky profilového menu majú rovnaký mäkký výberový stav ako zvyšok shell navigácie. */
.mud-popover.shell-profile-menu .shell-profile-menu__item {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--resido-text-brand);
    font-weight: 600;
}

/* Ikony v profilovom menu držia rovnakú primárnu farbu a veľkosť v oboch položkách. */
.mud-popover.shell-profile-menu .shell-profile-menu__item .mud-icon-root {
    color: var(--resido-primary);
    font-size: 1.45rem;
}

/* Hover a focus stav zvýraznia konkrétnu položku bez zmeny rozmeru menu. */
.mud-popover.shell-profile-menu .shell-profile-menu__item:hover,
.mud-popover.shell-profile-menu .shell-profile-menu__item:focus-visible {
    background: var(--resido-primary-tint-08);
}

/* Boot loader prekryje prvotné načítanie aplikácie plnou plochou a drží logo vždy vycentrované. */
#resido-boot-loader.resido-boot-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #f7fbff;
}

/* Logo loadera má responzívnu šírku, aby nepôsobilo príliš veľké na menších displejoch. */
#resido-boot-loader .resido-boot-loader__logo {
    width: min(240px, 60vw);
    height: auto;
}

/* Skrytý stav loadera iba dobehne fade-out a následne prestane blokovať interakciu s aplikáciou. */
#resido-boot-loader.resido-boot-loader--hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

@media (max-width: 640px) {
    /* Na mobile zmenší vnútorné odsadenie login karty, aby formulár nepôsobil príliš ťažkopádne. */
    .login-card-surface {
        padding: 36px 24px;
    }
}