h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --------------------------------------------------------------------------
   Strony uwierzytelniania / onboardingu (statyczny SSR, natywny HTML — U-3).
   Motyw DevExpress OfficeWhite (App.razor: DxResourceManager.RegisterTheme)
   dostarcza bazę Bootstrap 5 + zmienne --bs-* (primary = #00609C). Tu tylko
   układ karty i natywny formularz — zakresowane pod .auth-* (nie dotykają
   stron z komponentami Dx*). UX-001 §6.
   -------------------------------------------------------------------------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--psp-bg, #F5F7FA);
}

/* Kolorowy znak PSP w nagłówku karty logowania/onboardingu (rebrand). */
.auth-logo {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 1.25rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 2rem 2.25rem 2.25rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.08);
}

.auth-card h1 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--bs-emphasis-color, #212529);
}

.auth-card h2 {
    margin: 0 0 1.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    color: var(--psp-navy, #002448);
}

.auth-card p {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
}

.auth-card form label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #343a40;
}

.auth-card form label input,
.auth-card form input:not([type="checkbox"]):not([type="radio"]) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
}

.auth-card form input:focus {
    outline: none;
    border-color: #00609C;
    box-shadow: 0 0 0 0.2rem rgba(0, 96, 156, 0.25);
}

.auth-card button {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.55rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #00609C;
    border: 1px solid #00609C;
    border-radius: 0.375rem;
    cursor: pointer;
}

.auth-card button:hover {
    background: #004E80;
    border-color: #004E80;
}

/* Linki w kartach auth (np. „użyj kodu zapasowego") — niebieski PSP, nie pomarańcz motywu. */
.auth-card a {
    color: #00609C;
    text-decoration: none;
    font-weight: 600;
}

.auth-card a:hover {
    color: #004E80;
    text-decoration: underline;
}

.auth-card .form-error {
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--bs-danger, #e81123);
    background: rgba(232, 17, 35, 0.08);
    border: 1px solid rgba(232, 17, 35, 0.25);
    border-radius: 0.375rem;
}

.auth-card .validation-message {
    display: block;
    margin: -0.5rem 0 1rem;
    font-size: 0.825rem;
    color: var(--bs-danger, #e81123);
}

/* Konfiguracja TOTP (QR) i ekran kodów zapasowych. */
.auth-card .totp-qr {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1.25rem;
}

.auth-card .totp-qr svg {
    width: 200px;
    height: 200px;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.375rem;
    background: #fff;
    padding: 0.5rem;
}

.auth-card .recovery-codes {
    margin: 0.5rem 0 1.25rem;
    padding: 1rem 1.25rem;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.05em;
    background: var(--bs-secondary-bg, #f2f2f2);
    border-radius: 0.375rem;
}

/* ==========================================================================
   Barwy marki PSP (decyzja CTO). Paleta wyciągnięta z logo:
     granat  #002448 — belka górna, nagłówki
     niebieski #00609C — PRIMARY (przyciski, linki, focus, aktywne)
     zielony #009C48 — akcent / sukces
     limonka #60A83C — akcent drugorzędny
   Motyw DevExpress = Fluent (Light) z custom akcentem PSP #00609C ustawianym natywnie w App.razor
   przez SetCustomAccentColor (ADR-008 dec.1/2, SPEC-008 §1) — to on generuje --dxbl-accent-color
   + 17 odcieni wtórnych dla stanów Dx. Poniższe :root NIE nadpisuje już akcentu Dx (usunięto surowe
   --dxbl-accent-color — mechanizm Classic z OfficeWhite, kolidował z Fluentem). Tokeny marki psp- oraz hub-
   i --bs-* zostają jako NIEZALEŻNA marka dla naszych klas hub-/tx-/auth- i semantyki kolorów wykresów
   (EDGE-008-06) — nie stylują komponentów Dx (NOTE-005 §1).
   ========================================================================== */
:root {
    /* Tokeny marki PSP — jedno źródło prawdy dla nakładki (klasy hub- oraz auth-). */
    --psp-navy: #002448;
    --psp-blue: #00609C;
    --psp-green: #009C48;
    --psp-lime: #60A83C;
    --psp-bg: #F5F7FA;

    /* Kolory spółek w przełączniku/pasku kontekstu — z palety PSP (nie granat/fiolet). */
    --hub-psp: #00609C; /* PSP = niebieski */
    --hub-cdc: #009C48; /* CDC = zielony */
    --hub-topbar-h: 56px;

    /* Marka PRIMARY = niebieski PSP dla ewentualnych klas bootstrapowych naszej nakładki (NIE akcent Dx —
       ten płynie z SetCustomAccentColor w App.razor pod Fluentem; ADR-008 dec.3). */
    --bs-primary: #00609C;
    --bs-primary-rgb: 0, 96, 156;
    --bs-link-color: #00609C;
    --bs-link-color-rgb: 0, 96, 156;
    --bs-link-hover-color: #004a78;
    --bs-success: #009C48;
    --bs-success-rgb: 0, 156, 72;
    --bs-body-bg: #F5F7FA;

    /* Zebra gridów Dx (SPEC-008 §3 / ADR-008 dec.5 / UX-008 §2) — jeden token strojony jedną alfą.
       Chłodny neutralny wywiedziony z granatu PSP #002448 (NIE akcent niebieski, by nie kolidować z
       zaznaczeniem wiersza Fluenta). Podniesiono 6% → 10% (#2/#4, CTO 2026-07-27): przy 6% cieniowanie było
       ledwo widoczne (grid transakcji, macierz kosztów). Nadal poniżej progu ~0,12 (kontrast/warstwowanie
       biały < zebra < hover < selected zachowane). Jeden token = spójna zebra we WSZYSTKICH 14 gridach. */
    --hub-grid-alt-row: rgba(0, 36, 72, 0.10);
}

.hub-shell {
    min-height: 100vh;
    background: var(--psp-bg, #F5F7FA);
}

/* Belka górna 56px, sticky (§4.1) — granat PSP z białym logo. */
.hub-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--hub-topbar-h);
    padding: 0 1.25rem;
    background: var(--psp-navy, #002448);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-topbar-start,
.hub-topbar-end {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Logo: białe pełne logo PSP (znak+tekst), wysokość ~32px. */
.hub-brand {
    display: inline-flex;
    align-items: center;
}

.hub-brand-logo {
    height: 32px;
    width: auto;
    display: block;
}

/* Nawigacja pozioma (§4.1) — jasny kontrast na granacie. */
.hub-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hub-nav-link {
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.925rem;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    white-space: nowrap;
}

.hub-nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.hub-nav-link-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    font-weight: 600;
}

/* Przełącznik spółki — kontrolka segmentowa (§4.2). */
.hub-scope-switcher {
    display: inline-flex;
    margin: 0;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
    overflow: hidden;
}

.hub-seg {
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bs-secondary-color, #495057);
    background: var(--bs-body-bg, #fff);
    border: none;
    border-left: 1px solid var(--bs-border-color, #ced4da);
    cursor: pointer;
    white-space: nowrap;
}

.hub-seg:first-child {
    border-left: none;
}

.hub-seg:hover {
    background: var(--bs-secondary-bg, #f2f2f2);
}

.hub-seg-active {
    color: #fff;
    cursor: default;
}

.hub-seg-active.seg-psp {
    background: #00609C; /* PSP = niebieski PSP */
}

.hub-seg-active.seg-cdc {
    background: #009C48; /* CDC = zielony PSP */
}

.hub-seg-active.seg-all {
    background: #002448; /* „Wszystkie" = neutralny granat (nie jedna spółka) */
}

.hub-seg-active:hover {
    filter: none;
}

/* Stan D — nieklikalny znacznik jednej spółki (§4.2). */
.hub-scope-marker {
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    border-radius: 0.375rem;
    cursor: default;
    white-space: nowrap;
}

.hub-scope-marker.seg-psp {
    background: #00609C;
}

.hub-scope-marker.seg-cdc {
    background: #009C48;
}

/* Menu użytkownika (§4.1) — natywne <details>. */
.hub-usermenu {
    position: relative;
}

.hub-usermenu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.925rem;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0.375rem;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.hub-usermenu-trigger::-webkit-details-marker {
    display: none;
}

.hub-usermenu-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.hub-usermenu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 180px;
    padding: 0.35rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 1040;
}

.hub-usermenu-logout {
    margin: 0;
}

.hub-usermenu-item {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    text-align: left;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
}

.hub-usermenu-item:hover {
    background: var(--bs-secondary-bg, #f2f2f2);
}

/* Pasek kontekstu spółki — 4px, jedyny stały nośnik zakresu (§4.3). */
.hub-context-bar {
    height: 4px;
    width: 100%;
}

.hub-context-bar.ctx-psp {
    background: #00609C;
}

.hub-context-bar.ctx-cdc {
    background: #009C48;
}

.hub-context-bar.ctx-all {
    /* „Wszystkie" — neutralny granat (spójnie z segmentem, decyzja koordynatora). */
    background: #002448;
}

.hub-context-bar.ctx-none {
    background: #d7dde3;
}

/* Obszar treści (§4.1). */
.hub-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* Przyciski wspólne. */
.hub-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: #00609C;
    border: 1px solid #00609C;
    border-radius: 0.375rem;
    text-decoration: none;
    cursor: pointer;
}

.hub-btn:hover {
    background: #004E80;
    border-color: #004E80;
}

.hub-btn-secondary {
    color: var(--bs-emphasis-color, #212529);
    background: #fff;
    border-color: var(--bs-border-color, #ced4da);
}

.hub-btn-secondary:hover {
    background: #eef1f5;
    border-color: var(--bs-border-color, #ced4da);
}

.hub-btn-small {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

/* Pulpit kafelkowy (§4.6). */
.hub-dashboard-greeting {
    margin: 0 0 1.5rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
    padding-bottom: 1rem;
}

.hub-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.hub-tile {
    display: block;
    padding: 1.25rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--bs-emphasis-color, #212529);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.hub-tile:hover {
    border-color: #00609C;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.hub-tile-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.hub-dashboard-empty,
.hub-profile-empty {
    color: var(--bs-secondary-color, #6c757d);
}

/* Sekcja „Transakcje — skrót" na pulpicie (E6, UX-003 §6). Widoczna per uprawnienia; kafle per spółka (PSP/CDC),
   NIGDY „Razem". Reużywa .tx-result-panels (grid 2-kol. ≥1280 px) i .tx-result-panel (ramka spółki). */
.hub-tx-summary {
    margin-top: 2rem;
}

.hub-tx-summary-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
}

.hub-tx-card-name {
    margin: 0;
    font-size: 1.05rem;
    color: var(--psp-navy, #002448);
}

/* Mini-KPI wyniku bieżącego miesiąca — etykieta z lewej, wartość (kolor ze znaku) do prawej. */
.hub-tx-kpi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0 0.6rem;
}

.hub-tx-kpi-label {
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

.hub-tx-kpi-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Skrót do pełnych widoków — dwa jawne linki (kafel nie jest klikalny w całości). */
.hub-tx-links {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.75rem;
}

.hub-tx-links a {
    font-size: 0.9rem;
    font-weight: 600;
    color: #00609C;
    text-decoration: none;
}

.hub-tx-links a:hover {
    text-decoration: underline;
}

/* Brak uprawnień (§9.1). */
.hub-noaccess {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
}

.hub-noaccess h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
    margin-bottom: 1rem;
}

.hub-noaccess p {
    color: var(--bs-secondary-color, #495057);
    margin-bottom: 1.5rem;
}

.hub-noaccess-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.hub-noaccess-actions form {
    margin: 0;
}

/* Profil (§7.5). */
.hub-profile {
    max-width: 640px;
}

.hub-profile h2 {
    margin: 2rem 0 0.75rem;
    padding-top: 1rem;
    font-size: 1.15rem;
    color: var(--psp-navy, #002448);
    border-top: 1px solid var(--bs-border-color, #e5e5e5);
}

.hub-profile h1,
.hub-dashboard h1 {
    color: var(--psp-navy, #002448);
}

.hub-profile-identity {
    font-size: 1rem;
    color: var(--bs-secondary-color, #495057);
}

.hub-profile-hint {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0.35rem 0 0.75rem;
}

.hub-profile-form label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #343a40;
    max-width: 360px;
}

.hub-profile-form input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
}

.hub-profile-form input:focus {
    outline: none;
    border-color: #00609C;
    box-shadow: 0 0 0 0.2rem rgba(0, 96, 156, 0.25);
}

.hub-recovery {
    font-size: 0.95rem;
}

.hub-recovery-low strong {
    color: var(--bs-danger, #e81123);
}

.hub-devices {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.hub-devices th,
.hub-devices td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
}

.hub-devices th {
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.hub-alert {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.hub-alert-success {
    color: #14632b;
    background: rgba(38, 176, 80, 0.12);
    border: 1px solid rgba(38, 176, 80, 0.35);
}

.hub-alert-error {
    color: var(--bs-danger, #e81123);
    background: rgba(232, 17, 35, 0.08);
    border: 1px solid rgba(232, 17, 35, 0.25);
}

.hub-alert-warning {
    color: #8a6d00;
    background: rgba(214, 158, 0, 0.12);
    border: 1px solid rgba(214, 158, 0, 0.35);
}

/* Karta błędu w layoucie (§9.3, wariant GlobalErrorBoundary). */
.hub-error-card {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
}

.hub-error-card h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
    margin-bottom: 1rem;
}

.hub-error-card p {
    color: var(--bs-secondary-color, #495057);
}

.hub-error-id {
    margin: 1.25rem 0 0.25rem;
}

.hub-error-id-value {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: var(--bs-emphasis-color, #212529);
}

/* Grupa 4+4: szerszy odstęp w połowie realizowany marginesem między spanami — bez wstawiania znaku do łańcucha. */
.hub-error-id-value span + span {
    margin-left: 0.6em;
}

.hub-error-time {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
}

.hub-error-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* ==========================================================================
   Kartoteka klientów (§7 UX-001 / §9 SPEC) — E6.
   ========================================================================== */
.clients-header,
.client-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
}

.clients-header h1 {
    margin: 0;
    color: var(--psp-navy, #002448);
}

.clients-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.clients-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.clients-filter-search {
    min-width: 320px;
}

.clients-filter-actions {
    margin-left: auto;
}

.clients-count {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
}

.clients-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Plakietki statusu klienta — kolor niesie też słowo (Z4); nie zieleń/czerwień jako tożsamość (Z5). */
.client-status {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.client-status-prospect {
    color: #00609C;
    background: rgba(0, 96, 156, 0.1);
    border-color: rgba(0, 96, 156, 0.25);
}

.client-status-active {
    color: #00733a;
    background: rgba(0, 156, 72, 0.12);
    border-color: rgba(0, 156, 72, 0.3);
}

.client-status-inactive {
    color: #5a6b7a;
    background: rgba(90, 107, 122, 0.12);
    border-color: rgba(90, 107, 122, 0.3);
}

.client-status-archived {
    color: #6c757d;
    background: #f0f2f5;
    border-color: #d7dde3;
}

/* Karta klienta (§7.2). */
.client-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.client-card-title h1 {
    margin: 0;
    color: var(--psp-navy, #002448);
}

.client-card-back {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #00609C;
    text-decoration: none;
    font-weight: 600;
}

.client-card-back:hover {
    text-decoration: underline;
}

.client-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Zakładki karty (Dane / Osoby / Historia). */
.client-tab {
    padding: 1.25rem 0.25rem;
    max-width: 640px;
}

.client-tab-wide {
    max-width: 100%;
}

.client-form-hint {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0.35rem 0 1rem;
}

.client-contacts-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.client-primary-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #00609C;
    background: rgba(0, 96, 156, 0.1);
}

/* Panel potwierdzenia (archiwizacja / usunięcie) i edytor osoby kontaktowej. */
.client-confirm {
    max-width: 640px;
}

.client-confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.client-confirm-restore {
    max-width: 260px;
    margin-top: 0.5rem;
}

.client-contact-editor {
    max-width: 720px;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.5rem;
}

.client-contact-editor h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--psp-navy, #002448);
}

.client-contact-rowactions {
    display: flex;
    gap: 0.5rem;
}

.client-form {
    max-width: 100%;
}

/* ==========================================================================
   Administracja (§5–6 UX-001 / §10.2 SPEC) — E7.
   ========================================================================== */
.admin-section-h {
    margin: 2rem 0 0.5rem;
    font-size: 1.15rem;
    color: var(--psp-navy, #002448);
}

.admin-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
}

.admin-tab {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tab:hover {
    color: var(--psp-navy, #002448);
}

.admin-tab-active {
    color: #00609C;
    border-bottom-color: #00609C;
}

.admin-temppass {
    max-width: 640px;
    background: rgba(0, 96, 156, 0.06);
    border: 1px solid rgba(0, 96, 156, 0.25);
}

.admin-temppass-value code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--psp-navy, #002448);
}

.admin-security-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Macierz uprawnień (§5) — natywna tabela (dynamiczne pasma z IsCompanyScoped, edytory per komórka, kolumny przypięte). */
.perm-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.5rem;
}

.perm-matrix {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

.perm-matrix th,
.perm-matrix td {
    border: 1px solid var(--bs-border-color, #e5e5e5);
    padding: 0.4rem 0.6rem;
    text-align: center;
    white-space: nowrap;
}

.perm-matrix thead th {
    background: #f0f3f7;
    color: var(--psp-navy, #002448);
    font-weight: 600;
}

.perm-matrix .perm-user {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    text-align: left;
    min-width: 220px;
}

.perm-matrix thead .perm-user {
    z-index: 3;
    background: #f0f3f7;
}

.perm-matrix .perm-user-name {
    font-weight: 600;
    color: var(--psp-navy, #002448);
}

.perm-matrix .perm-user-email {
    display: block;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.perm-matrix .perm-scope {
    background: #fbfbfd;
}

.perm-level {
    min-width: 96px;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--bs-body-color, #212529);
}

.perm-level:focus {
    outline: none;
    border-color: #00609C;
    box-shadow: 0 0 0 0.15rem rgba(0, 96, 156, 0.2);
}

.perm-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
}

.perm-matrix-note {
    max-width: 720px;
    margin: 0.5rem 0 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #495057);
    padding: 0.5rem 0.75rem;
    background: rgba(0, 96, 156, 0.05);
    border-left: 3px solid #00609C;
    border-radius: 0.25rem;
}

/* Zebra siatek Dx (SPEC-008 §3 / ADR-008 dec.5) — alternujące tło co drugi wiersz, jeden token
   --hub-grid-alt-row (:root, UX-008 §2). Warstwowanie: biały < zebra < hover < selected (hover/selected
   dominują — akcent Fluenta). Zebra na tle DataRow; kolor wyniku działa na DataCell (nie koliduje, EDGE-008-06).

   SPECYFICZNOŚĆ (CTO 2026-07-27 #1B): sama klasa .hub-grid-alt-row (0,1,0) PRZEGRYWA z bazowym białym
   tłem wiersza Fluenta `.dxbl-grid .dxbl-grid-table>tbody>tr { background:var(--dxbl-grid-row-bg) }`
   (specyficzność 0,2,2) — zebra była niewidoczna. Podnosimy selektor do
   `.dxbl-grid .dxbl-grid-table > tbody > tr.hub-grid-alt-row` (0,3,2): BIJE biel bazową (o jedną klasę),
   a nadal PRZEGRYWA z hover/selected Fluenta (te mają dużo wyższą specyficzność przez łańcuchy :not()),
   więc warstwowanie biały < zebra < hover < selected zachowane bez !important.
   Klasy motywu Fluent: styling-and-themes — url: https://docs.devexpress.com/Blazor/404821/styling-and-themes/styling-and-themes */
.dxbl-grid .dxbl-grid-table > tbody > tr.hub-grid-alt-row {
    background-color: var(--hub-grid-alt-row);
}

/* Zachowany selektor jednoklasowy — guard ArchitectureTests (ModernizationUiStaticTests) wymaga
   dosłownej reguły `.hub-grid-alt-row {`. Bazowy nośnik tokenu; realną specyficzność daje reguła powyżej. */
.hub-grid-alt-row {
    background-color: var(--hub-grid-alt-row);
}

/* Usunięto (ADR-008 dec.3 / SPEC-008 §4): reguły .btn-primary/.btn-outline-primary/.btn-link (mapowanie
   Bootstrap „Primary" pod OfficeWhite — grep markupu potwierdził brak żywych surowych klas Bootstrap poza Dx*)
   oraz pager .dxbl-active !important (pod Fluentem pager czyta akcent z SetCustomAccentColor — twarde !important
   walczyłoby z motywem). Akcent PSP #00609C płynie teraz natywnie z motywu (App.razor §1). */

/* ==========================================================================
   Moduł Transakcje (UX-002 / SPEC-002) — E7 UI-1. Cienka nakładka nad Dx*.
   Kolory spółek spójne z paskiem kontekstu: PSP #00609C, CDC #009C48.
   ========================================================================== */

/* Pasek podsekcji (§3.2) — jeden NavItem, cztery obszary pod /transakcje/*. */
.tx-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
}

.tx-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.tx-subnav-link:hover {
    color: var(--psp-navy, #002448);
}

.tx-subnav-active {
    color: var(--psp-navy, #002448);
    border-bottom-color: #00609C;
    cursor: default;
}

.tx-subnav-disabled {
    color: #adb5bd;
    cursor: not-allowed;
}

.tx-subnav-soon {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #adb5bd;
    border: 1px solid #dde2e7;
    border-radius: 0.75rem;
    padding: 0.05rem 0.4rem;
}

.tx-page {
    max-width: 100%;
}

.tx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
}

.tx-header h1 {
    margin: 0;
    color: var(--psp-navy, #002448);
}

.tx-header-actions {
    display: flex;
    gap: 0.5rem;
}

.tx-back {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #00609C;
    text-decoration: none;
    font-weight: 600;
}

.tx-back:hover {
    text-decoration: underline;
}

.tx-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.tx-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 160px;
}

.tx-filter-actions {
    margin-left: auto;
    min-width: 0;
}

/* Podpowiedź pod filtrami (rok → wykres, kwartał → tabela) — pełna szerokość, własny wiersz. */
.tx-filters-hint {
    flex-basis: 100%;
    margin: 0;
}

/* Filtr z etykietą nad polem (zwroty: Rok/Kwartał). Etykieta i DxComboBox w tym samym wierszu przy
   współdzielonym min-width nachodziły na siebie i ściskały pole — układamy je w kolumnie i dajemy
   selektorowi pełną, czytelną szerokość (#7). */
.tx-filter-labeled {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 220px;
}

.tx-filter-labeled label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
}

/* Szerokość edytora sterowana klasą CSS (wzorzec DevExpress: CssClass="cw-480").
   url: https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox`2 */
.tx-filter-combo {
    width: 100%;
    min-width: 200px;
}

/* Chip „Bez kursu (n)" — szybki filtr (◔, nie zieleń/czerwień; Z5). */
.tx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a6d00;
    background: rgba(214, 158, 0, 0.12);
    border: 1px solid rgba(214, 158, 0, 0.4);
    border-radius: 1rem;
    cursor: pointer;
}

.tx-chip-active {
    color: #fff;
    background: #b8860b;
    border-color: #b8860b;
}

.tx-count {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Znacznik spółki (kolumna „Spółka", nagłówek karty) — kolor NIGDY sam, zawsze ze słowem (Z4). */
.tx-company {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-left: 3px solid #adb5bd;
}

.tx-company-psp {
    color: #00609C;
    background: rgba(0, 96, 156, 0.1);
    border-left-color: #00609C;
}

.tx-company-cdc {
    color: #00733a;
    background: rgba(0, 156, 72, 0.12);
    border-left-color: #009C48;
}

.tx-lock {
    font-size: 0.75rem;
}

/* Kwota (#1, CTO 2026-07-27) — cyfry tabelaryczne + brak zawijania (kwota to jedna logiczna wartość, nie łamana
   między tysiącami). Blokowe prawe wyrównanie stosujemy TYLKO w komórce grida/macierzy (.dxbl-grid) — poza gridem
   (rozliczenie kwartału, różnica kursowa, panele wyniku, KPI, pasek sum) kwota zostaje inline, więc „X EUR · Y PLN"
   jest jedną czytelną linią, a nie czterema blokami. Prawe wyrównanie w treści niesie rodzic (dd/kpi-value:
   text-align:right). Wcześniejsza globalna reguła display:block wymuszała każdą część kwoty w osobnym wierszu. */
.tx-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dxbl-grid .tx-amount {
    display: block;
    text-align: right;
}

.tx-norate {
    display: block;
    text-align: right;
    color: #b8860b;
}

.tx-status {
    display: inline-flex;
    gap: 0.25rem;
}

/* Formularz transakcji. */
.tx-form-wrap {
    max-width: 720px;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left-width: 4px;
    border-left-color: #adb5bd;
    border-radius: 0.5rem;
}

.tx-company-border-psp {
    border-left-color: #00609C;
}

.tx-company-border-cdc {
    border-left-color: #009C48;
}

.tx-company-border-none {
    border-left-color: #adb5bd;
}

.tx-form {
    max-width: 700px;
}

/* Wiersz kursu (C3, UX-008 §1): pole + „Pobierz z NBP" w jednym rzędzie; przy Small/wąskim oknie
   przycisk zawija się POD pole (flex-wrap), a nie na nie — pole ma własną min-width. */
.tx-rate-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tx-rate-row .tx-rate-input {
    min-width: 8rem;
    flex: 1 1 8rem;
}

.tx-form-hint {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0.35rem 0 1rem;
}

/* Strefa podpowiedzi formularza (SPEC-008 §6 / UX-008 §4) — zarezerwowana wysokość od 1. renderu:
   treść (async z NBP, „✎ wyliczone", niespójność) pojawia się/znika WEWNĄTRZ strefy, bez przesuwania
   kolejnych pól ani przycisku „Pobierz z NBP" (usunięta przyczyna reflow/EDGE-008-04, nie zamaskowana).
   Rezerwacja ~2 wiersze podpowiedzi 0,85rem; strefa niesie własny dolny odstęp. */
.tx-form-hint-zone {
    min-height: 2.5rem;
}

.tx-form-hint-zone .tx-form-hint {
    margin: 0.35rem 0 0;
}

.tx-form-hint-warn {
    color: #8a6d00;
}

.tx-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.tx-tab {
    padding: 1.25rem 0.25rem;
    max-width: 720px;
}

/* Potwierdzenia (usunięcie, przełamanie zamkniętego okresu). */
.tx-confirm {
    max-width: 720px;
}

.tx-confirm-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Karta transakcji — nagłówek + plakietki. */
.tx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left-width: 4px;
    border-radius: 0.5rem;
}

.tx-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tx-card-title h1 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--psp-navy, #002448);
}

.tx-card-actions {
    display: flex;
    gap: 0.5rem;
}

.tx-badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.tx-badge-ok {
    color: #00733a;
    background: rgba(0, 156, 72, 0.12);
    border-color: rgba(0, 156, 72, 0.3);
}

.tx-badge-warn {
    color: #8a6d00;
    background: rgba(214, 158, 0, 0.12);
    border-color: rgba(214, 158, 0, 0.35);
}

.tx-badge-link {
    color: #00609C;
    background: rgba(0, 96, 156, 0.1);
    border-color: rgba(0, 96, 156, 0.25);
}

/* --- UI-2a: koszty i zwroty Autodesk (sekcje per spółka) --- */

.tx-section-title {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.1rem;
    color: var(--psp-navy, #002448);
}

/* Dwie sekcje per spółka (PSP/CDC) — obok siebie ≥1280 px, jedna pod drugą niżej. Forma wymusza izolację (§8.3). */
.tx-cost-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 1280px) {
    .tx-cost-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Strona /transakcje/koszty (#2, CTO 2026-07-27): macierz jest szeroka (Składowa + 12 miesięcy + Razem).
   Sekcje spółek układamy JEDNA POD DRUGĄ na pełną szerokość treści (a nie obok siebie w dwóch kolumnach),
   by zmieściło się jak najwięcej miesięcy bez poziomego suwaka. Reguła po media-query ⇒ wygrywa też ≥1280 px.
   Izolacja PSP/CDC zachowana: osobna macierz + własne „Razem" per spółka, ZERO sumy łącznej PSP+CDC. */
.tx-cost-sections-wide {
    grid-template-columns: 1fr;
}

.tx-cost-section {
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left-width: 4px;
    border-left-color: #adb5bd;
    border-radius: 0.5rem;
}

.tx-cost-section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.tx-cost-section-head h2,
.tx-cost-section-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--psp-navy, #002448);
}

.tx-cost-section-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tx-cost-row-actions {
    display: flex;
    gap: 0.5rem;
}

.tx-cost-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

.tx-cost-total {
    font-size: 0.95rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-cost-total strong {
    color: var(--psp-navy, #002448);
    font-variant-numeric: tabular-nums;
}

.tx-cost-editor {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--bs-border-color, #d5dbe1);
    border-radius: 0.5rem;
    background: rgba(0, 96, 156, 0.03);
}

.tx-cost-editor h3,
.tx-cost-editor h4 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--psp-navy, #002448);
}

/* Rozliczenie kwartału — karty per spółka (zero „Razem" PSP+CDC). */
.tx-recon-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 1280px) {
    .tx-recon-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Strona /transakcje/zwroty (CTO 2026-07-27, skalowanie raportów): karta niesie WYKRES osi kwartałów
   (dwa słupki EUR × Q1..Q4 + legenda + etykiety) lub tabelę rozliczenia z rozwijaną siatką transakcji —
   treść szeroka. Sekcje spółek układamy JEDNA POD DRUGĄ na pełną szerokość (nie obok siebie w dwóch
   kolumnach ~½), by wykres i tabela wykorzystały całą szerokość strony. Reguła po media-query ⇒ wygrywa
   też ≥1280 px. Izolacja PSP/CDC zachowana: osobna karta per spółka, ZERO sumy łącznej PSP+CDC (ADR-003 dec. 4). */
.tx-recon-cards-wide {
    grid-template-columns: 1fr;
}

.tx-recon-card {
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left-width: 4px;
    border-left-color: #adb5bd;
    border-radius: 0.5rem;
}

.tx-recon-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    color: var(--psp-navy, #002448);
}

.tx-recon-rows {
    margin: 0;
}

.tx-recon-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tx-recon-row dt {
    margin: 0;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-recon-row dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tx-recon-fx {
    border-bottom: none;
}

.tx-recon-live {
    font-weight: 600;
    color: #00609C;
    cursor: help;
}

.tx-recon-toggle {
    margin-top: 0.6rem;
    padding: 0.3rem 0;
    background: none;
    border: none;
    color: #00609C;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.tx-recon-toggle:hover {
    text-decoration: underline;
}

/* --- UI-2b: wynik miesiąca (panele per spółka) + proaktywny pasek „miesiąc zamknięty" --- */

/* Panele per spółka (PSP/CDC) — NIGDY „Razem PSP+CDC" (§9, forma wymusza izolację).
   Skalowanie (CTO 2026-07-27): auto-fit z minmax zamiast sztywnych dwóch kolumn — jedna widoczna spółka
   (zakres Single) rozciąga panel na PEŁNĄ szerokość strony (koniec z wąską kartą ~½), a dwie spółki
   („Wszystkie") dzielą się na dwie kolumny na szerokich ekranach. min(100%, …) chroni przed przepełnieniem
   na wąskim viewport. Izolacja zachowana: osobny panel per spółka, brak sumy łącznej. */
.tx-result-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 1.25rem;
}

.tx-result-panel {
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left-width: 4px;
    border-left-color: #adb5bd;
    border-radius: 0.5rem;
}

.tx-result-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.tx-result-head h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--psp-navy, #002448);
}

.tx-result-period {
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-result-rows {
    margin: 0 0 0.75rem;
}

.tx-result-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tx-result-row dt {
    margin: 0;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-result-row dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Wynik = marże − koszty: duży, czytelny „z daleka", kolor ze znaku (zielony ≥0 / czerwony <0). */
.tx-result-total {
    border-bottom: none;
    margin-top: 0.25rem;
    padding-top: 0.6rem;
    border-top: 2px solid rgba(0, 0, 0, 0.08);
}

.tx-result-total dt {
    font-size: 1.05rem;
    color: var(--psp-navy, #002448);
}

.tx-result-value {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tx-result-positive {
    color: #00733a;
}

.tx-result-negative {
    color: #b52a2a;
}

.tx-result-status {
    margin-bottom: 0.5rem;
}

.tx-result-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* KPI „nieopłacone" (widok roku, UX-003 §3.1) — tonacja NEUTRALNA (należność, nie strata; Z5). Kwota do prawej. */
.tx-annual-unpaid {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--bs-secondary-bg, #f1f4f7);
    border-radius: 0.4rem;
}

.tx-annual-unpaid-label {
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-annual-unpaid-scope {
    font-weight: 400;
    font-size: 0.85rem;
}

.tx-annual-unpaid-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--psp-navy, #002448);
}

/* Rok bez danych spółki = zera (nie błąd) — dyskretny dopisek wyjaśniający (UX-003 §3.3/§7.3). */
.tx-annual-empty {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

/* --- IMPL-004 E4: landing raportów (kafle-odnośniki + skrót roku). Cienka nakładka nad Dx*. --- */
.tx-reports-summary {
    margin-bottom: 1.5rem;
}

.tx-reports-summary-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.tx-reports-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.tx-report-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left: 4px solid #00609C;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--bs-emphasis-color, #212529);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tx-report-tile:hover {
    border-color: #00609C;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.tx-report-tile-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
}

.tx-report-tile-desc {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

/* --- IMPL-004 E6: segmentacja marży Autodesk vs pozostałe (UX-004 §5). Kolory NEUTRALNE (nie spółka, nie wynik). --- */
.tx-seg-row dt {
    padding-left: 0.75rem;
    font-weight: 400;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-seg-bar {
    display: flex;
    width: 100%;
    height: 1.4rem;
    margin: 0.35rem 0 0.5rem;
    border-radius: 0.3rem;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4rem;
    color: #fff;
    white-space: nowrap;
}

.tx-seg-bar-autodesk {
    background: #5a6b8c; /* neutralny grafit-niebieski — NIE barwa spółki */
    text-align: center;
    overflow: hidden;
}

.tx-seg-bar-other {
    background: #b7bfca; /* jaśniejszy neutralny — „pozostałe" */
    color: #2b3440;
    text-align: center;
    overflow: hidden;
}

.tx-seg-note {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

/* Tytuł wykresu z aria-live (tryb/miesiąc/miara) — YoY (UX-004 §4/§8). */
.tx-chart-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
}

/* --- E4 (UX-003 §3.1/§4): wykresy DxChart — trend roku (liniowy) + rok-do-roku (słupkowy). Cienka nakładka nad Dx*. --- */

/* Filtry YoY: przełącznik miary + zakres lat od–do (etykiety nad kontrolką). */
.tx-yoy-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.tx-yoy-filter {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 150px;
}

.tx-yoy-filter > label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-yoy-range {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.tx-yoy-range-sep {
    padding-bottom: 0.5rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

/* Kontener wykresu — ramka spójna z panelami; dopisek „empty" pod spodem. */
.tx-chart-wrap {
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.5rem;
    padding: 1rem;
}

.tx-chart-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-chart-tooltip {
    font-size: 0.85rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

/* Trend miesięczny wewnątrz panelu roku (jedna linia w kolorze spółki). */
.tx-annual-trend {
    margin-top: 1rem;
}

.tx-annual-trend-title {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

/* Proaktywny pasek „miesiąc zamknięty" (§5.6 warstwa 1) — informacyjny, tonacja ostrzegawcza (nie alarm). */
.tx-closed-banners {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tx-closed-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #8a6d00;
    background: rgba(214, 158, 0, 0.1);
    border: 1px solid rgba(214, 158, 0, 0.35);
    border-left-width: 4px;
}

.tx-closed-lock {
    font-size: 1.1rem;
}

/* --- UI-2c: raport importu read-only (/transakcje/import) --- */

.tx-import-readonly {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}

.tx-import-note {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #5a6b7a);
    background: rgba(0, 96, 156, 0.06);
    border: 1px solid rgba(0, 96, 156, 0.18);
    border-radius: 0.375rem;
}

.tx-import-summary {
    margin-bottom: 1.25rem;
}

.tx-import-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0 0 0.75rem;
}

.tx-import-facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tx-import-facts dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #6c757d);
}

.tx-import-facts dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
}

.tx-import-annual {
    margin-bottom: 1.25rem;
}

.tx-import-annual h2,
.tx-import-issues h2 {
    font-size: 1.05rem;
    color: var(--psp-navy, #002448);
    margin: 0 0 0.5rem;
}

.tx-import-annual-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
}

.tx-import-annual-list li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.tx-import-year {
    font-weight: 700;
    color: var(--psp-navy, #002448);
}

.tx-import-empty-hint {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.tx-import-sev {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.tx-import-sev-warn {
    color: #8a6d00;
}

.tx-import-sev-info {
    color: #00609C;
}

/* Dyskretny link „Import historii" przy Transactions.Edit (V-4). */
.tx-import-link {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #5a6b7a);
    text-decoration: none;
    font-weight: 600;
}

.tx-import-link:hover {
    text-decoration: underline;
    color: #00609C;
}

/* ===== Faza 3.2 (SPEC-005 / UX-005) ===== */

/* E1 — pasmo sum per spółka nad gridem listy (nigdy „Razem"). */
.tx-listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tx-copybar {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.tx-copy-info {
    font-size: 0.85rem;
    font-weight: 600;
    color: #009C48;
}

/* Kompaktowy pasek sum per spółka (#1, CTO 2026-07-27): jedna linia na spółkę, ZERO „Razem".
   Kontener układa paski obok siebie (obie spółki) i zawija na wąsko; barwa krawędzi z tokenów marki
   (tx-company-border-psp/cdc → --hub-psp/--hub-cdc) przez CssClass, nie inline Style (CSP self). */
.tx-sumband {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Każdy pasek = jedna linia pełnej szerokości (nie wąska karta): block-level flex, width:100%.
   Segmenty (kwoty/liczność) mają white-space:nowrap — zawijanie MIĘDZY segmentami dopiero na wąskim ekranie. */
.tx-sumbar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.55rem;
    width: 100%;
    padding: 0.3rem 0.75rem;
    background: rgba(0, 96, 156, 0.04);
    border: 1px solid rgba(0, 96, 156, 0.12);
    border-left: 4px solid transparent;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.tx-sumbar-margin {
    font-variant-numeric: tabular-nums;
    color: #263238;
    font-weight: 600;
    white-space: nowrap;
}

/* (Zniesiono lokalny override .tx-sumbar .tx-amount — po zawężeniu reguły blokowej do .dxbl-grid bazowe
   .tx-amount jest już inline w treści; pasek sum nie potrzebuje wyjątku. #1, CTO 2026-07-27.) */

.tx-sumbar-count {
    color: var(--bs-secondary-color, #6c757d);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tx-sumbar-note {
    font-size: 0.82rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Lookup klienta (#2, CTO 2026-07-27): dropdown wielokolumnowy Nazwa/NIP/Branża/Status — gęstość Small,
   liczby (NIP) w cyfrach tabelarycznych dla równego wyrównania kolumn pod Fluent. Styl przez DropDownCssClass
   (klasa popupu), zero inline Style (CSP self). Puste NIP/branża = „—" (fabryka TransactionClientOption). */
.tx-client-lookup-dd {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* E2 — akcje wiersza (edytuj + znaczniki). */
.tx-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tx-row-edit {
    color: #00609C;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.tx-row-edit:hover {
    text-decoration: underline;
}

/* E6 — baner drill-down + liczby klikalne. */
.tx-drill-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: rgba(214, 158, 0, 0.1);
    border: 1px solid rgba(214, 158, 0, 0.35);
    border-radius: 0.5rem;
}

.tx-drill-context {
    font-weight: 600;
    color: #6b5200;
}

.tx-drill-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.tx-drill-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    cursor: pointer;
}

.tx-drill-link:hover {
    color: #00609C;
}

.tx-drill-arrow {
    font-weight: 700;
    color: #00609C;
}

/* E5 — rachunek wyników (panel). */
.tx-pl-panel {
    min-width: 0;
}

.tx-pl-rows {
    margin: 0;
}

.tx-pl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
}

.tx-pl-row dt {
    font-weight: 500;
    color: #37474f;
}

.tx-pl-row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tx-pl-sub {
    border-top: 1px solid #e3e8ec;
    font-weight: 600;
}

/* E4 — macierz kosztów (scroll poziomy 12 miesięcy + edytowalne komórki). */
.tx-matrix-scroll {
    overflow-x: auto;
}

.tx-matrix-copybar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tx-matrix-grid {
    min-width: 900px;
}

.tx-matrix-cell {
    width: 100%;
    padding: 0.15rem 0.35rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    color: inherit;
}

.tx-matrix-cell:hover {
    border-color: rgba(0, 96, 156, 0.4);
    background: rgba(0, 96, 156, 0.06);
}

.tx-matrix-cell-empty {
    color: #b0bec5;
}

/* E7 — pasek tytułu rozliczenia z kompaktowym selektorem kwartału przy tabeli. (#3, CTO 2026-07-27):
   selektor pływał oderwany po prawej (justify-content:space-between). Teraz siedzi PRZY nagłówku
   „Rozliczenie kwartału Qn" (flex-start + wspólna linia bazowa), więc widać, którą sekcją steruje. */
.tx-recon-titlebar {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-bottom: 0.75rem;
}

.tx-recon-quarter {
    margin: 0;
}

/* --- IMPL-006 (UX-006): trend miesięczny — pasek sterowania (miara + lata), legenda 2D, panele per spółka, macierz. --- */

.tx-trend-controls {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.tx-trend-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.tx-trend-control-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #5a6b7a);
    min-width: 3.5rem;
}

/* Segmentowy przełącznik miary Marża / Wynik. */
.tx-measure-toggle {
    display: inline-flex;
    gap: 0.35rem;
}

.tx-year-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tx-year-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.tx-year-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.4rem 0.2rem 0.6rem;
    border: 1px solid var(--bs-border-color, #d5dde3);
    border-radius: 1rem;
    background: #f4f7f9;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.tx-year-chip-remove {
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #5a6b7a);
    cursor: pointer;
    line-height: 1;
    padding: 0 0.15rem;
    font-size: 0.85rem;
}

.tx-year-chip-remove:hover {
    color: #b00020;
}

.tx-year-chips-empty {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #5a6b7a);
    font-style: italic;
}

.tx-year-add {
    min-width: 130px;
}

.tx-trend-presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Panel jednej spółki (dwa komplety w „Wszystkie" — izolacja przez rozdzielenie). */
.tx-trend-panel {
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left-width: 4px;
    border-radius: 0.5rem;
    padding: 1rem 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* Legenda dwuwymiarowa — barwa = rok, odcień = składowa (custom, lekki blok — nie natywna DxChartLegend). */
.tx-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0.25rem 0 0.75rem;
}

.tx-trend-legend-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

.tx-trend-legend-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
}

.tx-trend-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.tx-trend-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Klucz odcienia składowej (neutralny — pełny dół Autodesk / rozjaśniony góra Pozostałe). */
.tx-trend-swatch-dark {
    background: #555b61;
}

.tx-trend-swatch-light {
    background: #b8bdc2;
}

.tx-trend-matrix {
    margin-top: 1rem;
}

.tx-trend-matrix-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.tx-trend-matrix-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Rozbicie A/P pod kwotą komórki (opcjonalne — „Pokaż rozbicie"). */
.tx-matrix-breakdown {
    display: block;
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #5a6b7a);
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Moduł Urlopy/Nieobecności (IMPL-009 E4/E5/E6, UX-009 „Paleta i tokeny CSS").
   Kolory kalendarza i badge WYŁĄCZNIE przez klasy CSS (CSP self — NFR-009-03/
   AC-009-11); zero inline Style. Tło appointmentu = TYP, obramowanie/krycie =
   STATUS; badge listy/karty = status.
   ============================================================================ */
:root {
    --vac-badge-radius: 4px;
    --vac-appt-opacity-tentative: 0.6;
}

/* — Subnav badge „Do zatwierdzenia N" (tylko Edit). — */
.vac-subnav-badge {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: #b8860b;
    border-radius: 1rem;
    text-decoration: none;
}

.vac-subnav-badge:hover {
    background: #a2760a;
}

/* — Lista: filtr-widok, znacznik „(Ty)", akcje w wierszu. — */
.vac-viewtoggle {
    display: inline-flex;
    gap: 0.35rem;
}

.vac-you {
    margin-left: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #00609C;
}

.vac-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.vac-row-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #00609C;
    text-decoration: none;
}

.vac-row-link:hover {
    text-decoration: underline;
}

.vac-row-btn {
    font-size: 0.85rem;
    font-weight: 600;
    color: #00609C;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.vac-row-btn:hover {
    text-decoration: underline;
}

.vac-row-preview {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #5a6b7a);
    font-style: italic;
}

/* — Formularz: strefy podpowiedzi z rezerwacją wysokości + segment części dnia. — */
.vac-form-wrap {
    max-width: 720px;
}

.vac-form-hint-zone {
    min-height: 1.6rem;
}

.vac-form-hint-zone .tx-form-hint {
    margin: 0.3rem 0 0;
}

.vac-portion-toggle {
    display: inline-flex;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

.vac-overlap {
    max-width: 720px;
    margin-top: 0.5rem;
}

/* — Karta: oś statusu, panel decyzji, akcje właściciela, szczegóły. — */
.vac-status-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.vac-status-node {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
    background: #f1f4f7;
    border-radius: 1rem;
}

.vac-status-node:not(:last-child)::after {
    content: "→";
    margin-left: 0.6rem;
    color: #adb5bd;
}

.vac-status-node--active {
    color: #fff;
    background: #00609C;
}

.vac-decision {
    max-width: 720px;
    margin: 0.75rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-left: 4px solid #00609C;
    border-radius: 0.5rem;
}

.vac-decision-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--psp-navy, #002448);
    margin-bottom: 0.3rem;
}

.vac-decision-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.vac-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0;
}

.vac-tab {
    padding: 1.25rem 0.25rem;
    max-width: 720px;
}

.vac-details {
    max-width: 720px;
    margin: 0;
}

.vac-details-row {
    display: flex;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #eef1f4;
}

.vac-details-row dt {
    flex: 0 0 160px;
    font-weight: 600;
    color: var(--bs-secondary-color, #5a6b7a);
    margin: 0;
}

.vac-details-row dd {
    margin: 0;
    color: var(--psp-navy, #002448);
}

/* — Home: skrót urlopów. — */
.vac-home {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.vac-home-block {
    flex: 1 1 260px;
}

.vac-home-block h3 {
    font-size: 1rem;
    color: var(--psp-navy, #002448);
    margin: 0 0 0.5rem;
}

.vac-home-counters,
.vac-home-absent {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vac-home-counters li {
    padding: 0.2rem 0;
}

.vac-home-counters a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--psp-navy, #002448);
    font-weight: 600;
}

.vac-home-alert a {
    color: #c62828;
}

.vac-home-absent li {
    padding: 0.2rem 0;
    color: var(--psp-navy, #002448);
}

.vac-home-links {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

/* — Kalendarz: polski toolbar, legenda, appointment (kolor przez CssClass). — */
.vac-cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.vac-cal-nav {
    display: inline-flex;
    gap: 0.4rem;
}

.vac-cal-month {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--psp-navy, #002448);
}

.vac-cal-toolbar > .dxbl-btn {
    margin-left: auto;
}

.vac-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

.vac-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

.vac-legend-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
}

/* Appointment: pełne pokrycie chipa; tło = typ, obramowanie/krycie = status. */
.vac-appt {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 0.35rem;
    border-radius: 3px;
    overflow: hidden;
}

.vac-appt-text {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.vac-appt--approved {
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.vac-appt--registered {
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.vac-appt--registered::after {
    content: "•";
    margin-left: 0.25rem;
    color: rgba(255, 255, 255, 0.9);
}

.vac-appt--submitted {
    border: 1px dashed rgba(255, 255, 255, 0.9);
    opacity: var(--vac-appt-opacity-tentative);
}

/* Tooltip PL. */
.vac-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 200px;
}

.vac-tooltip p {
    margin: 0;
}

.vac-tooltip-name {
    font-weight: 700;
    color: var(--psp-navy, #002448);
}

.vac-tooltip-note {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #5a6b7a);
}

.vac-tooltip a {
    margin-top: 0.35rem;
}

/* ── Paleta barw wg TYPU (tło appointmentu + swatch legendy). Biały tekst — kontrast AA. ── */
.vac-type--wypoczynkowy { background-color: #2e7d32; }
.vac-type--nazadanie { background-color: #66bb6a; }
.vac-type--bezplatny { background-color: #757575; }
.vac-type--okolicznosciowy { background-color: #7e57c2; }
.vac-type--opiekunczy { background-color: #f9a825; }
.vac-type--opieka-dziecko { background-color: #ffb74d; }
.vac-type--sila-wyzsza { background-color: #ef6c00; }
.vac-type--macierzynski { background-color: #ec407a; }
.vac-type--rodzicielski { background-color: #d81b60; }
.vac-type--ojcowski { background-color: #f06292; }
.vac-type--wychowawczy { background-color: #ad1457; }
.vac-type--l4 { background-color: #c62828; }
.vac-type--delegacja { background-color: #1565c0; }
.vac-type--inne { background-color: #455a64; }

/* ── Badge statusu (lista + karta + tooltip). ── */
.vac-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    border-radius: var(--vac-badge-radius);
    white-space: nowrap;
}

.vac-badge--draft { background-color: #9e9e9e; }
.vac-badge--submitted { background-color: #f9a825; color: #3a2e00; }
.vac-badge--approved { background-color: #2e7d32; }
.vac-badge--rejected { background-color: #c62828; }
.vac-badge--cancelled { background-color: #bdbdbd; text-decoration: line-through; }
.vac-badge--registered { background-color: #1565c0; }