/* Final application theme contract.
   Keep this block last so Light/Dark preferences win over older module styles. */
:root,
body[data-theme="light"],
body:not([data-theme]),
body[data-theme="auto"] {
  --app-bg: #f5f7fa;
  --bg: var(--app-bg);
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --panel-3: #eef3f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --line: #dce4ee;
  --line-strong: #c8d3df;
  --text: #172233;
  --ink: #0f1f32;
  --muted: #607084;
  --muted-2: #8b98a8;
  --table-head: #f3f5f8;
  --table-row: #ffffff;
  --table-row-alt: #fbfcfe;
  --table-hover: color-mix(in srgb, var(--accent) 7%, #ffffff);
  --input-bg: #ffffff;
  --input-bg-hover: #ffffff;
  --input-border: #c7d3e3;
  --input-border-strong: #93a4ba;
  --input-label: #34445a;
  --input-placeholder: #8a99ad;
  --input-focus: var(--accent);
  --disabled-bg: #e8eef4;
  --disabled-text: #6f7e91;
  --overlay: rgba(15, 23, 42, .48);
  --shadow: 0 18px 44px rgba(15, 23, 42, .12);
  --brand: var(--accent);
  --brand-dark: var(--accent-strong);
  --danger: #d5483f;
  --success: #19a56b;
  --warning: #c8861d;
  --info: #2683c6;
  color-scheme: light;
}

body[data-theme="dark"],
body[data-theme="dark-auto"] {
  --app-bg: #0f1723;
  --bg: var(--app-bg);
  --panel: #151f2f;
  --panel-2: #1b2738;
  --panel-3: #223148;
  --surface: #151f2f;
  --surface-raised: #1a2638;
  --line: #2e3d52;
  --line-strong: #41546e;
  --text: #e6edf5;
  --ink: #f8fbff;
  --muted: #a7b4c3;
  --muted-2: #7e8ea2;
  --table-head: #1b2636;
  --table-row: #141e2d;
  --table-row-alt: #172333;
  --table-hover: color-mix(in srgb, var(--accent) 18%, var(--table-row));
  --input-bg: #101a29;
  --input-bg-hover: #142033;
  --input-border: #3a4a62;
  --input-border-strong: #5a6f8d;
  --input-label: #c3cedd;
  --input-placeholder: #74849a;
  --input-focus: var(--accent);
  --disabled-bg: #253245;
  --disabled-text: #9ba9ba;
  --overlay: rgba(3, 7, 18, .62);
  --shadow: 0 22px 58px rgba(0, 0, 0, .36);
  color-scheme: dark;
}



body[data-accent="emerald"],
body:not([data-accent]) {
  --accent: #0f8a62;
  --accent-strong: #08734f;
  --accent-soft: #e8f7f0;
  --accent-contrast: #ffffff;
  --green: var(--accent);
  --green-2: var(--accent-soft);
  --blue: var(--accent);
}

/* Mint - light green */
body[data-accent="mint"] {
  --accent: #52BC79;
  --accent-strong: #459E66;
  --accent-soft: #EAF8EF;
  --accent-contrast: #ffffff;
  --green: var(--accent);
  --green-2: var(--accent-soft);
  --blue: var(--accent);
}

body[data-accent="teal"] {
  --accent: #07858f;
  --accent-strong: #056c75;
  --accent-soft: #e6f7f8;
  --accent-contrast: #ffffff;
  --green: var(--accent);
  --green-2: var(--accent-soft);
  --blue: var(--accent);
}

body[data-accent="blue"] {
  --accent: #2563b8;
  --accent-strong: #1d4f93;
  --accent-soft: #e9f1fb;
  --accent-contrast: #ffffff;
  --green: var(--accent);
  --green-2: var(--accent-soft);
  --blue: var(--accent);
}

body[data-accent="slate"] {
  --accent: #46576b;
  --accent-strong: #334155;
  --accent-soft: #edf1f6;
  --accent-contrast: #ffffff;
  --green: var(--accent);
  --green-2: var(--accent-soft);
  --blue: var(--accent);
}

body[data-theme="dark"][data-accent="emerald"],
body[data-theme="dark-auto"][data-accent="emerald"] {
  --accent-soft: rgba(15, 138, 98, .22);
}

body[data-theme="dark"][data-accent="teal"],
body[data-theme="dark-auto"][data-accent="teal"] {
  --accent-soft: rgba(7, 133, 143, .24);
}

/* Mint in dark mode */
body[data-theme="dark"][data-accent="mint"],
body[data-theme="dark-auto"][data-accent="mint"] {
  --accent-soft: rgba(82, 188, 121, .24);
}

body[data-theme="dark"][data-accent="blue"],
body[data-theme="dark-auto"][data-accent="blue"] {
  --accent-soft: rgba(37, 99, 184, .26);
}

body[data-theme="dark"][data-accent="slate"],
body[data-theme="dark-auto"][data-accent="slate"] {
  --accent-soft: rgba(100, 116, 139, .26);
}

body[data-sidebar="midnight"] {
  --sidebar-bg: #101827;
  --sidebar-text: #f8fafc;
  --sidebar-muted: #a7b1c2;
  --sidebar-active: color-mix(in srgb, var(--accent) 22%, #101827);
}

body[data-sidebar="graphite"] {
  --sidebar-bg: #171d27;
  --sidebar-text: #f8fafc;
  --sidebar-muted: #b8c2ce;
  --sidebar-active: color-mix(in srgb, var(--accent) 22%, #171d27);
}

body[data-sidebar="light"] {
  --sidebar-bg: var(--panel);
  --sidebar-text: var(--ink);
  --sidebar-muted: var(--muted);
  --sidebar-active: var(--accent-soft);
}

body[data-theme="dark"][data-sidebar="light"],
body[data-theme="dark-auto"][data-sidebar="light"] {
  --sidebar-bg: #111b2a;
  --sidebar-text: var(--ink);
  --sidebar-muted: var(--muted);
  --sidebar-active: var(--accent-soft);
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.workspace,
.board,
.pagebar,
.settings-users-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.app-header {
  background: var(--panel) !important;
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}

.brand strong,
.sidebar-toggle,
.user-name,
.user-avatar {
  color: var(--ink) !important;
}

.brand-copy > span {
  color: var(--muted) !important;
}

.sidebar {
  background: var(--sidebar-bg) !important;
  border-right-color: var(--line) !important;
  color: var(--sidebar-text) !important;
}

.nav-item,
.nav-item b,
.subnav button {
  color: var(--sidebar-text) !important;
}

.nav-item small,
.nav-caret {
  color: var(--sidebar-muted) !important;
}

.nav-item.active,
.nav-item[aria-current="page"],
.subnav button.active,
.side-nav .active {
  background: var(--sidebar-active) !important;
  color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.nav-item:hover,
.subnav button:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--sidebar-bg)) !important;
  color: var(--sidebar-text) !important;
}

.pagebar {
  background: var(--bg) !important;
  border-bottom-color: var(--line) !important;
}

.pagebar h1,
.print-sheet h1,
.print-sheet h2,
.print-sheet h3,
.settings-users-header h2,
.settings-users-section-head h3 {
  color: var(--ink) !important;
}

.pagebar p,
.print-sheet p,
.muted,
.hint-block,
.audit-row,
.settings-eyebrow {
  color: var(--muted) !important;
}

.metric-card,
.dashboard-panel,
.settings-shell,
.settings-users-section,
.print-sheet,
.report-preview-shell,
.doc-panel,
.table-wrap,
.modal form,
.drawer article,
.drawer form,
.company-logo-preview,
.system-preview,
.hint-block,
.preview-card,
.user-menu-panel,
.dropdown-menu,
.action-menu,
.native-searchable-menu {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.settings-users-section-head,
.tabs-row,
.modal header,
.drawer header,
.modal footer,
.drawer footer,
.user-menu-panel button,
.native-searchable-toggle,
.preview-surface,
.input-affix-mark {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

input,
select,
textarea,
.native-searchable-input,
.search input,
.search-box input,
.top-search input,
.inline-search input,
.filter-control,
.input-affix input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  caret-color: var(--accent) !important;
}

input::placeholder,
textarea::placeholder,
.native-searchable-input::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1;
}

/* A selected combobox value is content, not placeholder text. */
#modalForm .settlement-editor .native-searchable-select.has-value .native-searchable-input {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  opacity: 1 !important;
}

#modalForm .settlement-editor .native-searchable-select:not(.has-value) .native-searchable-input {
  color: var(--input-placeholder) !important;
  -webkit-text-fill-color: var(--input-placeholder) !important;
}

input:focus,
select:focus,
textarea:focus,
.native-searchable-input:focus {
  border-color: var(--accent) !important;
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

input:disabled,
select:disabled,
textarea:disabled,
.is-disabled,
[aria-disabled="true"] {
  background-color: var(--disabled-bg) !important;
  color: var(--disabled-text) !important;
  border-color: var(--line-strong) !important;
  opacity: 1 !important;
}

label,
label.field,
label[data-ui-field],
.field label,
.field > span {
  color: var(--input-label) !important;
}

table,
.table-wrap table {
  background: var(--panel) !important;
  color: var(--text) !important;
}

th,
.table-wrap th {
  background: var(--table-head) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

td,
.table-wrap td {
  background: var(--table-row) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

tbody tr:nth-child(even) td {
  background: var(--table-row-alt) !important;
}

tbody tr:hover td,
tbody tr:hover,
.table-wrap table.has-actions-column tbody tr:hover td:last-child,
.table-wrap table tbody tr:hover td.actions,
.table-wrap table tbody tr:hover td.row-actions {
  background: var(--table-hover) !important;
}

.primary,
button.primary,
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

.primary:hover,
button.primary:hover,
.btn-primary:hover {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
}

/* All pencil/edit actions follow the same configurable accent as primary buttons. */
.icon-action.edit {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
  background: var(--panel) !important;
  color: var(--accent) !important;
}

.icon-action.edit svg {
  color: var(--accent) !important;
  fill: currentColor !important;
  stroke: none !important;
}

.icon-action.edit:hover,
.icon-action.edit:focus-visible {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}

.icon-action.edit:hover svg,
.icon-action.edit:focus-visible svg {
  color: var(--accent-strong) !important;
}

/* Page data tables use the original filled primary-color edit action. */
.board .table-wrap td.actions .icon-action.edit,
.board .table-wrap td.row-actions .icon-action.edit,
.board td.actions .icon-action.edit,
.board td.row-actions .icon-action.edit {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--accent) !important;
  border-radius: 4px;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

.board .table-wrap td.actions .icon-action.edit svg,
.board .table-wrap td.row-actions .icon-action.edit svg,
.board td.actions .icon-action.edit svg,
.board td.row-actions .icon-action.edit svg {
  color: var(--accent-contrast) !important;
  fill: currentColor !important;
}

.board .table-wrap td.actions .icon-action.edit:hover,
.board .table-wrap td.actions .icon-action.edit:focus-visible,
.board .table-wrap td.row-actions .icon-action.edit:hover,
.board .table-wrap td.row-actions .icon-action.edit:focus-visible,
.board td.actions .icon-action.edit:hover,
.board td.actions .icon-action.edit:focus-visible,
.board td.row-actions .icon-action.edit:hover,
.board td.row-actions .icon-action.edit:focus-visible {
  border-color: var(--accent-strong) !important;
  background: var(--accent-strong) !important;
  color: var(--accent-contrast) !important;
}

.settlement-hos-edit,
.settlement-title-edit-button,
.scheduled-edit-mark,
.driver-doc-table .icon-link:not(.danger) {
  color: var(--accent) !important;
}

.settlement-hos-edit:hover,
.settlement-hos-edit:focus-visible,
.settlement-title-edit-button:hover,
.settlement-title-edit-button:focus-visible,
.driver-doc-table .icon-link:not(.danger):hover,
.driver-doc-table .icon-link:not(.danger):focus-visible {
  color: var(--accent-strong) !important;
}

.secondary,
.ghost,
button.secondary,
button.ghost {
  background: var(--panel) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

.secondary:hover,
.ghost:hover,
button.secondary:hover,
button.ghost:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.danger,
button.danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

.chip,
.badge,
.status-pill {
  background: var(--panel-3) !important;
  color: var(--text) !important;
}

.chip.delivered,
.chip.paid,
.chip.approved,
.chip.active,
.chip.hired,
.chip.complete,
.chip.resolved {
  background: color-mix(in srgb, var(--success) 17%, var(--panel)) !important;
  color: color-mix(in srgb, var(--success) 82%, var(--ink)) !important;
}

.chip.dispatched,
.chip.in-transit,
.chip.ready,
.chip.scheduled,
.chip.applicant,
.chip.expiring-soon,
.chip.medium,
.chip.review,
.chip.open {
  background: color-mix(in srgb, var(--warning) 18%, var(--panel)) !important;
  color: color-mix(in srgb, var(--warning) 78%, var(--ink)) !important;
}

.chip.canceled,
.chip.overdue,
.chip.hold,
.chip.expired,
.chip.missing,
.chip.high,
.chip.critical {
  background: color-mix(in srgb, var(--danger) 17%, var(--panel)) !important;
  color: color-mix(in srgb, var(--danger) 82%, var(--ink)) !important;
}

.tabs-row button,
.tab,
.driver-tab-body {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.tabs-row button.active,
.tab.active {
  background: var(--panel) !important;
  border-top-color: var(--accent) !important;
  color: var(--accent) !important;
}

.pagination,
.pager,
.table-footer {
  background: var(--bg) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

.pagination button,
.pager button,
.page-size button {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.pagination button.active,
.pager button.active,
.page-size button.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

.modal,
.drawer {
  background: var(--overlay) !important;
}

.login-card {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.login-card h1,
.login-card input {
  color: var(--ink) !important;
}

.login-footnote {
  border-top-color: var(--line) !important;
  color: var(--muted) !important;
}

.system-preview {
  background: var(--panel-2) !important;
}

.preview-sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
}

.preview-sidebar span {
  color: var(--sidebar-muted) !important;
}

body[data-theme="dark"] .dispatch-toolbar,
body[data-theme="dark-auto"] .dispatch-toolbar,
body[data-theme="dark"] .ez-dispatch-board .dispatch-toolbar,
body[data-theme="dark-auto"] .ez-dispatch-board .dispatch-toolbar,
body[data-theme="dark"] .ez-dispatch-board .dispatch-control,
body[data-theme="dark-auto"] .ez-dispatch-board .dispatch-control,
body[data-theme="dark"] .dispatch-toolbar .native-searchable-input,
body[data-theme="dark-auto"] .dispatch-toolbar .native-searchable-input,
body[data-theme="dark"] .ez-dispatch-board .dispatch-toolbar .native-searchable-input,
body[data-theme="dark-auto"] .ez-dispatch-board .dispatch-toolbar .native-searchable-input,
body[data-theme="dark"] .dispatch-toolbar .native-searchable-toggle,
body[data-theme="dark-auto"] .dispatch-toolbar .native-searchable-toggle,
body[data-theme="dark"] .ez-dispatch-board .dispatch-status-pills > button:not(.dispatch-export),
body[data-theme="dark-auto"] .ez-dispatch-board .dispatch-status-pills > button:not(.dispatch-export) {
  background: var(--panel) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .ez-dispatch-board .dispatch-toolbar strong,
body[data-theme="dark-auto"] .ez-dispatch-board .dispatch-toolbar strong,
body[data-theme="dark"] .ez-dispatch-board .dispatch-control-label,
body[data-theme="dark-auto"] .ez-dispatch-board .dispatch-control-label,
body[data-theme="dark"] .dispatch-toolbar .native-searchable-menu button,
body[data-theme="dark-auto"] .dispatch-toolbar .native-searchable-menu button {
  color: var(--text) !important;
}

body[data-theme="dark"] .dispatch-toolbar .native-searchable-menu,
body[data-theme="dark-auto"] .dispatch-toolbar .native-searchable-menu,
body[data-theme="dark"] .native-searchable-menu,
body[data-theme="dark-auto"] .native-searchable-menu,
body[data-theme="dark"] .load-inline-combobox-menu,
body[data-theme="dark-auto"] .load-inline-combobox-menu {
  background: var(--surface-raised) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-lg) !important;
  scrollbar-color: var(--line-strong) var(--panel-2) !important;
}

body[data-theme="dark"] .native-searchable-menu button,
body[data-theme="dark-auto"] .native-searchable-menu button,
body[data-theme="dark"] .load-inline-combobox-menu button,
body[data-theme="dark-auto"] .load-inline-combobox-menu button {
  background: var(--surface-raised) !important;
  border-bottom-color: var(--line) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .native-searchable-menu button:hover,
body[data-theme="dark"] .native-searchable-menu button:focus,
body[data-theme="dark-auto"] .native-searchable-menu button:hover,
body[data-theme="dark-auto"] .native-searchable-menu button:focus,
body[data-theme="dark"] .load-inline-combobox-menu button:hover,
body[data-theme="dark"] .load-inline-combobox-menu button:focus,
body[data-theme="dark-auto"] .load-inline-combobox-menu button:hover,
body[data-theme="dark-auto"] .load-inline-combobox-menu button:focus {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

body[data-theme="dark"] :where(.modal, .drawer, .board, .settings-shell, .load-review-shell) input[type="checkbox"],
body[data-theme="dark"] :where(.modal, .drawer, .board, .settings-shell, .load-review-shell) input[type="radio"],
body[data-theme="dark-auto"] :where(.modal, .drawer, .board, .settings-shell, .load-review-shell) input[type="checkbox"],
body[data-theme="dark-auto"] :where(.modal, .drawer, .board, .settings-shell, .load-review-shell) input[type="radio"] {
  background: var(--input-bg) !important;
  border-color: var(--line-strong) !important;
}

body[data-theme="dark"] .loads-pagebar-meter,
body[data-theme="dark-auto"] .loads-pagebar-meter,
body[data-theme="dark"] .load-review-shell,
body[data-theme="dark-auto"] .load-review-shell,
body[data-theme="dark"] .load-section,
body[data-theme="dark-auto"] .load-section,
body[data-theme="dark"] .load-panel,
body[data-theme="dark-auto"] .load-panel,
body[data-theme="dark"] .load-route-card,
body[data-theme="dark-auto"] .load-route-card,
body[data-theme="dark"] .load-stop-card,
body[data-theme="dark-auto"] .load-stop-card,
body[data-theme="dark"] .load-create-menu,
body[data-theme="dark-auto"] .load-create-menu {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .load-create-menu small,
body[data-theme="dark-auto"] .load-create-menu small,
body[data-theme="dark"] .load-section small,
body[data-theme="dark-auto"] .load-section small {
  color: var(--muted) !important;
}

body[data-theme="dark"] .report-viewer,
body[data-theme="dark-auto"] .report-viewer,
body[data-theme="dark"] .report-filters,
body[data-theme="dark-auto"] .report-filters,
body[data-theme="dark"] .report-controls,
body[data-theme="dark-auto"] .report-controls,
body[data-theme="dark"] .report-detail-modal,
body[data-theme="dark-auto"] .report-detail-modal {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .toast,
body[data-theme="dark-auto"] .toast {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}

body[data-theme="dark"] .toast-close,
body[data-theme="dark-auto"] .toast-close {
  color: var(--text) !important;
}

select option {
  background: var(--panel) !important;
  color: var(--text) !important;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: light;
}

body[data-theme="dark"] input[type="date"],
body[data-theme="dark"] input[type="time"],
body[data-theme="dark"] input[type="datetime-local"],
body[data-theme="dark"] input[type="month"],
body[data-theme="dark"] input[type="week"],
body[data-theme="dark-auto"] input[type="date"],
body[data-theme="dark-auto"] input[type="time"],
body[data-theme="dark-auto"] input[type="datetime-local"],
body[data-theme="dark-auto"] input[type="month"],
body[data-theme="dark-auto"] input[type="week"] {
  color-scheme: dark;
}

* {
  scrollbar-color: var(--line-strong) var(--panel-2);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--panel-2);
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--panel-2);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
}

/* Theme-sensitive controls that previously kept hard-coded light colors. */
.login-card input {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--accent) !important;
  opacity: 1 !important;
}

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  caret-color: var(--accent) !important;
}

body[data-theme="dark"] .login-screen,
body[data-theme="dark-auto"] .login-screen {
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 31%),
    linear-gradient(135deg, #08111f, #101a2a 54%, #0d1725) !important;
}

body[data-theme="dark"] .login-card,
body[data-theme="dark-auto"] .login-card {
  background: var(--surface-raised) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .login-card h1,
body[data-theme="dark-auto"] .login-card h1,
body[data-theme="dark"] .login-card label,
body[data-theme="dark-auto"] .login-card label {
  color: var(--text) !important;
}

body[data-theme="dark"] .login-card p,
body[data-theme="dark-auto"] .login-card p,
body[data-theme="dark"] .login-footnote,
body[data-theme="dark-auto"] .login-footnote {
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

body[data-theme="dark"] .login-card input,
body[data-theme="dark-auto"] .login-card input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body[data-theme="dark"] .load-create-menu,
body[data-theme="dark-auto"] .load-create-menu,
body[data-theme="dark"] .load-create-menu button,
body[data-theme="dark-auto"] .load-create-menu button {
  background: var(--surface-raised) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .load-create-menu button:hover,
body[data-theme="dark-auto"] .load-create-menu button:hover {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .load-create-menu small,
body[data-theme="dark-auto"] .load-create-menu small {
  color: var(--muted) !important;
}

body[data-theme="dark"].loads-mode .quick-load-create,
body[data-theme="dark-auto"].loads-mode .quick-load-create,
body[data-theme="dark"] .quick-load-create,
body[data-theme="dark-auto"] .quick-load-create,
body[data-theme="dark"] .quick-load-column,
body[data-theme="dark-auto"] .quick-load-column,
body[data-theme="dark"] .load-expanded-editor,
body[data-theme="dark-auto"] .load-expanded-editor,
body[data-theme="dark"] .quick-load-attachment,
body[data-theme="dark-auto"] .quick-load-attachment {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] .quick-load-column h3,
body[data-theme="dark-auto"] .quick-load-column h3,
body[data-theme="dark"] .quick-load-attachment-block h3,
body[data-theme="dark-auto"] .quick-load-attachment-block h3 {
  color: var(--accent) !important;
}

body[data-theme="dark"] :where(.quick-load-create, .load-expanded-editor) :is(input, select, textarea, .native-searchable-input, .load-inline-input, .load-inline-combobox-control, .input-affix),
body[data-theme="dark-auto"] :where(.quick-load-create, .load-expanded-editor) :is(input, select, textarea, .native-searchable-input, .load-inline-input, .load-inline-combobox-control, .input-affix) {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body[data-theme="dark"] :where(.quick-load-create, .load-expanded-editor) :is(input, select, textarea):disabled,
body[data-theme="dark-auto"] :where(.quick-load-create, .load-expanded-editor) :is(input, select, textarea):disabled {
  background: var(--disabled-bg) !important;
  color: var(--disabled-text) !important;
  -webkit-text-fill-color: var(--disabled-text) !important;
}

body[data-theme="dark"] :where(.quick-load-create, .load-expanded-editor) .native-searchable-toggle,
body[data-theme="dark-auto"] :where(.quick-load-create, .load-expanded-editor) .native-searchable-toggle,
body[data-theme="dark"] :where(.quick-load-create, .load-expanded-editor) .load-inline-combobox-toggle,
body[data-theme="dark-auto"] :where(.quick-load-create, .load-expanded-editor) .load-inline-combobox-toggle,
body[data-theme="dark"] .input-affix-mark,
body[data-theme="dark-auto"] .input-affix-mark {
  background: var(--panel-2) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}

body[data-theme="dark"].loads-mode .loads-table-wrap,
body[data-theme="dark-auto"].loads-mode .loads-table-wrap,
body[data-theme="dark"].loads-mode .loads-table-wrap table,
body[data-theme="dark-auto"].loads-mode .loads-table-wrap table,
body[data-theme="dark"].loads-mode .loads-table-wrap thead,
body[data-theme="dark-auto"].loads-mode .loads-table-wrap thead,
body[data-theme="dark"].loads-mode .loads-table-wrap tr,
body[data-theme="dark-auto"].loads-mode .loads-table-wrap tr {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body[data-theme="dark"].loads-mode .loads-table-wrap th,
body[data-theme="dark-auto"].loads-mode .loads-table-wrap th {
  background: var(--table-head) !important;
  color: var(--muted) !important;
}

body[data-theme="dark"].loads-mode .loads-table-wrap td,
body[data-theme="dark-auto"].loads-mode .loads-table-wrap td {
  background: var(--table-row) !important;
  color: var(--text) !important;
}

body[data-theme="dark"].loads-mode .loads-table-wrap :is(input, select, textarea, .native-searchable-input, .load-inline-input, .load-inline-combobox-control),
body[data-theme="dark-auto"].loads-mode .loads-table-wrap :is(input, select, textarea, .native-searchable-input, .load-inline-input, .load-inline-combobox-control) {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body[data-theme="dark"] #modalForm.vt-modal--settlement-picker,
body[data-theme="dark-auto"] #modalForm.vt-modal--settlement-picker,
body[data-theme="dark"] #modalForm.vt-modal--settlement-editor,
body[data-theme="dark-auto"] #modalForm.vt-modal--settlement-editor,
body[data-theme="dark"] #modalForm :where(.settlement-modal, .settlement-open-area, .settlement-filter-top, .settlement-editor),
body[data-theme="dark-auto"] #modalForm :where(.settlement-modal, .settlement-open-area, .settlement-filter-top, .settlement-editor) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body[data-theme="dark"] #modalForm :where(.settlement-modal, .settlement-editor) h3,
body[data-theme="dark-auto"] #modalForm :where(.settlement-modal, .settlement-editor) h3 {
  color: var(--ink) !important;
}

body[data-theme="dark"] #modalForm :where(.settlement-modal, .settlement-editor) :is(input, select, textarea, .native-searchable-input, .load-inline-combobox-control),
body[data-theme="dark-auto"] #modalForm :where(.settlement-modal, .settlement-editor) :is(input, select, textarea, .native-searchable-input, .load-inline-combobox-control) {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* GLOBAL FLAT BUTTONS
   Colors remain controlled by the active system theme/accent. */

.primary,
.secondary,
.danger,
.ghost,
.grid-link,
.link-button,
.segment,
.add-line-button,

/* Pagination / page size */
.table-pager button,
.pager-nav button,
.pager-size button,
.pagination button,
.pager button,
.page-size button,

/* Table / row actions */
.actions button,
.row-actions button,
td.actions button,
.icon-action,
.icon-button,

/* Dropdown action triggers */
.grid-action-menu summary,
.equipment-action-menu summary,
.load-action-menu summary,

/* Dropdown menu buttons */
.grid-action-menu > div button,
.equipment-action-menu > div button,
.load-action-menu > div button,

/* Other UI buttons */
.subnav button,
.user-menu-panel button {
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Loads has compact native search controls with light defaults in its page CSS. */
body[data-theme="dark"].loads-mode .loads-filter-row .native-searchable-input,
body[data-theme="dark-auto"].loads-mode .loads-filter-row .native-searchable-input,
body[data-theme="dark"].loads-mode .loads-filter-row .native-searchable-toggle,
body[data-theme="dark-auto"].loads-mode .loads-filter-row .native-searchable-toggle {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body[data-theme="dark"].loads-mode .loads-filter-row .native-searchable-menu,
body[data-theme="dark-auto"].loads-mode .loads-filter-row .native-searchable-menu,
body[data-theme="dark"].loads-mode .loads-filter-row .native-searchable-menu button,
body[data-theme="dark-auto"].loads-mode .loads-filter-row .native-searchable-menu button {
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body[data-theme="dark"].loads-mode .loads-filter-row .native-searchable-menu button:hover,
body[data-theme="dark-auto"].loads-mode .loads-filter-row .native-searchable-menu button:hover {
  background: var(--accent-soft) !important;
}

/* Dark-mode surfaces for feature dialogs with light reference styles. */
body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-pdf-import]),
body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-pdf-import]) :is(header, footer, #modalBody) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-pdf-import]) :is(h2, strong) {
  color: var(--ink) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-pdf-import]) .load-pdf-drop {
  background: var(--input-bg) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-pdf-import]) .load-pdf-drop :is(span, small) {
  color: var(--muted) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm.vt-modal--driver,
body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm.vt-modal--driver :is(#modalBody, .driver-form, .driver-top, .driver-address-grid, .driver-assignment-grid, .driver-tabs, .tabs-row, .driver-tab-body, .driver-doc-detail),
body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm.vt-modal--customer,
body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm.vt-modal--customer :is(#modalBody, .customer-form, .partner-main-grid, .partner-side, .customer-billing-grid, .partner-tabs, .tabs-row, .driver-tab-body) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:is(.vt-modal--driver, .vt-modal--customer) :is(h2, h3, h4, label, .field, .checkbox-field, .radio-line) {
  color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:is(.vt-modal--driver, .vt-modal--customer) :is(input, select, textarea, .native-searchable-input, .input-affix) {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm.vt-modal--driver :is(.driver-tabs, .partner-tabs) button {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm.vt-modal--driver :is(.driver-tabs, .partner-tabs) button.active {
  background: var(--panel) !important;
  color: var(--accent) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm.vt-modal--customer select option {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-review]) {
  --panel: #151f2f;
  --panel-2: #1b2738;
  --line: #304158;
  --line-strong: #40536c;
  --text: #e6edf5;
  --ink: #f8fbff;
  --muted: #9eb0c5;
  --accent-soft: #123c43;
  background: var(--panel) !important;
  color: var(--text) !important;
  color-scheme: dark !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-review]) :is(header, footer, #modalBody, .load-review, .load-review-document, .load-review-details, .load-review-toolbar, .load-review-paper, .review-stop-card, .review-stop-card h4) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-review]) :is(header, footer, .load-review-toolbar, .review-stop-card h4) {
  background: var(--panel-2) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-review]) :is(h2, h3, h4, label, .field, .review-radio-row, .review-footer-note, .load-review-loading) {
  color: var(--text) !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-review]) :is(.field input, .field select, .field textarea, .input-affix) {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  color-scheme: dark !important;
}

body:is([data-theme="dark"], [data-theme="dark-auto"]) #modalForm:has([data-load-review]) .field select option {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
}