/* ============================================================ theme.css — variáveis CSS para light/dark mode default: dark | activa o claro ============================================================ */ :root { --bg: #0f172a; --bg-2: #1e293b; --bg-3: #334155; --text: #e2e8f0; --text-2: #94a3b8; --text-3: #64748b; --border: #334155; --primary: #f59e0b; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #60a5fa; --shadow: 0 1px 3px rgba(0,0,0,0.4); } html[data-theme="light"] { --bg: #ffffff; --bg-2: #f8fafc; --bg-3: #f1f5f9; /* aliases sem hífen usados pelo menuSlider.css */ --bg2: #f8fafc; --bg3: #f1f5f9; --sidebar: #1e293b; --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --text2: #475569; --text3: #94a3b8; --border: #e2e8f0; --primary: #f59e0b; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; --shadow: 0 1px 3px rgba(0,0,0,0.08); } /* aplica fundo/texto ao body conforme tema activo */ body { background-color: var(--bg); color: var(--text); } /* ── overrides Bootstrap em modo claro (cards/tabelas brancas) ── */ html[data-theme="light"] .page-card, html[data-theme="light"] .topbar, html[data-theme="light"] .modal-cli { background: var(--bg-2); color: var(--text); border-color: var(--border); } html[data-theme="light"] .page-content { background: var(--bg); } html[data-theme="light"] .table-dark { background: var(--bg-2) !important; color: var(--text) !important; } html[data-theme="light"] .table-dark thead th, html[data-theme="light"] .table-dark tbody td { background: transparent !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="light"] .table-dark tbody tr:hover { background: rgba(59,130,246,.06) !important; } html[data-theme="light"] .form-control { background: var(--bg); color: var(--text); border-color: var(--border); } html[data-theme="light"] .form-control::placeholder { color: var(--text-3); } html[data-theme="light"] .topbar-btn { color: var(--text-2); } html[data-theme="light"] .topbar-btn:hover { background: var(--bg-3); color: var(--text); } /* utility classes para componentes que adoptarem o tema */ .t-bg { background-color: var(--bg); } .t-bg2 { background-color: var(--bg-2); } .t-bg3 { background-color: var(--bg-3); } .t-text { color: var(--text); } .t-text2 { color: var(--text-2); } .t-border { border-color: var(--border); } /* botão de toggle (canto superior direito do menu) */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-2); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; } .theme-toggle:hover { background: var(--bg-3); } /* ============================================================ HOVER EFFECTS GLOBAIS (FIX 2026-05-28) — uma única regra para todos os tipos de cards usados no CYBERGEST. Centralizado aqui porque o theme.css já é incluído em TODOS os views. ============================================================ */ /* Base: transição suave de tudo o que se mexe + shadow visível. Aplicado a TODOS os contentores tipo "card" do sistema. */ .page-card, .kpi-card, .stat-card, .dash-card, .cli-card, .arm-cards > div, .arm-dash-cards > div, .kpi, .modal-cli, .user-card, .pos-card, .dash-tile, .cartao, .card-cli, .card-financeiro, .card-modulo, .card-relatorio { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; will-change: transform; } /* Hover principal: subtle lift + glow + borda iluminada. Não aplicado a modais (.modal-cli) — quando estão abertos não devem reagir ao rato porque já são o foco da atenção. */ .page-card:hover, .kpi-card:hover, .stat-card:hover, .dash-card:hover, .cli-card:hover, .arm-cards > div:hover, .arm-dash-cards > div:hover, .kpi:hover, .pos-card:hover, .dash-tile:hover, .cartao:hover, .card-cli:hover, .card-financeiro:hover, .card-modulo:hover, .card-relatorio:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.35), 0 4px 10px -2px rgba(245, 158, 11, 0.12); border-color: var(--primary); } /* Modo claro: sombra mais subtil (menos contraste branco→branco). */ html[data-theme="light"] .page-card:hover, html[data-theme="light"] .kpi-card:hover, html[data-theme="light"] .stat-card:hover, html[data-theme="light"] .dash-card:hover, html[data-theme="light"] .cli-card:hover, html[data-theme="light"] .arm-cards > div:hover, html[data-theme="light"] .arm-dash-cards > div:hover, html[data-theme="light"] .kpi:hover, html[data-theme="light"] .pos-card:hover, html[data-theme="light"] .dash-tile:hover, html[data-theme="light"] .cartao:hover, html[data-theme="light"] .card-cli:hover, html[data-theme="light"] .card-financeiro:hover, html[data-theme="light"] .card-modulo:hover, html[data-theme="light"] .card-relatorio:hover { box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.18), 0 3px 8px -2px rgba(245, 158, 11, 0.18); } /* KPIs com indicador colorido (estados financeiros/sucesso/erro): reforça a cor temática quando se passa o rato. */ .kpi-card.success:hover, .stat-card.success:hover, .kpi.success:hover { border-color: var(--success); box-shadow: 0 12px 24px -8px rgba(0,0,0,.35), 0 4px 10px -2px rgba(16,185,129,.28); } .kpi-card.danger:hover, .stat-card.danger:hover, .kpi.danger:hover { border-color: var(--danger); box-shadow: 0 12px 24px -8px rgba(0,0,0,.35), 0 4px 10px -2px rgba(239,68,68,.28); } .kpi-card.warning:hover, .stat-card.warning:hover, .kpi.warning:hover { border-color: var(--warning); box-shadow: 0 12px 24px -8px rgba(0,0,0,.35), 0 4px 10px -2px rgba(245,158,11,.32); } .kpi-card.info:hover, .stat-card.info:hover, .kpi.info:hover { border-color: var(--info); box-shadow: 0 12px 24px -8px rgba(0,0,0,.35), 0 4px 10px -2px rgba(96,165,250,.28); } /* Cards clicáveis (com data-href, .clickable ou role="button"): reforça o feedback com cursor + pequena escala. */ .page-card[data-href], .kpi-card[data-href], .stat-card[data-href], .dash-card[data-href], .page-card.clickable, .kpi-card.clickable, .stat-card.clickable, [role="button"].page-card, [role="button"].kpi-card { cursor: pointer; } .page-card[data-href]:active, .kpi-card[data-href]:active, .stat-card[data-href]:active, .dash-card[data-href]:active, .page-card.clickable:active, .kpi-card.clickable:active, .stat-card.clickable:active { transform: translateY(-1px) scale(0.995); transition-duration: 0.05s; } /* Linhas de tabelas dentro de cards — hover já existia mas reforçamos para que o pareamento card+tabela tenha feedback consistente. */ .page-card .table tbody tr { transition: background-color 0.15s ease; } .page-card .table tbody tr:hover { background-color: rgba(245, 158, 11, 0.05) !important; } html[data-theme="light"] .page-card .table tbody tr:hover { background-color: rgba(245, 158, 11, 0.08) !important; } /* Cards "footer" do sidebar e user-card: hover suave sem deslocamento (não queremos que a sidebar "salte"). */ .user-card:hover { background-color: rgba(255, 255, 255, 0.04); border-radius: 8px; } html[data-theme="light"] .user-card:hover { background-color: rgba(15, 23, 42, 0.05); } /* Acessibilidade: respeita preferência de reduzir movimento. */ @media (prefers-reduced-motion: reduce) { .page-card, .kpi-card, .stat-card, .dash-card, .cli-card, .arm-cards > div, .arm-dash-cards > div, .kpi, .pos-card, .dash-tile, .cartao, .card-cli, .card-financeiro, .card-modulo, .card-relatorio { transition: none !important; } .page-card:hover, .kpi-card:hover, .stat-card:hover, .dash-card:hover, .cli-card:hover, .arm-cards > div:hover, .arm-dash-cards > div:hover, .kpi:hover, .pos-card:hover, .dash-tile:hover, .cartao:hover, .card-cli:hover, .card-financeiro:hover, .card-modulo:hover, .card-relatorio:hover { transform: none !important; } }