/* C:\laragon\www\SAQULTATEC\assets\css\auth.css */
body { margin: 0; font-family: 'Tajawal', 'Cairo', system-ui, sans-serif; background-color: var(--bg-base); color: var(--text-primary); }

.bg-student {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.1) 0%, var(--bg-base) 60%),
                radial-gradient(circle at bottom left, var(--bg-surface) 0%, var(--bg-base) 60%);
}
.bg-student::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+CiAgICA8cGF0aCBkPSJNMCAwbDYwIDYwbTAgLTYwbC02MCA2MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiLz4KPC9zdmc+');
}

.auth-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { 
    background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-color); border-radius: 24px; 
    padding: 50px 40px; width: 100%; max-width: 460px; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); 
}

.form-group { margin-bottom: 24px; position: relative; }
.form-group label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-primary); font-size: 1rem; font-weight: 700; }
.input-wrapper { position: relative; }
.input-wrapper i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); transition: 0.3s; }
.form-control { 
    width: 100%; padding: 14px 16px 14px 45px; background: rgba(0, 0, 0, 0.4); 
    border: 2px solid var(--border-color); border-radius: 12px; color: white; 
    font-family: inherit; font-size: 1rem; transition: 0.3s; box-sizing: border-box; 
}
.form-control:focus { border-color: var(--accent-primary); outline: none; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 15px rgba(99,102,241,0.2); }
.form-control:focus + i { color: var(--accent-primary); }

.btn-primary { 
    width: 100%; padding: 14px; background: var(--accent-primary); color: white; 
    border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 800; 
    cursor: pointer; transition: 0.3s; box-shadow: 0 10px 20px rgba(99,102,241,0.3); display: flex; justify-content: center; align-items: center; gap: 10px; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-3px); background: var(--accent-primary-hover); box-shadow: 0 15px 30px rgba(99,102,241,0.4); }

.auth-header { text-align: center; margin-bottom: 35px; }
.auth-header img { width: 180px; margin-bottom: 20px; filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); }
.auth-header h1 { margin: 0; font-size: 1.8rem; font-weight: 800; color: var(--accent-primary); }
.auth-header p { color: var(--text-muted); margin-top: 8px; font-size: 0.95rem; }

.auth-footer { text-align: center; margin-top: 30px; font-size: 0.95rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 20px; }
.auth-footer a { color: var(--accent-primary); font-weight: 700; text-decoration: none; transition: 0.3s; }
.auth-footer a:hover { color: var(--accent-primary-hover); text-shadow: 0 0 10px rgba(99,102,241,0.5); }

/* Error/Success Messages */
.alert { padding: 15px; border-radius: 10px; margin-bottom: 25px; display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; line-height: 1.5; }
.alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; }
.alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; }

@media (max-width: 576px) {
    .auth-card { padding: 35px 25px; }
    .auth-header h1 { font-size: 1.5rem; }
}



/* Fix for massive logo in login and register */
.logo-box img { max-width: 280px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 10px rgba(255,255,255,0.7)); }
@media (max-width: 768px) { .logo-box img { max-width: 150px; } }