/* /Components/Layout/LanguageMenu.razor.rz.scp.css */
/* Pozycja z językiem nad stopką konta. Kształt jak pozycje nawigacji, nie jak przycisk
   z awatarem: to dalej wiersz paska bocznego, tylko rozwijany w górę. */
.language-footer[b-fjcpy0ihtd] {
    position: relative;
    flex: 0 0 auto;
    margin-top: auto;
    padding: var(--spacing-md, 8px) var(--spacing-lg, 12px) 0;
}

.language-toggle[b-fjcpy0ihtd] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing-md, 8px);
    padding: var(--spacing-md, 8px);
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-white, #ffffff);
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs, 14px);
    font-weight: var(--font-weight-medium, 500);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.language-toggle:hover[b-fjcpy0ihtd] {
    background-color: rgba(255, 255, 255, 0.15);
}

.language-toggle[b-fjcpy0ihtd]  svg {
    flex: 0 0 auto;
    stroke-width: 2;
}

.language-label[b-fjcpy0ihtd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lista wychodzi w górę, tak jak menu konta — pod pozycją stoi już stopka z kontem. */
.language-menu[b-fjcpy0ihtd] {
    position: absolute;
    bottom: calc(100% + var(--spacing-xs, 4px));
    left: var(--spacing-lg, 12px);
    z-index: 30;
    display: flex;
    min-width: 220px;
    flex-direction: column;
    padding: var(--spacing-md, 8px) 0;
    border: 1px solid var(--color-border-secondary, #e9eaeb);
    border-radius: var(--radius-xl, 12px);
    background: var(--color-card-bg, #ffffff);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .language-menu[b-fjcpy0ihtd] {
    background: var(--color-bg-tertiary, #22262f);
    border-color: var(--color-border-primary, #373a41);
}

.language-backdrop[b-fjcpy0ihtd] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.language-item[b-fjcpy0ihtd] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing-lg, 12px);
    padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px);
    border: none;
    background: transparent;
    color: var(--color-text-primary, #181d27);
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs, 14px);
    text-align: left;
    cursor: pointer;
}

.language-item:hover[b-fjcpy0ihtd] {
    background: var(--color-bg-tertiary, #fafafa);
}

.language-item.is-current[b-fjcpy0ihtd] {
    font-weight: var(--font-weight-bold, 700);
}

.language-item-name[b-fjcpy0ihtd] {
    flex: 1 1 auto;
}

.language-item[b-fjcpy0ihtd]  svg {
    flex: 0 0 auto;
    color: var(--color-btn-primary-bg);
    stroke-width: 2;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-yg8c4xj4pp] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--color-bg-primary, #FAFAFA);
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}

main[b-yg8c4xj4pp] {
    flex: 1;
    position: relative;
    background-color: var(--color-bg-primary, #FAFAFA);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* Kropki w prawym górnym narożniku treści, dokładnie jak w systemie designu
   (`bg-pattern-page`): pas 1360 na 184, siatka co 18 pikseli, kropka o promieniu 1,5,
   wygaszana maską od narożnika w lewo i w dół.

   Nie kafel na całej powierzchni: wzór ma być akcentem przy nagłówku strony, a rozlany
   na wszystko robi się kratą pod kartami. Kolor z tokenu obramowań, więc w ciemnym
   motywie schodzi na szary z palety ciemnej — kropki z jasnej były tam niewidoczne. */
main[b-yg8c4xj4pp]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1360px;
    max-width: 100%;
    height: 184px;
    background-image: radial-gradient(circle, var(--color-border-primary, #d5d7da) 1.5px, transparent 2px);
    background-repeat: repeat;
    background-position: top right;
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse 100% 100% at top right, black 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at top right, black 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

main > .content[b-yg8c4xj4pp] {
    flex: 1 0 auto;
}

/* Kolumna treści jest kontenerem zapytań: układy w środku mają reagować na miejsce,
   które faktycznie dostały, a nie na szerokość okna. Pasek boczny zabiera swoje,
   więc te dwie liczby różnią się o kilkaset pikseli. */
main > .content[b-yg8c4xj4pp] {
    container: content / inline-size;
}

/* Pasek jednolity, bez poświaty. Rozjaśnienie od lewego dolnego narożnika brało się
   z gradientu, którego w UTS nie ma — i właśnie ono robiło z dołu paska jaśniejszą plamę.

   Obramowanie jako wewnętrzny cień, nie `border`: szerokość paska ma wynosić dokładnie
   265 pikseli razem z krawędzią, tak jak w UTS. Prawdziwa krawędź dokładałaby swoje dwa
   piksele do szerokości nawigacji i pasek byłby o tyle szerszy. W jasnym motywie ta
   krawędź jest w kolorze paska, czyli niewidoczna, a w ciemnym odcina jego czerń od
   czerni kart.

   Bez przycinania zawartości: menu konta wychodzi z dołu paska w górę i ponad treść,
   a przy `overflow: hidden` kończyło się na krawędzi paska i było ucięte w połowie.
   Nic tu nie wystaje poza tym menu — nawigacja przewija się u siebie. */
.sidebar[b-yg8c4xj4pp] {
    background-color: var(--color-bg-brand, var(--color-navy-500));
    position: relative;

    /* Pasek nad treścią, nie pod nią: menu konta wychodzi z jego dołu i wystaje na prawo.
       Bez tego kolumna treści (własna warstwa) przykrywała wystającą część, więc menu
       wyglądało na ucięte na krawędzi paska. */
    z-index: 5;
    overflow: visible;
    border-radius: var(--radius-2xl, 16px);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-border-sidebar, var(--color-navy-500));
}

.top-row[b-yg8c4xj4pp] {
    background-color: var(--color-bg-secondary, var(--color-grey-50));
    border-bottom: 1px solid var(--color-border-primary, var(--color-grey-200));
    justify-content: flex-end;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-2xl, 20px);
}

.top-row[b-yg8c4xj4pp]  a, .top-row[b-yg8c4xj4pp]  .btn-link {
    white-space: nowrap;
    margin-left: var(--spacing-3xl);
    text-decoration: none;
    color: var(--color-text-primary);
    font-family: var(--font-family-brand);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-book);
}

.top-row[b-yg8c4xj4pp]  a:hover, .top-row[b-yg8c4xj4pp]  .btn-link:hover {
    text-decoration: underline;
    color: var(--color-navy-500);
}

.top-row[b-yg8c4xj4pp]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row[b-yg8c4xj4pp] {
        justify-content: space-between;
    }

    .top-row[b-yg8c4xj4pp]  a, .top-row[b-yg8c4xj4pp]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    /* Bez szpary między paskiem a treścią: w UTS kolumna treści zaczyna się dokładnie na
       prawej krawędzi paska, a odstęp robi jej własne wypełnienie (32 piksele). Osiem
       pikseli szpary dawało tam 40 zamiast 32. */
    .page[b-yg8c4xj4pp] {
        flex-direction: row;
        gap: 0;
    }

    /* Pasek stoi poza układem strony, tak jak `position: fixed` w UTS. Miejsce dla kolumny
       treści odmierza jej własny margines (reguła w `app.css`) i to on jest animowany.

       Nie szerokość paska: przeglądarka nie animuje `width` na elemencie, który odmierza
       miejsce w układzie — przeskakuje od razu na nową wartość. Stąd brało się to, że
       zwijanie robiło treść szeroką w jednej klatce, a rozwijanie wyglądało dobrze
       (tam rozjeżdżała się jeszcze nawigacja stojąca w układzie).

       Tło, zaokrąglenie i cień rysuje sama nawigacja, która leży na pasku — pasek jest tu
       tylko pudełkiem wyznaczającym jej miejsce. Gdyby rysował je pasek, w trakcie
       rozwijania nawigacji byłby widoczny za nią jako gotowy panel na pełną szerokość. */
    .sidebar[b-yg8c4xj4pp] {
        position: absolute;
        top: 8px;
        left: 8px;
        bottom: 8px;
        width: 265px;
        background: none;
        border-radius: 0;
        box-shadow: none;

        /* Pudełko zostaje na pełną szerokość także wtedy, gdy nawigacja jest zwinięta do 72 —
           inaczej rozwinięcie po najechaniu nie miałoby gdzie się zmieścić. Ale przezroczysty
           pas nad treścią łapał kliknięcia na całe 265 pikseli: pod nim widać było listę,
           a klik w nią nie dochodził. Zdarzenia bierze więc sama nawigacja, nie pudełko. */
        pointer-events: none;
    }

    .sidebar[b-yg8c4xj4pp]  .nav-menu {
        pointer-events: auto;
    }


    .page > main[b-yg8c4xj4pp] {
        flex: 1;
        min-height: 0;
    }

    .top-row[b-yg8c4xj4pp] {
        position: sticky;
        top: 0;
        z-index: 1;
        border-radius: var(--radius-xl, 16px);
        margin: var(--spacing-lg) var(--spacing-2xl) 0;
    }

    .top-row.auth[b-yg8c4xj4pp]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    article[b-yg8c4xj4pp] {
        padding: var(--spacing-4xl, 32px) var(--spacing-4xl, 32px) var(--spacing-xl, 16px) !important;
    }
}

#blazor-error-ui[b-yg8c4xj4pp] {
    color-scheme: light only;
    background: var(--color-yellow-50);
    bottom: 0;
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--spacing-lg) var(--spacing-2xl);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-yg8c4xj4pp] {
    cursor: pointer;
    position: absolute;
    right: var(--spacing-lg);
    top: var(--spacing-md);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Antumo Design System - Sidebar Navigation */

.nav-menu[b-ura5u6bgn5] {
    width: 265px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease-in-out;
}

/* Zwinięta nawigacja to własny panel nad treścią: szerokość układu trzyma pasek boczny
   (reguła w arkuszu globalnym), a nawigacja leży na nim — wyjęcie z układu jest w regule
   `.nav-menu` niżej, wspólnej dla obu stanów. Dzięki temu rozwinięcie po najechaniu myszą
   dzieje się NAD treścią i niczego nie rozpycha. W UTS to samo wychodzi z tego, że ich
   pasek jest `position: fixed`.

   Przycinanie zawartości jest tu konieczne: szerokość przechodzi między 72 i 265
   z animacją, a układ pozycji przeskakuje od razu. Bez przycięcia pigułka otwartej
   pozycji i nazwy wystawały na treść przez cały czas trwania animacji — to było widać
   jako mignięcie paska rozjeżdżającego się na boki. */
.nav-menu.collapsed[b-ura5u6bgn5] {
    z-index: 20;
    width: 72px;
    overflow: hidden;
    background-color: var(--color-bg-brand, var(--color-navy-500));
    border-radius: var(--radius-2xl, 16px);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-border-sidebar, var(--color-navy-500));

    /* Zwijanie z opóźnieniem 100 milisekund, jak w UTS — kursor przemykający przez pasek
       nie zdąży odpalić animacji w drugą stronę. */
    transition: width 0.25s ease-in-out 0.1s;
}

/* Rozwija się tylko najechanie na listę pozycji, nie na cały pasek — tak jak w UTS, gdzie
   obsługa myszy siedzi na kontenerze listy (`#kt_aside_menu`), a nie na całym pasku.
   Przejechanie kursorem po znaku firmowym albo po stopce z kontem nie rozwija panelu.

   Opóźnienia jak u nich: 50 milisekund przed rozwinięciem i 100 przed zwinięciem (u nich
   te same liczby siedzą w `setTimeout`). Bez nich samo przemknięcie kursorem przez pasek
   zapalało i gasiło animację, co widać jako mruganie. */
.nav-menu.collapsed:has(.nav:hover)[b-ura5u6bgn5] {
    width: 265px;
    transition-delay: 0.05s;
}

/* Wyjątek na czas otwartego menu konta stoi w arkuszu globalnym — patrz `app.css`. */

/* W stanie zwiniętym (i bez najechania) zostają same ikony: nazwy i znak firmowy nie
   znikają ze znacznika, tylko tracą szerokość — inaczej ich powrót po najechaniu wymagałby
   przerysowania widoku po stronie serwera.

   Napisy gasną i wracają z animacją, tak jak w UTS (u nich `opacity .25s, width .25s`).
   Bez tego pojawiały się w jednej klatce, w połowie rozjeżdżania się panelu, i wyglądało
   to na mignięcie tekstu. */
.nav-label[b-ura5u6bgn5],
.navbar-brand[b-ura5u6bgn5],
.nav-menu[b-ura5u6bgn5]  .user-info {
    transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out;
}

.nav-menu.collapsed:not(:has(.nav:hover)) .nav-label[b-ura5u6bgn5] {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

/* Znak firmowy w stanie zwiniętym jest wyjęty z rzędu i przypięty do jego lewej krawędzi.
   Gdyby został w rzędzie, wyśrodkowanie zawartości (potrzebne, żeby strzałka stanęła w osi
   paska) ciągnęłoby go w trakcie zwijania na środek — a on ma tylko zniknąć w miejscu. */
.nav-menu.collapsed:not(:has(.nav:hover)) .navbar-brand[b-ura5u6bgn5] {
    position: absolute;
    left: var(--spacing-xl, 16px);
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.nav-menu.collapsed:not(:has(.nav:hover)) .top-row .container-fluid[b-ura5u6bgn5] {
    justify-content: center;
}

/* Pozycje nawigacji mają w obu stanach ten sam układ: wypełnienie 6 na 10 i ikona przy
   lewej krawędzi. Ikona nie przesuwa się więc ani o piksel przy zwijaniu i rozwijaniu —
   zmienia się tylko szerokość napisu i pigułki. Tak samo jest w UTS: zmierzone u nich
   wcięcie pozycji to 17 pikseli od krawędzi paska w obu stanach.
   Wychodzi to na zero przypadkiem, ale wygodnie: przy zwiniętym pasku o szerokości 72
   i wcięciu listy 16 gniazdo ma 40, a ikona w nim ląduje środkiem dokładnie w osi paska.
   Wcześniej stan zwinięty miał własne wypełnienie i wyśrodkowanie zawartości, więc ikona
   przejeżdżała w prawo razem z rozwijaniem panelu i wracała skokiem. */

/* Jedyna rzecz, która zmienia się w pozycji po zwinięciu: odstęp po ikonie. Nazwa ma
   zerową szerokość, ale te osiem pikseli nadal liczyło się do najmniejszej szerokości
   pozycji (20 + 8 + wypełnienie 20 = 48), a pozycja jest tu elementem układu giętkiego
   i nie schodzi pod swoją najmniejszą szerokość — pigułka wychodziła więc o osiem
   pikseli za pasek. Odstępu nie widać, bo dotyczy miejsca za ikoną, więc ikona zostaje
   dokładnie tam, gdzie była. UTS zeruje go u siebie z tego samego powodu. */
.nav-menu.collapsed:not(:has(.nav:hover)) .nav-item[b-ura5u6bgn5]  .nav-link {
    gap: 0;
}

/* Stopka z kontem chowa nazwę i adres tak samo jak nazwy pozycji: zostaje awatar
   wyśrodkowany w osi paska. Wypełnienie stopki jest w obu stanach takie samo (16) —
   przy zmianie na 8 awatar przeskakiwał o osiem pikseli w pionie przy każdym rozwinięciu. */

/* Awatar zostaje na miejscu, tak jak ikony pozycji — bez wyśrodkowywania zawartości
   przycisku, bo przy rosnącym panelu awatar przejeżdżałby w prawo i wracał skokiem.
   Zeruje się tylko odstęp po awatarze; jego szerokość nie ma wpływu na to, gdzie stoi
   sam awatar. */
.nav-menu.collapsed:not(:has(.nav:hover))[b-ura5u6bgn5]  .user-toggle {
    gap: 0;
}

.nav-menu.collapsed:not(:has(.nav:hover))[b-ura5u6bgn5]  .user-info {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

/* Nazwa jezyka chowa sie tak samo jak nazwy pozycji i podpis konta — w zwinietym pasku
   zostaje sama ikona globusa. */
.nav-menu.collapsed:not(:has(.nav:hover))[b-ura5u6bgn5]  .language-toggle {
    gap: 0;
}

.nav-menu.collapsed:not(:has(.nav:hover))[b-ura5u6bgn5]  .language-label {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.navbar-toggler[b-ura5u6bgn5] {
    appearance: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    color: var(--color-white);
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-xl);
    border: none;
    border-radius: var(--radius-md);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem transparent;
    transition: background-color 0.2s ease;
}

.navbar-toggler:hover[b-ura5u6bgn5] {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ura5u6bgn5] {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Blok ze znakiem firmowym: 24 na 16, tak jak `.aside-brand` w UTS. Wysokość z zawartości,
   nie na sztywno — inaczej odstęp pod znakiem zależy od tego, jak wysoki jest sam rysunek. */
.top-row[b-ura5u6bgn5] {
    /* Z `!important`, bo klasa `navbar` z Bootstrapa dokłada tu swoje wypełnienie. */
    padding: var(--spacing-3xl, 24px) var(--spacing-xl, 16px) !important;
    display: flex;
    align-items: center;

    /* Układ odniesienia dla znaku firmowego, który w stanie zwiniętym wychodzi z rzędu. */
    position: relative;

    /* Wysokość na sztywno: 24 + 32 + 24, dokładnie jak `.aside-brand` w UTS. Bez tego
       wiersz rósł razem ze znakiem, który przy rozwijaniu zmienia rozmiar — a wtedy
       strzałka i cała lista pozycji jechały w dół i wracały. */
    height: 80px;
}

/* Kontener w środku nie dokłada własnych marginesów — odstęp od krawędzi paska liczy się
   raz, w `.top-row`. */
.top-row .container-fluid[b-ura5u6bgn5] {
    padding: 0;
}

/* Znak firmowy bierze biel z paska: rysunek jest wpisany w stronę, więc maluje się
   kolorem otoczenia.

   Szerokość podana w pikselach w obu stanach (120 rozwinięty, 0 zwinięty), a rysunek
   w środku bierze 100% z tego miejsca i liczy wysokość z proporcji. Znak rośnie więc
   płynnie razem z panelem, tak jak w UTS — u nich to samo wychodzi z obrazka z
   `max-width: 100%; height: auto`. Przy sztywnej wysokości znak pojawiał się skokiem
   w pełnym rozmiarze. */
.navbar-brand[b-ura5u6bgn5] {
    display: inline-flex;
    align-items: center;
    width: 120px;

    /* Wysokość zablokowana na 32: rysunek rośnie w poprzek, ale nie może rozpychać wiersza
       w pionie. */
    height: 32px;
    overflow: hidden;

    /* Bez wypełnienia z Bootstrapa (5 pikseli u góry i u dołu). */
    padding: 0;
    color: var(--color-white);
    text-decoration: none;
}

.navbar-brand[b-ura5u6bgn5]  .antumo-brand {
    width: 100%;
    height: auto;
    max-height: 100%;
}

/* Przycisk zwijania paska: 32 na 32, jak `.aside-toggler` w UTS. Przy 36 cały wiersz
   ze znakiem był o cztery piksele wyższy, więc odstęp do pierwszej pozycji nawigacji
   wychodził 34 zamiast 32. */
.sidebar-toggle[b-ura5u6bgn5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.sidebar-toggle:hover[b-ura5u6bgn5] {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-toggle svg[b-ura5u6bgn5] {
    color: var(--color-white);
}

.top-row .container-fluid[b-ura5u6bgn5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    /* Bez zawijania: klasa `navbar` z Bootstrapa pozwala łamać wiersz, więc dopóki znak
       nie zmieścił się razem z przyciskiem, przycisk spadał do drugiej linii i przy każdym
       rozwijaniu przeskakiwał w dół i wracał. */
    flex-wrap: nowrap;
}

/* Wypełnienie wiersza ze znakiem jest takie samo w obu stanach (24 na 16, jak w UTS) —
   po zwinięciu zmienia się tylko ułożenie zawartości, żeby przycisk stanął w osi paska.
   Węższe wypełnienie w stanie zwiniętym przesuwało ten przycisk przy każdym rozwinięciu. */



/* Odstępy w liście 1:1 z UTS: dwa piksele między pozycjami, wcięcie boczne szesnaście,
   osiem u góry i u dołu. Dwa, nie cztery z systemu designu — ten liczy na sześć pozycji,
   a przy dłuższej liście rytm robi się rozstrzelony. */
.nav[b-ura5u6bgn5] {
    gap: 2px;
}

/* Pozycja może być węższa od swojej zawartości: przy zwiniętym pasku w gnieździe 40 nie
   mieści się ikona z odstępem po niej (20 + 8 + wypełnienie 20 = 48), a bez `min-width: 0`
   pozycja rozpychała się do tych 48 i pigułka wystawała z paska. Nadmiar jest przycięty
   przez listę, więc widać sam kwadratowy ślad pod ikoną. */
.nav-item[b-ura5u6bgn5] {
    padding: 0;
    min-width: 0;
}

/* Pozycja nawigacji: wysokość 36, wypełnienie 6 na 10, tekst 14 na 20 grubością średnią —
   tak jak w UTS. System designu daje tu 44 i 10, ale UTS ściska to u siebie, bo przy
   dłuższej liście wiersze wyglądały na rozstrzelone.
   Cała pozycja stoi na przezroczystości 0,9 i dochodzi do pełnej na wskazaniu — dlatego
   ikona bierze kolor z tekstu (`inherit`), a nie własny szary: przy dwóch różnych
   kolorach ikona wyglądała na cieńszą od napisu. */
.nav-item[b-ura5u6bgn5]  .nav-link {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--spacing-md, 8px);
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-white);
    opacity: 0.9;
    text-decoration: none;
    font-family: var(--label-md-font-family, var(--font-family-body));
    font-size: var(--label-md-font-size, 14px);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--label-md-line-height, 20px);
    transition: background-color 150ms ease, opacity 150ms ease;
}

/* Grubość kreski ikony dwa, nie półtora z naszej skali rozmiarów: UTS rysuje ikony
   nawigacji domyślną grubością Lucide, więc przy 1,5 nasze wychodziły cieńsze. */
.nav-item[b-ura5u6bgn5]  .nav-link svg {
    color: inherit;
    flex-shrink: 0;
    stroke-width: 2;
}

.nav-item[b-ura5u6bgn5]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    opacity: 1;
}

.nav-item[b-ura5u6bgn5]  a.active {
    /* Pigułka z tokenu, nie biel na przezroczystości: w ciemnym motywie biel dawała
       jaśniejszy odcień niż w UTS, a token trafia w ten sam kolor, co kółko awatara. */
    background-color: var(--color-bg-brand-active);
    opacity: 1;
}

/* Reguły stanu zwiniętego stoją wyżej, przy `.nav-menu.collapsed` — dzięki temu po
   najechaniu myszą na listę pasek wraca do układu rozwiniętego bez drugiego zestawu klas. */

.nav-label[b-ura5u6bgn5] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-scrollable[b-ura5u6bgn5] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ura5u6bgn5] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ura5u6bgn5] {
        display: none;
    }

    /* Nawigacja leży na pasku bocznym i to ona rysuje panel — w obu stanach, nie tylko po
       zwinięciu. Nic w układzie strony od niej nie zależy: miejsce dla treści odmierza
       margines kolumny treści (reguła w arkuszu globalnym), animowany w tym samym czasie
       i z tym samym opóźnieniem, co szerokość nawigacji. Dzięki temu krawędź panelu i
       krawędź treści jadą razem w obie strony. */
    .nav-menu[b-ura5u6bgn5] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background-color: var(--color-bg-brand, var(--color-navy-500));
        border-radius: var(--radius-2xl, 16px);
        box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-border-sidebar, var(--color-navy-500));
    }

    /* Nawigacja bierze tyle, ile zostanie: stopka z kontem stoi pod nią i musi zostać
       w oknie. Przy sztywnej wysokości nawigacji wypadała pod dolną krawędź.

       Szesnaście u góry i u dołu, bo w UTS te odstępy nakładają się na siebie dwa razy:
       osiem daje kontener nawigacji i osiem lista w środku. Stąd odstęp od znaku do
       pierwszej pozycji wychodzi tam 40, a nie 32. */
    .nav-scrollable[b-ura5u6bgn5] {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        padding: var(--spacing-xl, 16px);
        overflow-y: auto;

        /* W poprzek nic nie przewijamy: nazwy pozycji nie łamią się, więc w trakcie
           rozwijania panelu wystawały poza jego szerokość i przeglądarka dokładała na
           chwilę poziomy pasek przewijania — to on migał przy najechaniu. */
        overflow-x: hidden;
    }
}

/* ---------------------------------------------------------------------------
   Grupa w nawigacji (Administracja)
   ---------------------------------------------------------------------------
   Pozycja nadrzędna wygląda jak każda inna — styl bierze z reguły `.nav-link` wyżej —
   więc tutaj zostaje zdjęcie wyglądu przycisku, strzałka po prawej i wcięcie dla pozycji
   podrzędnych. */
.nav-group[b-ura5u6bgn5] {
    display: flex;
    flex-direction: column;
}

.nav-group-toggle[b-ura5u6bgn5] {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.nav-group-chevron[b-ura5u6bgn5] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
}

/* Wcięcie równe ikonie z odstępem (20 + 8) i wypełnieniu pozycji (10) — pozycje podrzędne
   zaczynają się tam, gdzie napisy nadrzędnych, więc kolumna napisów zostaje jedna. */
.nav-group-items[b-ura5u6bgn5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 2px 38px;
}

.nav-group-items[b-ura5u6bgn5]  .nav-sublink {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13px;
    opacity: 0.75;
}

.nav-group-items[b-ura5u6bgn5]  .nav-sublink:hover {
    opacity: 1;
}

.nav-group-items[b-ura5u6bgn5]  a.active {
    opacity: 1;
}

/* W zwiniętym pasku pozycje podrzędne nie mają się gdzie zmieścić: zostaje sama ikona
   grupy, a lista wraca razem z napisami po najechaniu myszą. */
.nav-menu.collapsed:not(:has(.nav:hover)) .nav-group-items[b-ura5u6bgn5] {
    display: none;
}

.nav-menu.collapsed:not(:has(.nav:hover)) .nav-group-chevron[b-ura5u6bgn5] {
    display: none;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-u2q2cvb3tc],
.components-reconnect-repeated-attempt-visible[b-u2q2cvb3tc],
.components-reconnect-failed-visible[b-u2q2cvb3tc],
.components-pause-visible[b-u2q2cvb3tc],
.components-resume-failed-visible[b-u2q2cvb3tc],
.components-rejoining-animation[b-u2q2cvb3tc] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-retrying[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-failed[b-u2q2cvb3tc],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-u2q2cvb3tc] {
    display: block;
}


#components-reconnect-modal[b-u2q2cvb3tc] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-u2q2cvb3tc 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-u2q2cvb3tc 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-u2q2cvb3tc 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-u2q2cvb3tc]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-u2q2cvb3tc 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-u2q2cvb3tc {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-u2q2cvb3tc {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-u2q2cvb3tc {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-u2q2cvb3tc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-u2q2cvb3tc] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-u2q2cvb3tc] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-u2q2cvb3tc] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-u2q2cvb3tc] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-u2q2cvb3tc] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-u2q2cvb3tc] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-u2q2cvb3tc 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-u2q2cvb3tc] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-u2q2cvb3tc {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
/* Stopka paska bocznego: przycisk z awatarem, a nad nim wysuwane menu. Wypełnienie,
   kreska i odstępy 1:1 z `.aside-footer` w UTS. */
.user-footer[b-l7seswpp74] {
    position: relative;
    flex: 0 0 auto;
    margin-top: auto;

    /* Dwanaście, nie szesnaście: razem z ośmioma z przycisku daje to awatar w tej samej
       osi, w której stoją ikony pozycji (44 piksela od krawędzi strony). Przy szesnastu
       awatar stał cztery piksele obok tej osi. */
    padding: var(--spacing-lg, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.user-toggle[b-l7seswpp74] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing-md, 8px);
    padding: var(--spacing-md, 8px);
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-white, #ffffff);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.user-toggle:hover[b-l7seswpp74] {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Kółko awatara w kolorze pigułki otwartej pozycji: biel na przezroczystości bladła
   w ciemnym motywie na prawie czarnym pasku. */
.user-avatar[b-l7seswpp74] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-brand-active, rgba(255, 255, 255, 0.16));
    color: var(--color-white, #ffffff);
}

.user-info[b-l7seswpp74] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2;
}

.user-name[b-l7seswpp74],
.user-email[b-l7seswpp74] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-body);
}

.user-name[b-l7seswpp74] {
    font-size: var(--font-size-xs, 14px);
    font-weight: var(--font-weight-medium, 500);
}

.user-email[b-l7seswpp74] {
    font-size: var(--font-size-2xs, 12px);
    color: rgba(255, 255, 255, 0.7);
}

/* Menu wychodzi w górę, bo przycisk stoi na dole okna. Kotwiczone do lewej krawędzi
   przycisku, cztery piksele nad nim, i szersze od paska — nazwy pozycji nie mieszczą się
   w 265 pikselach razem z ikoną i przełącznikiem. Tak samo jak w UTS. */
.user-menu[b-l7seswpp74] {
    position: absolute;
    bottom: calc(100% + var(--spacing-xs, 4px));
    left: 0;
    z-index: 30;
    display: flex;
    min-width: 280px;
    flex-direction: column;
    padding: var(--spacing-md, 8px) 0;
    border: 1px solid var(--color-border-secondary, #e9eaeb);
    border-radius: var(--radius-xl, 12px);
    background: var(--color-card-bg, #ffffff);
    box-shadow: var(--shadow-lg);
}

/* W ciemnym motywie menu bierze odcień warstwy podniesionej: na kolorze karty zlewało się
   z paskiem, bo pasek jest tam tym samym prawie czarnym. */
[data-theme="dark"] .user-menu[b-l7seswpp74] {
    background: var(--color-bg-tertiary, #22262f);
    border-color: var(--color-border-primary, #373a41);
}

.user-menu-backdrop[b-l7seswpp74] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.user-menu-card[b-l7seswpp74] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg, 12px);
    padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px);
}

.user-menu-avatar[b-l7seswpp74] {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-tertiary, #fafafa);
    color: var(--color-text-secondary, #414651);
}

.user-menu-card-name[b-l7seswpp74] {
    overflow-wrap: anywhere;
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs, 14px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, #181d27);
}

.user-menu-divider[b-l7seswpp74] {
    height: 1px;
    margin: var(--spacing-md, 8px) 0;
    background: var(--color-border-secondary, #e9eaeb);
}

.user-menu-item[b-l7seswpp74] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--spacing-lg, 12px);
    padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px);
    border: none;
    background: transparent;
    color: var(--color-text-primary, #181d27);
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs, 14px);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-menu-item:hover[b-l7seswpp74] {
    background: var(--color-bg-tertiary, #fafafa);
    color: var(--color-text-primary, #181d27);
}

.user-menu-item[b-l7seswpp74]  svg {
    flex: 0 0 auto;
    color: var(--color-text-tertiary, #535862);

    /* Tak jak w nawigacji: grubość kreski jak w UTS, nie z naszej skali rozmiarów. */
    stroke-width: 2;
}

/* Przełącznik motywu: sam kształt, stan bierze z klasy — bez pola wyboru, bo cała
   pozycja menu jest przyciskiem i to ona przyjmuje kliknięcie. */
.user-menu-switch[b-l7seswpp74] {
    display: inline-flex;
    width: 36px;
    height: 20px;
    margin-left: auto;
    flex: 0 0 auto;
    align-items: center;
    padding: 2px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-quaternary, #e9eaeb);
    transition: background-color 0.2s ease;
}

.user-menu-switch.is-on[b-l7seswpp74] {
    background: var(--color-btn-primary-bg, #3a3a66);
}

.user-menu-switch-handle[b-l7seswpp74] {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-white, #ffffff);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease;
}

.user-menu-switch.is-on .user-menu-switch-handle[b-l7seswpp74] {
    transform: translateX(16px);
}

.user-menu-logout[b-l7seswpp74] {
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px) var(--spacing-lg, 12px);
}
/* /Components/Shared/Footer.razor.rz.scp.css */
.app-footer[b-rhhco431ac] {
    padding: var(--spacing-lg, 12px) var(--spacing-4xl, 32px);
}

.footer-content[b-rhhco431ac] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl, 16px);
}

.footer-logo[b-rhhco431ac] {
    flex-shrink: 0;
}

.footer-version[b-rhhco431ac] {
    font-family: var(--body-sm-font-family, var(--font-family-brand));
    font-size: var(--body-sm-font-size, 12px);
    font-weight: var(--body-sm-font-weight, 300);
    line-height: var(--body-sm-line-height, 16px);
    color: var(--color-grey-500, #717680);
}