/* tab-anuencias.css - Estilos responsivos para #tableAnuencias
   Espelha tab-processos.css (mesma estrutura de 6 colunas: Nº/Tipo/Data/
   Validade/Situação/Resumo), escopado ao próprio ID para não depender de
   `.card-body.table-responsive { overflow-x: visible }` daquele arquivo —
   aquela regra desliga o scroll horizontal partindo do princípio de que o
   layout de cards abaixo assume o mobile; sem o layout próprio aqui, a
   tabela ficava larga e sem scroll, estourando a viewport. */

/* =========================================== */
/* CONFIGURAÇÕES GERAIS                        */
/* =========================================== */

#tableAnuencias {
    font-size: 0.95rem;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
}

#tableAnuencias thead th {
    white-space: nowrap;
    vertical-align: middle;
}

#tableAnuencias tbody td {
    padding: 0.75rem;
    vertical-align: middle;
}

/* Larguras mínimas gerais */
#tableAnuencias .column1 { min-width: 140px; }
#tableAnuencias .column5 { min-width: 110px; }
#tableAnuencias .column6 { min-width: 110px; text-align: center; }
#tableAnuencias .column7 { min-width: 120px; }

/* Desktop: colunas proporcionais, primeira à esquerda, última à direita */
@media (min-width: 992px) {
    #tableAnuencias {
        table-layout: fixed;
        width: 100%;
    }

    #tableAnuencias thead th:nth-child(1),
    #tableAnuencias tbody td:nth-child(1) { width: 18%; } /* Nº Anuência */

    #tableAnuencias thead th:nth-child(2),
    #tableAnuencias tbody td:nth-child(2) { width: 16%; } /* Tipo */

    #tableAnuencias thead th:nth-child(3),
    #tableAnuencias tbody td:nth-child(3) { width: 16%; } /* Data de Emissão */

    #tableAnuencias thead th:nth-child(4),
    #tableAnuencias tbody td:nth-child(4) { width: 16%; } /* Validade */

    #tableAnuencias thead th:nth-child(5),
    #tableAnuencias tbody td:nth-child(5) { width: 16%; } /* Situação */

    #tableAnuencias thead th:nth-child(6),
    #tableAnuencias tbody td:nth-child(6) { width: 18%; } /* Resumo */

    #tableAnuencias thead th,
    #tableAnuencias tbody td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
    }
}

/* =========================================== */
/* MOBILE (<768px) — estilo card               */
/* =========================================== */

@media (max-width: 767.98px) {

    /* Ocultar cabeçalho */
    #tableAnuencias thead {
        display: none;
    }

    /* Transformar em blocos */
    #tableAnuencias,
    #tableAnuencias tbody,
    #tableAnuencias tr,
    #tableAnuencias td {
        display: block;
        width: 100%;
    }

    /* Cada linha vira um card */
    #tableAnuencias tr {
        margin-bottom: 0;
        border: none;
        border-bottom: 1px solid #dee2e6;
        border-radius: 0;
        padding: 1rem;
        box-shadow: none;
        position: relative;
    }

    #tableAnuencias tr:last-child {
        border-bottom: none;
    }

    /* Células */
    #tableAnuencias td {
        border: none;
        padding: 0.5rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        gap: 8px;
    }

    #tableAnuencias td:last-child {
        border-bottom: none;
        padding-top: 0.75rem;
    }

    /* Rótulo à esquerda */
    #tableAnuencias td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #495057;
        flex-shrink: 0;
        text-align: left;
    }

    /* Valor à direita — funciona para texto puro e elementos filhos */
    #tableAnuencias td {
        justify-content: space-between;
    }

    #tableAnuencias td > * {
        margin-left: auto;
        text-align: right;
    }

    /* Coluna Resumo: rótulo à esquerda, botão à direita */
    #tableAnuencias td[data-label="Resumo"] {
        justify-content: space-between;
    }

    #tableAnuencias td[data-label="Resumo"] .btn {
        margin-left: auto;
    }

    /* Remover min/max-width fixo no mobile */
    #tableAnuencias .column1,
    #tableAnuencias .column5,
    #tableAnuencias .column6,
    #tableAnuencias .column7 {
        max-width: none;
        min-width: 0;
        text-align: left;
    }

    /* Scroll horizontal desativado no mobile: o layout de cards acima não
       precisa dele, e a regra genérica de tab-processos.css já faz isso
       para qualquer .card-body.table-responsive — repetida aqui só para
       este arquivo não depender daquele. */
    .card-body.table-responsive {
        overflow-x: visible;
    }

    /* Paginação do DataTables: o wrapper (#tableAnuencias_wrapper) fica
       fora do <table> que virou cards, então não herda o layout acima. Sem
       isto os botões "Anterior/1/2/3/Próximo" ficam numa linha só e
       estouram a largura da tela, forçando scroll horizontal na página
       inteira mesmo com a tabela já em modo card. */
    /* Especificidade (0,3,0) para vencer o <style> inline da página, que
       aplica float:right/left !important com o mesmo peso de !important
       mas carrega depois no documento — em empate de !important, quem
       aparece por último no DOM vence, então uma regra igualmente
       específica não bastava. */
    div#tableAnuencias_wrapper div.dataTables_paginate,
    div#tableAnuencias_wrapper div.dataTables_length {
        float: none !important;
        width: 100%;
        text-align: center !important;
        margin-top: 10px;
    }

    div#tableAnuencias_wrapper div.dataTables_paginate {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    /* Bootstrap define .pagination como flex com nowrap; sem sobrescrever
       aqui, a lista de páginas (ul dentro do dataTables_paginate) mantém
       todos os botões numa linha só e volta a estourar a largura. */
    div#tableAnuencias_wrapper .dataTables_paginate ul.pagination {
        flex-wrap: wrap !important;
        justify-content: center;
        margin: 0;
    }

    #tableAnuencias_wrapper .dataTables_paginate .page-link {
        padding: 0.3rem 0.55rem !important;
        font-size: 0.8rem !important;
    }
}

/* =========================================== */
/* TELAS MUITO PEQUENAS (<576px)               */
/* =========================================== */

@media (max-width: 575.98px) {
    #tableAnuencias tr {
        padding: 0.75rem;
    }
}

/* =========================================== */
/* TABLET (768px – 991px)                      */
/* =========================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    #tableAnuencias th,
    #tableAnuencias td {
        font-size: 0.875rem;
        padding: 0.5rem 0.6rem;
    }

    #tableAnuencias .column1 { min-width: 120px; }
    #tableAnuencias .column5 { min-width: 100px; }
    #tableAnuencias .column6 { min-width: 100px; }
    #tableAnuencias .column7 { min-width: 100px; }
}