/* /Components/Layout/AppLayout.razor.rz.scp.css */
.skip-link[b-g6pxe9fs4a] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background-color: var(--color-burgundy);
    color: var(--color-white);
    padding: 0.75rem 1rem;
    border-radius: 0 0 var(--radius-button) 0;
}

.build-version[b-g6pxe9fs4a] {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.build-version strong[b-g6pxe9fs4a] {
    font-weight: 600;
}

.build-version-details summary[b-g6pxe9fs4a] {
    cursor: pointer;
}

.build-version-details code[b-g6pxe9fs4a] {
    display: block;
    margin-top: 0.35rem;
    font-size: inherit;
}

.skip-link:focus[b-g6pxe9fs4a] {
    left: 0;
}

.app-shell[b-g6pxe9fs4a] {
    min-height: 100vh;
    background-color: var(--color-sand);
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
}

/* IU-1 (pakiet UX drugorzędny 26.08.2026): flex-wrap:nowrap jawnie (mimo że to domyślna wartość) —
   ten sam problem co BYW-003 w OperationalLayout.razor.css (nagłówek łamie się na 375px, bo
   przeglądarka woli zawinąć element do nowego wiersza niż go skurczyć). Teraz nagłówek ma trzy
   elementy (wordmark, przełącznik nav, header-actions) zamiast dwóch — ryzyko zawijania rośnie. */
.app-header[b-g6pxe9fs4a] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

/* Review 27.08.2026 (MT-01): logo znika na wąskim ekranie — na mobile nie ma miejsca/potrzeby na
   duży wordmark obok przełącznika nawigacji i menu profilu (patrz media query niżej). */

.wordmark[b-g6pxe9fs4a] {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-burgundy);
    text-decoration: none;
}

.wordmark span[b-g6pxe9fs4a] {
    color: var(--color-coral-text-safe);
}

.nav-toggle-trigger[b-g6pxe9fs4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: var(--button-height);
    min-height: var(--button-height);
    border-radius: var(--radius-button);
    border: 0;
    background-color: transparent;
    color: var(--color-ink);
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.nav-toggle-trigger:hover[b-g6pxe9fs4a] {
    background-color: var(--color-sand);
}

/* Trzy poziome kreski przez box-shadow zamiast nowego wpisu w Icon.razor (poza zakresem tego
   Unitu — Icon.razor to system ikon Staff, dzielony z panelem pracownika). */
.nav-toggle-icon[b-g6pxe9fs4a] {
    display: block;
    width: 1.1rem;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.header-actions[b-g6pxe9fs4a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin-left: auto;
}

/* Review 27.08.2026 (pilotaż MT-01, testy na żywo, doprecyzowane wprost przez usera po dwóch
   błędnych domysłach): rola i e-mail mają być w JEDNEJ LINII, oba na tym samym tle co wcześniej
   miał tylko pill roli, BEZ dużej zewnętrznej ramki wokół całości. flex-direction:row (nie
   column) + jedno wspólne tło/padding/radius na całym .signed-in-user zamiast osobnego stylu
   na .role-badge — .role-badge niżej zostaje już tylko kolorowym pogrubionym tekstem bez
   własnego tła/paddingu, żeby nie dublować tła kontenera.
   flex-wrap:nowrap (nie wrap) — zweryfikowane w przeglądarce: rola+dłuższy e-mail (np.
   "wlasciciel@bywalio.local") razem NIE mieszczą się w 220px panelu, więc "wrap" faktycznie
   łamał je na dwie linie mimo intencji "jedna linia". Zamiast łamania, e-mail dostaje
   ellipsis (patrz niżej) — rola zawsze w pełni widoczna, e-mail przycięty gdy trzeba. */
.signed-in-user[b-g6pxe9fs4a] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-button);
    background-color: var(--color-sand);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

/* min-width:0 jest KONIECZNY — domyślne min-width:auto na elemencie flex uniemożliwia
   skurczenie się poniżej szerokości treści, więc bez tego white-space:nowrap+ellipsis nie miały
   jak zadziałać (ten sam mechanizm co ::deep .shift-context w OperationalLayout.razor.css). */
.signed-in-user strong[b-g6pxe9fs4a] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu[b-g6pxe9fs4a] {
    position: relative;
    flex-shrink: 0;
}

.profile-menu-trigger[b-g6pxe9fs4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--button-height);
    min-height: var(--button-height);
    border-radius: var(--radius-button);
    border: 0;
    background-color: var(--color-white);
    color: var(--color-ink);
    cursor: pointer;
    list-style: none;
}

.profile-menu-trigger[b-g6pxe9fs4a]::-webkit-details-marker {
    display: none;
}

.profile-menu-trigger:hover[b-g6pxe9fs4a] {
    background-color: var(--color-sand);
}

.profile-menu[open] .profile-menu-trigger[b-g6pxe9fs4a] {
    border-color: var(--color-burgundy);
    color: var(--color-burgundy);
}

.profile-menu-panel[b-g6pxe9fs4a] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 220px;
    padding: 1rem;
    border-radius: var(--radius-button);
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.profile-menu-preferences[b-g6pxe9fs4a] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.logout-form[b-g6pxe9fs4a] {
    width: 100%;
}

.logout-button[b-g6pxe9fs4a] {
    width: 100%;
    min-height: var(--button-height);
    min-width: 48px;
    padding: 0 1rem;
    border-radius: var(--radius-button);
    /* var(--color-border) ma tylko ~1.35:1 na białym tle — za mało dla granicy kontrolki
       (WCAG 1.4.11 wymaga 3:1). var(--color-muted) daje >5:1 — ten sam wzorzec co
       OperationalLayout.razor.css .logout-button. */
    border: 1px solid var(--color-muted);
    background-color: var(--color-white);
    color: var(--color-ink);
    font-family: var(--font-ui);
    cursor: pointer;
}

.logout-button:hover[b-g6pxe9fs4a] {
    background-color: var(--color-sand);
}

[b-g6pxe9fs4a] .language-selector {
    display: flex;
    gap: 0.25rem;
}

[b-g6pxe9fs4a] .language-selector-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: var(--radius-button);
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}

[b-g6pxe9fs4a] .language-selector-link:hover {
    background-color: var(--color-sand);
}

[b-g6pxe9fs4a] .language-selector-link.active {
    border-color: var(--color-burgundy);
    color: var(--color-burgundy);
}

/* Review 27.08.2026 (pilotaż MT-01, testy na żywo, doprecyzowane wprost): tło/padding/promień
   przeniesione na .signed-in-user (jeden wspólny "chip" dla roli+e-maila w jednej linii) —
   .role-badge zostaje już tylko kolorowym pogrubionym tekstem, bez własnego tła/paddingu/ramki,
   żeby nie dublować stylu kontenera. */
.signed-in-user > .staff-icon[b-g6pxe9fs4a] {
    flex: 0 0 auto;
    color: var(--color-burgundy);
}

.signed-in-user-details[b-g6pxe9fs4a] {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.signed-in-user-details strong[b-g6pxe9fs4a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-badge[b-g6pxe9fs4a] {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
}

.app-body[b-g6pxe9fs4a] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-backdrop[b-g6pxe9fs4a] {
    display: none;
    padding: 0;
    border: 0;
}
.nav-drawer-header[b-g6pxe9fs4a] {
    display: none;
}
.nav-drawer-close[b-g6pxe9fs4a] {
    display: none;
}

.app-nav[b-g6pxe9fs4a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.75rem;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.nav-item[b-g6pxe9fs4a] {
    display: flex;
    width: 100%;
}

/* Review 27.08.2026 (MT-01, "nie widać jaki widok jest wybrany"): ::deep jest KONIECZNY — <NavLink>
   to komponent frameworkowy (Microsoft.AspNetCore.Components.Routing.NavLink), a Blazor CSS
   isolation nadaje atrybut scope [b-xxxxx] wyłącznie elementom zapisanym BEZPOŚREDNIO w markupie
   TEGO komponentu (AppLayout). Renderowany <a> pochodzi z kodu C# samego NavLink, więc bez ::deep
   reguła .nav-link[b-xxxxx] nigdy nie dopasowywała się do niczego — potwierdzone w przeglądarce
   (getComputedStyle na aktywnym linku zwracał tło rgba(0,0,0,0) mimo class="nav-link active"
   poprawnie ustawionej przez NavLink). Ten sam, nowo znaleziony bug istniał też w
   OperationalLayout.razor.css (naprawiony tym samym commitem) — aktywna pozycja menu nigdy nie
   była wizualnie wyróżniona w ŻADNYM z dwóch layoutów aplikacji. */
/* Review 27.08.2026 (pilotaż MT-01, testy na żywo): white-space:nowrap brakowało tutaj (jest w
   OperationalLayout.razor.css) — "Synchronizacja Wallet" (Operator) zawijał się na dwie linie
   w wąskiej 220px kolumnie sidebaru, kontrastując z sąsiednim jednowierszowym "Firmy" i sprawiając
   wrażenie niespójnego/brzydkiego zaznaczenia aktywnej pozycji. */
[b-g6pxe9fs4a] .nav-link {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-button);
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-ui);
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
}


[b-g6pxe9fs4a] .nav-link:hover {
    background-color: var(--color-sand);
}

[b-g6pxe9fs4a] .nav-link.active {
    background-color: var(--color-sand);
    color: var(--color-burgundy);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--color-burgundy);
}

.app-content[b-g6pxe9fs4a] {
    flex: 1;
    padding: 1.5rem;
}

@media (max-width: 640.98px) {
    .app-header[b-g6pxe9fs4a] {
        padding: 0.75rem 1rem;
    }

    /* Review 27.08.2026 (MT-01): logo znika całkowicie na mobile — burger + menu profilu
       wystarczają jako punkty orientacyjne nagłówka, duży wordmark obok nich zajmował miejsce
       bez potrzeby. .signed-in-user/.role-badge NIE potrzebują już osobnych reguł kompaktowania
       na tym breakpoincie — mieszkają w .profile-menu-panel (stała szerokość 220px niezależnie
       od viewportu), nie w wąskim pasku nagłówka jak poprzednio. */
 /*   .wordmark {
        display: none;
    }
*/
    .app-nav[b-g6pxe9fs4a] {
        display: none;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        flex-direction: column;
        flex-wrap: nowrap;
        width: min(15rem, 86vw);
        padding: 1rem;
        border-right: 1px solid var(--color-border);
        border-bottom: none;
        box-shadow: 0.5rem 0 1.5rem rgba(0, 0, 0, 0.15);
        overflow-y: auto;
    }

    .app-shell.nav-mobile-open .app-nav[b-g6pxe9fs4a] {
        display: flex;
    }

    .app-shell.nav-mobile-open > .nav-backdrop[b-g6pxe9fs4a] {
        position: fixed;
        inset: 0;
        z-index: 25;
        display: block;
        background-color: rgba(0, 0, 0, 0.35);
        cursor: pointer;
    }

    .nav-drawer-close[b-g6pxe9fs4a] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: var(--button-height);
        min-height: var(--button-height);
        padding: 0;
        border: 0;
        border-radius: var(--radius-button);
        background-color: var(--color-white);
        color: var(--color-ink);
        font: inherit;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .nav-drawer-close:hover[b-g6pxe9fs4a] {
        background-color: var(--color-sand);
    }

    .nav-drawer-header[b-g6pxe9fs4a] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .nav-drawer-brand[b-g6pxe9fs4a] {
        color: var(--color-burgundy);
        font-family: var(--font-display);
        font-size: 1.25rem;
        text-decoration: none;
    }

        .nav-drawer-brand span[b-g6pxe9fs4a] {
            color: var(--color-coral-text-safe);
        }
}

@media (min-width: 641px) {
    .app-body[b-g6pxe9fs4a] {
        flex-direction: row;
    }

    .app-nav[b-g6pxe9fs4a] {
        box-sizing: border-box;
        flex-direction: column;
        width: 150px;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
    }

    .app-shell.nav-desktop-collapsed .app-nav[b-g6pxe9fs4a] {
        display: none;
    }
}

*:focus-visible[b-g6pxe9fs4a] {
    outline: 3px solid var(--color-coral-text-safe);
    outline-offset: 2px;
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.skip-link[b-gc6y3axc32] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background-color: var(--color-burgundy);
    color: var(--color-white);
    padding: 0.75rem 1rem;
    border-radius: 0 0 var(--radius-button) 0;
}

.skip-link:focus[b-gc6y3axc32] {
    left: 0;
}

.login-shell[b-gc6y3axc32] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-panel);
}

.login-content[b-gc6y3axc32] {
    flex: 1;
    width: 100%;
}

*:focus-visible[b-gc6y3axc32] {
    outline: 3px solid var(--color-coral-text-safe);
    outline-offset: 2px;
}
/* /Components/Layout/OperationalLayout.razor.rz.scp.css */
.skip-link[b-slvrdseyut] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background-color: var(--color-burgundy);
    color: var(--color-white);
    padding: 0.75rem 1rem;
    border-radius: 0 0 var(--radius-button) 0;
}

.skip-link:focus[b-slvrdseyut] {
    left: 0;
}

.operational-shell[b-slvrdseyut] {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-cream);
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
}

.operational-header[b-slvrdseyut] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.wordmark[b-slvrdseyut] {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-burgundy);
    text-decoration: none;
}

.wordmark span[b-slvrdseyut] {
    color: var(--color-coral-text-safe);
}

.header-actions[b-slvrdseyut] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
}

/* BYW-005: OperationalLayout nie miał w ogóle stylu dla LanguageSelector — renderował się jako
   gołe niebieskie podkreślone <a> (patrz Screenshot 2026-08-18 105754/110236.png "PLUKEN"),
   podczas gdy PublicLayout i AppLayout mają identyczny blok. Skopiowany 1:1 z
   PublicLayout.razor.css (hover na --color-cream, bo .operational-shell ma to samo tło co
   .public-shell — spójne z "wszędzie taki sam"). */
[b-slvrdseyut] .language-selector {
    display: flex;
    gap: 0.25rem;
}

[b-slvrdseyut] .language-selector-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: var(--radius-button);
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}

[b-slvrdseyut] .language-selector-link:hover {
    background-color: var(--color-cream);
}

[b-slvrdseyut] .language-selector-link.active {
    border-color: var(--color-burgundy);
    color: var(--color-burgundy);
}

/* BYW-003/BYW-004: <details>/<summary> jest natywnie "position: relative" nie wymagany, ale
   panel wewnątrz jest position:absolute — bez position:relative tutaj panel pozycjonowałby się
   względem najbliższego innego przodka (operational-header), nie względem przycisku. */
.profile-menu[b-slvrdseyut] {
    position: relative;
    flex-shrink: 0;
}

.profile-menu-trigger[b-slvrdseyut] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--button-height);
    min-height: var(--button-height);
    border-radius: var(--radius-button);
    border: 0;
    background-color: var(--color-white);
    color: var(--color-ink);
    cursor: pointer;
    list-style: none;
}

/* Marker trójkąta domyślnie dodawany przez przeglądarkę do <summary> — ikona "user" już
   komunikuje, że to przycisk rozwijający, drugi wizualny wskaźnik obok niego byłby szumem. */
.profile-menu-trigger[b-slvrdseyut]::-webkit-details-marker {
    display: none;
}

.profile-menu-trigger:hover[b-slvrdseyut] {
    background-color: var(--color-cream);
}

.profile-menu[open] .profile-menu-trigger[b-slvrdseyut] {
    border-color: var(--color-burgundy);
    color: var(--color-burgundy);
}

.profile-menu-panel[b-slvrdseyut] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 250px;
    padding: 1rem;
    border-radius: var(--radius-button);
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.profile-menu-identity[b-slvrdseyut] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    overflow-wrap: break-word;
}

.profile-menu-role[b-slvrdseyut] {
    color: var(--color-muted);
    font-weight: 600;
}

.profile-menu-context[b-slvrdseyut] {
    padding: 0.75rem;
    border-radius: var(--radius-button);
    background-color: var(--color-cream);
}

.profile-menu-context[b-slvrdseyut]  .shift-context {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

.profile-menu-context[b-slvrdseyut]  .shift-context-separator {
    display: none;
}

.profile-menu-context[b-slvrdseyut]  .shift-context-program {
    margin-inline-start: 0;
}

.profile-menu-row[b-slvrdseyut] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ShiftContextBadge nie ma własnego pliku CSS, dlatego styl renderowanych przez niego elementów
   przechodzi przez ::deep. W menu profilu szczegóły kontekstu mają pełną szerokość. */
[b-slvrdseyut] .shift-context {
    min-width: 0;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[b-slvrdseyut] .shift-context-location {
    font-weight: 600;
    color: var(--color-ink);
}

[b-slvrdseyut] .shift-context-separator,
[b-slvrdseyut] .shift-context-program {
    margin-inline-start: 0.4rem;
}

[b-slvrdseyut] .shift-context-separator {
    color: var(--color-border);
}

.logout-form[b-slvrdseyut] {
    width: 100%;
}

.logout-button[b-slvrdseyut] {
    width: 100%;
    min-height: var(--button-height);
    min-width: 48px;
    padding: 0 1rem;
    border-radius: var(--radius-button);
    /* var(--color-border) ma tylko ~1.35:1 na białym tle — za mało dla granicy kontrolki
       (WCAG 1.4.11 wymaga 3:1). var(--color-muted) daje >5:1. */
    border: 1px solid var(--color-muted);
    background-color: var(--color-white);
    color: var(--color-ink);
    font-family: var(--font-ui);
    cursor: pointer;
}

.operational-content[b-slvrdseyut] {
    flex: 1;
    padding: 1rem;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

/* BYW-006: stała max-width 480px niezależnie od viewportu — na tablecie/desktopie panel
   pracownika był ciasny i nie skalował się wcale (spójne z breakpointem AppLayout.razor.css,
   @media (min-width: 641px), rozszerzone o dwa dodatkowe punkty z Weryfikacji tego Unitu:
   tablet 768px i desktop 1280px). */
@media (min-width: 768px) {
    .operational-header[b-slvrdseyut] {
        padding: 1rem 1.5rem;
    }

    .operational-content[b-slvrdseyut] {
        max-width: 720px;
        padding: 1.5rem;
    }
}

@media (min-width: 1280px) {
    .operational-content[b-slvrdseyut] {
        max-width: 960px;
        padding: 2rem;
    }
}

/* Skaner jest jedynym widokiem operacyjnym, którego podstawową treścią jest obraz kamery.
   Zdejmuje ograniczenia tylko wtedy, gdy właściwa strona renderuje .scan-shell; inne strony
   zachowują maksymalną szerokość i wygodne odstępy z reguł powyżej. `:has()` jest obsługiwane
   przez aktualne przeglądarki na urządzeniach mobilnych i desktopowych, dla których dostępna jest
   kamera w przeglądarce. */
.operational-content:has(.scan-shell)[b-slvrdseyut] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

*:focus-visible[b-slvrdseyut] {
    outline: 3px solid var(--color-coral-text-safe);
    outline-offset: 2px;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.skip-link[b-verthsnafg] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background-color: var(--color-burgundy);
    color: var(--color-white);
    padding: 0.75rem 1rem;
    border-radius: 0 0 var(--radius-button) 0;
}

.skip-link:focus[b-verthsnafg] {
    left: 0;
}

.public-shell[b-verthsnafg] {
    min-height: 100vh;
    background-color: var(--color-cream);
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
}

.public-header[b-verthsnafg] {
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

[b-verthsnafg] .language-selector {
    display: flex;
    gap: 0.25rem;
}

[b-verthsnafg] .language-selector-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: var(--radius-button);
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}

[b-verthsnafg] .language-selector-link:hover {
    background-color: var(--color-cream);
}

[b-verthsnafg] .language-selector-link.active {
    border-color: var(--color-burgundy);
    color: var(--color-burgundy);
}

.wordmark[b-verthsnafg] {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--color-burgundy);
    text-decoration: none;
}

.wordmark span[b-verthsnafg] {
    color: var(--color-coral-text-safe);
}

.public-content[b-verthsnafg] {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1.25rem 3rem;
}

*:focus-visible[b-verthsnafg] {
    outline: 3px solid var(--color-coral-text-safe);
    outline-offset: 2px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7jpsopdv6j],
.components-reconnect-repeated-attempt-visible[b-7jpsopdv6j],
.components-reconnect-failed-visible[b-7jpsopdv6j],
.components-pause-visible[b-7jpsopdv6j],
.components-resume-failed-visible[b-7jpsopdv6j],
.components-rejoining-animation[b-7jpsopdv6j] {
    display: none;
}

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


#components-reconnect-modal[b-7jpsopdv6j] {
    background-color: var(--surface-card);
    color: var(--text-body);
    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-7jpsopdv6j 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-7jpsopdv6j] {
    border: 0;
    background-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-7jpsopdv6j] {
        filter: brightness(85%);
    }

    #components-reconnect-modal button:active[b-7jpsopdv6j] {
        filter: brightness(70%);
    }

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

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

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

@keyframes components-rejoining-animation-b-7jpsopdv6j {
    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/Pages/Auth/Login.razor.rz.scp.css */
.login-grid[b-yvr1009mg2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.login-marketing[b-yvr1009mg2] {
    position: relative;
    background: var(--color-burgundy);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
    overflow: hidden;
}

.login-marketing-image[b-yvr1009mg2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.wordmark[b-yvr1009mg2] {
    font-family: var(--font-display);
    text-decoration: none;
}

.wordmark span[b-yvr1009mg2] {
    color: var(--color-coral-text-safe);
}

.login-marketing .wordmark[b-yvr1009mg2] {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-display);
    color: var(--text-on-brand);
}

.wordmark-mobile[b-yvr1009mg2] {
    display: none;
}

.login-marketing-copy[b-yvr1009mg2] {
    position: relative;
    z-index: 1;
    color: var(--text-on-brand);
}

.login-marketing-copy h1[b-yvr1009mg2] {
    font-family: var(--font-ui);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    max-width: 26ch;
}

.login-marketing-copy p[b-yvr1009mg2] {
    font-family: var(--font-ui);
    font-size: 1rem;
    margin: 0;
    max-width: 32ch;
    color: color-mix(in srgb, var(--text-on-brand) 85%, transparent);
}

.login-form-panel[b-yvr1009mg2] {
    position: relative;
    background: var(--surface-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.login-form-card[b-yvr1009mg2] {
    width: 100%;
    max-width: 440px;
}

.login-form-card h1[b-yvr1009mg2] {
    font-family: var(--font-ui);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    color: var(--text-body);
}

.login-form-card form[b-yvr1009mg2] {
    margin-top: 1rem;
}

.login-forgot-link[b-yvr1009mg2] {
    text-align: right;
    margin: 0.5rem 0 1.25rem;
}

.login-forgot-link a[b-yvr1009mg2] {
    font-size: 0.9rem;
    font-family: var(--font-ui);
    color: var(--color-burgundy);
    text-decoration: none;
}

.login-forgot-link a:hover[b-yvr1009mg2] {
    text-decoration: underline;
}

[b-yvr1009mg2] .staff-button[type="submit"] {
    width: 100%;
    min-width: 0;
}

.login-lang-row[b-yvr1009mg2] {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

[b-yvr1009mg2] .language-selector {
    display: flex;
    gap: 0.25rem;
}

[b-yvr1009mg2] .language-selector-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: var(--radius-button);
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
}

[b-yvr1009mg2] .language-selector-link:hover {
    background-color: var(--surface-panel);
}

[b-yvr1009mg2] .language-selector-link.active {
    border-color: var(--color-burgundy);
    color: var(--color-burgundy);
}

@media (min-width: 801px) {
    .login-form-panel[b-yvr1009mg2] {
        justify-content: center;
        align-items: flex-start;
        padding-left: clamp(1.5rem, 6vw, 3rem);
        padding-right: clamp(1.5rem, 6vw, 3rem);
    }

    .login-form-card[b-yvr1009mg2] {
        transform: translateY(-28px);
    }
}

@media (max-width: 800px) {
    .login-grid[b-yvr1009mg2] {
        display: block;
        min-height: 0;
    }

    .login-marketing[b-yvr1009mg2] {
        height: clamp(240px, 34vh, 320px);
        padding: 1.5rem;
        justify-content: flex-end;
    }

    .login-marketing-image[b-yvr1009mg2] {
        opacity: 0.55;
    }

    .login-marketing[b-yvr1009mg2]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            color-mix(in srgb, var(--color-burgundy) 92%, transparent),
            color-mix(in srgb, var(--color-burgundy) 35%, transparent) 70%
        );
    }

    .login-marketing-copy h1[b-yvr1009mg2] {
        font-size: 1.4rem;
    }

    .wordmark-desktop[b-yvr1009mg2] {
        display: none;
    }

    .wordmark-mobile[b-yvr1009mg2] {
        display: block;
        margin-bottom: 0.15rem;
        text-align: center;
        font-size: calc(var(--font-size-display) * 0.87);
        color: var(--color-burgundy);
    }

    .login-form-panel[b-yvr1009mg2] {
        padding: 0;
        align-items: stretch;
        display: flow-root;
    }

    .login-form-card[b-yvr1009mg2] {
        background: var(--surface-panel);
        border-radius: 24px 24px 0 0;
        padding: 1.5rem 1.5rem 2.5rem;
        max-width: none;
        width: 100%;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }

    .login-form-card h1[b-yvr1009mg2] {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .login-forgot-link[b-yvr1009mg2] {
        text-align: left;
        margin: 0.35rem 0 1rem;
    }

}
/* /Components/Pages/ConfirmRegistration.razor.rz.scp.css */
/* Widok "Karta jest gotowa" (mockup 27.08.2026) — przeniesiony z Register.razor przy wydzieleniu
   trasy /register/confirm do statycznego SSR. Świadomie nie używa <Card>/<Alert> — patrz komentarz
   w ConfirmRegistration.razor przy .success-card. */

.register-title[b-sku9xkmyl3] {
    font-family: var(--font-display);
    color: var(--color-burgundy);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.register-copy[b-sku9xkmyl3] {
    font-family: var(--font-ui);
    color: var(--color-ink);
    margin-bottom: 1rem;
}

.wallet-unavailable[b-sku9xkmyl3] {
    font-family: var(--font-ui);
    color: var(--color-muted);
    font-size: 0.9rem;
}

.success-card[b-sku9xkmyl3] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 60px 52px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 26px;
    box-shadow: 0 12px 35px rgba(50, 30, 10, 0.04);
    text-align: center;
}

.success-icon[b-sku9xkmyl3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 32px;
    border-radius: 50%;
    background-color: var(--color-sage);
    color: var(--color-white);
    /* Bardzo subtelne, płaskie halo (bez blur/glow) — spójne z "spokojnym" charakterem widoku. */
    box-shadow: 0 0 0 10px rgba(101, 113, 84, 0.08);
}

.success-icon svg[b-sku9xkmyl3] {
    width: 28px;
    height: 28px;
}

.success-headline[b-sku9xkmyl3] {
    font-family: var(--font-display);
    color: var(--color-burgundy);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 14px;
}

.success-subtext[b-sku9xkmyl3] {
    font-family: var(--font-ui);
    color: var(--color-ink);
    font-size: 19px;
    font-weight: 500;
    margin: 0 0 20px;
}

.success-description[b-sku9xkmyl3] {
    font-family: var(--font-ui);
    color: var(--color-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 420px;
    margin: 0 auto 40px;
}

/* Desktop/tablet: Apple i Google Wallet w jednym poziomym rzędzie, wyśrodkowanym jako całość
   (nie każdy przycisk osobno) — mockup 27.08.2026 (wersja 2, poziomy layout Wallet). */
.wallet-buttons[b-sku9xkmyl3] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.wallet-action-button[b-sku9xkmyl3] {
    display: inline-flex;
}

/* Apple Wallet jest oficjalnym, niemodyfikowalnym assetem i punktem odniesienia dla wysokości —
   Google Wallet jest dopasowywany DO NIEGO (ta sama wysokość, swobodna szerokość wg naturalnych
   proporcji jego własnego assetu: Apple ok. 3.35:1, Google ok. 6.4:1), nigdy odwrotnie. Oba obrazy
   skalowane WYŁĄCZNIE jako całość (proporcjonalnie) — żadna ingerencja w SVG/kolory/tekst/ikony. */
.wallet-action-button img[b-sku9xkmyl3] {
    display: block;
    height: 48px;
    width: auto;
}

@media (max-width: 599.98px) {
    /* Mobile: brak miejsca na dwa CTA obok siebie bez ściskania Apple Wallet poniżej czytelnego
       rozmiaru — layout automatycznie wraca do układu pionowego, każdy badge ograniczony
       szerokością (nie wysokością), żeby nigdy nie wyjść poza card.

       Szerokość MUSI być ustawiona na .wallet-action-button (wrapper <a>), nie tylko na <img> —
       <a> jest inline-flex bez własnej zdefiniowanej szerokości, więc procentowe `width` na samym
       obrazku nie miało się do czego odnieść. */
    .wallet-action-button[b-sku9xkmyl3] {
        width: 100%;
        max-width: 220px;
    }

    .wallet-buttons[b-sku9xkmyl3] {
        flex-direction: column;
        gap: 14px;
    }

    .wallet-action-button img[b-sku9xkmyl3] {
        display: block;
        height: auto;
        width: 100%;
    }
}

.success-recovery-link[b-sku9xkmyl3] {
    margin-top: 40px;
    text-align: center;
    font-family: var(--font-ui);
    color: var(--color-muted);
    font-size: 1rem;
}

.success-recovery-link a[b-sku9xkmyl3] {
    color: var(--color-burgundy);
    text-decoration: underline;
    font-weight: 600;
}

@media (max-width: 599.98px) {
    .success-card[b-sku9xkmyl3] {
        padding: 36px 20px 40px;
        border-radius: 22px;
    }

    .success-icon[b-sku9xkmyl3] {
        width: 60px;
        height: 60px;
        margin-bottom: 26px;
    }

    .success-icon svg[b-sku9xkmyl3] {
        width: 24px;
        height: 24px;
    }

    .success-headline[b-sku9xkmyl3] {
        font-size: 28px;
    }

    .success-subtext[b-sku9xkmyl3] {
        font-size: 17px;
    }

    .success-description[b-sku9xkmyl3] {
        font-size: 16px;
    }

    .success-recovery-link[b-sku9xkmyl3] {
        margin-top: 32px;
    }
}
/* /Components/Pages/Employee/AccountActions.razor.rz.scp.css */
/* IU-5 (BYW-26.08.2026 #15, P2): "licznik pieczątek" (saldo + próg nagrody) musi być wyraźnie
   widoczny, pogrubiony, wizualnie wyróżniony i po lewej stronie — dotąd był zwykłym <p> bez
   żadnego akcentu. font-weight:700 (bold, nie tylko --font-weight-semibold:600) + var(--text-brand)
   (burgundy, >4.5:1 na --surface-card/--color-cream w obu motywach) + font-size:lead. text-align
   left jest jawny mimo że to i tak domyślne zachowanie bloku — dokumentuje wymaganie z manual testu. */
.stamp-counter[b-elhoutgski] {
    display: block;
    text-align: left;
    font-weight: 700;
    font-size: var(--font-size-lead);
    color: var(--text-brand);
}

.customer-summary[b-elhoutgski] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.customer-identity[b-elhoutgski] {
    min-width: 0;
}

.customer-identity h2[b-elhoutgski],
.customer-identity p[b-elhoutgski] {
    margin: 0 0 0.25rem;
}

/* Bootstrap's muted utility resolves to a low-contrast dark-theme color here.
   Keep this account-detail text on the application's semantic muted-text token. */
.account-dialog .customer-identity .text-muted[b-elhoutgski] {
    color: var(--text-muted) !important;
}

.customer-program-name[b-elhoutgski] {
    color: var(--color-muted);
    font-family: var(--font-ui);
    font-weight: 600;
}

.transaction-correction[b-elhoutgski] {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.transaction-correction-actions[b-elhoutgski] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.customer-status[b-elhoutgski] {
    flex: 0 0 auto;
    min-width: 9rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-cream);
}

.customer-status .stamp-counter[b-elhoutgski] {
    margin: 0;
}

.customer-reward-ready[b-elhoutgski] {
    margin: 0.35rem 0 0;
    color: var(--color-success-text, var(--color-ink));
    font-family: var(--font-ui);
    font-weight: 700;
}

/* Desktop/tablet: saldo ma własną, responsywną kolumnę. Dzięki temu długie dane klienta nie
   ściskają kontrolki punktów, a wartości liczbowe nie zmieniają szerokości przy naliczeniu. */
@media (min-width: 481px) {
    .customer-summary[b-elhoutgski] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(12rem, 35%, 15rem);
        align-items: start;
    }

    .customer-status[b-elhoutgski] {
        min-width: 0;
    }

    .customer-status .stamp-counter[b-elhoutgski] {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .customer-summary[b-elhoutgski] {
        flex-direction: column;
    }

    .customer-status[b-elhoutgski] {
        min-width: 0;
    }
}

/* Toast dialogowy jest warstwą absolutną nad oknem, a nie elementem zwykłego flow. To zachowuje
   stałe położenie danych klienta i stopki niezależnie od tego, czy komunikat jest widoczny. */
.account-actions-dialog-toast[b-elhoutgski] {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    transform: translateY(calc(-100% - 0.75rem));
    pointer-events: none;
}

.account-actions-dialog-toast[b-elhoutgski]  .staff-toast-stack {
    position: static;
    align-items: center;
    margin: 0;
}

.account-actions-dialog-toast[b-elhoutgski]  .staff-toast {
    pointer-events: auto;
}

/* BYW-004: gap w kontenerze flex, nie marginesy na pojedynczych przyciskach. */
.account-actions-primary[b-elhoutgski] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0;
}

[b-elhoutgski] .account-actions-primary .staff-alert {
    width: 100%;
    box-sizing: border-box;
}

.account-actions-confirm[b-elhoutgski] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Faza 8 (BYW-012): trzy sekcje wewnątrz <dialog> Scan.razor (.account-dialog, zob.
   Scan.razor.css) — header/footer flex-shrink: 0 (nie przewijają się), środek flex: 1 +
   overflow-y: auto (jedyna scrollowalna część). Zwykły flex column w rodzicu (nie
   position: sticky) — prostsze, wystarcza bo header/footer są rodzeństwem scrollowalnego
   środka, nie jego dziećmi. */
.account-actions-dialog-header[b-elhoutgski] {
    flex: 0 0 auto;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.account-actions-dialog-header h2[b-elhoutgski],
.account-actions-dialog-header p[b-elhoutgski] {
    margin: 0 0 0.25rem;
}

.account-actions-dialog-scroll[b-elhoutgski] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 0;
}

.account-actions-dialog-scroll h3[b-elhoutgski] {
    margin-top: 0;
}

/* BYW-012: nowrap (nie wrap — zob. notatka z Fazy 3 w panel-pracownika-poprawki-19-08-zadania.md
   o algorytmie flex-wrap wybierającym elementy per linia PRZED skurczeniem) + flex: 1 1 0 na
   każdym przycisku, żeby wszystkie trzy skurczyły się równo i zmieściły w jednym rzędzie na
   375px zamiast łamać się do drugiego wiersza. */
.account-actions-dialog-footer[b-elhoutgski] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.account-actions-dialog-footer[b-elhoutgski]  .staff-button {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
/* /Components/Pages/Employee/CustomerSearchDialog.razor.rz.scp.css */
.customer-search-dialog[b-k762x1m1l2] {
    width: 100%;
    max-width: 480px;
    margin: 2rem auto auto;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background-color: var(--color-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.customer-search-dialog[b-k762x1m1l2]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.customer-search-dialog-header[b-k762x1m1l2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.customer-search-dialog-header h2[b-k762x1m1l2] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.customer-search-dialog-close[b-k762x1m1l2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--button-height);
    min-height: var(--button-height);
    border: none;
    background: none;
    color: var(--color-ink);
    cursor: pointer;
    border-radius: var(--radius-button);
}

.customer-search-dialog-close:hover[b-k762x1m1l2] {
    background-color: var(--color-cream);
}

.customer-search-dialog-close:focus-visible[b-k762x1m1l2] {
    outline: 3px solid var(--color-coral-text-safe);
    outline-offset: 2px;
}

.customer-search-dialog[b-k762x1m1l2]  .staff-list-group-item {
    gap: 0;
    padding: 0;
}

.customer-search-dialog[b-k762x1m1l2]  .staff-list-group-item-content {
    width: 100%;
}

.customer-search-result-button[b-k762x1m1l2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-button);
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.customer-search-result-button:hover[b-k762x1m1l2] {
    background-color: var(--surface-raised);
}

.customer-search-result-copy[b-k762x1m1l2] {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.customer-search-result-primary[b-k762x1m1l2] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
}

.customer-search-result-primary > span[b-k762x1m1l2] {
    white-space: nowrap;
}

.customer-search-result-email[b-k762x1m1l2] {
    display: block;
}

.customer-search-result-button:focus-visible[b-k762x1m1l2] {
    outline: 3px solid var(--color-coral-text-safe);
    outline-offset: 2px;
    border-radius: var(--radius-button);
}

@media (max-width: 640px) {
    .customer-search-dialog[b-k762x1m1l2] {
        margin: 1rem;
        max-width: none;
        width: calc(100% - 2rem);
    }
}

/* RQ-007: sentinel infinite scroll — bez treści, wysokość nadana celowo (0-wysokościowy div ma
   nadal miejsce w layoucie, ale bezpieczniej dać IntersectionObserver coś mierzalnego niż polegać
   na brzegowym przypadku). */
.customer-search-scroll-sentinel[b-k762x1m1l2] {
    height: 1px;
}
/* /Components/Pages/Employee/Scan.razor.rz.scp.css */
/* Kontener głównej powierzchni skanera. */
/* ZASADA KADRU: .scan-camera jest jedyną powierzchnią, na której skaner cokolwiek pokazuje.
   Komunikaty i przycisk wyszukiwania są jej absolutnymi dziećmi, więc nigdy nie zmieniają
   wysokości podglądu. To właśnie ta zmiana wysokości wypychała treść poza kadr na mobile i
   zostawiała żółtą ramkę celownika z qr-scanner.min.js na nieaktualnych współrzędnych
   (jej _updateOverlay() nie reaguje na re-render Blazora). */
.scan-shell[b-3mxgp7uxcf] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.scan-camera[b-3mxgp7uxcf] {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
}

/* Izoluje <video> razem z overlayem, który qr-scanner.min.js wstrzykuje pod video.nextSibling.
   position: relative sprawia, że video.offsetParent i containing block tego overlaya to ten sam
   element, więc geometria celownika liczona z video.offsetLeft/offsetTop pozostaje spójna. */
.scan-stage[b-3mxgp7uxcf] {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--color-ink);
}

.scan-video[b-3mxgp7uxcf] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pasek komunikatów u góry kadru. Kontener nie łapie zdarzeń, żeby pusty overlay nie przechwytywał
   dotknięć obrazu — alert i jego przyciski włączają je z powrotem. */
.scan-overlay[b-3mxgp7uxcf] {
    position: absolute;
    z-index: 2;
    inset-block-start: 0;
    inset-inline: 0;
    padding: 0.75rem;
    pointer-events: none;
}

.scan-overlay[b-3mxgp7uxcf]  .staff-alert,
.scan-overlay[b-3mxgp7uxcf]  .staff-button {
    pointer-events: auto;
}

/* Alert leży na obrazie kamery, nie na kremowym tle strony — .staff-alert ma nieprzezroczyste
   var(--surface-card), a cień odcina go od dowolnej treści w kadrze. Wzorzec ::deep taki sam jak
   w .manual-search-action niżej (::deep PO selektorze rodzica, nie przed — patrz 9550d76). */
.scan-overlay[b-3mxgp7uxcf]  .staff-alert {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

/* Fallback jest częścią obrazu kamery, nie osobnym wierszem strony. W dolnej części nie zakrywa
   środkowego obszaru skanowania QR. */
.manual-search-action[b-3mxgp7uxcf] {
    position: absolute;
    z-index: 1;
    inset-block-end: 1rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin: 0;
}

/* Skaner wypełnia cały obszar roboczy pod nagłówkiem. QrScanner liczy overlay na podstawie
   geometrii <video>, więc .scan-stage i video mają dokładnie ten sam rozmiar. `cover` chroni
   przed deformacją obrazu, gdy urządzenie zwróci strumień o innej proporcji niż viewport. */

.manual-search-action[b-3mxgp7uxcf]  .staff-button-ghost {
    min-width: min(16rem, calc(100vw - 2rem));
    border-color: var(--color-muted);
    color: var(--color-ink);
    background-color: color-mix(in srgb, var(--color-white) 70%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.manual-search-action[b-3mxgp7uxcf]  .staff-button-ghost:hover:not(:disabled) {
    background-color: var(--surface-raised);
}

/* BYW-012 (Faza 8): dialog obsługi konta — otwierany po skanie QR LUB wyborze z wyszukiwania.
   Wzorzec chrome (border/backdrop/sizing) taki sam jak CustomerSearchDialog.razor.css, ale
   szerszy (640px) i wyższy (max-height ograniczone do viewportu), bo treść (transakcje) rośnie.
   flex column + max-height sprawia, że sticky header/footer w AccountActions.razor.css (flex:
   0 0 auto) i scrollowalny środek (flex: 1 1 auto, overflow-y: auto) faktycznie dzielą się
   przestrzenią, zamiast dialog rosnąć bez ograniczeń. */
.account-dialog[b-3mxgp7uxcf] {
    position: relative;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: min(80vh, 720px);
    margin: 5rem auto auto;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background-color: var(--color-white);
    color: var(--text-body);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: visible;
}

/* Natywna reguła przeglądarki ukrywa <dialog> bez atrybutu open. display:flex ustawione
   bezwarunkowo nadpisywało ją, przez co zamknięty dialog nadal zajmował miejsce w layoucie. */
.account-dialog[open][b-3mxgp7uxcf] {
    display: flex;
}

.account-dialog[b-3mxgp7uxcf]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

@media (max-width: 640px) {
    /* `vh` na iOS może obejmować przestrzeń zasłoniętą przez zmienny chrome Safari. Dynamiczny
       viewport oraz marginesy safe-area gwarantują, że flexowa stopka AccountActions (Dodaj,
       Nagroda, Zamknij) pozostanie w widocznym obszarze, a środek dialogu będzie się przewijał.
       box-sizing wyżej wlicza padding i obramowanie do max-height. */
    .account-dialog[b-3mxgp7uxcf] {
        margin: max(0.75rem, env(safe-area-inset-top)) 1rem max(0.75rem, env(safe-area-inset-bottom));
        max-width: none;
        max-height: min(85dvh, 720px);
        width: calc(100% - 2rem);
    }

    /* Ręczne wyszukiwanie pozostaje nad dolnym obszarem gestów i jest trochę wyżej niż na
       desktopie, bez zmiany geometrii kadru kamery. */
    .manual-search-action[b-3mxgp7uxcf] {
        inset-block-end: max(1.5rem, calc(1rem + env(safe-area-inset-bottom)));
    }
}
/* /Components/Pages/Operator/ProgramDetails.razor.rz.scp.css */
/* Strefa operacji nieodwracalnej (usunięcie programu). Odpowiednik `mt-5 border border-danger
   rounded p-3` z Bootstrapa, ale w kolorystyce marki — ten sam odcień, którym TenantDetails
   oznacza swoją strefę usunięcia, żeby obie wyglądały tak samo. Nie wydzielone do wspólnego
   komponentu: dwa użycia prostego boxu nie uzasadniają nowej abstrakcji (coding-rules §3). */
.operator-danger-zone[b-2bdwn3pr3x] {
    margin-top: 3rem;
    padding: 1rem;
    border: 1px solid var(--color-coral-text-safe);
    border-radius: var(--radius-card);
}

.operator-danger-zone h2[b-2bdwn3pr3x] {
    margin-top: 0;
    font-size: 1.25rem;
    color: var(--color-coral-text-safe);
}
/* /Components/Pages/Operator/StampStripSettings.razor.rz.scp.css */
.stamp-strip-settings[b-wp5pleb483] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.stamp-strip-hint[b-wp5pleb483],
.stamp-strip-preview figcaption[b-wp5pleb483] {
    color: var(--color-muted);
}

.stamp-strip-control[b-wp5pleb483] {
    display: flex;
    gap: .625rem;
    align-items: center;
    margin: 1rem 0;
}

.stamp-strip-checkbox[b-wp5pleb483] {
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

.stamp-strip-preview[b-wp5pleb483] {
    max-width: 516px;
    margin: 1.25rem 0;
}

.stamp-strip-preview img[b-wp5pleb483] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.stamp-strip-preview figcaption[b-wp5pleb483] {
    margin-top: .5rem;
    font-size: .875rem;
}
/* /Components/Pages/Operator/TenantDetails.razor.rz.scp.css */
/* Review 27.08.2026 (pilotaż MT-01, testy na żywo): pięć sekcji strony (dane firmy, właściciele,
   lokalizacje, programy, strefa usunięcia) renderowało się jedna pod drugą na jednej długiej
   stronie — "wszystko nawalone". Prosty, lokalny pasek zakładek (bez nowego współdzielonego
   komponentu — YAGNI, żadna inna strona jeszcze tego nie potrzebuje) przełącza widoczną sekcję
   przez zwykłe pole @code, bez JS interop (Blazor Server round-trip jest tu tani). */
.tenant-tabs[b-1ngq0lzi12] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.tenant-tab[b-1ngq0lzi12] {
    border: none;
    background: none;
    padding: 0.65rem 1rem;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tenant-tab:hover[b-1ngq0lzi12] {
    color: var(--color-ink);
}

.tenant-tab.active[b-1ngq0lzi12] {
    color: var(--color-burgundy);
    border-bottom-color: var(--color-burgundy);
}

/* Zakładka "usuń firmę" osobno oznaczona kolorem nawet gdy nieaktywna — to jedyna akcja
   niszcząca na tej stronie, warto ją odróżnić już na poziomie paska zakładek. */
.tenant-tab-danger[b-1ngq0lzi12] {
    color: var(--color-coral-text-safe);
}

.tenant-tab-danger.active[b-1ngq0lzi12] {
    color: var(--color-coral-text-safe);
    border-bottom-color: var(--color-coral-text-safe);
}

.tenant-tab:focus-visible[b-1ngq0lzi12] {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Nagłówek sekcji wewnątrz zakładki ("Dodaj właściciela", "Dodaj lokalizację"). Wcześniej
   `h5 mt-4` z Bootstrapa; po migracji na system Staff (ADR-008) rozmiar i odstęp należą do
   tej strony, bo żadna inna nie ma sekcji wewnątrz zakładki. */
.operator-section-heading[b-1ngq0lzi12] {
    margin: 2rem 0 1rem;
    font-size: 1.05rem;
}

/* Pasek akcji nad tabelą (przycisk "Nowy program") — wyrównanie do prawej bez klas Bootstrapa. */
.operator-section-actions[b-1ngq0lzi12] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Strefa operacji nieodwracalnej. Odpowiednik `border border-danger rounded p-3` z Bootstrapa,
   ale w kolorystyce marki — ten sam odcień, którym oznaczona jest zakładka `.tenant-tab-danger`,
   żeby ostrzeżenie było spójne od paska zakładek po samą sekcję. */
.operator-danger-zone[b-1ngq0lzi12] {
    padding: 1rem;
    border: 1px solid var(--color-coral-text-safe);
    border-radius: var(--radius-card);
}
/* /Components/Pages/Operator/WalletSyncStatus.razor.rz.scp.css */
/* Migracja z surowego Bootstrapa (`row`/`col-auto`/`card p-3`/`text-muted`/`fs-3`/`small`) na
   system Staff (ADR-008). Dwa kafelki liczbowe to jedyne takie użycie w aplikacji — panel
   Właściciela ma własne `dashboard-kpi` w Dashboard.razor.css — więc reguły zostają scoped
   zamiast wchodzić do globalnego staff-components.css (coding-rules §3: bez abstrakcji na zapas). */

.wallet-sync-description[b-3rhcg7f40x] {
    margin: 0 0 1.5rem;
    color: var(--text-muted);
}

.wallet-readiness[b-3rhcg7f40x] {
    margin-bottom: 2rem;
}

.wallet-readiness h2[b-3rhcg7f40x] {
    margin: 0;
    font-size: 1.25rem;
}

.wallet-readiness-status[b-3rhcg7f40x] {
    font-weight: 600;
}

.wallet-sync-stats[b-3rhcg7f40x] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wallet-sync-stat[b-3rhcg7f40x] {
    min-width: 12rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--surface-card);
}

.wallet-sync-stat-label[b-3rhcg7f40x] {
    color: var(--text-muted);
}

.wallet-sync-stat-value[b-3rhcg7f40x] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-body);
}

.wallet-sync-stat-note[b-3rhcg7f40x] {
    font-size: var(--font-size-small);
    color: var(--text-muted);
}

.wallet-sync-actions[b-3rhcg7f40x] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wallet-sync-completed[b-3rhcg7f40x] {
    margin-top: 2rem;
}

.wallet-sync-pending[b-3rhcg7f40x] {
    margin-top: 2rem;
}

.wallet-sync-pending h2[b-3rhcg7f40x],
.wallet-sync-completed h2[b-3rhcg7f40x] {
    margin: 0;
    font-size: 1.25rem;
}

/* Treść błędu bywa wielolinijkowa i rozpycha tabelę — obcinamy do jednej linii, pełna wartość
   zostaje w tytule wiersza (hover) i w logach. Wcześniej inline `style="max-width: 240px"`. */
.wallet-sync-error-cell[b-3rhcg7f40x] {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Owner/Dashboard.razor.rz.scp.css */
.dashboard-header[b-ln9cgy741x] {
    align-items: flex-end;
    gap: 1rem;
}

.dashboard-header p[b-ln9cgy741x] {
    margin: 0.35rem 0 0;
    color: var(--neutral-600);
}

.dashboard-panel p[b-ln9cgy741x] {
    margin: 0.35rem 0 0;
    color: var(--color-muted);
}

.dashboard-periods[b-ln9cgy741x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dashboard-period[b-ln9cgy741x] {
    min-height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--color-muted);
    border-radius: var(--radius-button);
    background: var(--color-white);
    color: var(--color-ink);
    font: inherit;
    cursor: pointer;
}

.dashboard-period:hover[b-ln9cgy741x] {
    background: var(--color-sand);
}

.dashboard-period.active[b-ln9cgy741x] {
    border-color: var(--color-burgundy);
    background: var(--color-burgundy);
    color: var(--color-white);
}

.dashboard-kpi-grid[b-ln9cgy741x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.dashboard-kpi[b-ln9cgy741x] {
    display: flex;
    min-height: 7.5rem;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-white);
}

.dashboard-kpi span[b-ln9cgy741x] {
    color: var(--color-muted);
    font-family: var(--font-ui);
}

.dashboard-kpi strong[b-ln9cgy741x] {
    color: var(--color-burgundy);
    font-family: var(--font-display);
    font-size: 2rem;
}

.dashboard-panel[b-ln9cgy741x] {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-white);
}

.dashboard-panel h2[b-ln9cgy741x] {
    margin: 0;
    font-size: 1.25rem;
}

.dashboard-chart-scroll[b-ln9cgy741x] {
    margin-top: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.dashboard-chart[b-ln9cgy741x] {
    min-width: 34rem;
}

.dashboard-empty[b-ln9cgy741x] {
    padding: 1rem 0;
}

@media (max-width: 640.98px) {
    .dashboard-header[b-ln9cgy741x] {
        align-items: stretch;
    }

    .dashboard-periods[b-ln9cgy741x],
    .dashboard-period[b-ln9cgy741x] {
        flex: 1;
    }

    .dashboard-period[b-ln9cgy741x] {
        min-width: 5rem;
    }

    .dashboard-kpi-grid[b-ln9cgy741x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .dashboard-kpi[b-ln9cgy741x] {
        min-height: 6.5rem;
    }
}

@media (max-width: 380px) {
    .dashboard-kpi-grid[b-ln9cgy741x] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Owner/Employees.razor.rz.scp.css */
/* Lista pozostaje przeglądowa; edycja lokalizacji odbywa się w profilu pracownika. */
.employee-location-name[b-3k0tg3z3n2] {
    margin-right: 0.5rem;
}

.employee-profile-status[b-3k0tg3z3n2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-button);
    background: var(--color-cream);
}

.employee-profile-status p[b-3k0tg3z3n2] {
    margin: 0;
}

.employee-profile-actions[b-3k0tg3z3n2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

.employee-profile-actions[b-3k0tg3z3n2]  .staff-button {
    width: 100%;
    justify-content: flex-start;
}

.employee-profile-setting[b-3k0tg3z3n2] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.employee-profile-setting h3[b-3k0tg3z3n2] {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}
/* /Components/Pages/Owner/ProgramList.razor.rz.scp.css */
.staff-program-settings-dialog[b-u9vj6k3rh9] {
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
}
/* /Components/Pages/Owner/TransactionHistory.razor.rz.scp.css */
.back-link[b-pjzvx9dwjp] {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    text-decoration: none;
}

.back-link:hover span[b-pjzvx9dwjp] {
    text-decoration: underline;
}

.transaction-history-header[b-pjzvx9dwjp] {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.customer-accounts-summary[b-pjzvx9dwjp] {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-white);
}

.customer-accounts-summary h2[b-pjzvx9dwjp] {
    margin: 0;
    font-size: 1.25rem;
}

.customer-accounts-summary-grid[b-pjzvx9dwjp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.customer-account-summary[b-pjzvx9dwjp] {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-sand);
}

.customer-account-summary h3[b-pjzvx9dwjp] {
    margin: 0;
    font-size: 1rem;
}

.customer-account-summary dl[b-pjzvx9dwjp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 0;
}

.customer-account-summary dt[b-pjzvx9dwjp] {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.customer-account-summary dd[b-pjzvx9dwjp] {
    margin: 0.2rem 0 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.25rem;
}

@media (max-width: 640px) {
    .transaction-history-header[b-pjzvx9dwjp] {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-accounts-summary[b-pjzvx9dwjp] {
        padding: 1rem;
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
.register-title[b-nctt72vpob] {
    font-family: var(--font-display);
    color: var(--color-burgundy);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.register-copy[b-nctt72vpob] {
    font-family: var(--font-ui);
    color: var(--color-ink);
    margin-bottom: 1rem;
}

.register-recover-link[b-nctt72vpob] {
    margin-top: 1.5rem;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-section[b-aiu4zmt84u] {
    max-width: 36rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--surface-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.settings-section-heading[b-aiu4zmt84u] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

/* Kółko z ikoną wokół nagłówka sekcji — ten sam wzorzec okrągłego tła co
   .profile-menu-trigger/.nav-toggle-trigger w layoutach, żeby karta nie wyglądała na pustą
   obok reszty apki (feedback pilotażu: "Kartom brakuje polerunku"). */
.settings-section-icon[b-aiu4zmt84u] {
    display: inline-flex;
    flex-shrink: 0;
    padding: 0.4rem;
    border-radius: 999px;
    background-color: var(--color-sand);
    color: var(--color-burgundy);
}
/* /Components/Shared/Alert.razor.rz.scp.css */
.bw-alert[b-rp32aemqxh] {
    border-radius: var(--radius-button);
    padding: 0.85rem 1rem;
    font-family: var(--font-ui);
    border: 1px solid transparent;
}

.bw-alert-success[b-rp32aemqxh] {
    background-color: var(--color-white);
    color: var(--color-sage);
    border-color: var(--color-sage);
}

.bw-alert-error[b-rp32aemqxh] {
    background-color: var(--color-white);
    color: var(--color-coral-text-safe);
    border-color: var(--color-coral-text-safe);
}
/* /Components/Shared/Card.razor.rz.scp.css */
.bw-card[b-7jgflzlpna] {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1.5rem;
}
/* /Components/Shared/Field.razor.rz.scp.css */
.bw-field[b-bzooqz82yf] {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bw-field-label[b-bzooqz82yf] {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--color-ink);
}

[b-bzooqz82yf] .bw-field-error {
    color: var(--color-coral-text-safe);
    font-size: 0.9rem;
}

[b-bzooqz82yf] input:not([type="checkbox"]), [b-bzooqz82yf] .form-control {
    min-height: var(--button-height);
    border-radius: var(--radius-button);
    /* var(--color-border) ma tylko ~1.35:1 na kremowym/białym tle — za mało dla granicy
       kontrolki formularza (WCAG 1.4.11 wymaga 3:1). var(--color-muted) daje >5:1. */
    border: 1px solid var(--color-muted);
    padding: 0 0.85rem;
    font-family: var(--font-ui);
    color: var(--color-ink);
    background-color: var(--color-white);
}

[b-bzooqz82yf] input:focus-visible, [b-bzooqz82yf] .form-control:focus {
    outline: 3px solid var(--color-coral-text-safe);
    outline-offset: 2px;
    box-shadow: none;
}

.bw-field-checkbox-row[b-bzooqz82yf] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: var(--button-height);
}

.bw-field-checkbox-row .bw-field-label[b-bzooqz82yf] {
    font-weight: 400;
    padding-top: 0.2rem;
}

[b-bzooqz82yf] .bw-field-checkbox-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 0.15rem;
    accent-color: var(--color-burgundy);
}