/* FIX: Prevent header buttons from wrapping/flying out */

.header {
    min-height: 60px;
    height: auto !important;
    /* CRITICAL: Increase z-index to prevent content from overlaying header */
    z-index: 1000 !important;
    position: sticky !important;
    top: 0 !important;
    /* CRITICAL: Header should NOT scroll - fixed width */
    flex-wrap: nowrap !important;
    overflow: visible !important; /* Allow dropdowns to show */
}

.header-controls {
    flex-wrap: nowrap !important;
    overflow: visible !important; /* NO scrolling! */
    /* Ensure it stays in one line */
    width: auto !important;
    max-width: 100% !important;
}

.header-primary-group {
    flex-wrap: nowrap !important;
    min-width: fit-content;
}

.header-primary-actions {
    flex-wrap: nowrap !important;
    gap: 8px;
    min-width: fit-content;
}

.header-primary-actions > button,
.header-primary-actions > .generate-versions-container,
.header-primary-actions > .combination-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.header-menus {
    flex-wrap: nowrap !important;
    flex-shrink: 0;
}

/* CRITICAL: Ensure dropdowns overlay content below, not require scrolling */
.dropdown {
    position: relative !important;
}

.dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    z-index: 1001 !important; /* Above header */
    max-height: 80vh !important; /* Limit height to viewport */
    overflow-y: auto !important; /* Scroll menu if too long, not page */
}

/* Ensure dropdown parent doesn't clip children */
.header-menus .dropdown {
    overflow: visible !important;
}

.header-primary-group {
    overflow: visible !important;
}

.header-secondary-group {
    overflow: visible !important;
}

/* Make header buttons compact to fit without scrolling */
.header-primary-actions > button {
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.header-primary-actions > button i {
    font-size: 13px !important;
    margin-right: 4px !important;
}

/* Even more compact on medium screens */
@media (max-width: 1400px) {
    .header-primary-actions > button {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* On very small screens, allow scrolling instead of wrapping */
@media (max-width: 768px) {
    .header {
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }

    .header-controls {
        flex-wrap: nowrap !important;
    }
}