/* ========================================================================== TexERP Global Theme Engine -------------------------------------------------------------------------- A design-token driven, multi-theme system. Themes are activated by setting a `data-theme` attribute on the element: Available themes: - default : The legacy application look (pixel-identical, zero regression). - light : "Aurora Light" — an airy, elevated, modern light experience. - dark : "Midnight" — a refined dark experience. All visual surface overrides below are scoped to `html[data-theme]:not([data-theme="default"])`, which guarantees the default theme is rendered EXACTLY as the original stylesheet stack (style.css + navbar.css) intends. Non-default themes resolve every color from the CSS custom properties (design tokens) defined here, so a theme swap recolors the entire system uniformly without touching layout. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ /* Fallback tokens (also the default theme values). These mirror the existing hard-coded palette so `default` is visually identical to the legacy look. */ :root, html[data-theme="default"] { /* App shell */ --tx-app-bg: #f8f9fa; --tx-app-bg-image: none; --tx-surface: #ffffff; --tx-surface-2: #f8f9fa; --tx-surface-hover: #f1f3f5; --tx-border: rgba(0, 0, 0, 0.125); --tx-border-soft: #edece9; /* Typography */ --tx-text: #212529; --tx-text-strong: #1e293b; --tx-text-muted: #6c757d; --tx-text-faint: #adb5bd; /* Accent */ --tx-accent: #0d6efd; --tx-accent-strong: #0a58ca; --tx-accent-soft: rgba(13, 110, 253, 0.1); /* Structural surfaces */ --tx-header-bg: #ffffff; --tx-sidebar-bg: #343a40; --tx-sidebar-text: rgba(255, 255, 255, 0.75); /* Elevation & shape */ --tx-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --tx-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); --tx-radius: 0.375rem; --tx-radius-lg: 0.5rem; /* Forms */ --tx-input-bg: #ffffff; --tx-input-border: #bce1e1; /* Tables */ --tx-table-head-bg: #fcfcfc; --tx-table-head-text: #5f666d; --tx-table-row-hover: #f7f6f3; /* Dropdowns */ --tx-dropdown-bg: rgba(255, 255, 255, 0.95); --tx-dropdown-text: #475569; --tx-dropdown-hover: rgba(37, 99, 235, 0.1); /* navbar.css interop (consumed by .navbar-custom) */ --nav-bg: rgba(255, 255, 255, 0.85); --nav-text: #334155; --nav-hover: #3b82f6; --nav-active: #2563eb; } /* Aurora Light — airy, elevated, modern light theme */ html[data-theme="light"] { --tx-app-bg: #eef2f8; --tx-app-bg-image: radial-gradient(1200px 520px at 88% -10%, rgba(99, 132, 255, 0.12), transparent 60%), radial-gradient(1000px 480px at -10% 18%, rgba(56, 189, 248, 0.10), transparent 55%), linear-gradient(180deg, #f3f6fb 0%, #eaeef6 100%); --tx-surface: #ffffff; --tx-surface-2: #f6f8fc; --tx-surface-hover: #f1f5fb; --tx-border: #e5eaf2; --tx-border-soft: #edf1f7; --tx-text: #243044; --tx-text-strong: #17233b; --tx-text-muted: #64748b; --tx-text-faint: #94a3b8; --tx-accent: #4f6ef7; --tx-accent-strong: #3b5bdb; --tx-accent-soft: rgba(79, 110, 247, 0.12); --tx-header-bg: rgba(255, 255, 255, 0.92); --tx-sidebar-bg: #ffffff; --tx-sidebar-text: #475569; --tx-shadow-sm: 0 1px 2px rgba(23, 35, 59, 0.05); --tx-shadow: 0 10px 30px -8px rgba(23, 35, 59, 0.12); --tx-radius: 0.75rem; --tx-radius-lg: 1rem; --tx-input-bg: #ffffff; --tx-input-border: #dbe4f0; --tx-table-head-bg: #f7f9fd; --tx-table-head-text: #5b6b84; --tx-table-row-hover: #f4f7fd; --tx-dropdown-bg: rgba(255, 255, 255, 0.98); --tx-dropdown-text: #475569; --tx-dropdown-hover: rgba(79, 110, 247, 0.10); --nav-bg: rgba(255, 255, 255, 0.9); --nav-text: #33415e; --nav-hover: #4f6ef7; --nav-active: #3b5bdb; } /* Midnight — refined dark theme */ html[data-theme="dark"] { --tx-app-bg: #0f172a; --tx-app-bg-image: radial-gradient(1100px 520px at 88% -10%, rgba(108, 140, 255, 0.14), transparent 60%), linear-gradient(180deg, #111c33 0%, #0d1526 100%); --tx-surface: #16213a; --tx-surface-2: #1b2942; --tx-surface-hover: #21314f; --tx-border: #2c3b58; --tx-border-soft: #24334f; --tx-text: #dbe4f3; --tx-text-strong: #eef3fc; --tx-text-muted: #93a3bc; --tx-text-faint: #64748b; --tx-accent: #6c8cff; --tx-accent-strong: #4f6ef7; --tx-accent-soft: rgba(108, 140, 255, 0.16); --tx-header-bg: rgba(15, 23, 42, 0.9); --tx-sidebar-bg: #111c33; --tx-sidebar-text: rgba(219, 228, 243, 0.75); --tx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --tx-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5); --tx-radius: 0.75rem; --tx-radius-lg: 1rem; --tx-input-bg: #1b2942; --tx-input-border: #31415f; --tx-table-head-bg: #1b2942; --tx-table-head-text: #93a3bc; --tx-table-row-hover: #1e2c49; --tx-dropdown-bg: rgba(22, 33, 58, 0.98); --tx-dropdown-text: #c3cfe3; --tx-dropdown-hover: rgba(108, 140, 255, 0.14); --nav-bg: rgba(15, 23, 42, 0.88); --nav-text: #c3cfe3; --nav-hover: #6c8cff; --nav-active: #8aa4ff; } /* -------------------------------------------------------------------------- 2. GLOBAL SURFACE OVERRIDES (non-default themes only) -------------------------------------------------------------------------- The `T` prefix below is shorthand in comments for: html[data-theme]:not([data-theme="default"]) -------------------------------------------------------------------------- */ /* ---- App shell ---- */ html[data-theme]:not([data-theme="default"]) body { background-color: var(--tx-app-bg) !important; background-image: var(--tx-app-bg-image) !important; background-attachment: fixed !important; color: var(--tx-text) !important; } /* ---- Top header row (brand / administration) ---- */ html[data-theme]:not([data-theme="default"]) .top-row-nav { background: var(--tx-header-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--tx-border) !important; } html[data-theme]:not([data-theme="default"]) .top-row-nav .navbar-brand h5, html[data-theme]:not([data-theme="default"]) .top-row-nav .text-dark { color: var(--tx-text-strong) !important; } html[data-theme]:not([data-theme="default"]) .top-row-nav .text-muted { color: var(--tx-text-muted) !important; } html[data-theme]:not([data-theme="default"]) .top-row-nav .navbar-logo { background-color: var(--tx-surface) !important; } /* ---- Module navbar (consumes --nav-* tokens from navbar.css) ---- */ html[data-theme]:not([data-theme="default"]) .navbar-custom .dropdown-menu { background: var(--tx-dropdown-bg) !important; border: 1px solid var(--tx-border) !important; } html[data-theme]:not([data-theme="default"]) .navbar-custom .dropdown-item { color: var(--tx-dropdown-text) !important; } html[data-theme]:not([data-theme="default"]) .navbar-custom .dropdown-item:hover, html[data-theme]:not([data-theme="default"]) .navbar-custom .dropdown-item:focus { background-color: var(--tx-dropdown-hover) !important; color: var(--nav-active) !important; } html[data-theme]:not([data-theme="default"]) .navbar-custom .mega-dropdown-menu .dropdown-header { color: var(--tx-text-strong) !important; } html[data-theme]:not([data-theme="default"]) .navbar-custom .dropdown-divider { border-color: var(--tx-border) !important; } html[data-theme]:not([data-theme="default"]) .navbar-custom .navbar-collapse { background: var(--tx-surface) !important; border-bottom-color: var(--tx-border) !important; } html[data-theme]:not([data-theme="default"]) .toggler-icon, html[data-theme]:not([data-theme="default"]) .toggler-icon::before, html[data-theme]:not([data-theme="default"]) .toggler-icon::after { background-color: var(--tx-text) !important; } /* ---- Legacy sidebar ---- */ html[data-theme]:not([data-theme="default"]) .sidebar { background-color: var(--tx-sidebar-bg) !important; border-right: 1px solid var(--tx-border); } html[data-theme]:not([data-theme="default"]) .sidebar .nav-link { color: var(--tx-sidebar-text) !important; } html[data-theme]:not([data-theme="default"]) .sidebar .nav-link:hover, html[data-theme]:not([data-theme="default"]) .sidebar .nav-link:focus { background-color: var(--tx-surface-hover) !important; color: var(--tx-text-strong) !important; } html[data-theme]:not([data-theme="default"]) .sidebar .nav-link.active { background-color: var(--tx-accent-soft) !important; border-left-color: var(--tx-accent) !important; color: var(--tx-accent) !important; } html[data-theme]:not([data-theme="default"]) .sidebar .collapse.bg-dark { background-color: transparent !important; } /* ---- Cards ---- */ html[data-theme]:not([data-theme="default"]) .card { background-color: var(--tx-surface) !important; border: 1px solid var(--tx-border) !important; border-radius: var(--tx-radius-lg) !important; box-shadow: var(--tx-shadow-sm) !important; color: var(--tx-text) !important; } html[data-theme]:not([data-theme="default"]) .card-header { background-color: var(--tx-surface-2) !important; border-bottom: 1px solid var(--tx-border-soft) !important; color: var(--tx-text-strong) !important; } html[data-theme]:not([data-theme="default"]) .card-footer { background-color: var(--tx-surface-2) !important; border-top: 1px solid var(--tx-border-soft) !important; } /* ---- Generic text utilities ---- */ html[data-theme]:not([data-theme="default"]) .text-dark { color: var(--tx-text-strong) !important; } html[data-theme]:not([data-theme="default"]) .text-muted { color: var(--tx-text-muted) !important; } html[data-theme]:not([data-theme="default"]) .text-secondary { color: var(--tx-text-muted) !important; } /* ---- Generic background utilities used across views ---- */ html[data-theme]:not([data-theme="default"]) .bg-light { background-color: var(--tx-surface-2) !important; } html[data-theme]:not([data-theme="default"]) .bg-white { background-color: var(--tx-surface) !important; } /* ---- Tables (Notion-style block in style.css) ---- */ html[data-theme]:not([data-theme="default"]) .table, html[data-theme]:not([data-theme="default"]) table.dataTable, html[data-theme]:not([data-theme="default"]) .table-responsive table { background-color: var(--tx-surface) !important; color: var(--tx-text) !important; } html[data-theme]:not([data-theme="default"]) .table tbody tr, html[data-theme]:not([data-theme="default"]) table.dataTable tbody tr { background-color: var(--tx-surface) !important; border-bottom-color: var(--tx-border-soft) !important; } html[data-theme]:not([data-theme="default"]) .table-hover tbody tr:hover, html[data-theme]:not([data-theme="default"]) .table tbody tr:hover, html[data-theme]:not([data-theme="default"]) table.dataTable tbody tr:hover { background-color: var(--tx-table-row-hover) !important; } html[data-theme]:not([data-theme="default"]) .table thead th, html[data-theme]:not([data-theme="default"]) .table thead td, html[data-theme]:not([data-theme="default"]) thead.table-dark th, html[data-theme]:not([data-theme="default"]) thead.table-dark td, html[data-theme]:not([data-theme="default"]) table.dataTable thead th, html[data-theme]:not([data-theme="default"]) table.dataTable thead td, html[data-theme]:not([data-theme="default"]) .table > :not(caption) > * > *, html[data-theme]:not([data-theme="default"]) thead th { background-color: var(--tx-table-head-bg) !important; color: var(--tx-table-head-text) !important; border-bottom-color: var(--tx-border-soft) !important; } html[data-theme]:not([data-theme="default"]) thead.table-dark { background-color: var(--tx-table-head-bg) !important; } /* ---- Forms ---- */ html[data-theme]:not([data-theme="default"]) .form-control, html[data-theme]:not([data-theme="default"]) .form-select, html[data-theme]:not([data-theme="default"]) .searchable-dropdown-input { background-color: var(--tx-input-bg) !important; border-color: var(--tx-input-border) !important; color: var(--tx-text) !important; } html[data-theme]:not([data-theme="default"]) .form-control:focus, html[data-theme]:not([data-theme="default"]) .form-select:focus { border-color: var(--tx-accent) !important; box-shadow: 0 0 0 4px var(--tx-accent-soft) !important; } html[data-theme]:not([data-theme="default"]) .form-label, html[data-theme]:not([data-theme="default"]) label.form-label { color: var(--tx-text-muted) !important; } html[data-theme]:not([data-theme="default"]) .form-control::placeholder { color: var(--tx-text-faint) !important; } html[data-theme]:not([data-theme="default"]) .form-check-input { background-color: var(--tx-input-bg) !important; border-color: var(--tx-input-border) !important; } html[data-theme]:not([data-theme="default"]) .form-check-input:checked { background-color: var(--tx-accent) !important; border-color: var(--tx-accent) !important; } html[data-theme]:not([data-theme="default"]) .form-select:disabled, html[data-theme]:not([data-theme="default"]) .form-control:disabled, html[data-theme]:not([data-theme="default"]) .form-control[readonly] { background-color: var(--tx-surface-2) !important; } /* ---- Generic Bootstrap dropdowns ---- */ html[data-theme]:not([data-theme="default"]) .dropdown-menu { background-color: var(--tx-dropdown-bg) !important; border: 1px solid var(--tx-border) !important; } html[data-theme]:not([data-theme="default"]) .dropdown-item { color: var(--tx-dropdown-text) !important; } html[data-theme]:not([data-theme="default"]) .dropdown-item:hover, html[data-theme]:not([data-theme="default"]) .dropdown-item:focus { background-color: var(--tx-dropdown-hover) !important; color: var(--tx-accent) !important; } html[data-theme]:not([data-theme="default"]) .dropdown-header { color: var(--tx-text-strong) !important; } html[data-theme]:not([data-theme="default"]) .dropdown-divider { border-color: var(--tx-border) !important; } /* ---- Modals ---- */ html[data-theme]:not([data-theme="default"]) .modal-content { background-color: var(--tx-surface) !important; border: 1px solid var(--tx-border) !important; color: var(--tx-text) !important; } html[data-theme]:not([data-theme="default"]) .modal-header { border-bottom-color: var(--tx-border-soft) !important; background-color: var(--tx-surface-2) !important; } html[data-theme]:not([data-theme="default"]) .modal-footer { border-top-color: var(--tx-border-soft) !important; background-color: var(--tx-surface-2) !important; } html[data-theme]:not([data-theme="default"]) .modal-title { color: var(--tx-text-strong) !important; } html[data-theme]:not([data-theme="default"]) .btn-close { filter: var(--tx-modal-close-filter, none); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---- List groups ---- */ html[data-theme]:not([data-theme="default"]) .list-group-item { background-color: var(--tx-surface) !important; border-color: var(--tx-border-soft) !important; color: var(--tx-text) !important; } html[data-theme]:not([data-theme="default"]) .list-group-item-action:hover { background-color: var(--tx-surface-hover) !important; } /* ---- Breadcrumb ---- */ html[data-theme]:not([data-theme="default"]) .breadcrumb { background-color: transparent !important; } html[data-theme]:not([data-theme="default"]) .breadcrumb-item a { color: var(--tx-accent) !important; } html[data-theme]:not([data-theme="default"]) .breadcrumb-item.active { color: var(--tx-text-muted) !important; } /* ---- Buttons that rely on light surfaces ---- */ html[data-theme]:not([data-theme="default"]) .btn-light, html[data-theme]:not([data-theme="default"]) .btn-white { background-color: var(--tx-surface) !important; border-color: var(--tx-border) !important; color: var(--tx-text) !important; } html[data-theme]:not([data-theme="default"]) .btn-light:hover, html[data-theme]:not([data-theme="default"]) .btn-white:hover { background-color: var(--tx-surface-hover) !important; } html[data-theme]:not([data-theme="default"]) .btn-outline-secondary { color: var(--tx-text-muted) !important; border-color: var(--tx-border) !important; } html[data-theme]:not([data-theme="default"]) .btn-outline-secondary:hover { background-color: var(--tx-surface-hover) !important; color: var(--tx-text-strong) !important; } /* ---- Alerts keep semantic colors but adapt text/borders subtly ---- */ html[data-theme="dark"] .alert-success { background-color: rgba(28, 200, 138, 0.15) !important; color: #7ee2b8 !important; } html[data-theme="dark"] .alert-danger { background-color: rgba(231, 74, 59, 0.15) !important; color: #f5a9a2 !important; } html[data-theme="dark"] .alert-warning { background-color: rgba(246, 194, 62, 0.15) !important; color: #f3d382 !important; } html[data-theme="dark"] .alert-info { background-color: rgba(54, 185, 204, 0.15) !important; color: #8fdbe6 !important; } html[data-theme="dark"] .alert-primary { background-color: rgba(108, 140, 255, 0.15) !important; color: #aebfff !important; } /* ---- Filter sections & misc panels ---- */ html[data-theme]:not([data-theme="default"]) .filter-section { background-color: var(--tx-surface-2) !important; border: 1px solid var(--tx-border-soft); } html[data-theme]:not([data-theme="default"]) .filter-section .form-label { color: var(--tx-text-muted) !important; } /* ---- Pagination / DataTables chrome ---- */ html[data-theme]:not([data-theme="default"]) .page-link { background-color: var(--tx-surface) !important; border-color: var(--tx-border-soft) !important; color: var(--tx-accent) !important; } html[data-theme]:not([data-theme="default"]) .page-item.active .page-link { background-color: var(--tx-accent) !important; border-color: var(--tx-accent) !important; color: #ffffff !important; } html[data-theme]:not([data-theme="default"]) .page-item.disabled .page-link { background-color: var(--tx-surface-2) !important; color: var(--tx-text-faint) !important; } html[data-theme]:not([data-theme="default"]) .dataTables_wrapper, html[data-theme]:not([data-theme="default"]) .dataTables_info, html[data-theme]:not([data-theme="default"]) .dataTables_length label, html[data-theme]:not([data-theme="default"]) .dataTables_filter label { color: var(--tx-text-muted) !important; } html[data-theme]:not([data-theme="default"]) .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--tx-text-muted) !important; } html[data-theme]:not([data-theme="default"]) .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--tx-accent) !important; border-color: var(--tx-accent) !important; color: #ffffff !important; } /* ---- Select2 (renders dropdown at body level) ---- */ html[data-theme]:not([data-theme="default"]) .select2-container--bootstrap-5 .select2-selection { background-color: var(--tx-input-bg) !important; border-color: var(--tx-input-border) !important; color: var(--tx-text) !important; } html[data-theme]:not([data-theme="default"]) .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--tx-dropdown-bg) !important; border-color: var(--tx-border) !important; } html[data-theme]:not([data-theme="default"]) .select2-container--bootstrap-5 .select2-results__option { color: var(--tx-dropdown-text) !important; } html[data-theme]:not([data-theme="default"]) .select2-container--bootstrap-5 .select2-results__option--highlighted, html[data-theme]:not([data-theme="default"]) .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] { background-color: var(--tx-dropdown-hover) !important; color: var(--tx-accent) !important; } html[data-theme]:not([data-theme="default"]) .select2-container--bootstrap-5 .select2-search__field { background-color: var(--tx-input-bg) !important; color: var(--tx-text) !important; } /* ---- User avatar / brand accents ---- */ html[data-theme]:not([data-theme="default"]) .user-avatar { background: linear-gradient(135deg, var(--tx-accent) 0%, var(--tx-accent-strong) 100%) !important; } /* ---- Horizontal rules ---- */ html[data-theme]:not([data-theme="default"]) hr { border-color: var(--tx-border-soft) !important; opacity: 0.7; } /* ---- Scrollbars (WebKit) for a polished themed feel ---- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #31415f; border-radius: 6px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3d5075; } html[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="light"] ::-webkit-scrollbar-track { background: #eef2f8; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c3cfE0; border-radius: 6px; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a9b8cd; } /* -------------------------------------------------------------------------- 3. THEME SWITCHER UI (top nav) -------------------------------------------------------------------------- */ .theme-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.12); vertical-align: middle; flex-shrink: 0; } .theme-swatch-default { background: linear-gradient(135deg, #f8f9fa 50%, #343a40 50%); } .theme-swatch-light { background: linear-gradient(135deg, #ffffff 50%, #c7d4f5 50%); } .theme-swatch-dark { background: linear-gradient(135deg, #16213a 50%, #0f172a 50%); } .theme-menu .dropdown-item { display: flex; align-items: center; gap: 0.6rem; } .theme-menu .dropdown-item .theme-name { font-weight: 600; } .theme-menu .dropdown-item .theme-desc { font-size: 0.72rem; opacity: 0.7; display: block; } .theme-menu .dropdown-item.active-theme { background-color: var(--tx-accent-soft, rgba(13, 110, 253, 0.1)); } .theme-menu .dropdown-item.active-theme .theme-name::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 0.45rem; font-size: 0.7rem; color: var(--tx-accent, #0d6efd); }