/*
 * Telas dos módulos (app/Modules): filtros, campos e grid.
 * Escopado em .modulo-filtros / .modulo-grid para não alterar as telas legadas.
 * Usa as variáveis de tema do portal (formulario.css / publicacao.css), inclusive no modo escuro.
 */

.modulo-filtros,
.modulo-grid {
    --modulo-destaque: var(--secondBackgroundColor, #63999c);
    --modulo-borda: var(--input-border-color, #ced4da);
    --modulo-fundo: var(--pln-form-card-background, #ffffff);
    --modulo-fundo-campo: var(--pln-input-background, #ffffff);
    --modulo-texto: var(--text-color, #212529);
    --modulo-rotulo: var(--pln-label-color, #676565);
    --modulo-raio: 8px;
    --modulo-altura-campo: 38px;

    background: var(--modulo-fundo);
    border: 1px solid var(--modulo-borda);
    border-radius: var(--modulo-raio);
    margin-bottom: 16px;
}

/* -- Página (x-modulos.pagina) --------------------------------------- */

.modulo-pagina {
    --modulo-destaque: var(--secondBackgroundColor, #63999c);
}

.modulo-pagina__trilha .breadcrumb {
    margin: 0 0 8px;
    padding: 4px 6px;
    font-size: 13px;
    background: transparent;
}

.modulo-pagina__trilha .breadcrumb-item a {
    font-weight: 600;
    color: var(--modulo-destaque);
    text-decoration: none;
}

.modulo-pagina__trilha .breadcrumb-item a:hover {
    text-decoration: underline;
}

.modulo-pagina__trilha .breadcrumb-item.active {
    color: var(--pln-label-color, #676565);
}

.modulo-pagina__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 0 10px 8px;
}

.modulo-pagina__titulo {
    margin: 0;
    line-height: 1.3;
}

.modulo-pagina__atualizacao {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.modulo-pagina__atualizacao strong {
    color: var(--modulo-destaque);
}

.modulo-pagina__conteudo {
    padding-top: 6px;
}

@media (max-width: 767px) {
    .modulo-pagina__cabecalho {
        flex-direction: column;
        align-items: flex-start;
    }

    .modulo-pagina__titulo {
        display: block;
        margin-bottom: 0;
        font-size: 22px;
    }
}

/* -- Filtros ----------------------------------------------------------- */

.modulo-filtros {
    padding: 16px;
}

.modulo-filtros__campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 16px;
    align-items: end;
}

.modulo-filtros__acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--modulo-borda);
}

.modulo-botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--modulo-altura-campo);
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--modulo-destaque);
    background: var(--modulo-destaque);
    color: var(--mainColor, #ffffff);
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

.modulo-botao:hover {
    filter: brightness(0.93);
}

.modulo-botao:focus-visible {
    outline: 2px solid var(--modulo-destaque);
    outline-offset: 2px;
}

.modulo-botao--secundario {
    background: transparent;
    color: var(--modulo-destaque);
}

.modulo-botao--secundario:hover {
    background: color-mix(in srgb, var(--modulo-destaque) 10%, transparent);
    filter: none;
}

/* -- Campos ------------------------------------------------------------ */

.modulo-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.modulo-campo__rotulo {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--modulo-rotulo);
    letter-spacing: 0.3px;
}

.modulo-campo__controle {
    width: 100%;
    height: var(--modulo-altura-campo);
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--modulo-texto);
    background: var(--modulo-fundo-campo);
    border: 1px solid var(--modulo-borda);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modulo-campo__controle:focus {
    outline: none;
    border-color: var(--modulo-destaque);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modulo-destaque) 20%, transparent);
}

/* -- Select (bootstrap-select), sobrescreve o formulario.css global ------ */

.modulo-campo .bootstrap-select {
    width: 100% !important;
    height: var(--modulo-altura-campo);
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.modulo-campo .bootstrap-select > .dropdown-toggle,
.modulo-campo .bootstrap-select > .dropdown-toggle.bs-placeholder {
    height: var(--modulo-altura-campo);
    padding: 0 32px 0 12px !important;
    font-size: 14px;
    color: var(--modulo-texto) !important;
    background: var(--modulo-fundo-campo) !important;
    border: 1px solid var(--modulo-borda) !important;
    border-radius: 6px;
    box-shadow: none !important;
}

.modulo-campo .bootstrap-select > .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
    height: 100%;
}

.modulo-campo .bootstrap-select > .dropdown-toggle::after,
.modulo-campo .bootstrap-select > .dropdown-toggle .bs-caret {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: 0 !important;
    transform: translateY(-50%);
}

.modulo-campo .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modulo-campo .bootstrap-select.show > .dropdown-toggle,
.modulo-campo .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--modulo-destaque) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modulo-destaque) 20%, transparent) !important;
    outline: none !important;
}

.modulo-campo .bootstrap-select .filter-option-inner-inner {
    font-weight: 400;
    color: var(--modulo-texto);
}

.modulo-campo .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: var(--modulo-rotulo);
}

/* O bootstrap-select usa .dropdown-menu no container (filho direto) e na lista (ul.inner):
   o cartão vale só para o container; a lista não pode ter borda nem altura própria, senão os
   itens transbordam da caixa enquanto a div.inner é que rola. */
.modulo-campo .bootstrap-select > .dropdown-menu {
    min-width: max(100%, 320px) !important;
    max-width: min(480px, 90vw);
    margin-top: 4px;
    padding: 4px;
    background: var(--modulo-fundo-campo) !important;
    border: 1px solid var(--modulo-borda);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.modulo-campo .bootstrap-select .dropdown-menu.inner {
    position: static;
    min-width: 0 !important;
    max-width: none;
    max-height: none !important;
    margin: 0;
    padding: 0;
    background: transparent !important;
    color: var(--modulo-texto) !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.modulo-campo .bootstrap-select .bs-searchbox {
    background: transparent !important;
    padding: 4px 4px 6px;
}

.modulo-campo .bootstrap-select .bs-searchbox .form-control {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    font-size: 14px;
    color: var(--modulo-texto) !important;
    background: var(--modulo-fundo-campo) !important;
    border: 1px solid var(--modulo-borda) !important;
    border-radius: 6px;
}

.modulo-campo .bootstrap-select .bs-searchbox .form-control:focus {
    border-color: var(--modulo-destaque) !important;
    box-shadow: none;
}

.modulo-campo .bootstrap-select .dropdown-item {
    padding: 7px 10px;
    font-size: 14px;
    color: var(--modulo-texto) !important;
    background: transparent !important;
    border-radius: 4px;
    white-space: normal;
}

.modulo-campo .bootstrap-select .dropdown-item:hover,
.modulo-campo .bootstrap-select .dropdown-item:focus,
.modulo-campo .bootstrap-select li.active > .dropdown-item {
    background: color-mix(in srgb, var(--modulo-destaque) 14%, transparent) !important;
    color: var(--modulo-texto) !important;
}

.modulo-campo .bootstrap-select li.selected > .dropdown-item {
    font-weight: 600;
    color: var(--modulo-destaque) !important;
}

.modulo-campo .bootstrap-select .no-results {
    margin: 4px;
    padding: 7px 10px;
    font-size: 14px;
    background: transparent !important;
    color: var(--modulo-rotulo) !important;
}

/* -- Grid -------------------------------------------------------------- */

.modulo-grid {
    overflow: hidden;
}

.modulo-grid__cabecalho {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--mainColor, #ffffff);
    background: var(--modulo-destaque);
}

.modulo-grid__corpo {
    padding: 16px;
}

/* Barra e rodapé próprios (dom do componente): não herdam o empilhamento global
   do publicacao.css (.dataTables_wrapper > .row abaixo de 1400px). */
/* A integração DataTables/Bootstrap põe container-fluid (padding 15px) no wrapper. */
.modulo-grid .dataTables_wrapper {
    padding: 0;
}

.modulo-grid__barra,
.modulo-grid__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.modulo-grid__barra {
    margin-bottom: 12px;
}

.modulo-grid__rodape {
    margin-top: 12px;
}

.modulo-grid__tamanho,
.modulo-grid__busca,
.modulo-grid__info {
    flex: 1 1 0;
    min-width: 180px;
}

.modulo-grid__busca {
    display: flex;
    justify-content: flex-end;
}

.modulo-grid__botoes {
    flex: 0 0 auto;
}

.modulo-grid__paginacao {
    flex: 0 0 auto;
}

.modulo-grid .dataTables_length,
.modulo-grid .dataTables_filter,
.modulo-grid .dataTables_info {
    margin: 0;
    padding: 0;
    text-align: left;
}

.modulo-grid .dataTables_length label,
.modulo-grid .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

.modulo-grid .dataTables_length select,
.modulo-grid .dataTables_filter input {
    height: 34px;
    margin: 0 !important;
    padding: 0 10px;
    font-size: 14px;
    color: var(--modulo-texto);
    background: var(--modulo-fundo-campo);
    border: 1px solid var(--modulo-borda);
    border-radius: 6px;
}

.modulo-grid .dataTables_filter input {
    width: 220px;
}

.modulo-grid .dataTables_filter input:focus,
.modulo-grid .dataTables_length select:focus {
    outline: none;
    border-color: var(--modulo-destaque);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modulo-destaque) 20%, transparent);
}

.modulo-grid .dataTables_paginate {
    margin: 0 !important;
}

@media (max-width: 767px) {
    .modulo-grid__barra,
    .modulo-grid__rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .modulo-grid__busca {
        justify-content: flex-start;
    }

    .modulo-grid .dataTables_filter,
    .modulo-grid .dataTables_filter label {
        width: 100%;
    }

    .modulo-grid .dataTables_filter input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .modulo-grid__tamanho,
    .modulo-grid__busca,
    .modulo-grid__info {
        min-width: 0;
        text-align: center;
    }

    .modulo-grid__barra > *,
    .modulo-grid__rodape > * {
        max-width: 100%;
    }

    .modulo-grid .dataTables_length label {
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }

    .modulo-grid .dt-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .modulo-grid .dataTables_length,
    .modulo-grid .dataTables_info {
        text-align: center;
    }

    .modulo-grid .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .modulo-grid__corpo {
        padding: 12px;
    }

    .modulo-grid__botoes,
    .modulo-grid__paginacao {
        display: flex;
        justify-content: center;
    }
}

/* -- Filtros na coluna (linha abaixo do título, igual ao siplan-v2) ---- */

.modulo-grid thead .modulo-grid__linha-filtros th {
    padding: 4px !important;
    background: var(--modulo-fundo);
    vertical-align: middle;
}

.modulo-grid thead .modulo-grid__linha-filtros th::before,
.modulo-grid thead .modulo-grid__linha-filtros th::after {
    display: none !important;
}

.modulo-grid .modulo-grid__filtro-campo {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 70px;
    margin: 0;
    height: 30px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--modulo-texto);
    background: var(--modulo-fundo-campo);
    border: 1px solid var(--modulo-borda);
    border-radius: 4px;
}

/* O scroll do DataTables mantém um clone do thead no corpo só para medir as colunas.
   A linha de filtros do clone precisa continuar lá (a largura mínima dos campos define a largura
   das colunas do corpo), mas sem altura, para não deixar faixa vazia antes da 1ª linha. */
.modulo-grid .dataTables_scrollBody thead .modulo-grid__linha-filtros th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.modulo-grid .modulo-grid__filtro-campo:focus {
    outline: none;
    border-color: var(--modulo-destaque);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--modulo-destaque) 20%, transparent);
}

.modulo-grid .modulo-grid__filtro-campo[type="date"] {
    min-width: 125px;
}