/* paisagem celular: modais tela cheia + scroll interno */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 980px) and (hover: none) and (pointer: coarse) {
    body.web-pwa-mode .modal,
    body.web-pwa-mode .modal.is-windowed,
    body.web-pwa-mode .modal.is-phone-landscape-fullscreen,
    body.web-pwa-mode .track-catalog-modal {
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: var(--bg-body-fixed, var(--bg-secondary, #101820)) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.web-pwa-mode .modal .modal-content-base,
    body.web-pwa-mode .modal.is-windowed .modal-content-base,
    body.web-pwa-mode .modal.is-phone-landscape-fullscreen .modal-content-base,
    body.web-pwa-mode .track-catalog-modal .modal-content-base,
    body.web-pwa-mode #musicCatalogModal .modal-content-base,
    body.web-pwa-mode #musicCatalogModal .music-catalog-shell,
    body.web-pwa-mode #trackCatalogModal .modal-content-base,
    body.web-pwa-mode #trackCatalogModal .track-catalog-content,
    body.web-pwa-mode #spotScheduleModal .modal-content-base,
    body.web-pwa-mode #cameraModal .modal-content-base,
    body.web-pwa-mode #addMediaModal .modal-content-base,
    body.web-pwa-mode #apiConfigModal .modal-content-base,
    body.web-pwa-mode #manualCallShareModal .modal-content-base {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        resize: none !important;
        transform: none !important;
        overflow: hidden !important;
        contain: none !important;
    }

    body.web-pwa-mode #spotScheduleModal .modal-content-base {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    body.web-pwa-mode #trackCatalogModal .track-catalog-content {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }

    body.web-pwa-mode #musicCatalogModal .music-catalog-shell {
        display: grid !important;
    }

    body.web-pwa-mode #voiceInfoModal.voice-info-popover,
    body.web-pwa-mode #voiceInfoModal.voice-info-popover .modal-content-base {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
    }

    body.web-pwa-mode .modal .modal-header,
    body.web-pwa-mode .modal .modal-header-clean,
    body.web-pwa-mode .modal .track-catalog-header,
    body.web-pwa-mode .modal .track-catalog-toolbar,
    body.web-pwa-mode .modal .modal-footer,
    body.web-pwa-mode .modal .track-catalog-footer {
        flex: 0 0 auto !important;
    }

    body.web-pwa-mode .modal .modal-header,
    body.web-pwa-mode .modal .modal-header-clean {
        padding-top: max(8px, var(--rl-mobile-safe-top, env(safe-area-inset-top, 0px))) !important;
        padding-right: max(10px, var(--rl-mobile-safe-right, env(safe-area-inset-right, 0px))) !important;
        padding-left: max(10px, var(--rl-mobile-safe-left, env(safe-area-inset-left, 0px))) !important;
    }

    body.web-pwa-mode #createCallModal.create-call-modal-v4 .modal-header {
        --ccm-header-control-h: 34px;
        padding-top: calc(
            (8px * var(--ccm-header-scale, 0.7))
            + max(12px, var(--rl-mobile-safe-top, env(safe-area-inset-top, 0px)))
        ) !important;
        padding-right: max(
            calc(12px * var(--ccm-header-scale, 0.7)),
            var(--rl-mobile-safe-right, env(safe-area-inset-right, 0px))
        ) !important;
        padding-bottom: calc(8px * var(--ccm-header-scale, 0.7)) !important;
        padding-left: max(
            calc(12px * var(--ccm-header-scale, 0.7)),
            var(--rl-mobile-safe-left, env(safe-area-inset-left, 0px))
        ) !important;
    }

    /* scroll canônico do corpo */
    body.web-pwa-mode .modal .modal-body,
    body.web-pwa-mode .modal form.modal-body,
    body.web-pwa-mode .modal .add-media-body,
    body.web-pwa-mode .modal .camera-body,
    body.web-pwa-mode .modal .spot-schedule-body,
    body.web-pwa-mode .modal .usage-details-panel-body,
    body.web-pwa-mode .modal .update-modal-body,
    body.web-pwa-mode #createCallModal.create-call-modal-v4 .modal-body,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-windowed .modal-body,
    body.web-pwa-mode #createCallModal.create-call-modal-v4:not(.is-windowed) .modal-body,
    body.web-pwa-mode #cameraModal .modal-body,
    body.web-pwa-mode #cameraModal .camera-body,
    body.web-pwa-mode #spotScheduleModal .modal-body,
    body.web-pwa-mode #apiConfigModal .modal-body,
    body.web-pwa-mode #addMediaModal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    body.web-pwa-mode .modal .modal-footer {
        margin-top: auto !important;
        padding-right: max(10px, var(--rl-mobile-safe-right, env(safe-area-inset-right, 0px))) !important;
        padding-bottom: max(8px, var(--rl-mobile-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
        padding-left: max(10px, var(--rl-mobile-safe-left, env(safe-area-inset-left, 0px))) !important;
    }

    /* spot: região interna */
    body.web-pwa-mode #spotScheduleModal .spot-schedule-scroll-region {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    /* catálogos: grade / toggles */
    body.web-pwa-mode #trackCatalogModal .track-catalog-body,
    body.web-pwa-mode #musicCatalogModal .track-catalog-body,
    body.web-pwa-mode #musicCatalogModal #musicCatalogSearchStage,
    body.web-pwa-mode #musicCatalogModal .music-catalog-body-simple {
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: hidden !important;
    }

    body.web-pwa-mode #trackCatalogModal .track-catalog-grid,
    body.web-pwa-mode #trackCatalogModal .track-catalog-grid.clusterize-scroll,
    body.web-pwa-mode #musicCatalogModal .music-catalog-toggles-scroll,
    body.web-pwa-mode #musicCatalogModal #musicCatalogGrid,
    body.web-pwa-mode #musicCatalogModal .track-catalog-grid.clusterize-scroll {
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    body.web-pwa-mode #createCallModal.create-call-modal-v4 :is(.ccm-shell, .ccm-panel, .ccm-panel-stage) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body.web-pwa-mode #createCallModal.create-call-modal-v4 .ccm-voice-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    /* create-call: vence #id windowed; 100vw/100dvh */
    body.web-pwa-mode #createCallModal.create-call-modal-v4,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-open,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-windowed,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-windowed-fixed-size,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-phone-landscape-fullscreen,
    body.web-pwa-mode #createCallModal.create-call-modal-v4:not(.is-windowed) {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: var(--bg-body-fixed, var(--rl-admin-app-bg, var(--bg-secondary, #101820))) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.web-pwa-mode #createCallModal.create-call-modal-v4 .modal-content-base,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-windowed .modal-content-base,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-windowed-fixed-size .modal-content-base,
    body.web-pwa-mode #createCallModal.create-call-modal-v4.is-phone-landscape-fullscreen .modal-content-base,
    body.web-pwa-mode #createCallModal.create-call-modal-v4:not(.is-windowed) .modal-content-base {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        resize: none !important;
        transform: none !important;
        overflow: hidden !important;
        contain: none !important;
    }
}