/* =============================================================
   CTS_SaaS — Design System (tokens globais)
   Carregado em base_sistema.html após style.bundle.css.
   Todos os arquivos CSS customizados devem referenciar estes tokens.
   ============================================================= */

:root {
    /* --- Marca CTS (alinhada à paleta do CTS_ERP) ------------ */
    --cts-brand:         #1e88e5; /* azul primário (CTAs, links, destaques) */
    --cts-brand-hover:   #1666ab; /* hover/texto sobre tinta do azul primário */
    --cts-brand-active:  #0d3d67; /* estado pressionado do azul primário */
    --cts-on-brand:      #ffffff; /* texto legível sobre o azul primário sólido */
    --cts-brand-dark:    #284466; /* apoio (borda, hover, gradiente) — cor categórica de gráfico, não deriva da marca */
    --cts-graphite:      #1C1C30; /* grafite (títulos, headers alto contraste) */

    /* --- Elemento interativo (alinhado ao Metronic primary) -- */
    --cts-interactive:       var(--bs-primary, #1e88e5);
    --cts-interactive-focus: #1666ab; /* anel de foco visível sobre fundo claro; override no tema escuro */
    --cts-toggle-off:        #cbd5e1;

    /* --- Ponte Bootstrap -> marca CTS: reskin de componentes nativos
       do Metronic (.btn-primary, .badge-light-primary, links, foco,
       paginação, menu) para a cor de marca, replicando a técnica do
       CTS_ERP (static/css/design_system.css). Sem isso, --cts-brand só
       vale para elementos customizados — os nativos ficam no azul
       padrão do Metronic (#1B84FF). ------------------------------- */
    --bs-primary:            var(--cts-brand);
    --bs-primary-rgb:        var(--cts-brand-rgb);
    /* .btn-primary/.badge-primary nativos do Metronic pintam o texto via
       --bs-primary-inverse (fixo #ffffff no bundle nos dois temas), não via
       --bs-btn-color — sem esta ponte, o texto continua branco fixo mesmo
       depois do --cts-brand claro do tema escuro (#51a3eb), caindo para
       ~2,7:1 de contraste. */
    --bs-primary-inverse:    var(--cts-on-brand);
    --bs-link-color:         var(--cts-brand);
    --bs-link-hover-color:   var(--cts-brand-hover);
    --bs-link-color-rgb:     var(--cts-brand-rgb);
    --bs-focus-ring-color:   rgba(var(--cts-brand-rgb), .25);
    --bs-text-primary:       var(--cts-brand);
    --bs-pagination-active-bg:    var(--cts-brand);
    --bs-pagination-active-color: var(--cts-on-brand);
    --bs-menu-link-color-hover:   var(--cts-brand);
    --bs-menu-link-color-active:  var(--cts-brand);
    --bs-menu-link-color-show:    var(--cts-brand);
    --bs-menu-link-color-here:    var(--cts-brand);

    /* --- Superfícies (tema claro) ---------------------------- */
    --cts-surface:            #ffffff;   /* fundo principal */
    --cts-surface-soft:       #f9fafb;   /* fundo suave (headers de tabela, zebra) */
    --cts-surface-blue:       #f8fbff;   /* fundo azulado (dashboard wrapper) */
    --cts-surface-blue-light: #eef3ff;   /* fundo azul muito claro (strips, avatares) */
    --cts-surface-avatar:     #eef6ff;   /* fundo de avatar / profile */

    /* --- Bordas (tema claro) --------------------------------- */
    --cts-border:            #e5e7eb; /* borda padrão */
    --cts-border-soft:       #eef0f3; /* borda suave (separadores internos) */
    --cts-border-blue:       #8bc3f8; /* borda azul (campos editáveis, avatar) */
    --cts-border-blue-hover: #0ea5e9; /* borda azul hover */

    /* --- Texto (tema claro) ---------------------------------- */
    --cts-text:           #111827; /* texto principal */
    --cts-text-strong:    #374151; /* texto de alta ênfase (títulos de card) */
    --cts-text-secondary: #6b7280; /* texto secundário */
    --cts-text-subtle:    #4b5563; /* texto sutil (placeholders, mini-labels) */
    --cts-text-muted:     #6d7286; /* texto apagado (empty states) — mínimo WCAG AA sobre --cts-surface */
    --cts-text-emphasis:  #2563eb; /* texto de destaque (resultados finais, totais) */

    /*
       As utilidades do Metronic (text-muted e text-gray-500 a
       text-gray-900, inclusive título de card h6.text-gray-800 e KPI
       text-gray-900) usam --bs-text-*, não os tokens CTS. O valor
       padrão de gray-500 no tema claro (#99A1B7) não atende AA: ~2,6:1
       sobre --cts-surface branco, ~2,5:1 sobre --bs-gray-100/--bs-light
       (#F9F9F9) — mesmo problema já corrigido só no tema escuro logo
       abaixo; esta ponte espelha a mesma correção no tema claro.
    */
    --bs-text-muted:     var(--cts-text-muted);
    --bs-text-gray-500:  var(--cts-text-muted);
    --bs-text-gray-600:  var(--cts-text-subtle);
    --bs-text-gray-700:  var(--cts-text-secondary);
    --bs-text-gray-800:  var(--cts-text-strong);
    --bs-text-gray-900:  var(--cts-text);

    --bs-gray-500:       var(--cts-text-muted);
    --bs-gray-600:       var(--cts-text-subtle);
    --bs-gray-700:       var(--cts-text-secondary);
    --bs-gray-800:       var(--cts-text-strong);
    --bs-gray-900:       var(--cts-text);

    /* --- Semânticos ------------------------------------------ */
    --cts-success: #50cd89; /* alinhado ao Metronic success */
    --cts-info:    #7239ea; /* alinhado ao Metronic info */
    --cts-warning: #f59e0b;
    --cts-danger:  #f1416c;

    /* --- Variantes RGB (para rgba(var(--x-rgb), alpha)) ------- */
    --cts-brand-rgb:      30, 136, 229;
    --cts-brand-dark-rgb: 40, 68, 102; /* 5º tom para grupos de coluna (comparativo de várias operadoras no ANS RPC) */
    --cts-graphite-rgb: 28, 28, 48;
    --cts-success-rgb:  80, 205, 137;
    --cts-info-rgb:     114, 57, 234;
    --cts-warning-rgb:  245, 158, 11;
    --cts-danger-rgb:   241, 65, 108;

    /*
       Ponte Bootstrap -> CTS: componentes nativos do Metronic
       (alert-warning, bg-warning, border-warning) leem --bs-warning,
       que por padrão é o dourado do Metronic (#F6C000 claro /
       #C59A00 escuro), destoando da marca. Esta ponte faz esses
       componentes usarem o âmbar CTS em qualquer tema.
    */
    --bs-warning:     var(--cts-warning);
    --bs-warning-rgb: var(--cts-warning-rgb);

    /* --- Elevação (profundidade adaptativa por tema) ----------- */
    /* No claro, profundidade = sombra; no escuro, superfície mais clara + borda. */
    --cts-elevated-bg:     var(--cts-surface);
    --cts-elevated-border: transparent;
    --cts-elevated-shadow: var(--bs-box-shadow, 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075));

    /* --- Espaçamento (escala Bootstrap, para CSS custom) ------ */
    /* Em template, preferir utilitários de spacing do Bootstrap. */
    --cts-space-1: 0.25rem;
    --cts-space-2: 0.5rem;
    --cts-space-3: 0.75rem;
    --cts-space-4: 1rem;
    --cts-space-5: 1.5rem;
    --cts-space-6: 3rem;

    /* --- Raio de borda ---------------------------------------- */
    --cts-radius-sm: 6px;   /* elementos pequenos (avatar mobile, chips) */
    --cts-radius:    10px;  /* padrão (avatar, campos) */
    --cts-radius-lg: 12px;  /* containers (botão de perfil, cards custom) */
    --cts-radius-xl: 24px;  /* superfícies grandes (shells de página) */

    /* --- Sombras (alinhadas ao Metronic) ----------------------- */
    --cts-shadow-sm: var(--bs-box-shadow-sm, 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05));
    --cts-shadow:    var(--bs-box-shadow, 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075));

    /* --- Movimento ---------------------------------------------- */
    /* Transições apenas em color, background, border, transform e opacity. */
    --cts-duration-fast: 0.15s; /* micro-interações (ícones, chevrons) */
    --cts-duration:      0.2s;  /* padrão (hover de botões, cards, campos) */
    --cts-ease:          ease;

    /* --- Tipografia -------------------------------------------- */
    --cts-font-family:     Inter, Helvetica, sans-serif;
    --cts-font-weight-regular:  400;
    --cts-font-weight-medium:   500;
    --cts-font-weight-semibold: 600;
    --cts-font-weight-bold:     700;

    /* --- Header flutuante (fundo escuro por default) --------- */
    --cts-header-border:       rgba(255, 255, 255, 0.28);
    --cts-header-bg:           rgba(255, 255, 255, 0.08);
    --cts-header-bg-hover:     rgba(255, 255, 255, 0.16);
    --cts-header-border-hover: rgba(255, 255, 255, 0.42);
    --cts-header-name:         #ffffff;
    --cts-header-company:      rgba(255, 255, 255, 0.75);
    --cts-header-chevron:      rgba(255, 255, 255, 0.72);
    --cts-profile-strip-bg:    #E9F3FF;
}

/* --- Acessibilidade: reduzir movimento por preferência do usuário --- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --cts-duration-fast: 0.01ms;
        --cts-duration: 0.01ms;
    }
}

/* --- Overrides para tema escuro ----------------------------- */
[data-bs-theme="dark"] {
    /* Marca CTS — mesmo azul mais claro do CTS_ERP no tema escuro. */
    --cts-brand:         #51a3eb;
    --cts-brand-hover:   #70b3ee;
    --cts-brand-active:  #448ac7;
    --cts-on-brand:      #15233b; /* azul claro demais para texto branco; usa navy (mesmo trade-off do CTS_ERP) */
    --cts-brand-rgb:     81, 163, 235;

    --cts-surface:            #1e1e2d;
    --cts-surface-soft:       #2b2b40;
    --cts-surface-blue:       #171f2e; /* matiz do azul CTS; identidade sem escurecer a base Metronic */
    --cts-surface-blue-light: #1e2a3b;
    --cts-surface-avatar:     #1e2a3b;

    --cts-border:            #323248;
    --cts-border-soft:       #2d2d44;
    --cts-border-blue:       #4C77BA;
    --cts-border-blue-hover: #4C99BA;

    /* Escala de texto AA sobre as superfícies escuras CTS. */
    --cts-text:           #f5f5f5;
    --cts-text-strong:    #e1e2ea;
    --cts-text-secondary: #c8cad8;
    --cts-text-subtle:    #babdce;
    --cts-text-muted:     #a9abc0;
    --cts-text-emphasis:  #60a5fa;

    /*
       As utilidades do Metronic (text-muted e text-gray-*) usam
       --bs-text-*, não os tokens CTS. O valor padrão de gray-500 no
       tema escuro (#636674) não atende AA; esta ponte preserva a
       hierarquia tipográfica em todas as telas, inclusive gráficos.
    */
    --bs-text-muted:     var(--cts-text-muted);
    --bs-text-gray-500:  var(--cts-text-muted);
    --bs-text-gray-600:  var(--cts-text-subtle);
    --bs-text-gray-700:  var(--cts-text-secondary);
    --bs-text-gray-800:  var(--cts-text-strong);
    --bs-text-gray-900:  var(--cts-text);

    /* Componentes e gráficos do Metronic leem a escala sem o prefixo text. */
    --bs-gray-500:       var(--cts-text-muted);
    --bs-gray-600:       var(--cts-text-subtle);
    --bs-gray-700:       var(--cts-text-secondary);
    --bs-gray-800:       var(--cts-text-strong);
    --bs-gray-900:       var(--cts-text);

    --cts-toggle-off:         #3d3d5c;
    --cts-profile-strip-bg:   #1e2a3b;

    --cts-interactive-focus: #70b3ee; /* anel de foco claro sobre fundo escuro */

    /* Elevação no escuro: superfície mais clara + borda; sombra não comunica profundidade. */
    --cts-elevated-bg:     #2b2b40;
    --cts-elevated-border: #323248;
    --cts-elevated-shadow: none;
}

/* --- Acessibilidade: foco visível em navegação por teclado --- */
.btn:focus-visible,
a:focus-visible,
.form-check-input:focus-visible,
.profile-avatar:focus-visible {
    outline: 2px solid var(--cts-interactive-focus);
    outline-offset: 2px;
}

/* =============================================================
   Ponte de marca -> componentes nativos do Metronic
   O bridge --bs-primary no :root não é suficiente sozinho: o bundle
   nativo do Metronic (style.bundle.css) fixa cor própria em várias
   regras por componente, sem ler --bs-primary dinamicamente em todas
   elas. Reskin explícito replicando a técnica do CTS_ERP
   (static/css/design_system.css) só para os componentes nativos
   realmente usados neste projeto.
   ============================================================= */
.btn-primary,
.btn.btn-primary {
    --bs-btn-bg: var(--cts-brand);
    --bs-btn-border-color: var(--cts-brand);
    --bs-btn-hover-bg: var(--cts-brand-hover);
    --bs-btn-hover-border-color: var(--cts-brand-hover);
    --bs-btn-active-bg: var(--cts-brand-active);
    --bs-btn-active-border-color: var(--cts-brand-active);
    --bs-btn-color: var(--cts-on-brand);
    --bs-btn-hover-color: var(--cts-on-brand);
    --bs-btn-active-color: var(--cts-on-brand);
}

/* Sem isso, o hover/active nativo do Metronic (mais específico) vence
   as variáveis acima e o azul cru do bundle vaza no botão mais usado
   do projeto (padrão "botão async" do README). */
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:focus-visible:not(.btn-active) {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
}
.btn.btn-primary:active:not(.btn-active), .btn.btn-primary.active, .btn.btn-primary.show,
.btn-check:checked + .btn.btn-primary, .btn-check:active + .btn.btn-primary, .show > .btn.btn-primary {
    color: var(--bs-btn-active-color) !important;
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
}

/* --cts-brand-active no escuro (#448ac7, mesmo valor do CTS_ERP) é mais claro que
   --cts-on-brand (navy) — o oposto do que acontece no claro, onde escurecer afasta
   do texto branco. Resultado sem este ajuste: 4,27:1, abaixo do mínimo de 4,5:1 para
   texto normal (achado real: o botão de "Exportar Relatório" do LGPD, entre outros,
   fica com data-kt-menu-trigger aberto por vários segundos, um estado alcançável e
   não fugaz). Corrigido trocando só o texto para branco neste estado/tema, sem mudar
   o tom de fundo herdado do CTS_ERP. */
[data-bs-theme="dark"] .btn.btn-primary:active:not(.btn-active),
[data-bs-theme="dark"] .btn.btn-primary.active,
[data-bs-theme="dark"] .btn.btn-primary.show,
[data-bs-theme="dark"] .btn-check:checked + .btn.btn-primary,
[data-bs-theme="dark"] .btn-check:active + .btn.btn-primary,
[data-bs-theme="dark"] .show > .btn.btn-primary {
    color: #ffffff !important;
}

.btn-light-primary,
.btn.btn-light-primary {
    color: var(--cts-brand-hover) !important;
    background-color: rgba(var(--cts-brand-rgb), .12) !important;
}

/* Mesma armadilha de especificidade do Metronic nativo em
   .btn.btn-light-primary:hover (0,4,0) — só empatar/igualar não
   basta, tem que replicar a mesma lista de estados. Escopado ao tema
   claro: no escuro o repouso já tem contraste suficiente sem trocar
   para preenchimento sólido (mesma decisão do CTS_ERP). */
html:not([data-bs-theme="dark"]) .btn.btn-light-primary:hover:not(.btn-active),
html:not([data-bs-theme="dark"]) .btn.btn-light-primary:focus:not(.btn-active),
html:not([data-bs-theme="dark"]) .btn.btn-light-primary:focus-visible:not(.btn-active),
html:not([data-bs-theme="dark"]) .btn.btn-light-primary:active:not(.btn-active),
html:not([data-bs-theme="dark"]) .btn.btn-light-primary.active,
html:not([data-bs-theme="dark"]) .btn.btn-light-primary.show,
html:not([data-bs-theme="dark"]) .btn-check:checked + .btn.btn-light-primary,
html:not([data-bs-theme="dark"]) .btn-check:active + .btn.btn-light-primary,
html:not([data-bs-theme="dark"]) .show > .btn.btn-light-primary {
    color: var(--cts-on-brand) !important;
    background-color: var(--cts-brand) !important;
    border-color: transparent !important;
}

.text-primary { color: var(--cts-brand) !important; }
.bg-primary { background-color: var(--cts-brand) !important; }
.border-primary { border-color: var(--cts-brand) !important; }
.bg-light-primary { background-color: rgba(var(--cts-brand-rgb), .12) !important; }
.badge-light-primary { color: var(--cts-brand-hover) !important; background-color: rgba(var(--cts-brand-rgb), .12) !important; }

/* Select2 (temas bootstrap5 e default) — opção destacada no dropdown. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--cts-brand) !important;
    color: var(--cts-on-brand) !important;
}

[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--cts-brand) !important;
    color: var(--cts-on-brand) !important;
}

/* SweetAlert2 — ícone de confirmação e loader também na cor de marca
   (o botão de confirmação já segue --cts-interactive, ver acima). */
.swal2-icon.swal2-question { color: var(--cts-brand) !important; border-color: var(--cts-brand) !important; }
.swal2-loader { border-color: var(--cts-brand) transparent var(--cts-brand) transparent !important; }

/* Checkbox/switch nativo do Metronic (.form-check-input:checked) fixa
   background-color/border-color em #1b84ff no bundle, sem nenhuma var() — único
   checkbox/switch do projeto hoje (simulador de reajuste) ficaria com a cor antiga
   do Metronic ao lado de botões já migrados para --cts-brand na mesma tela. */
.form-check-input:checked {
    background-color: var(--cts-brand) !important;
    border-color: var(--cts-brand) !important;
}

/* =============================================================
   Faixa de fundo do topo (padrão do Metronic)
   As imagens header-bg(.jpg 1980px / -dark.jpg 3000px) têm largura
   natural menor que viewports 4K e cortavam à direita; esticar
   para 100% da largura resolve em qualquer resolução.
   ============================================================= */
body:not(.app-blank):not(.auth-bg) {
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* =============================================================
   Guia visual do design system — metatexto neutro
   (nomes de token não devem competir visualmente com as amostras)
   ============================================================= */
#cts_design_system code {
    color: var(--cts-text-secondary);
    background: var(--cts-surface-soft);
}

/* =============================================================
   SweetAlert2 — usar cor primária CTS
   ============================================================= */
.swal2-confirm:not(.btn),
.swal2-styled.swal2-confirm:not(.btn) {
    background-color: var(--cts-interactive) !important;
}

/* Tema escuro: o Metronic escurece o fundo da modal (.swal2-popup usa
   var(--bs-body-bg)), mas o título continua em var(--bs-dark), que não
   é adaptativo por tema — ficava quase invisível sobre o fundo escuro
   (achado ao revisar o wizard de recuperação de senha no /design-system).
   color-scheme ajusta junto o visual nativo de inputs (.swal2-input). */
[data-bs-theme="dark"] .swal2-popup {
    color-scheme: dark;
}

[data-bs-theme="dark"] .swal2-popup .swal2-title {
    color: var(--cts-text) !important;
}

/* =============================================================
   Header — botão de perfil flutuante
   ============================================================= */
.header-profile-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 280px;
    min-height: 44px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--cts-header-border);
    border-radius: 12px;
    background: var(--cts-header-bg);
    transition: background-color var(--cts-duration) var(--cts-ease), border-color var(--cts-duration) var(--cts-ease);
}

.header-profile-button > span {
    max-width: 185px;
}

.header-profile-menu {
    padding-top: 0 !important;
    overflow: hidden;
}

.header-profile-company-strip {
    background-color: var(--cts-profile-strip-bg);
    margin-top: 0 !important;
    border-radius: 0;
    display: block;
}

.header-profile-button:hover,
.header-profile-button.show {
    background: var(--cts-header-bg-hover);
    border-color: var(--cts-header-border-hover);
}

.header-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}

.header-profile-name    { color: var(--cts-header-name);    transition: color var(--cts-duration) var(--cts-ease); }
.header-profile-company { color: var(--cts-header-company); transition: color var(--cts-duration) var(--cts-ease); }
.header-profile-chevron { color: var(--cts-header-chevron); transition: color var(--cts-duration) var(--cts-ease); }

/* Header sticky — cores adaptativas à superfície do tema */
body[data-kt-header="on"] #kt_header .header-profile-button,
#kt_header[data-kt-sticky-enabled="true"] .header-profile-button {
    background: var(--cts-surface);
    border-color: var(--cts-border);
}

body[data-kt-header="on"] #kt_header .header-profile-button:hover,
body[data-kt-header="on"] #kt_header .header-profile-button.show,
#kt_header[data-kt-sticky-enabled="true"] .header-profile-button:hover,
#kt_header[data-kt-sticky-enabled="true"] .header-profile-button.show {
    background: var(--cts-surface-soft);
    border-color: var(--cts-border);
}

body[data-kt-header="on"] #kt_header .header-profile-name,
#kt_header[data-kt-sticky-enabled="true"] .header-profile-name {
    color: var(--cts-text);
}

body[data-kt-header="on"] #kt_header .header-profile-company,
#kt_header[data-kt-sticky-enabled="true"] .header-profile-company,
body[data-kt-header="on"] #kt_header .header-profile-chevron,
#kt_header[data-kt-sticky-enabled="true"] .header-profile-chevron {
    color: var(--cts-text-subtle);
}

@media (max-width: 991.98px) {
    .header-profile-button {
        width: 40px;
        min-height: 40px;
        padding: 2px;
        justify-content: center;
        border: 0;
        background: transparent;
    }

    .header-profile-avatar {
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }
}

/* =============================================================
   Utilitário — cabeçalho de tabela padrão CTS
   Aplicar a classe na <table>; estiliza os <th>.
   ============================================================= */
.cts-table-header th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cts-text-secondary);
}

/* =============================================================
   Utilitário — Select2 em toolbar slim (alinha com btn-sm)
   ============================================================= */
.cts-filtros-sm .select2-selection--single {
    height: calc(1.5 * 0.95rem + 2 * (0.55rem + 1px) + 2px) !important;
}

/* =============================================================
   Contraste de botão/campo "light" dentro de card-header bg-light
   .btn-light usa background-color: var(--bs-light); .form-control-solid
   e .form-select-solid (inclusive o Select2 iniciado a partir de um
   <select> com essas classes) usam var(--bs-gray-100) — nos dois temas
   --bs-gray-100 e --bs-light são o MESMO valor de .bg-light. Resultado:
   botão/campo sem nenhum contorno visível contra o header do card.
   Escopo restrito a dentro de .card-header.bg-light — fora desse
   contexto (fundo branco/superfície normal) o contraste original do
   Metronic já é suficiente.
   ============================================================= */
.card-header.bg-light .btn-light {
    background-color: var(--cts-surface);
    border-color: var(--cts-border);
    color: var(--cts-text-strong);
}

/*
   .btn.btn-light:hover/:focus do Metronic fixa background-color com
   !important (style.bundle.css) — sem !important aqui, o hover/foco do
   botão "secundário" volta a ficar sem contraste contra o header no
   exato momento em que o feedback visual mais importa.
*/
.card-header.bg-light .btn-light:hover,
.card-header.bg-light .btn-light:focus {
    background-color: var(--cts-surface-soft) !important;
    border-color: var(--cts-border);
    color: var(--cts-text-strong);
}

.card-header.bg-light .form-control-solid,
.card-header.bg-light .form-select-solid {
    background-color: var(--cts-surface);
    border-color: var(--cts-border);
}

/*
   Mesmo problema do hover do botão, mas no foco do campo/select "solid"
   — inclusive o Select2 iniciado a partir de um <select> com essas
   classes, que ao abrir/focar usa --bs-gray-200 (plugins.bundle.css),
   quase idêntico a --bs-gray-100/--bs-light do header.
*/
.card-header.bg-light .form-control-solid:focus,
.card-header.bg-light .form-select-solid:focus,
.card-header.bg-light .select2-container--bootstrap5.select2-container--focus:not(.select2-container--disabled) .form-select-solid,
.card-header.bg-light .select2-container--bootstrap5.select2-container--open:not(.select2-container--disabled) .form-select-solid {
    background-color: var(--cts-surface) !important;
    border-color: var(--cts-border) !important;
}