/* Last-loaded dark theme overrides for surfaces that use fixed light colors. */
html[data-theme="dark"] #view-tracking,
html[data-theme="dark"] #view-tracking #tracking-desktop,
html[data-theme="dark"] #view-tracking .td-panel,
html[data-theme="dark"] #view-tracking .td-person-view {
  background: var(--bg, #1e1e1e) !important;
  color: var(--ink, #f4f6f8) !important;
}

html[data-theme="dark"] #view-tracking .td-panel > header,
html[data-theme="dark"] #view-tracking .td-person,
html[data-theme="dark"] #view-tracking .td-tabs,
html[data-theme="dark"] #view-tracking .td-date,
html[data-theme="dark"] #view-tracking .td-selected-header,
html[data-theme="dark"] #view-tracking .td-trip-totals,
html[data-theme="dark"] #view-tracking .td-selected-day,
html[data-theme="dark"] #view-tracking .td-selected-events {
  border-color: var(--line, #383838) !important;
}

html[data-theme="dark"] #view-tracking .td-person,
html[data-theme="dark"] #view-tracking .td-map-mode,
html[data-theme="dark"] #view-tracking .td-map-status,
html[data-theme="dark"] #view-tracking .td-mobile-back,
html[data-theme="dark"] #view-tracking .td-mobile-alerts,
html[data-theme="dark"] #view-tracking .td-selected-header button,
html[data-theme="dark"] #view-tracking .td-panel header button,
html[data-theme="dark"] #view-tracking .td-close,
html[data-theme="dark"] #view-tracking .td-date input,
html[data-theme="dark"] #view-tracking input,
html[data-theme="dark"] #view-tracking select,
html[data-theme="dark"] #view-tracking textarea {
  background-color: var(--surface, #252525) !important;
  color: var(--ink, #f4f6f8) !important;
  border-color: var(--line, #383838) !important;
  color-scheme: dark;
}

html[data-theme="dark"] #view-tracking .td-person:hover,
html[data-theme="dark"] #view-tracking .td-person.active,
html[data-theme="dark"] #view-tracking .td-event-selected {
  background: var(--surface-2, #303030) !important;
}

html[data-theme="dark"] #view-tracking .td-panel :is(h1,h2,h3,b,strong,label,button),
html[data-theme="dark"] #view-tracking .td-person b,
html[data-theme="dark"] #view-tracking .td-map-mode,
html[data-theme="dark"] #view-tracking .td-map-status {
  color: var(--ink, #f4f6f8) !important;
}

html[data-theme="dark"] #view-tracking .td-panel :is(small,.muted,.td-last,.td-selected-status,.td-mobile-title small,.td-trip-totals small,.tracking-rail-time),
html[data-theme="dark"] #view-tracking .td-person small {
  color: var(--muted, #a8a8a8) !important;
}

html[data-theme="dark"] #view-tracking .maplibregl-ctrl-attrib,
html[data-theme="dark"] #view-tracking .maplibregl-ctrl-group {
  background: var(--surface, #252525) !important;
  color: var(--ink, #f4f6f8) !important;
}

html[data-theme="dark"] #view-tracking .maplibregl-ctrl-attrib a,
html[data-theme="dark"] #view-tracking .maplibregl-ctrl button {
  color: var(--ink, #f4f6f8) !important;
}

html[data-theme="dark"] #view-reimbursements .rm-header {
  background: var(--bg, #1e1e1e) !important;
  color: var(--ink, #f4f6f8) !important;
  border-bottom: 1px solid var(--line, #383838) !important;
}

html[data-theme="dark"] #view-reimbursements .rm-header :is(h1,button,svg),
html[data-theme="dark"] #view-reimbursements .rm-header .icon {
  color: var(--ink, #f4f6f8) !important;
  stroke: currentColor !important;
}

html[data-theme="dark"] #view-reimbursements :is(.rm-summary,.rm-list,.rm-request,.rm-card,.rm-detail,.rm-form),
html[data-theme="dark"] #view-reimbursements :is(input,select,textarea) {
  background-color: var(--surface, #252525) !important;
  color: var(--ink, #f4f6f8) !important;
  border-color: var(--line, #383838) !important;
  color-scheme: dark;
}

html[data-theme="dark"] #view-reimbursements :is(.rm-header,.rm-summary,.rm-list,.rm-request,.rm-card,.rm-detail,.rm-form) :is(h1,h2,h3,h4,label,strong,b,p,span,button) {
  color: var(--ink, #f4f6f8);
}

html[data-theme="dark"] #view-reimbursements .rm-add {
  background-color: var(--green, #2d9b78) !important;
  color: #fff !important;
}

/* Keep status-coded reimbursement amounts readable in dark mode. */
html[data-theme="dark"] #view-reimbursements .rm-summary .rm-total b,
html[data-theme="dark"] #view-reimbursements .rm-summary b.rm-approved,
html[data-theme="dark"] #view-reimbursements .rm-status.approved {
  color: #20bd36 !important;
}

html[data-theme="dark"] #view-reimbursements .rm-summary b.rm-pending,
html[data-theme="dark"] #view-reimbursements .rm-status:not(.approved):not(.rejected) {
  color: #f3a12a !important;
}

html[data-theme="dark"] #view-reimbursements .rm-status.rejected {
  color: #ef5965 !important;
}