/* ═══════════════════════════════════════════════════════════════════════ Nebulosa — Tema "Obsidian Rose" Inspiração: dashboards SaaS modernos (ProcessGrid-style). Paleta: • Fundo: cinza-grafite quente #1a1b1e • Surface elevada #212327 • Surface 2 #2a2c30 • Acento (rose gold) #d4a574 → #e8b88a → #b8895e • Texto #e8e9ea / #9a9b9e / #6b6c6f • Bordas: praticamente invisíveis (rgba 0.04 — separação por elevação) Ativação: Persistência: localStorage("nebulosa_theme") ═══════════════════════════════════════════════════════════════════════ */ /* ── Transição suave na troca de tema ───────────────────────────────── */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.28s ease, border-color 0.28s ease, color 0.22s ease, box-shadow 0.28s ease, fill 0.22s ease !important; } /* ═══════════════════════════════════════════════════════════════════════ 1. TOKENS — paleta Obsidian Rose ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { /* ── Backgrounds (elevation system) ── */ --bg-app: #1a1b1e; /* nível 0 — body */ --bg-app-gradient: #1a1b1e; --bg-elevated-1: #212327; /* nível 1 — cards */ --bg-elevated-2: #2a2c30; /* nível 2 — inputs, hover */ --bg-elevated-3: #34363b; /* nível 3 — popovers */ --surface: #212327; --surface-2: rgba(33,35,39,0.96); --surface-border: rgba(255,255,255,0.045); /* quase invisível */ --surface-border-2: rgba(255,255,255,0.08); /* sutil */ --sidebar-bg-1: #1a1b1e; --sidebar-bg-2: #1a1b1e; /* ── Texto ── */ --text: #e8e9ea; --text-strong: #f5f5f6; --text-muted: #9a9b9e; --text-light: #6b6c6f; --text-dim: #4d4e51; /* ── ACENTO: Rose Gold / Champagne Copper ── */ --accent: #d4a574; --accent-bright: #e8b88a; --accent-deep: #b8895e; --accent-darker: #8a6443; --accent-glow: rgba(212,165,116,0.18); --accent-glow-soft: rgba(212,165,116,0.08); /* sobrescreve primary do tema base */ --primary: #d4a574; --primary-light: #e8b88a; --primary-dark: #b8895e; --primary-50: rgba(212,165,116,0.10); --primary-100: rgba(212,165,116,0.20); /* ── Status (mais dessaturado para combinar com o tom warm) ── */ --success: #7cb09b; /* sage green */ --warning: #d4a574; --danger: #c97670; /* coral apagado */ /* ── Sombras (mais profundas no escuro) ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 2px 6px rgba(0,0,0,0.45); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6); --shadow-glow: 0 0 0 1px rgba(212,165,116,0.25), 0 4px 18px rgba(212,165,116,0.12); } /* Aplica o theme-color do navegador no mobile (status bar) */ html[data-theme="dark"] body { --tw-bg-opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════ 2. BASE ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body, html[data-theme="dark"] body.has-shell, html[data-theme="dark"] body.rota-page, html[data-theme="dark"] body.min-h-screen { background: var(--bg-app) !important; background-image: none !important; color: var(--text); } /* Seleção de texto: rose gold suave */ html[data-theme="dark"] ::selection { background: rgba(212,165,116,0.30); color: #fff; } /* Scrollbar elegante */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; transition: background 0.2s; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-glow); } /* Foco geral: anel rose gold */ html[data-theme="dark"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════ 3. SIDEBAR — sem gradiente azul, mesmo tom do body ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .app-sidebar { background: var(--bg-app) !important; border-right: 1px solid var(--surface-border) !important; } /* Remove os círculos roxos decorativos do tema claro */ html[data-theme="dark"] .app-sidebar::before, html[data-theme="dark"] .app-sidebar::after { background: var(--accent-glow-soft) !important; opacity: 0.4; } /* Logo / brand */ html[data-theme="dark"] .sidebar-brand-icon { background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-deep) 100%) !important; box-shadow: 0 2px 12px rgba(212,165,116,0.35) !important; color: #1a1b1e !important; } html[data-theme="dark"] .sidebar-brand-text { color: var(--text-strong); } /* Links do sidebar */ html[data-theme="dark"] .sidebar-link { color: var(--text-muted) !important; } html[data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.04) !important; color: var(--text) !important; } /* Estado ativo: SEM caixa colorida brilhante — apenas leve halo rose gold */ html[data-theme="dark"] .sidebar-link.active { background: var(--accent-glow) !important; color: var(--accent-bright) !important; box-shadow: none !important; } html[data-theme="dark"] .sidebar-link.active::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent-bright); border-radius: 0 2px 2px 0; } html[data-theme="dark"] .sidebar-divider { background: var(--surface-border) !important; } html[data-theme="dark"] .sidebar-toggle { background: transparent !important; color: var(--text-light); } html[data-theme="dark"] .sidebar-toggle:hover { background: rgba(255,255,255,0.04) !important; color: var(--accent) !important; } html[data-theme="dark"] .sidebar-toggle-bottom { color: var(--text-light); } html[data-theme="dark"] .sidebar-toggle-bottom:hover { color: var(--accent); } html[data-theme="dark"] .sidebar-bottom-sep { background: var(--surface-border) !important; } /* Submenu popup (collapsed) */ html[data-theme="dark"] body:not(.sidebar-expanded) .sidebar-group:hover .sidebar-submenu { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] .sidebar-sublink { color: var(--text-muted) !important; } html[data-theme="dark"] .sidebar-sublink:hover { background: rgba(255,255,255,0.05) !important; color: var(--text) !important; } html[data-theme="dark"] .sidebar-sublink.active { background: var(--accent-glow) !important; color: var(--accent-bright) !important; } /* Badge chat */ html[data-theme="dark"] .chat-unread-badge { background: var(--accent) !important; color: #1a1b1e !important; } /* Mobile bottom bar */ @media (max-width: 820px) { html[data-theme="dark"] .app-sidebar { border-top: 1px solid var(--surface-border) !important; border-right: 0 !important; background: rgba(26,27,30,0.97) !important; backdrop-filter: blur(14px); } } /* ═══════════════════════════════════════════════════════════════════════ 4. PAGE HEADER (topbar do conteúdo) ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .page-header { border-bottom: none; } html[data-theme="dark"] h1#pageTitle, html[data-theme="dark"] .page-header-left h1 { color: var(--text-strong) !important; font-weight: 600; letter-spacing: -0.02em; } html[data-theme="dark"] .page-header-left .page-breadcrumb { color: var(--text-light); } /* Search */ html[data-theme="dark"] .header-search-wrap { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; border-radius: 999px !important; } html[data-theme="dark"] .header-search-wrap:focus-within { border-color: var(--accent-glow) !important; box-shadow: 0 0 0 3px var(--accent-glow-soft); } html[data-theme="dark"] .header-search-input { background: transparent !important; color: var(--text) !important; } html[data-theme="dark"] .header-search-input::placeholder { color: var(--text-light) !important; } html[data-theme="dark"] .header-search-icon { color: var(--text-light); } html[data-theme="dark"] .header-search-results { background: var(--bg-elevated-2) !important; border: 1px solid var(--surface-border-2) !important; box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] .search-result-item { color: var(--text); border-color: var(--surface-border) !important; } html[data-theme="dark"] .search-result-item:hover { background: rgba(255,255,255,0.04) !important; } /* User block */ html[data-theme="dark"] .header-user-name { color: var(--text-strong) !important; font-weight: 600; } html[data-theme="dark"] .header-user-role { color: var(--accent) !important; font-weight: 600; } html[data-theme="dark"] .header-user-date-line { color: var(--text-light) !important; } html[data-theme="dark"] .header-avatar { background: var(--bg-elevated-2) !important; border: 2px solid var(--accent-glow) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } html[data-theme="dark"] .header-avatar:hover { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow-soft) !important; } html[data-theme="dark"] .header-avatar svg { color: var(--accent); } html[data-theme="dark"] .header-logout { background: transparent !important; border: 1px solid var(--surface-border-2) !important; color: var(--text-muted) !important; font-weight: 600; } html[data-theme="dark"] .header-logout:hover { background: rgba(201,118,112,0.10) !important; border-color: rgba(201,118,112,0.30) !important; color: var(--danger) !important; } /* Status pill (online) — sage green sutil */ html[data-theme="dark"] .system-status-pill { background: rgba(124,176,155,0.10) !important; border: 1px solid rgba(124,176,155,0.20) !important; color: var(--success) !important; } html[data-theme="dark"] .system-status-pill .dot { background: var(--success) !important; box-shadow: 0 0 6px var(--success); } html[data-theme="dark"] .system-status-pill--warn { background: rgba(212,165,116,0.10) !important; border-color: rgba(212,165,116,0.22) !important; color: var(--accent-bright) !important; } html[data-theme="dark"] .system-status-pill--warn .dot { background: var(--accent) !important; box-shadow: 0 0 6px var(--accent); } /* Notification bell */ html[data-theme="dark"] .notif-bell-btn { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; color: var(--text-muted) !important; } html[data-theme="dark"] .notif-bell-btn:hover { background: var(--bg-elevated-2) !important; color: var(--accent) !important; border-color: var(--accent-glow) !important; } html[data-theme="dark"] .notif-bell-badge { background: var(--accent) !important; color: #1a1b1e !important; font-weight: 800; } html[data-theme="dark"] .notif-dropdown { background: var(--bg-elevated-2) !important; border: 1px solid var(--surface-border-2) !important; box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] .notif-dropdown-head { border-bottom-color: var(--surface-border) !important; color: var(--text-strong); } html[data-theme="dark"] .notif-dropdown-head h4 { color: var(--text-strong); } html[data-theme="dark"] .notif-dropdown-head button { color: var(--accent) !important; } html[data-theme="dark"] .notif-item { border-bottom-color: var(--surface-border) !important; color: var(--text); } html[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,0.03) !important; } html[data-theme="dark"] .notif-empty { color: var(--text-light); } /* ═══════════════════════════════════════════════════════════════════════ 5. TAILWIND OVERRIDES — backgrounds, textos, bordas ═══════════════════════════════════════════════════════════════════════ */ /* Backgrounds white-ish → surface elevada */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-white\/60, html[data-theme="dark"] .bg-white\/70, html[data-theme="dark"] .bg-white\/80, html[data-theme="dark"] .bg-white\/90, html[data-theme="dark"] .bg-white\/95 { background: var(--bg-elevated-1) !important; } html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-50\/80, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-\[\#F4F6FB\] { background: var(--bg-app) !important; } html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-gray-100 { background: var(--bg-elevated-2) !important; } html[data-theme="dark"] .bg-slate-200, html[data-theme="dark"] .bg-gray-200 { background: var(--bg-elevated-3) !important; } /* Tons "muito claros" coloridos do tema claro → versões dessaturadas */ html[data-theme="dark"] .bg-indigo-50 { background: var(--accent-glow-soft) !important; } html[data-theme="dark"] .bg-violet-50 { background: var(--accent-glow-soft) !important; } html[data-theme="dark"] .bg-rose-50 { background: rgba(201,118,112,0.08) !important; } html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-orange-50 { background: rgba(212,165,116,0.08) !important; } html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-green-50 { background: rgba(124,176,155,0.08) !important; } html[data-theme="dark"] .bg-sky-50, html[data-theme="dark"] .bg-blue-50 { background: rgba(120,140,165,0.08) !important; } /* Texto */ html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-gray-900 { color: var(--text-strong) !important; } html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-gray-800 { color: var(--text) !important; } html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-gray-700 { color: var(--text) !important; } html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-gray-600 { color: var(--text-muted) !important; } html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-gray-500 { color: var(--text-muted) !important; } html[data-theme="dark"] .text-slate-400, html[data-theme="dark"] .text-gray-400 { color: var(--text-light) !important; } html[data-theme="dark"] .text-slate-300 { color: var(--text-light) !important; } /* Texto colorido vibrante → versão warm/rose */ html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-indigo-700, html[data-theme="dark"] .text-violet-600, html[data-theme="dark"] .text-violet-700, html[data-theme="dark"] .text-purple-600 { color: var(--accent-bright) !important; } html[data-theme="dark"] .text-rose-500, html[data-theme="dark"] .text-rose-600, html[data-theme="dark"] .text-red-500, html[data-theme="dark"] .text-red-600 { color: var(--danger) !important; } html[data-theme="dark"] .text-emerald-500, html[data-theme="dark"] .text-emerald-600, html[data-theme="dark"] .text-green-500, html[data-theme="dark"] .text-green-600 { color: var(--success) !important; } html[data-theme="dark"] .text-amber-500, html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-orange-500, html[data-theme="dark"] .text-orange-600 { color: var(--accent-bright) !important; } /* Bordas — quase invisíveis (estilo elevation) */ html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200 { border-color: var(--surface-border) !important; } html[data-theme="dark"] .border-slate-300, html[data-theme="dark"] .border-gray-300 { border-color: var(--surface-border-2) !important; } html[data-theme="dark"] .divide-slate-100 > * + *, html[data-theme="dark"] .divide-slate-200 > * + *, html[data-theme="dark"] .divide-gray-100 > * + *, html[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--surface-border) !important; } /* ═══════════════════════════════════════════════════════════════════════ 6. CARDS — sem bordas pesadas, separação por elevação ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .card, html[data-theme="dark"] article[data-order-id] { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; box-shadow: var(--shadow-sm) !important; } html[data-theme="dark"] .page-surface, html[data-theme="dark"] .rounded-3xl.bg-white\/60, html[data-theme="dark"] .rounded-3xl.bg-white\/70, html[data-theme="dark"] .mt-4.bg-white\/60, html[data-theme="dark"] .bg-white\/70.backdrop-blur.rounded-3xl, html[data-theme="dark"] .rounded-3xl { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; box-shadow: var(--shadow-sm) !important; } html[data-theme="dark"] .rounded-2xl.bg-white\/80.shadow, html[data-theme="dark"] .rounded-2xl { background: var(--bg-elevated-1) !important; border-color: var(--surface-border) !important; } /* ═══════════════════════════════════════════════════════════════════════ 7. FORMULÁRIOS — inputs, selects, textareas ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="file"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select:not(.status-pill) { background: var(--bg-elevated-2) !important; border: 1px solid var(--surface-border) !important; color: var(--text) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-light) !important; } html[data-theme="dark"] select:not(.status-pill) option { background: var(--bg-elevated-2); color: var(--text); } html[data-theme="dark"] input:focus:not([type="checkbox"]), html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus:not(.status-pill) { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow-soft) !important; } html[data-theme="dark"] .filter-select, html[data-theme="dark"] .filter-input { background: var(--bg-elevated-2) !important; border-color: var(--surface-border) !important; color: var(--text) !important; } html[data-theme="dark"] .filter-label { color: var(--text-light) !important; text-transform: uppercase; letter-spacing: 0.06em; } /* Checkbox / radio (accent color) */ html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════════ 8. BOTÕES — primary com gradiente rose gold + sombra warm ═══════════════════════════════════════════════════════════════════════ */ /* Primary — gradiente rose gold */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] a.btn-primary, html[data-theme="dark"] .tray-btn-primary { background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-deep) 100%) !important; color: #1a1b1e !important; font-weight: 700 !important; border: 0 !important; box-shadow: 0 2px 12px rgba(212,165,116,0.25), 0 1px 2px rgba(0,0,0,0.4) !important; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] a.btn-primary:hover, html[data-theme="dark"] .tray-btn-primary:hover { background: linear-gradient(135deg, var(--accent-bright) 20%, var(--accent) 100%) !important; box-shadow: 0 4px 18px rgba(212,165,116,0.35), 0 1px 2px rgba(0,0,0,0.4) !important; transform: translateY(-1px); } /* Secondary — sage green sutil */ html[data-theme="dark"] .btn-secondary { background: rgba(124,176,155,0.18) !important; color: var(--success) !important; border: 1px solid rgba(124,176,155,0.30) !important; } html[data-theme="dark"] .btn-secondary:hover { background: rgba(124,176,155,0.26) !important; color: #98c5b1 !important; } /* Ghost / toolbtn */ html[data-theme="dark"] .tray-btn-ghost, html[data-theme="dark"] .toolbtn, html[data-theme="dark"] button.border-slate-200, html[data-theme="dark"] a.border-slate-200 { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border-2) !important; color: var(--text-muted) !important; } html[data-theme="dark"] .tray-btn-ghost:hover, html[data-theme="dark"] .toolbtn:hover, html[data-theme="dark"] button.border-slate-200:hover { background: var(--bg-elevated-2) !important; color: var(--accent) !important; border-color: var(--accent-glow) !important; } html[data-theme="dark"] .toolbtn.is-active { background: var(--accent-glow) !important; border-color: var(--accent) !important; color: var(--accent-bright) !important; } html[data-theme="dark"] .hdr-clear-btn { background: transparent !important; border-color: rgba(201,118,112,0.30) !important; color: var(--danger) !important; } html[data-theme="dark"] .hdr-clear-btn:hover { background: rgba(201,118,112,0.12) !important; } /* Tailwind: bg-indigo-600, bg-blue-600 etc. → accent */ html[data-theme="dark"] .bg-indigo-600, html[data-theme="dark"] .bg-indigo-500, html[data-theme="dark"] .bg-violet-600, html[data-theme="dark"] .bg-violet-500 { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)) !important; color: #1a1b1e !important; } /* ═══════════════════════════════════════════════════════════════════════ 9. ORDERS BOARD ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .tray-breadcrumb { color: var(--text-light) !important; } html[data-theme="dark"] .tray-page-title { color: var(--text-strong) !important; font-weight: 600; letter-spacing: -0.02em; } html[data-theme="dark"] .tray-title-row { border-bottom-color: var(--surface-border) !important; } html[data-theme="dark"] .tray-filters-row, html[data-theme="dark"] .tray-filter-shell { background: var(--bg-elevated-1) !important; border-color: var(--surface-border) !important; } /* Stat cards — limpos, sem bordas */ html[data-theme="dark"] .stat-card { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; box-shadow: var(--shadow-xs) !important; } html[data-theme="dark"] .stat-card:hover { border-color: var(--accent-glow) !important; box-shadow: var(--shadow-sm), 0 0 0 1px var(--accent-glow-soft) !important; } html[data-theme="dark"] .stat-card-label { color: var(--text-light) !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 600; } html[data-theme="dark"] .stat-card-value { color: var(--text-strong) !important; font-weight: 700; } html[data-theme="dark"] .stat-card-sub { color: var(--text-light) !important; } /* Tabela — header com toque rose, linhas sem bordas duras */ html[data-theme="dark"] .tray-table-shell { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; overflow: hidden; } html[data-theme="dark"] .orders-table thead tr, html[data-theme="dark"] thead tr.border-b { background: rgba(255,255,255,0.025) !important; border-color: var(--surface-border) !important; } html[data-theme="dark"] .orders-table thead th { color: var(--text-light) !important; border-color: var(--surface-border) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; } html[data-theme="dark"] .orders-table tbody tr { border-color: var(--surface-border) !important; } html[data-theme="dark"] .orders-table tbody tr:hover { background: rgba(212,165,116,0.04) !important; } html[data-theme="dark"] .order-row td { color: var(--text); border-color: var(--surface-border) !important; } html[data-theme="dark"] .order-row a { color: var(--text); transition: color 0.15s; } html[data-theme="dark"] .order-row a:hover { color: var(--accent-bright) !important; } html[data-theme="dark"] .order-row .customer-name { color: var(--text-strong) !important; font-weight: 600; } html[data-theme="dark"] .order-row .order-id { color: var(--accent) !important; font-weight: 700; } /* Action icons (botões na coluna ações) */ html[data-theme="dark"] .action-icon { background: var(--bg-elevated-2) !important; border: 1px solid var(--surface-border) !important; color: var(--text-muted) !important; } html[data-theme="dark"] .action-icon:hover { background: var(--accent-glow) !important; color: var(--accent-bright) !important; border-color: var(--accent-glow) !important; } /* Status pills — todas dessaturadas e elegantes */ html[data-theme="dark"] select.status-pill, html[data-theme="dark"] .status-pill { background: var(--bg-elevated-2) !important; border: 1px solid var(--surface-border-2) !important; font-weight: 600; } html[data-theme="dark"] .pill--a_enviar, html[data-theme="dark"] .pill--novos, html[data-theme="dark"] .pill--separando, html[data-theme="dark"] .pill--pronto_para_envio { background: rgba(212,165,116,0.14) !important; color: var(--accent-bright) !important; border-color: rgba(212,165,116,0.30) !important; } html[data-theme="dark"] .pill--enviado, html[data-theme="dark"] .pill--em_entrega { background: rgba(124,176,155,0.12) !important; color: var(--success) !important; border-color: rgba(124,176,155,0.25) !important; } html[data-theme="dark"] .pill--finalizado, html[data-theme="dark"] .pill--entregue { background: rgba(154,155,158,0.10) !important; color: var(--text-muted) !important; border-color: var(--surface-border-2) !important; } html[data-theme="dark"] .pill--cancelado { background: rgba(201,118,112,0.12) !important; color: var(--danger) !important; border-color: rgba(201,118,112,0.25) !important; } html[data-theme="dark"] .pill--aguardando_pagamento, html[data-theme="dark"] .pill--em_monitoramento { background: rgba(212,165,116,0.10) !important; color: var(--accent) !important; border-color: rgba(212,165,116,0.22) !important; } /* Order detail */ html[data-theme="dark"] .baixados-table th { background: rgba(255,255,255,0.025) !important; color: var(--text-light) !important; border-color: var(--surface-border) !important; } html[data-theme="dark"] .baixados-table td { border-color: var(--surface-border) !important; color: var(--text) !important; } html[data-theme="dark"] .baixados-table tr:hover td { background: rgba(212,165,116,0.04) !important; } html[data-theme="dark"] .baixados-store-pill { background: var(--accent-glow) !important; color: var(--accent-bright) !important; } html[data-theme="dark"] .baixados-qty { color: var(--danger) !important; } /* ═══════════════════════════════════════════════════════════════════════ 10. PRODUCTS PAGE ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] [class*="prod-card"], html[data-theme="dark"] [class*="product-card"], html[data-theme="dark"] .product-row { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; } html[data-theme="dark"] [class*="prod-card"]:hover, html[data-theme="dark"] .product-row:hover { border-color: var(--accent-glow) !important; box-shadow: 0 0 0 1px var(--accent-glow-soft); } html[data-theme="dark"] [class*="mismatch"], html[data-theme="dark"] [class*="stock-alert"] { background: rgba(212,165,116,0.12) !important; border-color: rgba(212,165,116,0.30) !important; color: var(--accent-bright) !important; } /* Recompra badge */ html[data-theme="dark"] [style*="background:#faf5ff"], html[data-theme="dark"] [style*="background: #faf5ff"] { background: var(--accent-glow) !important; color: var(--accent-bright) !important; } /* CustomDropdown component */ html[data-theme="dark"] [class*="custom-dropdown"], html[data-theme="dark"] [class*="dropdown-menu"], html[data-theme="dark"] [class*="dropdown-list"] { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] [class*="dropdown-item"]:hover { background: var(--accent-glow) !important; color: var(--accent-bright) !important; } /* Search overlay */ html[data-theme="dark"] .search-overlay { background: rgba(15,16,18,0.75) !important; backdrop-filter: blur(8px); } html[data-theme="dark"] .search-panel { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border-2) !important; box-shadow: var(--shadow-lg) !important; } /* ═══════════════════════════════════════════════════════════════════════ 11. MODAIS ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] [role="dialog"], html[data-theme="dark"] .modal, html[data-theme="dark"] [class*="modal-body"], html[data-theme="dark"] [class*="modal-shell"], html[data-theme="dark"] [class*="modal-wrap"], html[data-theme="dark"] [class*="modal-content"] { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border-2) !important; color: var(--text) !important; box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] [class*="modal"] h1, html[data-theme="dark"] [class*="modal"] h2, html[data-theme="dark"] [class*="modal"] h3 { color: var(--text-strong) !important; } html[data-theme="dark"] [class*="overlay"]:not(.search-overlay) { background: rgba(10,11,13,0.75) !important; backdrop-filter: blur(4px); } /* ═══════════════════════════════════════════════════════════════════════ 12. BADGES / PILLS / TAGS ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .payment-badge--green { background: rgba(124,176,155,0.12) !important; color: var(--success) !important; border-color: rgba(124,176,155,0.25) !important; } html[data-theme="dark"] .payment-badge--yellow { background: rgba(212,165,116,0.12) !important; color: var(--accent-bright) !important; border-color: rgba(212,165,116,0.25) !important; } html[data-theme="dark"] .payment-badge--red { background: rgba(201,118,112,0.12) !important; color: var(--danger) !important; border-color: rgba(201,118,112,0.25) !important; } html[data-theme="dark"] .payment-badge--gray { background: rgba(154,155,158,0.10) !important; color: var(--text-muted) !important; border-color: var(--surface-border-2) !important; } html[data-theme="dark"] .order-sync-badge { background: var(--accent-glow) !important; border-color: rgba(212,165,116,0.30) !important; color: var(--accent-bright) !important; } html[data-theme="dark"] .thumb-placeholder { background: var(--bg-elevated-2) !important; border: 1px solid var(--surface-border) !important; color: var(--text-light); } html[data-theme="dark"] .thumb-more { background: var(--accent-glow) !important; color: var(--accent-bright) !important; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════ 13. LABEL / BULK PRINT PAGES ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .label-wrap { background: var(--bg-elevated-1) !important; border-color: var(--surface-border-2) !important; } html[data-theme="dark"] .lbl-card { background: var(--bg-elevated-1) !important; border: 1px solid var(--surface-border) !important; } html[data-theme="dark"] .lbl-card:hover { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow-soft) !important; } html[data-theme="dark"] .lbl-card.selected { border-color: var(--accent) !important; background: var(--accent-glow-soft) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; } html[data-theme="dark"] .lbl-search { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; color: var(--text) !important; } html[data-theme="dark"] .lbl-name { color: var(--text-strong) !important; } html[data-theme="dark"] .lbl-sub { color: var(--text-muted) !important; } html[data-theme="dark"] .lbl-code { background: var(--accent-glow) !important; color: var(--accent-bright) !important; } html[data-theme="dark"] .status-chip { background: var(--bg-elevated-1) !important; border-color: var(--surface-border-2) !important; color: var(--text-muted) !important; } html[data-theme="dark"] .status-chip.active { background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)) !important; border-color: var(--accent) !important; color: #1a1b1e !important; } html[data-theme="dark"] .lbl-print-bar { background: var(--bg-elevated-2) !important; border: 1px solid var(--accent-glow) !important; box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-glow-soft) !important; } html[data-theme="dark"] .lbl-print-bar #selCount { color: var(--text-muted) !important; } /* Bulk print mode bar (orders board) */ html[data-theme="dark"] #printModeBar { background: var(--bg-elevated-2) !important; border: 1px solid var(--accent-glow) !important; box-shadow: var(--shadow-lg) !important; color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════ 14. KANBAN / TILES (mantém vibrant mas adaptado) ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .tile--blue { background: linear-gradient(135deg, #2d3e5f, #1a2b48) !important; } html[data-theme="dark"] .tile--green { background: linear-gradient(135deg, #3d6b56, #244534) !important; } html[data-theme="dark"] .tile--teal { background: linear-gradient(135deg, #2d4f65, #1a3349) !important; } html[data-theme="dark"] .tile--orange { background: linear-gradient(135deg, var(--accent-deep), var(--accent-darker)) !important; } html[data-theme="dark"] .tile--purple { background: linear-gradient(135deg, #4d3d6b, #2e244a) !important; } html[data-theme="dark"] .kanban-head--new { background: var(--accent-deep) !important; } html[data-theme="dark"] .kanban-head--sep { background: var(--accent) !important; color: #1a1b1e !important; } html[data-theme="dark"] .kanban-head--deliv { background: #5d4a6f !important; } /* ═══════════════════════════════════════════════════════════════════════ 15. MISC ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] hr { border-color: var(--surface-border) !important; } html[data-theme="dark"] [class*="tooltip"] { background: var(--bg-elevated-3) !important; border: 1px solid var(--surface-border-2) !important; color: var(--text) !important; box-shadow: var(--shadow-md) !important; } html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm) !important; } html[data-theme="dark"] .shadow-md { box-shadow: var(--shadow-md) !important; } html[data-theme="dark"] .shadow-lg { box-shadow: var(--shadow-lg) !important; } html[data-theme="dark"] .ring-slate-200, html[data-theme="dark"] .ring-slate-300 { --tw-ring-color: var(--surface-border-2); } /* Links genéricos */ html[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.tray-btn-primary):not(.sidebar-link):not(.header-avatar):not(.lbl-card) { color: var(--accent); } html[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.tray-btn-primary):not(.sidebar-link):hover { color: var(--accent-bright); } /* Inputs com fundo Tailwind explícito (override) */ html[data-theme="dark"] [class*="bg-white"][class*="border"] { background: var(--bg-elevated-1) !important; } /* ═══════════════════════════════════════════════════════════════════════ 16. BOTÃO DE TEMA — toggle elegante ═══════════════════════════════════════════════════════════════════════ */ .theme-toggle-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--surface-border); background: var(--surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1); flex-shrink: 0; position: relative; overflow: hidden; } .theme-toggle-btn:hover { background: var(--primary-50); color: var(--primary); border-color: var(--primary-100); transform: rotate(15deg) scale(1.05); } /* Dark mode: rose gold glow no hover */ html[data-theme="dark"] .theme-toggle-btn { background: var(--bg-elevated-1); border-color: var(--surface-border-2); color: var(--accent); } html[data-theme="dark"] .theme-toggle-btn:hover { background: var(--accent-glow); border-color: var(--accent); color: var(--accent-bright); transform: rotate(-15deg) scale(1.05); box-shadow: 0 0 16px var(--accent-glow); } /* Ícones — visibilidade conforme tema */ .theme-icon-dark { display: block; } .theme-icon-light { display: none; } html[data-theme="dark"] .theme-icon-dark { display: none; } html[data-theme="dark"] .theme-icon-light { display: block; } /* ═══════════════════════════════════════════════════════════════════════ 17. RESPONSIVO — ajustes específicos do dark ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { html[data-theme="dark"] .page-header { background: rgba(26,27,30,0.85); backdrop-filter: blur(10px); } html[data-theme="dark"] .header-search-wrap { background: var(--bg-elevated-2) !important; } } /* ═══════════════════════════════════════════════════════════════════════ 18. PRODUCTS PAGE — header card + chips/pills com cores hardcoded ═══════════════════════════════════════════════════════════════════════ */ /* Card-header principal (Produtos): branco hardcoded + barra azul gradient */ html[data-theme="dark"] .hdr-card { background: var(--bg-elevated-1) !important; border-color: var(--surface-border) !important; box-shadow: var(--shadow-sm) !important; } html[data-theme="dark"] .hdr-card::before { background: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 100%) !important; } /* Subseções dentro do hdr-card (toolbar de filtros) */ html[data-theme="dark"] .hdr-card .border-slate-100, html[data-theme="dark"] .hdr-card .border-t { border-color: var(--surface-border) !important; } html[data-theme="dark"] .hdr-card .bg-white\/60, html[data-theme="dark"] .hdr-card [class*="bg-white"] { background: transparent !important; } /* Título "Produtos" e cores de texto principais dentro do card */ html[data-theme="dark"] .hdr-card .text-slate-900 { color: var(--text-strong) !important; } html[data-theme="dark"] .hdr-card .text-slate-800, html[data-theme="dark"] .hdr-card .text-slate-700 { color: var(--text) !important; } html[data-theme="dark"] .hdr-card .text-slate-500, html[data-theme="dark"] .hdr-card .text-slate-400 { color: var(--text-muted) !important; } html[data-theme="dark"] .hdr-card .text-slate-300 { color: var(--text-light) !important; } /* Chips (uppercase pills no header) */ html[data-theme="dark"] .hdr-chip { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; color: var(--text-muted) !important; } html[data-theme="dark"] .hdr-chip--dark { background: #0f1013 !important; color: var(--text-strong) !important; } html[data-theme="dark"] .hdr-chip .dot { background: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; } /* Stats pequenas (Total, OK, baixo etc.) */ html[data-theme="dark"] .hdr-stat { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; color: var(--text-muted) !important; } html[data-theme="dark"] .hdr-stat b { color: var(--text-strong) !important; } html[data-theme="dark"] .hdr-stat--ok b { color: var(--success) !important; } html[data-theme="dark"] .hdr-stat--warn b { color: var(--accent) !important; } html[data-theme="dark"] .hdr-stat--bad b { color: var(--danger) !important; } /* Pill-group (segmented control "Todos | Ativos | Inativos" etc.) */ html[data-theme="dark"] .pillgroup { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; } html[data-theme="dark"] .pillgroup button { color: var(--text-muted) !important; background: transparent !important; } html[data-theme="dark"] .pillgroup button:hover { color: var(--text) !important; } html[data-theme="dark"] .pillgroup button.is-on { background: var(--bg-elevated-1) !important; color: var(--text-strong) !important; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px var(--surface-border-2) !important; } /* Toolbar buttons hardcoded brancos (inputs de filtro, dropdowns) */ html[data-theme="dark"] .toolbtn, html[data-theme="dark"] .toolbtn[disabled] { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; color: var(--text) !important; } html[data-theme="dark"] .toolbtn:hover { background: var(--bg-elevated-3) !important; border-color: var(--accent-glow) !important; } html[data-theme="dark"] .toolbtn.is-active { background: var(--accent-glow) !important; border-color: var(--accent) !important; color: var(--accent-bright) !important; } /* Stat-card pequenos do products page (componente React inline c/ bg-white) */ html[data-theme="dark"] .hdr-card .bg-white.rounded-2xl, html[data-theme="dark"] [class*="rounded-2xl"][class*="bg-white"] { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; } /* Ícones com tints Tailwind (bg-emerald-100, bg-amber-100, bg-rose-100 etc.) Usados nos stat cards inline da página de produtos. No dark, suavizamos para tons com baixa saturação que combinam com a paleta rose gold. */ html[data-theme="dark"] .bg-slate-100 { background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .bg-emerald-100 { background: rgba(124,176,155,0.14) !important; } html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-yellow-100 { background: rgba(212,165,116,0.16) !important; } html[data-theme="dark"] .bg-rose-100, html[data-theme="dark"] .bg-red-100 { background: rgba(201,118,112,0.16) !important; } html[data-theme="dark"] .bg-indigo-100, html[data-theme="dark"] .bg-blue-100 { background: rgba(120,150,200,0.14) !important; } html[data-theme="dark"] .bg-violet-100, html[data-theme="dark"] .bg-purple-100 { background: rgba(165,140,200,0.14) !important; } html[data-theme="dark"] .bg-pink-100 { background: rgba(220,140,180,0.14) !important; } /* Cores de ícone dentro desses tints — clarear pra ficar legível no escuro */ html[data-theme="dark"] .text-emerald-600 { color: #8fcfb4 !important; } html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-yellow-600 { color: var(--accent-bright) !important; } html[data-theme="dark"] .text-rose-600, html[data-theme="dark"] .text-red-600 { color: #d99893 !important; } html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-blue-600 { color: #a3b4d6 !important; } html[data-theme="dark"] .text-violet-600, html[data-theme="dark"] .text-purple-600 { color: #c1adda !important; } html[data-theme="dark"] .text-pink-600 { color: #e4afcd !important; } html[data-theme="dark"] .text-slate-500 { color: var(--text-muted) !important; } /* Coluna GERAL admin (destaque âmbar) — versão dark mais sutil */ html[data-theme="dark"] .stock-cell--geral-admin { background: linear-gradient(180deg, rgba(212,165,116,0.10) 0%, rgba(212,165,116,0.16) 100%) !important; } /* ═══════════════════════════════════════════════════════════════════════ 19. FRETES PAGE — hero gradient roxo + cards ═══════════════════════════════════════════════════════════════════════ */ /* Hero principal: gradiente roxo gigante → versão dark com accent rose */ html[data-theme="dark"] .fretes-hero { background: linear-gradient(135deg, var(--bg-elevated-2) 0%, var(--bg-elevated-1) 100%) !important; border: 1px solid var(--surface-border-2) !important; color: var(--text) !important; position: relative; overflow: hidden; } html[data-theme="dark"] .fretes-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, var(--accent-glow) 0%, transparent 50%); pointer-events: none; } html[data-theme="dark"] .fretes-hero h1 { color: var(--text-strong) !important; } html[data-theme="dark"] .fretes-hero p { color: var(--text-muted) !important; } /* Banner "Despachar pedidos agora" — gradient verde-ciano gigante */ html[data-theme="dark"] .quick-orders { background: linear-gradient(135deg, var(--bg-elevated-2) 0%, var(--bg-elevated-1) 100%) !important; border: 1px solid var(--accent-glow) !important; box-shadow: var(--shadow-md), inset 0 0 80px rgba(212,165,116,0.06) !important; color: var(--text) !important; } html[data-theme="dark"] .quick-orders h2, html[data-theme="dark"] .quick-orders strong { color: var(--accent-bright) !important; } html[data-theme="dark"] .quick-orders p, html[data-theme="dark"] .quick-orders span { color: var(--text-muted) !important; } html[data-theme="dark"] .quick-orders a, html[data-theme="dark"] .quick-orders .quick-orders-cta { background: var(--accent) !important; color: #1a1b1e !important; border: 0 !important; } html[data-theme="dark"] .quick-orders a:hover { background: var(--accent-bright) !important; } /* Cards de provedor de frete (Loggi, Melhor Envio) */ html[data-theme="dark"] .fc { background: var(--bg-elevated-1) !important; border-color: var(--surface-border-2) !important; box-shadow: var(--shadow-xs) !important; color: var(--text); } html[data-theme="dark"] .fc--primary { background: linear-gradient(160deg, rgba(212,165,116,0.06) 0%, var(--bg-elevated-1) 100%) !important; border-color: var(--accent-glow) !important; } html[data-theme="dark"] .fc-badge { background: rgba(124,176,155,0.16) !important; color: #8fcfb4 !important; } html[data-theme="dark"] .fc-badge-warn { background: rgba(212,165,116,0.16) !important; color: var(--accent-bright) !important; } html[data-theme="dark"] .fc-badge-dot { background: var(--success) !important; } /* ═══════════════════════════════════════════════════════════════════════ 20. ORDERS BOARD — filtros e thumbs ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .thumb-product, html[data-theme="dark"] .thumb-placeholder, html[data-theme="dark"] .thumb-more { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; } html[data-theme="dark"] .thumb-more { color: var(--text-muted) !important; } /* Cards de filtros do orders board (período, status, etc.) */ html[data-theme="dark"] .filters-card, html[data-theme="dark"] [class*="filters"] [class*="bg-white"] { background: var(--bg-elevated-1) !important; border-color: var(--surface-border) !important; } /* Inline-table de itens expandida (ver X produtos) */ html[data-theme="dark"] .expand-thumb { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; color: var(--text-muted) !important; } /* ═══════════════════════════════════════════════════════════════════════ 21. CARDS COM BACKGROUND HARDCODED — varredura final Todos os componentes que ainda têm `background: #fff;` no CSS-base (não pegáveis via .bg-white por usar @apply ou custom CSS). ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .filters-panel, html[data-theme="dark"] .dash-stat-card, html[data-theme="dark"] .em-card, html[data-theme="dark"] .tray-card, html[data-theme="dark"] .seller-perf-card, html[data-theme="dark"] .admin-perf-card, html[data-theme="dark"] .lbl-card, html[data-theme="dark"] .order-detail-card, html[data-theme="dark"] .product-card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .form-card, html[data-theme="dark"] .settings-card, html[data-theme="dark"] .integration-card, html[data-theme="dark"] .preview-card, html[data-theme="dark"] .audit-card, html[data-theme="dark"] .seller-perf-stat, html[data-theme="dark"] .admin-perf-summary { background: var(--bg-elevated-1) !important; border-color: var(--surface-border) !important; color: var(--text); } /* Filters-head do orders-board (tem padding/header próprio) */ html[data-theme="dark"] .filters-head { border-bottom: 1px solid var(--surface-border) !important; } html[data-theme="dark"] .filters-head a { color: var(--accent) !important; } /* Inputs/selects nativos dentro do filters-panel */ html[data-theme="dark"] .filters-grid input, html[data-theme="dark"] .filters-grid select, html[data-theme="dark"] .filters-grid textarea { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; color: var(--text) !important; } html[data-theme="dark"] .filter-label { color: var(--text-muted) !important; } /* Seta dropdown em selects nativos (era SVG cinza-escuro) */ html[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' fill='none'%3E%3Cpath d='M1 1l2.5 2.5L6 1' stroke='%23a8a9ac' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Tray buttons (tray-btn-ghost / tray-btn-secondary / etc.) */ html[data-theme="dark"] .tray-btn-ghost { color: var(--text-muted) !important; background: transparent !important; } html[data-theme="dark"] .tray-btn-ghost:hover { background: var(--bg-elevated-2) !important; color: var(--text) !important; } html[data-theme="dark"] .tray-btn-secondary { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; color: var(--text) !important; } html[data-theme="dark"] .tray-btn-primary { background: var(--accent) !important; color: #1a1b1e !important; border-color: var(--accent-deep) !important; } html[data-theme="dark"] .tray-btn-primary:hover { background: var(--accent-bright) !important; } /* ═══════════════════════════════════════════════════════════════════════ 22. DASHBOARD TILES — adaptar gradients vibrantes p/ paleta rose-gold ═══════════════════════════════════════════════════════════════════════ */ /* Os tiles de navegação no home eram azul/roxo/laranja vibrantes que ficam muito barulhentos no dark. Trocamos por gradients sutis com glow rose. */ html[data-theme="dark"] .tile--blue, html[data-theme="dark"] .tile--teal, html[data-theme="dark"] .tile--purple, html[data-theme="dark"] .tile--orange, html[data-theme="dark"] .tile--green { background: linear-gradient(135deg, var(--bg-elevated-2) 0%, var(--bg-elevated-1) 100%) !important; border: 1px solid var(--surface-border-2) !important; position: relative; overflow: hidden; } html[data-theme="dark"] .tile--blue::before, html[data-theme="dark"] .tile--teal::before, html[data-theme="dark"] .tile--purple::before, html[data-theme="dark"] .tile--orange::before, html[data-theme="dark"] .tile--green::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, var(--accent-glow) 0%, transparent 60%); pointer-events: none; } html[data-theme="dark"] .tile--blue:hover, html[data-theme="dark"] .tile--teal:hover, html[data-theme="dark"] .tile--purple:hover, html[data-theme="dark"] .tile--orange:hover, html[data-theme="dark"] .tile--green:hover { border-color: var(--accent-glow) !important; box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-glow-soft) !important; } /* Garantir contraste do texto branco nos tiles dark */ html[data-theme="dark"] .tile, html[data-theme="dark"] .tile .text-sm, html[data-theme="dark"] .tile .text-xs, html[data-theme="dark"] .tile .text-lg, html[data-theme="dark"] .tile .font-extrabold { color: var(--text-strong) !important; } html[data-theme="dark"] .tile .text-sm { color: var(--text-muted) !important; } html[data-theme="dark"] .tile .h-10.w-10, html[data-theme="dark"] .tile .h-12.w-12 { background: var(--accent-glow) !important; color: var(--accent-bright) !important; } /* Cards genéricos com .card (Tailwind-like) */ html[data-theme="dark"] .card { background: var(--bg-elevated-1) !important; border-color: var(--surface-border) !important; color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════ 23. PROFUNDIDADE FINAL — pega qualquer sobra Catch-all para divs com style="background:#fff" inline ou em CSS local. Aplica apenas a cards "estruturais" (rounded + border + padding). ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:white"] { background: var(--bg-elevated-1) !important; } html[data-theme="dark"] [style*="background: #f8fafc"], html[data-theme="dark"] [style*="background:#f8fafc"], html[data-theme="dark"] [style*="background: #f1f5f9"], html[data-theme="dark"] [style*="background:#f1f5f9"] { background: var(--bg-elevated-2) !important; } /* Modal de Permissões */ html[data-theme="dark"] #permissionsModal .modal-content { background: var(--bg-elevated-1) !important; border-color: var(--surface-border) !important; } html[data-theme="dark"] #permissionsModal h3 { color: var(--text-strong) !important; } html[data-theme="dark"] #permModalContent > label, html[data-theme="dark"] #permModalContent > div { background: var(--bg-elevated-2) !important; border-color: var(--surface-border-2) !important; } html[data-theme="dark"] #permModalContent label { color: var(--text-strong) !important; } html[data-theme="dark"] #permModalContent span { color: var(--text-muted) !important; } html[data-theme="dark"] #permissionsModal button[onclick="closePermissionsModal()"] { color: var(--text-muted) !important; border-color: var(--surface-border-2) !important; background: transparent !important; } html[data-theme="dark"] #permissionsModal button[onclick="closePermissionsModal()"]:hover { background: var(--bg-elevated-2) !important; color: var(--text-strong) !important; } html[data-theme="dark"] #permissionsModal .border-b, html[data-theme="dark"] #permissionsModal .border-t { border-color: var(--surface-border-2) !important; } /* ═══════════════════════════════════════════════════════════════════════ 24. REFORÇO RESPONSIVO NO TEMA ESCURO (MÁXIMO 820PX) Garante visual impecável sem brilho excessivo e alinhado aos padrões escuros. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { html[data-theme="dark"] .page-header { background: var(--bg-elevated-1) !important; border-bottom: 1px solid var(--surface-border) !important; backdrop-filter: blur(10px) !important; } html[data-theme="dark"] .header-logout { border-color: rgba(239, 68, 68, 0.3) !important; background: transparent !important; } html[data-theme="dark"] .app-sidebar { background: var(--bg-elevated-1) !important; border-top: 1px solid var(--surface-border) !important; } html[data-theme="dark"] .sidebar-toggle-bottom, html[data-theme="dark"] .sidebar-bottom-sep, html[data-theme="dark"] .sidebar-label, html[data-theme="dark"] .sidebar-brand, html[data-theme="dark"] .sidebar-divider, html[data-theme="dark"] .sidebar-toggle { display: none !important; } }