/**
 * Login/Signin Page Component
 *
 * Comprehensive styles for login and signup pages.
 * Includes split-screen layout, forms, features, and responsive behavior.
 *
 * @module pages/login
 */

/* ==================== Login Section Container ==================== */

.login-section {
    display: flex;
    flex: 1;
}

.login-grid {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* ==================== Left Panel ==================== */

.login-left {
    width: 50%;
    background: #f5f7fa;
    border-right: 1px solid var(--gray-100);
    padding: var(--spacing-sm) 4rem var(--spacing-lg) 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-left h1 {
    font-size: clamp(3rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-left p {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    margin-bottom: var(--spacing-lg);
    color: var(--gray-800);
}

/* ==================== Right Panel ==================== */

.login-right {
    width: 50%;
    background: var(--white);
    padding: var(--spacing-lg) 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==================== Login Header ==================== */

.login-header {
    position: relative;
    padding-bottom: 50px;
}

.login-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--gray-800);
    font-size: 1rem;
}

/* ==================== Signin Features ==================== */

.signin-features {
    display: grid;
    gap: var(--spacing-md);
    max-width: 90%;
}

.signin-feature-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.signin-feature-icon {
    width: 48px;
    height: 48px;
    background: var(--red);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}
.signin-feature-icon svg { width: 24px; height: 24px; }

.signin-feature-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}

.signin-feature-content p {
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--gray-800);
}

.signin-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--gray-800);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
}

/* ==================== Signin Stats ==================== */

.signin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(204, 0, 0, 0.03);
    border-radius: 12px;
    text-align: center;
}

/* ==================== Signin Quote ==================== */

.signin-quote {
    padding: var(--spacing-md);
    border-left: 3px solid var(--red);
}

.signin-quote p {
    font-style: italic;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.signin-quote cite {
    color: var(--gray-800);
    font-size: 0.875rem;
}

/* ==================== Signin Checklist ==================== */

.checklist-title {
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--gray-900);
}

.signin-checklist ul {
    list-style: none;
    padding: 0;
}

.signin-checklist li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--gray-800);
}

.signin-checklist li::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 6px;
    margin-right: 8px;
    border-left: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(-45deg) translateY(-2px);
}

/* ==================== Signin Teaser ==================== */

.signin-teaser {
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    border-radius: 12px;
    border: 1px solid var(--gray-100);
}

.teaser-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--red);
    color: var(--pure-white);
    border-radius: 100px;
    font-size: 0.75rem;
    margin-bottom: var(--spacing-sm);
}

.signin-teaser h4 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

.signin-teaser p {
    font-size: 0.875rem;
    color: var(--gray-800);
    margin: 0;
}

/* ==================== Responsive Adjustments ==================== */

@media (max-width: 1024px) {
    .login-grid {
        flex-direction: column;
    }

    .login-left, .login-right {
        width: 100%;
        padding: var(--spacing-lg) 3rem;
    }

    .login-right {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .login-left {
        text-align: center;
        align-items: center;
    }

    .features-list {
        max-width: 480px;
        margin: 0 auto;
    }

    .signin-features {
        display: none;
    }

    .login-left p {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .login-left, .login-right {
        padding: var(--spacing-md) var(--spacing-md);
    }
}

/* ==================== Passkey Sign In ==================== */

/* Hero card — passkey presented as the primary, recommended path */
.passkey-hero {
    background: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    padding: var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 4px);
    margin-bottom: var(--spacing-md);
    position: relative;
    overflow: hidden;
}
.passkey-hero::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 20% 20%, rgba(204, 0, 0, 0.06), transparent 55%);
    pointer-events: none;
}
.passkey-hero-head {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: var(--spacing-sm);
    position: relative;
}
.passkey-hero-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--red) 0%, #ff4d4d 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.25);
}
.passkey-hero-icon svg { width: 22px; height: 22px; stroke: currentColor; }
.passkey-hero-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.passkey-hero-copy strong { font-size: 0.9375rem; color: var(--gray-900); font-weight: 600; }
.passkey-hero-copy span { font-size: 0.8125rem; color: var(--gray-800); }

/* Primary passkey button — prominent, gradient fill */
.passkey-button-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, var(--red) 0%, #e60000 100%);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(204, 0, 0, 0.25);
}
.passkey-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(204, 0, 0, 0.35);
}
.passkey-button-primary:active { transform: translateY(0); }
.passkey-button-primary:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}
.passkey-button-primary svg { width: 20px; height: 20px; stroke: currentColor; }
.passkey-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.22);
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: auto;
}

/* Inline hint under the username field — signals passkey-autofill support */
.passkey-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--gray-800);
    font-size: 0.75rem;
    line-height: 1.3;
}
.passkey-hint svg {
    width: 14px;
    height: 14px;
    stroke: var(--red);
    flex-shrink: 0;
    opacity: 0.8;
}

.passkey-divider {
    display: flex;
    align-items: center;
    margin: var(--spacing-sm) 0;
}

.passkey-divider::before,
.passkey-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-100);
}

.passkey-divider span {
    padding: 0 var(--spacing-md);
    color: var(--gray-800);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.passkey-button {
    width: 100%;
    padding: 0.875rem;
    background: var(--white);
    color: var(--red);
    border: 1.5px solid var(--red);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
    margin-bottom: var(--spacing-md);
}

.passkey-button:hover {
    background: var(--gray-50);
}

.passkey-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--gray-200);
    color: var(--gray-800);
    background: var(--gray-50);
}

.passkey-button:disabled:hover {
    background: var(--gray-50);
}

.passkey-icon {
    display: flex;
    align-items: center;
}

.passkey-button svg {
    stroke: var(--red);
}

.passkey-button:disabled svg {
    stroke: var(--gray-800);
}

/* ==================== Dark Mode Support ==================== */

@media (prefers-color-scheme: dark) {
    .login-left {
        background: var(--gray-50);
        border-right-color: var(--gray-200);
    }

    .passkey-button {
        background: transparent;
        border-color: var(--red);
        color: var(--red);
    }

    .passkey-button:hover {
        background: rgba(204, 0, 0, 0.1);
    }

    .passkey-divider span {
        color: var(--gray-600);
    }

    .passkey-divider::before,
    .passkey-divider::after {
        background: var(--gray-200);
    }

    .passkey-hero {
        background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
        border-color: var(--gray-200);
    }
    .passkey-hero::before {
        background: radial-gradient(circle at 20% 20%, rgba(204, 0, 0, 0.12), transparent 55%);
    }
    .passkey-hero-copy strong { color: var(--gray-900); }
    .passkey-hero-copy span { color: var(--gray-700); }
    .passkey-hint { color: var(--gray-700); }
}

/* Compact the hero on narrow screens */
@media (max-width: 480px) {
    .passkey-hero { padding: var(--spacing-sm); }
    .passkey-hero-icon { width: 36px; height: 36px; }
    .passkey-hero-icon svg { width: 18px; height: 18px; }
    .passkey-hero-copy strong { font-size: 0.875rem; }
    .passkey-hero-copy span { font-size: 0.75rem; }
    .passkey-badge { display: none; }
    .passkey-button-primary { padding: 0.75rem; font-size: 0.9375rem; }
}

/* ==================== UniAuth / Federated SSO ==================== */

/* ---- Official UniAuth sign-in button ----
   Vendored from https://uniauth.id/brand/oauth/uniauth-buttons.css so the brand
   mark (shield), colours, sizing and hover match the kit exactly — without a
   render-blocking request to the IdP just for styling. Markup:
     <a class="uniauth-btn uniauth-btn-dark uniauth-btn-lg uniauth-btn-block">
       <span class="uniauth-btn-icon"></span> Sign in with UniAuth
     </a>
   Light theme uses the brand-default dark button; the dark-theme block below
   swaps to the brand's light-variant palette so it stays legible on the dark
   sign-in card. Brand colours are intentionally literal (not CNF tokens). */
.uniauth-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    height: 44px;
    padding: 0 16px 0 12px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.uniauth-btn:focus-visible {
    outline: 2px solid #0a0a0a;
    outline-offset: 2px;
}
.uniauth-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    margin-right: 8px;
}
.uniauth-btn-dark {
    background-color: #0a0a0a;
    border-color: #0a0a0a;
    color: #fafafa;
}
.uniauth-btn-dark .uniauth-btn-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.uniauth-btn-dark:hover {
    background-color: #262626;
    border-color: #262626;
}
.uniauth-btn-dark:active {
    background-color: #171717;
}
.uniauth-btn-dark:focus-visible {
    outline-color: #fafafa;
}
.uniauth-btn-block {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}
.uniauth-btn-lg {
    height: 52px;
    font-size: 16px;
    border-radius: 8px;
    padding-right: 20px;
}
.uniauth-btn-lg .uniauth-btn-icon {
    width: 32px;
    height: 32px;
    background-size: 24px 24px;
    margin-right: 10px;
}

/* Dark theme — adopt the brand's light-variant palette (a near-black button
   would disappear against the dark card). */
@media (prefers-color-scheme: dark) {
    .uniauth-btn-dark {
        background-color: #fafafa;
        border-color: #e5e5e5;
        color: #0a0a0a;
    }
    .uniauth-btn-dark .uniauth-btn-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .uniauth-btn-dark:hover {
        background-color: #f5f5f5;
        border-color: #d4d4d4;
    }
    .uniauth-btn-dark:active {
        background-color: #e5e5e5;
    }
    .uniauth-btn-dark:focus-visible {
        outline-color: #0a0a0a;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uniauth-btn { transition: none; }
}

/* ==================== Welcome / onboarding (welcome.php) ==================== */
.welcome-section {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-sm);
}
.welcome-card {
    width: 100%;
    max-width: 440px;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-lg);
}
.welcome-head { text-align: center; margin-bottom: var(--spacing-sm); }
.welcome-badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--red) 0%, #e60000 100%);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(204, 0, 0, 0.28);
}
.welcome-badge svg { width: 26px; height: 26px; stroke: currentColor; }
.welcome-head h1 { font-size: 1.5rem; margin: 0 0 6px; color: var(--gray-900); }
.welcome-head p { color: var(--gray-700); font-size: 0.9375rem; line-height: 1.5; margin: 0; }

.welcome-alert { padding: 10px 14px; border-radius: 10px; font-size: 0.875rem; margin-bottom: var(--spacing-sm); }
.welcome-alert-error { background: #fdecec; color: #b42318; border: 1px solid #f5c6c6; }
.welcome-alert-success { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }

.welcome-option {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.welcome-option-copy { display: flex; flex-direction: column; gap: 3px; }
.welcome-option-copy strong { font-size: 0.9375rem; color: var(--gray-900); }
.welcome-option-copy span { font-size: 0.8125rem; color: var(--gray-700); line-height: 1.4; }
.welcome-passkey-btn { width: 100%; }
.welcome-option-done {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}
.welcome-option-done .welcome-option-copy strong { color: #05603a; }
.welcome-option-done .welcome-option-copy span { color: #067647; }

.welcome-divider { display: flex; align-items: center; margin: 0 0 var(--spacing-sm); }
.welcome-divider::before, .welcome-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-100); }
.welcome-divider span {
    padding: 0 var(--spacing-md);
    color: var(--gray-700);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.welcome-form .form-field { margin-bottom: var(--spacing-sm); }
.welcome-optional { color: var(--gray-600); font-weight: 400; font-size: 0.8125rem; }

.welcome-skip {
    display: block;
    text-align: center;
    margin-top: var(--spacing-sm);
    color: var(--gray-700);
    font-size: 0.875rem;
    text-decoration: none;
}
.welcome-skip:hover { color: var(--gray-900); text-decoration: underline; }

@media (prefers-color-scheme: dark) {
    .welcome-card { border-color: var(--gray-200); }
    .welcome-option { background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%); border-color: var(--gray-200); }
    .welcome-head p, .welcome-option-copy span, .welcome-divider span { color: var(--gray-700); }
}

@media (max-width: 480px) {
    .welcome-card { padding: var(--spacing-sm); border-radius: 14px; }
    .welcome-head h1 { font-size: 1.3rem; }
}