/* ================================================================
   MOBILE RESPONSIVE UTILITIES
   Cross River Identity Server
   ================================================================ */

/* Form Controls - Mobile Optimizations */
@media (max-width: 768px) {
    .stepper {
        width: 270px
    }
    .bar > .gap-8 {
        gap: 0px
    }
    .env-chip {
        min-width: unset
    }
    .info-container {
        .m-block-end {
            padding-left: 17px;
        }
    }

    .container {
        align-self: center;
    }

    .left-side,
    .right-side {
        flex: 0;
    }

    .recovery-codes-container {
        .grid-container {
            font-size: 11px;
            column-gap: 18px;
        }

        .copy-btn-bg {
            margin-left: 11px;
            margin-right: 10px;
        }
    }

        #user-menu > div:first-of-type {
            display: -webkit-box;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        /* Increase touch target sizes for mobile */
        .form-control,
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        select,
        textarea {
            min-height: 44px; /* Apple recommended minimum touch target */
            font-size: 16px; /* Prevents auto-zoom on iOS */
        }
        /* Buttons should have adequate touch targets */
        .btn,
        button,
        a.btn {
            font-size: 16px;
        }
        /* Float labels work better with more space */
        .float-label {
            font-size: 14px;
        }
        /* Error messages should be clearly visible */
        .validation-error,
        .input-error-msg {
            font-size: 14px;
            line-height: 1.4;
            margin-top: 8px;
        }

        .notification-label {
            width: 275px;
            top: 93px;
            right: 13px;
        }
        /* Header - Mobile Optimizations */
        @media (max-width: 768px) {
            header .logo img {
                max-width: 140px;
                height: auto;
            }

            header .env-chip {
                font-size: 12px;
                padding: 4px 8px;
            }

            header .bar {
                padding: 8px 12px;
                margin: unset;
                gap: 8px;
            }

            .user-menu-dropdown {
                position: fixed;
                right: 12px;
                top: 56px;
                min-width: 200px;
            }
        }

        @media (max-width: 480px) {
            header .logo img {
                max-width: 120px;
            }

            .user-menu-dropdown {
                right: 0;
                border-radius: 0;
            }
        }
        /* Cards and Panels - Mobile Optimizations */
        @media (max-width: 768px) {
            .card,
            .panel {
                border-radius: 8px;
                padding: 16px;
                margin: 8px 0;
            }
            /* QR Code displays */
            .qr-code-container {
                max-width: 100%;
                padding: 16px;
            }

                .qr-code-container img {
                    max-width: 100%;
                    height: auto;
                }
            /* Recovery codes should be readable on mobile */
            .recovery-codes {
                font-size: 14px;
                padding: 12px;
                word-break: break-all;
            }
        }
        /* MFA QR Code - Mobile Optimizations */
        @media (max-width: 768px) {
            .desktop-instruction {
                display: none !important;
            }

            .mobile-instruction {
                display: block !important;
            }

            .otc .sms-autofill-hint {
                display: flex !important;
                align-items: center;
                justify-content: center;
            }

            .mfa-auth {
                font-size: 14px;

                ol {
                    gap: 8px;
                }
            }
            /* Make QR code larger and more prominent on mobile */
            #qrCode {
                width: 100% !important;
                max-width: 280px !important;
                margin: 16px 0px 0px 0px !important
            }

                #qrCode canvas,
                #qrCode img {
                    display: block;
                    margin: auto;
                }

            .innerContainer {
                flex-direction: column !important
            }

            .jwt-decoder-page {
                min-width: unset;
                max-width: unset;

                .ecodedCol {
                    width: unset
                }
            }
            /* Make manual key more accessible on mobile */
            .kbd-container {
                padding: unset
            }

            .show {
                gap: 0px;
            }

            .kbd-container kbd {
                font-size: 13px;
                word-break: break-all;
                padding: 12px 0px 12px 12px;
            }
            /* Ensure copy button is easily tappable */
            .copy-btn-bg {
                min-width: 44px;
                min-height: 44px;
            }
        }

        @media (min-width: 769px) {
            .desktop-instruction {
                display: block !important;
            }

            .mobile-instruction {
                display: none !important;
            }
        }
        /* Tables - Mobile Optimizations */
        @media (max-width: 768px) {
            table {
                font-size: 14px;
            }
                /* Stack table cells vertically on very small screens */
                table.stack-mobile thead {
                    display: none;
                }

                table.stack-mobile tr {
                    display: block;
                    margin-bottom: 16px;
                    border: 1px solid var(--border-primary);
                    border-radius: 8px;
                    padding: 12px;
                }

                table.stack-mobile td {
                    display: block;
                    text-align: left;
                    padding: 8px 0;
                    border: none;
                }

                    table.stack-mobile td::before {
                        content: attr(data-label);
                        font-weight: 600;
                        display: block;
                        margin-bottom: 4px;
                    }
        }
        /* Modals and Dialogs - Mobile Optimizations */
        @media (max-width: 768px) {
            .modal,
            .dialog {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0;
                border-radius: 0;
                min-height: 100vh;
            }

            .modal-content,
            .dialog-content {
                padding: 16px;
            }
        }
        /* Typography - Mobile Optimizations */
        @media (max-width: 768px) {
            h1 {
                font-size: 28px;
                line-height: 1.2;
                margin-bottom: 16px;
            }

            h2 {
                font-size: 24px;
                line-height: 1.3;
            }

            h3 {
                font-size: 20px;
            }

            p, label, span {
                font-size: 16px;
                line-height: 1.5;
            }

            .centered-text {
                text-align: center;
                word-wrap: break-word;
            }
        }

        @media (max-width: 480px) {
            .m-width {
                width: 100%;
                max-width: 360px
            }

            h1 {
                font-size: 24px;
                margin-block-end: 0px;
            }

            h2 {
                font-size: 20px;
            }

            h3 {
                font-size: 18px;
            }

            p, label, span {
                font-size: 14px;
            }

            ul.password-criteria li {
                line-height: 2px;
            }

            #qrCode {
                width: 100% !important;
                max-width: 180px !important;
                margin: 16px 0px 0px 0px !important
            }
        }
        /* Navigation and Links - Mobile Optimizations */
        @media (max-width: 768px) {
            nav,
            .nav {
                flex-direction: column;
            }

                nav a,
                .nav a {
                    padding: 12px 16px;
                    display: block;
                    border-bottom: 1px solid var(--border-primary);
                }
            /* Footer links should wrap nicely */
            footer a {
                word-break: normal;
                hyphens: auto;
            }
        }
        /* Images and Media - Mobile Optimizations */
        @media (max-width: 768px) {
            img {
                max-width: 100%;
                height: auto;
            }

            .img-responsive {
                width: 100%;
                height: auto;
            }
            /* FDIC and EHL logos in footer */
            footer img {
                max-width: 80px;
                height: auto;
            }
        }

        @media (max-width: 480px) {
            footer img {
                max-width: 60px;
            }
        }
        /* Spacing Utilities - Mobile Overrides */
        @media (max-width: 768px) {
            .mobile-pd-16 {
                padding: 16px !important;
            }

            .mobile-pd-12 {
                padding: 12px !important;
            }

            .mobile-pd-8 {
                padding: 8px !important;
            }

            .mobile-gap-16 {
                gap: 16px !important;
            }

            .mobile-gap-24 {
                gap: 24px !important;
            }

            .mobile-gap-12 {
                gap: 12px !important;
            }

            .mobile-gap-8 {
                gap: 8px !important;
            }

            .mobile-mt-16 {
                margin-top: 16px !important;
            }

            .mobile-mb-16 {
                margin-bottom: 16px !important;
            }
        }
        /* Flexbox Utilities - Mobile Overrides */
        @media (max-width: 768px) {
            .mobile-flex-col {
                flex-direction: column !important;
                padding-top: 20px;
            }

            .mobile-flex-row {
                flex-direction: row !important;
            }

            .mobile-jc-center {
                justify-content: center !important;
            }

            .mobile-ai-center {
                align-items: center !important;
            }

            .mobile-flex-center {
                justify-content: center !important;
                align-items: center !important;
            }

            .mobile-full-width {
                width: 100% !important;
                max-width: 100% !important;
            }

            .mobile-text-align-center {
                text-align: center
            }
        }
        /* Accessibility Improvements */
        @media (max-width: 768px) {
            /* Ensure focus states are visible on mobile */
            *:focus {
                outline: 2px solid var(--primary);
                outline-offset: 2px;
            }
                /* Remove focus outline for mouse users, keep for keyboard users */
                *:focus:not(:focus-visible) {
                    outline: none;
                }
            /* Ensure clickable elements are easy to tap */
            a, button, input, select, textarea, [role="button"] {
                -webkit-tap-highlight-color: rgba(20, 112, 204, 0.2);
            }
        }
        /* Prevent text size adjustment on orientation change */
        @media (max-width: 768px) {
            html {
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                text-size-adjust: 100%;
            }
        }
        /* Safe area insets for devices with notches (iPhone X+) */
        @supports (padding: max(0px)) {
            @media (max-width: 768px) {
                header {
                    padding-left: max(12px, env(safe-area-inset-left));
                    padding-right: max(12px, env(safe-area-inset-right));
                }

                main {
                    padding-left: max(16px, env(safe-area-inset-left));
                    padding-right: max(16px, env(safe-area-inset-right));
                }

                footer {
                    padding-left: max(12px, env(safe-area-inset-left));
                    padding-right: max(12px, env(safe-area-inset-right));
                    padding-bottom: max(16px, env(safe-area-inset-bottom));
                }
            }
        }
        /* Loading States - Mobile */
        @media (max-width: 768px) {
            .spinner,
            .loading {
                transform: scale(1.2);
            }

            .loading-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 9999;
            }
        }
        /* Print Styles */
        @media print {
            header,
            footer,
            .no-print {
                display: none !important;
            }

            main {
                margin: 0;
                padding: 0;
            }

            * {
                background: white !important;
                color: black !important;
            }
        }