/* hub-dark-align.css — realinha o dark mode à paleta slate do detalhes-do-cliente /
   EmissorApp, cobrindo os 109 pontos do HUB-DARKMODE-AUDIT.md.

   Paleta slate: bg #0f172a (slate-900) · superfície #1e293b (slate-800) ·
   elevado/borda #334155 (slate-700) · texto #f8fafc / #cbd5e1 / #94a3b8 ·
   acento #60a5fa (links/foco) · primário #2563eb.

   Convenção de seletor idêntica ao DarkThemeHub.css: prefixo `.darkmode--activated`
   (fica no <html>, via Console.Master/DarkModeRootClass, e no <body>, via darkmode-js).

   ESCOPO: carregada pelo CssBind, ou seja TODOS os heads do ConsoleBase — não só o
   Hub. Isso é obrigatório, não conveniência: o DarkThemeHub.css é compartilhado e já
   está em slate literal, que só renderiza certo com a inversão desligada. As folhas
   próprias dos outros heads (Cofre.css etc.) não foram auditadas — esperar sobras
   claras fora do Hub.

   ORDEM: precisa vir DEPOIS do DarkThemeHub.css no CssBind — a seção 3 disputa
   `.darkmode--activated .current` com DarkThemeHub.css:1250 em especificidade e
   !important iguais, então quem perde é quem carrega antes.

   ATIVAÇÃO: ao carregar esta folha, a camada de inversão do darkmode-js é desligada
   (seção 0) — o dark passa a ser autoral (slate), NÃO invertido. Reverter = remover
   o <link> desta folha do CssBind. */

/* ── 0) Desliga a inversão do darkmode-js (mix-blend-mode: difference) ──
   Sem isto, as cores slate autorais seriam invertidas para claro
   (#0f172a viraria #f0e8d5). */
.darkmode--activated .darkmode-layer,
.darkmode--activated .darkmode-background {
    display: none !important;
}

/* ── 1) Fundo/texto da página ── */
body.darkmode--activated,
.darkmode--activated body {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}
.darkmode--activated .darkmode-background {
    background: #0f172a !important;
}
/* O <form> do WebForms cobre a página inteira. DarkThemeHub.css deixava #e2e8f0 (claro
   de proposito, contando com a inversao) e vence por ID — sem este override a pagina
   toda fica cinza clara quando a inversao esta desligada. Fica aqui tambem porque o
   DarkThemeHub.css pode vir do host central (app.sieg.com), sem o fix local. */
.darkmode--activated form#ctl00,
html.darkmode--activated form#ctl00 {
    background-color: #0f172a !important;
}

/* ── 2) Superfícies elevadas que escapam da inversão (quebradas hoje) ── */
/* select2 (StrategicReportS.css) */
.darkmode--activated .select2-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.darkmode--activated .select2-results__option--highlighted {
    background-color: #334155 !important;
    color: #f8fafc !important;
}
.darkmode--activated .select2-search__field {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
.darkmode--activated .select2-selection.select2-selection--single {
    border-color: #334155 !important;
}
.darkmode--activated .iris-table-content .select2-container,
.darkmode--activated .select2-selection--multiple,
.darkmode--activated .iris-table-content > span.select2-container--default {
    background-color: #1e293b !important;
}
.darkmode--activated li.select2-selection__choice {
    background-color: #334155 !important;
    color: #f8fafc !important;
}
/* modais de alerta brancos (escapam da inversão, z-1050) */
.darkmode--activated .modal-content-alert,
.darkmode--activated .modal-content-alert-blue,
.darkmode--activated .modal-content-alert-purple {
    background-color: #1e293b !important;
}
/* hovers claros de dropdown */
.darkmode--activated .bootstrap-select .dropdown-menu li:hover,
.darkmode--activated .dropdown-menu > li > a:hover,
.darkmode--activated .dropdown-menu > li > a:focus {
    background-color: #334155 !important;
}
.darkmode--activated .dropdown-item:hover,
.darkmode--activated .dropdown-item:focus {
    color: #f8fafc !important;
}
/* tooltips de upgrade (plan-restricted) — brancos hoje, z-1051 */
.darkmode--activated .download-by-key-upgrade-tooltip,
.darkmode--activated .nfe-out-upgrade-tooltip {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.darkmode--activated .download-by-key-upgrade-tooltip__text,
.darkmode--activated .nfe-out-upgrade-tooltip__text {
    color: #cbd5e1 !important;
}
.darkmode--activated #download-by-key-container.plan-restricted .list-group-item-hub,
.darkmode--activated #nfe-out-config-container.plan-restricted,
.darkmode--activated #nfe-out-config-container.plan-restricted .portlet-header,
.darkmode--activated .btn-collapse-reports.plan-restricted-header {
    background-color: #1e293b !important;
}

/* ── 3) Regras !important / especificidade que vencem os overrides dark ── */
.darkmode--activated .table.table-users.table-striped.table-hover tbody tr:hover {
    background: #334155 !important;
}
.darkmode--activated .bg-light {
    background-color: #1e293b !important;
}
/* dataTable (cópia ConsoleBase, carregada no Hub) */
.darkmode--activated table.dataTable thead th {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}
.darkmode--activated .paginate_button.btn-default {
    border-color: #334155 !important;
}
.darkmode--activated td .td-title-background,
.darkmode--activated td.td-background,
.darkmode--activated td.td-background-dt {
    background: #1e293b !important;
}
.darkmode--activated .td-background-dark {
    background-color: #0f172a !important;
}
/* dataTable (cópia Dashboard, páginas Irpf) */
.darkmode--activated table.dataTable tbody:not(.table-click) tr.odd,
.darkmode--activated table.dataTable tbody:not(.table-click) tr.odd td.sorting_2 {
    background-color: #1e293b !important;
}
.darkmode--activated table.dataTable tbody td {
    color: #cbd5e1;
}
/* pílula de paginação atual (Hub.css + dashboard.css .current, DarkThemeHub:1250) */
.darkmode--activated .current,
.darkmode--activated .current > span {
    background-color: #1e293b !important;
    background-image: none !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
}

/* ── 4) Barra de abas principal do Hub (especificidade de ID) ── */
.darkmode--activated #myTab.nav-tabs,
.darkmode--activated #dashboardClientTabs.nav-tabs {
    border-bottom-color: #334155;
}
.darkmode--activated #myTab.nav-tabs > li > a:hover,
.darkmode--activated #myTab.nav-tabs > li > a:focus,
.darkmode--activated #dashboardClientTabs.nav-tabs > li > a:hover,
.darkmode--activated #dashboardClientTabs.nav-tabs > li > a:focus {
    background: #1e293b;
}
/* :hover e :focus tem de estar aqui. Hub.css:1859 e :1866 declaram
   `#myTab.nav-tabs > li.active > a:hover` = (1,3,2), o mesmo peso de
   `.darkmode--activated #myTab.nav-tabs > li.active > a` — empate, e o Hub.css carrega
   depois do CssBind, entao o #DBEAFE claro ganhava. Repetir .active + o pseudo sobe pra
   (1,4,2) e vence por especificidade, independente da ordem. O :focus e o que mais
   aparece: sobrevive ao clique, deixando a aba ativa clara o tempo todo. */
.darkmode--activated #myTab.nav-tabs > li.active > a,
.darkmode--activated #myTab.nav-tabs > li.active > a:hover,
.darkmode--activated #myTab.nav-tabs > li.active > a:focus,
.darkmode--activated #dashboardClientTabs.nav-tabs > li.active > a,
.darkmode--activated #dashboardClientTabs.nav-tabs > li.active > a:hover,
.darkmode--activated #dashboardClientTabs.nav-tabs > li.active > a:focus {
    background: #1e293b;
    border-bottom-color: #2563eb;
}

/* ── 5) Cards / painéis ── */
.darkmode--activated .tabbable-line > .tab-content {
    background-color: #1e293b;
    border-top-color: #334155;
}
.darkmode--activated .card,
.darkmode--activated .card-dashboard,
.darkmode--activated .card-generate-reports {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}
.darkmode--activated .portlet-boxed-dashboard .portlet-body-dashboard {
    border-color: #334155;
}
.darkmode--activated .panel-secondary > .panel-heading,
.darkmode--activated .panel-success > .panel-heading {
    background-image: none;
    background-color: #1e293b;
}

/* ── 6) Tabelas ── */
.darkmode--activated .table-fixed-header-container th {
    background-color: #1e293b;
}
.darkmode--activated .table-fixed-header-container::-webkit-scrollbar-track {
    background: #1e293b !important;
}
.darkmode--activated #tableAllCompany > thead > tr > th {
    border-color: #334155;
}
.darkmode--activated .dte-readed {
    background-color: #1e293b;
}
.darkmode--activated .table-company-reports tbody tr {
    border-bottom-color: #334155;
}
.darkmode--activated .table-company-reports tbody tr:hover {
    background-color: #334155;
}
.darkmode--activated .tr-company-selected {
    background-color: #334155;
}

/* ── 7) Texto / links sobre superfície escura ── */
.darkmode--activated .mega-menu-header,
.darkmode--activated .autodocs-reports-text-heading,
.darkmode--activated .button-download-app,
.darkmode--activated .text-default {
    color: #f8fafc !important;
}
.darkmode--activated a.list-group-item,
.darkmode--activated button.list-group-item,
.darkmode--activated .paginate_button,
.darkmode--activated .autodocs-reports-heading {
    color: #cbd5e1;
}
.darkmode--activated .sub-title-menu-hub,
.darkmode--activated .title,
.darkmode--activated .flex-certificate-cnpj {
    color: #94a3b8;
}
.darkmode--activated .underline-blue,
.darkmode--activated .blue > .active > a,
.darkmode--activated .txtProviders,
.darkmode--activated .list-providers {
    color: #60a5fa !important;
}
.darkmode--activated .btn-nfse-national-portal {
    background: #1e293b;
    color: #60a5fa !important;
    border-color: #2563eb;
}
/* Hub.css:1983 declara `.btn-alert-hub, .btn-alert-hub:hover` (Default.aspx) — o :hover
   empata com a regra base do dark, entao precisa vir escrito, mesmo estado. */
.darkmode--activated .btn-alert-hub,
.darkmode--activated .btn-alert-hub:hover {
    background-color: #1e293b;
    color: #60a5fa !important;
}
.darkmode--activated .btn-collapse-reports--excel {
    color: #4ade80 !important;
}
/* paginação genérica (Hub.css + manage-certificate.css) */
.darkmode--activated .pagination li a {
    color: #94a3b8;
}
.darkmode--activated .pagination li a:hover {
    color: #f8fafc;
}
.darkmode--activated .bg-menu-hub {
    background-color: #334155;
}
.darkmode--activated #btnReportCofre:hover,
.darkmode--activated .btn-secondary:hover {
    background-color: #334155;
    color: #f8fafc;
}
.darkmode--activated .btn-show-hide-password {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}
.darkmode--activated .btn-reports-default {
    background-color: #334155;
    color: #cbd5e1;
}

/* ── 8) Chips de status / alertas ── */
.darkmode--activated .tag-success {
    background-color: #052e16 !important;
    color: #4ade80;
}
.darkmode--activated .tag-danger,
.darkmode--activated .iris-alert-danger,
.darkmode--activated .alert-certificate-nfe-out,
.darkmode--activated .alert-danger {
    background-color: #450a0a !important;
    border-color: #7f1d1d !important;
    color: #fca5a5;
}
.darkmode--activated .tag-warning,
.darkmode--activated .tag-alert,
.darkmode--activated .iris-alert-warning,
.darkmode--activated .iris-alert-orange {
    background-color: #422006 !important;
    color: #fde68a;
}
.darkmode--activated .iris-alert,
.darkmode--activated .iris-alert-primary,
.darkmode--activated .iris-alert-success {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc;
}
.darkmode--activated .nfse-importante-block {
    background-color: #422006;
    color: #fde68a;
}
.darkmode--activated .badge-success,
.darkmode--activated .badge-warning {
    background-color: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}

/* ── 9) Widget de chat (chat-dashboard.css — 0 regras dark) ── */
.darkmode--activated .inbox_people {
    background: #1e293b;
    border-right-color: #334155;
}
.darkmode--activated .inbox_msg {
    border-color: #334155;
}
.darkmode--activated .headind_srch,
.darkmode--activated .chat_list {
    border-bottom-color: #334155;
}
.darkmode--activated .chat_ib h5 {
    color: #f8fafc;
}
.darkmode--activated .active_chat {
    background: #334155;
}
.darkmode--activated .received_withd_msg p {
    background: #334155;
    color: #f8fafc;
}
.darkmode--activated .input_msg_write input {
    color: #f8fafc;
}
.darkmode--activated .type_msg {
    border-top-color: #334155;
}

/* ── 10) Fluxos de certificado ── */
.darkmode--activated .register-left input {
    background: #1e293b;
    color: #f8fafc;
}
.darkmode--activated .register-heading {
    color: #f8fafc;
}
.darkmode--activated .custom-file-label {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}
.darkmode--activated .custom-file-label:after {
    background: #334155;
    color: #cbd5e1;
}
.darkmode--activated .table-title {
    color: #cbd5e1;
}

/* ── 11) Divisores / bordas / scrollbars claros (menores) ── */
.darkmode--activated .flex-certificate-item,
.darkmode--activated .border-bottom-dashed {
    border-bottom-color: #334155;
}
.darkmode--activated .border-bottom-collapse {
    border-bottom-color: #334155;
}
.darkmode--activated .panel-default .collapsed {
    color: #94a3b8;
}
.darkmode--activated #legend .legend-marker,
.darkmode--activated .legend-chart .legend-marker {
    border-color: #334155;
}
.darkmode--activated input[type="month"] {
    border-color: #334155;
}
.darkmode--activated h3.video {
    background: #334155;
}

/* ── 12) Skeletons de carregamento ──
   `background-image`, NÃO `background`: o shorthand também resetaria
   `background-size` para `auto`, e com especificidade maior que a regra base
   (0,2,0 vs 0,1,0) ele venceria o `background-size: 200% 100%` de lá. Gradiente
   em `auto` + `repeat` = deslocar a posição em ±200% cai em tile idêntico, ou
   seja shimmer congelado. */

/* GraphicsClient.ascx (lista de relatórios) */
.darkmode--activated .reports-skeleton-item {
    background-image: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
}

/* preview-lock-chart (overlay de cada gráfico do Hub). As regras nascem de um
   <style> injetado em runtime pelo componente (PreviewLockChart.js:32), portanto
   entram no head DEPOIS desta folha — quem ganha aqui é a especificidade do
   `.darkmode--activated`, não a ordem. O overlay cobre a área do gráfico, que é
   transparente sobre o bg da página, daí #0f172a e não #1e293b. */
.darkmode--activated .preview-lock-skeleton {
    background: #0f172a;
}
.darkmode--activated .preview-lock-skeleton__bar {
    background-image: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
}

/* ── 13) Sombras — halo branco no dark ──
   Sombra mais CLARA que o fundo não é sombra, é brilho. Duas origens:
   a) o remap slate do DarkThemeHub trocou as sombras cinza-escuras (rgb(43,47,49),
      ~6% de luminância acima do fundo antigo) por #334155/#475569 — slate-700/600,
      bem mais claros que #0f172a/#1e293b, virando halo visível;
   b) as folhas do Hub trazem `0 1px 5px #dadce0` (quase branco) e alguns seletores
      não têm override nenhum (.row-strategic-reports, .card-generate-reports).
   No dark a sombra é preta com alpha — a borda é que fica em #334155. */
.darkmode--activated .icon-stat,
.darkmode--activated .portlet-boxed .portlet-header,
.darkmode--activated .portlet-boxed .portlet-body,
.darkmode--activated .portlet-boxed-report,
.darkmode--activated .portlet-boxed-dashboard .portlet-body-dashboard,
.darkmode--activated .list-group,
.darkmode--activated .collapse-reports,
.darkmode--activated .card-generate-reports,
.darkmode--activated .row-strategic-reports {
    box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
}
.darkmode--activated .context-menu-list {
    box-shadow: 0 2px 7px -2px rgba(0, 0, 0, .6);
}
/* .box-status: `border: 1px double` com rgba(200,200,200) — contorno claro, mesmo defeito */
.darkmode--activated .box-status {
    border-color: #334155;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .45);
}

/* ── 14) Superfícies do Iris (Iris.css) ──
   Iris.css pinta essas caixas de #fff. O DarkIris.css cobre parte, mas na paleta cinza
   antiga (#181a1b) e nem sempre está na página — detalhes-do-cliente puxa de
   hub.sieg.com/AppIriS. Sem a inversão os #fff aparecem literais.
   !important porque o DarkIris.css é linkado na página, depois desta folha. */
.darkmode--activated .iris-portlet-body {
    background: #1e293b !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .45) !important;
}
.darkmode--activated .container-resume-iris,
.darkmode--activated .iris-dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.darkmode--activated .iris-nav-tabs li.active a,
.darkmode--activated .nav-iris-client li.active a,
.darkmode--activated .nav-iris-client li.active a:focus {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}

/* ── 15) Abas genéricas .nav-tabs ──
   O bootstrap pinta a aba ativa — e o hover dela — de #fff, e o hover das inativas de #eee.
   A seção 4 só cobre #myTab/#dashboardClientTabs. O `color` leva !important por causa do
   `#1447E6 !important` do Hub.css:1778; o fundo #1e293b casa com o .tab-content da seção 5. */
.darkmode--activated .nav-tabs {
    border-bottom-color: #334155;
}
.darkmode--activated .nav-tabs > li > a:hover,
.darkmode--activated .nav-tabs > li > a:focus {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}
.darkmode--activated .nav-tabs > li.active > a,
.darkmode--activated .nav-tabs > li.active > a:hover,
.darkmode--activated .nav-tabs > li.active > a:focus {
    background-color: #1e293b;
    border-color: #334155 #334155 transparent;
    color: #60a5fa !important;
}

/* ── 16) Loaders do shell ── */
/* Anel interpáginas (#loader-sieg, ConsoleV2.css:523): trilho #98cbff berra sobre o slate. */
.darkmode--activated .container-loader {
    border-color: #334155;
    border-right-color: #60a5fa;
}

/* Splash de boot (logo SIEG girando). O container claro aparece de duas formas e nenhuma
   tem classe própria: style inline em IrisAppV2/home.aspx (#f8fafc — daí o !important) e
   `bg-slate-50` no IrisAppV2/Scripts/App.js. O :has() pega os dois pelo filho sem depender
   de classe nem da ordem das folhas. */
.darkmode--activated main:has(> .iris-splash-logo),
.darkmode--activated div:has(> .iris-splash-logo) {
    background-color: #0f172a !important;
}
.darkmode--activated main:has(> .iris-splash-logo) span,
.darkmode--activated div:has(> .iris-splash-logo) span {
    color: #cbd5e1 !important;
}
