/* ═══════════════════════════════════════════════════════════ AssureQC — Theme System (Dark / Light) Toggle via class "light" on element ═══════════════════════════════════════════════════════════ */ /* ── Base reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; } /* Animations */ @keyframes slideIn { from { transform: translateX(100px); opacity: 0 } to { transform: translateX(0); opacity: 1 } } @keyframes fadeOut { to { opacity: 0; transform: translateX(20px) } } @keyframes spin { to { transform: rotate(360deg) } } .animate-spin { animation: spin 1s linear infinite; } /* Chart container constraints */ canvas { max-width: 100%; } /* Tables */ table { border-collapse: collapse; width: 100%; } th { white-space: nowrap; } td { white-space: nowrap; } /* Responsive overflow */ .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ═══════════════════════════════════════════════════════════ CSS VARIABLES — Dark (default) / Light ═══════════════════════════════════════════════════════════ */ /* ── Dark theme (default) ────────────────────────────────── */ :root { --bg-app: #0a0f1a; --bg-sidebar: #0f172a; --bg-header: rgba(15,23,42,0.92); --bg-card: rgba(30,41,59,0.6); --bg-card-solid: #1e293b; --bg-input: #1e293b; --bg-input-hover: #2d3f55; --bg-hover: #1e293b; --bg-row-hover: rgba(30,41,59,0.6); --bg-badge: #1e293b; --bg-modal: #1e293b; --bg-tooltip: #1e293b; --bg-tab-active: #1e293b; --bg-tab: transparent; --bg-kpi: rgba(30,41,59,0.6); --bg-table-head: #0f172a; --bg-table-row: transparent; --bg-table-alt: rgba(15,23,42,0.4); --bg-progress: #1e293b; --border: rgba(51,65,85,0.5); --border-strong: #334155; --border-input: #475569; --border-focus: #3b82f6; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-disabled: #475569; --text-inverse: #0f172a; --accent-blue: #3b82f6; --accent-blue-bg: rgba(59,130,246,0.15); --accent-green: #22c55e; --accent-yellow: #f59e0b; --accent-red: #ef4444; --accent-purple: #a78bfa; --accent-orange: #fb923c; --accent-teal: #34d399; --badge-pass-bg: rgba(34,197,94,0.12); --badge-pass-text: #4ade80; --badge-pass-border: rgba(34,197,94,0.3); --badge-warn-bg: rgba(245,158,11,0.12); --badge-warn-text: #fbbf24; --badge-warn-border: rgba(245,158,11,0.3); --badge-fail-bg: rgba(239,68,68,0.12); --badge-fail-text: #f87171; --badge-fail-border: rgba(239,68,68,0.3); --badge-pending-bg: rgba(100,116,139,0.15); --badge-pending-text: #94a3b8; --badge-pending-border: rgba(100,116,139,0.3); --chart-grid: rgba(30,41,59,0.8); --chart-tick: #64748b; --chart-tooltip-bg: #1e293b; --chart-tooltip-border: #334155; --chart-tooltip-title: #e2e8f0; --chart-tooltip-body: #94a3b8; --chart-legend: #94a3b8; --scrollbar-track: #0f172a; --scrollbar-thumb: #334155; --scrollbar-thumb-hover: #475569; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 24px rgba(0,0,0,0.6); } /* ── Light theme ─────────────────────────────────────────── */ html.light { --bg-app: #f0f4f8; --bg-sidebar: #1e293b; --bg-header: rgba(255,255,255,0.97); --bg-card: rgba(255,255,255,0.92); --bg-card-solid: #ffffff; --bg-input: #ffffff; --bg-input-hover: #f1f5f9; --bg-hover: #f1f5f9; --bg-row-hover: rgba(241,245,249,0.8); --bg-badge: #f1f5f9; --bg-modal: #ffffff; --bg-tooltip: #1e293b; --bg-tab-active: #ffffff; --bg-tab: transparent; --bg-kpi: rgba(255,255,255,0.92); --bg-table-head: #f8fafc; --bg-table-row: transparent; --bg-table-alt: rgba(248,250,252,0.8); --bg-progress: #e2e8f0; --border: rgba(203,213,225,0.8); --border-strong: #cbd5e1; --border-input: #cbd5e1; --border-focus: #3b82f6; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-disabled: #cbd5e1; --text-inverse: #f1f5f9; --accent-blue: #2563eb; --accent-blue-bg: rgba(37,99,235,0.1); --accent-green: #16a34a; --accent-yellow: #d97706; --accent-red: #dc2626; --accent-purple: #7c3aed; --accent-orange: #ea580c; --accent-teal: #059669; --badge-pass-bg: rgba(22,163,74,0.1); --badge-pass-text: #15803d; --badge-pass-border: rgba(22,163,74,0.3); --badge-warn-bg: rgba(217,119,6,0.1); --badge-warn-text: #b45309; --badge-warn-border: rgba(217,119,6,0.3); --badge-fail-bg: rgba(220,38,38,0.1); --badge-fail-text: #b91c1c; --badge-fail-border: rgba(220,38,38,0.3); --badge-pending-bg: rgba(148,163,184,0.15); --badge-pending-text: #64748b; --badge-pending-border: rgba(148,163,184,0.3); --chart-grid: rgba(226,232,240,0.8); --chart-tick: #94a3b8; --chart-tooltip-bg: #1e293b; --chart-tooltip-border: #334155; --chart-tooltip-title: #e2e8f0; --chart-tooltip-body: #94a3b8; --chart-legend: #475569; --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); } /* ═══════════════════════════════════════════════════════════ ESTRUTURA PRINCIPAL ═══════════════════════════════════════════════════════════ */ html, body { background: var(--bg-app); color: var(--text-primary); } /* App shell */ .flex.h-screen, [class*="bg-slate-950"], .bg-slate-950 { background: var(--bg-app) !important; } #page-content { background: var(--bg-app) !important; color: var(--text-primary); } /* ── Sidebar ─────────────────────────────────────────────── */ #app-sidebar { background: #0f172a !important; border-right: 1px solid rgba(51,65,85,0.5) !important; } /* Sidebar permanece escuro mesmo no tema claro (contraste intencional) */ html.light #app-sidebar { background: #1e293b !important; } html.light #app-sidebar .nav-item { color: #94a3b8 !important; } html.light #app-sidebar .nav-item:hover { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; } html.light #app-sidebar .nav-item.active { color: #ffffff !important; background: rgba(59,130,246,0.25) !important; } html.light #sidebar-logo-wrap { border-color: rgba(255,255,255,0.1) !important; } html.light #app-sidebar .p-3 { border-color: rgba(255,255,255,0.1) !important; } /* Nav active state */ .nav-item.active { background: rgba(59,130,246,0.2) !important; color: #ffffff !important; } .nav-item.active i { color: #93c5fd !important; } /* ── Header ──────────────────────────────────────────────── */ header, .bg-slate-900\/80, [id="ls-topbar"] { background: var(--bg-header) !important; border-bottom: 1px solid var(--border) !important; } html.light header { box-shadow: var(--shadow-sm); } #page-title { color: var(--text-primary) !important; } /* ═══════════════════════════════════════════════════════════ INPUTS & SELECTS ═══════════════════════════════════════════════════════════ */ select, input[type="text"], input[type="date"], input[type="email"], input[type="password"], input[type="number"], textarea, .bg-slate-800, select.bg-slate-800, input.bg-slate-800 { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; } select:focus, input:focus { border-color: var(--border-focus) !important; outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); } select option { background: var(--bg-card-solid); color: var(--text-primary); } .aqc-select { background: var(--bg-input) !important; border: 1px solid var(--border-input) !important; color: var(--text-primary) !important; font-size: 12px; border-radius: 6px; padding: 4px 8px; } .aqc-select:focus { border-color: var(--border-focus) !important; outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); } .aqc-select option { background: var(--bg-card-solid); color: var(--text-primary); } .aqc-btn-icon { display: inline-flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-secondary); font-size: 12px; border-radius: 6px; padding: 4px 8px; cursor: pointer; } .aqc-btn-icon:hover { color: var(--text-primary); border-color: var(--border-focus); background: var(--bg-hover); } /* ═══════════════════════════════════════════════════════════ CARDS / PAINÉIS ═══════════════════════════════════════════════════════════ */ .bg-slate-800\/60, [class*="bg-slate-8"] { background: var(--bg-card) !important; border-color: var(--border) !important; } .bg-slate-900, [class*="bg-slate-9"] { background: var(--bg-card-solid) !important; } .chart-panel { background: var(--bg-card) !important; border-color: var(--border) !important; } .chart-panel-title { color: var(--text-primary) !important; } .kpi-card { background: var(--bg-kpi) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm); } .kpi-card-label { color: var(--text-secondary) !important; } .kpi-card-value { color: var(--text-primary) !important; } /* Light mode: sobrescrever bg-slate-* com variáveis */ html.light .bg-slate-800\/60, html.light .kpi-card, html.light .chart-panel, html.light [class*="bg-slate-8"] { background: rgba(255,255,255,0.92) !important; box-shadow: var(--shadow-sm); } html.light .bg-slate-900\/50, html.light [class*="bg-slate-9"] { background: #f8fafc !important; } html.light .bg-slate-950, html.light [class*="bg-slate-950"], html.light .flex.h-screen { background: var(--bg-app) !important; } /* ═══════════════════════════════════════════════════════════ TEXTOS ═══════════════════════════════════════════════════════════ */ .text-white, .text-slate-100, .text-slate-200 { color: var(--text-primary) !important; } .text-slate-300, .text-slate-400 { color: var(--text-secondary) !important; } .text-slate-500, .text-slate-600 { color: var(--text-muted) !important; } /* No modo claro, textos fora da sidebar ficam escuros */ html.light .text-white { color: #0f172a !important; } html.light .text-slate-200, html.light .text-slate-300 { color: #334155 !important; } html.light .text-slate-400 { color: #475569 !important; } html.light .text-slate-500, html.light .text-slate-600 { color: #64748b !important; } /* EXCEÇÃO: sidebar sempre escura — textos sempre brancos/claros */ html.light #app-sidebar .text-white, html.light #app-sidebar .text-slate-100, html.light #app-sidebar .text-slate-200, html.light #app-sidebar .text-slate-300 { color: #ffffff !important; } html.light #app-sidebar .text-slate-400 { color: #94a3b8 !important; } html.light #app-sidebar .text-slate-500, html.light #app-sidebar .text-slate-600 { color: #64748b !important; } html.light #app-sidebar .nav-item { color: #94a3b8 !important; } html.light #app-sidebar .nav-item:hover { color: #ffffff !important; } html.light #app-sidebar .nav-item.active { color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════ BORDAS ═══════════════════════════════════════════════════════════ */ .border-slate-700, .border-slate-700\/50, .border-slate-600 { border-color: var(--border) !important; } .divide-slate-700 > * + * { border-color: var(--border) !important; } html.light .border-slate-700\/50, html.light .border-slate-700, html.light .border-slate-600 { border-color: #e2e8f0 !important; } /* ═══════════════════════════════════════════════════════════ TABELAS ═══════════════════════════════════════════════════════════ */ table { color: var(--text-primary); } thead tr, .bg-slate-900\/50 { background: var(--bg-table-head) !important; } thead th { color: var(--text-secondary) !important; border-color: var(--border) !important; background: var(--bg-table-head) !important; } tbody tr { border-color: var(--border) !important; } tbody tr:hover { background: var(--bg-row-hover) !important; } tbody tr:nth-child(even) { background: var(--bg-table-alt); } td { color: var(--text-primary) !important; border-color: var(--border) !important; } /* ═══════════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════════ */ .tab-bar button { color: var(--text-muted) !important; border-color: var(--border) !important; background: var(--bg-tab) !important; } .tab-bar button:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; } .tab-bar button.active { color: var(--accent-blue) !important; background: var(--bg-tab-active) !important; border-color: var(--accent-blue) !important; } html.light .tab-bar button.active { border-color: var(--accent-blue) !important; color: var(--accent-blue) !important; font-weight: 600; } /* ═══════════════════════════════════════════════════════════ BADGES STATUS (PASS / WARN / FAIL) ═══════════════════════════════════════════════════════════ */ .bg-green-100, .status-pass, [class*="bg-green-1"] { background: var(--badge-pass-bg) !important; color: var(--badge-pass-text) !important; border-color: var(--badge-pass-border) !important; } .bg-yellow-100, .status-warn, [class*="bg-yellow-1"] { background: var(--badge-warn-bg) !important; color: var(--badge-warn-text) !important; border-color: var(--badge-warn-border) !important; } .bg-red-100, .status-fail, [class*="bg-red-1"] { background: var(--badge-fail-bg) !important; color: var(--badge-fail-text) !important; border-color: var(--badge-fail-border) !important; } .bg-gray-100, .status-pending { background: var(--badge-pending-bg) !important; color: var(--badge-pending-text) !important; border-color: var(--badge-pending-border) !important; } /* ═══════════════════════════════════════════════════════════ PROGRESS BARS ═══════════════════════════════════════════════════════════ */ .bg-slate-700, [class*="bg-slate-7"] { background: var(--bg-progress) !important; } /* ═══════════════════════════════════════════════════════════ MODAIS ═══════════════════════════════════════════════════════════ */ #rna-modal-content, .modal-content-inner, [id$="-modal"] .modal-inner, .modal-box { background: var(--bg-modal) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ═══════════════════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ═══════════════════════════════════════════════════════════ BOTÃO TOGGLE DE TEMA ═══════════════════════════════════════════════════════════ */ #theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; } #theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-blue); } html.light #theme-toggle { background: #f1f5f9; border-color: #cbd5e1; color: #d97706; } /* ═══════════════════════════════════════════════════════════ LIGHT MODE — ALERTAS / OFFLINE BAR ═══════════════════════════════════════════════════════════ */ html.light .offline-bar { background: #fef3c7 !important; border-color: #f59e0b !important; color: #78350f !important; } /* ═══════════════════════════════════════════════════════════ TRANSIÇÕES SUAVES AO TROCAR TEMA ═══════════════════════════════════════════════════════════ */ .kpi-card, .chart-panel, #app-sidebar, header, #page-content, #theme-toggle, .nav-item, select, input, td, th { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } /* Não animar canvas nem elementos com animação própria */ canvas, .animate-spin, .fa-spin, [class*="animate-"] { transition: none !important; } /* ═══════════════════════════════════════════════════════════ MODO CLARO — Adaptação de cores semânticas hardcoded Intercepta inline styles via atributo [style*="color:#..."] ═══════════════════════════════════════════════════════════ */ /* ── Verde neon → verde sólido ───────────────────────────── */ html.light [style*="color:#4ade80"] { color: #15803d !important; } html.light [style*="color:#22c55e"] { color: #166534 !important; } html.light [style*="color:#34d399"] { color: #059669 !important; } html.light [style*="color:#86efac"] { color: #15803d !important; } /* ── Vermelho neon → vermelho sólido ─────────────────────── */ html.light [style*="color:#f87171"] { color: #dc2626 !important; } html.light [style*="color:#ef4444"] { color: #b91c1c !important; } html.light [style*="color:#fca5a5"] { color: #b91c1c !important; } /* ── Amarelo/âmbar neon → amarelo escuro ─────────────────── */ html.light [style*="color:#fbbf24"] { color: #92400e !important; } html.light [style*="color:#f59e0b"] { color: #78350f !important; } html.light [style*="color:#fde68a"] { color: #78350f !important; } html.light [style*="color:#fef08a"] { color: #78350f !important; } /* ── Laranja neon → laranja escuro ───────────────────────── */ html.light [style*="color:#fb923c"] { color: #c2410c !important; } html.light [style*="color:#f97316"] { color: #9a3412 !important; } html.light [style*="color:#fed7aa"] { color: #9a3412 !important; } html.light [style*="color:#fdba74"] { color: #c2410c !important; } /* ── Azul neon → azul escuro ─────────────────────────────── */ html.light [style*="color:#60a5fa"] { color: #1d4ed8 !important; } html.light [style*="color:#93c5fd"] { color: #1e40af !important; } html.light [style*="color:#3b82f6"] { color: #1d4ed8 !important; } html.light [style*="color:#60a5fa44"] { color: #2563eb !important; } /* ── Roxo/lilás neon → roxo escuro ───────────────────────── */ html.light [style*="color:#c084fc"] { color: #7c3aed !important; } html.light [style*="color:#a78bfa"] { color: #6d28d9 !important; } html.light [style*="color:#c4b5fd"] { color: #5b21b6 !important; } html.light [style*="color:#818cf8"] { color: #3730a3 !important; } /* ── Ciano/teal neon → teal escuro ───────────────────────── */ html.light [style*="color:#06b6d4"] { color: #0e7490 !important; } html.light [style*="color:#22d3ee"] { color: #0e7490 !important; } /* ── Rosa → rosa escuro ──────────────────────────────────── */ html.light [style*="color:#ec4899"] { color: #be185d !important; } html.light [style*="color:#f472b6"] { color: #9d174d !important; } /* ── Branco puro em conteúdo → texto escuro ──────────────── */ html.light #page-content [style*="color:rgba(255,255,255"] { color: var(--text-secondary) !important; } html.light #page-content [style*="color:#fff"] { color: var(--text-primary) !important; } html.light #page-content [style*="color:#ffffff"] { color: var(--text-primary) !important; } html.light #page-content [style*="color:#e2e8f0"] { color: var(--text-secondary) !important; } html.light #page-content [style*="color:#f1f5f9"] { color: var(--text-secondary) !important; } html.light #page-content [style*="color:#cbd5e1"] { color: var(--text-muted) !important; } /* ── Fundos de cards/painéis inline → usar variáveis ─────── */ html.light [style*="background:#1e293b"], html.light [style*="background:#0f172a"], html.light [style*="background:#0a0f1a"], html.light [style*="background:#0a1120"] { background: var(--bg-card) !important; border-color: var(--border) !important; } html.light [style*="background:rgba(30,41,59"] { background: var(--bg-card) !important; } html.light [style*="background:rgba(15,23,42"] { background: var(--bg-card-solid) !important; } /* ── Fundos de alertas inline — ajustar opacidade ───────── */ html.light [style*="background:rgba(245,158,11,0.18)"] { background: rgba(180,83,9,0.08) !important; } html.light [style*="background:rgba(249,115,22,0.18)"] { background: rgba(194,65,12,0.08) !important; } html.light [style*="background:rgba(234,88,12,0.30)"] { background: rgba(194,65,12,0.1) !important; } html.light [style*="background:rgba(239,68,68,0.08)"] { background: rgba(220,38,38,0.06) !important; } html.light [style*="background:rgba(239,68,68,0.1)"] { background: rgba(220,38,38,0.07) !important; } html.light [style*="background:rgba(34,197,94,0.08)"] { background: rgba(22,163,74,0.07) !important; } html.light [style*="background:rgba(34,197,94,0.05)"] { background: rgba(22,163,74,0.05) !important; } html.light [style*="background:rgba(59,130,246,.15)"] { background: rgba(37,99,235,0.1) !important; } /* ── Bordas inline hardcoded ─────────────────────────────── */ html.light [style*="border:1px solid rgba(245,158,11"] { border-color: rgba(180,83,9,0.4) !important; } html.light [style*="border:2px solid rgba(251,146,60"] { border-color: rgba(194,65,12,0.5) !important; } html.light [style*="border:1px solid rgba(239,68,68"] { border-color: rgba(220,38,38,0.4) !important; } html.light [style*="border:1px solid rgba(34,197,94"] { border-color: rgba(22,163,74,0.4) !important; } html.light [style*="border-bottom:1px solid #0f172a"] { border-color: var(--border) !important; } html.light [style*="border-bottom:1px solid #1e293b"] { border-color: var(--border) !important; } html.light [style*="border:1px solid #334155"] { border-color: var(--border-strong) !important; } html.light [style*="border:1px solid #1e293b"] { border-color: var(--border) !important; } /* ── Tabela de cobertura — cabeçalho escuro hardcoded ─────── */ html.light th[style*="background:#0a1120"], html.light th[style*="background:#0f172a"] { background: var(--bg-table-head) !important; color: var(--text-secondary) !important; } /* ── Box-shadow escuro → mais suave ──────────────────────── */ html.light [style*="box-shadow:0 4px 12px rgba(0,0,0,0.4)"] { box-shadow: var(--shadow-md) !important; } html.light [style*="box-shadow:0 2px 8px rgba(0,0,0,.5)"] { box-shadow: var(--shadow-sm) !important; } /* ── Textos de PASS/WARN/FAIL em th (cabeçalho tabela) ───── */ html.light th[style*="color:#4ade80"] { color: #166534 !important; } html.light th[style*="color:#fbbf24"] { color: #92400e !important; } html.light th[style*="color:#f87171"] { color: #dc2626 !important; } html.light th[style*="color:#22c55e"] { color: #166534 !important; } html.light th[style*="color:#f59e0b"] { color: #78350f !important; } html.light th[style*="color:#ef4444"] { color: #b91c1c !important; }