﻿/* ============================================================================
   ESTUDO pedro 2026-06-02 Reskin Orvyx (be) — overrides cirurgicos.
   Unico arquivo com !important, usado SOMENTE para vencer regras !important
   pre-existentes (vendor/css/skin.css #navbar/#content-container e afins).
   Carregado por ultimo no <head> do Site.Master.
   ============================================================================ */

/* skin.css:3 + <style> inline do cabecalho.ascx pintam o topo:
   #navbar em azul solido e #navbar-container com gradiente magenta
   (background-IMAGE). Limpamos cor E imagem para o topo ficar escuro. */
#navbar,
#navbar-container,
#navbar .brand-title {
    background-color: var(--card) !important;
    background-image: none !important;
}

/* #content-container tem fundo cinza claro (Nifty/skin) que vaza no tema
   escuro atras do page-head. Forcamos transparente para herdar o fundo. */
#content-container {
    background-color: transparent !important;
}

/* Sidebar opaca seguindo o tema (Nifty/boxed-bg pinta escuro por imagem) */
#mainnav-container,
#mainnav,
#mainnav .nano-content,
#mainnav-profile {
    background-color: var(--card) !important;
    background-image: none !important;
}

/* Fundo do app sem textura/imagem do Nifty (boxed-bg) */
body#corpo,
#container {
    background-image: none !important;
}

/* O <li> ativo recebe fundo magenta do Nifty/skin (.active-sub/.active) que
   vaza na margem do <a>. Neutralizamos — o realce fica so no proprio <a>. */
#mainnav-menu > li.active,
#mainnav-menu > li.active-sub,
#mainnav-menu > li.active-link {
    background-color: transparent !important;
    background-image: none !important;
}

/* Banda atras do page-head (skin.css #content-container:before = azul solido).
   Era um bloco de 165px; deixamos transparente para o page-head ficar sobre o
   fundo de tema (visual limpo), evitando o gradiente magenta dominante. */
#content-container:before {
    background: transparent !important;
    height: 0 !important;
}

/* skin.css:1032 breadcrumb azul em telas pequenas */
#page-head .breadcrumb {
    background-color: transparent !important;
}

/* skin.css:1040-1050 reforca cor solida de botoes no mobile — remapear a tokens */
.btn.btn-purple {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.btn.btn-mint {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

/* skin.css:541 paginacao com fundo azul fixo #25476a */
.pagination span {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

/* skin.css:600 links em tabela com azul fixo #336699 */
#page-content table td a:not(.btn) {
    color: var(--primary) !important;
}

/* Toasts flutuantes (style inline do Site.Master) seguem claros por design;
   no tema escuro mantemos legibilidade do corpo. */
html.dark #floating-top-container .alert-wrap > .alert {
    background: rgba(21, 17, 31, 0.92) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

html.dark .custom-notification {
    color: var(--foreground);
}

/* ============================================================================
   Correcoes dark de widgets legados do kHome (modo "n") — 2026-06-02.
   Telas como n_acesso/n_unidade/perfil usam classes proprias (profile-wrap,
   chosen, nav-acesso) com fundo/cor fixos claros que estouravam no tema escuro.
   So no html.dark, para nao afetar o tema claro.
   ============================================================================ */

/* Perfil da sidebar: .profile-wrap tinha background:#fff fixo, criando uma
   caixa branca atras do nome (que ja e claro) no tema escuro. */
html.dark .mainnav-profile .profile-wrap {
    background-color: transparent !important;
}

/* .text-primary legado vinha navy escuro (#1c3550), ilegivel no escuro.
   Remapeia para o azul primario do tema (claro o suficiente p/ contraste). */
html.dark .text-primary {
    color: var(--primary) !important;
}

/* Labels de formulario: algumas paginas (ex.: faturas) trazem .control-label
   #2c3e50 via CSS proprio carregado depois da camada orvyx. Forca legibilidade. */
html.dark #container .control-label,
html.dark #container label {
    color: var(--foreground) !important;
}

/* Combo "chosen" (.chosen-select) — usado em n_unidade ("Selecione o Bloco"),
   relatorios ("Tipo"/"Unidade") etc. Dois bugs: (a) o controle fechado e um
   <a>, que herdava o :hover de link e ficava com texto BRANCO no tema claro
   (invisivel no fundo branco); (b) a lista de <option> nao seguia o tema e
   ficava com texto escuro no escuro. Estilizado para AMBOS os temas, com hover
   estavel. */
#container .chosen-container-single .chosen-single {
    background-color: var(--card) !important;
    border: 1px solid var(--input) !important;
    box-shadow: none !important;
}

#container .chosen-container-single .chosen-single,
#container .chosen-container-single .chosen-single span,
#container .chosen-container-single .chosen-single:hover,
#container .chosen-container-single .chosen-single:hover span,
#container .chosen-container-single .chosen-single:focus,
#container .chosen-container-single .chosen-single:focus span,
#container .chosen-container-single .chosen-single abbr {
    color: var(--foreground) !important;
}

/* Lista de opcoes (drop) + campo de busca interno */
#container .chosen-container .chosen-drop {
    background-color: var(--card) !important;
    border-color: var(--border) !important;
    box-shadow: var(--ovx-shadow-md) !important;
}

#container .chosen-container .chosen-results li {
    color: var(--foreground) !important;
    background-color: transparent !important;
}

/* Item destacado (hover/teclado). O seletor combinado .result-selected.highlighted
   garante texto branco AO PASSAR O MOUSE sobre o item ja selecionado — senao a
   regra .result-selected (cinza) vencia e ficava cinza no fundo azul. */
#container .chosen-container .chosen-results li.highlighted,
#container .chosen-container .chosen-results li.result-selected.highlighted {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

/* Item selecionado (sem hover): atenuado, mas legivel */
#container .chosen-container .chosen-results li.result-selected {
    color: var(--muted-foreground) !important;
}

#container .chosen-container .chosen-search input,
#container .chosen-container-single .chosen-search-input {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
    border-color: var(--input) !important;
}

/* Abas estilo Bootstrap 4 (.nav-tabs > .nav-link.active) usadas em n_acesso:
   a aba ativa tinha fundo branco fixo. Segue o card no escuro. */
html.dark .nav-tabs {
    border-bottom-color: var(--border);
}

html.dark .nav-tabs .nav-link {
    color: var(--muted-foreground);
}

html.dark .nav-tabs .nav-link.active,
html.dark .nav-tabs .nav-link.active:hover,
html.dark .nav-tabs .nav-link.active:focus {
    background: var(--card) !important;
    color: var(--foreground) !important;
    border-color: var(--border) var(--border) transparent !important;
}

/* Abas no estilo Bootstrap 3 (li > a) — ex.: minha_conta ("Meus Dados",
   "Cancelar Minha Conta", "Plano"). A inativa vinha com fundo claro fixo. */
html.dark .nav-tabs > li > a {
    background-color: transparent !important;
    color: var(--muted-foreground);
}

html.dark .nav-tabs > li.active > a,
html.dark .nav-tabs > li.active > a:hover,
html.dark .nav-tabs > li.active > a:focus {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
    border-color: var(--border) var(--border) transparent !important;
}

/* Superficies brancas legadas dentro de paineis/abas: varias telas do kHome
   pintam .panel-body / .tab-content de #fff, o que vira uma "folha branca"
   atras de inputs transparentes no tema escuro (ex.: minha_conta). Seguem o card. */
html.dark #container .panel-body,
html.dark #container .panel-heading,
html.dark #container .tab-content,
html.dark #container .tab-pane {
    background-color: transparent !important;
}

/* Inputs que paginas proprias (CSS carregado depois da camada orvyx) repintavam
   de branco no escuro — incluindo campos de data/datetimepicker. */
html.dark #container .form-control {
    background-color: transparent !important;
    color: var(--foreground) !important;
}

/* d_pipelines (cadastro de boards do chat, modo "w") usa .pipeline-header com
   fundo branco proprio que estourava no escuro. Segue o card do tema. */
html.dark .pipeline-header {
    background-color: var(--card) !important;
    border-color: var(--border) !important;
}

/* ============================================================================
   Correcoes round 2 (2026-06-03) — feedback de telas reais (n_main, grids,
   n_acesso, n_comunicado_manut, n_veiculo_search, n_ia_agent, faturas).
   ============================================================================ */

/* (1) Paineis "colorful" (dashboard kHome e cabecalho de saldo): mantem a cor
   vibrante do Nifty (a regra base .panel ja os exclui) com cantos/sombra do
   tema e SEMPRE texto branco (corrige numeros sumindo e "Saldo Atual" preto). */
#container .panel-colorful {
    border: none !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--ovx-shadow-sm) !important;
}

#container .panel-colorful,
#container .panel-colorful .panel-heading,
#container .panel-colorful .panel-title,
#container .panel-colorful .panel-title *,
#container .panel-colorful p,
#container .panel-colorful .text-uppercase {
    color: #fff !important;
}

/* (2) Hover das grids: o Bootstrap pinta o <td> de #f5f5f5 (claro). No escuro
   a linha ficava branca e o texto (claro) sumia. Realce azulado escuro legivel. */
html.dark #container .table-hover > tbody > tr:hover > td {
    background-color: color-mix(in srgb, var(--primary) 22%, var(--card)) !important;
    color: var(--foreground) !important;
}

/* (3) Classes contextuais de linha do Bootstrap (.danger/.warning/.info/.success
   /.active) — fundo claro fixo pintado no <td>. Ex.: aba "Pre Autorizado"
   (linhas .danger). No escuro viravam fundo claro + texto claro. Remapeadas. */
html.dark #container .table > tbody > tr.danger > td,
html.dark #container .table > tbody > tr.danger > th {
    background-color: color-mix(in srgb, var(--destructive) 24%, var(--card)) !important;
    color: var(--foreground) !important;
}

html.dark #container .table > tbody > tr.warning > td {
    background-color: color-mix(in srgb, var(--warning) 22%, var(--card)) !important;
    color: var(--foreground) !important;
}

html.dark #container .table > tbody > tr.success > td {
    background-color: color-mix(in srgb, var(--success) 20%, var(--card)) !important;
    color: var(--foreground) !important;
}

html.dark #container .table > tbody > tr.info > td,
html.dark #container .table > tbody > tr.active > td {
    background-color: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
    color: var(--foreground) !important;
}

/* (4) Selects nativos (asp:DropDownList / <select>) no escuro.
   - color-scheme: dark  -> corrige o VALOR FECHADO (texto claro, nao some);
   - fundo/cor explicitos -> caixa fechada com contraste consistente;
   - option {cor/fundo}   -> corrige a LISTA ABERTA (popup), evitando texto
     escuro-no-escuro (apagado). A combinacao dos tres e necessaria no
     Chrome/Windows; isolados, um quebra o fechado e o outro deixa o popup ruim.
   Ex.: n_veiculo_search ("Selecione a camera"), "Forma de Pagamento" (faturas). */
html.dark #container select,
html.dark #container select.form-control {
    color-scheme: dark;
    background-color: var(--input) !important;
    color: var(--foreground) !important;
}

html.dark #container select option {
    background-color: var(--card);
    color: var(--foreground);
}

/* (5) Caixas claras fixas de paginas especificas (CSS/inline proprio) que nao
   seguiam o escuro — o fundo claro deixava o texto (claro do tema) ilegivel.
   Neutraliza o fundo para o card do tema. */

/* n_comunicado_manut: secoes, cards de envio, dropzone, barra de acoes */
html.dark #container #divnovo,
html.dark #container .comunicado-section,
html.dark #container .envio-option-card,
html.dark #container .comunicado-actions,
html.dark #container .dropzone {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

html.dark #container .comunicado-section-title,
html.dark #container .comunicado-section-title i,
html.dark #container .envio-option-label,
html.dark #container .comunicado-form-group label {
    color: var(--foreground) !important;
}

/* n_ia_agent: caixa "Vantagens para o condominio" (#f8f9fa) */
html.dark #container .ia-agent-vantagens {
    background: var(--card) !important;
    border-left-color: var(--primary) !important;
}

html.dark #container .ia-agent-vantagens h4 {
    color: var(--foreground) !important;
}

/* faturas: caixa do aceite (.checkbox com fundo claro inline) — neutraliza o
   fundo para o texto do aceite ficar legivel no escuro. */
html.dark #container .checkbox {
    background-color: transparent !important;
}

/* ============================================================================
   Correcoes MOBILE (2026-06-03) — o layout orvyx era pensado p/ desktop
   (navbar + sidebar fixos). No mobile (<768px) isso causava: titulo coberto
   pelo navbar (que quebra em ~2 linhas/120px, mas o offset #content-container
   era de 58px do navbar desktop), espaco a esquerda (padding do mainnav-sm) e
   chosen estourando o box. Aqui o conteudo volta a fluir normalmente.
   ============================================================================ */
@media (max-width: 767px) {
    /* Navbar no fluxo do documento (nao-fixo): o conteudo passa a vir ABAIXO
       dele independentemente da altura, sem cobrir o titulo. */
    #navbar {
        position: static !important;
    }

    /* Zera o offset de topo que existia p/ compensar o navbar fixo do desktop. */
    #content-container {
        padding-top: 0 !important;
    }

    /* Sidebar recolhida (drawer) nao deve reservar espaco a esquerda: o
       #container.mainnav-sm #page-content (83px) vencia o gutter mobile.
       Gutter pequeno (8px) p/ aproveitar a largura da tela. */
    #page-content,
    #container.mainnav-sm #page-content,
    #content-container > #page-head,
    #content-container > #page-content,
    #content-container > #Home-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Paineis com padding interno menor no mobile -> mais espaco p/ o conteudo/grid */
    #container .panel-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Tabelas/grids mais compactos no mobile (cabe mais coluna por tela) */
    #container .table th,
    #container .table > tbody > tr > td {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Combos "chosen" ocupam a largura do container (nao estouram o box) */
    #container .chosen-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================================
   Notificações (sino + toasts) — legibilidade no tema escuro.
   O esquema claro (vidro fosco) é definido no <style> do cabecalho.ascx;
   aqui só ajustamos as superfícies para o dark mode.
   ============================================================================ */
html.dark #floating-top-container .alert-wrap > .alert {
    background: rgba(21, 17, 31, 0.92) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}
html.dark .custom-notification { color: var(--foreground); }
html.dark .custom-notification b,
html.dark .custom-notification strong { color: var(--foreground); }

html.dark #notification-dropdown .dropdown-menu .pad-all.bord-btm {
    background: var(--muted) !important;
    border-bottom-color: var(--border) !important;
}
html.dark #notification-list.head-list { background: var(--card); }
html.dark .alerta-dropdown-item .alerta-dropdown-linha {
    background: var(--muted);
    border-color: var(--border);
}
html.dark .alerta-dropdown-msg { color: var(--foreground); }
html.dark .alerta-dropdown-msg b,
html.dark .alerta-dropdown-msg strong { color: var(--foreground); }
html.dark #notification-list .no-notifications,
html.dark #notification-list .no-notifications a { color: var(--muted-foreground); }

/* ============================================================================
   Round 7 (2026-06-03): abas (nav-tabs) nos 2 temas, .well, e telas com CSS
   proprio claro: d_chat_manut, d_jornada_operador, d_pipelines(_insights).
   ============================================================================ */

/* (a) Abas Bootstrap 3 (li.active>a) e BS4 (.nav-link.active). No light a aba
   ativa ficava branca/suave (dificil ver) e o hover sumia (heranca do a:hover).
   Indicador claro: borda inferior + texto primarios. #container vence as regras
   html.dark antigas (id na especificidade), entao serve aos 2 temas. */
#container .nav-tabs {
    border-bottom: 1px solid var(--border);
}

#container .nav-tabs > li > a,
#container .nav-tabs .nav-link {
    color: var(--muted-foreground);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-right: 2px;
}

#container .nav-tabs > li > a:hover,
#container .nav-tabs > li > a:focus,
#container .nav-tabs .nav-link:hover,
#container .nav-tabs .nav-link:focus {
    color: var(--foreground) !important;
    background-color: var(--secondary) !important;
    border-color: transparent !important;
}

#container .nav-tabs > li.active > a,
#container .nav-tabs > li.active > a:hover,
#container .nav-tabs > li.active > a:focus,
#container .nav-tabs .nav-link.active {
    color: var(--primary) !important;
    background-color: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-bottom: 2px solid var(--primary) !important;
    font-weight: 600;
}

/* (b) .well (caixa cinza do Bootstrap) — ex.: aba "Turnos" do d_chat_manut */
html.dark #container .well {
    background-color: var(--secondary) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
    color: var(--foreground);
}

/* (c) d_jornada_operador — cards/timeline/historico com #fff fixo no dark */
html.dark #container .jornada-card,
html.dark #container .timeline-wrapper,
html.dark #container .historico-card {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

html.dark #container .jornada-card .titulo,
html.dark #container .jornada-card .nota,
html.dark #container .jornada-filtros label,
html.dark #container .historico-card .totais,
html.dark #container .empty-state {
    color: var(--muted-foreground) !important;
}

html.dark #container .jornada-card .valor,
html.dark #container .historico-card .data {
    color: var(--foreground) !important;
}

html.dark #container .jornada-card.alvo {
    background: color-mix(in srgb, var(--success) 18%, var(--card)) !important;
    border-color: color-mix(in srgb, var(--success) 40%, var(--border)) !important;
}

html.dark #container .jornada-card.alerta {
    background: color-mix(in srgb, var(--warning) 18%, var(--card)) !important;
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border)) !important;
}

/* tooltip da timeline e anexado ao <body> (fora do #container) */
html.dark .timeline-tooltip {
    background: var(--card) !important;
    border-color: var(--border) !important;
}
html.dark .timeline-tooltip .tt-val,
html.dark .timeline-tooltip .tt-title { color: var(--foreground) !important; }
html.dark .timeline-tooltip .tt-key { color: var(--muted-foreground) !important; }

/* (d) d_pipelines — board, colunas e cards de label/campos com #fff/#f.. fixo */
html.dark #container .kanban-container {
    background: var(--background) !important;
}

html.dark #container .kanban-column,
html.dark #container .label-admin-card,
html.dark #container .campo-item {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground);
}

html.dark #container .kanban-column-header {
    background: var(--secondary) !important;
    border-bottom-color: var(--border) !important;
    color: var(--foreground);
}

html.dark #container .campo-item:hover,
html.dark #container .usuario-item:hover,
html.dark #container .tabela-permissoes tbody tr:hover {
    background: var(--secondary) !important;
}

/* (e) d_pipelines_insights — kpi-card / panel-insight / barra de filtros #fff */
html.dark #container .kpi-card,
html.dark #container .panel-insight,
html.dark #container .insights-filtros {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground);
}

/* Valor grande do KPI vinha #212529 (escuro) -> sumia no card escuro */
html.dark #container .kpi-valor {
    color: var(--foreground) !important;
}

html.dark #container .kpi-label {
    color: var(--muted-foreground) !important;
}

/* ============================================================================
   Round 8 (2026-06-03): telas com CSS proprio claro: d_template_manut,
   d_prompt_manut, minha_conta_plano, faturas (modal recarga).
   ============================================================================ */

/* d_template_manut — cabecalhos de secao, itens, campos readonly, emoji picker */
html.dark #container .section-header {
    background: var(--secondary) !important;
    color: var(--foreground) !important;
}

html.dark #container .button-item,
html.dark #container .list-item,
html.dark #container .carousel-item {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    color: var(--foreground);
}

html.dark #container .readonly-field {
    background-color: var(--secondary) !important;
    color: var(--muted-foreground) !important;
}

html.dark #container .body-emoji-picker {
    background: var(--popover) !important;
    border-color: var(--border) !important;
}

/* Preview do WhatsApp: container escuro; o balao branco (msg recebida) com
   texto escuro continua legivel por cima. */
html.dark #container .preview-container {
    background: var(--secondary) !important;
}

/* d_prompt_manut — sessoes/versoes com #f9f9f9 fixo */
html.dark #container .sessao-item,
html.dark #container .versao-item {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    color: var(--foreground);
}

html.dark #container .sessao-item:hover {
    background: var(--accent) !important;
}

html.dark #container .sessao-descricao { color: var(--muted-foreground) !important; }
html.dark #container .sessao-conteudo { color: var(--foreground) !important; }

/* minha_conta_plano — cards de plano com fundo claro inline (por id) */
html.dark #container #khomePlanoCard,
html.dark #container #khomePlanoOff {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* faturas — modal de recarga automatica (.modalPopup do ModalPopupExtender,
   renderizado fora do #container, por isso sem esse escopo) */
html.dark .modalPopup {
    background: var(--card) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
}

html.dark .modalPopup label,
html.dark .modalPopup .control-label,
html.dark .modalPopup h4,
html.dark .modalPopup strong {
    color: var(--foreground) !important;
}

/* ============================================================================
   Round 9 (2026-06-03): mais telas com CSS proprio claro estourando no escuro
   (d_integracao_test/playground, services, server_task_manager, w_stats), o
   botao "Fechar" do modal compartilhado e os SUBITENS da sidebar (1o nivel ja
   era tratado no orvyx-shell). manager_dash_saas tem bloco proprio na pagina.
   ============================================================================ */

/* --- Subitens do menu lateral (itens aninhados) ----------------------------
   orvyx-shell estiliza so o 1o nivel (#mainnav-menu > li > a). Os subitens
   (#mainnav-menu ul li a) caiam no legado: o ATIVO ficava com fundo branco e o
   HOVER ESCURECIA o texto (heranca do #container a:hover). Vale p/ os 2 temas. */
#mainnav-menu ul li a {
    color: var(--foreground);
    transition: background-color .15s ease, color .15s ease;
}

#mainnav-menu ul li a:hover,
#mainnav-menu ul li a:focus {
    background: var(--secondary) !important;
    color: var(--foreground) !important;
}

#mainnav-menu ul li.active > a,
#mainnav-menu ul li.active-link > a,
#mainnav-menu ul li.active-sub > a {
    background: var(--secondary) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

/* --- d_integracao_test.aspx (Playground "Testar Bot") ----------------------- */
html.dark #container .pg-chat-col,
html.dark #container .pg-input-row,
html.dark #container .pg-telemetria {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground);
}

html.dark #container .pg-chat-area {
    background: var(--background) !important;
}

/* Balao do bot (assistant): superficie escura + texto claro */
html.dark #container .pg-msg-assistant {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* Balao do usuario: mantem o verde do WhatsApp, mas texto escuro p/ contraste */
html.dark #container .pg-msg-user {
    color: #10251c !important;
}

html.dark #container .pg-msg-system {
    background: color-mix(in srgb, var(--warning) 18%, var(--card)) !important;
    color: var(--foreground) !important;
}

html.dark #container .pg-cost-line { color: var(--muted-foreground) !important; }

/* --- services.aspx ---------------------------------------------------------- */
html.dark #container .service-item {
    background-color: var(--secondary) !important;
    border-color: var(--border) !important;
}

html.dark #container .service-name { color: var(--foreground) !important; }

html.dark #container .service-description,
html.dark #container .loading { color: var(--muted-foreground) !important; }

html.dark #container .process-id {
    background-color: var(--card) !important;
    color: var(--muted-foreground) !important;
    border-color: var(--border) !important;
}

/* --- server_task_manager.aspx ----------------------------------------------- */
html.dark #container .process-item {
    background-color: var(--secondary) !important;
    border-color: var(--border) !important;
}

html.dark #container .process-name { color: var(--foreground) !important; }

html.dark #container .process-details,
html.dark #container .stat-label { color: var(--muted-foreground) !important; }

html.dark #container .process-command {
    background-color: var(--card) !important;
    color: var(--muted-foreground) !important;
}

html.dark #container .sort-controls {
    background-color: var(--card) !important;
}

/* --- w_stats.aspx ----------------------------------------------------------- */
html.dark #container .wstats-section {
    background: var(--card) !important;
    box-shadow: var(--ovx-shadow-sm) !important;
}

html.dark #container .wstats-section h2 {
    background: var(--secondary) !important;
    color: var(--foreground) !important;
    border-bottom-color: var(--border) !important;
}

html.dark #container .wstats-card {
    background: var(--secondary) !important;
}

html.dark #container .wstats-card .value { color: var(--foreground) !important; }
html.dark #container .wstats-card .label { color: var(--muted-foreground) !important; }
html.dark #container .wstats-section .table th { background: var(--secondary) !important; }

html.dark #container .wstats-error {
    background: color-mix(in srgb, var(--destructive) 18%, var(--card)) !important;
    color: var(--foreground) !important;
}

/* --- Modal compartilhado (Site.Master panel_mensagem .modalPopup) -----------
   O "Fechar" (btnClose) e um <input type=submit> SEM classe .btn -> ficava
   branco (default do browser) no escuro. O titulo (h1.h3) vinha #111827 (escuro)
   e sumia no card escuro. Corrige os dois. */
html.dark .modalPopup h1,
html.dark .modalPopup .h3 { color: var(--foreground) !important; }

html.dark .modalPopup input[type="submit"],
html.dark .modalPopup input[type="button"],
html.dark .modalPopup button {
    background: var(--secondary) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px;
}

html.dark .modalPopup input[type="submit"]:hover,
html.dark .modalPopup input[type="button"]:hover,
html.dark .modalPopup button:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--secondary)) !important;
}

/* --- w_instancia.aspx — cartoes de "tipo de conexao" (WhatsGW x Business App) -
   No escuro o corpo do .panel-mint/.panel-info ficava transparente, entao os
   cartoes "sumiam" (so icone/titulo/radio flutuando, sem superficie de cartao).
   Da superficie ao cartao, melhora a descricao e deixa o SELECIONADO obvio com um
   anel primario (alem do border colorido proprio de cada tipo). */
html.dark #container .tipo-selecao-card .panel {
    background: var(--secondary) !important;
}

html.dark #container .tipo-selecao-card p {
    color: var(--muted-foreground) !important;
}

/* Cartao selecionado (radio interno marcado) — realce nos 2 temas */
#container .tipo-selecao-card:has(input[type="radio"]:checked) .panel {
    box-shadow: 0 0 0 2px var(--primary), 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

/* --- bootstrap-datepicker (campos de data dos dashboards: w_main, n_main, etc.) --
   O popup do calendario era branco fixo (vendor) -> ilegivel no escuro. E
   apendado ao <body> (fora do #container), por isso o escopo e so html.dark. */
html.dark .datepicker.datepicker-dropdown,
html.dark .datepicker {
    background: var(--popover) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
    box-shadow: var(--ovx-shadow-lg) !important;
}

/* Setinhas do dropdown (orientacao bottom e top) seguem o popup */
html.dark .datepicker.datepicker-dropdown:before { border-bottom-color: var(--border) !important; }
html.dark .datepicker.datepicker-dropdown:after { border-bottom-color: var(--popover) !important; }
html.dark .datepicker.datepicker-dropdown.datepicker-orient-top:before { border-top-color: var(--border) !important; border-bottom: none !important; }
html.dark .datepicker.datepicker-dropdown.datepicker-orient-top:after { border-top-color: var(--popover) !important; border-bottom: none !important; }

html.dark .datepicker table tr td,
html.dark .datepicker table tr th { color: var(--foreground); }

/* Dias de outro mes — atenuados */
html.dark .datepicker table tr td.old,
html.dark .datepicker table tr td.new { color: var(--muted-foreground) !important; }

/* Hover de dia / navegacao (mes/ano, setas, footer) */
html.dark .datepicker table tr td.day:hover,
html.dark .datepicker table tr td.focused,
html.dark .datepicker table tr td span:hover,
html.dark .datepicker .datepicker-switch:hover,
html.dark .datepicker .prev:hover,
html.dark .datepicker .next:hover,
html.dark .datepicker tfoot tr th:hover {
    background: var(--secondary) !important;
    color: var(--foreground) !important;
}

/* Hoje (todayHighlight) — leve tom primario */
html.dark .datepicker table tr td.today,
html.dark .datepicker table tr td.today:hover {
    background: color-mix(in srgb, var(--primary) 28%, var(--card)) !important;
    color: var(--foreground) !important;
    border-color: var(--border) !important;
}

/* Dia selecionado — preenchido com a primaria */
html.dark .datepicker table tr td.active,
html.dark .datepicker table tr td.active:hover,
html.dark .datepicker table tr td.active.active,
html.dark .datepicker table tr td.active.active:hover {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

/* Cabecalho (mes/ano + setas) e rodape (HOJE) */
html.dark .datepicker .datepicker-switch,
html.dark .datepicker .prev,
html.dark .datepicker .next { color: var(--foreground) !important; }

html.dark .datepicker tfoot th.today,
html.dark .datepicker tfoot th.clear {
    background: var(--secondary) !important;
    color: var(--foreground) !important;
}

html.dark .datepicker tfoot th.today:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--secondary)) !important;
}

/* --- Conteudo dentro de modais Bootstrap (.modal-content) no escuro ----------
   O shell do modal ja segue o tema (.modal-content -> card), mas o conteudo
   carregado DENTRO (ex.: "Saude da Conta WhatsApp" via AJAX) usa .panel/.table do
   Bootstrap, que NAO sao alcancados pela regra orvyx de painel (escopada em
   #page-content). Resultado: cabecalho/linhas brancas e texto sem contraste no
   escuro. Aqui o conteudo do modal segue o tema, preservando o tom de STATUS. */
html.dark .modal-content .panel {
    background: var(--card) !important;
    color: var(--foreground) !important;
}

html.dark .modal-content .panel-body {
    background: transparent !important;
    color: var(--foreground) !important;
}

html.dark .modal-content .panel-title,
html.dark .modal-content .panel-heading h4 { color: var(--foreground) !important; }

/* Cabecalho neutro (fallback) */
html.dark .modal-content .panel-heading {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* Cabecalhos/bordas contextuais — preserva o sinal de status (verde/ambar/
   vermelho/azul) em tom escuro legivel, em vez do pastel claro do Bootstrap. */
html.dark .modal-content .panel-success > .panel-heading { background: color-mix(in srgb, var(--success) 22%, var(--card)) !important; }
html.dark .modal-content .panel-warning > .panel-heading { background: color-mix(in srgb, var(--warning) 22%, var(--card)) !important; }
html.dark .modal-content .panel-danger  > .panel-heading { background: color-mix(in srgb, var(--destructive) 24%, var(--card)) !important; }
html.dark .modal-content .panel-info    > .panel-heading { background: color-mix(in srgb, var(--primary) 20%, var(--card)) !important; }

html.dark .modal-content .panel-success { border-color: color-mix(in srgb, var(--success) 45%, var(--border)) !important; }
html.dark .modal-content .panel-warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)) !important; }
html.dark .modal-content .panel-danger  { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)) !important; }
html.dark .modal-content .panel-info    { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important; }

/* Rotulos pequenos (control-label com color:#7f8c8d inline) -> mais legiveis */
html.dark .modal-content .control-label { color: var(--muted-foreground) !important; }

/* Tabela de historico (.table-striped/.table-bordered) */
html.dark .modal-content .table { color: var(--foreground) !important; }

html.dark .modal-content .table > thead > tr > th,
html.dark .modal-content .table > tbody > tr > td,
html.dark .modal-content .table-bordered,
html.dark .modal-content .table-bordered > thead > tr > th,
html.dark .modal-content .table-bordered > tbody > tr > td {
    border-color: var(--border) !important;
}

html.dark .modal-content .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: var(--secondary) !important;
}

/* Payload bruto (<pre>) */
html.dark .modal-content pre {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* --- "TIRAR FOTO DO RECEBIDO/VEICULO" (n_recebido_entrada, n_veiculo_search,
   n_acesso_manut) ------------------------------------------------------------
   Sao um <label.custom-file-upload> (so borda #ccc, sem fundo/cor) e um
   <button#btncapturar> SEM estilo nenhum -> sumiam/ilegiveis no escuro. Viram
   botao primario claro, visivel e consistente nos 2 temas. */
#container .custom-file-upload,
#container #btncapturar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ovx-shadow-sm);
}

#container .custom-file-upload:hover,
#container #btncapturar:hover {
    filter: brightness(1.06);
}

/* Icone interno (fa-cloud-upload) acompanha a cor do texto do botao */
#container .custom-file-upload i,
#container #btncapturar i {
    color: var(--primary-foreground) !important;
}

/* O .custom-file-upload e um <label>: no escuro a regra orvyx de label
   (html.dark #container label) vencia por especificidade e deixava o texto CLARO
   (baixo contraste sobre o azul). Reforca o texto do botao (primary-foreground). */
html.dark #container .custom-file-upload,
html.dark #container .custom-file-upload i {
    color: var(--primary-foreground) !important;
}

/* --- Highcharts (c_main: Chamadas, donuts SIP/Maquina, Chamadas por Regiao) ---
   O Highcharts pinta um <rect.highcharts-background> BRANCO fixo e textos escuros
   (titulo/eixos/legenda) -> graficos "brancos" e ilegiveis no escuro. Deixamos o
   fundo transparente (herda o painel do tema) e o texto claro. Os rotulos DENTRO
   das fatias da pizza NAO sao tocados (o Highcharts ja auto-contrasta). */
html.dark .highcharts-background {
    fill: transparent !important;
}

html.dark .highcharts-title,
html.dark .highcharts-subtitle,
html.dark .highcharts-axis-title,
html.dark .highcharts-axis-labels text,
html.dark .highcharts-xaxis-labels text,
html.dark .highcharts-yaxis-labels text,
html.dark .highcharts-legend-item text,
html.dark .highcharts-stack-labels text {
    fill: var(--foreground) !important;
    color: var(--foreground) !important;
}

html.dark .highcharts-grid-line {
    stroke: color-mix(in srgb, var(--border) 55%, transparent) !important;
}

html.dark .highcharts-axis-line,
html.dark .highcharts-tick {
    stroke: var(--border) !important;
}

/* Tooltip do Highcharts */
html.dark .highcharts-tooltip-box {
    fill: var(--popover) !important;
    stroke: var(--border) !important;
}

html.dark .highcharts-tooltip text {
    fill: var(--foreground) !important;
}

/* --- w_instancia_manut: aba "Saude da Conta" (.saude-conta .saude-card) -------
   Cards proprios com #fafafa + tints pastel fixos -> brancos no escuro. Seguem o
   tom escuro do status (o painel externo .panel-default ja e tratado pela regra
   base de painel). */
html.dark .saude-conta .saude-card {
    background: var(--secondary) !important;
    border-left-color: var(--border) !important;
    color: var(--foreground);
}

html.dark .saude-conta .saude-card.saude-ok     { background: color-mix(in srgb, var(--success) 16%, var(--card)) !important; border-left-color: var(--success) !important; }
html.dark .saude-conta .saude-card.saude-info   { background: color-mix(in srgb, var(--primary) 16%, var(--card)) !important; border-left-color: var(--primary) !important; }
html.dark .saude-conta .saude-card.saude-aviso  { background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important; border-left-color: var(--warning) !important; }
html.dark .saude-conta .saude-card.saude-erro   { background: color-mix(in srgb, var(--destructive) 16%, var(--card)) !important; border-left-color: var(--destructive) !important; }
html.dark .saude-conta .saude-card.saude-neutro { background: var(--secondary) !important; border-left-color: var(--muted-foreground) !important; }

html.dark .saude-conta .saude-card .control-label { color: var(--muted-foreground) !important; }

/* valores: erro/neutro (vermelho/cinza escuros) ficam claros; ok/info/aviso ja legiveis */
html.dark .saude-conta .saude-valor.saude-erro   { color: var(--destructive) !important; }
html.dark .saude-conta .saude-valor.saude-neutro { color: var(--muted-foreground) !important; }

/* --- n_unidade_wizard: passos do wizard (.kh-wiz-*) com #fff/pastel fixos ----- */
html.dark .kh-wiz-step {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground);
}

html.dark .kh-wiz-row input,
html.dark .kh-wiz-step input,
html.dark .kh-wiz-step textarea,
html.dark .kh-wiz-step select,
html.dark #inpListaUnidades {
    background: var(--input) !important;
    color: var(--foreground) !important;
    border-color: var(--border) !important;
}

html.dark .kh-preview {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

html.dark .kh-preview-bloco { color: var(--primary) !important; }

html.dark .kh-info-box {
    background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important;
    color: var(--foreground) !important;
}

html.dark .kh-wiz-step p { color: var(--muted-foreground) !important; }

/* n_unidade_wizard: banner de erro (faltou no bloco acima) */
html.dark .kh-msg-erro {
    background: color-mix(in srgb, var(--destructive) 18%, var(--card)) !important;
    color: var(--foreground) !important;
}

/* ============================================================================
   Round 10 (2026-06-07): auditoria abrangente (workflow) — tematiza superficies
   e textos claros fixos em ~30 telas que ainda estouravam no escuro. Agrupado
   por padroes COMPARTILHADOS primeiro, depois por tela.
   ============================================================================ */

/* --- Banners de mensagem compartilhados (vendor/css/share.css) -------------- */
html.dark #container .mensagemErro-css,
html.dark #container .mensagemWarning-css,
html.dark #container .mensagemSucesso-css {
    color: var(--foreground) !important;
    border-color: var(--border) !important;
}
html.dark #container .mensagemErro-css { background: color-mix(in srgb, var(--destructive) 16%, var(--card)) !important; }
html.dark #container .mensagemWarning-css { background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important; }
html.dark #container .mensagemSucesso-css { background: color-mix(in srgb, var(--success) 16%, var(--card)) !important; }

/* --- Banners de limite de plano (inline, n_acesso/n_recebido_entrada) ------- */
html.dark #container #divMsgPlanoLimiteAtingido,
html.dark #container #divMsgWhatsDesconectado {
    background: color-mix(in srgb, var(--destructive) 16%, var(--card)) !important;
    color: var(--foreground) !important;
}
html.dark #container #divMsgPlanoLimiteAlerta {
    background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important;
    color: var(--foreground) !important;
}

/* --- Trilho de progress bar inline (#ddd) — b_cp_nova, n_pessoa_importar ---- */
html.dark #container #divprogress1 { background-color: var(--secondary) !important; }

/* --- sync-error / preview-error (d_template, d_template_manut) -------------- */
html.dark #container .sync-error-msg,
html.dark #container .preview-error {
    background: color-mix(in srgb, var(--destructive) 16%, var(--card)) !important;
    color: var(--foreground) !important;
    border-color: color-mix(in srgb, var(--destructive) 40%, var(--border)) !important;
}

/* --- <pre> dentro de .modalPopup (d_integracao_manut) ----------------------- */
html.dark .modalPopup pre {
    background: var(--secondary) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* --- w_grupos.css (w_grupos + w_grupos_manut) ------------------------------ */
html.dark #container .telefone-selector,
html.dark #container .grupo-card,
html.dark #container .grupo-manut-header,
html.dark #container .grupos-tabs,
html.dark #container .membros-list-scrollable {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground);
}
html.dark #container .membro-item { background: var(--secondary) !important; border-color: var(--border) !important; }
html.dark #container .membro-item:hover { background: var(--accent) !important; }
html.dark #container .no-grupos-message { background: var(--card) !important; border-color: var(--border) !important; }
html.dark #container .adicionar-membros-container {
    background: color-mix(in srgb, var(--primary) 12%, var(--card)) !important;
    border-color: var(--border) !important;
}
html.dark #container .telefone-selector label,
html.dark #container .grupo-manut-title,
html.dark #container .config-section-title,
html.dark #container .grupo-nome,
html.dark #container .grupo-info-value,
html.dark #container .membro-nome,
html.dark #container .no-grupos-message h3 { color: var(--foreground) !important; }
html.dark #container .grupo-info-label,
html.dark #container .no-grupos-message p { color: var(--muted-foreground) !important; }
html.dark #container .grupo-info,
html.dark #container .grupo-whatsapp-id,
html.dark #container .config-section-title { border-color: var(--border) !important; }
html.dark #container .grupo-whatsapp-id code { background: var(--secondary) !important; color: var(--foreground) !important; }

/* --- d_pipelines_automacoes ------------------------------------------------ */
html.dark #container .panel-list { background: var(--card) !important; border-color: var(--border) !important; }
html.dark #container .regra-row { border-bottom-color: var(--border) !important; }
html.dark #container .regra-row:hover { background: var(--secondary) !important; }
html.dark #container .regra-desc { color: var(--foreground) !important; }
html.dark #container .acao-item { background: var(--secondary) !important; border-color: var(--border) !important; }
html.dark #container .ajuda-vars {
    background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* --- minha_conta_plano (barras de consumo + textos inline) ------------------ */
html.dark #container #khomeConsumoBox [style*="#e6e6e6"] { background: var(--secondary) !important; }
html.dark #container #khomePlanoCard [style*="#888"],
html.dark #container #khomeProInfo { color: var(--muted-foreground) !important; }

/* --- d_integracao_tools ----------------------------------------------------- */
html.dark #container .tools-section,
html.dark #container .modal-box { background: var(--card) !important; border-color: var(--border) !important; color: var(--foreground); }
html.dark #container .kb-info-chip { background: var(--secondary) !important; color: var(--foreground) !important; }
html.dark #container .modal-box-header,
html.dark #container .modal-box-footer { border-color: var(--border) !important; }

/* --- d_integracao_logs ------------------------------------------------------ */
html.dark #container .lg-row:hover { background: var(--secondary) !important; }
html.dark #container .lg-detail { background: var(--secondary) !important; }
html.dark #container .lg-detail pre { background: var(--card) !important; border-color: var(--border) !important; color: var(--foreground) !important; }
html.dark #container .lg-label { color: var(--muted-foreground) !important; }

/* --- w_instancia: painel de leitura de QRCode (badges/instrucoes pastel) ---- */
html.dark #container .qr-instancia-badge { background: var(--secondary) !important; }
html.dark #container .qr-instructions { background: color-mix(in srgb, var(--success) 14%, var(--card)) !important; color: var(--foreground) !important; }
html.dark #container .qr-instructions { border-left-color: var(--success) !important; }
html.dark #container .qr-meta-badge { background: var(--secondary) !important; }
html.dark #container .qr-meta-badge.muted { background: var(--card) !important; color: var(--muted-foreground) !important; }

/* --- d_pipelines_insights (timeline/listas/heatmap) ------------------------- */
html.dark #container .atividade-conv { color: var(--foreground) !important; }
html.dark #container .atividade-desc { color: var(--muted-foreground) !important; }
html.dark #container .lista-table tbody tr:hover { background: var(--secondary) !important; }
html.dark #container .heatmap-cell { background: var(--secondary) !important; }

/* --- n_pessoa_manut --------------------------------------------------------- */
html.dark #container .npessoa-profile-head { background: var(--secondary) !important; border-color: var(--border) !important; }
html.dark #container .npessoa-webcam-block { background: var(--secondary) !important; border-color: var(--border) !important; }
html.dark #container .npessoa-docs-disabled-msg {
    background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* --- relatorios (preview WhatsApp + transcricao STT) ----------------------- */
html.dark #container .stt-text-container { background: var(--secondary) !important; color: var(--foreground) !important; }
html.dark #container .whatsapp-preview-container { background: var(--secondary) !important; }

/* --- envios ----------------------------------------------------------------- */
html.dark #container .envios-section h4 { color: var(--foreground) !important; }
html.dark #container .envios-hint { color: var(--muted-foreground) !important; }

/* --- d_template: faixa de filtros (inline #f8f9fa) ------------------------- */
html.dark #container .panel-heading[style*="#f8f9fa"],
html.dark #container .panel-body[style*="#f8f9fa"] { background: var(--secondary) !important; }

/* --- n_ocorrencia ----------------------------------------------------------- */
html.dark #container .ocorrencia-resposta { color: var(--muted-foreground) !important; }

/* --- n_ia_tools (chat IA + boxes de resposta) ------------------------------ */
html.dark #container .ia-chat-container { background: var(--background) !important; border-color: var(--border) !important; }
html.dark #container .ia-tool-intro,
html.dark #container .ia-tool-response { background: var(--secondary) !important; border-color: var(--border) !important; color: var(--foreground) !important; }
html.dark #container .ia-chat-input-wrap { background: var(--card) !important; border-color: var(--border) !important; }
html.dark #container .ia-chat-msg.assistant { background: var(--secondary) !important; color: var(--foreground) !important; }
html.dark #container .ia-chat-msg.error {
    background: color-mix(in srgb, var(--destructive) 16%, var(--card)) !important;
    color: var(--foreground) !important;
}

/* --- ipaddress -------------------------------------------------------------- */
html.dark #container .log-table th { background: var(--secondary) !important; color: var(--foreground) !important; }

/* --- server_task_manager: caixas de status -------------------------------- */
html.dark #container .error-message {
    background: color-mix(in srgb, var(--destructive) 16%, var(--card)) !important;
    color: var(--foreground) !important;
    border-color: color-mix(in srgb, var(--destructive) 40%, var(--border)) !important;
}
html.dark #container .admin-warning {
    background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important;
    color: var(--foreground) !important;
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border)) !important;
}

/* --- envio_conta_manut ------------------------------------------------------ */
html.dark #container .tipo-section { background: var(--secondary) !important; border-color: var(--border) !important; }

/* --- servidores_manut (datacenter/terminal) -------------------------------- */
html.dark #container .command-section { background: var(--card) !important; border-color: var(--border) !important; }
html.dark #container .response-section,
html.dark #container .datacenter-info { background: var(--secondary) !important; border-color: var(--border) !important; }
html.dark #container .command-textarea { background: var(--input) !important; border-color: var(--border) !important; color: var(--foreground) !important; }
html.dark #container .form-control-modern { border-color: var(--border) !important; }
html.dark #container .section-title,
html.dark #container .form-control-plaintext { color: var(--foreground) !important; }
html.dark #container .status-unknown { color: var(--muted-foreground) !important; }

/* --- b_cp_nova: preview do template Meta ----------------------------------- */
html.dark #container #divTemplateBody { background: var(--secondary) !important; color: var(--foreground) !important; }

/* --- w_optin_config_manut: caixa do "Ativo (Regra Geral)" ------------------ */
html.dark #container .form-group.row[style*="#fff3cd"] { background-color: color-mix(in srgb, var(--warning) 16%, var(--card)) !important; }
html.dark #container label[for="chkAtivo"] { color: var(--foreground) !important; }

/* --- faturas: caixas de aviso pastel inline -------------------------------- */
html.dark #container #divvalor_alerta > div { background: color-mix(in srgb, var(--primary) 14%, var(--card)) !important; border-color: var(--border) !important; }
html.dark #container #divvalor_alerta * { color: var(--foreground) !important; }
html.dark #container #div1 > div { background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important; border-color: var(--border) !important; }
html.dark #container #div1 > div * { color: var(--foreground) !important; }

/* --- n_main: checklist freemium + modal de ajuda (inline) ------------------ */
html.dark #container #khChecklistExpandido { background: var(--card) !important; border-color: var(--border) !important; color: var(--foreground); }
html.dark #container #khSuporteBox { background: color-mix(in srgb, var(--warning) 16%, var(--card)) !important; color: var(--foreground) !important; }
html.dark #container #khChecklistRecolhido { background: color-mix(in srgb, var(--success) 16%, var(--card)) !important; color: var(--foreground) !important; }
html.dark #container #khModalAjuda > div { background: var(--card) !important; color: var(--foreground) !important; }

/* --- n_comunicado_view (SiteBlank) ----------------------------------------- */
html.dark .view-card,
html.dark .view-error { background: var(--card) !important; border-color: var(--border) !important; }
html.dark .view-title,
html.dark .view-body { color: var(--foreground) !important; }
html.dark .view-sub { color: var(--muted-foreground) !important; }
html.dark .view-attach { border-top-color: var(--border) !important; }

/* --- n_preco (SiteBlank — landing/pricing) --------------------------------- */
html.dark .kh-card,
html.dark .kh-form-section { background: var(--card) !important; border-color: var(--border) !important; color: var(--foreground); }
html.dark .kh-card .kh-card-price { background: color-mix(in srgb, var(--primary) 14%, var(--card)) !important; }
html.dark .kh-hero p,
html.dark .kh-card .kh-card-sub,
html.dark .kh-form-section .kh-form-sub,
html.dark .kh-footer-help { color: var(--muted-foreground) !important; }

/* --- w_telefone_inbox (inbox estilo WhatsApp) ------------------------------ */
html.dark #container .inbox-container { background: var(--background) !important; }
html.dark #container .inbox-header,
html.dark #container .conversas-list,
html.dark #container .conversas-list-search,
html.dark #container .mensagens-area { background: var(--card) !important; border-color: var(--border) !important; color: var(--foreground); }
html.dark #container .conversas-list-header,
html.dark #container .mensagens-header { background: var(--secondary) !important; border-color: var(--border) !important; }
html.dark #container .conversa-item:hover { background: var(--secondary) !important; }
html.dark #container .conversa-item.active { background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important; }
html.dark #container .inbox-header label,
html.dark #container .conversas-list-header,
html.dark #container .conversa-item-nome,
html.dark #container .mensagens-header-nome { color: var(--foreground) !important; }
html.dark #container .mensagens-area-vazia,
html.dark #container .loading-conversas { color: var(--muted-foreground) !important; }

/* --- d_pipelines_view (kanban omnichannel + painel de chat) ----------------
   Namespace proprio (.kanban-view-*/.conversa-card/.chat-*/.filtro-*) nao coberto
   pelas regras do d_pipelines (cadastro). Tematiza as superficies principais. */
html.dark #container .kanban-view-container { background: var(--background) !important; }
html.dark #container .kanban-view-column { background: var(--card) !important; border-color: var(--border) !important; }
html.dark #container .conversa-card { background: var(--card) !important; border-color: var(--border) !important; color: var(--foreground); }
html.dark #container .conversa-card[data-status="9"] { background: var(--secondary) !important; }
html.dark #container .conversa-card[data-sinalizado="1"] { background: color-mix(in srgb, var(--warning) 14%, var(--card)) !important; }
html.dark #container .load-more-container { background: var(--secondary) !important; }
html.dark #container .filtro-global-bar { background: var(--card) !important; border-color: var(--border) !important; }
html.dark #container .chat-container,
html.dark #container .chat-header,
html.dark #container .chat-input-area { background: var(--card) !important; border-color: var(--border) !important; color: var(--foreground); }
html.dark #container .chat-messages,
html.dark #container .chat-body { background: var(--background) !important; }

/* ============================================================================
   .modalPopup (ModalPopupExtender) no MOBILE - d_integracao_manut e afins
   ----------------------------------------------------------------------------
   Os paineis usam estilo INLINE (width:50%/75% + padding:50px) pensado pra
   desktop. Em telas pequenas vira uma coluna estreitissima: dropdowns truncados
   ("gem...") e textos (ex.: LGPD) quebrando 1 palavra por linha. Em <=767px o
   modal passa a ocupar quase toda a largura, com padding menor, centralizado
   via position:fixed (sobrepoe o left/top inline que o ModalPopupExtender
   calcula pra largura antiga) e altura limitada ao viewport com scroll interno.
   !important porque os valores originais sao inline no painel.
   ============================================================================ */
@media (max-width: 767px) {
    .modalPopup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 94vw !important;
        max-width: 94vw !important;
        height: auto !important;
        max-height: 90vh !important;
        padding: 16px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Campos/dropdowns ocupam a largura toda do modal (label e campo ja
       empilham full-width no mobile via grid Bootstrap). */
    .modalPopup .form-control,
    .modalPopup select,
    .modalPopup textarea,
    .modalPopup .chosen-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* form-horizontal: aproxima o label do campo e alinha a esquerda no mobile */
    .modalPopup .form-horizontal .form-group { margin-bottom: 10px; }
    .modalPopup .form-horizontal .control-label { padding-top: 0; margin-bottom: 4px; text-align: left; }
}

/* --- bootstrap-select (dropdown pesquisável) -------------------------------
   O CSS do vendor tem cores FIXAS (branco/cinza) e não acompanha o tema: no escuro o
   botão, a caixa de busca e a lista saíam claros; no claro o item selecionado não se
   distinguia do resto. Tudo aqui sai dos tokens, então corrige os DOIS temas de uma vez
   (por isso não há prefixo html.dark). Vale para toda tela que usa .selectpicker —
   hoje a instância em d_template_manut e os filtros em d_template. */
#container .bootstrap-select > .dropdown-toggle,
#container .bootstrap-select > .dropdown-toggle:hover,
#container .bootstrap-select > .dropdown-toggle:focus,
#container .bootstrap-select > .dropdown-toggle:active,
#container .bootstrap-select.open > .dropdown-toggle {
    background-color: var(--input) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
#container .bootstrap-select > .dropdown-toggle .filter-option { color: var(--foreground); }
#container .bootstrap-select > .dropdown-toggle .caret { border-top-color: var(--muted-foreground); }

#container .bootstrap-select .dropdown-menu {
    background-color: var(--popover) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--ovx-shadow-md);
}
#container .bootstrap-select .dropdown-menu li a { color: var(--popover-foreground) !important; }
#container .bootstrap-select .dropdown-menu li a:hover,
#container .bootstrap-select .dropdown-menu li a:focus,
#container .bootstrap-select .dropdown-menu li.active > a {
    background-color: var(--accent) !important;
    color: var(--accent-foreground) !important;
}
/* Selecionado precisa se distinguir do hover — no claro não dava para ver qual era. */
#container .bootstrap-select .dropdown-menu li.selected > a {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}
#container .bootstrap-select .bs-searchbox input.form-control {
    background-color: var(--input) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
}
#container .bootstrap-select .bs-searchbox input.form-control::placeholder { color: var(--muted-foreground); }
#container .bootstrap-select .no-results {
    background: transparent !important;
    color: var(--muted-foreground) !important;
}
#container .bootstrap-select .dropdown-menu .divider { background-color: var(--border); }
#container .bootstrap-select .dropdown-header { color: var(--muted-foreground); }
/* Desabilitado (ex.: instância travada depois do envio à Meta). */
#container .bootstrap-select.disabled > .dropdown-toggle,
#container .bootstrap-select > .dropdown-toggle.disabled {
    background-color: var(--muted) !important;
    color: var(--muted-foreground) !important;
    opacity: 1 !important;
}
