/**
 * Header Responsive Enhancement
 * Fix: Header quá tải thông tin, không responsive tốt
 * Solution: Tối ưu spacing, ẩn/hiện elements theo screen size
 * Version: 1.0.0
 */

/* ═══════════════════════════════════════════════════════════
   BASE HEADER IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Ensure header doesn't grow beyond reasonable size */
header {
    max-height: 60px;
}

/* Logo optimization - smaller on mobile */
header img[alt="HomeOS Logo"] {
    height: 28px;
}

@media (min-width: 640px) {
    header img[alt="HomeOS Logo"] {
        height: 32px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS (<640px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    /* Hide less critical elements on mobile */
    #app-header-subtitle,
    #server-info-indicator,
    #connection-mode-status-badge,
    #selected-device-info,
    #header-visualization,
    #api-sync-container,
    #theme-toggle {
        display: none !important;
    }

    /* Compact header spacing */
    header > div {
        gap: 0.25rem !important; /* 4px */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Smaller icons on mobile */
    header button svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Truncate username */
    #header-username {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Compact status LED */
    #status-led {
        width: 10px !important;
        height: 10px !important;
    }

    /* Hide device count badge text, keep indicator */
    #connected-devices-count {
        font-size: 0.625rem; /* 10px */
        width: 16px !important;
        height: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   TABLET OPTIMIZATIONS (640px - 1024px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 640px) and (max-width: 1023px) {
    /* Hide network visualization and API sync on tablet */
    #header-visualization,
    #api-sync-container {
        display: none !important;
    }

    /* Compact server info */
    #server-info-indicator {
        max-width: 200px;
    }

    #server-company-name,
    #server-url-display {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Reduce spacing */
    header > div {
        gap: 0.5rem !important; /* 8px */
    }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP OPTIMIZATIONS (>1024px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    /* Limit server info width to prevent overflow */
    #server-company-name {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #server-url-display {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Add tooltips on hover for truncated text */
    #server-company-name:hover,
    #server-url-display:hover {
        overflow: visible;
        white-space: normal;
        position: relative;
        z-index: 100;
    }
}

/* ═══════════════════════════════════════════════════════════
   DEVICE SELECTOR IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Hide device selector by default - only show for specific tabs */
#global-system-device-selector,
label[for="global-system-device-selector"] {
    display: none !important;
}

/* Show device selector when active tab needs it */
.device-selector-visible #global-system-device-selector,
.device-selector-visible label[for="global-system-device-selector"] {
    display: inline-block !important;
}

#global-system-device-selector {
    max-width: 180px;
}

@media (min-width: 1024px) {
    #global-system-device-selector {
        max-width: 200px;
    }
}

@media (max-width: 767px) {
    /* Hide device selector label on small tablets */
    .device-selector-visible label[for="global-system-device-selector"] {
        display: none !important;
    }

    .device-selector-visible #global-system-device-selector {
        max-width: 120px;
        font-size: 0.75rem; /* 12px */
    }
}

/* ═══════════════════════════════════════════════════════════
   USER MENU IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

#user-menu-dropdown {
    min-width: 200px;
    max-width: 280px;
}

/* Ensure dropdown doesn't go off-screen on mobile */
@media (max-width: 639px) {
    #user-menu-dropdown {
        right: 0;
        left: auto;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   ALARM & NOTIFICATION IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

#alarm-popup,
#api-sync-timeline-popup,
#network-traffic-popup {
    max-width: 90vw; /* Prevent off-screen on mobile */
}

@media (max-width: 639px) {
    #alarm-popup {
        width: 280px;
    }
}

/* ═══════════════════════════════════════════════════════════
   FLEXBOX IMPROVEMENTS FOR BETTER WRAPPING
   ═══════════════════════════════════════════════════════════ */

header > div:first-child {
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Hide scrollbar but keep functionality */
header > div:first-child::-webkit-scrollbar {
    display: none;
}

header > div:first-child {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ═══════════════════════════════════════════════════════════
   TEXT & ICON SIZE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════ */

/* Smaller text on mobile */
@media (max-width: 639px) {
    #app-header-title {
        font-size: 0.875rem; /* 14px */
    }

    #header-username {
        font-size: 0.75rem; /* 12px */
    }

    /* Smaller badges */
    .text-xs {
        font-size: 0.625rem !important; /* 10px */
    }
}

/* ═══════════════════════════════════════════════════════════
   UTILITY: RESPONSIVE VISIBILITY HELPERS
   ═══════════════════════════════════════════════════════════ */

.mobile-only {
    display: block;
}

@media (min-width: 640px) {
    .mobile-only {
        display: none !important;
    }
}

.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   FIX: PREVENT HEADER OVERFLOW
   ═══════════════════════════════════════════════════════════ */

header * {
    flex-shrink: 1; /* Allow shrinking */
    min-width: 0; /* Enable proper truncation */
}

header button,
header img,
#status-led {
    flex-shrink: 0; /* Don't shrink buttons/icons */
}