/* ============================================================================
 * mobile-pass.css — Mobile-first responsive pass
 * ----------------------------------------------------------------------------
 *
 * Breakpoints:
 *   ≥768px  — desktop (no override; existing CSS applies)
 *   480-767 — tablet
 *   <480px  — phone
 * ========================================================================= */

/* ─── Tablet and smaller ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* App branding strip — make the brand copy compact */
    .app-brand-copy strong { font-size: 14px; }
    .app-brand-copy small {
        font-size: 11px;
        line-height: 1.3;
        display: block;
    }

    /* Page shell — reduce side padding */
    .modern-page-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Hide the experience panel ("01/02/03 step list") on small screens
       it's a desktop affordance that adds clutter on mobile. The auth-card
       on the right becomes the sole focus. */
    .verification-shell .experience-panel {
        display: none;
    }
    .verification-shell .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Field grid: stack vertically (was two-column) */
    .field-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Statement form grid: stack date pickers */
    .statement-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Action row: stack buttons full-width */
    .action-row--stack-mobile {
        flex-direction: column;
        gap: 10px;
    }
    .action-row--stack-mobile .btn {
        width: 100%;
        justify-content: center;
    }

    /* Insight strip ("Tip" + "After generation"): stack vertically */
    .insight-strip {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Detail tiles: more compact spacing */
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .detail-tile { padding: 10px 12px; }

    /* Top nav: drop the "Sign Out" trailing username text — too long */
    .top-nav-signout #loggedInUserName { display: none; }
}

/* ─── Phone (narrow) ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* App brand: just show the logo, hide secondary text */
    .app-brand-copy small { display: none; }

    /* Auth card: minimal padding */
    .auth-card { padding: 16px; }
    .auth-body { padding: 0; }

    /* Form labels closer to inputs */
    .form-group label { margin-bottom: 4px; }

    /* Bigger touch targets on form controls */
    .form-control {
        height: 44px;       /* iOS tappable minimum */
        font-size: 16px;    /* Prevents iOS zoom on focus */
    }

    /* Buttons: minimum touch target */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }

    /* OTP modal — already styled in otp.css for narrow screens */

    /* Statement viewer modal: full-screen on phone (PDF in a tiny modal
       is unreadable; full-screen lets it actually render at usable size) */
    #statementViewerModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    #statementViewerModal .modal-content {
        height: 100%;
        border-radius: 0;
    }
    .statement-viewer-body {
        height: calc(100vh - 110px);
    }
    .statement-viewer-frame-container {
        height: 100%;
    }
    .statement-viewer-frame-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Form note text smaller on phone */
    .form-note { font-size: 11px; }
}

/* ─── iOS-specific fixes ─────────────────────────────────────────────── */
/* Prevent iOS Safari from auto-zooming when an input is focused. The
   trick is font-size >= 16px on the input. We set this above for phones. */

/* Prevent rubber-band scroll on the modal when keyboard appears */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 480px) {
        #otpVerificationModal.show {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
/* Respect the OS-level "reduce motion" preference. The existing animate.css
   classes (fadeInLeft, fadeInRight) ignore this; override globally. */
@media (prefers-reduced-motion: reduce) {
    .animated {
        animation: none !important;
        transition: none !important;
    }
}