﻿/* ============================================================================
   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; }
}
