/* Management section navigation */
.management-section-tabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 0 24px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    scrollbar-width: thin
}

.management-section-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 44px;
    padding: 0 18px;
    border-right: 1px solid var(--border);
    color: #73889a;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap
}

.management-section-tab:last-child {
    border-right: 0
}

.management-section-tab:hover {
    background: #f7fafc;
    color: var(--navy-900)
}

.management-section-tab.active {
    background: #fffaf1;
    color: var(--navy-900);
    font-weight: 750
}

.management-section-tab.active::after {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
    content: ""
}

.system-settings-tabs .management-section-tab {
    min-width: 142px
}

@media(max-width:700px) {
    .management-section-tabs {
        width: 100%
    }

    .management-section-tab {
        min-width: 132px;
        padding: 0 12px
    }

    .system-settings-tabs .management-section-tab {
        min-width: 130px
    }
}

/* System-setting editors move their actions below the title on narrow screens. */
@media(max-width:620px) {
    body:has(.system-settings-tabs) .topbar:has(.topbar-back-action) {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 8px 12px
    }

    body:has(.system-settings-tabs) .topbar:has(.topbar-back-action) .topbar-left {
        flex: 1 0 100%
    }

    body:has(.system-settings-tabs) .topbar:has(.topbar-back-action) .topbar-actions {
        width: 100%;
        justify-content: flex-end
    }
}