.gifw-bottom-modal {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25vh; /* 40% da tela */
    background: #ffffff;
    border-top: 2px solid #ddd;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.25);
    z-index: 9999; /* Fica acima do mapa */
    display: none; /* Começa escondido */
    flex-direction: column;
}

.gifw-bottom-modal-header {
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gifw-bottom-modal-body {
    padding: 15px;
    overflow-y: auto;
    overflow-x: auto; /*  habilita a barra horizontal */
   /* height: calc(25vh - 50px); /* (ajuste: seu modal é 25vh, não 40vh) */*/
}
.line-clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
   /* padding: 3px 4px;*/
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
}

.line-clickable:hover {
    outline: 2px solid #17449833;
    background: #f5f9ff;
}

/* Cabeçalho da bottom modal totalmente transparente */
.gifw-bottom-modal-header {
    background-color: transparent !important;
    border: 0 !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* A barra das abas dentro da bottom modal: sem faixa cinza e sem espaço extra */
.gifw-bottom-modal .nav-tabs,
.gifw-bottom-modal-tabs {
    background-color: transparent !important;
    border-bottom: 0 !important;
    margin-bottom: 70px !important;
}

/* Tira qualquer borda/topo que apareça no conteúdo logo abaixo das abas */
.gifw-bottom-modal .tab-content {
    border-top: 0 !important;
    margin-top: 0 !important;
}

/* Abas (formato geral) */
.gifw-bottom-modal-tabs .nav-link {
    border: 0px;
    border-radius: 0.25rem 0.25rem 0px 0px;
    margin-bottom: 50px;
}

    /* Aba DESATIVADA → borda leve ao redor */
    .gifw-bottom-modal-tabs .nav-link:not(.active) {
        border: 1px solid #ccc !important;
        border-bottom: 0 !important; 
        background-color: #ffffff90 !important;
        margin-bottom: 0 !important; 
    }

    /* Aba ATIVA → sem borda, totalmente integrada ao layout */
    .gifw-bottom-modal-tabs .nav-link.active {
        border: none !important;
    }
    .gifw-bottom-modal-tabs .nav-link:not(.active) {
        z-index: 5;
        position: relative;
    }
/* Garante que o corpo da modal (grade/alert) fique branco por cima do mapa */
.gifw-bottom-modal .gifw-bottom-modal-body,
.gifw-bottom-modal .tab-pane {
    background-color: #fff;
    min-width: 0;
}
.gifw-bottom-modal-body table {
    white-space: nowrap;
}
/* Torna o botão fechar uma abinha */
/* Torna o botão fechar uma abinha */
#closeBottomModal {
    background: #ffffff90 !important; /* fundo igual ao da aba desativada */
    border: 1px solid #ccc !important; /* mesma borda */
    border-bottom: 0 !important; /* não deixa a borda descer */
    border-radius: 0.25rem 0.25rem 0 0; /* igual às abas */
    padding: 6px 10px !important; /* altura/espessura da aba */
    margin-left: 6px !important; /* separação pequena das abas */
    margin-bottom: -8px !important; /* 🔥 cola no fundo branco */
    position: relative;
    top: 0;
}


    /* Ícone do botão (X) fica mais visível */
    #closeBottomModal.btn-close {
        opacity: 1 !important;
        width:10px;
    }

    /* Remove o fundo azul que o Bootstrap coloca no hover do .btn-close */
    #closeBottomModal:hover {
        background: #ffffffc7 !important;
    }


    #closeBottomModal.btn-close {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 0 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z'/%3E%3C/svg%3E") !important;
        opacity: 1 !important;
    }
.feature-table-small th,
.feature-table-small td {
    font-size: 0.50rem !important; 
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.feature-table-small th {
    font-weight: 600;
}

#bottom-modal-pane-feature .fw-bold {
    font-size: 0.75rem !important; /* diminui o 'Feições retornadas' */
}
.table-feature tr th {
    font-size: 0.80rem !important; 
}
.table-feature tr td {
    font-size: 0.80rem !important;
}

/* Barra de rolagem horizontal e vertical */
.gifw-bottom-modal-body::-webkit-scrollbar {
    height: 24px; /* horizontal */
    width: 24px; /* vertical */
}

/* Trilho (fundo) */
.gifw-bottom-modal-body::-webkit-scrollbar-track {
    background: #e9eef6;
    border-radius: 8px;
}

/* “Thumb” (parte azul que desliza) */
.gifw-bottom-modal-body::-webkit-scrollbar-thumb {
    background-color: #0d6efd; /* azul Bootstrap */
    border-radius: 8px;
    border: 3px solid #e9eef6; /* cria efeito de espessura */
    width: 24px;
    height: 24px;
}

    /* Hover */
    .gifw-bottom-modal-body::-webkit-scrollbar-thumb:hover {
        background-color: #0b5ed7;
    }
.gifw-bottom-modal-body {
    scrollbar-width: thick; /* auto | thin | thick */
    scrollbar-color: #0d6efd #e9eef6; /* thumb | track */
}

/* A aba feature precisa ter um "viewport" com altura e overflow */
#bottom-modal-pane-feature {
    height: calc(25vh - 50px); /* ajuste se quiser */
    min-height: 0;
}

#bottom-modal-feature-body {
    height: 100%;
    overflow: auto; /* scroll vertical e horizontal */
    min-height: 0;
    max-width: 100%;
}

    /* se você usa .table-responsive dentro do feature */
    #bottom-modal-feature-body .table-responsive {
        overflow-x: auto !important;
        max-width: 100%;
    }

    /* força a tabela a poder ultrapassar a largura e gerar scrollbar */
    #bottom-modal-feature-body table {
        width: max-content !important;
        min-width: 100% !important;
        white-space: nowrap;
    }
    #bottom-modal-feature-body::-webkit-scrollbar {
        height: 24px;
        width: 24px;
    }

    #bottom-modal-feature-body::-webkit-scrollbar-track {
        background: #e9eef6;
        border-radius: 8px;
    }

    #bottom-modal-feature-body::-webkit-scrollbar-thumb {
        background: #0d6efd;
        border-radius: 8px;
        border: 3px solid #e9eef6;
    }

#bottom-modal-feature-body {
    scrollbar-width: thick; /* Firefox */
    scrollbar-color: #0d6efd #e9eef6; /* Firefox */
}

.gifw-bottom-modal {
    /* você já tem quase tudo, só garanta flex coluna */
    display: none; /* mantém seu comportamento */
    flex-direction: column; /* essencial */
    height: 25vh; /* inicial */
    min-height: 20vh; /* mínimo */
    max-height: 80vh; /* máximo */
}

/* handle (barra de arraste) */
.gifw-bottom-modal-resize-handle {
    height: 12px;
    cursor: ns-resize;
    touch-action: none; /* importantíssimo no mobile */
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* “pílula” visual */
    .gifw-bottom-modal-resize-handle::before {
        content: "";
        width: 48px;
        height: 5px;
        border-radius: 999px;
        background: #bfc7d1;
    }

/* evita selecionar texto enquanto arrasta */
body.resizing-bottom-modal {
    user-select: none;
}
.tab-content {
    flex: 1;
    min-height: 0; /* truque importantíssimo pra scroll funcionar dentro */
    display: flex;
    flex-direction: column;
}

.tab-pane.active {
    flex: 1;
    min-height: 0;
}

.gifw-bottom-modal-body {
    height: 100%;
    overflow: auto;
}

/* garante que o handle fique clicável */
.gifw-bottom-modal-resize-handle {
    position: relative;
    z-index: 9999;
    pointer-events: auto;
}

/* deixa o header/tabs abaixo do handle */
.gifw-bottom-modal-header,
.gifw-bottom-modal-tabs,
.gifw-bottom-modal-header .flex-grow-1 {
    position: relative;
    z-index: 1;
}

#bottomModalTabs li{
    margin-bottom:32px!important
}

/* =========================================================
   FIX: QUEM SCROLLA É O .gifw-bottom-modal-body (NÃO a tabela)
   ========================================================= */

/* 0) remove o “empurrão” que joga o body pra baixo */
#bottomModal .gifw-bottom-modal-tabs .nav-link,
#bottomModal #bottomModalTabs li {
    margin-bottom: 0 !important;
}

/* 1) garante que o body é o viewport real do scroll */
#bottomModal .tab-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#bottomModal .tab-pane.active {
    flex: 1;
    min-height: 0;
}

/* ✅ dono do scroll (alpha) */
#bottomModal #bottom-modal-pane-alpha .gifw-bottom-modal-body {
    /* height: 200px !important;*/
    overflow: auto !important;
    max-width: 100%;
}



/* 2) PROÍBE a tabela / wrapper de scrollar (é isso que está acontecendo hoje) */
#bottomModal .table-responsive,
#bottomModal .table-responsive * {
    overflow: visible !important;
}

/* se em algum lugar você cria wrapper custom pro grid */
#bottomModal .gifw-bottom-modal-body > div {
    overflow: visible;
}

/* 3) tabela pode ser maior (pra gerar scroll no body), sem quebrar */
#bottomModal .gifw-bottom-modal-body table {
    white-space: nowrap;
    width: max-content; /* deixa crescer horizontal */
    min-width: 100%; /* mas não encolhe demais */
}

/* 4) Scrollbar azul/grosso no dono do scroll */
#bottomModal #bottom-modal-pane-alpha .gifw-bottom-modal-body::-webkit-scrollbar,
#bottomModal #bottom-modal-pane-feature #bottom-modal-feature-body::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

#bottomModal #bottom-modal-pane-alpha .gifw-bottom-modal-body::-webkit-scrollbar-track,
#bottomModal #bottom-modal-pane-feature #bottom-modal-feature-body::-webkit-scrollbar-track {
    background: #e9eef6;
    border-radius: 8px;
}

#bottomModal #bottom-modal-pane-alpha .gifw-bottom-modal-body::-webkit-scrollbar-thumb,
#bottomModal #bottom-modal-pane-feature #bottom-modal-feature-body::-webkit-scrollbar-thumb {
    background-color: #0d6efd;
    border-radius: 8px;
    border: 3px solid #e9eef6;
}

#bottomModal #bottom-modal-pane-alpha .gifw-bottom-modal-body,
#bottomModal #bottom-modal-pane-feature #bottom-modal-feature-body {
    scrollbar-width: thick;
    scrollbar-color: #0d6efd #e9eef6;
}
/* quebra texto dentro das células longas */
.integration-wrap {
    white-space: normal !important; /* permite quebrar linha */
    overflow-wrap: anywhere; /* quebra palavras muito longas */
    word-break: break-word; /* fallback */
    line-height: 1.2;
}

/* opcional: dá uma largura mínima mais confortável pra long text */
.integration-table td.integration-wrap {
    min-width: 280px;
}
.text-start {
    white-space: normal !important; /* permite quebrar linha */
    
}
/* wrapper com rolagem horizontal */
.integration-table-wrap {
    overflow-x: auto;
}

/* faz a tabela ficar do tamanho do conteúdo (para de “esticar”) */
.integration-table {
    width: max-content; /* chave do fim do overspace */
    table-layout: auto; /* deixa coluna abraçar conteúdo */
}

    /* mantém tudo compactinho (exceto colunas longas que você marca) */
    .integration-table th,
    .integration-table td {
        white-space: nowrap;
    }

/* sua coluna de observações / texto longo quebra linha */
.integration-wrap {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.integration-table {
    table-layout: fixed;
    width: 100%;
}
/* ================================
   GRID DATA GENERIC GROUPED
   ================================ */

.grid-data-generic-grouped {
    border: 5px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden; /* 🔑 ESSENCIAL */
    background-color: #fff;
}

    /* remove conflito visual do bootstrap */
    .grid-data-generic-grouped table {
        margin-bottom: 0;
    }

    /* opcional: suavizar visual */
    .grid-data-generic-grouped thead th {
        background-color: #f8f9fa;
    }


/* 1) modal em coluna */
#bottomModal.gifw-bottom-modal {
    display: none; /* mantém seu comportamento */
    flex-direction: column;
    min-height: 20vh;
    max-height: 80vh;
}

/* 2) tab-content ocupa todo o espaço restante abaixo do header */
#bottomModal > .tab-content {
    flex: 1;
    min-height: 0; /* ESSENCIAL para permitir overflow interno */
    display: flex;
    flex-direction: column;
}

/* 3) cada pane ativa ocupa todo o espaço disponível */
#bottomModal .tab-pane {
    flex: 1;
    min-height: 0;
}

/* 4) o body é o viewport do grid e cresce com a modal */
#bottomModal #bottom-modal-pane-alpha .gifw-bottom-modal-body {
    flex: 1;
    min-height: 0;
    height: auto !important; /* mata calc(25vh...) e mata o 200px */
    overflow: auto !important;
}

/* 5) (se quiser) mesma lógica para a aba feature */
#bottomModal #bottom-modal-pane-feature {
    flex: 1;
    min-height: 0;
}

#bottomModal #bottom-modal-feature-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* 6) a tabela pode ser maior que o viewport, quem scrolla é o body */
#bottomModal .gifw-bottom-modal-body table {
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
}
.ol-scale-line,
.ol-scale-bar {
    position: fixed;
    left: 5px;
    bottom: 24px;
    z-index: 9999;
}
/* A camada .modal cobre a tela toda — então ela precisa "deixar passar" o clique */
#meta-modal {
    pointer-events: none;
}

    /* Mas o conteúdo da modal precisa continuar clicável */
    #meta-modal .modal-dialog,
    #meta-modal .modal-content {
        pointer-events: auto;
    }
.tab-content::-webkit-scrollbar {
    width: 28px!important; /*  MAIS GROSSA */
}

.tab-content::-webkit-scrollbar-track {
    background: #e9ecef;
    width: 28px !important; /*  MAIS GROSSA */
    border-radius: 8px;
}

.tab-content::-webkit-scrollbar-thumb {
    background-color: #0d6efd; /* azul Bootstrap */
    border-radius: 8px;
    border: 3px solid #e9ecef;
    width: 28px !important; /*  MAIS GROSSA */
}

    .tab-content::-webkit-scrollbar-thumb:hover {
        background-color: #0b5ed7;
    }

@media print {
    a.integration-url {
        white-space: normal;
    }

        a.integration-url::after {
            content: " (" attr(href) ")";
            font-size: 90%;
            word-break: break-all;
        }
}