/* ============================================================================
   THEME — visionOS dark glass · Portal Tools (21/07/2026)
   Camada global de tema carregada no index.html, DEPOIS do Bootstrap e ANTES
   dos estilos das telas. Overrides usam !important apenas em superfície/cor
   pra vencer folhas injetadas pelas views sem alterá-las.
   Performance: backdrop-filter SÓ em superfícies grandes (sidebar, cards,
   modais, dropdowns, thead) — nunca por linha de tabela. Fundo em gradiente
   puro (sem imagem) = zero download.
   ========================================================================== */

:root {
    --vos-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --vos-text: rgba(255, 255, 255, 0.92);
    --vos-text-dim: rgba(255, 255, 255, 0.60);
    --vos-glass: rgba(255, 255, 255, 0.055);
    --vos-glass-strong: rgba(30, 34, 54, 0.62);
    --vos-stroke: rgba(255, 255, 255, 0.12);
    --vos-stroke-soft: rgba(255, 255, 255, 0.07);
    --vos-accent: #0a84ff;
    --vos-accent-soft: rgba(10, 132, 255, 0.35);
    --vos-green: #30d158;
    --vos-red: #ff453a;
    --vos-radius: 16px;
    --vos-radius-sm: 10px;
    /* Blur reduzido (perf): raio menor custa MUITO menos GPU; usado só em
       superfícies pequenas/estáticas (modal, dropdown). Sidebar/cards/thead
       usam fundo semi-opaco — visual quase idêntico sobre fundo escuro. */
    --vos-blur: saturate(150%) blur(10px);
    --vos-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
}

/* ---------- Base: fonte SF + fundo visionOS (sem imagem) ------------------ */
html, body {
    font-family: var(--vos-font) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
    color: var(--vos-text);
}

body {
    background-color: #060812 !important;
    background-image:
        radial-gradient(1100px 700px at 75% -10%, rgba(46, 78, 160, 0.42), transparent 60%),
        radial-gradient(900px 640px at -10% 108%, rgba(10, 132, 255, 0.16), transparent 55%),
        radial-gradient(520px 420px at 96% 88%, rgba(120, 84, 255, 0.10), transparent 60%),
        linear-gradient(180deg, #070912 0%, #0a0d1c 100%) !important;
    /* SEM background-attachment:fixed — força repintura do gradiente a cada
       scroll e foi a principal causa de lentidão percebida. */
    background-size: cover !important;
}

button, input, select, textarea, table, .btn, .form-control, .dropdown-menu,
.list-group-item, .card, .modal-content, .selectpicker, .bootstrap-select {
    font-family: var(--vos-font) !important;
}

/* ---------- Scrollbars finas ---------------------------------------------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); background-clip: content-box; }

/* ---------- Sidebar (shell) ----------------------------------------------- */
.wrapper {
    background: rgba(16, 20, 34, 0.90) !important;   /* sem blur (perf) */
    border-right: 1px solid var(--vos-stroke-soft);
    box-shadow: var(--vos-shadow);
}

.list-group-item, .sub-group {
    background: transparent !important;
    color: var(--vos-text) !important;
    border: none !important;
    border-radius: var(--vos-radius-sm) !important;
    margin: 2px 8px !important;
    transition: background 150ms ease, transform 150ms ease;
}
.list-group-item::after { content: none !important; }   /* remove "////////" */
.list-group-item:before { display: none !important; }   /* remove sweep skew */
.sub-group { font-size: 0.86rem; color: var(--vos-text-dim) !important; }
.sub-group:hover, .list-group-item:hover, .menu-text:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}
.list-group-item[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08) !important; }

/* ---------- Barra superior ------------------------------------------------- */
.navbar-tex { background: transparent !important; }
.navbar-tex h1.username {
    font-size: 1.05rem !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ---------- Cards / painéis de vidro -------------------------------------- */
.card {
    background: rgba(24, 28, 46, 0.92) !important;   /* sem blur (perf) */
}
.card, .modal-content {
    background: rgba(24, 28, 46, 0.92) !important;
    border: 1px solid var(--vos-stroke) !important;
    border-radius: var(--vos-radius) !important;
    box-shadow: var(--vos-shadow) !important;
    color: var(--vos-text) !important;
}
.card-header, .modal-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--vos-stroke-soft) !important;
    border-radius: var(--vos-radius) var(--vos-radius) 0 0 !important;
    color: var(--vos-text) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.card-footer, .modal-footer {
    background: rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid var(--vos-stroke-soft) !important;
    border-radius: 0 0 var(--vos-radius) var(--vos-radius) !important;
}
.bg-darkblue, .bg-dark { background: transparent !important; }
.card.bg-white, .card .bg-white, .modal-content.bg-white { background: var(--vos-glass-strong) !important; }
.text-dark { color: var(--vos-text) !important; }

/* ---------- Botões (cápsulas visionOS) ------------------------------------ */
.btn {
    border-radius: 999px !important;
    border: 1px solid var(--vos-stroke) !important;
    background: rgba(255, 255, 255, 0.08);
    color: var(--vos-text);
    font-weight: 500;
    padding: 0.32rem 1.05rem;
    transition: background 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary {
    background: linear-gradient(180deg, #2a93ff, #0a6fe0) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.35);
}
.btn-primary:hover { background: linear-gradient(180deg, #3f9fff, #1d7ff0) !important; }
.btn-success {
    background: linear-gradient(180deg, #34d15d, #1fa848) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(48, 209, 88, 0.30);
}
.btn-danger {
    background: linear-gradient(180deg, #ff5d52, #e0362b) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* ---------- Inputs / selects ----------------------------------------------- */
.form-control, .form-select, input[type="text"], input[type="password"],
input[type="date"], input[type="number"], textarea, select {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid var(--vos-stroke) !important;
    border-radius: var(--vos-radius-sm) !important;
    color: var(--vos-text) !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control::placeholder, input::placeholder { color: rgba(255, 255, 255, 0.35) !important; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: var(--vos-accent) !important;
    box-shadow: 0 0 0 3px var(--vos-accent-soft) !important;
    outline: none !important;
    color: #fff !important;
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); }
.input-group-text {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--vos-stroke-soft) !important;
    border-radius: var(--vos-radius-sm) !important;
    color: var(--vos-text-dim) !important;
}

/* Bootstrap-select como cápsula de vidro */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.bs-placeholder {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid var(--vos-stroke) !important;
    border-radius: var(--vos-radius-sm) !important;
    color: var(--vos-text) !important;
}
.bootstrap-select > .dropdown-toggle:focus {
    box-shadow: 0 0 0 3px var(--vos-accent-soft) !important;
    outline: none !important;
}

/* ---------- Dropdowns (menus flutuantes de vidro) -------------------------- */
.dropdown-menu {
    background: rgba(24, 28, 46, 0.85) !important;
    -webkit-backdrop-filter: var(--vos-blur);
    backdrop-filter: var(--vos-blur);
    border: 1px solid var(--vos-stroke) !important;
    border-radius: 14px !important;
    box-shadow: var(--vos-shadow) !important;
    overflow: hidden;
}
.dropdown-menu .dropdown-item, .dropdown-menu li a, .dropdown-menu .text {
    color: var(--vos-text) !important;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}
.dropdown-menu .dropdown-item.active, .dropdown-menu li.selected a {
    background: var(--vos-accent) !important;
    color: #fff !important;
}
.bs-searchbox .form-control { border-radius: 8px !important; }

/* ---------- Tabelas --------------------------------------------------------- */
thead {
    background: rgba(18, 22, 38, 0.97) !important;   /* sem blur (perf: sticky sobre tabelas grandes) */
    border: none !important;
    border-bottom: 1px solid var(--vos-stroke) !important;
}
/* As views pintam os th diretamente (ex.: .tb_municipios>thead>tr>th darkblue,
   vi_cadastro) — o override precisa estar no NÍVEL DA CÉLULA pra valer. */
thead th, thead td,
table > thead > tr > th,
.tb_municipios > thead > tr > th {
    background: rgba(18, 22, 38, 0.97) !important;
    color: var(--vos-text-dim) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none !important;
    border-bottom: 1px solid var(--vos-stroke) !important;
}
tbody > tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.030) !important; color: var(--vos-text) !important; }
tbody > tr:nth-child(odd)  { background-color: rgba(255, 255, 255, 0.012) !important; color: var(--vos-text) !important; }
tbody > tr:hover { background-color: rgba(10, 132, 255, 0.12) !important; }
td, th { border-color: var(--vos-stroke-soft) !important; }

/* ---------- Rodapé / barras auxiliares ------------------------------------- */
.rodape, tfoot {
    background: rgba(16, 20, 34, 0.92) !important;   /* sem blur (perf) */
    border-top: 1px solid var(--vos-stroke-soft);
}

/* ---------- Login ----------------------------------------------------------- */
/* Marca d'água TOOLS do login: menor e um pouco mais alta, centralizada
   (a view posiciona inline width:71rem/right:-40% — override via !important). */
.card-title img#logo {
    width: 42rem !important;    bottom: 10.5rem !important;
    right: 50% !important;
    transform: translateX(50%);
    opacity: 0.42 !important;
}

.form-login label { color: var(--vos-text-dim) !important; font-weight: 500; }
#btenviar {
    border-radius: 999px !important;
    background: linear-gradient(180deg, #2a93ff, #0a6fe0) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    padding: 0.35rem 1.4rem;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.35);
}
#btenviar:hover { filter: brightness(1.1); }

/* ---------- Detalhes -------------------------------------------------------- */
a { color: #64b5ff; }
a:hover { color: #8cc8ff; }
label { color: var(--vos-text-dim); }
.badge { background: rgba(255, 255, 255, 0.10) !important; border-radius: 999px !important; }

/* ---------- Badge de status (Tela de Acesso) ------------------------------- */
/* Os pills de status recebem um fundo PASTEL CLARO vindo do banco (te_color,
   ex.: "Recolhimento Efetuado" = #AAE6BF) via style inline. O texto usa a
   classe .text-dark (Bootstrap = escuro) — legível no pastel. Mas o override
   global .text-dark do tema virou o texto CLARO -> claro-no-claro ilegível.
   Reforço texto ESCURO só nos pills de status (mais específico que .text-dark;
   o fundo pastel vem de style inline !important e é preservado). Escuro funciona
   em todas as cores cadastradas (pastéis + saturadas claras: vermelho/amarelo/verde). */
.badge.status, .badge.status.text-dark, span.status.badge {
    color: #14171f !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    text-shadow: none !important;
}

/* ---------- Bootstrap Popover / Tooltip — vidro escuro (eram brancos) ------ */
/* O popover "Detalhamento SLA" (célula SLA da Tela de Acesso) e demais
   popovers/tooltips renderizam fora de .principal, no <body>, então o tema
   global não os alcançava e ficavam brancos. */
.popover {
    background: rgba(22, 26, 44, 0.97) !important;
    border: 1px solid var(--vos-stroke) !important;
    border-radius: 14px !important;
    box-shadow: var(--vos-shadow) !important;
    color: var(--vos-text) !important;
}
.popover .popover-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--vos-stroke-soft) !important;
    color: var(--vos-text) !important;
    font-weight: 600;
}
.popover .popover-body, .popover .popover-body b { color: var(--vos-text) !important; }
.popover hr { border-color: var(--vos-stroke-soft) !important; opacity: 1; }
/* seta do popover acompanha o fundo escuro em qualquer posição */
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: rgba(22, 26, 44, 0.97) !important; }
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: rgba(22, 26, 44, 0.97) !important; }
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { border-left-color: rgba(22, 26, 44, 0.97) !important; }
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { border-right-color: rgba(22, 26, 44, 0.97) !important; }
.tooltip .tooltip-inner {
    background: rgba(22, 26, 44, 0.97) !important;
    color: var(--vos-text) !important;
    border: 1px solid var(--vos-stroke) !important;
    border-radius: 10px !important;
}

/* Fallback sem backdrop-filter: superfícies mais opacas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .wrapper { background: rgba(14, 17, 30, 0.96) !important; }
    .card, .modal-content { background: rgba(22, 26, 44, 0.97) !important; }
    .dropdown-menu { background: rgba(22, 26, 44, 0.98) !important; }
    thead { background: rgba(16, 20, 36, 0.98) !important; }
}

/* Acessibilidade: respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation-duration: 0.01ms !important; }
}

/* ---------- Tela de Recolhimento (modal) — integração ao tema -------------- */
/* A tela define sua paleta em variáveis CSS (navy/branco). Reapontamos as
   variáveis para o tema (custom property com !important vence a folha da view). */
:root {
    --primary-color: rgba(18, 22, 38, 0.96) !important;   /* barras navy -> grafite */
    --primary-light: #0a84ff !important;
    --primary-dark: rgba(14, 17, 30, 0.96) !important;
    --text-dark: rgba(255, 255, 255, 0.92) !important;    /* painéis agora são escuros */
    --border-color: rgba(255, 255, 255, 0.12) !important;
    --hover-color: rgba(10, 132, 255, 0.15) !important;
    --alternate-row: rgba(255, 255, 255, 0.03) !important;
    --shadow-color: rgba(0, 0, 0, 0.40) !important;
}

/* Corpo do modal e painel de abas (Contatos/Observações) brancos -> vidro */
.modal-content.bg-white, .modal-body.bg-white {
    background: rgba(15, 18, 31, 0.97) !important;
    color: var(--vos-text) !important;
}
.tab-content {
    background: rgba(24, 28, 46, 0.92) !important;
    border: 1px solid var(--vos-stroke-soft) !important;
    border-radius: 0 var(--vos-radius-sm) var(--vos-radius-sm) var(--vos-radius-sm) !important;
    color: var(--vos-text) !important;
}
.nav-tabs { border-bottom: 1px solid var(--vos-stroke) !important; }
.nav-tabs .nav-link {
    color: var(--vos-text-dim) !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
}
.nav-tabs .nav-link.active {
    background: rgba(24, 28, 46, 0.92) !important;
    color: #fff !important;
    border: 1px solid var(--vos-stroke) !important;
    border-bottom-color: transparent !important;
}

/* Inputs brancos dentro das tabelas do modal */
table input[type="text"], table input[type="number"],
#tabela-agencias input, #tabela-obri input {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--vos-text) !important;
    border: 1px solid var(--vos-stroke-soft) !important;
    border-radius: 8px !important;
}
/* Campos somente-leitura/disabled: um tom mais apagado (era #e9ecef claro) */
table input[readonly], table input:disabled,
input.form-control[readonly]:not(.text-white) {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--vos-text-dim) !important;
}

/* Checkboxes/radios escuros */
.form-check-input {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--vos-stroke) !important;
}
.form-check-input:checked { background-color: var(--vos-accent) !important; border-color: var(--vos-accent) !important; }

/* ============================================================================
   RESPONSIVIDADE — janela menor / notebook (21/07/2026)
   Regras aditivas e escopadas em @media: desktop >1400px fica IDÊNTICO.
   Objetivo: nunca estourar a página na horizontal; tabelas largas rolam
   DENTRO do próprio container (não empurram a tela).
   ========================================================================== */

/* Tabelas largas rolam dentro do container (melhoria pura, qualquer tamanho) */
.tableFixHead, .row-fluid.tableFixHead, #table-recolhimentos, #table-acessos,
.table-responsive, .table-responsive-md { overflow-x: auto !important; }

@media (max-width: 1400px) {
    /* área de conteúdo deixa de forçar 900px e passa a preencher o espaço */
    .principal {
        min-width: 0 !important;
        width: calc(100vw - 16.3rem) !important;
        max-width: calc(100vw - 16.3rem) !important;
    }
    .principal.expanded { width: 100vw !important; max-width: 100vw !important; }
    /* filtros quebram em vez de estourar */
    .filtros .d-flex, .card-body.filtros .d-flex { flex-wrap: wrap !important; }
}

@media (max-width: 1150px) {
    /* sidebar mais estreita + conteúdo acompanha */
    .wrapper { width: 12.5rem !important; }
    .principal {
        left: 12.9rem !important;
        width: calc(100vw - 13.3rem) !important;
        max-width: calc(100vw - 13.3rem) !important;
    }
    /* os dois cartões de filtro (70/30) empilham em coluna */
    .row > .col-md-7, .row > .col-md-4 {
        width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    }
    /* selects que usavam 10vw fixo (ficavam minúsculos) ganham largura mínima */
    #sel_competencias, #sel_statusmuni, .filtros select { min-width: 140px; }
}

/* ---------- <option> de <select> nativos (dropdown do SO) ------------------ */
/* O dropdown nativo (ex.: #sel_competencias, #sel_statusmuni) abre com as
   opções no fundo do sistema; com o select escuro, elas ficavam branco-no-branco.
   Forçamos fundo escuro + texto claro nas options e na opção destacada. */
select, .form-control, .form-select {
    color-scheme: dark;   /* faz o dropdown nativo usar tema escuro no Chrome/Safari */
}
select option, select optgroup {
    background-color: #14182a !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
select option:checked,
select option:hover,
select option:focus {
    background-color: var(--vos-accent) !important;
    color: #fff !important;
}

/* ============================================================================
   TELAS ADMIN AUTOCONTIDAS — Unificação de Próprios, Gestão de Sistemas,
   Gestão de Usuários, Importações (Próprios/Terceiros/AGRO/PABS), DES-IF,
   Carga de Sistema (21/07/2026).
   Cada uma injeta <style> próprio com paleta CLARA (#f8f9fa / #fff / #555)
   escopada por #xxx-wrapper, com especificidade alta — o tema global não
   alcançava e as BARRAS DE FILTRO ficavam brancas sobre o fundo escuro.
   Override por SUFIXO de classe (cobre todos os prefixos up-/gs-/gu-/ip-/di-/dg-
   e telas futuras), escopado dentro de [id$="-wrapper"] pra não vazar para
   .card-footer/.modal-footer globais. Regras da view não usam !important,
   então !important aqui vence independentemente da especificidade. Puramente
   visual — nenhuma mudança de layout/lógica.
   ========================================================================== */

/* Barra de filtros (topo) e rodapé claros -> painel de vidro escuro.
   Uso [class*="..."] (contém), NÃO [class$="..."] (termina-com): o "$="
   quebra quando o elemento tem mais de uma classe (ex.: "gu-pag-btn active"
   termina em "active"). O "*=" é imune à ordem/quantidade de classes. */
[id$="-wrapper"] [class*="-toolbar"],
[id$="-wrapper"] [class*="-footer"] {
    background: rgba(24, 28, 46, 0.92) !important;
    border-color: var(--vos-stroke-soft) !important;
    color: var(--vos-text-dim) !important;
}
/* rótulos dessas barras (eram #555 — cinza-escuro, sumiam no fundo escuro) */
[id$="-wrapper"] label { color: var(--vos-text-dim) !important; }

/* molduras claras das tabelas internas -> traço sutil, fundo transparente */
[id$="-wrapper"] [class*="-table-container"] {
    border-color: var(--vos-stroke) !important;
    background: transparent !important;
}
/* faixa-título da tabela (#343a40/#495057) alinhada ao grafite do tema */
[id$="-wrapper"] [class*="-table-header"] {
    background: rgba(18, 22, 38, 0.97) !important;
    color: var(--vos-text) !important;
}
/* texto escuro (#212529) das células dessas tabelas -> claro e legível */
[id$="-wrapper"] table tbody td { color: var(--vos-text) !important; }

/* botões de paginação brancos -> cápsula de vidro */
[id$="-wrapper"] [class*="-pag-btn"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--vos-stroke) !important;
    color: var(--vos-text) !important;
}
[id$="-wrapper"] [class*="-pag-btn"]:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14) !important; }
[id$="-wrapper"] [class*="-pag-btn"].active {
    background: var(--vos-accent) !important;
    border-color: var(--vos-accent) !important;
    color: #fff !important;
}

/* cartões-resumo brancos do DES-IF -> vidro escuro */
[id$="-wrapper"] .card-resumo,
[id$="-wrapper"] .dg-card {
    background: rgba(24, 28, 46, 0.92) !important;
    border: 1px solid var(--vos-stroke) !important;
    color: var(--vos-text) !important;
}

/* Scroll interno das telas admin: o index.html tem `html{overflow:hidden}` e o `.principal`
   não rola, então tabelas longas ficam com o rodapé/paginação inalcançável. Faz o conteúdo
   da tela rolar por dentro do viewport. */
[id$="-wrapper"] {
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

/* ============================================================================
   FIX legibilidade — modais "Anexo de Guia" (.tb-anexos) e "Notas Tomadas"
   (.table-notas / #notas-dados). Essas telas fixam fundo BRANCO nas tabelas
   (bg-white / background:white); com o texto claro do tema o conteúdo some.
   Alinhamos os fundos ao tema escuro para o texto claro voltar a ser legível.
   O rodapé de totais (tfoot, text-white em fundo darkblue) fica fora do escopo.
   ============================================================================ */
.tb-anexos, .tb-anexos thead, .tb-anexos thead th, .tb-anexos tbody,
.tb-anexos tbody > tr, .tb-anexos tbody > tr > td,
table.table-notas, table.table-notas tbody, table.table-notas tbody > tr,
table.table-notas tbody > tr > td,
#notas-dados, #notas-dados > tr, #notas-dados > tr > td {
    background-color: transparent !important;
    color: var(--vos-text) !important;
}
/* zebra discreta (em vez de branco) */
.tb-anexos tbody > tr:nth-child(even),
table.table-notas tbody > tr:nth-child(even),
#notas-dados > tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
/* cabeçalho desses modais: escuro com texto claro (era bg-white text-dark) */
.tb-anexos thead th, table.table-notas thead th {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--vos-text) !important;
}
/* inputs readonly dentro dessas tabelas: translúcidos + texto claro */
.tb-anexos tbody .form-control, .tb-anexos tbody .form-select,
table.table-notas tbody .form-control, #notas-dados .form-control, #notas-dados input {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vos-text) !important;
}

/* ============================================================================
   VARREDURA TEMA ESCURO — leva 1 (casos reportados): mata TODA superfície clara
   de utilitários Bootstrap dentro do conteúdo do app. O tema carrega POR ÚLTIMO,
   então estas regras (mesma !importance) vencem o bootstrap por ordem.
   - .bg-light: painel expandido do grupo unificado (vi_unificacao.js) e afins
   - .bg-white fora de .card: modal Anexos (form_anexo.php: thead sticky, wrappers, inputs)
   - .table-light/.text-bg-light: variantes claras de tabela
   Login/index não usam essas classes — sem efeito lá.
   ============================================================================ */
.load_pages .bg-light, .modal .bg-light, [id$="-wrapper"] .bg-light,
.load_pages .bg-white, .modal .bg-white, [id$="-wrapper"] .bg-white,
.load_pages .table-light, .modal .table-light,
.load_pages .text-bg-light, .modal .text-bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--vos-text) !important;
}
/* inputs/selects marcados bg-white (ex.: file-anexo readonly) — translúcido escuro */
.modal input.bg-white, .modal select.bg-white, .modal .form-control.bg-white,
.load_pages input.bg-white, .load_pages .form-control.bg-white {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--vos-text) !important;
}
/* zebra clara de tabelas dentro de modais (qualquer variante striped/nth-child local) */
.modal tbody > tr:nth-child(even) > td { background-color: rgba(255,255,255,0.045) !important; }
.modal tbody > tr:nth-child(odd)  > td { background-color: rgba(255,255,255,0.015) !important; }
.modal tbody > tr > td { color: var(--vos-text) !important; }
/* cabeçalhos sticky claros de tabela em modal */
.modal thead.bg-white, .modal thead .bg-white, .modal thead.sticky-top {
    background-color: #1b2230 !important;
    color: var(--vos-text) !important;
}

/* VARREDURA leva 2 — complementos transversais */
.modal textarea.bg-white, .load_pages textarea.bg-white {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--vos-text) !important;
}
/* views antigas fixam label { color: #4b4b4b } (cinza escuro) — ilegível no tema */
.load_pages label, .modal label { color: var(--vos-text) !important; }