/* ═══════════════════════════════════════════════════════════ WBIM ERP — Sistema de Temas Aplicado via [data-theme="..."] no data-bs-theme="dark" ativa o dark mode nativo do Bootstrap 5.3 ═══════════════════════════════════════════════════════════ */ /* ── Transição suave ao trocar tema ─────────────────────── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease; } /* ── Tema: Claro (padrão) ───────────────────────────────── */ :root, [data-theme="light"] { --sidebar-bg: #ffffff; --sidebar-border: #e5e5e5; --sidebar-title-color: var(--text-main); --sidebar-text: #495057; /* Mesma família de azul do conteúdo WBIM (--v2-surface-soft / área Clientes) */ --sidebar-active-bg: #eef3ff; --sidebar-active-color: #133a73; --sidebar-active-border: #133a73; --sidebar-hover-bg: #f1f3f9; /* Fundo coluna principal + toolbar (alinhado ao azul-claro do ERP) */ --erp-shell-bg: #f4f7ff; --body-bg: #f8f9fa; --card-bg: #ffffff; --card-header-bg: #ffffff; --card-border: rgba(0,0,0,.125); --modal-bg: #ffffff; --modal-header-bg: #f8f9fa; --table-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #ced4da; --text-main: #212529; --text-muted: #6c757d; --accent: #0d6efd; --accent-rgb: 13, 110, 253; --divider: #e9ecef; } /* ── Tema: Escuro ───────────────────────────────────────── */ [data-theme="dark"] { --sidebar-bg: #1a1d27; --sidebar-border: #2d3244; --sidebar-title-color: #f1f5f9; --sidebar-text: #94a3b8; --sidebar-active-bg: rgba(77,171,247,0.15); --sidebar-active-color: #60a5fa; --sidebar-active-border: #3b82f6; --sidebar-hover-bg: rgba(255,255,255,0.06); --body-bg: #0f1117; --erp-shell-bg: var(--body-bg); --card-bg: #1c2032; --card-header-bg: #1e2438; --card-border: #2d3244; --modal-bg: #1c2032; --modal-header-bg: #151928; --table-header-bg: #1e2438; --input-bg: #1c2032; --input-border: #374151; --text-main: #f1f5f9; --text-muted: #64748b; --accent: #3b82f6; --accent-rgb: 59, 130, 246; --divider: #2d3244; } /* ── Tema: Personalizado (MVP = mesmo palette que Claro; futuro: preferências do usuário) ── */ [data-theme="custom"] { --sidebar-bg: #ffffff; --sidebar-border: #e5e5e5; --sidebar-title-color: var(--text-main); --sidebar-text: #495057; --sidebar-active-bg: #eef3ff; --sidebar-active-color: #133a73; --sidebar-active-border: #133a73; --sidebar-hover-bg: #f1f3f9; --erp-shell-bg: #f4f7ff; --body-bg: #f8f9fa; --card-bg: #ffffff; --card-header-bg: #ffffff; --card-border: rgba(0,0,0,.125); --modal-bg: #ffffff; --modal-header-bg: #f8f9fa; --table-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #ced4da; --text-main: #212529; --text-muted: #6c757d; --accent: #0d6efd; --accent-rgb: 13, 110, 253; --divider: #e9ecef; } /* ── Dark mode: overrides dos !important do styles.css ──────────────────── */ /* O styles.css usa !important em body/.container-fluid/.erp-main, então precisamos de !important aqui também (themes.css é carregado depois). */ [data-theme="dark"] body, [data-theme="dark"] .main-content, [data-theme="dark"] .container-fluid, [data-theme="dark"] .erp-main { background-color: var(--body-bg) !important; } /* Cabeçalhos de página (h3 + subtitle dentro de .container-fluid) */ [data-theme="dark"] .container-fluid .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-main); } /* Cards */ [data-theme="dark"] .card { background-color: var(--card-bg) !important; border-color: var(--card-border) !important; } [data-theme="dark"] .card-header { background-color: var(--card-header-bg) !important; border-color: var(--card-border) !important; color: var(--text-main) !important; } [data-theme="dark"] .card-body { color: var(--text-main); } /* Modais */ [data-theme="dark"] .modal-content { background-color: var(--modal-bg) !important; border-color: var(--card-border) !important; } [data-theme="dark"] .modal-header { background-color: var(--modal-header-bg) !important; border-color: var(--card-border) !important; color: var(--text-main) !important; } [data-theme="dark"] .modal-body, [data-theme="dark"] .modal-footer { background-color: var(--modal-bg) !important; color: var(--text-main); border-color: var(--card-border) !important; } /* Tabelas */ [data-theme="dark"] .table { color: var(--text-main); } [data-theme="dark"] .table th { background-color: var(--table-header-bg) !important; color: var(--text-main) !important; } [data-theme="dark"] .table td { border-color: var(--card-border); color: var(--text-main); } [data-theme="dark"] .table-light, [data-theme="dark"] .table-light > * { background-color: var(--table-header-bg) !important; color: var(--text-main) !important; } [data-theme="dark"] .table-hover tbody tr:hover > * { background-color: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03) !important; } /* Formulários */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-theme="dark"] .form-label { color: var(--text-main); } [data-theme="dark"] .form-text { color: var(--text-muted); } [data-theme="dark"] .form-check-label { color: var(--text-main); } [data-theme="dark"] .input-group-text { background-color: var(--table-header-bg) !important; border-color: var(--input-border) !important; color: var(--text-muted); } /* Abas */ [data-theme="dark"] .nav-tabs { border-color: var(--card-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-muted); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--text-main); border-color: var(--card-border); background: rgba(255,255,255,0.04); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--accent); background-color: var(--card-bg) !important; border-color: var(--card-border) var(--card-border) var(--card-bg); } [data-theme="dark"] .tab-content { background-color: transparent; color: var(--text-main); } /* Alertas */ [data-theme="dark"] .alert-info { background-color: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.3) !important; color: #93c5fd !important; } [data-theme="dark"] .alert-success { background-color: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.3) !important; color: #86efac !important; } [data-theme="dark"] .alert-warning { background-color: rgba(234,179,8,0.12) !important; border-color: rgba(234,179,8,0.3) !important; color: #fde047 !important; } [data-theme="dark"] .alert-danger { background-color: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; } [data-theme="dark"] .alert-secondary{ background-color: rgba(148,163,184,0.1) !important; border-color: rgba(148,163,184,0.2) !important; color: #94a3b8 !important; } /* Botões outline */ [data-theme="dark"] .btn-outline-secondary { color: var(--text-muted); border-color: var(--input-border); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--sidebar-hover-bg); color: var(--text-main); } [data-theme="dark"] .btn-outline-danger { color: #fca5a5; border-color: rgba(239,68,68,0.5); } [data-theme="dark"] .btn-outline-danger:hover { background-color: rgba(239,68,68,0.15); } [data-theme="dark"] .btn-outline-success { color: #86efac; border-color: rgba(34,197,94,0.5); } [data-theme="dark"] .btn-outline-success:hover { background-color: rgba(34,197,94,0.15); } [data-theme="dark"] .btn-close { filter: invert(1); } /* Dropdown */ [data-theme="dark"] .dropdown-menu { background-color: var(--card-bg) !important; border-color: var(--card-border) !important; } [data-theme="dark"] .dropdown-item { color: var(--text-main); } [data-theme="dark"] .dropdown-item:hover { background-color: var(--sidebar-hover-bg); } [data-theme="dark"] .dropdown-divider { border-color: var(--card-border); } /* Badges e utilitários */ [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-dark { color: var(--text-main) !important; } [data-theme="dark"] .bg-white { background-color: var(--card-bg) !important; } [data-theme="dark"] .bg-light { background-color: var(--table-header-bg) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-top { border-color: var(--card-border) !important; } /* Sombras e paginação */ [data-theme="dark"] .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.5) !important; } [data-theme="dark"] .page-link { background-color: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--accent); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--table-header-bg) !important; opacity: .5; } /* Filtros e misc */ [data-theme="dark"] .filter-section { background-color: var(--table-header-bg) !important; } [data-theme="dark"] select option { background-color: var(--card-bg); color: var(--text-main); } [data-theme="dark"] .spinner-overlay { background-color: rgba(15,17,23,0.85) !important; } [data-theme="dark"] hr { border-color: var(--card-border); } [data-theme="dark"] code { background-color: rgba(255,255,255,0.08); color: #f8c8d4; } /* ═══════════════════════════════════════════════════════════ Aplicação das variáveis ao layout ═══════════════════════════════════════════════════════════ */ /* Sidebar */ .erp-sidebar { background: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important; } .erp-sidebar .sidebar-title { color: var(--sidebar-title-color) !important; border-bottom: 1px solid var(--sidebar-border) !important; } .erp-sidebar li { color: var(--sidebar-text) !important; } .erp-sidebar li:hover:not(.active) { background: var(--sidebar-hover-bg) !important; color: var(--sidebar-text) !important; border-left-color: transparent !important; } .erp-sidebar li.active { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-color) !important; border-left-color: var(--sidebar-active-border) !important; } .erp-sidebar li i { color: inherit; } /* Corpo */ body { background-color: var(--body-bg) !important; } .erp-main { background-color: var(--body-bg) !important; } /* Accent color para Bootstrap (botão primário, foco, etc.) */ .btn-primary { background-color: var(--accent) !important; border-color: var(--accent) !important; } .btn-primary:hover { filter: brightness(0.9); } .btn-outline-primary { color: var(--accent) !important; border-color: var(--accent) !important; } .btn-outline-primary:hover { background-color: var(--accent) !important; color: #fff !important; } .form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25) !important; } .nav-link.active { color: var(--accent) !important; } .page-item.active .page-link { background-color: var(--accent) !important; border-color: var(--accent) !important; } a { color: var(--accent); } a:hover { color: color-mix(in srgb, var(--accent) 70%, black 30%); }