:root { --rb-primary: #ff4015; --rb-primary-dark: #eb2c01; } /* Boutons */ .btn-primary, .btn-rb-primary { background-color: #ff4015 !important; border-color: #ff4015 !important; } .btn-primary:hover, .btn-rb-primary:hover { background-color: #eb2c01 !important; border-color: #eb2c01 !important; } /* Sidebar active */ .rb-sidebar .nav-link.active { background: #ff401522; border-left-color: #ff4015; color: #fff; } .rb-sidebar .nav-link:hover { border-left-color: #ff401580; } /* Badges, stat cards */ .stat-card-primary { background: #ff4015 !important; } /* Auth card header */ .auth-card .card-header { background: #ff4015 !important; } /* Formulaires focus */ .form-control:focus, .form-select:focus { border-color: #ff4015; box-shadow: 0 0 0 .2rem #ff401530; } /* Progress bar */ .progress-bar.bar-primary { background: #ff4015 !important; } /* Menu client */ .menu-price { color: #ff4015 !important; } .navbar-restobar { background: var(--rb-secondary) !important; } .cart-fab .btn { background: #ff4015 !important; box-shadow: 0 4px 18px #ff401555; } /* Pagination */ .pagination .page-link { color: #ff4015; } .pagination .page-item.active .page-link { background: #ff4015; border-color: #ff4015; } /* Texte + bordure primary */ .text-primary { color: #ff4015 !important; } .border-primary { border-color: #ff4015 !important; } /* Topbar accent */ .rb-topbar { border-bottom: 2px solid #ff401520; } /* Modal header */ .modal-header[style*="rb-secondary"], .modal-header.bg-rb { background: var(--rb-secondary) !important; } /* ═══════════════════════════════════════════════════════════════ 🌙 DARK MODE — Surcharge des couleurs neutres (non destructif) Active via . La couleur primaire (orange) reste identique en clair comme en sombre — signature de marque. ═══════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --rb-bg: #0f172a; --rb-bg-soft: #1e293b; --rb-card: #1e293b; --rb-card-2: #243044; --rb-border: #334155; --rb-text: #e2e8f0; --rb-text-muted: #94a3b8; color-scheme: dark; } /* Fond global + texte */ html[data-theme="dark"] body { background: var(--rb-bg) !important; color: var(--rb-text); } /* Cartes, panneaux blancs → sombre */ html[data-theme="dark"] .card, html[data-theme="dark"] .rb-card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .accordion-item, html[data-theme="dark"] .offcanvas { background-color: var(--rb-card) !important; color: var(--rb-text); border-color: var(--rb-border); } /* Surfaces secondaires (bg-white, bg-light, table-light…) */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light, html[data-theme="dark"] .table-light, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .input-group-text { background-color: var(--rb-card-2) !important; color: var(--rb-text) !important; border-color: var(--rb-border) !important; } /* Topbar sticky */ html[data-theme="dark"] .rb-topbar, html[data-theme="dark"] .pos-topbar { background: var(--rb-card) !important; border-bottom-color: var(--rb-border) !important; } html[data-theme="dark"] .topbar-title, html[data-theme="dark"] .topbar-count { color: var(--rb-text) !important; } html[data-theme="dark"] .topbar-count { background: var(--rb-card-2) !important; } /* Tableaux */ html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--rb-text); color: var(--rb-text); } html[data-theme="dark"] .table thead tr, html[data-theme="dark"] .table thead th, html[data-theme="dark"] .tbl-prod thead tr, html[data-theme="dark"] .tbl-prod th { background: var(--rb-card-2) !important; color: var(--rb-text-muted) !important; border-color: var(--rb-border) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] .tbl-prod td { border-color: var(--rb-border) !important; color: var(--rb-text); } html[data-theme="dark"] .table tbody tr:hover td, html[data-theme="dark"] .tbl-prod tbody tr:hover td { background: var(--rb-card-2) !important; } /* Colonne actions sticky (fond opaque) */ html[data-theme="dark"] .tbl-prod td.col-act, html[data-theme="dark"] .tbl-prod th.col-act { background: var(--rb-card) !important; } /* Champs de formulaire */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea { background-color: var(--rb-bg-soft) !important; color: var(--rb-text) !important; border-color: var(--rb-border) !important; } html[data-theme="dark"] .form-control::placeholder { color: #64748b !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--rb-bg-soft) !important; } /* Textes utilitaires */ html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--rb-text-muted) !important; } html[data-theme="dark"] .text-dark { color: var(--rb-text) !important; } /* Bordures */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--rb-border) !important; } /* KPI cards (products/dashboard) */ html[data-theme="dark"] .kpi-card { background: var(--rb-card) !important; border-color: var(--rb-border) !important; } html[data-theme="dark"] .kpi-val { color: var(--rb-text) !important; } /* Inputs group / search */ html[data-theme="dark"] .input-group-text.bg-white { background: var(--rb-card-2) !important; } /* Boutons outline-secondary lisibles */ html[data-theme="dark"] .btn-outline-secondary { color: var(--rb-text-muted); border-color: var(--rb-border); } html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--rb-border); color: #fff; } /* Badges légers (bg-light bg-opacity) restent lisibles */ html[data-theme="dark"] .badge.bg-light { color: var(--rb-text) !important; } /* Pagination */ html[data-theme="dark"] .page-link { background: var(--rb-card) !important; border-color: var(--rb-border) !important; } /* Transition douce lors du changement de thème */ body, .card, .rb-card, .rb-topbar, .pos-topbar, .table td, .table th, .form-control, .form-select, .kpi-card, .modal-content { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }