/* ============================================================================= VOYGER THEME ENGINE — Comprehensive CSS Overrides Aplica a cor tema escolhida pelo usuário em TODOS os módulos do dashboard. Ativado via classe .vt-themed no , com CSS vars --vt-* geradas pelo JS. ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── 1. DASHBOARD ROOT VARIABLES OVERRIDE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed { --dash-primary: var(--vt-primary) !important; --dash-primary-hover: var(--vt-primary-hover) !important; --dash-secondary: var(--vt-secondary) !important; --dash-accent: var(--vt-primary) !important; --dm-header-gradient: var(--vt-primary-gradient) !important; } /* ───────────────────────────────────────────────────────────────────────────── 2. OVERVIEW MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .overview-module { --ov-ink: var(--vt-primary); --ov-ink-soft: var(--vt-ink-soft); --ov-primary: var(--vt-primary); --ov-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 3. PRODUCTS MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .products-module { --pm-color-ink: var(--vt-primary); --pm-color-ink-soft: var(--vt-ink-soft); --pm-color-primary: var(--vt-primary); --pm-color-primary-soft: var(--vt-primary-soft); --pm-shadow-soft: var(--vt-shadow-soft); --pm-shadow-strong: var(--vt-shadow-strong); } /* ───────────────────────────────────────────────────────────────────────────── 4. INVENTORY MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .inventory-module, .vt-themed .inventory-modal { --inv-color-ink: var(--vt-primary); --inv-color-ink-soft: var(--vt-ink-soft); --inv-color-primary: var(--vt-primary); --inv-color-primary-soft: var(--vt-primary-soft); --inv-shadow-soft: var(--vt-shadow-soft); --inv-shadow-strong: var(--vt-shadow-strong); } /* ───────────────────────────────────────────────────────────────────────────── 5. CHECKOUT / PDV MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .ck-module { --ck-ink: var(--vt-primary); --ck-ink-soft: var(--vt-ink-soft); --ck-primary: var(--vt-primary); --ck-primary-soft: var(--vt-primary-soft); --ck-shadow-soft: var(--vt-shadow-soft); --ck-shadow-strong: var(--vt-shadow-strong); } /* ───────────────────────────────────────────────────────────────────────────── 6. SALES REPORT MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .sales-report-module, .vt-themed .sr-modal { --sr-ink: var(--vt-primary); --sr-ink-soft: var(--vt-ink-soft); --sr-primary: var(--vt-primary); --sr-primary-soft: var(--vt-primary-soft); --sr-shadow-soft: var(--vt-shadow-soft); --sr-shadow-strong: var(--vt-shadow-strong); } /* ───────────────────────────────────────────────────────────────────────────── 7. USERS MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .users-module, .vt-themed .users-modal { --um-ink: var(--vt-primary); --um-primary: var(--vt-primary); --um-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 8. TASKS MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .tasks-module { --tm-ink: var(--vt-primary); --tm-primary: var(--vt-primary); --tm-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 9. SUPPLIERS MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .suppliers-module { --sm-color-ink: var(--vt-primary); --sm-color-primary: var(--vt-primary); --sm-color-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 10. SUPERVISOR REQUESTS MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .supervisor-requests-module { --sr-color-ink: var(--vt-primary); --sr-color-primary: var(--vt-primary); --sr-color-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 11. SERVIÇO MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .servico-module { --svc-ink: var(--vt-primary); --svc-primary: var(--vt-primary); --svc-primary-soft: var(--vt-primary-soft); --svc-accent: var(--vt-primary); } /* ───────────────────────────────────────────────────────────────────────────── 12. RUPTURE CONTROL MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .rupture-control-module { --rc-color-ink: var(--vt-primary); --rc-color-primary: var(--vt-primary); --rc-color-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 13. RECEIVED INVOICES MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .ri-module { --ri-ink: var(--vt-primary); --ri-accent: var(--vt-primary); } /* ───────────────────────────────────────────────────────────────────────────── 14. PURCHASES MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .purchases-module, .vt-themed .purchases-modal { --pm-ink: var(--vt-primary); --pm-primary: var(--vt-primary); --pm-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 15. NFE MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .nfe-module { --nfe-ink: var(--vt-primary); --nfe-primary: var(--vt-primary); --nfe-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 16. CUSTOMERS MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .customers-module { --cust-color-ink: var(--vt-primary); --cust-color-primary: var(--vt-primary); --cust-color-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 17. CRM MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .crm-module { --crm-ink: var(--vt-primary); --crm-primary: var(--vt-primary); --crm-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 18. COTAÇÃO / CPQ MODULE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .cotacao-module { --cpq-ink: var(--vt-primary); --cpq-primary: var(--vt-primary); --cpq-primary-soft: var(--vt-primary-soft); } /* ───────────────────────────────────────────────────────────────────────────── 19. PLANTA VIVA MODULE (Different var pattern) ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .planta-viva-module { --pv-primary: var(--vt-primary) !important; --pv-success: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 20. PLANOGRAM MODULE (Different var pattern) ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .planogram-module { --planogram-primary: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 21. STORE LAYOUT MODULE (Different var pattern — :root scoped) ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .store-layout-module { --state-active: var(--vt-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ HARDCODED VALUE OVERRIDES These override specific elements that use hardcoded colors instead of CSS vars ═══════════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────────── A. DASHBOARD HEADER — Spinner, Avatar, Search ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .module-loading .spinner { border-top-color: var(--vt-spinner-color) !important; } .vt-themed .dashboard-header { border-bottom-color: var(--vt-header-border) !important; } .vt-themed .search-bar input:focus { border-color: var(--vt-focus-border) !important; box-shadow: var(--vt-focus-ring) !important; } /* ───────────────────────────────────────────────────────────────────────────── B. BUTTONS — Universal ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .btn-primary, .vt-themed .btn.btn-primary { background: var(--vt-primary-gradient) !important; border-color: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } .vt-themed .btn-primary:hover, .vt-themed .btn.btn-primary:hover { background: var(--vt-primary-hover) !important; border-color: var(--vt-primary-hover) !important; color: var(--vt-text-on-primary) !important; } /* Module-specific button overrides — invert pattern (white bg on hover) */ .vt-themed .products-module .btn-primary:hover, .vt-themed .inventory-module .btn-primary:hover, .vt-themed .ck-module .btn-primary:hover { background: #ffffff !important; color: var(--vt-primary) !important; border-color: var(--vt-primary) !important; } .vt-themed .btn-secondary:hover { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── C. MODAL HEADERS & FOOTERS ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .modal-header { background: var(--vt-primary-gradient) !important; } .vt-themed .modal-footer .btn-primary, .vt-themed .modal-footer .dm-btn-primary { background: var(--vt-primary-gradient) !important; border-color: var(--vt-primary) !important; } .vt-themed .modal-footer .btn-primary:hover, .vt-themed .modal-footer .dm-btn-primary:hover { background: var(--vt-primary-hover) !important; } /* ───────────────────────────────────────────────────────────────────────────── D. FORM FOCUS STATES — All modules ───────────────────────────────────────────────────────────────────────────── */ .vt-themed input:focus, .vt-themed select:focus, .vt-themed textarea:focus { border-color: var(--vt-focus-border) !important; box-shadow: var(--vt-focus-ring) !important; } /* ───────────────────────────────────────────────────────────────────────────── E. OVERVIEW MODULE — Hero, Tabs, Cards ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .overview-welcome-hero { background: var(--vt-primary) !important; } .vt-themed .segmented-control button.active { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; box-shadow: 0 2px 8px rgba(var(--vt-primary-r), var(--vt-primary-g), var(--vt-primary-b), 0.2) !important; } .vt-themed .chart-period-btn.active { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } .vt-themed .toolbar-customize:hover { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } .vt-themed .card-icon-wrapper { background: var(--vt-primary-soft) !important; } /* ───────────────────────────────────────────────────────────────────────────── F. TAB BUTTONS — All modules ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .tab-btn.active { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } /* Checkout pipeline active step */ .vt-themed .ck-pipeline-step.active { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } /* Products import format tab active */ .vt-themed .format-tab.active { background: var(--vt-primary-gradient) !important; color: var(--vt-text-on-primary) !important; } .vt-themed .format-tab.active::before { background: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── G. TABLE ROW HOVER — All modules ───────────────────────────────────────────────────────────────────────────── */ .vt-themed #products-table tbody tr:hover, .vt-themed .inventory-module table tbody tr:hover, .vt-themed .sales-report-module table tbody tr:hover { background: var(--vt-row-hover) !important; } /* Sales report VoygerGrid vars */ .vt-themed .sales-report-module { --vg-primary: var(--vt-primary); --vg-selected: var(--vt-primary-softer); --vg-row-hover: var(--vt-row-hover); } /* ───────────────────────────────────────────────────────────────────────────── H. LOADING BAR ───────────────────────────────────────────────────────────────────────────── */ .vt-themed #loading-bar { background: var(--vt-loading-bar) !important; } /* ───────────────────────────────────────────────────────────────────────────── I. NOTIFICATION DROPDOWN ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .notif-tab-btn.active { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } .vt-themed .notification-item.unread { background: linear-gradient(135deg, var(--vt-notif-tint) 0%, var(--vt-notif-tint-deep) 100%) !important; } .vt-themed .notification-item.unread::before { background: var(--vt-notif-indicator) !important; } .vt-themed .notif-icon.info { background: var(--vt-primary-soft) !important; color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── J. WIZARD / STEPPER ACTIVE STEPS ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .wizard-step.active, .vt-themed .import-step.active, .vt-themed .inventory-wizard-step.active { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; box-shadow: 0 4px 12px rgba(var(--vt-primary-r), var(--vt-primary-g), var(--vt-primary-b), 0.25) !important; } /* Products import active step with gradient */ .vt-themed .products-module .import-step.active { background: var(--vt-primary-gradient) !important; } /* ───────────────────────────────────────────────────────────────────────────── K. CARD HOVER WITH INK (Overview pattern) ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .overview-card:hover { border-color: var(--vt-primary) !important; } .vt-themed .inventory-module .card-header button:hover { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── L. LINKS & ANCHORS ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .module-content-area a:not(.btn):not(.nav-item):not(.drawer-item):hover { color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── M. TOGGLE / SWITCH ACTIVE STATE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed input[type="checkbox"]:checked + .toggle-slider, .vt-themed .toggle-switch input:checked + .toggle-slider { background: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── N. PAGINATION ACTIVE ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .pagination-btn.active, .vt-themed .page-btn.active { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── O. PROGRESS BARS ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .progress-fill:not(.danger):not(.warning):not(.success) { background: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── P. PROFILE MODAL ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .profile-modal-nav .nav-item.active { background: var(--vt-primary-soft) !important; color: var(--vt-primary) !important; border-left-color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── Q. SELECTIONS & HIGHLIGHTS ───────────────────────────────────────────────────────────────────────────── */ .vt-themed ::selection { background: rgba(var(--vt-primary-r), var(--vt-primary-g), var(--vt-primary-b), 0.2); } /* ───────────────────────────────────────────────────────────────────────────── R. SETTINGS MODAL (simple-settings-modal) ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .settings-modal-v3 .settings-tab-btn.active { background: var(--vt-primary) !important; color: var(--vt-text-on-primary) !important; } .vt-themed .settings-modal-v3 .btn-primary { background: var(--vt-primary-gradient) !important; } /* ───────────────────────────────────────────────────────────────────────────── S. STAT CARD ICON BACKGROUNDS ───────────────────────────────────────────────────────────────────────────── */ .vt-themed .card-icon.products, .vt-themed .stat-icon { background: var(--vt-primary-soft) !important; color: var(--vt-primary) !important; }