/* Header Layout Fix - Ensures horizontal button alignment */

/* Force horizontal layout for header sections - Enhanced with higher specificity */
.dashboard-header,
header.dashboard-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 60px !important;
    padding: 0 15px !important;
    width: 100% !important;
}

/* Enhanced selectors for both dashboard structures */
.header-left, 
.header-right,
.dashboard-header .header-left,
.dashboard-header .header-right,
header.dashboard-header .header-left,
header.dashboard-header .header-right {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important; /* Explicitly set to row */
    flex-wrap: nowrap !important; /* Prevent wrapping */
}

.header-left,
.dashboard-header .header-left,
header.dashboard-header .header-left {
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.header-right,
.dashboard-header .header-right,
header.dashboard-header .header-right {
    gap: 10px !important; /* Consistent spacing between buttons */
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Ensure buttons stay inline - Enhanced selectors */
.header-button,
.dashboard-header .header-button,
header.dashboard-header .header-button,
button.header-button {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    height: 36px !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    margin: 0 !important; /* Prevent any margin causing stacking */
}

/* Theme toggle styling - Enhanced selectors */
.theme-toggle,
.dashboard-header .theme-toggle,
header.dashboard-header .theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    height: 36px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease !important;
    margin: 0 !important; /* Prevent any margin causing stacking */
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile responsiveness - keep horizontal layout */
@media (max-width: 768px) {
    .header-right {
        gap: 5px !important; /* Reduce gap on mobile */
    }
    
    .header-button {
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
        height: 32px !important;
    }
    
    .theme-toggle {
        padding: 4px 8px !important;
        height: 32px !important;
    }
    
    /* Hide text on very small screens, keep icons */
    @media (max-width: 480px) {
        .header-button i {
            margin-right: 0 !important;
        }
        
        .header-button .fa-sync-alt + span,
        .header-button .fa-cog + span,
        .header-button .fa-sign-out-alt + span {
            display: none;
        }
    }
}

/* Prevent any flex-direction overrides - Enhanced */
.header-right > *,
.dashboard-header .header-right > *,
header.dashboard-header .header-right > * {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Additional desktop actions container fix */
.header-right-desktop-actions,
.dashboard-header .header-right-desktop-actions,
header.dashboard-header .header-right-desktop-actions {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Fix for any nested containers that might stack vertically */
.header-right *,
.dashboard-header .header-right *,
header.dashboard-header .header-right * {
    box-sizing: border-box !important;
}

/* Prevent specific elements from breaking layout */
#refresh-connection,
#settings-button,
#logout-button,
.theme-toggle {
    float: none !important;
    position: static !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Fix connection status alignment */
.header-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.connection-status {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

/* Emergency fixes for header button alignment - Maximum specificity */
html body .dashboard header.dashboard-header .header-right,
html body .dashboard .dashboard-header .header-right,
html body header.dashboard-header .header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

/* Force all header buttons to display inline */
html body .dashboard header.dashboard-header .header-right .header-button,
html body .dashboard .dashboard-header .header-right .header-button,
html body header.dashboard-header .header-right .header-button,
html body .dashboard header.dashboard-header .header-right .theme-toggle,
html body .dashboard .dashboard-header .header-right .theme-toggle,
html body header.dashboard-header .header-right .theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    float: none !important;
    position: relative !important;
    margin: 0 !important;
}

/* Override any potential CSS Grid or other layout systems */
.header-right,
.dashboard-header .header-right,
header.dashboard-header .header-right {
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    display: flex !important;
}