/* Login Page Effects and Styling
   3D Hologram login page with glassmorphism and particle effects
*/

:root {
    --login-btn-primary-start: 102, 126, 234;    /* #667eea */
    --login-btn-primary-end: 118, 75, 162;      /* #764ba2 */
    --login-btn-glass-bg: 255, 255, 255;         /* White for glass effects */
    --login-btn-glass-border: 255, 255, 255;     /* White for glass borders */
    --login-form-bg: 0, 0, 0;                    /* Black for form background */
    --login-input-bg: 255, 255, 255;             /* White for input backgrounds */
    --login-text-primary: 255, 255, 255;         /* White for primary text */
    --login-link-primary: 37, 99, 235;           /* Primary link color */
    --login-link-hover: 59, 130, 246;            /* Link hover color */
}

body {
    margin: 0;
    overflow: hidden;
    background-color: rgb(var(--bg-page));
    font-family: 'Inter', sans-serif;
    height: 100vh;
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
}

#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

#ui-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
}

#login-form-container {
    position: fixed;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    z-index: 15;
    background: rgba(6, 24, 59, 0);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--login-btn-glass-border), 0.1);
    padding: 25px 22px 22px 22px !important;
    margin: 5px !important;
    min-width: 275px;
    max-width: 350px;
}

#login-form-container h1 {
    color: rgb(var(--login-text-primary));
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

#login-form-container .form-group {
    margin-bottom: 0.75rem;
}

#login-form-container label {
    color: rgba(var(--login-text-primary), 0.9);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: block;
    background: transparent !important;
}

#login-form-container input[type="text"],
#login-form-container input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(var(--login-input-bg), 0.1);
    border: 1px solid rgba(var(--login-input-bg), 0.2);
    color: rgb(var(--login-text-primary));
    font-size: 1.2rem;
    min-height: 44px;
    box-sizing: border-box;
}

#login-form-container input[type="text"]:focus,
#login-form-container input[type="password"]:focus {
    outline: none;
    border-color: rgba(var(--login-input-bg), 0.5);
    background: rgba(var(--login-input-bg), 0.15);
}

#login-form-container .btn-primary {
    width: 100%;
    padding: 0.75rem .5rem;
    background: linear-gradient(135deg, rgb(var(--login-btn-primary-start)) 0%, rgb(var(--login-btn-primary-end)) 100%);
    border: none;
    border-radius: 8px;
    color: white;
     font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    min-height: 44px;
    box-sizing: border-box;
}

#login-form-container .btn-primary:hover {
    transform: translateY(-2px);
}

/* Checkbox accessibility - minimum 44px touch targets for WCAG compliance */
#login-form-container input[type="checkbox"] {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    box-sizing: border-box;
}

#login-form-container .flex.items-center input[type="checkbox"] {
    margin-right: 0.75rem;
}

/* Login page link styling using custom properties */
#login-form-container .login-link {
    color: rgb(var(--login-link-primary));
    transition: color 0.3s ease;
}

#login-form-container .login-link:hover {
    color: rgb(var(--login-link-hover));
}

/* Forgot password link */
.forgot-password-link {
    margin-top: 8px;
    text-align: right;
}

.forgot-password-link a {
    font-size: 14px;
    color: rgba(var(--login-link-primary), 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

.forgot-password-link a:hover {
    color: rgb(var(--login-link-hover));
    text-decoration: underline;
}

#effect-trigger {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: rgba(var(--login-btn-glass-bg), 0.1);
    border: 1px solid rgba(var(--login-btn-glass-border), 0.3);
    border-radius:8px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s, color 0.3s, transform 0.2s;
}

#effect-trigger:hover {
    background: rgba(var(--login-btn-glass-bg), 0.2);
    border-color: rgba(var(--login-btn-glass-border), 0.5);
}

#effect-trigger:active {
    transform: scale(0.95);
}

#effect-info {
    margin-top: 10px;
    color: rgba(var(--login-text-primary), 0.8);
    font-size: 14px;
}

#return-to-index {
    display: none;
}