/* ==========================================================================
   Dark surfaces for shared admin chrome
   Loaded after View_model_style.css. Light mode is untouched.
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;
  --bs-body-color: #f5f5f5;
  --bs-body-color-rgb: 245, 245, 245;
  --bs-body-bg: #1a1a1a;
  --bs-body-bg-rgb: 26, 26, 26;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(245, 245, 245, 0.75);
  --bs-secondary-bg: #2d2d2d;
  --bs-tertiary-color: rgba(245, 245, 245, 0.55);
  --bs-tertiary-bg: #252525;
  --bs-border-color: #404040;
  --bs-heading-color: #f5f5f5;
  --bs-link-color: #8bb9fe;
  --bs-link-hover-color: #b7d4ff;
  --bs-success-text-emphasis: #75d9a8;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ff8b98;
  --bs-primary-text-emphasis: #8bb9fe;
  --bs-success-bg-subtle: #0d2b1c;
  --bs-info-bg-subtle: #062f38;
  --bs-warning-bg-subtle: #3a2d05;
  --bs-danger-bg-subtle: #3a1218;
  --bs-primary-bg-subtle: #10284a;
  --bs-secondary-bg-subtle: #2a2a2a;
  --bs-table-bg: #1e1e1e;
  --bs-table-color: #f5f5f5;
  --bs-table-border-color: #3a3a3a;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.045);
  --bs-table-striped-color: #f5f5f5;
  --bs-table-hover-bg: rgba(90, 157, 245, 0.16);
  --bs-table-hover-color: #ffffff;
  --bs-table-accent-bg: transparent;
}

/* Panels, cards, table chrome */
html[data-theme="dark"] .x_panel,
html[data-theme="dark"] .x_content,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card-box,
html[data-theme="dark"] .dataTables_wrapper {
  background-color: #252525 !important;
  color: #f5f5f5 !important;
  border-color: #404040 !important;
}

html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_length label,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dataTables_filter label,
html[data-theme="dark"] .dt-info,
html[data-theme="dark"] .dt-length,
html[data-theme="dark"] .dt-length label,
html[data-theme="dark"] .dt-search,
html[data-theme="dark"] .dt-search label {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .dataTables_processing,
html[data-theme="dark"] .dt-processing {
  background: rgba(30, 30, 30, 0.94) !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] #datatable-responsive_wrapper .dt-sticky-footer {
  background-color: #252525 !important;
  border-top-color: #404040 !important;
  color: #f5f5f5 !important;
}

/* Tables */
html[data-theme="dark"] table.table,
html[data-theme="dark"] table.dataTable {
  --bs-table-bg: #1e1e1e;
  --bs-table-color: #f5f5f5;
  --bs-table-border-color: #3a3a3a;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.045);
  --bs-table-striped-color: #f5f5f5;
  --bs-table-hover-bg: rgba(90, 157, 245, 0.16);
  --bs-table-hover-color: #ffffff;
  --bs-table-accent-bg: transparent;
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: #3a3a3a !important;
}

html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] table.dataTable > :not(caption) > * > * {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: #3a3a3a !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr:nth-of-type(odd) > * {
  background-color: #262626 !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] table.dataTable.hover > tbody > tr:hover > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr:hover > * {
  background-color: #243044 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] .custom-thead th,
html[data-theme="dark"] .dataTables_scrollHead th,
html[data-theme="dark"] .dt-scroll-head th {
  background-color: #1b2a4a !important;
  color: #ffffff !important;
  border-color: #2c4068 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .table-striped > tbody > tr.table-success > *,
html[data-theme="dark"] .table-hover > tbody > tr.table-success:hover > *,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.table-success > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr.table-success > *,
html[data-theme="dark"] .table > tbody > tr > .table-success {
  background-color: var(--bs-success-bg-subtle) !important;
  color: var(--bs-success-text-emphasis) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr.table-warning > *,
html[data-theme="dark"] .table-hover > tbody > tr.table-warning:hover > *,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.table-warning > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr.table-warning > *,
html[data-theme="dark"] .table > tbody > tr > .table-warning {
  background-color: var(--bs-warning-bg-subtle) !important;
  color: var(--bs-warning-text-emphasis) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr.table-danger > *,
html[data-theme="dark"] .table-hover > tbody > tr.table-danger:hover > *,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.table-danger > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr.table-danger > *,
html[data-theme="dark"] .table > tbody > tr > .table-danger {
  background-color: var(--bs-danger-bg-subtle) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr.table-info > *,
html[data-theme="dark"] .table-hover > tbody > tr.table-info:hover > *,
html[data-theme="dark"] table.dataTable.stripe > tbody > tr.table-info > *,
html[data-theme="dark"] table.dataTable.display > tbody > tr.table-info > *,
html[data-theme="dark"] .table > tbody > tr > .table-info {
  background-color: var(--bs-info-bg-subtle) !important;
  color: var(--bs-info-text-emphasis) !important;
}

/* Inputs and selects */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] .dt-search input,
html[data-theme="dark"] .dt-length select,
html[data-theme="dark"] input[name="search_box"],
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] body input[name="search_box"],
html[data-theme="dark"] body[data-theme="dark"] input[name="search_box"],
html[data-theme="dark"] #dt-search-1,
html[data-theme="dark"] input#dt-search-1 {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: #4a4a4a !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input[name="search_box"]:focus,
html[data-theme="dark"] #dateRange:hover,
html[data-theme="dark"] #dateRange:focus {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: #5a9df5 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #9a9a9a !important;
  opacity: 1;
}

html[data-theme="dark"] .form-check-input {
  background-color: #1e1e1e;
  border-color: #8a8a8a;
}

html[data-theme="dark"] .form-check-input:checked {
  background-color: #4582ec;
  border-color: #4582ec;
}

html[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
html[data-theme="dark"] .bootstrap-select .dropdown-toggle,
html[data-theme="dark"] .bootstrap-select .dropdown-menu,
html[data-theme="dark"] .bootstrap-select .dropdown-menu .inner,
html[data-theme="dark"] .bootstrap-select .dropdown-item,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a,
html[data-theme="dark"] .bootstrap-select .bs-searchbox .form-control {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: #4a4a4a !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected a,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.active a,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
html[data-theme="dark"] .bootstrap-select .dropdown-item.active,
html[data-theme="dark"] .bootstrap-select .dropdown-item:hover {
  background-color: #243044 !important;
  color: #ffffff !important;
}

/* Menus */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dt-button-collection,
html[data-theme="dark"] .dropdown-menu.dt-button-collection {
  background-color: #2a2a2a !important;
  color: #f5f5f5 !important;
  border-color: #404040 !important;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dt-button-collection .dt-button,
html[data-theme="dark"] .buttons-columnVisibility {
  color: #f5f5f5 !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dt-button-collection .dt-button:hover,
html[data-theme="dark"] .buttons-columnVisibility:hover {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
}

/* Pagination */
html[data-theme="dark"] .dataTables_paginate .paginate_button,
html[data-theme="dark"] .dt-paging .dt-paging-button,
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .page-item .page-link {
  background-color: #2a2a2a !important;
  color: #f5f5f5 !important;
  border-color: #4a4a4a !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_paginate .paginate_button:hover,
html[data-theme="dark"] .dt-paging .dt-paging-button.current,
html[data-theme="dark"] .dt-paging .dt-paging-button:hover,
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .page-link:hover {
  background-color: #4582ec !important;
  color: #ffffff !important;
  border-color: #4582ec !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .page-item.disabled .page-link {
  background-color: #2a2a2a !important;
  color: #8a8a8a !important;
  border-color: #3a3a3a !important;
}

/* Status chips stay readable on dark cells */
html[data-theme="dark"] .btn span,
html[data-theme="dark"] .btn i,
html[data-theme="dark"] .btn div,
html[data-theme="dark"] .badge span,
html[data-theme="dark"] .badge i {
  color: inherit !important;
}

html[data-theme="dark"] .btn-light {
  background-color: #3a3a3a !important;
  color: #f5f5f5 !important;
  border-color: #666666 !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary span,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-success span,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-danger span,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-info span {
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-warning span {
  background-color: #ffc107 !important;
  color: #1a1a1a !important;
  border-color: #ffc107 !important;
}

html[data-theme="dark"] .text-success,
html[data-theme="dark"] i.text-success {
  color: #3dd68c !important;
}

html[data-theme="dark"] .text-danger,
html[data-theme="dark"] i.text-danger {
  color: #ff6b7a !important;
}

html[data-theme="dark"] .text-warning,
html[data-theme="dark"] i.text-warning {
  color: #ffc857 !important;
}

html[data-theme="dark"] .text-info,
html[data-theme="dark"] i.text-info {
  color: #5ed4f4 !important;
}

html[data-theme="dark"] .text-primary,
html[data-theme="dark"] i.text-primary {
  color: #8bb9fe !important;
}

html[data-theme="dark"] .badge {
  color: #ffffff !important;
}

html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.text-bg-warning,
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light {
  color: #1a1a1a !important;
}

/* Modals */
html[data-theme="dark"] .modal-content {
  background-color: #252525 !important;
  color: #f5f5f5 !important;
  border-color: #404040 !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background-color: #252525 !important;
  color: #f5f5f5 !important;
  border-color: #404040 !important;
}

html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-title {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .modal-body {
  background-color: #1e1e1e !important;
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.5);
}

html[data-theme="dark"] .nav-tabs {
  border-bottom-color: #404040 !important;
}

html[data-theme="dark"] .nav-tabs .nav-link {
  color: #d0d0d0 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-color: #404040 #404040 #1e1e1e !important;
}

html[data-theme="dark"] #TripMainModal #tmmTabNav,
html[data-theme="dark"] #tripControlModal #tripControlTabs,
html[data-theme="dark"] .tmm-tab2-header,
html[data-theme="dark"] .tmm-trip-summary-card {
  background: #252525 !important;
  color: #f5f5f5 !important;
  border-color: #404040 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #TripMainModal .form-label,
html[data-theme="dark"] #tripControlModal .form-label {
  background-color: transparent !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] #TripMainModal .form-control,
html[data-theme="dark"] #TripMainModal .form-select,
html[data-theme="dark"] #tripControlModal .form-control,
html[data-theme="dark"] #tripControlModal .form-select {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: #4a4a4a !important;
}

/* Trip management tab strip only */
html[data-theme="dark"] .collapser .btn-group .btn {
  background-color: #1e3a5f !important;
  color: #f5f5f5 !important;
  border-color: #2d4f7c !important;
}

html[data-theme="dark"] .collapser .btn-group .btn:hover,
html[data-theme="dark"] .collapser .btn-group .btn:focus,
html[data-theme="dark"] .collapser .btn-group .btn[aria-expanded="true"] {
  background-color: #4582ec !important;
  color: #ffffff !important;
  border-color: #4582ec !important;
}

/* Filter inputs: beat the older white-background overrides */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input[name="search_box"].form-control,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input[name="search_box"].form-control-sm,
html[data-theme="dark"] .dataTables_wrapper .dt-search input[name="search_box"].form-control,
html[data-theme="dark"] .dataTables_wrapper .dt-search input[name="search_box"].form-control-sm,
html[data-theme="dark"] body .dataTables_wrapper .dataTables_filter input[name="search_box"].form-control-sm,
html[data-theme="dark"] .Tripid-search input[name="search_box"],
html[data-theme="dark"] .Drivers_name-search input[name="search_box"],
html[data-theme="dark"] .Cars_name-search input[name="search_box"],
html[data-theme="dark"] .Spot_name-search input[name="search_box"],
html[data-theme="dark"] .from_time-search input[name="search_box"],
html[data-theme="dark"] .to_time-search input[name="search_box"] {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
  color: #f5f5f5 !important;
  border: 1px solid #4a4a4a !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input[name="search_box"]::placeholder,
html[data-theme="dark"] .dataTables_wrapper .dt-search input[name="search_box"]::placeholder {
  color: #b0b0b0 !important;
  opacity: 1;
}

/* Toolbar buttons are <a class="btn btn-secondary">, not button.dt-button.
   A light gradient was hiding the white icons. */
html[data-theme="dark"] .dt-buttons > .btn,
html[data-theme="dark"] .dt-buttons > a,
html[data-theme="dark"] .dt-buttons > button {
  --bs-btn-color: #f5f5f5;
  --bs-btn-bg: #243044;
  --bs-btn-border-color: #4d6a92;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #1e3a5f;
  --bs-btn-hover-border-color: #7db3f8;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #1e3a5f;
  --bs-btn-active-border-color: #7db3f8;
  background: #243044 !important;
  background-image: none !important;
  color: #f5f5f5 !important;
  border: 1px solid #4d6a92 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-width: 36px;
  min-height: 32px;
}

html[data-theme="dark"] .dt-buttons > .btn:hover,
html[data-theme="dark"] .dt-buttons > a:hover,
html[data-theme="dark"] .dt-buttons > button:hover,
html[data-theme="dark"] .dt-buttons > .btn:focus,
html[data-theme="dark"] .dt-buttons > a:focus,
html[data-theme="dark"] .dt-buttons > button:focus {
  background: #1e3a5f !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #7db3f8 !important;
}

html[data-theme="dark"] .dt-buttons > .btn i,
html[data-theme="dark"] .dt-buttons > a i,
html[data-theme="dark"] .dt-buttons > button i,
html[data-theme="dark"] .dt-buttons > .btn span,
html[data-theme="dark"] .dt-buttons > a span,
html[data-theme="dark"] .dt-buttons > button span {
  color: #f5f5f5 !important;
  opacity: 1 !important;
}

/* Header */
html[data-theme="dark"] .app-attendance-status,
html[data-theme="dark"] .app-attendance-status:hover,
html[data-theme="dark"] .app-attendance-manager,
html[data-theme="dark"] .app-attendance-manager:hover {
  background-color: #2a2a2a !important;
  border: 1px solid #4a4a4a;
}

html[data-theme="dark"] .app-topnav .app-notifications > .app-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #2a2a2a !important;
  border: 1px solid #4a4a4a;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .app-topnav .app-notifications > .app-dropdown-toggle i {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .app-system-alerts-toggle {
  background-color: rgba(255, 200, 87, 0.16) !important;
  border: 1px solid rgba(255, 200, 87, 0.45);
  color: #ffc857 !important;
}

html[data-theme="dark"] .app-system-alerts-toggle i {
  color: #ffc857 !important;
}

html[data-theme="dark"] .app-search-wrapper,
html[data-theme="dark"] #section-search-input,
html[data-theme="dark"] #section-search-input.app-search-input,
html[data-theme="dark"] input.app-search-input,
html[data-theme="dark"] .app-search-input:focus,
html[data-theme="dark"] #section-search-input.app-search-input:focus {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: #4a4a4a !important;
}

html[data-theme="dark"] .app-search-input::placeholder,
html[data-theme="dark"] #section-search-input::placeholder {
  color: #b0b0b0 !important;
  opacity: 1;
}

/* Filter pills: white chip + forced light label text was unreadable */
html[data-theme="dark"] .salary-radio-label {
  background: #2a2a2a !important;
  background-image: none !important;
  color: #f5f5f5 !important;
  border: 1px solid #5a5a5a !important;
}

html[data-theme="dark"] .salary-radio-label:hover {
  background: #333333 !important;
  color: #ffffff !important;
  border-color: #7db3f8 !important;
}

html[data-theme="dark"] .salary-radio-btn:checked + .salary-radio-label {
  background: #1e4f9a !important;
  color: #ffffff !important;
  border-color: #7db3f8 !important;
}

html[data-theme="dark"] .salary-radio-btn:disabled + .salary-radio-label {
  opacity: 0.45;
}

/* Next DataGrid follows the shell theme. The grid bundle sets light tokens on
   .next-datagrid; this selector is more specific, so it wins without a rebuild. */
html[data-theme="dark"] .next-datagrid {
  color-scheme: dark;
  --ndg-surface: #1e1e1e;
  --ndg-surface-muted: #252525;
  --ndg-surface-sunken: #2a2a2a;
  --ndg-border: #3a3a3a;
  --ndg-border-strong: #4a4a4a;
  --ndg-text: #f5f5f5;
  --ndg-text-muted: #b0b0b0;
  --ndg-text-inverse: #ffffff;
  --ndg-primary: #7db3f8;
  --ndg-primary-strong: #a9ccfb;
  --ndg-primary-soft: #1e3a5f;
  --ndg-danger: #f87171;
  --ndg-danger-soft: #3a1f24;
  --ndg-success: #4ade80;
  --ndg-success-soft: #14321f;
  --ndg-warning: #fbbf24;
  --ndg-header-bg: linear-gradient(180deg, #1b2a4a 0%, #16233d 100%);
  --ndg-header-text: #ffffff;
  --ndg-header-border: #2c4068;
  --ndg-footer-bg: #1a1a1a;
  --ndg-row-bg: #1e1e1e;
  --ndg-row-bg-alt: #262626;
  --ndg-row-hover: #243044;
  --ndg-row-selected: #1e3a5f;
  --ndg-row-border: #333333;
  --ndg-grid-line: rgba(148, 163, 184, 0.16);
  --ndg-grid-line-header: rgba(125, 179, 248, 0.28);
  --ndg-chip-value-bg: rgba(255, 255, 255, 0.08);
  --ndg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ndg-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ndg-focus-ring: 0 0 0 3px rgba(125, 179, 248, 0.28);
}

html[data-theme="dark"] .trv2-badge-success { background: #14321f !important; color: #86efac !important; }
html[data-theme="dark"] .trv2-badge-warning { background: #3a2e0a !important; color: #fde68a !important; }
html[data-theme="dark"] .trv2-badge-danger { background: #3a1f24 !important; color: #fecaca !important; }
html[data-theme="dark"] .trv2-badge-info { background: #172554 !important; color: #bfdbfe !important; }
html[data-theme="dark"] .trv2-badge-primary { background: #1e1b4b !important; color: #c7d2fe !important; }
html[data-theme="dark"] .trv2-badge-muted,
html[data-theme="dark"] .trv2-badge-cancelled { background: #2a2a2a !important; color: #e5e5e5 !important; }
html[data-theme="dark"] .trv2-badge-extinguished { background: #3b1024 !important; color: #fbcfe8 !important; }

/* Payment request cards: the header gradient is inline and stays light. */
html[data-theme="dark"] .request-card > .card > .card-header {
  background: #2a2a2a !important;
  background-image: none !important;
  color: #f5f5f5 !important;
  border-bottom: 1px solid #404040 !important;
}

html[data-theme="dark"] .request-card--exceptional > .card > .card-header {
  background: linear-gradient(135deg, #3a2a12 0%, #2a1e0c 100%) !important;
  color: #ffe8c2 !important;
  border-bottom: 2px solid #fb8c00 !important;
}

html[data-theme="dark"] .request-card .card-header h6,
html[data-theme="dark"] .request-card .card-header .fw-bold {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .request-card--exceptional .card-header h6,
html[data-theme="dark"] .request-card--exceptional .card-header .fw-bold {
  color: #ffe8c2 !important;
}

html[data-theme="dark"] .request-card .card-header .badge.bg-light,
html[data-theme="dark"] .request-card .card-header .badge.bg-white {
  background-color: #3a3a3a !important;
  color: #f0f0f0 !important;
  border-color: #5c5c5c !important;
}

html[data-theme="dark"] .trv2-summary .trv2-card {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
  box-shadow: none;
}

html[data-theme="dark"] .trv2-summary .trv2-card-label,
html[data-theme="dark"] .trv2-summary .trv2-card-suffix {
  color: #b0b0b0 !important;
}

html[data-theme="dark"] .trv2-summary .trv2-card-value {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .trv2-summary .trv2-card-icon {
  background: var(--trv2-card-icon-bg) !important;
  color: var(--trv2-card-icon-color) !important;
}

html[data-theme="dark"] .trv2-summary .trv2-card-icon i {
  color: var(--trv2-card-icon-color) !important;
}

html[data-theme="dark"] .trv2-card.tone-unpaid {
  --trv2-card-icon-bg: #3a2e0a;
  --trv2-card-icon-color: #fbbf24;
}

html[data-theme="dark"] .trv2-card.tone-paid {
  --trv2-card-icon-bg: #14321f;
  --trv2-card-icon-color: #4ade80;
}

html[data-theme="dark"] .trv2-card.tone-info {
  --trv2-card-icon-bg: #172554;
  --trv2-card-icon-color: #93c5fd;
}

html[data-theme="dark"] .trv2-card.tone-primary {
  --trv2-card-icon-bg: #1e1b4b;
  --trv2-card-icon-color: #a5b4fc;
}

html[data-theme="dark"] .trv2-card.tone-neutral {
  --trv2-card-icon-bg: #2a2a2a;
  --trv2-card-icon-color: #cbd5e1;
}

html[data-theme="dark"] .trv2-card.tone-danger {
  --trv2-card-icon-bg: #3a1f24;
  --trv2-card-icon-color: #fca5a5;
}