/* ============================================================================ Fabmastery.pro - Bootstrap 5.3 Color Modes (Dark Mode) --------------------------------------------------------------------------- This file is loaded AFTER Vite assets, so it can safely override colors for: - Custom ERP CSS (erp-main-card, erp-sidebar, erp-nav-link, etc.) - Bootstrap "bg-white/bg-light/table-light/text-bg-light" hardcoded usage - Select2 component styling in dark mode Toggle is controlled by: Stored in localStorage key: erp-theme ============================================================================ */ /* Provide a few ERP-specific variables */ :root[data-bs-theme="dark"] { --erp-shell-bg: #101b18; --erp-card-bg: #14231f; --erp-surface-bg: rgba(20, 35, 31, 0.92); --erp-surface-muted: rgba(22, 78, 99, 0.28); --erp-surface-strong: #14231f; --erp-sidebar-bg: #10211d; --erp-sidebar-hover-bg: rgba(255, 255, 255, 0.06); --erp-sidebar-active-bg: rgba(45, 212, 191, 0.16); --erp-border-color: rgba(94, 234, 212, 0.12); --erp-border-strong: rgba(94, 234, 212, 0.20); --erp-text-muted: #99b8b2; --erp-title-color: #ecfdf5; --erp-accent: #5eead4; --erp-accent-rgb: 94, 234, 212; --erp-accent-warm: #fbbf24; --erp-accent-warm-rgb: 251, 191, 36; --erp-shadow: 0 6px 20px rgba(0, 0, 0, 0.38); --bs-primary: #0f766e; --bs-primary-rgb: 15, 118, 110; } /* Base background */ :root[data-bs-theme="dark"] body { background-color: var(--bs-body-bg) !important; } :root[data-bs-theme="dark"] body.erp-shell { background: radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 26%), radial-gradient(circle at top right, rgba(245, 158, 11, 0.10), transparent 22%), linear-gradient(180deg, #111f1d 0%, var(--erp-shell-bg) 100%); } /* Fix ERP main card (hardcoded white in resources/css/app.css) */ :root[data-bs-theme="dark"] .erp-main-card { background-color: var(--erp-card-bg) !important; color: var(--bs-body-color); box-shadow: var(--erp-shadow); border-color: var(--erp-border-color); } /* Sidebar + header (hardcoded white in resources/css/app.css / blade) */ :root[data-bs-theme="dark"] .erp-header, :root[data-bs-theme="dark"] .erp-sidebar, :root[data-bs-theme="dark"] .erp-sidebar-brand, :root[data-bs-theme="dark"] .erp-sidebar-search-wrap { background-color: var(--erp-sidebar-bg) !important; } :root[data-bs-theme="dark"] .erp-surface, :root[data-bs-theme="dark"] .erp-kpi, :root[data-bs-theme="dark"] .erp-table-card { background-color: var(--erp-surface-strong) !important; border-color: var(--erp-border-color) !important; color: var(--bs-body-color); } :root[data-bs-theme="dark"] .erp-surface-subtle, :root[data-bs-theme="dark"] .erp-toolbar, :root[data-bs-theme="dark"] .erp-filter-bar, :root[data-bs-theme="dark"] .erp-empty-state { background-color: var(--erp-surface-muted) !important; border-color: var(--erp-border-color) !important; color: var(--bs-body-color); } :root[data-bs-theme="dark"] .erp-kpi { background: linear-gradient(145deg, rgba(20, 35, 31, 0.98), rgba(15, 31, 28, 0.92)) !important; } :root[data-bs-theme="dark"] .erp-page-header h1, :root[data-bs-theme="dark"] .erp-page-header .h1, :root[data-bs-theme="dark"] .erp-page-header .h2, :root[data-bs-theme="dark"] .erp-page-header .h3, :root[data-bs-theme="dark"] .erp-page-header .h4, :root[data-bs-theme="dark"] .erp-page-header .h5, :root[data-bs-theme="dark"] .erp-kpi-value, :root[data-bs-theme="dark"] .erp-section-title { color: var(--erp-title-color); } :root[data-bs-theme="dark"] .erp-page-header small, :root[data-bs-theme="dark"] .erp-page-header .text-muted, :root[data-bs-theme="dark"] .erp-page-header .text-body-secondary, :root[data-bs-theme="dark"] .erp-kpi-label, :root[data-bs-theme="dark"] .erp-kpi-meta { color: var(--erp-text-muted) !important; } :root[data-bs-theme="dark"] .erp-kpi-pill { background-color: rgba(148, 163, 184, 0.12); color: var(--erp-text-muted); } :root[data-bs-theme="dark"] .erp-kpi-pill strong, :root[data-bs-theme="dark"] .erp-kpi-unit { color: var(--erp-title-color); } :root[data-bs-theme="dark"] .erp-kpi-icon, :root[data-bs-theme="dark"] .erp-empty-state-icon { background-color: rgba(94, 234, 212, 0.14); color: #5eead4; } /* Sidebar links */ :root[data-bs-theme="dark"] .erp-nav-link:hover { background-color: var(--erp-sidebar-hover-bg) !important; color: var(--bs-body-color) !important; } :root[data-bs-theme="dark"] .erp-nav-link.active { background-color: var(--erp-sidebar-active-bg) !important; color: var(--bs-body-color) !important; } /* Ensure sidebar text remains readable */ :root[data-bs-theme="dark"] .erp-sidebar .nav-link { color: var(--bs-body-color) !important; } :root[data-bs-theme="dark"] .erp-sidebar .nav-link.text-body-secondary { color: var(--bs-secondary-color) !important; } /* Bootstrap utility classes that force light backgrounds */ :root[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; } :root[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } /* Tables that use table-light header */ :root[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); } :root[data-bs-theme="dark"] .erp-table-card thead th { background-color: rgba(30, 41, 59, 0.78) !important; color: var(--erp-text-muted) !important; } /* Badge "light" becomes unreadable in dark mode */ :root[data-bs-theme="dark"] .text-bg-light { color: var(--bs-body-color) !important; background-color: var(--bs-tertiary-bg) !important; } /* Notifications dropdown (layout topbar) */ :root[data-bs-theme="dark"] .notifications-dropdown .list-group-item { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } :root[data-bs-theme="dark"] .notifications-dropdown .list-group-item:hover, :root[data-bs-theme="dark"] .notifications-dropdown .list-group-item:focus { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); } :root[data-bs-theme="dark"] .notifications-dropdown .border-bottom, :root[data-bs-theme="dark"] .notifications-dropdown .border-top { border-color: var(--bs-border-color) !important; } /* Select2 dark mode (common pain point) */ :root[data-bs-theme="dark"] .select2-container--default .select2-selection--single, :root[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); } :root[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, :root[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--bs-body-color); } :root[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } :root[data-bs-theme="dark"] .select2-dropdown { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } :root[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); } /* Scrollbars (optional cosmetics) */ :root[data-bs-theme="dark"] .erp-main-scroll { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } :root[data-bs-theme="dark"] .erp-main-scroll::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.18); } :root[data-bs-theme="dark"] .erp-main-scroll::-webkit-scrollbar-track { background: transparent; } /* ============================================================================ TYPOGRAPHY + RESPONSIVE CONSISTENCY (ERP) ---------------------------------------------------------------------------- ERP layout loads Bootstrap (CDN) + Tailwind (via resources/css/app.css). Tailwind "preflight" resets base elements (h1-h6, p, a, ul/ol), which causes inconsistent font sizes across ERP pages depending on markup. This block restores Bootstrap typography ONLY for ERP pages (since this file is only loaded in layouts/erp.blade.php). ============================================================================ */ :root { --erp-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --bs-body-font-family: var(--erp-font-sans); } body { font-family: var(--erp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Restore Bootstrap defaults that Tailwind preflight flattens */ h1, h2, h3, h4, h5, h6 { font-size: revert; font-weight: revert; line-height: revert; margin: revert; } p { margin: revert; } a { color: revert; text-decoration: revert; } ul, ol { margin: revert; padding: revert; list-style: revert; } small { font-size: revert; } /* Mobile polish (common ERP pain points: padding + overflow + offcanvas width) */ @media (max-width: 575.98px) { .erp-main-scroll .container-fluid { padding: 0.75rem !important; } /* Prevent “cut off” content on smaller screens (tables, long rows, etc.) */ .erp-main-card { overflow-x: auto; } /* Make sidebar offcanvas feel better on phones */ .offcanvas.offcanvas-start { width: 85vw; max-width: 320px; } /* Slightly more readable tables on phones */ .table { font-size: 0.925rem; } } /* Fabmastery demo component color alignment in dark mode */ :root[data-bs-theme="dark"] body.erp-shell .card, :root[data-bs-theme="dark"] body.erp-shell .modal-content, :root[data-bs-theme="dark"] body.erp-shell .dropdown-menu, :root[data-bs-theme="dark"] body.erp-shell .list-group-item { background-color: var(--erp-card-bg); border-color: var(--erp-border-color); color: var(--bs-body-color); } :root[data-bs-theme="dark"] body.erp-shell .card { background: linear-gradient(145deg, rgba(20, 35, 31, 0.98), rgba(16, 33, 29, 0.94)); } :root[data-bs-theme="dark"] body.erp-shell .card-header, :root[data-bs-theme="dark"] body.erp-shell .modal-header, :root[data-bs-theme="dark"] body.erp-shell .modal-footer { background: linear-gradient(135deg, rgba(20, 83, 45, 0.34), rgba(113, 63, 18, 0.18)); border-color: var(--erp-border-color); } :root[data-bs-theme="dark"] body.erp-shell .form-control, :root[data-bs-theme="dark"] body.erp-shell .form-select, :root[data-bs-theme="dark"] body.erp-shell .input-group-text, :root[data-bs-theme="dark"] body.erp-shell .select2-container--default .select2-selection--single, :root[data-bs-theme="dark"] body.erp-shell .select2-container--default .select2-selection--multiple { background-color: rgba(16, 33, 29, 0.92); border-color: rgba(94, 234, 212, 0.16); color: var(--bs-body-color); } :root[data-bs-theme="dark"] body.erp-shell .table { --bs-table-hover-bg: rgba(20, 184, 166, 0.10); } :root[data-bs-theme="dark"] body.erp-shell .table-light, :root[data-bs-theme="dark"] body.erp-shell thead.table-light, :root[data-bs-theme="dark"] body.erp-shell .table thead th { --bs-table-bg: rgba(20, 83, 45, 0.28); --bs-table-color: #d1fae5; } :root[data-bs-theme="dark"] body.erp-shell .btn-outline-primary, :root[data-bs-theme="dark"] body.erp-shell .btn-outline-dark, :root[data-bs-theme="dark"] body.erp-shell .btn-outline-secondary { --bs-btn-color: #5eead4; --bs-btn-border-color: rgba(94, 234, 212, 0.28); --bs-btn-hover-bg: #0f766e; --bs-btn-hover-border-color: #0f766e; --bs-btn-hover-color: #ffffff; } :root[data-bs-theme="dark"] body.erp-shell .dropdown-item:hover, :root[data-bs-theme="dark"] body.erp-shell .dropdown-item:focus { background-color: rgba(94, 234, 212, 0.10); color: #ecfdf5; } :root[data-bs-theme="dark"] body.erp-shell .page-link { color: #5eead4; background-color: var(--erp-card-bg); border-color: var(--erp-border-color); } :root[data-bs-theme="dark"] body.erp-shell .erp-module-group, :root[data-bs-theme="dark"] body.erp-shell .erp-stat-card { background: linear-gradient(145deg, rgba(20, 35, 31, 0.98), rgba(16, 33, 29, 0.94)); border-color: var(--erp-border-color); } :root[data-bs-theme="dark"] body.erp-shell .erp-module-group-header { background: linear-gradient(135deg, rgba(20, 83, 45, 0.32), rgba(113, 63, 18, 0.18)); border-color: var(--erp-border-color); }