/**
 * GRIP — MFA stylesheet (taak 20260508-003 — Nova)
 *
 * Dekt vier UI-onderdelen:
 *   1. Pre-enforcement-banner (oranje warning, dringend-variant met rode rand)
 *   2. Setup-pagina (3-stappen-flow, QR + secret + recovery-codes-grid)
 *   3. Login-stap-2 (TOTP-form, recovery-mode)
 *   4. Account-instellingen-blok (status-rij, knoppen, modal-content)
 *   5. @media print voor recovery-codes-PDF (window.print()-aanpak)
 */

/* ============================================
   1. PRE-ENFORCEMENT-BANNER
   ============================================ */

#mfaBannerHost {
    /* Container die aan top-of-page-content geprepend wordt door
       mfa-banner.js. Niet permanent in DOM op login-screen. */
}

.mfa-banner {
    background: #fff7ed;            /* warning-tint, achtergrond softer dan alert-warning */
    color: #7c2d12;
    border: 1px solid #fdba74;
    border-radius: var(--border-radius-sm, 10px);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.08);
}

.mfa-banner .mfa-banner-icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: #ea580c;
    line-height: 1;
}

.mfa-banner .mfa-banner-body {
    flex: 1 1 240px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.mfa-banner .mfa-banner-body strong {
    color: #7c2d12;
}

.mfa-banner .mfa-banner-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mfa-banner .btn-mfa-banner {
    background: #ea580c;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--transition-fast, 0.2s);
}

.mfa-banner .btn-mfa-banner:hover {
    background: #c2410c;
}

.mfa-banner .btn-mfa-banner-dismiss {
    background: transparent;
    color: #7c2d12;
    border: 0;
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.6;
}

.mfa-banner .btn-mfa-banner-dismiss:hover {
    opacity: 1;
}

/* Dringend-variant: laatste 3 dagen vóór enforcement.
   Behoud oranje-basis maar voeg rode left-border toe + zwaarder icoon. */
.mfa-banner.mfa-banner-urgent {
    background: #fef2f2;
    border-color: #fca5a5;
    border-left: 4px solid #dc2626;
    color: #7f1d1d;
}

.mfa-banner.mfa-banner-urgent .mfa-banner-icon {
    color: #dc2626;
}

.mfa-banner.mfa-banner-urgent .btn-mfa-banner {
    background: #dc2626;
}

.mfa-banner.mfa-banner-urgent .btn-mfa-banner:hover {
    background: #991b1b;
}

/* ============================================
   2. SETUP-PAGINA (drie stappen)
   ============================================ */

.mfa-setup-shell {
    /* Aparte minimale shell wanneer module direct gerenderd wordt zonder
       de gewone navigatie (pending_enrollment-state). Werkt binnen
       #pageContent maar voegt een eigen header toe. */
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 16px;
}

.mfa-setup-shell .mfa-setup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
}

.mfa-setup-shell .mfa-setup-header h1 {
    margin: 0;
    font-size: 1.75rem;
    color: #111827;
}

.mfa-setup-shell .mfa-setup-step-indicator {
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 500;
}

.mfa-setup-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius, 16px);
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.mfa-setup-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    color: #111827;
}

.mfa-setup-card .mfa-setup-intro {
    color: #4b5563;
    margin-bottom: 20px;
    line-height: 1.5;
}

.mfa-setup-card .mfa-setup-help-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
    color: #6b7280;
    font-size: 0.875rem;
    text-align: center;
}

/* Step 1: QR-code + secret-fallback */
.mfa-setup-qr-row {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 20px;
}

@media (max-width: 720px) {
    .mfa-setup-qr-row {
        grid-template-columns: 1fr;
    }
}

.mfa-setup-qr-image {
    background: #fff;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfa-setup-qr-image img,
.mfa-setup-qr-image svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

.mfa-setup-instructions ol {
    padding-left: 1.25rem;
    margin: 0 0 16px 0;
}

.mfa-setup-instructions li {
    margin-bottom: 8px;
    color: #1f2937;
    line-height: 1.5;
}

.mfa-setup-app-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.mfa-setup-app-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: #1f2937;
}

.mfa-setup-app-list i {
    font-size: 1.1rem;
    color: var(--brand-primary, #7c3aed);
}

.mfa-setup-secret-fallback {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 12px;
}

.mfa-setup-secret-fallback .mfa-setup-secret-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.mfa-setup-secret-fallback code {
    display: block;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #111827;
    margin-bottom: 8px;
    word-break: break-all;
}

/* Step 2: 6-digit code-input */
.mfa-code-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 20px 0;
}

.mfa-code-inputs input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    font-family: ui-monospace, "SF Mono", monospace;
    transition: border-color var(--transition-fast, 0.2s);
}

.mfa-code-inputs input:focus {
    outline: none;
    border-color: var(--brand-primary, #7c3aed);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 124, 58, 237), 0.15);
}

.mfa-code-inputs input.is-invalid {
    border-color: #dc2626;
}

/* Step 3: Recovery-codes 2x5 grid */
.mfa-recovery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 20px 0;
}

@media (max-width: 480px) {
    .mfa-recovery-grid {
        grid-template-columns: 1fr;
    }
}

.mfa-recovery-code {
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: #111827;
    user-select: all;
}

.mfa-recovery-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mfa-recovery-confirm {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.mfa-recovery-confirm input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mfa-recovery-confirm label {
    color: #78350f;
    font-weight: 500;
    line-height: 1.4;
}

/* ============================================
   3. LOGIN-STAP-2
   ============================================ */

.mfa-login-card {
    /* Op login-screen, vervangt het #loginForm zonder pagina-reload. */
    text-align: center;
}

.mfa-login-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    color: #111827;
}

.mfa-login-card .mfa-login-intro {
    color: #4b5563;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.mfa-recovery-input {
    /* Voor 8-alfa recovery-veld: XXXX-XXXX */
    width: 100%;
    padding: 12px 14px;
    font-size: 1.25rem;
    font-family: ui-monospace, "SF Mono", monospace;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    margin-bottom: 12px;
}

.mfa-recovery-input:focus {
    outline: none;
    border-color: var(--brand-primary, #7c3aed);
}

.mfa-login-card .mfa-login-secondary {
    margin-top: 16px;
    font-size: 0.875rem;
}

.mfa-login-card .mfa-login-secondary a,
.mfa-login-card .mfa-login-secondary button {
    background: none;
    border: 0;
    color: var(--brand-primary, #7c3aed);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}

.mfa-login-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    text-align: left;
}

/* ============================================
   4. ACCOUNT-INSTELLINGEN
   ============================================ */

.mfa-account-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius, 16px);
    padding: 24px;
    margin-bottom: 20px;
}

.mfa-account-block h2 {
    margin: 0 0 16px 0;
    font-size: 1.25rem;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfa-account-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    background: #f9fafb;
}

.mfa-account-status.is-enrolled {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.mfa-account-status.is-pending {
    background: #fff7ed;
    border: 1px solid #fdba74;
}

.mfa-account-status.is-sso {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.mfa-account-status .mfa-account-status-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.mfa-account-status.is-enrolled .mfa-account-status-icon {
    color: #16a34a;
}

.mfa-account-status.is-pending .mfa-account-status-icon {
    color: #ea580c;
}

.mfa-account-status.is-sso .mfa-account-status-icon {
    color: #2563eb;
}

.mfa-account-status-body {
    flex: 1;
}

.mfa-account-status-title {
    font-weight: 600;
    color: #111827;
}

.mfa-account-status-meta {
    font-size: 0.875rem;
    color: #4b5563;
    margin-top: 2px;
}

.mfa-account-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
}

.mfa-account-section h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: #111827;
}

.mfa-account-section p {
    color: #4b5563;
    margin: 0 0 10px 0;
    font-size: 0.9rem;
}

.mfa-account-codes-low {
    color: #b45309;
    font-weight: 500;
}

.mfa-account-codes-empty {
    color: #991b1b;
    font-weight: 600;
}

/* ============================================
   5. PRINT-STYLES VOOR RECOVERY-CODES (PDF)
   ============================================ */

/* Schermweergave: print-blok onzichtbaar, alleen scherm-grid actief.
   Bij window.print() wordt het print-blok juist enige zichtbare element. */
.mfa-print-only {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 25mm 25mm 25mm 25mm;
    }

    /* Verberg alles behalve onze print-doelblok. */
    body * {
        visibility: hidden;
    }

    .mfa-print-only,
    .mfa-print-only * {
        visibility: visible;
    }

    .mfa-print-only {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff !important;
        color: #000 !important;
        padding: 0;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 11pt;
        line-height: 1.5;
    }

    .mfa-print-header {
        margin-bottom: 8mm;
        border-bottom: 1pt solid #000;
        padding-bottom: 4mm;
    }

    .mfa-print-header img {
        height: 14mm;
        width: auto;
        margin-bottom: 4mm;
    }

    .mfa-print-header h1 {
        font-size: 16pt;
        font-weight: 600;
        margin: 0 0 2mm 0;
    }

    .mfa-print-meta {
        font-size: 10pt;
        margin-bottom: 6mm;
    }

    .mfa-print-meta strong {
        display: inline-block;
        min-width: 30mm;
    }

    .mfa-print-intro {
        font-size: 10pt;
        margin-bottom: 6mm;
    }

    .mfa-print-codes {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4mm;
        margin: 6mm 0;
    }

    .mfa-print-code {
        border: 0.5pt solid #000;
        padding: 3mm;
        font-family: "Courier New", Courier, monospace;
        font-size: 14pt;
        text-align: center;
        letter-spacing: 0.1em;
    }

    .mfa-print-howto {
        margin-top: 6mm;
    }

    .mfa-print-howto h2 {
        font-size: 12pt;
        margin: 0 0 2mm 0;
        font-weight: 600;
    }

    .mfa-print-howto ol {
        padding-left: 6mm;
        margin: 0 0 4mm 0;
        font-size: 10pt;
    }

    .mfa-print-footer {
        margin-top: 8mm;
        padding-top: 3mm;
        border-top: 0.5pt solid #666;
        font-size: 9pt;
        color: #444 !important;
        text-align: center;
    }
}