/* Tema claro/escuro global com variáveis e ajustes responsivos */ /* Aplicar tema inicial via atributo data-theme no */ :root[data-theme="light"] { /* Bootstrap core */ --bs-body-bg: #f6f7fb; --bs-body-color: #1f2937; --bs-border-color: #dee2e6; --bs-card-bg: #ffffff; --bs-card-border-color: #e5e7eb; --bs-heading-color: #111827; /* Paleta app */ --primary-color: #1f3a5f; /* ajusta para um azul mais elegante */ --secondary-color: #3b82f6; /* azul vivo */ --accent-color: #ef4444; --success-color: #16a34a; --warning-color: #f59e0b; --info-color: #0ea5e9; --danger-color: #ef4444; /* Dashboard */ --dashboard-icon-color: #111827; /* preto em tema claro */ --gray-100: #f6f7fb; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; } :root[data-theme="dark"] { /* Bootstrap core */ --bs-body-bg: #0f172a; /* slate-950 */ --bs-body-color: #e5e7eb; /* gray-200 */ --bs-border-color: #334155; /* slate-600 */ --bs-card-bg: #111827; /* gray-900 */ --bs-card-border-color: #1f2937; /* gray-800 */ --bs-heading-color: #f8fafc; /* slate-50 */ /* Paleta app escura */ --primary-color: #111827; /* base de sidebar */ --secondary-color: #2563eb; /* azul vivo coerente no dark */ --accent-color: #f87171; --success-color: #22c55e; --warning-color: #fbbf24; --info-color: #38bdf8; --danger-color: #f87171; /* Dashboard */ --dashboard-icon-color: #ffffff; /* branco em tema escuro */ --gray-100: #111827; --gray-200: #1f2937; --gray-300: #374151; --gray-400: #4b5563; --gray-500: #6b7280; --gray-600: #9ca3af; --gray-700: #cbd5e1; --gray-800: #e5e7eb; --gray-900: #f8fafc; } /* Corpo e tipografia */ html[data-theme] body { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; } html[data-theme] h1, h2, h3, h4, h5, h6 { color: var(--bs-heading-color); } /* Sidebar */ html[data-theme] .sidebar { background: var(--primary-color) !important; } html[data-theme="dark"] .sidebar .nav-link { color: rgba(255,255,255,0.85); } html[data-theme="dark"] .sidebar .nav-link.active { background: rgba(37, 99, 235, 0.9) !important; } html[data-theme="dark"] .sidebar .nav-link:hover { background: rgba(255,255,255,0.08) !important; } /* Navbar */ html[data-theme] .navbar { background-color: var(--bs-card-bg) !important; border: 1px solid var(--bs-card-border-color) !important; } html[data-theme] .navbar .btn, .dropdown-menu { border-color: var(--bs-border-color) !important; } /* Botão outline mais legível no dark */ html[data-theme="dark"] .btn-outline-secondary { color: #e5e7eb !important; border-color: #475569 !important; } html[data-theme="dark"] .btn-outline-secondary:hover { background: #1f2937 !important; color: #f8fafc !important; border-color: #64748b !important; } /* Cards */ html[data-theme] .card, html[data-theme] .stat-card, html[data-theme] .timeline-content { background: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-card-border-color) !important; } html[data-theme] .card-header { background: var(--bs-card-bg) !important; border-bottom-color: var(--bs-border-color) !important; } /* Cards customizados (como lista de produtos no mobile) */ html[data-theme] .product-card { background: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* Ícones do dashboard: preto no claro, branco no escuro */ html[data-theme] .stat-card .icon { color: var(--dashboard-icon-color) !important; } /* Tabelas */ html[data-theme] .table { background: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; } html[data-theme] .table thead th { background: var(--gray-200) !important; color: var(--gray-700) !important; border-bottom-color: var(--bs-border-color) !important; } html[data-theme] .table tbody tr:hover { background: rgba(148,163,184,0.1) !important; } html[data-theme] .table td, html[data-theme] .table th { border-color: var(--bs-border-color) !important; } html[data-theme="dark"] .text-muted { color: #9ca3af !important; } /* Formulários */ html[data-theme] .form-control, html[data-theme] .form-select { background: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-theme] .form-control:focus, html[data-theme] .form-select:focus { border-color: var(--secondary-color) !important; box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25) !important; } /* Badges / Status */ html[data-theme] .badge { border: 1px solid rgba(0,0,0,0.0); } /* Alertas */ html[data-theme] .alert { border-color: var(--bs-border-color) !important; } /* Toastr escuro */ html[data-theme="dark"] .toast { background: #0b1220 !important; color: #e5e7eb !important; } html[data-theme="dark"] .toast-title { color: #f8fafc !important; } html[data-theme="dark"] .toast-message { color: #e5e7eb !important; } html[data-theme="dark"] #toast-container > div { box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; border: 1px solid #334155 !important; } html[data-theme="dark"] #toast-container > .toast-success { background-color: #14532d !important; } html[data-theme="dark"] #toast-container > .toast-info { background-color: #0c4a6e !important; } html[data-theme="dark"] #toast-container > .toast-warning { background-color: #7c2d12 !important; } html[data-theme="dark"] #toast-container > .toast-error { background-color: #581c1c !important; } html[data-theme="dark"] #toast-container .toast-close-button { color: #e5e7eb !important; opacity: 0.9 !important; } html[data-theme="dark"] #toast-container .toast-progress { background: #3b82f6 !important; } /* DataTables no dark */ html[data-theme] .dataTables_wrapper .dataTables_info, html[data-theme] .dataTables_wrapper .dataTables_length label, html[data-theme] .dataTables_wrapper .dataTables_filter label, html[data-theme] .dataTables_wrapper .dataTables_paginate a { color: var(--bs-body-color) !important; } html[data-theme="dark"] .dataTables_wrapper .form-control, html[data-theme="dark"] .dataTables_wrapper select { background: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-theme="dark"] .dataTables_wrapper .paginate_button.current, html[data-theme="dark"] .dataTables_wrapper .paginate_button:hover { background: #1f2937 !important; color: #f8fafc !important; border-color: #334155 !important; } /* Placeholders no dark */ html[data-theme="dark"] ::placeholder { color: #9ca3af !important; opacity: 1; } /* Botão de tema no topo */ .theme-toggle-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; } /* Melhorias de responsividade rápida para tabelas em telas pequenas */ @media (max-width: 576px) { .main-content .table { display: block; overflow-x: auto; white-space: nowrap; } .main-content .dataTables_wrapper .row { gap: .5rem; } } /* Rolagem mais elegante no dark */ html[data-theme="dark"] ::-webkit-scrollbar { height: 10px; width: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b1220; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }