/*
 * DOFT LoadBot Web — final Driver + Shipper dark-mode remediation.
 * 2026-07-27. Keep this file LAST, after every page stylesheet and the two
 * 2026-07-25 hotfix layers. It intentionally contains only presentation fixes.
 * No dimensions/data/handlers are changed except the waypoint type control,
 * whose legacy negative margin allowed it to overlap the address field.
 */

/* ==========================================================================
   1. Interaction states: no pink/red/green/white glow or detached halo.
   A visible focus state remains via a quiet border/color change.
   ========================================================================== */
html[data-refresh] :is(
  button,
  .btn,
  .btn-doft,
  .btn-doft-2,
  .btn-green,
  .btn-light,
  .btn-default,
  .btn-secondary,
  .dropdown-toggle,
  .aic-quick-btn,
  .aic-modal-close
):is(:focus, .focus, :active, .active, :active:focus) {
  box-shadow: none !important;
  outline: 0 !important;
}
html[data-refresh] :is(
  button,
  .btn,
  .btn-doft,
  .btn-doft-2,
  .btn-green,
  .btn-light,
  .btn-default,
  .btn-secondary,
  .dropdown-toggle,
  .aic-quick-btn,
  .aic-modal-close
):hover {
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(
  button,
  .btn,
  .btn-doft-2,
  .btn-light,
  .btn-default,
  .btn-secondary,
  .dropdown-toggle
):focus-visible {
  border-color: var(--line-strong) !important;
}
html[data-refresh] :is(
  input.form-control,
  textarea.form-control,
  select.form-control,
  .bootstrap-select > .dropdown-toggle,
  .bootstrap-tagsinput,
  .select2-selection,
  .multiselect-native-select
):is(:focus, :focus-within) {
  box-shadow: none !important;
  outline: 0 !important;
}
html[data-theme="dark"][data-refresh] :is(
  input.form-control,
  textarea.form-control,
  select.form-control,
  .bootstrap-select > .dropdown-toggle,
  .bootstrap-tagsinput,
  .select2-selection
):is(:focus, :focus-within) {
  border-color: var(--line-strong) !important;
}
/* Same specificity as the 2026-07-25 scoped focus rule, but later in
   cascade: explicitly remove its 2px red glow from all affected form zones. */
html[data-theme="dark"][data-refresh] :is(
  .tbl-filter,
  .search-filter,
  .ctrl-block,
  .waypoint,
  .price,
  .add-card-block,
  .chat-app-form,
  .filter-block,
  .filters-block
) :is(
  input.form-control,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  textarea.form-control,
  select.form-control,
  .bootstrap-select > .dropdown-toggle
):focus {
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* ==========================================================================
   2. Brand, outlined and neutral buttons. Legacy style.css forces white onto
   .btn-doft-2 at focus and adds an active red glow; both are neutralized here.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(.btn-doft-2, a.btn-doft-2),
html[data-theme="dark"][data-refresh] :is(.btn-doft-2, a.btn-doft-2):focus {
  color: var(--text-link) !important;
  background: var(--surface-alt) !important;
  border-color: var(--red-600) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.btn-doft-2, a.btn-doft-2):is(:hover, :active, .active) {
  color: var(--text-ondark) !important;
  background: var(--red-600) !important;
  border-color: var(--red-600) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.btn-light, .btn-default, .btn-secondary, .btn-outline-secondary) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.btn-light, .btn-default, .btn-secondary, .btn-outline-secondary):is(:hover, :focus, :active, .active) {
  color: var(--text) !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-refresh] :is(.btn-doft, .btn-doft-2, .btn-green):active {
  box-shadow: none !important;
}

/* ==========================================================================
   3. Pagination and "SHOW 50 MORE": use semantic text, never light-only ink.
   ========================================================================== */
html[data-refresh] :is(.show-more, #showMore, .load-more, #moreBtn) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-refresh] :is(.show-more, #showMore, .load-more, #moreBtn):is(:hover, :focus, :active) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.dataTables_paginate .paginate_button, .pagination .page-link) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.dataTables_paginate .paginate_button, .pagination .page-link):hover {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
}

/* ==========================================================================
   4. Form controls across Driver/Shipper. No bright white fields, inset shine,
   double borders, browser autofill flash or invisible placeholder text.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(
  input.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select,
  .form-control,
  .bootstrap-select > .dropdown-toggle,
  .multiselect-native-select > .btn,
  .input-group-text,
  .input-group-addon,
  .btn-st,
  .pin-select
) {
  color: var(--text) !important;
  background-color: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(
  input.form-control,
  textarea.form-control,
  select.form-control,
  .bootstrap-select > .dropdown-toggle
):disabled,
html[data-theme="dark"][data-refresh] :is(input, textarea, select)[readonly],
html[data-theme="dark"][data-refresh] .form-control.disabled {
  color: var(--text-muted) !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] :is(input, textarea)::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
html[data-theme="dark"][data-refresh] select option {
  color: var(--text) !important;
  background: var(--surface) !important;
}
html[data-theme="dark"][data-refresh] input:-webkit-autofill,
html[data-theme="dark"][data-refresh] input:-webkit-autofill:hover,
html[data-theme="dark"][data-refresh] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-alt) inset !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.input-group-prepend, .input-group-append) > :is(.btn, .input-group-text, .input-group-addon) {
  color: var(--text-body) !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   5. Open menus, option rows, popovers, date/time pickers and typeahead.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(
  .dropdown-menu,
  .bootstrap-select .dropdown-menu,
  .bootstrap-select .dropdown-menu.inner,
  .multiselect-container.dropdown-menu,
  .typeahead.dropdown-menu,
  .ui-autocomplete,
  .tt-menu,
  .select2-dropdown,
  .popover,
  .daterangepicker,
  .datetimepicker,
  .bootstrap-datetimepicker-widget,
  .timepicker-picker
) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(
  .dropdown-menu,
  .bootstrap-select .dropdown-menu,
  .multiselect-container.dropdown-menu,
  .ui-autocomplete,
  .select2-dropdown,
  .popover
) {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42) !important;
}
html[data-theme="dark"][data-refresh] :is(
  .dropdown-menu,
  .bootstrap-select .dropdown-menu,
  .multiselect-container,
  .typeahead,
  .ui-autocomplete,
  .select2-results
) :is(a, li, label, span.text, .dropdown-item, .ui-menu-item-wrapper, .select2-results__option) {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] :is(
  .dropdown-menu,
  .bootstrap-select .dropdown-menu,
  .multiselect-container,
  .typeahead,
  .ui-autocomplete,
  .select2-results
) :is(a:hover, a:focus, li.active > a, .active, .selected, .ui-state-active, .select2-results__option--highlighted) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] :is(.popover-header, .popover-title) {
  color: var(--text) !important;
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.popover-body, .popover-content, .tooltip-inner) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
}
html[data-theme="dark"][data-refresh] :is(.daterangepicker, .datetimepicker, .bootstrap-datetimepicker-widget) :is(td, th, .calendar-table) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.daterangepicker, .datetimepicker, .bootstrap-datetimepicker-widget) :is(td.available:hover, td.day:hover, span:hover) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}

/* ==========================================================================
   6. Settings, cards, panels, billing and notification accordion surfaces.
   ========================================================================== */
/* NOTE: .content-body is page SCAFFOLD (transparent in light) — painting it
   produced the mismatched gray slabs behind settings/driver/shipper pages
   (owner screenshot 2026-07-27). Only true cards/panels get a surface. */
html[data-theme="dark"][data-refresh] :is(
  .card,
  .card-body,
  .card-header,
  .panel,
  .panel-body,
  .panel-heading,
  .clear-panel,
  .settings-block,
  .settings-section,
  .border-section,
  .payments-block .p-method,
  .subscription-block,
  .pricing_plan,
  .pricing-bottom-wrap,
  .well,
  .jumbotron
) {
  color: var(--text-body) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.card-header, .panel-heading, .modal-header, .modal-footer) {
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .nav.nav-tabs.nav-underline {
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] .nav.nav-tabs.nav-underline .nav-item a.nav-link {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent transparent var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .nav.nav-tabs.nav-underline .nav-item a.nav-link:hover {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-bottom-color: var(--line-strong) !important;
}
html[data-theme="dark"][data-refresh] .nav.nav-tabs.nav-underline .nav-item a.nav-link.active {
  color: var(--text) !important;
  background: var(--red-50) !important;
  border-bottom-color: var(--red-600) !important;
}
html[data-theme="dark"][data-refresh] .payments-block .p-method :is(.def, .expire) {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] .payments-block .p-method :is(.card-num, i) {
  color: var(--text) !important;
}

/* ==========================================================================
   7. Tables: eliminate white grid lines and low-contrast values everywhere.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(table, .table, .dataTable) {
  color: var(--text-body) !important;
  background: transparent !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(table, .table, .dataTable) :is(th, td) {
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(table, .table, .dataTable) thead :is(th, td) {
  color: var(--text-muted) !important;
  background: var(--surface-sunken) !important;
}
html[data-theme="dark"][data-refresh] :is(.table-striped, .dataTable) tbody tr:nth-of-type(odd) :is(th, td),
html[data-theme="dark"][data-refresh] .dataTable tbody tr.odd :is(th, td) {
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] :is(.table-hover, .dataTable) tbody tr:hover :is(th, td) {
  background: var(--surface-sunken) !important;
}
html[data-theme="dark"][data-refresh] :is(.dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_empty) {
  color: var(--text-muted) !important;
}

/* Shipper CSV format/help page has a self-contained Material table sheet that
   repeatedly hard-codes white, including every mobile cell. */
html[data-theme="dark"][data-refresh] :is(.f-table, .table-responsive-vertical) :is(.table, .table .table, tbody, tr, td, th) {
  color: var(--text-body) !important;
  background-color: transparent !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.f-table, .table-responsive-vertical) thead :is(th, td) {
  color: var(--text) !important;
  background: var(--surface-sunken) !important;
}
html[data-theme="dark"][data-refresh] :is(.f-table, .table-responsive-vertical) tbody tr:nth-child(odd) :is(th, td) {
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] :is(.f-table, .table-responsive-vertical) tbody tr:nth-child(even) :is(th, td) {
  background: var(--surface) !important;
}
html[data-theme="dark"][data-refresh] :is(.bs-callout, .bs-callout-success) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--success) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .emph {
  color: var(--text) !important;
  background: var(--surface-sunken) !important;
  border: 1px solid var(--line) !important;
}
/* Shared payment-method dialog carries independent hard-coded grays. */
html[data-theme="dark"][data-refresh] :is(#pm_wrapper, .payment-methods) {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] .payment-methods :is(.change-pm, .nav-link, .pm-item) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .payment-methods :is(.nav-link.active, .show > .nav-link, .change-pm:hover) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
}
html[data-theme="dark"][data-refresh] .payment-methods :is(.left-col-lbl, .expire, .pm-def, .not-verified, .processing) {
  color: var(--text-muted) !important;
  border-color: var(--line) !important;
}

/* ==========================================================================
   8. Edit/Post Truck Description tags: one border only, no white inner field,
   readable note text and dark chips.
   ========================================================================== */
html[data-refresh] #tags-zone {
  min-height: 42px;
  height: auto !important;
}
html[data-theme="dark"][data-refresh] #tags-zone,
html[data-theme="dark"][data-refresh] #tags-zone .bootstrap-tagsinput {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] #tags-zone .bootstrap-tagsinput {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}
html[data-theme="dark"][data-refresh] #tags-zone .bootstrap-tagsinput input,
html[data-theme="dark"][data-refresh] #tags-zone #descTag {
  min-width: 160px;
  color: var(--text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html[data-theme="dark"][data-refresh] :is(.tagging .tag, .bootstrap-tagsinput .tag) {
  color: var(--text-body) !important;
  background: var(--surface-sunken) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .bootstrap-tagsinput .tag [data-role="remove"] {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .bootstrap-tagsinput .tag [data-role="remove"]:hover {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] :is(.label-desc, .help-block, .form-text, .parsley-errors-list, .field-description) {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   9. Waypoint Pick Up/Drop Off geometry. Reserve independent width for text +
   chevron, remove the old -7px collision and prevent overlap with address.
   ========================================================================== */
html[data-refresh] .waypoint .bootstrap-select.wp-type {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  margin: 0 0 8px 0 !important;
  float: none !important;
  clear: both !important;
}
html[data-refresh] .waypoint .bootstrap-select.wp-type > .dropdown-toggle {
  padding-right: 30px !important;
  box-shadow: none !important;
}
html[data-refresh] .waypoint .bootstrap-select.wp-type > .dropdown-toggle::after {
  right: 10px !important;
  margin: 0 !important;
}
html[data-refresh] .waypoint select.wp-type:not(.selectpicker) {
  width: 112px !important;
  max-width: 112px !important;
  margin: 0 0 8px 0 !important;
}
html[data-refresh] .waypoint [id$="lpTypeBlock"] {
  /* display is OWNED by the page JS (.show()/.hide() on first/last waypoints) —
     forcing block here un-hid the control where it must stay hidden. */
  width: 100% !important;
  min-height: 38px !important;
  overflow: visible !important;
}

/* ==========================================================================
   10. Checkbox/radio/switch visibility without white tiles or glow.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--red-600);
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.icheckbox_square-red, .iradio_square-red, .checkbox2 label::before, .custom-control-label::before) {
  /* unchecked border/fill stay with the 2026-07-25 round2 layer (#697381 on
     sunken — ~3.5:1); overriding them here dropped contrast to ~1.5:1. */
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.icheckbox_square-red.checked, .iradio_square-red.checked, .custom-control-input:checked ~ .custom-control-label::before) {
  background-color: var(--red-600) !important;
  border-color: var(--red-600) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] :is(.icheckbox_square-red.disabled, .iradio_square-red.disabled, .custom-control-input:disabled ~ .custom-control-label::before) {
  background-color: var(--surface-sunken) !important;
  border-color: var(--line) !important;
  opacity: .65 !important;
}

/* ==========================================================================
   11. Text contrast and common legacy separators. Keep semantic/status colors.
   ========================================================================== */
html[data-theme="dark"][data-refresh] :is(
  .text-muted,
  .light-gray,
  .label-desc,
  .help-block,
  .form-text,
  .small-note,
  .sub-desc,
  .item-desc,
  .card-subtitle,
  .empty-text,
  .dt-empty,
  .dt-error
) {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] :is(
  label,
  legend,
  .control-label,
  .form-section,
  .card-title,
  .panel-title,
  .modal-title,
  .item-ttl,
  .dt-empty .title,
  .dt-error .title,
  #resultBlock .res-table td:not(#rateInf):not(#totalInf)
) {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] :is(hr, .dropdown-divider, .list-group-item, .border, .border-top, .border-bottom) {
  border-color: var(--line) !important;
}
html[data-theme="dark"][data-refresh] :is(.list-group, .list-group-item, blockquote, .alert:not(.alert-success):not(.alert-warning):not(.alert-danger):not(.alert-info)) {
  color: var(--text-body) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   12. AI Calls Settings: final guard against page/order-specific legacy rules.
   ========================================================================== */
html[data-theme="dark"][data-refresh] .aicalls-page :is(.aic-card, .aic-table-wrap, .aic-modal, .aic-modal-head, .aic-modal-body) {
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"][data-refresh] .aicalls-page :is(.aic-hero-title, .aic-card-title, .aic-balance-amount, .aic-empty-title, .aic-modal-head b) {
  color: var(--text) !important;
}
html[data-theme="dark"][data-refresh] .aicalls-page :is(.aic-hero-sub, .aic-empty-sub, .aic-card, .aic-table td, .aic-custom-label) {
  color: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] .aicalls-page :is(.aic-card-note, .aic-balance-label, .aic-empty-icon, .aic-min-note, .aic-loading-row td, .aic-empty-cell) {
  color: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] .aicalls-page :is(.aic-quick-btn, .aic-custom-input) {
  color: var(--text) !important;
  background: var(--surface-alt) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   12. AI Calls surfaces built AFTER the 2026-07-27 audit base (sync top-up
   popup ai-topup.js, single/bulk call dialogs + queued rows in ai-call.js,
   marketing comparison table). Those styles now use semantic tokens with
   light fallbacks; the custom tints below are their DARK values only —
   light mode keeps the literal fallbacks and renders unchanged.
   ========================================================================== */
html[data-theme="dark"] {
  --aic-ai-col-bg: rgba(30, 132, 73, .14);      /* compare-table AI column */
  --aic-green: #4ec98b;                          /* success text on dark   */
  --aic-success-bg: rgba(30, 132, 73, .15);
  --aic-success-line: rgba(30, 132, 73, .45);
  --aic-success-fg: #7ddba3;
  --aic-chip-info-bg: rgba(36, 113, 163, .25);   /* Queued chip            */
  --aic-chip-info-fg: #85bce2;
  --aic-chip-mute-bg: rgba(139, 146, 156, .18);  /* Skipped chip           */
  --aic-chip-mute-fg: #9aa3ad;
  --aic-danger: #ff6a4d;                         /* error text on dark     */
  --aic-warning-bg: rgba(255, 147, 32, .14);     /* payment_required banner */
  --aic-topup-active-fg: #ff6a4d;                /* active quick-amount amt */
}

/* Compare-table "AI Calls" header must keep its green emphasis + column tint
   in dark — the theme-wide thead rules (refresh.css W6.1 + section 7 above)
   would otherwise mute it to gray and visually detach the highlighted column
   from its header. Specificity (0,4,3) beats both. */
html[data-theme="dark"][data-refresh] .aic-compare thead th.aic-compare-ai {
  color: var(--aic-green) !important;
  background: var(--aic-ai-col-bg) !important;
}

/* Bulk-select toolbar is a dark pill (#1d2b36 inline) — give it an edge on the
   dark canvas so it doesn't dissolve into the page. */
html[data-theme="dark"][data-refresh] #aiCallToolbar {
  border: 1px solid var(--line-strong);
}

/* Failed-payment status chip: the neutralizing .st:not(.paid):not(.green) rule
   above must not erase its red signal. */
html[data-theme="dark"][data-refresh] .st.failed {
  background: var(--red-50) !important;
  color: var(--text-link) !important;
  border-color: rgba(255, 69, 36, .45) !important;
}

/* ==========================================================================
   13. HERE map widgets in dark (owner screenshots 2026-07-27, round 2):
   the zoom/layers buttons showed as blank dark squares (their SVG glyphs ship
   with a fixed dark fill) and the pickup/drop-off InfoBubbles were dark slabs
   with invisible text (.map-content inherits the page color; the bubble body
   is painted --surface by the 2026-07-25 round2 layer).
   ========================================================================== */
html[data-theme="dark"][data-refresh] .H_ui .H_icon {
  fill: var(--text-body) !important;
}
html[data-theme="dark"][data-refresh] .H_ui .H_btn:hover .H_icon,
html[data-theme="dark"][data-refresh] .H_ui .H_active .H_icon {
  fill: var(--text) !important;
}
html[data-theme="dark"][data-refresh] .H_ui .H_disabled .H_icon {
  fill: var(--text-muted) !important;
}
html[data-theme="dark"][data-refresh] .H_ib_body,
html[data-theme="dark"][data-refresh] .H_ib_body .map-content {
  color: var(--text) !important;
}
/* scale bar text/line */
html[data-theme="dark"][data-refresh] .H_ui .H_scalebar {
  color: var(--text-body) !important;
}

/* Map loading flash: until the night tiles paint, the map container showed a
   bright light panel inside the dark load card (owner screenshot 2026-07-27).
   Give every HERE container a sunken dark backdrop for the loading state —
   tiles fully cover it once they arrive. Scoped to dark; light unchanged. */
html[data-theme="dark"][data-refresh] .iload .map,
html[data-theme="dark"][data-refresh] .iload .map > div,
html[data-theme="dark"][data-refresh] .map-wrp,
html[data-theme="dark"][data-refresh] [id^="map_"],
html[data-theme="dark"][data-refresh] [id^="map_"] canvas {
  background: var(--surface-sunken) !important;
}

/* ==========================================================================
   14. Round-3 owner screenshots (2026-07-27 late evening).
   ========================================================================== */
/* 14.1 Viewed loads: swap the shades — a VIEWED row is the lighter muted gray,
   a fresh row stays on the darker surface (refresh.css's light-only gray-100
   resolved near-black in dark, inverting the light-mode semantics). Desktop
   table only, mirroring the original rule's scope. */
@media (min-width: 992px) {
  html[data-theme="dark"] body #dTable .t-body :is(.b-load, .b-truck).viewed {
    background: var(--surface-alt) !important;
    color: var(--text-muted) !important;
  }
  html[data-theme="dark"] body #dTable .t-body :is(.b-load, .b-truck).viewed :is(.c, .c-addr) {
    color: var(--text-muted) !important;
  }
  html[data-theme="dark"] body #dTable .t-body :is(.b-load, .b-truck).viewed:hover {
    background: var(--line) !important;
  }
}
/* 14.2 Table band corners: round2 rounds #dTable at 8px but the .t-head band
   paints a square --surface-sunken fill over the corner. Round the band itself
   (8px outer − 1px border = 7px). No overflow clip on #dTable — the .t-head is
   position:sticky (refresh.css) and an overflow container would kill it. */
html[data-theme="dark"] :is(#dTable, .recent-tbl) .t-head {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
/* 14.3 No-active-jobs light frame: loads.css gives .tbl-progress a 3-sided
   `1px #eee` border (top omitted) — a bright inner rectangle in dark. The
   grid container already has its own border, so drop it entirely. */
html[data-theme="dark"] :is(#progrBlock, .tbl-progress) {
  border: 0 !important;
}
/* 14.4 Stripe card element WRAPPER: style.css hardcodes white + inset shadow;
   round2 covered only .add-card-block — premium/withdraw dialogs use the bare
   .StripeElement. (Iframe TEXT is already theme-aware via stripeElementStyle.) */
html[data-theme="dark"] .StripeElement {
  background-color: var(--surface-alt) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .StripeElement--focus {
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}
/* 14.5 Withdraw dialog: destination/default-method box was a white block. */
html[data-theme="dark"] :is(.change-pm, .pm-info) {
  background: var(--surface-alt) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] :is(.change-pm, .pm-info) a {
  color: var(--text-link) !important;
}
/* 14.6 Info callouts: the withdraw-dialog payout-limits list is
   `.debit-card-desc` (#f6f6f6 + blue left accent); generic bs-callouts share
   the same white-fill problem. Darken the fill, keep the colored left accent. */
html[data-theme="dark"] :is(.debit-card-desc, [class*="bs-callout"]) {
  background: var(--surface-alt) !important;
  color: var(--text-body) !important;
  border-top-color: var(--line) !important;
  border-right-color: var(--line) !important;
  border-bottom-color: var(--line) !important;
}
/* 14.7 jconfirm dialog content ("Have you booked the load?"): the template's
   inner spans carried light-only grays — force inheritance from the body tone,
   headings/links keep their roles. */
html[data-theme="dark"] .jconfirm .jconfirm-content {
  color: var(--text-body) !important;
}
html[data-theme="dark"] .jconfirm .jconfirm-content :is(div, span, p, li, td, th, label, small) {
  color: inherit !important;
}
html[data-theme="dark"] .jconfirm .jconfirm-content :is(b, strong, h1, h2, h3, h4) {
  color: var(--text) !important;
}
html[data-theme="dark"] .jconfirm .jconfirm-content a {
  color: var(--text-link) !important;
}
/* 14.8 Address autocomplete (Rate Forecast / Fuel Cost origin): the container
   went dark in the 07-25 layer but item INNER spans kept their light-only
   ink — city names were invisible. */
html[data-theme="dark"] :is(.ac-container, .pac-container, .ui-autocomplete) :is(li, div, span, b, strong) {
  color: var(--text-body) !important;
}
html[data-theme="dark"] :is(.ac-container, .pac-container, .ui-autocomplete) :is(li:hover, .ac-item.active, .ui-state-active) :is(div, span, b, strong) {
  color: var(--text) !important;
}