:root {
    --management-sidebar-width: 15rem;
    --management-border: #e2e7ef;
}

.skip-navigation {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 1100;
    padding: .65rem 1rem;
    color: #fff;
    background: #175cd3;
    border-radius: .4rem;
}
.skip-navigation:focus { top: .5rem; color: #fff; }
.management-header {
    min-height: 4.25rem;
    padding: .75rem 1.25rem;
    gap: .75rem 1.25rem;
    background: #fff;
}
.management-header__brand,
.management-account { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.management-header .navbar-brand { margin: 0; font-weight: 600; color: #233248; }
.management-header .navbar-toggler { padding: .25rem .4rem; font-size: 1rem; }
.management-account { margin-left: auto; }
.management-account__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.management-account form { margin: 0; flex-shrink: 0; }
.management-shell { display: flex; min-height: calc(100vh - 4.25rem); }
.management-sidebar { --bs-offcanvas-width: var(--management-sidebar-width); background: #f7f9fc; }
.management-sidebar__body { flex-direction: column; padding: 1.25rem .85rem; }
.management-navigation { width: 100%; }
.management-nav-group + .management-nav-group { margin-top: 1.65rem; }
.management-nav-heading { margin: 0 0 .5rem; padding: 0 .75rem; color: #667085; font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.management-navigation .nav { gap: .25rem; }
.management-navigation .nav-link { display: flex; flex-direction: column; gap: .25rem; padding: .7rem .75rem; color: #344054; font-size: .9375rem; border-radius: .5rem; }
.management-navigation .nav-link:hover { color: #174ea6; background: #eaf0f9; }
.management-navigation .nav-link:focus-visible { outline: 2px solid #175cd3; outline-offset: 2px; }
.management-navigation .nav-link.active { color: #174ea6; background: #e5efff; font-weight: 600; box-shadow: inset 3px 0 #175cd3; }
.management-nav-description { color: #667085; font-size: .75rem; font-weight: 400; }
.management-nav-group--audit { padding-top: 1.25rem; border-top: 1px solid var(--management-border); }
.management-help { margin-top: 1.65rem; padding-top: .75rem; border-top: 1px solid var(--management-border); }
.management-help__summary { display: flex; align-items: center; gap: .5rem; padding: .7rem .75rem; color: #667085; font-size: .875rem; border-radius: .5rem; cursor: pointer; list-style: none; }
.management-help__summary::-webkit-details-marker { display: none; }
.management-help__summary:hover { color: #174ea6; background: #eaf0f9; }
.management-help__summary:focus-visible { outline: 2px solid #175cd3; outline-offset: 2px; }
.management-help__icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.management-help__chevron { width: 1rem; height: 1rem; margin-left: auto; flex-shrink: 0; }
.management-help[open] .management-help__chevron { transform: rotate(90deg); }
.management-help > .nav { margin-top: .25rem; }
.device-family-switch { display: flex; flex-direction: column; gap: .6rem; margin: 0 .25rem 1.75rem; }
.device-family-switch__label { color: #667085; font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.device-family-switch .btn { padding: .4rem .6rem; }
.management-content { flex: 1 1 0%; min-width: 0; padding: 1.5rem; }
.management-content > .table-responsive { max-width: 100%; }
.management-data-table { min-width: 56rem; }
.management-data-table th { white-space: nowrap; }
.management-standalone { padding-top: 1.5rem; }
.management-footer { margin-top: 2rem; padding: 1rem 0; font-size: .8rem; }

@media (min-width: 992px) {
    .management-sidebar.offcanvas-lg {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        align-self: flex-start;
        flex: 0 0 var(--management-sidebar-width);
        width: var(--management-sidebar-width);
        height: calc(100vh - 4.25rem);
        max-height: 100vh;
        border-right: 1px solid var(--management-border);
        background: #f7f9fc !important;
    }
    .management-sidebar.offcanvas-lg .offcanvas-body { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.5rem .85rem; }
}
@media (max-width: 991.98px) {
    .management-header { padding: .65rem 1rem; }
    .management-sidebar__body { display: flex; }
    .management-content { padding: 1rem; }
}
@media (max-width: 575.98px) {
    .management-header { gap: .5rem; }
    .management-header .navbar-brand { font-size: 1rem; }
    .management-header__brand { gap: .5rem; }
    .management-account { gap: .4rem; }
    .management-account__email { max-width: 7.5rem; font-size: .75rem; }
    .management-content { padding: .85rem; }
}
@media (max-width: 379.98px) {
    .management-account__email { max-width: 4.5rem; }
}