/* Temas claro / escuro — carregar por último no */ /* Variáveis tema escuro (prioridade sobre :root dos outros CSS) */ html[data-theme="dark"] { --bg-color: #121421 !important; --text-primary: #e8eaed !important; --text-secondary: #9aa0b8 !important; --card-bg: #1a1f2e !important; --input-bg: #252a3d !important; --border-color: rgba(255, 255, 255, 0.1) !important; --table-header-bg: #252a3d !important; --table-row-hover: rgba(255, 255, 255, 0.05) !important; --modal-overlay: rgba(0, 0, 0, 0.65) !important; --badge-bg: #312e81 !important; --badge-text: #c4b5fd !important; } html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--bg-color) !important; color: var(--text-primary) !important; } html[data-theme="dark"] .main-content { background-color: transparent !important; color: var(--text-primary) !important; } /* Tipografia */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .profile-header h1, html[data-theme="dark"] strong, html[data-theme="dark"] .section-title-main { color: var(--text-primary) !important; } html[data-theme="dark"] p, html[data-theme="dark"] label, html[data-theme="dark"] .profile-header p, html[data-theme="dark"] span, html[data-theme="dark"] .text-muted, html[data-theme="dark"] .codprod-badge { color: var(--text-secondary) !important; } /* Superfícies (cards, painéis, tabelas) */ html[data-theme="dark"] .profile-card, html[data-theme="dark"] .dash-card, html[data-theme="dark"] .widget-box, html[data-theme="dark"] .search-container, html[data-theme="dark"] .table-container, html[data-theme="dark"] .user-card, html[data-theme="dark"] .alert-card, html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-body, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .filter-bar, html[data-theme="dark"] .filter-container, html[data-theme="dark"] .filtros-container, html[data-theme="dark"] .dash-filter-bar, html[data-theme="dark"] .filter-box, html[data-theme="dark"] .filter-section, html[data-theme="dark"] .config-section, html[data-theme="dark"] .report-card, html[data-theme="dark"] .preview-area, html[data-theme="dark"] .tab-content-box, html[data-theme="dark"] .permissions-container, html[data-theme="dark"] .relatorio-filtros, html[data-theme="dark"] .login-container, html[data-theme="dark"] .multi-item-list, html[data-theme="dark"] .inner-table, html[data-theme="dark"] .products-table, html[data-theme="dark"] .finalizar-table, html[data-theme="dark"] .expanded-content, html[data-theme="dark"] .concluir-modal-content .item-concluir, html[data-theme="dark"] .stock-detail-box, html[data-theme="dark"] .ordem-card, html[data-theme="dark"] .requisicao-card, html[data-theme="dark"] .contagem-card, html[data-theme="dark"] .avaria-card, html[data-theme="dark"] .tratamento-card { background-color: var(--card-bg) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Inline styles com fundo branco nas páginas JSP */ html[data-theme="dark"] .main-content [style*="background: white"], html[data-theme="dark"] .main-content [style*="background-color: white"], html[data-theme="dark"] .main-content [style*="background:white"], html[data-theme="dark"] .main-content [style*="background-color:white"], html[data-theme="dark"] .main-content [style*="background: #f8f9fa"], html[data-theme="dark"] .main-content [style*="background:#f8f9fa"], html[data-theme="dark"] .main-content [style*="background-color: #f8f9fa"], html[data-theme="dark"] .modal [style*="background: white"], html[data-theme="dark"] .modal [style*="background-color: white"] { background-color: var(--card-bg) !important; color: var(--text-primary) !important; } /* Relatórios — cards e abas */ html[data-theme="dark"] .report-card h3 { color: var(--text-primary) !important; } html[data-theme="dark"] .report-card p, html[data-theme="dark"] .filtros-title { color: var(--text-secondary) !important; } html[data-theme="dark"] .filtros-title { border-bottom-color: var(--border-color) !important; } html[data-theme="dark"] .btn-report { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } html[data-theme="dark"] .btn-report:hover { background-color: #34d399 !important; color: #0f172a !important; border-color: #34d399 !important; } html[data-theme="dark"] .sub-tab { border-bottom-color: var(--border-color) !important; } html[data-theme="dark"] .sub-tab-link { color: var(--text-secondary) !important; } html[data-theme="dark"] .sub-tab-link.active { color: #34d399 !important; border-bottom-color: #34d399 !important; } html[data-theme="dark"] .filter-group label { color: var(--text-secondary) !important; } html[data-theme="dark"] .btn-filter { background-color: #059669 !important; color: #fff !important; } /* Tabelas */ html[data-theme="dark"] table, html[data-theme="dark"] .products-table, html[data-theme="dark"] .inner-table, html[data-theme="dark"] .finalizar-table { background-color: var(--card-bg) !important; } html[data-theme="dark"] .products-table th, html[data-theme="dark"] .inner-table th, html[data-theme="dark"] table thead th, html[data-theme="dark"] .finalizar-table th { background-color: var(--table-header-bg) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .products-table td, html[data-theme="dark"] .inner-table td, html[data-theme="dark"] table td, html[data-theme="dark"] .finalizar-table td { color: var(--text-primary) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .widget-item, html[data-theme="dark"] .expandable-row:hover, html[data-theme="dark"] .search-result-item:hover, html[data-theme="dark"] .product-thumb { background-color: var(--table-row-hover) !important; } /* Abas */ html[data-theme="dark"] .tabs-container { border-bottom-color: var(--border-color) !important; } html[data-theme="dark"] .tab-link { color: var(--text-secondary) !important; } html[data-theme="dark"] .tab-link.active { color: #34d399 !important; border-bottom-color: #34d399 !important; } /* Formulários */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .form-control, html[data-theme="dark"] .motivo-select, html[data-theme="dark"] .quantidade-parcial, html[data-theme="dark"] .search-container input { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6b7280 !important; } html[data-theme="dark"] .search-results, html[data-theme="dark"] .search-results-contagem { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .search-result-item { color: var(--text-primary) !important; border-bottom-color: var(--border-color) !important; } /* Modais */ html[data-theme="dark"] .modal-overlay, html[data-theme="dark"] .modal-backdrop { background-color: var(--modal-overlay) !important; } /* Alertas — gradientes claros → tons escuros */ html[data-theme="dark"] .alert-card.info { background: linear-gradient(135deg, #1a1f2e 0%, #1e3a5f 100%) !important; } html[data-theme="dark"] .alert-card.danger { background: linear-gradient(135deg, #1a1f2e 0%, #3f1d1d 100%) !important; } html[data-theme="dark"] .alert-card.primary { background: linear-gradient(135deg, #1a1f2e 0%, #2e1065 100%) !important; } html[data-theme="dark"] .alert-card.warning { background: linear-gradient(135deg, #1a1f2e 0%, #422006 100%) !important; } html[data-theme="dark"] .alert-card.secondary { background: linear-gradient(135deg, #1a1f2e 0%, #1f2937 100%) !important; } /* Botões secundários */ html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-cancel, html[data-theme="dark"] .btn-modal.btn-cancel { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Login */ html[data-theme="dark"] body.login-page, html[data-theme="dark"] body:has(.login-container) { background-color: var(--bg-color) !important; } /* Botão alternar tema — menu */ .theme-toggle-section { padding: 0 16px; margin-bottom: 8px; } .theme-toggle-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: inherit; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.2); } .theme-toggle-btn i { width: 18px; text-align: center; } /* Login — botão tema */ .login-theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border-color, #e8eaed); border-radius: 8px; background: var(--card-bg, #ffffff); color: var(--text-primary, #1a1a1a); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); font-family: inherit; } .login-theme-toggle:hover { opacity: 0.9; } html[data-theme="dark"] .login-theme-toggle { background: var(--card-bg) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }