:root {
    --webboard-icon-size: 1.25rem;
    --webboard-avatar-size: 2rem;
    --webboard-avatar-margin-left: 0.75rem;
    --webboard-header-padding: 0.625rem;
    --webboard-toolbar-margin-bottom: 0.5rem;
    --webboard-module-content-padding: 1rem;
    --webboard-content-gutter: 0.5rem; /* spójna „rynna" wokół treści strony (= padding menu); nieskalowana */
    --webboard-toolbar-padding-x: 0.375rem;
    --webboard-messagelist-padding-x: 1.25rem;
    --webboard-messagelist-padding-y: 2rem;
    --webboard-submitarea-padding-x: 1.25rem;
    --webboard-submitarea-padding-y: 0.5rem;
    --webboard-badge-font-size: 0.8rem;
    --webboard-badge-padding-y: 0.15rem;
    --webboard-badge-padding-x: 0.5rem;
    --webboard-grid-title-font-size: 1.35em;
    --webboard-grid-avatar-size: 28px;
    --webboard-grid-avatar-font-size: 0.75rem;
    --webboard-border-radius: 0.25rem;
    --webboard-topbar-font-size: 0.875rem;
    --webboard-topbar-line-height: 1.25rem;
    --webboard-topbar-icon-size: 1rem;
    --webboard-topbar-control-size: 2rem;
    --webboard-tab-font-size: 0.875rem;
    --webboard-drawer-control-gap: 0.5rem;
}

.medium-size {
    --webboard-icon-size: 1.25rem;
    --webboard-avatar-size: 2rem;
    --webboard-avatar-margin-left: 0.75rem;
    --webboard-topbar-font-size: 0.875rem;
    --webboard-topbar-line-height: 1.25rem;
    --webboard-topbar-icon-size: 1rem;
    --webboard-topbar-control-size: 2rem;
    --webboard-tab-font-size: 0.875rem;
    --webboard-toolbar-padding-x: 0.375rem;
    --webboard-messagelist-padding-x: 1.25rem;
    --webboard-messagelist-padding-y: 2rem;
    --webboard-submitarea-padding-x: 1.25rem;
    --webboard-submitarea-padding-y: 0.5rem;
    --webboard-badge-font-size: 0.8rem;
    --webboard-badge-padding-y: 0.15rem;
    --webboard-badge-padding-x: 0.5rem;
    --webboard-grid-title-font-size: 1.35em;
    --webboard-grid-avatar-size: 28px;
    --webboard-grid-avatar-font-size: 0.75rem;
}

.small-size {
    --webboard-icon-size: 1rem;
    --webboard-avatar-size: 1.5rem;
    --webboard-avatar-margin-left: 0.5rem;
    --webboard-topbar-font-size: 0.75rem;
    --webboard-topbar-line-height: 1rem;
    --webboard-topbar-icon-size: 0.875rem;
    --webboard-topbar-control-size: 1.5rem;
    --webboard-tab-font-size: 0.8rem;
    --webboard-toolbar-padding-x: 0.25rem;
    --webboard-messagelist-padding-x: 0.75rem;
    --webboard-messagelist-padding-y: 1.5rem;
    --webboard-submitarea-padding-x: 0.75rem;
    --webboard-submitarea-padding-y: 0.375rem;
    --webboard-badge-font-size: 0.7rem;
    --webboard-badge-padding-y: 0.1rem;
    --webboard-badge-padding-x: 0.375rem;
    --webboard-grid-title-font-size: 1.15em;
    --webboard-grid-avatar-size: 22px;
    --webboard-grid-avatar-font-size: 0.65rem;
}

.large-size {
    --webboard-icon-size: 1.5rem;
    --webboard-avatar-size: 2.5rem;
    --webboard-avatar-margin-left: 1rem;
    --webboard-topbar-font-size: 1rem;
    --webboard-topbar-line-height: 1.5rem;
    --webboard-topbar-icon-size: 1.125rem;
    --webboard-topbar-control-size: 2.5rem;
    --webboard-tab-font-size: 1rem;
    --webboard-toolbar-padding-x: 0.5rem;
    --webboard-messagelist-padding-x: 1.75rem;
    --webboard-messagelist-padding-y: 2.5rem;
    --webboard-submitarea-padding-x: 1.75rem;
    --webboard-submitarea-padding-y: 0.625rem;
    --webboard-badge-font-size: 0.9rem;
    --webboard-badge-padding-y: 0.2rem;
    --webboard-badge-padding-x: 0.625rem;
    --webboard-grid-title-font-size: 1.55em;
    --webboard-grid-avatar-size: 34px;
    --webboard-grid-avatar-font-size: 0.85rem;
}

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

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

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

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

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

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

.webboard-header-content {
    display: flex;
    min-height: 2rem;
}

/* Stała sekcja tożsamości (hamburger + brand) — zawsze widoczna, NIE zwijana przez
   adaptacyjny DxToolbar. Toolbar zajmuje resztę szerokości i wyrównuje akcje do prawej. */
.webboard-brand-section {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.webboard-toolbar {
    flex: 1 1 auto;
    min-width: 0;
}
.webboard-menu-toggle {
    flex-shrink: 0;
}

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

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

/* Wąski ekran: menu (DxDrawer Mode=Overlap) ma NAKŁADAĆ się na treść (overlay), nie
   spychać jej w dół. DevExpress dla stanu closed trzyma panel jako position:relative
   (reguła w adoptedStyleSheets), przez co pusty panel rezerwuje pionowo miejsce.
   Przebijamy WYŻSZĄ SPECYFICZNOŚCIĄ (dołożony .dxbl-drawer → 0,4,0), bez !important. */
.webboard-main-menu-drawer.dxbl-drawer.dxbl-drawer-overlap > .dxbl-drawer-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
}
.webboard-main-menu-drawer.dxbl-drawer.dxbl-drawer-overlap > .dxbl-drawer-content {
    height: 100%;
}

/* Body panelu drawera przekazuje ograniczoną wysokość do drzewa nawigacji, dzięki czemu lista menu
   scrolluje WEWNĘTRZNIE (kluczowe w orientacji poziomej / niskim viewporcie). Sam scroll realizuje
   .webboard-nav-tree (overflow:auto; min-height:0). */
.webboard-drawer-body {
    height: 100%;
    min-height: 0;
}

.webboard-module-content {
    height: 100%;
    overflow: auto;
    position: relative;
    /* tylko pionowa rynna — treść na pełną szerokość tab-bara (bez bocznego wcięcia) */
    padding-block: var(--webboard-content-gutter);
    padding-inline: 0;
}

.webboard-module-content:has(.webboard-list-page),
.webboard-module-content:has(.content-root) {
    /* zachowujemy rynnę z bazowej reguły; wewnętrzny scroll robi .page-body */
    overflow: hidden;
}

.webboard-brand {
    height: 100%;
}

.toolbar .custom-item,
.webboard-toolbar .custom-item {
    display: flex;
    align-items: center;
    height: 100%;
}

.webboard-brand-logo,
.webboard-brand .toolbar-logo,
.toolbar .toolbar-logo {
    width: var(--webboard-icon-size);
    height: var(--webboard-icon-size);
    margin-left: 0.75rem;
    margin-right: 0.25rem;
}

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

.small-size .toolbar .title {
    font-size: var(--dxds-font-size-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.medium-size .toolbar .title {
    font-size: var(--dxds-font-size-title-md);
    line-height: var(--dxds-line-height-title-md);
}

.large-size .toolbar .title {
    font-size: var(--dxds-font-size-title-lg);
    line-height: var(--dxds-line-height-title-lg);
}

.webboard-daily-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--webboard-topbar-font-size);
    line-height: var(--webboard-topbar-line-height);
    font-weight: 600;
    white-space: nowrap;
}

.webboard-daily-time .icon {
    width: var(--webboard-topbar-icon-size);
    height: var(--webboard-topbar-icon-size);
}

.webboard-topbar-icon-button {
    position: relative;
    width: var(--webboard-topbar-control-size);
    height: var(--webboard-topbar-control-size);
    border: 0;
    background: transparent;
    color: var(--dxds-color-content-neutral-default-rest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.webboard-topbar-icon-button .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.webboard-hamburger-button {
    margin-right: 0.125rem;
}

.webboard-topbar-text-button {
    height: var(--webboard-topbar-control-size);
    border: 0;
    background: transparent;
    color: var(--dxds-color-content-neutral-default-rest);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.25rem;
    font-family: var(--dxds-font-family-sans-serif);
    font-size: var(--webboard-topbar-font-size);
    font-weight: 400;
    line-height: var(--webboard-topbar-line-height);
    cursor: pointer;
    white-space: nowrap;
}

.webboard-topbar-text-button .chevron-down-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.webboard-topbar-dropdown,
.webboard-topbar-icon-dropdown {
    font-size: var(--webboard-topbar-font-size);
    line-height: var(--webboard-topbar-line-height);
}

.webboard-topbar-icon-dropdown {
    min-width: var(--webboard-topbar-control-size);
}

.webboard-notification-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.1875rem;
    border-radius: 999px;
    background: #ef5350;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.webboard-topbar-actions {
    gap: 0.25rem;
}

.avatar,
.webboard-avatar {
    width: var(--webboard-avatar-size);
    height: var(--webboard-avatar-size);
    margin-left: var(--webboard-avatar-margin-left);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #bbdefb;
    color: #1565c0;
    font-size: var(--webboard-topbar-font-size);
    line-height: var(--webboard-topbar-line-height);
    font-weight: 600;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.webboard-avatar-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

.webboard-avatar-button:not(:disabled) {
    cursor: pointer;
}

.webboard-avatar-button:disabled {
    cursor: default;
}

.webboard-avatar-image {
    width: var(--webboard-avatar-size);
    height: var(--webboard-avatar-size);
    margin-left: var(--webboard-avatar-margin-left);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

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

.avatar-item .avatar-label {
    padding: 0.5rem;
}

.webboard-user-menu {
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    /* Menu użytkownika jest częścią top-baru — skaluje się tym samym tokenem,
       więc tekst reaguje na selektor rozmiaru (Mały/Średni/Duży). */
    font-size: var(--webboard-topbar-font-size);
}

.webboard-user-menu-header {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem 0.5rem;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest);
    margin-bottom: 0.25rem;
}

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

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

.webboard-user-menu-item {
    min-height: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--dxds-color-content-neutral-default-rest);
    border-radius: var(--webboard-border-radius);
    padding: 0.25rem 0.5rem;
    text-align: left;
    cursor: pointer;
    font-size: var(--webboard-topbar-font-size);
}

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

.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;
}

.medium-icon {
    width: var(--webboard-icon-size);
    height: var(--webboard-icon-size);
}

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

.small-icon {
    width: 1rem;
    height: 1rem;
}

.dxbl-image.icon.small-icon,
.dxbl-btn-icon.icon.small-icon {
    width: 1rem !important;
    height: 1rem !important;
}

.hamburger-icon { mask-image: url("images/icons/navigation.svg"); -webkit-mask-image: url("images/icons/navigation.svg"); }
.sun-icon { mask-image: url("images/icons/weather-sunny.svg"); -webkit-mask-image: url("images/icons/weather-sunny.svg"); }
.moon-icon { mask-image: url("images/icons/weather-moon.svg"); -webkit-mask-image: url("images/icons/weather-moon.svg"); }
.timer-icon { mask-image: url("images/icons/timer.svg"); -webkit-mask-image: url("images/icons/timer.svg"); }
.bell-icon { mask-image: url("images/icons/bell.svg"); -webkit-mask-image: url("images/icons/bell.svg"); }
.github-icon { mask-image: url("images/icons/github.svg"); -webkit-mask-image: url("images/icons/github.svg"); }
.back-icon { mask-image: url("images/icons/arrow-left.svg"); -webkit-mask-image: url("images/icons/arrow-left.svg"); }
.copy-icon { mask-image: url("images/icons/copy.svg"); -webkit-mask-image: url("images/icons/copy.svg"); }
.refresh-icon { mask-image: url("images/icons/arrow-sync.svg"); -webkit-mask-image: url("images/icons/arrow-sync.svg"); }
.person-add-icon { mask-image: url("images/icons/person-add.svg"); -webkit-mask-image: url("images/icons/person-add.svg"); }
.sign-out-icon { mask-image: url("images/icons/sign-out.svg"); -webkit-mask-image: url("images/icons/sign-out.svg"); }
.call-icon { mask-image: url("images/icons/call.svg"); -webkit-mask-image: url("images/icons/call.svg"); }
.mail-icon { mask-image: url("images/icons/mail.svg"); -webkit-mask-image: url("images/icons/mail.svg"); }
.more-icon { mask-image: url("images/icons/more-horizontal.svg"); -webkit-mask-image: url("images/icons/more-horizontal.svg"); }
.ai-chat-icon { mask-image: url("images/icons/ai-chat.svg"); -webkit-mask-image: url("images/icons/ai-chat.svg"); }
.filter-icon { mask-image: url("images/icons/filter.svg"); -webkit-mask-image: url("images/icons/filter.svg"); }
.add-icon { mask-image: url("images/icons/add.svg"); -webkit-mask-image: url("images/icons/add.svg"); }
.edit-icon { mask-image: url("images/icons/edit.svg"); -webkit-mask-image: url("images/icons/edit.svg"); }
.trash-icon { mask-image: url("images/icons/trash.svg"); -webkit-mask-image: url("images/icons/trash.svg"); }
.column-chooser-icon { mask-image: url("images/icons/column-chooser.svg"); -webkit-mask-image: url("images/icons/column-chooser.svg"); }
.export-icon { mask-image: url("images/icons/arrow-export-up.svg"); -webkit-mask-image: url("images/icons/arrow-export-up.svg"); }
.print-icon { mask-image: url("images/icons/print.svg"); -webkit-mask-image: url("images/icons/print.svg"); }
.save-icon { mask-image: url("images/icons/save.svg"); -webkit-mask-image: url("images/icons/save.svg"); }
.play-icon { mask-image: url("images/icons/play-circle.svg"); -webkit-mask-image: url("images/icons/play-circle.svg"); }
.pause-icon { mask-image: url("images/icons/pause.svg"); -webkit-mask-image: url("images/icons/pause.svg"); }
.key-icon { mask-image: url("images/icons/key.svg"); -webkit-mask-image: url("images/icons/key.svg"); }
.settings-icon { mask-image: url("images/icons/settings.svg"); -webkit-mask-image: url("images/icons/settings.svg"); }
.dashboard-icon, .nav-dashboard-icon { mask-image: url("images/icons/board.svg"); -webkit-mask-image: url("images/icons/board.svg"); }
.calendar-icon, .nav-calendar-icon { mask-image: url("images/icons/calendar.svg"); -webkit-mask-image: url("images/icons/calendar.svg"); }
.library-icon { mask-image: url("images/icons/briefcase.svg"); -webkit-mask-image: url("images/icons/briefcase.svg"); }
.tools-icon { mask-image: url("images/icons/gauge.svg"); -webkit-mask-image: url("images/icons/gauge.svg"); }
.book-icon { mask-image: url("images/icons/document-text.svg"); -webkit-mask-image: url("images/icons/document-text.svg"); }
.person-icon { mask-image: url("images/icons/person.svg"); -webkit-mask-image: url("images/icons/person.svg"); }
.users-icon { mask-image: url("images/icons/people-team.svg"); -webkit-mask-image: url("images/icons/people-team.svg"); }
.building-icon { mask-image: url("images/icons/building.svg"); -webkit-mask-image: url("images/icons/building.svg"); }
.document-search-icon { mask-image: url("images/icons/document-search.svg"); -webkit-mask-image: url("images/icons/document-search.svg"); }
.chevron-down-icon { mask-image: url("images/icons/chevron-down.svg"); -webkit-mask-image: url("images/icons/chevron-down.svg"); }
.dismiss-icon { mask-image: url("images/icons/dismiss.svg"); -webkit-mask-image: url("images/icons/dismiss.svg"); }
.admin-icon { mask-image: url("images/icons/lock-closed.svg"); -webkit-mask-image: url("images/icons/lock-closed.svg"); }
.main-icon { mask-image: url("images/icons/phone-desktop.svg"); -webkit-mask-image: url("images/icons/phone-desktop.svg"); }
.management-icon { mask-image: url("images/icons/person.svg"); -webkit-mask-image: url("images/icons/person.svg"); }
.eye-open-icon { mask-image: url("images/icons/eye-open.svg"); -webkit-mask-image: url("images/icons/eye-open.svg"); }
.eye-close-icon { mask-image: url("images/icons/eye-close.svg"); -webkit-mask-image: url("images/icons/eye-close.svg"); }
.reports-icon { mask-image: url("images/icons/data-histogram.svg"); -webkit-mask-image: url("images/icons/data-histogram.svg"); }
.automation-icon { mask-image: url("images/icons/arrow-sync.svg"); -webkit-mask-image: url("images/icons/arrow-sync.svg"); }
.resize-icon { mask-image: url("images/icons/arrow-swap.svg"); -webkit-mask-image: url("images/icons/arrow-swap.svg"); }
.icon.nav-changesets-icon { mask-image: url("images/icons/arrow-swap.svg"); -webkit-mask-image: url("images/icons/arrow-swap.svg"); }
.icon.nav-grouptasks-icon { mask-image: url("images/icons/people-team.svg"); -webkit-mask-image: url("images/icons/people-team.svg"); }
.icon.nav-mytasks-icon { mask-image: url("images/icons/task-list-square-person.svg"); -webkit-mask-image: url("images/icons/task-list-square-person.svg"); }
.icon.nav-tasks-icon { mask-image: url("images/icons/task-list.svg"); -webkit-mask-image: url("images/icons/task-list.svg"); }
.icon.nav-backlog-icon { mask-image: url("images/icons/inbox.svg"); -webkit-mask-image: url("images/icons/inbox.svg"); }
.icon.nav-coordinator-icon { mask-image: url("images/icons/organization.svg"); -webkit-mask-image: url("images/icons/organization.svg"); }
.icon.nav-groups-icon { mask-image: url("images/icons/people-community.svg"); -webkit-mask-image: url("images/icons/people-community.svg"); }
.icon.nav-departments-icon { mask-image: url("images/icons/building.svg"); -webkit-mask-image: url("images/icons/building.svg"); }
.icon.nav-clients-icon { mask-image: url("images/icons/briefcase.svg"); -webkit-mask-image: url("images/icons/briefcase.svg"); }
.icon.nav-sprints-icon { mask-image: url("images/icons/top-speed.svg"); -webkit-mask-image: url("images/icons/top-speed.svg"); }
.icon.nav-users-icon { mask-image: url("images/icons/person.svg"); -webkit-mask-image: url("images/icons/person.svg"); }
.icon.nav-taskdist-icon { mask-image: url("images/icons/data-pie.svg"); -webkit-mask-image: url("images/icons/data-pie.svg"); }
.icon.nav-timetrack-icon { mask-image: url("images/icons/clock.svg"); -webkit-mask-image: url("images/icons/clock.svg"); }
.icon.nav-dailywork-icon { mask-image: url("images/icons/calendar.svg"); -webkit-mask-image: url("images/icons/calendar.svg"); }
.icon.nav-autorules-icon { mask-image: url("images/icons/flash.svg"); -webkit-mask-image: url("images/icons/flash.svg"); }
.icon.nav-autoexec-icon { mask-image: url("images/icons/play-circle.svg"); -webkit-mask-image: url("images/icons/play-circle.svg"); }
.icon.nav-eventtypes-icon { mask-image: url("images/icons/bell.svg"); -webkit-mask-image: url("images/icons/bell.svg"); }
.icon.nav-webhooks-icon { mask-image: url("images/icons/globe.svg"); -webkit-mask-image: url("images/icons/globe.svg"); }
.icon.nav-notifrules-icon { mask-image: url("images/icons/alert.svg"); -webkit-mask-image: url("images/icons/alert.svg"); }
.icon.nav-emailtpl-icon { mask-image: url("images/icons/mail.svg"); -webkit-mask-image: url("images/icons/mail.svg"); }
.icon.nav-auditlog-icon { mask-image: url("images/icons/document-search.svg"); -webkit-mask-image: url("images/icons/document-search.svg"); }
.icon.nav-roles-icon { mask-image: url("images/icons/shield.svg"); -webkit-mask-image: url("images/icons/shield.svg"); }
.icon.nav-permissions-icon { mask-image: url("images/icons/key.svg"); -webkit-mask-image: url("images/icons/key.svg"); }
.icon.nav-tenants-icon { mask-image: url("images/icons/building-multiple.svg"); -webkit-mask-image: url("images/icons/building-multiple.svg"); }
.icon.nav-settings-icon { mask-image: url("images/icons/settings.svg"); -webkit-mask-image: url("images/icons/settings.svg"); }
.icon.nav-smtp-icon { mask-image: url("images/icons/mail.svg"); -webkit-mask-image: url("images/icons/mail.svg"); }
.icon.nav-connections-icon { mask-image: url("images/icons/link.svg"); -webkit-mask-image: url("images/icons/link.svg"); }
.icon.nav-bgjobs-icon { mask-image: url("images/icons/clock.svg"); -webkit-mask-image: url("images/icons/clock.svg"); }
.icon.nav-hangfire-icon { mask-image: url("images/icons/gauge.svg"); -webkit-mask-image: url("images/icons/gauge.svg"); }
.icon.nav-logviewer-icon { mask-image: url("images/icons/document-text.svg"); -webkit-mask-image: url("images/icons/document-text.svg"); }

.content-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-root > .toolbar {
    padding: 0.5rem;
    margin-bottom: var(--webboard-toolbar-margin-bottom);
}

.webboard-header .toolbar {
    padding: 0;
    margin-bottom: 0;
}

.card {
    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-radius-10) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--webboard-border-radius);
}

.content-root > .card,
.webboard-panel,
.webboard-tab-header,
.webboard-tab-item,
.webboard-toolbar-button {
    transform: none;
}

.content-root > .card:hover,
.webboard-panel:hover,
.webboard-tab-header:hover,
.webboard-tab-item:hover,
.webboard-toolbar-button:hover {
    transform: none;
}

.grid-root {
    flex: 1 1 auto;
    min-height: 0;
    height: 90%;
    overflow-x: auto;
}

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

.page-body {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* odstęp między sekcjami/kartami treści (inna relacja niż rynna strony) */
    /* dolną rynnę zapewnia teraz host (tab-content / module-content) — usunięto padding-bottom: 1rem dla symetrii z górą */
}

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

.webboard-grid,
.fp-workboard-grid {
    height: 100%;
    border-radius: var(--webboard-border-radius);
}

/* Item tytułu w pasku podstrony — wyśrodkowanie w pionie + odstęp przed tytułem.
   (WorkBoard miał to w scoped CSS jako .wb-grid-title-item; w pakiecie globalnym brakowało.) */
.webboard-grid-title-item {
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline-start: 0.5rem;
}

.webboard-grid-title,
.fp-grid-title {
    font-weight: 600;
    font-size: var(--webboard-grid-title-font-size);
    line-height: 1;
    display: flex;
    align-items: center;
}

.webboard-badge,
.fp-badge {
    display: inline-block;
    padding: var(--webboard-badge-padding-y) var(--webboard-badge-padding-x);
    border-radius: 0.75rem;
    font-size: var(--webboard-badge-font-size);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.webboard-badge-primary, .fp-badge-primary { background-color: #bbdefb; color: #1565c0; }
.webboard-badge-secondary, .fp-badge-secondary { background-color: #e0e0e0; color: #424242; }
.webboard-badge-success, .fp-badge-success { background-color: #c8e6c9; color: #2e7d32; }
.webboard-badge-danger, .fp-badge-danger { background-color: #ffcdd2; color: #c62828; }
.webboard-badge-warning, .fp-badge-warning { background-color: #ffe0b2; color: #e65100; }
.webboard-badge-info, .fp-badge-info { background-color: #b3e5fc; color: #0277bd; }
.webboard-badge-purple, .fp-badge-purple { background-color: #e1bee7; color: #6a1b9a; }
.webboard-badge-dark, .fp-badge-dark { background-color: #cfd8dc; color: #37474f; }

.webboard-toolbar-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    border: 0;
    border-radius: var(--webboard-border-radius);
    background: transparent;
    color: var(--dxds-color-content-neutral-default-rest);
    padding: 0.25rem 0.5rem;
    font: inherit;
    cursor: pointer;
}

.webboard-toolbar-button:hover {
    background: var(--dxds-color-surface-neutral-default-hover);
}

.webboard-toolbar-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.webboard-toolbar-icon-button {
    width: 2rem;
    justify-content: center;
}

.webboard-nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    overflow: hidden;
}

.webboard-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 */
}

.webboard-nav-tree .dxbl-treeview-filter-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 0.375rem;
    box-sizing: border-box;
}

.webboard-nav-tree .dxbl-treeview-filter-panel .dxbl-text-edit,
.webboard-nav-tree .dxbl-treeview-filter-panel .dxbl-text-edit > *,
.webboard-nav-tree .dxbl-treeview-filter-panel .dxbl-text-edit-input,
.webboard-nav-tree .dxbl-treeview-filter-panel input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.webboard-nav-tree .dxbl-treeview-filter-panel .dxbl-text-edit {
    max-width: 100%;
}

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

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

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

.webboard-user-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.webboard-user-name {
    font-weight: 600;
}

.webboard-user-role {
    color: var(--dxds-color-content-neutral-subtle-rest);
    font-size: 0.75rem;
}

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

body.webboard-resizing {
    cursor: col-resize;
    user-select: none;
}

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

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

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

.webboard-tab-item.active {
    background: var(--dxds-color-surface-neutral-default-rest);
    color: var(--dxds-color-content-neutral-default-rest);
    box-shadow: inset 0 -2px 0 var(--dxds-color-border-primary-default-rest);
}

.webboard-tab-item:hover {
    background: var(--dxds-color-surface-neutral-default-hover);
}

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

.webboard-tab-close {
    border: 0;
    background: transparent;
    color: currentColor;
    padding: 0.125rem;
    cursor: pointer;
}

.webboard-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* górna rynna oddziela treść od tab-bara; dół wykorzystuje pełną wysokość obszaru */
    padding-block-start: var(--webboard-content-gutter);
    padding-block-end: 0;
    padding-inline: 0;
}

/* Panel pojedynczej zakładki (keep-alive) = kontekst pozycjonowania + pełna wysokość
   obszaru treści. position:relative sprawia, że strony-zawartość z position:absolute; inset:0
   kotwiczą się do panelu (POD paskiem zakładek), zamiast uciekać do pozycjonowanego przodka
   wyżej i zasłaniać .webboard-tab-header. height:100% wypełnia .webboard-tab-content
   (flex:1; overflow:auto). Wszystkie otwarte zakładki są zamontowane; nieaktywne ukrywa hidden. */
.webboard-tab-panel {
    position: relative;
    height: 100%;
    min-height: 0;
}

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

.webboard-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;
}

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

.webboard-detail-page {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(18rem, 28rem) minmax(0, 1fr);
    gap: 0.5rem;
}

.webboard-detail-main {
    min-width: 0;
}

/* Tytuł szczegółów: badge + nazwa w jednej linii (TitleContent w WebBoardDetailPage). */
.webboard-detail-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.webboard-detail-title > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pasek akcji podstrony — jeden wiersz: powrót+tytuł po lewej, adaptywny DxToolbar po prawej.
   Tytuł oddaje miejsce akcjom i skraca się eliptycznie. DxToolbar odpowiada za dalsze zwijanie
   podpisów do ikon i przenoszenie nadmiaru do menu. */
.webboard-actionbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.webboard-actionbar-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 55%;
    min-width: 0;
    overflow: hidden;
}

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

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

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

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

.webboard-actionbar-tools-only > .dxbl-toolbar {
    width: 100%;
}

/* 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) {
    .webboard-actionbar-tools .dxbl-toolbar-btn span:not([class]) {
        display: none;
    }
}

/* Kompaktowa wyszukiwarka wbudowana w pasek listy.
   DxToolbar NIE zwija custom-template itemów (jak ten DxTextBox), więc przy granicznych
   szerokościach search blokowałby zmieszczenie ostatnich akcji (np. „Odśwież" wypadał poza
   pasek). flex: 0 1 12rem pozwala mu KURCZYĆ się od 12rem do min 7rem, gdy brakuje miejsca
   (nie rośnie powyżej 12rem), dzięki czemu reszta paska mieści się bez overflow — a samo
   pole pozostaje widoczne i użyteczne. */
.webboard-toolbar-search {
    flex: 0 1 12rem;
    min-width: 7rem;
    max-width: 12rem;
}

/* Rozwijane menu paska akcji (sub-akcje typu „Eksport" i menu „więcej").
   DxToolbar renderuje je w portalu (poza overflow rodziców), więc NIE są przycinane.
   Problem był wizualny: w motywie ciemnym tło popupu (≈#252525) jest identyczne z tłem
   za nim, a domyślny czarny cień DX na ciemnym tle praktycznie znika — menu „zlewa się".
   Wyraźna obwódka oddziela popup od tła w obu motywach, niezależnie od cienia. */
.dxbl-dropdown-dialog.dxbl-toolbar-dropdown {
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.webboard-info-row {
    display: grid;
    grid-template-columns: minmax(8rem, 35%) minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.webboard-info-label {
    font-weight: 600;
}

.webboard-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: 1rem;
    background: var(--dxds-color-surface-neutral-subdued-rest, #f5f5f5);
}

.webboard-login-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 26.25rem;
}

.webboard-login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

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

.webboard-login-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

.webboard-login-subtitle {
    color: #667eea;
    font-size: 0.95rem;
    font-weight: 500;
}

.webboard-login-alert {
    display: flex;
    gap: 0.5rem;
    color: #c62828;
    background: #ffebee;
    border-radius: var(--webboard-border-radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .webboard-detail-page {
        grid-template-columns: 1fr;
    }
}

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