/* ═══════════════════════════════════════════════════════════════════════
   GRC1 Variables Base — Camada de fallback universal
   Carregado ANTES de qualquer tema. Garante que todas as variáveis CSS
   existam mesmo quando nenhum tema está ativo (Perfex default) ou quando
   um tema compacto não define todas as variáveis.

   Temas individuais (grc1_blue.css, grc1_dark.css etc.) sobrescrevem
   estas definições via seletores mais específicos (:root[data-grc1-theme]).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Accent ──────────────────────────────────────────────────────── */
    --grc1-accent:          #3b82f6;
    --grc1-accent2:         #2563eb;
    --grc1-accent-l:        rgba(59,130,246,0.08);
    /* Texto/ícone SOBRE o accent (botões primários, chips, badges sólidos).
       Default branco (accent padrão é escuro). A injeção da cor do tenant
       (grc1_tools.php) recalcula por luminância → evita branco sobre accent
       claro (ilegível). Módulos devem usar var(--grc1-on-accent) em vez de #fff
       fixo em superfícies com fundo accent. */
    --grc1-on-accent:       #ffffff;

    /* Fundo base das "ilhas escuras" (.grc1-dark-island, titan-suite-bar,
       coll-header etc.). Default escuro p/ qualquer tema (mesmo de sidebar
       clara); o tom do tema entra via color-mix(var(--grc1-accent)). Temas
       podem sobrescrever --grc1-island-bg. */
    --grc1-island-bg:       #0f172a;

    /* ─── Background ──────────────────────────────────────────────────── */
    --grc1-bg:              #f4f4f5;
    --grc1-bg2:             #eef0f4;
    --grc1-bg3:             #e8eaef;

    /* ─── Panels / Cards ──────────────────────────────────────────────── */
    --grc1-panel:           #ffffff;
    --grc1-panel2:          #f8f9fc;
    --grc1-border:          #e2e8f0;

    /* ─── Text ────────────────────────────────────────────────────────── */
    --grc1-text:            #1f2937;
    --grc1-text2:           #6b7280;
    --grc1-content-text:    #1f2937;
    --grc1-content-text2:   #6b7280;

    /* ─── Sidebar ─────────────────────────────────────────────────────── */
    --grc1-sidebar:         #f4f4f5;
    --grc1-sidebar-bg:      #f4f4f5;
    --grc1-sidebar-txt:     #4b5563;

    /* ─── Topbar ──────────────────────────────────────────────────────── */
    --grc1-topbar:          #ffffff;
    --grc1-topbar-txt:      #1f2937;

    /* ─── Inputs / Forms ──────────────────────────────────────────────── */
    --grc1-input-bg:        #ffffff;
    --grc1-input-brd:       #d4dde8;

    /* ─── Tables ──────────────────────────────────────────────────────── */
    --grc1-table-head:      #f1f5f9;
    --grc1-table-row:       #ffffff;
    --grc1-table-row2:      #f8fafc;

    /* ─── Misc ────────────────────────────────────────────────────────── */
    --grc1-shadow:          0 1px 3px rgba(0,0,0,0.06);
    --grc1-radius:          8px;
    --grc1-scrollbar:       #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLE / GRID — UX Premium
   Perfex default é 14px com padding grande. Reduzido para visual limpo.
   !important para vencer Bootstrap/Perfex/DataTables.
   ═══════════════════════════════════════════════════════════════════════ */

/* Body cells */
.table td,
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable td,
table.dataTable > tbody > tr > td,
#wrapper .table td,
#wrapper table.dataTable td,
html body #wrapper .table td,
html body #wrapper table.dataTable td {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    padding: 6px 8px !important;
    line-height: 1.4 !important;
}
.table td strong,
table.dataTable td strong {
    font-weight: 600 !important;
    font-size: 11.5px !important;
}
.table td a:not(.btn),
table.dataTable td a:not(.btn) {
    font-weight: 500 !important;
    font-size: 11.5px !important;
}

/* Header cells */
.table th,
.table > thead > tr > th,
table.dataTable th,
table.dataTable > thead > tr > th,
#wrapper .table th,
#wrapper table.dataTable th,
html body #wrapper .table th,
html body #wrapper table.dataTable th {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
}

/* DataTables toolbar */
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
    font-size: 11px !important;
}
.dataTables_paginate .paginate_button {
    font-size: 11px !important;
    padding: 3px 8px !important;
}
.dataTables_length select.form-control {
    font-size: 11px !important;
    padding: 3px 6px !important;
    height: auto !important;
}
.dataTables_filter input.form-control {
    font-size: 11px !important;
    padding: 4px 8px !important;
    height: auto !important;
}

/* DataTables buttons (Exportar, Ações em Massa, Reload) */
.dt-buttons .btn,
.dt-buttons .btn-default,
.btn-default-dt-options {
    font-size: 11px !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
}

/* Botões dentro de tabelas: compactos */
.table .btn-xs,
table.dataTable .btn-xs {
    font-size: 10px !important;
    padding: 1px 5px !important;
}

/* Badges dentro de tabelas */
.table .label,
.table .badge,
table.dataTable .label,
table.dataTable .badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
}

/* Table row spacing */
.table > tbody > tr,
table.dataTable > tbody > tr {
    transition: background 0.12s ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAIS — Temas compactos (NÃO navy/dark)
   Bootstrap move modais para <body> via JS → saem do #wrapper →
   variáveis CSS resolvem para :root (escuro nos temas compactos).
   Re-definir TODAS as variáveis dentro de .modal para valores claros.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-grc1-theme="cyan"] .modal,
:root[data-grc1-theme="emerald"] .modal,
:root[data-grc1-theme="rose"] .modal,
:root[data-grc1-theme="sunset"] .modal,
:root[data-grc1-theme="violet"] .modal {
    --grc1-text: var(--grc1-content-text);
    --grc1-text2: var(--grc1-content-text2);
    --grc1-bg: #f8f9fc;
    --grc1-bg3: #f0f2f6;
    --grc1-panel: #ffffff;
    --grc1-panel2: #f5f6fa;
    --grc1-border: #e0e4ea;
    --grc1-input-bg: #ffffff;
    --grc1-input-brd: #d4dde8;
    --grc1-table-head: #f1f5f9;
    --grc1-table-row: #ffffff;
    --grc1-table-row2: #f8fafc;
}
:root[data-grc1-theme="cyan"] .modal-content,
:root[data-grc1-theme="emerald"] .modal-content,
:root[data-grc1-theme="rose"] .modal-content,
:root[data-grc1-theme="sunset"] .modal-content,
:root[data-grc1-theme="violet"] .modal-content {
    background: #fff !important;
    color: var(--grc1-content-text) !important;
    border-color: var(--grc1-border) !important;
}
:root[data-grc1-theme="cyan"] .modal-header,
:root[data-grc1-theme="emerald"] .modal-header,
:root[data-grc1-theme="rose"] .modal-header,
:root[data-grc1-theme="sunset"] .modal-header,
:root[data-grc1-theme="violet"] .modal-header {
    background: #fff !important;
    border-bottom-color: var(--grc1-border) !important;
}
:root[data-grc1-theme="cyan"] .modal-footer,
:root[data-grc1-theme="emerald"] .modal-footer,
:root[data-grc1-theme="rose"] .modal-footer,
:root[data-grc1-theme="sunset"] .modal-footer,
:root[data-grc1-theme="violet"] .modal-footer {
    background: #fff !important;
    border-top-color: var(--grc1-border) !important;
}

/* ═══ MODAIS — Forçar legibilidade em TODOS os temas ═══
   Bootstrap move .modal para <body> → perde #wrapper vars.
   Specificity alta (.modal .modal-xxx) para vencer regras de tema
   como .grc1-dark .btn-default / .grc1-office .modal-title etc. */
.modal .modal-content {
    background: #fff !important;
    color: #1f2937 !important;
}
.modal .modal-header {
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.modal .modal-header .modal-title {
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.modal .modal-body {
    color: #374151 !important;
    background: #f9fafb !important;
}
.modal .modal-body label {
    color: #1f2937 !important;
}
.modal .modal-body .text-muted,
.modal .modal-body small {
    color: #6b7280 !important;
}
.modal .modal-body .form-control {
    background: #fff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}
.modal .modal-body .nav-tabs > li > a {
    color: #374151 !important;
}
.modal .modal-body .nav-tabs > li.active > a {
    color: var(--grc1-accent, #3b82f6) !important;
}
.modal .modal-body .tab-content {
    color: #374151 !important;
}
.modal .modal-footer {
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
}
.modal .modal-footer .btn-default,
.modal .modal-footer .btn-default span {
    background: #fff !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.modal .modal-footer .btn-default:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}
.modal .close {
    color: #6b7280 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Modal dark-island: tudo claro (override do fix genérico acima).
   Precisa vencer .modal .modal-header .modal-title (0,3,0). */
.modal .grc1-dark-island.modal-header,
.modal .modal-header.grc1-dark-island {
    background: transparent !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
.modal .grc1-dark-island .modal-title,
.modal .grc1-dark-island.modal-header .modal-title,
.modal .modal-header.grc1-dark-island .modal-title {
    color: rgba(255,255,255,0.92) !important;
}
.modal .grc1-dark-island.modal-header .close,
.modal .modal-header.grc1-dark-island .close {
    color: rgba(255,255,255,0.7) !important;
}

/* Checkbox column compacta */
.table td:first-child input[type="checkbox"],
.table th:first-child input[type="checkbox"] {
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK ISLAND — Componentes com fundo escuro dentro de areas claras.
   Qualquer elemento com classe .grc1-dark-island (ou filhos) recebe
   texto claro automaticamente, independente do tema ativo.
   Util para banners (zero-day, suite-bar), headers escuros etc.
   ═══════════════════════════════════════════════════════════════════════ */
.grc1-dark-island {
    --grc1-text:            rgba(255,255,255,0.85);
    --grc1-text2:           rgba(255,255,255,0.5);
    --grc1-content-text:    rgba(255,255,255,0.85);
    --grc1-content-text2:   rgba(255,255,255,0.5);
    /* Kill Tailwind text-opacity que força cor escura */
    --tw-text-opacity: 1;
    --grc1-border:          rgba(255,255,255,0.08);
    --grc1-panel:           rgba(255,255,255,0.04);
    --grc1-panel2:          rgba(255,255,255,0.06);
    --grc1-bg3:             rgba(255,255,255,0.025);
    --grc1-shadow:          0 4px 24px rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.85);
}
/* Especificidade 0,1,2,2 — vence html.grc1-X #wrapper (0,1,2,1) dos temas */
html body #wrapper .grc1-dark-island *:not(.label):not(.badge):not(.btn):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-default):not(.alert) {
    color: inherit !important;
}
/* Links */
html body #wrapper .grc1-dark-island a:not(.btn):not(.label):not(.badge) {
    color: rgba(255,255,255,0.75) !important;
}
html body #wrapper .grc1-dark-island a:not(.btn):not(.label):not(.badge):hover {
    color: #fff !important;
}
/* btn-default ghost — kill Tailwind + force white text */
html body #wrapper .grc1-dark-island .btn-default,
html body #wrapper .grc1-dark-island .btn.btn-default,
html body .grc1-dark-island .btn-default,
.grc1-dark-island .btn-default {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.85) !important;
    --tw-text-opacity: 1 !important;
}
html body #wrapper .grc1-dark-island .btn-default span,
html body #wrapper .grc1-dark-island .btn-default i,
html body .grc1-dark-island .btn-default span,
html body .grc1-dark-island .btn-default i,
.grc1-dark-island .btn-default span,
.grc1-dark-island .btn-default i {
    color: rgba(255,255,255,0.85) !important;
}
html body #wrapper .grc1-dark-island .btn-default:hover,
html body .grc1-dark-island .btn-default:hover,
.grc1-dark-island .btn-default:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
}
html body #wrapper .grc1-dark-island .btn-default:hover span,
html body #wrapper .grc1-dark-island .btn-default:hover i,
.grc1-dark-island .btn-default:hover span,
.grc1-dark-island .btn-default:hover i {
    color: #fff !important;
}
/* btn-default in dark mode global — garantir legibilidade */
html.grc1-dark .btn-default,
html.grc1-dark .btn.btn-default {
    background: var(--grc1-panel, #1e293b) !important;
    border-color: var(--grc1-border, #374151) !important;
    color: var(--grc1-text, #e2e8f0) !important;
}
html.grc1-dark .btn-default:hover,
html.grc1-dark .btn.btn-default:hover {
    background: var(--grc1-bg2, #334155) !important;
    color: #fff !important;
}
html.grc1-dark .btn-default span,
html.grc1-dark .btn-default i {
    color: inherit !important;
}

/* close button (×) */
html body #wrapper .grc1-dark-island .close {
    color: rgba(255,255,255,0.7) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body #wrapper .grc1-dark-island .close:hover {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   OFFICE THEME — Tratamento especial para componentes Titan.
   O Office tem sidebar branca + topbar azul, entao componentes que
   assumem fundo escuro precisam de adaptacao. Os KPIs, headers com
   gradiente e badges precisam de cores mais suaves sobre fundo claro.
   ═══════════════════════════════════════════════════════════════════════ */

/* KPI cards e paineis de destaque: suavizar sobre fundo claro Office */
.grc1-office .detect-kpi,
.grc1-office .coll-kpi,
.grc1-office .respond-kpi {
    border: 1px solid var(--grc1-border, #e1dfdd) !important;
    box-shadow: 0 1.6px 3.6px rgba(0,0,0,0.08) !important;
}
.grc1-office .detect-kpi .kpi-value,
.grc1-office .coll-kpi .kpi-value {
    color: var(--kpi-color, var(--grc1-primary, #2b579a)) !important;
}
.grc1-office .detect-kpi .kpi-label,
.grc1-office .coll-kpi .kpi-label,
.grc1-office .coll-kpi div[style*="font-size:9px"] {
    color: var(--grc1-text2, #605e5c) !important;
}

/* Tier cards: borda mais sutil */
.grc1-office .detect-tier {
    border: 1px solid var(--grc1-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Severity bars: manter cor mas suavizar fundo */
.grc1-office .detect-sev-item {
    background: var(--grc1-panel, #fff) !important;
    border: 1px solid var(--grc1-border) !important;
}

/* Headers com gradiente escuro: garantir fundo island */
.grc1-office .core-hdr,
.grc1-office .detect-header,
.grc1-office .coll-header,
.grc1-office .evb-header,
.grc1-office .audit-header {
    background: linear-gradient(135deg, var(--grc1-island-bg, #1b3a5c) 0%, var(--grc1-accent2, #1e3f73) 50%, var(--grc1-accent, #2b579a) 100%) !important;
}

/* Suite bar e dark islands: fundo Office dark blue */
.grc1-office .titan-suite-bar,
.grc1-office .titan-stat-row,
.grc1-office .ai-mode-selector,
.grc1-office .titan-critical-banner {
    background: linear-gradient(135deg, var(--grc1-island-bg, #1b3a5c), color-mix(in srgb, var(--grc1-accent, #2b579a) 30%, var(--grc1-island-bg, #1b3a5c))) !important;
}

/* Quick filter pills: bordas Office */
.grc1-office .evb-qf,
.grc1-office .da-pill,
.grc1-office .ce-pill {
    border-color: var(--grc1-border, #e1dfdd) !important;
    color: var(--grc1-text, #323130) !important;
}
.grc1-office .evb-qf.evb-qf-active {
    background: var(--grc1-primary, #2b579a) !important;
    border-color: var(--grc1-primary, #2b579a) !important;
    color: #fff !important;
}
.grc1-office .da-pill.active,
.grc1-office .ce-pill.active {
    color: #fff !important;
}

/* Filter bars: fundo painel Office */
.grc1-office .da-filter-bar,
.grc1-office .ce-filter-bar {
    background: var(--grc1-panel, #fff) !important;
    border-color: var(--grc1-border, #e1dfdd) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Bulk bar: adaptar ao Office */
.grc1-office .da-bulk-bar {
    background: linear-gradient(135deg, rgba(43,87,154,0.08), var(--grc1-panel, #fff)) !important;
    border-color: var(--grc1-primary, #2b579a) !important;
}
.grc1-office .da-bulk-count {
    color: var(--grc1-primary, #2b579a) !important;
}

/* Grid: sombra Office (Fluent depth) */
.grc1-office .da-grid,
.grc1-office .ce-grid,
.grc1-office .audit-grid {
    box-shadow: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.1) !important;
    border-radius: var(--grc1-radius, 4px) !important;
}

/* Table headers Office */
.grc1-office .da-grid thead th,
.grc1-office .ce-grid thead th,
.grc1-office .audit-grid thead th {
    background: var(--grc1-table-head, #faf9f8) !important;
    color: var(--grc1-text, #323130) !important;
}

/* Source rows no Collector */
.grc1-office .source-row {
    border-color: var(--grc1-border) !important;
    background: var(--grc1-panel) !important;
}
.grc1-office .source-row div {
    color: var(--grc1-text, #323130) !important;
}
.grc1-office .source-row div[style*="font-size:10px"],
.grc1-office .source-row div[style*="font-size:9px"] {
    color: var(--grc1-text2, #605e5c) !important;
}

/* Section titles */
.grc1-office .coll-section-title h5,
.grc1-office .coll-section-title {
    color: var(--grc1-text, #323130) !important;
}

/* Approval cards no Respond */
.grc1-office .approval-card {
    background: var(--grc1-panel) !important;
    border-color: var(--grc1-border) !important;
}

/* Similar criteria bar: Office style */
.grc1-office .da-similar-bar,
.grc1-office .ce-similar-bar,
.grc1-office .rsp-similar-bar {
    background: linear-gradient(135deg, rgba(43,87,154,0.06), rgba(43,87,154,0.02)) !important;
    border-color: rgba(43,87,154,0.25) !important;
}

/* FP bar: Office style */
.grc1-office .da-fp-bar,
.grc1-office #ca-fp-bar,
.grc1-office #agent-fp-bar {
    background: linear-gradient(135deg, rgba(43,87,154,0.06), rgba(43,87,154,0.02)) !important;
    border-color: rgba(43,87,154,0.25) !important;
}

/* Pipeline EDR stages */
.grc1-office .edr-stage {
    background: var(--grc1-panel) !important;
    border: 1px solid var(--grc1-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LABELS & BADGES — Translucent cross-theme
   Funciona em fundos claros E escuros: bg translucido + texto colorido.
   Temas podem sobrescrever se precisarem de ajuste fino.
   ═══════════════════════════════════════════════════════════════════════ */
.label-info {
    background: rgba(74,144,217,0.12) !important;
    color: #4a90d9 !important;
    border: 1px solid rgba(74,144,217,0.18);
}
.label-success {
    background: rgba(46,204,113,0.12) !important;
    color: #27ae60 !important;
    border: 1px solid rgba(46,204,113,0.18);
}
.label-warning {
    background: rgba(243,156,18,0.12) !important;
    color: #d68910 !important;
    border: 1px solid rgba(243,156,18,0.18);
}
.label-danger {
    background: rgba(231,76,60,0.12) !important;
    color: #e74c3c !important;
    border: 1px solid rgba(231,76,60,0.18);
}
.label-default {
    background: rgba(108,117,125,0.10) !important;
    color: #5a6578 !important;
    border: 1px solid rgba(108,117,125,0.15);
}
.label-primary {
    background: rgba(59,130,246,0.12) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59,130,246,0.18);
}

/* Badge segue o mesmo padrão dos labels */
.badge-info    { background: rgba(74,144,217,0.12) !important; color: #4a90d9 !important; }
.badge-success { background: rgba(46,204,113,0.12) !important; color: #27ae60 !important; }
.badge-warning { background: rgba(243,156,18,0.12) !important; color: #d68910 !important; }
.badge-danger  { background: rgba(231,76,60,0.12) !important; color: #e74c3c !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TEMAS COMPACTOS (dual-mode) — Content area fixes
   Sidebar escura + content claro. Garante que botões, DataTables,
   form controls e texto na area de conteúdo fiquem CLAROS/legíveis.
   NÃO se aplica a navy (blue) nem dark — eles já têm overrides próprios.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-grc1-theme="cyan"] #wrapper,
:root[data-grc1-theme="emerald"] #wrapper,
:root[data-grc1-theme="rose"] #wrapper,
:root[data-grc1-theme="sunset"] #wrapper,
:root[data-grc1-theme="violet"] #wrapper {
    /* Texto na area de conteudo: escuro legível */
    color: var(--grc1-content-text) !important;
}

/* btn-default na area de conteudo: fundo branco, texto escuro */
:root[data-grc1-theme="cyan"] #wrapper .btn-default,
:root[data-grc1-theme="emerald"] #wrapper .btn-default,
:root[data-grc1-theme="rose"] #wrapper .btn-default,
:root[data-grc1-theme="sunset"] #wrapper .btn-default,
:root[data-grc1-theme="violet"] #wrapper .btn-default {
    background: #fff !important;
    border-color: var(--grc1-border, #d1d5db) !important;
    color: var(--grc1-content-text) !important;
}
:root[data-grc1-theme="cyan"] #wrapper .btn-default:hover,
:root[data-grc1-theme="emerald"] #wrapper .btn-default:hover,
:root[data-grc1-theme="rose"] #wrapper .btn-default:hover,
:root[data-grc1-theme="sunset"] #wrapper .btn-default:hover,
:root[data-grc1-theme="violet"] #wrapper .btn-default:hover {
    background: var(--grc1-panel2, #f5f5f5) !important;
}

/* DataTables toolbar buttons */
:root[data-grc1-theme="cyan"] .btn-default-dt-options,
:root[data-grc1-theme="emerald"] .btn-default-dt-options,
:root[data-grc1-theme="rose"] .btn-default-dt-options,
:root[data-grc1-theme="sunset"] .btn-default-dt-options,
:root[data-grc1-theme="violet"] .btn-default-dt-options {
    background: #fff !important;
    border-color: var(--grc1-border, #d1d5db) !important;
    color: var(--grc1-content-text) !important;
}
:root[data-grc1-theme="cyan"] .btn-default-dt-options:hover,
:root[data-grc1-theme="emerald"] .btn-default-dt-options:hover,
:root[data-grc1-theme="rose"] .btn-default-dt-options:hover,
:root[data-grc1-theme="sunset"] .btn-default-dt-options:hover,
:root[data-grc1-theme="violet"] .btn-default-dt-options:hover {
    background: var(--grc1-panel2, #f5f5f5) !important;
}

/* DataTables wrapper text */
:root[data-grc1-theme="cyan"] .dataTables_wrapper,
:root[data-grc1-theme="emerald"] .dataTables_wrapper,
:root[data-grc1-theme="rose"] .dataTables_wrapper,
:root[data-grc1-theme="sunset"] .dataTables_wrapper,
:root[data-grc1-theme="violet"] .dataTables_wrapper {
    color: var(--grc1-content-text) !important;
}
:root[data-grc1-theme="cyan"] .dataTables_info,
:root[data-grc1-theme="emerald"] .dataTables_info,
:root[data-grc1-theme="rose"] .dataTables_info,
:root[data-grc1-theme="sunset"] .dataTables_info,
:root[data-grc1-theme="violet"] .dataTables_info {
    color: var(--grc1-content-text2) !important;
}
:root[data-grc1-theme="cyan"] .dataTables_filter label,
:root[data-grc1-theme="emerald"] .dataTables_filter label,
:root[data-grc1-theme="rose"] .dataTables_filter label,
:root[data-grc1-theme="sunset"] .dataTables_filter label,
:root[data-grc1-theme="violet"] .dataTables_filter label {
    color: var(--grc1-content-text) !important;
}

/* Form controls na area de conteudo */
:root[data-grc1-theme="cyan"] #wrapper .form-control,
:root[data-grc1-theme="emerald"] #wrapper .form-control,
:root[data-grc1-theme="rose"] #wrapper .form-control,
:root[data-grc1-theme="sunset"] #wrapper .form-control,
:root[data-grc1-theme="violet"] #wrapper .form-control {
    background: var(--grc1-input-bg, #fff) !important;
    border-color: var(--grc1-input-brd, #d4dde8) !important;
    color: var(--grc1-content-text) !important;
}

/* Table cells texto */
:root[data-grc1-theme="cyan"] #wrapper .table td,
:root[data-grc1-theme="emerald"] #wrapper .table td,
:root[data-grc1-theme="rose"] #wrapper .table td,
:root[data-grc1-theme="sunset"] #wrapper .table td,
:root[data-grc1-theme="violet"] #wrapper .table td {
    color: var(--grc1-content-text) !important;
}

/* Headings, paragraphs, labels no content */
:root[data-grc1-theme="cyan"] #wrapper h1,
:root[data-grc1-theme="cyan"] #wrapper h2,
:root[data-grc1-theme="cyan"] #wrapper h3,
:root[data-grc1-theme="cyan"] #wrapper h4,
:root[data-grc1-theme="cyan"] #wrapper label,
:root[data-grc1-theme="emerald"] #wrapper h1,
:root[data-grc1-theme="emerald"] #wrapper h2,
:root[data-grc1-theme="emerald"] #wrapper h3,
:root[data-grc1-theme="emerald"] #wrapper h4,
:root[data-grc1-theme="emerald"] #wrapper label,
:root[data-grc1-theme="rose"] #wrapper h1,
:root[data-grc1-theme="rose"] #wrapper h2,
:root[data-grc1-theme="rose"] #wrapper h3,
:root[data-grc1-theme="rose"] #wrapper h4,
:root[data-grc1-theme="rose"] #wrapper label,
:root[data-grc1-theme="sunset"] #wrapper h1,
:root[data-grc1-theme="sunset"] #wrapper h2,
:root[data-grc1-theme="sunset"] #wrapper h3,
:root[data-grc1-theme="sunset"] #wrapper h4,
:root[data-grc1-theme="sunset"] #wrapper label,
:root[data-grc1-theme="violet"] #wrapper h1,
:root[data-grc1-theme="violet"] #wrapper h2,
:root[data-grc1-theme="violet"] #wrapper h3,
:root[data-grc1-theme="violet"] #wrapper h4,
:root[data-grc1-theme="violet"] #wrapper label {
    color: var(--grc1-content-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR MENU PREMIUM — Temas compactos (NÃO navy/dark)
   Texto claro em TODOS os níveis. Perfex usa Tailwind !tw-text-neutral-*
   com !important no sidebar — precisamos de especificidade MÁXIMA +
   !important para vencer.
   ═══════════════════════════════════════════════════════════════════════ */

/* Kill Tailwind !tw-text-neutral-* no sidebar para temas com sidebar escura */
html.grc1-cyan aside#menu *[class*="tw-text-neutral"],
html.grc1-emerald aside#menu *[class*="tw-text-neutral"],
html.grc1-rose aside#menu *[class*="tw-text-neutral"],
html.grc1-sunset aside#menu *[class*="tw-text-neutral"],
html.grc1-violet aside#menu *[class*="tw-text-neutral"] {
    color: inherit !important;
    --tw-text-opacity: 1 !important;
}
html.grc1-cyan aside#menu a,
html.grc1-cyan aside#menu a span,
html.grc1-cyan aside#menu li a,
html.grc1-emerald aside#menu a,
html.grc1-emerald aside#menu a span,
html.grc1-emerald aside#menu li a,
html.grc1-rose aside#menu a,
html.grc1-rose aside#menu a span,
html.grc1-rose aside#menu li a,
html.grc1-sunset aside#menu a,
html.grc1-sunset aside#menu a span,
html.grc1-sunset aside#menu li a,
html.grc1-violet aside#menu a,
html.grc1-violet aside#menu a span,
html.grc1-violet aside#menu li a {
    color: rgba(255,255,255,0.78) !important;
}
html.grc1-cyan aside#menu a:hover,
html.grc1-cyan aside#menu a:hover span,
html.grc1-emerald aside#menu a:hover,
html.grc1-emerald aside#menu a:hover span,
html.grc1-rose aside#menu a:hover,
html.grc1-rose aside#menu a:hover span,
html.grc1-sunset aside#menu a:hover,
html.grc1-sunset aside#menu a:hover span,
html.grc1-violet aside#menu a:hover,
html.grc1-violet aside#menu a:hover span {
    color: #fff !important;
}

/* Nível 1 (root menu items) */
html.grc1-cyan body.grc1-sidebar-premium #side-menu > li > a,
html.grc1-cyan body.grc1-sidebar-premium #side-menu > li > a span,
html.grc1-cyan body.grc1-sidebar-premium #side-menu > li > a .menu-text,
html.grc1-emerald body.grc1-sidebar-premium #side-menu > li > a,
html.grc1-emerald body.grc1-sidebar-premium #side-menu > li > a span,
html.grc1-emerald body.grc1-sidebar-premium #side-menu > li > a .menu-text,
html.grc1-rose body.grc1-sidebar-premium #side-menu > li > a,
html.grc1-rose body.grc1-sidebar-premium #side-menu > li > a span,
html.grc1-rose body.grc1-sidebar-premium #side-menu > li > a .menu-text,
html.grc1-sunset body.grc1-sidebar-premium #side-menu > li > a,
html.grc1-sunset body.grc1-sidebar-premium #side-menu > li > a span,
html.grc1-sunset body.grc1-sidebar-premium #side-menu > li > a .menu-text,
html.grc1-violet body.grc1-sidebar-premium #side-menu > li > a,
html.grc1-violet body.grc1-sidebar-premium #side-menu > li > a span,
html.grc1-violet body.grc1-sidebar-premium #side-menu > li > a .menu-text {
    color: rgba(255,255,255,0.85) !important;
}

/* Nível 2 (nav-second-level) — link + span.sub-menu-text */
html.grc1-cyan body.grc1-sidebar-premium #side-menu .nav-second-level > li > a,
html.grc1-cyan body.grc1-sidebar-premium #side-menu .nav-second-level > li > a span,
html.grc1-cyan body.grc1-sidebar-premium #side-menu .nav-second-level > li > a .sub-menu-text,
html.grc1-emerald body.grc1-sidebar-premium #side-menu .nav-second-level > li > a,
html.grc1-emerald body.grc1-sidebar-premium #side-menu .nav-second-level > li > a span,
html.grc1-emerald body.grc1-sidebar-premium #side-menu .nav-second-level > li > a .sub-menu-text,
html.grc1-rose body.grc1-sidebar-premium #side-menu .nav-second-level > li > a,
html.grc1-rose body.grc1-sidebar-premium #side-menu .nav-second-level > li > a span,
html.grc1-rose body.grc1-sidebar-premium #side-menu .nav-second-level > li > a .sub-menu-text,
html.grc1-sunset body.grc1-sidebar-premium #side-menu .nav-second-level > li > a,
html.grc1-sunset body.grc1-sidebar-premium #side-menu .nav-second-level > li > a span,
html.grc1-sunset body.grc1-sidebar-premium #side-menu .nav-second-level > li > a .sub-menu-text,
html.grc1-violet body.grc1-sidebar-premium #side-menu .nav-second-level > li > a,
html.grc1-violet body.grc1-sidebar-premium #side-menu .nav-second-level > li > a span,
html.grc1-violet body.grc1-sidebar-premium #side-menu .nav-second-level > li > a .sub-menu-text {
    color: rgba(255,255,255,0.78) !important;
}

/* Hover todos os níveis */
html.grc1-cyan body.grc1-sidebar-premium #side-menu a:hover,
html.grc1-cyan body.grc1-sidebar-premium #side-menu a:hover span,
html.grc1-cyan body.grc1-sidebar-premium #side-menu a:hover .sub-menu-text,
html.grc1-cyan body.grc1-sidebar-premium #side-menu a:hover .menu-text,
html.grc1-emerald body.grc1-sidebar-premium #side-menu a:hover,
html.grc1-emerald body.grc1-sidebar-premium #side-menu a:hover span,
html.grc1-emerald body.grc1-sidebar-premium #side-menu a:hover .sub-menu-text,
html.grc1-emerald body.grc1-sidebar-premium #side-menu a:hover .menu-text,
html.grc1-rose body.grc1-sidebar-premium #side-menu a:hover,
html.grc1-rose body.grc1-sidebar-premium #side-menu a:hover span,
html.grc1-rose body.grc1-sidebar-premium #side-menu a:hover .sub-menu-text,
html.grc1-rose body.grc1-sidebar-premium #side-menu a:hover .menu-text,
html.grc1-sunset body.grc1-sidebar-premium #side-menu a:hover,
html.grc1-sunset body.grc1-sidebar-premium #side-menu a:hover span,
html.grc1-sunset body.grc1-sidebar-premium #side-menu a:hover .sub-menu-text,
html.grc1-sunset body.grc1-sidebar-premium #side-menu a:hover .menu-text,
html.grc1-violet body.grc1-sidebar-premium #side-menu a:hover,
html.grc1-violet body.grc1-sidebar-premium #side-menu a:hover span,
html.grc1-violet body.grc1-sidebar-premium #side-menu a:hover .sub-menu-text,
html.grc1-violet body.grc1-sidebar-premium #side-menu a:hover .menu-text {
    color: #fff !important;
}

/* Nível 3+ (inline menus do grc1_tools) */
html.grc1-cyan body.grc1-sidebar-premium .gsp-inline-item > a,
html.grc1-cyan body.grc1-sidebar-premium .gsp-inline-item > a span,
html.grc1-emerald body.grc1-sidebar-premium .gsp-inline-item > a,
html.grc1-emerald body.grc1-sidebar-premium .gsp-inline-item > a span,
html.grc1-rose body.grc1-sidebar-premium .gsp-inline-item > a,
html.grc1-rose body.grc1-sidebar-premium .gsp-inline-item > a span,
html.grc1-sunset body.grc1-sidebar-premium .gsp-inline-item > a,
html.grc1-sunset body.grc1-sidebar-premium .gsp-inline-item > a span,
html.grc1-violet body.grc1-sidebar-premium .gsp-inline-item > a,
html.grc1-violet body.grc1-sidebar-premium .gsp-inline-item > a span {
    color: rgba(255,255,255,0.72) !important;
}
html.grc1-cyan body.grc1-sidebar-premium .gsp-inline-item > a:hover,
html.grc1-cyan body.grc1-sidebar-premium .gsp-inline-item > a:hover span,
html.grc1-emerald body.grc1-sidebar-premium .gsp-inline-item > a:hover,
html.grc1-emerald body.grc1-sidebar-premium .gsp-inline-item > a:hover span,
html.grc1-rose body.grc1-sidebar-premium .gsp-inline-item > a:hover,
html.grc1-rose body.grc1-sidebar-premium .gsp-inline-item > a:hover span,
html.grc1-sunset body.grc1-sidebar-premium .gsp-inline-item > a:hover,
html.grc1-sunset body.grc1-sidebar-premium .gsp-inline-item > a:hover span,
html.grc1-violet body.grc1-sidebar-premium .gsp-inline-item > a:hover,
html.grc1-violet body.grc1-sidebar-premium .gsp-inline-item > a:hover span {
    color: #fff !important;
}

/* Ícones do sidebar — mesma cor do texto */
html.grc1-cyan body.grc1-sidebar-premium #side-menu .menu-icon,
html.grc1-emerald body.grc1-sidebar-premium #side-menu .menu-icon,
html.grc1-rose body.grc1-sidebar-premium #side-menu .menu-icon,
html.grc1-sunset body.grc1-sidebar-premium #side-menu .menu-icon,
html.grc1-violet body.grc1-sidebar-premium #side-menu .menu-icon {
    color: rgba(255,255,255,0.50) !important;
}

/* Seta do accordion */
html.grc1-cyan body.grc1-sidebar-premium #side-menu .fa.arrow,
html.grc1-emerald body.grc1-sidebar-premium #side-menu .fa.arrow,
html.grc1-rose body.grc1-sidebar-premium #side-menu .fa.arrow,
html.grc1-sunset body.grc1-sidebar-premium #side-menu .fa.arrow,
html.grc1-violet body.grc1-sidebar-premium #side-menu .fa.arrow {
    color: rgba(255,255,255,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK THEME — Labels com texto mais claro para contraste em fundo escuro
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-grc1-theme="dark"] .label-info    { color: #6db3f0 !important; }
:root[data-grc1-theme="dark"] .label-success { color: #5ddb8e !important; }
:root[data-grc1-theme="dark"] .label-warning { color: #f0b84a !important; }
:root[data-grc1-theme="dark"] .label-danger  { color: #f07070 !important; }
:root[data-grc1-theme="dark"] .label-default { color: #8892a4 !important; }
:root[data-grc1-theme="dark"] .label-primary { color: #6db3f0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TIME WINDOW SELECTOR — Botões de janela temporal (Hoje, 1h, 3h...)
   Uso: <button class="da-filter-btn da-time-btn active">Hoje</button>
   ═══════════════════════════════════════════════════════════════════════ */
.da-filter-btn.da-time-btn {
    padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
    border: 1.5px solid var(--grc1-border, #d1d5db); background: var(--grc1-panel, #fff);
    color: var(--grc1-content-text2, #6b7280); cursor: pointer; transition: all .15s;
}
.da-filter-btn.da-time-btn:hover {
    border-color: var(--grc1-accent); color: var(--grc1-accent);
}
.da-filter-btn.da-time-btn.active {
    background: linear-gradient(135deg, var(--grc1-accent, #4a90d9), var(--grc1-accent2, #2563eb));
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}

/* ═══════════════════════════════════════════════════════════════════════
   GRC1 CONSOLE — Painel dark para trace/debug/log/código
   Uso: <div class="grc1-console"> ... </div>
   Adapta-se automaticamente ao tema ativo via CSS variables.
   ═══════════════════════════════════════════════════════════════════════ */
.grc1-console {
    background: var(--grc1-console-bg, #0f172a);
    color: var(--grc1-console-text, #e2e8f0);
    border: 1px solid var(--grc1-console-border, rgba(255,255,255,0.06));
    border-radius: var(--grc1-radius, 8px);
    font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
    font-size: 12px;
    overflow: hidden;
}
.grc1-console-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--grc1-console-header, linear-gradient(135deg, rgba(20,50,77,0.95), rgba(28,73,111,0.95)));
    border-bottom: 1px solid var(--grc1-console-border, rgba(255,255,255,0.06));
    color: #fff;
}
.grc1-console-header .console-title {
    font-size: 14px; font-weight: 700;
}
.grc1-console-header .console-subtitle {
    font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px;
}
.grc1-console-body {
    padding: 14px 16px;
    max-height: 500px;
    overflow-y: auto;
}
.grc1-console-body::-webkit-scrollbar { width: 6px; }
.grc1-console-body::-webkit-scrollbar-track { background: transparent; }
.grc1-console-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.grc1-console pre,
.grc1-console code {
    background: var(--grc1-console-code-bg, #020617);
    color: var(--grc1-console-text, #e2e8f0);
    padding: 10px 14px; border-radius: 6px;
    font-size: 11px; white-space: pre-wrap; word-break: break-all;
    border: 1px solid rgba(255,255,255,0.04);
    margin: 6px 0;
}

/* Theme-aware console variables */
:root {
    --grc1-console-bg: #0f172a;
    --grc1-console-text: #e2e8f0;
    --grc1-console-border: rgba(255,255,255,0.06);
    --grc1-console-header: linear-gradient(135deg, rgba(20,50,77,0.95), rgba(28,73,111,0.95));
    --grc1-console-code-bg: #020617;
}
/* Blue/Navy: usar tons do sidebar */
:root[data-grc1-theme="blue"] {
    --grc1-console-bg: var(--grc1-sidebar, #152642);
    --grc1-console-header: linear-gradient(135deg, #1e3355, #243d62);
}
/* Office: levemente mais claro */
:root[data-grc1-theme="office"] {
    --grc1-console-bg: #1e293b;
    --grc1-console-header: linear-gradient(135deg, #334155, #475569);
}