/* User Auth Container Styles */
.user-auth-container {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1002; /* Ensure it's above other elements */
}

.user-icon-wrapper {
    position: relative;
    cursor: pointer;
}

/* Icon Styling */
.user-icon {
    width: 45px;
    height: 45px;
    fill: #fff;
    stroke: #fff;
    stroke-width: 0.5;
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
    filter: brightness(0) invert(1);
}

/* Icon states */
.user-icon:hover {
    transform: scale(1.05);
}

/* Different styling for logged in users */
.user-logged-in .user-icon {
    fill: #4CAF50; /* Green color for logged in users */
}

/* Dropdown Menu Styling */
.auth-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1003;
}

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

/* Triangle indicator */
.auth-dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}

/* User Info - when logged in */
.user-info {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.user-name {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    display: block;
    word-break: break-word;
}

/* Auth Actions */
.auth-actions {
    display: flex;
    flex-direction: column;
}

.auth-action-link {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-size: 14px;
    text-align: left;
}

.auth-action-link:hover {
    background-color: #f5f5f5;
    color: #000;
}

.login-link {
    display: flex;
    align-items: center;
}

.login-link::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%234285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="%2334A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="%23FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="%23EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg>');
    background-size: contain;
}

.logout-link {
    color: #E53935; /* Red color for logout */
}

.logout-link:hover {
    background-color: #ffebee; /* Light red background on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-auth-container {
        top: 15px;
        right: 15px;
    }
    
    .user-icon {
        width: 28px;
        height: 28px;
    }
    
    .auth-dropdown {
        width: 200px;
    }
}