/* ═══════════════════════════════════════════════════════════════════════ GRC1 Tools — GRC1 Blue Theme Inspirado na identidade visual da logo GRC1: azul marinho navy. Sidebar escura navy, topbar navy, content claro azulado. Aplicado via: ou ═══════════════════════════════════════════════════════════════════════ */ /* ─── Variáveis ─────────────────────────────────────────────────────────── */ :root[data-grc1-theme="blue"], .grc1-blue { --grc1-accent: #3b82f6; --grc1-accent2: #2563eb; --grc1-sidebar: #152642; --grc1-sidebar-bg: #152642; --grc1-sidebar-txt: #cbd5e1; --grc1-topbar: #1e3355; --grc1-topbar-txt: #e2e8f0; --grc1-bg: #f1f5f9; --grc1-bg2: #1e3355; --grc1-bg3: #243d62; --grc1-panel: #ffffff; --grc1-panel2: #edf1f8; --grc1-border: #c8d4e4; --grc1-text: #e2e8f0; --grc1-text2: #94a3b8; --grc1-content-text: #3a5070; --grc1-content-text2: #6a8098; --grc1-input-bg: #ffffff; --grc1-input-brd: #cbd5e1; --grc1-table-head: #dce4f0; --grc1-table-row: #ffffff; --grc1-table-row2: #f0f3f8; --grc1-shadow: 0 2px 16px rgba(15,23,42,0.08); --grc1-radius: 8px; --grc1-scrollbar: #cbd5e1; } /* ─── Scrollbar ─────────────────────────────────────────────────────────── */ .grc1-blue *::-webkit-scrollbar { width: 7px; height: 7px; } .grc1-blue *::-webkit-scrollbar-track { background: transparent; } .grc1-blue *::-webkit-scrollbar-thumb { background: var(--grc1-scrollbar); border-radius: 4px; } .grc1-blue *::-webkit-scrollbar-thumb:hover { background: #9ab0cc; } /* ─── Sidebar — best practices: near-white text + accent bar ─────────────── */ .grc1-blue .sidebar, .grc1-blue #menu { background: #152642 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Nível 0: near-white text, WCAG AAA contrast */ .grc1-blue #side-menu > li > a { color: #cbd5e1 !important; font-size: 14px !important; font-weight: 600 !important; } .grc1-blue #side-menu > li > a:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; } .grc1-blue #side-menu > li.active > a { color: #fff !important; background: color-mix(in srgb, var(--grc1-accent) 18%, transparent) !important; } .grc1-blue #side-menu > li > a .menu-icon { color: #64748b !important; } .grc1-blue #side-menu > li:hover > a .menu-icon { color: #94a3b8 !important; } .grc1-blue #side-menu > li.active > a .menu-icon { color: #93c5fd !important; } .grc1-blue #side-menu > li > a > .fa.arrow { color: #7a90aa !important; } /* Nível 1 */ .grc1-blue .nav-second-level { background: rgba(0,0,0,0.2) !important; } .grc1-blue .nav-second-level > li > a, .grc1-blue .nav-second-level > li > a span, .grc1-blue .nav-second-level > li > a .sub-menu-text { color: #94a3b8 !important; } .grc1-blue .nav-second-level > li > a:hover, .grc1-blue .nav-second-level > li > a:hover span, .grc1-blue .nav-second-level > li > a:hover .sub-menu-text { color: #fff !important; background: rgba(255,255,255,0.05) !important; } .grc1-blue .nav-second-level > li.active > a, .grc1-blue .nav-second-level > li.active > a span { color: #e2e8f0 !important; } .grc1-blue .nav-second-level > li > a > .grc1-acc-arrow { color: #94a3b8 !important; } /* Nível 2+ accordion */ .grc1-blue .grc1-acc-sub a, .grc1-blue .grc1-acc-sub li > a, .grc1-blue .grc1-acc-sub li > a span { color: #7a8ea6 !important; } .grc1-blue .grc1-acc-sub li > a i { color: #64748b !important; opacity: 1 !important; } .grc1-blue .grc1-acc-sub li > a:hover, .grc1-blue .grc1-acc-sub li > a:hover span { color: #fff !important; background: rgba(255,255,255,0.05) !important; } .grc1-blue .grc1-acc-sub .grc1-acc-arrow { color: #8a9ab5 !important; } /* ── Profile — html prefix vence Tailwind ── */ html.grc1-blue .sidebar-user-profile > a.profile, html.grc1-blue .sidebar-user-profile > a.dropdown-toggle { background: rgba(255,255,255,0.04) !important; border-color: transparent !important; color: #cbd5e1 !important; } html.grc1-blue .sidebar-user-profile > a.profile:hover { background: rgba(255,255,255,0.06) !important; } html.grc1-blue .sidebar-user-profile span, html.grc1-blue .sidebar-user-profile span[class*="tw-truncate"], html.grc1-blue .sidebar-user-profile span[class*="tw-font"] { color: #e2e8f0 !important; } html.grc1-blue .sidebar-user-profile span.tw-text-sm, html.grc1-blue .sidebar-user-profile span[class*="tw-text-neutral"], html.grc1-blue .sidebar-user-profile span.tw-font-normal { color: #94a3b8 !important; } /* Profile dropdown */ .grc1-blue .sidebar-user-profile .dropdown-menu { background: #1e3355 !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } .grc1-blue .sidebar-user-profile .dropdown-menu li > a { color: #94a3b8 !important; } .grc1-blue .sidebar-user-profile .dropdown-menu li > a:hover { color: #fff !important; background: rgba(255,255,255,0.05) !important; } /* Premium elements */ .grc1-blue #gsp-brand .gsp-brand-text { color: #e2e8f0 !important; } .grc1-blue #gsp-brand .gsp-brand-sub { color: #64748b !important; } .grc1-blue #gsp-search input { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; color: #cbd5e1 !important; } .grc1-blue #gsp-search input::placeholder { color: #7a90aa !important; } .grc1-blue #gsp-search .gsp-search-icon { color: #64748b !important; } .grc1-blue #gsp-footer .gsp-footer-text { color: #7a90aa !important; } .grc1-blue #gsp-collapse-btn { color: #64748b !important; } .grc1-blue #gsp-collapse-btn:hover { color: #cbd5e1 !important; background: rgba(255,255,255,0.04) !important; } .grc1-blue .gsp-kbd { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.05) !important; color: #7a90aa !important; } /* ─── Topbar ─────────────────────────────────────────────────────────────── */ .grc1-blue .navbar, .grc1-blue .navbar-default { background: #1e3355 !important; border-color: rgba(255,255,255,0.06) !important; } .grc1-blue .navbar-default .navbar-brand, .grc1-blue .navbar-default .navbar-nav > li > a { color: #e2e8f0 !important; } .grc1-blue .navbar-default .navbar-nav > li > a:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; } /* ─── Header ─────────────────────────────────────────────────────────────── */ html.grc1-blue #header { background: #1e3355 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important; } html.grc1-blue #header li > a.active { background: rgba(255,255,255,0.06) !important; color: #e2e8f0 !important; } html.grc1-blue #header button.hide-menu, html.grc1-blue #header .mobile-menu-toggle { color: #e2e8f0 !important; } html.grc1-blue #header button.hide-menu svg, html.grc1-blue #header button.hide-menu svg * { color: #e2e8f0 !important; stroke: #e2e8f0 !important; } html.grc1-blue #header #search_input, html.grc1-blue #header input[type="search"], html.grc1-blue #header input[type="text"] { background-color: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; } html.grc1-blue #header #search_input::placeholder { color: #7a90aa !important; } html.grc1-blue #header .fa, html.grc1-blue #header .fas, html.grc1-blue #header .far, html.grc1-blue #header [class^="fa-"], html.grc1-blue #header [class*=" fa-"] { color: #94a3b8 !important; } html.grc1-blue #header svg { color: #94a3b8 !important; stroke: currentColor; } html.grc1-blue #header [class*="tw-text-neutral"] { color: #94a3b8 !important; } html.grc1-blue #header .navbar-nav > li > a { color: #94a3b8 !important; } html.grc1-blue #header .navbar-nav > li > a:hover { color: #fff !important; } /* ─── Body & Content ────────────────────────────────────────────────────── */ /* SOLUÇÃO DEFINITIVA: re-define --grc1-text e --grc1-text2 dentro do #wrapper para valores ESCUROS. Assim qualquer inline style com var(--grc1-text) nos partials Titan/módulos automaticamente fica escuro na área de conteúdo, sem precisar editar cada partial individualmente. */ .grc1-blue #wrapper { --grc1-text: var(--grc1-content-text); --grc1-text2: var(--grc1-content-text2); --grc1-panel: #ffffff; --grc1-panel2: #edf1f8; --grc1-border: #c8d4e4; --grc1-bg2: #edf2f8; --grc1-bg3: #e8edf5; background: var(--grc1-bg) !important; color: var(--grc1-content-text) !important; } .grc1-blue .content-page, .grc1-blue .content { background: var(--grc1-bg) !important; color: var(--grc1-content-text) !important; } .grc1-blue #wrapper h1, .grc1-blue #wrapper h2, .grc1-blue #wrapper h3, .grc1-blue #wrapper h4, .grc1-blue #wrapper h5, .grc1-blue #wrapper h6 { color: var(--grc1-content-text) !important; } .grc1-blue #wrapper .panel-title { color: var(--grc1-content-text) !important; } .grc1-blue #wrapper p { color: var(--grc1-content-text); } .grc1-blue #wrapper .text-muted { color: var(--grc1-content-text2) !important; } .grc1-blue #wrapper a { color: var(--grc1-accent2, #1e3a6b); } .grc1-blue #wrapper a:hover { color: var(--grc1-accent, #2a5298); } .grc1-blue #wrapper label, .grc1-blue #wrapper .control-label { color: var(--grc1-content-text) !important; } /* ─── Panels ────────────────────────────────────────────────────────────── */ .grc1-blue .panel { background: var(--grc1-panel) !important; border-color: var(--grc1-border) !important; color: var(--grc1-content-text) !important; } .grc1-blue .panel-heading { background: var(--grc1-panel2) !important; border-color: var(--grc1-border) !important; color: var(--grc1-content-text) !important; } .grc1-blue .panel-body { color: var(--grc1-content-text) !important; } /* ─── Tables — contraste forte, presença navy ──────────────────────────── */ .grc1-blue .table > thead > tr > th { background: var(--grc1-table-head) !important; color: var(--grc1-content-text) !important; font-weight: 700 !important; border-bottom: 2px solid var(--grc1-border) !important; } .grc1-blue .table > tbody > tr > td { color: var(--grc1-content-text) !important; border-bottom-color: var(--grc1-border) !important; } .grc1-blue .table > tbody > tr > td a { color: var(--grc1-content-text) !important; } .grc1-blue .table > tbody > tr > td a:hover { color: var(--grc1-accent) !important; } .grc1-blue .table > tbody > tr:hover > td, .grc1-blue .table-hover > tbody > tr:hover > td, .grc1-blue table.dataTable > tbody > tr:hover > td { background: #e8edf5 !important; } .grc1-blue .table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--grc1-table-row2) !important; } /* DataTables */ .grc1-blue .dataTables_wrapper { color: var(--grc1-content-text) !important; } .grc1-blue .dataTables_info { color: var(--grc1-content-text2) !important; } .grc1-blue .dataTables_filter label, .grc1-blue .dataTables_length label { color: var(--grc1-content-text) !important; } .grc1-blue .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--grc1-content-text) !important; } .grc1-blue .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--grc1-accent) !important; color: #fff !important; border-color: var(--grc1-accent) !important; } /* Texto em colunas — content-text em tudo exceto badges */ .grc1-blue .table td { color: var(--grc1-content-text) !important; } .grc1-blue .table td a:not(.label):not(.badge) { color: var(--grc1-accent2) !important; } .grc1-blue .table td a:not(.label):not(.badge):hover { color: var(--grc1-accent) !important; } .grc1-blue .table td span:not(.label):not(.badge):not([style*="color"]):not([class*="ticket-status"]) { color: var(--grc1-content-text) !important; } .grc1-blue .table td div:not([class*="bg-"]) { color: var(--grc1-content-text) !important; } .grc1-blue .table td small { color: var(--grc1-content-text2) !important; } .grc1-blue .table td p { color: var(--grc1-content-text) !important; } .grc1-blue .table td .text-muted { color: var(--grc1-content-text2) !important; } .grc1-blue .table td .tw-font-medium, .grc1-blue .table td [class*="tw-text-"] { color: var(--grc1-content-text) !important; } .grc1-blue .table tr.text-danger td { color: var(--grc1-content-text) !important; } .grc1-blue .table tr.text-danger td a:not(.label) { color: var(--grc1-accent2) !important; } /* Sorting icons */ .grc1-blue .table thead th.sorting::after, .grc1-blue .table thead th.sorting_asc::after, .grc1-blue .table thead th.sorting_desc::after { opacity: 0.7 !important; } /* ─── Forms ─────────────────────────────────────────────────────────────── */ .grc1-blue .form-control { border-color: var(--grc1-input-brd) !important; background: var(--grc1-input-bg) !important; color: #3a5070 !important; } .grc1-blue .form-control:focus { border-color: var(--grc1-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--grc1-accent) 12%, transparent) !important; } /* ─── Buttons — flat normal, degradê no hover ──────────────────────────── */ .grc1-blue .btn-primary { background: #3b5a9e !important; border-color: #3b5a9e !important; color: #fff !important; } .grc1-blue .btn-primary:hover { background: linear-gradient(135deg, #3b5a9e, #2a4880) !important; border-color: #2a4880 !important; } .grc1-blue .btn-info { background: #4a7fb8 !important; border-color: #4a7fb8 !important; color: #fff !important; } .grc1-blue .btn-info:hover { background: linear-gradient(135deg, #4a7fb8, #3a6a9e) !important; border-color: #3a6a9e !important; } .grc1-blue .btn-success { background: #38906e !important; border-color: #38906e !important; } .grc1-blue .btn-success:hover { background: linear-gradient(135deg, #38906e, #2e7d60) !important; } .grc1-blue .btn-warning { background: #d4943a !important; border-color: #d4943a !important; } .grc1-blue .btn-warning:hover { background: linear-gradient(135deg, #d4943a, #c08030) !important; } .grc1-blue .btn-danger { background: #c85555 !important; border-color: #c85555 !important; } .grc1-blue .btn-danger:hover { background: linear-gradient(135deg, #c85555, #b83838) !important; } .grc1-blue .btn-default { background: #fff !important; border-color: #c0cddf !important; color: #3a5070 !important; } .grc1-blue .btn-default:hover { background: linear-gradient(135deg, #f4f7fc, #e4eaf4) !important; border-color: #a0b4cc !important; } /* ─── Filtros de status (Tailwind inline) ───────────────────────────────── */ .grc1-blue [data-cview] { border-color: #c0cddf !important; background: #f4f7fc !important; } .grc1-blue [data-cview]:hover { background: #e4eaf4 !important; } .grc1-blue [data-cview] .tw-font-semibold { color: #152642 !important; } /* ─── Tabs ──────────────────────────────────────────────────────────────── */ .grc1-blue .nav-tabs > li.active > a { color: var(--grc1-accent) !important; border-top-color: var(--grc1-accent) !important; border-top-width: 2px !important; } .grc1-blue .nav-tabs > li > a:hover { background: #edf2fa !important; border-color: #d4dff0 !important; color: var(--grc1-accent2) !important; } /* ─── Dropdowns ─────────────────────────────────────────────────────────── */ .grc1-blue .dropdown-menu { border-color: var(--grc1-border) !important; box-shadow: var(--grc1-shadow) !important; } /* ─── Badges & Labels — cores gerenciadas pela camada base ─────────────── */ /* label-default precisa de ajuste navy */ .grc1-blue #wrapper .label-default { color: #1e3355 !important; background: #dce4f0 !important; } /* ─── Tabs ─────────────────────────────────────────────────────────────── */ .grc1-blue .nav-tabs > li > a { color: #2a4060 !important; } /* ─── Titan components — tons navy no content ──────────────────────────── */ .grc1-blue .titan-stat .stat-value { color: #1a2d48 !important; } .grc1-blue .titan-stat .stat-label { color: #6a8098 !important; } .grc1-blue .titan-kpi .kpi-label { color: #3a5070 !important; } .grc1-blue .titan-kpi .kpi-sub { color: #6a8098 !important; } .grc1-blue .titan-chart-card .chart-title { color: #1a2d48 !important; } .grc1-blue .ai-mode-card .mode-label { color: #1a2d48 !important; } .grc1-blue .ai-mode-card .mode-subtitle { color: #3a5070 !important; } .grc1-blue .ai-mode-card .mode-desc { color: #6a8098 !important; } /* ─── Dropdown no content ──────────────────────────────────────────────── */ .grc1-blue .dropdown-menu > li > a { color: #3a5070 !important; } .grc1-blue .dropdown-menu > li > a:hover { color: #1a2d48 !important; } .grc1-blue .dropdown-menu .dropdown-header { color: #6a8098 !important; } /* ─── Modal — texto legível ─────────────────────────────────────────────── */ /* Modais são movidos para via JS (fix stacking context). Fora do #wrapper, --grc1-text resolve para #e2e8f0 (claro/sidebar). Re-definir TODAS as variáveis de conteúdo em .modal para que var(--grc1-text) etc. sempre resolvam para valores ESCUROS legíveis. */ .grc1-blue .modal { --grc1-text: #3a5070; --grc1-text2: #2c4060; --grc1-content-text: #3a5070; --grc1-content-text2: #2c4060; --grc1-bg: #f1f5f9; --grc1-bg3: #e8edf5; --grc1-panel: #ffffff; --grc1-panel2: #edf1f8; --grc1-border: #c8d4e4; --grc1-input-bg: #ffffff; --grc1-input-brd: #cbd5e1; --grc1-table-head: #b8c5d8; --grc1-table-row: #ffffff; --grc1-table-row2: #f0f3f8; --grc1-accent: #3b82f6; --grc1-accent2: #2563eb; --gsp-text-primary: #3a5070; --gsp-text-secondary: #2c4060; --gsp-card-bg: #ffffff; --gsp-card-border: rgba(0,0,0,0.1); --gsp-divider: #c8d4e4; --gsp-input-border: #cbd5e1; --gsp-input-bg: #ffffff; } .grc1-blue .modal .modal-content { border-color: var(--grc1-border) !important; color: #1a2d48 !important; background: #fff !important; } /* Header: default light, mas NÃO sobrescrever headers com style inline (background colorido) */ .grc1-blue .modal .modal-header:not([style*="background"]) { background: var(--grc1-panel2) !important; border-color: var(--grc1-border) !important; } .grc1-blue .modal .modal-header:not([style*="background"]) .modal-title { color: #3a5070 !important; } /* Headers com background inline (coloridos) — texto que contrasta com o accent */ .grc1-blue .modal .modal-header[style*="background"] .modal-title { color: var(--grc1-on-accent, #fff) !important; } .grc1-blue .modal .modal-header[style*="background"] .close { color: var(--grc1-on-accent, #fff) !important; opacity: 0.8 !important; text-shadow: none !important; } .grc1-blue .modal .modal-body { color: #1a2d48 !important; } .grc1-blue .modal .modal-body label { color: #152642 !important; } .grc1-blue .modal .modal-body .control-label { color: #152642 !important; } .grc1-blue .modal .modal-body .checkbox label { color: #1a2d48 !important; } .grc1-blue .modal .modal-body .form-control { background: #fff !important; border-color: #b8c5d8 !important; color: #1a2d48 !important; } .grc1-blue .modal .modal-footer { background: var(--grc1-panel2) !important; border-color: var(--grc1-border) !important; } .grc1-blue .modal .modal-footer .btn-default { background: #fff !important; border-color: #c0cddf !important; color: #3a5070 !important; } /* Bootstrap Select (usado em modals e forms) */ .grc1-blue .bootstrap-select .btn { color: #1a2d48 !important; background: #fff !important; border-color: #b8c5d8 !important; } .grc1-blue .bootstrap-select .filter-option-inner-inner { color: #1a2d48 !important; } .grc1-blue .bootstrap-select .dropdown-menu { background: #fff !important; } .grc1-blue .bootstrap-select .dropdown-menu li a { color: #1a2d48 !important; } .grc1-blue .bootstrap-select .dropdown-menu li a:hover { background: #edf1f7 !important; } .grc1-blue .bootstrap-select .dropdown-menu .bs-searchbox input { color: #1a2d48 !important; border-color: #b8c5d8 !important; } /* ═══════════════════════════════════════════════════════════════════════ OVERRIDE GLOBAL — vence Tailwind tw-text-neutral-* na area de conteudo Usa --grc1-content-text (escuro) em vez de --grc1-text (claro/sidebar) ═══════════════════════════════════════════════════════════════════════ */ html.grc1-blue #wrapper, html.grc1-blue #wrapper [class*="tw-text-neutral"], html.grc1-blue #wrapper .tw-font-semibold, html.grc1-blue #wrapper .tw-font-medium { color: var(--grc1-content-text) !important; } html.grc1-blue #wrapper .tw-text-neutral-500, html.grc1-blue #wrapper .tw-text-neutral-400 { color: var(--grc1-content-text2) !important; } html.grc1-blue #wrapper svg[class*="tw-text-neutral"] { color: var(--grc1-content-text2) !important; } /* DataTables toolbar */ html.grc1-blue .btn-default-dt-options { background: #fff !important; border-color: var(--grc1-border) !important; color: var(--grc1-content-text) !important; } html.grc1-blue .btn-default-dt-options:hover { background: var(--grc1-panel2) !important; } html.grc1-blue .input-group-addon { background: var(--grc1-panel2) !important; border-color: var(--grc1-border) !important; color: var(--grc1-content-text) !important; } html.grc1-blue .dataTables_wrapper select.form-control, html.grc1-blue .dataTables_wrapper input.form-control { color: var(--grc1-content-text) !important; border-color: var(--grc1-border) !important; } html.grc1-blue .panel-table-full, html.grc1-blue .panel-table-full label, html.grc1-blue .panel-table-full select { color: var(--grc1-content-text) !important; } /* Row options */ html.grc1-blue .row-options a { color: var(--grc1-accent) !important; } html.grc1-blue .row-options a:hover { color: var(--grc1-accent2) !important; } html.grc1-blue .row-options a._delete { color: #b83838 !important; } /* ═══════════════════════════════════════════════════════════════════════ NUCLEAR CONTENT CONTRAST FIX — garante texto legível em TODA a area de conteúdo, módulos oficiais, custom e GRC1. Força cor escura em todos os elementos text dentro de #wrapper, com exceções explícitas para componentes com fundo escuro. ═══════════════════════════════════════════════════════════════════════ */ /* --- A. Texto genérico: force dark em TODO elemento texto dentro de #wrapper --- */ html.grc1-blue #wrapper div:not([class*="titan-suite-bar"]):not([class*="coll-header"]):not([class*="tsb-"]):not([class*="ch-"]):not([style*="linear-gradient"]), html.grc1-blue #wrapper span:not(.label):not(.badge):not([class*="tsb-"]):not([class*="ch-"]):not([style*="color:#fff"]):not([style*="color: #fff"]), html.grc1-blue #wrapper p, html.grc1-blue #wrapper li:not([class*="tsb-"]), html.grc1-blue #wrapper small, html.grc1-blue #wrapper strong { color: var(--grc1-content-text, #3a5070); } /* --- B. Table headers: SEMPRE escuro + bold --- */ html.grc1-blue #wrapper .table th, html.grc1-blue #wrapper table th, html.grc1-blue #wrapper .table > thead > tr > th, html.grc1-blue #wrapper table.dataTable > thead > tr > th { color: #3a5070 !important; background: var(--grc1-table-head, #b8c5d8) !important; } /* --- C. Table cells: escuro --- */ html.grc1-blue #wrapper .table td, html.grc1-blue #wrapper table td, html.grc1-blue #wrapper .table > tbody > tr > td { color: var(--grc1-content-text, #3a5070) !important; } /* --- D. Links em tabela: accent --- */ html.grc1-blue #wrapper .table td a:not(.label):not(.badge):not(.btn) { color: var(--grc1-accent2, #2563eb) !important; } /* --- E. Inline var(--grc1-text2) fallbacks — forçar escuro quando no conteúdo --- */ html.grc1-blue #wrapper [style*="var(--grc1-text2"], html.grc1-blue #wrapper [style*="var(--grc1-text,"] { color: var(--grc1-content-text2, #6a8098) !important; } /* --- F. KPI / stat labels e valores dentro de conteúdo --- */ html.grc1-blue #wrapper .kpi-label, html.grc1-blue #wrapper .kpi-sub, html.grc1-blue #wrapper .stat-label, html.grc1-blue #wrapper .card-label, html.grc1-blue #wrapper .mode-subtitle, html.grc1-blue #wrapper .mode-desc { color: var(--grc1-content-text2, #6a8098) !important; } html.grc1-blue #wrapper .kpi-value, html.grc1-blue #wrapper .stat-value, html.grc1-blue #wrapper .card-value, html.grc1-blue #wrapper .mode-label, html.grc1-blue #wrapper .chart-title { color: var(--grc1-content-text, #3a5070) !important; } /* --- G. Section titles e headings genéricos (exceto dentro de modal-header colorido) --- */ html.grc1-blue #wrapper .coll-section-title h5, html.grc1-blue #wrapper .coll-section-title, html.grc1-blue #wrapper h3:not([class*="ch-"]):not(.modal-title), html.grc1-blue #wrapper h4:not(.modal-title), html.grc1-blue #wrapper h5:not(.modal-title) { color: var(--grc1-content-text, #3a5070) !important; } /* --- H. Filtros de coluna e inputs --- */ html.grc1-blue #wrapper .col-filters td, html.grc1-blue #wrapper .col-filter { color: var(--grc1-content-text, #3a5070) !important; } /* ═══════════════════════════════════════════════════════════════════════ EXCEÇÕES — componentes com fundo ESCURO mantêm texto CLARO. Usar seletor com especificidade alta + !important. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ DARK ISLAND FIX — Componentes com fundo escuro dentro de #wrapper. O #wrapper redefine --grc1-bg3, --grc1-panel2, --grc1-border etc. para valores CLAROS opacos. Componentes com gradient escuro precisam de override local de TODAS as variáveis + background/color hardcoded. Lista: suite bar, coll-header, detect-header, respond-header, assets-header, forensics-header, hunt-header, intel-header, ca-header, tm-header, ts-header. ═══════════════════════════════════════════════════════════════════════ */ html.grc1-blue #wrapper .grc1-dark-island, html.grc1-blue #wrapper .titan-suite-bar, html.grc1-blue #wrapper .titan-stat-row, html.grc1-blue #wrapper .titan-kpi-row, html.grc1-blue #wrapper .titan-charts-row, html.grc1-blue #wrapper .edr-pipeline, html.grc1-blue #wrapper .ai-mode-selector, html.grc1-blue #wrapper .coll-header, html.grc1-blue #wrapper .detect-header, html.grc1-blue #wrapper .respond-header, html.grc1-blue #wrapper .assets-header, html.grc1-blue #wrapper .forensics-header, html.grc1-blue #wrapper .hunt-header, html.grc1-blue #wrapper .intel-header, html.grc1-blue #wrapper .ca-header, html.grc1-blue #wrapper .tm-header, html.grc1-blue #wrapper .ts-header { /* Re-set ALL variables to dark-friendly values */ --grc1-text: rgba(255,255,255,0.85); --grc1-text2: rgba(255,255,255,0.4); --grc1-bg3: rgba(255,255,255,0.025); --grc1-panel: rgba(255,255,255,0.04); --grc1-panel2: rgba(255,255,255,0.06); --grc1-border: rgba(255,255,255,0.06); --grc1-shadow: 0 4px 24px rgba(0,0,0,0.25); --grc1-content-text: rgba(255,255,255,0.85); --grc1-content-text2: rgba(255,255,255,0.4); --gsp-text-primary: rgba(255,255,255,0.85); --gsp-text-secondary: rgba(255,255,255,0.4); --gsp-card-bg: transparent; --gsp-card-border: rgba(255,255,255,0.06); --gsp-divider: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85) !important; } /* Todos os filhos + links: texto claro. Seletor span/div/p/small/strong com :not() inflados para vencer o nuclear override (0,1,7,2) */ html.grc1-blue #wrapper .grc1-dark-island span:not(.label):not(.badge):not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6), html.grc1-blue #wrapper .grc1-dark-island div:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .grc1-dark-island p:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .grc1-dark-island small:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .grc1-dark-island strong:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .grc1-dark-island li:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .edr-pipeline span:not(.label):not(.badge):not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6), html.grc1-blue #wrapper .titan-stat-row span:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .titan-kpi-row span:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .titan-charts-row span:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .ai-mode-selector span:not(.NOOP1):not(.NOOP2):not(.NOOP3):not(.NOOP4):not(.NOOP5):not(.NOOP6):not(.NOOP7), html.grc1-blue #wrapper .grc1-dark-island *, html.grc1-blue #wrapper .grc1-dark-island a, html.grc1-blue #wrapper .edr-pipeline *, html.grc1-blue #wrapper .edr-pipeline a, html.grc1-blue #wrapper .titan-stat-row *, html.grc1-blue #wrapper .titan-stat-row a, html.grc1-blue #wrapper .titan-kpi-row *, html.grc1-blue #wrapper .titan-kpi-row a, html.grc1-blue #wrapper .titan-charts-row *, html.grc1-blue #wrapper .titan-charts-row a, html.grc1-blue #wrapper .ai-mode-selector *, html.grc1-blue #wrapper .ai-mode-selector a, html.grc1-blue #wrapper .titan-suite-bar *, html.grc1-blue #wrapper .titan-suite-bar a, html.grc1-blue #wrapper .coll-header *, html.grc1-blue #wrapper .coll-header a, html.grc1-blue #wrapper .detect-header *, html.grc1-blue #wrapper .detect-header a, html.grc1-blue #wrapper .respond-header *, html.grc1-blue #wrapper .respond-header a, html.grc1-blue #wrapper .assets-header *, html.grc1-blue #wrapper .assets-header a, html.grc1-blue #wrapper .forensics-header *, html.grc1-blue #wrapper .forensics-header a, html.grc1-blue #wrapper .hunt-header *, html.grc1-blue #wrapper .hunt-header a, html.grc1-blue #wrapper .intel-header *, html.grc1-blue #wrapper .intel-header a, html.grc1-blue #wrapper .ca-header *, html.grc1-blue #wrapper .ca-header a, html.grc1-blue #wrapper .tm-header *, html.grc1-blue #wrapper .tm-header a, html.grc1-blue #wrapper .ts-header *, html.grc1-blue #wrapper .ts-header a { color: rgba(255,255,255,0.85) !important; text-decoration: none; } /* EDR Nav bar (active item) */ html.grc1-blue #wrapper [style*="linear-gradient(135deg,#4a90d9"] { color: #fff !important; } /* Badges, labels — cores gerenciadas pela camada base (grc1_variables_base.css). Apenas label-default precisa de ajuste navy. */ html.grc1-blue #wrapper .label-default { color: #1e3355 !important; background: #dce4f0 !important; } /* Preserve KPI value colors (colored by --kpi-color) */ html.grc1-blue #wrapper .coll-kpi .kpi-value { color: var(--kpi-color, #4a90d9) !important; } html.grc1-blue #wrapper .coll-kpi .kpi-label { color: #2c4060 !important; } /* Preserve card-success/warning/danger/info colors */ html.grc1-blue #wrapper .card-success .card-value { color: #28a745 !important; } html.grc1-blue #wrapper .card-warning .card-value { color: #f0ad4e !important; } html.grc1-blue #wrapper .card-danger .card-value { color: #d9534f !important; } html.grc1-blue #wrapper .card-info .card-value { color: var(--grc1-accent, #4a90d9) !important; } /* Preserve btn text colors */ html.grc1-blue #wrapper .btn { color: inherit; } html.grc1-blue #wrapper .btn-primary, html.grc1-blue #wrapper .btn-success, html.grc1-blue #wrapper .btn-danger, html.grc1-blue #wrapper .btn-warning, html.grc1-blue #wrapper .btn-info { color: #fff !important; } html.grc1-blue #wrapper .btn-default { color: #3a5070 !important; } /* Dark island: btn-default + TODOS os filhos (span, i, etc.) — texto claro. Especificidade alta para vencer o nuclear override (0,1,7,2). */ html.grc1-blue #wrapper .grc1-dark-island .btn-default, html.grc1-blue #wrapper .grc1-dark-island .btn-default span, html.grc1-blue #wrapper .grc1-dark-island .btn-default i, html.grc1-blue #wrapper .grc1-dark-island .btn span, html.grc1-blue #wrapper .grc1-dark-island .btn i, html.grc1-blue #wrapper .grc1-dark-island .btn-default-dt-options, html.grc1-blue #wrapper .grc1-dark-island .btn-default-dt-options span { color: rgba(255,255,255,0.85) !important; } html.grc1-blue #wrapper .grc1-dark-island .btn-default { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; } /* EDR Pipeline — alinhar ao mesmo navy premium das outras areas Titan */ :root[data-grc1-theme="blue"] #wrapper .edr-pipeline, .grc1-blue #wrapper .edr-pipeline { background: linear-gradient(135deg, var(--grc1-sidebar, #152642) 0%, var(--grc1-sidebar, #152642) 50%, var(--grc1-accent2, var(--grc1-accent, #2563eb)) 100%) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 4px 20px rgba(21,38,66,0.35) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-pipeline::before, .grc1-blue #wrapper .edr-pipeline::before { background: linear-gradient(90deg, #34d399, #60a5fa, #fbbf24, #c084fc, #22d3ee) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-stage, .grc1-blue #wrapper .edr-stage { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-stage:hover, .grc1-blue #wrapper .edr-stage:hover { background: rgba(255,255,255,0.08) !important; box-shadow: 0 8px 24px rgba(10,20,36,0.28) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-pipeline-header h5, :root[data-grc1-theme="blue"] #wrapper .edr-stage-title, :root[data-grc1-theme="blue"] #wrapper .edr-metric-value, .grc1-blue #wrapper .edr-pipeline-header h5, .grc1-blue #wrapper .edr-stage-title, .grc1-blue #wrapper .edr-metric-value { color: rgba(255,255,255,0.88) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-stage-subtitle, :root[data-grc1-theme="blue"] #wrapper .edr-metric-label, :root[data-grc1-theme="blue"] #wrapper .edr-pipeline-footer, :root[data-grc1-theme="blue"] #wrapper .edr-pipeline-header > span, .grc1-blue #wrapper .edr-stage-subtitle, .grc1-blue #wrapper .edr-metric-label, .grc1-blue #wrapper .edr-pipeline-footer, .grc1-blue #wrapper .edr-pipeline-header > span { color: rgba(255,255,255,0.46) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-pipeline-header .edr-badge, .grc1-blue #wrapper .edr-pipeline-header .edr-badge { background: rgba(74,144,217,0.18) !important; color: #bfdbfe !important; border: 1px solid rgba(147,197,253,0.14) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-pipeline-header .edr-badge i, .grc1-blue #wrapper .edr-pipeline-header .edr-badge i { color: #93c5fd !important; } :root[data-grc1-theme="blue"] #wrapper .edr-throughput-bar, .grc1-blue #wrapper .edr-throughput-bar { background: rgba(255,255,255,0.10) !important; } :root[data-grc1-theme="blue"] #wrapper .edr-arrow, .grc1-blue #wrapper .edr-arrow { color: rgba(255,255,255,0.18) !important; } /* Preserve alert text colors (suavizados) */ html.grc1-blue #wrapper .alert-success { color: #167857 !important; } html.grc1-blue #wrapper .alert-danger { color: #a83535 !important; } html.grc1-blue #wrapper .alert-warning { color: #a85a1b !important; } html.grc1-blue #wrapper .alert-info { color: #2e5aaf !important; } /* Icons - uso accent para ícones genéricos */ html.grc1-blue #wrapper .fa, html.grc1-blue #wrapper .fas, html.grc1-blue #wrapper .far { color: inherit; } /* DataTable specific: sorted columns */ html.grc1-blue #wrapper table.dataTable thead > tr > th.sorting_asc, html.grc1-blue #wrapper table.dataTable thead > tr > th.sorting_desc { color: #3a5070 !important; background: #c8d4e4 !important; } /* Source rows dentro do collector */ html.grc1-blue #wrapper .source-row div { color: var(--grc1-content-text, #3a5070); } html.grc1-blue #wrapper .source-row div[style*="font-weight:600"] { color: var(--grc1-content-text, #3a5070) !important; } /* JS-rendered content (AJAX tables, event lists) — escuro */ html.grc1-blue #wrapper .source-events-panel div, html.grc1-blue #wrapper .source-events-panel span { color: var(--grc1-content-text, #3a5070); } /* ═══════════════════════════════════════════════════════════════════════ Navy fix — telas "Como funciona" e cards com cor hardcoded ═══════════════════════════════════════════════════════════════════════ Cards e callouts dos modulos grc1_tools (settings, momentos, banners, etc.) usam inline-style com cores claras (#f9fafb, #f3f4f6, #fef3c7). Em Navy o texto default (--grc1-text) ja vira escuro dentro de #wrapper, mas o background hardcoded nao casa com a paleta navy. Esses overrides aplicam a paleta correta sem precisar editar cada inline-style. */ /* Help modal — caixa amarela "Dica" + textos do guia */ html.grc1-blue #grc1-help-modal-body, html.grc1-blue #grc1-help-modal-body p, html.grc1-blue #grc1-help-modal-body li, html.grc1-blue #grc1-help-modal-body td, html.grc1-blue #grc1-help-modal-body strong, html.grc1-blue #grc1-help-modal-body h6 { color: var(--grc1-content-text, #3a5070) !important; } html.grc1-blue #grc1-help-modal-body .grc1-help-oper-warn, html.grc1-blue #grc1-help-modal-body .grc1-help-oper-note, html.grc1-blue #grc1-help-modal-body .grc1-help-global-note { color: var(--grc1-content-text, #3a5070) !important; border-color: var(--grc1-border, #c8d4e4) !important; } html.grc1-blue #grc1-help-modal-body .grc1-help-oper-warn { background: #fff5e1 !important; /* amber 14% sobre branco */ } html.grc1-blue #grc1-help-modal-body .grc1-help-global-note, html.grc1-blue #grc1-help-modal-body .grc1-help-oper-note { background: var(--grc1-panel2, #edf1f8) !important; } html.grc1-blue #grc1-help-modal-body code { background: var(--grc1-panel2, #edf1f8) !important; color: var(--grc1-accent, #2563eb) !important; border-color: var(--grc1-border, #c8d4e4) !important; } /* Cards de configuracao com background hardcoded — re-pinta com paleta navy */ html.grc1-blue #wrapper [style*="background:#f9fafb"], html.grc1-blue #wrapper [style*="background: #f9fafb"], html.grc1-blue #wrapper [style*="background:#f3f4f6"], html.grc1-blue #wrapper [style*="background: #f3f4f6"], html.grc1-blue #wrapper [style*="background:#f5f5f5"], html.grc1-blue #wrapper [style*="background:#f8fafc"], html.grc1-blue #wrapper [style*="background:#fafafa"], html.grc1-blue #wrapper [style*="background:#eef0ff"], html.grc1-blue #wrapper [style*="background:#eef2ff"], html.grc1-blue #wrapper [style*="background:#f5f3ff"] { background: var(--grc1-panel2, #edf1f8) !important; color: var(--grc1-content-text, #3a5070) !important; } html.grc1-blue #wrapper [style*="border:1px solid #e5e7eb"], html.grc1-blue #wrapper [style*="border: 1px solid #e5e7eb"], html.grc1-blue #wrapper [style*="border:1px solid #ddd"], html.grc1-blue #wrapper [style*="border: 1px solid #ddd"], html.grc1-blue #wrapper [style*="border:1px solid #eee"] { border-color: var(--grc1-border, #c8d4e4) !important; } /* Caixa amarela hardcoded no proprio body da view (nao dentro do modal) */ html.grc1-blue #wrapper [style*="background:#fef3c7"], html.grc1-blue #wrapper [style*="background: #fef3c7"] { background: #fff5e1 !important; color: var(--grc1-content-text, #3a5070) !important; border: 1px solid #f59e0b33 !important; }