/* App-owned styles. Keep vendor CSS untouched and place project overrides here. */

:root {
    --app-admin-header-height: 75px;
    --app-login-logo-size: 220px;
    --app-content-footer-gap: 24px;
    --app-topbar-logo-height: 30px;
    --app-topbar-logo-max-width: 168px;
    --app-topbar-logo-sm-size: 30px;
    --app-mobile-radius-sm: 12px;
    --app-mobile-radius-md: 16px;
    --app-mobile-radius-lg: 22px;
    --app-mobile-shadow-panel: 0 1.25rem 3.5rem rgba(15, 23, 42, 0.18);
    --app-mobile-tap-target: 46px;
    --app-z-mobile-nav: 1003;
    --app-z-mobile-backdrop: 1004;
    --app-z-mobile-sheet: 1005;
    --app-z-mobile-sidebar: 1006;
    --app-safe-top: 0px;
    --app-safe-right: 0px;
    --app-safe-bottom: 0px;
    --app-safe-left: 0px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
}

body[data-layout="vertical"] .isvertical-topbar,
body[data-layout="vertical"] .ishorizontal-topbar {
    min-height: calc(var(--app-admin-header-height) + var(--app-safe-top));
    padding-top: var(--app-safe-top);
}

body[data-layout="vertical"] .navbar-header,
body[data-layout="vertical"] .header-item {
    height: var(--app-admin-header-height);
}

body[data-layout="vertical"] .page-content {
    padding-top: calc(var(--app-admin-header-height) + var(--app-safe-top));
}

body[data-layout="vertical"] .main-content .page-content {
    padding-bottom: calc(60px + var(--app-content-footer-gap));
}

.league-create-page {
    width: 100%;
}

.league-create-card {
    background: var(--app-ui-surface, #fff);
    border: 1px solid var(--app-ui-border, #e6eaf0);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    width: 100%;
}

.league-create-setup,
.league-team-picker {
    background: var(--app-ui-soft, #f8fafc);
    border: 1px solid var(--app-ui-border, #e5eaf1);
    border-radius: 8px;
    padding: 16px;
}

.league-create-setup__header,
.league-team-picker__header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.league-create-setup__header {
    justify-content: flex-start;
}

.league-create-setup__icon {
    align-items: center;
    background: rgba(47, 101, 203, 0.11);
    border: 1px solid rgba(47, 101, 203, 0.2);
    border-radius: 8px;
    color: var(--app-brand-accent, #2f65cb);
    display: inline-flex;
    flex: 0 0 40px;
    font-size: 20px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.league-create-panel,
.league-team-picker__group {
    background: var(--app-ui-surface, #fff);
    border: 1px solid var(--app-ui-border, #e7ebf1);
    border-radius: 8px;
    padding: 16px;
}

.league-create-panel__head,
.league-team-picker__toolbar,
.league-team-picker__filters,
.league-team-picker__actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.league-create-panel__head,
.league-team-picker__toolbar {
    justify-content: space-between;
    margin-bottom: 12px;
}

.league-create-eyebrow {
    color: var(--app-brand-accent, #2f65cb);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.league-create-switch-row {
    align-items: center;
    background: var(--app-ui-soft, #f8fafc);
    border: 1px solid var(--app-ui-border, #edf1f6);
    border-radius: 8px;
    display: flex;
    min-height: 38px;
    padding: 8px 10px;
}

.league-type-options {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.league-type-option {
    align-items: center;
    background: var(--app-ui-surface, #fff);
    border: 1px solid var(--app-ui-border, #e5eaf1);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto 32px minmax(0, 1fr);
    margin: 0;
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.league-type-option:hover,
.league-type-option.is-active {
    background: rgba(47, 101, 203, 0.08);
    border-color: #9dbaf3;
    box-shadow: 0 8px 18px rgba(47, 101, 203, 0.08);
}

.league-type-option__icon {
    align-items: center;
    background: rgba(47, 101, 203, 0.11);
    border-radius: 8px;
    color: var(--app-brand-accent, #2f65cb);
    display: inline-flex;
    font-size: 18px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.league-type-option__label,
.league-team-option__content strong {
    color: var(--bs-emphasis-color, #26334d);
    font-weight: 700;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.league-type-panels {
    border-top: 1px solid var(--app-ui-border, #edf1f6);
    padding-top: 12px;
}

.league-team-picker__header {
    flex-wrap: wrap;
}

.league-team-picker__toolbar,
.league-team-picker__filters {
    flex-wrap: wrap;
}

.league-team-picker__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.league-team-picker__filters {
    background: var(--app-ui-soft, #f8fafc);
    border: 1px solid var(--app-ui-border, #edf1f6);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 10px;
}

.league-team-picker__search-icon {
    color: #8a98ad;
    left: 11px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.league-team-picker__filters .form-control {
    padding-left: 34px;
}

.league-team-picker__options {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(58vh, 560px);
    overflow: auto;
    padding-right: 4px;
}

.league-team-option {
    align-items: flex-start;
    background: var(--app-ui-surface, #fff);
    border: 1px solid var(--app-ui-border, #edf1f6);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 9px;
    margin: 0;
    min-height: 48px;
    padding: 9px 10px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.league-team-option:hover,
.league-team-option.is-selected {
    background: rgba(47, 101, 203, 0.07);
    border-color: #b8cdf8;
}

.league-team-option.is-hidden {
    display: none;
}

.league-team-option__content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.league-team-option__content small {
    color: #8a98ad;
    font-size: 0.72rem;
}

.league-team-picker__empty {
    color: #8a98ad;
    grid-column: 1 / -1;
    padding: 18px 8px;
    text-align: center;
}

html[data-app-theme="dark"] .league-create-card,
body[data-bs-theme="dark"] .league-create-card,
[data-bs-theme="dark"] .league-create-card {
    background: var(--app-ui-surface, #20242a);
    border-color: var(--app-ui-border, rgba(255, 255, 255, 0.08));
    box-shadow: none;
}

html[data-app-theme="dark"] .league-create-card > .card-header,
body[data-bs-theme="dark"] .league-create-card > .card-header,
[data-bs-theme="dark"] .league-create-card > .card-header,
html[data-app-theme="dark"] .league-create-card > .card-body,
body[data-bs-theme="dark"] .league-create-card > .card-body,
[data-bs-theme="dark"] .league-create-card > .card-body {
    background: var(--app-ui-surface, #20242a);
    border-color: var(--app-ui-border, rgba(255, 255, 255, 0.08));
}

html[data-app-theme="dark"] .league-create-setup,
body[data-bs-theme="dark"] .league-create-setup,
[data-bs-theme="dark"] .league-create-setup,
html[data-app-theme="dark"] .league-team-picker,
body[data-bs-theme="dark"] .league-team-picker,
[data-bs-theme="dark"] .league-team-picker {
    background: var(--app-ui-soft, rgba(255, 255, 255, 0.04));
    border-color: var(--app-ui-border, rgba(255, 255, 255, 0.08));
}

html[data-app-theme="dark"] .league-create-panel,
body[data-bs-theme="dark"] .league-create-panel,
[data-bs-theme="dark"] .league-create-panel,
html[data-app-theme="dark"] .league-team-picker__group,
body[data-bs-theme="dark"] .league-team-picker__group,
[data-bs-theme="dark"] .league-team-picker__group,
html[data-app-theme="dark"] .league-type-option,
body[data-bs-theme="dark"] .league-type-option,
[data-bs-theme="dark"] .league-type-option,
html[data-app-theme="dark"] .league-team-option,
body[data-bs-theme="dark"] .league-team-option,
[data-bs-theme="dark"] .league-team-option {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--app-ui-border, rgba(255, 255, 255, 0.08));
}

html[data-app-theme="dark"] .league-create-switch-row,
body[data-bs-theme="dark"] .league-create-switch-row,
[data-bs-theme="dark"] .league-create-switch-row,
html[data-app-theme="dark"] .league-team-picker__filters,
body[data-bs-theme="dark"] .league-team-picker__filters,
[data-bs-theme="dark"] .league-team-picker__filters {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--app-ui-border, rgba(255, 255, 255, 0.08));
}

html[data-app-theme="dark"] .league-type-option:hover,
body[data-bs-theme="dark"] .league-type-option:hover,
[data-bs-theme="dark"] .league-type-option:hover,
html[data-app-theme="dark"] .league-type-option.is-active,
body[data-bs-theme="dark"] .league-type-option.is-active,
[data-bs-theme="dark"] .league-type-option.is-active,
html[data-app-theme="dark"] .league-team-option:hover,
body[data-bs-theme="dark"] .league-team-option:hover,
[data-bs-theme="dark"] .league-team-option:hover,
html[data-app-theme="dark"] .league-team-option.is-selected,
body[data-bs-theme="dark"] .league-team-option.is-selected,
[data-bs-theme="dark"] .league-team-option.is-selected {
    background: rgba(47, 101, 203, 0.16);
    border-color: rgba(111, 156, 255, 0.5);
}

html[data-app-theme="dark"] .league-create-setup__icon,
body[data-bs-theme="dark"] .league-create-setup__icon,
[data-bs-theme="dark"] .league-create-setup__icon,
html[data-app-theme="dark"] .league-type-option__icon,
body[data-bs-theme="dark"] .league-type-option__icon,
[data-bs-theme="dark"] .league-type-option__icon {
    background: rgba(47, 101, 203, 0.18);
    border-color: rgba(111, 156, 255, 0.24);
    color: #8db2ff;
}

html[data-app-theme="dark"] .league-create-eyebrow,
body[data-bs-theme="dark"] .league-create-eyebrow,
[data-bs-theme="dark"] .league-create-eyebrow {
    color: #8db2ff;
}

html[data-app-theme="dark"] .league-type-option__label,
body[data-bs-theme="dark"] .league-type-option__label,
[data-bs-theme="dark"] .league-type-option__label,
html[data-app-theme="dark"] .league-team-option__content strong,
body[data-bs-theme="dark"] .league-team-option__content strong,
[data-bs-theme="dark"] .league-team-option__content strong {
    color: var(--bs-emphasis-color, #f1f5f9);
}

html[data-app-theme="dark"] .league-type-panels,
body[data-bs-theme="dark"] .league-type-panels,
[data-bs-theme="dark"] .league-type-panels {
    border-top-color: var(--app-ui-border, rgba(255, 255, 255, 0.08));
}

html[data-app-theme="dark"] .league-team-picker__search-icon,
body[data-bs-theme="dark"] .league-team-picker__search-icon,
[data-bs-theme="dark"] .league-team-picker__search-icon,
html[data-app-theme="dark"] .league-team-option__content small,
body[data-bs-theme="dark"] .league-team-option__content small,
[data-bs-theme="dark"] .league-team-option__content small,
html[data-app-theme="dark"] .league-team-picker__empty,
body[data-bs-theme="dark"] .league-team-picker__empty,
[data-bs-theme="dark"] .league-team-picker__empty {
    color: var(--app-text-muted, #aab4c8);
}

@media (max-width: 767.98px) {
    .league-create-setup,
    .league-team-picker,
    .league-create-panel,
    .league-team-picker__group {
        padding: 12px;
    }

    .league-create-panel__head,
    .league-team-picker__toolbar,
    .league-team-picker__filters {
        align-items: stretch;
        flex-direction: column;
    }

    .league-team-picker__actions,
    .league-team-picker__actions .btn {
        width: 100%;
    }

    .league-team-picker__options {
        grid-template-columns: 1fr;
        max-height: 520px;
    }
}

html.app-standalone-pwa body[data-layout="vertical"] .page-content,
body.app-standalone-pwa[data-layout="vertical"] .page-content {
    padding-top: calc(var(--app-admin-header-height) + var(--app-safe-top) + 0.85rem);
    scroll-padding-top: calc(var(--app-admin-header-height) + var(--app-safe-top) + 0.85rem);
}

.sidebar-brand__mobile {
    display: none;
}

.navbar-brand-box .logo-sm,
.navbar-brand-box .logo-lg {
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.navbar-brand-box .logo-sm img,
.navbar-brand-box .logo-lg img {
    display: block;
    object-fit: contain;
}

.navbar-brand-box .logo-sm img {
    height: var(--app-topbar-logo-sm-size) !important;
    max-height: var(--app-topbar-logo-sm-size);
    max-width: var(--app-topbar-logo-sm-size);
    width: var(--app-topbar-logo-sm-size);
}

.navbar-brand-box .logo-lg img {
    height: var(--app-topbar-logo-height) !important;
    max-height: var(--app-topbar-logo-height);
    max-width: var(--app-topbar-logo-max-width);
    width: auto;
}

.app-mobile-header-title,
.app-mobile-bottom-nav,
.app-mobile-notifications-sheet,
.app-mobile-search-sheet {
    display: none;
}

.app-sidebar-toggle-glyph {
    display: none;
    height: 8px;
    width: 8px;
    border-color: currentColor;
    border-style: solid;
    border-width: 2px 2px 0 0;
}

.app-sidebar-toggle-glyph--open {
    transform: rotate(45deg);
}

.app-sidebar-toggle-glyph--close {
    transform: rotate(-135deg);
}

.app-mobile-menu-toggle__icon {
    display: none;
    height: 18px;
    position: relative;
    width: 24px;
}

.app-mobile-menu-toggle__line,
.app-mobile-menu-toggle__icon::before,
.app-mobile-menu-toggle__icon::after {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 2px;
    left: 2px;
    position: absolute;
    transform-origin: center;
    transition:
        opacity 160ms ease,
        transform 380ms cubic-bezier(0.68, -0.45, 0.26, 1.45),
        width 240ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, width;
    width: 20px;
}

.app-mobile-menu-toggle__icon::before {
    top: 2px;
    transform: translate3d(0, 0, 0) rotate(0deg);
}

.app-mobile-menu-toggle__line {
    opacity: 1;
    top: 8px;
    transform: translate3d(0, 0, 0) scaleX(1);
}

.app-mobile-menu-toggle__icon::after {
    top: 14px;
    transform: translate3d(0, 0, 0) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .app-mobile-menu-toggle__line,
    .app-mobile-menu-toggle__icon::before,
    .app-mobile-menu-toggle__icon::after {
        transition: none;
    }
}

.sidebar-brand__rail-toggle {
    display: none;
}

.app-mobile-sheet-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    :root {
        --app-login-logo-size: 180px;
    }

    body[data-layout="vertical"] {
        --app-admin-header-height: 64px;
        --app-mobile-bottom-nav-height: 72px;
        --app-mobile-content-gutter: 1rem;
        --app-mobile-menu-action-bg: rgba(var(--bs-body-color-rgb), 0.045);
        --app-mobile-menu-bg: var(--app-surface-base, var(--bs-body-bg));
        --app-mobile-menu-border: var(--app-surface-border, rgba(var(--bs-body-color-rgb), 0.09));
        --app-mobile-menu-color: var(--bs-body-color);
        --app-mobile-menu-muted: var(--bs-secondary-color);
    }

    body[data-layout="vertical"].sidebar-enable,
    body[data-layout="vertical"].app-mobile-profile-open {
        overflow: hidden;
    }

    body[data-layout="vertical"] .isvertical-topbar {
        background: var(--app-mobile-menu-bg);
        border-bottom: 1px solid transparent;
        color: var(--app-mobile-menu-color);
        transition:
            background-color 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease,
            color 180ms ease;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header {
        align-items: center;
        display: flex;
        gap: 0.35rem;
        justify-content: space-between;
        max-width: 100%;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        position: relative;
    }

    body[data-layout="vertical"].sidebar-enable .isvertical-topbar {
        border-bottom-color: var(--app-mobile-menu-border);
        box-shadow: none;
        pointer-events: none;
        z-index: calc(var(--app-z-mobile-sidebar) + 2);
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .navbar-brand-box {
        display: none;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn {
        align-items: center;
        border-radius: 12px;
        color: var(--bs-topbar-item-color, var(--bs-emphasis-color));
        display: inline-flex !important;
        flex: 0 0 48px;
        font-size: 1.55rem;
        justify-content: center;
        margin-inline-end: 0;
        margin-left: 0;
        min-width: 48px;
        padding: 0;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn .app-mobile-menu-toggle__fallback {
        display: none;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn .app-mobile-menu-toggle__icon {
        display: inline-block;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn[aria-expanded="true"] .app-mobile-menu-toggle__icon::before,
    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn[aria-expanded="true"] .app-mobile-menu-toggle__icon::after {
        width: 22px;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn[aria-expanded="true"] .app-mobile-menu-toggle__icon::before {
        transform: translate3d(0, 6px, 0) rotate(45deg);
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn[aria-expanded="true"] .app-mobile-menu-toggle__line {
        opacity: 0;
        transform: translate3d(9px, 0, 0) scaleX(0);
        width: 8px;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header .vertical-menu-btn[aria-expanded="true"] .app-mobile-menu-toggle__icon::after {
        transform: translate3d(0, -6px, 0) rotate(-45deg);
    }

    body[data-layout="vertical"].sidebar-enable .isvertical-topbar .navbar-header .vertical-menu-btn {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--app-mobile-menu-color);
        pointer-events: auto;
    }

    body[data-layout="vertical"].sidebar-enable .isvertical-topbar .navbar-header .vertical-menu-btn:hover,
    body[data-layout="vertical"].sidebar-enable .isvertical-topbar .navbar-header .vertical-menu-btn:focus,
    body[data-layout="vertical"].sidebar-enable .isvertical-topbar .navbar-header .vertical-menu-btn:active {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--app-mobile-menu-color);
    }

    body[data-layout="vertical"].sidebar-enable .isvertical-topbar .app-mobile-header-title {
        color: var(--app-mobile-menu-color);
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header > .d-flex:first-child {
        flex: 0 0 auto;
        margin-left: auto;
        min-width: 0;
        order: 3;
        position: relative;
        z-index: 2;
    }

    body[data-layout="vertical"] .isvertical-topbar .navbar-header > .d-flex:last-child {
        align-items: center;
        flex: 0 0 auto;
        gap: 0.15rem;
        margin-right: 0.45rem;
        min-width: 0;
        order: 1;
        position: relative;
        z-index: 2;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-mobile-header-title {
        color: var(--bs-topbar-item-color, var(--bs-emphasis-color));
        display: block;
        font-family: "IBM Plex Sans", sans-serif;
        font-size: 1.08rem;
        font-weight: 800;
        letter-spacing: 0;
        left: 4.65rem;
        line-height: 1.08;
        max-height: 1.25rem;
        overflow: hidden;
        position: absolute;
        right: 4.65rem;
        text-align: center;
        text-decoration: none;
        text-overflow: ellipsis;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        z-index: 1;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-search-action,
    body[data-layout="vertical"] .isvertical-topbar .app-language-switcher,
    body[data-layout="vertical"] .isvertical-topbar .app-header-theme-toggle {
        display: none !important;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-action .header-item {
        align-items: center;
        border-radius: 12px;
        display: inline-flex;
        justify-content: center;
        min-width: 44px;
        padding: 0 0.35rem;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-action .header-item {
        min-width: 48px;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-action {
        position: static !important;
    }

    body[data-layout="vertical"] .app-mobile-sheet-backdrop {
        appearance: none;
        background: rgba(19, 21, 22, 0.44);
        border: 0;
        display: block;
        inset: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity 180ms ease;
        z-index: var(--app-z-mobile-backdrop);
    }

    body[data-layout="vertical"] .app-mobile-sheet-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-menu {
        border: 1px solid rgba(122, 133, 153, 0.16);
        border-radius: var(--app-mobile-radius-lg) var(--app-mobile-radius-lg) 0 0;
        border-width: 1px 0 0;
        bottom: 0 !important;
        box-shadow: 0 -1rem 3rem rgba(15, 23, 42, 0.2);
        inset: auto max(0px, var(--app-safe-right)) 0 max(0px, var(--app-safe-left)) !important;
        margin: 0 !important;
        max-height: min(34rem, calc(100dvh - var(--app-safe-top) - 0.75rem));
        max-width: none !important;
        min-width: 0;
        overflow: auto;
        padding-bottom: calc(0.75rem + var(--app-safe-bottom));
        padding-top: 1.15rem;
        position: fixed !important;
        transform: translate3d(0, calc(100% + 1.5rem + var(--app-safe-bottom)), 0) !important;
        transition: transform 220ms ease, opacity 160ms ease;
        width: auto !important;
        z-index: calc(var(--app-z-mobile-sheet) + 1);
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-menu.show {
        transform: translate3d(0, 0, 0) !important;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-menu::before {
        background: rgba(var(--bs-body-color-rgb), 0.18);
        border-radius: 999px;
        content: "";
        display: block;
        height: 4px;
        left: 50%;
        position: absolute;
        top: 0.55rem;
        transform: translateX(-50%);
        width: 2.75rem;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-menu .dropdown-header,
    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-menu .dropdown-item {
        white-space: normal;
    }

    body[data-layout="vertical"] .isvertical-topbar .app-header-profile-menu .dropdown-item {
        align-items: center;
        display: flex;
        gap: 0.55rem;
        min-height: 46px;
    }

    body[data-layout="vertical"] .isvertical-topbar .header-profile-user {
        height: 38px;
        width: 38px;
    }

    body[data-layout="vertical"] .page-content {
        padding-bottom: calc(60px + var(--app-content-footer-gap) + var(--app-mobile-bottom-nav-height) + var(--app-safe-bottom));
    }

    body[data-layout="vertical"] .rightbar-overlay {
        background-color: rgba(19, 21, 22, 0.54);
        cursor: pointer;
        z-index: 1004;
    }

    body[data-layout="vertical"].sidebar-enable .rightbar-overlay {
        display: block;
    }

    body[data-layout="vertical"] .vertical-menu {
        --app-mobile-sidebar-brand-height: auto;
        background: var(--app-mobile-menu-bg);
        border-right: 0;
        bottom: 0;
        color: var(--app-mobile-menu-color);
        box-shadow: none;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        left: 0;
        max-width: none;
        padding-bottom: var(--app-safe-bottom);
        padding-top: calc(var(--app-admin-header-height) + var(--app-safe-top));
        right: 0;
        top: 0;
        width: 100vw;
        z-index: var(--app-z-mobile-sidebar);
    }

    body[data-layout="vertical"].sidebar-enable .vertical-menu {
        display: flex;
    }

    body[data-layout="vertical"] .vertical-menu .navbar-brand-box {
        align-items: center;
        background-color: var(--app-mobile-menu-bg);
        border-bottom: 1px solid var(--app-mobile-menu-border);
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        min-height: var(--app-mobile-sidebar-brand-height);
        overflow: hidden;
        padding: 0.65rem 1rem 0.75rem;
        position: static;
        width: 100%;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile {
        align-items: center;
        display: flex;
        gap: 0;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-identity {
        align-items: center;
        display: flex;
        gap: 0;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-logo-link {
        align-items: center;
        display: none;
        flex: 0 0 64px;
        height: 64px;
        justify-content: center;
        line-height: 1;
        width: 64px;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-logo {
        display: block;
        height: 64px;
        max-height: 64px;
        max-width: 64px;
        object-fit: contain;
        width: 64px;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-copy {
        align-items: center;
        display: flex;
        flex-direction: column;
        min-width: 0;
        width: 100%;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-title {
        color: var(--app-mobile-menu-color);
        display: none;
        font-family: "IBM Plex Sans", sans-serif;
        font-size: 1.08rem;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.08;
        max-height: 1.25rem;
        max-width: min(64vw, 24rem);
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-role {
        color: var(--app-mobile-menu-muted);
        display: none;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.3;
        margin-top: 0.25rem;
        max-width: min(58vw, 24rem);
        opacity: 0.68;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        justify-content: center;
        margin-top: 0;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-action {
        align-items: center;
        background-color: var(--app-mobile-menu-action-bg);
        border: 1px solid var(--app-mobile-menu-border);
        border-radius: 999px;
        color: var(--app-mobile-menu-color);
        display: inline-flex;
        font-size: 0.72rem;
        font-weight: 800;
        height: 34px;
        justify-content: center;
        line-height: 1;
        min-width: 34px;
        padding: 0;
        text-decoration: none;
        width: 34px;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-action.is-active {
        background-color: var(--app-brand-accent-subtle-strong);
        border-color: rgba(var(--bs-primary-rgb), 0.18);
        color: var(--app-brand-accent);
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-language {
        flex: 0 0 40px;
        overflow: hidden;
        width: 40px;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-flag {
        border-radius: 0.22rem;
        box-shadow: 0 0 0 1px var(--app-mobile-menu-border);
        display: block;
        height: 18px !important;
        max-height: 18px !important;
        max-width: 24px !important;
        object-fit: cover;
        width: 24px !important;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-theme {
        flex: 0 0 34px;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__mobile-theme i {
        display: block;
        font-size: 1rem;
        line-height: 1;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-brand__collapsed,
    body[data-layout="vertical"] .vertical-menu .sidebar-brand__desktop {
        display: none !important;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-menu-scroll {
        background: var(--app-mobile-menu-bg);
        flex: 1 1 auto;
        height: auto;
        margin-top: 0;
        min-height: 0;
        width: 100%;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu {
        padding: 0.75rem 0 1rem;
    }

    body[data-layout="vertical"] .vertical-menu #side-menu {
        padding: 0 0.85rem;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu .menu-title {
        color: var(--app-mobile-menu-muted);
        margin: 0.55rem 0.25rem 0.25rem;
        opacity: 0.72;
        padding: 0.45rem 0.55rem !important;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li a {
        align-items: center;
        border-radius: 14px;
        color: var(--app-mobile-menu-color);
        display: flex;
        font-size: 0.95rem;
        margin: 0.15rem 0;
        min-height: 50px;
        padding: 0.78rem 0.9rem;
        white-space: normal;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li a:hover {
        background: var(--app-mobile-menu-action-bg);
        color: var(--app-brand-accent);
        margin-left: 0;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li a .nav-icon {
        color: var(--app-mobile-menu-muted);
        fill: currentColor;
        font-size: 1.25rem;
        min-width: 1.65rem;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li a:hover .nav-icon,
    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li a.active .nav-icon,
    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li.mm-active > a .nav-icon {
        color: currentColor;
        fill: currentColor !important;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu .metismenu .menu-item {
        line-height: 1.25;
        margin-left: 0.65rem;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu .has-arrow:after {
        color: var(--app-mobile-menu-muted);
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li.mm-active > a,
    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li a.active {
        background-color: var(--app-brand-accent-subtle);
        color: var(--app-brand-accent);
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu .mm-active > .has-arrow:after {
        transform: translateY(-50%) rotate(-180deg);
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li ul.sub-menu {
        margin: 0.1rem 0 0.35rem;
        padding: 0 0 0 1.55rem;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li ul.sub-menu.app-mobile-submenu-open {
        display: block;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li ul.sub-menu:before {
        left: 0.7rem;
        top: 0.45rem;
        bottom: 0.45rem;
        opacity: 0.7;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li ul.sub-menu li a {
        font-size: 0.9rem;
        min-height: 46px;
        padding: 0.68rem 0.75rem;
    }

    body[data-layout="vertical"] .vertical-menu #sidebar-menu ul li ul.sub-menu li a:before {
        display: none;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-footer {
        background-color: var(--app-mobile-menu-bg);
        border-top: 1px solid var(--app-mobile-menu-border);
        display: block;
        flex: 0 0 auto;
        position: static;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-footer__inner {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0.75rem 1rem calc(0.9rem + var(--app-safe-bottom));
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-footer__logout {
        align-items: center;
        background-color: rgba(var(--bs-danger-rgb), 0.08);
        border: 1px solid rgba(var(--bs-danger-rgb), 0.16) !important;
        border-radius: 14px;
        color: var(--bs-danger);
        display: flex;
        font-family: "Montserrat", sans-serif;
        font-size: 0.88rem;
        font-weight: 700;
        gap: 0.55rem;
        justify-content: center;
        min-height: 48px;
        padding: 0.7rem 0.9rem;
    }

    body[data-layout="vertical"] .vertical-menu .sidebar-footer__logout-icon {
        font-size: 1.1rem;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav {
        --app-mobile-bottom-nav-accent: var(--app-brand-accent);
        --app-mobile-bottom-nav-gap: 0.18rem;
        --app-mobile-bottom-nav-item-width: calc(25% - 0.335rem);
        --app-mobile-bottom-nav-step: calc(25% - 0.155rem);
        --app-mobile-bottom-nav-surface: var(--bs-body-bg);
        align-items: center;
        background: var(--bs-body-bg);
        border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
        border-radius: 18px;
        bottom: max(0.7rem, var(--app-safe-bottom));
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
        display: flex;
        gap: var(--app-mobile-bottom-nav-gap);
        height: var(--app-mobile-bottom-nav-height);
        isolation: isolate;
        justify-content: space-between;
        left: 50%;
        max-width: 28rem;
        padding: 0.4rem;
        position: fixed;
        right: auto;
        transform: translate3d(-50%, 0, 0);
        transition: transform 180ms ease, opacity 180ms ease;
        width: calc(100vw - max(1rem, var(--app-safe-left)) - max(1rem, var(--app-safe-right)));
        z-index: var(--app-z-mobile-nav);
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav::before {
        background: rgba(37, 99, 235, 0.08);
        border: 1px solid rgba(37, 99, 235, 0.12);
        border-radius: 14px;
        bottom: 0.4rem;
        box-shadow: none;
        content: "";
        left: 0.4rem;
        position: absolute;
        top: 0.4rem;
        transition:
            left 320ms cubic-bezier(0.22, 1, 0.36, 1),
            background 180ms ease,
            border-color 180ms ease;
        width: var(--app-mobile-bottom-nav-item-width);
        z-index: 0;
    }

    @supports (background: color-mix(in srgb, #2563eb 20%, transparent)) {
        body[data-layout="vertical"] .app-mobile-bottom-nav::before {
            background: color-mix(in srgb, var(--app-mobile-bottom-nav-accent) 10%, var(--bs-body-bg));
            border-color: color-mix(in srgb, var(--app-mobile-bottom-nav-accent) 15%, transparent);
        }
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(2)[aria-expanded="true"]) {
        --app-mobile-bottom-nav-accent: #0891b2;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(2)[aria-expanded="true"])::before {
        left: calc(0.4rem + var(--app-mobile-bottom-nav-step));
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(3).is-active),
    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(3)[aria-current="page"]),
    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(3)[aria-expanded="true"]) {
        --app-mobile-bottom-nav-accent: #7c3aed;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(3).is-active)::before,
    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(3)[aria-current="page"])::before,
    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(3)[aria-expanded="true"])::before {
        left: calc(0.4rem + var(--app-mobile-bottom-nav-step) + var(--app-mobile-bottom-nav-step));
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(4).is-active),
    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(4)[aria-current="page"]) {
        --app-mobile-bottom-nav-accent: #2563eb;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(4).is-active)::before,
    body[data-layout="vertical"] .app-mobile-bottom-nav:has(> .app-mobile-bottom-nav__item:nth-child(4)[aria-current="page"])::before {
        left: calc(0.4rem + var(--app-mobile-bottom-nav-step) + var(--app-mobile-bottom-nav-step) + var(--app-mobile-bottom-nav-step));
    }

    @supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
        body[data-layout="vertical"] .app-mobile-bottom-nav {
            -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
        }
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav__item {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 15px;
        color: rgba(var(--bs-body-color-rgb), 0.48);
        display: inline-flex;
        flex: 1 1 0;
        flex-direction: column;
        font-family: "Montserrat", sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        gap: 0.16rem;
        height: 100%;
        justify-content: center;
        line-height: 1;
        min-width: 0;
        padding: 0.35rem 0.25rem;
        position: relative;
        text-decoration: none;
        transition:
            color 180ms ease,
            opacity 180ms ease;
        white-space: nowrap;
        z-index: 1;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav__item > i,
    body[data-layout="vertical"] .app-mobile-bottom-nav__icon-wrap {
        align-items: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 11px;
        box-shadow: none;
        display: inline-flex !important;
        flex: 0 0 auto;
        height: 1.75rem;
        justify-content: center;
        line-height: 1;
        margin-bottom: 0.05rem;
        transition:
            color 180ms ease,
            opacity 180ms ease;
        width: 1.75rem;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav__item > i,
    body[data-layout="vertical"] .app-mobile-bottom-nav__icon-wrap i {
        font-size: 1.28rem;
        line-height: 1;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav__icon-wrap {
        max-width: none !important;
        overflow: visible !important;
        position: relative;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav__item > span:not(.app-mobile-bottom-nav__icon-wrap) {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav__item.is-active,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item[aria-current="page"],
    body[data-layout="vertical"] .app-mobile-bottom-nav__item[aria-expanded="true"] {
        background: transparent;
        color: var(--app-mobile-bottom-nav-accent);
    }

    body[data-layout="vertical"] .app-mobile-bottom-nav__item.is-active > i,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item[aria-current="page"] > i,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item[aria-expanded="true"] > i,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item.is-active .app-mobile-bottom-nav__icon-wrap,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item[aria-current="page"] .app-mobile-bottom-nav__icon-wrap,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item[aria-expanded="true"] .app-mobile-bottom-nav__icon-wrap {
        color: var(--app-mobile-bottom-nav-accent);
    }

    body[data-layout="vertical"] .app-mobile-search-sheet {
        display: block;
        inset: 0;
        pointer-events: none;
        position: fixed;
        transition: visibility 0s linear 220ms;
        visibility: hidden;
        z-index: var(--app-z-mobile-sheet);
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__backdrop {
        appearance: none;
        background: rgba(19, 21, 22, 0.44);
        border: 0;
        display: block;
        height: 100%;
        inset: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        transition: opacity 180ms ease;
        width: 100%;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__panel {
        background: var(--bs-body-bg);
        border-radius: 22px 22px 0 0;
        bottom: 0;
        box-shadow: 0 -1rem 3rem rgba(15, 23, 42, 0.22);
        display: flex;
        flex-direction: column;
        height: min(31rem, calc(100dvh - var(--app-safe-top) - 1rem), 84vh);
        left: 0;
        max-height: calc(100dvh - var(--app-safe-top) - 0.75rem);
        overflow: hidden;
        padding-bottom: var(--app-safe-bottom);
        position: absolute;
        right: 0;
        opacity: 0;
        transform: translate3d(0, calc(100% + 2rem + var(--app-safe-bottom)), 0);
        transition: transform 220ms ease, opacity 160ms ease, visibility 0s linear 220ms;
        visibility: hidden;
    }

    body[data-layout="vertical"].app-mobile-search-open {
        overflow: hidden;
    }

    body[data-layout="vertical"].app-mobile-search-open .app-mobile-search-sheet {
        pointer-events: auto;
        transition-delay: 0s;
        visibility: visible;
    }

    body[data-layout="vertical"].app-mobile-search-open .app-mobile-search-sheet__backdrop {
        opacity: 1;
    }

    body[data-layout="vertical"].app-mobile-search-open .app-mobile-search-sheet__panel {
        opacity: 1;
        transition-delay: 0s;
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__handle {
        background: rgba(var(--bs-body-color-rgb), 0.18);
        border-radius: 999px;
        flex: 0 0 auto;
        height: 4px;
        margin: 0.65rem auto 0;
        width: 2.75rem;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__header {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        padding: 0.75rem 1rem 0.65rem;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__title {
        color: var(--bs-emphasis-color);
        font-family: "IBM Plex Sans", sans-serif;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__close {
        align-items: center;
        background-color: rgba(var(--bs-body-color-rgb), 0.06);
        border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
        border-radius: 14px;
        color: var(--bs-emphasis-color);
        display: inline-flex;
        height: 42px;
        justify-content: center;
        padding: 0;
        width: 42px;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__close i {
        font-size: 1.45rem;
        line-height: 1;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet__search {
        border-bottom: 1px solid rgba(122, 133, 153, 0.12);
        flex: 0 0 auto;
        padding: 0 1rem 0.85rem;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet .app-header-search__input {
        min-height: 46px;
    }

    body[data-layout="vertical"] .app-mobile-search-sheet .app-header-search__results {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow: auto;
        padding: 0.75rem 0.85rem calc(0.9rem + var(--app-safe-bottom));
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet {
        display: block;
        inset: 0;
        pointer-events: none;
        position: fixed;
        transition: visibility 0s linear 220ms;
        visibility: hidden;
        z-index: var(--app-z-mobile-sheet);
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__backdrop {
        appearance: none;
        background: rgba(19, 21, 22, 0.44);
        border: 0;
        display: block;
        height: 100%;
        inset: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        transition: opacity 180ms ease;
        width: 100%;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__panel {
        background: var(--bs-body-bg);
        border-radius: 22px 22px 0 0;
        bottom: 0;
        box-shadow: 0 -1rem 3rem rgba(15, 23, 42, 0.22);
        display: flex;
        flex-direction: column;
        height: min(31rem, calc(100dvh - var(--app-safe-top) - 1rem), 84vh);
        left: 0;
        max-height: calc(100dvh - var(--app-safe-top) - 0.75rem);
        overflow: hidden;
        padding-bottom: var(--app-safe-bottom);
        position: absolute;
        right: 0;
        opacity: 0;
        transform: translate3d(0, calc(100% + 2rem + var(--app-safe-bottom)), 0);
        transition: transform 220ms ease, opacity 160ms ease, visibility 0s linear 220ms;
        visibility: hidden;
    }

    body[data-layout="vertical"].app-mobile-notifications-open {
        overflow: hidden;
    }

    body[data-layout="vertical"].app-mobile-notifications-open .app-mobile-notifications-sheet {
        pointer-events: auto;
        transition-delay: 0s;
        visibility: visible;
    }

    body[data-layout="vertical"].app-mobile-notifications-open .app-mobile-notifications-sheet__backdrop {
        opacity: 1;
    }

    body[data-layout="vertical"].app-mobile-notifications-open .app-mobile-notifications-sheet__panel {
        opacity: 1;
        transition-delay: 0s;
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__handle {
        background: rgba(var(--bs-body-color-rgb), 0.18);
        border-radius: 999px;
        flex: 0 0 auto;
        height: 4px;
        margin: 0.65rem auto 0;
        width: 2.75rem;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__header {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        padding: 0.75rem 1rem 0.65rem;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__title {
        color: var(--bs-emphasis-color);
        font-family: "IBM Plex Sans", sans-serif;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__subtitle {
        color: var(--bs-secondary-color);
        font-size: 0.78rem;
        margin: 0.2rem 0 0;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__close {
        align-items: center;
        background-color: rgba(var(--bs-body-color-rgb), 0.06);
        border: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
        border-radius: 14px;
        color: var(--bs-emphasis-color);
        display: inline-flex;
        height: 42px;
        justify-content: center;
        padding: 0;
        width: 42px;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__actions {
        border-bottom: 1px solid rgba(122, 133, 153, 0.12);
        display: flex;
        flex: 0 0 auto;
        gap: 0.5rem;
        padding: 0 1rem 0.85rem;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__items {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 0.35rem 0;
    }

    body[data-layout="vertical"] .app-mobile-notifications-sheet__footer {
        border-top: 1px solid rgba(122, 133, 153, 0.12);
        flex: 0 0 auto;
        padding: 0.75rem 1rem calc(0.85rem + var(--app-safe-bottom));
    }

    body[data-layout="vertical"] .app-mobile-search-sheet .app-header-search__loading,
    body[data-layout="vertical"] .app-mobile-search-sheet .app-header-search__empty {
        flex: 0 0 auto;
    }

    body[data-layout="vertical"].app-mobile-bottom-nav-hidden .app-mobile-bottom-nav,
    body[data-layout="vertical"].app-mobile-keyboard-open .app-mobile-bottom-nav,
    body[data-layout="vertical"].app-mobile-profile-open .app-mobile-bottom-nav,
    body[data-layout="vertical"].app-mobile-pwa-install-open .app-mobile-bottom-nav,
    body[data-layout="vertical"].app-mobile-pwa-update-open .app-mobile-bottom-nav,
    body[data-layout="vertical"].app-mobile-pwa-push-open .app-mobile-bottom-nav,
    body[data-layout="vertical"].app-mobile-notifications-open .app-mobile-bottom-nav,
    body[data-layout="vertical"].app-mobile-search-open .app-mobile-bottom-nav,
    body[data-layout="vertical"].sidebar-enable .app-mobile-bottom-nav {
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-50%, calc(100% + 1.25rem + var(--app-safe-bottom)), 0);
    }

    body[data-layout="vertical"] .pwa-status {
        bottom: calc(var(--app-mobile-bottom-nav-height) + max(12px, var(--app-safe-bottom)) + 10px);
    }

    body[data-layout="vertical"] .pwa-install-hint:not(.app-mobile-install-sheet) {
        bottom: calc(var(--app-mobile-bottom-nav-height) + max(64px, calc(var(--app-safe-bottom) + 64px)));
    }

    body[data-layout="vertical"].app-mobile-bottom-nav-hidden .pwa-status,
    body[data-layout="vertical"].app-mobile-profile-open .pwa-status,
    body[data-layout="vertical"].app-mobile-pwa-install-open .pwa-status,
    body[data-layout="vertical"].app-mobile-pwa-update-open .pwa-status,
    body[data-layout="vertical"].app-mobile-pwa-push-open .pwa-status,
    body[data-layout="vertical"].app-mobile-notifications-open .pwa-status,
    body[data-layout="vertical"].app-mobile-search-open .pwa-status,
    body[data-layout="vertical"].app-mobile-keyboard-open .pwa-status {
        bottom: max(12px, var(--app-safe-bottom));
    }

    body[data-layout="vertical"].app-mobile-bottom-nav-hidden .pwa-install-hint:not(.app-mobile-install-sheet),
    body[data-layout="vertical"].app-mobile-profile-open .pwa-install-hint:not(.app-mobile-install-sheet),
    body[data-layout="vertical"].app-mobile-pwa-update-open .pwa-install-hint:not(.app-mobile-install-sheet),
    body[data-layout="vertical"].app-mobile-search-open .pwa-install-hint:not(.app-mobile-install-sheet),
    body[data-layout="vertical"].app-mobile-keyboard-open .pwa-install-hint:not(.app-mobile-install-sheet) {
        bottom: max(64px, calc(var(--app-safe-bottom) + 64px));
    }

    body[data-layout="vertical"] .main-content .page-content > .container-fluid {
        padding-left: max(var(--app-mobile-content-gutter), var(--app-safe-left));
        padding-right: max(var(--app-mobile-content-gutter), var(--app-safe-right));
    }

    body[data-layout="vertical"] .form-label,
    body[data-layout="vertical"] .col-form-label {
        color: var(--bs-emphasis-color);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 0.4rem;
    }

    body[data-layout="vertical"] .form-control,
    body[data-layout="vertical"] .form-select {
        border-radius: var(--app-mobile-radius-sm);
        min-height: var(--app-mobile-tap-target);
    }

    body[data-layout="vertical"] textarea.form-control {
        min-height: 7rem;
    }

    body[data-layout="vertical"] .input-group > .form-control,
    body[data-layout="vertical"] .input-group > .form-select,
    body[data-layout="vertical"] .input-group > .btn {
        min-height: var(--app-mobile-tap-target);
    }

    body[data-layout="vertical"] .btn:not(.btn-sm):not(.btn-lg) {
        min-height: 42px;
    }

    body[data-layout="vertical"] .alert {
        border-radius: var(--app-mobile-radius-md);
        line-height: 1.45;
    }

    body[data-layout="vertical"] .nav-tabs,
    body[data-layout="vertical"] .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body[data-layout="vertical"] .nav-tabs::-webkit-scrollbar,
    body[data-layout="vertical"] .nav-pills::-webkit-scrollbar {
        display: none;
    }

    body[data-layout="vertical"] .nav-tabs .nav-link,
    body[data-layout="vertical"] .nav-pills .nav-link {
        white-space: nowrap;
    }

    body[data-layout="vertical"] .btn-group > .btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    body[data-layout="vertical"] .app-mobile-bottom-nav,
    body[data-layout="vertical"] .app-mobile-bottom-nav::before,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item,
    body[data-layout="vertical"] .app-mobile-bottom-nav__item > i,
    body[data-layout="vertical"] .app-mobile-bottom-nav__icon-wrap,
    body[data-layout="vertical"] .app-mobile-sheet-backdrop,
    body[data-layout="vertical"] .app-header-profile-menu,
    body[data-layout="vertical"] .app-mobile-search-sheet__backdrop,
    body[data-layout="vertical"] .app-mobile-search-sheet__panel,
    body[data-layout="vertical"] .app-mobile-notifications-sheet__backdrop,
    body[data-layout="vertical"] .app-mobile-notifications-sheet__panel {
        animation: none;
        transition: none;
    }
}

@media (max-width: 600px) {
    body[data-layout="vertical"] .navbar-header .dropdown .dropdown-menu {
        transform: translate3d(0, var(--app-admin-header-height), 0) !important;
    }

    body[data-layout="vertical"] .navbar-header .dropdown .dropdown-menu.app-header-profile-menu {
        inset: auto max(0px, var(--app-safe-right)) 0 max(0px, var(--app-safe-left)) !important;
        position: fixed !important;
        transform: translate3d(0, calc(100% + 1.5rem + var(--app-safe-bottom)), 0) !important;
        width: auto !important;
    }

    body[data-layout="vertical"] .navbar-header .dropdown .dropdown-menu.app-header-profile-menu.show {
        transform: translate3d(0, 0, 0) !important;
    }
}

@media (max-width: 991.98px) {
    .app-role-panel-hero,
    .app-role-panel-card,
    .app-role-panel-metric-card,
    .app-role-panel-link-card {
        border-radius: var(--app-mobile-radius-md);
    }

    .app-role-panel-info-row,
    .app-role-panel-metric-card,
    .app-role-panel-link-card {
        background-color: rgba(var(--bs-body-color-rgb), 0.015);
    }

    .app-role-panel-hero > .card-body,
    .app-role-panel-card > .card-body,
    .app-role-panel-metric-card > .card-body,
    .app-role-panel-link-card > .card-body {
        padding: 1rem;
    }

    .app-role-panel-card > .card-header,
    .app-role-panel-card > .card-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .app-role-panel-info-row {
        border-radius: var(--app-mobile-radius-sm) !important;
    }

    a.app-role-panel-link-card {
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    a.app-role-panel-link-card:hover,
    a.app-role-panel-link-card:focus-visible {
        border-color: rgba(var(--bs-primary-rgb), 0.25) !important;
        box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.08) !important;
    }

    body[data-bs-theme="dark"] .app-role-panel-link-card .text-dark,
    html[data-bs-theme="dark"] .app-role-panel-link-card .text-dark,
    body[data-bs-theme="dark"] .app-role-panel-info-row .text-dark,
    html[data-bs-theme="dark"] .app-role-panel-info-row .text-dark {
        color: var(--bs-emphasis-color) !important;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 90%;
    }
}

.team-portal-dashboard {
    --team-portal-card-radius: 0.9rem;
    --team-portal-card-border: rgba(var(--bs-body-color-rgb), 0.08);
    --team-portal-card-shadow: 0 1rem 2.75rem rgba(15, 23, 42, 0.06);
    --team-portal-soft-bg: rgba(var(--bs-primary-rgb), 0.06);
}

.team-portal-dashboard,
.team-portal-dashboard .row,
.team-portal-dashboard [class*="col-"],
.team-portal-dashboard .card,
.team-portal-dashboard .card-body,
.team-portal-dashboard .card-header,
.team-portal-dashboard .d-flex,
.team-portal-dashboard .flex-wrap,
.team-portal-dashboard .card-title,
.team-portal-dashboard .text-muted,
.team-portal-dashboard [class*="badge"],
.team-portal-dashboard [class*="chip"],
.team-portal-dashboard [class*="pill"] {
    min-width: 0;
}

.team-portal-dashboard .card {
    border-color: var(--team-portal-card-border);
    border-radius: var(--team-portal-card-radius);
    overflow: hidden;
}

.team-portal-dashboard .badge,
.team-portal-dashboard [class*="chip"],
.team-portal-dashboard [class*="pill"] {
    letter-spacing: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.team-portal-dashboard__range-pill,
.team-portal-dashboard__side-chip,
.team-portal-dashboard__total-badge,
.team-portal-dashboard__open-total,
.team-portal-dashboard__metric-percent {
    align-items: center;
    line-height: 1.25;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.team-portal-dashboard__document-list {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.team-portal-dashboard__document-row {
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    color: var(--bs-emphasis-color);
    display: flex;
    gap: 0.75rem;
    min-height: 3.7rem;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.team-portal-dashboard__document-row:hover,
.team-portal-dashboard__document-row:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-color: rgba(var(--bs-primary-rgb), 0.2);
    box-shadow: 0 0.75rem 1.8rem rgba(15, 23, 42, 0.08);
    color: var(--bs-emphasis-color);
    transform: translateY(-1px);
}

.team-portal-dashboard__document-row > i:first-child {
    align-items: center;
    background: var(--team-portal-soft-bg);
    border-radius: 50%;
    color: var(--app-brand-accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.team-portal-dashboard__document-row > span {
    flex: 1 1 auto;
    font-weight: 700;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.team-portal-dashboard__document-row > i:last-child {
    color: var(--bs-secondary-color);
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    body[data-layout="vertical"] .team-portal-dashboard > .row {
        --bs-gutter-x: 0.9rem;
        --bs-gutter-y: 0.9rem;
        align-items: stretch;
    }

    body[data-layout="vertical"] .team-portal-dashboard .card {
        border-radius: var(--app-mobile-radius-md);
    }

    body[data-layout="vertical"] .team-portal-dashboard .card-body,
    body[data-layout="vertical"] .team-portal-dashboard .card-header {
        padding: 1rem !important;
    }

    body[data-layout="vertical"] .team-portal-dashboard__hero .card-body > .d-flex {
        align-items: stretch !important;
        gap: 1rem !important;
    }

    body[data-layout="vertical"] .team-portal-dashboard__hero .card-body > .d-flex > .d-flex {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    body[data-layout="vertical"] .team-portal-dashboard__range-pill {
        justify-content: flex-start;
        min-height: 2.35rem;
        width: 100%;
    }

    body[data-layout="vertical"] .team-portal-dashboard__metric-card .card-body {
        min-height: 9rem;
    }
}

@media (max-width: 575.98px) {
    body[data-layout="vertical"] .team-portal-dashboard .card-title {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    body[data-layout="vertical"] .team-portal-dashboard .text-muted {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    body[data-layout="vertical"] .team-portal-dashboard__document-row {
        border-radius: var(--app-mobile-radius-sm);
        min-height: 3.55rem;
        padding: 0.75rem;
    }

    body[data-layout="vertical"] .team-portal-dashboard__document-row > span {
        font-size: 0.88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-portal-dashboard__document-row {
        transition: none;
    }
}

.team-portal-lock-form {
    margin: 0;
}

.team-portal-lock-button,
.team-portal-lock-pill,
.team-portal-lock-hint {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 0.35rem;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.team-portal-lock-button,
.team-portal-lock-pill {
    border: 1px solid transparent;
    padding: 0.4rem 0.75rem;
}

.team-portal-lock-button {
    background: transparent;
}

.team-portal-lock-button.is-locked,
.team-portal-lock-pill.is-locked {
    background: rgba(var(--bs-danger-rgb), 0.1);
    border-color: rgba(var(--bs-danger-rgb), 0.18);
    color: var(--bs-danger);
}

.team-portal-lock-button.is-unlocked,
.team-portal-lock-pill.is-unlocked {
    background: rgba(var(--bs-success-rgb), 0.1);
    border-color: rgba(var(--bs-success-rgb), 0.18);
    color: var(--bs-success);
}

.team-portal-lock-button:hover {
    filter: brightness(0.98);
}

.team-portal-lock-hint {
    background: rgba(var(--bs-warning-rgb), 0.14);
    color: #8a6116;
    padding: 0.28rem 0.55rem;
}

.team-portal-lock-row {
    align-items: center;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.9rem;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.7rem 0.8rem;
}

.team-portal-disabled-tab {
    align-items: center;
    cursor: not-allowed;
    display: inline-flex;
    gap: 0.35rem;
    opacity: 0.72;
}

.application-message-thread__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.application-message-thread__item {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid transparent;
    border-radius: 1rem;
    padding: 1rem 1rem 0.95rem;
}

.application-message-thread__item.is-admin {
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-left-color: rgba(var(--bs-primary-rgb), 0.9);
}

.application-message-thread__item.is-team {
    background: rgba(var(--bs-info-rgb), 0.06);
    border-left-color: rgba(var(--bs-info-rgb), 0.9);
}

.application-message-thread__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    margin-bottom: 0.75rem;
}

.application-message-thread__author {
    color: var(--bs-heading-color);
    font-size: 0.9rem;
    font-weight: 700;
}

.application-message-thread__role,
.application-message-thread__date {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.application-message-thread__role {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.application-message-thread__body {
    color: var(--bs-body-color);
    line-height: 1.65;
}

.application-message-thread__form textarea {
    min-height: 130px;
}

@media (max-width: 767.98px) {
    .team-portal-lock-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-portal-lock-button,
    .team-portal-lock-pill {
        justify-content: center;
        width: 100%;
    }
}

/* Shared utility helpers used by app views. */
.app-border-dashed {
    border-top: 1px dashed #e2e5e8 !important;
}

.app-max-h-80 {
    max-height: 80px !important;
}

.app-max-h-120 {
    max-height: 120px !important;
}

.app-maxw-280 {
    max-width: 280px !important;
}

.settings-asset-preview.settings-pwa-icon-preview {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.06), rgba(var(--bs-primary-rgb), 0.02));
    border-radius: 1.6rem;
    display: flex;
    justify-content: center;
    max-width: 168px;
    padding: 1.1rem;
}

.settings-asset-preview.settings-pwa-icon-preview img {
    border-radius: 1.15rem;
    display: block;
    max-height: 128px;
    object-fit: contain;
}

.app-whitespace-normal {
    white-space: normal !important;
}

.app-h-10 {
    height: 10px !important;
}

.app-thumb-cover-150 {
    height: 150px !important;
    object-fit: cover !important;
}

.app-object-cover {
    object-fit: cover !important;
}

.app-object-contain {
    object-fit: contain !important;
}

.header-profile-user--fallback {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    line-height: 1;
    width: 36px;
}

.app-header-search__menu {
    border: 1px solid rgba(122, 133, 153, 0.18);
    box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, 0.14);
    min-width: min(26rem, calc(100vw - 1.5rem));
    overflow: hidden;
}

.header-lang-img,
.app-language-switcher__flag {
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    display: block;
    height: 16px;
    object-fit: cover;
    width: 24px;
}

.app-language-switcher .header-item {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: 46px;
}

.app-language-switcher__menu {
    border: 1px solid rgba(122, 133, 153, 0.16);
    border-radius: 0.9rem;
    box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, 0.14);
    min-width: 12rem;
    padding: 0.55rem 0;
}

.app-language-switcher__menu[data-bs-popper] {
    left: 50% !important;
    margin-top: 0.45rem;
    right: auto !important;
    top: 100% !important;
    transform: translate3d(-50%, 0, 0) !important;
}

.app-language-switcher__item {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    padding: 0.62rem 1rem;
}

.app-language-switcher__item.active,
.app-language-switcher__item:hover,
.app-language-switcher__item:focus {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-emphasis-color);
}

.app-login-brand {
    display: flex;
    justify-content: center;
}

.app-login-brand__link {
    align-items: center;
    height: var(--app-login-logo-size);
    justify-content: center;
    max-width: min(var(--app-login-logo-size), 100%);
    width: var(--app-login-logo-size);
}

.app-login-brand__image {
    display: block;
    height: 100% !important;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 100% !important;
}

.authentication-bg .auth-layout-stage {
    position: relative;
    width: 100%;
    z-index: 1;
}

.authentication-bg .bg-overlay {
    pointer-events: none;
}

.app-login-google-action {
    display: flex;
    justify-content: center;
}

.app-google-signin-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 999px;
    color: #3c4043;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 600;
    gap: 0.7rem;
    justify-content: center;
    line-height: 1.2;
    max-width: 100%;
    min-height: 42px;
    min-width: 224px;
    padding: 0.55rem 1.25rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-google-signin-button:hover,
.app-google-signin-button:focus {
    background: #f8fafd;
    border-color: #c7cdd6;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.16);
    color: #202124;
    text-decoration: none;
}

.app-google-signin-button:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.35);
    outline-offset: 3px;
}

.app-google-signin-button__icon {
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.app-login-locale-switcher {
    margin-top: 1.25rem;
    padding-top: 1rem;
}

@media (max-width: 575.98px) {
    :root {
        --app-login-logo-size: 140px;
    }

    .app-login-brand__image {
        max-height: 100%;
    }

    .app-google-signin-button {
        width: 100%;
    }
}

.app-header-search__results {
    max-height: 22rem;
    overflow: auto;
    padding: 0.75rem;
}

.app-header-search__loading {
    align-items: center;
    border-bottom: 1px solid rgba(122, 133, 153, 0.12);
    color: var(--bs-secondary-color);
    display: flex;
    font-size: 0.8rem;
    gap: 0.55rem;
    padding: 0.8rem 1.1rem 0.75rem;
}

.app-header-search__loading::before {
    animation: app-header-search-pulse 1s ease-in-out infinite;
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 999px;
    content: "";
    height: 0.6rem;
    width: 0.6rem;
}

.app-header-search__empty {
    color: var(--bs-secondary-color);
    padding: 1rem 1.25rem 1.25rem;
}

.app-header-search__result {
    align-items: flex-start;
    border: 1px solid transparent;
    border-radius: 1rem;
    color: inherit;
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.app-header-search__result + .app-header-search__result {
    margin-top: 0.45rem;
}

.app-header-search__result:hover,
.app-header-search__result:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-color: rgba(var(--bs-primary-rgb), 0.18);
    box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.06);
    color: inherit;
    transform: translateY(-1px);
}

.app-header-search__result:focus-visible {
    outline: 0;
}

.app-header-search__result-icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0.9rem;
    color: var(--bs-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.app-header-search__result-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.app-header-search__result-head {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
}

.app-header-search__result-title {
    color: var(--bs-emphasis-color);
    font-weight: 600;
    line-height: 1.35;
}

.app-header-search__result-type {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--bs-primary);
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.34rem 0.55rem;
    text-transform: uppercase;
}

.app-header-search__result-subtitle,
.app-header-search__result-meta,
.app-header-search__result-path {
    color: var(--bs-secondary-color);
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
}

.app-header-search__result-subtitle {
    color: var(--bs-body-color);
    opacity: 0.82;
}

.app-header-search__result-path {
    opacity: 0.9;
    word-break: break-word;
}

.app-header-search__results::-webkit-scrollbar {
    width: 0.5rem;
}

.app-header-search__results::-webkit-scrollbar-thumb {
    background: rgba(122, 133, 153, 0.35);
    border-radius: 999px;
}

@keyframes app-header-search-pulse {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.account-profile-template__cover {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.38), transparent 28%),
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.18), rgba(var(--bs-primary-rgb), 0.06) 42%, rgba(122, 133, 153, 0.12));
    border-bottom: 1px solid rgba(122, 133, 153, 0.12);
    height: 120px;
    width: 100%;
}

.account-profile-template__avatar {
    height: 5.5rem;
    width: 5.5rem;
}

.account-profile-template__avatar .avatar-xl {
    height: 5.5rem;
    width: 5.5rem;
}

@media (min-width: 1200px) {
    .account-profile-template__side-card {
        position: sticky;
        top: 6rem;
    }
}

.account-profile-template__tabs {
    background: rgba(122, 133, 153, 0.06);
    border: 1px solid rgba(122, 133, 153, 0.12);
    border-radius: 0.65rem;
    gap: 0.35rem;
    padding: 0.35rem;
}

.account-profile-template__tabs .nav-item {
    min-width: 0;
}

.account-profile-template__tabs .nav-link {
    align-items: center;
    border-radius: 0.45rem;
    color: var(--bs-emphasis-color);
    display: flex;
    font-weight: 600;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.55rem 0.75rem;
}

.account-profile-template__tabs .nav-link.active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

.account-profile-template__info-item {
    border: 1px solid rgba(122, 133, 153, 0.16);
    border-radius: 0.45rem;
    height: 100%;
    min-height: 4.8rem;
    padding: 0.95rem 1rem;
}

.account-profile-template__section {
    border-top: 1px solid rgba(122, 133, 153, 0.14);
    margin-top: 1.35rem;
    padding-top: 1.35rem;
}

.account-profile-template__section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.account-profile-template__metric,
.account-profile-template__preference {
    align-items: flex-start;
    border: 1px solid rgba(122, 133, 153, 0.16);
    border-radius: 0.45rem;
    display: flex;
    gap: 0.85rem;
    height: 100%;
    min-height: 5.65rem;
    padding: 0.95rem 1rem;
}

.account-profile-template__metric-icon,
.account-profile-template__preference-icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.09);
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    flex: 0 0 2.25rem;
    font-size: 1.15rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.account-profile-template__empty {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.035);
    border: 1px solid rgba(122, 133, 153, 0.16);
    border-radius: 0.45rem;
    display: flex;
    gap: 0.85rem;
    padding: 1rem;
}

.account-profile-template__empty i {
    color: var(--bs-primary);
    font-size: 1.65rem;
}

.account-profile-template__photo-preview {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-radius: 999px;
    height: 4.25rem;
    overflow: hidden;
    width: 4.25rem;
}

.account-profile-template__link-icon {
    flex: 0 0 2.75rem;
    height: 2.75rem;
    width: 2.75rem;
}

.account-profile-theme-toggle {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    justify-content: center;
    line-height: 1.2;
}

.account-profile-theme-toggle__icon,
.account-profile-theme-toggle__button-icon {
    line-height: 1;
}

.account-profile-theme-toggle__icon i,
.account-profile-theme-toggle__button-icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.account-profile-theme-toggle__icon i {
    height: 1.15rem;
    width: 1.15rem;
}

.account-profile-theme-toggle__button-icon {
    font-size: 0.95rem;
    height: 1rem;
    margin: 0;
    width: 1rem;
}

.account-profile-theme-toggle__icon i::before,
.account-profile-theme-toggle__button-icon::before {
    line-height: 1;
}

.account-quick-actions {
    --account-quick-action-border: rgba(122, 133, 153, 0.16);
}

.account-quick-actions__counter {
    align-items: center;
    display: inline-flex;
    min-height: 1.9rem;
}

.account-quick-actions__selected {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .account-quick-actions__selected {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.account-quick-actions__selected-panel {
    background: linear-gradient(180deg, rgba(122, 133, 153, 0.035), rgba(122, 133, 153, 0.015));
    border: 1px solid rgba(122, 133, 153, 0.14);
    border-radius: 0.7rem;
    padding: 1rem;
}

.account-quick-actions__selected-row,
.account-quick-actions__choice,
.account-quick-actions__empty {
    align-items: center;
    border: 1px solid var(--account-quick-action-border);
    border-radius: 0.55rem;
    display: flex;
}

.account-quick-actions__selected-row {
    align-items: flex-start;
    background: var(--bs-body-bg);
    flex-wrap: wrap;
    gap: 0.85rem;
    min-height: 4.35rem;
    padding: 0.75rem;
    position: relative;
}

.account-quick-actions__selected-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.account-quick-actions__selected-meta {
    flex: 1 0 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-quick-actions__row-controls {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    margin-left: auto;
}

.account-quick-actions__row-controls .btn {
    align-items: center;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.account-quick-actions__available {
    margin-top: 1rem;
}

.account-quick-actions__picker {
    --bs-offcanvas-width: min(35rem, calc(100vw - 1rem));
}

.account-quick-actions__picker .offcanvas-header {
    border-bottom: 1px solid rgba(122, 133, 153, 0.14);
}

.account-quick-actions__picker .offcanvas-body {
    display: flex;
    flex-direction: column;
}

.account-quick-actions__search {
    min-width: min(20rem, 100%);
    position: relative;
}

.account-quick-actions__search i {
    color: var(--bs-secondary-color);
    left: 0.75rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.account-quick-actions__search .form-control {
    padding-left: 2.15rem;
}

.account-quick-actions__groups {
    display: grid;
    gap: 1rem;
    max-height: min(68vh, 46rem);
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
}

.account-quick-actions__groups--picker {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.account-quick-actions__groups::-webkit-scrollbar {
    width: 0.45rem;
}

.account-quick-actions__groups::-webkit-scrollbar-thumb {
    background: rgba(122, 133, 153, 0.28);
    border-radius: 999px;
}

.account-quick-actions__group-title {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0.55rem;
    text-transform: uppercase;
}

.account-quick-actions__picker-list {
    display: grid;
    gap: 0.55rem;
}

.account-quick-actions__choice {
    cursor: pointer;
    gap: 0.75rem;
    height: 100%;
    min-height: 4.65rem;
    padding: 0.75rem;
    transition: border-color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease;
}

.account-quick-actions__picker .account-quick-actions__choice {
    min-height: 4.05rem;
}

.account-quick-actions__choice.is-selected {
    background: rgba(var(--bs-primary-rgb), 0.055);
    border-color: rgba(var(--bs-primary-rgb), 0.28);
}

.account-quick-actions__choice.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.account-quick-actions__choice .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.account-quick-actions__choice-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 0.1rem;
    min-width: 0;
}

.account-quick-actions__choice-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-quick-actions__icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.09);
    border-radius: 50%;
    color: var(--bs-primary);
    display: inline-flex;
    flex: 0 0 2.25rem;
    font-size: 1.05rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.account-quick-actions__empty {
    background: rgba(122, 133, 153, 0.045);
    gap: 0.85rem;
    grid-column: 1 / -1;
    min-height: 4.35rem;
    padding: 0.9rem 1rem;
}

.account-quick-actions__empty > i {
    color: var(--bs-primary);
    font-size: 1.4rem;
}

.account-quick-actions__picker-footer {
    align-items: center;
    background: var(--bs-body-bg);
    border-top: 1px solid rgba(122, 133, 153, 0.14);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem;
}

.account-profile-photo-workspace {
    border-top: 1px solid rgba(122, 133, 153, 0.16);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.account-password-layout .card {
    height: 100%;
    width: 100%;
}

.account-password-layout .account-password-form-card .card-body {
    display: flex;
    flex-direction: column;
}

.account-password-layout .account-password-form-card form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.account-password-layout .account-password-actions {
    margin-top: auto;
}

.account-profile-avatar-shell {
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.account-profile-avatar-shell:hover,
.account-profile-avatar-shell:focus-visible {
    transform: translateY(-2px);
}

.account-profile-avatar-shell:focus-visible {
    outline: 0;
}

.account-profile-avatar-edit {
    align-items: center;
    background: var(--bs-primary);
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.16);
    color: #fff;
    display: inline-flex;
    height: 2.15rem;
    justify-content: center;
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
    width: 2.15rem;
}

.account-profile-photo-editor {
    position: relative;
}

.account-profile-photo-dropzone {
    background:
        radial-gradient(circle at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 42%),
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.05), rgba(var(--bs-secondary-rgb), 0.03));
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.28);
    border-radius: 0.85rem;
    cursor: pointer;
    padding: 1.35rem;
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.account-profile-photo-dropzone:hover,
.account-profile-photo-dropzone:focus-visible,
.account-profile-photo-dropzone.is-drag-over {
    border-color: rgba(var(--bs-primary-rgb), 0.52);
    box-shadow: 0 0 0 0.18rem rgba(var(--bs-primary-rgb), 0.12);
    transform: translateY(-1px);
}

.account-profile-photo-dropzone:focus-visible {
    outline: 0;
}

.account-profile-photo-dropzone__icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    font-size: 1.5rem;
    height: 3.5rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 3.5rem;
}

.account-profile-photo-stage {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.03), transparent);
    border: 1px solid rgba(122, 133, 153, 0.15);
    border-radius: 0.85rem;
    margin-top: 1rem;
    padding: 1rem;
}

.account-profile-photo-cropper__frame {
    aspect-ratio: 1 / 1;
    background:
        linear-gradient(45deg, rgba(122, 133, 153, 0.08) 25%, transparent 25%, transparent 75%, rgba(122, 133, 153, 0.08) 75%),
        linear-gradient(45deg, rgba(122, 133, 153, 0.08) 25%, transparent 25%, transparent 75%, rgba(122, 133, 153, 0.08) 75%);
    background-color: rgba(var(--bs-body-color-rgb), 0.02);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
    border: 1px solid rgba(122, 133, 153, 0.2);
    border-radius: 0.85rem;
    cursor: grab;
    margin: 0 auto;
    max-width: 320px;
    overflow: hidden;
    position: relative;
    touch-action: none;
    user-select: none;
}

.account-profile-photo-cropper__frame.is-dragging {
    cursor: grabbing;
}

.account-profile-photo-cropper__frame img,
.account-profile-photo-preview-circle img {
    max-width: none;
    pointer-events: none;
    position: absolute;
    user-select: none;
}

.account-profile-photo-cropper__mask {
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 0.85rem;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.08),
        inset 0 0 0 999px rgba(15, 23, 42, 0.06);
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.account-profile-photo-cropper__mask::before,
.account-profile-photo-cropper__mask::after {
    background: rgba(255, 255, 255, 0.32);
    content: "";
    position: absolute;
}

.account-profile-photo-cropper__mask::before {
    bottom: 0;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
}

.account-profile-photo-cropper__mask::after {
    height: 1px;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.account-profile-photo-preview-card {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 0.85rem;
    padding: 1rem;
}

.account-profile-photo-preview-circle {
    aspect-ratio: 1 / 1;
    background: rgba(var(--bs-body-color-rgb), 0.04);
    border: 4px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.12);
    margin-bottom: 1rem;
    max-width: 118px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

[data-bs-theme="dark"] .header-profile-user--fallback {
    background: rgba(117, 189, 255, 0.18);
    color: #d9ebff;
}

[data-bs-theme="dark"] .account-profile-template__info-item,
[data-bs-theme="dark"] .account-profile-template__empty,
[data-bs-theme="dark"] .account-profile-template__metric,
[data-bs-theme="dark"] .account-profile-template__preference,
[data-bs-theme="dark"] .account-quick-actions__selected-panel,
[data-bs-theme="dark"] .account-quick-actions__selected-row,
[data-bs-theme="dark"] .account-quick-actions__choice,
[data-bs-theme="dark"] .account-quick-actions__empty {
    border-color: rgba(117, 189, 255, 0.15);
}

[data-bs-theme="dark"] .account-profile-template__tabs {
    background: rgba(117, 189, 255, 0.055);
    border-color: rgba(117, 189, 255, 0.13);
}

[data-bs-theme="dark"] .account-profile-template__tabs .nav-link.active {
    background: rgba(117, 189, 255, 0.14);
    color: #d9ebff;
}

[data-bs-theme="dark"] .account-profile-template__cover {
    background:
        radial-gradient(circle at 18% 12%, rgba(117, 189, 255, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(117, 189, 255, 0.12), rgba(24, 39, 58, 0.88) 42%, rgba(21, 28, 39, 0.9));
    border-bottom-color: rgba(117, 189, 255, 0.14);
}

[data-bs-theme="dark"] .account-profile-template__section {
    border-top-color: rgba(117, 189, 255, 0.14);
}

[data-bs-theme="dark"] .account-profile-template__empty,
[data-bs-theme="dark"] .account-profile-template__photo-preview,
[data-bs-theme="dark"] .account-quick-actions__empty {
    background: rgba(117, 189, 255, 0.055);
}

[data-bs-theme="dark"] .account-profile-template__metric-icon,
[data-bs-theme="dark"] .account-profile-template__preference-icon,
[data-bs-theme="dark"] .account-quick-actions__icon {
    background: rgba(117, 189, 255, 0.12);
    color: #d9ebff;
}

[data-bs-theme="dark"] .account-quick-actions__selected-row {
    background: rgba(21, 28, 39, 0.66);
}

[data-bs-theme="dark"] .account-quick-actions__selected-panel {
    background: linear-gradient(180deg, rgba(117, 189, 255, 0.055), rgba(21, 28, 39, 0.22));
}

[data-bs-theme="dark"] .account-quick-actions__choice.is-selected {
    background: rgba(117, 189, 255, 0.075);
    border-color: rgba(117, 189, 255, 0.26);
}

[data-bs-theme="dark"] .app-header-search__menu {
    background: #24282f;
    border-color: rgba(117, 189, 255, 0.16);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.34);
}

[data-bs-theme="dark"] .app-mobile-search-sheet__panel {
    background: #24282f;
    box-shadow: 0 -1rem 3rem rgba(0, 0, 0, 0.36);
}

[data-bs-theme="dark"] .app-header-search__result:hover,
[data-bs-theme="dark"] .app-header-search__result:focus-visible {
    background: rgba(117, 189, 255, 0.08);
    border-color: rgba(117, 189, 255, 0.18);
}

[data-bs-theme="dark"] .app-header-search__result-icon {
    background: rgba(117, 189, 255, 0.14);
    color: #d9ebff;
}

[data-bs-theme="dark"] .app-header-search__result-type {
    background: rgba(117, 189, 255, 0.12);
    border-color: rgba(117, 189, 255, 0.18);
    color: #d9ebff;
}

[data-bs-theme="dark"] .account-profile-photo-dropzone {
    background:
        radial-gradient(circle at top right, rgba(117, 189, 255, 0.12), transparent 42%),
        linear-gradient(135deg, rgba(24, 39, 58, 0.8), rgba(21, 28, 39, 0.9));
    border-color: rgba(117, 189, 255, 0.28);
}

[data-bs-theme="dark"] .account-profile-photo-stage {
    background: linear-gradient(180deg, rgba(117, 189, 255, 0.05), rgba(21, 28, 39, 0.24));
    border-color: rgba(117, 189, 255, 0.16);
}

[data-bs-theme="dark"] .account-profile-photo-cropper__frame {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(117, 189, 255, 0.2);
}

[data-bs-theme="dark"] .account-profile-photo-preview-card {
    background: rgba(117, 189, 255, 0.06);
    border-color: rgba(117, 189, 255, 0.18);
}

[data-bs-theme="dark"] .account-profile-photo-preview-circle {
    border-color: rgba(24, 39, 58, 0.95);
    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.28);
}

@media (max-width: 767.98px) {
    .app-header-search__menu {
        min-width: min(22rem, calc(100vw - 1rem));
    }

    .app-header-search__result-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-profile-photo-stage {
        padding: 0.85rem;
    }

    .account-profile-photo-dropzone {
        padding: 1rem;
    }

    .account-profile-photo-cropper__frame {
        max-width: 100%;
    }

    .account-profile-template__tabs {
        gap: 0.35rem;
        justify-content: flex-start;
    }

    .account-profile-template__tabs.nav-justified .nav-item {
        flex: 0 0 auto;
        width: auto;
    }

    .account-profile-template__tabs .nav-link {
        min-width: max-content;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .account-quick-actions__selected-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .account-quick-actions__selected-meta {
        flex: 1 0 100%;
        min-width: 0;
        text-align: left;
    }

    .account-quick-actions__row-controls {
        margin-left: auto;
    }

    .account-quick-actions__search {
        width: 100%;
    }
}

.app-w-50 {
    width: 50px !important;
}

.app-w-60 {
    width: 60px !important;
}

.app-w-70 {
    width: 70px !important;
}

.app-w-80 {
    width: 80px !important;
}

.app-w-90 {
    width: 90px !important;
}

.app-w-100 {
    width: 100px !important;
}

.app-w-120 {
    width: 120px !important;
}

.app-w-130 {
    width: 130px !important;
}

.app-w-140 {
    width: 140px !important;
}

.app-w-150 {
    width: 150px !important;
}

.app-w-160 {
    width: 160px !important;
}

.app-w-170 {
    width: 170px !important;
}

.app-w-180 {
    width: 180px !important;
}

.app-w-220 {
    width: 220px !important;
}

.app-w-230 {
    width: 230px !important;
}

.app-w-280 {
    width: 280px !important;
}

.app-minw-190 {
    min-width: 190px !important;
}

.app-minw-200 {
    min-width: 200px !important;
}

.app-minw-220 {
    min-width: 220px !important;
}

.app-minw-280 {
    min-width: 280px !important;
}

.app-match-table {
    table-layout: fixed;
}

.app-match-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.app-match-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.app-match-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
}

.app-match-nav .nav-link {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding-inline: 0.9rem;
    white-space: nowrap;
    width: 100%;
}

.app-match-filter-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1rem;
}

.app-responsive-filter-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1rem;
}

.app-match-filter-toggle {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    min-height: 48px;
    width: 100%;
}

.app-responsive-filter-toggle {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    min-height: 48px;
    width: 100%;
}

.app-match-filter-toggle__value {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.16);
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    max-width: 56%;
    overflow: hidden;
    padding: 0.25rem 0.55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-responsive-filter-toggle__value {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.16);
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    max-width: 56%;
    overflow: hidden;
    padding: 0.25rem 0.55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-match-filter-form__actions {
    display: flex;
    gap: 0.5rem;
}

.app-responsive-filter-form__actions {
    display: flex;
    gap: 0.5rem;
}

.app-responsive-filter-badge-slot {
    align-items: end;
    display: flex;
    justify-content: flex-end;
}

.app-match-filter-sheet {
    border-radius: 18px 18px 0 0;
    height: auto !important;
    max-height: min(76vh, 520px);
}

.app-responsive-filter-sheet {
    border-radius: 18px 18px 0 0;
    height: auto !important;
    max-height: min(82vh, 620px);
}

.app-match-filter-sheet__form {
    display: flex;
    flex-direction: column;
    max-height: min(76vh, 520px);
}

.app-responsive-filter-sheet__form {
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 620px);
}

.app-match-filter-sheet__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1rem 0.85rem;
}

.app-responsive-filter-sheet__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1rem 0.85rem;
}

.app-match-filter-sheet__body {
    padding: 1rem;
}

.app-responsive-filter-sheet__body {
    padding: 1rem;
}

.app-match-filter-sheet__footer {
    border-top: 1px solid var(--bs-border-color);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
}

.app-responsive-filter-sheet__footer {
    border-top: 1px solid var(--bs-border-color);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
}

.app-match-filter-sheet__footer .btn {
    min-height: 44px;
}

.app-responsive-filter-sheet__footer .btn {
    min-height: 44px;
}

.app-responsive-filter-sheet__footer .btn:only-child {
    grid-column: 1 / -1;
}

.app-match-current-results-table {
    min-width: 1540px;
}

.app-match-referee-assignments-table {
    min-width: 1580px;
}

.app-match-referee-grades-table {
    min-width: 1340px;
}

.app-match-player-forfeits-table {
    min-width: 1240px;
}

.app-match-table th,
.app-match-table td {
    vertical-align: middle;
}

.app-match-table th {
    white-space: nowrap;
}

.app-match-table__col-index {
    width: 48px;
}

.app-match-table__col-sheet {
    width: 64px;
}

.app-match-table__col-team {
    width: 210px;
}

.app-match-table__col-separator {
    width: 36px;
}

.app-match-table__col-date {
    width: 92px;
}

.app-match-table__col-finished {
    width: 82px;
}

.app-match-table__col-result {
    width: 148px;
}

.app-match-table__col-flag {
    width: 130px;
}

.app-match-table__col-assignment,
.app-match-table__col-support {
    width: 460px;
}

.app-match-table__col-officials-readonly {
    width: 300px;
}

.app-match-table__col-grade {
    width: 380px;
}

.app-match-table__col-player {
    width: 260px;
}

.app-match-table__col-card {
    width: 110px;
}

.app-match-table__col-penalty {
    width: 300px;
}

.app-match-table .form-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-left: 0;
}

.app-match-table .form-check-inline {
    margin-right: 0;
}

.app-match-table .form-check-input[type="checkbox"] {
    float: none;
    display: block;
    margin: 0;
}

.app-match-table__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.app-match-table__score .form-select {
    width: 3.25rem !important;
    min-width: 3.25rem;
}

.app-match-table__stack-cell {
    white-space: normal;
}

.app-match-table__field-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-match-table__field-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}

.app-match-table__field-row .form-select {
    min-width: 0;
}

.app-match-table__field-badge {
    justify-self: start;
    min-width: 2rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    .app-match-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        width: 100%;
    }

    .app-match-summary .app-status-badge {
        justify-content: center;
        min-height: 28px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .app-match-summary > .btn {
        display: flex;
        grid-column: 1 / -1;
        justify-content: center;
        justify-self: stretch;
        min-height: 48px;
        width: 100%;
    }

    .app-match-filter-sheet__footer,
    .app-responsive-filter-sheet__footer {
        grid-template-columns: 1fr;
    }

    .app-match-nav {
        flex-wrap: nowrap;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 0.55rem !important;
        scroll-padding-inline: 0.55rem;
        -webkit-overflow-scrolling: touch;
    }

    .app-match-nav .nav-item {
        flex: 0 0 auto;
    }

    .app-match-nav::-webkit-scrollbar {
        display: none;
    }

    .app-match-nav .nav-link {
        min-height: 42px;
        padding-inline: 1rem;
    }

}

.match-sheet-sticky-actions {
    z-index: 1000;
    margin-left: -24px;
    margin-right: -24px;
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

.match-sheet-footer-fix {
    z-index: 999;
}

.match-sheet-inline-note,
.match-sheet-tab-nav,
.match-sheet-score-strip {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

.match-sheet-panel {
    --match-sheet-panel-surface: var(--bs-body-bg);
    --match-sheet-panel-border: rgba(122, 133, 153, 0.18);
    --match-sheet-panel-header-bg: var(--bs-tertiary-bg);
    --match-sheet-panel-title-color: var(--bs-emphasis-color, var(--bs-body-color));
    --match-sheet-panel-meta-color: var(--bs-secondary-color);
    --match-sheet-panel-accent: var(--bs-primary);
    --match-sheet-panel-soft-bg: rgba(var(--bs-primary-rgb), 0.08);
    --match-sheet-panel-soft-border: rgba(var(--bs-primary-rgb), 0.2);
    --match-sheet-panel-soft-color: var(--match-sheet-panel-title-color);
    --match-sheet-panel-cta-bg: var(--match-sheet-panel-accent);
    --match-sheet-panel-cta-border: var(--match-sheet-panel-accent);
    --match-sheet-panel-cta-hover-bg: var(--match-sheet-panel-accent);
    --match-sheet-panel-cta-hover-border: var(--match-sheet-panel-accent);
    border: 1px solid var(--match-sheet-panel-border) !important;
    background-color: var(--match-sheet-panel-surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.match-sheet-panel__header {
    background: var(--match-sheet-panel-header-bg) !important;
    border-bottom: 1px solid var(--match-sheet-panel-border) !important;
    color: var(--match-sheet-panel-title-color);
    padding: 1rem 1.5rem;
}

.match-sheet-panel__header h5,
.match-sheet-panel__title {
    color: var(--match-sheet-panel-title-color);
}

.match-sheet-panel__icon {
    color: var(--match-sheet-panel-accent);
}

.match-sheet-panel__meta {
    color: var(--match-sheet-panel-meta-color) !important;
}

.match-sheet-panel .card-body {
    background-color: var(--match-sheet-panel-surface);
}

.match-sheet-panel__action-btn,
.match-sheet-panel__danger-btn {
    background-color: var(--match-sheet-panel-cta-bg);
    border-color: var(--match-sheet-panel-cta-border);
    color: #fff;
}

.match-sheet-panel__action-btn:hover,
.match-sheet-panel__action-btn:focus,
.match-sheet-panel__danger-btn:hover,
.match-sheet-panel__danger-btn:focus {
    background-color: var(--match-sheet-panel-cta-hover-bg);
    border-color: var(--match-sheet-panel-cta-hover-border);
    color: #fff;
}

.match-sheet-panel__toggle {
    background-color: var(--match-sheet-panel-soft-bg);
    border-color: var(--match-sheet-panel-soft-border);
    color: var(--match-sheet-panel-soft-color);
}

.match-sheet-panel__toggle:hover,
.match-sheet-panel__toggle:focus,
.match-sheet-panel__toggle:active {
    background-color: var(--match-sheet-panel-soft-bg);
    border-color: var(--match-sheet-panel-soft-border);
    color: var(--match-sheet-panel-soft-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.08);
}

.match-sheet-panel--import {
    --match-sheet-panel-border: rgba(47, 109, 179, 0.18);
    --match-sheet-panel-header-bg: linear-gradient(135deg, rgba(47, 109, 179, 0.12), rgba(126, 198, 255, 0.16));
    --match-sheet-panel-title-color: #29476d;
    --match-sheet-panel-meta-color: #607997;
    --match-sheet-panel-accent: #2f6db3;
    --match-sheet-panel-soft-bg: rgba(47, 109, 179, 0.08);
    --match-sheet-panel-soft-border: rgba(47, 109, 179, 0.2);
    --match-sheet-panel-soft-color: #29476d;
    --match-sheet-panel-cta-bg: #2f6db3;
    --match-sheet-panel-cta-border: #2f6db3;
    --match-sheet-panel-cta-hover-bg: #255a94;
    --match-sheet-panel-cta-hover-border: #255a94;
}

.match-sheet-panel--maintenance {
    --match-sheet-panel-surface: #fffdf8;
    --match-sheet-panel-border: rgba(154, 106, 28, 0.22);
    --match-sheet-panel-header-bg: linear-gradient(135deg, rgba(245, 215, 146, 0.42), rgba(255, 245, 211, 0.84));
    --match-sheet-panel-title-color: #6f4f1c;
    --match-sheet-panel-meta-color: #8e6b35;
    --match-sheet-panel-accent: #9a6a1c;
    --match-sheet-panel-soft-bg: rgba(154, 106, 28, 0.1);
    --match-sheet-panel-soft-border: rgba(154, 106, 28, 0.2);
    --match-sheet-panel-soft-color: #6f4f1c;
    --match-sheet-panel-cta-bg: #9a6a1c;
    --match-sheet-panel-cta-border: #9a6a1c;
    --match-sheet-panel-cta-hover-bg: #815817;
    --match-sheet-panel-cta-hover-border: #815817;
}

.match-sheet-inline-note {
    color: var(--bs-secondary-color);
}

.match-sheet-tab-nav .nav-link {
    color: var(--bs-body-color);
}

.match-sheet-score-strip .border-end {
    border-color: var(--bs-border-color) !important;
}

.match-sheet-score-feedback {
    line-height: 1.5;
}

.match-sheet-score-conditional:disabled {
    background-color: var(--bs-tertiary-bg) !important;
    cursor: not-allowed;
    opacity: 0.8;
}

.match-sheet-page textarea[readonly] {
    background-color: var(--bs-tertiary-bg);
    cursor: not-allowed;
}

.match-sheet-stat-card {
    border: 1px solid rgba(122, 133, 153, 0.18) !important;
    overflow: hidden;
}

.match-sheet-stat-card__header {
    border-bottom: 1px solid rgba(122, 133, 153, 0.18);
}

.match-sheet-stat-card--goals .match-sheet-stat-card__header {
    background: linear-gradient(135deg, rgba(35, 122, 76, 0.12), rgba(176, 236, 196, 0.3));
    color: #1f6b45;
}

.match-sheet-stat-card--cards .match-sheet-stat-card__header {
    background: linear-gradient(135deg, rgba(181, 112, 21, 0.14), rgba(255, 226, 168, 0.34));
    color: #835216;
}

.match-sheet-entity-row.d-none {
    display: none !important;
}

[data-bs-theme="dark"] .match-sheet-sticky-actions {
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .match-sheet-panel {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

[data-bs-theme="dark"] .match-sheet-panel--import {
    --match-sheet-panel-surface: #24282f;
    --match-sheet-panel-border: rgba(117, 189, 255, 0.28);
    --match-sheet-panel-header-bg: linear-gradient(135deg, rgba(47, 109, 179, 0.3), rgba(23, 39, 61, 0.84));
    --match-sheet-panel-title-color: #e4f0ff;
    --match-sheet-panel-meta-color: #a8c0dd;
    --match-sheet-panel-accent: #75bdff;
    --match-sheet-panel-soft-bg: rgba(117, 189, 255, 0.12);
    --match-sheet-panel-soft-border: rgba(117, 189, 255, 0.26);
    --match-sheet-panel-soft-color: #deecff;
    --match-sheet-panel-cta-bg: #3b82c4;
    --match-sheet-panel-cta-border: #3b82c4;
    --match-sheet-panel-cta-hover-bg: #2f6fa8;
    --match-sheet-panel-cta-hover-border: #2f6fa8;
}

[data-bs-theme="dark"] .match-sheet-panel--maintenance {
    --match-sheet-panel-surface: #2a2620;
    --match-sheet-panel-border: rgba(240, 197, 106, 0.26);
    --match-sheet-panel-header-bg: linear-gradient(135deg, rgba(154, 106, 28, 0.34), rgba(70, 54, 27, 0.84));
    --match-sheet-panel-title-color: #ffe8bc;
    --match-sheet-panel-meta-color: #d9c18e;
    --match-sheet-panel-accent: #f0c56a;
    --match-sheet-panel-soft-bg: rgba(240, 197, 106, 0.14);
    --match-sheet-panel-soft-border: rgba(240, 197, 106, 0.26);
    --match-sheet-panel-soft-color: #ffe8bc;
    --match-sheet-panel-cta-bg: #ad7930;
    --match-sheet-panel-cta-border: #ad7930;
    --match-sheet-panel-cta-hover-bg: #956821;
    --match-sheet-panel-cta-hover-border: #956821;
}

[data-bs-theme="dark"] .match-sheet-stat-card {
    border-color: rgba(122, 133, 153, 0.24) !important;
}

[data-bs-theme="dark"] .match-sheet-stat-card__header {
    border-bottom-color: rgba(122, 133, 153, 0.24);
}

[data-bs-theme="dark"] .match-sheet-stat-card--goals .match-sheet-stat-card__header {
    background: linear-gradient(135deg, rgba(31, 107, 69, 0.42), rgba(17, 46, 33, 0.9));
    color: #c8f1dc;
}

[data-bs-theme="dark"] .match-sheet-stat-card--cards .match-sheet-stat-card__header {
    background: linear-gradient(135deg, rgba(131, 82, 22, 0.42), rgba(58, 42, 18, 0.92));
    color: #ffe1ad;
}

/* Keep CKEditor readable inside the Webadmin theme across all pages. */
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-toolbar,
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
    background: #fff !important;
    color: #282c2f !important;
}

.ck.ck-button,
a.ck.ck-button,
.ck.ck-button .ck-icon,
a.ck.ck-button .ck-icon,
.ck.ck-dropdown__button,
.ck.ck-dropdown__button .ck-button__label {
    color: #282c2f !important;
}

.ck.ck-button:not(.ck-disabled):hover,
.ck.ck-button:not(.ck-disabled):focus,
.ck.ck-button.ck-on,
a.ck.ck-button:not(.ck-disabled):hover,
a.ck.ck-button:not(.ck-disabled):focus,
a.ck.ck-button.ck-on,
.ck.ck-button:active,
a.ck.ck-button:active {
    background: rgba(31, 88, 199, 0.12) !important;
    border-color: rgba(31, 88, 199, 0.2) !important;
    color: #1f58c7 !important;
    box-shadow: none !important;
}

.ck.ck-button:not(.ck-disabled):hover .ck-icon,
.ck.ck-button:not(.ck-disabled):focus .ck-icon,
.ck.ck-button.ck-on .ck-icon,
a.ck.ck-button:not(.ck-disabled):hover .ck-icon,
a.ck.ck-button:not(.ck-disabled):focus .ck-icon,
a.ck.ck-button.ck-on .ck-icon {
    color: #1f58c7 !important;
}

.ck.ck-tooltip .ck-tooltip__text,
.ck.ck-tooltip .ck-tooltip__text * {
    background: #1f2937 !important;
    color: #fff !important;
}

.ck.ck-list,
.ck.ck-dropdown__panel,
.ck.ck-dropdown__panel .ck-button,
.ck.ck-list__item .ck-button .ck-button__label {
    color: #282c2f !important;
    font-family: "IBM Plex Sans", sans-serif !important;
}

/* Keep uploaded rich-text images responsive inside the editor and rendered HTML. */
.ck.ck-editor__main > .ck-editor__editable img,
.ck.ck-editor__main > .ck-editor__editable .image img,
.ck-content img,
.ck-content .image img,
.app-richtext-content img,
.app-richtext-content .image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ck.ck-editor__main > .ck-editor__editable .image,
.ck-content .image,
.app-richtext-content .image {
    display: table;
    clear: both;
    margin: 1.25rem auto;
    max-width: 100%;
}

.ck.ck-editor__main > .ck-editor__editable .image.image_resized,
.ck-content .image.image_resized,
.app-richtext-content .image.image_resized {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
}

.ck.ck-editor__main > .ck-editor__editable .image.image_resized img,
.ck-content .image.image_resized img,
.app-richtext-content .image.image_resized img {
    width: 100%;
}

.ck.ck-editor__main > .ck-editor__editable figcaption,
.ck-content figcaption,
.app-richtext-content figcaption {
    color: #7a8290;
    font-size: 0.875rem;
    line-height: 1.45;
    margin-top: 0.5rem;
    text-align: center;
}

/* Editor sizing by page. */
#announcement-text + .ck-editor .ck-editor__editable_inline,
.announcement-richtext-editor + .ck-editor .ck-editor__editable_inline {
    min-height: 300px;
}

.announcement-form-card {
    overflow: hidden;
}

.announcement-form-summary {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.02));
}

.announcement-form-summary__eyebrow {
    letter-spacing: 0.08em;
}

.announcement-form-summary__badge {
    white-space: normal;
    max-width: 26rem;
    text-align: left;
}

.announcement-form-tabs {
    gap: 0.35rem;
}

.announcement-form-tabs .nav-item {
    flex: 0 0 auto;
}

.announcement-form-tabs .nav-link {
    border-radius: 0.9rem 0.9rem 0 0;
    font-weight: 600;
    padding: 0.9rem 1rem;
}

.announcement-form-pane,
.announcement-form-schedule {
    background-color: rgba(248, 249, 250, 0.75);
}

.announcement-form-image {
    min-height: 220px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0.95), rgba(233, 236, 239, 0.95));
}

.announcement-form-image img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}

.announcement-form-image--empty {
    border: 1px dashed rgba(122, 130, 144, 0.35);
}

#history-editor + .ck-editor .ck-editor__editable_inline {
    min-height: 380px;
}

.app-public-shell .page-content {
    min-height: calc(100vh - 84px);
}

/* Settings page */
.settings-hero-card {
    border-radius: 1rem;
}

.settings-hero-badge {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.settings-hero-copy {
    max-width: 56rem;
}

.settings-hero-card .card-body {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.settings-summary-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-summary-value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0.5rem;
}

.settings-tabs-card .card-footer {
    border-top-style: dashed !important;
}

.settings-tabs-card {
    overflow: hidden;
}

.settings-nav-tabs {
    gap: 0.25rem;
}

.settings-nav-tabs .nav-item {
    flex: 0 0 auto;
}

.settings-nav-tabs .nav-link {
    border-radius: 0.9rem 0.9rem 0 0;
    font-weight: 600;
    text-align: center;
    padding: 0.85rem 1rem;
}

.settings-tab-icon {
    font-size: 1rem;
    line-height: 1;
}

.settings-nav-tabs .nav-link.active {
    border-bottom-color: transparent;
}

.settings-switch-box {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid transparent;
}

.settings-switch-box .form-check {
    min-height: 1.75rem;
    padding-left: 3rem;
}

.settings-switch-box .form-check-label {
    display: block;
    line-height: 1.4;
    margin-top: 0;
}

.settings-platform-switch {
    border-radius: 8px;
}

.settings-platform-switch .card-body {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1.1rem 1.25rem;
}

.settings-platform-switch__copy {
    color: var(--bs-heading-color);
    display: block;
    min-width: 0;
}

.settings-platform-switch__toggle {
    align-items: center;
    display: inline-flex;
    gap: 0.75rem;
    justify-content: flex-end;
    min-width: max-content;
}

.settings-platform-switch__toggle-label {
    color: var(--bs-heading-color);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.3;
}

.settings-platform-switch__toggle .form-check {
    margin: 0;
    min-height: 0;
    padding-left: 0;
}

.settings-platform-switch__toggle .form-check-input {
    cursor: pointer;
    float: none;
    margin: 0;
}

.settings-google-auth-activation {
    align-items: center;
    background: var(--app-surface-soft);
    border-color: var(--app-surface-border) !important;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1.1rem 1.25rem;
}

.settings-google-auth-activation__copy {
    color: var(--app-heading-accent);
    cursor: pointer;
    display: block;
    min-width: 0;
}

.settings-google-auth-activation__title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.settings-google-auth-activation__control {
    align-items: center;
    display: inline-flex;
    gap: 0.85rem;
    justify-content: flex-end;
    min-width: max-content;
}

.settings-google-auth-activation__control .form-check {
    min-height: 0;
    padding-left: 0;
}

.settings-google-auth-activation__control .form-check-input {
    cursor: pointer;
    float: none;
    margin: 0;
}

.settings-portal-card,
.settings-role-card,
.settings-permission-group-card {
    border-radius: 1rem;
}

.settings-portal-card .card-body {
    min-height: 100px;
}

.settings-portal-card .min-w-0 {
    min-width: 0;
}

.settings-portal-card .avatar-title {
    height: 2.75rem;
    width: 2.75rem;
}

.settings-portal-card .form-check-input,
.settings-role-card .form-check-input {
    float: none;
    margin-left: 0;
}

.settings-portal-copy {
    line-height: 1.45;
}

.settings-role-description {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.settings-role-card .btn {
    font-weight: 600;
}

.settings-icon-badge {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 999px;
    color: var(--bs-primary);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.settings-icon-badge i {
    font-size: 1.1rem;
    line-height: 1;
}

.settings-permission-group-card .card-header {
    padding: 1rem 1.25rem;
}

.settings-permissions-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-permissions-table th,
.settings-permissions-table td {
    padding: 0.85rem 1rem;
}

.settings-permissions-table td .small {
    line-height: 1.45;
}

.settings-permission-checkbox {
    float: none;
    margin: 0;
}

.settings-map-preview {
    border-radius: 1rem;
    border: 1px solid transparent;
    padding: 0.75rem;
}

.settings-map-preview-image {
    display: block;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

.settings-map-empty {
    align-items: center;
    border: 1px dashed rgba(31, 88, 199, 0.24);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    padding: 1.5rem;
    text-align: center;
}

.settings-map-empty i {
    font-size: 2rem;
}

.settings-asset-preview {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    min-height: 7rem;
    padding: 0.75rem;
}

.settings-asset-preview img {
    max-height: 4.5rem;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.settings-brand-colors-card {
    border-radius: 1rem;
}

.settings-brand-colors-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-brand-card-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.settings-brand-restore-button {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
}

.settings-brand-presets {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.settings-brand-preset {
    align-items: center;
    appearance: none;
    background: var(--bs-body-bg);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;
    display: flex;
    gap: 0.8rem;
    justify-content: flex-start;
    min-height: 3.5rem;
    padding: 0.75rem 0.9rem;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.settings-brand-preset:hover {
    border-color: var(--app-brand-accent-border);
    transform: translateY(-1px);
}

.settings-brand-preset:focus-visible {
    border-color: var(--app-brand-accent);
    box-shadow: 0 0 0 0.2rem var(--app-brand-accent-focus);
    outline: 0;
}

.settings-brand-preset.is-active {
    background: var(--app-brand-accent-subtle);
    border-color: var(--app-brand-accent);
    box-shadow: 0 0 0 0.12rem var(--app-brand-accent-focus);
}

.settings-brand-preset__swatches {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
}

.settings-brand-preset__swatch {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    display: inline-block;
    height: 1rem;
    width: 1rem;
}

.settings-brand-preset__swatch--light {
    background: var(--settings-brand-preset-light);
}

.settings-brand-preset__swatch--dark {
    background: var(--settings-brand-preset-dark);
}

.settings-brand-preset__label {
    color: var(--bs-heading-color);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}

.settings-brand-color-field {
    align-items: center;
    background: var(--bs-body-bg);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;
    display: flex;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
}

.settings-brand-color-input {
    border-radius: 0.9rem;
    flex: 0 0 auto;
    height: 3rem;
    min-width: 4.25rem;
    padding: 0.3rem;
    width: 4.25rem;
}

.settings-brand-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.settings-brand-color-input::-webkit-color-swatch {
    border: 0;
    border-radius: 0.75rem;
}

.settings-brand-color-input::-moz-color-swatch {
    border: 0;
    border-radius: 0.75rem;
}

.settings-brand-color-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.settings-brand-color-caption {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-brand-color-value {
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-summary-tile {
    border: 1px solid transparent;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}

.settings-summary-card {
    position: sticky;
    top: 104px;
}

.settings-summary-meta {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-top: 0.45rem;
}

.settings-summary-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.65rem;
    padding: 0.35rem 0.8rem;
}

.settings-status-dot {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: currentColor;
    display: inline-block;
}

@media (max-width: 991.98px) {
    .settings-nav-tabs .nav-link {
        border-radius: 1rem 1rem 0 0;
        margin-bottom: 0;
        min-width: 0;
        padding: 0.85rem 0.75rem;
    }

    .settings-brand-color-field {
        gap: 0.75rem;
    }

    .settings-summary-card {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .settings-nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.4rem;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0;
        scrollbar-width: none;
    }

    .settings-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .settings-nav-tabs .nav-item {
        flex: 0 0 auto;
        min-width: 0;
    }

    .settings-nav-tabs .nav-link {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 3.5rem;
        min-width: 3.5rem;
        padding: 0.75rem 0.75rem;
        border-radius: 1rem 1rem 0 0;
    }

    .settings-tab-icon {
        font-size: 1.2rem;
    }

    .settings-nav-tabs .nav-link.active {
        border-bottom-color: transparent;
    }

    .settings-brand-preset {
        min-height: 3.2rem;
    }
}

@media (max-width: 575.98px) {
    .settings-brand-color-field {
        align-items: flex-start;
        flex-direction: column;
    }
}

.match-draft-select.conflict-same-row,
.match-draft-select.conflict-other-match,
.match-draft-select.conflict-restr-hard {
    background-color: #fdd !important;
}

.match-draft-select.conflict-restr-last-minute {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.2);
    border-color: #f0ad4e;
}

.match-draft-select.conflict-team-last {
    background-color: #ffd699 !important;
}

.match-draft-select.conflict-team-recent,
.match-draft-select.conflict-restr-soft {
    background-color: #ffe9bf !important;
}

.match-draft-select.conflict-team-streak2 {
    background-color: #ffc266 !important;
}

.match-draft-select.conflict-team-streak3 {
    background-color: #ffb3b3 !important;
}

.match-draft-row--last-minute td {
    background-image: linear-gradient(90deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0));
}

.match-draft-row--last-minute td:first-child {
    box-shadow: inset 4px 0 0 #f0ad4e;
}

.match-draft-last-minute-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 193, 7, 0.18);
    color: #9a6700;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.match-draft-last-minute-pill::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

[data-bs-theme="dark"] .match-draft-select.conflict-restr-last-minute {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.18);
    border-color: #ffcf70;
}

[data-bs-theme="dark"] .match-draft-row--last-minute td {
    background-image: linear-gradient(90deg, rgba(255, 193, 7, 0.14), rgba(255, 193, 7, 0.02));
}

[data-bs-theme="dark"] .match-draft-row--last-minute td:first-child {
    box-shadow: inset 4px 0 0 #ffcf70;
}

[data-bs-theme="dark"] .match-draft-last-minute-pill {
    background: rgba(255, 193, 7, 0.22);
    color: #ffd874;
}

.match-draft-toolbar {
    border-color: rgba(122, 133, 153, 0.18);
}

.match-draft-toolbar .card-title {
    font-size: 1rem;
}

.match-draft-row__match {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.match-draft-row__details {
    min-width: 0;
}

.match-draft-toolbar__switch {
    margin-bottom: 0;
    min-height: 1.5rem;
    padding-left: 2.9rem;
}

.match-draft-toolbar__switch .form-check-input {
    margin-left: -2.9rem;
    margin-top: 0.15rem;
}

.match-draft-row__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
    margin-left: auto;
}

.match-draft-row__summary-item {
    align-items: center;
    background: #f8f9fc;
    border: 1px solid #e6ebf1;
    border-radius: 999px;
    color: #556071;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.35rem;
    line-height: 1.25;
    padding: 0.2rem 0.65rem;
}

.match-draft-row__summary-item strong {
    color: #1f2937;
    font-size: 0.8rem;
    font-weight: 700;
}

.match-draft-row__summary-item--available {
    background: rgba(52, 195, 143, 0.1);
    border-color: rgba(52, 195, 143, 0.16);
    color: #146c55;
}

.match-draft-row__summary-item--conditional {
    background: rgba(247, 184, 75, 0.12);
    border-color: rgba(247, 184, 75, 0.18);
    color: #9b6400;
}

.match-draft-row__summary-item--blocked {
    background: rgba(244, 106, 106, 0.1);
    border-color: rgba(244, 106, 106, 0.16);
    color: #c24c4c;
}

@media (max-width: 767.98px) {
    .match-draft-row__match {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
    }

    .match-draft-row__summary {
        justify-content: flex-start;
        margin-left: 0;
    }

    .match-draft-toolbar__switch {
        padding-left: 2.65rem;
    }

    .match-draft-toolbar__switch .form-check-input {
        margin-left: -2.65rem;
    }

    .match-draft-row__summary-item {
        font-size: 0.68rem;
    }
}

[data-bs-theme="dark"] .match-draft-toolbar {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .match-draft-row__summary-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.92);
}

[data-bs-theme="dark"] .match-draft-row__summary-item strong {
    color: #f8fafc;
}

[data-bs-theme="dark"] .match-draft-row__summary-item--available {
    background: rgba(52, 195, 143, 0.18);
    border-color: rgba(52, 195, 143, 0.26);
    color: #7fe0b9;
}

[data-bs-theme="dark"] .match-draft-row__summary-item--conditional {
    background: rgba(247, 184, 75, 0.2);
    border-color: rgba(247, 184, 75, 0.28);
    color: #ffd28a;
}

[data-bs-theme="dark"] .match-draft-row__summary-item--blocked {
    background: rgba(244, 106, 106, 0.18);
    border-color: rgba(244, 106, 106, 0.26);
    color: #ffaaaa;
}

/* Theme-aware app surfaces */
:root {
    --app-surface-soft: #f8faff;
    --app-surface-base: #ffffff;
    --app-surface-border: #edf1f7;
    --app-heading-accent: #2c416d;
    --app-text-muted: #8a94a6;
    --app-hero-surface:
        linear-gradient(135deg, rgba(31, 88, 199, 0.08), rgba(31, 88, 199, 0.02)),
        #ffffff;
    --app-status-online-bg: rgba(52, 195, 143, 0.16);
    --app-status-online-color: #14865a;
    --app-status-offline-bg: rgba(244, 106, 106, 0.14);
    --app-status-offline-color: #d94c4c;
}

[data-bs-theme="dark"] {
    --app-surface-soft: rgba(255, 255, 255, 0.04);
    --app-surface-base: #20242a;
    --app-surface-border: rgba(255, 255, 255, 0.08);
    --app-heading-accent: #e7eefc;
    --app-text-muted: #aab4c8;
    --app-hero-surface:
        linear-gradient(135deg, rgba(31, 88, 199, 0.16), rgba(31, 88, 199, 0.05)),
        #20242a;
    --app-status-online-bg: rgba(52, 195, 143, 0.18);
    --app-status-online-color: #73d8ae;
    --app-status-offline-bg: rgba(244, 106, 106, 0.18);
    --app-status-offline-color: #ff9e9e;
}

.app-header-theme-toggle .header-item,
.sidebar-brand__mobile-theme {
    overflow: visible;
    position: relative;
}

.app-header-theme-toggle .header-item::after,
.sidebar-brand__mobile-theme::after {
    background: var(--app-brand-accent-subtle);
    border-radius: 999px;
    content: "";
    inset: 0.82rem;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: scale(0.7);
}

.app-header-theme-toggle .header-item.is-theme-switching::after,
.sidebar-brand__mobile-theme.is-theme-switching::after {
    animation: app-theme-toggle-pulse 0.46s ease-out both;
}

.app-header-theme-toggle .header-item.is-theme-switching i,
.sidebar-brand__mobile-theme.is-theme-switching i {
    animation: app-theme-icon-pop 0.42s cubic-bezier(0.18, 0.86, 0.28, 1) both;
}

@keyframes app-theme-toggle-pulse {
    0% {
        opacity: 0.72;
        transform: scale(0.7);
    }

    100% {
        opacity: 0;
        transform: scale(1.65);
    }
}

@keyframes app-theme-icon-pop {
    0% {
        transform: scale(0.82);
    }

    60% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

@supports (view-transition-name: root) {
    html.app-theme-circular-transition::view-transition-old(root),
    html.app-theme-circular-transition::view-transition-new(root) {
        animation-duration: 0.9s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        mix-blend-mode: normal;
    }

    html.app-theme-circular-transition::view-transition-old(root) {
        animation: none;
    }

    html.app-theme-circular-transition::view-transition-new(root) {
        animation-name: app-theme-circular-reveal;
        clip-path: circle(var(--app-theme-reveal-radius, 150vmax) at var(--app-theme-reveal-x, calc(100vw - 3rem)) var(--app-theme-reveal-y, 2.5rem));
    }
}

@keyframes app-theme-circular-reveal {
    0% {
        clip-path: circle(0 at var(--app-theme-reveal-x, calc(100vw - 3rem)) var(--app-theme-reveal-y, 2.5rem));
    }

    100% {
        clip-path: circle(var(--app-theme-reveal-radius, 150vmax) at var(--app-theme-reveal-x, calc(100vw - 3rem)) var(--app-theme-reveal-y, 2.5rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-header-theme-toggle .header-item.is-theme-switching::after,
    .sidebar-brand__mobile-theme.is-theme-switching::after {
        animation: none !important;
        display: none;
    }

    .app-header-theme-toggle .header-item.is-theme-switching i,
    .sidebar-brand__mobile-theme.is-theme-switching i {
        animation: none !important;
    }
}

/* Dynamic union brand accents
 * The union colors are injected as CSS custom properties from the super-admin
 * settings screen. These overrides map the runtime palette onto the template's
 * compiled primary classes while keeping the actual rules centralized here.
 */
.btn-primary {
    --bs-btn-color: var(--app-brand-accent-contrast);
    --bs-btn-bg: var(--app-brand-accent);
    --bs-btn-border-color: var(--app-brand-accent);
    --bs-btn-hover-color: var(--app-brand-accent-contrast);
    --bs-btn-hover-bg: var(--app-brand-accent-hover);
    --bs-btn-hover-border-color: var(--app-brand-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--app-brand-accent-rgb);
    --bs-btn-active-color: var(--app-brand-accent-contrast);
    --bs-btn-active-bg: var(--app-brand-accent-active);
    --bs-btn-active-border-color: var(--app-brand-accent-active);
    --bs-btn-disabled-color: var(--app-brand-accent-contrast);
    --bs-btn-disabled-bg: var(--app-brand-accent);
    --bs-btn-disabled-border-color: var(--app-brand-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-brand-accent);
    --bs-btn-border-color: var(--app-brand-accent);
    --bs-btn-hover-color: var(--app-brand-accent-contrast);
    --bs-btn-hover-bg: var(--app-brand-accent);
    --bs-btn-hover-border-color: var(--app-brand-accent);
    --bs-btn-focus-shadow-rgb: var(--app-brand-accent-rgb);
    --bs-btn-active-color: var(--app-brand-accent-contrast);
    --bs-btn-active-bg: var(--app-brand-accent);
    --bs-btn-active-border-color: var(--app-brand-accent);
    --bs-btn-disabled-color: var(--app-brand-accent);
    --bs-btn-disabled-border-color: var(--app-brand-accent);
}

.btn-soft-primary,
.btn-subtle-primary {
    --bs-btn-color: var(--app-brand-accent);
    --bs-btn-bg: var(--app-brand-accent-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--app-brand-accent-contrast);
    --bs-btn-hover-bg: var(--app-brand-accent);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--app-brand-accent-rgb);
    --bs-btn-active-color: var(--app-brand-accent-contrast);
    --bs-btn-active-bg: var(--app-brand-accent-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--app-brand-accent);
    --bs-btn-disabled-bg: var(--app-brand-accent-subtle);
    --bs-btn-disabled-border-color: transparent;
}

.btn-soft-secondary,
.btn-subtle-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-bg: rgba(var(--bs-secondary-rgb), 0.12);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: rgba(var(--bs-secondary-rgb), 0.1);
    --bs-btn-disabled-border-color: transparent;
}

.btn-soft-success,
.btn-subtle-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-bg: rgba(var(--bs-success-rgb), 0.12);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-success);
    --bs-btn-disabled-bg: rgba(var(--bs-success-rgb), 0.1);
    --bs-btn-disabled-border-color: transparent;
}

.btn-soft-info,
.btn-subtle-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-bg: rgba(var(--bs-info-rgb), 0.14);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-info);
    --bs-btn-disabled-bg: rgba(var(--bs-info-rgb), 0.1);
    --bs-btn-disabled-border-color: transparent;
}

.btn-soft-warning,
.btn-subtle-warning {
    --bs-btn-color: #9a6a00;
    --bs-btn-bg: rgba(var(--bs-warning-rgb), 0.18);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #9a6a00;
    --bs-btn-disabled-bg: rgba(var(--bs-warning-rgb), 0.1);
    --bs-btn-disabled-border-color: transparent;
}

.btn-soft-danger,
.btn-subtle-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-bg: rgba(var(--bs-danger-rgb), 0.12);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-danger);
    --bs-btn-disabled-bg: rgba(var(--bs-danger-rgb), 0.1);
    --bs-btn-disabled-border-color: transparent;
}

.btn-soft-light,
.btn-subtle-light {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-gray-200);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-gray-200);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--bs-light);
    --bs-btn-disabled-border-color: var(--bs-border-color);
}

.btn-soft-dark,
.btn-subtle-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: rgba(var(--bs-dark-rgb), 0.1);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: rgba(var(--bs-dark-rgb), 0.08);
    --bs-btn-disabled-border-color: transparent;
}

[data-bs-theme="dark"] .btn-soft-light,
[data-bs-theme="dark"] .btn-subtle-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: rgba(var(--bs-light-rgb), 0.08);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: rgba(var(--bs-light-rgb), 0.16);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: rgba(var(--bs-light-rgb), 0.2);
    --bs-btn-active-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .btn-soft-dark,
[data-bs-theme="dark"] .btn-subtle-dark {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: rgba(var(--bs-light-rgb), 0.08);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-light);
}

[data-bs-theme="dark"] .btn-soft-light,
[data-bs-theme="dark"] .btn-subtle-light,
[data-bs-theme="dark"] .btn-soft-dark,
[data-bs-theme="dark"] .btn-subtle-dark {
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;
}

.btn-soft-primary,
.btn-soft-secondary,
.btn-soft-success,
.btn-soft-info,
.btn-soft-warning,
.btn-soft-danger,
.btn-soft-light,
.btn-soft-dark,
.btn-subtle-primary,
.btn-subtle-secondary,
.btn-subtle-success,
.btn-subtle-info,
.btn-subtle-warning,
.btn-subtle-danger,
.btn-subtle-light,
.btn-subtle-dark {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
    font-weight: 600;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active,
.btn-soft-primary.active,
.btn-soft-secondary:hover,
.btn-soft-secondary:focus,
.btn-soft-secondary:active,
.btn-soft-secondary.active,
.btn-soft-success:hover,
.btn-soft-success:focus,
.btn-soft-success:active,
.btn-soft-success.active,
.btn-soft-info:hover,
.btn-soft-info:focus,
.btn-soft-info:active,
.btn-soft-info.active,
.btn-soft-warning:hover,
.btn-soft-warning:focus,
.btn-soft-warning:active,
.btn-soft-warning.active,
.btn-soft-danger:hover,
.btn-soft-danger:focus,
.btn-soft-danger:active,
.btn-soft-danger.active,
.btn-soft-light:hover,
.btn-soft-light:focus,
.btn-soft-light:active,
.btn-soft-light.active,
.btn-soft-dark:hover,
.btn-soft-dark:focus,
.btn-soft-dark:active,
.btn-soft-dark.active,
.btn-subtle-primary:hover,
.btn-subtle-primary:focus,
.btn-subtle-primary:active,
.btn-subtle-primary.active,
.btn-subtle-secondary:hover,
.btn-subtle-secondary:focus,
.btn-subtle-secondary:active,
.btn-subtle-secondary.active,
.btn-subtle-success:hover,
.btn-subtle-success:focus,
.btn-subtle-success:active,
.btn-subtle-success.active,
.btn-subtle-info:hover,
.btn-subtle-info:focus,
.btn-subtle-info:active,
.btn-subtle-info.active,
.btn-subtle-warning:hover,
.btn-subtle-warning:focus,
.btn-subtle-warning:active,
.btn-subtle-warning.active,
.btn-subtle-danger:hover,
.btn-subtle-danger:focus,
.btn-subtle-danger:active,
.btn-subtle-danger.active,
.btn-subtle-light:hover,
.btn-subtle-light:focus,
.btn-subtle-light:active,
.btn-subtle-light.active,
.btn-subtle-dark:hover,
.btn-subtle-dark:focus,
.btn-subtle-dark:active,
.btn-subtle-dark.active,
.show > .btn-soft-primary.dropdown-toggle,
.show > .btn-soft-secondary.dropdown-toggle,
.show > .btn-soft-success.dropdown-toggle,
.show > .btn-soft-info.dropdown-toggle,
.show > .btn-soft-warning.dropdown-toggle,
.show > .btn-soft-danger.dropdown-toggle,
.show > .btn-soft-light.dropdown-toggle,
.show > .btn-soft-dark.dropdown-toggle,
.show > .btn-subtle-primary.dropdown-toggle,
.show > .btn-subtle-secondary.dropdown-toggle,
.show > .btn-subtle-success.dropdown-toggle,
.show > .btn-subtle-info.dropdown-toggle,
.show > .btn-subtle-warning.dropdown-toggle,
.show > .btn-subtle-danger.dropdown-toggle,
.show > .btn-subtle-light.dropdown-toggle,
.show > .btn-subtle-dark.dropdown-toggle {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    color: var(--bs-btn-hover-color) !important;
}

.btn-soft-primary:focus,
.btn-soft-secondary:focus,
.btn-soft-success:focus,
.btn-soft-info:focus,
.btn-soft-warning:focus,
.btn-soft-danger:focus,
.btn-soft-light:focus,
.btn-soft-dark:focus,
.btn-subtle-primary:focus,
.btn-subtle-secondary:focus,
.btn-subtle-success:focus,
.btn-subtle-info:focus,
.btn-subtle-warning:focus,
.btn-subtle-danger:focus,
.btn-subtle-light:focus,
.btn-subtle-dark:focus {
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-btn-focus-shadow-rgb), 0.25) !important;
}

.bg-primary,
.text-bg-primary {
    background-color: var(--app-brand-accent) !important;
    border-color: var(--app-brand-accent) !important;
    color: var(--app-brand-accent-contrast) !important;
}

.bg-primary-subtle {
    background-color: var(--app-brand-accent-subtle) !important;
}

.text-primary,
.text-primary-emphasis,
.link-primary {
    color: var(--app-brand-accent) !important;
}

.border-primary {
    border-color: var(--app-brand-accent) !important;
}

.border-primary-subtle {
    border-color: var(--app-brand-accent-border) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--app-brand-accent);
    color: var(--app-brand-accent-contrast);
}

.form-check-input:checked {
    background-color: var(--app-brand-accent);
    border-color: var(--app-brand-accent);
}

.form-check-input:focus {
    border-color: var(--app-brand-accent);
    box-shadow: 0 0 0 0.2rem var(--app-brand-accent-focus);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-brand-accent-border);
    box-shadow: 0 0 0 0.2rem var(--app-brand-accent-focus);
}

.page-link {
    color: var(--app-brand-accent);
}

.page-link:hover {
    color: var(--app-brand-accent-hover);
}

.page-item.active .page-link {
    background-color: var(--app-brand-accent);
    border-color: var(--app-brand-accent);
    color: var(--app-brand-accent-contrast);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--app-brand-accent);
    --bs-nav-pills-link-active-color: var(--app-brand-accent-contrast);
}

.nav-tabs-custom .nav-item .nav-link::after {
    background: var(--app-brand-accent);
}

.nav-tabs-custom .nav-item .nav-link.active {
    background-color: var(--app-brand-accent-subtle-strong);
    color: var(--app-brand-accent) !important;
}

.settings-hero-card {
    background: var(--app-hero-surface);
    border: 1px solid var(--app-surface-border);
}

.settings-hero-badge,
.settings-summary-value {
    color: var(--app-heading-accent) !important;
}

.settings-summary-label,
.settings-summary-meta,
.settings-nav-tabs .nav-link {
    color: var(--app-text-muted) !important;
}

.settings-nav-tabs .nav-link.active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--app-heading-accent) !important;
}

.settings-tab-content,
.settings-savebar,
.settings-permissions-table thead th,
.settings-switch-box,
.settings-platform-switch,
.settings-map-preview,
.settings-map-empty,
.settings-asset-preview,
.settings-summary-tile {
    background: var(--app-surface-base);
    border-color: var(--app-surface-border) !important;
}

.settings-switch-box,
.settings-platform-switch,
.settings-map-preview,
.settings-map-empty,
.settings-asset-preview,
.settings-summary-tile,
.settings-permissions-table thead th {
    background: var(--app-surface-soft);
}

.settings-switch-box .form-check-label,
.settings-platform-switch__copy,
.settings-platform-switch__toggle-label,
.settings-map-empty,
.settings-tabs-card .card-title,
.settings-summary-card .card-title {
    color: var(--app-heading-accent);
}

.settings-summary-status.is-online {
    background: var(--app-status-online-bg);
    color: var(--app-status-online-color);
}

.settings-summary-status.is-offline {
    background: var(--app-status-offline-bg);
    color: var(--app-status-offline-color);
}

.settings-status-dot {
    box-shadow: 0 0 0 4px rgba(var(--bs-body-bg-rgb), 0.85);
}

[data-bs-theme="dark"] .settings-tabs-card .text-muted,
[data-bs-theme="dark"] .settings-summary-card .text-muted,
[data-bs-theme="dark"] .settings-tab-content .text-muted {
    color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .bg-primary-subtle.bg-opacity-50 {
    background-color: rgba(var(--bs-primary-rgb), 0.16) !important;
}

[data-bs-theme="dark"] .bg-light-subtle,
[data-bs-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .text-bg-light {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .card-header.bg-light-subtle,
[data-bs-theme="dark"] .border .bg-light-subtle.border-bottom,
[data-bs-theme="dark"] .border .bg-light.border-bottom {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: rgba(255, 255, 255, 0.04);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .badge.bg-white {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .btn-light {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light:focus {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--bs-body-color);
}

.settings-sidebar-panel-card {
    background: var(--app-surface-base);
    border-color: var(--app-surface-border) !important;
    border-radius: 1rem;
}

.settings-sidebar-entry-card,
.settings-sidebar-workspace-card {
    background: var(--app-surface-base);
    border: 1px solid var(--app-surface-border);
}

.settings-sidebar-entry-card h4 {
    color: var(--app-heading-accent);
}

.settings-sidebar-builder__toolbar .btn {
    font-weight: 600;
}

.settings-sidebar-builder__library-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.75rem;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.settings-sidebar-panel-card--sticky {
    position: sticky;
    top: 1.5rem;
}

.settings-sidebar-panel-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.settings-sidebar-panel-card > .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.settings-sidebar-builder__library-actions {
    display: grid;
    gap: 0.65rem;
}

.settings-sidebar-builder__library-item {
    align-items: flex-start;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-surface-border);
    border-radius: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.settings-sidebar-builder__library-item:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.26);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.settings-sidebar-builder.is-library-dragging .settings-sidebar-builder__library-item:not(.is-disabled) {
    border-style: dashed;
}

.settings-sidebar-builder__library-item.is-disabled {
    opacity: 0.72;
}

.settings-sidebar-builder__library-item .btn {
    flex: 0 0 auto;
}

.settings-sidebar-builder__library-main {
    align-items: flex-start;
    display: flex;
    flex: 1 1 14rem;
    gap: 0.85rem;
    min-width: 0;
}

.settings-sidebar-builder__library-icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0.9rem;
    color: var(--bs-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.settings-sidebar-builder__library-drag {
    border: 1px solid transparent;
    cursor: grab;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.settings-sidebar-builder__library-drag:hover {
    background: rgba(var(--bs-primary-rgb), 0.16);
    border-color: rgba(var(--bs-primary-rgb), 0.18);
    transform: translateY(-1px);
}

.settings-sidebar-builder__library-drag:active {
    cursor: grabbing;
}

.settings-sidebar-builder__library-item.is-disabled .settings-sidebar-builder__library-drag {
    cursor: not-allowed;
}

.settings-sidebar-builder__library-meta {
    min-width: 0;
}

.settings-sidebar-builder__library-meta .fw-semibold {
    color: var(--app-heading-accent);
}

.settings-sidebar-builder__library-drag-hint {
    align-items: center;
    color: var(--app-text-muted);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.settings-sidebar-builder__library-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.settings-sidebar-builder__library-empty,
.settings-sidebar-builder__canvas-empty,
.settings-sidebar-builder__drop-empty,
.settings-sidebar-builder__preview-empty {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.24);
    border-radius: 1rem;
    color: var(--app-text-muted);
    display: flex;
    justify-content: center;
    min-height: 8rem;
    padding: 1rem;
    text-align: center;
}

.settings-sidebar-builder__canvas {
    display: flex;
    flex: 1 1 auto;
    min-height: 46rem;
}

.settings-sidebar-builder__canvas-list {
    border: 1px solid transparent;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.85rem;
    min-height: 100%;
    padding: 0.2rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.settings-sidebar-builder__canvas-list.is-empty {
    min-height: 20rem;
}

.settings-sidebar-builder__canvas-list.is-drag-over,
.settings-sidebar-builder__canvas-children.is-drag-over {
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-color: rgba(var(--bs-primary-rgb), 0.34);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
}

.settings-sidebar-builder__canvas-item {
    background: var(--app-surface-base);
    border: 1px solid var(--app-surface-border);
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    padding: 0.8rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.settings-sidebar-builder__canvas-item.is-selected {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.14);
}

.settings-sidebar-builder__canvas-item-main {
    align-items: flex-start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.settings-sidebar-builder__drag-handle {
    align-items: center;
    cursor: grab;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.settings-sidebar-builder__drag-handle:active {
    cursor: grabbing;
}

.settings-sidebar-builder__canvas-select {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    gap: 0.85rem;
    min-width: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.settings-sidebar-builder__canvas-item-main > [data-sidebar-remove] {
    align-self: flex-start;
    grid-column: 4 / 5;
    grid-row: 1 / span 2;
}

.settings-sidebar-builder__canvas-item-main > [data-sidebar-open-editor] {
    align-self: flex-start;
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
}

.settings-sidebar-builder__canvas-icon,
.settings-sidebar-builder__icon-preview,
.settings-sidebar-builder__preview-icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-radius: 0.9rem;
    color: var(--bs-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.settings-sidebar-builder__canvas-icon.is-divider {
    background: rgba(122, 133, 153, 0.12);
    color: var(--app-text-muted);
}

.settings-sidebar-builder__canvas-icon.is-nested {
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--bs-info);
}

.settings-sidebar-builder__canvas-copy {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    min-width: 0;
}

.settings-sidebar-builder__canvas-title {
    color: var(--app-heading-accent);
    display: block;
    font-weight: 700;
    line-height: 1.35;
}

.settings-sidebar-builder__canvas-subtitle {
    color: var(--app-text-muted);
    display: block;
    font-size: 0.83rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-sidebar-builder__canvas-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    grid-column: 2 / 3;
    justify-content: flex-start;
}

.settings-sidebar-builder__stage-badge {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.55rem 0.8rem;
}

.settings-sidebar-builder__modal .modal-content {
    background: var(--app-surface-base);
    border: 1px solid var(--app-surface-border);
    border-radius: 1.25rem;
    color: var(--bs-body-color);
}

.settings-sidebar-builder__modal .modal-body {
    padding-top: 0.5rem;
}

.settings-sidebar-builder__modal .modal-header,
.settings-sidebar-builder__modal .modal-footer {
    border-color: var(--app-surface-border);
}

.settings-sidebar-builder__modal .form-check.form-switch {
    padding-left: 0;
}

.settings-sidebar-builder__modal .form-check.form-switch .form-check-input {
    float: none;
    margin-left: 0;
    min-width: 2.75rem;
}

.settings-sidebar-builder__modal .form-check.form-switch .form-check-label {
    color: var(--bs-body-color);
    font-weight: 600;
}

.settings-sidebar-builder__canvas-children {
    background: rgba(var(--bs-primary-rgb), 0.03);
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.2);
    border-radius: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 3.2rem;
    margin-top: 0.85rem;
    min-height: 5rem;
    padding: 0.85rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.settings-sidebar-builder__canvas-children .settings-sidebar-builder__canvas-item {
    background: var(--app-surface-soft);
    box-shadow: none;
}

.settings-sidebar-builder__drop-empty {
    min-height: 4.5rem;
}

.settings-sidebar-builder.is-library-dragging .settings-sidebar-builder__canvas-empty,
.settings-sidebar-builder.is-library-dragging .settings-sidebar-builder__drop-empty {
    border-color: rgba(var(--bs-primary-rgb), 0.42);
    color: var(--bs-primary);
}

.settings-sidebar-builder__preview {
    min-height: 18rem;
}

@media (max-width: 991.98px) {
    .vertical-menu #side-menu li.sidebar-item--desktop-only {
        display: none !important;
    }
}

.settings-sidebar-builder__preview-shell {
    background:
        linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.08), rgba(var(--bs-primary-rgb), 0.02)),
        var(--app-surface-soft);
    border: 1px solid var(--app-surface-border);
    border-radius: 1rem;
    min-height: 100%;
    padding: 1rem;
}

.settings-sidebar-builder__preview-brand {
    color: var(--app-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.85rem;
    text-transform: uppercase;
}

.settings-sidebar-builder__preview-menu {
    background: var(--app-surface-base);
    border: 1px solid var(--app-surface-border);
    border-radius: 1rem;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
    margin: 0 auto;
    max-width: 20rem;
    padding: 0.8rem;
}

.settings-sidebar-builder__preview-divider {
    color: var(--app-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 1rem 0.25rem 0.55rem;
    text-transform: uppercase;
}

.settings-sidebar-builder__preview-link {
    align-items: center;
    border-radius: 0.9rem;
    color: var(--app-heading-accent);
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
}

.settings-sidebar-builder__preview-link.is-group {
    background: rgba(var(--bs-primary-rgb), 0.08);
    font-weight: 700;
}

.settings-sidebar-builder__preview-link.is-submenu {
    color: var(--bs-body-color);
    font-weight: 500;
    padding: 0.55rem 0.4rem;
}

.settings-sidebar-builder__preview-arrow {
    color: var(--app-text-muted);
    margin-left: auto;
}

.settings-sidebar-builder__preview-submenu {
    border-left: 1px solid var(--app-surface-border);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.45rem 0 0 1rem;
    padding-left: 0.85rem;
}

.settings-sidebar-builder__inspector-readonly,
.settings-sidebar-builder__icon-current {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-surface-border);
    border-radius: 0.95rem;
    padding: 0.9rem 1rem;
}

.settings-sidebar-builder__icon-current {
    align-items: center;
    display: flex;
    gap: 0.8rem;
}

.settings-sidebar-builder__icon-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.settings-sidebar-builder__icon-option {
    align-items: center;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-surface-border);
    border-radius: 0.85rem;
    color: var(--app-heading-accent);
    display: inline-flex;
    font-size: 1.15rem;
    height: 3rem;
    justify-content: center;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    width: 100%;
}

.settings-sidebar-builder__icon-option:hover,
.settings-sidebar-builder__icon-option:focus {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-color: rgba(var(--bs-primary-rgb), 0.28);
    color: var(--bs-primary);
    transform: translateY(-1px);
}

.settings-sidebar-builder__icon-option.is-active {
    background: rgba(var(--bs-primary-rgb), 0.14);
    border-color: rgba(var(--bs-primary-rgb), 0.44);
    color: var(--bs-primary);
}

.gu-mirror {
    box-sizing: border-box;
    margin: 0 !important;
    opacity: 0.96;
    pointer-events: none;
    position: fixed !important;
    transform: rotate(1deg);
    z-index: 9999 !important;
}

.gu-mirror .settings-sidebar-builder__canvas-item {
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}

.gu-mirror .settings-sidebar-builder__library-item {
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
}

.gu-hide {
    display: none !important;
}

.gu-transit {
    opacity: 0.35;
}

.gu-unselectable {
    user-select: none;
}

[data-bs-theme="dark"] .settings-sidebar-builder__canvas-item,
[data-bs-theme="dark"] .settings-sidebar-builder__preview-menu {
    box-shadow: none;
}

[data-bs-theme="dark"] .settings-sidebar-builder__canvas-children {
    background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 767.98px) {
    .settings-sidebar-builder__canvas-item-main {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .settings-sidebar-builder__canvas-badges {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }

    .settings-sidebar-builder__canvas-children {
        margin-left: 0;
    }

    .settings-sidebar-builder__preview-menu {
        max-width: none;
    }

    .settings-sidebar-panel-card--sticky {
        position: static;
    }

    .settings-sidebar-builder__library-list {
        max-height: none;
    }
}

/* Make non-switch checkboxes readable on both themes */
.form-check-input[type="checkbox"]:not([role="switch"]) {
    background-color: var(--bs-body-bg);
    border-color: rgba(122, 133, 153, 0.6);
    box-shadow: 0 0 0 1px rgba(122, 133, 153, 0.08);
}

.form-check-input[type="checkbox"]:not([role="switch"]):hover {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
}

.form-check-input[type="checkbox"]:not([role="switch"]):focus {
    border-color: rgba(var(--bs-primary-rgb), 0.7);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.form-check-input[type="checkbox"]:not([role="switch"]):checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .form-check-input[type="checkbox"]:not([role="switch"]) {
    background-color: #1b1f24;
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .form-check-input[type="checkbox"]:not([role="switch"]):checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Sidebar collapse hover behavior should only apply on desktop small-sidebar mode. */
@media (min-width: 992px) {
    body[data-sidebar-size="sm"] {
        --app-sidebar-popout-width: 260px;
        --app-sidebar-rail-width: 70px;
        --app-sidebar-rail-toggle-size: 24px;
    }

    body[data-sidebar-size="sm"] .isvertical-topbar .vertical-menu-btn {
        display: none !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__rail-toggle {
        align-items: center;
        background-color: var(--bs-body-bg);
        border: 1px solid rgba(122, 133, 153, 0.28) !important;
        border-radius: 999px;
        box-shadow: 0 0.25rem 0.7rem rgba(15, 23, 42, 0.12);
        color: var(--app-brand-accent);
        display: inline-flex !important;
        height: var(--app-sidebar-rail-toggle-size);
        justify-content: center;
        left: calc(var(--app-sidebar-rail-width) - (var(--app-sidebar-rail-toggle-size) / 2));
        min-width: var(--app-sidebar-rail-toggle-size);
        padding: 0 !important;
        position: fixed;
        top: calc(var(--app-safe-top) + ((var(--app-admin-header-height) - var(--app-sidebar-rail-toggle-size)) / 2));
        width: var(--app-sidebar-rail-toggle-size);
        z-index: 1007;
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__rail-toggle:hover,
    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__rail-toggle:focus {
        background-color: var(--app-brand-accent-subtle);
        border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
        color: var(--app-brand-accent);
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__rail-toggle .app-sidebar-toggle-glyph {
        display: block;
    }

    body[data-sidebar-size="sm"] .vertical-menu {
        position: fixed;
        top: 0;
        bottom: 0;
    }

    body[data-sidebar-size="sm"] .vertical-menu .simplebar-mask {
        overflow: hidden !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu .simplebar-content-wrapper {
        overflow: auto !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > ul.sub-menu.mm-show {
        display: none !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu.mm-show,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > ul.sub-menu,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > ul.sub-menu.mm-show {
        display: block !important;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li {
        --app-sidebar-popout-top: 75px;
        --app-sidebar-popout-max-height: calc(100vh - 91px);
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > a {
        align-items: center;
        display: flex;
        width: calc(var(--app-sidebar-popout-width) + 70px);
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a span,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > a span {
        display: block;
        line-height: 1.35;
        max-width: calc(var(--app-sidebar-popout-width) - 56px);
        white-space: normal;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu.mm-show,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > ul.sub-menu,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > ul.sub-menu.mm-show {
        border: 1px solid rgba(154, 161, 171, 0.12);
        border-radius: 0 0 12px 12px;
        box-shadow: -3px 5px 10px 0 rgba(54, 61, 71, 0.1);
        inset-inline-end: auto !important;
        inset-inline-start: 70px !important;
        max-height: var(--app-sidebar-popout-max-height);
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed !important;
        top: var(--app-sidebar-popout-top) !important;
        width: var(--app-sidebar-popout-width) !important;
        z-index: 1006;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu a,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu.mm-show a,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > ul.sub-menu a,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > ul.sub-menu.mm-show a {
        min-height: 42px;
        white-space: normal;
        width: 100%;
    }
}

/* Reserve room for async Grid.js data so mobile audits do not count the table paint as layout shift. */
[data-gridjs][data-gridjs-source-url] {
    min-height: 24rem;
}

[data-gridjs][data-gridjs-source-url]:empty {
    background:
        linear-gradient(90deg, rgba(var(--bs-secondary-rgb), 0.08) 25%, rgba(var(--bs-secondary-rgb), 0.16) 37%, rgba(var(--bs-secondary-rgb), 0.08) 63%) 0 3.1rem / 100% 2.7rem no-repeat,
        repeating-linear-gradient(
            to bottom,
            rgba(var(--bs-secondary-rgb), 0.07) 0,
            rgba(var(--bs-secondary-rgb), 0.07) 2.8rem,
            transparent 2.8rem,
            transparent 3.55rem
        );
    border-radius: 0.25rem;
}

@media (max-width: 575.98px) {
    [data-gridjs][data-gridjs-source-url] {
        min-height: 31rem;
    }
}

/* Grid.js pagination should stay template-like in both themes */
.gridjs-pagination .gridjs-pages button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--bs-secondary-color) !important;
}

.gridjs-pagination .gridjs-pages button:hover,
.gridjs-pagination .gridjs-pages button:focus {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.12) !important;
    color: var(--bs-body-color) !important;
}

.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-pages button.gridjs-spread {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--bs-secondary-color) !important;
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-gridjs-row-click="true"] .gridjs-tbody .app-gridjs-row-link {
    cursor: pointer;
}

[data-gridjs-row-click="true"] .gridjs-tbody .app-gridjs-row-link td.gridjs-td {
    transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

[data-gridjs-row-click="true"] .gridjs-tbody .app-gridjs-row-link:hover td.gridjs-td,
[data-gridjs-row-click="true"] .gridjs-tbody .app-gridjs-row-link:focus-visible td.gridjs-td {
    background: var(--app-brand-accent-subtle);
    color: var(--bs-emphasis-color);
}

[data-gridjs-row-click="true"] .gridjs-tbody .app-gridjs-row-link:hover td.gridjs-td:first-child,
[data-gridjs-row-click="true"] .gridjs-tbody .app-gridjs-row-link:focus-visible td.gridjs-td:first-child {
    box-shadow: inset 3px 0 0 var(--app-brand-accent);
}

[data-gridjs-row-click="true"] .gridjs-tbody .app-gridjs-row-link:focus-visible {
    outline: 2px solid var(--app-brand-accent-focus);
    outline-offset: -2px;
}

/* Grid.js dark theme alignment */
[data-bs-theme="dark"] .gridjs-container {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .gridjs-wrapper,
[data-bs-theme="dark"] .gridjs-footer {
    background-color: var(--bs-secondary-bg);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-bs-theme="dark"] th.gridjs-th,
[data-bs-theme="dark"] td.gridjs-td,
[data-bs-theme="dark"] .gridjs-tbody {
    background-color: var(--bs-secondary-bg);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] th.gridjs-th {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] th.gridjs-th-sort:hover,
[data-bs-theme="dark"] th.gridjs-th-sort:focus {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] input.gridjs-input {
    background-color: var(--bs-body-bg);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] input.gridjs-input::placeholder {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .gridjs-pagination,
[data-bs-theme="dark"] .gridjs-pagination .gridjs-summary {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button:hover,
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--bs-body-color);
    box-shadow: none;
}

[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button:disabled,
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button.gridjs-spread {
    background-color: transparent !important;
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff;
}

@media (min-width: 992px) {
    .restriction-range-group {
        position: relative;
    }

    .restriction-range-group::after {
        background: var(--bs-border-color);
        bottom: 0.25rem;
        content: "";
        inset-inline-start: 50%;
        pointer-events: none;
        position: absolute;
        top: 0.25rem;
        transform: translateX(-0.5px);
        width: 1px;
    }

    .restriction-range-pane {
        padding-inline-end: calc(var(--bs-gutter-x) * 0.5 + 1rem);
    }

    .restriction-range-pane--split {
        padding-inline-start: calc(var(--bs-gutter-x) * 0.5 + 1rem);
    }
}

.restriction-filter-status {
    letter-spacing: 0.01em;
}

.restriction-overview-copy {
    flex: 1 1 32rem;
    min-width: 0;
}

.restriction-overview-description {
    max-width: 64ch;
    line-height: 1.45;
}

.restriction-summary-card {
    min-height: 112px;
}

.restriction-summary-card .card-body {
    padding: 0.9rem 1rem;
}

.restriction-summary-card__value {
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.restriction-filter-form .form-label {
    margin-bottom: 0.4rem;
}

.restriction-filter-form .form-control,
.restriction-filter-form .form-select {
    border-radius: 0.8rem;
}

.restriction-filter-form .form-control,
.restriction-filter-form .form-select,
.restriction-filter-actions-inline .btn {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.restriction-filter-actions-inline {
    justify-content: flex-end;
}

.restriction-filter-note {
    border-top: 1px solid rgba(122, 133, 153, 0.16);
    color: var(--bs-secondary-color);
    font-size: 0.84rem;
    line-height: 1.5;
    margin-top: 0.2rem;
    padding-top: 0.85rem;
}

.restriction-availability-note {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.18);
    border-radius: 0.9rem;
    color: var(--bs-body-color);
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.9rem;
}

.restriction-availability-note__title {
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.restriction-availability-note__text {
    color: var(--bs-secondary-color);
    font-size: 0.79rem;
    line-height: 1.4;
}

@media (max-width: 1199.98px) {
    .restriction-summary-card {
        min-height: 104px;
    }
}

@media (max-width: 767.98px) {
    .restriction-summary-card {
        min-height: 98px;
    }

    .restriction-filter-actions-inline .btn {
        flex: 1 1 0;
    }
}

/* Expanded sidebar branding
 * Opts into the custom brand header only for the open desktop sidebar so the
 * template mini-sidebar stays untouched when collapsed.
 */
.sidebar-brand__desktop {
    display: none;
}

/* Sidebar footer
 * Anchors logout to the bottom of the open desktop sidebar while keeping the
 * menu area above independently scrollable.
 */
.sidebar-footer {
    display: none;
}

.vertical-menu {
    --bs-sidebar-menu-item-hover-color: var(--app-brand-accent);
    --bs-sidebar-menu-item-active-color: var(--app-brand-accent);
    --bs-sidebar-menu-sub-item-active-color: var(--app-brand-accent);
    --bs-sidebar-menu-item-active-bg-color: var(--app-brand-accent-subtle-strong);
    --bs-sidebar-dark-menu-item-hover-color: var(--app-brand-accent);
    --bs-sidebar-dark-menu-item-active-color: var(--app-brand-accent);
    --bs-sidebar-dark-menu-sub-item-active-color: var(--app-brand-accent);
    --bs-sidebar-dark-menu-item-active-bg-color: var(--app-brand-accent-subtle-strong);
}

/* Sidebar typography
 * Keeps the menu text slightly more compact than the template default so the
 * navigation matches the denser desktop layout baseline.
 */
body:not([data-sidebar-size]) .vertical-menu #sidebar-menu > ul > li > a,
body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu > ul > li > a,
body:not([data-sidebar-size]) .vertical-menu #sidebar-menu ul li ul.sub-menu li > a,
body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu ul li ul.sub-menu li > a {
    font-size: 13px;
}

/* Sidebar hover states
 * Bridges the template sidebar tokens to the configurable brand palette so
 * hover feedback always follows the current union theme.
 */
@media (min-width: 992px) {
    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu > ul > li > a:hover,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu > ul > li > a:hover {
        background-color: var(--app-brand-accent-subtle);
        color: var(--bs-sidebar-menu-item-hover-color);
    }

    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu > ul > li > a:hover .nav-icon,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu > ul > li > a:hover .nav-icon {
        fill: var(--bs-sidebar-menu-item-hover-color);
    }

    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu > ul > li > a.has-arrow:hover:after,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu > ul > li > a.has-arrow:hover:after {
        color: var(--bs-sidebar-menu-item-hover-color);
    }

    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu ul li ul.sub-menu li > a:hover,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu ul li ul.sub-menu li > a:hover {
        color: var(--bs-sidebar-menu-item-hover-color);
    }

    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu ul li ul.sub-menu li > a:hover:before,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu ul li ul.sub-menu li > a:hover:before {
        border-color: transparent transparent var(--bs-sidebar-menu-item-hover-color) transparent;
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > a,
    body[data-bs-theme="dark"][data-sidebar="dark"][data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a,
    body[data-bs-theme="dark"][data-sidebar="dark"][data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > a {
        color: var(--bs-sidebar-menu-item-hover-color);
    }

    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a .nav-icon,
    body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > a .nav-icon,
    body[data-bs-theme="dark"][data-sidebar="dark"][data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a .nav-icon,
    body[data-bs-theme="dark"][data-sidebar="dark"][data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:focus-within > a .nav-icon {
        fill: var(--bs-sidebar-menu-item-hover-color);
    }
}

/* Sidebar active states
 * Uses the same palette bridge so active items keep their stronger emphasis
 * even after the tenant changes the brand colors from Settings.
 */
@media (min-width: 992px) {
    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu > ul > li > a.active,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu > ul > li > a.active {
        background-color: var(--bs-sidebar-menu-item-active-bg-color);
        color: var(--bs-sidebar-menu-item-active-color) !important;
    }

    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu > ul > li > a.active .nav-icon,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu > ul > li > a.active .nav-icon {
        fill: var(--bs-sidebar-menu-item-active-color) !important;
    }

    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu ul li ul.sub-menu li > a.active,
    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu ul li.mm-active .mm-show li.mm-active > a,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu ul li ul.sub-menu li > a.active,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu ul li.mm-active .mm-show li.mm-active > a {
        color: var(--bs-sidebar-menu-sub-item-active-color) !important;
    }

    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu ul li ul.sub-menu li > a.active:before,
    body:not([data-sidebar-size]) .vertical-menu #sidebar-menu ul li.mm-active .mm-show li.mm-active > a:before,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu ul li ul.sub-menu li > a.active:before,
    body[data-sidebar-size="lg"] .vertical-menu #sidebar-menu ul li.mm-active .mm-show li.mm-active > a:before {
        border-color: transparent transparent var(--bs-sidebar-menu-sub-item-active-color) transparent;
    }
}

@media (min-width: 992px) {
    body:not([data-sidebar-size]) .vertical-menu,
    body[data-sidebar-size="lg"] .vertical-menu {
        --app-sidebar-brand-height: 168px;
        --app-sidebar-brand-logo-size: 76px;
        --app-sidebar-footer-height: 60px;
        --app-sidebar-open-width: 270px;
        --app-sidebar-rail-toggle-size: 24px;
    }

    body:not([data-sidebar-size]) .vertical-menu .navbar-brand-box,
    body[data-sidebar-size="lg"] .vertical-menu .navbar-brand-box {
        display: block;
        min-height: var(--app-sidebar-brand-height);
        overflow: hidden;
        padding: 0.85rem 1rem 1rem;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-menu-scroll,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-menu-scroll {
        height: calc(100% - (var(--app-sidebar-brand-height) + var(--app-sidebar-footer-height) + 26px));
        margin-top: var(--app-sidebar-brand-height);
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__collapsed,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__collapsed {
        display: none;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__desktop,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__desktop {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        width: 100%;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__topbar,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__topbar {
        align-items: center;
        display: flex;
        gap: 0.45rem;
        justify-content: center;
        min-height: 44px;
        position: relative;
        width: 100%;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__title-link,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__title-link {
        color: var(--bs-sidebar-menu-item-color);
        display: block;
        flex: 0 1 auto;
        font-family: "IBM Plex Sans", sans-serif;
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.08;
        margin: 0;
        max-height: 1.25rem;
        max-width: calc(100% - 1.25rem);
        min-width: 0;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__toggle,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__toggle {
        align-items: center;
        background-color: var(--bs-body-bg);
        border: 1px solid rgba(122, 133, 153, 0.28);
        border-radius: 999px;
        box-shadow: 0 0.25rem 0.7rem rgba(15, 23, 42, 0.12);
        color: var(--app-brand-accent);
        display: inline-flex;
        flex: 0 0 24px;
        height: 24px;
        justify-content: center;
        left: calc(var(--app-sidebar-open-width) - (var(--app-sidebar-rail-toggle-size) / 2));
        min-width: 24px;
        padding: 0 !important;
        position: fixed;
        top: calc(var(--app-safe-top) + ((var(--app-admin-header-height) - var(--app-sidebar-rail-toggle-size)) / 2));
        width: 24px;
        z-index: 1007;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__toggle:hover,
    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__toggle:focus,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__toggle:hover,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__toggle:focus {
        background-color: var(--app-brand-accent-subtle);
        border-color: rgba(var(--bs-primary-rgb), 0.2);
        color: var(--app-brand-accent);
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__toggle .app-sidebar-toggle-glyph,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__toggle .app-sidebar-toggle-glyph {
        display: block;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__logo-link,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__logo-link {
        align-items: center;
        display: none;
        justify-content: center;
        line-height: 1;
        min-height: var(--app-sidebar-brand-logo-size);
        width: 100%;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__desktop .logo-dark.sidebar-brand__logo-link,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__desktop .logo-dark.sidebar-brand__logo-link {
        display: flex;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__desktop .logo-light.sidebar-brand__logo-link,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__desktop .logo-light.sidebar-brand__logo-link {
        display: none;
    }

    body[data-bs-theme="dark"]:not([data-sidebar-size]) .vertical-menu .sidebar-brand__desktop .logo-dark.sidebar-brand__logo-link,
    body[data-sidebar="dark"]:not([data-sidebar-size]) .vertical-menu .sidebar-brand__desktop .logo-dark.sidebar-brand__logo-link,
    body[data-bs-theme="dark"][data-sidebar-size="lg"] .vertical-menu .sidebar-brand__desktop .logo-dark.sidebar-brand__logo-link,
    body[data-sidebar="dark"][data-sidebar-size="lg"] .vertical-menu .sidebar-brand__desktop .logo-dark.sidebar-brand__logo-link {
        display: none;
    }

    body[data-bs-theme="dark"]:not([data-sidebar-size]) .vertical-menu .sidebar-brand__desktop .logo-light.sidebar-brand__logo-link,
    body[data-sidebar="dark"]:not([data-sidebar-size]) .vertical-menu .sidebar-brand__desktop .logo-light.sidebar-brand__logo-link,
    body[data-bs-theme="dark"][data-sidebar-size="lg"] .vertical-menu .sidebar-brand__desktop .logo-light.sidebar-brand__logo-link,
    body[data-sidebar="dark"][data-sidebar-size="lg"] .vertical-menu .sidebar-brand__desktop .logo-light.sidebar-brand__logo-link {
        display: flex;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-brand__logo,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-brand__logo {
        display: block;
        height: var(--app-sidebar-brand-logo-size);
        margin: 0 auto;
        max-height: var(--app-sidebar-brand-logo-size);
        max-width: var(--app-sidebar-brand-logo-size);
        object-fit: contain;
        width: var(--app-sidebar-brand-logo-size);
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-footer,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-footer {
        background-color: var(--bs-sidebar-bg);
        border-top: 1px solid var(--bs-sidebar-border-color);
        bottom: 0;
        display: block;
        height: var(--app-sidebar-footer-height);
        left: 0;
        position: absolute;
        right: 0;
        z-index: 2;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-footer__inner,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-footer__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        padding: 0.55rem 0.95rem;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-footer__logout,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-footer__logout {
        align-items: center;
        background-color: rgba(var(--bs-danger-rgb), 0.08);
        border: 1px solid rgba(var(--bs-danger-rgb), 0.16);
        border-radius: 10px;
        color: var(--bs-danger);
        display: flex;
        font-family: "Montserrat", sans-serif;
        font-size: 0.8rem;
        font-weight: 600;
        gap: 0.55rem;
        justify-content: center;
        padding: 0.62rem 0.9rem;
        text-decoration: none;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-footer__logout:hover,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-footer__logout:hover {
        background-color: rgba(var(--bs-danger-rgb), 0.14);
        border-color: rgba(var(--bs-danger-rgb), 0.24);
        color: var(--bs-danger);
    }

    body:not([data-sidebar-size]) .vertical-menu .sidebar-footer__logout-icon,
    body[data-sidebar-size="lg"] .vertical-menu .sidebar-footer__logout-icon {
        font-size: 1rem;
        line-height: 1;
    }

    body[data-sidebar-size="sm"] .vertical-menu .navbar-brand-box,
    body[data-sidebar-size="md"] .vertical-menu .navbar-brand-box {
        min-height: 75px;
        overflow: visible;
        padding: 0 1.5rem;
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__collapsed.logo,
    body[data-sidebar-size="md"] .vertical-menu .sidebar-brand__collapsed.logo {
        height: 75px;
        line-height: 1;
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__collapsed.logo span.logo-sm,
    body[data-sidebar-size="md"] .vertical-menu .sidebar-brand__collapsed.logo span.logo-sm {
        align-items: center;
        display: flex;
        height: 75px;
        justify-content: center;
        line-height: 1;
        width: 100%;
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__collapsed .logo-sm img,
    body[data-sidebar-size="md"] .vertical-menu .sidebar-brand__collapsed .logo-sm img {
        height: 26px !important;
        max-height: 26px;
        max-width: 26px;
        vertical-align: middle;
        width: 26px;
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-menu-scroll,
    body[data-sidebar-size="md"] .vertical-menu .sidebar-menu-scroll {
        height: calc(100% - (75px + 26px));
        margin-top: 75px;
    }

    body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand__desktop,
    body[data-sidebar-size="md"] .vertical-menu .sidebar-brand__desktop,
    body[data-sidebar-size="sm"] .vertical-menu .sidebar-footer,
    body[data-sidebar-size="md"] .vertical-menu .sidebar-footer {
        display: none !important;
    }
}

@media (max-width: 420px) {
    body[data-layout="vertical"] .isvertical-topbar .app-mobile-header-title {
        font-size: 1.02rem;
        max-height: 1.15rem;
    }
}

@media (max-width: 360px) {
    body[data-layout="vertical"] .isvertical-topbar .app-mobile-header-title {
        font-size: 0.96rem;
        left: 3.9rem;
        max-height: 1.08rem;
        right: 3.9rem;
    }
}

.app-role-preview-banner {
    background: linear-gradient(135deg, rgba(18, 39, 77, 0.98), rgba(27, 72, 141, 0.96));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7fbff;
    position: relative;
    z-index: 4;
}

.app-role-preview-banner__content {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 100%;
    padding: 0.9rem 1.5rem;
}

.app-role-preview-banner__eyebrow {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.app-role-preview-banner__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.app-role-preview-banner__copy {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
}

.app-activity-feed__list {
    display: grid;
    gap: 0.85rem;
}

.app-activity-feed__item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

html[data-app-theme="dark"] .app-activity-feed__item {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.36);
}

.app-floating-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: max(1.15rem, var(--app-safe-right));
    top: 50%;
    transform: translate3d(0, -50%, 0);
    z-index: 1028;
}

.app-floating-actions__items {
    height: 16.5rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: min(18rem, calc(100vw - 5.5rem));
}

.app-floating-actions__item {
    align-items: center;
    color: var(--bs-emphasis-color);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    opacity: 0;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 50%;
    transform: translate3d(14px, -50%, 0) scale(0.86);
    transform-origin: right center;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.18, 0.86, 0.28, 1), color 0.18s ease;
    white-space: nowrap;
}

.app-floating-actions__item:nth-child(1) {
    --app-floating-action-x: -1.1rem;
    --app-floating-action-y: -6.35rem;
    transition-delay: 0.09s;
}

.app-floating-actions__item:nth-child(2) {
    --app-floating-action-x: -3.9rem;
    --app-floating-action-y: -2.15rem;
    transition-delay: 0.06s;
}

.app-floating-actions__item:nth-child(3) {
    --app-floating-action-x: -3.9rem;
    --app-floating-action-y: 2.15rem;
    transition-delay: 0.03s;
}

.app-floating-actions__item:nth-child(4) {
    --app-floating-action-x: -1.1rem;
    --app-floating-action-y: 6.35rem;
}

.app-floating-actions:hover .app-floating-actions__items,
.app-floating-actions:focus-within .app-floating-actions__items {
    pointer-events: auto;
}

.app-floating-actions:hover .app-floating-actions__item,
.app-floating-actions:focus-within .app-floating-actions__item {
    opacity: 1;
    transform: translate3d(var(--app-floating-action-x, -2rem), calc(-50% + var(--app-floating-action-y, 0rem)), 0) scale(1);
}

.app-floating-actions:hover .app-floating-actions__item:nth-child(1),
.app-floating-actions:focus-within .app-floating-actions__item:nth-child(1) {
    transition-delay: 0s;
}

.app-floating-actions:hover .app-floating-actions__item:nth-child(2),
.app-floating-actions:focus-within .app-floating-actions__item:nth-child(2) {
    transition-delay: 0.04s;
}

.app-floating-actions:hover .app-floating-actions__item:nth-child(3),
.app-floating-actions:focus-within .app-floating-actions__item:nth-child(3) {
    transition-delay: 0.08s;
}

.app-floating-actions:hover .app-floating-actions__item:nth-child(4),
.app-floating-actions:focus-within .app-floating-actions__item:nth-child(4) {
    transition-delay: 0.12s;
}

.app-floating-actions__item-label {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(122, 133, 153, 0.16);
    border-radius: 999px;
    box-shadow: 0 0.85rem 1.8rem rgba(15, 23, 42, 0.12);
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    max-width: 13.5rem;
    overflow: hidden;
    padding: 0.66rem 0.9rem;
    text-overflow: ellipsis;
}

.app-floating-actions__item-icon,
.app-floating-actions__trigger {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    line-height: 1;
}

.app-floating-actions__item-icon {
    background: var(--bs-body-bg);
    border: 1px solid rgba(122, 133, 153, 0.18);
    box-shadow: 0 0.85rem 1.8rem rgba(15, 23, 42, 0.14);
    color: var(--app-brand-accent);
    font-size: 1.05rem;
    height: 2.45rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    width: 2.45rem;
}

.app-floating-actions__trigger {
    appearance: none;
    background: var(--app-brand-accent);
    border: 1px solid var(--app-brand-accent-border);
    box-shadow: 0 1rem 2.2rem rgba(var(--app-brand-accent-rgb), 0.28);
    color: var(--app-brand-accent-contrast);
    font-size: 1.35rem;
    height: 3.15rem;
    padding: 0;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    width: 3.15rem;
}

.app-floating-actions__trigger::after {
    border: 1px solid var(--app-brand-accent-focus);
    border-radius: inherit;
    content: "";
    inset: -0.35rem;
    opacity: 0;
    position: absolute;
    transform: scale(0.82);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-floating-actions:hover .app-floating-actions__trigger,
.app-floating-actions:focus-within .app-floating-actions__trigger {
    box-shadow: 0 1.1rem 2.4rem rgba(var(--app-brand-accent-rgb), 0.36);
    transform: translate3d(0, -1px, 0) scale(1.03);
}

.app-floating-actions:hover .app-floating-actions__trigger::after,
.app-floating-actions:focus-within .app-floating-actions__trigger::after {
    opacity: 1;
    transform: scale(1);
}

.app-floating-actions:hover .app-floating-actions__trigger i,
.app-floating-actions:focus-within .app-floating-actions__trigger i {
    transform: rotate(45deg);
}

.app-floating-actions__trigger i {
    position: relative;
    transition: transform 0.22s ease;
    z-index: 1;
}

.app-floating-actions__item:hover,
.app-floating-actions__item:focus {
    color: var(--app-brand-accent);
    outline: 0;
}

.app-floating-actions__item:hover .app-floating-actions__item-icon,
.app-floating-actions__item:focus .app-floating-actions__item-icon,
.app-floating-actions__item.is-active .app-floating-actions__item-icon {
    background: var(--app-brand-accent);
    border-color: var(--app-brand-accent);
    color: var(--app-brand-accent-contrast);
    transform: translate3d(-2px, 0, 0);
}

.app-floating-actions__item:hover .app-floating-actions__item-label,
.app-floating-actions__item:focus .app-floating-actions__item-label,
.app-floating-actions__item.is-active .app-floating-actions__item-label {
    border-color: rgba(var(--bs-primary-rgb), 0.22);
    color: var(--app-brand-accent);
}

html[data-app-theme="dark"] .app-floating-actions__item-label {
    background: rgba(36, 40, 47, 0.94);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.28);
}

html[data-app-theme="dark"] .app-floating-actions__item-icon {
    background: #24282f;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.28);
}

@media (max-width: 991.98px) {
    body[data-layout="vertical"] .app-floating-actions {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-floating-actions,
    .app-floating-actions__item,
    .app-floating-actions__item-icon,
    .app-floating-actions__trigger,
    .app-floating-actions__trigger::after,
    .app-floating-actions__trigger i {
        transition: none !important;
    }
}

.app-action-disabled {
    cursor: not-allowed !important;
}

.app-action-disabled:hover,
.app-action-disabled:focus,
.app-action-disabled:active {
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 767.98px) {
    .app-role-preview-banner__content {
        align-items: stretch;
        flex-direction: column;
        padding: 0.9rem 1rem;
    }
}

.app-notification-badge {
    align-items: center;
    border: 2px solid var(--app-notification-badge-ring, var(--bs-body-bg));
    box-shadow: 0 0 0 1px rgba(var(--bs-body-color-rgb), 0.08);
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 800;
    height: 1.12rem;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    min-width: 1.12rem;
    padding: 0 0.27rem;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.app-notification-badge.d-none {
    display: none !important;
}

.noti-icon .app-notification-badge--header {
    left: 50% !important;
    top: 1.05rem !important;
    transform: translate(0.24rem, -0.2rem) !important;
}

.app-mobile-bottom-nav__icon-wrap > .app-notification-badge--mobile {
    --app-notification-badge-ring: var(--app-mobile-bottom-nav-surface, var(--bs-body-bg));
    font-size: 0.58rem;
    height: 1.08rem;
    min-width: 1.08rem;
    overflow: visible;
    padding: 0 0.25rem;
    right: -0.42rem;
    top: -0.34rem;
    transform: none;
}

.app-header-notifications__items {
    max-height: 20rem;
    overflow-y: auto;
}

.app-header-notification-item {
    white-space: normal;
}

.app-header-notification-item__icon,
.app-notification-list__icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 50%;
    color: var(--app-brand-accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.app-notification-list__item {
    border-left: 3px solid transparent;
}

.app-notification-list__item.is-unread {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-left-color: var(--app-brand-accent);
}

.app-notification-center,
.app-notification-admin,
.app-campaigns-page {
    --app-notification-card-radius: 0.75rem;
}

.app-notification-center .card,
.app-notification-admin .card,
.app-campaigns-page .card {
    border-radius: var(--app-notification-card-radius);
}

.app-notification-kpi .card-body {
    min-height: 8.25rem;
    padding: 1.5rem;
}

.app-notification-filter-card .card-body {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    padding: 1.35rem 1.5rem;
}

.app-notification-filter-card__controls {
    align-items: end;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 0.45fr) auto auto;
}

.app-notification-filter-card__field {
    min-width: 0;
}

.app-notification-filter-card__read {
    justify-self: end;
}

.app-notification-matrix {
    max-height: 64vh;
    min-height: 20rem;
}

.app-notification-matrix thead th {
    background: var(--bs-body-bg);
    position: sticky;
    top: 0;
    z-index: 3;
}

.app-notification-matrix th,
.app-notification-matrix td {
    border-color: rgba(var(--bs-body-color-rgb), 0.08);
    min-width: 4.5rem;
    padding: 0.85rem 0.6rem;
    vertical-align: middle;
}

.app-notification-matrix__check {
    min-width: 4.5rem;
}

.app-notification-matrix__check .form-check-input {
    float: none;
    margin: 0;
}

.app-notification-matrix-header {
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
}

.app-custom-recipient-role {
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    display: flex;
    gap: 0.6rem;
    height: 100%;
    margin: 0;
    padding: 0.75rem 0.85rem;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.app-custom-recipient-role .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin-left: 0;
    margin-top: 0;
}

.app-custom-recipient-role .form-check-label {
    min-width: 0;
}

.app-custom-recipient-modal .modal-dialog {
    max-width: min(1140px, calc(100vw - 2rem));
}

.app-custom-recipient-search {
    min-width: min(30rem, 100%);
}

.app-custom-recipient-count {
    min-width: 7rem;
}

.app-custom-recipient-picker__list {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    max-height: min(32rem, 58vh);
    min-height: 10rem;
    overflow: auto;
    padding: 0.65rem;
}

.app-custom-recipient-picker__empty {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    grid-column: 1 / -1;
    padding: 1rem;
    text-align: center;
}

.app-custom-recipient-account {
    align-items: flex-start;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    cursor: pointer;
    display: flex;
    gap: 0.7rem;
    margin: 0;
    padding: 0.7rem;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.app-custom-recipient-account .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin-left: 0;
    margin-top: 0.15rem;
}

.app-custom-recipient-account:hover {
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.app-custom-recipient-account.is-selected {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    box-shadow: 0 0 0 0.12rem rgba(var(--bs-primary-rgb), 0.08);
}

.app-custom-recipient-account + .app-custom-recipient-account {
    border-top: 1px solid var(--bs-border-color);
}

.app-custom-recipient-account__body {
    display: block;
    min-width: 0;
}

.app-custom-recipient-account__name {
    color: var(--bs-emphasis-color);
    display: block;
    font-weight: 700;
    line-height: 1.25;
}

.app-custom-recipient-account__meta {
    align-items: center;
    color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    gap: 0.35rem;
    line-height: 1.35;
    margin-top: 0.2rem;
}

@media (max-width: 1199.98px) {
    .app-custom-recipient-picker__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .app-custom-recipient-picker__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-custom-recipient-picker__list {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) {
    body[data-layout="vertical"] .app-mobile-bottom-nav,
    body[data-layout="vertical"] .app-mobile-notifications-sheet,
    body[data-layout="vertical"] .app-mobile-search-sheet {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
}

.app-settings-tabbar {
    align-items: center;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.45rem;
}

.app-settings-tabbar__item {
    align-items: center;
    border-radius: 0.55rem;
    color: var(--bs-secondary-color);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 700;
    gap: 0.45rem;
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.app-settings-tabbar__item:hover,
.app-settings-tabbar__item.is-active {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--app-brand-accent);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
}

.app-notification-category-col {
    min-width: 17rem;
    width: 17rem;
}

.app-notification-matrix .app-notification-category-col {
    background: var(--bs-body-bg);
    left: 0;
    position: sticky;
    z-index: 2;
}

.app-notification-matrix thead .app-notification-category-col {
    z-index: 4;
}

.app-notification-priority-col {
    min-width: 8.5rem;
    width: 8.5rem;
}

.app-notification-priority-select {
    min-width: 7.5rem;
    text-align: center;
}

.app-notification-matrix tr.is-low-priority td:not(:first-child):not(:nth-child(2)) {
    opacity: 0.48;
}

.app-notification-matrix tr.is-low-priority .form-check-input {
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.app-cron-helper {
    background: rgba(var(--bs-primary-rgb), 0.035);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1rem;
}

.app-cron-helper__command {
    min-height: 4.5rem;
    resize: vertical;
}

.app-progress-thin {
    height: 0.45rem;
}

.app-template-card textarea {
    resize: vertical;
}

.app-notification-admin-section {
    overflow: hidden;
}

.app-notification-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 0.85rem;
}

.app-notification-section-heading__icon {
    align-items: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0.65rem;
    color: var(--app-brand-accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.app-notification-action-card__body {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    min-height: 7.25rem;
}

.app-notification-action-card__content {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    min-width: 0;
}

.app-notification-action-card__icon {
    align-items: center;
    background: rgba(var(--bs-success-rgb), 0.08);
    border: 1px solid rgba(var(--bs-success-rgb), 0.18);
    border-radius: 0.7rem;
    color: var(--bs-success);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.1rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.app-notification-action-card__button {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 11.5rem;
    white-space: nowrap;
}

.app-push-cleanup-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-push-cleanup-stat {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    min-width: 0;
    padding: 0.85rem 0.95rem;
}

.app-push-cleanup-stat span {
    color: var(--bs-secondary-color);
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.app-push-cleanup-stat strong {
    color: var(--bs-emphasis-color);
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
}

.app-escalation-kpi {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    min-height: 5.5rem;
    padding: 1rem;
}

.app-escalation-kpi span {
    color: var(--bs-secondary-color);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.app-escalation-kpi strong {
    color: var(--bs-emphasis-color);
    display: block;
    font-size: 1.65rem;
    line-height: 1.1;
}

.app-escalation-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-escalation-card {
    border-left: 4px solid transparent !important;
    scroll-margin-top: 7rem;
}

.app-escalation-card.is-enabled {
    border-left-color: var(--app-brand-accent) !important;
}

.app-escalation-card__meta {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-escalation-card__meta div {
    background: var(--bs-tertiary-bg);
    border-radius: 0.6rem;
    min-width: 0;
    padding: 0.75rem;
}

.app-escalation-card__meta span {
    color: var(--bs-secondary-color);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.app-escalation-card__meta strong {
    color: var(--bs-emphasis-color);
    display: block;
    font-size: 0.92rem;
    margin-top: 0.2rem;
}

.app-escalation-domain {
    align-items: flex-start;
    border-radius: 0.65rem;
    display: flex;
    font-size: 0.84rem;
    gap: 0.5rem;
    line-height: 1.45;
    margin-top: 1rem;
    padding: 0.75rem;
}

.app-escalation-domain i {
    flex: 0 0 auto;
    font-size: 1.1rem;
    margin-top: 0.05rem;
}

.app-escalation-domain.is-ready {
    background: rgba(var(--bs-success-rgb), 0.08);
    color: var(--bs-success-text-emphasis, var(--bs-success));
}

.app-escalation-domain.is-muted {
    background: rgba(var(--bs-warning-rgb), 0.1);
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}

.app-escalation-modal .modal-content {
    border-radius: 0.9rem;
}

.app-escalation-modal__panel {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    padding: 1.1rem;
}

.app-escalation-modal__panel h6 {
    margin-bottom: 0.85rem;
}

.app-escalation-switch,
.app-escalation-check,
.app-escalation-role {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    margin: 0;
}

.app-escalation-switch .form-check-input,
.app-escalation-check .form-check-input,
.app-escalation-role .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin-left: 0;
    margin-top: 0;
}

.app-escalation-check {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    min-height: 2.85rem;
    padding: 0.65rem 0.75rem;
}

.app-escalation-check + .app-escalation-check,
.app-escalation-account-target {
    margin-top: 0.75rem;
}

.app-escalation-account-target {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    padding: 0.85rem;
}

.app-escalation-role-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 16.75rem;
    overflow: auto;
    padding-right: 0.15rem;
}

.app-escalation-role {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    min-height: 2.85rem;
    padding: 0.65rem 0.75rem;
}

.app-escalation-preview {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.14);
    border-radius: 0.75rem;
    color: var(--bs-emphasis-color);
    padding: 0.9rem 1rem;
}

.app-notification-chart {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
    min-height: 11rem;
}

.app-notification-chart__day {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.app-notification-chart__bars {
    align-items: end;
    background: var(--bs-tertiary-bg);
    border-radius: 0.55rem;
    display: flex;
    gap: 0.18rem;
    height: 9rem;
    justify-content: center;
    padding: 0.45rem;
    width: 100%;
}

.app-notification-chart__bars span {
    border-radius: 999px 999px 0 0;
    display: block;
    min-height: 0.25rem;
    width: 0.45rem;
}

.app-notification-chart__bars .is-sent {
    background: var(--bs-success);
}

.app-notification-chart__bars .is-opened {
    background: var(--bs-primary);
}

.app-notification-chart__bars .is-failed {
    background: var(--bs-danger);
}

.app-segmented-filter {
    align-items: center;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.35rem;
}

.app-segmented-filter a {
    align-items: center;
    border-radius: 0.5rem;
    color: var(--bs-secondary-color);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 0.4rem;
    line-height: 1;
    min-height: 2.35rem;
    padding: 0.65rem 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}

.app-segmented-filter a i {
    font-size: 1rem;
    line-height: 1;
}

.app-segmented-filter a.is-active,
.app-segmented-filter a:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--app-brand-accent);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
}

.app-notification-timeline {
    display: grid;
    gap: 0.85rem;
}

.app-notification-group {
    border-left: 4px solid transparent !important;
    overflow: hidden;
}

.app-notification-group.is-unread {
    border-left-color: var(--app-brand-accent) !important;
}

.app-notification-group__items {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    overflow: hidden;
}

.app-notification-group__main {
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.app-notification-group__item {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    text-decoration: none;
}

.app-notification-group__item + .app-notification-group__item {
    border-top: 1px solid var(--bs-border-color);
}

.app-notification-group__item:hover {
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.app-campaign-table__body {
    max-width: 28rem;
}

@media (max-width: 991.98px) {
    body[data-layout="vertical"] .app-mobile-bottom-nav__icon-wrap > .app-notification-badge--mobile {
        align-items: center;
        display: inline-flex;
        font-size: 0.58rem;
        font-weight: 800;
        height: 1.08rem;
        justify-content: center;
        left: auto !important;
        line-height: 1;
        min-width: 1.08rem;
        padding: 0 0.25rem;
        right: -0.42rem;
        top: -0.34rem !important;
        transform: none !important;
    }

    .app-notification-filter-card__controls {
        grid-template-columns: 1fr 1fr;
    }

    .app-notification-filter-card__read {
        justify-self: stretch;
    }

    .app-notification-filter-card__controls .btn {
        width: 100%;
    }

    .app-notification-matrix .app-notification-category-col,
    .app-notification-matrix .app-notification-priority-col {
        position: static;
    }

    .app-segmented-filter {
        max-width: 100%;
        overflow-x: auto;
    }

    .app-escalation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-notification-action-card__body {
        align-items: stretch;
        flex-direction: column;
    }

    .app-notification-action-card__button {
        width: 100%;
    }

    .app-push-cleanup-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-notification-filter-card .card-body {
        padding: 1rem;
    }

    .app-notification-filter-card__controls {
        grid-template-columns: 1fr;
    }

    .app-notification-group__main {
        gap: 0.75rem;
    }

    .app-notification-group .card-body {
        padding: 1rem !important;
    }

    .app-settings-tabbar__item {
        padding-inline: 0.85rem;
    }

    .app-notification-matrix-header {
        align-items: stretch;
        flex-direction: column;
        padding: 1rem;
    }

    .app-escalation-grid,
    .app-escalation-card__meta,
    .app-push-cleanup-stats,
    .app-escalation-role-grid {
        grid-template-columns: 1fr;
    }

    .app-notification-action-card__content {
        align-items: flex-start;
    }

    .app-escalation-role-grid {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

.app-onboarding-launcher {
    align-items: center;
    background: var(--app-brand-accent, var(--bs-primary));
    border: 0;
    border-radius: 999px;
    bottom: 5.75rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
    color: var(--app-brand-accent-contrast, #fff);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.4rem;
    line-height: 1;
    padding: 0.78rem 1rem;
    position: fixed;
    right: 1.25rem;
    z-index: 1042;
}

.app-onboarding-launcher:hover,
.app-onboarding-launcher:focus {
    background: var(--app-brand-accent-hover, var(--bs-primary));
    color: var(--app-brand-accent-contrast, #fff);
}

.app-onboarding-launcher i {
    font-size: 1.25rem;
}

.app-onboarding-modal,
.app-onboarding-panel,
.app-onboarding-focus {
    color: var(--bs-body-color);
    font-size: 0.9375rem;
}

.app-onboarding-modal {
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.18s ease;
    z-index: 1085;
}

.app-onboarding-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.app-onboarding-modal__backdrop {
    background: rgba(15, 23, 42, 0.62);
    border: 0;
    inset: 0;
    position: absolute;
}

.app-onboarding-modal__dialog {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
    left: 50%;
    max-height: min(720px, calc(100vh - 2rem));
    max-width: min(560px, calc(100vw - 2rem));
    overflow: auto;
    padding: 1.25rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.app-onboarding-modal__badge,
.app-onboarding-panel__eyebrow,
.app-onboarding-focus__meta {
    color: var(--app-brand-accent, var(--bs-primary));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-onboarding-modal__title,
.app-onboarding-panel__title,
.app-onboarding-focus__title {
    color: var(--bs-heading-color);
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0;
}

.app-onboarding-modal__body,
.app-onboarding-focus__body {
    color: var(--bs-secondary-color);
    line-height: 1.55;
    margin: 0;
}

.app-onboarding-modal__actions,
.app-onboarding-focus__actions,
.app-onboarding-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.app-onboarding-visual {
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.08), rgba(16, 185, 129, 0.12));
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    min-height: 150px;
    overflow: hidden;
}

.app-onboarding-visual img {
    display: block;
    height: auto;
    max-height: 220px;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.app-onboarding-visual--fallback {
    min-height: 130px;
}

.app-onboarding-icon {
    align-items: center;
    background: var(--app-brand-accent-subtle, rgba(var(--bs-primary-rgb), 0.12));
    border: 1px solid var(--app-brand-accent-border, rgba(var(--bs-primary-rgb), 0.25));
    border-radius: 50%;
    color: var(--app-brand-accent, var(--bs-primary));
    display: inline-flex;
    height: 4.5rem;
    justify-content: center;
    width: 4.5rem;
}

.app-onboarding-icon i {
    font-size: 2.25rem;
}

.app-onboarding-modal__dialog > * + * {
    margin-top: 0.85rem;
}

.app-onboarding-panel {
    background: var(--bs-body-bg);
    border-left: 1px solid var(--bs-border-color);
    bottom: 0;
    box-shadow: -18px 0 50px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    max-width: min(420px, calc(100vw - 1rem));
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(105%);
    transition: transform 0.2s ease;
    width: 100%;
    z-index: 1084;
}

.app-onboarding-panel.is-open {
    transform: translateX(0);
}

.app-onboarding-panel__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.15rem;
}

.app-onboarding-panel__close,
.app-onboarding-focus__close {
    align-items: center;
    background: var(--bs-light);
    border: 0;
    border-radius: 50%;
    color: var(--bs-body-color);
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.app-onboarding-panel__meter {
    background: var(--bs-tertiary-bg);
    height: 0.45rem;
    overflow: hidden;
}

.app-onboarding-panel__meter span {
    background: var(--app-brand-accent, var(--bs-primary));
    display: block;
    height: 100%;
    transition: width 0.2s ease;
}

.app-onboarding-panel__steps {
    display: grid;
    gap: 0.75rem;
    overflow: auto;
    padding: 1rem;
}

.app-onboarding-step {
    align-items: flex-start;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.95rem;
    text-align: left;
}

.app-onboarding-step:hover,
.app-onboarding-step:focus {
    border-color: var(--app-brand-accent-border, rgba(var(--bs-primary-rgb), 0.28));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.app-onboarding-step.is-complete {
    background: rgba(16, 185, 129, 0.08);
}

.app-onboarding-step__status {
    align-items: center;
    background: var(--app-brand-accent-subtle, rgba(var(--bs-primary-rgb), 0.12));
    border-radius: 50%;
    color: var(--app-brand-accent, var(--bs-primary));
    display: inline-flex;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.app-onboarding-step.is-complete .app-onboarding-step__status {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.app-onboarding-step__copy {
    min-width: 0;
}

.app-onboarding-step__title {
    color: var(--bs-heading-color);
    display: block;
    font-weight: 700;
}

.app-onboarding-step__body,
.app-onboarding-step__action {
    color: var(--bs-secondary-color);
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-top: 0.2rem;
}

.app-onboarding-step__action {
    color: var(--app-brand-accent, var(--bs-primary));
    font-weight: 700;
    grid-column: 2;
}

.app-onboarding-panel__footer {
    border-top: 1px solid var(--bs-border-color);
    margin-top: auto;
    padding: 1rem;
}

.app-onboarding-focus {
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 1086;
}

.app-onboarding-focus__scrim {
    background: rgba(15, 23, 42, 0.66);
    pointer-events: auto;
    position: fixed;
}

.app-onboarding-focus__ring {
    border: 2px solid var(--app-brand-accent, var(--bs-primary));
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.18), 0 18px 42px rgba(15, 23, 42, 0.22);
    pointer-events: none;
    position: fixed;
}

.app-onboarding-focus__popover {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.28);
    display: grid;
    gap: 0.75rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1rem;
    pointer-events: auto;
    position: fixed;
}

.app-onboarding-focus__popover--missing {
    left: 50%;
    max-width: min(380px, calc(100vw - 2rem));
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.app-onboarding-focus__close {
    justify-self: end;
    margin-bottom: -0.35rem;
}

.app-onboarding-focus__popover .app-onboarding-visual {
    margin-bottom: 0;
    min-height: 92px;
}

.app-onboarding-focus__popover .app-onboarding-icon {
    height: 3.25rem;
    width: 3.25rem;
}

.app-onboarding-focus__popover .app-onboarding-icon i {
    font-size: 1.65rem;
}

html[data-app-theme="dark"] .app-onboarding-launcher,
body[data-bs-theme="dark"] .app-onboarding-launcher {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}

html[data-app-theme="dark"] .app-onboarding-panel__close,
html[data-app-theme="dark"] .app-onboarding-focus__close,
body[data-bs-theme="dark"] .app-onboarding-panel__close,
body[data-bs-theme="dark"] .app-onboarding-focus__close {
    background: var(--bs-tertiary-bg);
}

@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
    .app-onboarding-launcher,
    .app-onboarding-modal,
    .app-onboarding-panel,
    .app-onboarding-focus {
        display: none !important;
    }

    .app-onboarding-launcher {
        bottom: 5.25rem;
        padding: 0.72rem;
    }

    .app-onboarding-launcher span {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .app-onboarding-modal__dialog {
        border-radius: 8px 8px 0 0;
        bottom: 0;
        left: 0;
        max-height: calc(100vh - 1rem);
        max-width: none;
        padding: 1rem;
        top: auto;
        transform: none;
    }

    .app-onboarding-panel {
        max-width: 100vw;
    }

    .app-onboarding-focus__popover {
        bottom: calc(1rem + env(safe-area-inset-bottom));
        left: 1rem !important;
        max-height: 48vh;
        right: 1rem;
        top: auto !important;
        width: auto !important;
    }

    .app-onboarding-modal__actions,
    .app-onboarding-focus__actions,
    .app-onboarding-panel__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .app-onboarding-modal__actions .btn,
    .app-onboarding-focus__actions .btn,
    .app-onboarding-panel__footer .btn {
        width: 100%;
    }
}

.app-detail-review-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.app-detail-review-hero {
    background:
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.08), rgba(var(--bs-body-bg-rgb), 0.98)),
        linear-gradient(90deg, rgba(22, 163, 74, 0.08), transparent 46%);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
}

.app-detail-review-hero .card-body {
    padding: 1.1rem 1.25rem;
}

.app-detail-review-hero h3,
.app-detail-review-hero h4 {
    color: var(--bs-heading-color);
    font-size: 1.25rem;
    line-height: 1.25;
}

[data-bs-theme="dark"] .app-detail-review-hero,
[data-bs-theme="dark"] .application-review-page .app-review-hero,
html[data-app-theme="dark"] .app-detail-review-hero,
html[data-app-theme="dark"] .application-review-page .app-review-hero {
    background: var(--app-hero-surface);
    border-color: var(--app-surface-border);
}

[data-bs-theme="dark"] .app-detail-review-hero .badge.bg-white,
[data-bs-theme="dark"] .application-review-page .app-review-hero .badge.bg-white,
html[data-app-theme="dark"] .app-detail-review-hero .badge.bg-white,
html[data-app-theme="dark"] .application-review-page .app-review-hero .badge.bg-white {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--app-surface-border);
    color: var(--app-heading-accent) !important;
}

[data-bs-theme="dark"] .application-review-page .app-review-stat-card,
html[data-app-theme="dark"] .application-review-page .app-review-stat-card {
    background: var(--app-surface-soft);
    border-color: var(--app-surface-border);
}

.app-detail-review-grid {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
}

.app-detail-review-grid > .card {
    height: 100%;
    min-width: 0;
}

.app-detail-status-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-detail-status-card form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.app-detail-status-card .btn[type="submit"] {
    margin-top: auto;
}

.app-detail-meta-grid {
    display: grid;
    gap: 0.75rem;
}

.app-detail-meta-item,
.app-detail-content-box {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 0.85rem 0.95rem;
}

.app-detail-meta-label {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-detail-meta-value {
    color: var(--bs-heading-color);
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0.3rem;
    overflow-wrap: anywhere;
}

.app-detail-file-list {
    display: grid;
    gap: 0.75rem;
}

.app-detail-file-list .list-group-item {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 0.85rem 0.95rem;
}

.app-detail-review-summary-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-detail-review-summary-grid .app-detail-content-box.is-wide {
    grid-column: 1 / -1;
}

.app-list-stat-card .card-body {
    padding: 1rem;
}

.app-list-stat-card .display-6 {
    font-size: 1.75rem;
    line-height: 1;
}

@media (max-width: 1199.98px) {
    .app-detail-review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .app-detail-review-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .app-detail-review-hero .card-body {
        padding: 1rem;
    }

    .settings-platform-switch .card-body {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .settings-platform-switch__toggle {
        justify-content: flex-start;
        min-width: 0;
    }

    .settings-google-auth-activation {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .settings-google-auth-activation__control {
        justify-content: flex-start;
        min-width: 0;
    }

    .app-detail-review-hero .btn,
    .app-detail-file-list .btn {
        width: 100%;
    }

    .app-detail-file-list .list-group-item {
        align-items: stretch !important;
        flex-direction: column;
    }
}

/* Compact operational headers
 * Keep admin/workflow pages close to the dense matches header pattern without
 * touching the match views that already use their own table-first layout.
 */
:where(
    .users-workspace__hero,
    .settings-hero-card,
    .access-control-center__hero,
    .questionnaire-hero,
    .app-detail-review-hero,
    .application-review-page .app-review-hero,
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) {
    background: var(--app-surface-base) !important;
    border: 1px solid var(--app-surface-border) !important;
    border-radius: 8px;
    box-shadow: 0 0.125rem 0.375rem rgba(15, 23, 42, 0.05) !important;
}

:where(
    .users-workspace__hero,
    .settings-hero-card,
    .access-control-center__hero,
    .questionnaire-hero,
    .app-detail-review-hero,
    .application-review-page .app-review-hero,
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) > .card-body {
    background: var(--app-surface-base) !important;
    padding: 1rem 1.25rem !important;
}

:where(
    .users-workspace__hero,
    .settings-hero-card,
    .access-control-center__hero,
    .questionnaire-hero,
    .app-detail-review-hero,
    .application-review-page .app-review-hero,
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) h2,
:where(
    .users-workspace__hero,
    .settings-hero-card,
    .access-control-center__hero,
    .questionnaire-hero,
    .app-detail-review-hero,
    .application-review-page .app-review-hero,
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) h3 {
    color: var(--bs-heading-color);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    margin-bottom: 0.25rem !important;
}

:where(
    .users-workspace__hero,
    .settings-hero-card,
    .access-control-center__hero,
    .questionnaire-hero,
    .app-detail-review-hero,
    .application-review-page .app-review-hero,
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) p {
    font-size: 0.82rem;
    line-height: 1.45;
}

:where(
    .users-workspace__hero,
    .settings-hero-card,
    .access-control-center__hero,
    .questionnaire-hero,
    .app-detail-review-hero,
    .application-review-page .app-review-hero,
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) .badge {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0.35rem 0.65rem !important;
}

:where(
    .users-workspace__hero,
    .settings-hero-card,
    .access-control-center__hero,
    .questionnaire-hero,
    .app-detail-review-hero,
    .application-review-page .app-review-hero,
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) > .card-body > .d-flex:first-child {
    margin-bottom: 0 !important;
}

:where(
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) > .card-body > .d-flex:first-child + .row {
    border-top: 1px solid var(--app-surface-border);
    margin-top: 0.85rem !important;
    padding-top: 0.85rem;
}

:where(
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) > .card-body > .row .card,
.application-review-page .app-review-stat-card {
    background: var(--app-surface-soft) !important;
    border: 1px solid var(--app-surface-border) !important;
    border-radius: 8px;
    box-shadow: none !important;
}

:where(
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) > .card-body > .row .card-body,
.application-review-page .app-review-stat-card {
    padding: 0.85rem 0.95rem !important;
}

:where(
    .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
    .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
) .display-6,
.application-review-page .app-review-stat-value {
    font-size: 1.45rem !important;
    line-height: 1.1;
}

@media (max-width: 767.98px) {
    :where(
        .users-workspace__hero,
        .settings-hero-card,
        .access-control-center__hero,
        .questionnaire-hero,
        .app-detail-review-hero,
        .application-review-page .app-review-hero,
        .card.border-primary.border-opacity-25.shadow-sm.overflow-hidden,
        .card.border-danger.border-opacity-25.shadow-sm.overflow-hidden,
        .card.border-success.border-opacity-25.shadow-sm.overflow-hidden,
        .card.border-warning.border-opacity-25.shadow-sm.overflow-hidden,
        .card.border-info.border-opacity-25.shadow-sm.overflow-hidden
    ) > .card-body {
        padding: 0.95rem 1rem !important;
    }
}

.player-access-toolbar {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    min-width: min(100%, 44rem);
}

.player-access-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.player-access-counters span {
    align-items: center;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 8px;
    color: var(--bs-secondary-color);
    display: inline-flex;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
}

.player-access-counters strong {
    color: var(--bs-body-color);
}

.player-access-dropdown .dropdown-menu {
    border-radius: 0.75rem;
    min-width: 11rem;
}

.player-access-dropdown .dropdown-item {
    align-items: center;
    display: flex;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .player-access-toolbar {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .player-access-counters {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .player-access-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .player-access-counters {
        flex-direction: column;
        width: 100%;
    }

    .player-access-counters span {
        width: 100%;
    }

    .player-access-dropdown,
    .player-access-dropdown .dropdown-toggle,
    .player-access-dropdown .dropdown-menu {
        width: 100%;
    }
}

.quick-date-input {
    cursor: pointer;
}

.quick-date-input[readonly] {
    background-color: var(--bs-body-bg);
    caret-color: transparent;
}

.quick-date-picker {
    --qdp-bg: var(--bs-body-bg, #fff);
    --qdp-panel: var(--bs-tertiary-bg, var(--bs-secondary-bg, #f8f9fa));
    --qdp-line: var(--bs-border-color, #d9dee3);
    --qdp-text: var(--bs-body-color, #495057);
    --qdp-muted: var(--bs-secondary-color, #74788d);
    --qdp-soft: var(--bs-tertiary-bg, rgba(15, 23, 42, 0.04));
    --qdp-primary: var(--app-brand-accent, var(--bs-primary, #038edc));
    --qdp-primary-strong: var(--app-brand-accent-hover, var(--app-brand-accent, var(--bs-primary, #038edc)));
    --qdp-primary-soft: var(--app-brand-accent-subtle, rgba(var(--bs-primary-rgb), 0.1));
    --qdp-primary-contrast: var(--app-brand-accent-contrast, #fff);
    background: var(--qdp-bg);
    border: 1px solid var(--qdp-line);
    border-radius: 8px;
    box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.22);
    color: var(--qdp-text);
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr);
    max-height: calc(100vh - 24px);
    overflow: hidden;
    width: min(540px, calc(100vw - 24px));
    z-index: 2055;
}

.quick-date-picker--range {
    width: min(620px, calc(100vw - 24px));
}

.quick-date-picker__sidebar {
    align-content: start;
    background: var(--qdp-panel);
    border-right: 1px solid var(--qdp-line);
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.75rem;
}

.quick-date-picker__preset,
.quick-date-picker__field,
.quick-date-picker__nav-button,
.quick-date-picker__day,
.quick-date-picker__jump button {
    appearance: none;
    font: inherit;
}

.quick-date-picker__preset {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--qdp-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    min-height: 2.15rem;
    overflow-wrap: anywhere;
    padding: 0.46rem 0.58rem;
    text-align: left;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
    width: 100%;
}

.quick-date-picker__preset:hover,
.quick-date-picker__preset:focus-visible {
    background: var(--qdp-primary-soft);
    border-color: color-mix(in srgb, var(--qdp-primary) 28%, transparent);
    color: var(--qdp-primary-strong);
    outline: 0;
}

.quick-date-picker__preset.is-muted-action {
    color: var(--qdp-muted);
}

.quick-date-picker__jump {
    align-items: center;
    background: var(--qdp-bg);
    border: 1px solid var(--qdp-line);
    border-radius: 6px;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 3.2rem 2.15rem minmax(0, 1fr);
    min-width: 0;
    padding: 0.4rem;
}

.quick-date-picker__jump input {
    background: var(--qdp-bg);
    border: 1px solid var(--qdp-line);
    border-radius: 6px;
    color: var(--qdp-text);
    font-size: 0.82rem;
    font-weight: 700;
    height: 2rem;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    text-align: center;
    width: 100%;
}

.quick-date-picker__jump button {
    align-items: center;
    background: var(--qdp-primary-soft);
    border: 1px solid color-mix(in srgb, var(--qdp-primary) 28%, transparent);
    border-radius: 6px;
    color: var(--qdp-primary-strong);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.quick-date-picker__jump button:hover,
.quick-date-picker__jump button:focus-visible {
    background: var(--qdp-primary);
    color: var(--qdp-primary-contrast);
    outline: 0;
}

.quick-date-picker__jump span {
    color: var(--qdp-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.15;
    min-width: 0;
}

.quick-date-picker__main {
    min-width: 0;
    padding: 0.8rem;
}

.quick-date-picker__fields {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0.65rem;
}

.quick-date-picker__field {
    background: var(--qdp-bg);
    border: 1px solid var(--qdp-line);
    border-radius: 6px;
    color: var(--qdp-text);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.2;
    min-height: 2.35rem;
    overflow-wrap: anywhere;
    padding: 0.45rem 0.55rem;
    text-align: left;
}

.quick-date-picker__field.is-active,
.quick-date-picker__field:hover,
.quick-date-picker__field:focus-visible {
    background: var(--qdp-primary-soft);
    border-color: var(--qdp-primary);
    color: var(--qdp-primary-strong);
    outline: 0;
}

.quick-date-picker__nav {
    align-items: center;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 2.15rem minmax(0, 1fr) 5.4rem 2.15rem;
    margin-bottom: 0.65rem;
}

.quick-date-picker__nav-button {
    align-items: center;
    background: var(--qdp-panel);
    border: 1px solid var(--qdp-line);
    border-radius: 6px;
    color: var(--qdp-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.15rem;
    font-weight: 800;
    height: 2.15rem;
    justify-content: center;
    padding: 0;
}

.quick-date-picker__nav-button:hover,
.quick-date-picker__nav-button:focus-visible {
    background: var(--qdp-primary-soft);
    border-color: var(--qdp-primary);
    color: var(--qdp-primary-strong);
    outline: 0;
}

.quick-date-picker__select {
    background-color: var(--qdp-bg);
    border: 1px solid var(--qdp-line);
    border-radius: 6px;
    color: var(--qdp-text);
    font-size: 0.82rem;
    font-weight: 700;
    height: 2.15rem;
    min-width: 0;
    padding: 0.25rem 0.55rem;
}

.quick-date-picker__select:focus {
    border-color: var(--qdp-primary);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--qdp-primary) 16%, transparent);
    outline: 0;
}

.quick-date-picker__weekdays,
.quick-date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.quick-date-picker__weekdays {
    color: var(--qdp-muted);
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.25rem;
    letter-spacing: 0;
    margin-bottom: 0.35rem;
    text-align: center;
}

.quick-date-picker__grid {
    gap: 0.25rem;
}

.quick-date-picker__day {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--qdp-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    justify-content: center;
    min-height: 2.1rem;
    min-width: 0;
    padding: 0;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.quick-date-picker__day:hover,
.quick-date-picker__day:focus-visible {
    background: var(--qdp-primary-soft);
    border-color: color-mix(in srgb, var(--qdp-primary) 35%, transparent);
    color: var(--qdp-primary-strong);
    outline: 0;
}

.quick-date-picker__day.is-muted {
    color: color-mix(in srgb, var(--qdp-muted) 72%, transparent);
}

.quick-date-picker__day.is-today {
    border-color: var(--qdp-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qdp-primary) 22%, transparent);
}

.quick-date-picker__day.is-selected,
.quick-date-picker__day.is-range-start,
.quick-date-picker__day.is-range-end {
    background: var(--qdp-primary);
    border-color: var(--qdp-primary);
    color: var(--qdp-primary-contrast);
}

.quick-date-picker__day.is-in-range {
    background: var(--qdp-primary-soft);
    border-color: transparent;
    color: var(--qdp-primary-strong);
}

.quick-date-picker__day.is-disabled,
.quick-date-picker__day:disabled {
    background: transparent;
    border-color: transparent;
    color: color-mix(in srgb, var(--qdp-muted) 42%, transparent);
    cursor: not-allowed;
    opacity: 0.62;
}

.quick-date-picker--mobile-panel {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    width: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
}

.modal-dialog-scrollable .modal-content > form .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .quick-date-picker {
        grid-template-columns: 1fr;
    }

    .quick-date-picker__sidebar {
        border-bottom: 1px solid var(--qdp-line);
        border-right: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-date-picker__preset {
        text-align: center;
    }

    .quick-date-picker__jump {
        grid-column: span 2;
    }

    .quick-date-picker__main {
        min-height: 430px;
    }

    .quick-date-picker__nav {
        grid-template-columns: 2.15rem minmax(0, 1fr) minmax(4.9rem, 0.6fr) 2.15rem;
    }
}