/* IGREJA GESTÃO V74
   Correção específica para:
   1) rodapé/botões de modais sempre acessíveis no celular
   2) scroll interno real
   3) centralização de ícones dos botões quadrados/topo
*/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 767.98px) {

    /* =====================================================
       MODAIS BOOTSTRAP
       ===================================================== */
    body.modal-open {
        overflow: hidden !important;
        touch-action: none;
    }

    .modal {
        padding: 6px !important;
        overflow: hidden !important;
    }

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-dialog-centered {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        min-height: 0 !important;
        margin: 6px auto !important;
        display: flex !important;
        align-items: stretch !important;
    }

    .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 18px !important;
    }

    /* quando o FORM envolve body/footer */
    .modal-content > form,
    .modal-content form.v74-modal-form {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .modal-header {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 20 !important;
        background: #fff !important;
    }

    .modal-body,
    .v74-modal-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding-bottom: 28px !important;
    }

    .modal-footer,
    .v74-mobile-actions {
        flex: 0 0 auto !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 30 !important;
        width: 100% !important;
        margin: 0 !important;
        background: #fff !important;
        border-top: 1px solid #e7edf5 !important;
        box-shadow: 0 -8px 20px rgba(15, 47, 107, .08) !important;
        padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
    }

    .modal-footer .btn,
    .v74-mobile-actions .btn,
    .v74-mobile-actions button {
        min-height: 42px !important;
    }

    /* =====================================================
       MODAIS CUSTOMIZADOS - Kanban, solicitações, contas etc.
       A classe é aplicada pelo JS ao painel branco real.
       ===================================================== */
    .v74-custom-modal-panel {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        min-height: 0 !important;
        margin: 6px auto !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 18px !important;
    }

    .v74-custom-modal-panel > form {
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .v74-custom-modal-panel .v74-scroll-region {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        padding-bottom: 24px !important;
    }

    .v74-custom-modal-panel .v74-action-region {
        flex: 0 0 auto !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 50 !important;
        background: #fff !important;
        border-top: 1px solid #e7edf5 !important;
        box-shadow: 0 -8px 18px rgba(15, 47, 107, .08) !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }

    /* impede campos de ultrapassarem o modal */
    .modal input,
    .modal select,
    .modal textarea,
    .modal .form-control,
    .modal .form-select,
    .v74-custom-modal-panel input,
    .v74-custom-modal-panel select,
    .v74-custom-modal-panel textarea {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* =====================================================
       BOTÕES QUADRADOS DO TOPO — Estoque / Site da Igreja
       ===================================================== */
    [class*="topo-acoes"] > a,
    [class*="topo-acoes"] > button,
    [class*="header-actions"] > a,
    [class*="header-actions"] > button,
    .estoque-acoes > a,
    .estoque-acoes > button,
    .site-acoes > a,
    .site-acoes > button,
    .v74-square-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    [class*="topo-acoes"] > a > i,
    [class*="topo-acoes"] > button > i,
    [class*="topo-acoes"] > a > svg,
    [class*="topo-acoes"] > button > svg,
    [class*="header-actions"] > a > i,
    [class*="header-actions"] > button > i,
    [class*="header-actions"] > a > svg,
    [class*="header-actions"] > button > svg,
    .estoque-acoes i,
    .estoque-acoes svg,
    .site-acoes i,
    .site-acoes svg,
    .v74-square-action i,
    .v74-square-action svg {
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        transform: none !important;
        position: static !important;
    }

    /* pega botões quadrados apenas com ícone, independente do nome da classe */
    .v74-icon-only {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .v74-icon-only > i,
    .v74-icon-only > svg {
        margin: 0 !important;
        line-height: 1 !important;
        position: static !important;
        transform: none !important;
    }
}