/* ========================================
   Compact Header Styles for SecurityHub
   ======================================== */

/* Base compact header container styling */
.compact-header-controls .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.compact-header-controls .mud-textfield .mud-input-root {
    min-height: 36px !important;
}

.compact-header-controls .mud-input-outlined .mud-input-slot {
    padding: 8px 12px !important;
}

.compact-header-controls .mud-input-label {
    font-size: 0.8rem !important;
}

.compact-header-controls .mud-button-root {
    min-height: 36px !important;
    padding: 6px 12px !important;
}

.compact-header-controls .mud-icon-button-root {
    width: 36px !important;
    height: 36px !important;
}

/* Grouped Search Controls Styling */
.search-group {
    
    display: flex;
    align-items: center;
 
}

.search-group:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-group:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.2);
}

.search-group .mud-textfield .mud-input-outlined .mud-input-outlined-border {
    border: none !important;
}

.search-group .mud-icon-button-root {
    margin: 0 2px;
    transition: background-color 0.2s ease-in-out;
}

.search-group .mud-icon-button-root:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* View Selector Compact Styling */
.view-selector-compact .mud-button-group .mud-button-root {
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}

/* Dense Select Controls */
.compact-header-controls .mud-select {
    min-height: 32px !important;
}

.compact-header-controls .mud-input-control .mud-input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 32px !important;
}

.compact-header-controls .mud-input-control .mud-input-label {
    font-size: 0.75rem !important;
    transform: translate(12px, 6px) scale(1) !important;
}

.compact-header-controls .mud-input-control .mud-input-label.mud-shrink {
    transform: translate(12px, -6px) scale(0.75) !important;
}

/* Dense select items for better spacing */
.compact-header-controls .mud-select .mud-input-outlined .mud-input-outlined-border {
    border-radius: 4px !important;
}

/* Additional Dense Select Utility Class */
.dense-select .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.dense-select .mud-input-control .mud-input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 32px !important;
}

.dense-select .mud-input-control .mud-input-label {
    font-size: 0.75rem !important;
    transform: translate(12px, 6px) scale(1) !important;
}

.dense-select .mud-input-control .mud-input-label.mud-shrink {
    transform: translate(12px, -6px) scale(0.75) !important;
}

.dense-select .mud-select {
    min-height: 32px !important;
}

.dense-select .mud-input-outlined .mud-input-outlined-border {
    border-radius: 4px !important;
}

/* Header Grid Spacing */
.compact-header-grid {
    margin-bottom: 0.75rem !important;
}

.compact-header-grid .mud-grid-item {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 960px) {
    .search-group {
        min-width: 100%;
        margin-bottom: 8px;
    }
    
    .compact-header-controls .mud-textfield {
        flex-grow: 1;
    }
    
    .view-selector-compact {
        order: -1;
        margin-bottom: 8px;
    }
}

@media (max-width: 600px) {
    .compact-header-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .compact-header-controls > div {
        justify-content: center !important;
        margin-bottom: 8px;
    }
    
    .search-group {
        width: 100%;
    }
}

/* Enhanced Button Styling for Compact Layout */
.compact-header-controls .mud-button-filled {
    font-weight: 500;
    text-transform: none;
}

.compact-header-controls .mud-icon-button {
    border-radius: 4px;
}

/* Tooltip adjustments for compact layout */
.compact-header-controls .mud-tooltip {
    font-size: 0.75rem;
}

/* Improved focus states */
.compact-header-controls .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 2px !important;
}

.compact-header-controls .mud-button-root:focus {
    outline: 2px solid rgba(var(--mud-palette-primary-rgb), 0.5);
    outline-offset: 2px;
}

/* Menu styling for more actions */
.compact-header-controls .mud-menu .mud-list-item {
    min-height: 36px !important;
    padding: 8px 16px !important;
}

.compact-header-controls .mud-menu .mud-list-item-icon {
    min-width: 32px !important;
}

/* Animation for smooth transitions */
.compact-header-controls * {
    transition: all 0.2s ease-in-out;
}

/* Results text styling */
.compact-results-text {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    margin-left: 8px;
}

/* Gap utilities for consistent spacing */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }