/** * ============================================================================= * THEME SYSTEM - Presets de Cores Persistentes * ============================================================================= * * 4 presets visuais via atributo data-theme no . * Sem data-theme = visual padrão (atual). 100% reversível. * * Presets: indigo, ciano, light, noturno * Rollback: remover este CSS + theme.js = volta tudo ao normal * * Cores base Unifique: * Indigo: #212492 (Pantone 2746 C) * Blue: #00A2FF (Pantone 299 C) * Cyan: #3FCFD5 (Pantone 319 C) * Yellow: #F5EC5A (Pantone 101 C) */ /* ============================================================================= GLOBAL :root OVERRIDES — Afeta botões, links, badges em todo o site ============================================================================= */ [data-theme="indigo"] { --primary: #00A2FF; --primary-dark: #0080cc; --primary-light: #33b5ff; } [data-theme="ciano"] { --primary: #1aabb2; --primary-dark: #148e94; --primary-light: #3FCFD5; } [data-theme="light"] { --primary: #212492; --primary-dark: #181b6e; --primary-light: #3538b2; } [data-theme="noturno"] { color-scheme: dark; --primary: #00A2FF; --primary-dark: #0080cc; --primary-light: #33b5ff; /* Fundos escuros suavizados (não tão preto quanto GitHub dark) */ --bg-main: #131820; --bg-card: #1a2030; --bg-hover: #222a3a; --bg-primary: #131820; --bg-secondary: #1a2030; --bg-tertiary: #222a3a; /* Texto claro */ --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; /* Bordas e sombras sutis */ --border-color: #2d3748; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); /* Cores de status */ --secondary: #8b949e; --success: #3fb950; --danger: #f85149; --warning: #d29922; --info: #00A2FF; } /* ============================================================================= INDIGO THEME — Sidebar escura indigo + accents azul (#00A2FF) ============================================================================= */ /* --- Admin Sidebar (.sidebar de modern.css) --- */ [data-theme="indigo"] .sidebar { background: linear-gradient(180deg, #212492 0%, #1a1d6e 100%); border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 2px 0 12px rgba(33, 36, 146, 0.3); } [data-theme="indigo"] .sidebar-logo { background: linear-gradient(135deg, #181b66 0%, #121452 100%); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="indigo"] .sidebar-nav-section-title { color: rgba(255, 255, 255, 0.5); } [data-theme="indigo"] .sidebar-nav-item { color: rgba(255, 255, 255, 0.85); } [data-theme="indigo"] .sidebar-nav-item:hover { background: rgba(255, 255, 255, 0.1); color: white; } [data-theme="indigo"] .sidebar-nav-item.active { box-shadow: 0 4px 12px rgba(0, 162, 255, 0.3); } [data-theme="indigo"] .sidebar-nav-item-icon svg { stroke: rgba(255, 255, 255, 0.6); } [data-theme="indigo"] .sidebar-nav-item:hover .sidebar-nav-item-icon svg { stroke: #00A2FF; } /* Sidebar minimizada: hover com fundo sólido visível */ [data-theme="indigo"] .sidebar-minimized .sidebar-nav-item:hover { background: linear-gradient(135deg, #2d30a8 0%, #212492 100%); color: white; box-shadow: 0 4px 16px rgba(33, 36, 146, 0.4); } [data-theme="indigo"] .sidebar-minimized .sidebar-nav-item:hover .sidebar-nav-item-icon svg { stroke: #00A2FF; } [data-theme="indigo"] .sidebar-minimized .sidebar-nav-item:hover .sidebar-nav-item-label { color: white; } [data-theme="indigo"] .sidebar-nav-dropdown-toggle { color: rgba(255, 255, 255, 0.85); } [data-theme="indigo"] .sidebar-nav-dropdown-toggle:hover { background: rgba(255, 255, 255, 0.1); } [data-theme="indigo"] .sidebar-nav-dropdown-toggle.active { background: rgba(255, 255, 255, 0.1); color: #00A2FF; } /* --- Tenant Sidebar (.tenant-sidebar de tenant.html/mosaico/timelapse) --- */ [data-theme="indigo"] .tenant-sidebar { background: linear-gradient(180deg, #212492 0%, #1a1d6e 100%); box-shadow: 4px 0 20px rgba(33, 36, 146, 0.4); } [data-theme="indigo"] .tenant-branding { background: none; border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="indigo"] .tenant-header { background: linear-gradient(135deg, rgba(0, 162, 255, 0.15) 0%, rgba(0, 162, 255, 0.05) 100%); } [data-theme="indigo"] .tenant-header-back:hover { background: rgba(0, 162, 255, 0.25); color: white; border-color: rgba(0, 162, 255, 0.5); } [data-theme="indigo"] .tenant-client-avatar { background: linear-gradient(135deg, #00A2FF 0%, #0080cc 100%); box-shadow: 0 4px 12px rgba(0, 162, 255, 0.3); } [data-theme="indigo"] .tenant-client-avatar::after { border-color: #1a1d6e; } [data-theme="indigo"] .tenant-nav-item.active { background: linear-gradient(135deg, #00A2FF 0%, #0080cc 100%); box-shadow: 0 4px 12px rgba(0, 162, 255, 0.4); } /* --- Botões topbar Indigo (preenchimento sólido) --- */ [data-theme="indigo"] .btn-topbar-secondary { background: #64748b; color: white; } [data-theme="indigo"] .btn-topbar-secondary:hover { background: #475569; } [data-theme="indigo"] .btn-topbar-danger { background: #ef4444; color: white; } [data-theme="indigo"] .btn-topbar-danger:hover { background: #dc2626; } /* ============================================================================= CIANO THEME — Sidebar teal escura + accents ciano (#3FCFD5) ============================================================================= */ /* --- Admin Sidebar --- */ [data-theme="ciano"] .sidebar { background: linear-gradient(180deg, #0a2e38 0%, #134e5e 100%); border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 2px 0 12px rgba(10, 46, 56, 0.3); } [data-theme="ciano"] .sidebar-logo { background: linear-gradient(135deg, #071f27 0%, #0a2a35 100%); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="ciano"] .sidebar-nav-section-title { color: rgba(255, 255, 255, 0.5); } [data-theme="ciano"] .sidebar-nav-item { color: rgba(255, 255, 255, 0.85); } [data-theme="ciano"] .sidebar-nav-item:hover { background: rgba(255, 255, 255, 0.1); color: white; } [data-theme="ciano"] .sidebar-nav-item.active { box-shadow: 0 4px 12px rgba(63, 207, 213, 0.3); } [data-theme="ciano"] .sidebar-nav-item-icon svg { stroke: rgba(255, 255, 255, 0.6); } [data-theme="ciano"] .sidebar-nav-item:hover .sidebar-nav-item-icon svg { stroke: #3FCFD5; } /* Sidebar minimizada: hover com fundo sólido visível */ [data-theme="ciano"] .sidebar-minimized .sidebar-nav-item:hover { background: linear-gradient(135deg, #185b6e 0%, #134e5e 100%); color: white; box-shadow: 0 4px 16px rgba(10, 46, 56, 0.4); } [data-theme="ciano"] .sidebar-minimized .sidebar-nav-item:hover .sidebar-nav-item-icon svg { stroke: #3FCFD5; } [data-theme="ciano"] .sidebar-minimized .sidebar-nav-item:hover .sidebar-nav-item-label { color: white; } [data-theme="ciano"] .sidebar-nav-dropdown-toggle { color: rgba(255, 255, 255, 0.85); } [data-theme="ciano"] .sidebar-nav-dropdown-toggle:hover { background: rgba(255, 255, 255, 0.1); } [data-theme="ciano"] .sidebar-nav-dropdown-toggle.active { background: rgba(255, 255, 255, 0.1); color: #3FCFD5; } /* --- Tenant Sidebar --- */ [data-theme="ciano"] .tenant-sidebar { background: linear-gradient(180deg, #0a2e38 0%, #134e5e 100%); box-shadow: 4px 0 20px rgba(10, 46, 56, 0.4); } [data-theme="ciano"] .tenant-branding { background: none; border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="ciano"] .tenant-header { background: linear-gradient(135deg, rgba(63, 207, 213, 0.15) 0%, rgba(63, 207, 213, 0.05) 100%); } [data-theme="ciano"] .tenant-header-back:hover { background: rgba(63, 207, 213, 0.25); color: white; border-color: rgba(63, 207, 213, 0.5); } [data-theme="ciano"] .tenant-client-avatar { background: linear-gradient(135deg, #3FCFD5 0%, #2eb8be 100%); box-shadow: 0 4px 12px rgba(63, 207, 213, 0.3); } [data-theme="ciano"] .tenant-client-avatar::after { border-color: #134e5e; } [data-theme="ciano"] .tenant-nav-item.active { background: linear-gradient(135deg, #3FCFD5 0%, #2eb8be 100%); box-shadow: 0 4px 12px rgba(63, 207, 213, 0.4); } /* --- Botões topbar Ciano (preenchimento sólido) --- */ [data-theme="ciano"] .btn-topbar-secondary { background: #64748b; color: white; } [data-theme="ciano"] .btn-topbar-secondary:hover { background: #475569; } [data-theme="ciano"] .btn-topbar-danger { background: #ef4444; color: white; } [data-theme="ciano"] .btn-topbar-danger:hover { background: #dc2626; } /* ============================================================================= LIGHT THEME — Sidebar clara + accents indigo (#212492) ============================================================================= */ /* --- Admin Sidebar (já é branca, só ajustar sombra do active) --- */ [data-theme="light"] .sidebar { box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06); } [data-theme="light"] .sidebar-logo { background: linear-gradient(135deg, #212492 0%, #181b6e 100%); } [data-theme="light"] .sidebar-nav-item.active { box-shadow: 0 4px 12px rgba(33, 36, 146, 0.3); } /* --- Tenant Sidebar (muda de escura para clara) --- */ [data-theme="light"] .tenant-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08); } [data-theme="light"] .tenant-branding { background: linear-gradient(135deg, #212492 0%, #181b6e 100%); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="light"] .tenant-brand-name { color: #e5e7eb; } [data-theme="light"] .tenant-brand-tag { color: rgba(255, 255, 255, 0.7); } [data-theme="light"] .tenant-header { background: linear-gradient(135deg, rgba(33, 36, 146, 0.08) 0%, rgba(33, 36, 146, 0.03) 100%); border-bottom-color: #e2e8f0; } [data-theme="light"] .tenant-header-back { background: rgba(0, 0, 0, 0.04); border-color: #e2e8f0; color: #64748b; } [data-theme="light"] .tenant-header-back:hover { background: rgba(33, 36, 146, 0.12); color: #212492; border-color: rgba(33, 36, 146, 0.3); } [data-theme="light"] .tenant-client-avatar { background: linear-gradient(135deg, #212492 0%, #181b6e 100%); box-shadow: 0 4px 12px rgba(33, 36, 146, 0.3); } [data-theme="light"] .tenant-client-avatar::after { border-color: #f1f5f9; } [data-theme="light"] .tenant-client-details h2 { color: #1e293b; } [data-theme="light"] .tenant-client-details p { color: #94a3b8; } [data-theme="light"] .tenant-nav-section-title { color: #64748b; } [data-theme="light"] .tenant-nav-section-title::after { background: #e2e8f0; } [data-theme="light"] .tenant-nav-section-title .section-icon svg { stroke: #64748b; } [data-theme="light"] .tenant-nav-item { color: #475569; } [data-theme="light"] .tenant-nav-item:hover { background: rgba(0, 0, 0, 0.05); color: #1e293b; } /* Sidebar minimizada: hover com fundo indigo visível */ [data-theme="light"] .sidebar-minimized .tenant-nav-item:hover { background: linear-gradient(135deg, #212492 0%, #181b6e 100%); color: white; box-shadow: 0 4px 16px rgba(33, 36, 146, 0.3); } [data-theme="light"] .sidebar-minimized .tenant-nav-item:hover .tenant-nav-item-icon svg { stroke: white; } [data-theme="light"] .sidebar-minimized .tenant-nav-item:hover .tenant-nav-item-label { color: white; } [data-theme="light"] .tenant-nav-item.active { background: linear-gradient(135deg, #212492 0%, #181b6e 100%); color: white; box-shadow: 0 4px 12px rgba(33, 36, 146, 0.3); } [data-theme="light"] .tenant-nav-item-icon svg { stroke: #475569; } [data-theme="light"] .tenant-nav-item:hover .tenant-nav-item-icon svg { stroke: #1e293b; } [data-theme="light"] .tenant-nav-item.active .tenant-nav-item-icon svg { stroke: white; } [data-theme="light"] .tenant-nav-item-badge { background: rgba(0, 0, 0, 0.08); color: #475569; } [data-theme="light"] .tenant-nav-item.active .tenant-nav-item-badge { background: rgba(255, 255, 255, 0.25); color: white; } [data-theme="light"] .tenant-stats { background: rgba(0, 0, 0, 0.03); border-top-color: #e2e8f0; } [data-theme="light"] .tenant-stat-item { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .tenant-stat-value { color: #1e293b; } [data-theme="light"] .tenant-stat-label { color: #94a3b8; } /* --- Botões topbar Light (azul indigo sobre topbar branca) --- */ [data-theme="light"] .tenant-topbar { background: #ffffff; border-bottom: 1px solid #e2e8f0; } [data-theme="light"] .btn-topbar-secondary { background: #64748b; color: white; } [data-theme="light"] .btn-topbar-secondary:hover { background: #475569; } [data-theme="light"] .btn-topbar-danger { background: #ef4444; color: white; } [data-theme="light"] .btn-topbar-danger:hover { background: #dc2626; } /* ============================================================================= NOTURNO THEME — Fundo escuro total + accents azul (#00A2FF) Ideal para uso noturno, reduz cansaço visual ============================================================================= */ /* --- Admin Sidebar (escurece o fundo branco) --- */ [data-theme="noturno"] .sidebar { background: linear-gradient(180deg, #0c1018 0%, #131820 100%); border-right: 1px solid #2d3748; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5); } [data-theme="noturno"] .sidebar-logo { background: linear-gradient(135deg, #0e1230 0%, #131820 100%); border-bottom-color: #2d3748; } [data-theme="noturno"] .sidebar-nav-section-title { color: #6e7681; } [data-theme="noturno"] .sidebar-nav-item { color: #e6edf3; } [data-theme="noturno"] .sidebar-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: white; } [data-theme="noturno"] .sidebar-nav-item.active { box-shadow: 0 4px 12px rgba(0, 162, 255, 0.25); } [data-theme="noturno"] .sidebar-nav-item-icon svg { stroke: #8b949e; } [data-theme="noturno"] .sidebar-nav-item:hover .sidebar-nav-item-icon svg { stroke: #00A2FF; } [data-theme="noturno"] .sidebar-nav-dropdown-toggle { color: #e6edf3; } [data-theme="noturno"] .sidebar-nav-dropdown-toggle:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="noturno"] .sidebar-nav-dropdown-toggle.active { background: rgba(255, 255, 255, 0.06); color: #00A2FF; } /* --- Sidebar Version (adapta cor ao fundo de cada tema) --- */ /* Indigo: sidebar roxa escura → texto claro */ [data-theme="indigo"] .sidebar-version { color: rgba(255, 255, 255, 0.3); } /* Ciano: sidebar azul escura → texto claro */ [data-theme="ciano"] .sidebar-version { color: rgba(255, 255, 255, 0.3); } /* Light: sidebar branca → texto escuro */ [data-theme="light"] .sidebar-version { color: rgba(100, 116, 139, 0.6); } /* Light: tenant sidebar também branca → texto escuro */ [data-theme="light"] .tenant-sidebar .sidebar-version { color: rgba(100, 116, 139, 0.6); } /* Noturno: sidebar preta → texto claro */ [data-theme="noturno"] .sidebar-version { color: rgba(255, 255, 255, 0.25); } /* ============================================================================= SCROLLBAR — Ajustes por tema (admin .sidebar + tenant .tenant-nav + modais) ============================================================================= */ /* Indigo: sidebar roxa escura → scrollbar branco translúcido */ [data-theme="indigo"] .sidebar { scrollbar-color: rgba(255,255,255,0.15) transparent; } [data-theme="indigo"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); } [data-theme="indigo"] .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); } /* Ciano: sidebar teal escura → scrollbar branco translúcido */ [data-theme="ciano"] .sidebar { scrollbar-color: rgba(255,255,255,0.15) transparent; } [data-theme="ciano"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); } [data-theme="ciano"] .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); } /* Light: sidebar clara → scrollbar cinza discreto */ [data-theme="light"] .sidebar, [data-theme="light"] .modal-body, [data-theme="light"] .modal-content { scrollbar-color: rgba(100,116,139,0.25) transparent; } [data-theme="light"] .sidebar::-webkit-scrollbar-thumb, [data-theme="light"] .modal-body::-webkit-scrollbar-thumb, [data-theme="light"] .modal-content::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.25); } [data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover, [data-theme="light"] .modal-body::-webkit-scrollbar-thumb:hover, [data-theme="light"] .modal-content::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.4); } /* Light: tenant sidebar clara → scrollbar cinza */ [data-theme="light"] .tenant-nav { scrollbar-color: rgba(100,116,139,0.25) transparent; } [data-theme="light"] .tenant-nav::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.25); } [data-theme="light"] .tenant-nav::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.4); } /* Noturno: tudo escuro → scrollbar branco bem sutil */ [data-theme="noturno"] .sidebar, [data-theme="noturno"] .modal-body, [data-theme="noturno"] .modal-content { scrollbar-color: rgba(255,255,255,0.1) transparent; } [data-theme="noturno"] .sidebar::-webkit-scrollbar-thumb, [data-theme="noturno"] .modal-body::-webkit-scrollbar-thumb, [data-theme="noturno"] .modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } [data-theme="noturno"] .sidebar::-webkit-scrollbar-thumb:hover, [data-theme="noturno"] .modal-body::-webkit-scrollbar-thumb:hover, [data-theme="noturno"] .modal-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } /* Noturno: tenant sidebar escura → scrollbar branco sutil */ [data-theme="noturno"] .tenant-nav { scrollbar-color: rgba(255,255,255,0.1) transparent; } [data-theme="noturno"] .tenant-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } [data-theme="noturno"] .tenant-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } /* --- Tenant Sidebar (mantém escura, integra com fundo escuro) --- */ [data-theme="noturno"] .tenant-sidebar { background: linear-gradient(180deg, #0c1018 0%, #131820 100%); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); } [data-theme="noturno"] .tenant-branding { background: none; border-bottom-color: #2d3748; } [data-theme="noturno"] .tenant-brand-name { color: #e6edf3; } [data-theme="noturno"] .tenant-brand-tag { color: #6e7681; } [data-theme="noturno"] .tenant-header { background: linear-gradient(135deg, rgba(0, 162, 255, 0.1) 0%, rgba(0, 162, 255, 0.03) 100%); border-bottom-color: #2d3748; } [data-theme="noturno"] .tenant-header-back { background: rgba(255, 255, 255, 0.04); border-color: #2d3748; color: #8b949e; } [data-theme="noturno"] .tenant-header-back:hover { background: rgba(0, 162, 255, 0.15); color: #00A2FF; border-color: rgba(0, 162, 255, 0.4); } [data-theme="noturno"] .tenant-client-avatar { background: linear-gradient(135deg, #00A2FF 0%, #0080cc 100%); box-shadow: 0 4px 12px rgba(0, 162, 255, 0.25); } [data-theme="noturno"] .tenant-client-avatar::after { border-color: #131820; } [data-theme="noturno"] .tenant-client-details h2 { color: #e6edf3; } [data-theme="noturno"] .tenant-client-details p { color: #6e7681; } [data-theme="noturno"] .tenant-nav-section-title { color: #6e7681; } [data-theme="noturno"] .tenant-nav-section-title::after { background: #2d3748; } [data-theme="noturno"] .tenant-nav-section-title .section-icon svg { stroke: #6e7681; } [data-theme="noturno"] .tenant-nav-item { color: rgba(230, 237, 243, 0.85); } [data-theme="noturno"] .tenant-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #e6edf3; } /* Sidebar minimizada: hover com fundo visível */ [data-theme="noturno"] .sidebar-minimized .tenant-nav-item:hover { background: linear-gradient(135deg, #1a2030 0%, #222a3a 100%); color: #e6edf3; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } [data-theme="noturno"] .sidebar-minimized .tenant-nav-item:hover .tenant-nav-item-icon svg { stroke: #00A2FF; } [data-theme="noturno"] .tenant-nav-item.active { background: linear-gradient(135deg, #00A2FF 0%, #0080cc 100%); color: white; box-shadow: 0 4px 12px rgba(0, 162, 255, 0.3); } [data-theme="noturno"] .tenant-nav-item-icon svg { stroke: #8b949e; } [data-theme="noturno"] .tenant-nav-item:hover .tenant-nav-item-icon svg { stroke: #e6edf3; } [data-theme="noturno"] .tenant-nav-item.active .tenant-nav-item-icon svg { stroke: white; } [data-theme="noturno"] .tenant-nav-item-badge { background: rgba(255, 255, 255, 0.08); color: #8b949e; } [data-theme="noturno"] .tenant-nav-item.active .tenant-nav-item-badge { background: rgba(255, 255, 255, 0.2); color: white; } [data-theme="noturno"] .tenant-stats { background: rgba(0, 0, 0, 0.3); border-top-color: #2d3748; } [data-theme="noturno"] .tenant-stat-item { background: rgba(255, 255, 255, 0.04); } [data-theme="noturno"] .tenant-stat-value { color: #e6edf3; } [data-theme="noturno"] .tenant-stat-label { color: #6e7681; } /* --- Conteúdo: Topbar e área principal --- */ [data-theme="noturno"] .tenant-topbar { background: #1a2030; border-bottom-color: #2d3748; } [data-theme="noturno"] .tenant-content { background: #131820; } [data-theme="noturno"] .tenant-layout { background: #131820; } /* --- Conteúdo: Elementos com cores hardcoded --- */ [data-theme="noturno"] .btn-topbar-secondary { background: #3a4555; color: #e6edf3; } [data-theme="noturno"] .btn-topbar-secondary:hover { background: #4a5568; } [data-theme="noturno"] .btn-topbar-danger { background: #dc2626; color: white; } [data-theme="noturno"] .btn-topbar-danger:hover { background: #b91c1c; } /* --- Formulários e inputs --- */ [data-theme="noturno"] .form-control, [data-theme="noturno"] input[type="text"], [data-theme="noturno"] input[type="email"], [data-theme="noturno"] input[type="password"], [data-theme="noturno"] input[type="number"], [data-theme="noturno"] input[type="search"], [data-theme="noturno"] input[type="url"], [data-theme="noturno"] input[type="date"], [data-theme="noturno"] input[type="datetime-local"], [data-theme="noturno"] select, [data-theme="noturno"] textarea { background: #131820; color: #e6edf3; border-color: #2d3748; outline: none; } [data-theme="noturno"] select option { background: #1a2030; color: #e6edf3; } [data-theme="noturno"] .form-control:focus, [data-theme="noturno"] input:focus, [data-theme="noturno"] select:focus, [data-theme="noturno"] textarea:focus { border-color: #00A2FF; box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.15); outline: none; } [data-theme="noturno"] .form-control::placeholder, [data-theme="noturno"] input::placeholder, [data-theme="noturno"] textarea::placeholder { color: #6e7681; } /* --- Tabelas --- */ [data-theme="noturno"] table { border-color: #2d3748; } [data-theme="noturno"] th { background: #1a2030; color: #e6edf3; border-color: #2d3748; } [data-theme="noturno"] td { border-color: #2d3748; color: #e6edf3; } [data-theme="noturno"] tr:hover td { background: rgba(255, 255, 255, 0.04); } [data-theme="noturno"] tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); } /* --- Modais --- */ [data-theme="noturno"] .modal { background: rgba(0, 0, 0, 0.7); } [data-theme="noturno"] .modal-content { background: #1a2030; border: 1px solid #2d3748; } [data-theme="noturno"] .modal-header { border-bottom-color: #2d3748; } /* --- Cards genéricos --- */ [data-theme="noturno"] .stat-card-mini { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .card, [data-theme="noturno"] .plate-card { background: #1a2030; border-color: #2d3748; } /* --- Scrollbar escura (Webkit) --- */ [data-theme="noturno"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="noturno"] ::-webkit-scrollbar-track { background: #131820; } [data-theme="noturno"] ::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 4px; } [data-theme="noturno"] ::-webkit-scrollbar-thumb:hover { background: #484f58; } /* --- Admin layout --- */ [data-theme="noturno"] .app-layout { background: #131820; } [data-theme="noturno"] .main-content { background: #131820; } /* Top bar admin (classe .top-bar com hífen em modern.css) */ [data-theme="noturno"] .top-bar { background: #1a2030; border-bottom-color: #2d3748; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="noturno"] .top-bar-user { background: #222a3a; color: #e6edf3; } /* --- Topbar search wrapper (tenant) --- */ [data-theme="noturno"] .topbar-search-wrapper { background: #131820; border-color: #2d3748; } [data-theme="noturno"] .topbar-search-wrapper:focus-within { border-color: #00A2FF; background: #1a2030; } [data-theme="noturno"] .topbar-select { background: #131820; border-color: #2d3748; color: #e6edf3; } /* --- Page content e page header --- */ [data-theme="noturno"] .page-content { background: #131820; } [data-theme="noturno"] .page-title { color: #e6edf3; } [data-theme="noturno"] .page-subtitle { color: #8b949e; } /* --- Stat cards --- */ [data-theme="noturno"] .stat-card { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .stat-card-value { color: #e6edf3; } [data-theme="noturno"] .stat-card-label { color: #8b949e; } [data-theme="noturno"] .stat-card h3 { color: #8b949e; } [data-theme="noturno"] .stat-value { color: #00A2FF; } /* --- Search e filtros --- */ [data-theme="noturno"] .search-input { background: #131820; border-color: #2d3748; color: #e6edf3; } [data-theme="noturno"] .search-input:focus { border-color: #00A2FF; box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.15); } [data-theme="noturno"] .search-input::placeholder { color: #6e7681; } [data-theme="noturno"] .filter-select { background-color: #131820; border: 1px solid #2d3748; color: #e6edf3; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } [data-theme="noturno"] .filter-select:focus { border-color: #00A2FF; box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.15); outline: none; } [data-theme="noturno"] .filter-select option { background: #1a2030; color: #e6edf3; } /* --- Status badges --- */ [data-theme="noturno"] .status-badge.ok { background: rgba(63, 185, 80, 0.15); color: #3fb950; } [data-theme="noturno"] .status-badge.error { background: rgba(248, 81, 73, 0.15); color: #f85149; } [data-theme="noturno"] .status-badge.status-active { background: rgba(63, 185, 80, 0.15); color: #3fb950; } [data-theme="noturno"] .status-badge.status-inactive { background: rgba(139, 148, 158, 0.1); color: #8b949e; } /* --- AI badges --- */ [data-theme="noturno"] .ai-badge.active { background: rgba(63, 185, 80, 0.15); color: #3fb950; border-color: rgba(63, 185, 80, 0.3); } [data-theme="noturno"] .ai-badge.inactive { background: rgba(139, 148, 158, 0.1); color: #8b949e; border-color: #2d3748; } [data-theme="noturno"] .badge-rec { background: rgba(248, 81, 73, 0.15); color: #f85149; } /* --- Slug display --- */ [data-theme="noturno"] .slug-display { background: #222a3a; color: #8b949e; } /* --- Botões --- */ [data-theme="noturno"] .btn-secondary, [data-theme="noturno"] .btn.btn-secondary { background: #222a3a; color: #e6edf3; border-color: #2d3748; } [data-theme="noturno"] .btn-secondary:hover { background: #2a3345; } [data-theme="noturno"] .btn-outline { border-color: #2d3748; color: #8b949e; } [data-theme="noturno"] .btn-outline:hover { background: #222a3a; border-color: #484f58; color: #e6edf3; } /* --- Form section highlight (clients.html, etc) --- */ [data-theme="noturno"] .form-section-highlight { background: rgba(0, 162, 255, 0.08); border-color: #2d3748; } [data-theme="noturno"] .form-section-highlight .form-section-title { color: #00A2FF; border-bottom-color: #2d3748; } [data-theme="noturno"] .form-section-highlight .form-section-title svg { color: #00A2FF; } /* --- Sidebar minimizada hover (hardcoded #ffffff em modern.css) --- */ [data-theme="noturno"] .sidebar-minimized .sidebar-nav-item:hover { background: #222a3a; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } [data-theme="noturno"] .sidebar-minimized .sidebar-nav-item:hover .sidebar-nav-item-label { color: #e6edf3; } /* --- Links e texto --- */ /* :where() zera a especificidade do seletor de tema (fica 0-0-1), entao QUALQUER link com cor propria (botoes: .novidades-link, .wizard-link, .cl-btn-*, etc.) mantem sua cor sem precisar de lista manual de excecao. Links de texto puro (sem classe que define color) seguem azuis. Corrige "texto = cor do fundo" nos botoes-link do tema escuro (ex.: "Ir ate la" em Novidades). Audit 2026-06-11. */ :where([data-theme="noturno"]) a { color: #00A2FF; } :where([data-theme="noturno"]) a:hover { color: #33b5ff; } /* Preservar cor branca em links usados como botões (a.btn, a.cl-btn-access, etc.) A regra global "a { color: #00A2FF }" tem especificidade 0-1-1, que vence classes simples como .cl-btn-access (0-1-0). Estes overrides restauram color:white. */ [data-theme="noturno"] a.cl-btn-access, [data-theme="noturno"] a.btn, [data-theme="noturno"] a.btn-primary, [data-theme="noturno"] a.btn-success, [data-theme="noturno"] a.btn-danger, [data-theme="noturno"] a.btn-topbar, [data-theme="noturno"] a.btn-expand { color: white; } /* --- Empty state --- */ [data-theme="noturno"] .empty-state { color: #8b949e; } /* --- Pagination --- */ [data-theme="noturno"] .pagination button, [data-theme="noturno"] .pagination a { background: #1a2030; border-color: #2d3748; color: #e6edf3; } [data-theme="noturno"] .pagination button:hover, [data-theme="noturno"] .pagination a:hover { background: #222a3a; } /* --- Tooltip/dropdown menus --- */ [data-theme="noturno"] .dropdown-menu { background: #1a2030; border-color: #2d3748; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } [data-theme="noturno"] .dropdown-item { color: #e6edf3; } [data-theme="noturno"] .dropdown-item:hover { background: #222a3a; } /* --- Timeline (rastreamento) --- */ [data-theme="noturno"] .timeline-content { background: #1a2030; } /* --- Tab navigation --- */ [data-theme="noturno"] .tab-btn, [data-theme="noturno"] .tab-button { color: #8b949e; border-color: transparent; } [data-theme="noturno"] .tab-btn:hover, [data-theme="noturno"] .tab-button:hover { color: #e6edf3; } [data-theme="noturno"] .tab-btn.active, [data-theme="noturno"] .tab-button.active { color: #00A2FF; border-color: #00A2FF; } /* --- Table wrapper/container --- */ [data-theme="noturno"] .table-container, [data-theme="noturno"] .data-table-wrapper { background: #1a2030; border-color: #2d3748; } /* --- Alert/notification boxes --- */ [data-theme="noturno"] .alert, [data-theme="noturno"] .notification { background: #1a2030; border-color: #2d3748; color: #e6edf3; } /* --- Label e form-group --- */ [data-theme="noturno"] label { color: #e6edf3; } [data-theme="noturno"] .form-group label { color: #c9d1d9; } /* --- HR separadores --- */ [data-theme="noturno"] hr { border-color: #2d3748; } /* --- Select option (para dropdown nativo escuro) --- */ [data-theme="noturno"] option { background: #1a2030; color: #e6edf3; } /* --- Dashboard KPI cards (index.html) — ícones com fundo claro → escuro --- */ [data-theme="noturno"] .kpi-card.accent-green .kpi-icon { background: rgba(63, 185, 80, 0.15); color: #3fb950; } [data-theme="noturno"] .kpi-card.accent-red .kpi-icon { background: rgba(248, 81, 73, 0.15); color: #f85149; } [data-theme="noturno"] .kpi-card.accent-blue .kpi-icon { background: rgba(0, 162, 255, 0.15); color: #00A2FF; } [data-theme="noturno"] .kpi-card.accent-yellow .kpi-icon { background: rgba(210, 153, 34, 0.15); color: #d29922; } [data-theme="noturno"] .kpi-card.accent-purple .kpi-icon { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } /* Dashboard client percentage badges */ [data-theme="noturno"] .client-row.all-ok .client-pct { background: rgba(63, 185, 80, 0.15); color: #3fb950; } [data-theme="noturno"] .client-row.partial .client-pct { background: rgba(210, 153, 34, 0.15); color: #d29922; } [data-theme="noturno"] .client-row.all-off .client-pct { background: rgba(248, 81, 73, 0.15); color: #f85149; } /* Dashboard camera row offline */ [data-theme="noturno"] .cam-row { background: rgba(248, 81, 73, 0.06); border-left-color: #f85149; } /* --- Health ring (dashboard) --- */ [data-theme="noturno"] .health-ring-label { color: #8b949e; } /* --- Tippy / tooltips genéricos --- */ [data-theme="noturno"] .tippy-box { background: #1a2030; border: 1px solid #2d3748; } /* --- Toast notifications --- */ [data-theme="noturno"] .toast, [data-theme="noturno"] .Toastify__toast { background: #1a2030; color: #e6edf3; border: 1px solid #2d3748; } /* --- Header gradiente (se usado) --- */ [data-theme="noturno"] .header { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4); } /* ============================================================================= NOTURNO — TENANT: Camera list & cards (hardcoded em tenant.html embedded CSS) ============================================================================= */ /* Camera list items (modo lista) */ [data-theme="noturno"] .cam-list-item { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .cam-list-item:hover { background: #222a3a; border-color: #00A2FF; box-shadow: 0 8px 20px rgba(0, 162, 255, 0.15); } [data-theme="noturno"] .cam-list-item.camera-shared { background: linear-gradient(90deg, rgba(139, 92, 246, 0.08), #1a2030 30%); } [data-theme="noturno"] .cam-list-name { color: #e6edf3; } [data-theme="noturno"] .cam-list-location { color: #8b949e; } [data-theme="noturno"] .cam-list-metric-value { color: #e6edf3; } [data-theme="noturno"] .cam-list-metric-label { color: #6e7681; } /* Camera cards (modo grid) */ [data-theme="noturno"] .cam-card { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .cam-card:hover { border-color: #00A2FF; box-shadow: 0 12px 24px rgba(0, 162, 255, 0.15); } [data-theme="noturno"] .cam-card.camera-shared { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), #1a2030 40%); } [data-theme="noturno"] .cam-card-info { color: #e6edf3; } [data-theme="noturno"] .cam-card-name { color: #e6edf3; } /* Config button (engrenagem) */ [data-theme="noturno"] .cam-list-config { background: #222a3a; border-color: #2d3748; color: #8b949e; } [data-theme="noturno"] .cam-list-config:hover { background: #00A2FF; color: white; border-color: #00A2FF; } [data-theme="noturno"] .cam-card-config { background: rgba(26, 32, 48, 0.95); color: #8b949e; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="noturno"] .cam-card-config:hover { background: #00A2FF; color: white; } /* Badges da câmera (modo lista) - fundo escuro translúcido */ [data-theme="noturno"] .cam-list-badge.lpr { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } [data-theme="noturno"] .cam-list-badge.lpr.excellent { background: rgba(63, 185, 80, 0.15); color: #3fb950; } [data-theme="noturno"] .cam-list-badge.lpr.acceptable { background: rgba(210, 153, 34, 0.15); color: #d29922; } [data-theme="noturno"] .cam-list-badge.lpr.poor { background: rgba(248, 81, 73, 0.15); color: #f85149; } [data-theme="noturno"] .cam-list-badge.vehicle { background: rgba(63, 185, 80, 0.15); color: #3fb950; } [data-theme="noturno"] .cam-list-badge.timelapse { background: rgba(63, 207, 213, 0.15); color: #3FCFD5; } [data-theme="noturno"] .cam-list-badge.face { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } [data-theme="noturno"] .cam-list-badge.people { background: rgba(236, 72, 153, 0.15); color: #f472b6; } [data-theme="noturno"] .cam-list-badge.rec { background: rgba(220, 38, 38, 0.15); color: #f85149; } [data-theme="noturno"] .cam-list-badge.protocol.rtsp { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } [data-theme="noturno"] .cam-list-badge.protocol.rtmp { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } [data-theme="noturno"] .cam-list-badge.protocol.hls { background: rgba(34, 197, 94, 0.15); color: #3fb950; } /* Shared badge */ [data-theme="noturno"] .shared-badge { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } /* Time window restricted badge */ [data-theme="noturno"] .tw-restricted-badge { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } /* (duplicado removido — btn-topbar-danger noturno já definido acima L578-597) */ /* View mode buttons (grid/lista toggle) */ [data-theme="noturno"] .view-mode-btn { background: #222a3a; border-color: #2d3748; } [data-theme="noturno"] .view-mode-btn svg { stroke: #8b949e; } [data-theme="noturno"] .view-mode-btn:hover { background: #2a3345; } /* Section headers no tenant */ [data-theme="noturno"] .section-header { border-bottom-color: #2d3748; } [data-theme="noturno"] .section-header h2 { color: #e6edf3; } /* Camera card bottom info bar */ [data-theme="noturno"] .cam-card-bottom, [data-theme="noturno"] .cam-card-footer { background: #131820; border-top-color: #2d3748; color: #8b949e; } /* Metric tooltip already dark, but ensure border is consistent */ [data-theme="noturno"] .metric-tip { background: #131820; border-color: #2d3748; } /* Camera status text */ [data-theme="noturno"] .cam-card-status { color: #8b949e; } /* Cameras grid container */ [data-theme="noturno"] .cameras-grid, [data-theme="noturno"] .cameras-list-view { background: transparent; } /* Timelapse camera cards (tenant) */ [data-theme="noturno"] .timelapse-camera-card { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .timelapse-camera-card:hover { border-color: #00A2FF; } /* ============================================================================= NOTURNO — Elementos faltantes (audit 2026-02-17) ============================================================================= */ /* --- View mode toggle container (tenant.html: hardcoded #f1f5f9) --- */ [data-theme="noturno"] .view-mode-toggle { background: #222a3a; } [data-theme="noturno"] .view-mode-btn.active { box-shadow: 0 2px 4px rgba(0, 162, 255, 0.3); } /* --- Cam-btn / cam-list-btn box-shadows (hardcoded rgba(59,130,246,...)) --- */ [data-theme="noturno"] .cam-btn-primary { box-shadow: 0 3px 10px rgba(0, 162, 255, 0.25); } [data-theme="noturno"] .cam-btn-primary:hover { box-shadow: 0 6px 16px rgba(0, 162, 255, 0.35); } [data-theme="noturno"] .cam-list-btn-primary:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(0, 162, 255, 0.3); } /* --- Topbar inline filter inputs (sem classe, apenas tag select/input na .topbar-filters-inline) --- */ [data-theme="noturno"] .topbar-filters-inline input[type="text"] { background: #131820; color: #e6edf3; border-color: #2d3748; } [data-theme="noturno"] .topbar-filters-inline input[type="text"]:focus { border-color: #00A2FF; box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.15); } [data-theme="noturno"] .topbar-filters-inline input[type="text"]::placeholder { color: #6e7681; } [data-theme="noturno"] .topbar-filters-inline select { background: #131820; color: #e6edf3; border-color: #2d3748; } /* --- Clients page — btn-access (var(--primary) já funciona), clear-search-btn --- */ [data-theme="noturno"] .clear-search-btn { color: #8b949e; } [data-theme="noturno"] .clear-search-btn:hover { color: #e6edf3; } /* --- Search box container (clients.html) --- */ [data-theme="noturno"] .search-box { background: #131820; border-color: #2d3748; } [data-theme="noturno"] .search-box:focus-within { border-color: #00A2FF; } /* --- Filter box (clients.html) --- */ [data-theme="noturno"] .filter-box { border-color: #2d3748; } /* --- Clients table icon buttons (hover adjust for dark) --- */ [data-theme="noturno"] .cl-btn-icon:hover { background: #2a3345; color: #e6edf3; } [data-theme="noturno"] .cl-btn-icon-danger:hover { background: rgba(248, 81, 73, 0.15); color: #f85149; } /* --- Cam-card services badges background (hardcoded light in tenant.html) --- */ [data-theme="noturno"] .cam-card-no-services { color: #6e7681; } /* --- Checkbox items (users.html, groups) --- */ [data-theme="noturno"] .checkbox-item label { color: #c9d1d9; } /* --- Form section (modals) --- */ [data-theme="noturno"] .form-section { border-color: #2d3748; } [data-theme="noturno"] .form-section-title { color: #e6edf3; } /* --- Camera page: config sections (camera.html embedded CSS) --- */ [data-theme="noturno"] .config-section { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .config-section-header { color: #e6edf3; } [data-theme="noturno"] .info-card { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .info-label { color: #8b949e; } [data-theme="noturno"] .info-value { color: #e6edf3; } /* --- Camera page quick action buttons --- */ [data-theme="noturno"] .quick-action-btn { background: #1a2030; border-color: #2d3748; color: #e6edf3; } [data-theme="noturno"] .quick-action-btn:hover { background: #222a3a; border-color: #00A2FF; } /* --- Player controls bar (camera.html) --- */ [data-theme="noturno"] .player-controls { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .player-controls button { color: #8b949e; } [data-theme="noturno"] .player-controls button:hover { color: #e6edf3; background: #222a3a; } /* --- Timeline/recordings container (camera.html) --- */ [data-theme="noturno"] .recordings-date-picker { background: #1a2030; border-color: #2d3748; color: #e6edf3; } /* --- Generic toggle switch (checkbox styled) --- */ [data-theme="noturno"] input[type="checkbox"] { accent-color: #00A2FF; } /* --- Scrollbar (noturno) --- */ [data-theme="noturno"] ::-webkit-scrollbar-track { background: #131820; } [data-theme="noturno"] ::-webkit-scrollbar-thumb { background: #2d3748; } [data-theme="noturno"] ::-webkit-scrollbar-thumb:hover { background: #484f58; } /* ============================================================================= NOTURNO — feedback-admin.html embedded CSS overrides ============================================================================= */ /* --- Stat cards (background: white hardcoded) --- */ [data-theme="noturno"] .feedback-stat-card { background: #1a2030; } /* --- Toolbar selects (background: white hardcoded) --- */ [data-theme="noturno"] .feedback-toolbar select { background: #131820; color: #e6edf3; } /* --- Table (background: white hardcoded) --- */ [data-theme="noturno"] .feedback-table { background: #1a2030; } [data-theme="noturno"] .feedback-table thead { background: linear-gradient(135deg, #00A2FF 0%, #0080cc 100%); } [data-theme="noturno"] .feedback-table td { border-bottom-color: #2d3748; } /* --- Tipo badges --- */ [data-theme="noturno"] .tipo-badge.bug { background: rgba(248, 81, 73, 0.15); color: #f85149; } [data-theme="noturno"] .tipo-badge.sugestao { background: rgba(0, 162, 255, 0.15); color: #00A2FF; } /* --- Status badges --- */ [data-theme="noturno"] .status-badge.novo { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } [data-theme="noturno"] .status-badge.em_analise { background: rgba(0, 162, 255, 0.15); color: #00A2FF; } [data-theme="noturno"] .status-badge.respondido { background: rgba(63, 185, 80, 0.15); color: #3fb950; } /* --- Detail meta / description (background: #f8fafc) --- */ [data-theme="noturno"] .detail-meta { background: #131820; } [data-theme="noturno"] .detail-description { background: #131820; color: #e6edf3; } /* --- Reply (background: #f0fdf4) --- */ [data-theme="noturno"] .detail-reply { background: rgba(63, 185, 80, 0.08); border-left-color: #3fb950; } /* --- Reply form textarea --- */ [data-theme="noturno"] .reply-form textarea { background: #131820; color: #e6edf3; border-color: #2d3748; } [data-theme="noturno"] .reply-form textarea:focus { border-color: #00A2FF; } /* --- Status select in modal --- */ [data-theme="noturno"] .status-select-group select { background: #131820; color: #e6edf3; border-color: #2d3748; } /* ============================================================================= NOTURNO — tenant.html embedded CSS overrides (audit 2026-02-17) ============================================================================= */ /* --- Rastreamento search bar (background: white hardcoded) --- */ [data-theme="noturno"] .rastreamento-search-input-group { background: #1a2030; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } /* --- Rastreamento mapa placeholder --- */ [data-theme="noturno"] .rastreamento-mapa { background: #131820; } /* --- Timeline entry interval badge --- */ [data-theme="noturno"] .timeline-entry-interval { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); } /* --- Camera modal sections (modal de câmera no tenant) --- */ [data-theme="noturno"] .camera-section { background: #1a2030; border-color: #2d3748; } [data-theme="noturno"] .camera-section-header { background: #222a3a; border-bottom-color: #2d3748; } [data-theme="noturno"] .camera-section-header h3 { color: #e6edf3; } /* --- AI Accordion (tenant camera modal) --- */ [data-theme="noturno"] .ai-accordion { border-color: #2d3748; } [data-theme="noturno"] .ai-accordion:hover { border-color: #484f58; } [data-theme="noturno"] .ai-accordion-header { background: #1a2030; } [data-theme="noturno"] .ai-accordion-header:hover { background: #222a3a; } [data-theme="noturno"] .ai-accordion.open .ai-accordion-header { background: #222a3a; border-bottom-color: #2d3748; } [data-theme="noturno"] .ai-accordion-title { color: #e6edf3; } [data-theme="noturno"] .ai-accordion-desc { color: #8b949e; } [data-theme="noturno"] .ai-accordion-toggle { background: #3a4555; } [data-theme="noturno"] .ai-accordion-arrow { color: #8b949e; } [data-theme="noturno"] .ai-accordion-content { background: #131820; } /* --- Info box (tenant camera modal) --- */ [data-theme="noturno"] .info-box { background: rgba(0, 162, 255, 0.08); border-left-color: #00A2FF; } [data-theme="noturno"] .info-box p { color: #c9d1d9; } [data-theme="noturno"] .info-box.green { background: rgba(63, 185, 80, 0.08); border-left-color: #3fb950; } [data-theme="noturno"] .info-box.yellow { background: rgba(245, 158, 11, 0.08); border-left-color: #f59e0b; } /* --- Checkbox item (tenant camera modal) --- */ [data-theme="noturno"] .checkbox-item { background: #222a3a; color: #c9d1d9; } [data-theme="noturno"] .checkbox-item:hover { background: #2a3345; } /* --- Camera modal footer --- */ [data-theme="noturno"] .camera-modal-footer { background: #131820; border-top-color: #2d3748; } /* --- Badges (success/warning/danger/info) --- */ [data-theme="noturno"] .badge-success { background: rgba(63, 185, 80, 0.15); color: #3fb950; } [data-theme="noturno"] .badge-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } [data-theme="noturno"] .badge-danger { background: rgba(248, 81, 73, 0.15); color: #f85149; } [data-theme="noturno"] .badge-info { background: rgba(0, 162, 255, 0.15); color: #00A2FF; } /* --- Cam service badges (LPR quality: acceptable/poor) --- */ [data-theme="noturno"] .cam-service-badge.lpr.acceptable { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } [data-theme="noturno"] .cam-service-badge.lpr.poor { background: rgba(248, 81, 73, 0.15); color: #f85149; } [data-theme="noturno"] .cam-service-badge.people { background: rgba(236, 72, 153, 0.15); color: #f472b6; } /* --- Cam card info/metrics borders (hardcoded #f1f5f9) --- */ [data-theme="noturno"] .cam-card-info { border-bottom-color: #2d3748; } [data-theme="noturno"] .cam-card-metrics { border-bottom-color: #2d3748; } [data-theme="noturno"] .cam-metric { border-right-color: #2d3748; } /* --- Metric spinner (hardcoded #e2e8f0 border) --- */ [data-theme="noturno"] .metric-spinner { border-color: #2d3748; border-top-color: #00A2FF; } /* --- Mosaico modal camera items --- */ [data-theme="noturno"] .mosaico-camera-item { background: #1a2030; border-bottom-color: #2d3748; } [data-theme="noturno"] .mosaico-camera-item:hover { background: #222a3a; } [data-theme="noturno"] .mosaico-camera-item .camera-name { color: #e6edf3; } [data-theme="noturno"] #mosaico-cameras-list { background: #1a2030; } /* --- Mosaico icon box (selected/hover) --- */ [data-theme="noturno"] .mosaico-icone-box { border-color: #2d3748; } [data-theme="noturno"] .mosaico-icone-option input:checked + .mosaico-icone-box { background: rgba(0, 162, 255, 0.15); border-color: #00A2FF; box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.2); } [data-theme="noturno"] .mosaico-icone-box:hover { border-color: #484f58; background: #222a3a; } /* --- Cam list config button (unchecked state: #f1f5f9) --- */ [data-theme="noturno"] .cam-list-config-btn { background: #222a3a; border-color: #2d3748; } /* --- Timelapse card error --- */ [data-theme="noturno"] .timelapse-card-error { border-color: rgba(248, 81, 73, 0.3); box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.15); } /* --- Camera modal header text --- */ [data-theme="noturno"] .camera-modal-header { background: linear-gradient(135deg, #1a2030, #222a3a); } /* --- IA section special headers (gradient backgrounds) --- */ [data-theme="noturno"] .camera-section-header[style*="fef3c7"], [data-theme="noturno"] .ai-accordion-icon[style*="dbeafe"], [data-theme="noturno"] .ai-accordion-icon[style*="dcfce7"], [data-theme="noturno"] .ai-accordion-icon[style*="e0e7ff"] { /* These use inline styles so can't be easily overridden, handled via JS */ } /* --- GPS accordion header in noturno --- */ [data-theme="noturno"] #accordion-gps > .ai-accordion-header { background: rgba(63, 185, 80, 0.1); } [data-theme="noturno"] #accordion-gps .ai-accordion-title { color: #3fb950; } [data-theme="noturno"] #accordion-gps .ai-accordion-desc { color: #3fb950; } [data-theme="noturno"] #accordion-gps .ai-accordion-arrow { color: #3fb950; } /* --- IA Processing section header in noturno --- */ [data-theme="noturno"] #accordion-lpr > .ai-accordion-header .ai-accordion-icon, [data-theme="noturno"] #accordion-vehicle > .ai-accordion-header .ai-accordion-icon, [data-theme="noturno"] #accordion-timelapse > .ai-accordion-header .ai-accordion-icon { opacity: 0.8; } /* --- Generic dark form elements inside modals --- */ [data-theme="noturno"] .camera-modal-redesign .form-group input, [data-theme="noturno"] .camera-modal-redesign .form-group select, [data-theme="noturno"] .camera-modal-redesign .form-group textarea { background: #131820; color: #e6edf3; border-color: #2d3748; } [data-theme="noturno"] .camera-modal-redesign .form-group input:focus, [data-theme="noturno"] .camera-modal-redesign .form-group select:focus { border-color: #00A2FF; box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.15); } [data-theme="noturno"] .camera-modal-redesign .form-group label { color: #c9d1d9; } /* --- Import CSV modal steps --- */ [data-theme="noturno"] .import-step { background: #1a2030; border-color: #2d3748; } /* --- Mosaico modal form inputs --- */ [data-theme="noturno"] #mosaicoModal .form-group input, [data-theme="noturno"] #mosaicoModal .form-group select { background: #131820; color: #e6edf3; border-color: #2d3748; } [data-theme="noturno"] #mosaicoModal .form-group input:focus, [data-theme="noturno"] #mosaicoModal .form-group select:focus { border-color: #00A2FF; box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.15); } [data-theme="noturno"] #mosaicoModal .form-group label { color: #c9d1d9; } /* --- Mosaico cameras modal search/inputs --- */ [data-theme="noturno"] #mosaicoCamerasModal input[type="text"] { background: #131820; color: #e6edf3; border-color: #2d3748; } [data-theme="noturno"] #mosaicoCamerasModal input[type="text"]:focus { border-color: #00A2FF; } /* ============================================================================= PROTEÇÃO DE LOGOS — Cores fixas independente do tema ============================================================================= */ /* Logo SVG Aperture (primária) - usa cores inline no SVG, não afetada */ /* Logo CSS secundária - usa cores hardcoded nestas classes */ [data-theme] .tenant-logo-circle, [data-theme] .tenant-logo-lens, [data-theme] .tenant-logo-led, [data-theme] .tenant-logo-brackets, [data-theme] .sidebar-logo .logo-circle, [data-theme] .sidebar-logo .logo-lens, [data-theme] .sidebar-logo .logo-led { /* Impedir herança de variáveis de tema — mantém cores originais */ color: inherit; } /* ============================================================================= CALIBRACAO DE CAMERAS ============================================================================= */ /* Fotos lado a lado */ .cal-photos { display: flex; gap: 16px; justify-content: center; margin-bottom: 12px; } .cal-photo { text-align: center; flex: 1; min-width: 0; } .cal-photo img { max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-hover); object-fit: contain; } .cal-photo label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 12px; color: var(--text-secondary); } /* Info do par */ .cal-pair-info { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 12px 0; font-size: 13px; } .cal-pair-info span { color: var(--text-secondary); } .cal-pair-info b { color: var(--text-primary); } /* Header da fase */ .cal-phase-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } /* Progresso */ .cal-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } /* Acoes (botoes) */ .cal-actions { display: flex; justify-content: center; gap: 16px; margin-top: 16px; } /* Aguardando */ .cal-waiting { text-align: center; padding: 40px 20px; color: var(--text-secondary); } .cal-waiting p { margin: 0; font-size: 14px; } /* Resultado stats */ .cal-result-stats { margin: 16px auto; max-width: 320px; background: var(--bg-hover); border-radius: 8px; padding: 16px; } .cal-result-stats p { margin: 6px 0; font-size: 14px; color: var(--text-secondary); display: flex; justify-content: space-between; } .cal-result-stats b { color: var(--text-primary); } /* Radio group */ .cal-radio-group { display: flex; gap: 16px; flex-wrap: wrap; } .cal-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-primary); cursor: pointer; } .cal-radio-label input[type="radio"] { accent-color: var(--primary); } /* Dica de teclado */ .cal-keyboard-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 12px; } /* Itens de matching manual ao vivo */ .cal-live-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: opacity 0.2s, border-color 0.2s, background 0.2s; background: var(--bg-card); } .cal-live-item.cal-live-item-vertical { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; } .cal-live-item:hover { border-color: var(--primary); background: var(--bg-hover); } .cal-live-item.cal-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); box-shadow: 0 0 0 1px var(--primary); } .cal-live-item.cal-dimmed { opacity: 0.3; pointer-events: none; } /* Botao calibracao — estados */ .btn-cal-none { border-color: var(--danger) !important; color: var(--danger) !important; } .btn-cal-none:hover { background: color-mix(in srgb, var(--danger) 10%, transparent) !important; } .btn-cal-active { border-color: var(--warning) !important; color: var(--warning) !important; opacity: 0.8; cursor: not-allowed; } .btn-cal-done { border-color: var(--success) !important; color: var(--success) !important; } .btn-cal-done:hover { background: color-mix(in srgb, var(--success) 10%, transparent) !important; } .btn-cal-invalid { border-color: var(--warning) !important; color: var(--warning) !important; } .btn-cal-invalid:hover { background: color-mix(in srgb, var(--warning) 10%, transparent) !important; } /* Responsivo */ @media (max-width: 640px) { .cal-photos { flex-direction: column; } .cal-photo img { max-height: 160px; } .cal-pair-info { flex-direction: column; align-items: center; gap: 4px; } .cal-radio-group { flex-direction: column; gap: 8px; } } /* Print Guard - bloqueia impressao quando video esta ativo */ @media print { .print-blocked * { display: none !important; } .print-blocked::after { content: 'Impressão não permitida — SmartVision'; display: block !important; text-align: center; padding: 100px 20px; font-size: 24px; color: #666; font-family: sans-serif; } }