/* ============================================================================ MREP Portal — Global App Theme (Light + Dark) ---------------------------------------------------------------------------- Promotes the Home/Index dashboard look to a PROJECT-WIDE design system so every page inherits it through its existing shared markup (no per-page rewrites). Loaded AFTER enterprise-theme.css + mrepui.css so it wins. Model (confirmed with user): • LIGHT = default. Light content + a NEW LIGHT sidebar (designer's choice). • DARK = opt-in. Dark content + the existing dark ink-navy sidebar (kept). The theme is a single class on : `.theme-dark` / `.theme-light`, toggled from the top navbar and applied pre-paint (see _Layout head snippet) so there is no flash. Persisted in localStorage['_mrepTheme']. Strategy: 1. DARK re-colours by OVERRIDING the enterprise `--mrep-*` tokens, so every rule already written against those vars flips automatically. 2. Components with hard-coded colours (Tabulator, mrepui widgets, Bootstrap utilities, dropdowns, tables) get explicit `html.theme-dark …` rules. 3. LIGHT sidebar is a set of `html.theme-light .nxl-navigation …` overrides (higher specificity than the base dark rules, so they win); DARK keeps the untouched base sidebar. ========================================================================== */ /* ============================================================================ 1) DARK THEME — token overrides (flip everything var-driven at once) Values are aligned with the dashboard's own --dash-* tokens so the two never disagree where they overlap. ========================================================================== */ html.theme-dark { --mrep-ink: #E7EDF7; --mrep-ink-soft: #C3CEE0; --mrep-muted: #8D9BB4; --mrep-line: #29344C; --mrep-line-soft: #223049; --mrep-surface: #172136; --mrep-canvas: #0E1524; --mrep-canvas-2: #1E2A42; --mrep-brand-050: #16283C; /* dark tint used by modal-header / link hover */ --mrep-brand-100: #1E2B44; --mrep-shadow-sm: 0 1px 3px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.30); --mrep-shadow-md: 0 4px 16px rgba(0,0,0,.46), 0 2px 6px rgba(0,0,0,.34); --mrep-shadow-lg: 0 14px 44px rgba(0,0,0,.52), 0 4px 12px rgba(0,0,0,.40); color-scheme: dark; } /* body / shells already use var(--mrep-canvas|surface|ink) → auto-flip. A couple of shell rules restate colours literally; pin them here. */ html.theme-dark body { background: var(--mrep-canvas) !important; color: var(--mrep-ink); } html.theme-dark .nxl-content, html.theme-dark .nxl-container { background: var(--mrep-canvas); } html.theme-dark .page-title #bodyTitle, html.theme-dark #bodyTitle { color: var(--mrep-ink); } /* Top header + its dropdowns (theme.min pins .nxl-header{background:#fff}) */ html.theme-dark .nxl-header { background: var(--mrep-surface) !important; border-bottom-color: var(--mrep-line); } html.theme-dark .nxl-header .header-wrapper { background: var(--mrep-surface); border-bottom-color: var(--mrep-line); } html.theme-dark .container-fluid.page-title, html.theme-dark .page-title { background: transparent; } html.theme-dark .nxl-header .nxl-head-link { color: var(--mrep-ink-soft); } html.theme-dark .nxl-header .nxl-head-link:hover { background: var(--mrep-brand-050); color: var(--mrep-brand); } html.theme-dark .nxl-h-dropdown, html.theme-dark .nxl-h-dropdown.dropdown-menu { background: var(--mrep-surface); border-color: var(--mrep-line); color: var(--mrep-ink); box-shadow: var(--mrep-shadow-lg); } html.theme-dark .timesheets-head, html.theme-dark .notifications-head, html.theme-dark .timesheets-footer, html.theme-dark .notifications-footer, html.theme-dark .dropdown-header { border-color: var(--mrep-line) !important; } html.theme-dark .nxl-navigation-toggle a { color: var(--mrep-ink-soft); } html.theme-dark .nxl-navigation-toggle a:hover { color: var(--mrep-brand); } html.theme-dark .hamburger-inner, html.theme-dark .hamburger-inner::before, html.theme-dark .hamburger-inner::after { background-color: var(--mrep-ink-soft); } /* Footer */ html.theme-dark .footer { background: var(--mrep-surface); border-top-color: var(--mrep-line); color: var(--mrep-muted); } /* ---- Bootstrap utility classes used across pages -------------------------- */ html.theme-dark .bg-white { background-color: var(--mrep-surface) !important; } html.theme-dark .bg-light { background-color: var(--mrep-canvas-2) !important; } html.theme-dark .bg-body, html.theme-dark .bg-body-tertiary { background-color: var(--mrep-canvas) !important; } html.theme-dark .text-dark { color: var(--mrep-ink) !important; } html.theme-dark .text-muted, html.theme-dark .text-secondary { color: var(--mrep-muted) !important; } html.theme-dark .text-black { color: var(--mrep-ink) !important; } /* Form labels — the base theme hardcodes a dark navy (#283c50 !important) that is unreadable on a dark background. Restore a light label colour project-wide. */ html.theme-dark .col-form-label, html.theme-dark .form-label, html.theme-dark .control-label { color: var(--mrep-ink) !important; } html.theme-dark .border, html.theme-dark .border-top, html.theme-dark .border-end, html.theme-dark .border-bottom, html.theme-dark .border-start { border-color: var(--mrep-line) !important; } /* ---- Cards / panels / shared shell blocks --------------------------------- */ html.theme-dark .dashboard_graph, html.theme-dark .card, html.theme-dark .report-card, html.theme-dark .x_panel, html.theme-dark .tile_count, html.theme-dark .tile-stats { background: var(--mrep-surface); border-color: var(--mrep-line); color: var(--mrep-ink); } html.theme-dark .card-header, html.theme-dark .card-footer, html.theme-dark .x_title { background: var(--mrep-canvas-2); color: var(--mrep-ink); border-color: var(--mrep-line); } /* Dashboard / chart-card section titles (CallsDashboard: "Qualitative Performance Dashboard", "Frequency Wise Doctor Coverage", chart headings). These headings carry their own dark ink from the base theme, so force the light token in dark. */ html.theme-dark .x_title h1, html.theme-dark .x_title h2, html.theme-dark .x_title h3, html.theme-dark .x_title h4, html.theme-dark .x_title h5, html.theme-dark .dashboard_graph h3, html.theme-dark .dashboard_graph h4, html.theme-dark .dashboard_graph h5, html.theme-dark .x_content h3, html.theme-dark .x_content h4, html.theme-dark .x_content h5, html.theme-dark .long-title, html.theme-dark .long-title h3, html.theme-dark .long-title h4 { color: var(--mrep-ink) !important; fill: var(--mrep-ink) !important; } /* Grid toolbar icon buttons (download / column chooser) — the base is a hardcoded white button, which sits wrong on a dark surface. */ html.theme-dark .mrep-icon-btn { background: var(--mrep-canvas-2); border-color: var(--mrep-line); color: var(--mrep-ink); } html.theme-dark .mrep-icon-btn:hover { background: color-mix(in srgb, var(--mrep-brand) 18%, var(--mrep-surface)); border-color: var(--mrep-brand); color: var(--mrep-ink); } /* ---- Tables --------------------------------------------------------------- */ html.theme-dark .table { color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .table > :not(caption) > * > * { background-color: var(--mrep-surface); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .table thead th { background-color: var(--mrep-canvas-2); color: var(--mrep-ink-soft); } html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: color-mix(in srgb, var(--mrep-ink) 4%, var(--mrep-surface)); color: var(--mrep-ink); } html.theme-dark .table-hover > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--mrep-brand) 12%, var(--mrep-surface)); } html.theme-dark .table-bordered > :not(caption) > * > * { border-color: var(--mrep-line); } /* ---- Forms ---------------------------------------------------------------- */ html.theme-dark .form-control, html.theme-dark .form-select, html.theme-dark input.reportrange-picker-field { background-color: var(--mrep-canvas-2); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .form-control::placeholder { color: var(--mrep-muted); } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { background-color: var(--mrep-canvas-2); color: var(--mrep-ink); border-color: var(--mrep-brand); } html.theme-dark .input-group-text { background: var(--mrep-canvas-2); color: var(--mrep-ink-soft); border-color: var(--mrep-line); } html.theme-dark .form-check-input { background-color: var(--mrep-canvas-2); border-color: var(--mrep-line-soft); } html.theme-dark .form-check-input:checked { background-color: var(--mrep-brand); border-color: var(--mrep-brand); } /* ---- Dropdowns / list groups / nav-tabs ----------------------------------- */ html.theme-dark .dropdown-menu { background: var(--mrep-surface); border-color: var(--mrep-line); color: var(--mrep-ink); box-shadow: var(--mrep-shadow-md); } html.theme-dark .dropdown-item { color: var(--mrep-ink-soft); } html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus { background: var(--mrep-canvas-2); color: var(--mrep-ink); } html.theme-dark .dropdown-divider { border-color: var(--mrep-line); } html.theme-dark .list-group-item { background: var(--mrep-surface); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .nav-tabs { border-color: var(--mrep-line); } html.theme-dark .nav-tabs .nav-link { color: var(--mrep-ink-soft); } html.theme-dark .nav-tabs .nav-link:hover { border-color: var(--mrep-line) var(--mrep-line) var(--mrep-line); } html.theme-dark .nav-tabs .nav-link.active { background: var(--mrep-surface); color: var(--mrep-brand); border-color: var(--mrep-line) var(--mrep-line) var(--mrep-surface); } /* ---- Bootstrap modals (generic, e.g. report-info) ------------------------- */ html.theme-dark .modal-content { background: var(--mrep-surface); color: var(--mrep-ink); } html.theme-dark .modal-header { background: var(--mrep-brand-050); border-bottom-color: var(--mrep-line); } html.theme-dark .modal-footer { border-top-color: var(--mrep-line); } html.theme-dark .modal-title { color: var(--mrep-ink) !important; } html.theme-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* ============================================================================ 2) DARK THEME — Tabulator grid (used app-wide) ========================================================================== */ html.theme-dark .tabulator { background: var(--mrep-surface); border-color: var(--mrep-line); color: var(--mrep-ink); } html.theme-dark .tabulator .tabulator-header { background: var(--mrep-canvas-2); border-bottom-color: var(--mrep-line); color: var(--mrep-ink-soft); } html.theme-dark .tabulator .tabulator-header .tabulator-col { border-right-color: var(--mrep-line); } html.theme-dark .tabulator .tabulator-header .tabulator-col .tabulator-col-title { color: var(--mrep-ink-soft); } html.theme-dark .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: color-mix(in srgb, var(--mrep-ink) 8%, var(--mrep-canvas-2)); } html.theme-dark .tabulator .tabulator-header .tabulator-header-filter input, html.theme-dark .tabulator .tabulator-header .tabulator-header-filter select { background-color: var(--mrep-canvas); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .tabulator .tabulator-row { background: var(--mrep-surface); border-bottom-color: var(--mrep-line); } html.theme-dark .tabulator .tabulator-row.tabulator-row-even { background: color-mix(in srgb, var(--mrep-ink) 3%, var(--mrep-surface)); } html.theme-dark .tabulator .tabulator-row:hover { background: color-mix(in srgb, var(--mrep-brand) 12%, var(--mrep-surface)) !important; } html.theme-dark .tabulator .tabulator-row.tabulator-selected { background: color-mix(in srgb, var(--mrep-brand) 22%, var(--mrep-surface)) !important; } html.theme-dark .tabulator .tabulator-row .tabulator-cell { color: var(--mrep-ink); border-right-color: var(--mrep-line); } html.theme-dark .tabulator .tabulator-row.tabulator-group { background: var(--mrep-canvas-2); color: var(--mrep-ink); border-bottom-color: var(--mrep-line); } html.theme-dark .tabulator .tabulator-footer { background: var(--mrep-canvas-2); border-top-color: var(--mrep-line); color: var(--mrep-ink-soft); } html.theme-dark .tabulator .tabulator-footer .tabulator-page { background: var(--mrep-surface); border-color: var(--mrep-line); color: var(--mrep-ink-soft); } html.theme-dark .tabulator .tabulator-footer .tabulator-page.active { background: var(--mrep-brand); border-color: var(--mrep-brand); color: #fff; } html.theme-dark .tabulator .tabulator-col-calcs .tabulator-cell, html.theme-dark .tabulator .tabulator-calcs { background: var(--mrep-canvas-2) !important; color: var(--mrep-ink); } /* ============================================================================ 3) DARK THEME — mrepui / dx-compat widgets (popups, inputs, buttons) Many use var(--mrep-line) borders already; only the hard-coded #fff/#333/ grays need pinning. ========================================================================== */ html.theme-dark .mrep-input, html.theme-dark .mrep-select, html.theme-dark .mrep-search input, html.theme-dark .mrep-tagbox-chips, html.theme-dark .mrep-hf, html.theme-dark .mrep-hf-input { background-color: var(--mrep-canvas-2); color: var(--mrep-ink); } html.theme-dark .mrep-btn { background: var(--mrep-canvas-2); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .mrep-btn:hover { background: color-mix(in srgb, var(--mrep-ink) 8%, var(--mrep-canvas-2)); border-color: var(--mrep-line-soft); } html.theme-dark .mrep-btn.ghost { background: transparent; } /* Primary action buttons keep their brand fill in dark mode (the generic .mrep-btn dark rule above outranks .mrep-btn.primary, so restate it here). */ html.theme-dark .mrep-btn.primary { background: var(--mrep-brand); color: #fff; border-color: var(--mrep-brand); } html.theme-dark .mrep-btn.primary:hover { background: var(--mrep-brand-600); color: #fff; border-color: var(--mrep-brand-600); } html.theme-dark .mrep-popup, html.theme-dark .mrep-list, html.theme-dark .mrep-colchooser, html.theme-dark .mrep-tagbox-menu, html.theme-dark .mrep-ddb-pop, html.theme-dark .mrep-hf-menu, html.theme-dark .mrep-funnel-pop { background: var(--mrep-surface); border-color: var(--mrep-line); color: var(--mrep-ink); box-shadow: var(--mrep-shadow-lg); } html.theme-dark .mrep-popup-header, html.theme-dark .mrep-popup-footer { background: var(--mrep-canvas-2); border-color: var(--mrep-line); } html.theme-dark .mrep-popup-title { color: var(--mrep-ink); } html.theme-dark .mrep-popup-close:hover { background: rgba(255,255,255,.08); color: var(--mrep-ink); } html.theme-dark .mrep-list-item { color: var(--mrep-ink); border-bottom-color: var(--mrep-line); } html.theme-dark .mrep-list-item:hover, html.theme-dark .mrep-tagbox-opt:hover, html.theme-dark .mrep-ddb-pop .mrep-list-item:hover, html.theme-dark .mrep-hf-menu-item:hover, html.theme-dark .mrep-funnel-item:hover, html.theme-dark .mrep-colchooser label:hover { background: color-mix(in srgb, var(--mrep-brand) 16%, var(--mrep-surface)); } html.theme-dark .mrep-list-item.selected { background: color-mix(in srgb, var(--mrep-brand) 22%, var(--mrep-surface)); color: var(--mrep-brand); } html.theme-dark .mrep-hf-op { background: var(--mrep-canvas); color: var(--mrep-muted); border-right-color: var(--mrep-line); } html.theme-dark .mrep-hf-op:hover, html.theme-dark .mrep-funnel:hover { background: var(--mrep-canvas-2); color: var(--mrep-brand); } html.theme-dark .mrep-toolbar { color: var(--mrep-ink); } html.theme-dark .mrep-grouppanel { background: var(--mrep-canvas-2); border-color: var(--mrep-line); } html.theme-dark .mrep-loader { background: color-mix(in srgb, var(--mrep-canvas) 68%, transparent); } html.theme-dark .mrep-tabs { border-bottom-color: var(--mrep-line); } html.theme-dark .mrep-tab:hover { color: var(--mrep-ink); } /* ============================================================================ 3b) DARK THEME — extended coverage (native inputs, more Bootstrap/shell bits) ========================================================================== */ /* native date/time pickers (dxDateBox renders ) — make the control + its popup + the calendar icon dark automatically. */ html.theme-dark input[type="date"], html.theme-dark input[type="datetime-local"], html.theme-dark input[type="time"], html.theme-dark input[type="month"], html.theme-dark input[type="week"] { color-scheme: dark; } /* gentelella-style admin panels used on many report pages */ html.theme-dark .x_panel, html.theme-dark .x_content { background: var(--mrep-surface); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .tile_stats_count, html.theme-dark .tile-stats, html.theme-dark .tile { background: var(--mrep-surface); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .count, html.theme-dark .count_top, html.theme-dark .count_bottom { color: var(--mrep-ink); } /* accordions */ html.theme-dark .accordion, html.theme-dark .accordion-item { background: var(--mrep-surface); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .accordion-button { background: var(--mrep-canvas-2); color: var(--mrep-ink); } html.theme-dark .accordion-button:not(.collapsed) { background: var(--mrep-brand-050); color: var(--mrep-brand); } html.theme-dark .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); } html.theme-dark .accordion-body { background: var(--mrep-surface); color: var(--mrep-ink); } /* progress / pagination / breadcrumb / popover / offcanvas */ html.theme-dark .progress { background: var(--mrep-canvas-2); } html.theme-dark .pagination .page-link { background: var(--mrep-surface); border-color: var(--mrep-line); color: var(--mrep-ink-soft); } html.theme-dark .page-item.active .page-link { background: var(--mrep-brand); border-color: var(--mrep-brand); color: #fff; } html.theme-dark .page-item.disabled .page-link { background: var(--mrep-surface); color: var(--mrep-muted); } html.theme-dark .breadcrumb { color: var(--mrep-muted); } html.theme-dark .breadcrumb-item.active { color: var(--mrep-ink-soft); } html.theme-dark .popover, html.theme-dark .popover-body { background: var(--mrep-surface); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .popover-header { background: var(--mrep-canvas-2); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .offcanvas { background: var(--mrep-surface); color: var(--mrep-ink); } html.theme-dark .nav-pills .nav-link { color: var(--mrep-ink-soft); } html.theme-dark .nav-pills .nav-link.active { background: var(--mrep-brand); color: #fff; } /* any leftover DevExtreme overlay/popup surfaces from the dx-compat shim */ html.theme-dark .dx-overlay-content, html.theme-dark .dx-popup-content, html.theme-dark .dx-list, html.theme-dark .dx-datagrid { background: var(--mrep-surface); color: var(--mrep-ink); } /* ============================================================================ Date inputs (dxDateBox → native ) — attractive styling. Applies in both themes; a calendar glyph on the left, teal focus ring, and a tidy picker button on the right. ========================================================================== */ .mrep-input[type="date"], input.mrep-input[type="date"] { width: 100%; height: 44px; box-sizing: border-box; padding: 8px 12px 8px 40px; border-radius: 9px; border: 1px solid var(--mrep-line, #DDE3EC); color: var(--mrep-ink, #1A2332); background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 13px center; background-size: 17px; font-weight: 600; font-size: 13.5px; letter-spacing: .01em; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .mrep-input[type="date"]:hover { border-color: var(--mrep-brand, #2AABA0); } .mrep-input[type="date"]:focus { outline: none; border-color: var(--mrep-brand, #2AABA0); box-shadow: 0 0 0 3px rgba(42, 171, 160, .16); } .mrep-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; padding: 3px; margin-left: 6px; border-radius: 6px; transition: opacity .15s ease, background-color .15s ease; } .mrep-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--mrep-brand-050, #E8F8F7); } /* dark surface for the field */ html.theme-dark .mrep-input[type="date"] { background-color: var(--mrep-canvas-2); color: var(--mrep-ink); border-color: var(--mrep-line); } html.theme-dark .mrep-input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: rgba(52, 198, 185, .18); } /* ============================================================================ 3c) DARK THEME — beat ThemeOverRide.css forced-light `!important` rules. ThemeOverRide.css ships `.dashboard_graph { background:#fff !important }` (and a couple of non-important whites) which otherwise keep cards/overlays white in dark mode. Higher-specificity `!important` overrides reclaim them. ========================================================================== */ html.theme-dark .dashboard_graph { background: var(--mrep-surface) !important; } html.theme-dark button.btn-New { background-color: var(--mrep-canvas-2); } html.theme-dark button.btn-New span { color: var(--mrep-ink); } html.theme-dark #preloadermrepcrm { background: var(--mrep-canvas); opacity: .82; } /* ============================================================================ 4) SIDEBAR — dark ink-navy in BOTH themes (per user: keep the nav bar colour). The base enterprise-theme rules already render the whole sidebar dark navy unconditionally, so light theme needs NO sidebar overrides — the left nav stays identical in light and dark; only the content + top header switch. The one gap is the logo block `.m-header` (theme.min's navy rule is conditional and enterprise never set its background), so pin it navy for both themes here + keep the logo inverted for the dark surface. ========================================================================== */ html.theme-light .nxl-navigation .m-header, html.theme-light .m-header, html.theme-dark .nxl-navigation .m-header, html.theme-dark .m-header { background: #141B2D !important; border-right-color: #232E47 !important; border-bottom-color: #232E47 !important; } html.theme-light .nxl-navigation .m-header .logo-lg, html.theme-dark .nxl-navigation .m-header .logo-lg { filter: invert(1); } /* ============================================================================ 5) Theme toggle button (top navbar) ========================================================================== */ #btnThemeToggle { cursor: pointer; } #btnThemeToggle i { font-size: 18px; line-height: 1; } html.theme-dark #btnThemeToggle i { color: #F6C544; } /* sun */ html.theme-light #btnThemeToggle i { color: #46546C; } /* moon */