/* Fix for sub-tab bar overflow issues */

/* General rule for all sub-tab bars - no scrolling */
.highlights-subtab-bar,
.search-subtab-bar,
.profiler-subtab-bar,
[class*="-subtab-bar"] {
    overflow-x: visible !important; /* Change from auto to visible */
    overflow-y: hidden !important; /* Prevent vertical scrolling */
    flex-shrink: 0 !important; /* Prevent shrinking */
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
}

/* Ensure tab buttons wrap if needed instead of scrolling */
.highlights-subtab-bar,
.search-subtab-bar,
.profiler-subtab-bar {
    flex-wrap: wrap !important; /* Allow wrapping if needed */
    overflow: hidden !important; /* No scrollbars at all */
}

/* If there are too many tabs, make them smaller instead of scrolling */
@media (max-width: 1280px) {
    .highlights-subtab-button,
    .search-subtab-button,
    .profiler-subtab-button,
    [class*="-subtab-button"] {
        padding: 0.375rem 0.75rem !important; /* Smaller padding on smaller screens */
        font-size: 0.8125rem !important; /* Slightly smaller font */
    }
}

/* Ensure the tab content area scrolls, not the tab bar */
.highlights-subtab-content,
.search-subtab-content,
.profiler-subtab-content,
[class*="-subtab-content"] {
    overflow-y: auto !important; /* Content should scroll vertically */
    overflow-x: hidden !important; /* No horizontal scroll */
    flex: 1 1 auto !important;
    min-height: 0 !important; /* Allow shrinking */
}

/* Fix for the search tab specifically */
#searchTabPostCall .search-subtab-bar,
#searchTab .search-subtab-bar {
    overflow: hidden !important;
    flex-wrap: nowrap !important; /* Keep in one line */
}

/* Ensure profiler tabs don't scroll */
.profiler-tab-bar {
    overflow: hidden !important;
    flex-wrap: nowrap !important;
}

/* For very narrow spaces, allow text truncation instead of scrolling */
@media (max-width: 768px) {
    .highlights-subtab-button span,
    .search-subtab-button span,
    .profiler-subtab-button span {
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Ensure parent containers don't force scrolling */
.tab-inner-content {
    overflow: visible !important;
}

/* Fix any nested scrolling issues */
.subtab-wrapper,
[class*="subtab-container"] {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Only the actual content area should scroll */
.subtab-content-wrapper,
.tab-content-area {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}