/* ====================================================================
   RESPONSIVE MODALS - Universal Fix
   Fixes ALL modal patterns across the entire site for mobile/tablet
   ==================================================================== */

/* ====================================================================
   TABLET (≤1024px)
   ==================================================================== */
@media (max-width: 1024px) {

    /* --- Pattern 1: .modal-overlay + .modal (admin-common) --- */
    .modal-overlay .modal {
        max-width: 95vw !important;
    }

    .modal-overlay .modal.large {
        max-width: 95vw !important;
    }

    /* --- Pattern 2: .settings-modal + .modal-content (ea-settings/ea-manager) --- */
    .settings-modal .modal-content {
        max-width: 95vw !important;
    }

    /* --- Pattern 3: .eav-modal-overlay + .eav-modal --- */
    .eav-modal-overlay .eav-modal {
        max-width: 95vw !important;
    }

    /* --- Pattern 4: .modal-overlay + .modal-content (audit-logs, settings guide) --- */
    .modal-overlay > .modal-content {
        max-width: 95vw !important;
    }

    /* Inline 3-col grids inside modals → 2 cols */
    .settings-modal [style*="grid-template-columns: repeat(3"],
    .modal [style*="grid-template-columns: repeat(3"],
    .modal-content [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ====================================================================
   MOBILE (≤768px) - Main fixes
   ==================================================================== */
@media (max-width: 768px) {

    /* ----------------------------------------------------------------
       Pattern 1: .modal-overlay + .modal (admin-common)
       Used in: users-management, users, trades, trade-history,
       analytics, affiliates, system, settings, refunds, tickets,
       billing, account, profile
       ---------------------------------------------------------------- */
    .modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .modal-overlay .modal,
    .modal-overlay .modal.large {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        animation: modalSlideUp 0.3s ease !important;
    }

    .modal-overlay .modal .modal-header {
        padding: 16px !important;
        position: sticky;
        top: 0;
        z-index: 10;
        background: inherit;
    }

    .modal-overlay .modal .modal-header h3 {
        font-size: 1rem !important;
        word-break: break-word;
    }

    .modal-overlay .modal .modal-body {
        padding: 16px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-overlay .modal .modal-footer {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 8px !important;
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: inherit;
    }

    .modal-overlay .modal .modal-footer .btn,
    .modal-overlay .modal .modal-footer button {
        width: 100% !important;
        justify-content: center;
        padding: 12px !important;
    }

    /* Checkbox-groups inside all modals — force row + left align */
    .modal-overlay .modal .form-group.checkbox-group,
    .modal-overlay .modal .checkbox-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .modal-overlay .modal .checkbox-group input[type="checkbox"] {
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    /* Form rows inside admin modals → single column */
    .modal-overlay .modal .form-row,
    .modal-overlay .modal .d-flex.gap-10:has(.form-group),
    .modal-overlay .modal [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }


    /* ----------------------------------------------------------------
       Pattern 2: .settings-modal + .modal-content (ea-settings, ea-manager)
       Large EA Settings edit modal — needs aggressive mobile rules
       ---------------------------------------------------------------- */
    .settings-modal {
        padding: 0 !important;
        align-items: flex-end !important;
        overflow: hidden !important;
    }

    .settings-modal .modal-content,
    .settings-modal.active .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        animation: modalSlideUp 0.3s ease !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .settings-modal .modal-content .modal-header {
        padding: 14px 16px !important;
    }

    .settings-modal .modal-content .modal-header h2 {
        font-size: 1.05rem !important;
        word-break: break-word;
    }

    .settings-modal .modal-content .modal-body {
        padding: 12px !important;
        overflow-x: hidden !important;
    }

    .settings-modal .modal-content .modal-body form,
    .settings-modal .modal-content .modal-body > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .settings-modal .modal-content .modal-footer {
        padding: 14px 16px !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .settings-modal .modal-content .modal-footer .btn,
    .settings-modal .modal-content .modal-footer .btn-save,
    .settings-modal .modal-content .modal-footer .btn-cancel,
    .settings-modal .modal-content .modal-footer button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: center;
        padding: 12px !important;
        text-align: center;
    }

    /* EA Settings sections */
    .settings-modal .settings-section {
        padding: 0.85rem !important;
        margin-bottom: 0.85rem !important;
    }

    .settings-modal .settings-section h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* ★ CRITICAL: ALL settings-grids → 1 column ★ */
    .settings-modal .settings-grid,
    .settings-modal .settings-grid.cols-2,
    .settings-modal .settings-grid.cols-3,
    .settings-modal .modal-content .settings-grid,
    .settings-modal .modal-body .settings-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    /* ★ CRITICAL: ALL inline grids → flex column ★ */
    .settings-modal [style*="grid-template-columns"],
    .settings-modal .modal-body [style*="grid-template-columns"],
    .settings-modal .modal-content [style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
    }

    /* grid-span overrides */
    .settings-modal .grid-span-2,
    .settings-modal .form-group.span-2 {
        grid-column: span 1 !important;
    }

    /* All flex-1 buttons inside sections → full width */
    .settings-modal .settings-section .flex-1 {
        width: 100% !important;
    }

    /* Association/Preset toggle buttons → stack */
    .settings-modal .settings-section > div[style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
    }

    /* Select + button combos → wrap and stack */
    .settings-modal .items-center[style*="display: flex"] {
        flex-wrap: wrap !important;
    }
    .settings-modal .items-center[style*="display: flex"] > select.flex-1,
    .settings-modal .items-center[style*="display: flex"] > .flex-1 {
        width: 100% !important;
        min-width: 100% !important;
    }
    .settings-modal .items-center[style*="display: flex"] > .btn-edit,
    .settings-modal .items-center[style*="display: flex"] > button[type="button"] {
        width: 100% !important;
    }

    /* Save Association / Apply button + warning text → stack */
    .settings-modal .items-center.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* SL Buffer inline flex: let number inputs expand */
    .settings-modal .settings-section .items-center input[type="number"] {
        flex: 1 !important;
        width: auto !important;
        min-width: 60px !important;
    }

    /* Checkbox-group alignment — FORCE row layout + left align */
    .settings-modal .form-group.checkbox-group,
    .settings-modal .checkbox-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .settings-modal .checkbox-group input[type="checkbox"] {
        flex-shrink: 0 !important;
        width: 18px !important;
        height: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .settings-modal .checkbox-group label {
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        font-size: 0.85rem !important;
    }

    /* ALL form-groups inside modal must be full width */
    .settings-modal .settings-grid > .form-group {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix padding on checkbox from .form-group input rule */
    .settings-modal .form-group.checkbox-group input {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Account summary */
    .settings-modal .account-summary {
        font-size: 0.82rem !important;
        padding: 10px 12px !important;
        word-break: break-all;
    }

    /* Large separators: reduce spacing */
    .settings-modal div[style*="border-bottom: 3px"] {
        margin: 1rem 0 !important;
    }
    .settings-modal div[style*="margin: 2rem 0"] {
        margin: 1rem 0 !important;
    }
    .settings-modal h2[style*="margin-bottom: 1.5rem"] {
        margin-bottom: 1rem !important;
        font-size: 1.1rem !important;
    }


    /* ----------------------------------------------------------------
       Pattern 3: .modal-overlay + .modal-dialog (dashboard confirms)
       ---------------------------------------------------------------- */
    .modal-overlay .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        padding: 24px 20px !important;
    }

    .modal-overlay .modal-dialog h3 {
        font-size: 1.1rem !important;
    }

    .modal-overlay .modal-dialog p {
        font-size: 0.9rem !important;
    }

    .modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .modal-actions button,
    .modal-actions .btn {
        width: 100% !important;
        padding: 14px !important;
    }


    /* ----------------------------------------------------------------
       Pattern 4: .eav-modal-overlay + .eav-modal (ea-versions)
       ---------------------------------------------------------------- */
    .eav-modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .eav-modal-overlay .eav-modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 20px 16px !important;
        animation: modalSlideUp 0.3s ease !important;
    }

    .eav-modal-overlay .eav-modal .eav-form-grid {
        grid-template-columns: 1fr !important;
    }


    /* ----------------------------------------------------------------
       Pattern 5: .twofa-modal (checkout, login)
       ---------------------------------------------------------------- */
    .twofa-modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .twofa-modal-overlay .twofa-modal,
    .twofa-modal {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }


    /* ----------------------------------------------------------------
       Pattern 6: .modal-overlay + .modal-content (audit-logs, components guide)
       ---------------------------------------------------------------- */
    .modal-overlay > .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }

    .modal-overlay > .modal-content > .modal-header {
        padding: 14px 16px !important;
    }

    .modal-overlay > .modal-content > .modal-body {
        padding: 14px 16px !important;
    }


    /* ----------------------------------------------------------------
       Pattern 7: .password-modal (login page)
       ---------------------------------------------------------------- */
    .password-modal .password-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }


    /* ----------------------------------------------------------------
       Generic: Inline grid collapses inside ANY modal context
       Catches all inline style grid patterns
       ---------------------------------------------------------------- */
    .modal [style*="grid-template-columns"],
    .modal-content [style*="grid-template-columns"],
    .modal-body [style*="grid-template-columns"],
    .modal-dialog [style*="grid-template-columns"],
    .eav-modal [style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Inline flexbox with gap inside modals: stack when has form groups */
    .modal-body > div[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

    /* D-flex justify-end footers inside modals → full width buttons */
    .modal-body .d-flex.justify-end,
    .modal-body .d-flex.gap-10:last-child {
        flex-direction: column !important;
    }

    .modal-body .d-flex.justify-end .btn,
    .modal-body .d-flex.gap-10:last-child .btn {
        width: 100% !important;
        text-align: center;
        justify-content: center;
    }

    /* Upgrade modal plans grid */
    .plans-selection {
        grid-template-columns: 1fr !important;
    }

    /* QR code in 2FA modal */
    .qr-code-container img {
        max-width: 200px !important;
    }

    /* Backup codes wrapping */
    .backup-codes {
        word-break: break-all;
    }

    /* Modify position modal (dashboard open-position) */
    .modify-position-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }

    /* Chart modal - full screen */
    .chart-modal-content {
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
}


/* ====================================================================
   SMALL MOBILE (≤480px) - Extra compact
   ==================================================================== */
@media (max-width: 480px) {

    /* Even tighter padding */
    .modal-overlay .modal .modal-header,
    .settings-modal .modal-content .modal-header,
    .modal-overlay > .modal-content > .modal-header {
        padding: 12px 14px !important;
    }

    .modal-overlay .modal .modal-body,
    .settings-modal .modal-content .modal-body,
    .modal-overlay > .modal-content > .modal-body {
        padding: 12px 14px !important;
    }

    .modal-overlay .modal .modal-footer,
    .settings-modal .modal-content .modal-footer {
        padding: 12px 14px !important;
    }

    /* Smaller heading text */
    .modal-overlay .modal .modal-header h3,
    .settings-modal .modal-content .modal-header h2 {
        font-size: 0.95rem !important;
    }

    /* Settings sections tighter */
    .settings-modal .settings-section {
        padding: 0.75rem !important;
    }

    .settings-modal .settings-section h3 {
        font-size: 0.9rem !important;
    }

    /* Form controls full width */
    .modal select,
    .modal input,
    .modal textarea,
    .modal-content select,
    .modal-content input,
    .modal-content textarea,
    .eav-modal select,
    .eav-modal input,
    .eav-modal textarea {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Labels inside modals */
    .modal label,
    .modal-content label {
        font-size: 0.8rem !important;
    }

    /* Modal dialog extra compact */
    .modal-overlay .modal-dialog {
        padding: 20px 16px !important;
    }

    /* EAV modal extra compact */
    .eav-modal-overlay .eav-modal {
        padding: 16px 14px !important;
    }
}


/* ====================================================================
   VERY SMALL SCREENS (≤380px)
   ==================================================================== */
@media (max-width: 380px) {

    /* Override responsive-fixes.css that forces height: 100vh */
    .modal-overlay .modal,
    .modal-overlay .modal.large {
        height: auto !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .modal-overlay .modal .modal-header h3,
    .settings-modal .modal-content .modal-header h2 {
        font-size: 0.85rem !important;
    }

    .modal-close {
        font-size: 1.25rem !important;
        padding: 4px !important;
    }

    /* Tighter body text */
    .modal-body,
    .modal-body p,
    .modal-body span,
    .modal-body li {
        font-size: 0.82rem !important;
    }

    /* Icon badges in headers */
    .modal-header .icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}


/* ====================================================================
   LANDSCAPE MOBILE
   ==================================================================== */
@media (max-height: 500px) and (orientation: landscape) {

    .modal-overlay .modal,
    .settings-modal .modal-content,
    .modal-overlay > .modal-content,
    .eav-modal-overlay .eav-modal {
        max-height: 95vh !important;
        border-radius: 12px !important;
    }

    .modal-overlay,
    .settings-modal,
    .eav-modal-overlay {
        padding: 8px !important;
        align-items: center !important;
    }

    .modal-overlay .modal-dialog {
        border-radius: 12px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Smaller padding in landscape */
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 10px 14px !important;
    }
}


/* ====================================================================
   ANIMATION
   ==================================================================== */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ====================================================================
   SAFE AREA (iOS notch/home indicator)
   ==================================================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .modal-overlay .modal .modal-footer,
        .settings-modal .modal-content .modal-footer,
        .modal-overlay .modal-dialog {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
    }
}


/* ====================================================================
   SCROLL LOCK HELPER
   Body class to prevent background scroll when modal is open
   ==================================================================== */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}