/* Navigation Styles */
.navbar {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--medium-gray);
    padding: var(--space-md) 0;
}

.navbar-brand {
    font-weight: var(--font-bold);
    font-size: var(--h5-size);
    color: var(--charcoal) !important;
}

.nav-link {
    color: var(--charcoal) !important;
    font-weight: var(--font-medium);
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

    .nav-link:hover {
        background-color: var(--carolina-blue);
        color: var(--charcoal) !important;
    }

    .nav-link.active {
        background-color: var(--lapis-lazuli);
        color: var(--white) !important;
    }

    .nav-link.disabled {
        color: var(--dark-gray) !important;
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
        background-color: transparent;
    }

.navbar-toggler {
    border: none;
    padding: var(--space-xs);
}

    .navbar-toggler:focus {
        box-shadow: none;
        outline: 2px solid var(--lapis-lazuli);
        outline-offset: 2px;
    }

@media (max-width: 768px) {
    .navbar-brand {
        font-size: var(--h6-size);
    }

    .navbar-collapse {
        margin-top: var(--space-md);
    }

    .nav-link {
        padding: var(--space-md) !important;
        margin-bottom: var(--space-xs);
    }
}


/* User menu (shared for Admin, Client, and Member) */
.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
}

    .user-menu:hover {
        background-color: var(--light-gray);
    }

.navbar .user-menu {
    margin-left: var(--space-md);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--carolina-blue);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    color: var(--charcoal);
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.user-name {
    font-size: var(--body-small);
    font-weight: var(--font-medium);
    color: var(--charcoal);
}

.user-role {
    font-size: var(--body-xs);
    color: var(--dark-gray);
}

/* User menu trigger button */
.user-menu-trigger {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

    .user-menu-trigger:hover {
        background-color: var(--light-gray);
    }

.user-menu-arrow {
    transition: transform var(--transition-normal);
}

.user-menu[aria-expanded="true"] .user-menu-arrow {
    transform: rotate(180deg);
}

/* User dropdown panel */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-sm);
    background: var(--white);
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    z-index: 1000;
}

    .user-dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* Dropdown header with user info */
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: #f8f9fa;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    background-color: var(--carolina-blue);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    color: var(--charcoal);
    font-size: var(--body-large);
}

.user-details {
    flex: 1;
}

    .user-details .user-name {
        font-size: var(--body-medium);
        font-weight: var(--font-semibold);
        color: var(--charcoal);
        margin-bottom: 2px;
    }

    .user-details .user-role {
        font-size: var(--body-small);
        color: var(--dark-gray);
    }

/* Dropdown menu items */
.user-dropdown-menu {
    padding: var(--space-sm);
}

.user-dropdown-divider {
    height: 1px;
    background-color: var(--medium-gray);
    margin: var(--space-sm) 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--charcoal);
    text-decoration: none;
    font-size: var(--body-small);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal);
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--light-gray);
        color: var(--charcoal);
        text-decoration: none;
    }

    .dropdown-item.disabled {
        color: var(--dark-gray) !important;
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
        background: transparent;
    }

    .dropdown-item svg {
        flex-shrink: 0;
    }

.dropdown-form {
    margin: 0;
}

.logout-item {
    color: var(--danger-color, #dc3545);
}

    .logout-item:hover {
        background-color: var(--danger-light, #f8d7da);
        color: var(--danger-color, #dc3545);
    }

/* Positioning adjustments for different layouts */
.navbar .user-dropdown {
    right: 0;
    left: auto;
}

.admin-header .user-dropdown {
    right: 0;
    left: auto;
}

/* Auth buttons for non-authenticated users */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--body-small);
    font-weight: var(--font-medium);
    transition: all var(--transition-normal);
    border: 1px solid transparent;
}

.auth-btn-secondary {
    color: var(--charcoal);
    background-color: transparent;
    border-color: var(--medium-gray);
}

    .auth-btn-secondary:hover {
        background-color: var(--light-gray);
        color: var(--charcoal);
        text-decoration: none;
    }

.auth-btn-cta {
    color: var(--white);
    background-color: var(--lapis-lazuli);
}

    .auth-btn-cta:hover {
        background-color: var(--charcoal);
        color: var(--white);
        text-decoration: none;
    }