/* dark.css — Dark mode overrides for AHI Advisors
 * Applied via body.dark-mode class
 * Preference stored in userSettings.userSettingsJSON.darkMode
 */

/* ---------------------------------------------------------------
   CSS Custom Properties (Dark Palette)
--------------------------------------------------------------- */
body.dark-mode {
  --dm-bg:           #1a1d23;
  --dm-surface:      #242830;
  --dm-surface-2:    #2d3340;
  --dm-border:       #3a4055;
  --dm-border-accent:#2d5a8e;
  --dm-text:         #e8eaf0;
  --dm-text-muted:   #9aa0b0;
  --dm-text-dim:     #6b7280;
  --dm-link:         #93c5fd;
  --dm-input-bg:     #2d3340;
  --dm-input-border: #4a5570;
}

/* ---------------------------------------------------------------
   Base
--------------------------------------------------------------- */
body.dark-mode {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
  color-scheme: dark;
}

body.dark-mode a {
  color: var(--dm-link);
}

body.dark-mode a:hover {
  color: #bfdbfe;
}

body.dark-mode p {
  color: var(--dm-text) !important;
}

body.dark-mode hr {
  border-color: var(--dm-border) !important;
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
body.dark-mode footer {
  background: #1c2030 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode footer a {
  color: var(--dm-text-muted) !important;
}

body.dark-mode footer a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--dm-text) !important;
}

body.dark-mode #copyrightText {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Menu Top / Bottom Bars
--------------------------------------------------------------- */
body.dark-mode .menu-top-bar,
body.dark-mode .menu-bottom-bar {
  background: #151820 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
body.dark-mode input[type="button"],
body.dark-mode .btnType1,
body.dark-mode button {
  background: #2d3a50 !important;
  color: #c8d8f0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  border-color: transparent !important;
}

body.dark-mode input[type="button"]:hover,
body.dark-mode .btnType1:hover,
body.dark-mode button:hover {
  background: #3a4a65 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Plus (+) add button keeps its blue */
body.dark-mode #addBtn1,
body.dark-mode button[style*="background: #1d72c2"],
body.dark-mode button[style*="background:#1d72c2"] {
  background: linear-gradient(135deg, #1558a0 0%, #2d6ab5 100%) !important;
  color: #e8f0ff !important;
}

/* Green save */
body.dark-mode button.btn-save {
  background: #1a5c2a !important;
  color: #ffffff !important;
  border-color: #28a745 !important;
}

/* Red delete */
body.dark-mode button.btn-delete {
  background: #6b1a20 !important;
  color: #ffffff !important;
  border-color: #dc3545 !important;
}

/* Insurance Carrier Product tabs (insCarrierPrimaryEdit) — inactive tabs need
   their own override, otherwise the generic `body.dark-mode button` rule
   above forces them to the same dark background as the active tab. */
body.dark-mode .icp-tab-btn {
  background: #2a3040 !important;
  color: #9aa5b8 !important;
}
body.dark-mode .icp-tab-btn.active {
  background: #1d72c2 !important;
  color: #fff !important;
}

/* Cancel / Close / Back — inline #6c757d gray */
body.dark-mode button.btn-cancel,
body.dark-mode button[style*="background: #6c757d"],
body.dark-mode button[style*="background:#6c757d"] {
  background: #5a6370 !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---------------------------------------------------------------
   Menu Bar
--------------------------------------------------------------- */
body.dark-mode .menu-bar-wrapper {
  background: linear-gradient(180deg, #1c2030 0%, #242838 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .menu-bar ul > li {
  border-color: #2d3a55 !important;
}

body.dark-mode .menu-bar ul > li > a {
  color: #c8cfe0 !important;
}

body.dark-mode .menu-bar ul > li > a:hover,
body.dark-mode .menu-bar ul > li > a.active {
  background: linear-gradient(135deg, #1d72c2 0%, #5791d0 100%) !important;
  color: #ffffff !important;
}

body.dark-mode .menu-bar a.logo {
  color: #93c5fd !important;
}

body.dark-mode .menu-bar ul li ul {
  background-color: #1e2535 !important;
  border-color: #3a5580 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .menu-bar ul li ul li {
  border-top-color: #2d3a55 !important;
}

body.dark-mode .menu-bar ul li ul li a {
  color: #a8c8f0 !important;
}

body.dark-mode .menu-bar ul li ul li a:hover {
  background: linear-gradient(90deg, #1d72c2 0%, #5791d0 100%) !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Form Content Cards
--------------------------------------------------------------- */
body.dark-mode .formContent,
body.dark-mode .listContent,
body.dark-mode .rptContent1 {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border-accent) !important;
  color: var(--dm-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .formContentTitle {
  background: linear-gradient(90deg, rgba(29, 114, 194, 0.15) 0%, rgba(36, 40, 48, 0) 100%) !important;
  border-bottom-color: var(--dm-border-accent) !important;
}

body.dark-mode .formContentMid,
body.dark-mode .formContentMidHeader,
body.dark-mode .formContentMidHeaderSm,
body.dark-mode .formContentFooter {
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .formContent p label,
body.dark-mode .formContent label,
body.dark-mode .listFilter label {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Inputs, Selects, Textareas
--------------------------------------------------------------- */
body.dark-mode input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .listFilter input,
body.dark-mode .listFilter select,
body.dark-mode #listFilter input[type="text"],
body.dark-mode #listFilter input[type="tel"],
body.dark-mode #listFilter input[type="date"],
body.dark-mode #listFilter input[type="number"],
body.dark-mode #listFilter select,
body.dark-mode .formContent input:not([type="button"]),
body.dark-mode .formContent select,
body.dark-mode .formContent textarea,
body.dark-mode .formContentMid input:not([type="button"]),
body.dark-mode .formContentMid select,
body.dark-mode .formContentMid textarea {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* Dark dropdown arrow */
body.dark-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%239aa0b0' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  background-size: 14px !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #5791d0 !important;
  box-shadow: 0 0 0 2px rgba(87, 145, 208, 0.3) !important;
  outline: none !important;
}

body.dark-mode input[readonly],
body.dark-mode input[disabled],
body.dark-mode select[disabled],
body.dark-mode textarea[disabled] {
  background-color: #222630 !important;
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Tables
--------------------------------------------------------------- */
body.dark-mode table {
  color: var(--dm-text) !important;
}

body.dark-mode table th,
body.dark-mode th {
  background-color: #1d3d78 !important;
  color: #e8f0ff !important;
  border-color: #2a5298 !important;
}

body.dark-mode #listResultTable th,
body.dark-mode #listResultTable th:nth-of-type(n+2) {
  background-color: #1d3d78 !important;
  background-image: none !important;
  color: #e8f0ff !important;
  border-color: #2a5298 !important;
}

body.dark-mode #listResultTable th:nth-of-type(n+2):hover {
  background-color: #24489a !important;
}

body.dark-mode #listResultTable th:nth-of-type(n+2).asc {
  background: #1d3d78 url('/image/asc.png') no-repeat center right !important;
  background-size: 25px !important;
  color: #e8f0ff !important;
}

body.dark-mode #listResultTable th:nth-of-type(n+2).asc:hover {
  background: #24489a url('/image/asc.png') no-repeat center right !important;
  background-size: 25px !important;
}

body.dark-mode #listResultTable th:nth-of-type(n+2).desc {
  background: #1d3d78 url('/image/desc.png') no-repeat center right !important;
  background-size: 25px !important;
  color: #e8f0ff !important;
}

body.dark-mode #listResultTable th:nth-of-type(n+2).desc:hover {
  background: #24489a url('/image/desc.png') no-repeat center right !important;
  background-size: 25px !important;
}

body.dark-mode table td {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode table tr:nth-child(even) td,
body.dark-mode #listResultTable tr:nth-child(even) td,
body.dark-mode #listResultTable tr:nth-of-type(2n) td {
  background-color: #1d2230 !important;
}

body.dark-mode #listResultTable tr:nth-of-type(2n) {
  background-color: #1d2230 !important;
}

body.dark-mode #listResultTable tr:nth-of-type(2n+1) td {
  background-color: var(--dm-bg) !important;
}

body.dark-mode table tr:hover td,
body.dark-mode #listResultTable tr:hover td {
  background-color: #2a3548 !important;
  transition: background-color 0.15s ease !important;
}

/* ---------------------------------------------------------------
   Dashboard — Sections & Titles
--------------------------------------------------------------- */
body.dark-mode .dashboard-section {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border-accent) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .dashboard-section-header {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .dashboard-section h2,
body.dark-mode .dashboard-header,
body.dark-mode .dashboard-title,
body.dark-mode .dashboard-titleRight,
body.dark-mode .title1,
body.dark-mode .title2 {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Dashboard — Stat Cards
--------------------------------------------------------------- */
body.dark-mode .stat-card,
body.dark-mode .stat-card-link:hover .stat-card {
  background: #1e2a3a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #2d4a6a !important;
}

/* ---------------------------------------------------------------
   Modals (jquery.modal)
--------------------------------------------------------------- */
body.dark-mode .modal {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border: 2px solid var(--dm-border-accent) !important;
}

body.dark-mode #jquery-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* ---------------------------------------------------------------
   jQuery UI elements
--------------------------------------------------------------- */
body.dark-mode .ui-dialog {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-dialog-titlebar {
  background: #1c2a3a !important;
  color: #ffffff !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-widget-content {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .ui-widget-header {
  background: #1c2a3a !important;
  color: #ffffff !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-autocomplete {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-menu-item .ui-menu-item-wrapper,
body.dark-mode .ui-menu-item a.ui-menu-item-wrapper,
body.dark-mode .ui-autocomplete .ui-menu-item-wrapper,
body.dark-mode .ui-autocomplete .ui-menu-item a {
  color: var(--dm-text) !important;
  background: transparent !important;
}
body.dark-mode .ui-menu-item {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .ui-state-active,
body.dark-mode .ui-menu-item.ui-state-focus > .ui-menu-item-wrapper {
  background: #1d72c2 !important;
  color: #fff !important;
  border-color: #1d72c2 !important;
}

body.dark-mode .ui-datepicker {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-datepicker-header {
  background: #1c2a3a !important;
  color: #ffffff !important;
  border-color: var(--dm-border-accent) !important;
}

body.dark-mode .ui-datepicker td a,
body.dark-mode .ui-datepicker td span {
  color: var(--dm-text) !important;
  background: transparent !important;
}

body.dark-mode .ui-datepicker td.ui-datepicker-today a {
  background: #1d3a5c !important;
  color: #93c5fd !important;
}

body.dark-mode .ui-datepicker td a:hover {
  background: #1d72c2 !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   Snackbar
--------------------------------------------------------------- */
body.dark-mode #snackbar {
  background-color: #1c2535 !important;
  border-color: #3a5580 !important;
}

/* ---------------------------------------------------------------
   Misc utility
--------------------------------------------------------------- */
body.dark-mode .text-muted,
body.dark-mode .instruction {
  color: var(--dm-text-muted) !important;
}

body.dark-mode span {
  color: inherit;
}

body.dark-mode .colHeaderTooltipText {
  background: #2a3040 !important;
  color: #e8eaf6 !important;
  border-color: #4a6fa5 !important;
}

body.dark-mode .colHeaderTooltipText::after {
  border-color: transparent transparent #4a6fa5 transparent !important;
}

/* Light gray inline backgrounds */
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #fafafa"],
body.dark-mode [style*="background:#fafafa"],
body.dark-mode [style*="background: #f5f5f5"],
body.dark-mode [style*="background:#f5f5f5"],
body.dark-mode [style*="background: #f4f4f4"],
body.dark-mode [style*="background:#f4f4f4"] {
  background: var(--dm-surface-2) !important;
}

/* White backgrounds */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"] {
  background: var(--dm-surface) !important;
}

/* Dark text on light inline */
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #495057"],
body.dark-mode [style*="color:#495057"] {
  color: var(--dm-text) !important;
}

body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="color:#6c757d"] {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Checkbox Filter Items
--------------------------------------------------------------- */
body.dark-mode .checkbox-filter-item {
  background: #1e2a3e !important;
  border-color: #3a4f70 !important;
  color: var(--dm-text) !important;
}

body.dark-mode .checkbox-filter-item:hover {
  background: #253450 !important;
  border-color: #4a6090 !important;
}

body.dark-mode .checkbox-filter-item:has(input:checked) {
  background: #1a3a60 !important;
  border-color: #5791d0 !important;
  color: #93c5fd !important;
}

/* ---------------------------------------------------------------
   Pagination / Page Nav Info Text
--------------------------------------------------------------- */
body.dark-mode #pageCountInfo,
body.dark-mode #pageNavInfo,
body.dark-mode #pageCountInfo2,
body.dark-mode #pageNavInfo2,
body.dark-mode #pagePerCountLabel {
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Dark Mode Toggle Button (in footer)
--------------------------------------------------------------- */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.dark-mode-toggle:hover {
  opacity: 1;
}

.dark-mode-toggle img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Override the generic `body.dark-mode button { background: #2d3a50 }`
   rule so the toggle button itself stays transparent against the footer. */
body.dark-mode .dark-mode-toggle,
body.dark-mode button.dark-mode-toggle,
body.dark-mode .dark-mode-toggle:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Scrollbar (WebKit)
--------------------------------------------------------------- */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1d23;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a4055;
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a5575;
}

/* ===============================================================
   v2 — Catch-all overrides for inline white backgrounds and
   light-gray borders that persist across dashboard, myProfile,
   physicianEdit, and Legend panel.
=============================================================== */

/* ---------------------------------------------------------------
   Inputs — bullet-proof override outside .formContent too
   (myProfile, physicianEdit, dashboard search, etc.)
--------------------------------------------------------------- */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="time"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode input:not([type]),
body.dark-mode select,
body.dark-mode textarea {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* Inputs styled inline with #FFFFF0 (ivory) — beat the inline rule */
body.dark-mode input[style*="#FFFFF0"],
body.dark-mode input[style*="#fffff0"],
body.dark-mode select[style*="#FFFFF0"],
body.dark-mode select[style*="#fffff0"],
body.dark-mode textarea[style*="#FFFFF0"],
body.dark-mode textarea[style*="#fffff0"] {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Inline light-gray borders → dark border
--------------------------------------------------------------- */
body.dark-mode [style*="#e0e0e0"],
body.dark-mode [style*="#E0E0E0"],
body.dark-mode [style*="border: 1px solid #ddd"],
body.dark-mode [style*="border:1px solid #ddd"],
body.dark-mode [style*="border-bottom: 1px solid #ddd"],
body.dark-mode [style*="border-top: 1px solid #ddd"],
body.dark-mode [style*="border-bottom:1px solid #ddd"],
body.dark-mode [style*="border-top:1px solid #ddd"],
body.dark-mode [style*="border: 1px solid #ccc"],
body.dark-mode [style*="border:1px solid #ccc"],
body.dark-mode [style*="border: 2px solid #d4d5d6"],
body.dark-mode [style*="border:2px solid #d4d5d6"] {
  border-color: var(--dm-border) !important;
}

/* ---------------------------------------------------------------
   Inline white-ish backgrounds — broader catch
--------------------------------------------------------------- */
body.dark-mode [style*="background:#fff;"],
body.dark-mode [style*="background: #fff;"],
body.dark-mode [style*="background:#fff "],
body.dark-mode [style*="background: #fff "],
body.dark-mode [style*="background:#fafafa"],
body.dark-mode [style*="background: #fafafa"],
body.dark-mode [style*="background:#f9f9f9"],
body.dark-mode [style*="background: #f9f9f9"],
body.dark-mode [style*="background:#f9f9ff"],
body.dark-mode [style*="background: #f9f9ff"],
body.dark-mode [style*="background:#f0f0f0"],
body.dark-mode [style*="background: #f0f0f0"],
body.dark-mode [style*="background-color: #fff;"],
body.dark-mode [style*="background-color:#fff;"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color:#ffffff"] {
  background: var(--dm-surface) !important;
  background-color: var(--dm-surface) !important;
}

/* Yellow-cream cards (#fff3cd is the bootstrap warning bg) */
body.dark-mode [style*="background: #fff3cd"],
body.dark-mode [style*="background:#fff3cd"] {
  background: #3a2a10 !important;
  color: #fbbf24 !important;
  border-color: #d97706 !important;
}

/* ---------------------------------------------------------------
   Inline gray text colors — extend coverage
--------------------------------------------------------------- */
body.dark-mode [style*="color: #888"],
body.dark-mode [style*="color:#888"],
body.dark-mode [style*="color: #aaa"],
body.dark-mode [style*="color:#aaa"],
body.dark-mode [style*="color: #777"],
body.dark-mode [style*="color:#777"] {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Dashboard - Section H2 inline border and color
--------------------------------------------------------------- */
body.dark-mode .dashboard-section h2[style*="border-bottom"] {
  border-bottom-color: var(--dm-border) !important;
}

/* Legend / Instructions inner text divs */
body.dark-mode .dashboard-section div[style*="color: #333"],
body.dark-mode .dashboard-section div[style*="color:#333"] {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}

/* ---------------------------------------------------------------
   myProfile — Dashboard Sections toggle buttons
--------------------------------------------------------------- */
body.dark-mode .dash-toggle-opt {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .dash-toggle-opt.active {
  background: linear-gradient(135deg, #1558a0 0%, #2d6ab5 100%) !important;
  color: #fff !important;
}

/* myProfile — Personal Information label cells (color: #333 inline) */
body.dark-mode td[style*="color: #333"],
body.dark-mode td[style*="color:#333"] {
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Tables — make sure ALL borders pick up the dark border color
--------------------------------------------------------------- */
body.dark-mode table,
body.dark-mode table tr,
body.dark-mode table td,
body.dark-mode table th {
  border-color: var(--dm-border) !important;
}

/* Generic .listResults wrapper */
body.dark-mode .listResults {
  border-color: var(--dm-border) !important;
}

/* HR separators */
body.dark-mode hr,
body.dark-mode .clearMe {
  border-color: var(--dm-border) !important;
}

/* ---------------------------------------------------------------
   Dashboard — Pending / Recent Uploads / Calendar tables
   (these use inline white backgrounds via dashboard.css)
--------------------------------------------------------------- */
body.dark-mode .pending-table,
body.dark-mode .pending-table tr,
body.dark-mode .pending-table td,
body.dark-mode .uploads-table,
body.dark-mode .uploads-table tr,
body.dark-mode .uploads-table td,
body.dark-mode .clientsTurningTable,
body.dark-mode .clientsTurningTable tr,
body.dark-mode .clientsTurningTable td {
  background: transparent !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* Alternating row striping in dashboard-style tables */
body.dark-mode .pending-table tr:nth-child(even) td,
body.dark-mode .uploads-table tr:nth-child(even) td,
body.dark-mode .clientsTurningTable tr:nth-child(even) td {
  background: #1d2230 !important;
}

/* ---------------------------------------------------------------
   formContentMid header strip (often white / gradient)
--------------------------------------------------------------- */
body.dark-mode .formContentMidHeader,
body.dark-mode .formContentMidHeaderSm {
  background: linear-gradient(90deg, rgba(29, 114, 194, 0.15) 0%, rgba(36, 40, 48, 0) 100%) !important;
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   List/Edit page formContent header (Title + buttons row)
--------------------------------------------------------------- */
body.dark-mode .contentL,
body.dark-mode .contentR,
body.dark-mode .contentListL,
body.dark-mode .contentListR {
  color: var(--dm-text) !important;
}

/* Title/heading text inside list/edit headers */
body.dark-mode .title1,
body.dark-mode .title2 {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Audit fields (read-only, gray) at bottom of edit pages
   <span style="color: #888"><strong style="color: #aaa">…</strong></span>
--------------------------------------------------------------- */
body.dark-mode span[style*="color: #888"],
body.dark-mode strong[style*="color: #aaa"] {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   clientEdit — Contact Grid (Address / Phone / Email)
   Source: css/clientEdit.css uses #F2F2F2 / #eee / #ddd borders that
   show up as bright lines around the address row in dark mode.
--------------------------------------------------------------- */
body.dark-mode .clientContactGrid {
  border-color: var(--dm-border) !important;
}
body.dark-mode .ccCol {
  border-right-color: var(--dm-border) !important;
}
body.dark-mode .ccRow {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .ccColHeader {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .ccRowNum,
body.dark-mode .ccHeaderLabel {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   clientEdit — 2x2 Panel grid (Family / Policies / Physicians /
   Medications) and the Notes panel below it.
   Source: css/clientEdit.css uses background:#f5f5f5 on the headers
   and #579ed9 borders that read too bright in dark mode.
--------------------------------------------------------------- */
body.dark-mode .clientPanelGrid {
  border-top-color: var(--dm-border-accent) !important;
  border-bottom-color: var(--dm-border-accent) !important;
}
body.dark-mode .clientPanel {
  border-right-color: var(--dm-border-accent) !important;
  border-bottom-color: var(--dm-border-accent) !important;
}
body.dark-mode .clientPanelHeader {
  background: var(--dm-surface-2) !important;
  border-bottom-color: var(--dm-border-accent) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .clientPanelBody {
  background: transparent !important;
  color: var(--dm-text) !important;
}
body.dark-mode .clientNotesPanel {
  border-bottom-color: var(--dm-border-accent) !important;
}

/* ---------------------------------------------------------------
   Dashboard — search result rows (Pending, Clients Turning, etc.)
   Source: css/dashboard.css `.dashboard-search-results .search-result-row`
   has background #f8f9fa with #333 text, hovers to #e3f2fd. JS-rendered
   `.pending-col-headers` rows use inline #e8f0f8.
--------------------------------------------------------------- */
body.dark-mode .dashboard-search-results .search-result-row {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
}
body.dark-mode .dashboard-search-results .search-result-row:hover {
  background: #2a3a50 !important;
  border-color: #5791d0 !important;
}
body.dark-mode .dashboard-search-results .result-name,
body.dark-mode .dashboard-search-results .result-phone,
body.dark-mode .dashboard-search-results .result-email {
  color: #93c5fd !important;
}

/* Sticky column-header strip inside Pending / Clients Turning lists
   (inline background:#e8f0f8 from dashboard.js) */
body.dark-mode .search-result-row.pending-col-headers,
body.dark-mode [style*="background:#e8f0f8"],
body.dark-mode [style*="background: #e8f0f8"] {
  background: #1d3d78 !important;
  color: #e8f0ff !important;
}

/* ---------------------------------------------------------------
   Dashboard — Recent Uploads / Notifications / generic item cards
   Catch any white/very-light card backgrounds in dashboard sections
   that weren't explicitly targeted yet.
--------------------------------------------------------------- */
body.dark-mode .dashboard-section [style*="background: #ffffff"],
body.dark-mode .dashboard-section [style*="background:#ffffff"],
body.dark-mode .dashboard-section [style*="background: #fff;"],
body.dark-mode .dashboard-section [style*="background:#fff;"],
body.dark-mode .dashboard-section [style*="background: white"],
body.dark-mode .dashboard-section [style*="background:white"] {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* Dashboard uploaded files / activity rows that use inline #f8f9fa */
body.dark-mode .dashboard-section [style*="background: #f8f9fa"],
body.dark-mode .dashboard-section [style*="background:#f8f9fa"] {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* Dashboard recent-uploads / activity tables (HTML tables built in JS) */
body.dark-mode .dashboard-section table {
  background: transparent !important;
  color: var(--dm-text) !important;
}
body.dark-mode .dashboard-section table tr,
body.dark-mode .dashboard-section table td {
  background: transparent !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .dashboard-section table tr:nth-child(even) td {
  background: #1d2230 !important;
}
body.dark-mode .dashboard-section table tr:hover td {
  background: #2a3548 !important;
}

/* ---------------------------------------------------------------
   Dashboard — Calendar (Style B and Style C)
   Source: css/dashboard.css uses #FFFFF0 / #fafafa / white on
   .calendar-day, .calendar-day-c, .calendar-notification-item,
   .calendar-event-item, etc.
--------------------------------------------------------------- */
body.dark-mode .calendar-day-header,
body.dark-mode .calendar-day-header-c,
body.dark-mode div.calendar-day-header,
body.dark-mode div.calendar-day-header-c {
  background: #1e2a3a !important;
  color: #93c5fd !important;
  border: none !important;
}

body.dark-mode .calendar-day,
body.dark-mode .calendar-day-c {
  background: var(--dm-surface-2) !important;
  background-color: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .calendar-day:hover,
body.dark-mode .calendar-day-c:hover {
  background: #2a3a50 !important;
  background-color: #2a3a50 !important;
  border-color: #5791d0 !important;
}

body.dark-mode .calendar-day-other-month,
body.dark-mode .calendar-day-c-other-month {
  background: #202428 !important;
  background-color: #202428 !important;
  color: var(--dm-text-dim) !important;
  border-color: #2a2f3a !important;
}

body.dark-mode .calendar-day-today,
body.dark-mode .calendar-day-c-today {
  background: #2d3a10 !important;
  background-color: #2d3a10 !important;
  border-color: #a0b030 !important;
  color: #d4e060 !important;
}

body.dark-mode .calendar-day-selected,
body.dark-mode .calendar-day-c-selected {
  background: #1a5c2a !important;
  background-color: #1a5c2a !important;
  border-color: #28a745 !important;
  color: #ffffff !important;
}

body.dark-mode .calendar-day-has-notifications::after,
body.dark-mode .calendar-day-c-has-notifications::after {
  color: #93c5fd !important;
}

body.dark-mode .calendar-day-c .calendar-day-more {
  color: var(--dm-text-muted) !important;
}

/* In-cell event chips (Style C) */
body.dark-mode .calendar-day-c .event-type-event {
  background: #1a3050 !important;
  color: #93c5fd !important;
  border-left-color: #5791d0 !important;
}
body.dark-mode .calendar-day-c .event-type-deadline {
  background: #3a1a1a !important;
  color: #f87171 !important;
  border-left-color: #dc2626 !important;
}
body.dark-mode .calendar-day-c .event-type-deadline-low {
  background: #3a2a10 !important;
  color: #fbbf24 !important;
  border-left-color: #d97706 !important;
}

/* Right-side Details panel — notification / event item cards */
body.dark-mode .calendar-notification-item,
body.dark-mode .calendar-event-item {
  background: var(--dm-surface-2) !important;
  border-left-color: #5791d0 !important;
  box-shadow: none !important;
  color: var(--dm-text) !important;
}
body.dark-mode .calendar-notification-item:hover,
body.dark-mode .calendar-event-item:hover {
  background: #2a3245 !important;
}

/* Calendar filter toggle buttons (All / Events / Deadlines) */
body.dark-mode .calendar-filter-btn {
  background: var(--dm-surface-2) !important;
  border-color: #3a5580 !important;
  color: #93c5fd !important;
}
body.dark-mode .calendar-filter-btn:hover {
  background: #2a3a50 !important;
}
body.dark-mode .calendar-filter-btn.active {
  background: #1d4a7a !important;
  border-color: #5791d0 !important;
  color: #ffffff !important;
}

/* Calendar event form (the inline edit/add panel) */
body.dark-mode .calendar-event-form {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .event-form-header {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .event-form-header h3 {
  color: #ffffff !important;
}
body.dark-mode .calendar-event-form label {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .calendar-event-form .form-actions {
  border-top-color: var(--dm-border) !important;
}
body.dark-mode .calendar-event-form .btn-cancel {
  background: var(--dm-surface) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .calendar-event-form .btn-cancel:hover {
  background: var(--dm-surface-2) !important;
}
body.dark-mode .calendar-event-form .btn-delete {
  background: var(--dm-surface) !important;
  border-color: #dc3545 !important;
}
body.dark-mode .calendar-event-form .btn-delete:hover {
  background: #6b1a20 !important;
  color: #ffffff !important;
}

/* Calendar scroll regions (Details panel and notifications list) */
body.dark-mode #calendarNotifications::-webkit-scrollbar-track {
  background: var(--dm-surface) !important;
}
body.dark-mode #calendarNotifications::-webkit-scrollbar-thumb {
  background: #3a5580 !important;
}

/* Reminder toast popup (.dashboard.js builds inline `background: white`) */
body.dark-mode #reminderToast,
body.dark-mode .reminder-toast {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

/* ---------------------------------------------------------------
   Dashboard — Notification items
   JS renders inline background-color:#FFFFF0 and dark text colors
--------------------------------------------------------------- */
body.dark-mode .notification-item {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .notification-item [style*="color: #333"],
body.dark-mode .notification-item [style*="color:#333"] {
  color: var(--dm-text) !important;
}
body.dark-mode .notification-item [style*="color: #666"],
body.dark-mode .notification-item [style*="color:#666"] {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .notification-item [style*="background: #f8f9fa"],
body.dark-mode .notification-item [style*="background:#f8f9fa"] {
  background: var(--dm-surface) !important;
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   Notification Edit — Notes and Linked Items sections
--------------------------------------------------------------- */
/* Section headings */
body.dark-mode .cb9-section h3 {
  color: var(--dm-text) !important;
  border-bottom-color: #3a4055 !important;
}
/* Notes list rows */
body.dark-mode #notifNotesList li {
  border-bottom-color: #2a3040 !important;
  color: var(--dm-text) !important;
}
body.dark-mode #notifNotesList li .note-meta {
  color: var(--dm-text-muted) !important;
}
body.dark-mode #notifNotesList li .note-delete {
  color: #ff7b7b !important;
}
body.dark-mode #notifNotesList li .note-delete:hover {
  color: #ffaaaa !important;
}
body.dark-mode #notifNotesEmpty {
  color: var(--dm-text-dim) !important;
}
/* Notes textarea */
body.dark-mode #notifNoteText {
  background: var(--dm-input-bg) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-input-border) !important;
}
/* Linked items table */
body.dark-mode .cb9-section table tr[style*="background: #f0f4f8"],
body.dark-mode .cb9-section table tr[style*="background:#f0f4f8"] {
  background: var(--dm-surface-2) !important;
}
body.dark-mode .cb9-section table th {
  color: var(--dm-text) !important;
  border-bottom-color: #3a4055 !important;
}
body.dark-mode .cb9-section table td {
  color: var(--dm-text) !important;
  border-bottom-color: #2a3040 !important;
}
body.dark-mode .cb9-section table td[style*="color: #555"],
body.dark-mode .cb9-section table td[style*="color:#555"] {
  color: var(--dm-text-muted) !important;
}

/* ClientEdit — Policy group header rows */
body.dark-mode #policiesTable td[colspan="6"] {
  background: #1a2535 !important;
  color: #79b8f8 !important;
  border-top-color: #2a4060 !important;
}

/* ---------------------------------------------------------------
   ClientEdit — Autocomplete dropdowns (physician, medication, etc.)
--------------------------------------------------------------- */
body.dark-mode .db-autocomplete-results {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode #physicianSearchResults {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border-accent) !important;
}
body.dark-mode .db-autocomplete-item {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .db-autocomplete-item:hover {
  background-color: #1e2a3a !important;
}
body.dark-mode .db-autocomplete-item [style*="color:#888"],
body.dark-mode .db-autocomplete-item [style*="color: #888"] {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .db-autocomplete-item [style*="color:#666"],
body.dark-mode .db-autocomplete-item [style*="color: #666"] {
  color: var(--dm-text-dim) !important;
}

/* ClientEdit — Note cards (card view) */
body.dark-mode .noteCard              { background: #1a2535 !important; border-color: #1d72c2 !important; }
body.dark-mode .noteCard.isFamily     { border-color: #2a5080 !important; }
body.dark-mode .noteCard-header       { background: #1d72c2 !important; }
body.dark-mode .noteCard.isFamily .noteCard-header { background: #2a5080 !important; }
body.dark-mode .noteCard-date         { color: #8899bb !important; }
body.dark-mode .noteCard-type         { color: #79b8f8 !important; }
body.dark-mode .noteCard-footer       { border-top-color: #2a3a4a !important; }
body.dark-mode .noteCard-by           { color: #7a8899 !important; }

/* ClientEdit — Shared physician readonly notice */
body.dark-mode #phys_readonlyNotice {
  background: #2a2210 !important;
  border-color: #7a6000 !important;
  color: #e0c060 !important;
}

/* Follow-Up trash, Client File edit + trash — icon-only buttons, no background */
body.dark-mode .fuDeleteBtn,
body.dark-mode .cfEditBtn,
body.dark-mode .cfDeleteBtn {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ---------------------------------------------------------------
   ClientEdit — modal content boxes (inner white divs)
   Belt-and-suspenders: explicit ID rules beat inline-style selectors
--------------------------------------------------------------- */
body.dark-mode #familyMemberModal    > div,
body.dark-mode #deleteFamilyConfirmModal > div,
body.dark-mode #policyRemovalModal   > div,
body.dark-mode #policyModal          > div > div,
body.dark-mode #medicationModal      > div > div,
body.dark-mode #physicianModal       > div > div,
body.dark-mode #deletePhysicianConfirmModal > div,
body.dark-mode #noteEditModal        > div,
body.dark-mode #applyRulesModal      > div > div,
body.dark-mode #cfDeleteModal        > div,
body.dark-mode #clientFileEditModal  > div,
body.dark-mode #followUpStatusModal  > div,
body.dark-mode #dashReachoutModal    > div {
  background: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
/* Modal footer bars (#f5f5f5) inside modal boxes */
body.dark-mode #familyMemberModal    [style*="background: #f5f5f5"],
body.dark-mode #familyMemberModal    [style*="background:#f5f5f5"],
body.dark-mode #policyRemovalModal   [style*="background: #f5f5f5"],
body.dark-mode #policyRemovalModal   [style*="background:#f5f5f5"],
body.dark-mode #policyModal          [style*="background: #f5f5f5"],
body.dark-mode #policyModal          [style*="background:#f5f5f5"],
body.dark-mode #medicationModal      [style*="background: #f5f5f5"],
body.dark-mode #medicationModal      [style*="background:#f5f5f5"],
body.dark-mode #physicianModal       [style*="background: #f5f5f5"],
body.dark-mode #physicianModal       [style*="background:#f5f5f5"],
body.dark-mode #noteEditModal        [style*="background: #f5f5f5"],
body.dark-mode #noteEditModal        [style*="background:#f5f5f5"],
body.dark-mode #applyRulesModal      [style*="background: #f5f5f5"],
body.dark-mode #applyRulesModal      [style*="background:#f5f5f5"],
body.dark-mode #cfDeleteModal        [style*="background: #f5f5f5"],
body.dark-mode #cfDeleteModal        [style*="background:#f5f5f5"],
body.dark-mode #clientFileEditModal  [style*="background: #f5f5f5"],
body.dark-mode #clientFileEditModal  [style*="background:#f5f5f5"],
body.dark-mode #followUpStatusModal  [style*="background: #f5f5f5"],
body.dark-mode #followUpStatusModal  [style*="background:#f5f5f5"],
body.dark-mode #dashReachoutModal    [style*="background: #f5f5f5"],
body.dark-mode #dashReachoutModal    [style*="background:#f5f5f5"] {
  background: var(--dm-surface-2) !important;
}
/* Labels and text inside modals */
body.dark-mode #familyMemberModal label,
body.dark-mode #policyRemovalModal label,
body.dark-mode #policyModal label,
body.dark-mode #medicationModal label,
body.dark-mode #physicianModal label,
body.dark-mode #noteEditModal label,
body.dark-mode #applyRulesModal label,
body.dark-mode #cfDeleteModal label,
body.dark-mode #clientFileEditModal label,
body.dark-mode #followUpStatusModal label,
body.dark-mode #dashReachoutModal label {
  color: var(--dm-text-muted) !important;
}

/* ---------------------------------------------------------------
   PERMANENT RULE: Never display text in #c0392b (dark red) in dark
   mode — it is unreadable on dark backgrounds. Use #FFFF00 instead.
--------------------------------------------------------------- */
body.dark-mode [style*="color: #c0392b"],
body.dark-mode [style*="color:#c0392b"],
body.dark-mode [style*="color: #C0392B"],
body.dark-mode [style*="color:#C0392B"] {
  color: #FFFF00 !important;
}
/* Also catch any CSS class-defined c0392b text */
body.dark-mode .note-delete,
body.dark-mode .note-delete:hover {
  color: #FFFF00 !important;
}

/* ---------------------------------------------------------------
   myDropDowns page — value cards, count badges, confirm modal
--------------------------------------------------------------- */

/* Default card state: override the inline background set by JS */
body.dark-mode .dd-card {
  background:   var(--dm-surface-2) !important;
  border-color: var(--dm-border)    !important;
}

/* Insurance Plan Names section — dark teal tint */
body.dark-mode #planSection {
  background: #0e1f17 !important;
}
body.dark-mode #planSection .formContentMidHeader {
  background: #122a1c !important;
  border-top-color: #1d4a2e !important;
}
/* Plan cards get a slightly different dark green tint */
body.dark-mode #plan_grid .dd-card {
  background:   #142218 !important;
  border-color: #1e3a28 !important;
}

/* Count badge pill (inline background:#e8edf5) */
body.dark-mode .dd-card span[style*="background:#e8edf5"],
body.dark-mode .dd-card span[style*="background: #e8edf5"] {
  background: var(--dm-surface) !important;
  color:      var(--dm-text-muted) !important;
}

/* Confirm Replace modal content box */
body.dark-mode #ddConfirmModal > div {
  background: var(--dm-surface) !important;
  color:      var(--dm-text)    !important;
}

/* color:#444 used in modal body text — extend coverage */
body.dark-mode [style*="color: #444"],
body.dark-mode [style*="color:#444"] {
  color: var(--dm-text) !important;
}

/* color:#999 used in loading/empty state labels */
body.dark-mode [style*="color: #999"],
body.dark-mode [style*="color:#999"] {
  color: var(--dm-text-muted) !important;
}

/* Physician List — Group Actions panel (injected with inline light styles by physicianList.js) */
body.dark-mode #phys-group-panel {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode #phys-group-panel > div:first-child { /* "Group Actions" label */
  color: var(--dm-text) !important;
}
body.dark-mode #phys-checked-count {
  color: var(--dm-text-muted) !important;
}

/* Client List — Group Actions panel (injected with inline light styles by clientList.js) */
body.dark-mode #client-group-panel {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode #client-group-panel > div:first-child { /* "Group Actions" label */
  color: var(--dm-text) !important;
}
body.dark-mode #client-checked-count {
  color: var(--dm-text-muted) !important;
}

/* =========================================================================
   connectSetup — Images drop zones + From Address radio labels
   (view/connectSetup.inc). Both are hardcoded light-mode styles with no dark
   variant: .connectDropZone has a near-white background (#f8fafc), and the
   bare `label { color: #333; }` rule (main.css) directly matches these
   labels, overriding the inherited body.dark-mode text color — so the
   unchecked "My own email" row reads as dim gray-on-dark next to the
   checked "System address" row's own inline #888 hint text, and the drop
   zones look like stray white boxes.
   ========================================================================= */
body.dark-mode .connectDropZone {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border-accent) !important;
}
body.dark-mode .connectDropZone.dragover {
  background: var(--dm-surface) !important;
  border-color: var(--dm-link) !important;
}
body.dark-mode label:has(input[name="fromMode"]) {
  color: var(--dm-text) !important;
}

/* =========================================================================
   Login page (view/header1.inc / index.inc) — .login-card is a hardcoded
   white box (background:#fff) defined inline in header1.inc, with no dark
   variant. Inputs/links already pick up the generic rules above; this just
   covers the card container and its inline "Enter email"/"Password"
   placeholder text so it doesn't look like a stray white box on a dark page.
   ========================================================================= */
body.dark-mode .login-card {
  background: var(--dm-surface) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .login-card h1,
body.dark-mode .login-card h3,
body.dark-mode .login-card label {
  color: var(--dm-text) !important;
}
body.dark-mode .login-card input::placeholder {
  color: var(--dm-text-dim) !important;
}