/* 
 * Global Header Responsive Fixes
 * Ensures all headers are fully responsive across all device types
 * This file should be included on all pages
 */

/* ============================================
   BASE HEADER STYLES - All Pages
   ============================================ */

/* Ensure all headers respect viewport */
header,
.header {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
}

/* Header top container - consistent across all pages */
.header-top,
header > div:first-child {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    gap: 1rem;
}

/* Logo/Brand - responsive sizing */
.brand,
.logo,
.header-top .logo,
header .logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    max-width: 200px;
}

.brand img,
.logo img,
.header-top .logo img,
header .logo img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

/* ============================================
   MOBILE MENU TOGGLE - All Pages
   ============================================ */

.mobile-menu-toggle,
.menu-toggle-style6,
button[aria-label*="Toggle"],
button[aria-label*="Menu"] {
    flex-shrink: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    z-index: 1001 !important;
}

.mobile-menu-toggle svg,
.menu-toggle-style6 svg {
    width: 24px !important;
    height: 24px !important;
    color: inherit;
}

/* ============================================
   DESKTOP STYLES (769px and up)
   ============================================ */

@media (min-width: 769px) {
    /* Hide mobile menu toggle on desktop - maximum specificity */
    .mobile-menu-toggle,
    .menu-toggle-style6,
    button.mobile-menu-toggle,
    .header-top .mobile-menu-toggle,
    header .mobile-menu-toggle,
    .header .mobile-menu-toggle,
    button[class*="mobile-menu-toggle"],
    .mobile-menu-toggle[style] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    
    /* Show desktop navigation */
    .nav,
    nav,
    .desktop-nav {
        display: flex !important;
    }
    
    /* Header top - desktop spacing */
    .header-top,
    header > div:first-child {
        padding: 1rem 2rem;
    }
    
    /* Logo size - desktop */
    .brand img,
    .logo img {
        height: 50px;
        max-height: 50px;
    }
}

/* ============================================
   TABLET STYLES (481px - 768px)
   ============================================ */

@media (min-width: 481px) and (max-width: 768px) {
    .header-top,
    header > div:first-child {
        padding: 1rem 1.5rem;
    }
    
    .brand img,
    .logo img {
        height: 45px;
        max-height: 45px;
    }
    
    /* Show mobile menu on tablets */
    .mobile-menu-toggle,
    .menu-toggle-style6 {
        display: flex !important;
    }
    
    /* Hide desktop nav on tablets */
    .nav,
    nav:not(.mobile-nav):not(.nav-style6) {
        display: none !important;
    }
}

/* ============================================
   MOBILE STYLES (up to 480px)
   ============================================ */

@media (max-width: 480px) {
    /* Header top - mobile padding */
    .header-top,
    header > div:first-child {
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }
    
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
        order: 1 !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Style 6 hamburger - ABSOLUTE POSITIONING ON RIGHT */
    header.header-style6 .menu-toggle-style6,
    .header.header-style6 .menu-toggle-style6,
    button#menuToggleStyle6.menu-toggle-style6,
    .menu-toggle-style6 {
        display: flex !important;
        position: absolute !important;
        right: 1.5rem !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        order: initial !important;
        margin: 0 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        z-index: 1001 !important;
    }
    
    header.header-style6 .brand-style6,
    .header.header-style6 .brand-style6 {
        position: absolute !important;
        left: 1.5rem !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        order: initial !important;
        margin: 0 !important;
    }
    
    /* Style 6 dropdown - align with button */
    header.header-style6 .nav-style6,
    .header.header-style6 .nav-style6,
    .nav-style6 {
        right: 1.5rem !important;
        left: auto !important;
    }
    
    /* Logo - centered on mobile */
    .brand,
    .logo,
    .header-top .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 140px !important;
        z-index: 1 !important;
    }
    
    .brand img,
    .logo img,
    .header-top .logo img {
        max-width: 140px !important;
        height: 40px !important;
        max-height: 40px !important;
    }
    
    /* Hide desktop navigation on mobile */
    .nav,
    nav:not(.mobile-nav):not(.nav-style6):not(.mobile-admin-menu) {
        display: none !important;
    }
    
    /* Hide desktop user menu/buttons on mobile */
    .header-right,
    .user-menu,
    .desktop-logout,
    #desktopLogoutBtn {
        display: none !important;
    }
    
    /* Ensure header doesn't overflow */
    header,
    .header {
        overflow: visible !important;
    }
}

/* ============================================
   VERY SMALL DEVICES (up to 320px)
   ============================================ */

@media (max-width: 320px) {
    .header-top,
    header > div:first-child {
        padding: 0.5rem 0.75rem !important;
    }
    
    .brand img,
    .logo img,
    .header-top .logo img {
        max-width: 120px !important;
        height: 36px !important;
        max-height: 36px !important;
    }
    
    .mobile-menu-toggle,
    .menu-toggle-style6 {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0.375rem !important;
    }
    
    .mobile-menu-toggle svg,
    .menu-toggle-style6 svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ============================================
   HEADER GRID LAYOUTS (Admin Dashboard)
   ============================================ */

/* Admin dashboard uses grid layout */
.header-top[style*="grid"],
.header-top.grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    /* Admin dashboard - use flex layout on mobile, not grid */
    body:has(.header-top) .header-top,
    .header-top:not([class*="admin"]):not(.admin-header) {
        /* Allow admin dashboard inline styles to override */
    }
    
    .header-top[style*="grid"]:not([style*="flex"]),
    .header-top.grid:not([style*="flex"]) {
        grid-template-columns: 1fr auto !important;
        gap: 0.75rem !important;
    }
    
    .header-center {
        display: none !important;
    }
    
    .header-right {
        display: none !important;
    }
    
    .header-left {
        grid-column: 1 !important;
    }
    
    /* Only apply grid positioning if header is actually using grid */
    .header-top[style*="grid"] .mobile-menu-toggle,
    .header-top.grid .mobile-menu-toggle,
    .header-top[style*="grid"] .menu-toggle-style6,
    .header-top.grid .menu-toggle-style6 {
        grid-column: 2 !important;
        justify-self: flex-end !important;
    }
}

/* ============================================
   HEADER FLEX LAYOUTS (User/Practitioner Dashboards)
   ============================================ */

/* User and Practitioner dashboards use flex layout */
.header-top:not([style*="grid"]):not(.grid) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@media (max-width: 480px) {
    .header-top:not([style*="grid"]):not(.grid) {
        justify-content: space-between !important;
        position: relative !important;
    }
}

/* ============================================
   PREVENT HEADER OVERFLOW
   ============================================ */

/* Ensure no element in header causes horizontal scroll */
header *,
.header * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent text overflow in header */
header span,
header p,
header div,
.header span,
.header p,
.header div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Allow logo to be visible */
header .logo,
.header .logo,
header .brand,
.header .brand {
    overflow: visible;
}

/* ============================================
   STICKY HEADER FIXES
   ============================================ */

header[style*="sticky"],
.header[style*="sticky"],
header.sticky,
.header.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

/* ============================================
   ACCESSIBILITY - Touch Targets
   ============================================ */

/* Ensure all interactive elements in header meet minimum touch target size */
header button:not(.mobile-menu-toggle):not(.menu-toggle-style6),
.header button:not(.mobile-menu-toggle):not(.menu-toggle-style6),
header a,
.header a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mobile menu toggle - only show on mobile/tablet */
.mobile-menu-toggle,
.menu-toggle-style6 {
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Desktop: Hide mobile menu toggle (override accessibility rule) */
@media (min-width: 769px) {
    .mobile-menu-toggle,
    .menu-toggle-style6,
    .mobile-menu-toggle.desktop-hidden,
    .mobile-menu-toggle[style],
    .menu-toggle-style6[style] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    header,
    .header {
        position: relative !important;
        page-break-inside: avoid;
    }
    
    .mobile-menu-toggle,
    .menu-toggle-style6,
    .nav,
    nav {
        display: none !important;
    }
}


    .menu-toggle-style6[style] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    header,
    .header {
        position: relative !important;
        page-break-inside: avoid;
    }
    
    .mobile-menu-toggle,
    .menu-toggle-style6,
    .nav,
    nav {
        display: none !important;
    }
}