/* VD-006 (AUDIT_2026-05-22 visual-design pass): page-scoped styles for
   Views/Account/Login.cshtml. Moved out of an embedded <style> block
   that hardcoded the brand gradient (#667eea / #764ba2) ~15 times.
   Now references the canonical --md-gradient-start / --md-gradient-end
   tokens from site.css :root so a future palette change touches one
   declaration instead of fifteen.

   The previous embedded block also re-implemented site.css's focus-ring
   logic with hardcoded purple values; that local override is removed
   because site.css's accent-color-aware focus (VD-009 fix) now does
   the right thing for every form across the app. */

body.auth-page {
    background: linear-gradient(135deg, var(--md-gradient-start) 0%, var(--md-gradient-end) 100%);
    min-height: 100vh;
}

.login-card {
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-illustration {
    /* Gradient overlay sits on top of the organist photo so the photo
       reads as atmospheric texture rather than a literal background. */
    background: linear-gradient(135deg, rgba(var(--md-gradient-start-rgb), 0.9) 0%, rgba(var(--md-gradient-end-rgb), 0.9) 100%),
                url('/images/organist-playing.jpg') center/cover;
    border-radius: 1rem 0 0 1rem;
    position: relative;
    overflow: hidden;
}

.login-illustration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

/* Left panel text — ensure white and legible */
.login-illustration h2,
.login-illustration h4,
.login-illustration p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.login-form {
    padding: 3rem;
}

.btn-login {
    background: linear-gradient(135deg, var(--md-gradient-start) 0%, var(--md-gradient-end) 100%);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s, opacity 0.3s;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(var(--md-gradient-start-rgb), 0.4);
}

/* Login icon container — matches brand gradient */
.login-icon-container {
    background: linear-gradient(135deg, var(--md-gradient-start) 0%, var(--md-gradient-end) 100%);
    width: 70px;
    height: 70px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(var(--md-gradient-start-rgb), 0.4);
}

/* Links — match brand gradient */
.link-gradient {
    color: var(--md-gradient-start);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.link-gradient:hover {
    color: var(--md-gradient-end);
}

/* Outline button — matches brand gradient */
.btn-outline-gradient {
    border: 2px solid var(--md-gradient-start);
    color: var(--md-gradient-start);
    background: transparent;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s, opacity 0.3s;
}

.btn-outline-gradient:hover {
    background: linear-gradient(135deg, var(--md-gradient-start) 0%, var(--md-gradient-end) 100%);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--md-gradient-start-rgb), 0.4);
}

/* Validation summary styling */
.validation-summary-errors {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-summary-errors li {
    display: flex;
    align-items: center;
}

.validation-summary-errors li::before {
    content: '\26A0\FE0F';   /* ⚠️ */
    margin-right: 0.5rem;
}

/* Prevent text wrapping on divider */
.divider-text {
    white-space: nowrap;
}

/* Passkey button styling — uses semantic success green since passkey
   is the stronger / recommended sign-in path, not the default brand
   purple (which marks the password path). */
.btn-passkey {
    background: transparent;
    border: 2px solid #198754;
    color: #198754;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s, opacity 0.3s;
    border-radius: 0.5rem;
}

.btn-passkey:hover {
    background: #198754;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4);
}

.btn-passkey:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.passkey-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
}

.passkey-divider::before,
.passkey-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.passkey-divider span {
    padding: 0 0.75rem;
    color: #6c757d;
    font-size: 0.875rem;
}

@media (max-width: 767px) {
    .login-illustration {
        border-radius: 1rem 1rem 0 0;
        min-height: 200px;
    }

    .login-form {
        padding: 2rem 1.5rem;
    }
}