/*
  LogIn.css — FLUID SCOPED VERSION
  ══════════════════════════════════════════════════════════════════
  Fluid architecture applied: Replaced rigid pixels and transform 
  scales with clamp() so the auth button scales natively on phones
  without losing crispness or breaking click hitboxes.
  ══════════════════════════════════════════════════════════════════
*/

.auth-widget-container {
    position: fixed;
    
    /* 1. MATH FIX: Automatically perfectly centers inside whatever your navbar height is set to! */
    /* (Checks for Homepage variable, then Tracker variable, then falls back to 48px) */
    top: calc(var(--navbar-height, var(--navbar-h, 48px)) / 2) !important;
    
    right: clamp(16px, 4vw, 40px);
    transform: translateY(-50%);
    
    /* 2. Z-INDEX FIX: The undisputed king of the stacking order */
    z-index: 2147483647 !important; 
    
    font-family: 'Rajdhani', sans-serif;
}

/* Base button styles used for both Login and Username */
.auth-btn {
    display: inline-flex;
    align-items: center;
    /* Reduced the gap between icon and text slightly */
    gap: clamp(4px, 0.8vw, 6px);
    
    /* THE FIX: Shrunk the top/bottom and left/right padding */
    padding: clamp(6px, 0.8vh, 8px) clamp(10px, 1.5vw, 14px);
    
    background: rgba(0, 229, 192, 0.1);
    border: 1px solid rgba(0, 229, 192, 0.4);
    border-radius: 4px;
    color: #00e5c0;
    
    /* THE FIX: Dropped the font size slightly so it fits the smaller button perfectly */
    font-size: clamp(9px, 1vw, 11px);
    
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.auth-btn:hover {
    background: #00e5c0;
    color: #07080b;
    box-shadow: 0 0 15px rgba(0, 229, 192, 0.4);
}

/* Dropdown Menu Styles */
.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    /* FLUID FIX: Margin and width scale to ensure the menu fits mobile screens safely */
    margin-top: clamp(8px, 1.5vh, 10px);
    min-width: clamp(140px, 15vw, 160px);
    
    background: rgba(7, 8, 11, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: none; /* Hidden by default */
    flex-direction: column;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    overflow: hidden;
}

.user-dropdown-menu.show {
    display: flex;
}

.user-dropdown-item {
    /* FLUID FIX: Padding and font size adjust gracefully */
    padding: clamp(10px, 1.5vh, 12px) clamp(12px, 2vw, 16px);
    font-size: clamp(9px, 1vw, 11px);
    
    color: #e4e0d8;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.user-dropdown-item:last-child {
    border-bottom: none;
}

.user-dropdown-item:hover {
    background: rgba(0, 229, 192, 0.1);
    color: #00e5c0;
    /* FLUID FIX: Hover indent scales correctly */
    padding-left: clamp(16px, 2.5vw, 20px); 
}

.user-dropdown-item.danger:hover {
    background: rgba(224, 90, 90, 0.1);
    color: #e05a5a;
}

/* The old @media (max-width: 480px) transform scale hack has been safely deleted! */