/* File Path: css/components/auth.css */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-body); /* USE VAR */
    padding: var(--spacing-md);
}

.auth-container {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card); /* USE VAR */
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color); /* USE VAR */
}

.auth-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.auth-header h1 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.auth-header p {
    color: var(--text-secondary); /* USE VAR */
}

/* Auth Form */
.auth-form { margin-bottom: var(--spacing-lg); }
.form-group { margin-bottom: var(--spacing-md); }

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary); /* USE VAR */
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color); /* USE VAR */
    border-radius: var(--border-radius-sm);
    transition: var(--transition-base);
    background-color: var(--bg-body); /* USE VAR */
    color: var(--text-primary); /* USE VAR */
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Password Input Group */
.password-input-group { position: relative; }

.password-toggle {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary); /* USE VAR */
    cursor: pointer;
    padding: var(--spacing-xs);
}

/* Remember Me Checkbox */
.remember-me { display: flex; align-items: center; gap: var(--spacing-xs); }
.remember-me input[type="checkbox"] { width: 16px; height: 16px; }

/* Auth Links */
.auth-links { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.auth-links .link { color: var(--primary-color); text-decoration: none; transition: var(--transition-base); }
.auth-links .link:hover { text-decoration: underline; }
.auth-links .divider { color: var(--border-color); } /* USE VAR */

/* Auth Footer */
.auth-footer { text-align: center; border-top: 1px solid var(--border-color); padding-top: var(--spacing-md); margin-top: var(--spacing-xl); } /* USE VAR */
.auth-footer a { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

/* Alert Styles */
.alert { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-md); position: relative; }
.alert-danger { background-color: #fee2e2; border: 1px solid #fecaca; color: #dc2626; }
.alert-close { position: absolute; right: var(--spacing-sm); top: 50%; transform: translateY(-50%); background: none; border: none; color: inherit; cursor: pointer; padding: var(--spacing-xs); }

/* Button Styles */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); font-weight: 500; transition: var(--transition-base); cursor: pointer; border: none; }
.btn-primary { background-color: var(--primary-color); color: var(--text-on-primary); } /* USE VAR */
.btn-primary:hover { background-color: var(--primary-dark); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Responsive Design */
@media (max-width: 480px) {
    .auth-container { padding: var(--spacing-lg); }
    .auth-links { flex-direction: column; gap: var(--spacing-xs); }
    .auth-links .divider { display: none; }
}