/* shared/header.css - Header-specific styles for all pages */

/* Profile section - shows on both desktop and mobile when logged in */
#navProfile {
    display: none;
}

#navProfile.show {
    display: block !important;
}

/* Desktop auth buttons - show only above 900px when not logged in */
@media screen and (min-width: 900px) {
    #navAuthButtons {
        display: flex !important;
    }
    /* Hide mobile auth button above 900px */
    .mobile-auth-container {
        display: none !important;
    }
}

/* Mobile specific styles - Updated to 900px breakpoint */
@media screen and (max-width: 899px) {
    /* Force hide desktop auth buttons on mobile screens */
    #navAuthButtons {
        display: none !important;
    }
    /* Show mobile auth button below 900px when logged out */
    .mobile-auth-container {
        display: block;
    }
    /* Fix mobile dropdown alignment */
    #mobileProfileDropdown a,
    #mobileProfileDropdown button {
        text-align: left !important;
    }
    #navProfile { 
        margin-left: 10px !important; 
    }
    #navProfile .relative.ml-3 { 
        margin-left: 5px; 
        margin-right: 5px; 
    }
}

/* MODAL CONTAINER ROUNDED CORNERS - Fixed to include all modal types */
#authModal .w-full.max-w-md,
#deleteModal .w-full.max-w-lg,
#signin-required-modal .w-full.max-w-md,
#new-plan-modal .w-full.max-w-md,
#save-auth-modal .w-full.max-w-md,
#load-plan-modal .w-full.max-w-md,
#plans-modal .w-full.max-w-md,
#plan-mismatch-warning .w-full.max-w-md,
#save-error-modal .w-full.max-w-md {
    border-radius: 8px;
    overflow: hidden;
}

/* Mid-size screen header fixes (900px to 1024px) */
@media screen and (min-width: 900px) and (max-width: 1024px) {
    .mx-auto.max-w-7xl {
        padding-left: 16px;
        padding-right: 16px;
    }
    .hidden.lg\:ml-6.lg\:block .flex.space-x-4 {
        gap: 12px;
    }
    .hidden.lg\:ml-6.lg\:block .flex.space-x-4 a {
        padding: 8px 12px;
        font-size: 14px;
    }
    #navAuthButtons {
        margin-left: 12px;
        gap: 8px;
    }
    #navAuthButtons button {
        padding: 8px 12px;
        font-size: 14px;
    }
    #navProfile {
        margin-left: 12px;
    }
    .text-white.text-lg.lg\:text-xl {
        font-size: 18px;
    }
}

/* Force override any conflicting Tailwind classes */
#navAuthButtons.lg\:flex {
    display: flex !important;
}

@media screen and (max-width: 899px) {
    #navAuthButtons.lg\:flex {
        display: none !important;
    }
}