/* =========================================================================== sistema.css — DESIGN TOKENS KRYPTA (v2.0, 2026-05-08) =========================================================================== Substitui a paleta laranja antiga por TODA a paleta KRYPTA conforme o guia de marca v2.0. Tema padrão: LIGHT (branco puro). DARK opcional via toggle persistido em admins.tema_preferido. - Tokens primários KRYPTA (cyan, violet, blue, magenta, neon, silver…). - Tokens semânticos (--sistema-primary, --sistema-bg…) re-mapeados pra cores Krypta — preserva a maioria dos componentes legados sem reescrever. - Tipografia: Inter (corpo), Space Grotesk (títulos), JetBrains Mono (rótulos). IMPORTANTE: O recebe data-theme="light" (default) ou "dark". O JS de bootstrap aplica isso ANTES do paint pra evitar flash. Se o servidor souber a preferência via cookie, injeta a classe direto (sem flash). ============================================================================ */ /* ============================================================================ 1. PALETA KRYPTA — TEMA LIGHT (PADRÃO) ============================================================================ */ :root, html[data-theme="light"] { --krypta-bg-page: #FFFFFF; --krypta-bg-card: #F8FAFC; --krypta-bg-elevated: #F1F5F9; --krypta-bg-overlay: rgba(255,255,255,0.85); --krypta-border: rgba(15,23,42,0.08); --krypta-border-strong: rgba(15,23,42,0.16); --krypta-cyan: #00B8E6; --krypta-violet: #9333EA; --krypta-blue: #1D4ED8; --krypta-magenta: #DB2777; --krypta-neon: #06B6D4; --krypta-text-primary: #0F172A; --krypta-text-secondary: #334155; --krypta-text-muted: #475569; --krypta-text-faded: #64748B; --krypta-success: #16A34A; --krypta-warning: #D97706; --krypta-danger: #DC2626; --krypta-info: #00B8E6; --krypta-shadow-soft: 0 4px 16px rgba(15,23,42,0.06); --krypta-shadow-medium: 0 8px 24px rgba(15,23,42,0.08); --krypta-shadow-glow-cyan: 0 0 20px rgba(0,184,230,0.18); --krypta-shadow-glow-violet: 0 0 20px rgba(147,51,234,0.18); --krypta-grid-line: rgba(0,184,230,0.05); --krypta-sidebar-bg: #0F172A; --krypta-sidebar-bg-2: #1E293B; --krypta-sidebar-text: #CBD5E1; --krypta-sidebar-text-active: #FFFFFF; --krypta-sidebar-active-bg: linear-gradient(135deg, #00B8E6 0%, #9333EA 100%); --krypta-gradient-brand: linear-gradient(135deg, #00B8E6 0%, #9333EA 100%); --krypta-gradient-blue: linear-gradient(135deg, #1D4ED8 0%, #00B8E6 100%); --krypta-gradient-magenta: linear-gradient(135deg, #DB2777 0%, #9333EA 100%); } /* ============================================================================ 2. PALETA KRYPTA — TEMA DARK ============================================================================ */ html[data-theme="dark"] { --krypta-bg-page: #030712; --krypta-bg-card: #111827; --krypta-bg-elevated: #1A2233; --krypta-bg-overlay: rgba(3,7,18,0.78); --krypta-border: rgba(255,255,255,0.08); --krypta-border-strong: rgba(255,255,255,0.16); --krypta-cyan: #00D1FF; --krypta-violet: #A855F7; --krypta-blue: #2563EB; --krypta-magenta: #EC4899; --krypta-neon: #7CF7FF; --krypta-text-primary: #FFFFFF; --krypta-text-secondary: #CBD5E1; --krypta-text-muted: #94A3B8; --krypta-text-faded: #64748B; --krypta-success: #22C55E; --krypta-warning: #F59E0B; --krypta-danger: #EF4444; --krypta-info: #00D1FF; --krypta-shadow-soft: 0 8px 32px rgba(0,0,0,0.4); --krypta-shadow-medium: 0 12px 40px rgba(0,0,0,0.5); --krypta-shadow-glow-cyan: 0 0 24px rgba(0,209,255,0.25); --krypta-shadow-glow-violet: 0 0 24px rgba(168,85,247,0.25); --krypta-grid-line: rgba(0,209,255,0.03); --krypta-sidebar-bg: #030712; --krypta-sidebar-bg-2: #111827; --krypta-sidebar-text: #94A3B8; --krypta-sidebar-text-active: #FFFFFF; --krypta-sidebar-active-bg: linear-gradient(135deg, #00D1FF 0%, #A855F7 100%); --krypta-gradient-brand: linear-gradient(135deg, #00D1FF 0%, #A855F7 100%); --krypta-gradient-blue: linear-gradient(135deg, #2563EB 0%, #00D1FF 100%); --krypta-gradient-magenta: linear-gradient(135deg, #EC4899 0%, #A855F7 100%); } /* ============================================================================ 3. ALIASES SEMÂNTICOS — preserva o resto do CSS legado funcionando ============================================================================ */ :root, html[data-theme="light"], html[data-theme="dark"] { --sistema-primary: var(--krypta-cyan); --sistema-primary-dark: var(--krypta-blue); --sistema-primary-light: var(--krypta-neon); --sistema-primary-soft: rgba(0,184,230,0.08); --sistema-secondary: var(--krypta-text-muted); --sistema-success: var(--krypta-success); --sistema-warning: var(--krypta-warning); --sistema-danger: var(--krypta-danger); --sistema-info: var(--krypta-info); --sistema-dark: var(--krypta-text-primary); --sistema-bg: var(--krypta-bg-page); --sistema-card-bg: var(--krypta-bg-card); --sistema-border: var(--krypta-border); --sistema-border-soft: var(--krypta-border-strong); --sistema-text: var(--krypta-text-primary); --sistema-text-muted: var(--krypta-text-muted); --sistema-cyan: var(--krypta-cyan); --sistema-violet: var(--krypta-violet); --sistema-blue: var(--krypta-blue); --sistema-magenta: var(--krypta-magenta); --sistema-neon: var(--krypta-neon); --sistema-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sistema-font-display: 'Space Grotesk', 'Inter', sans-serif; --sistema-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace; } /* ============================================================================ 4. ESTILOS GLOBAIS DE BASE ============================================================================ */ html { color-scheme: light; transition: color-scheme 0.3s ease; } html[data-theme="dark"] { color-scheme: dark; } body { background-color: var(--krypta-bg-page) !important; color: var(--krypta-text-primary) !important; font-family: var(--sistema-font-body); font-size: 14px; line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sistema-font-display); color: var(--krypta-text-primary); font-weight: 600; letter-spacing: -0.01em; } .text-muted, .text-secondary { color: var(--krypta-text-muted) !important; } code, kbd, samp, pre, .font-monospace, .text-mono { font-family: var(--sistema-font-mono) !important; } a { color: var(--krypta-cyan); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--krypta-violet); } /* Cards */ .card { background-color: var(--krypta-bg-card); border: 1px solid var(--krypta-border); color: var(--krypta-text-primary); border-radius: 12px; box-shadow: var(--krypta-shadow-soft); } .card-header { background-color: var(--krypta-bg-elevated); border-bottom: 1px solid var(--krypta-border); color: var(--krypta-text-primary); border-radius: 12px 12px 0 0 !important; } .card-body { color: var(--krypta-text-primary); } .card .text-muted { color: var(--krypta-text-muted) !important; } /* bg-light / bg-white re-mapeados */ .bg-light, .bg-body-tertiary { background-color: var(--krypta-bg-elevated) !important; color: var(--krypta-text-primary) !important; } .bg-white { background-color: var(--krypta-bg-card) !important; color: var(--krypta-text-primary) !important; } /* ============================================================================ 5. BOTÕES KRYPTA ============================================================================ */ .btn { font-family: var(--sistema-font-body); font-weight: 500; border-radius: 10px; transition: all 0.15s ease; letter-spacing: 0.005em; } .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,184,230,0.18); } .btn-primary { background: var(--krypta-gradient-brand); border: none; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(0,184,230,0.25); } .btn-primary:hover, .btn-primary:focus { background: var(--krypta-gradient-brand); transform: translateY(-1px); box-shadow: var(--krypta-shadow-glow-cyan); color: #FFFFFF; } .btn-primary:active, .btn-primary.active { transform: translateY(0); filter: brightness(0.95); } .btn-outline-primary { background: transparent; border: 1px solid var(--krypta-cyan); color: var(--krypta-cyan); } .btn-outline-primary:hover { background: rgba(0,184,230,0.08); color: var(--krypta-cyan); border-color: var(--krypta-cyan); } .btn-success { background-color: var(--krypta-success); border-color: var(--krypta-success); color: #FFFFFF; } .btn-success:hover { background-color: var(--krypta-success); filter: brightness(0.92); color: #FFFFFF; } .btn-warning { background-color: var(--krypta-warning); border-color: var(--krypta-warning); color: #FFFFFF; } .btn-warning:hover { background-color: var(--krypta-warning); filter: brightness(0.92); color: #FFFFFF; } .btn-danger { background-color: var(--krypta-danger); border-color: var(--krypta-danger); color: #FFFFFF; } .btn-danger:hover { background-color: var(--krypta-danger); filter: brightness(0.92); color: #FFFFFF; } .btn-info { background-color: var(--krypta-cyan); border-color: var(--krypta-cyan); color: #FFFFFF; } .btn-info:hover { background-color: var(--krypta-cyan); filter: brightness(0.92); color: #FFFFFF; } .btn-secondary, .btn-outline-secondary { background-color: transparent; border: 1px solid var(--krypta-border-strong); color: var(--krypta-text-secondary); } .btn-secondary:hover, .btn-outline-secondary:hover { background-color: var(--krypta-bg-elevated); color: var(--krypta-text-primary); border-color: var(--krypta-text-muted); } .btn-light { background-color: var(--krypta-bg-elevated); border-color: var(--krypta-border); color: var(--krypta-text-primary); } .btn-light:hover { background-color: var(--krypta-bg-card); color: var(--krypta-text-primary); } /* ============================================================================ 6. INPUTS / FORMS ============================================================================ */ .form-control, .form-select, input[type="text"]:not(.flatpickr-input), input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], textarea, select { background-color: var(--krypta-bg-card); border: 1px solid var(--krypta-border-strong); color: var(--krypta-text-primary); border-radius: 8px; transition: all 0.15s ease; font-family: var(--sistema-font-body); } .form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { background-color: var(--krypta-bg-card); border-color: var(--krypta-cyan); color: var(--krypta-text-primary); box-shadow: 0 0 0 3px rgba(0,184,230,0.15); outline: none; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--krypta-text-faded); opacity: 1; } .form-control:disabled, .form-control[readonly] { background-color: var(--krypta-bg-elevated); color: var(--krypta-text-muted); } .form-label { color: var(--krypta-text-secondary); font-weight: 500; font-size: 0.875rem; } .form-check-input { background-color: var(--krypta-bg-card); border-color: var(--krypta-border-strong); } .form-check-input:checked { background-color: var(--krypta-cyan); border-color: var(--krypta-cyan); } .form-check-input:focus { border-color: var(--krypta-cyan); box-shadow: 0 0 0 3px rgba(0,184,230,0.15); } /* ============================================================================ 7. TABELAS ============================================================================ */ .table { --bs-table-bg: var(--krypta-bg-card); --bs-table-color: var(--krypta-text-primary); --bs-table-border-color: var(--krypta-border); color: var(--krypta-text-primary); } .table > :not(caption) > * > * { background-color: var(--krypta-bg-card); color: var(--krypta-text-primary); border-bottom-color: var(--krypta-border); } .table thead th, .table-light > :not(caption) > * > * { background-color: var(--krypta-bg-elevated) !important; color: var(--krypta-text-secondary) !important; border-bottom: 1px solid var(--krypta-border-strong) !important; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--sistema-font-mono); } .table-hover > tbody > tr:hover > * { background-color: rgba(0,184,230,0.04) !important; color: var(--krypta-text-primary) !important; } .table-secondary > :not(caption) > * > * { background-color: var(--krypta-bg-elevated) !important; color: var(--krypta-text-muted) !important; } .table-warning > :not(caption) > * > * { background-color: rgba(217,119,6,0.08) !important; color: var(--krypta-text-primary) !important; } .table-success > :not(caption) > * > * { background-color: rgba(22,163,74,0.08) !important; } .table-danger > :not(caption) > * > * { background-color: rgba(220,38,38,0.08) !important; } /* ============================================================================ 8. NAVS / TABS / BADGES ============================================================================ */ .nav-tabs { border-bottom: 1px solid var(--krypta-border); } .nav-tabs .nav-link { color: var(--krypta-text-muted); background: transparent; border: 1px solid transparent; border-radius: 10px 10px 0 0; font-weight: 500; transition: all 0.15s ease; } .nav-tabs .nav-link:hover { color: var(--krypta-text-primary); background-color: rgba(0,184,230,0.06); border-color: transparent; } .nav-tabs .nav-link.active { color: var(--krypta-text-primary); background-color: var(--krypta-bg-card); border-color: var(--krypta-border) var(--krypta-border) var(--krypta-bg-card); border-bottom: 2px solid var(--krypta-cyan); font-weight: 600; } .badge { font-weight: 500; border-radius: 6px; font-family: var(--sistema-font-body); letter-spacing: 0.015em; } .bg-primary { background: var(--krypta-gradient-brand) !important; color: #FFFFFF; } .bg-success { background-color: var(--krypta-success) !important; color: #FFFFFF; } .bg-warning { background-color: var(--krypta-warning) !important; color: #FFFFFF; } .bg-danger { background-color: var(--krypta-danger) !important; color: #FFFFFF; } .bg-info { background-color: var(--krypta-cyan) !important; color: #FFFFFF; } .bg-secondary { background-color: var(--krypta-text-faded) !important; color: #FFFFFF; } .text-primary { color: var(--krypta-cyan) !important; } .text-success { color: var(--krypta-success) !important; } .text-warning { color: var(--krypta-warning) !important; } .text-danger { color: var(--krypta-danger) !important; } .text-info { color: var(--krypta-cyan) !important; } /* ============================================================================ 9. MODAIS / OFFCANVAS / DROPDOWNS ============================================================================ */ .modal-content { background-color: var(--krypta-bg-card); border: 1px solid var(--krypta-border); color: var(--krypta-text-primary); border-radius: 14px; box-shadow: var(--krypta-shadow-medium); } .modal-header, .modal-footer { background-color: var(--krypta-bg-elevated); border-color: var(--krypta-border); color: var(--krypta-text-primary); } .modal-title { color: var(--krypta-text-primary); font-family: var(--sistema-font-display); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); } .dropdown-menu { background-color: var(--krypta-bg-card); border: 1px solid var(--krypta-border-strong); color: var(--krypta-text-primary); border-radius: 10px; box-shadow: var(--krypta-shadow-medium); } .dropdown-item { color: var(--krypta-text-secondary); } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(0,184,230,0.08); color: var(--krypta-text-primary); } .dropdown-divider { border-top: 1px solid var(--krypta-border); } /* ============================================================================ 10. ALERTS ============================================================================ */ .alert { border-radius: 10px; border: 1px solid var(--krypta-border); background-color: var(--krypta-bg-card); } .alert-success { background-color: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.3); color: var(--krypta-success); } .alert-warning { background-color: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.3); color: var(--krypta-warning); } .alert-danger { background-color: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.3); color: var(--krypta-danger); } .alert-info { background-color: rgba(0,184,230,0.10); border-color: rgba(0,184,230,0.3); color: var(--krypta-cyan); } /* ============================================================================ 11. PAGINATION ============================================================================ */ .page-link { background-color: var(--krypta-bg-card); border-color: var(--krypta-border); color: var(--krypta-text-secondary); } .page-link:hover { background-color: rgba(0,184,230,0.08); border-color: var(--krypta-cyan); color: var(--krypta-cyan); } .page-item.active .page-link { background: var(--krypta-gradient-brand); border-color: transparent; color: #FFFFFF; } .page-item.disabled .page-link { background-color: var(--krypta-bg-elevated); color: var(--krypta-text-faded); border-color: var(--krypta-border); } /* ============================================================================ 12. PROGRESS / SPINNERS ============================================================================ */ .progress { background-color: var(--krypta-bg-elevated); border-radius: 999px; height: 8px; } .progress-bar { background: var(--krypta-gradient-brand); } .spinner-border, .spinner-grow { color: var(--krypta-cyan); } /* ============================================================================ 13. FILTROS PADRÃO KRYPTA — usado pela macro filtros_padrao.html ============================================================================ */ .filtros-krypta { background: var(--krypta-bg-card); border: 1px solid var(--krypta-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--krypta-shadow-soft); position: relative; overflow: visible; } .filtros-krypta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--krypta-gradient-brand); border-radius: 12px 12px 0 0; opacity: 0.7; } .filtros-krypta .filtro-label { font-family: var(--sistema-font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--krypta-text-faded); margin-bottom: 4px; display: block; } .filtros-krypta .filtros-titulo { font-family: var(--sistema-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--krypta-cyan); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .filtros-krypta .filtros-titulo i { font-size: 14px; } .filtros-krypta .form-control, .filtros-krypta .form-select, .filtros-krypta input, .filtros-krypta select { background-color: var(--krypta-bg-page); border: 1px solid var(--krypta-border-strong); } .filtros-krypta .filtros-acoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .filtros-krypta .filtros-acoes .btn { min-height: 38px; } .custom-multi-select { background: var(--krypta-bg-card) !important; border: 1px solid var(--krypta-border-strong) !important; border-radius: 8px; color: var(--krypta-text-primary) !important; box-shadow: var(--krypta-shadow-medium); } .custom-multi-select label, .custom-multi-select .form-check-label { color: var(--krypta-text-secondary); } /* ============================================================================ 14. CARDS DE ESTATÍSTICAS ============================================================================ */ .card.bg-primary, .card.bg-success, .card.bg-warning, .card.bg-danger, .card.bg-info, .card.bg-secondary, .card.bg-dark { border: none !important; color: #FFFFFF; border-radius: 12px; overflow: hidden; position: relative; } .card.bg-primary { background: var(--krypta-gradient-brand) !important; } .card.bg-success { background: linear-gradient(135deg, var(--krypta-success), #15803D) !important; } .card.bg-warning { background: linear-gradient(135deg, var(--krypta-warning), #B45309) !important; } .card.bg-danger { background: linear-gradient(135deg, var(--krypta-danger), #B91C1C) !important; } .card.bg-info { background: var(--krypta-gradient-blue) !important; } /* KRYPTA — bg-secondary e bg-dark agora são sólidos limpos (banido o gradiente cinza-prata que ficou ilegível) */ .card.bg-secondary { background: #475569 !important; } .card.bg-dark { background: #0F172A !important; } html[data-theme="dark"] .card.bg-secondary { background: #1E293B !important; } html[data-theme="dark"] .card.bg-dark { background: #030712 !important; } .card.bg-primary *, .card.bg-success *, .card.bg-warning *, .card.bg-danger *, .card.bg-info *, .card.bg-secondary *, .card.bg-dark * { color: #FFFFFF !important; } /* ============================================================================ 15. SIDEBAR (sempre escura) ============================================================================ */ .sidebar { background: var(--krypta-sidebar-bg) !important; color: var(--krypta-sidebar-text); } .sidebar a { color: var(--krypta-sidebar-text) !important; border-left: 3px solid transparent; transition: all 0.15s ease; } .sidebar a:hover { background: rgba(0,184,230,0.08) !important; border-left-color: var(--krypta-cyan); color: #FFFFFF !important; padding-left: 18px; } .sidebar a.active { background: var(--krypta-sidebar-active-bg) !important; color: var(--krypta-sidebar-text-active) !important; border-left: 3px solid #FFFFFF; box-shadow: inset 0 0 20px rgba(0,0,0,0.15); } .sidebar .sidebar-sub { background: var(--krypta-sidebar-bg-2) !important; } .sidebar .sidebar-sub:hover { background: rgba(0,184,230,0.10) !important; } .sidebar .sidebar-sub.active { background: var(--krypta-sidebar-active-bg) !important; } .sidebar hr { border-color: var(--krypta-border) !important; opacity: 0.3; } .logo-area { background: linear-gradient(180deg, var(--krypta-sidebar-bg) 0%, var(--krypta-sidebar-bg-2) 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 18px 12px; } .logo-area h4 { font-family: var(--sistema-font-display); font-weight: 700; letter-spacing: 0.12em; background: var(--krypta-gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 8px 0 2px; font-size: 1.2rem; } .logo-area small { color: var(--krypta-text-faded) !important; font-family: var(--sistema-font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; } .toggle-arrow { background: var(--krypta-gradient-brand) !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0,184,230,0.35) !important; } /* ============================================================================ 16. THEME TOGGLE BUTTON ============================================================================ */ .krypta-theme-toggle { position: fixed; top: 14px; right: 18px; z-index: 1100; width: 40px; height: 40px; border-radius: 10px; background: var(--krypta-bg-card); border: 1px solid var(--krypta-border-strong); color: var(--krypta-cyan); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--krypta-shadow-soft); transition: all 0.2s ease; font-size: 16px; } .krypta-theme-toggle:hover { border-color: var(--krypta-cyan); box-shadow: var(--krypta-shadow-glow-cyan); transform: translateY(-1px); } .krypta-theme-toggle .icon-sun { display: none; } .krypta-theme-toggle .icon-moon { display: inline-block; } html[data-theme="dark"] .krypta-theme-toggle .icon-sun { display: inline-block; } html[data-theme="dark"] .krypta-theme-toggle .icon-moon { display: none; } @media (max-width: 768px) { .krypta-theme-toggle { top: 8px; right: 8px; width: 36px; height: 36px; } } /* ============================================================================ 17. RODAPÉ KRYPTA ============================================================================ */ .sistema-footer, footer.sistema-footer { background: transparent; color: var(--krypta-text-faded) !important; font-size: 0.75rem; border-top: 1px solid var(--krypta-border); padding: 16px 8px; margin-top: 32px; text-align: center; font-family: var(--sistema-font-mono); letter-spacing: 0.04em; } .sistema-footer a, .sistema-footer a:visited { color: var(--krypta-text-muted); text-decoration: none; transition: color 0.15s ease; border-bottom: 1px dotted var(--krypta-border-strong); padding-bottom: 1px; } .sistema-footer a:hover { color: var(--krypta-cyan); border-bottom-color: var(--krypta-cyan); } .sistema-footer .krypta-mark { background: var(--krypta-gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; letter-spacing: 0.1em; } /* ============================================================================ 18. FLATPICKR ============================================================================ */ .flatpickr-calendar { background: var(--krypta-bg-card) !important; border: 1px solid var(--krypta-border-strong) !important; box-shadow: var(--krypta-shadow-medium) !important; border-radius: 12px; color: var(--krypta-text-primary) !important; } .flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-weekday { color: var(--krypta-text-primary) !important; background: var(--krypta-bg-card) !important; } .flatpickr-day { color: var(--krypta-text-primary) !important; border-radius: 6px; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--krypta-text-faded) !important; } .flatpickr-day:hover:not(.flatpickr-disabled) { background: rgba(0,184,230,0.10) !important; border-color: transparent !important; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--krypta-cyan) !important; border-color: var(--krypta-cyan) !important; color: #FFFFFF !important; } .flatpickr-day.inRange { background: rgba(0,184,230,0.12) !important; border-color: transparent !important; box-shadow: -5px 0 0 rgba(0,184,230,0.12), 5px 0 0 rgba(0,184,230,0.12); } .flatpickr-day.today { border-color: var(--krypta-cyan) !important; } /* ============================================================================ 19. SCROLLBAR ============================================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--krypta-bg-page); } ::-webkit-scrollbar-thumb { background: var(--krypta-border-strong); border-radius: 999px; border: 2px solid var(--krypta-bg-page); } ::-webkit-scrollbar-thumb:hover { background: var(--krypta-cyan); } /* ============================================================================ 20. SELECTION ============================================================================ */ ::selection { background: rgba(0,184,230,0.25); color: var(--krypta-text-primary); } html[data-theme="dark"] ::selection { background: rgba(0,209,255,0.30); color: #FFFFFF; } /* ============================================================================ 21. LEGADO ============================================================================ */ :root { --primary-orange: var(--krypta-cyan); --dark-orange: var(--krypta-blue); } .text-orange, .btn-orange { color: var(--krypta-cyan) !important; } /* ============================================================================ 22. GLOW LINE ============================================================================ */ .krypta-glow-line { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--krypta-cyan) 30%, var(--krypta-violet) 70%, transparent 100%); opacity: 0.5; margin: 24px 0; border: 0; } /* ============================================================================ 23. AJUSTES MOBILE ============================================================================ */ @media (max-width: 768px) { body { font-size: 13px; } .card { border-radius: 10px; } .btn { font-size: 13px; } .filtros-krypta { padding: 12px; } } /* ============================================================================ 24. AJUSTES DE FILTROS LEGADOS — força alinhamento Krypta nos filtros que ainda não foram migrados pra macro nova ============================================================================ */ .card.border-0.shadow-sm > .card-body.bg-light { background-color: var(--krypta-bg-card) !important; border: 1px solid var(--krypta-border) !important; border-radius: 12px; } /* ============================================================================ 25. DARK MODE — OVERRIDES AGRESSIVOS (2026-05-08 hotfix) ============================================================================ Resolve os problemas reportados: - Selects ficavam com texto branco em fundo branco - Multi-selects "transbordando" no dark - Gráficos com fundo branco (Chart.js/canvas) - Texto cinza ilegível em alguns componentes - Inputs e datepicker sem contraste Estratégia: regras COM data-theme="dark" + !important onde houver conflito com Bootstrap. Sem afetar light mode. ============================================================================ */ html[data-theme="dark"] { /* Reforço de contraste — texto sempre branco onde possível */ color-scheme: dark; } /* ----- SELECTS, INPUTS, TEXTAREAS no DARK ----- */ html[data-theme="dark"] select, html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.btn-check), html[data-theme="dark"] textarea, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #1A2233 !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.20) !important; } html[data-theme="dark"] select option, html[data-theme="dark"] .form-select option { background-color: #1A2233 !important; color: #FFFFFF !important; } html[data-theme="dark"] select:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: #1A2233 !important; color: #FFFFFF !important; border-color: var(--krypta-cyan) !important; box-shadow: 0 0 0 3px rgba(0,209,255,0.20) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: rgba(255,255,255,0.40) !important; } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled { background-color: #0F1626 !important; color: rgba(255,255,255,0.55) !important; } html[data-theme="dark"] .input-group-text { background-color: #1A2233 !important; color: #CBD5E1 !important; border-color: rgba(255,255,255,0.20) !important; } /* ----- LABELS no DARK ----- */ html[data-theme="dark"] label, html[data-theme="dark"] .form-label, html[data-theme="dark"] .filtro-label, html[data-theme="dark"] .form-check-label, html[data-theme="dark"] small, html[data-theme="dark"] .small { color: #CBD5E1 !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: #94A3B8 !important; } html[data-theme="dark"] strong, html[data-theme="dark"] b { color: #FFFFFF; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #FFFFFF !important; } /* ----- MULTI-SELECT (custom + mselect) no DARK ----- */ html[data-theme="dark"] .custom-multi-select, html[data-theme="dark"] .mselect, html[data-theme="dark"] .mselect-header, html[data-theme="dark"] .mselect-dropdown { background-color: #1A2233 !important; border-color: rgba(255,255,255,0.20) !important; color: #FFFFFF !important; } html[data-theme="dark"] .mselect-header { background-color: #1A2233 !important; color: #FFFFFF !important; } html[data-theme="dark"] .mselect-label, html[data-theme="dark"] .mselect-option, html[data-theme="dark"] .mselect .form-check-label { color: #FFFFFF !important; } html[data-theme="dark"] .mselect-label.is-placeholder { color: rgba(255,255,255,0.40) !important; } html[data-theme="dark"] .mselect-dropdown { background-color: #111827 !important; border: 1px solid rgba(255,255,255,0.20) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; } html[data-theme="dark"] .mselect-search input { background-color: #1A2233 !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.20) !important; } html[data-theme="dark"] .mselect-option:hover, html[data-theme="dark"] .mselect-all:hover { background-color: rgba(0,209,255,0.10) !important; } /* ----- DROPDOWNS no DARK ----- */ html[data-theme="dark"] .dropdown-menu { background-color: #111827 !important; border-color: rgba(255,255,255,0.20) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; } html[data-theme="dark"] .dropdown-item { color: #CBD5E1 !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus, html[data-theme="dark"] .dropdown-item.active { background-color: rgba(0,209,255,0.12) !important; color: #FFFFFF !important; } html[data-theme="dark"] .dropdown-divider { border-top-color: rgba(255,255,255,0.10) !important; } /* ----- CARDS no DARK (forçar fundo escuro mesmo em cards com bg-light inline) ----- */ html[data-theme="dark"] .card { background-color: #111827 !important; border-color: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; } html[data-theme="dark"] .card-header { background-color: #1A2233 !important; border-bottom-color: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; } html[data-theme="dark"] .card-body { color: #FFFFFF !important; } html[data-theme="dark"] .card .text-muted, html[data-theme="dark"] .card small, html[data-theme="dark"] .card .small { color: #94A3B8 !important; } /* bg-light no dark vira escuro elevated */ html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-body-tertiary, html[data-theme="dark"] .card-body.bg-light, html[data-theme="dark"] .card-header.bg-light, html[data-theme="dark"] div.bg-light, html[data-theme="dark"] .accordion-button.bg-light { background-color: #1A2233 !important; color: #FFFFFF !important; } html[data-theme="dark"] .bg-white { background-color: #111827 !important; color: #FFFFFF !important; } /* Borda do card que usava border-warning, border-success etc continua mas o conteúdo fica escuro */ html[data-theme="dark"] .card.border-warning, html[data-theme="dark"] .card.border-success, html[data-theme="dark"] .card.border-info, html[data-theme="dark"] .card.border-primary, html[data-theme="dark"] .card.border-danger { background-color: #111827 !important; } html[data-theme="dark"] .bg-warning.bg-opacity-25 { background-color: rgba(245,158,11,0.18) !important; color: #FFFFFF !important; } /* ----- TABELAS no DARK ----- */ html[data-theme="dark"] .table, html[data-theme="dark"] .table > :not(caption) > * > * { background-color: #111827 !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.10) !important; } html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table-light > :not(caption) > * > * { background-color: #1A2233 !important; color: #FFFFFF !important; border-bottom-color: rgba(255,255,255,0.18) !important; } /* Mantém os títulos de coluna (THEAD) com cor levemente atenuada */ html[data-theme="dark"] .table thead th { color: #CBD5E1 !important; } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(0,209,255,0.10) !important; color: #FFFFFF !important; } html[data-theme="dark"] .table-secondary > :not(caption) > * > * { background-color: #1A2233 !important; color: #94A3B8 !important; } html[data-theme="dark"] .table-warning > :not(caption) > * > * { background-color: rgba(245,158,11,0.18) !important; color: #FFE7B0 !important; } html[data-theme="dark"] .table-success > :not(caption) > * > * { background-color: rgba(34,197,94,0.18) !important; color: #BBF7D0 !important; } html[data-theme="dark"] .table-danger > :not(caption) > * > * { background-color: rgba(239,68,68,0.18) !important; color: #FECACA !important; } /* ----- MODAIS no DARK ----- */ html[data-theme="dark"] .modal-content { background-color: #111827 !important; border-color: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background-color: #1A2233 !important; border-color: rgba(255,255,255,0.10) !important; } html[data-theme="dark"] .modal-title { color: #FFFFFF !important; } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2) !important; } /* ----- TABS / NAV no DARK ----- */ html[data-theme="dark"] .nav-tabs { border-bottom-color: rgba(255,255,255,0.12) !important; } html[data-theme="dark"] .nav-tabs .nav-link { color: #94A3B8 !important; } html[data-theme="dark"] .nav-tabs .nav-link:hover { color: #FFFFFF !important; background-color: rgba(0,209,255,0.10) !important; } html[data-theme="dark"] .nav-tabs .nav-link.active { color: #FFFFFF !important; background-color: #111827 !important; border-color: rgba(255,255,255,0.10) rgba(255,255,255,0.10) #111827 !important; border-bottom-color: var(--krypta-cyan) !important; } /* ----- ALERTS no DARK (mais contraste) ----- */ html[data-theme="dark"] .alert-success { background-color: rgba(34,197,94,0.14) !important; border-color: rgba(34,197,94,0.40) !important; color: #BBF7D0 !important; } html[data-theme="dark"] .alert-warning { background-color: rgba(245,158,11,0.14) !important; border-color: rgba(245,158,11,0.40) !important; color: #FDE68A !important; } html[data-theme="dark"] .alert-danger { background-color: rgba(239,68,68,0.14) !important; border-color: rgba(239,68,68,0.40) !important; color: #FECACA !important; } html[data-theme="dark"] .alert-info { background-color: rgba(0,209,255,0.14) !important; border-color: rgba(0,209,255,0.40) !important; color: #BAE6FD !important; } /* ----- LISTS, ACCORDION, OFFCANVAS ----- */ html[data-theme="dark"] .list-group-item { background-color: #111827 !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.10) !important; } html[data-theme="dark"] .accordion { --bs-accordion-bg: #111827; --bs-accordion-color: #FFFFFF; --bs-accordion-border-color: rgba(255,255,255,0.10); --bs-accordion-active-bg: #1A2233; --bs-accordion-active-color: #FFFFFF; --bs-accordion-btn-bg: #111827; --bs-accordion-btn-color: #FFFFFF; } html[data-theme="dark"] .accordion-button { background-color: #111827 !important; color: #FFFFFF !important; } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #1A2233 !important; color: #FFFFFF !important; } html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); } html[data-theme="dark"] .accordion-body { background-color: #111827 !important; color: #FFFFFF !important; } html[data-theme="dark"] .offcanvas { background-color: #111827 !important; color: #FFFFFF !important; } /* ----- POPOVERS / TOOLTIPS ----- */ html[data-theme="dark"] .tooltip-inner { background-color: #1A2233 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.15); } html[data-theme="dark"] .popover { background-color: #1A2233 !important; border-color: rgba(255,255,255,0.20) !important; } html[data-theme="dark"] .popover-header { background-color: #111827 !important; color: #FFFFFF !important; border-bottom-color: rgba(255,255,255,0.15) !important; } html[data-theme="dark"] .popover-body { color: #FFFFFF !important; } /* ----- BADGES e PILLS no DARK (manter cores fortes) ----- */ html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.text-dark { background-color: #1A2233 !important; color: #FFFFFF !important; } /* ----- FILTROS-KRYPTA wrapper ----- */ html[data-theme="dark"] .filtros-krypta { background-color: #111827 !important; border-color: rgba(255,255,255,0.10) !important; } /* ============================================================================ 26. CHART.JS / CANVAS / GRÁFICOS — fundo escuro no dark ============================================================================ */ html[data-theme="dark"] canvas, html[data-theme="dark"] .chart-container, html[data-theme="dark"] .chart-area { background-color: transparent !important; } html[data-theme="dark"] .chart-wrapper { background-color: #111827 !important; border-radius: 12px; padding: 8px; } /* Container que abriga gráficos no sistema costuma ter classes 'chart-box' ou similares */ html[data-theme="dark"] [class*="chart"]:not(canvas) { color: #FFFFFF; } /* SVG inline (alguns gráficos custom usam SVG) */ html[data-theme="dark"] svg text { fill: #CBD5E1 !important; } html[data-theme="dark"] svg .axis line, html[data-theme="dark"] svg .axis path, html[data-theme="dark"] svg .grid line { stroke: rgba(255,255,255,0.15) !important; } /* ----- LEGENDA / TICKS Chart.js (defaults globais setados no JS — ver injeção no base.html) ----- O CSS sozinho não muda os textos do canvas. A injeção de Chart.defaults.color está em base.html. Esta seção fica apenas pra quando os labels são DOM. ============================================================================ */ html[data-theme="dark"] .chartjs-tooltip, html[data-theme="dark"] .chartjs-legend { background-color: #1A2233 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.15) !important; } /* ============================================================================ 27. EMISSÃO RÁPIDA (hotfix dark) ============================================================================ */ html[data-theme="dark"] .card-header.bg-dark { background-color: #030712 !important; color: #FFFFFF !important; } html[data-theme="dark"] .card-body .bg-light.rounded { background-color: #1A2233 !important; color: #FFFFFF !important; } /* ============================================================================ 28. FLATPICKR no DARK (reforço de contraste) ============================================================================ */ html[data-theme="dark"] .flatpickr-calendar { background-color: #111827 !important; color: #FFFFFF !important; } html[data-theme="dark"] .flatpickr-day { color: #CBD5E1 !important; } html[data-theme="dark"] .flatpickr-day:hover:not(.flatpickr-disabled) { background-color: rgba(0,209,255,0.18) !important; color: #FFFFFF !important; } html[data-theme="dark"] .flatpickr-day.today { border-color: var(--krypta-cyan) !important; color: var(--krypta-cyan) !important; } html[data-theme="dark"] .flatpickr-day.flatpickr-disabled, html[data-theme="dark"] .flatpickr-day.prevMonthDay, html[data-theme="dark"] .flatpickr-day.nextMonthDay { color: rgba(255,255,255,0.30) !important; } html[data-theme="dark"] .flatpickr-month, html[data-theme="dark"] .flatpickr-current-month, html[data-theme="dark"] .flatpickr-monthDropdown-months, html[data-theme="dark"] .numInputWrapper input, html[data-theme="dark"] .flatpickr-weekday { color: #FFFFFF !important; background-color: transparent !important; } html[data-theme="dark"] .flatpickr-prev-month, html[data-theme="dark"] .flatpickr-next-month { color: #FFFFFF !important; fill: #FFFFFF !important; } html[data-theme="dark"] .flatpickr-prev-month svg, html[data-theme="dark"] .flatpickr-next-month svg { fill: #FFFFFF !important; } /* ============================================================================ 29. AUTO-COMPLETE / DATALIST / NUMERIC INPUTS ============================================================================ */ html[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button, html[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button { filter: invert(1); } /* Webkit autofill — Chrome polui o input com fundo amarelo */ html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #1A2233 inset !important; -webkit-text-fill-color: #FFFFFF !important; caret-color: #FFFFFF !important; } /* ============================================================================ 30. UTILITÁRIOS GERAIS DARK (catch-all defensivo) ============================================================================ */ html[data-theme="dark"] .text-dark { color: #FFFFFF !important; } html[data-theme="dark"] .text-black { color: #FFFFFF !important; } html[data-theme="dark"] .border { border-color: rgba(255,255,255,0.15) !important; } html[data-theme="dark"] hr { border-color: rgba(255,255,255,0.10) !important; } html[data-theme="dark"] .border-secondary, html[data-theme="dark"] .border-light { border-color: rgba(255,255,255,0.15) !important; } /* Texto vermelho do "Sair" na sidebar — manter visível */ html[data-theme="dark"] .sidebar a.text-danger { color: #FCA5A5 !important; } html[data-theme="dark"] .sidebar a.text-danger:hover { background-color: rgba(239,68,68,0.10) !important; color: #FFFFFF !important; } /* ============================================================================ 31. MSELECT — COMPORTAMENTO BASE (HOTFIX 2026-05-08 #2) ============================================================================ O componente mselect estava sem o CSS comportamental — o dropdown ficava sempre aberto. Aqui criamos o display correto: dropdown escondido por default, mostrado quando .mselect ganha .open. ============================================================================ */ /* Container — relativo pra ancorar o dropdown absolutamente */ .mselect { position: relative; display: inline-block; width: 100%; } /* Header (parte clicável) */ .mselect-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; /* FIX 2026-05-12 (d): leve aumento do padding horizontal (10→12px) pra dar respiro ao texto do placeholder. */ padding: 6px 12px; border: 1px solid var(--krypta-border-strong); border-radius: 8px; background-color: var(--krypta-bg-card); color: var(--krypta-text-primary); cursor: pointer; user-select: none; min-height: 34px; font-size: 14px; transition: border-color 0.15s ease; } .mselect-header:hover { border-color: var(--krypta-cyan); } .mselect-header .fa-chevron-down { transition: transform 0.15s ease; color: var(--krypta-text-muted); font-size: 12px; } .mselect.open .mselect-header .fa-chevron-down { transform: rotate(180deg); } .mselect-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mselect-label.is-placeholder { color: var(--krypta-text-faded); } /* Dropdown — escondido por default, mostrado quando .mselect.open */ .mselect-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1050; min-width: 220px; max-width: 360px; max-height: 320px; overflow-y: auto; background-color: var(--krypta-bg-card); border: 1px solid var(--krypta-border-strong); border-radius: 10px; box-shadow: var(--krypta-shadow-medium); padding: 8px; } .mselect.open .mselect-dropdown { display: block; } /* Search dentro do dropdown */ .mselect-search { margin-bottom: 6px; } .mselect-search input { width: 100%; padding: 5px 9px; border: 1px solid var(--krypta-border-strong); border-radius: 6px; background-color: var(--krypta-bg-page); color: var(--krypta-text-primary); font-size: 13px; } .mselect-search input:focus { outline: none; border-color: var(--krypta-cyan); box-shadow: 0 0 0 2px rgba(0,184,230,0.18); } /* "Selecionar todos" */ .mselect-all { /* FIX 2026-05-12 (d): padding-left maior pra acomodar o checkbox do Bootstrap `.form-check` (que usa position:absolute; left:0 dentro de um container com padding-left:1.5em). Antes era 4px → checkbox cortado à esquerda. */ padding: 5px 4px 5px 8px; border-bottom: 1px solid var(--krypta-border); margin-bottom: 4px; } .mselect-all label { color: var(--krypta-text-primary); cursor: pointer; margin-left: 6px; } /* Cada opção */ .mselect-option { /* FIX 2026-05-12 (d): idem `.mselect-all` — padding-left maior garante que o checkbox `.form-check-input` não fique cortado. */ padding: 4px 4px 4px 8px; border-radius: 4px; } .mselect-option:hover { background-color: rgba(0,184,230,0.06); } .mselect-option label { color: var(--krypta-text-primary); cursor: pointer; margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; } .mselect-badge { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* Item escondido por busca */ .mselect-option.d-none { display: none !important; } /* Estilo "selecionado" — quando há selected, badge mostra contador */ .mselect-label.has-selected { color: var(--krypta-cyan); font-weight: 600; } /* DARK MODE — sobrescreve cores específicas */ html[data-theme="dark"] .mselect-header { background-color: #1A2233 !important; border-color: rgba(255,255,255,0.20) !important; color: #FFFFFF !important; } /* FIX 2026-05-12 (e) — DEFESA EM PROFUNDIDADE: força padding-left suficiente em QUALQUER .form-check dentro de QUALQUER dropdown de multi-select do sistema. Resolve definitivamente o problema dos checkboxes "cortados à esquerda" — que vinha porque algumas regras sobrescreviam o padding-left:1.5em padrão do Bootstrap com um padding menor, jogando o checkbox absoluto pra fora da área visível. `box-sizing` é forçado pra evitar que algum reset zere essa conta. */ .mselect-dropdown .form-check, .mselect-dropdown .mselect-option, .mselect-dropdown .mselect-all, .custom-multi-select .dropdown-list .form-check, .multi-dropdown .form-check, [id^="msv_drop_"] .form-check { box-sizing: border-box; padding-left: 1.75em !important; position: relative; } .mselect-dropdown .form-check .form-check-input, .mselect-dropdown .mselect-option .form-check-input, .mselect-dropdown .mselect-all .form-check-input, .custom-multi-select .dropdown-list .form-check .form-check-input, .multi-dropdown .form-check .form-check-input, [id^="msv_drop_"] .form-check .form-check-input { margin-left: -1.5em; margin-top: 0.25em; } html[data-theme="dark"] .mselect-header:hover { border-color: var(--krypta-cyan) !important; } html[data-theme="dark"] .mselect-header .fa-chevron-down { color: rgba(255,255,255,0.55) !important; } html[data-theme="dark"] .mselect-dropdown { background-color: #111827 !important; border-color: rgba(255,255,255,0.20) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; } html[data-theme="dark"] .mselect-search input { background-color: #1A2233 !important; border-color: rgba(255,255,255,0.18) !important; color: #FFFFFF !important; } html[data-theme="dark"] .mselect-all { border-bottom-color: rgba(255,255,255,0.10) !important; } html[data-theme="dark"] .mselect-all label, html[data-theme="dark"] .mselect-option label { color: #FFFFFF !important; } html[data-theme="dark"] .mselect-option:hover { background-color: rgba(0,209,255,0.10) !important; } html[data-theme="dark"] .mselect-label.is-placeholder { color: rgba(255,255,255,0.45) !important; } /* ============================================================================ 32. CARDS COM bg-white / bg-light INLINE EM TEMPLATES — DARK FIX ============================================================================ Vários templates usam estilos inline (style="background:#fff..." ou classes como .card.bg-white) que não tinham override no dark. Aqui forçamos. ============================================================================ */ /* Cards de KPI (Dashboard de Performance) — costumam ter background branco inline */ html[data-theme="dark"] .card[style*="background"], html[data-theme="dark"] .card[style*="rgb(255"], html[data-theme="dark"] .card[style*="#fff"], html[data-theme="dark"] .card[style*="#FFF"] { background-color: #111827 !important; color: #FFFFFF !important; } html[data-theme="dark"] .card-body[style*="background"], html[data-theme="dark"] .card-body[style*="rgb(255"], html[data-theme="dark"] .card-body[style*="#fff"], html[data-theme="dark"] .card-body[style*="#FFF"] { background-color: transparent !important; color: #FFFFFF !important; } /* Containers que usaram background inline #fff */ html[data-theme="dark"] div[style*="background:#fff"], html[data-theme="dark"] div[style*="background: #fff"], html[data-theme="dark"] div[style*="background-color:#fff"], html[data-theme="dark"] div[style*="background-color: #fff"], html[data-theme="dark"] div[style*="background:white"], html[data-theme="dark"] div[style*="background: white"] { background-color: #111827 !important; color: #FFFFFF !important; } html[data-theme="dark"] div[style*="background:#f"], html[data-theme="dark"] div[style*="background: #f"], html[data-theme="dark"] div[style*="background-color:#f"], html[data-theme="dark"] div[style*="background-color: #f"] { background-color: #1A2233 !important; color: #FFFFFF !important; } /* Textos pretos hardcoded em estilos inline */ html[data-theme="dark"] *[style*="color:#000"], html[data-theme="dark"] *[style*="color: #000"], html[data-theme="dark"] *[style*="color:black"], html[data-theme="dark"] *[style*="color: black"], html[data-theme="dark"] *[style*="color:#111"], html[data-theme="dark"] *[style*="color:#1f2937"], html[data-theme="dark"] *[style*="color:#374151"], html[data-theme="dark"] *[style*="color:#1e293b"] { color: #FFFFFF !important; } html[data-theme="dark"] *[style*="color:#6b7280"], html[data-theme="dark"] *[style*="color: #6b7280"], html[data-theme="dark"] *[style*="color:#64748b"], html[data-theme="dark"] *[style*="color: #64748b"], html[data-theme="dark"] *[style*="color:#94a3b8"] { color: #CBD5E1 !important; } /* "Painel Executivo por Equipe" tem cards brancos com texto preto — força tudo */ html[data-theme="dark"] .container-fluid > div[style*="background"]:not([style*="gradient"]), html[data-theme="dark"] section[style*="background"]:not([style*="gradient"]) { background-color: #111827 !important; color: #FFFFFF !important; } /* ============================================================================ 33. GRÁFICOS NO DARK — texto branco/cinza, eixos visíveis ============================================================================ Reforça o JS de Chart.defaults com regras CSS para casos onde o canvas está dentro de um wrapper com fundo branco fixo, ou para SVG charts. ============================================================================ */ /* Wrappers de gráfico que tinham bg-white inline */ html[data-theme="dark"] .chart-card, html[data-theme="dark"] .chart-wrapper, html[data-theme="dark"] .grafico-container, html[data-theme="dark"] .chart-box, html[data-theme="dark"] [class*="chart-bg"] { background-color: #111827 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; } /* SVG inline (alguns gráficos custom usam SVG ao invés de canvas) */ html[data-theme="dark"] svg text, html[data-theme="dark"] svg .axis text, html[data-theme="dark"] svg .label text, html[data-theme="dark"] svg tspan { fill: #E2E8F0 !important; color: #E2E8F0 !important; } html[data-theme="dark"] svg .axis line, html[data-theme="dark"] svg .axis path, html[data-theme="dark"] svg .grid line, html[data-theme="dark"] svg .domain { stroke: rgba(255,255,255,0.18) !important; } /* Tooltip do Chart.js em DOM (fallback) */ html[data-theme="dark"] .chartjs-tooltip-key, html[data-theme="dark"] .chartjs-tooltip-value { color: #FFFFFF !important; } /* ============================================================================ 34. PROGRESS BARS, BADGES E PEQUENOS CARDS COM bg-white ============================================================================ */ /* Barras de progresso (atingimento de meta) */ html[data-theme="dark"] .progress { background-color: #1A2233 !important; } /* Cards de KPI com texto cinza específico no dark — forçar branco */ html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .number-card { background-color: #111827 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.10); } /* Badges discretos (37%, 47.7%, etc) com bg cinza claro — viram bg escuro */ html[data-theme="dark"] .badge-soft, html[data-theme="dark"] .badge-light { background-color: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; } /* ============================================================================ 35. TABELAS COM CABEÇALHO BRANCO HARDCODED — DARK FIX ============================================================================ */ html[data-theme="dark"] table[style*="background"], html[data-theme="dark"] thead[style*="background"], html[data-theme="dark"] tr[style*="background"]:not([style*="gradient"]) { background-color: #111827 !important; color: #FFFFFF !important; } html[data-theme="dark"] table thead tr th[style*="background"] { background-color: #1A2233 !important; color: #CBD5E1 !important; } /* ============================================================================ 36. CLASSES LEGADAS COM BG-WHITE EM