/* ============================================================================
   Tema do MDR (claro/escuro) - tokens e camadas das bibliotecas

   Plano: docs/dark-mode/01-plano-dark-mode.md. Par do js/theme/theme.js.

   COMO O TEMA ENTRA
     1. O snippet inline no <head> de cada página (gravado por tools/themeBoot.js)
        lê a preferência do localStorage e põe `data-theme` e `data-bs-theme` no
        <html> antes da primeira pintura.
     2. Esta folha reage SÓ ao atributo. Não há `@media (prefers-color-scheme)`:
        o tema é só o que a pessoa escolhe no botão da sidebar (claro ou escuro).
     3. O js/theme/theme.js cuida da troca em tempo real, da sincronia entre abas
        e da persistência no RTDB.

   TEMA ÚNICO
     Página que só tem um tema declara `data-theme-lock="dark"` no <html> (hoje o
     workforce_planner): ignora a preferência e não mostra o botão. Página nova
     com a sidebar já nasce com os dois temas: a camada escura dela vai no fim da
     própria folha, sob :root[data-theme="dark"].

   REGRAS DESTA FOLHA
     - O bloco claro (`:root`) só DEFINE tokens com o visual de hoje. Ele não
       sobrescreve nada do Bootstrap nem das bibliotecas: ligar esta folha numa
       página não pode mudar nada no claro.
     - Tudo que muda cor fica debaixo de `:root[data-theme="dark"]`. O atributo
       a mais no seletor é o que garante que estas regras vencem as das
       bibliotecas qualquer que seja a ordem dos <link>.
     - Nome de token diz a FUNÇÃO (superfície, texto, borda), nunca a cor.
   ========================================================================== */

/* ── Tokens: claro (o visual de hoje) ── */
:root {
  color-scheme: light;

  /* Superfícies */
  --mdr-bg: #ffffff;              /* fundo da página */
  --mdr-surface: #ffffff;         /* cards, modais, tabelas */
  --mdr-surface-alt: #f7f9fc;     /* sidebar, cabeçalhos, faixas secundárias */
  --mdr-surface-raised: #ffffff;  /* menus, popovers, botões flutuantes */
  --mdr-hover: #e8f0fe;
  --mdr-active: #e0ecff;
  --mdr-paper: #ffffff;           /* "papel": página de PDF, docx. Branco nos dois temas */
  --mdr-on-paper: #212529;

  /* Bordas */
  --mdr-border: #e5e9f0;
  --mdr-border-strong: #dee2e6;

  /* Texto e ícones */
  --mdr-text: #212529;
  --mdr-text-strong: #1f2937;
  --mdr-text-secondary: #46536b;
  --mdr-text-muted: #6c757d;
  --mdr-text-subtle: #94a3b8;
  --mdr-icon: #7b8794;

  /* Destaque */
  --mdr-accent: #0d6efd;
  --mdr-accent-text: #0b5ed7;
  --mdr-focus: rgba(13, 110, 253, 0.25);

  /* Cores de status (dado de negócio: status = cor). Fonte única da paleta que
     search.js, atividades.js e AA_task_board.js usam via MDR_STATUS_PALETTE
     (funcApoio.js). Documentadas em READ_ME FILES/cores_status_MDR.md. O ajuste
     para o escuro entra quando cada página migrar, só onde o contraste falhar. */
  --mdr-status-indigo: #4531fe;
  --mdr-status-blue: #3183fe;
  --mdr-status-cyan: #3bc9db;
  --mdr-status-red: #e53f2c;
  --mdr-status-deep-orange: #ff5722;
  --mdr-status-orange: #feac31;
  --mdr-status-amber: #ffc107;
  --mdr-status-yellow: #ecfe26;
  --mdr-status-teal: #31feac;
  --mdr-status-green: #27ca37;
  --mdr-status-light-green: #9efea7;
  --mdr-status-lime: #83fe31;
  --mdr-status-purple: #fe31ea;
  --mdr-status-violet: #9775fa;
  --mdr-status-pink: #f783ac;
  --mdr-status-dark-gray: #474849;
  --mdr-status-gray: #b0b0b7;
  --mdr-status-light-gray: #e0e0e7;
  --mdr-status-white: #ffffff;
  --mdr-status-azul-emitido: #8898c4ff;
}

/* ── Tokens: escuro ──
   Parte da paleta que a sidebar escura já usava (#1e2635 / #2c3648 / #b9c2d0). */
:root[data-theme="dark"] {
  color-scheme: dark;

  --mdr-bg: #141a24;
  --mdr-surface: #1b2230;
  --mdr-surface-alt: #1e2635;
  --mdr-surface-raised: #29344a;
  --mdr-hover: #29344a;
  --mdr-active: #2f3d57;

  --mdr-border: #2c3648;
  --mdr-border-strong: #3a465c;

  --mdr-text: #dbe1ea;
  --mdr-text-strong: #f1f5f9;
  --mdr-text-secondary: #b9c2d0;
  --mdr-text-muted: #94a0b2;
  --mdr-text-subtle: #6b7789;
  --mdr-icon: #8d99ab;

  --mdr-accent: #4d8dff;
  --mdr-accent-text: #9cc2ff;
  --mdr-focus: rgba(77, 141, 255, 0.4);

  /* Ganchos só do escuro, para cor escrita em `style` (inline ou montado por JS):
     `style="background: var(--mdr-dk-surface, #fff)"`. No claro a variável não
     existe e vale o literal, exatamente o visual de hoje; no escuro vale o token.
     Use quando o literal não bate com nenhum token claro. */
  --mdr-dk-surface: var(--mdr-surface);
  --mdr-dk-surface-alt: var(--mdr-surface-alt);
  --mdr-dk-raised: var(--mdr-surface-raised);
  --mdr-dk-hover: var(--mdr-hover);
  --mdr-dk-active: var(--mdr-active);
  --mdr-dk-border: var(--mdr-border);
  --mdr-dk-border-strong: var(--mdr-border-strong);
  --mdr-dk-text: var(--mdr-text);
  --mdr-dk-text-strong: var(--mdr-text-strong);
  --mdr-dk-text-muted: var(--mdr-text-muted);
  --mdr-dk-accent: var(--mdr-accent-text);
  --mdr-dk-danger: #ff8a80;
  --mdr-dk-success: #6ee7a0;
  --mdr-dk-warning: #fcd34d;
  --mdr-dk-warning-soft: rgba(252, 211, 77, 0.12);

  /* Status "neutros" (branco e cinza-claro) viram superfície no escuro: uma
     célula branca brilhante numa tabela escura chama mais atenção do que o
     próprio status. As cores vivas ficam como estão (são a informação). */
  --mdr-status-white: #2f3d57;
  --mdr-status-light-gray: #3a465c;

  /* Bootstrap 5.3: o `data-bs-theme="dark"` já liga o escuro dele; aqui ele
     passa a usar a paleta do MDR em vez da padrão. Os *-rgb são os mesmos
     valores em trinca, que o Bootstrap usa nas classes com opacidade. */
  --bs-body-bg: var(--mdr-bg);
  --bs-body-bg-rgb: 20, 26, 36;
  --bs-body-color: var(--mdr-text);
  --bs-body-color-rgb: 219, 225, 234;
  --bs-emphasis-color: var(--mdr-text-strong);
  --bs-emphasis-color-rgb: 241, 245, 249;
  --bs-heading-color: var(--mdr-text-strong);
  --bs-secondary-color: rgba(219, 225, 234, 0.75);
  --bs-secondary-bg: var(--mdr-surface-raised);
  --bs-secondary-bg-rgb: 41, 52, 74;
  --bs-tertiary-color: rgba(219, 225, 234, 0.5);
  --bs-tertiary-bg: var(--mdr-surface-alt);
  --bs-tertiary-bg-rgb: 30, 38, 53;
  --bs-border-color: var(--mdr-border-strong);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
  --bs-link-color: var(--mdr-accent-text);
  --bs-link-color-rgb: 156, 194, 255;
  --bs-link-hover-color: #c2d9ff;
  --bs-link-hover-color-rgb: 194, 217, 255;
  --bs-focus-ring-color: var(--mdr-focus);
}

/* No escuro, o que flutua sobre a página fica um degrau acima do fundo: com
   o padrão do Bootstrap modal, card e dropdown teriam a mesma cor da página. */
:root[data-theme="dark"] .modal {
  --bs-modal-bg: var(--mdr-surface);
  --bs-modal-border-color: var(--mdr-border);
  --bs-modal-header-border-color: var(--mdr-border);
  --bs-modal-footer-border-color: var(--mdr-border);
}

:root[data-theme="dark"] .card {
  --bs-card-bg: var(--mdr-surface);
  --bs-card-border-color: var(--mdr-border);
  --bs-card-cap-bg: var(--mdr-surface-alt);
}

:root[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--mdr-surface-raised);
  --bs-dropdown-border-color: var(--mdr-border-strong);
  --bs-dropdown-link-hover-bg: var(--mdr-active);
}

:root[data-theme="dark"] .popover {
  --bs-popover-bg: var(--mdr-surface-raised);
  --bs-popover-border-color: var(--mdr-border-strong);
  --bs-popover-header-bg: var(--mdr-surface-alt);
}

:root[data-theme="dark"] .toast {
  --bs-toast-bg: rgba(41, 52, 74, 0.95);
  --bs-toast-header-bg: rgba(30, 38, 53, 0.95);
  --bs-toast-border-color: var(--mdr-border-strong);
}

:root[data-theme="dark"] .list-group {
  --bs-list-group-bg: var(--mdr-surface);
  --bs-list-group-border-color: var(--mdr-border);
}

:root[data-theme="dark"] .table {
  --bs-table-bg: var(--mdr-surface);
}

/* ── Utilitários do Bootstrap com cor fixa ──
   O `data-bs-theme="dark"` não muda `bg-light`, `bg-white`, `text-dark`,
   `btn-dark`, `btn-outline-dark` e `table-light`: no Bootstrap eles são cores
   absolutas. Em vez de trocar classe por classe nas páginas (e nas strings de
   HTML montadas no JS), o escuro do MDR os remapeia aqui.
   `text-dark` continua escuro sobre os fundos que ficam claros no escuro
   (`bg-warning`, `bg-info`): é o par "badge amarelo com texto preto". */
:root[data-theme="dark"] .bg-light {
  background-color: var(--mdr-surface-alt) !important;
}

:root[data-theme="dark"] .bg-white {
  background-color: var(--mdr-surface) !important;
}

:root[data-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info) {
  color: var(--mdr-text) !important;
}

:root[data-theme="dark"] .bg-warning .text-dark,
:root[data-theme="dark"] .bg-info .text-dark {
  color: #212529 !important;
}

/* Cabeçalho amarelo/azul-claro (`modal-header bg-warning`): o título herda a cor
   de título do tema, clara no escuro, e o X do Bootstrap fica branco. Sobre esses
   fundos os dois voltam a ser escuros. */
:root[data-theme="dark"] :is(.bg-warning, .bg-info) :is(h1, h2, h3, h4, h5, h6, .modal-title),
:root[data-theme="dark"] :is(.bg-warning, .bg-info):is(h1, h2, h3, h4, h5, h6, .modal-title) {
  color: #212529;
}

:root[data-theme="dark"] :is(.bg-warning, .bg-info) .btn-close {
  filter: none;
}

:root[data-theme="dark"] .border-light {
  border-color: var(--mdr-border) !important;
}

:root[data-theme="dark"] .btn-dark,
:root[data-theme="dark"] .btn-light {
  --bs-btn-color: var(--mdr-text-strong);
  --bs-btn-bg: var(--mdr-surface-raised);
  --bs-btn-border-color: var(--mdr-border-strong);
  --bs-btn-hover-color: var(--mdr-text-strong);
  --bs-btn-hover-bg: var(--mdr-active);
  --bs-btn-hover-border-color: var(--mdr-border-strong);
  --bs-btn-active-color: var(--mdr-text-strong);
  --bs-btn-active-bg: var(--mdr-active);
  --bs-btn-active-border-color: var(--mdr-border-strong);
  --bs-btn-disabled-color: var(--mdr-text-muted);
  --bs-btn-disabled-bg: var(--mdr-surface-alt);
  --bs-btn-disabled-border-color: var(--mdr-border);
}

:root[data-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--mdr-text-secondary);
  --bs-btn-border-color: var(--mdr-border-strong);
  --bs-btn-hover-color: var(--mdr-text-strong);
  --bs-btn-hover-bg: var(--mdr-active);
  --bs-btn-hover-border-color: var(--mdr-border-strong);
  --bs-btn-active-color: var(--mdr-text-strong);
  --bs-btn-active-bg: var(--mdr-active);
  --bs-btn-active-border-color: var(--mdr-border-strong);
  --bs-btn-disabled-color: var(--mdr-text-muted);
  --bs-btn-disabled-border-color: var(--mdr-border);
}

:root[data-theme="dark"] .table-light {
  --bs-table-color: var(--mdr-text-strong);
  --bs-table-bg: var(--mdr-surface-alt);
  --bs-table-border-color: var(--mdr-border-strong);
  --bs-table-striped-bg: var(--mdr-surface-raised);
  --bs-table-hover-bg: var(--mdr-hover);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

/* ── Células pintadas por status ──
   O JS pinta o fundo da célula com a cor do status (funcApoio.js, pintaStatus)
   e marca `data-mdr-ink` conforme a luminância desse fundo. No claro a marca
   não faz nada (o texto herda, como sempre); no escuro ela evita texto claro
   sobre fundo vivo. */
:root[data-theme="dark"] [data-mdr-ink="dark"] {
  color: #1b1f24 !important;
}

:root[data-theme="dark"] [data-mdr-ink="light"] {
  color: var(--mdr-text-strong) !important;
}

/* ── Logo ──
   O logoLong.png (texto azul-marinho) troca para "Longitude logo 2.png" (letras
   brancas) no escuro. A troca é de `src`, feita pelo js/theme/theme.js em todo
   <img class="sb-logo-full"> e <img class="mdr-logo-ink">: não há regra aqui. */

/* ── Tabulator 6 (tema semanticui) ──
   O semanticui escreve as cores direto nas regras, sem variáveis. Aqui fica só
   o que é cor; layout e tamanhos continuam os dele. Cor de linha aplicada por
   JS (rowFormatter de status) não passa por aqui: é tratada na migração de
   cada página. */
:root[data-theme="dark"] .tabulator {
  border-color: var(--mdr-border-strong);
  background-color: var(--mdr-surface);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .tabulator .tabulator-header,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col,
:root[data-theme="dark"] .tabulator-row .tabulator-cell.tabulator-row-header {
  border-color: var(--mdr-border-strong);
  background-color: var(--mdr-surface-alt);
  color: var(--mdr-text-strong);
}

:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-moving {
  background-color: var(--mdr-hover);
}

:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col input,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col select {
  border: 1px solid var(--mdr-border-strong);
  background: var(--mdr-bg);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
  border-color: var(--mdr-border);
}

:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--mdr-surface);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--mdr-text-subtle);
}

:root[data-theme="dark"] .tabulator-row {
  background-color: var(--mdr-surface);
}

:root[data-theme="dark"] .tabulator-row.tabulator-row-even {
  background-color: #202838;
}

/* Hover, seleção e calcs: o semanticui escreve estas com `!important`, então
   aqui também precisam dele (o seletor mais específico não basta). */
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .tabulator-row.tabulator-selectable:hover {
    background: var(--mdr-hover) !important;
    color: var(--mdr-text-strong) !important;
  }

  :root[data-theme="dark"] .tabulator-row.tabulator-selected:hover {
    background-color: #3a5480 !important;
  }
}

:root[data-theme="dark"] .tabulator-row.tabulator-selected {
  background-color: #34496e !important;
  color: var(--mdr-text-strong);
}

:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
:root[data-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row,
:root[data-theme="dark"] .tabulator .tabulator-footer .tabulator-calcs-holder,
:root[data-theme="dark"] .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
  background: var(--mdr-surface-alt) !important;
}

/* Estados de linha/célula do semanticui (positive, negative...), também com !important. */
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.positive,
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.positive {
  background: rgba(33, 186, 69, 0.14) !important;
  color: #6ee7a0 !important;
}

:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.negative,
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.negative,
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.error,
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.error {
  background: rgba(219, 40, 40, 0.14) !important;
  color: #ff8a80 !important;
}

:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.warning,
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.warning {
  background: rgba(242, 192, 55, 0.14) !important;
  color: #fcd34d !important;
}

:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active,
:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active {
  background: var(--mdr-active) !important;
  color: var(--mdr-text-strong) !important;
}

:root[data-theme="dark"] .tabulator-row .tabulator-cell,
:root[data-theme="dark"] .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,
:root[data-theme="dark"] .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right,
:root[data-theme="dark"] .tabulator-row .tabulator-responsive-collapse {
  border-color: var(--mdr-border);
}

:root[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs {
  background: var(--mdr-surface-alt) !important;
}

:root[data-theme="dark"] .tabulator-row.tabulator-group {
  border-color: var(--mdr-border-strong);
  background: var(--mdr-surface-raised);
  color: var(--mdr-text-strong);
}

:root[data-theme="dark"] .tabulator-row.tabulator-group span {
  color: #ff8a80;
}

:root[data-theme="dark"] .tabulator .tabulator-footer {
  border-color: var(--mdr-border-strong);
  background-color: var(--mdr-surface-alt);
  color: var(--mdr-text-secondary);
}

:root[data-theme="dark"] .tabulator .tabulator-footer .tabulator-paginator {
  color: var(--mdr-text-secondary);
}

:root[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page,
:root[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page-size {
  border-color: var(--mdr-border-strong);
  background: var(--mdr-surface);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active {
  color: #ff8a80;
}

:root[data-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg {
  background: var(--mdr-surface-raised);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .tabulator-popup-container {
  border-color: var(--mdr-border-strong);
  background: var(--mdr-surface-raised);
  color: var(--mdr-text);
}

@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--mdr-active);
  }
}

:root[data-theme="dark"] .tabulator-menu .tabulator-menu-separator {
  border-color: var(--mdr-border);
}

:root[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item,
:root[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-placeholder,
:root[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-group {
  border-color: var(--mdr-border);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .tabulator-row .tabulator-cell .tabulator-data-tree-branch {
  border-color: var(--mdr-border-strong);
}

/* ── daterangepicker 3.1 ── */
:root[data-theme="dark"] .daterangepicker {
  border-color: var(--mdr-border-strong);
  background-color: var(--mdr-surface-raised);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .daterangepicker:before,
:root[data-theme="dark"] .daterangepicker.drop-up:before {
  border-bottom-color: var(--mdr-border-strong);
}

:root[data-theme="dark"] .daterangepicker.drop-up:before {
  border-top-color: var(--mdr-border-strong);
}

:root[data-theme="dark"] .daterangepicker:after {
  border-bottom-color: var(--mdr-surface-raised);
}

:root[data-theme="dark"] .daterangepicker.drop-up:after {
  border-top-color: var(--mdr-surface-raised);
}

:root[data-theme="dark"] .daterangepicker .calendar-table {
  border-color: var(--mdr-surface-raised);
  background-color: var(--mdr-surface-raised);
}

:root[data-theme="dark"] .daterangepicker .calendar-table .next span,
:root[data-theme="dark"] .daterangepicker .calendar-table .prev span {
  border-color: var(--mdr-text);
}

:root[data-theme="dark"] .daterangepicker td.available:hover,
:root[data-theme="dark"] .daterangepicker th.available:hover,
:root[data-theme="dark"] .daterangepicker .ranges li:hover {
  background-color: var(--mdr-active);
}

:root[data-theme="dark"] .daterangepicker td.off,
:root[data-theme="dark"] .daterangepicker td.off.in-range,
:root[data-theme="dark"] .daterangepicker td.off.start-date,
:root[data-theme="dark"] .daterangepicker td.off.end-date {
  background-color: var(--mdr-surface-raised);
  color: var(--mdr-text-subtle);
}

:root[data-theme="dark"] .daterangepicker td.in-range {
  background-color: #2f3d57;
  color: var(--mdr-text-strong);
}

:root[data-theme="dark"] .daterangepicker td.active,
:root[data-theme="dark"] .daterangepicker td.active:hover {
  background-color: #357ebd;
  color: #fff;
}

:root[data-theme="dark"] .daterangepicker td.week,
:root[data-theme="dark"] .daterangepicker th.week,
:root[data-theme="dark"] .daterangepicker td.disabled,
:root[data-theme="dark"] .daterangepicker option.disabled {
  color: var(--mdr-text-subtle);
}

:root[data-theme="dark"] .daterangepicker select.hourselect,
:root[data-theme="dark"] .daterangepicker select.minuteselect,
:root[data-theme="dark"] .daterangepicker select.secondselect,
:root[data-theme="dark"] .daterangepicker select.ampmselect,
:root[data-theme="dark"] .daterangepicker select.monthselect,
:root[data-theme="dark"] .daterangepicker select.yearselect {
  border-color: var(--mdr-border-strong);
  background: var(--mdr-surface);
  color: var(--mdr-text);
}

:root[data-theme="dark"] .daterangepicker .drp-buttons,
:root[data-theme="dark"] .daterangepicker.show-ranges.single.ltr .drp-calendar.left,
:root[data-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-color: var(--mdr-border);
}

/* ── Choices.js 11 ── a biblioteca já lê variáveis, então basta redefini-las. */
:root[data-theme="dark"] .choices {
  --choices-bg-color: var(--mdr-surface);
  --choices-bg-color-dropdown: var(--mdr-surface-raised);
  --choices-bg-color-disabled: var(--mdr-surface-alt);
  --choices-keyline-color: var(--mdr-border-strong);
  --choices-text-color: var(--mdr-text);
  --choices-highlighted-color: var(--mdr-active);
  --choices-darken: white;
  --choices-lighten: black;
  color: var(--mdr-text);
}

/* ── Tippy.js 6 ──
   O MDR usa o tema padrão (tooltip escura), que funciona nos dois temas; o
   `theme: 'light'` das chamadas não tem CSS carregado. No escuro a tooltip
   ganha só um contorno para não sumir no fundo. */
:root[data-theme="dark"] .tippy-box {
  box-shadow: 0 0 0 1px var(--mdr-border-strong);
}