/* ============================================================ AMS Dark Theme Override --ams-* variables for the "dark" colour scheme. Applied when via ThemeService. ============================================================ */ /* Remove the grey bottom border Bootstrap draws under .nav-tabs — applies to both themes. Placed here (loaded last) so it wins over bootstrap.min.css and style.css without !important. */ .nav-tabs { border-bottom: none !important; } /* Dark theme: re-introduce the horizontal line spanning the full tab row */ [data-theme="dark"] { /* Backgrounds — pure grey/black, no blue or purple tints */ --ams-bg-white: #1e1e1e; --ams-bg-surface: #252525; --ams-bg-light: #2c2c2c; --ams-bg-ibox: #353535; /* ibox-content panel background */ /* Text */ --ams-text-muted: #a0a0a0; --ams-text-dark: #cccccc; --ams-text-subdued: #999; /* Borders */ --ams-border-light: #3a3a3a; --ams-border-subtle: #333333; --ams-border-disabled:#4a4a4a; /* Finance rows */ --ams-row-success-bg: #1a3a2a; --ams-row-danger-bg: #3a1a1a; /* Survey section */ --ams-section-bg: #2c2c2c; /* Misc */ --ams-divider-bar: #666666; /* col-left-divider panel separator */ --col-divider-color: #3a3a3a; } /* ============================================================ Dark mode: override Inspinia / Bootstrap hardcoded colors ============================================================ */ /* Page body background and default text */ [data-theme="dark"] body { background-color: #131313; color: #cccccc; } /* Main page-wrapper background */ [data-theme="dark"] #page-wrapper, [data-theme="dark"] .gray-bg, [data-theme="dark"] .bg-muted { background-color: #252525; } /* Client-select screen — standalone full-page layout that bypasses #page-wrapper. The .content div has background-color: #f9f9f9 as an inline style; !important overrides inline styles. Confirmed: .content is only used here. */ [data-theme="dark"] .content { background-color: #1a1a1a !important; } /* ============================================================ Login page (Views/Account/Login.cshtml via _Layout.cshtml) All login styles are inline so !important is required throughout. ============================================================ */ /* Login page theme toggle button — darken the pill slightly in dark mode */ [data-theme="dark"] #loginThemeToggle { border-color: rgba(170, 170, 170, 0.45) !important; background: rgba(40, 40, 40, 0.6) !important; color: #e0e0e0 !important; } [data-theme="dark"] #loginThemeToggle:hover { background: rgba(60, 60, 60, 0.85) !important; } /* Login page background image darkening overlay. The image is applied as an inline background-image on .container-login100. A ::before pseudo-element places a semi-transparent dark layer over the image without affecting the login card sitting above it (z-index). */ [data-theme="dark"] .container-login100 { position: relative !important; } [data-theme="dark"] .container-login100::before { content: ''; position: absolute; inset: 0; backdrop-filter: grayscale(90%) !important ; background: rgba(10, 10, 10, 0.65); z-index: 0; pointer-events: none; } /* Ensure the card stays above the overlay */ [data-theme="dark"] .wrap-login100 { position: relative !important; z-index: 1; } /* Left panel (amsWelcome) — inline background-color: #283340 (bluish), override to dark grey */ [data-theme="dark"] #amsWelcome { background-color: #101010 !important; color: #cccccc !important; } /* Card wrapper — right panel background should be black in dark mode */ [data-theme="dark"] .wrap-login100 { background-color: #000000 !important; } /* Right panel (loginForm) — inline background is set via wrap-login100, but also override the form element directly in case it has its own inline style */ [data-theme="dark"] #loginForm { background-color: #1e1e1e !important; } /* Username / password input fields — dark grey, no blue tint */ [data-theme="dark"] #username, [data-theme="dark"] #password { background: #2e2e2e !important; color: #cccccc !important; border: 1px solid #4a4a4a !important; } [data-theme="dark"] #username::placeholder, [data-theme="dark"] #password::placeholder { color: #6a6a6a !important; } /* Input icon overlays — inline color: #666 */ [data-theme="dark"] #userIcon, [data-theme="dark"] #pwdIcon { color: #888888 !important; } /* "Welcome Back" title */ [data-theme="dark"] .login100-form-title { color: #cccccc !important; } /* "Forgot your password?" link */ [data-theme="dark"] #loginForm a { color: #888888 !important; } /* "Logged in on another tab" and mobile prompt headings — inline color: #000000 */ [data-theme="dark"] #loggedInOnAnotherTab h3, [data-theme="dark"] #loggedInOnAnotherTab h4, [data-theme="dark"] #mobilePrompt h3, [data-theme="dark"] #mobilePrompt h4 { color: #cccccc !important; } /* ibox-footer */ [data-theme="dark"] .ibox-footer { background: #252525 !important; border-top-color: #3a3a3a !important; color: #cccccc; } [data-theme="dark"] .ibox-heading, [data-theme="dark"] .ibox-content.ibox-heading { background-color: #353535 !important; } /* bg-muted — match the body background so widget stat tiles blend with the container */ [data-theme="dark"] .bg-muted { background-color: #292929 !important; } /* White background utility — page heading area; slightly lighter than body to create contrast */ [data-theme="dark"] .white-bg { background-color: #2f2f2f !important; } /* (btn-white overrides are in the dedicated buttons section below) */ /* Form labels — Bootstrap inherits color from parent but component-scoped styles and browser defaults can render as near-black. Force light color globally. */ [data-theme="dark"] label { color: #cccccc !important; } /* Form inputs */ [data-theme="dark"] .form-control { background-color: #212121; border: none !important; color: #cccccc; } [data-theme="dark"] .form-control:focus { background-color: #2c2c2c; border-color: #6a6a6a; color: #e0e0e0; } [data-theme="dark"] .form-control[disabled], [data-theme="dark"] .form-control[readonly] { background-color: #2a2a2a; color: #888; } /* ============================================================ angular2-multiselect-dropdown — matches form-control dark style ============================================================ */ /* Trigger button (the visible "input-like" box) */ [data-theme="dark"] .c-btn { background-color: #2c2c2c !important; border-color: #4a4a4a !important; color: #cccccc !important; } /* Chevron arrow inside the trigger */ [data-theme="dark"] .selected-list .c-angle-down svg, [data-theme="dark"] .selected-list .c-angle-up svg { fill: #888888 !important; } /* Dropdown list panel */ [data-theme="dark"] .list-area { background: #2c2c2c !important; border-color: #4a4a4a !important; box-shadow: 0px 2px 8px rgba(0,0,0,0.6) !important; } /* Arrow above the dropdown */ [data-theme="dark"] .arrow-up, [data-theme="dark"] .arrow-down { border-bottom-color: #2c2c2c !important; } [data-theme="dark"] .arrow-2 { border-bottom-color: #4a4a4a !important; } /* Search / filter row */ [data-theme="dark"] .list-filter { border-bottom-color: #4a4a4a !important; background-color: #252525 !important; } [data-theme="dark"] .list-filter input { background-color: #252525 !important; color: #cccccc !important; } [data-theme="dark"] .list-filter .c-search svg, [data-theme="dark"] .list-filter .c-clear svg { fill: #888888 !important; } /* Select-all row */ [data-theme="dark"] .select-all { border-bottom-color: #4a4a4a !important; background-color: #252525 !important; } /* List item hover */ [data-theme="dark"] .dropdown-list ul li:hover { background: #333333 !important; } /* Checkbox labels inside the dropdown */ [data-theme="dark"] .pure-checkbox input[type="checkbox"] + label, [data-theme="dark"] .single-select-mode .pure-checkbox input[type="checkbox"] + label { color: #cccccc !important; } /* Checkbox border: white outline, no blue fill */ [data-theme="dark"] .pure-checkbox input[type="checkbox"] + label:before, [data-theme="dark"] .single-select-mode .pure-checkbox input[type="checkbox"] + label:before { border-color: #ffffff !important; } /* Checked state: keep white border, fill with a subtle dark accent */ [data-theme="dark"] .pure-checkbox input[type="checkbox"]:checked + label:before, [data-theme="dark"] .single-select-mode .pure-checkbox input[type="checkbox"]:checked + label:before { background: #5a5a5a !important; border-color: #ffffff !important; } /* Selected (checked) rows in the dropdown list */ [data-theme="dark"] .selected-item { background: #333333 !important; } /* Selected item token chips */ [data-theme="dark"] .selected-list .c-list .c-token { background: #404040 !important; } [data-theme="dark"] .selected-list .c-list .c-token .c-label { color: #e0e0e0 !important; } /* Input groups — Bootstrap 3 (.input-group-addon) and Bootstrap 4 (.input-group-prepend / .input-group-append). !important required here because the catalog-edit HTML uses inline background-color: #fff on these elements. */ [data-theme="dark"] .input-group-addon, [data-theme="dark"] .input-group-prepend, [data-theme="dark"] .input-group-append { background-color: #333333 !important; border-color: #4a4a4a !important; color: #b0b0b0 !important; } /* Contract price read-only input (#iPrice) also has an inline background-color: #fff */ [data-theme="dark"] #iPrice { background-color: #252525 !important; color: #b0b0b0 !important; } /* Tables */ /* Bare elements (no Bootstrap .table class) — e.g. layout tables used in .ibox-title scanner bars and ibox-tools rows. Browsers default table cells to white; force transparent so they inherit the parent container's dark background. */ [data-theme="dark"] table:not([class]) tr, [data-theme="dark"] table:not([class]) td, [data-theme="dark"] table:not([class]) th { background-color: transparent; color: #cccccc; } /* Catalog replacements page section header cells use a hardcoded inline background (#dedede). Override with !important so the dark theme background wins over the inline style. */ [data-theme="dark"] .replacements-section-header { background-color: #252525 !important; color: #cccccc !important; } [data-theme="dark"] table.table, [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > tfoot > tr > td { color: #cccccc; border-color: #3a3a3a; } /* .table-bordered cell borders — style.css hardcodes #e7e7e7 which appears white on dark bg */ [data-theme="dark"] .table-bordered, [data-theme="dark"] .table-bordered > thead > tr > th, [data-theme="dark"] .table-bordered > thead > tr > td, [data-theme="dark"] .table-bordered > tbody > tr > td, [data-theme="dark"] .table-bordered > tbody > tr > th, [data-theme="dark"] .table-bordered > tfoot > tr > td, [data-theme="dark"] .table-bordered > tfoot > tr > th { border-color: #3a3a3a !important; } /* thead header cell background — style.css sets #f5f5f6 which looks bright in dark mode */ [data-theme="dark"] .table-bordered > thead > tr > th, [data-theme="dark"] .table-bordered > thead > tr > td { background-color: #252525 !important; } /* .devcss — the delivery scanning row; style.css hardcodes background:#fff and a light border */ [data-theme="dark"] .devcss { background: #1e1e1e !important; border-top-color: #3a3a3a !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #252525; } /* Bootstrap .table-hover rows — override the light-theme highlight (#f5f5f5 / transparent) */ [data-theme="dark"] .table-hover > tbody > tr:hover, [data-theme="dark"] .table-hover > tbody > tr:hover > td, [data-theme="dark"] .table-hover > tbody > tr:hover > th { background-color: #2e2e2e !important; color: #e0e0e0; } /* Bare

row hover — tables without the .table-hover class still benefit from a subtle highlight so any click-target rows are visible in dark mode */ [data-theme="dark"] table:not([class]) > tbody > tr:hover > td, [data-theme="dark"] table:not([class]) > tbody > tr:hover > th { background-color: #2e2e2e; color: #e0e0e0; } [data-theme="dark"] .table > thead > tr > th { background-color: #101010; } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: #252525; border-color: #3a3a3a; } [data-theme="dark"] .dropdown-menu > li > a { color: #cccccc; } [data-theme="dark"] .dropdown-menu > li > a:hover, [data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #333333; color: #e0e0e0; } [data-theme="dark"] .dropdown-menu .divider { background-color: #3a3a3a; } /* Modals */ [data-theme="dark"] .modal-content { background-color: #2a2a2a; color: #cccccc; border-radius: 7px !important; } [data-theme="dark"] .modal-header { border-bottom-color: #3a3a3a; } [data-theme="dark"] .modal-footer { border-top-color: #3a3a3a; } /* Nav active state */ [data-theme="dark"] .nav > li.active { background: #252525; } /* Page headings — slightly lighter than the page body (#1a1a1a) to create contrast */ [data-theme="dark"] .page-heading { color: #cccccc; } /* Breadcrumb has its own white bg in style.css */ [data-theme="dark"] .breadcrumb { background-color: transparent !important; } [data-theme="dark"] .border-bottom { border-bottom-color: transparent !important; } /* Panels / wells */ [data-theme="dark"] .panel { background-color: #1e1e1e; border-color: #3a3a3a; } [data-theme="dark"] .panel-heading { background-color: #252525; border-color: #3a3a3a; color: #cccccc; } [data-theme="dark"] .well { background-color: #252525; border-color: #3a3a3a; } /* Breadcrumbs */ [data-theme="dark"] .breadcrumb { background-color: #252525; color: #cccccc; } /* Popovers & tooltips */ [data-theme="dark"] .popover { background-color: #252525; border-color: #3a3a3a; color: #cccccc; } [data-theme="dark"] .popover-title { background-color: #333333; border-bottom-color: #3a3a3a; } /* Select2 dropdowns */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: #2c2c2c; border-color: #4a4a4a; color: #cccccc; } [data-theme="dark"] .select2-container--default .select2-results__option { background-color: #252525; color: #cccccc; } [data-theme="dark"] .select2-container--default .select2-results__option--highlighted { background-color: #333333; color: #e0e0e0; } [data-theme="dark"] .select2-dropdown { background-color: #252525; border-color: #3a3a3a; } [data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: #2c2c2c; border-color: #4a4a4a; color: #cccccc; } /* Toastr notifications */ [data-theme="dark"] #toast-container > .toast-info { background-color: #2d3a50; } /* hr dividers */ [data-theme="dark"] hr { border-top-color: #3a3a3a; } /* ============================================================ Help tab (floating "HELP" button on page heading) AMS.css: .page-heading-help-tab { background-color: #ececef; border-color: #e7eaec } ============================================================ */ [data-theme="dark"] .page-heading-help-tab { background-color: #252525 !important; border: none !important; top: 53px; } [data-theme="dark"] .page-heading-help-tab a { color: #b0b0b0 !important; } [data-theme="dark"] .page-heading-help-tab:hover { background-color: #2e2e2e !important; } [data-theme="dark"] .settings-full-row { background: none !important; } /* ============================================================ Bootstrap nav-tabs — inactive, active, hover, tab-content ============================================================ */ /* Inactive tab — Bootstrap 3 (li > a) and Bootstrap 4 (a.nav-link). Background and text color are left intentionally unchanged; only border is removed and tabs are shifted 1px down so they visually align with the content area. */ [data-theme="dark"] .nav-tabs > li { margin-bottom: 1px; } [data-theme="dark"] .nav-tabs > li > a, [data-theme="dark"] .nav-tabs .nav-link:not(.active) { background-color: #141414 !important; color: #808080 !important; border: none !important; position: relative; top: 1px; } /* Inactive tab hover/focus */ [data-theme="dark"] .nav-tabs > li > a:hover, [data-theme="dark"] .nav-tabs > li > a:focus, [data-theme="dark"] .nav-tabs .nav-link:not(.active):hover, [data-theme="dark"] .nav-tabs .nav-link:not(.active):focus { background-color: #2e2e2e !important; color: #cccccc !important; border: none !important; } /* Active tab — #141414 background blends toward the page chrome; no border so it flows cleanly into the tab-content panel below it. Targets both Bootstrap 3 (li.active > a) and Bootstrap 4 (a.nav-link.active) patterns. */ [data-theme="dark"] .nav-tabs > li.active > a, [data-theme="dark"] .nav-tabs > li.active > a:hover, [data-theme="dark"] .nav-tabs > li.active > a:focus, [data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .nav-tabs .nav-link.active:hover, [data-theme="dark"] .nav-tabs .nav-link.active:focus, [data-theme="dark"] .tabs-container .nav-tabs > li.active > a, [data-theme="dark"] .tabs-container .nav-tabs > li.active > a:hover, [data-theme="dark"] .tabs-container .nav-tabs > li.active > a:focus, [data-theme="dark"] .tabs-container .nav-tabs .nav-link.active, [data-theme="dark"] .tabs-container .nav-tabs .nav-link.active:hover, [data-theme="dark"] .tabs-container .nav-tabs .nav-link.active:focus { background-color: #353535 !important; color: #e8e8f0 !important; border: none !important; position: relative; top: 1px; } /* Tab bar bottom border */ [data-theme="dark"] .nav-tabs, [data-theme="dark"] .tabs-container .nav-tabs { border-bottom-color: #3a3a3a !important; } /* Generic tab-content outside a tabs-container */ [data-theme="dark"] .tab-content { background-color: #1e1e1e !important; border-color: #3a3a3a !important; color: #cccccc !important; border-top-left-radius: 0 !important; } /* Tab content pane inside a tabs-container — matches the active tab background (#353535) so the content area merges seamlessly with the selected tab, same as the light-theme white-on-white Inspinia effect. Upper-left radius is 0 so the leftmost tab sits flush. */ [data-theme="dark"] .tabs-container .tab-content { background-color: #353535 !important; border-color: #3a3a3a !important; color: #cccccc !important; border-top-left-radius: 0 !important; } /* ============================================================ Left navigation sidebar ============================================================ */ /* Sidebar background — must override Bootstrap's .navbar-default: #f8f8f8 AND Inspinia's transparent override. Use !important on the nav + its contents. */ [data-theme="dark"] .navbar-static-side, [data-theme="dark"] nav.navbar-static-side, [data-theme="dark"] nav.navbar-default.navbar-static-side { background: #1a1a1a !important; } [data-theme="dark"] .navbar-static-side .sidebar-collapse, [data-theme="dark"] .navbar-static-side #side-menu, [data-theme="dark"] .navbar-static-side .nav.metismenu { background: #1a1a1a !important; } /* Sidebar list items — default transparent, but need explicit dark bg */ [data-theme="dark"] .navbar-static-side .nav > li { background: #1a1a1a !important; } /* AMS.css has `.mini-navbar .nav .nav-second-level { background-color: #e1e1e7 !important }` — override it for dark mode */ [data-theme="dark"] .mini-navbar .nav .nav-second-level, [data-theme="dark"] .navbar-static-side .nav-second-level { background-color: #1a1a1a !important; } /* Nav link text — Inspinia sets color: #293846 (very dark) */ [data-theme="dark"] .nav > li > a { color: #b0b0b0; } [data-theme="dark"] .nav > li > a i { color: #b9b9b9; } [data-theme="dark"] .nav > li.active > a { color: #ec5767; } /* Hover state */ [data-theme="dark"] .navbar-default .nav > li > a:hover, [data-theme="dark"] .navbar-default .nav > li > a:focus { background-color: #252525; color: #e0e0e0; } /* Remove the browser default focus outline on sidebar nav links — it renders as a white ring in dark mode after clicking a menu item. Keyboard users still get the hover background-color change as a visual indicator. */ [data-theme="dark"] .navbar-static-side .nav > li > a:focus, [data-theme="dark"] .navbar-static-side .nav > li > a:focus-visible { outline: none !important; box-shadow: none !important; } /* Active/selected item highlight */ [data-theme="dark"] .nav > li.active { background: #131313 !important; border-left-color: #ee5253; } /* Nav section labels */ [data-theme="dark"] .nav-label, [data-theme="dark"] .nav-second-level li a { color: #808080; } [data-theme="dark"] .nav-second-level li.active a { color: #fff; } /* Nav header (logo area at top of sidebar) — Inspinia hardcodes #293846 (teal) with !important. Override to a neutral dark grey to match the all-grey/black dark theme. Also covers the client-select page (#side-menu) which lacks .navbar-static-side. style.css has border-bottom: solid 1px #405366 !important — hide it since the color change to #2a2a2a below already provides visual separation. */ [data-theme="dark"] .navbar-static-side .nav > li.nav-header, [data-theme="dark"] .nav > li.nav-header { background-color: #000000 !important; border-bottom-color: transparent !important; } [data-theme="dark"] .profile-element a span.text-muted { color: #808080 !important; } /* Sidebar scrollbar track */ [data-theme="dark"] .slimScrollBar { background: #4a4a4a !important; } /* ============================================================ Top navbar bar — override Inspinia's teal #293846 with neutral dark grey. Bootstrap gives .navbar-static-top a 1px bottom border via .navbar-default { border-color: #e7e7e7 } — hide it in dark mode. ============================================================ */ [data-theme="dark"] .navbar-static-top { /* style.css sets background: #293846 (teal/blue-green) — override to neutral dark grey */ background: #000000 !important; border-bottom-color: transparent !important; } /* ============================================================ Easy pie chart / donut chart widget bg ============================================================ */ /* The white card is `.pie-chart` in easypiechart.css (component-scoped, background: #fcfcfc). !important beats ViewEncapsulation attribute selectors. */ [data-theme="dark"] .pie-chart { background: transparent !important; color: #cccccc !important; border-color: #3a3a3a !important; } [data-theme="dark"] .pie-chart .name { color: #cccccc !important; } /* Canvas itself should be transparent (easypiechart draws on it directly) */ [data-theme="dark"] .easypiechart canvas, [data-theme="dark"] .pie-chart canvas { background: transparent !important; } /* Facility health score card and similar dashboard widgets. Transparent background lets the chart/card inherit the parent container colour, so the chart area blends with the surrounding page section (e.g. white-bg header). */ /* Procedures chart on the client dashboard matches the parent container (#2f2f2f). Higher specificity than the generic .ibox-content rule below overrides it. */ [data-theme="dark"] [tourAnchor="ams-procedure-chart"] .ibox-content { background-color: #2f2f2f !important; } [data-theme="dark"] .ibox-content, [data-theme="dark"] .ibox-title { background-color: #353535 !important; border-radius: 15px; border:none !important; color: #cccccc !important; } [data-theme="dark"] .dashboard-widget { background: #1a1a1a !important; border-radius: 15px; } /* Ensure the .ibox wrapper itself doesn't inherit any light background or border from Bootstrap / Inspinia — keeps card outlines consistently dark. */ [data-theme="dark"] .ibox { background-color: #353535; border-color: #3a3a3a; border-radius: 10px; } /* Payment option iboxes in group settings — lighter background and a visible border so they stand out against the #252525 page background. */ [data-theme="dark"] .group-payment-option, [data-theme="dark"] .group-payment-option .ibox-title, [data-theme="dark"] .group-payment-option .ibox-content { background-color: #424242 !important; } [data-theme="dark"] .group-payment-option { border: none !important; border-radius: 10px; } /* Light mode omits the .ibox-title bottom border (border-style: solid solid none) because the white background provides visual separation. In dark mode with transparent backgrounds there is no visual edge at the bottom — restore it. */ [data-theme="dark"] .ibox-title { border:none !important; } /* Prevent a doubled border where .ibox-content or a second .ibox-title immediately follows .ibox-title — the bottom border of the first serves as the divider. */ [data-theme="dark"] .ibox-title + .ibox-content, [data-theme="dark"] .ibox-title + .ibox-title { border-top: none !important; } /* Create divider when ibox-title is stacked. */ [data-theme="dark"] .ibox-title + .ibox-title { border-bottom: 2px solid #252525 !important; border-radius: 0px !important; } /* Restore the top border for section separators (e.g. Resources Used on procedure detail) even when they directly follow another .ibox-title (e.g. when inventory is collapsed). */ [data-theme="dark"] .ibox-title + .ibox-title.ibox-title-section-separator { border-top: 1px solid #3a3a3a !important; } /* ============================================================ Outlook-style list — selected/active item ============================================================ */ /* style.css has `.elements-list .list-group-item.active { background-color: #fce8ea }` (light pink). Override to a dark highlight matching the theme. */ [data-theme="dark"] .elements-list .list-group-item.active, [data-theme="dark"] .elements-list .list-group-item.active:hover { background-color: #131313 !important; color: #d0d0d0 !important; border-color: #131313 !important; } [data-theme="dark"] .elements-list .list-group-item:hover { background-color: #2e2e2e !important; color: #d0d0d0 !important; } /* Base item bg is one step above the sidebar (#1a1a1a) so the list visually separates from the nav */ [data-theme="dark"] .elements-list .list-group-item { background-color: #1e1e1e !important; border-color: #131313 !important; color: #b0b0b0 !important; } /* CDK virtual scroll viewport background — matches the list item bg so the empty space below the last item doesn't show as light/white */ [data-theme="dark"] cdk-virtual-scroll-viewport { background-color: #1e1e1e !important; } /* .outlook-items container background — shown while the list is loading */ [data-theme="dark"] .outlook-items { background-color: #252525 !important; top: 177px !important; } /* ============================================================ Outlook-style filter bar background ============================================================ */ /* btn-grey (AMS.css has background-color: #eee) — make it match btn-white in dark mode. Use both background shorthand and background-color to beat any Bootstrap shorthand override. */ [data-theme="dark"] .btn-grey, [data-theme="dark"] .btn.btn-grey, [data-theme="dark"] a.btn-grey, [data-theme="dark"] #gotoReportDetail { background: #2c2c2c !important; background-color: #2c2c2c !important; color: #cccccc !important; border-color: #4a4a4a !important; } [data-theme="dark"] .btn-grey:hover, [data-theme="dark"] .btn-grey:focus, [data-theme="dark"] .btn-grey:active { background: #333333 !important; background-color: #333333 !important; color: #e0e0e0 !important; } [data-theme="dark"] .btn-white, [data-theme="dark"] .btn.btn-white { background: #1a1a1a !important; border: none !important; color: #cccccc !important; } [data-theme="dark"] .btn-white:hover, [data-theme="dark"] .btn-white:focus, [data-theme="dark"] .btn-white:active, [data-theme="dark"] .btn.btn-white:hover, [data-theme="dark"] .btn.btn-white:focus, [data-theme="dark"] .btn.btn-white:active { background: #2d2c2c !important; border-color: #5a5a5a !important; color: #e0e0e0 !important; } /* Active / selected state for btn-white toggle buttons. Used across the app in btn-groups: daysback selector, payment type, tax update mode, facility admin picker, resource type tabs, etc. Without this, active buttons are visually identical to unselected ones in dark mode. */ [data-theme="dark"] .btn-white.active, [data-theme="dark"] .btn.btn-white.active, [data-theme="dark"] .btn-white.active:focus, [data-theme="dark"] .btn-white.active:hover, [data-theme="dark"] .btn.btn-white.active:focus, [data-theme="dark"] .btn.btn-white.active:hover { background: #454545 !important; border-color: #707070 !important; color: #ffffff !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4) !important; } /* btn-default — used by .btn-group toggle buttons (e.g. pages/all view switcher) */ [data-theme="dark"] .btn-default, [data-theme="dark"] .btn.btn-default { background-color: #2c2c2c !important; border: none !important; color: #cccccc !important; } [data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-default:focus { background-color: #333333 !important; border: none !important; color: #e0e0e0 !important; } /* Active / selected state for btn-default toggle buttons */ [data-theme="dark"] .btn-default.active, [data-theme="dark"] .btn.btn-default.active, [data-theme="dark"] .btn-default.active:focus, [data-theme="dark"] .btn-default.active:hover { background-color: #454545 !important; color: #ffffff !important; } /* Active state for btn-group toggle buttons */ [data-theme="dark"] .btn-group > .btn-default.active, [data-theme="dark"] .btn-group > .btn.btn-default.active { background-color: #4a4a4a !important; color: #ffffff !important; border: none !important; } /* ============================================================ Section spinner (ams-section-spinner) .ss-background / .ss-background-large use rgba(255,255,255,0.8) in component-scoped styles. !important overrides the encapsulated specificity. This also fixes the donut chart showing white while loading — the spinner overlay sits on top of .pie-chart and its white bg shows through. ============================================================ */ [data-theme="dark"] .ss-background, [data-theme="dark"] .ss-background-large { /* Pure grey overlay � no blue tint */ background-color: rgba(26, 26, 26, 0.85) !important; } /* Spinner wave bars — keep the existing red brand colour (#ee5253) */ [data-theme="dark"] .sk-spinner-wave div { background-color: #ee5253 !important; } /* ============================================================ ams-checkbox — override hardcoded white background on the icon The icon has style="background-color: #fff" to fill the checkbox interior; in dark mode, use the dark page background. ============================================================ */ [data-theme="dark"] ams-checkbox i.fal { background-color: #1a1a1a !important; } /* ============================================================ Additional Bootstrap overrides ============================================================ */ /* Badge/label backgrounds stay readable — ensure white text on dark background */ [data-theme="dark"] .label-default { background-color: #4a4a4a; color: #ffffff !important; } /* List groups */ [data-theme="dark"] .list-group-item { background-color: #1e1e1e; border-color: #3a3a3a; color: #cccccc; } [data-theme="dark"] .list-group-item:hover, [data-theme="dark"] .list-group-item:focus { background-color: #2e2e2e; } /* Pagination — Bootstrap 3 selectors */ [data-theme="dark"] .pagination > li > a, [data-theme="dark"] .pagination > li > span { background-color: #252525; border: none !important; color: #b0b0b0; } [data-theme="dark"] .pagination > .active > a, [data-theme="dark"] .pagination > .active > span { background-color: #5a5a5a; border: none !important; color: #fff; } /* Pagination — Bootstrap 4 selectors (page-item / page-link). !important is required here because Angular's View Encapsulation injects component styles after global CSS, which would otherwise win at equal specificity. */ [data-theme="dark"] .pagination .page-item .page-link { background-color: #252525 !important; border: none !important; color: #b0b0b0 !important; } [data-theme="dark"] .pagination .page-item.active .page-link { background-color: #5a5a5a !important; border-color: #707070 !important; color: #fff !important; } [data-theme="dark"] .v_content_class, .v_button { background-color: #555555 !important; } [data-theme="dark"] .ams-footer { background-color: #000000 !important; color: #444; border-top: none; } [data-theme="dark"] .btn-warning { background-color: #ec5767 !important; color: #444; border: none; } /* ============================================================ Expiration report — expanded sub-table The inner

and its price

both carry inline style="background-color:#f9f9f9". !important is required to override inline styles. Using tr.bg-surface as the scope so only these nested tables are affected. ============================================================ */ [data-theme="dark"] tr.bg-surface table { background-color: #1e1e1e !important; } [data-theme="dark"] tr.bg-surface td { background-color: transparent !important; color: #cccccc; } [data-theme="dark"] tr.bg-surface th { color: #8080a0; border-bottom-color: #3a3a3a; } /* ============================================================ Expired / error row highlight (.input-error) Light mode uses a pale pink (#fce8ea) which is illegible on dark backgrounds. In dark mode we use a muted deep red so the row is clearly flagged without washing out the text. !important is required because AMS.css already uses !important. ============================================================ */ [data-theme="dark"] .input-error, [data-theme="dark"] .input-error:focus { background-color: #3d1a1e !important; border-color: #7a3040 !important; } /* ============================================================ SweetAlert2 v6 — Dark theme overrides SweetAlert2 appends .swal2-modal to , which is inside , so these selectors apply correctly. !important is required on button colours because sweetalert2.css already uses !important on .swal2-confirm and .swal2-cancel. ============================================================ */ /* Modal backdrop overlay — slightly darker in dark mode */ [data-theme="dark"] .swal2-container.swal2-shown { background-color: rgba(0, 0, 0, 0.65); } /* Popup box. SweetAlert2 v6 sets background as an inline style via JS defaults, so !important is required to override it. */ [data-theme="dark"] .swal2-modal { background: #252525 !important; color: #cccccc; } /* Success icon fix — this build of SweetAlert2 uses ::before, ::after (white half-circle masks that rotate during animation), and an inner .fix element (a white diagonal rectangle) to shape the ring. All must match the modal background, and !important is required to override the hardcoded #fff values. */ [data-theme="dark"] .swal2-modal .swal2-icon.swal2-success::before, [data-theme="dark"] .swal2-modal .swal2-icon.swal2-success::after { background: #252525 !important; } [data-theme="dark"] .swal2-modal .swal2-icon.swal2-success .fix { background-color: #252525 !important; } /* Title text */ [data-theme="dark"] .swal2-modal .swal2-title { color: #e0e0e0; } /* Body / content text */ [data-theme="dark"] .swal2-modal .swal2-content { color: #b0b0b0; } /* Confirm button — primary action, red */ [data-theme="dark"] .swal2-confirm { background-color: #b03030 !important; color: #ffffff !important; border: 1px solid #c94040 !important; } [data-theme="dark"] .swal2-confirm:hover { background-color: #c94040 !important; } /* Cancel / secondary button */ [data-theme="dark"] .swal2-cancel { background-color: #3a3a3a !important; color: #cccccc !important; border: 1px solid #4a4a4a !important; } [data-theme="dark"] .swal2-cancel:hover { background-color: #4a4a4a !important; } /* Close (×) button */ [data-theme="dark"] .swal2-modal .swal2-close { color: #707070; } [data-theme="dark"] .swal2-modal .swal2-close:hover { color: #e06060; } /* Text inputs / textarea / select inside swal2 */ [data-theme="dark"] .swal2-modal .swal2-input, [data-theme="dark"] .swal2-modal .swal2-file, [data-theme="dark"] .swal2-modal .swal2-textarea, [data-theme="dark"] .swal2-modal .swal2-select { background-color: #1e1e1e; color: #cccccc; border-color: #3a3a3a; } [data-theme="dark"] .swal2-modal .swal2-input:focus, [data-theme="dark"] .swal2-modal .swal2-file:focus, [data-theme="dark"] .swal2-modal .swal2-textarea:focus, [data-theme="dark"] .swal2-modal .swal2-select:focus { border-color: #5a5a5a; box-shadow: 0 0 3px #4a4a4a; } /* Validation error message */ [data-theme="dark"] .swal2-modal .swal2-validationerror { background-color: #3a1a1a; color: #e08080; border-color: #6a3a3a; } [data-theme="dark"] .pagination .page-item.disabled .page-link { background-color: #1e1e1e !important; border: none !important; color: #555555 !important; } /* ProcPro favorites toolbar fade-edge overlay. The gradient fades right into the card background; in dark mode that background is #1a1a1a (transparent ibox-content over page-wrapper). */ [data-theme="dark"] .fade-edge { background: linear-gradient(to right, rgba(26, 26, 26, 0), rgba(26, 26, 26, 1)) !important; } /* Alerts — base border override */ [data-theme="dark"] .alert { border-color: #3a3a3a; } /* alert-info: Bootstrap uses a light-blue wash (#d9edf7 bg, #31708f text). Replace with a dark navy tint that reads clearly on the dark surface. */ [data-theme="dark"] .alert-info { background-color: #000000 !important; color: #8ab4d4 !important; border: none !important; } /* alert-success: Bootstrap uses a light-green wash. Replace with a dark green tint. */ [data-theme="dark"] .alert-success { background-color: #192a1e !important; color: #7ab98a !important; border-color: #2a5a3a !important; } /* alert-warning: Bootstrap uses a light-yellow wash. Replace with a dark amber tint. */ [data-theme="dark"] .alert-warning { background-color: #2a2010 !important; color: #c8a055 !important; border-color: #5a4010 !important; } /* alert-danger: Bootstrap uses a light-red wash (#f2dede bg, #a94442 text). Replace with a dark red tint that reads clearly on the dark surface. */ [data-theme="dark"] .alert-danger { background-color: #000000 !important; color: #ec5767 !important; border: none !important; } /* Physician preferences — "Available Inventory/Resources/Bundles" right-hand panels. Each panel has an inline style="border-left: solid 3px #efefef; background-color:#ffffff". The background is removed from the HTML; the border-left colour is overridden here. */ [data-theme="dark"] ams-physician-preferences-edit .col-sm-8, [data-theme="dark"] ams-physician-preferences-edit .col-sm-7 { border-left-color: #3a3a3a !important; } /* Pre / code blocks */ [data-theme="dark"] pre, [data-theme="dark"] code { background-color: #252525; color: #cccccc; border-color: #3a3a3a; } /* ============================================================ Easypiechart / donut chart — .pie-chart has background: #fcfcfc in its component CSS. ViewEncapsulation means we can't override from global CSS without a host selector trick, but since theme-dark.css loads last we can target it directly. ============================================================ */ [data-theme="dark"] .pie-chart { background: transparent !important; color: #cccccc !important; } /* ============================================================ Bootstrap modals ============================================================ */ /* Modal backdrop, container, header, body, footer */ /* ============================================================ ams-autocomplete dropdown list — overrides hard-coded #FFFFFF in component CSS. Applies to the quantity dropdown in Provider Preferences (Resources tab) and anywhere else the autocomplete component is used. ============================================================ */ [data-theme="dark"] .autocomplete-list { background-color: #2c2c2c !important; border-color: #4a4a4a !important; } [data-theme="dark"] .autocomplete-list li { background-color: #2c2c2c !important; color: #cccccc !important; } [data-theme="dark"] .autocomplete-list li:hover { background-color: #3a3a3a !important; } /* ============================================================ bwizard step indicator (Cycle Count, Survey, Sales Campaign) AMS.css hardcodes #fff / #e6e6e6 for the step pills and the arrow-notch pseudo-elements. Override each piece for dark mode. ============================================================ */ /* Container strip behind the pills. */ [data-theme="dark"] .bwizard-steps { background: #1e1e1e !important; } /* Inactive step pill. */ [data-theme="dark"] .bwizard-steps li { background: #2c2c2c !important; color: #cccccc !important; } /* Left notch (cut from the page background colour). */ [data-theme="dark"] .bwizard-steps li:before { border-left-color: #1e1e1e !important; } /* Right arrow (same colour as the pill itself). */ [data-theme="dark"] .bwizard-steps li:after { border-left-color: #2c2c2c !important; } /* Inactive step link text. */ [data-theme="dark"] .bwizard-steps a { color: #a0a0a0 !important; } /* Inactive step number badge. */ [data-theme="dark"] .bwizard-steps li .label-default { background: #4a4a4a !important; } /* Active (current) step — match the light-theme red pill. */ [data-theme="dark"] .bwizard-steps .active { background: #ec4758 !important; color: #fff !important; } [data-theme="dark"] .bwizard-steps .active:after { border-left-color: #ec4758 !important; } [data-theme="dark"] .bwizard-steps .active a { color: #fff !important; } [data-theme="dark"] .bwizard-steps .active span.label { color: #fff !important; } /* Hover on clickable inactive steps. */ [data-theme="dark"] .bwizard-steps.clickable li:hover:not(.active) { background: #3a3a3a !important; } [data-theme="dark"] .bwizard-steps.clickable li:hover:not(.active):after { border-left-color: #3a3a3a !important; } [data-theme="dark"] .bwizard-steps.clickable li:hover:not(.active) a { color: #cccccc !important; } /* ============================================================ Year-end Annual Summary report — dark mode overrides. The report embeds a