/* =====================================================================================
   app.cieslak.WebUI — jedyny arkusz pakietu (aplikacja linkuje tylko ten plik).
   Standard nazw: docs/T2026000306/standard-nazw.md.
   Sekcje: 1 tokeny · 2 palety i statusy · 3 baza · 4 ikony · 5 powłoka · 6 nawigacja ·
           7 zakładki · 8 podstrona · 9 komponenty · 10 logowanie
   ===================================================================================== */

/* ===== 1. TOKENY ===================================================================== */

:root {
    /* Skala odstępów — reguły używają wyłącznie tych wartości albo tokenów semantycznych poniżej. */
    --webui-space-2xs: 0.125rem;
    --webui-space-xs: 0.25rem;
    --webui-space-sm: 0.375rem;
    --webui-space-md: 0.5rem;
    --webui-space-lg: 0.75rem;
    --webui-space-xl: 1rem;
    --webui-space-2xl: 1.5rem;
    --webui-space-3xl: 2rem;

    /* Odstępy semantyczne */
    --webui-content-inset: var(--webui-space-md); /* odstęp treści i menu od krawędzi — jeden dla całej powłoki */
    --webui-section-gap: var(--webui-space-xl);   /* odstęp między sekcjami/kartami treści podstrony */
    --webui-topbar-padding: 0.625rem;
    --webui-control-height: 2rem;

    /* Promienie */
    --webui-radius-sm: 0.25rem;
    --webui-radius-md: 0.5rem;
    --webui-radius-lg: 0.625rem;

    /* Skala rozmiaru czcionki (średni); warianty w html[data-webui-size] */
    --webui-icon-size: 1.25rem;
    --webui-icon-size-sm: 1rem;
    --webui-avatar-size: 2rem;
    --webui-avatar-margin-inline-start: 0.75rem;
    --webui-topbar-font-size: 0.875rem;
    --webui-topbar-line-height: 1.25rem;
    --webui-tab-font-size: 0.875rem;
    --webui-badge-font-size: 0.8rem;
    --webui-badge-padding-block: 0.15rem;
    --webui-badge-padding-inline: 0.5rem;
    --webui-page-title-font-size: 1.35em;
}

html[data-webui-size="small"] {
    --webui-icon-size: 1rem;
    --webui-avatar-size: 1.5rem;
    --webui-avatar-margin-inline-start: 0.5rem;
    --webui-topbar-font-size: 0.75rem;
    --webui-topbar-line-height: 1rem;
    --webui-tab-font-size: 0.8rem;
    --webui-badge-font-size: 0.7rem;
    --webui-badge-padding-block: 0.1rem;
    --webui-badge-padding-inline: 0.375rem;
    --webui-page-title-font-size: 1.15em;
}

html[data-webui-size="large"] {
    --webui-icon-size: 1.5rem;
    --webui-avatar-size: 2.5rem;
    --webui-avatar-margin-inline-start: 1rem;
    --webui-topbar-font-size: 1rem;
    --webui-topbar-line-height: 1.5rem;
    --webui-tab-font-size: 1rem;
    --webui-badge-font-size: 0.9rem;
    --webui-badge-padding-block: 0.2rem;
    --webui-badge-padding-inline: 0.625rem;
    --webui-page-title-font-size: 1.55em;
}

/* ===== 2. PALETY I STATUSY =========================================================== */

/* =====================================================================================
   PALETY KOLORÓW (Indigo / Lagoon / Cobalt / Copper × jasny / ciemny)
   Atrybuty na <html>: data-webui-palette="indigo|lagoon|cobalt|copper" (brak = własna para
   motywów konsumenta) oraz data-webui-theme="light|dark". Ustawia je webui-theme-init.js
   przed pierwszym malowaniem i WebUIThemeService przy każdej zmianie. Motyw na <html> obejmuje
   również popupy i menu renderowane poza powłoką.

   Warstwy tokenów:
   1. bazowe — tylko w blokach palet (wartości ze specyfikacji; C#: WebUIPalettes; próbki: .webui-swatch),
   2. pochodne — wyliczane color-mix z bazowych, raz dla trybu,
   3. semantyczne statusów — zależą od trybu, nigdy od palety (C#: WebUIStatusColors).
   Tokeny palet NIE mają wartości w :root — miejsca użycia podają fallback na tokeny Fluent,
   dzięki czemu przy własnej parze motywów wygląd pozostaje dotychczasowy.
   Mapowanie na tokeny DevExpress (--dxds-*) jest w themes/webui-fluent-bridge.css.
   ===================================================================================== */

html[data-webui-palette="indigo"][data-webui-theme="light"] {
    --webui-page: #EEF0FA; --webui-nav: #E0E3F4; --webui-card: #FAFAFF;
    --webui-accent: #5B5FC7; --webui-accent-text: #4F53B8; --webui-on-accent: #FFFFFF;
    --webui-text: #1B1F3B;
    --webui-login-from: #D8DEFA; --webui-login-to: #EDEBFA;
}
html[data-webui-palette="indigo"][data-webui-theme="dark"] {
    --webui-page: #12172A; --webui-nav: #181E35; --webui-card: #202640;
    --webui-accent: #989BF0; --webui-accent-text: #A9ACF4; --webui-on-accent: #12172A;
    --webui-text: #E6E8F7;
    --webui-login-from: #151A35; --webui-login-to: #352C63;
}
html[data-webui-palette="lagoon"][data-webui-theme="light"] {
    --webui-page: #EAF5F1; --webui-nav: #DAECE7; --webui-card: #F8FCFA;
    --webui-accent: #018574; --webui-accent-text: #006457; --webui-on-accent: #FFFFFF;
    --webui-text: #10302B;
    --webui-login-from: #CCE9E1; --webui-login-to: #E8F6F1;
}
html[data-webui-palette="lagoon"][data-webui-theme="dark"] {
    --webui-page: #0E2326; --webui-nav: #112B2F; --webui-card: #183236;
    --webui-accent: #56C9B6; --webui-accent-text: #6FD3C2; --webui-on-accent: #0E2326;
    --webui-text: #DDF1EC;
    --webui-login-from: #0D2E32; --webui-login-to: #145A58;
}
html[data-webui-palette="cobalt"][data-webui-theme="light"] {
    --webui-page: #E8F1FC; --webui-nav: #DCE8F7; --webui-card: #F8FBFF;
    --webui-accent: #0F6CBD; --webui-accent-text: #0E5FA6; --webui-on-accent: #FFFFFF;
    --webui-text: #0E1B2E;
    --webui-login-from: #D2E5FA; --webui-login-to: #EBF4FF;
}
html[data-webui-palette="cobalt"][data-webui-theme="dark"] {
    --webui-page: #101D32; --webui-nav: #15243B; --webui-card: #1B2B44;
    --webui-accent: #69ABEB; --webui-accent-text: #7DB8F0; --webui-on-accent: #101D32;
    --webui-text: #E3ECF8;
    --webui-login-from: #10233F; --webui-login-to: #154D77;
}
html[data-webui-palette="copper"][data-webui-theme="light"] {
    --webui-page: #F5EEE8; --webui-nav: #EBDED3; --webui-card: #FCF8F3;
    --webui-accent: #B4542E; --webui-accent-text: #9C4526; --webui-on-accent: #FFFFFF;
    --webui-text: #2B211C;
    --webui-login-from: #F0D8C9; --webui-login-to: #F7EFE8;
}
html[data-webui-palette="copper"][data-webui-theme="dark"] {
    --webui-page: #211D1C; --webui-nav: #29211E; --webui-card: #312724;
    --webui-accent: #E6956B; --webui-accent-text: #EDA883; --webui-on-accent: #211D1C;
    --webui-text: #F3E7DE;
    --webui-login-from: #2C1D1B; --webui-login-to: #583224;
}

/* Pochodne — tryb jasny */
html[data-webui-palette][data-webui-theme="light"] {
    --webui-text-muted: color-mix(in oklab, var(--webui-text) 70%, var(--webui-card));
    --webui-text-disabled: color-mix(in oklab, var(--webui-text) 40%, var(--webui-card));
    --webui-border: color-mix(in oklab, var(--webui-text) 13%, var(--webui-card));
    --webui-border-strong: color-mix(in oklab, var(--webui-text) 40%, var(--webui-card));
    --webui-hover: color-mix(in oklab, var(--webui-text) 5%, var(--webui-card));
    --webui-pressed: color-mix(in oklab, var(--webui-text) 10%, var(--webui-card));
    --webui-selection: color-mix(in oklab, var(--webui-accent) 13%, var(--webui-card));
    --webui-selection-hover: color-mix(in oklab, var(--webui-accent) 20%, var(--webui-card));
    --webui-panel-header: color-mix(in oklab, var(--webui-accent) 5%, var(--webui-card));
    --webui-nav-hover: color-mix(in oklab, var(--webui-text) 6%, var(--webui-nav));
    --webui-page-hover: color-mix(in oklab, var(--webui-text) 5%, var(--webui-page));
    --webui-input-bg: var(--webui-card);
    --webui-shadow-color: color-mix(in oklab, var(--webui-text) 12%, transparent);
    --webui-shadow-sm: 0 1px 2px var(--webui-shadow-color), 0 0 1px var(--webui-shadow-color);
    --webui-shadow-md: 0 4px 16px var(--webui-shadow-color), 0 1px 3px var(--webui-shadow-color);
    --webui-brand-mark-1: var(--webui-accent);
    --webui-brand-mark-2: color-mix(in oklab, var(--webui-accent) 55%, var(--webui-card));
}

/* Pochodne — tryb ciemny (cienie słabo widoczne → zawsze z ramką) */
html[data-webui-palette][data-webui-theme="dark"] {
    --webui-text-muted: color-mix(in oklab, var(--webui-text) 72%, var(--webui-card));
    --webui-text-disabled: color-mix(in oklab, var(--webui-text) 42%, var(--webui-card));
    --webui-border: color-mix(in oklab, var(--webui-text) 17%, var(--webui-card));
    --webui-border-strong: color-mix(in oklab, var(--webui-text) 42%, var(--webui-card));
    --webui-hover: color-mix(in oklab, var(--webui-text) 8%, var(--webui-card));
    --webui-pressed: color-mix(in oklab, var(--webui-text) 14%, var(--webui-card));
    --webui-selection: color-mix(in oklab, var(--webui-accent) 22%, var(--webui-card));
    --webui-selection-hover: color-mix(in oklab, var(--webui-accent) 30%, var(--webui-card));
    --webui-panel-header: color-mix(in oklab, var(--webui-accent) 8%, var(--webui-card));
    --webui-nav-hover: color-mix(in oklab, var(--webui-text) 8%, var(--webui-nav));
    --webui-page-hover: color-mix(in oklab, var(--webui-text) 7%, var(--webui-page));
    --webui-input-bg: color-mix(in oklab, var(--webui-page) 50%, var(--webui-card));
    --webui-shadow-color: rgb(0 0 0 / 0.35);
    --webui-shadow-sm: 0 1px 2px var(--webui-shadow-color);
    --webui-shadow-md: 0 6px 20px var(--webui-shadow-color), 0 1px 3px var(--webui-shadow-color);
    --webui-brand-mark-1: var(--webui-accent);
    --webui-brand-mark-2: color-mix(in oklab, var(--webui-accent) 55%, var(--webui-page));
}

html[data-webui-palette] {
    --webui-login-bg: linear-gradient(135deg, var(--webui-login-from) 0%, var(--webui-login-to) 100%);
    --webui-login-card: var(--webui-card);
    --webui-login-footer: var(--webui-text-muted);
    background-color: var(--webui-page);
    color: var(--webui-text);
}

/* Semantyczne kolory statusów — zależne wyłącznie od trybu (także przy własnej parze motywów) */
:root,
html[data-webui-theme="light"] {
    --webui-status-blue: #2F6FDB;
    --webui-status-green: #2E8B3E;
    --webui-status-orange: #E07A1F;
    --webui-status-red: #D23B3B;
    --webui-status-cyan: #1597B8;
    --webui-status-purple: #8A4FC0;
    --webui-status-violet: #5B4BC4;
    --webui-status-pink: #C2458A;
    --webui-status-neutral: #6B7280;
    --webui-status-bg-amount: 15%;
    --webui-status-fg-mix: black;
    --webui-status-fg-amount: 78%;
}

html[data-webui-theme="dark"] {
    --webui-status-blue: #5B9BF0;
    --webui-status-green: #5CC46E;
    --webui-status-orange: #F0A04B;
    --webui-status-red: #F0716B;
    --webui-status-cyan: #4CC7E0;
    --webui-status-purple: #C08CEB;
    --webui-status-violet: #A594F0;
    --webui-status-pink: #F07AB8;
    --webui-status-neutral: #9CA3AF;
    --webui-status-bg-amount: 24%;
    --webui-status-fg-mix: white;
    --webui-status-fg-amount: 72%;
}

/* ===== 3. BAZA ======================================================================= */

html,
body,
#app {
    height: 100%;
    margin: 0;
}

body {
    letter-spacing: var(--dxds-letter-spacing-base-md);
    background-color: var(--webui-page, var(--dxds-color-surface-neutral-subdued-rest));
}

*,
::after,
::before {
    box-sizing: border-box;
}

/* ===== 4. IKONY ====================================================================== */
/* webui-icon (baza) + webui-icon-<plik SVG> (glif) + webui-icon--sm | webui-icon--md (rozmiar).
   Kolor z currentColor. W C# stałe WebUIIcons.*. Jedna klasa na plik w images/icons. */

.webui-icon {
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.webui-icon--md {
    width: var(--webui-icon-size);
    height: var(--webui-icon-size);
}

.webui-icon--sm {
    width: var(--webui-icon-size-sm);
    height: var(--webui-icon-size-sm);
}

/* DevExpress nadaje ikonom przycisków własny rozmiar — przebijamy go rozmiarem pakietu. */
.dxbl-image.webui-icon.webui-icon--md,
.dxbl-btn-icon.webui-icon.webui-icon--md {
    width: var(--webui-icon-size) !important;
    height: var(--webui-icon-size) !important;
}

.dxbl-image.webui-icon.webui-icon--sm,
.dxbl-btn-icon.webui-icon.webui-icon--sm {
    width: var(--webui-icon-size-sm) !important;
    height: var(--webui-icon-size-sm) !important;
}

.webui-icon-add { mask-image: url("images/icons/add.svg"); -webkit-mask-image: url("images/icons/add.svg"); }
.webui-icon-ai-chat { mask-image: url("images/icons/ai-chat.svg"); -webkit-mask-image: url("images/icons/ai-chat.svg"); }
.webui-icon-alert { mask-image: url("images/icons/alert.svg"); -webkit-mask-image: url("images/icons/alert.svg"); }
.webui-icon-arrow-export-up { mask-image: url("images/icons/arrow-export-up.svg"); -webkit-mask-image: url("images/icons/arrow-export-up.svg"); }
.webui-icon-arrow-left { mask-image: url("images/icons/arrow-left.svg"); -webkit-mask-image: url("images/icons/arrow-left.svg"); }
.webui-icon-arrow-swap { mask-image: url("images/icons/arrow-swap.svg"); -webkit-mask-image: url("images/icons/arrow-swap.svg"); }
.webui-icon-arrow-sync { mask-image: url("images/icons/arrow-sync.svg"); -webkit-mask-image: url("images/icons/arrow-sync.svg"); }
.webui-icon-bell { mask-image: url("images/icons/bell.svg"); -webkit-mask-image: url("images/icons/bell.svg"); }
.webui-icon-board { mask-image: url("images/icons/board.svg"); -webkit-mask-image: url("images/icons/board.svg"); }
.webui-icon-briefcase { mask-image: url("images/icons/briefcase.svg"); -webkit-mask-image: url("images/icons/briefcase.svg"); }
.webui-icon-building { mask-image: url("images/icons/building.svg"); -webkit-mask-image: url("images/icons/building.svg"); }
.webui-icon-building-multiple { mask-image: url("images/icons/building-multiple.svg"); -webkit-mask-image: url("images/icons/building-multiple.svg"); }
.webui-icon-calendar { mask-image: url("images/icons/calendar.svg"); -webkit-mask-image: url("images/icons/calendar.svg"); }
.webui-icon-call { mask-image: url("images/icons/call.svg"); -webkit-mask-image: url("images/icons/call.svg"); }
.webui-icon-chevron-down { mask-image: url("images/icons/chevron-down.svg"); -webkit-mask-image: url("images/icons/chevron-down.svg"); }
.webui-icon-chevron-up { mask-image: url("images/icons/chevron-up.svg"); -webkit-mask-image: url("images/icons/chevron-up.svg"); }
.webui-icon-clock { mask-image: url("images/icons/clock.svg"); -webkit-mask-image: url("images/icons/clock.svg"); }
.webui-icon-column-chooser { mask-image: url("images/icons/column-chooser.svg"); -webkit-mask-image: url("images/icons/column-chooser.svg"); }
.webui-icon-copy { mask-image: url("images/icons/copy.svg"); -webkit-mask-image: url("images/icons/copy.svg"); }
.webui-icon-data-area { mask-image: url("images/icons/data-area.svg"); -webkit-mask-image: url("images/icons/data-area.svg"); }
.webui-icon-data-histogram { mask-image: url("images/icons/data-histogram.svg"); -webkit-mask-image: url("images/icons/data-histogram.svg"); }
.webui-icon-data-pie { mask-image: url("images/icons/data-pie.svg"); -webkit-mask-image: url("images/icons/data-pie.svg"); }
.webui-icon-data-trending { mask-image: url("images/icons/data-trending.svg"); -webkit-mask-image: url("images/icons/data-trending.svg"); }
.webui-icon-data-usage { mask-image: url("images/icons/data-usage.svg"); -webkit-mask-image: url("images/icons/data-usage.svg"); }
.webui-icon-dismiss { mask-image: url("images/icons/dismiss.svg"); -webkit-mask-image: url("images/icons/dismiss.svg"); }
.webui-icon-document-search { mask-image: url("images/icons/document-search.svg"); -webkit-mask-image: url("images/icons/document-search.svg"); }
.webui-icon-document-text { mask-image: url("images/icons/document-text.svg"); -webkit-mask-image: url("images/icons/document-text.svg"); }
.webui-icon-edit { mask-image: url("images/icons/edit.svg"); -webkit-mask-image: url("images/icons/edit.svg"); }
.webui-icon-eye-close { mask-image: url("images/icons/eye-close.svg"); -webkit-mask-image: url("images/icons/eye-close.svg"); }
.webui-icon-eye-open { mask-image: url("images/icons/eye-open.svg"); -webkit-mask-image: url("images/icons/eye-open.svg"); }
.webui-icon-filter { mask-image: url("images/icons/filter.svg"); -webkit-mask-image: url("images/icons/filter.svg"); }
.webui-icon-filter-add { mask-image: url("images/icons/filter-add.svg"); -webkit-mask-image: url("images/icons/filter-add.svg"); }
.webui-icon-flash { mask-image: url("images/icons/flash.svg"); -webkit-mask-image: url("images/icons/flash.svg"); }
.webui-icon-gauge { mask-image: url("images/icons/gauge.svg"); -webkit-mask-image: url("images/icons/gauge.svg"); }
.webui-icon-github { mask-image: url("images/icons/github.svg"); -webkit-mask-image: url("images/icons/github.svg"); }
.webui-icon-globe { mask-image: url("images/icons/globe.svg"); -webkit-mask-image: url("images/icons/globe.svg"); }
.webui-icon-inbox { mask-image: url("images/icons/inbox.svg"); -webkit-mask-image: url("images/icons/inbox.svg"); }
.webui-icon-key { mask-image: url("images/icons/key.svg"); -webkit-mask-image: url("images/icons/key.svg"); }
.webui-icon-link { mask-image: url("images/icons/link.svg"); -webkit-mask-image: url("images/icons/link.svg"); }
.webui-icon-lock-closed { mask-image: url("images/icons/lock-closed.svg"); -webkit-mask-image: url("images/icons/lock-closed.svg"); }
.webui-icon-lock-open { mask-image: url("images/icons/lock-open.svg"); -webkit-mask-image: url("images/icons/lock-open.svg"); }
.webui-icon-mail { mask-image: url("images/icons/mail.svg"); -webkit-mask-image: url("images/icons/mail.svg"); }
.webui-icon-more-horizontal { mask-image: url("images/icons/more-horizontal.svg"); -webkit-mask-image: url("images/icons/more-horizontal.svg"); }
.webui-icon-navigation { mask-image: url("images/icons/navigation.svg"); -webkit-mask-image: url("images/icons/navigation.svg"); }
.webui-icon-organization { mask-image: url("images/icons/organization.svg"); -webkit-mask-image: url("images/icons/organization.svg"); }
.webui-icon-pause { mask-image: url("images/icons/pause.svg"); -webkit-mask-image: url("images/icons/pause.svg"); }
.webui-icon-people-community { mask-image: url("images/icons/people-community.svg"); -webkit-mask-image: url("images/icons/people-community.svg"); }
.webui-icon-people-team { mask-image: url("images/icons/people-team.svg"); -webkit-mask-image: url("images/icons/people-team.svg"); }
.webui-icon-person { mask-image: url("images/icons/person.svg"); -webkit-mask-image: url("images/icons/person.svg"); }
.webui-icon-person-add { mask-image: url("images/icons/person-add.svg"); -webkit-mask-image: url("images/icons/person-add.svg"); }
.webui-icon-phone-desktop { mask-image: url("images/icons/phone-desktop.svg"); -webkit-mask-image: url("images/icons/phone-desktop.svg"); }
.webui-icon-play-circle { mask-image: url("images/icons/play-circle.svg"); -webkit-mask-image: url("images/icons/play-circle.svg"); }
.webui-icon-print { mask-image: url("images/icons/print.svg"); -webkit-mask-image: url("images/icons/print.svg"); }
.webui-icon-save { mask-image: url("images/icons/save.svg"); -webkit-mask-image: url("images/icons/save.svg"); }
.webui-icon-settings { mask-image: url("images/icons/settings.svg"); -webkit-mask-image: url("images/icons/settings.svg"); }
.webui-icon-shield { mask-image: url("images/icons/shield.svg"); -webkit-mask-image: url("images/icons/shield.svg"); }
.webui-icon-sign-out { mask-image: url("images/icons/sign-out.svg"); -webkit-mask-image: url("images/icons/sign-out.svg"); }
.webui-icon-task-list { mask-image: url("images/icons/task-list.svg"); -webkit-mask-image: url("images/icons/task-list.svg"); }
.webui-icon-task-list-square-person { mask-image: url("images/icons/task-list-square-person.svg"); -webkit-mask-image: url("images/icons/task-list-square-person.svg"); }
.webui-icon-timer { mask-image: url("images/icons/timer.svg"); -webkit-mask-image: url("images/icons/timer.svg"); }
.webui-icon-top-speed { mask-image: url("images/icons/top-speed.svg"); -webkit-mask-image: url("images/icons/top-speed.svg"); }
.webui-icon-trash { mask-image: url("images/icons/trash.svg"); -webkit-mask-image: url("images/icons/trash.svg"); }
.webui-icon-weather-moon { mask-image: url("images/icons/weather-moon.svg"); -webkit-mask-image: url("images/icons/weather-moon.svg"); }
.webui-icon-weather-sunny { mask-image: url("images/icons/weather-sunny.svg"); -webkit-mask-image: url("images/icons/weather-sunny.svg"); }

/* Flagi języków: webui-flag (baza) + webui-flag-<kod kraju> (obraz z images/flags). Kolorowe — w odróżnieniu
   od ikon nie są maską. Aplikacja dodaje brakującą flagę własną klasą .webui-flag-xx { background-image }. */
.webui-flag {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--webui-icon-size);
    height: calc(var(--webui-icon-size) * 0.72);
    border-radius: var(--webui-space-2xs);
    background: center / cover no-repeat;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}

.dxbl-image.webui-flag,
.dxbl-btn-icon.webui-flag {
    width: var(--webui-icon-size) !important;
    height: calc(var(--webui-icon-size) * 0.72) !important;
}

.webui-flag-pl { background-image: url("images/flags/pl.svg"); }
.webui-flag-gb { background-image: url("images/flags/gb.svg"); }

/* ===== 5. POWŁOKA ==================================================================== */

.webui-shell {
    height: 100vh;
    height: 100dvh; /* dvh: poprawna wysokość na mobile (pasek adresu) — fallback 100vh powyżej */
    display: flex;
    flex-direction: column;
    background: var(--webui-page, var(--dxds-color-surface-neutral-default-rest));
}

/* --- Górny pasek --- */

.webui-topbar {
    padding: var(--webui-topbar-padding);
    box-shadow: var(--webui-shadow-sm, 0 0.125rem 0.25rem 0 #00000024, 0 0 0.125rem 0 #0000001F);
    z-index: 103;
    background-color: var(--webui-nav, var(--dxds-color-surface-neutral-default-rest));
    font-size: var(--webui-topbar-font-size);
    line-height: var(--webui-topbar-line-height);
}

.webui-topbar-content,
.webui-brand,
.webui-topbar-actions {
    display: flex;
    align-items: center;
}

.webui-topbar-content {
    min-height: var(--webui-control-height);
}

/* Stała sekcja tożsamości (hamburger + marka) — zawsze widoczna, NIE zwijana przez
   adaptacyjny DxToolbar. Toolbar zajmuje resztę szerokości i wyrównuje akcje do prawej. */
.webui-topbar-start {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.webui-topbar-toolbar {
    flex: 1 1 auto;
    min-width: 0;
}

.webui-menu-toggle {
    flex-shrink: 0;
}

.webui-brand {
    height: 100%;
}

.webui-brand-logo {
    width: var(--webui-icon-size);
    height: var(--webui-icon-size);
    margin-inline: var(--webui-space-lg) var(--webui-space-xs);
}

.webui-brand-title {
    color: var(--dxds-color-content-neutral-default-rest);
    font-family: var(--dxds-font-family-sans-serif);
    font-weight: 400;
    text-align: start;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0;
}

.webui-topbar-item {
    display: flex;
    align-items: center;
    height: 100%;
}

.webui-topbar-actions {
    gap: var(--webui-space-xs);
}

/* Pozycja górnego paska w stanie „włączone" (np. dzwonek przy otwartym panelu powiadomień). */
.dxbl-btn.webui-topbar-item--active,
.webui-topbar-item--active .dxbl-btn {
    background-color: var(--webui-selection, var(--dxds-color-surface-neutral-default-selected));
    color: var(--webui-accent-text, var(--dxds-color-content-primary-default-rest));
}

/* Licznik powiadomień: podpis pozycji dzwonka stylowany jak znaczek. */
.webui-topbar-notifications > span:not(.dxbl-image),
.webui-topbar-notifications .dxbl-toolbar-item-text {
    min-width: 1.125rem;
    padding: 0 var(--webui-space-xs);
    border-radius: 999px;
    background: var(--webui-status-red);
    color: var(--webui-on-accent, var(--dxds-color-content-neutral-default-static-light-rest, white));
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
}

/* Próbka palety w selektorze (IconCssClass pozycji toolbara) — kolory w bieżącym trybie.
   Wartości = kolory bazowe palet (sekcja 2); trzecia kopia obok WebUIPalettes w C#. */
.webui-swatch {
    --webui-swatch-page: #EEF0FA; --webui-swatch-nav: #E0E3F4; --webui-swatch-accent: #5B5FC7;
    border-radius: 50%;
    background: conic-gradient(from 225deg,
        var(--webui-swatch-accent) 0 50%,
        var(--webui-swatch-nav) 0 75%,
        var(--webui-swatch-page) 0);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}
.webui-swatch,
.dxbl-image.webui-swatch,
.dxbl-btn-icon.webui-swatch {
    width: var(--webui-icon-size) !important;
    height: var(--webui-icon-size) !important;
    min-width: var(--webui-icon-size);
    flex-shrink: 0;
}
.webui-swatch--indigo { --webui-swatch-page: #EEF0FA; --webui-swatch-nav: #E0E3F4; --webui-swatch-accent: #5B5FC7; }
.webui-swatch--lagoon { --webui-swatch-page: #EAF5F1; --webui-swatch-nav: #DAECE7; --webui-swatch-accent: #018574; }
.webui-swatch--cobalt { --webui-swatch-page: #E8F1FC; --webui-swatch-nav: #DCE8F7; --webui-swatch-accent: #0F6CBD; }
.webui-swatch--copper { --webui-swatch-page: #F5EEE8; --webui-swatch-nav: #EBDED3; --webui-swatch-accent: #B4542E; }
html[data-webui-theme="dark"] .webui-swatch--indigo { --webui-swatch-page: #12172A; --webui-swatch-nav: #202640; --webui-swatch-accent: #989BF0; }
html[data-webui-theme="dark"] .webui-swatch--lagoon { --webui-swatch-page: #0E2326; --webui-swatch-nav: #183236; --webui-swatch-accent: #56C9B6; }
html[data-webui-theme="dark"] .webui-swatch--cobalt { --webui-swatch-page: #101D32; --webui-swatch-nav: #1B2B44; --webui-swatch-accent: #69ABEB; }
html[data-webui-theme="dark"] .webui-swatch--copper { --webui-swatch-page: #211D1C; --webui-swatch-nav: #312724; --webui-swatch-accent: #E6956B; }

/* Aktywna pozycja w rozwijanym menu górnego paska (paleta, tryb, język, rozmiar czcionki):
   tekst + pierścień próbki + znacznik — nie tylko kolor. */
.webui-menu-item--active,
.webui-menu-item--active .dxbl-menu-item-text,
.webui-menu-item--active .dxbl-toolbar-item-text {
    font-weight: 600;
    color: var(--webui-accent-text, var(--dxds-color-content-primary-default-rest));
}
.webui-menu-item--active .webui-swatch {
    box-shadow: 0 0 0 1px var(--webui-card, var(--dxds-color-surface-neutral-default-rest)),
                0 0 0 3px var(--webui-accent-text, var(--dxds-color-content-primary-default-rest));
}
.webui-menu-item--active::after {
    content: "\2713";
    margin-inline-start: auto;
    padding-inline-start: var(--webui-space-lg);
    font-weight: 600;
}

/* Na wąskim ekranie znika marka (logo i nazwa aplikacji), a selektory języka i palety zwijają się do samej
   flagi / próbki (pełna nazwa w tooltipie i w rozwijanym menu). Podpis przycisku toolbara to <span> bez klasy. */
@media (max-width: 839px) {
    .webui-brand {
        display: none;
    }


    .webui-topbar-toolbar .webui-language-item > span:not([class]),
    .webui-topbar-toolbar .webui-palette-item > span:not([class]) {
        display: none;
    }
}

/* Orientacja pozioma o niskiej wysokości (np. telefon landscape ~360px wys.): skompaktuj pasek,
   by lista menu w overlay miała miejsce i scrollowała się wewnętrznie zamiast wypychać treść. */
@media (max-height: 480px) and (orientation: landscape) {
    .webui-topbar {
        padding-block: var(--webui-space-xs);
    }
}

/* --- Awatar i menu użytkownika --- */

.webui-avatar-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.webui-avatar {
    width: var(--webui-avatar-size);
    height: var(--webui-avatar-size);
    margin-inline-start: var(--webui-avatar-margin-inline-start);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--webui-selection, color-mix(in oklab, var(--webui-status-blue) var(--webui-status-bg-amount), var(--dxds-color-surface-neutral-default-rest)));
    color: var(--webui-accent-text, color-mix(in oklab, var(--webui-status-blue) var(--webui-status-fg-amount), var(--webui-status-fg-mix)));
    font-size: var(--webui-topbar-font-size);
    line-height: var(--webui-topbar-line-height);
    font-weight: 600;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.webui-avatar--image {
    object-fit: cover;
    background-color: transparent;
}

.webui-user-menu {
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: var(--webui-space-2xs);
    padding: var(--webui-space-md);
    /* Menu użytkownika jest częścią górnego paska — skaluje się tym samym tokenem. */
    font-size: var(--webui-topbar-font-size);
}

.webui-user-menu-header {
    display: flex;
    flex-direction: column;
    gap: var(--webui-space-2xs);
    padding: var(--webui-space-sm) var(--webui-space-md) var(--webui-space-md);
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    margin-bottom: var(--webui-space-xs);
}

.webui-user-menu-header strong {
    font-size: var(--webui-topbar-font-size);
}

.webui-user-menu-header span {
    color: var(--dxds-color-content-neutral-subdued-rest);
    /* Adres e-mail nieco mniejszy niż nazwa, ale skalowany razem z górnym paskiem
       (0.857 ≈ relacja 12px/14px ze stanu Średni). */
    font-size: calc(var(--webui-topbar-font-size) * 0.857);
}

.webui-user-menu-item {
    min-height: var(--webui-control-height);
    display: flex;
    align-items: center;
    gap: var(--webui-space-md);
    border: 0;
    background: transparent;
    color: var(--dxds-color-content-neutral-default-rest);
    border-radius: var(--webui-radius-sm);
    padding: var(--webui-space-xs) var(--webui-space-md);
    text-align: start;
    cursor: pointer;
    font-size: var(--webui-topbar-font-size);
}

.webui-user-menu-item:hover {
    background: var(--dxds-color-surface-neutral-default-hovered);
}

/* --- Układ: menu + treść --- */

.webui-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.webui-main-content {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Wspólny kontener treści menu w obu trybach (panel splittera i drawer). Daje odstęp od krawędzi
   i przekazuje ograniczoną wysokość do drzewa nawigacji, które scrolluje się wewnętrznie. */
.webui-menu-body {
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: var(--webui-content-inset);
}

/* Szeroki ekran: DxSplitter. Tło obszaru treści = tło strony palety (DxSplitter domyślnie ma kolor karty).
   Padding paneli DevExpress jest zerowany — odstępy daje wyłącznie --webui-content-inset. */
.dxbl-splitter.webui-shell-splitter {
    background-color: var(--webui-page, var(--dxds-color-surface-neutral-default-rest));
    /* Arkusze DevExpress ładują się po webui.css — przy równej specyficzności wygrywają, dlatego kolory
       ich elementów ustawiamy zmiennymi --dxbl-*, a nie nadpisaniem właściwości. */
    --dxbl-splitter-separator-bg: var(--webui-nav, var(--dxds-color-surface-neutral-default-rest));
}

.dxbl-splitter.webui-shell-splitter .dxbl-splitter-pane > .dxbl-splitter-pane-content.webui-menu-pane,
.dxbl-splitter.webui-shell-splitter .dxbl-splitter-pane > .dxbl-splitter-pane-content.webui-content-pane {
    padding: 0;
    overflow: hidden;
}

.webui-menu-pane {
    background: var(--webui-nav, var(--dxds-color-surface-neutral-default-rest));
}

/* Separator (strzałka zwijania + uchwyt zmiany szerokości) jest wizualnie częścią panelu menu:
   ma jego tło, a ramka oddzielająca menu od treści biegnie po prawej krawędzi separatora. */
.webui-shell-splitter .dxbl-splitter-separator,
.webui-shell-splitter .dxbl-splitter-horizontal-separator {
    border-inline-end: 1px solid var(--dxds-color-border-neutral-default-rest);
    cursor: col-resize;
    transition: background-color 0.15s ease;
    min-width: var(--webui-space-md);
}

.webui-shell-splitter .dxbl-splitter-separator:hover,
.webui-shell-splitter .dxbl-splitter-horizontal-separator:hover {
    --dxbl-splitter-separator-bg: var(--webui-nav-hover, var(--dxds-color-surface-neutral-default-hovered));
    border-inline-end-color: var(--webui-accent, var(--dxds-color-border-primary-default-rest));
}

/* Wąski ekran: menu jako DxDrawer (Overlap) ma NAKŁADAĆ się na treść, nie spychać jej w dół.
   DevExpress dla stanu closed trzyma panel jako position:relative, przez co pusty panel rezerwuje
   pionowo miejsce. Przebijamy wyższą specyficznością (dołożony .dxbl-drawer), bez !important. */
.webui-menu-drawer,
.webui-notifications-drawer {
    height: 100%;
}

.webui-menu-drawer.dxbl-drawer.dxbl-drawer-overlap > .dxbl-drawer-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
}

.webui-menu-drawer.dxbl-drawer > .dxbl-drawer-content,
.webui-notifications-drawer.dxbl-drawer > .dxbl-drawer-content {
    height: 100%;
}

/* Tło i paddingi panelu drawera ustawiamy zmiennymi DevExpress (--dxbl-drawer-*), nie nadpisaniem reguł.
   Odstęp w menu daje .webui-menu-body, więc body drawera ma padding 0. */
.dxbl-drawer.webui-menu-drawer {
    --dxbl-drawer-panel-bg: var(--webui-nav, var(--dxds-color-surface-neutral-default-rest));
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 0;
}

.webui-menu-drawer .dxbl-drawer-panel {
    max-width: 92vw;
    box-shadow: var(--webui-shadow-md, 0 0.5rem 1.5rem #00000033);
}

.webui-menu-drawer .dxbl-drawer-body {
    overflow: hidden;
}

/* Obszar treści: jeden odstęp od krawędzi na szerokim i wąskim ekranie. */
.webui-body {
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: var(--webui-content-inset);
}

.webui-content {
    height: 100%;
    overflow: auto;
    position: relative;
}

/* Podstrona sama scrolluje swoją treść (webui-page-body). */
.webui-content:has(> .webui-page) {
    overflow: hidden;
}

/* --- Panel powiadomień (z prawej; na szerokim ekranie odsuwa treść, na wąskim ją przykrywa) --- */

.webui-notifications-drawer.dxbl-drawer.dxbl-drawer-overlap > .dxbl-drawer-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
}

.dxbl-drawer.webui-notifications-drawer {
    --dxbl-drawer-panel-bg: var(--webui-nav, var(--dxds-color-surface-neutral-default-rest));
    --dxbl-drawer-panel-header-bg: transparent;
    --dxbl-drawer-panel-header-padding-x: var(--webui-content-inset);
    --dxbl-drawer-panel-header-padding-y: var(--webui-content-inset);
    --dxbl-drawer-panel-body-padding-x: var(--webui-content-inset);
    --dxbl-drawer-panel-body-padding-y: var(--webui-content-inset);
}

.webui-notifications-drawer .dxbl-drawer-panel {
    max-width: 92vw;
}

/* Nagłówek panelu: jeden odstęp z każdej strony (DevExpress 26.1 ma własne, nierówne paddingi pionowe). */
.dxbl-drawer.webui-notifications-drawer > .dxbl-drawer-panel .dxbl-drawer-header {
    padding: var(--webui-content-inset);
}

.webui-notifications-drawer.dxbl-drawer-overlap .dxbl-drawer-panel {
    box-shadow: var(--webui-shadow-md, 0 0.5rem 1.5rem #00000033);
}

.webui-notifications-drawer .dxbl-drawer-body {
    overflow: auto;
}

/* Treść panelu na pełną szerokość (body drawera DevExpress jest kontenerem flex). */
.webui-notifications-body {
    width: 100%;
    min-width: 0;
}

.webui-notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--webui-space-md);
    width: 100%;
    min-height: var(--webui-control-height);
}

.webui-notifications-title {
    font-weight: 600;
    font-size: var(--webui-page-title-font-size);
    line-height: 1;
    padding-inline-start: var(--webui-space-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 6. NAWIGACJA (drzewo w menu) ================================================== */

.webui-nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--webui-space-sm);
    min-width: 0;
    overflow: hidden;
}

.webui-nav-tree {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain; /* brak scroll-chaining do tła gdy overlay otwarty na mobile */
}

/* Pole filtra i lista pozycji stoją równo z krawędzią menu — odstęp daje wyłącznie .webui-menu-body.
   (DevExpress 26.1 dodaje własny margines pola filtra i padding listy; zerujemy je wyższą specyficznością.) */
.webui-nav-tree.dxbl-treeview .dxbl-navigation-filter {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 var(--webui-space-sm);
}

.webui-nav-tree.dxbl-treeview .dxbl-scroll-viewer-content > .dxbl-treeview-items-container {
    padding: 0;
}

.webui-nav-tree .dxbl-navigation-filter input:placeholder-shown ~ .dxbl-edit-btn-clear,
.webui-nav-tree .dxbl-navigation-filter input:placeholder-shown ~ * .dxbl-edit-btn-clear,
.webui-nav-tree .dxbl-navigation-filter .dxbl-edit-btn-clear:has(+ input:placeholder-shown) {
    display: none;
}

.webui-nav-tree .dxbl-treeview-item-content {
    padding-block: 0.2rem;
}

/* Liść na najwyższym poziomie: bez rezerwy na przycisk rozwijania — ikona pozycji stoi przy lewej krawędzi,
   w kolumnie strzałek grup. Poziomy zagnieżdżone zachowują rezerwę (wcięcie względem grupy). */
.webui-nav-tree .dxbl-scroll-viewer-content > .dxbl-treeview-items-container
    > .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn.dxbl-invisible {
    display: none;
}

.webui-nav-footer {
    margin-top: auto;
    padding-top: var(--webui-space-sm);
    border-top: 1px solid var(--dxds-color-border-neutral-default-rest);
}

/* ===== 7. ZAKŁADKI =================================================================== */

.webui-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.webui-tabs-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    background: var(--webui-page, var(--dxds-color-surface-neutral-default-rest));
}

.webui-tabs-list {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
}

.webui-tabs-actions {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.webui-tabs-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* odstęp oddziela treść od paska zakładek; dół wykorzystuje pełną wysokość obszaru */
    padding-block-start: var(--webui-content-inset);
}

.webui-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--webui-space-sm);
    min-height: var(--webui-control-height);
    max-width: 14rem;
    border: 0;
    border-inline-end: 1px solid var(--dxds-color-border-neutral-default-rest);
    background: transparent;
    color: var(--dxds-color-content-neutral-default-rest);
    padding: var(--webui-space-md);
    font-size: var(--webui-tab-font-size);
    cursor: pointer;
    white-space: nowrap;
}

.webui-tab--active {
    background: var(--webui-card, var(--dxds-color-surface-neutral-default-rest));
    box-shadow: inset 0 -2px 0 var(--webui-accent, var(--dxds-color-border-primary-default-rest));
}

.webui-tab:hover {
    background: var(--webui-page-hover, var(--dxds-color-surface-neutral-default-hovered));
}

.webui-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.webui-tab-close {
    display: inline-flex;
    border: 0;
    background: transparent;
    color: currentColor;
    padding: var(--webui-space-2xs);
    cursor: pointer;
}

/* Panel pojedynczej zakładki (keep-alive) = kontekst pozycjonowania + pełna wysokość obszaru treści.
   position:relative sprawia, że strony z position:absolute; inset:0 kotwiczą się do panelu (POD paskiem
   zakładek). Wszystkie otwarte zakładki są zamontowane; nieaktywne ukrywa atrybut hidden. */
.webui-tab-panel {
    position: relative;
    height: 100%;
    min-height: 0;
}

.webui-tab-panel[hidden] {
    display: none;
}

/* ===== 8. PODSTRONA ================================================================== */

.webui-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Pasek akcji podstrony (X, tytuł, akcje, Odśwież) w kolorze menu — odcina nagłówek od kart treści.
   Jeden wiersz: zamknięcie + tytuł po lewej, adaptywny DxToolbar, skrajnie z prawej Odśwież. Tytuł zajmuje
   najwyżej połowę wiersza i skraca się eliptycznie; DxToolbar zwija podpisy do ikon i przenosi nadmiar do menu. */
.webui-actionbar {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--webui-space-md);
    min-width: 0;
    padding: var(--webui-space-md);
    margin-bottom: var(--webui-content-inset);
    background-color: var(--webui-nav, var(--dxds-color-surface-neutral-deep-rest));
    border: var(--dxds-border-width-10, 1px) solid transparent;
    border-radius: var(--webui-radius-md);
    box-shadow: var(--webui-shadow-sm, none);
}

.webui-actionbar > .dxbl-toolbar {
    flex: 1 1 auto;
    min-width: 0;
}

.webui-actionbar .dxbl-toolbar {
    background-color: transparent;
}

.webui-actionbar .dxbl-btn:not(.dxbl-disabled):hover {
    background-color: var(--webui-nav-hover, var(--dxds-color-surface-neutral-deep-hovered));
}

/* Zaznaczona pozycja (np. zakres Tydzień/Miesiąc, otwarty panel filtrów) — „pigułka" w kolorze karty,
   jak aktywna zakładka. */
.webui-actionbar .dxbl-btn.dxbl-active:not(.dxbl-disabled),
.webui-actionbar .dxbl-btn.webui-actionbar-item--active:not(.dxbl-disabled) {
    background-color: var(--webui-card, var(--dxds-color-surface-neutral-default-rest));
    color: var(--webui-accent-text, var(--dxds-color-content-primary-default-rest));
    box-shadow: var(--webui-shadow-sm, none);
}

/* Tytuł zajmuje tyle, ile potrzebuje (najwyżej połowę wiersza — długa nazwa nie może wypchnąć akcji)
   i skraca się eliptycznie; całą resztę dostają akcje, więc podpisy znikają dopiero, gdy się nie mieszczą. */
.webui-actionbar-head {
    display: flex;
    align-items: center;
    gap: var(--webui-space-md);
    flex: 0 1 auto;
    max-width: 50%;
    min-width: 0;
    overflow: hidden;
}

.webui-actionbar-head .webui-page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webui-actionbar-tools {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    margin-inline-start: auto;
    overflow: hidden;
    container-type: inline-size;
}

/* Odświeżenie: skrajnie z prawej, poza toolbarem — nie kurczy się i nie trafia do menu „więcej". */
.webui-actionbar-end {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Przyciski poza toolbarem (X, Odśwież) wyglądają jak jego pozycje: zwykła grubość pisma. */
.webui-actionbar .dxbl-btn.webui-actionbar-btn {
    --dxbl-btn-font-weight: 400;
    font-weight: 400;
}

.webui-actionbar-tools--only {
    flex: 1 1 100%;
    margin-inline-start: 0;
}

.webui-actionbar-tools > .dxbl-toolbar {
    width: 100%;
    margin-inline-start: auto;
}

/* Podpisy pozostają widoczne zależnie od realnej szerokości paska, a nie viewportu.
   Gdy sam obszar akcji jest wąski, zostają ikony z tooltipami; DevExpress nadal
   przenosi dalszy nadmiar do menu adaptywnego. */
@container (max-width: 26rem) {
    .webui-actionbar-tools .dxbl-toolbar-btn:has(> .dxbl-image) span:not([class]) {
        display: none;
    }
}

/* Wąski ekran: zawsze same ikony z tooltipami, niezależnie od liczby akcji (także Odśwież).
   Pozycja bez ikony zachowuje napis — inaczej byłaby pustym przyciskiem. */
@media (max-width: 839px) {
    .webui-actionbar-tools .dxbl-toolbar-btn:has(> .dxbl-image) span:not([class]),
    .webui-actionbar-end .dxbl-btn-caption {
        display: none;
    }
}

/* Kompaktowa wyszukiwarka w pasku listy. DxToolbar NIE zwija itemów z własnym szablonem, więc pole
   kurczy się samo od 12rem do 7rem, gdy brakuje miejsca — reszta paska mieści się bez overflow. */
.webui-actionbar-search {
    flex: 0 1 12rem;
    min-width: 7rem;
    max-width: 12rem;
}

/* Rozwijane menu paska akcji (DxToolbar renderuje je w portalu). Wyraźna obwódka oddziela popup od tła
   w obu trybach — w ciemnym domyślny cień praktycznie znika. */
.dxbl-dropdown-dialog.dxbl-toolbar-dropdown {
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.webui-page-title-item {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline-start: var(--webui-space-md);
}

.webui-page-title {
    font-weight: 600;
    font-size: var(--webui-page-title-font-size);
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Tytuł złożony (np. badge + nazwa w jednej linii) — zalecany kontener dla TitleContent. */
.webui-page-title-group {
    display: inline-flex;
    align-items: center;
    gap: var(--webui-space-md);
    min-width: 0;
}

.webui-page-title-group > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wąski ekran: tytuł tekstowy podstrony jest ukryty (powtarza nazwę zakładki i zabiera miejsce akcjom);
   pasek z samym tytułem znika w całości. Własna treść tytułu (TitleContent) zostaje. */
@media (max-width: 839px) {
    .webui-actionbar .webui-page-title,
    .webui-actionbar .webui-page-title-item,
    .webui-actionbar--title-only {
        display: none;
    }
}

/* Panel filtrów listy (WebUIPanel z tytułem): pola i ich układ dostarcza aplikacja. Długi zestaw pól
   przewija się w panelu, żeby nie zabrać gridowi całej wysokości. */
.webui-page-filters {
    flex: 0 0 auto;
    max-height: 50%;
    margin-bottom: var(--webui-content-inset);
}

.webui-page-filters > .webui-panel-header {
    flex: 0 0 auto;
    padding-block: var(--webui-space-sm);
}

/* Nagłówek panelu filtrów: tytuł z lewej, „Wyczyść filtry" z prawej. */
.webui-page-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--webui-space-md);
    min-height: var(--webui-control-height);
}

.webui-page-filters-header .dxbl-btn.webui-actionbar-btn {
    --dxbl-btn-font-weight: 400;
    font-weight: 400;
}

.webui-page-filters > .webui-panel-body {
    min-height: 0;
    overflow-y: auto;
    padding: var(--webui-space-md) var(--webui-space-xl);
}

/* Wąski ekran: panel filtrów wysuwa się na wierzch listy (nie zabiera jej wysokości) i przewija się w sobie. */
@media (max-width: 839px) {
    .webui-panel.webui-page-filters {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 2;
        max-height: 100%;
        margin-bottom: 0;
        box-shadow: var(--webui-shadow-md, 0 0.5rem 1.5rem #00000033);
    }
}

.webui-page-body-wrap {
    position: relative;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    container: webui-page / inline-size;
}

.webui-page-body {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--webui-section-gap);
}

/* Elementy treści zachowują własną wysokość, a nadmiar przewija .webui-page-body. Bez tego kolumna flex
   ściska je do wysokości okna: panel ma overflow: hidden, więc jego minimalna wysokość to 0 i zamiast
   paska przewijania podstrony dostaje się obciętą zawartość paneli. */
.webui-page-body > * {
    flex-shrink: 0;
}

/* Lista: grid będący bezpośrednią treścią wypełnia całą wysokość i przewija wiersze w sobie
   (nagłówek kolumn stoi w miejscu) — podstrona nie dostaje drugiego paska przewijania.
   Inna treść listy (także grid z rodzeństwem, np. wykresem) przewija się jak dotąd. */
/* „Jedyna treść" = dokładnie jeden grid; DxGrid od 26.1 renderuje obok siebie własny portal okien
   (dxbl-popup-portal, wysokość 0) — nie liczy się on jako rodzeństwo, inaczej reguła nigdy by nie trafiła. */
.webui-page--list > .webui-page-body-wrap > .webui-page-body:has(> .dxbl-grid):not(:has(> :not(.dxbl-grid, .dxbl-popup-portal))):not(:has(> .dxbl-grid ~ .dxbl-grid)) {
    overflow: hidden;
}

.webui-page--list > .webui-page-body-wrap > .webui-page-body:has(> .dxbl-grid):not(:has(> :not(.dxbl-grid, .dxbl-popup-portal))):not(:has(> .dxbl-grid ~ .dxbl-grid)) > .dxbl-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.webui-page-body .dxbl-gridlayout {
    height: auto;
}

/* Układ szczegółów: panel boczny + treść główna; składa się do jednej kolumny, gdy brakuje szerokości
   treści (kontener podstrony), a poza podstroną — na wąskim ekranie. */
.webui-detail-layout {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(18rem, 28rem) minmax(0, 1fr);
    gap: var(--webui-space-md);
}

.webui-detail-layout-main {
    min-width: 0;
}

@container webui-page (max-width: 48rem) {
    .webui-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 839px) {
    .webui-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== 9. KOMPONENTY ================================================================= */

/* --- Panel --- */

.webui-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    background-color: var(--dxds-color-surface-neutral-default-rest);
    background-clip: border-box;
    border: var(--dxds-border-width-10, 1px) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--webui-radius-md);
    box-shadow: var(--webui-shadow-sm, none);
    overflow: hidden;
}

.webui-panel-header {
    padding: var(--webui-space-lg) var(--webui-space-xl);
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    background: var(--webui-panel-header, transparent);
    font-weight: 600;
}

.webui-panel-body {
    min-width: 0;
    padding: var(--webui-space-xl);
}

/* Treść panelu od krawędzi do krawędzi (grid, tabela, wykres). */
.webui-panel-body--flush {
    padding: 0;
}

/* Panel wypełnia wolną wysokość kontenera będącego kolumną flex (kolumna szczegółów, komórka siatki
   z własnym kontenerem flex aplikacji). Treść panelu staje się kolumną flex: dziecko zaprojektowane do
   wypełniania (min-height: 0) rozciąga się i przewija w sobie, a treść wyższa niż panel przewija się
   w treści panelu — nic nie jest obcinane. Klasa dla aplikacji: CssClass="webui-panel--fill". */
.webui-panel--fill {
    flex: 1 1 auto;
    min-height: 0;
}

.webui-panel--fill > .webui-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* --- Tabela (klasa dla aplikacji: zwykły <table class="webui-table">) --- */

.webui-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.webui-table th,
.webui-table td {
    padding: var(--webui-space-md) var(--webui-space-xl);
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.webui-table thead th {
    font-weight: 600;
    border-bottom-width: 2px;
    white-space: nowrap;
}

.webui-table tbody tr:last-child td {
    border-bottom: none;
}

.webui-table tbody tr:hover {
    background-color: var(--webui-hover, var(--dxds-color-surface-neutral-default-hovered));
}

/* --- Alert --- */

.webui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--webui-space-lg);
    padding: var(--webui-space-lg) var(--webui-space-xl);
    border-radius: var(--webui-radius-sm);
    line-height: 1.4;
}

.webui-alert-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    padding-top: var(--webui-space-2xs);
}

.webui-alert-main {
    flex: 1 1 auto;
    min-width: 0;
}

.webui-alert-title {
    font-weight: 600;
    margin-bottom: var(--webui-space-xs);
}

.webui-alert-content {
    overflow-wrap: break-word;
}

.webui-alert-content pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: var(--webui-space-md) 0 0;
    font-size: 0.85rem;
}

.webui-alert-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--webui-space-md);
}

.webui-alert-dismiss {
    flex: 0 0 auto;
}

/* Warianty — tokeny DevExpress Design System (jasny/ciemny obsługiwany przez motyw). */
.webui-alert--info {
    background-color: var(--dxds-color-surface-info-deep-rest);
    color: var(--dxds-color-content-info-default-rest);
}

.webui-alert--success {
    background-color: var(--dxds-color-surface-success-deep-rest);
    color: var(--dxds-color-content-success-default-rest);
}

.webui-alert--warning {
    background-color: var(--dxds-color-surface-warning-deep-rest);
    color: var(--dxds-color-content-warning-default-rest);
}

.webui-alert--danger {
    background-color: var(--dxds-color-surface-danger-deep-rest);
    color: var(--dxds-color-content-danger-default-rest);
}

/* --- Badge (klasa dla aplikacji: <span class="webui-badge webui-badge--success">) --- */

.webui-badge {
    display: inline-block;
    padding: var(--webui-badge-padding-block) var(--webui-badge-padding-inline);
    border-radius: var(--webui-space-lg);
    font-size: var(--webui-badge-font-size);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Warianty na semantycznych kolorach statusów (tło = rozcieńczony kolor na powierzchni, tekst =
   przyciemniony w trybie jasnym / rozjaśniony w ciemnym). Przypisanie statusu do wariantu należy do aplikacji. */
.webui-badge--primary { --webui-badge-hue: var(--webui-status-blue); }
.webui-badge--secondary { --webui-badge-hue: var(--webui-status-neutral); }
.webui-badge--success { --webui-badge-hue: var(--webui-status-green); }
.webui-badge--danger { --webui-badge-hue: var(--webui-status-red); }
.webui-badge--warning { --webui-badge-hue: var(--webui-status-orange); }
.webui-badge--info { --webui-badge-hue: var(--webui-status-cyan); }
.webui-badge--purple { --webui-badge-hue: var(--webui-status-purple); }
.webui-badge--violet { --webui-badge-hue: var(--webui-status-violet); }
.webui-badge--pink { --webui-badge-hue: var(--webui-status-pink); }
.webui-badge--dark { --webui-badge-hue: color-mix(in oklab, var(--webui-status-neutral) 70%, var(--webui-status-fg-mix)); }

.webui-badge[class*="webui-badge--"] {
    background-color: color-mix(in oklab, var(--webui-badge-hue) var(--webui-status-bg-amount), var(--webui-card, var(--dxds-color-surface-neutral-default-rest)));
    color: color-mix(in oklab, var(--webui-badge-hue) var(--webui-status-fg-amount), var(--webui-status-fg-mix));
}

/* --- Pozostałe --- */

.webui-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-rest) 82%, transparent);
    z-index: 10;
}

.webui-empty-state {
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--webui-space-lg);
    color: var(--dxds-color-content-neutral-subdued-rest);
    text-align: center;
}

.webui-info-row {
    display: grid;
    grid-template-columns: minmax(8rem, 35%) minmax(0, 1fr);
    gap: var(--webui-space-md);
    padding: var(--webui-space-sm) 0;
}

.webui-info-row-label {
    font-weight: 600;
}

.webui-info-row-value {
    min-width: 0;
}

/* Znak marki (cztery pola) — kolory z tokenów palety; bez palety barwy zastępcze. */
.webui-brand-mark .webui-brand-mark-1 { fill: var(--webui-brand-mark-1, #667eea); }
.webui-brand-mark .webui-brand-mark-2 { fill: var(--webui-brand-mark-2, #764ba2); }

/* ===== 10. LOGOWANIE ================================================================= */

.webui-login-page {
    min-height: 100vh;
    min-height: 100dvh; /* dvh: pełna wysokość ekranu logowania na mobile — fallback 100vh powyżej */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--webui-space-xl);
    background: var(--webui-login-bg, var(--dxds-color-surface-neutral-subdued-rest));
}

.webui-login-card {
    background: var(--webui-login-card, var(--dxds-color-surface-neutral-default-rest));
    color: var(--webui-text, var(--dxds-color-content-neutral-default-rest));
    border: 1px solid var(--webui-border, transparent);
    border-radius: var(--webui-radius-lg);
    box-shadow: var(--webui-shadow-md, 0 0.5rem 2rem rgba(0, 0, 0, 0.15));
    padding: 2.5rem var(--webui-space-3xl);
    width: 100%;
    max-width: 26.25rem;
}

.webui-login-card--embedded {
    margin-inline: auto;
}

.webui-login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--webui-space-md);
    margin-bottom: var(--webui-space-2xl);
}

.webui-login-logo {
    width: 3.5rem;
    height: 3.5rem;
}

.webui-login-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--webui-text, var(--dxds-color-content-neutral-default-rest));
}

.webui-login-subtitle {
    color: var(--webui-accent-text, var(--dxds-color-content-primary-default-rest));
    font-size: 0.95rem;
    font-weight: 500;
}

.webui-login-alert {
    display: flex;
    gap: var(--webui-space-md);
    color: color-mix(in oklab, var(--webui-status-red) var(--webui-status-fg-amount), var(--webui-status-fg-mix));
    background: color-mix(in oklab, var(--webui-status-red) var(--webui-status-bg-amount), var(--webui-card, var(--dxds-color-surface-neutral-default-rest)));
    border-radius: var(--webui-radius-sm);
    padding: var(--webui-space-lg);
    margin-bottom: var(--webui-space-xl);
}

/* Układ ekranów anonimowych (logowanie): pełnoekranowe tło, wyśrodkowana treść, stopka. */
.webui-auth-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
    background: var(--webui-login-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
}

.webui-auth-layout-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--webui-space-xl);
    min-width: 0;
}

.webui-auth-layout-footer {
    padding: var(--webui-space-lg) var(--webui-space-xl);
    text-align: center;
    color: var(--webui-login-footer, rgba(255, 255, 255, 0.7));
}