/* =============================================================================
   Global dark-theme contrast — all pages / all surfaces
   Ensures text, icons, grids, chrome, and labels stay readable on dark backgrounds.
   Forms and lookup overlays follow Theme Engine dark tokens (no white fields).
   ============================================================================= */

html[data-theme="dark"],
body[data-theme="dark"] {
  --os-color-text: #f5f4f3;
  --os-color-text-muted: #c9c7c5;
  --os-color-border: rgba(255, 255, 255, 0.18);
  --os-color-border-strong: rgba(255, 255, 255, 0.28);
  --os-color-grid-header-text: #f5f4f3;
  --os-color-section-title: #2f2e2d;
  --os-color-section-title-bg: #2f2e2d;
  --os-color-section-title-text: #f5f4f3;
  --os-section-border: rgba(232, 230, 227, 0.16);
  --os-section-bg: #252423;
  --os-section-header-bg: #2f2e2d;
  --os-section-header-text: #f5f4f3;
  --os-section-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  --os-color-form-label-text: #f5f4f3;
  --os-app-dropdown-color: #f5f4f3;
  --os-app-dropdown-muted: #c9c7c5;
  --os-app-control-color: #f5f4f3;
  --os-btn-text-ink: #f5f4f3;
  --os-btn-text-on-fill: var(--os-color-text-inverse);
  --os-btn-text-muted: #c9c7c5;
  --os-btn-text-color: var(--os-btn-text-ink);
  --os-btn-border: rgba(255, 255, 255, 0.28);
  --os-btn-border-hover: #8bb0f8;
  --os-btn-neutral-bg: #2b2a29;
  --os-btn-neutral-bg-hover: color-mix(in srgb, #5b93f5 24%, #2b2a29);
  --os-btn-neutral-bg-selected: color-mix(in srgb, #5b93f5 34%, #2b2a29);
  --bs-body-color: #f5f4f3;
  --bs-secondary-color: #c9c7c5;
  --bs-link-color: #8bb0f8;
  --bs-link-hover-color: #b3c9fb;
  --dx-color-text: #f5f4f3;
  --dx-color-icon: rgba(245, 244, 243, 0.88);
  --dx-color-spin-icon: rgba(245, 244, 243, 0.88);
}

/* ---------- Page / chrome text ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .os-page-scroll,
html[data-theme="dark"] .os-page-sticky-chrome,
html[data-theme="dark"] .os-desktop-page-header,
html[data-theme="dark"] .os-page-header-chrome-host,
html[data-theme="dark"] .module-main-page,
html[data-theme="dark"] .module-main-header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .os-form-card,
html[data-theme="dark"] .module-main-group-panel,
html[data-theme="dark"] .module-section-panel,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .os-app-footer,
html[data-theme="dark"] .footer {
  color: var(--os-color-text, #f5f4f3);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] legend,
html[data-theme="dark"] .os-section-title,
html[data-theme="dark"] .os-form-section-title,
html[data-theme="dark"] .module-section-title,
html[data-theme="dark"] .module-main-section-title,
html[data-theme="dark"] .module-main-section-panel-title,
html[data-theme="dark"] .module-main-group-panel-title,
html[data-theme="dark"] .prs-group-panel-title,
html[data-theme="dark"] .prs-ribbon-section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .offcanvas-title,
html[data-theme="dark"] .offcanvas-header,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-header,
html[data-theme="dark"] .dropdown-header,
html[data-theme="dark"] .list-group-item-heading,
html[data-theme="dark"] .os-desktop-page-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .plan-grid-panel-title,
html[data-theme="dark"] .rotation-panel-title,
html[data-theme="dark"] .payment-section-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .small,
html[data-theme="dark"] small,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .os-muted,
html[data-theme="dark"] .os-help-text {
  color: var(--os-color-text-muted, #c9c7c5) !important;
}

/* Bootstrap utility classes that force dark ink on dark surfaces */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black-50 {
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item),
html[data-theme="dark"] .os-link {
  color: #8bb0f8;
}

html[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):hover,
html[data-theme="dark"] .os-link:hover {
  color: #b3c9fb;
}

/* ---------- Tabs / nav / breadcrumbs ---------- */
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .nav-pills .nav-link,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a,
html[data-theme="dark"] .pagination .page-link {
  color: var(--os-color-text, #f5f4f3) !important;
  background-color: transparent;
  border-color: var(--os-color-border);
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-pills .nav-link.active {
  color: var(--os-btn-text-on-fill) !important;
  background-color: rgba(62, 207, 142, 0.22) !important;
  border-color: rgba(62, 207, 142, 0.4) !important;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
  color: var(--os-color-text-muted, #c9c7c5) !important;
  background-color: transparent;
  opacity: 0.7;
}

/* ---------- Alerts / badges / close ---------- */
html[data-theme="dark"] .alert {
  color: var(--os-color-text, #f5f4f3);
  border-color: var(--os-color-border-strong);
}

html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light {
  background-color: var(--os-color-surface-muted, #2b2a29);
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] .badge.text-bg-light,
html[data-theme="dark"] .badge.bg-light {
  color: var(--os-color-input-text) !important;
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
  opacity: 0.85;
}

/* ---------- Tables (non-DX) — UI-1.8 tokenized; final paint in os-html-tables-theme.css ----------
   Body cell background is NOT forced here so stripe/hover/selected states can win. */
html[data-theme="dark"] table.table,
html[data-theme="dark"] table.table th,
html[data-theme="dark"] table.table td,
html[data-theme="dark"] main table.table th,
html[data-theme="dark"] main table.table td {
  color: var(--os-table-text, var(--os-color-text)) !important;
  border-color: var(--os-table-border, var(--os-color-border)) !important;
}

html[data-theme="dark"] table.table thead th,
html[data-theme="dark"] main table.table thead th {
  background-color: var(--os-table-header-bg, var(--os-color-grid-header)) !important;
  color: var(--os-table-header-text, var(--os-color-grid-header-text)) !important;
  font-weight: 600;
}

html[data-theme="dark"] table.table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] table.table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="dark"] table.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--os-table-stripe-bg, var(--os-color-grid-alt-row)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
  --bs-table-bg-type: var(--os-table-stripe-bg, var(--os-color-grid-alt-row));
  --bs-table-color-type: var(--os-table-text, var(--os-color-text));
}

html[data-theme="dark"] table.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: var(--os-table-body-bg, var(--os-color-grid-body)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
}

html[data-theme="dark"] table.table-hover > tbody > tr:hover > *,
html[data-theme="dark"] table.table-hover > tbody > tr:hover > td {
  background-color: var(--os-table-hover-bg, var(--os-color-grid-hover)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
}

html[data-theme="dark"] table.table-bordered,
html[data-theme="dark"] table.table-bordered > :not(caption) > * > * {
  border-color: var(--os-table-border, var(--os-color-border)) !important;
}

/* ---------- DevExtreme grids (in-page) — UI-1.7 tokenized ----------
   Reinforces dark readability when DX light theme leaves pale cells.
   Values from --os-color-grid-* (os-theme.css); final chrome in os-gridview-theme.css. */
html[data-theme="dark"] .dx-datagrid,
html[data-theme="dark"] .dx-datagrid-rowsview,
html[data-theme="dark"] .os-dx-grid .dx-datagrid,
html[data-theme="dark"] .os-dx-grid .dx-datagrid-rowsview {
  background-color: var(--os-color-grid) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-color-grid-border, var(--os-color-border)) !important;
}

html[data-theme="dark"] .dx-datagrid-headers,
html[data-theme="dark"] .dx-datagrid-headers .dx-datagrid-table,
html[data-theme="dark"] .dx-datagrid-headers .dx-header-row > td,
html[data-theme="dark"] .dx-datagrid-headers .dx-band-row > td {
  background-color: var(--os-color-grid-header) !important;
  color: var(--os-color-grid-header-text) !important;
  border-color: var(--os-color-grid-border, var(--os-color-border)) !important;
}

html[data-theme="dark"] .dx-datagrid-headers .dx-datagrid-text-content,
html[data-theme="dark"] .dx-datagrid-headers .dx-header-row > td .dx-datagrid-text-content {
  color: var(--os-color-grid-header-text) !important;
  font-weight: 600;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-data-row > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-freespace-row > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row > td,
html[data-theme="dark"] .dx-datagrid-total-footer > td,
html[data-theme="dark"] .dx-datagrid-group-footer > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-datagrid-text-content,
html[data-theme="dark"] .dx-datagrid-nodata,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-master-detail-row > td {
  color: var(--os-color-text) !important;
  border-color: var(--os-color-grid-border, var(--os-color-border)) !important;
  background-color: var(--os-color-grid-body, var(--os-color-grid)) !important;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-alt > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td {
  background-color: var(--os-color-grid-alt-row) !important;
  color: var(--os-color-text) !important;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-row:not(.dx-selection):not(.dx-row-focused):hover > td {
  background-color: var(--os-color-grid-hover) !important;
  color: var(--os-color-text) !important;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-selection > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-selection.dx-row-focused > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-focused > td {
  background-color: var(--os-color-grid-selected) !important;
  color: var(--os-color-text) !important;
}

html[data-theme="dark"] .dx-datagrid-group-closed,
html[data-theme="dark"] .dx-datagrid-group-opened,
html[data-theme="dark"] .dx-datagrid-expand .dx-icon,
html[data-theme="dark"] .dx-datagrid-group-row td,
html[data-theme="dark"] .dx-datagrid-group-row .dx-datagrid-text-content {
  color: var(--os-color-grid-header-text) !important;
  background-color: var(--os-color-grid-group, var(--os-color-section-header)) !important;
}

/* Fixed columns / content mirrors */
html[data-theme="dark"] .dx-datagrid-content .dx-datagrid-table .dx-row > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-datagrid-table .dx-row > td,
html[data-theme="dark"] .dx-datagrid .dx-column-lines > td {
  color: var(--os-color-text) !important;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-data-row > td .dx-link,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-data-row > td a {
  color: var(--os-color-grid-link, var(--os-color-link)) !important;
}

/* Inline cell editors follow dark form tokens */
html[data-theme="dark"] .dx-datagrid-rowsview .dx-editor-cell .dx-texteditor,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-editor-cell .dx-texteditor-input,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-editor-cell .dx-placeholder,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-cell-modified .dx-texteditor-input {
  background-color: var(--os-color-form-control-bg) !important;
  color: var(--os-color-input-text) !important;
}

/* Pager / filter panel on dark page — UI-1.7 tokens */
html[data-theme="dark"] .dx-pager,
html[data-theme="dark"] .dx-pager .dx-pages,
html[data-theme="dark"] .dx-pager .dx-page,
html[data-theme="dark"] .dx-pager .dx-info,
html[data-theme="dark"] .dx-pager .dx-page-sizes,
html[data-theme="dark"] .dx-pager .dx-navigate-button,
html[data-theme="dark"] .dx-datagrid-pager {
  color: var(--os-color-text) !important;
  background-color: var(--os-color-grid-pager) !important;
  border-color: var(--os-color-grid-border, var(--os-color-border)) !important;
}

html[data-theme="dark"] .dx-pager .dx-page.dx-selection {
  color: var(--os-color-text) !important;
  background-color: var(--os-color-grid-selected) !important;
}

html[data-theme="dark"] .dx-datagrid-filter-panel,
html[data-theme="dark"] .dx-datagrid-filter-panel .dx-datagrid-filter-panel-text,
html[data-theme="dark"] .dx-datagrid-filter-panel .dx-icon {
  color: var(--os-color-text) !important;
  background-color: var(--os-color-grid-filter) !important;
}

/* DX icons on dark surfaces (exclude editors / overlays) */
html[data-theme="dark"] .dx-datagrid-headers .dx-icon,
html[data-theme="dark"] .dx-datagrid-pager .dx-icon,
html[data-theme="dark"] .dx-pager .dx-icon,
html[data-theme="dark"] .dx-datagrid-filter-panel .dx-icon,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-command-edit .dx-icon,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-link,
html[data-theme="dark"] .os-page-toolbar .dx-icon:not(.dx-texteditor *),
html[data-theme="dark"] .os-module-toolbar .dx-icon:not(.dx-texteditor *) {
  color: var(--os-color-grid-icon, var(--os-color-icon)) !important;
}

/* Checkboxes / radios visible on dark rows (overlays use os-popup-selection.css) */
html[data-theme="dark"] .dx-datagrid-rowsview .dx-select-checkbox .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-headers .dx-select-checkbox .dx-checkbox-icon,
html[data-theme="dark"] .dx-radiobutton-icon {
  border-color: var(--os-color-checkbox-border, var(--os-color-border-strong)) !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-checkbox-checked .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-headers .dx-checkbox-checked .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-checkbox-indeterminate .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-headers .dx-checkbox-indeterminate .dx-checkbox-icon,
html[data-theme="dark"] .dx-radiobutton-checked .dx-radiobutton-icon-checked {
  color: var(--os-color-primary-light, var(--os-color-focus)) !important;
  border-color: var(--os-color-primary-light, var(--os-color-focus)) !important;
}

/* ---------- Form controls: themed ink on themed fields ---------- */
html[data-theme="dark"] .dx-texteditor .dx-icon,
html[data-theme="dark"] .dx-texteditor .dx-dropdowneditor-icon,
html[data-theme="dark"] .dx-texteditor .dx-icon-clear,
html[data-theme="dark"] .dx-texteditor .dx-icon-search,
html[data-theme="dark"] .dx-texteditor .dx-icon-date,
html[data-theme="dark"] .dx-texteditor .dx-icon-clock,
html[data-theme="dark"] .dx-texteditor .dx-icon-spin-up,
html[data-theme="dark"] .dx-texteditor .dx-icon-spin-down,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .dx-texteditor-input,
html[data-theme="dark"] .dx-placeholder {
  color: var(--os-color-input-text) !important;
}

html[data-theme="dark"] .dx-placeholder {
  color: var(--os-color-placeholder) !important;
}

html[data-theme="dark"] .dx-tagbox .dx-tag-content {
  color: var(--os-color-input-text) !important;
}

/* Dark overlays / lookups */
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-datagrid,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-datagrid-headers,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-datagrid-rowsview,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-datagrid-headers .dx-header-row > td,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-datagrid-rowsview .dx-data-row > td,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-datagrid-rowsview .dx-row-alt > td,
html[data-theme="dark"] .dx-header-filter-menu .dx-list,
html[data-theme="dark"] [class*="-dropdown"] .dx-datagrid,
html[data-theme="dark"] [class*="-dropdown"] .dx-datagrid-headers,
html[data-theme="dark"] [class*="-dropdown"] .dx-datagrid-rowsview,
html[data-theme="dark"] [class*="-dropdown"] .dx-datagrid-headers .dx-header-row > td,
html[data-theme="dark"] [class*="-dropdown"] .dx-datagrid-rowsview .dx-data-row > td,
html[data-theme="dark"] [class*="-dropdown"] .dx-datagrid-rowsview .dx-row-alt > td,
html[data-theme="dark"] [class*="-popup"]:has(.dx-datagrid) .dx-datagrid,
html[data-theme="dark"] [class*="-popup"]:has(.dx-datagrid) .dx-datagrid-headers,
html[data-theme="dark"] [class*="-popup"]:has(.dx-datagrid) .dx-datagrid-rowsview,
html[data-theme="dark"] [class*="-popup"]:has(.dx-datagrid) .dx-datagrid-headers .dx-header-row > td,
html[data-theme="dark"] [class*="-popup"]:has(.dx-datagrid) .dx-datagrid-rowsview .dx-data-row > td,
html[data-theme="dark"] [class*="-popup"]:has(.dx-datagrid) .dx-datagrid-rowsview .dx-row-alt > td {
  background-color: var(--os-color-form-control-bg) !important;
  color: var(--os-color-input-text) !important;
  border-color: var(--os-color-form-border) !important;
}

html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-icon,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-list-item,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-datagrid-text-content,
html[data-theme="dark"] .dx-header-filter-menu .dx-icon,
html[data-theme="dark"] .dx-header-filter-menu .dx-list-item,
html[data-theme="dark"] [class*="-dropdown"] .dx-icon,
html[data-theme="dark"] [class*="-dropdown"] .dx-list-item,
html[data-theme="dark"] [class*="-dropdown"] .dx-datagrid-text-content,
html[data-theme="dark"] [class*="-popup"]:has(.dx-datagrid) .dx-datagrid-text-content,
html[data-theme="dark"] [class*="-popup"]:has(.dx-list) .dx-list-item {
  color: var(--os-color-input-text) !important;
}

html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-checkbox-icon,
html[data-theme="dark"] .dx-header-filter-menu .dx-checkbox-icon,
html[data-theme="dark"] [class*="-dropdown"] .dx-checkbox-icon,
html[data-theme="dark"] [class*="-popup"] .dx-checkbox-icon {
  /* Popup selection chrome owns checkbox colors (os-popup-selection.css). */
  border-color: var(--os-popup-checkbox-border, rgba(255, 255, 255, 0.55)) !important;
}

/* ---------- Section bars / field groups ---------- */
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .os-fieldset,
html[data-theme="dark"] .os-form-section,
html[data-theme="dark"] .module-section-panel .card-body,
html[data-theme="dark"] .os-form-card .card-body {
  color: var(--os-color-text, #f5f4f3);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
  border-color: var(--os-color-border) !important;
}

/* ---------- Toolbar labels / captions outside buttons ---------- */
html[data-theme="dark"] .os-page-toolbar .form-label,
html[data-theme="dark"] .os-module-toolbar .form-label,
html[data-theme="dark"] .os-module-toolbar label,
html[data-theme="dark"] .os-app-header-filter-control .form-label {
  color: var(--os-color-text, #f5f4f3) !important;
}

/* Filter labels on dark chrome stay light. */
html[data-theme="dark"] .os-module-toolbar .module-main-filter-label,
html[data-theme="dark"] .os-module-toolbar .prs-station-label,
html[data-theme="dark"] .os-page-toolbar .module-main-filter-label,
html[data-theme="dark"] .os-page-toolbar .prs-station-label {
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] .module-main-sidebar .module-main-filter-label,
html[data-theme="dark"] .prs-sidebar .prs-station-label {
  color: var(--os-color-form-label-text, #f5f4f3) !important;
}

/* ---------- Scrollbars (Chromium / Firefox) ---------- */
html[data-theme="dark"] {
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.32);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background-color: transparent;
}

/* ---------- Disabled text still readable (dark surfaces only) ---------- */
html[data-theme="dark"] .text-disabled {
  color: var(--os-color-text-muted, #c9c7c5) !important;
  opacity: 0.85;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-state-disabled .dx-datagrid-text-content,
html[data-theme="dark"] .dx-datagrid-nodata {
  color: var(--os-color-grid-empty, var(--os-color-text-muted)) !important;
  opacity: 0.95;
  background-color: transparent !important;
}

/* =============================================================================
   Dark theme — headers / panels / titles / labels (readability pass)
   ============================================================================= */

/* Desktop section title bars (INVOICE, SUPPLIER, CERTIFICATE, …) */
html[data-theme="dark"] .os-desktop-section-title,
html[data-theme="dark"] .aps-site-section-title,
html[data-theme="dark"] .os-section__header {
  background: var(--os-section-header-bg, var(--os-color-section-title-bg, #2f2e2d)) !important;
  color: var(--os-section-header-text, var(--os-color-section-title-text, #f5f4f3)) !important;
  border-color: var(--os-section-border, var(--os-color-border, rgba(255, 255, 255, 0.18)));
}

/* Card / modal / accordion / offcanvas headers */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .offcanvas-header,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-item {
  background-color: var(--os-color-surface-muted, #2b2a29) !important;
  color: var(--os-color-text, #f5f4f3) !important;
  border-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: color-mix(in srgb, var(--os-color-primary, #5b93f5) 18%, var(--os-color-surface-muted, #2b2a29)) !important;
  color: var(--os-color-text, #f5f4f3) !important;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width, 1px)) 0 var(--os-color-border);
}

html[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.4);
}

html[data-theme="dark"] .card-header.bg-success,
html[data-theme="dark"] .card-header.bg-primary,
html[data-theme="dark"] .card-header.bg-danger,
html[data-theme="dark"] .card-header.bg-warning,
html[data-theme="dark"] .card-header.bg-info,
html[data-theme="dark"] .card-header.text-bg-success,
html[data-theme="dark"] .card-header.text-bg-primary {
  color: var(--os-btn-text-on-fill) !important;
}

/* Module ribbon / group panels */
html[data-theme="dark"] .module-main-section,
html[data-theme="dark"] .prs-ribbon-section {
  background: var(--os-color-surface, #252423) !important;
  border-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
  color: var(--os-color-text, #f5f4f3);
}

html[data-theme="dark"] .module-main-section-title,
html[data-theme="dark"] .prs-ribbon-section-title,
html[data-theme="dark"] .module-section-title {
  color: var(--os-color-text-muted, #c9c7c5) !important;
}

html[data-theme="dark"] .module-form-desc {
  background: var(--os-color-surface, #252423) !important;
  color: var(--os-color-text-muted, #c9c7c5) !important;
  border-color: var(--os-color-primary, #5b93f5) !important;
}

html[data-theme="dark"] .module-main-sidebar,
html[data-theme="dark"] .prs-sidebar,
html[data-theme="dark"] .module-main-sidebar .module-main-filter-form,
html[data-theme="dark"] .prs-sidebar .prs-station-form {
  background: var(--os-color-surface, #252423) !important;
  border-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
  color: var(--os-color-text, #f5f4f3);
}

/* Rotation / plan panels */
html[data-theme="dark"] .rotation-panel,
html[data-theme="dark"] .plan-grid-panel {
  background: var(--os-color-surface, #252423) !important;
  border-color: var(--os-color-border-strong, rgba(255, 255, 255, 0.28)) !important;
  color: var(--os-color-text, #f5f4f3);
}

html[data-theme="dark"] .rotation-panel-title,
html[data-theme="dark"] .plan-grid-panel-title {
  background: var(--os-color-surface-muted, #2b2a29) !important;
  color: var(--os-color-text, #f5f4f3) !important;
  border-bottom-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
}

html[data-theme="dark"] .rotation-toolbar-label,
html[data-theme="dark"] .rotation-export-btn {
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] .rotation-toolbar-select {
  background: var(--os-color-form-control-bg) !important;
  color: var(--os-color-input-text) !important;
  border-color: var(--os-color-form-border) !important;
}

/* Detail panel headers (Protection / Fertigation / Products / …) */
html[data-theme="dark"] .ags-protection-details-header,
html[data-theme="dark"] .ags-fertigation-details-header,
html[data-theme="dark"] .ags-harvest-details-grid .dx-datagrid-header-panel {
  background: var(--os-color-grid-header, #2f2e2d) !important;
  color: var(--os-color-grid-header-text, #f5f4f3) !important;
  border-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
}

html[data-theme="dark"] .ags-protection-details-title,
html[data-theme="dark"] .ags-fertigation-details-title,
html[data-theme="dark"] .aps-products-edit-page .aps-products-subtitle {
  background: var(--os-color-grid-header, #2f2e2d) !important;
  color: var(--os-color-grid-header-text, #f5f4f3) !important;
  border-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
}

html[data-theme="dark"] .ags-protection-field-label,
html[data-theme="dark"] .ags-fertigation-field-label,
html[data-theme="dark"] .ags-find-replace-label,
html[data-theme="dark"] .aps-sites-edit-page .aps-site-fairtrade-field-label,
html[data-theme="dark"] .aps-sites-edit-page .aps-site-area-ha-field-label,
html[data-theme="dark"] .aps-sites-edit-page .aps-site-inline-field-label,
html[data-theme="dark"] .aps-site-certificate-page .site-cert-fields .form-label,
html[data-theme="dark"] .os-export-invoice-share-menu .dropdown-header {
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] .aps-products-edit-page .aps-products-months {
  background: var(--os-color-surface, #252423) !important;
  border-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
  color: var(--os-color-text, #f5f4f3);
}

html[data-theme="dark"] .aps-products-scientific-panel-title,
html[data-theme="dark"] .aps-products-scientific-program-panel-title,
html[data-theme="dark"] .aps-procedure-panel-title {
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] .aps-products-scientific-panel-title-row,
html[data-theme="dark"] .aps-products-scientific-program-panel-title-row,
html[data-theme="dark"] .aps-procedure-panel-title-row {
  background: var(--os-color-surface-muted, #2b2a29) !important;
  color: var(--os-color-text, #f5f4f3) !important;
  border-color: var(--os-color-border, rgba(255, 255, 255, 0.18)) !important;
}

/* Grid group rows (DX class variants) */
html[data-theme="dark"] .os-dx-grid .dx-group-row,
html[data-theme="dark"] .os-dx-grid .dx-group-row > td,
html[data-theme="dark"] .dx-datagrid-group-row,
html[data-theme="dark"] .dx-datagrid-group-row > td {
  background: var(--os-color-grid-header, #2f2e2d) !important;
  color: var(--os-color-grid-header-text, #f5f4f3) !important;
}

html[data-theme="dark"] .os-dx-grid .dx-group-row .dx-datagrid-summary-item,
html[data-theme="dark"] .dx-datagrid-group-row .dx-datagrid-summary-item {
  color: var(--os-color-text-muted, #c9c7c5) !important;
}

/* TreeView / menu / status badges */
html[data-theme="dark"] .dx-treeview,
html[data-theme="dark"] .dx-treeview-item,
html[data-theme="dark"] .dx-treeview-item-content,
html[data-theme="dark"] .dx-menu-item-text,
html[data-theme="dark"] .dx-context-menu .dx-menu-item-text {
  color: var(--os-color-text, #f5f4f3) !important;
}

html[data-theme="dark"] .badge.bg-secondary,
html[data-theme="dark"] .badge.text-bg-secondary {
  color: var(--os-btn-text-on-fill) !important;
}

html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light {
  background-color: var(--os-color-surface-muted, #2b2a29) !important;
  color: var(--os-color-text, #f5f4f3) !important;
}

/* Validation / required markers stay visible */
html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .field-validation-error,
html[data-theme="dark"] .validation-summary-errors,
html[data-theme="dark"] .invalid-feedback,
html[data-theme="dark"] .was-validated .form-control:invalid ~ .invalid-feedback {
  color: var(--os-color-danger, #e35d52) !important;
}

html[data-theme="dark"] .text-success {
  color: var(--os-color-success, #3ecf8e) !important;
}

html[data-theme="dark"] .text-warning {
  color: var(--os-color-warning, #e0a04a) !important;
}

/* Catch-all: common hardcoded dark-ink utilities on dark surfaces */
html[data-theme="dark"] .fw-bold.text-dark,
html[data-theme="dark"] strong.text-dark,
html[data-theme="dark"] .os-required-label,
html[data-theme="dark"] .required-label,
html[data-theme="dark"] label.required,
html[data-theme="dark"] .os-field-caption,
html[data-theme="dark"] .os-toolbar-label,
html[data-theme="dark"] .os-filter-label,
html[data-theme="dark"] .os-panel-title,
html[data-theme="dark"] .os-group-title {
  color: var(--os-color-text, #f5f4f3) !important;
}

/* Form table label cells (desktop chrome) */
html[data-theme="dark"] .os-desktop-form-table th,
html[data-theme="dark"] .os-desktop-form-table .os-form-label-cell,
html[data-theme="dark"] .aps-site-table th,
html[data-theme="dark"] .aps-site-table .os-form-label-cell {
  background: var(--os-color-form-label, #2f2e2d) !important;
  color: var(--os-color-form-label-text, #f5f4f3) !important;
  border-color: var(--os-color-form-border) !important;
}

/* Form control final polish lives in os-dark-theme-compliance.css */