/* ==========================================================================
   TWO FACTOR AUTHENTICATION — Stili condivisi
   Tutti i selettori sono prefissati con .twofa-page per evitare
   conflitti con Bootstrap e gli stili globali del sito.

   Ogni view deve avere come wrapper esterno:
       <div class="twofa-page"> ... </div>

   Usato da: ManageTwoFactor, EnableAuthenticator, LoginWith2fa,
             LoginWithRecoveryCode, DisableAuthenticator,
             GenerateRecoveryCodes, ShowRecoveryCodes
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LAYOUT — Contenitori pagina
   -------------------------------------------------------------------------- */

.twofa-page .twofa-container,
.twofa-page .twofa-manage-container,
.twofa-page .recovery-login-container,
.twofa-page .disable-2fa-container,
.twofa-page .generate-codes-container,
.twofa-page .setup-container,
.twofa-page .recovery-codes-container {
    max-width: 520px;
    margin: 2.5rem auto;
    font-family: sans-serif;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.twofa-page .twofa-manage-container {
    max-width: 620px;
}

.twofa-page .recovery-codes-container {
    max-width: 600px;
}


/* --------------------------------------------------------------------------
   2. PAGE HEADER — Intestazione con icona
   -------------------------------------------------------------------------- */

.twofa-page .page-header,
.twofa-page .twofa-header,
.twofa-page .disable-header,
.twofa-page .recovery-header,
.twofa-page .setup-header {
    text-align: center;
}

.twofa-page .page-icon,
.twofa-page .twofa-icon,
.twofa-page .disable-icon,
.twofa-page .recovery-icon,
.twofa-page .setup-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.twofa-page .page-header h2,
.twofa-page .twofa-header h2,
.twofa-page .disable-header h2,
.twofa-page .recovery-header h2,
.twofa-page .setup-header h2 {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    color: #1a1a2e;
}

.twofa-page .page-subtitle,
.twofa-page .twofa-subtitle,
.twofa-page .disable-subtitle,
.twofa-page .recovery-subtitle,
.twofa-page .setup-subtitle {
    margin: 0;
    font-size: 0.88rem;
    color: #666;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   3. ALERT — Messaggi di stato
   -------------------------------------------------------------------------- */

.twofa-page .alert-error,
.twofa-page .alert-warning,
.twofa-page .alert-danger,
.twofa-page .alert-info,
.twofa-page .alert-success {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.twofa-page .alert-error {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-left: 4px solid #c62828;
    color: #b71c1c;
}

.twofa-page .alert-warning {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-left: 4px solid #f9a825;
    color: #e65100;
}

.twofa-page .alert-danger {
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-left: 4px solid #e65100;
    color: #bf360c;
}

.twofa-page .alert-info {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-left: 4px solid #1565c0;
    color: #0d47a1;
}

.twofa-page .alert-success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-left: 4px solid #2e7d32;
    color: #1b5e20;
}

.twofa-page .alert-warning strong,
.twofa-page .alert-danger strong {
    display: block;
    margin-bottom: 0.4rem;
}

.twofa-page .alert-warning ul,
.twofa-page .alert-danger ul {
    margin: 0;
    padding-left: 1.2rem;
}

    .twofa-page .alert-warning ul li,
    .twofa-page .alert-danger ul li {
        margin-bottom: 0.25rem;
    }


/* --------------------------------------------------------------------------
   4. FORM — Elementi di input
   -------------------------------------------------------------------------- */

.twofa-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .twofa-page .form-group label {
        font-size: 0.9rem;
        font-weight: 600;
        color: #333;
    }

.twofa-page .form-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 2px solid #bdbdbd;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    color: #1a1a2e;
}

    .twofa-page .form-input:focus {
        border-color: #1565c0;
        box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
    }

.twofa-page .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .twofa-page .password-wrapper .form-input {
        padding-right: 2.5rem;
    }

.twofa-page .toggle-pwd {
    position: absolute;
    right: 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    color: #888;
}

    .twofa-page .toggle-pwd:hover {
        color: #333;
    }

.twofa-page .code-input {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 8px;
    padding: 0.6rem 1rem;
    border: 2px solid #bdbdbd;
    border-radius: 8px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #1a1a2e;
}

    .twofa-page .code-input:focus {
        border-color: #1565c0;
        box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
    }

.twofa-page .recovery-input {
    font-size: 1.1rem;
    font-family: monospace;
    letter-spacing: 3px;
    padding: 0.65rem 1rem;
    border: 2px solid #bdbdbd;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #1a1a2e;
    width: 100%;
    box-sizing: border-box;
    text-transform: lowercase;
}

    .twofa-page .recovery-input:focus {
        border-color: #1565c0;
        box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
    }

.twofa-page .field-error {
    font-size: 0.82rem;
    color: #c62828;
}

.twofa-page .field-hint {
    font-size: 0.8rem;
    color: #999;
}

.twofa-page .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

    .twofa-page .form-check input[type="checkbox"] {
        margin-top: 3px;
        width: 16px;
        height: 16px;
        accent-color: #1565c0;
        cursor: pointer;
        flex-shrink: 0;
    }

    .twofa-page .form-check label {
        font-size: 0.88rem;
        color: #555;
        cursor: pointer;
        line-height: 1.5;
    }

    .twofa-page .form-check.danger input[type="checkbox"] {
        accent-color: #c62828;
    }


/* --------------------------------------------------------------------------
   5. BUTTONS — Pulsanti azione
   -------------------------------------------------------------------------- */

.twofa-page .btn-primary,
.twofa-page .btn-secondary,
.twofa-page .btn-danger,
.twofa-page .btn-cancel,
.twofa-page .btn-verify,
.twofa-page .btn-generate,
.twofa-page .btn-disable,
.twofa-page .btn-copy,
.twofa-page .btn-print,
.twofa-page .btn-done,
.twofa-page .btn-renable,
.twofa-page .btn-home,
.twofa-page .btn-copy-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.68rem 1.1rem;
    border-radius: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.twofa-page .btn-primary,
.twofa-page .btn-verify,
.twofa-page .btn-generate,
.twofa-page .btn-copy {
    background: #1565c0;
    color: #fff;
}

    .twofa-page .btn-primary:hover,
    .twofa-page .btn-verify:hover,
    .twofa-page .btn-generate:hover:not(:disabled),
    .twofa-page .btn-copy:hover {
        background: #0d47a1;
    }

.twofa-page .btn-secondary,
.twofa-page .btn-renable {
    background: #fff;
    color: #1565c0;
    border: 1px solid #90caf9;
}

    .twofa-page .btn-secondary:hover,
    .twofa-page .btn-renable:hover {
        background: #e3f2fd;
    }

.twofa-page .btn-danger,
.twofa-page .btn-disable {
    background: #fff;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

    .twofa-page .btn-danger:hover {
        background: #ffebee;
    }

    .twofa-page .btn-disable:hover:not(:disabled) {
        background: #ffebee;
    }

.twofa-page .btn-cancel,
.twofa-page .btn-print,
.twofa-page .btn-home {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

    .twofa-page .btn-cancel:hover,
    .twofa-page .btn-print:hover,
    .twofa-page .btn-home:hover {
        background: #e0e0e0;
        color: #333;
    }

.twofa-page .btn-done {
    background: #2e7d32;
    color: #fff;
}

    .twofa-page .btn-done:hover {
        background: #1b5e20;
    }

.twofa-page .btn-primary:disabled,
.twofa-page .btn-verify:disabled,
.twofa-page .btn-generate:disabled,
.twofa-page .btn-disable:disabled {
    background: #90caf9;
    cursor: not-allowed;
    opacity: 0.7;
}

.twofa-page .btn-block {
    width: 100%;
}

.twofa-page .form-actions {
    display: flex;
    gap: 0.75rem;
}

    .twofa-page .form-actions .btn-cancel,
    .twofa-page .form-actions .btn-primary,
    .twofa-page .form-actions .btn-danger,
    .twofa-page .form-actions .btn-generate,
    .twofa-page .form-actions .btn-disable {
        flex: 1;
    }


/* --------------------------------------------------------------------------
   6. STATUS BADGE — Indicatore stato 2FA
   -------------------------------------------------------------------------- */

.twofa-page .status-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.twofa-page .status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}

.twofa-page .status-label {
    color: #555;
    font-weight: 500;
}

.twofa-page .status-value {
    font-weight: 600;
    color: #1a1a2e;
}

    .twofa-page .status-value.warning {
        color: #e65100;
    }

.twofa-page .warning-hint {
    font-size: 0.78rem;
    margin-left: 0.35rem;
}

.twofa-page .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
}

    .twofa-page .status-badge.active {
        background: #e8f5e9;
        color: #2e7d32;
        border: 1px solid #a5d6a7;
    }

    .twofa-page .status-badge.inactive {
        background: #fafafa;
        color: #888;
        border: 1px solid #e0e0e0;
    }

.twofa-page .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.twofa-page .status-badge.active .status-dot {
    background: #2e7d32;
}

.twofa-page .status-badge.inactive .status-dot {
    background: #bdbdbd;
}


/* --------------------------------------------------------------------------
   7. ACTION CARD — Card con stato e pulsanti
   -------------------------------------------------------------------------- */

.twofa-page .action-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .twofa-page .action-card.enabled {
        border: 1px solid #a5d6a7;
        background: #f9fff9;
    }

    .twofa-page .action-card.disabled {
        border: 1px solid #e0e0e0;
        background: #fafafa;
    }

.twofa-page .action-card-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.twofa-page .action-card-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.twofa-page .action-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .twofa-page .action-card-info strong {
        font-size: 1rem;
        color: #1a1a2e;
    }

    .twofa-page .action-card-info span {
        font-size: 0.86rem;
        color: #666;
        line-height: 1.5;
    }

.twofa-page .action-card-buttons {
    display: flex;
    gap: 0.60rem;
    flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   8. INFO SECTION — Spiegazione 2FA (ManageTwoFactor)
   -------------------------------------------------------------------------- */

.twofa-page .info-section {
    background: #f8f9ff;
    border: 1px solid #e8eaf6;
    border-radius: 10px;
    padding: 1.5rem;
}

    .twofa-page .info-section h3 {
        margin: 0 0 0.75rem;
        font-size: 1rem;
        color: #1a1a2e;
    }

    .twofa-page .info-section > p {
        font-size: 0.9rem;
        color: #555;
        line-height: 1.6;
        margin: 0 0 1.25rem;
    }

.twofa-page .how-it-works {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.twofa-page .step-card {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e8eaf6;
    border-radius: 8px;
    padding: 0.75rem;
}

.twofa-page .step-card-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.twofa-page .step-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

    .twofa-page .step-card-text strong {
        font-size: 0.82rem;
        color: #1565c0;
    }

    .twofa-page .step-card-text span {
        font-size: 0.8rem;
        color: #666;
        line-height: 1.4;
    }

.twofa-page .step-card-arrow {
    font-size: 1.2rem;
    color: #bdbdbd;
    flex-shrink: 0;
}

.twofa-page .info-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.twofa-page .benefit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: #555;
}

.twofa-page .benefit-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.twofa-page .compatible-apps,
.twofa-page .app-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

    .twofa-page .compatible-apps small {
        color: #999;
        font-size: 0.8rem;
    }

.twofa-page .app-badge,
.twofa-page .badge {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 20px;
    padding: 0.15rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 500;
}

.twofa-page .twofa-required-hint {
    font-size: 0.82rem;
    color: #e65100;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* --------------------------------------------------------------------------
   9. QR CODE — Setup Authenticator
   -------------------------------------------------------------------------- */

.twofa-page .qr-wrapper {
    position: relative;
    display: inline-block;
    margin: 0.75rem 0;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.twofa-page #qrCode canvas,
.twofa-page #qrCode img {
    display: block;
}

.twofa-page .qr-overlay {
    position: absolute;
    inset: 0;
    background: #f5f5f5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #999;
}

.twofa-page .manual-entry {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

    .twofa-page .manual-entry summary {
        cursor: pointer;
        color: #1565c0;
        font-weight: 500;
    }

.twofa-page .manual-key {
    margin-top: 0.75rem;
}

    .twofa-page .manual-key p {
        margin: 0 0 0.5rem;
        font-size: 0.85rem;
        color: #555;
    }

.twofa-page .key-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

    .twofa-page .key-display code {
        flex: 1;
        font-size: 0.95rem;
        letter-spacing: 2px;
        word-break: break-all;
        color: #1a1a2e;
    }

.twofa-page .btn-copy-key {
    background: none;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    flex: unset;
    width: auto;
}

    .twofa-page .btn-copy-key:hover {
        background: #e0e0e0;
    }

.twofa-page .manual-key small {
    font-size: 0.78rem;
    color: #999;
}


/* --------------------------------------------------------------------------
   10. RECOVERY CODES — Griglia codici
   -------------------------------------------------------------------------- */

.twofa-page .codes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.25rem;
}

.twofa-page .code-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

    .twofa-page .code-item code {
        font-size: 1rem;
        letter-spacing: 2px;
        color: #1a1a2e;
        font-weight: 600;
    }

.twofa-page .copy-feedback {
    font-size: 0.9rem;
    color: #2e7d32;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   11. FOOTER LINK — Link in fondo al form
   -------------------------------------------------------------------------- */

.twofa-page .twofa-footer,
.twofa-page .recovery-footer {
    text-align: center;
    padding-top: 1.25rem;
    border-top: 1px solid #f0f0f0;
}

    .twofa-page .twofa-footer p,
    .twofa-page .recovery-footer p {
        font-size: 0.85rem;
        color: #888;
        margin: 0 0 0.35rem;
    }

    .twofa-page .twofa-footer a,
    .twofa-page .recovery-footer a {
        font-size: 0.9rem;
        color: #1565c0;
        text-decoration: none;
        font-weight: 500;
    }

        .twofa-page .twofa-footer a:hover,
        .twofa-page .recovery-footer a:hover {
            text-decoration: underline;
        }


/* --------------------------------------------------------------------------
   12. CONFIRM PAGE — Pagina di conferma operazione
   -------------------------------------------------------------------------- */

.twofa-page .confirm-container {
    max-width: 440px;
    margin: 4rem auto;
    font-family: sans-serif;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 2.5rem 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.twofa-page .confirm-icon {
    font-size: 3rem;
}

.twofa-page .confirm-container h2 {
    margin: 0;
    color: #1a1a2e;
    font-size: 1.4rem;
}

.twofa-page .success-msg {
    color: #2e7d32;
    font-weight: 600;
    margin: 0;
}

.twofa-page .confirm-info {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.twofa-page .confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}


/* --------------------------------------------------------------------------
   13. PRINT — Stili stampa codici di recupero
   -------------------------------------------------------------------------- */

@media print {
    .twofa-page .recovery-codes-container {
        display: none;
    }

    .twofa-page .print-only {
        display: block !important;
    }
}

.twofa-page .print-only {
    display: none;
}


/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {
    .twofa-page .twofa-container,
    .twofa-page .recovery-login-container,
    .twofa-page .disable-2fa-container,
    .twofa-page .generate-codes-container,
    .twofa-page .setup-container,
    .twofa-page .recovery-codes-container {
        margin: 1rem;
        padding: 1.5rem;
    }

    .twofa-page .how-it-works {
        flex-direction: column;
    }

    .twofa-page .step-card-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .twofa-page .codes-grid {
        grid-template-columns: 1fr;
    }

    .twofa-page .action-card-buttons,
    .twofa-page .form-actions,
    .twofa-page .confirm-actions {
        flex-direction: column;
    }

        .twofa-page .form-actions .btn-cancel,
        .twofa-page .form-actions .btn-primary,
        .twofa-page .form-actions .btn-danger,
        .twofa-page .form-actions .btn-generate,
        .twofa-page .form-actions .btn-disable {
            width: 100%;
        }

    .twofa-page .btn-primary,
    .twofa-page .btn-secondary,
    .twofa-page .btn-danger,
    .twofa-page .btn-cancel,
    .twofa-page .btn-verify,
    .twofa-page .btn-generate,
    .twofa-page .btn-disable,
    .twofa-page .btn-done,
    .twofa-page .btn-renable,
    .twofa-page .btn-home {
        justify-content: center;
    }

    .twofa-page .code-input {
        font-size: 1.4rem;
        letter-spacing: 4px;
    }
}



/* User info box — usato nelle view admin */
.twofa-page .user-info-box {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.twofa-page .user-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}

.twofa-page .user-info-label {
    color: #555;
    font-weight: 500;
}

.twofa-page .user-info-value {
    font-weight: 600;
    color: #1a1a2e;
}