/* ========== AGGRESSIVE MudBlazor TABS RESPONSIVE OVERRIDES ========== */

/* Ensure any parent container allows full width */
.mud-tabs,
[class*="mud-tabs"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Target the main MudTabs component - STRETCH FULL WIDTH */
.mud-tabs {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: flex-start !important;
}

/* Target the toolbar/header where tabs are - FULL WIDTH, LEFT-ALIGNED */
.mud-tabs-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background-color: #f0f0f0 !important;
    border-bottom: 2px solid #ccc !important;
    padding: 0 !important;
    border-radius: 0 !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* Remove any centering that MudBlazor applies */
.mud-tabs-toolbar.justify-center,
.mud-tabs-toolbar.justify-center-start {
    justify-content: flex-start !important;
}

/* Target the scroll wrapper and all direct children */
.mud-tabs-toolbar > * {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
}

/* Target individual tab elements - EQUAL WIDTH DISTRIBUTION, LEFT-ALIGNED */
.mud-tab {
    position: relative !important;
    border: 1px solid #999 !important;
    background-color: #e0e0e0 !important;
    border-radius: 8px 8px 0 0 !important;
    margin-right: -4px !important;
    padding: 10px 12px !important;
    transform: skewX(-5deg) !important;
    flex: 1 1 0% !important;            /* KEY: Equal width distribution */
    flex-basis: 0 !important;           /* KEY: Start from zero */
    flex-shrink: 1 !important;          /* KEY: Allow shrinking */
    min-width: 60px !important;         /* Minimum width before text hides */
    max-width: none !important;         /* No maximum width */
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    height: auto !important;
    display: flex !important;           /* Make tab itself a flex container */
    justify-content: center !important; /* Center content within tab */
    align-items: center !important;
}

/* Target active tab */
.mud-tab.mud-tab-active,
.mud-tab.active {
    background-color: #fff !important;
    border: 1px solid #007bff !important;
    border-bottom: 2px solid #fff !important;
}

/* Target tab panels container */
.mud-tabs-panels {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

/* Scrollbar styling */
.mud-tabs-toolbar::-webkit-scrollbar {
    height: 6px !important;
}

.mud-tabs-toolbar::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

.mud-tabs-toolbar::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 3px !important;
}

.mud-tabs-toolbar::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* ========== RESPONSIVE TAB STYLING ========== */

/* Tablet: Medium tabs */
@media (max-width: 1023px) {
    .mud-tab {
        min-width: 80px !important;
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        flex: 1 1 0% !important;
        flex-basis: 0 !important;
    }
}

/* Mobile: Smaller tabs with scrolling */
@media (max-width: 767px) {
    .mud-tabs-toolbar {
        scroll-behavior: smooth !important;
    }

    .mud-tab {
        min-width: 70px !important;
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        transform: skewX(-3deg) !important;
        flex: 1 1 0% !important;
        flex-basis: 0 !important;
    }

    /* Hide tab text labels on mobile, show only icons */
    .mud-tab span:not(.mud-icon),
    .mud-tab .mud-tab-text {
        display: none !important;
    }

    .mud-icon {
        margin: 0 !important;
    }
}

/* Small Mobile: Extremely compact, icon-only */
@media (max-width: 479px) {
    .mud-tabs-toolbar {
        padding: 0 !important;
        gap: 0 !important;
    }

    .mud-tab {
        min-width: 50px !important;
        max-width: none !important;
        padding: 4px 4px !important;
        border-radius: 4px 4px 0 0 !important;
        transform: skewX(-1deg) !important;
        margin-right: -2px !important;
        flex: 1 1 0% !important;
        flex-basis: 0 !important;
    }

    /* Hide all text on small mobile */
    .mud-tab span,
    .mud-tab .mud-tab-text {
        display: none !important;
    }
}