/* * Aura Dark Theme * Overrides for jQuery Mobile, Bootstrap 5, Syncfusion, and custom Aura styles * * Usage: Add class "aura-dark" to element to enable dark mode * Example: */ /* ========================================================================== CSS Variables for Dark Theme ========================================================================== */ .aura-dark { --aura-bg-primary: #1a1a2e; --aura-bg-secondary: #16213e; --aura-bg-tertiary: #0f3460; --aura-bg-input: #1e2a4a; --aura-bg-hover: #2a3f5f; --aura-bg-active: #3a5a8a; --aura-bg-header: #0f3460; --aura-bg-panel: #16213e; --aura-bg-popup: #1e2a4a; --aura-bg-card: #1e2a4a; --aura-text-primary: #e8e8e8; --aura-text-secondary: #b0b0b0; --aura-text-muted: #808080; --aura-text-inverse: #1a1a2e; --aura-border-color: #3a4a6b; --aura-border-light: #2a3a5b; --aura-border-focus: #4fc3f7; --aura-link-color: #4fc3f7; --aura-link-hover: #81d4fa; --aura-link-visited: #b39ddb; --aura-accent-primary: #1d9ce5; --aura-accent-success: #4caf50; --aura-accent-warning: #ff9800; --aura-accent-danger: #f44336; --aura-accent-info: #29b6f6; --aura-shadow: rgba(0, 0, 0, 0.4); --aura-overlay: rgba(0, 0, 0, 0.7); } /* ========================================================================== Base HTML Elements ========================================================================== */ .aura-dark, .aura-dark body { background-color: var(--aura-bg-primary) !important; color: var(--aura-text-primary) !important; } .aura-dark a { color: var(--aura-link-color); } .aura-dark a:visited { color: var(--aura-link-visited); } .aura-dark a:hover, .aura-dark a:focus { color: var(--aura-link-hover); } .aura-dark hr { border-color: var(--aura-border-color); } .aura-dark pre, .aura-dark code { background-color: var(--aura-bg-tertiary); color: var(--aura-text-primary); border-color: var(--aura-border-color); } /* ========================================================================== jQuery Mobile Theme Overrides ========================================================================== */ /* Page Theme */ .aura-dark .ui-page-theme-a, .aura-dark .ui-page-theme-a .ui-panel-wrapper { background-color: var(--aura-bg-primary) !important; color: var(--aura-text-primary) !important; } /* Bar (Headers/Footers) */ .aura-dark .ui-bar-a, .aura-dark .ui-page-theme-a .ui-bar-inherit, .aura-dark .ui-bar-a .ui-bar-inherit, .aura-dark .ui-body-a .ui-bar-inherit { background-color: var(--aura-bg-header) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; text-shadow: none !important; } /* Body Content */ .aura-dark .ui-body-a, .aura-dark .ui-page-theme-a .ui-body-inherit, .aura-dark .ui-bar-a .ui-body-inherit, .aura-dark .ui-body-a .ui-body-inherit { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; text-shadow: none !important; } /* Links in jQuery Mobile */ .aura-dark .ui-page-theme-a a, .aura-dark .ui-bar-a a, .aura-dark .ui-body-a a { color: var(--aura-link-color) !important; } .aura-dark .ui-page-theme-a a:hover, .aura-dark .ui-bar-a a:hover, .aura-dark .ui-body-a a:hover { color: var(--aura-link-hover) !important; } /* Buttons */ .aura-dark .ui-btn, .aura-dark .ui-page-theme-a .ui-btn, .aura-dark .ui-bar-a .ui-btn, .aura-dark .ui-body-a .ui-btn { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; text-shadow: none !important; } .aura-dark .ui-btn:hover, .aura-dark .ui-page-theme-a .ui-btn:hover, .aura-dark .ui-bar-a .ui-btn:hover, .aura-dark .ui-body-a .ui-btn:hover { background-color: var(--aura-bg-active) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-btn:active, .aura-dark .ui-btn.ui-btn-active { background-color: var(--aura-accent-primary) !important; color: #fff !important; } /* List Views */ .aura-dark .ui-listview, .aura-dark .ui-listview > li { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .ui-listview > li > a { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-listview > li > a:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .ui-li-divider, .aura-dark [data-role="list-divider"] { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } /* Collapsibles */ .aura-dark .ui-collapsible-heading .ui-btn { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .ui-collapsible-content { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } /* Form Elements */ .aura-dark .ui-input-text, .aura-dark .ui-input-search, .aura-dark textarea.ui-input-text { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-input-text input, .aura-dark .ui-input-search input, .aura-dark textarea { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-select .ui-btn { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-checkbox label, .aura-dark .ui-radio label { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-checkbox-on label, .aura-dark .ui-radio-on label { background-color: var(--aura-accent-primary) !important; color: #fff !important; } /* Flip Switch */ .aura-dark .ui-flipswitch { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .ui-flipswitch-active { background-color: var(--aura-accent-primary) !important; } /* Panels */ .aura-dark .ui-panel { background-color: var(--aura-bg-panel) !important; border-color: var(--aura-border-color) !important; } .aura-dark .ui-panel-inner { background-color: var(--aura-bg-panel) !important; color: var(--aura-text-primary) !important; } /* Popups */ .aura-dark .ui-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .ui-popup-container { background-color: transparent !important; } /* Controlgroup */ .aura-dark .ui-controlgroup-controls { background-color: transparent !important; } /* Icons */ .aura-dark .ui-icon, .aura-dark .ui-btn:after { background-color: var(--aura-text-secondary) !important; } /* ========================================================================== Bootstrap 5 Overrides ========================================================================== */ /* Backgrounds */ .aura-dark .bg-light { background-color: var(--aura-bg-secondary) !important; } .aura-dark .bg-white { background-color: var(--aura-bg-secondary) !important; } .aura-dark .bg-body { background-color: var(--aura-bg-primary) !important; } /* Text */ .aura-dark .text-dark { color: var(--aura-text-primary) !important; } .aura-dark .text-body { color: var(--aura-text-primary) !important; } .aura-dark .text-muted { color: var(--aura-text-muted) !important; } /* Cards */ .aura-dark .card { background-color: var(--aura-bg-card) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .card-header { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .card-footer { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } /* Modals */ .aura-dark .modal-content { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .modal-header { border-color: var(--aura-border-color) !important; background-color: var(--aura-bg-tertiary) !important; } .aura-dark .modal-footer { border-color: var(--aura-border-color) !important; background-color: var(--aura-bg-tertiary) !important; } .aura-dark .modal-backdrop { background-color: #000; } .aura-dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Navbars */ .aura-dark .navbar { background-color: var(--aura-bg-header) !important; border-color: var(--aura-border-color) !important; } .aura-dark .navbar-light .navbar-nav .nav-link { color: var(--aura-text-primary) !important; } .aura-dark .navbar-light .navbar-brand { color: var(--aura-text-primary) !important; } /* Dropdowns */ .aura-dark .dropdown-menu { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .dropdown-item { color: var(--aura-text-primary) !important; } .aura-dark .dropdown-item:hover, .aura-dark .dropdown-item:focus { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } .aura-dark .dropdown-divider { border-color: var(--aura-border-color) !important; } /* Tables */ .aura-dark .table { color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .table > thead { background-color: var(--aura-bg-tertiary) !important; } .aura-dark .table > tbody > tr { background-color: var(--aura-bg-secondary) !important; } .aura-dark .table > tbody > tr:nth-of-type(odd) { background-color: var(--aura-bg-card) !important; } .aura-dark .table-hover > tbody > tr:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .table > :not(:first-child) { border-top-color: var(--aura-border-color) !important; } .aura-dark th, .aura-dark td { border-color: var(--aura-border-color) !important; } /* Forms */ .aura-dark .form-control, .aura-dark .form-select { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .form-control:focus, .aura-dark .form-select:focus { border-color: var(--aura-border-focus) !important; box-shadow: 0 0 0 0.2rem rgba(79, 195, 247, 0.25) !important; } .aura-dark .form-control::placeholder { color: var(--aura-text-muted) !important; } /* Bootstrap's .form-floating relies on the placeholder being transparent so the floating label is the only visible text when the input is empty & unfocused. The dark-mode rule above clobbers that with !important, producing a "double vision" effect where the placeholder and label stack. Restore transparent placeholder inside form-floating containers. */ .aura-dark .form-floating > .form-control::placeholder, .aura-dark .form-floating > .form-control-plaintext::placeholder { color: transparent !important; } .aura-dark .form-control:disabled, .aura-dark .form-control[readonly] { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-muted) !important; } .aura-dark .form-label { color: var(--aura-text-primary) !important; } .aura-dark .form-text { color: var(--aura-text-muted) !important; } .aura-dark .input-group-text { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .form-check-input { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; } .aura-dark .form-check-input:checked { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-accent-primary) !important; } /* Buttons */ .aura-dark .btn-light { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .btn-outline-secondary { border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .btn-outline-secondary:hover { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } .aura-dark .btn-link { color: var(--aura-link-color) !important; } .aura-dark .btn-link:hover { color: var(--aura-link-hover) !important; } /* Warning-themed anchor buttons (e.g. the Allergies "Drug Allergy Info" info-circle) must keep dark text on their amber background in dark mode. The jQuery-Mobile link override (.ui-body-a a) and .btn-link otherwise recolor the icon light blue (#4fc3f7), which is unreadable on amber (#ffc107). Out-specifies those rules; matches the Warning color standard (amber background, black text/icon) and the light-mode rendering. WI 92057. */ .aura-dark a.btn-warning, .aura-dark .ui-page-theme-a a.btn-warning, .aura-dark .ui-bar-a a.btn-warning, .aura-dark .ui-body-a a.btn-warning { color: #212529 !important; } /* Alerts */ .aura-dark .alert { color: var(--aura-text-primary) !important; } .aura-dark .alert-success { background-color: rgba(76, 175, 80, 0.2) !important; border-color: var(--aura-accent-success) !important; color: #81c784 !important; } .aura-dark .alert-success .btn-link { color: #a5d6a7 !important; } .aura-dark .alert-success .btn-link:hover { color: #c8e6c9 !important; } .aura-dark .alert-info { background-color: rgba(41, 182, 246, 0.2) !important; border-color: var(--aura-accent-info) !important; color: #4fc3f7 !important; } .aura-dark .alert-warning { background-color: rgba(255, 152, 0, 0.2) !important; border-color: var(--aura-accent-warning) !important; color: #ffb74d !important; } .aura-dark .alert-danger { background-color: rgba(244, 67, 54, 0.2) !important; border-color: var(--aura-accent-danger) !important; color: #e57373 !important; } .aura-dark .alert-primary { background-color: rgba(29, 156, 229, 0.2) !important; border-color: var(--aura-accent-primary) !important; color: #4fc3f7 !important; } .aura-dark .alert-secondary { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-secondary) !important; } .aura-dark .alert-light { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .alert-dark { background-color: var(--aura-bg-primary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } /* Breadcrumbs */ .aura-dark .breadcrumb { background-color: var(--aura-bg-tertiary) !important; } .aura-dark .breadcrumb-item + .breadcrumb-item::before { color: var(--aura-text-muted) !important; } .aura-dark .breadcrumb-item.active { color: var(--aura-text-muted) !important; } /* Pagination */ .aura-dark .page-link { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-link-color) !important; } .aura-dark .page-link:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .page-item.active .page-link { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-accent-primary) !important; } .aura-dark .page-item.disabled .page-link { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-muted) !important; } /* Alerts */ .aura-dark .alert { border-color: var(--aura-border-color) !important; } /* List Groups */ .aura-dark .list-group-item { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .list-group-item:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .list-group-item.active { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-accent-primary) !important; } /* Accordions */ .aura-dark .accordion-item { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .accordion-button { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; } .aura-dark .accordion-button:not(.collapsed) { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } .aura-dark .accordion-body { background-color: var(--aura-bg-secondary) !important; } /* Toasts */ .aura-dark .toast { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .toast-header { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } /* Tooltips */ .aura-dark .tooltip-inner { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; } /* Popovers */ .aura-dark .popover { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .popover-header { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .popover-body { color: var(--aura-text-primary) !important; } /* ========================================================================== Syncfusion EJ1 & EJ2 Overrides ========================================================================== */ /* Grid */ .aura-dark .e-grid, .aura-dark .e-grid .e-gridheader, .aura-dark .e-grid .e-gridcontent { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-grid .e-headercell, .aura-dark .e-grid .e-headercelldiv { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-grid .e-rowcell { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-grid .e-row:hover .e-rowcell, .aura-dark .e-grid .e-altrow:hover .e-rowcell { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-grid .e-altrow .e-rowcell { background-color: var(--aura-bg-card) !important; } .aura-dark .e-grid .e-row.e-hover .e-rowcell, .aura-dark .e-grid td.e-active { background-color: var(--aura-bg-active) !important; color: #fff !important; } .aura-dark .e-grid .e-pager { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-grid .e-pagercontainer { background-color: transparent !important; } .aura-dark .e-grid .e-numericitem, .aura-dark .e-grid .e-spacing { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-grid .e-numericitem:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-grid .e-currentitem { background-color: var(--aura-accent-primary) !important; color: #fff !important; } .aura-dark .e-grid .e-toolbar { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-grid .e-filterbar .e-rowcell { background-color: var(--aura-bg-tertiary) !important; } /* Dialog */ .aura-dark .e-dialog, .aura-dark .e-dlg-container { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-dlg-header-content { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-dlg-header { color: var(--aura-text-primary) !important; } .aura-dark .e-dlg-content { background-color: var(--aura-bg-popup) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-footer-content { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } /* Date/Time Pickers */ .aura-dark .e-datepicker, .aura-dark .e-datetimepicker, .aura-dark .e-timepicker { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-datepicker .e-input, .aura-dark .e-datetimepicker .e-input, .aura-dark .e-timepicker .e-input { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-calendar, .aura-dark .e-calendar .e-content { background-color: var(--aura-bg-popup) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-calendar .e-header { background-color: var(--aura-bg-tertiary) !important; } .aura-dark .e-calendar .e-header .e-title, .aura-dark .e-calendar .e-header .e-icon-container .e-icons { color: var(--aura-text-primary) !important; } .aura-dark .e-calendar th { color: var(--aura-text-secondary) !important; } .aura-dark .e-calendar span.e-day { color: var(--aura-text-primary) !important; } .aura-dark .e-calendar td.e-other-month span.e-day { color: var(--aura-text-muted) !important; } .aura-dark .e-calendar td.e-cell:hover span.e-day { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-calendar td.e-selected span.e-day { background-color: var(--aura-accent-primary) !important; color: #fff !important; } /* Syncfusion DatePicker EJ1 Popup (older version) */ .aura-dark .e-datepicker.e-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-datepicker.e-popup .e-header { background-color: var(--aura-bg-header) !important; border-bottom-color: var(--aura-border-color) !important; } .aura-dark .e-datepicker.e-popup .e-header .e-text, .aura-dark .e-datepicker.e-popup .e-header .e-datepicker-headertext { color: var(--aura-text-primary) !important; } .aura-dark .e-datepicker.e-popup .e-header .e-prev .e-icon, .aura-dark .e-datepicker.e-popup .e-header .e-next .e-icon, .aura-dark .e-datepicker.e-popup .e-header .e-arrow-sans-left, .aura-dark .e-datepicker.e-popup .e-header .e-arrow-sans-right { color: var(--aura-text-primary) !important; } .aura-dark .e-datepicker.e-popup .e-header .e-prev:hover, .aura-dark .e-datepicker.e-popup .e-header .e-next:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-datepicker.e-popup table { background-color: var(--aura-bg-popup) !important; } .aura-dark .e-datepicker.e-popup .e-week-header th { color: var(--aura-text-secondary) !important; background-color: var(--aura-bg-popup) !important; } .aura-dark .e-datepicker.e-popup td { color: var(--aura-text-primary) !important; background-color: var(--aura-bg-popup) !important; } .aura-dark .e-datepicker.e-popup td.current-month, .aura-dark .e-datepicker.e-popup td.e-state-default { color: var(--aura-text-primary) !important; } .aura-dark .e-datepicker.e-popup td.other-month { color: var(--aura-text-muted) !important; } .aura-dark .e-datepicker.e-popup td.today { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-link-color) !important; font-weight: bold; } .aura-dark .e-datepicker.e-popup td.e-active, .aura-dark .e-datepicker.e-popup td.e-state-active { background-color: var(--aura-accent-primary) !important; color: #fff !important; } .aura-dark .e-datepicker.e-popup td:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-datepicker.e-popup .e-footer { background-color: var(--aura-bg-header) !important; border-top-color: var(--aura-border-color) !important; } .aura-dark .e-datepicker.e-popup .e-footer .e-footer-text { color: var(--aura-link-color) !important; } .aura-dark .e-datepicker.e-popup .e-footer:hover { background-color: var(--aura-bg-hover) !important; } /* EJ1 DatePicker Year/Month picker views */ .aura-dark .e-datepicker.e-popup .e-datepicker-years td, .aura-dark .e-datepicker.e-popup .e-datepicker-months td, .aura-dark .e-datepicker.e-popup .e-datepicker-allyears td { color: var(--aura-text-primary) !important; background-color: var(--aura-bg-popup) !important; } .aura-dark .e-datepicker.e-popup .e-datepicker-years td:hover, .aura-dark .e-datepicker.e-popup .e-datepicker-months td:hover, .aura-dark .e-datepicker.e-popup .e-datepicker-allyears td:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-datepicker.e-popup td.e-hidedate { color: var(--aura-text-muted) !important; } /* DropDown */ .aura-dark .e-dropdownbase, .aura-dark .e-ddl { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-dropdownbase .e-input, .aura-dark .e-ddl .e-input { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-popup.e-ddl, .aura-dark .e-dropdownbase .e-list-parent { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-dropdownbase .e-list-item { background-color: var(--aura-bg-popup) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-dropdownbase .e-list-item:hover, .aura-dark .e-dropdownbase .e-list-item.e-hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-dropdownbase .e-list-item.e-active { background-color: var(--aura-accent-primary) !important; color: #fff !important; } /* TextBox */ .aura-dark .e-textbox, .aura-dark .e-input-group, .aura-dark .e-input-group .e-input { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-input-group:not(.e-disabled):not(.e-float-icon-left)::before, .aura-dark .e-input-group:not(.e-disabled):not(.e-float-icon-left)::after { background-color: var(--aura-accent-primary) !important; } /* Buttons */ .aura-dark .e-btn { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-btn:hover { background-color: var(--aura-bg-active) !important; } .aura-dark .e-btn.e-primary { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-accent-primary) !important; color: #fff !important; } /* Tabs */ .aura-dark .e-tab { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-tab .e-tab-header { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-tab .e-tab-header .e-toolbar-item .e-tab-text { color: var(--aura-text-primary) !important; } .aura-dark .e-tab .e-tab-header .e-toolbar-item.e-active { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-tab .e-content { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; } /* Tooltip */ .aura-dark .e-tooltip-wrap { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } /* Splitter */ .aura-dark .e-splitter { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-splitter .e-pane { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-splitter .e-split-bar { background-color: var(--aura-bg-tertiary) !important; } /* RTE - Rich Text Editor */ .aura-dark .e-richtexteditor { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-richtexteditor .e-rte-content { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-toolbar { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } /* Scheduler */ .aura-dark .e-schedule { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-schedule-toolbar, .aura-dark .e-schedule .e-schedule-toolbar-container, .aura-dark .e-schedule-toolbar-container, .aura-dark .e-schedule-toolbar { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-toolbar, .aura-dark .e-schedule-toolbar.e-toolbar, .aura-dark .e-schedule .e-toolbar-items, .aura-dark .e-schedule-toolbar .e-toolbar-items { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule-toolbar .e-toolbar-left, .aura-dark .e-schedule-toolbar .e-toolbar-right, .aura-dark .e-schedule-toolbar .e-toolbar-center, .aura-dark .e-schedule .e-toolbar .e-toolbar-left, .aura-dark .e-schedule .e-toolbar .e-toolbar-right, .aura-dark .e-schedule .e-toolbar .e-toolbar-center { background-color: var(--aura-bg-tertiary) !important; } .aura-dark .e-schedule .e-toolbar .e-tbar-btn, .aura-dark .e-schedule .e-toolbar .e-btn, .aura-dark .e-schedule-toolbar .e-tbar-btn, .aura-dark .e-schedule-toolbar .e-btn { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-toolbar .e-tbar-btn:hover, .aura-dark .e-schedule .e-toolbar .e-btn:hover, .aura-dark .e-schedule-toolbar .e-tbar-btn:hover, .aura-dark .e-schedule-toolbar .e-btn:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-schedule .e-toolbar .e-tbar-btn .e-icons, .aura-dark .e-schedule .e-toolbar .e-btn-icon, .aura-dark .e-schedule-toolbar .e-tbar-btn .e-icons, .aura-dark .e-schedule-toolbar .e-btn-icon, .aura-dark .e-schedule-toolbar .e-icon-prev, .aura-dark .e-schedule-toolbar .e-icon-next, .aura-dark .e-schedule-toolbar .e-icon-today, .aura-dark .e-schedule-toolbar .e-icon-day, .aura-dark .e-schedule-toolbar .e-icon-week, .aura-dark .e-schedule-toolbar .e-icon-workweek, .aura-dark .e-schedule-toolbar .e-icon-month, .aura-dark .e-schedule-toolbar .e-icon-agenda, .aura-dark .e-schedule-toolbar .e-icon-down-arrow { color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-toolbar .e-tbar-btn-text, .aura-dark .e-schedule-toolbar .e-tbar-btn-text, .aura-dark .e-schedule-toolbar .e-tbar-btn span, .aura-dark .e-schedule-toolbar .e-btn span { color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-toolbar .e-separator, .aura-dark .e-schedule-toolbar .e-separator { border-color: var(--aura-border-color) !important; } /* Scheduler Date Range & Navigation */ .aura-dark .e-schedule .e-toolbar .e-date-range, .aura-dark .e-schedule-toolbar .e-date-range, .aura-dark .e-schedule-toolbar .e-toolbar-item.e-date-range { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-toolbar .e-date-range .e-tbar-btn-text, .aura-dark .e-schedule-toolbar .e-date-range .e-tbar-btn-text { color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-toolbar .e-date-range:hover, .aura-dark .e-schedule-toolbar .e-date-range:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-schedule .e-toolbar .e-prev, .aura-dark .e-schedule .e-toolbar .e-next, .aura-dark .e-schedule .e-toolbar .e-today, .aura-dark .e-schedule-toolbar .e-prev, .aura-dark .e-schedule-toolbar .e-next, .aura-dark .e-schedule-toolbar .e-today, .aura-dark .e-schedule-toolbar .e-toolbar-item.e-prev, .aura-dark .e-schedule-toolbar .e-toolbar-item.e-next, .aura-dark .e-schedule-toolbar .e-toolbar-item.e-today { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-toolbar .e-prev:hover, .aura-dark .e-schedule .e-toolbar .e-next:hover, .aura-dark .e-schedule .e-toolbar .e-today:hover, .aura-dark .e-schedule-toolbar .e-prev:hover, .aura-dark .e-schedule-toolbar .e-next:hover, .aura-dark .e-schedule-toolbar .e-today:hover { background-color: var(--aura-bg-hover) !important; } /* Scheduler View Buttons */ .aura-dark .e-schedule-toolbar .e-toolbar-item.e-views, .aura-dark .e-schedule-toolbar .e-views { background-color: transparent !important; } .aura-dark .e-schedule-toolbar .e-views .e-tbar-btn, .aura-dark .e-schedule-toolbar .e-views .e-btn { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule-toolbar .e-views.e-active-view .e-tbar-btn, .aura-dark .e-schedule-toolbar .e-active-view .e-tbar-btn { background-color: var(--aura-bg-active) !important; color: var(--aura-text-primary) !important; } /* Scheduler Calendar Popup */ .aura-dark .e-schedule-dialog, .aura-dark .e-schedule .e-header-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar { background-color: var(--aura-bg-popup) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar .e-header { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar .e-header .e-title, .aura-dark .e-schedule .e-header-popup .e-header-calendar .e-header .e-icon-container .e-icons { color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar th { color: var(--aura-text-secondary) !important; background-color: var(--aura-bg-popup) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar td { color: var(--aura-text-primary) !important; background-color: var(--aura-bg-popup) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar td.e-other-month { color: var(--aura-text-muted) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar td:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-schedule .e-header-popup .e-header-calendar td.e-selected { background-color: var(--aura-accent-color) !important; color: #fff !important; } .aura-dark .e-schedule .e-header-cells { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-header-cells.e-current-day { background-color: var(--aura-bg-active) !important; } .aura-dark .e-schedule .e-header-cells .e-header-day, .aura-dark .e-schedule .e-header-cells .e-header-date { color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-date-header-wrap { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-date-header-container { background-color: var(--aura-bg-tertiary) !important; } .aura-dark .e-schedule .e-work-cells { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-work-cells.e-work-hours { background-color: var(--aura-bg-panel) !important; } .aura-dark .e-schedule .e-work-cells.e-alternate-cells { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-schedule .e-work-cells.e-alternate-cells.e-work-hours { background-color: var(--aura-bg-panel) !important; } .aura-dark .e-schedule .e-time-cells-wrap { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-time-slots, .aura-dark .e-schedule .e-time-cells { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-time-slots span { color: var(--aura-text-secondary) !important; } .aura-dark .e-schedule .e-left-indent, .aura-dark .e-schedule .e-left-indent-wrap { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-content-wrap { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-schedule .e-content-table { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-schedule .e-current-time { color: var(--aura-accent-danger) !important; background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-schedule .e-current-timeline { border-color: var(--aura-accent-danger) !important; } .aura-dark .e-schedule .e-all-day-cells { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-all-day-row { background-color: var(--aura-bg-tertiary) !important; } .aura-dark .e-schedule .e-schedule-table { border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-outer-table { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-schedule .e-table-wrap { background-color: var(--aura-bg-secondary) !important; } /* Scheduler Quick Popup */ .aura-dark .e-schedule .e-quick-popup-wrapper { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-more-popup-wrapper { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-more-event-popup { background-color: var(--aura-bg-popup) !important; } .aura-dark .e-schedule .e-more-event-header { background-color: var(--aura-bg-header) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-schedule .e-more-event-date-header .e-header-day, .aura-dark .e-schedule .e-more-event-date-header .e-header-date { color: var(--aura-text-primary) !important; } /* Scheduler Month/Agenda views */ .aura-dark .e-schedule .e-month-view .e-work-cells, .aura-dark .e-schedule .e-agenda-view .e-work-cells { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-schedule .e-agenda-view .e-day-date-header { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; } /* Scheduler Resource header */ .aura-dark .e-schedule .e-resource-cells { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } /* TreeView */ .aura-dark .e-treeview { background-color: var(--aura-bg-secondary) !important; } .aura-dark .e-treeview .e-list-item { color: var(--aura-text-primary) !important; } .aura-dark .e-treeview .e-list-item:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-treeview .e-list-item.e-active { background-color: var(--aura-accent-primary) !important; } /* ========================================================================== Custom Aura/Site.css Overrides ========================================================================== */ /* Fixed Header */ .aura-dark .fixed-top { background-color: var(--aura-bg-header) !important; } /* Login */ .aura-dark .login-div { background-color: var(--aura-bg-card) !important; } /* Search Popup */ .aura-dark #search-patient-popup { background-color: var(--aura-bg-popup) !important; color: var(--aura-text-primary) !important; } .aura-dark .aura-patient-search-content { background-color: var(--aura-bg-popup) !important; } /* Hoverable */ .aura-dark .aura-hoverable:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .aura-hoverable-success:hover { background-color: var(--aura-accent-success) !important; } /* Shadow boxes */ .aura-dark .shadow-around { background-color: var(--aura-bg-card) !important; box-shadow: 0 2.8px 2.2px var(--aura-shadow), 0 6.7px 5.3px var(--aura-shadow), 0 12.5px 10px var(--aura-shadow); } .aura-dark .standOut { box-shadow: 0 2.8px 2.2px var(--aura-shadow), 0 6.7px 5.3px var(--aura-shadow), 0 12.5px 10px var(--aura-shadow); } /* Upload Region */ .aura-dark #upload-region { background-color: var(--aura-bg-card) !important; border-color: var(--aura-border-color) !important; } /* EM Question boxes */ .aura-dark .em-question { background-color: var(--aura-bg-card) !important; box-shadow: 5px 5px 5px var(--aura-shadow); } /* Loading Modal */ .aura-dark .loading-modal { background-color: var(--aura-bg-primary) !important; opacity: 0.8; } /* Calendar */ .aura-dark .calendar { background-color: var(--aura-bg-card) !important; color: var(--aura-text-primary) !important; } .aura-dark .calendar a:link, .aura-dark .calendar a:visited, .aura-dark .calendar a:hover, .aura-dark .calendar a:active { color: var(--aura-text-primary) !important; } /* Counter */ .aura-dark .em-counter { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-border-color) !important; } /* Draggable Menu */ .aura-dark .draggable-menu-items li { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } /* Message bubbles - keep original colors for distinction */ .aura-dark .message-bubble { color: #fff !important; } /* Client name link */ .aura-dark .client-name-link { color: var(--aura-link-color) !important; } /* Panels */ .aura-dark .left-nav { background-color: var(--aura-bg-panel) !important; border-color: var(--aura-border-color) !important; } .aura-dark .middle-panel, .aura-dark .right-panel { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } /* Chat Popup */ .aura-dark .chat-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } /* DataTables */ .aura-dark .dataTables_wrapper { color: var(--aura-text-primary) !important; } .aura-dark table.dataTable { border-color: var(--aura-border-color) !important; } .aura-dark table.dataTable thead th, .aura-dark table.dataTable thead td { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark table.dataTable tbody tr { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; } .aura-dark table.dataTable tbody tr:nth-of-type(odd) { background-color: var(--aura-bg-card) !important; } .aura-dark table.dataTable tbody tr:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark table.dataTable tbody tr.selected { background-color: var(--aura-accent-primary) !important; color: #fff !important; } .aura-dark .dataTables_info, .aura-dark .dataTables_length, .aura-dark .dataTables_filter { color: var(--aura-text-primary) !important; } .aura-dark .dataTables_filter input { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } /* Background colors override */ .aura-dark .background-color-e2 { background-color: var(--aura-bg-card) !important; } /* Banner messages - keep functional colors */ .aura-dark .banner-messages { color: var(--aura-text-primary) !important; } /* Multiselect */ .aura-dark .ui-multiselect.ui-widget.ui-btn.ui-shadow.ui-corner-all { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } /* Multiselect Menu/Popup */ .aura-dark .ui-multiselect-menu { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-header, .aura-dark .ui-multiselect-menu .ui-widget-header { background-color: var(--aura-bg-header) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-filter input { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-filter input::placeholder { color: var(--aura-text-muted) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-all, .aura-dark .ui-multiselect-menu .ui-multiselect-none { color: var(--aura-link-color) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-all:hover, .aura-dark .ui-multiselect-menu .ui-multiselect-none:hover { color: var(--aura-link-hover) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-checkboxes { background-color: var(--aura-bg-popup) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-checkboxes li { background-color: var(--aura-bg-popup) !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-checkboxes label { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-checkboxes label span { color: var(--aura-text-primary) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-checkboxes label.ui-state-hover, .aura-dark .ui-multiselect-menu .ui-multiselect-checkboxes label:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .ui-multiselect-menu .ui-multiselect-checkboxes label.ui-state-active { background-color: var(--aura-bg-active) !important; } .aura-dark .ui-multiselect-menu .ui-icon { filter: invert(1) !important; } /* Assessment questions */ .aura-dark .assess-question { background-color: var(--aura-bg-card) !important; } /* Admin buttons */ .aura-dark .admin-item-btn { background-color: var(--aura-bg-card) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } /* Scrollbars for webkit browsers */ .aura-dark ::-webkit-scrollbar { width: 10px; height: 10px; } .aura-dark ::-webkit-scrollbar-track { background: var(--aura-bg-tertiary); } .aura-dark ::-webkit-scrollbar-thumb { background: var(--aura-bg-active); border-radius: 5px; } .aura-dark ::-webkit-scrollbar-thumb:hover { background: var(--aura-accent-primary); } /* Selection highlight */ .aura-dark ::selection { background-color: var(--aura-accent-primary); color: #fff; } .aura-dark ::-moz-selection { background-color: var(--aura-accent-primary); color: #fff; } /* ========================================================================== Modern Chat UI - Slack/Teams Inspired ========================================================================== */ /* Chat Container */ .aura-dark .chat-win-msg-cnt { background: linear-gradient(180deg, var(--aura-bg-primary) 0%, var(--aura-bg-secondary) 100%) !important; padding: 16px; scroll-behavior: smooth; } /* Chat Header */ .aura-dark .chat-cat-dd-title { background: var(--aura-bg-header) !important; border-bottom: 1px solid var(--aura-border-color) !important; padding: 12px 16px !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--aura-text-primary) !important; display: flex !important; align-items: center !important; gap: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .aura-dark .chat-cat-dd-title .badge { background: var(--aura-accent-danger) !important; font-size: 0.75rem; padding: 4px 8px; border-radius: 12px; font-weight: 600; min-width: 22px; text-align: center; } .aura-dark #btn_AM_close { background: transparent !important; border: none !important; color: var(--aura-text-secondary) !important; font-size: 1.25rem !important; padding: 4px 8px !important; border-radius: 4px !important; transition: all 0.2s ease !important; } .aura-dark #btn_AM_close:hover { background: var(--aura-accent-danger) !important; color: #fff !important; } /* Message Bubbles - Modern Style */ .aura-dark .talk-bubble { position: relative; max-width: 75%; margin: 4px 8px !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; clear: both; } .aura-dark .talk-bubble.round { border-radius: 0 !important; } /* Sender Messages (Current User) - Right aligned, blue accent */ .aura-dark .chat-sender { float: right !important; text-align: right; background: transparent !important; } .aura-dark .chat-sender .message-container { background: linear-gradient(135deg, #1d9ce5 0%, #0078d4 100%) !important; color: #fff !important; border-radius: 18px 18px 4px 18px !important; padding: 10px 16px !important; display: inline-block; text-align: left; max-width: 100%; word-wrap: break-word; box-shadow: 0 2px 8px rgba(29, 156, 229, 0.3); font-size: 0.9375rem; line-height: 1.5; } .aura-dark .chat-sender .message-container p { margin: 0; color: #fff !important; } /* Receiver Messages (Others) - Left aligned, dark background */ .aura-dark .chat-receiver { float: left !important; text-align: left; background: transparent !important; } .aura-dark .chat-receiver .message-container { background: var(--aura-bg-card) !important; color: var(--aura-text-primary) !important; border-radius: 18px 18px 18px 4px !important; padding: 10px 16px !important; display: inline-block; text-align: left; max-width: 100%; word-wrap: break-word; border: 1px solid var(--aura-border-light); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-size: 0.9375rem; line-height: 1.5; } .aura-dark .chat-receiver .message-container p { margin: 0; color: var(--aura-text-primary) !important; } /* Sender Name */ .aura-dark .chat-rec-name { display: block; font-weight: 600 !important; font-size: 0.8125rem !important; color: var(--aura-accent-primary) !important; margin-bottom: 4px; padding-left: 4px; } /* Timestamp */ .aura-dark .chat-rec-date, .aura-dark .chat-sender > span:first-child { display: block; font-size: 0.6875rem !important; color: var(--aura-text-muted) !important; margin-bottom: 6px; padding-left: 4px; font-weight: 400; } .aura-dark .chat-sender > span:first-child { text-align: right; padding-right: 4px; padding-left: 0; } /* Action buttons (Edit/Delete) */ .aura-dark .chat-edit, .aura-dark .chat-delete { opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; padding: 4px 8px !important; border-radius: 4px !important; font-size: 0.875rem !important; margin: 0 2px !important; } .aura-dark .chat-sender:hover .chat-edit, .aura-dark .chat-sender:hover .chat-delete { opacity: 1; } .aura-dark .chat-edit { color: var(--aura-text-secondary) !important; } .aura-dark .chat-edit:hover { color: var(--aura-accent-primary) !important; background: var(--aura-bg-hover) !important; } .aura-dark .chat-delete { color: var(--aura-text-secondary) !important; } .aura-dark .chat-delete:hover { color: var(--aura-accent-danger) !important; background: rgba(244, 67, 54, 0.1) !important; } /* Message Category Badge */ .aura-dark .meca-name.badge { background: linear-gradient(135deg, var(--aura-accent-info) 0%, #0288d1 100%) !important; color: #fff !important; font-size: 0.6875rem !important; font-weight: 500 !important; padding: 3px 10px !important; border-radius: 12px !important; margin: 4px 0 !important; display: inline-block; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* Unread Message Indicator */ .aura-dark .unreadMessage { position: relative; } .aura-dark .unreadMessage::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--aura-accent-primary); border-radius: 50%; box-shadow: 0 0 8px var(--aura-accent-primary); } /* New Message Button */ .aura-dark #btn_new_message_received { position: fixed !important; bottom: 180px !important; left: 50% !important; transform: translateX(-50%) !important; margin: 0 !important; background: var(--aura-accent-primary) !important; border: none !important; border-radius: 20px !important; padding: 8px 20px !important; font-size: 0.8125rem !important; font-weight: 600 !important; box-shadow: 0 4px 16px rgba(29, 156, 229, 0.4) !important; transition: all 0.3s ease !important; z-index: 100; } .aura-dark #btn_new_message_received:hover { transform: translateX(-50%) translateY(-2px) !important; box-shadow: 0 6px 20px rgba(29, 156, 229, 0.5) !important; } /* Message Input Area */ .aura-dark #div_AM_Chat_Window_Rte { background: var(--aura-bg-header) !important; border-top: 1px solid var(--aura-border-color) !important; padding: 12px 16px !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); } /* RTE Styling */ .aura-dark #div_AM_Chat_Window_Rte .e-richtexteditor { background: var(--aura-bg-input) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 12px !important; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .aura-dark #div_AM_Chat_Window_Rte .e-richtexteditor:focus-within { border-color: var(--aura-accent-primary) !important; box-shadow: 0 0 0 3px rgba(29, 156, 229, 0.15) !important; } .aura-dark #div_AM_Chat_Window_Rte .e-rte-content { background: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; min-height: 80px !important; } .aura-dark #div_AM_Chat_Window_Rte .e-toolbar { background: var(--aura-bg-tertiary) !important; border-bottom: 1px solid var(--aura-border-light) !important; border-radius: 12px 12px 0 0 !important; } /* Category Dropdown */ .aura-dark #ddl_mess_category { margin-right: 8px; } .aura-dark #ddl_mess_category button { background: var(--aura-bg-hover) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 8px !important; color: var(--aura-text-primary) !important; font-size: 0.8125rem !important; padding: 6px 12px !important; transition: all 0.2s ease !important; } .aura-dark #ddl_mess_category button:hover { background: var(--aura-bg-active) !important; border-color: var(--aura-accent-primary) !important; } .aura-dark .chat-cat-dd, .aura-dark .chat-cat-dd-down { background: var(--aura-bg-popup) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; padding: 4px 0 !important; min-width: 180px !important; } .aura-dark .chat-cat-dd li, .aura-dark .chat-cat-dd-down li { margin: 0 !important; } .aura-dark .chat-cat-dd-a { padding: 8px 16px !important; color: var(--aura-text-primary) !important; transition: background 0.15s ease !important; border-radius: 0 !important; display: block; } .aura-dark .chat-cat-dd-a:hover { background: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } .aura-dark .chat-cat-dd-a.selected { background: var(--aura-accent-primary) !important; color: #fff !important; } /* Modal Dialogs */ .aura-dark #div_message_deleted_confirmation .modal-content, .aura-dark #div_message_DM_validation_message_errors .modal-content { background: var(--aura-bg-popup) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important; } .aura-dark #div_message_deleted_confirmation .modal-header, .aura-dark #div_message_DM_validation_message_errors .modal-header { background: var(--aura-bg-tertiary) !important; border-bottom: 1px solid var(--aura-border-color) !important; padding: 16px 20px !important; } .aura-dark #div_message_deleted_confirmation .modal-header h3, .aura-dark #div_message_DM_validation_message_errors .modal-header h3 { color: var(--aura-text-primary) !important; font-size: 1.125rem !important; font-weight: 600 !important; } .aura-dark #div_message_deleted_confirmation .modal-body, .aura-dark #div_message_DM_validation_message_errors .modal-body { background: var(--aura-bg-popup) !important; color: var(--aura-text-primary) !important; padding: 24px 20px !important; } .aura-dark #div_message_deleted_confirmation .modal-footer { background: var(--aura-bg-tertiary) !important; border-top: 1px solid var(--aura-border-color) !important; padding: 12px 20px !important; } /* Loading Spinner */ .aura-dark #loader_chat_groups_messages { color: var(--aura-accent-primary) !important; background: transparent !important; padding: 20px !important; } .aura-dark #loader_chat_groups_messages i { color: var(--aura-accent-primary) !important; } /* Message hover effects */ .aura-dark .chat-sender:hover .message-container.sender-message, .aura-dark .chat-receiver:hover .message-container.receiver-message { transform: translateY(-1px); transition: transform 0.2s ease; } /* Typing indicator placeholder (for future use) */ .aura-dark .typing-indicator { display: inline-flex; align-items: center; padding: 8px 16px; background: var(--aura-bg-card); border-radius: 18px; margin: 4px 8px; } .aura-dark .typing-indicator span { width: 8px; height: 8px; background: var(--aura-text-muted); border-radius: 50%; margin: 0 2px; animation: typing 1.4s infinite ease-in-out; } .aura-dark .typing-indicator span:nth-child(1) { animation-delay: 0s; } .aura-dark .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .aura-dark .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Smooth scroll for message container */ .aura-dark .chat-win-msg-cnt { scroll-behavior: smooth; } /* Message grouping - consecutive messages from same sender */ .aura-dark .chat-sender + .chat-sender .message-container.sender-message { border-radius: 18px 4px 4px 18px !important; margin-top: 2px !important; } .aura-dark .chat-receiver + .chat-receiver .message-container.receiver-message { border-radius: 4px 18px 18px 4px !important; margin-top: 2px !important; } /* ========================================================================== ChatMessages Home Page - Full Page Chat (Slack-like) ========================================================================== */ /* Main container */ .aura-dark #div_messages { background: var(--aura-bg-primary) !important; } /* Page header bar */ .aura-dark #div_messages > .row:first-child { background: linear-gradient(135deg, var(--aura-bg-header) 0%, var(--aura-bg-tertiary) 100%) !important; border-bottom: 1px solid var(--aura-border-color) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; padding: 12px 16px !important; margin-bottom: 16px !important; } /* Left sidebar - Group list */ .aura-dark #accordionExample { background: var(--aura-bg-secondary) !important; border-radius: 8px !important; overflow: hidden; border: 1px solid var(--aura-border-color) !important; } .aura-dark #div_messages .accordion-item { background: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; } .aura-dark #div_messages .accordion-button { background: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; font-weight: 600 !important; padding: 12px 16px !important; border: none !important; } .aura-dark #div_messages .accordion-button:not(.collapsed) { background: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; box-shadow: none !important; } .aura-dark #div_messages .accordion-button::after { filter: invert(1) brightness(2); } .aura-dark #div_messages .accordion-body { background: var(--aura-bg-secondary) !important; padding: 12px !important; } /* Group list items */ .aura-dark #div_messages [id^="div_GroupType_"] > div { padding: 8px 12px; margin: 2px 0; border-radius: 6px; transition: background 0.15s ease; } .aura-dark #div_messages [id^="div_GroupType_"] > div:hover { background: var(--aura-bg-hover) !important; } .aura-dark #div_messages [id^="div_GroupType_"] a { color: var(--aura-text-primary) !important; text-decoration: none !important; font-weight: 500; } .aura-dark #div_messages [id^="div_GroupType_"] a:hover { color: var(--aura-accent-primary) !important; } /* Search input in groups */ .aura-dark #div_messages [id^="div_search_"] input { background: var(--aura-bg-input) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 6px !important; color: var(--aura-text-primary) !important; padding: 8px 12px !important; } .aura-dark #div_messages [id^="div_search_"] input:focus { border-color: var(--aura-accent-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(29, 156, 229, 0.15) !important; } /* Message container for Home page */ .aura-dark .msg_container { background: linear-gradient(180deg, var(--aura-bg-primary) 0%, var(--aura-bg-secondary) 100%) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 8px !important; padding: 16px !important; scroll-behavior: smooth; } /* Heading styles */ .aura-dark #h2_group_messages_heading, .aura-dark #h4_group_messages_description { color: var(--aura-text-secondary) !important; } /* Direct Message form area */ .aura-dark #frm_direct_message { background: var(--aura-bg-card) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 8px !important; padding: 20px !important; } .aura-dark #frm_direct_message h2 { color: var(--aura-text-primary) !important; } .aura-dark #frm_direct_message label { color: var(--aura-text-primary) !important; } .aura-dark #frm_direct_message input { background: var(--aura-bg-input) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 6px !important; color: var(--aura-text-primary) !important; padding: 8px 12px !important; width: 100%; } .aura-dark #frm_direct_message input:focus { border-color: var(--aura-accent-primary) !important; outline: none !important; } /* RTE area at bottom */ .aura-dark #chat_rte_area { background: var(--aura-bg-card) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 8px !important; padding: 16px !important; margin-top: 16px; } .aura-dark #div_defaultRTE .e-richtexteditor { background: var(--aura-bg-input) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 8px !important; } .aura-dark #div_defaultRTE .e-rte-content { background: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; } /* Send button styling */ .aura-dark #sendmessage { background: linear-gradient(135deg, var(--aura-accent-success) 0%, #388e3c 100%) !important; border: none !important; border-radius: 8px !important; padding: 10px 24px !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3) !important; transition: all 0.2s ease !important; } .aura-dark #sendmessage:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important; } /* Group members modal */ .aura-dark #GroupMemberPopup .modal-content { background: var(--aura-bg-popup) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 12px !important; } .aura-dark #GroupMemberPopup .modal-header { background: var(--aura-bg-tertiary) !important; border-bottom: 1px solid var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark #GroupMemberPopup .modal-footer { background: var(--aura-bg-tertiary) !important; border-top: 1px solid var(--aura-border-color) !important; } /* New Message received button on Home page */ .aura-dark #div_message_area #btn_new_message_received { background: var(--aura-accent-primary) !important; border: none !important; border-radius: 20px !important; padding: 8px 20px !important; font-weight: 600 !important; box-shadow: 0 4px 16px rgba(29, 156, 229, 0.4) !important; } /* Loader styling */ .aura-dark #Loader_div_message_area, .aura-dark #div_messages #loader_chat_groups_messages { color: var(--aura-accent-primary) !important; } /* Toggle link for group name */ .aura-dark .toggleAdhocGroupName { color: var(--aura-link-color) !important; } .aura-dark .toggleAdhocGroupName:hover { color: var(--aura-link-hover) !important; } /* Add person icon */ .aura-dark #div_messages .bi-person-plus-fill { color: var(--aura-text-primary) !important; transition: color 0.2s ease; } .aura-dark #div_messages .bi-person-plus-fill:hover { color: var(--aura-accent-primary) !important; } /* ========================================================================== AI Assistant Panel - Dark Mode ========================================================================== */ /* AI Side Panel Container */ .aura-dark .ai-side-panel { background-color: var(--aura-bg-secondary) !important; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3) !important; border-left: 1px solid var(--aura-border-color) !important; } .aura-dark .ai-side-panel-content { background-color: var(--aura-bg-secondary) !important; } /* AI Assist Content Container */ .aura-dark .ai-assist-content-container { background-color: var(--aura-bg-card) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; border: 1px solid var(--aura-border-color) !important; } /* AI Chat Container */ .aura-dark .ai-chat { background-color: var(--aura-bg-secondary) !important; } /* AI Chat Body */ .aura-dark .ai-chat-body { background: linear-gradient(180deg, var(--aura-bg-primary) 0%, var(--aura-bg-secondary) 100%) !important; border-color: var(--aura-border-color) !important; } /* AI Chat History */ .aura-dark .ai-chat-history { background: transparent !important; } /* AI Chat Messages - User (You) */ .aura-dark .ai-chat-user { background: linear-gradient(135deg, #1d9ce5 0%, #0078d4 100%) !important; color: #fff !important; border-radius: 18px 18px 4px 18px !important; box-shadow: 0 2px 8px rgba(29, 156, 229, 0.3) !important; } .aura-dark .ai-chat-user.ai-chat-message { color: #fff !important; } .aura-dark .ai-chat-user.ai-chat-message p, .aura-dark .ai-chat-user.ai-chat-message span, .aura-dark .ai-chat-user.ai-chat-message li { color: #fff !important; } /* AI Chat Messages - AI Response */ .aura-dark .ai-chat-ai { background: var(--aura-bg-card) !important; color: var(--aura-text-primary) !important; border-radius: 18px 18px 18px 4px !important; border: 1px solid var(--aura-border-light) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } .aura-dark .ai-chat-ai.ai-chat-message { color: var(--aura-text-primary) !important; } .aura-dark .ai-chat-ai.ai-chat-message p, .aura-dark .ai-chat-ai.ai-chat-message span, .aura-dark .ai-chat-ai.ai-chat-message li, .aura-dark .ai-chat-ai.ai-chat-message h1, .aura-dark .ai-chat-ai.ai-chat-message h2, .aura-dark .ai-chat-ai.ai-chat-message h3, .aura-dark .ai-chat-ai.ai-chat-message h4, .aura-dark .ai-chat-ai.ai-chat-message h5, .aura-dark .ai-chat-ai.ai-chat-message h6 { color: var(--aura-text-primary) !important; } .aura-dark .ai-chat-ai.ai-chat-message a { color: var(--aura-link-color) !important; } .aura-dark .ai-chat-ai.ai-chat-message a:hover { color: var(--aura-link-hover) !important; } .aura-dark .ai-chat-ai.ai-chat-message code { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border: 1px solid var(--aura-border-color) !important; padding: 2px 6px; border-radius: 4px; } .aura-dark .ai-chat-ai.ai-chat-message pre { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border: 1px solid var(--aura-border-color) !important; border-radius: 8px; padding: 12px; } /* AI Chat Input */ .aura-dark .ai-chat-txt { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-chat-txt:focus { border-color: var(--aura-accent-primary) !important; box-shadow: 0 0 0 3px rgba(29, 156, 229, 0.15) !important; background-color: var(--aura-bg-input) !important; } .aura-dark .ai-chat-txt::placeholder { color: var(--aura-text-muted) !important; } /* AI Chat Buttons */ .aura-dark .ai-chat-send { color: var(--aura-accent-success) !important; } .aura-dark .ai-chat-send:hover { color: #81c784 !important; } .aura-dark .ai-chat-clear { color: var(--aura-accent-danger) !important; } .aura-dark .ai-chat-clear:hover { color: #e57373 !important; } /* AI Chat Loading Spinner */ .aura-dark .ai-send-loader { color: var(--aura-accent-primary) !important; } .aura-dark .ai-send-loader i { color: var(--aura-accent-primary) !important; } /* AI Chat Feedback */ .aura-dark .ai-chat-feedback { background-color: var(--aura-bg-card) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-chat-feedback-comment { background-color: var(--aura-bg-card) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-chat-feedback-rating { color: var(--aura-text-secondary) !important; } /* AI Assist Tabs */ .aura-dark .ai-assist-tabs { background-color: var(--aura-bg-card) !important; border: 1px solid var(--aura-border-color) !important; } .aura-dark .ai-assist-tabs .nav-link { color: var(--aura-text-primary) !important; } .aura-dark .ai-assist-tabs .nav-link:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .ai-assist-tabs .nav-link.active { background-color: var(--aura-accent-primary) !important; color: #fff !important; border-color: var(--aura-accent-primary) !important; } /* AI Assist Options/Buttons */ .aura-dark .ai-assist-option { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .ai-assist-option:hover { background-color: var(--aura-bg-active) !important; } /* AI Batch Processing */ .aura-dark .ai-batch-separator { border-color: var(--aura-border-color) !important; } .aura-dark .ai-batch-header { color: var(--aura-text-secondary) !important; } /* AI Reference Files */ .aura-dark .ai-chat-reference-file { color: var(--aura-link-color) !important; background-color: var(--aura-bg-tertiary) !important; border-radius: 4px; padding: 2px 8px; } .aura-dark .ai-chat-reference-file:hover { color: var(--aura-link-hover) !important; background-color: var(--aura-bg-hover) !important; } /* AI Dropdown */ .aura-dark .ai-chat select, .aura-dark .ai-chat .form-control, .aura-dark .ai-chat .form-select { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } /* Italic disclaimer text */ .aura-dark .ai-chat .fst-italic { color: var(--aura-text-muted) !important; } /* Source citations in AI responses */ .aura-dark .ai-chat-ai .source-citation, .aura-dark .ai-chat-ai [class*="citation"], .aura-dark .ai-chat-ai [class*="source"] { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-secondary) !important; } /* ========================================================================== Syncfusion Rich Text Editor (RTE) - Comprehensive Dark Mode ========================================================================== */ /* Main RTE Container */ .aura-dark .e-richtexteditor { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor.e-rte-tb-expand { background-color: var(--aura-bg-input) !important; } /* RTE Content Area */ .aura-dark .e-richtexteditor .e-rte-content, .aura-dark .e-richtexteditor .e-content { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-rte-content .e-content { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; } /* RTE Content iframe body */ .aura-dark .e-richtexteditor iframe { background-color: var(--aura-bg-input) !important; } /* RTE Toolbar */ .aura-dark .e-richtexteditor .e-rte-toolbar, .aura-dark .e-richtexteditor .e-toolbar { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-items { background-color: var(--aura-bg-tertiary) !important; } .aura-dark .e-richtexteditor .e-toolbar-wrapper { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } /* Toolbar Buttons */ .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn, .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item button { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item button:hover { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item button:focus { background-color: var(--aura-bg-active) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-active, .aura-dark .e-richtexteditor .e-toolbar .e-toolbar-item button.e-active { background-color: var(--aura-accent-primary) !important; color: #fff !important; } /* Toolbar Icons */ .aura-dark .e-richtexteditor .e-toolbar .e-icons, .aura-dark .e-richtexteditor .e-toolbar .e-btn-icon { color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-toolbar .e-tbar-btn:hover .e-icons, .aura-dark .e-richtexteditor .e-toolbar .e-tbar-btn:hover .e-btn-icon { color: var(--aura-text-primary) !important; } /* Toolbar Dropdown */ .aura-dark .e-richtexteditor .e-toolbar .e-dropdown-btn { background-color: transparent !important; color: var(--aura-text-primary) !important; border-color: transparent !important; } .aura-dark .e-richtexteditor .e-toolbar .e-dropdown-btn:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-richtexteditor .e-toolbar .e-dropdown-btn .e-caret { color: var(--aura-text-secondary) !important; } /* Toolbar Separator */ .aura-dark .e-richtexteditor .e-toolbar .e-separator { border-color: var(--aura-border-color) !important; } /* RTE Dropdowns and Popups */ .aura-dark .e-rte-dropdown-popup, .aura-dark .e-rte-dropdown-popup.e-popup, .aura-dark .e-richtexteditor-dropdown { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } .aura-dark .e-rte-dropdown-popup .e-item, .aura-dark .e-rte-dropdown-popup .e-list-item { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-rte-dropdown-popup .e-item:hover, .aura-dark .e-rte-dropdown-popup .e-list-item:hover, .aura-dark .e-rte-dropdown-popup .e-item.e-hover, .aura-dark .e-rte-dropdown-popup .e-list-item.e-hover { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; } .aura-dark .e-rte-dropdown-popup .e-item.e-active, .aura-dark .e-rte-dropdown-popup .e-list-item.e-active { background-color: var(--aura-accent-primary) !important; color: #fff !important; } /* RTE Font/Format Dropdowns */ .aura-dark .e-rte-fontname-popup, .aura-dark .e-rte-fontsize-popup, .aura-dark .e-rte-format-popup, .aura-dark .e-rte-numberformatlist-popup, .aura-dark .e-rte-bulletformatlist-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } /* Color Picker */ .aura-dark .e-rte-fontcolor-popup, .aura-dark .e-rte-backgroundcolor-popup, .aura-dark .e-colorpicker-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-colorpicker-wrapper .e-selected-color { border-color: var(--aura-border-color) !important; } .aura-dark .e-colorpicker-wrapper .e-palette { background-color: var(--aura-bg-popup) !important; } .aura-dark .e-colorpicker-wrapper .e-container { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-colorpicker-wrapper .e-value-switch-btn, .aura-dark .e-colorpicker-wrapper .e-mode-switch-btn { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-colorpicker-wrapper .e-hsv-container { background-color: var(--aura-bg-card) !important; } .aura-dark .e-colorpicker-wrapper .e-slider-preview { background-color: var(--aura-bg-card) !important; } .aura-dark .e-colorpicker-wrapper .e-input-wrapper input { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-colorpicker-wrapper .e-hex-label, .aura-dark .e-colorpicker-wrapper .e-value-label { color: var(--aura-text-secondary) !important; } /* Link/Image Dialog */ .aura-dark .e-rte-link-dialog, .aura-dark .e-rte-img-dialog, .aura-dark .e-rte-video-dialog, .aura-dark .e-rte-audio-dialog, .aura-dark .e-rte-table-dialog { background-color: var(--aura-bg-popup) !important; } .aura-dark .e-rte-link-dialog .e-dialog, .aura-dark .e-rte-img-dialog .e-dialog, .aura-dark .e-rte-video-dialog .e-dialog, .aura-dark .e-rte-audio-dialog .e-dialog, .aura-dark .e-rte-table-dialog .e-dialog { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } /* Dialog Header */ .aura-dark .e-richtexteditor .e-dialog .e-dlg-header-content, .aura-dark .e-rte-elements .e-dialog .e-dlg-header-content { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-richtexteditor .e-dialog .e-dlg-header, .aura-dark .e-rte-elements .e-dialog .e-dlg-header { color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-dialog .e-btn.e-dlg-closeicon-btn, .aura-dark .e-rte-elements .e-dialog .e-btn.e-dlg-closeicon-btn { color: var(--aura-text-secondary) !important; } .aura-dark .e-richtexteditor .e-dialog .e-btn.e-dlg-closeicon-btn:hover, .aura-dark .e-rte-elements .e-dialog .e-btn.e-dlg-closeicon-btn:hover { background-color: var(--aura-accent-danger) !important; color: #fff !important; } /* Dialog Content */ .aura-dark .e-richtexteditor .e-dialog .e-dlg-content, .aura-dark .e-rte-elements .e-dialog .e-dlg-content { background-color: var(--aura-bg-popup) !important; color: var(--aura-text-primary) !important; } /* Dialog Footer */ .aura-dark .e-richtexteditor .e-dialog .e-footer-content, .aura-dark .e-rte-elements .e-dialog .e-footer-content { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } /* Dialog Inputs */ .aura-dark .e-richtexteditor .e-dialog input, .aura-dark .e-richtexteditor .e-dialog .e-input, .aura-dark .e-rte-elements .e-dialog input, .aura-dark .e-rte-elements .e-dialog .e-input { background-color: var(--aura-bg-input) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-richtexteditor .e-dialog input:focus, .aura-dark .e-richtexteditor .e-dialog .e-input:focus, .aura-dark .e-rte-elements .e-dialog input:focus, .aura-dark .e-rte-elements .e-dialog .e-input:focus { border-color: var(--aura-accent-primary) !important; box-shadow: 0 0 0 3px rgba(29, 156, 229, 0.15) !important; } .aura-dark .e-richtexteditor .e-dialog label, .aura-dark .e-rte-elements .e-dialog label { color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-dialog .e-float-text, .aura-dark .e-rte-elements .e-dialog .e-float-text { color: var(--aura-text-secondary) !important; } /* Dialog Buttons */ .aura-dark .e-richtexteditor .e-dialog .e-btn.e-primary, .aura-dark .e-rte-elements .e-dialog .e-btn.e-primary { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-accent-primary) !important; color: #fff !important; } .aura-dark .e-richtexteditor .e-dialog .e-btn.e-flat, .aura-dark .e-rte-elements .e-dialog .e-btn.e-flat { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-richtexteditor .e-dialog .e-btn.e-flat:hover, .aura-dark .e-rte-elements .e-dialog .e-btn.e-flat:hover { background-color: var(--aura-bg-hover) !important; } /* RTE Quick Toolbar */ .aura-dark .e-rte-quick-toolbar, .aura-dark .e-rte-quick-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } .aura-dark .e-rte-quick-toolbar .e-toolbar, .aura-dark .e-rte-quick-popup .e-toolbar { background-color: var(--aura-bg-popup) !important; } .aura-dark .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn, .aura-dark .e-rte-quick-popup .e-toolbar-item .e-tbar-btn { background-color: transparent !important; color: var(--aura-text-primary) !important; } .aura-dark .e-rte-quick-toolbar .e-toolbar-item .e-tbar-btn:hover, .aura-dark .e-rte-quick-popup .e-toolbar-item .e-tbar-btn:hover { background-color: var(--aura-bg-hover) !important; } /* RTE Source Code View */ .aura-dark .e-richtexteditor .e-rte-srctextarea, .aura-dark .e-richtexteditor textarea.e-content { background-color: var(--aura-bg-tertiary) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } /* RTE Placeholder */ .aura-dark .e-richtexteditor .e-rte-placeholder { color: var(--aura-text-muted) !important; } /* RTE Character/Word Count */ .aura-dark .e-richtexteditor .e-rte-character-count, .aura-dark .e-richtexteditor .e-rte-word-count { color: var(--aura-text-secondary) !important; background-color: var(--aura-bg-tertiary) !important; } /* RTE Footer/Resize */ .aura-dark .e-richtexteditor .e-rte-footer { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-richtexteditor .e-status-bar { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-secondary) !important; } /* RTE Table */ .aura-dark .e-richtexteditor .e-rte-content table, .aura-dark .e-richtexteditor .e-content table { border-color: var(--aura-border-color) !important; } .aura-dark .e-richtexteditor .e-rte-content table td, .aura-dark .e-richtexteditor .e-rte-content table th, .aura-dark .e-richtexteditor .e-content table td, .aura-dark .e-richtexteditor .e-content table th { border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } /* Table Picker Dialog */ .aura-dark .e-rte-table-popup, .aura-dark .e-rte-tablecell-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-rte-table-popup .e-rte-tablecell, .aura-dark .e-rte-table .e-rte-tablecell { border-color: var(--aura-border-color) !important; background-color: transparent !important; } .aura-dark .e-rte-table-popup .e-rte-tablecell.e-active, .aura-dark .e-rte-table .e-rte-tablecell.e-active { background-color: var(--aura-accent-primary) !important; } .aura-dark .e-rte-table-popup .e-insert-table-btn { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; border-color: var(--aura-border-color) !important; } /* RTE Mention/@ Popup */ .aura-dark .e-mention-popup, .aura-dark .e-mention.e-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-mention-popup .e-list-item, .aura-dark .e-mention.e-popup .e-list-item { color: var(--aura-text-primary) !important; } .aura-dark .e-mention-popup .e-list-item:hover, .aura-dark .e-mention-popup .e-list-item.e-hover, .aura-dark .e-mention.e-popup .e-list-item:hover, .aura-dark .e-mention.e-popup .e-list-item.e-hover { background-color: var(--aura-bg-hover) !important; } /* RTE Emoji Picker */ .aura-dark .e-rte-emojipicker-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } /* RTE Scrollbar */ .aura-dark .e-richtexteditor .e-rte-content::-webkit-scrollbar, .aura-dark .e-richtexteditor .e-content::-webkit-scrollbar { width: 8px; height: 8px; } .aura-dark .e-richtexteditor .e-rte-content::-webkit-scrollbar-track, .aura-dark .e-richtexteditor .e-content::-webkit-scrollbar-track { background: var(--aura-bg-secondary); } .aura-dark .e-richtexteditor .e-rte-content::-webkit-scrollbar-thumb, .aura-dark .e-richtexteditor .e-content::-webkit-scrollbar-thumb { background: var(--aura-border-color); border-radius: 4px; } .aura-dark .e-richtexteditor .e-rte-content::-webkit-scrollbar-thumb:hover, .aura-dark .e-richtexteditor .e-content::-webkit-scrollbar-thumb:hover { background: var(--aura-text-muted); } /* RTE Focus State */ .aura-dark .e-richtexteditor.e-rte-full-screen { background-color: var(--aura-bg-primary) !important; } .aura-dark .e-richtexteditor:focus-within { border-color: var(--aura-accent-primary) !important; box-shadow: 0 0 0 3px rgba(29, 156, 229, 0.15) !important; } /* RTE Inline Toolbar */ .aura-dark .e-rte-inline-popup, .aura-dark .e-richtexteditor .e-rte-inline-popup { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } /* Generic Syncfusion Dropdowns used by RTE */ .aura-dark .e-dropdownbase.e-popup, .aura-dark .e-popup.e-lib { background-color: var(--aura-bg-popup) !important; border-color: var(--aura-border-color) !important; } .aura-dark .e-dropdownbase .e-list-item { color: var(--aura-text-primary) !important; } .aura-dark .e-dropdownbase .e-list-item.e-hover, .aura-dark .e-dropdownbase .e-list-item:hover { background-color: var(--aura-bg-hover) !important; } .aura-dark .e-dropdownbase .e-list-item.e-active { background-color: var(--aura-accent-primary) !important; color: #fff !important; } /* Invert dark PNG icons to pale in dark mode */ .aura-dark .id-card-nav-button img, .aura-dark img[src*="dark-"], .aura-dark .svg-pale-icon, .aura-dark img[src*="pale-"] { filter: invert(1) brightness(2); } /* ========================================================================== AI Summary Panel - Dark Mode Overrides ========================================================================== */ /* Main container - override inline background */ .aura-dark .ai-summary-results .container-fluid, .aura-dark .ai-html-output .container-fluid { background: var(--aura-bg-card) !important; color: var(--aura-text-primary) !important; } /* Header gradient */ .aura-dark .ai-summary-results .header-gradient, .aura-dark .ai-html-output .header-gradient { background: linear-gradient(135deg, var(--aura-bg-tertiary) 0%, var(--aura-accent-primary) 100%) !important; color: #fff !important; border-radius: 8px; padding: 8px 12px; } .aura-dark .ai-summary-results .header-gradient h5, .aura-dark .ai-html-output .header-gradient h5 { color: #fff !important; } /* Patient card */ .aura-dark .ai-summary-results .patient-card, .aura-dark .ai-html-output .patient-card, .aura-dark .ai-summary-results .card, .aura-dark .ai-html-output .card { background-color: var(--aura-bg-secondary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-summary-results .card-body, .aura-dark .ai-html-output .card-body { background-color: transparent !important; color: var(--aura-text-primary) !important; } /* Alert container */ .aura-dark .ai-summary-results .alert-container, .aura-dark .ai-html-output .alert-container { background-color: rgba(244, 67, 54, 0.15) !important; border: 1px solid var(--aura-accent-danger) !important; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; } /* Section headers - base styling */ .aura-dark .ai-summary-results .section-header, .aura-dark .ai-html-output .section-header { color: var(--aura-text-primary) !important; background-color: var(--aura-bg-tertiary) !important; padding: 6px 10px; border-radius: 4px; font-weight: 600; margin-bottom: 6px; } /* Section header variants */ .aura-dark .ai-summary-results .section-header.alerts, .aura-dark .ai-html-output .section-header.alerts { background-color: rgba(244, 67, 54, 0.2) !important; color: #ff8a80 !important; } .aura-dark .ai-summary-results .section-header.program, .aura-dark .ai-html-output .section-header.program { background-color: rgba(76, 175, 80, 0.2) !important; color: #a5d6a7 !important; } .aura-dark .ai-summary-results .section-header.funding, .aura-dark .ai-html-output .section-header.funding { background-color: rgba(255, 152, 0, 0.2) !important; color: #ffcc80 !important; } .aura-dark .ai-summary-results .section-header.diagnoses, .aura-dark .ai-html-output .section-header.diagnoses { background-color: rgba(156, 39, 176, 0.2) !important; color: #ce93d8 !important; } /* Section items */ .aura-dark .ai-summary-results .section-item, .aura-dark .ai-html-output .section-item { color: var(--aura-text-primary) !important; background-color: var(--aura-bg-hover) !important; padding: 4px 8px; border-radius: 4px; margin-bottom: 4px; } .aura-dark .ai-summary-results .section-item.program, .aura-dark .ai-html-output .section-item.program { border-left: 3px solid var(--aura-accent-success) !important; } .aura-dark .ai-summary-results .section-item.funding, .aura-dark .ai-html-output .section-item.funding { border-left: 3px solid var(--aura-accent-warning) !important; } /* Diagnosis items */ .aura-dark .ai-summary-results .diagnosis-item, .aura-dark .ai-html-output .diagnosis-item { color: var(--aura-text-primary) !important; background-color: var(--aura-bg-hover) !important; padding: 4px 8px; border-radius: 4px; margin-bottom: 4px; border-left: 3px solid #ce93d8 !important; } /* Patient name link */ .aura-dark .ai-summary-results a, .aura-dark .ai-html-output a { color: var(--aura-link-color) !important; } .aura-dark .ai-summary-results a:hover, .aura-dark .ai-html-output a:hover { color: var(--aura-link-hover) !important; } /* Badge styling */ .aura-dark .ai-summary-results .badge, .aura-dark .ai-html-output .badge { background: var(--aura-accent-info) !important; color: #fff !important; } /* Status indicators - preserve red for alerts but soften */ .aura-dark .ai-summary-results .pn-status, .aura-dark .ai-html-output .pn-status { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 4px; } /* Generic text and paragraph styling */ .aura-dark .ai-summary-results p, .aura-dark .ai-summary-results span, .aura-dark .ai-summary-results div, .aura-dark .ai-summary-results h1, .aura-dark .ai-summary-results h2, .aura-dark .ai-summary-results h3, .aura-dark .ai-summary-results h4, .aura-dark .ai-summary-results h5, .aura-dark .ai-summary-results h6, .aura-dark .ai-html-output p, .aura-dark .ai-html-output span, .aura-dark .ai-html-output div, .aura-dark .ai-html-output h1, .aura-dark .ai-html-output h2, .aura-dark .ai-html-output h3, .aura-dark .ai-html-output h4, .aura-dark .ai-html-output h5, .aura-dark .ai-html-output h6 { color: var(--aura-text-primary) !important; } /* Summary item styling (filter checkboxes) */ .aura-dark .ai-summary .summary-item { background-color: var(--aura-bg-hover) !important; color: var(--aura-text-primary) !important; border: 1px solid var(--aura-border-color) !important; padding: 4px 8px; border-radius: 4px; margin: 2px; display: inline-block; } .aura-dark .ai-summary .summary-item:hover { background-color: var(--aura-bg-active) !important; } /* AI Summary buttons */ .aura-dark .ai-summary-buttons .btn-secondary { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-summary-buttons .btn-secondary:hover { background-color: var(--aura-bg-active) !important; } /* AI Summary assistant option labels */ .aura-dark .ai-summary .ai-radio-lbl { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-summary .ai-radio-lbl:hover { background-color: var(--aura-bg-active) !important; } .aura-dark .ai-summary .btn-check:checked + .ai-radio-lbl { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-accent-primary) !important; color: #fff !important; } /* AI tag styling */ .aura-dark .ai-tag .ai-radio-lbl { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-tag.ai-tag-checked .ai-radio-lbl { background-color: var(--aura-accent-primary) !important; border-color: var(--aura-accent-primary) !important; color: #fff !important; } /* AI Generate accept text */ .aura-dark .ai-generate-accept { color: var(--aura-text-muted) !important; } /* AI test capture controls */ .aura-dark .ai-test-capture-controls .btn-info { background-color: var(--aura-accent-info) !important; border-color: var(--aura-accent-info) !important; } /* Form inputs in AI summary */ .aura-dark .ai-summary .form-control, .aura-dark .ai-summary .form-floating input, .aura-dark .ai-summary .form-floating textarea { background-color: var(--aura-bg-input) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-summary .form-floating label { color: var(--aura-text-secondary) !important; } /* AI loading modal */ .aura-dark .loading-modal-custom { background-color: var(--aura-bg-secondary) !important; color: var(--aura-text-primary) !important; } .aura-dark .loading-modal-custom .bounce-box { background-color: var(--aura-bg-card) !important; color: var(--aura-text-primary) !important; } .aura-dark .loading-modal-custom p { color: var(--aura-text-primary) !important; } /* Pulse loader SVG - adjust colors for dark mode */ .aura-dark .pulse-loader .pulse-track { stroke: var(--aura-border-color) !important; } .aura-dark .pulse-loader .pulse-car { stroke: var(--aura-accent-primary) !important; } /* AI Home choices container */ .aura-dark .ai-assist-home-choices { background-color: transparent !important; } /* AI secondary option button (history buttons) */ .aura-dark .ai-assist-option-secondary { background-color: var(--aura-bg-tertiary) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-assist-option-secondary:hover { background-color: var(--aura-bg-active) !important; } /* AI followup chat container */ .aura-dark .ai-assist-followup-chats { background-color: transparent !important; } .aura-dark .ai-assist-followup-chat { background-color: var(--aura-bg-secondary) !important; } /* AI summary main content area */ .aura-dark .ai-summary-main-content { background-color: transparent !important; } /* AI summary filter button */ .aura-dark .ai-summary-filter .btn-secondary { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-summary-filter .btn-secondary:hover { background-color: var(--aura-bg-active) !important; } /* AI summary JSON button */ .aura-dark .ai-summary-btn-json { background-color: var(--aura-bg-hover) !important; border-color: var(--aura-border-color) !important; color: var(--aura-text-primary) !important; } .aura-dark .ai-summary-btn-json:hover { background-color: var(--aura-bg-active) !important; } /* AI summary cancel button */ .aura-dark .ai-summary-cancel .btn-danger { background-color: var(--aura-accent-danger) !important; border-color: var(--aura-accent-danger) !important; } /* Additional AI summary result styling for nested elements */ .aura-dark .ai-summary-results [style*="background: #f8f9fa"], .aura-dark .ai-summary-results [style*="background:#f8f9fa"], .aura-dark .ai-html-output [style*="background: #f8f9fa"], .aura-dark .ai-html-output [style*="background:#f8f9fa"] { background: var(--aura-bg-card) !important; } /* Override any hardcoded light text colors in AI output */ .aura-dark .ai-summary-results [style*="color: #4a90e2"], .aura-dark .ai-summary-results [style*="color:#4a90e2"], .aura-dark .ai-html-output [style*="color: #4a90e2"], .aura-dark .ai-html-output [style*="color:#4a90e2"] { color: var(--aura-link-color) !important; } /* ========================================================================== Payment Help Content (Add Payment popup) ========================================================================== */ .aura-dark .payment-help-content { background: var(--aura-bg-card) !important; border-color: var(--aura-border-color) !important; box-shadow: 0 4px 12px var(--aura-shadow) !important; color: var(--aura-text-primary) !important; } .aura-dark .payment-help-content .help-title { border-bottom-color: var(--aura-border-color) !important; color: var(--aura-link-color) !important; } .aura:dark .payment-help-content .help-section { border-bottom-color: var(--aura-border-light) !important; } .aura-dark .payment-help-content .help-section-title { color: var(--aura-text-secondary) !important; }