/* Main Header (Offset by Sidebar) */
.main-header {
    height: var(--header-height);
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    z-index: 1020;
    box-shadow: var(--shadow-sm);
    transition: left 0.3s ease, width 0.3s ease;
    overflow: visible !important;
}

/* Profile / User dropdown tweaks */
.main-header .dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius-md);
}

.main-header .avatar-circle {
    width: 32px;
    height: 32px;
    font-weight: 600;
}

/* Mobile Header Adjustments */
@media (max-width: 768px) {
    .main-header {
        left: 0;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Dropdown Animation */
.dropdown-animate {
    animation: dropdownCurtain 0.3s ease-out forwards;
    transform-origin: top right;
}

@keyframes dropdownCurtain {
    from {
        opacity: 0;
        transform: scaleY(0);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Force Dropdown Position & Visibility */
.header-profile-dropdown {
    margin-top: 20px !important;
    position: absolute !important;
    z-index: 11000 !important;
    /* Ensure it's on top of everything */
}

.main-header .container-fluid {
    overflow: visible !important;
}