/* ============================================================
   Custom scrollable tab bar (used in AppConfiguration, SystemManagement)
   Replaces MudTabs for reliable mobile/responsive horizontal scrolling.
   ============================================================ */

.appcfg-tabbar {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
}

.appcfg-tabbar::-webkit-scrollbar {
    display: none;
}

.appcfg-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    min-height: 48px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    user-select: none;
}

.appcfg-tab:hover {
    color: rgba(255, 255, 255, 0.95);
    background-color: rgba(255, 255, 255, 0.1);
}

.appcfg-tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.appcfg-panel {
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
}