/* Header Fix CSS - Fixes height and dropdown issues */

/* Ensure header has fixed height */
nav.fixed {
    height: 64px; /* Fixed header height */
    max-height: 64px;
    overflow: visible; /* Allow dropdowns to show */
}

/* Main content positioning - start right after header */
#main-content > div {
    padding-top: 64px; /* Header height */
}

/* Mobile adjustments - no side padding */
@media (max-width: 640px) {
    #main-content > div {
        padding-top: 64px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Fix user dropdown positioning and prevent height expansion */
#userDropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 12rem;
    max-height: 400px;
    overflow-y: auto;
}

/* Company and Financial Year dropdowns */
#companyDropdownMenu,
#financialYearDropdownMenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

/* Prevent header content from expanding height */
.flex.items-center.justify-between {
    height: 64px;
    max-height: 64px;
}

/* Notification container positioning */
#headerNotificationContainer {
    position: fixed;
    top: 80px; /* Below header */
    right: 1rem;
    z-index: 1001;
    max-width: 24rem;
}

/* User profile button consistent size */
#userMenuToggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Profile icon inner container - ensure consistent size */
#userMenuToggle > div {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
}

/* Company and financial year buttons consistent size */
#companyDropdownButton,
#financialYearDropdownButton {
    min-height: 40px;
    max-height: 40px;
}

/* Prevent text overflow in dropdowns */
.company-option,
.financial-year-option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Smooth transitions for dropdowns */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Hide dropdown initially */
.opacity-0 {
    opacity: 0;
}

.invisible {
    visibility: hidden;
}

.scale-95 {
    transform: scale(0.95);
}

/* Show dropdown */
.opacity-100 {
    opacity: 1;
}

.visible {
    visibility: visible;
}

.scale-100 {
    transform: scale(1);
}

/* Ensure dropdowns start in closed state */
#userDropdown,
#companyDropdownMenu,
#financialYearDropdownMenu {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
}

/* Force initial state for user dropdown */
#userDropdown:not(.opacity-100):not(.visible):not(.scale-100) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.95) !important;
}

/* Rotate chevron */
.rotate-180 {
    transform: rotate(180deg);
}