/* IGREJA GESTÃO V73
   Correção real de responsividade + cache.
   Este arquivo usa seletores da estrutura atual do sistema. */

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

*, *::before, *::after {
    box-sizing: border-box;
}

img, svg, canvas {
    max-width: 100%;
}

/* =========================================================
   ÍCONES CENTRALIZADOS EM BOTÕES
   ========================================================= */
.v73-icon-only,
.btn-icon,
.m-btn-action,
.btn-close,
.modal .close,
.modal [data-dismiss="modal"],
.modal [data-bs-dismiss="modal"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.v73-icon-only > i,
.btn-icon > i,
.m-btn-action > i,
.btn-close > i,
.modal .close > i,
.modal [data-dismiss="modal"] > i,
.modal [data-bs-dismiss="modal"] > i {
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================================
   MODAIS MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
    body.modal-open {
        overflow: hidden !important;
    }

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

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    .modal-content {
        max-height: calc(100dvh - 16px) !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    .modal-header,
    .modal-footer {
        flex: 0 0 auto !important;
    }

    .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    .modal-footer {
        position: relative !important;
        z-index: 10 !important;
        background: #fff !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    .modal input,
    .modal textarea,
    .modal select,
    .modal .form-control,
    .modal .form-select,
    .modal .input-group {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   MEMBROS — LISTA COMPACTA NO CELULAR
   Estrutura real: .membros-table / .membro-row
   ========================================================= */
@media (max-width: 767.98px) {
    .membros-table-wrap {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .membros-table,
    .membros-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .membros-table thead {
        display: none !important;
    }

    .membros-table tr.membro-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "identidade acoes"
            "contato acoes" !important;
        align-items: center !important;
        gap: 4px 10px !important;
        width: 100% !important;
        min-height: 78px !important;
        margin: 0 0 9px 0 !important;
        padding: 10px 11px !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 8px rgba(15, 47, 107, .035) !important;
    }

    .membros-table tr.membro-row > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Membro */
    .membros-table tr.membro-row > td:nth-child(1) {
        grid-area: identidade !important;
    }

    .membros-table .membro-identidade {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .membros-table .membro-avatar {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        flex: 0 0 50px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .membros-table .membro-avatar img {
        width: 50px !important;
        height: 50px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    .membros-table .membro-identidade > div {
        min-width: 0 !important;
    }

    .membros-table .membro-identidade strong {
        display: block !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #172033 !important;
    }

    /* usuário pediu apenas foto, nome, WhatsApp e ação */
    .membros-table .membro-badge {
        display: none !important;
    }

    /* Contato */
    .membros-table tr.membro-row > td:nth-child(2) {
        grid-area: contato !important;
        padding-left: 60px !important;
        margin-top: -20px !important;
    }

    .membros-table .membro-contato {
        display: block !important;
        min-width: 0 !important;
    }

    .membros-table .membro-contato > * {
        display: none !important;
    }

    .membros-table .membro-contato > *:first-child {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        color: #64748b !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .membros-table .membro-contato > *:first-child i {
        color: #16a34a !important;
        line-height: 1 !important;
    }

    /* esconde departamento/cargo, dados pessoais e cadastro */
    .membros-table tr.membro-row > td:nth-child(3),
    .membros-table tr.membro-row > td:nth-child(4),
    .membros-table tr.membro-row > td:nth-child(5) {
        display: none !important;
    }

    /* Ações */
    .membros-table tr.membro-row > td:nth-child(6) {
        grid-area: acoes !important;
        align-self: center !important;
    }

    .membros-table .membro-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .membros-table .m-btn-action {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        font-size: 0 !important;
    }

    .membros-table .m-btn-action i {
        font-size: 15px !important;
    }

    .membros-table .m-btn-edit span {
        display: none !important;
    }

    #membrosNoResults {
        display: none;
    }

    #membrosNoResults:not([hidden]) {
        display: block !important;
    }
}

/* =========================================================
   PAINEL — MOBILE PADRONIZADO
   Estrutura real: .painel-profissional
   ========================================================= */
@media (max-width: 767.98px) {
    main.painel-profissional,
    .painel-profissional {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        overflow-x: hidden !important;
    }

    .painel-profissional > *,
    .painel-grade-principal,
    .painel-coluna-principal,
    .painel-coluna-lateral,
    .painel-duas-colunas,
    .painel-kpis {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .painel-grade-principal,
    .painel-duas-colunas,
    .painel-coluna-lateral {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .painel-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .painel-kpi-card,
    .painel-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    .painel-card {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    .painel-kpi-card {
        padding: 12px !important;
        gap: 9px !important;
    }

    .painel-kpi-conteudo {
        min-width: 0 !important;
    }

    .painel-kpi-conteudo span,
    .painel-kpi-conteudo strong {
        overflow-wrap: anywhere !important;
    }

    .painel-card-header,
    .painel-card-header.compacto {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .painel-card-header > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .painel-card-header h2,
    .painel-card-header p,
    .painel-card-header strong,
    .painel-card-header span {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .painel-tabela-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .painel-tabela-scroll table {
        min-width: 620px !important;
        width: max-content !important;
    }

    .painel-lista-financeira,
    .painel-metas-lista,
    .painel-lista-simples,
    .painel-anotacoes,
    .painel-indicadores-membros {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .painel-lista-item,
    .painel-lista-simples-item,
    .painel-indicador-membro,
    .painel-anotacao-item,
    .painel-meta-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .painel-lista-simples-item strong {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .painel-vazio,
    .painel-vazio-tabela {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        padding: 12px 6px !important;
        text-align: center !important;
    }

    /* gráficos não podem sair do card */
    .painel-grafico-provisionamento,
    .painel-grafico-lateral,
    #painelProvisionamentoChart,
    #painelBancosChart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .painel-grafico-provisionamento svg,
    .painel-grafico-lateral svg,
    #painelProvisionamentoChart svg,
    #painelBancosChart svg,
    .painel-grafico-provisionamento canvas,
    .painel-grafico-lateral canvas,
    #painelProvisionamentoChart canvas,
    #painelBancosChart canvas {
        max-width: 100% !important;
    }

    .painel-topo {
        width: 100% !important;
        max-width: 100% !important;
    }

    .painel-topo-acoes {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   SIMPLE DATATABLES MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
    .dataTable-wrapper,
    .datatable-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .dataTable-top,
    .datatable-top {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .dataTable-dropdown,
    .datatable-dropdown {
        flex: 0 0 auto !important;
    }

    .dataTable-search,
    .datatable-search {
        flex: 1 1 170px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .dataTable-input,
    .datatable-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dataTable-container,
    .datatable-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}