/*
 * Employee portal color theme
 *
 * The public website remains unchanged. The root theme-active class is set
 * from each employee's saved System, Dark, or Light preference.
 */
:root {
  color-scheme: light;
}

html.theme-active body.employee-portal {
    color-scheme: dark;
    --eff-bg: #07111f;
    --eff-text: #e8eef7;
    --eff-muted: #aab7c8;
    --eff-card: rgba(15, 29, 47, 0.96);
    --eff-border: rgba(197, 213, 232, 0.16);
    --eff-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
    --crm-bg: #07111f;
    --crm-border: #2b3e54;
    --crm-muted: #aab7c8;
    --crm-navy: #e8eef7;
    --group-bg: #07111f;
    --group-border: #2b3e54;
    --group-muted: #aab7c8;
    --group-navy: #e8eef7;
    --loan-bg: #07111f;
    --loan-border: #2b3e54;
    --loan-muted: #aab7c8;
    --loan-navy: #e8eef7;
    --pipeline-bg: #07111f;
    --pipeline-border: #2b3e54;
    --pipeline-muted: #aab7c8;
    --pipeline-navy: #e8eef7;
    --ra-bg: #07111f;
    --ra-border: #2b3e54;
    --ra-muted: #aab7c8;
    --ra-navy: #e8eef7;
    --re-bg: #07111f;
    --re-border: #2b3e54;
    --re-muted: #aab7c8;
    --re-navy: #e8eef7;
    --record-bg: #07111f;
    --record-border: #2b3e54;
    --record-muted: #aab7c8;
    --record-navy: #e8eef7;
    --report-bg: #07111f;
    --report-border: #2b3e54;
    --report-muted: #aab7c8;
    --report-navy: #e8eef7;
    --ru-bg: #07111f;
    --ru-border: #2b3e54;
    --ru-muted: #aab7c8;
    --ru-navy: #e8eef7;
    --task-bg: #07111f;
    --task-border: #2b3e54;
    --task-muted: #aab7c8;
    --task-navy: #e8eef7;
    color: #e8eef7;
    background-color: #07111f;
  }

  /* Employee dashboard and CRM workspaces */
  html.theme-active body.employee-portal main,
  html.theme-active body.employee-portal .crm-nav,
  html.theme-active body.employee-portal .crm-directory-page,
  html.theme-active body.employee-portal .pipeline-workspace,
  html.theme-active body.employee-portal .task-board-page,
  html.theme-active body.employee-portal .reports-page {
    color: #e8eef7;
    background-color: #07111f;
  }

  html.theme-active body.employee-portal .crm-nav-panel {
    border-color: #2b3e54;
    background: #0f1d2f;
  }

  html.theme-active body.employee-portal .crm-nav-brand,
  html.theme-active body.employee-portal .crm-nav-brand:hover,
  html.theme-active body.employee-portal .crm-nav-brand strong {
    color: #f3f7fb !important;
  }

  html.theme-active body.employee-portal .crm-nav-brand small,
  html.theme-active body.employee-portal .crm-mobile-nav label {
    color: #aab7c8;
  }

  html.theme-active body.employee-portal .crm-nav-brand-icon {
    color: #07111f;
    background: #e1c340;
  }

  html.theme-active body.employee-portal .crm-nav-item .nav-link {
    color: #b8c4d3 !important;
  }

  html.theme-active body.employee-portal .crm-nav-item .nav-link:hover,
  html.theme-active body.employee-portal .crm-nav-item .nav-link:focus {
    color: #ffffff !important;
    background: #18314d;
  }

  html.theme-active body.employee-portal .crm-nav-item.nav-active .nav-link,
  html.theme-active body.employee-portal .crm-nav-item.nav-active .nav-link:hover {
    color: #07111f !important;
    background: #e1c340;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  }

  /* CRM cards, panels, toolbars, lists, and dialogs share one dark surface. */
  html.theme-active body.employee-portal [class$="-card"],
  html.theme-active body.employee-portal [class*="-card "],
  html.theme-active body.employee-portal [class$="-panel"],
  html.theme-active body.employee-portal [class*="-panel "],
  html.theme-active body.employee-portal [class$="-toolbar"],
  html.theme-active body.employee-portal [class*="-toolbar "],
  html.theme-active body.employee-portal [class$="-modal"],
  html.theme-active body.employee-portal [class*="-modal "],
  html.theme-active body.employee-portal [class$="-dialog"],
  html.theme-active body.employee-portal [class*="-dialog "],
  html.theme-active body.employee-portal .directory-stat,
  html.theme-active body.employee-portal .directory-panel,
  html.theme-active body.employee-portal .pipeline-stage-button:not(.is-active),
  html.theme-active body.employee-portal .pipeline-view-links,
  html.theme-active body.employee-portal .pipeline-summary-item,
  html.theme-active body.employee-portal .pipeline-column,
  html.theme-active body.employee-portal .contact-filter-buttons,
  html.theme-active body.employee-portal .team-access-member,
  html.theme-active body.employee-portal .list-group-item:not(.side-link) {
    color: #e8eef7;
    border-color: #2b3e54 !important;
    background-color: #0f1d2f !important;
  }

  html.theme-active body.employee-portal [class$="-card"]:hover,
  html.theme-active body.employee-portal [class*="-card "]:hover,
  html.theme-active body.employee-portal .directory-table tbody tr:hover,
  html.theme-active body.employee-portal .team-access-member:hover {
    background-color: #142a43 !important;
  }

  html.theme-active body.employee-portal :is(h1, h2, h3, h4, h5, h6, strong, label),
  html.theme-active body.employee-portal .contact-identity strong,
  html.theme-active body.employee-portal .pipeline-loan-card h3,
  html.theme-active body.employee-portal #pipeline-table tbody td:first-child strong {
    color: #f3f7fb;
  }

  html.theme-active body.employee-portal :is(small, .text-muted, .muted-value, .empty-state),
  html.theme-active body.employee-portal .directory-header p,
  html.theme-active body.employee-portal .pipeline-heading p,
  html.theme-active body.employee-portal .pipeline-table-meta {
    color: #aab7c8 !important;
  }

  /* CRM tabs and segmented controls */
  html.theme-active body.employee-portal .nav-tabs,
  html.theme-active body.employee-portal .nav-pills {
    border-color: #2b3e54;
  }

  html.theme-active body.employee-portal .nav-tabs .nav-link,
  html.theme-active body.employee-portal .nav-pills .nav-link,
  html.theme-active body.employee-portal .contact-filter-button,
  html.theme-active body.employee-portal .pipeline-view-links a {
    color: #b8c4d3 !important;
    border-color: transparent;
    background: transparent;
  }

  html.theme-active body.employee-portal .nav-tabs .nav-link:hover,
  html.theme-active body.employee-portal .nav-tabs .nav-link:focus,
  html.theme-active body.employee-portal .nav-pills .nav-link:hover,
  html.theme-active body.employee-portal .contact-filter-button:hover,
  html.theme-active body.employee-portal .pipeline-view-links a:hover {
    color: #ffffff !important;
    border-color: #3c5068;
    background: #18314d;
  }

  html.theme-active body.employee-portal .nav-tabs .nav-link.active,
  html.theme-active body.employee-portal .nav-pills .nav-link.active,
  html.theme-active body.employee-portal .contact-filter-button.is-active {
    color: #07111f !important;
    border-color: #e1c340;
    background: #e1c340;
  }

  /* Tables and DataTables pagination */
  html.theme-active body.employee-portal .table {
    --bs-table-bg: transparent;
    --bs-table-color: #dfe7f1;
    --bs-table-border-color: #2b3e54;
    --bs-table-hover-bg: #142a43;
    --bs-table-hover-color: #ffffff;
    color: #dfe7f1;
    border-color: #2b3e54;
  }

  html.theme-active body.employee-portal .table > :not(caption) > * > *,
  html.theme-active body.employee-portal .directory-table tbody td,
  html.theme-active body.employee-portal #pipeline-table tbody td {
    color: #dfe7f1 !important;
    border-color: #2b3e54 !important;
    background-color: transparent;
  }

  html.theme-active body.employee-portal .table thead th,
  html.theme-active body.employee-portal .directory-table thead th,
  html.theme-active body.employee-portal #pipeline-table thead th {
    color: #aab7c8 !important;
    border-color: #2b3e54 !important;
    background-color: #0a1727 !important;
  }

  html.theme-active body.employee-portal .page-link,
  html.theme-active body.employee-portal .dt-paging-button {
    color: #c8d3e0 !important;
    border-color: #2b3e54 !important;
    background-color: #0f1d2f !important;
  }

  html.theme-active body.employee-portal .page-item.active .page-link,
  html.theme-active body.employee-portal .dt-paging-button.current {
    color: #07111f !important;
    border-color: #e1c340 !important;
    background-color: #e1c340 !important;
  }

  /* Search, filter, and record detail surfaces */
  html.theme-active body.employee-portal :is(
    .directory-search,
    .directory-filter,
    .pipeline-search,
    .pipeline-filter,
    .pipeline-scope-label,
    .pipeline-mapping-note,
    .loan-card-details,
    .row-open,
    .contact-stage,
    .task-search,
    .task-global-search,
    .task-record-search-wrap
  ) {
    color: #c8d3e0;
    border-color: #2b3e54 !important;
    background: #101f32 !important;
  }

  html.theme-active body.employee-portal .modal-header,
  html.theme-active body.employee-portal .modal-footer,
  html.theme-active body.employee-portal .offcanvas-header {
    border-color: #2b3e54;
  }

  html.theme-active body.employee-portal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
  }

  /* Component-level polish for CRM views that use hard-coded light fills. */
  html.theme-active body.employee-portal .crm-primary-action,
  html.theme-active body.employee-portal .all-loans-search-button,
  html.theme-active body.employee-portal .task-board-switcher a.is-active,
  html.theme-active body.employee-portal .pipeline-stage-button.is-active {
    color: #07111f !important;
    border-color: #e1c340 !important;
    background: #e1c340 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
  }

  html.theme-active body.employee-portal .crm-primary-action:hover,
  html.theme-active body.employee-portal .crm-primary-action:focus,
  html.theme-active body.employee-portal .all-loans-search-button:hover,
  html.theme-active body.employee-portal .all-loans-search-button:focus,
  html.theme-active body.employee-portal .task-board-switcher a.is-active:hover,
  html.theme-active body.employee-portal .pipeline-stage-button.is-active:hover {
    color: #07111f !important;
    border-color: #f2d35c !important;
    background: #f2d35c !important;
  }

  html.theme-active body.employee-portal .crm-secondary-action,
  html.theme-active body.employee-portal .task-board-add,
  html.theme-active body.employee-portal .pipeline-clear {
    color: #dfe7f1 !important;
    border-color: #3c5068 !important;
    background: #101f32 !important;
  }

  html.theme-active body.employee-portal .crm-secondary-action:hover,
  html.theme-active body.employee-portal .crm-secondary-action:focus,
  html.theme-active body.employee-portal .task-board-add:hover,
  html.theme-active body.employee-portal .task-board-add:focus,
  html.theme-active body.employee-portal .pipeline-clear:hover,
  html.theme-active body.employee-portal .pipeline-clear:focus {
    color: #ffffff !important;
    border-color: #e1c340 !important;
    background: #18314d !important;
  }

  html.theme-active body.employee-portal .reports-filters,
  html.theme-active body.employee-portal .report-kpi,
  html.theme-active body.employee-portal .task-board-switcher,
  html.theme-active body.employee-portal .task-summary-item,
  html.theme-active body.employee-portal .board-welcome,
  html.theme-active body.employee-portal .groups-empty,
  html.theme-active body.employee-portal .groups-no-results,
  html.theme-active body.employee-portal .crm-chart-wrap,
  html.theme-active body.employee-portal .empty-state {
    color: #e8eef7 !important;
    border-color: #2b3e54 !important;
    background: #0f1d2f !important;
  }

  html.theme-active body.employee-portal .highlight-card {
    background: #0f1d2f !important;
  }

  html.theme-active body.employee-portal .board-welcome,
  html.theme-active body.employee-portal .groups-empty,
  html.theme-active body.employee-portal .groups-no-results {
    border-style: dashed;
    background: #0b1929 !important;
  }

  html.theme-active body.employee-portal .all-loans-search-input,
  html.theme-active body.employee-portal .all-loans-lock,
  html.theme-active body.employee-portal .pipeline-table-heading > span,
  html.theme-active body.employee-portal .report-card-heading > span:not(.report-count),
  html.theme-active body.employee-portal .report-count {
    color: #c8d3e0 !important;
    border-color: #2b3e54 !important;
    background: #101f32 !important;
  }

  html.theme-active body.employee-portal .quicklink-button {
    color: #f2d35c !important;
    border: 1px solid #2b3e54;
    background: #142a43 !important;
  }

  html.theme-active body.employee-portal .quicklink-button:hover,
  html.theme-active body.employee-portal .quicklink-button:focus {
    color: #07111f !important;
    border-color: #e1c340;
    background: #e1c340 !important;
  }

  html.theme-active body.employee-portal .pipeline-stage-button.is-active strong,
  html.theme-active body.employee-portal .pipeline-stage-button.is-active i,
  html.theme-active body.employee-portal .task-board-switcher a.is-active i {
    color: #07111f !important;
  }

  html.theme-active body.employee-portal .pipeline-stage-button.is-active i {
    background: rgba(7, 17, 31, 0.13) !important;
  }

  html.theme-active body.employee-portal :is(.crm-stat-icon, .stat-icon, .report-kpi-icon, .summary-icon, .board-welcome-icon, .groups-empty > span) {
    color: #f2d35c !important;
    background: #18314d !important;
  }

  html.theme-active body.employee-portal .pipeline-stage-button:not(.is-active) i {
    color: #c9d6e5 !important;
    background: #18314d !important;
  }

  html.theme-active body.employee-portal .report-kpi p,
  html.theme-active body.employee-portal .report-kpi small,
  html.theme-active body.employee-portal .reports-filters span,
  html.theme-active body.employee-portal .board-welcome p,
  html.theme-active body.employee-portal .groups-empty p,
  html.theme-active body.employee-portal .report-card-heading > div > p:last-child,
  html.theme-active body.employee-portal .report-empty,
  html.theme-active body.employee-portal .report-empty span {
    color: #aab7c8 !important;
  }

  /* File Boards controls stay dark instead of inheriting the light text token as a fill. */
  html.theme-active body.employee-portal .task-workspace :is(
    .task-primary-btn,
    .task-filter-button,
    .task-document-add .btn,
    .all-loan-add-form button:not(:disabled),
    .task-column-header button,
    .task-card-drag-handle,
    .task-favorite-toggle:not(.is-favorite),
    .task-complete-toggle:not(.is-complete),
    .task-menu,
    .task-add-inline,
    .add-column-tile,
    .task-item-edit,
    .task-item-email:not(:disabled),
    .task-bullet-action,
    .task-bullet-save,
    .task-selection-edit,
    .task-card-list-toggle
  ) {
    color: #dfe7f1 !important;
    border-color: #3c5068 !important;
    background: #101f32 !important;
    box-shadow: none !important;
  }

  html.theme-active body.employee-portal .task-workspace :is(
    .task-primary-btn,
    .task-filter-button,
    .task-document-add .btn,
    .all-loan-add-form button:not(:disabled),
    .task-column-header button,
    .task-card-drag-handle,
    .task-favorite-toggle:not(.is-favorite),
    .task-complete-toggle:not(.is-complete),
    .task-menu,
    .task-add-inline,
    .add-column-tile,
    .task-item-edit,
    .task-item-email:not(:disabled),
    .task-bullet-action,
    .task-bullet-save,
    .task-selection-edit,
    .task-card-list-toggle
  ):hover {
    color: #ffffff !important;
    border-color: #e1c340 !important;
    background: #18314d !important;
  }

  html.theme-active body.employee-portal .task-workspace :is(
    .task-document-remove,
    .task-bullet-remove
  ) {
    color: #ffabb7 !important;
    background: #351a24 !important;
  }

  html.theme-active body.employee-portal .task-workspace :is(
    .task-document-remove,
    .task-bullet-remove
  ):hover {
    color: #ffd5da !important;
    background: #522532 !important;
  }

  html.theme-active body.employee-portal .task-workspace .task-card-documents-heading small {
    color: #cbd6e3 !important;
    background: #18314d !important;
  }

  html.theme-active body.employee-portal .task-workspace .task-favorite-toggle.is-favorite {
    color: #f2d35c !important;
    background: #3b3215 !important;
  }

  html.theme-active body.employee-portal .task-workspace .task-favorite-toggle.is-favorite:hover {
    color: #ffe783 !important;
    background: #4b3e16 !important;
  }

  html.theme-active body.employee-portal .task-workspace .task-card-realtor-email {
    color: #c8d3e0 !important;
    border-color: #2b3e54 !important;
    background: #101f32 !important;
  }

  html.theme-active body.employee-portal .task-workspace .all-loan-add-form button:disabled {
    color: #77879a !important;
    background: #0b1726 !important;
  }

  /* CRM overview metrics are informational, so keep them still and highly legible. */
  html.theme-active body.employee-portal .crm-stat-value {
    color: #ffffff !important;
    text-shadow: 0 1px 14px rgba(255, 255, 255, 0.12);
  }

  html.theme-active body.employee-portal .crm-stat-label {
    color: #c8d3e0 !important;
  }

  html.theme-active body.employee-portal .crm-stat-description {
    color: #aab7c8 !important;
  }

  html.theme-active body.employee-portal :is(.crm-stat-card, .crm-overview-card):hover {
    border-color: rgba(197, 213, 232, 0.16) !important;
    background-color: #0f1d2f !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
    transform: none !important;
  }

  html.theme-active body.employee-portal .report-empty strong,
  html.theme-active body.employee-portal .report-legend strong,
  html.theme-active body.employee-portal .report-table-wrap td,
  html.theme-active body.employee-portal .report-table-wrap td strong {
    color: #dfe7f1 !important;
  }

  html.theme-active body.employee-portal .report-table-wrap :is(th, td) {
    border-color: #2b3e54 !important;
  }

  html.theme-active body.employee-portal .carousel-dark :is(.carousel-control-prev-icon, .carousel-control-next-icon) {
    filter: none;
  }

  html.theme-active body.employee-portal :is(.w-header, .w-footer) {
    color: #dfe7f1 !important;
    background: #142a43 !important;
  }

  html.theme-active body.employee-portal :is(.w-header, .w-footer) a {
    color: #f2d35c !important;
  }

  /* Keep secondary and utility buttons dark; reserve gold for primary actions. */
  html.theme-active body.employee-portal :is(
    .btn-secondary,
    .btn-outline-secondary,
    .btn-outline-light,
    .group-secondary-action,
    .board-settings-button,
    .board-leave-button,
    .task-board-scroll-tools button,
    .task-cancel-btn,
    .task-team-email-dialog > header button,
    .task-card-navigation button,
    .task-record-results button,
    .board-member-results button,
    .board-task-row > button,
    .ra-toggle,
    .ra-cancel,
    .ra-card-actions .ra-email-preview-button,
    .re-recipient-cancel,
    .re-lead-selector button,
    .ru-secondary-button,
    .ru-side-heading button,
    .ru-automation-link,
    .record-form-actions a,
    .google-email-status .google-email-signature-button,
    .re-email-card > .re-signature-button,
    .marketing-secondary-button
  ) {
    color: #dfe7f1 !important;
    border-color: #3c5068 !important;
    background: #101f32 !important;
  }

  html.theme-active body.employee-portal :is(
    .btn-secondary,
    .btn-outline-secondary,
    .btn-outline-light,
    .group-secondary-action,
    .board-settings-button,
    .board-leave-button,
    .task-board-scroll-tools button,
    .task-cancel-btn,
    .task-team-email-dialog > header button,
    .task-card-navigation button,
    .task-record-results button,
    .board-member-results button,
    .board-task-row > button,
    .ra-toggle,
    .ra-cancel,
    .ra-card-actions .ra-email-preview-button,
    .re-recipient-cancel,
    .re-lead-selector button,
    .ru-secondary-button,
    .ru-side-heading button,
    .ru-automation-link,
    .record-form-actions a,
    .google-email-status .google-email-signature-button,
    .re-email-card > .re-signature-button,
    .marketing-secondary-button
  ):hover {
    color: #ffffff !important;
    border-color: #e1c340 !important;
    background: #18314d !important;
  }

  html.theme-active body.employee-portal :is(
    .ra-hero > button,
    .ru-primary-button,
    .record-actions .record-primary,
    .google-email-signature-action,
    .marketing-hero-button-primary
  ) {
    color: #07111f !important;
    border-color: #e1c340 !important;
    background: #e1c340 !important;
  }

  html.theme-active body.employee-portal :is(
    .group-delete-action,
    .board-delete-button,
    .task-delete-btn,
    .ra-card-actions .ra-delete,
    .re-borrower-choice button:not(.is-add),
    .task-record-search-wrap button
  ) {
    color: #ffabb7 !important;
    border-color: #6d3440 !important;
    background: #351a24 !important;
  }

  /* Shared navigation */
  html.theme-active body.employee-portal .navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #091827 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  }

  html.theme-active body.employee-portal .navbar .nav-link,
  html.theme-active body.employee-portal .navbar .navbar-toggler {
    color: #f2d35c !important;
  }

  html.theme-active body.employee-portal .navbar .nav-link:hover,
  html.theme-active body.employee-portal .navbar .nav-link:focus {
    color: #ffffff !important;
  }

  html.theme-active body.employee-portal .navbar-toggler {
    border-color: rgba(242, 211, 92, 0.45);
  }

  html.theme-active body.employee-portal .dropdown-menu {
    color: #e8eef7;
    border-color: rgba(255, 255, 255, 0.12);
    background-color: #102238;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  }

  html.theme-active body.employee-portal .dropdown-item {
    color: #e8eef7 !important;
  }

  html.theme-active body.employee-portal .dropdown-item:hover,
  html.theme-active body.employee-portal .dropdown-item:focus {
    color: #f2d35c !important;
    background-color: #18314d;
  }

  /* Public page surfaces and Bootstrap components */
  html.theme-active body.employee-portal .loan-officers,
  html.theme-active body.employee-portal .loan-section,
  html.theme-active body.employee-portal .loan-card-container,
  html.theme-active body.employee-portal .contact_row,
  html.theme-active body.employee-portal .vision-section,
  html.theme-active body.employee-portal .faq-section,
  html.theme-active body.employee-portal .info-section,
  html.theme-active body.employee-portal .form-wrapper,
  html.theme-active body.employee-portal .container.py-5 {
    color: #e8eef7;
    background-color: #07111f;
  }

  html.theme-active body.employee-portal .card,
  html.theme-active body.employee-portal .accordion-item,
  html.theme-active body.employee-portal .accordion-button,
  html.theme-active body.employee-portal .accordion-body,
  html.theme-active body.employee-portal .modal-content,
  html.theme-active body.employee-portal .dashboard-card,
  html.theme-active body.employee-portal .quicklinks-panel,
  html.theme-active body.employee-portal .crm-nav-panel {
    color: #e8eef7;
    border-color: rgba(197, 213, 232, 0.16);
    background-color: #0f1d2f;
  }

  html.theme-active body.employee-portal .card,
  html.theme-active body.employee-portal .dashboard-card,
  html.theme-active body.employee-portal .quicklinks-panel,
  html.theme-active body.employee-portal .crm-nav-panel {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  }

  html.theme-active body.employee-portal .accordion-button:not(.collapsed) {
    color: #f2d35c;
    background-color: #142a43;
  }

  html.theme-active body.employee-portal .accordion-button::after {
    filter: invert(1) grayscale(1) brightness(1.8);
  }

  html.theme-active body.employee-portal .text-dark,
  html.theme-active body.employee-portal .textdark,
  html.theme-active body.employee-portal .card-title,
  html.theme-active body.employee-portal .quicklinks-title,
  html.theme-active body.employee-portal .crm-nav-brand {
    color: #e8eef7 !important;
  }

  html.theme-active body.employee-portal a.textdark,
  html.theme-active body.employee-portal .info-section a {
    color: #f2d35c !important;
  }

  html.theme-active body.employee-portal hr {
    color: #6f8095;
  }

  /* Form controls follow the same theme, including native browser widgets. */
  html.theme-active body.employee-portal input,
  html.theme-active body.employee-portal textarea,
  html.theme-active body.employee-portal select,
  html.theme-active body.employee-portal .form-control,
  html.theme-active body.employee-portal .form-select {
    color: #f3f7fb;
    border-color: #3c5068;
    background-color: #101f32;
  }

  html.theme-active body.employee-portal input:focus,
  html.theme-active body.employee-portal textarea:focus,
  html.theme-active body.employee-portal select:focus,
  html.theme-active body.employee-portal .form-control:focus,
  html.theme-active body.employee-portal .form-select:focus {
    color: #ffffff;
    border-color: #e1c340;
    background-color: #13263d;
    box-shadow: 0 0 0 0.25rem rgba(225, 195, 64, 0.2);
  }

  html.theme-active body.employee-portal input::placeholder,
  html.theme-active body.employee-portal textarea::placeholder {
    color: #93a2b5;
    opacity: 1;
  }

  html.theme-active body.employee-portal .form-text {
    color: #aab7c8;
  }

  /* Replace hard-coded light section colors used in the existing templates. */
  html.theme-active body.employee-portal [style*="background-color: #ededed"],
  html.theme-active body.employee-portal [style*="background-color:#ededed"],
  html.theme-active body.employee-portal [style*="background-color: #FFFFFF"],
  html.theme-active body.employee-portal [style*="background-color:#FFFFFF"] {
    color: #e8eef7 !important;
    background-color: #0b1929 !important;
  }

  html.theme-active body.employee-portal [style*="background-color: #033679"],
  html.theme-active body.employee-portal [style*="background-color:#033679"] {
    background-color: #0b223b !important;
  }

  html.theme-active body.employee-portal [style*="background-color: #E1C340"],
  html.theme-active body.employee-portal [style*="background-color:#E1C340"] {
    color: #ffffff !important;
    background-color: #685817 !important;
  }

  html.theme-active body.employee-portal [style*="color: #033679"],
  html.theme-active body.employee-portal [style*="color:#033679"] {
    color: #f2d35c !important;
  }

  html.theme-active body.employee-portal [style*="color: #E1C340"],
  html.theme-active body.employee-portal [style*="color:#E1C340"] {
    color: #f2d35c !important;
  }

  html.theme-active body.employee-portal [style*="border-color: #033679"],
  html.theme-active body.employee-portal [style*="border-color:#033679"] {
    border-color: #f2d35c !important;
  }

  /* Keep decorative page dividers continuous with their dark sections. */
  html.theme-active body.employee-portal .custom-shape-divider-bottom-1688961969 .shape-fill,
  html.theme-active body.employee-portal .custom-shape-divider-bottom-1690666724 .shape-fill,
  html.theme-active body.employee-portal .custom-shape-divider-bottom-1691986537 .shape-fill,
  html.theme-active body.employee-portal .custom-shape-divider-top-1690308395 .shape-fill,
  html.theme-active body.employee-portal .custom-shape-divider-top-1691270462 .shape-fill {
    fill: #07111f;
  }

  html.theme-active body.employee-portal .custom-shape-divider-bottom-1689058663 .shape-fill,
  html.theme-active body.employee-portal .custom-shape-divider-top-1689900923 .shape-fill,
  html.theme-active body.employee-portal .custom-shape-divider-top-1690258330 .shape-fill {
    fill: #0b223b;
  }

  /* Branded actions stay prominent against dark surfaces. */
  html.theme-active body.employee-portal .btn-light {
    color: #07111f;
    border-color: #f2d35c;
    background-color: #f2d35c;
  }

  html.theme-active body.employee-portal .btn-light:hover,
  html.theme-active body.employee-portal .btn-light:focus {
    color: #07111f;
    border-color: #ffffff;
    background-color: #ffffff;
  }

  html.theme-active body.employee-portal .btn-dark {
    color: #f2d35c;
    border-color: #f2d35c;
    background-color: #102238;
  }

  html.theme-active body.employee-portal footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #050d18 !important;
  }

  html.theme-active body.employee-portal footer .btn-link,
  html.theme-active body.employee-portal .footer-link {
    color: #e8eef7;
  }

  html.theme-active body.employee-portal footer .btn-link:hover,
  html.theme-active body.employee-portal .footer-link:hover {
    color: #f2d35c;
  }

  html.theme-active body.employee-portal footer img[alt="Equal Housing Opportunity"] {
    filter: brightness(0) invert(1);
  }

  html.theme-active body.employee-portal .site-message {
    color: #e8eef7;
    border-color: rgba(197, 213, 232, 0.16);
    background: rgba(15, 29, 47, 0.98);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  }

  html.theme-active body.employee-portal .site-message-close {
    color: #aab7c8;
  }

  html.theme-active body.employee-portal .site-message-close:hover {
    color: #ffffff;
    background: #18314d;
  }

  @media (max-width: 575.98px) {
    html.theme-active body.employee-portal .all-loans-heading {
      align-items: stretch;
      flex-direction: column;
    }

    html.theme-active body.employee-portal .task-title-row {
      flex-wrap: wrap;
    }

    html.theme-active body.employee-portal .all-loans-controls {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
    }

    html.theme-active body.employee-portal :is(.all-loans-officer-filter, .all-loans-search) {
      width: 100%;
      min-width: 0;
    }

    html.theme-active body.employee-portal .all-loans-search-button {
      width: 100%;
    }
  }