/* ======================================================================
   TRADER DARK COMPATIBILITY SWEEP — FINAL

   Scope:
   - Dark mode only. Light mode must remain byte-for-byte unaffected by this
     stylesheet because every rule is rooted at html[data-theme="dark"].
   - Covers legacy module CSS that is emitted after Gui-References.php.
   - Covers shared helper stylesheets that still contain light-only surfaces.
   - Does not change routing, forms, database logic, dimensions or layout.

   Strategy:
   - Keep the existing --skin-* contract as the single colour source.
   - Use !important only where required to beat legacy embedded styles and
     Bootstrap/W3 helper rules. This is a compatibility layer, not a redesign.
====================================================================== */

/* ----------------------------------------------------------------------
   1. Core legacy shells / cards that do not always carry canonical classes
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas [class*="-shell"],
html[data-theme="dark"] #MainCanvas .shell {
  background-color: var(--skin-panel-bg) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas [class*="-card"],
html[data-theme="dark"] #MainCanvas .card,
html[data-theme="dark"] #MainCanvas .table-card {
  background-color: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

/* Report/list families that render their own white cell backgrounds. */
html[data-theme="dark"] #MainCanvas table,
html[data-theme="dark"] #MainCanvas .table,
html[data-theme="dark"] #MainCanvas [class*="-table"] {
  background-color: var(--skin-panel-bg-strong) !important;
  color: var(--skin-list-text-color) !important;
}

html[data-theme="dark"] #MainCanvas table tbody td,
html[data-theme="dark"] #MainCanvas table tbody th,
html[data-theme="dark"] #MainCanvas [class*="-table"] tbody td,
html[data-theme="dark"] #MainCanvas [class*="-table"] tbody th {
  background-color: transparent !important;
  color: var(--skin-list-text-color) !important;
  border-color: var(--skin-table-cell-border) !important;
}

html[data-theme="dark"] #MainCanvas table tbody tr:nth-child(even) > td,
html[data-theme="dark"] #MainCanvas table tbody tr:nth-child(even) > th,
html[data-theme="dark"] #MainCanvas [class*="-table"] tbody tr:nth-child(even) > td,
html[data-theme="dark"] #MainCanvas [class*="-table"] tbody tr:nth-child(even) > th {
  background-color: var(--skin-table-row-even) !important;
}

html[data-theme="dark"] #MainCanvas table tbody tr:hover > td,
html[data-theme="dark"] #MainCanvas table tbody tr:hover > th,
html[data-theme="dark"] #MainCanvas [class*="-table"] tbody tr:hover > td,
html[data-theme="dark"] #MainCanvas [class*="-table"] tbody tr:hover > th {
  background-color: var(--skin-table-row-hover) !important;
}

html[data-theme="dark"] #MainCanvas table tfoot td,
html[data-theme="dark"] #MainCanvas table tfoot th,
html[data-theme="dark"] #MainCanvas [class*="-table"] tfoot td,
html[data-theme="dark"] #MainCanvas [class*="-table"] tfoot th,
html[data-theme="dark"] #MainCanvas [class*="-totals"] td,
html[data-theme="dark"] #MainCanvas [class*="-totals"] th {
  background-color: var(--skin-panel-bg) !important;
  color: var(--skin-title-color) !important;
  border-color: var(--skin-table-cell-border) !important;
}

/* Bootstrap striped tables are loaded after the original bridge. */
html[data-theme="dark"] #MainCanvas .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="dark"] #MainCanvas .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: transparent !important;
}

/* ----------------------------------------------------------------------
   2. Edit / detail-edit form families
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .edit-form-card,
html[data-theme="dark"] #MainCanvas .edit-preview-card,
html[data-theme="dark"] #MainCanvas .edit-toolbar-card,
html[data-theme="dark"] #MainCanvas .edit-actions-card,
html[data-theme="dark"] #MainCanvas .edit-action-card,
html[data-theme="dark"] #MainCanvas .edit-info-card,
html[data-theme="dark"] #MainCanvas .detail-edit-toolbar-card,
html[data-theme="dark"] #MainCanvas .detail-edit-form-card,
html[data-theme="dark"] #MainCanvas .detail-edit-actions-card {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas .edit-section-title,
html[data-theme="dark"] #MainCanvas .detail-edit-section-title,
html[data-theme="dark"] #MainCanvas .edit-label,
html[data-theme="dark"] #MainCanvas .detail-edit-label,
html[data-theme="dark"] #MainCanvas .field-label {
  color: var(--skin-title-color) !important;
}

html[data-theme="dark"] #MainCanvas .edit-field-note,
html[data-theme="dark"] #MainCanvas .detail-edit-field-note,
html[data-theme="dark"] #MainCanvas .edit-loading,
html[data-theme="dark"] #MainCanvas .edit-loading-inline {
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas input,
html[data-theme="dark"] #MainCanvas select,
html[data-theme="dark"] #MainCanvas textarea,
html[data-theme="dark"] #MainCanvas .form-control,
html[data-theme="dark"] #MainCanvas .w3-input,
html[data-theme="dark"] #MainCanvas .edit-input,
html[data-theme="dark"] #MainCanvas .edit-input-number,
html[data-theme="dark"] #MainCanvas .edit-input-date,
html[data-theme="dark"] #MainCanvas .edit-input-date-native,
html[data-theme="dark"] #MainCanvas .edit-select,
html[data-theme="dark"] #MainCanvas .edit-textarea,
html[data-theme="dark"] #MainCanvas .detail-edit-input,
html[data-theme="dark"] #MainCanvas .ppsd-input {
  background-color: var(--skin-input-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas input[readonly],
html[data-theme="dark"] #MainCanvas input[disabled],
html[data-theme="dark"] #MainCanvas textarea[readonly],
html[data-theme="dark"] #MainCanvas textarea[disabled],
html[data-theme="dark"] #MainCanvas .edit-readonly-input,
html[data-theme="dark"] #MainCanvas .detail-edit-input[readonly],
html[data-theme="dark"] #MainCanvas .ppsd-input[readonly] {
  background-color: var(--skin-panel-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-title-color) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #MainCanvas .edit-input-addon,
html[data-theme="dark"] #MainCanvas .detail-edit-addon,
html[data-theme="dark"] #MainCanvas .input-group-addon,
html[data-theme="dark"] #MainCanvas .edit-date-wrap .input-group-addon {
  background-color: var(--skin-panel-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas .edit-input:focus,
html[data-theme="dark"] #MainCanvas .edit-input-number:focus,
html[data-theme="dark"] #MainCanvas .edit-input-date:focus,
html[data-theme="dark"] #MainCanvas .edit-input-date-native:focus,
html[data-theme="dark"] #MainCanvas .edit-select:focus,
html[data-theme="dark"] #MainCanvas .edit-textarea:focus,
html[data-theme="dark"] #MainCanvas .detail-edit-input:focus,
html[data-theme="dark"] #MainCanvas .w3-input:focus,
html[data-theme="dark"] #MainCanvas .form-control:focus {
  border-color: var(--skin-focus-color) !important;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.14) !important;
  outline: none !important;
}

html[data-theme="dark"] #MainCanvas input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] #MainCanvas input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] #MainCanvas input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.86) sepia(0.08) saturate(0.4) brightness(1.15);
  opacity: 0.9;
}

/* Validation surfaces: remove the light pink flash while retaining danger tone. */
html[data-theme="dark"] #MainCanvas .is-invalid {
  background-color: rgba(127, 29, 29, 0.24) !important;
  border-color: #ef4444 !important;
  color: var(--skin-text-color) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16) !important;
}

/* ----------------------------------------------------------------------
   3. Detail-edit actions
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .detail-edit-btn-secondary,
html[data-theme="dark"] #MainCanvas .edit-btn-secondary,
html[data-theme="dark"] #MainCanvas .edit-mini-action,
html[data-theme="dark"] #MainCanvas .btn-default {
  background: var(--skin-soft-btn-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-soft-btn-text) !important;
}

html[data-theme="dark"] #MainCanvas .detail-edit-btn-primary,
html[data-theme="dark"] #MainCanvas .edit-btn-primary,
html[data-theme="dark"] #MainCanvas .btn-primary {
  background: var(--skin-primary-btn-bg) !important;
  border-color: var(--skin-primary-btn-bg) !important;
  color: var(--skin-primary-btn-text) !important;
}

html[data-theme="dark"] #MainCanvas .edit-plus-link,
html[data-theme="dark"] #MainCanvas .edit-plus-trigger,
html[data-theme="dark"] #MainCanvas .search-style-plus,
html[data-theme="dark"] #MainCanvas .btn-soft {
  background: var(--skin-accent-soft-bg) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-accent-soft-text) !important;
}

/* ----------------------------------------------------------------------
   4. Reusable search-style chooser family
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .search-style-card,
html[data-theme="dark"] #MainCanvas .search-style-results {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas .search-style-title,
html[data-theme="dark"] #MainCanvas .search-style-result-title,
html[data-theme="dark"] #MainCanvas .search-style-meta strong {
  color: var(--skin-title-color) !important;
}

html[data-theme="dark"] #MainCanvas .search-style-icon,
html[data-theme="dark"] #MainCanvas .search-style-result-meta,
html[data-theme="dark"] #MainCanvas .search-style-empty,
html[data-theme="dark"] #MainCanvas .search-style-note,
html[data-theme="dark"] #MainCanvas .search-style-meta {
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas .search-style-input {
  background: var(--skin-input-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas .search-style-result-item {
  background: transparent !important;
  border-color: var(--skin-table-cell-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas .search-style-result-item:hover,
html[data-theme="dark"] #MainCanvas .search-style-result-item.is-active {
  background: var(--skin-table-row-hover) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas .search-style-footer {
  border-color: var(--skin-table-cell-border) !important;
}

/* ----------------------------------------------------------------------
   5. Client/read-only view and legacy custom report families
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .client-view-shell,
html[data-theme="dark"] #MainCanvas .client-view-card,
html[data-theme="dark"] #MainCanvas .detail-shell,
html[data-theme="dark"] #MainCanvas .detail-toolbar-card,
html[data-theme="dark"] #MainCanvas .detail-table-card,
html[data-theme="dark"] #MainCanvas .ppsd-shell,
html[data-theme="dark"] #MainCanvas .ppsd-card,
html[data-theme="dark"] #MainCanvas .ppsd-input-wrap {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas .client-view-title,
html[data-theme="dark"] #MainCanvas .client-view-value {
  color: var(--skin-title-color) !important;
}

html[data-theme="dark"] #MainCanvas .client-view-label {
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas .client-view-value {
  background: var(--skin-panel-bg) !important;
  border-color: var(--skin-input-border) !important;
}

html[data-theme="dark"] #MainCanvas .client-view-empty {
  background: rgba(127, 29, 29, 0.22) !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
  color: #fecaca !important;
}

/* ----------------------------------------------------------------------
   6. Bootstrap / W3 compatibility loaded after the original bridge
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .panel,
html[data-theme="dark"] #MainCanvas .panel-default,
html[data-theme="dark"] #MainCanvas .panel-body,
html[data-theme="dark"] #MainCanvas .well,
html[data-theme="dark"] #MainCanvas .list-group-item,
html[data-theme="dark"] #MainCanvas .dropdown-menu,
html[data-theme="dark"] #MainCanvas .popover,
html[data-theme="dark"] #MainCanvas .modal-content {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] #MainCanvas .panel-heading,
html[data-theme="dark"] #MainCanvas .modal-header,
html[data-theme="dark"] #MainCanvas .modal-footer,
html[data-theme="dark"] #MainCanvas .popover-title {
  background: var(--skin-panel-bg) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-title-color) !important;
}

html[data-theme="dark"] #MainCanvas .dropdown-menu > li > a {
  color: var(--skin-text-color) !important;
  background: transparent !important;
}

html[data-theme="dark"] #MainCanvas .dropdown-menu > li > a:hover,
html[data-theme="dark"] #MainCanvas .dropdown-menu > li > a:focus {
  color: var(--skin-title-color) !important;
  background: var(--skin-table-row-hover) !important;
}

html[data-theme="dark"] #MainCanvas .pagination > li > a,
html[data-theme="dark"] #MainCanvas .pagination > li > span,
html[data-theme="dark"] #MainCanvas .nav-tabs > li > a {
  background: var(--skin-panel-bg) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

/* ----------------------------------------------------------------------
   7. Financial-state CSS currently contains light-only status backgrounds
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .financial-input-group.financial-positive .edit-input-addon,
html[data-theme="dark"] #MainCanvas .financial-input-group.financial-positive .edit-readonly-input,
html[data-theme="dark"] #MainCanvas .financial-input-group.financial-positive .input-group-addon,
html[data-theme="dark"] #MainCanvas input.financial-state-value.financial-positive,
html[data-theme="dark"] #MainCanvas output.financial-state-value.financial-positive {
  background-color: rgba(22, 163, 74, 0.13) !important;
  border-color: rgba(34, 197, 94, 0.62) !important;
  color: var(--skin-positive-color) !important;
}

html[data-theme="dark"] #MainCanvas .financial-input-group.financial-negative .edit-input-addon,
html[data-theme="dark"] #MainCanvas .financial-input-group.financial-negative .edit-readonly-input,
html[data-theme="dark"] #MainCanvas .financial-input-group.financial-negative .input-group-addon,
html[data-theme="dark"] #MainCanvas input.financial-state-value.financial-negative,
html[data-theme="dark"] #MainCanvas output.financial-state-value.financial-negative {
  background-color: rgba(220, 38, 38, 0.13) !important;
  border-color: rgba(248, 113, 113, 0.58) !important;
  color: var(--skin-negative-color) !important;
}

html[data-theme="dark"] #MainCanvas .financial-input-group.financial-zero .edit-input-addon,
html[data-theme="dark"] #MainCanvas .financial-input-group.financial-zero .edit-readonly-input,
html[data-theme="dark"] #MainCanvas .financial-input-group.financial-zero .input-group-addon,
html[data-theme="dark"] #MainCanvas input.financial-state-value.financial-zero,
html[data-theme="dark"] #MainCanvas output.financial-state-value.financial-zero {
  background-color: var(--skin-panel-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-neutral-color) !important;
}

/* ----------------------------------------------------------------------
   8. Entity-navigation light warning/danger/soft fills
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas a.entity-navigation__button--warning,
html[data-theme="dark"] #MainCanvas a.entity-navigation__button--warning:visited,
html[data-theme="dark"] #MainCanvas a.entity-navigation__button--warning:hover,
html[data-theme="dark"] #MainCanvas a.entity-navigation__button--warning:focus {
  background: rgba(217, 119, 6, 0.16) !important;
  border-color: rgba(251, 146, 60, 0.55) !important;
  color: #fdba74 !important;
}

html[data-theme="dark"] #MainCanvas a.entity-navigation__button--danger,
html[data-theme="dark"] #MainCanvas a.entity-navigation__button--danger:visited,
html[data-theme="dark"] #MainCanvas a.entity-navigation__button--danger:hover,
html[data-theme="dark"] #MainCanvas a.entity-navigation__button--danger:focus {
  background: rgba(220, 38, 38, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.52) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] #MainCanvas .entity-navigation__button--soft:hover,
html[data-theme="dark"] #MainCanvas .entity-navigation__button--soft:focus {
  background: var(--skin-accent-soft-bg) !important;
  border-color: var(--skin-focus-color) !important;
  color: var(--skin-accent-soft-text) !important;
}

/* ----------------------------------------------------------------------
   9. Dataset dashboard hard-coded light helper surfaces
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .dataset-bar-track {
  background: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="dark"] #MainCanvas .dataset-summary-icon {
  background: rgba(148, 163, 184, 0.12) !important;
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas .dataset-tone-positive .dataset-summary-icon { color: var(--skin-positive-color) !important; }
html[data-theme="dark"] #MainCanvas .dataset-tone-negative .dataset-summary-icon { color: var(--skin-negative-color) !important; }
html[data-theme="dark"] #MainCanvas .dataset-tone-info .dataset-summary-icon { color: var(--skin-link-color) !important; }

/* ----------------------------------------------------------------------
   10. Supplier delete modal lives outside #MainCanvas
------------------------------------------------------------------------ */
html[data-theme="dark"] .supplier-delete-dialog {
  background: var(--skin-panel-bg-strong) !important;
  border: 1px solid var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] .supplier-delete-dialog h3 {
  color: #fecaca !important;
}

html[data-theme="dark"] .supplier-delete-summary {
  background: var(--skin-panel-bg) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] .supplier-delete-products-safe {
  background: rgba(22, 163, 74, 0.13) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .supplier-delete-warning,
html[data-theme="dark"] #MainCanvas .supplier-delete-zone {
  background: rgba(127, 29, 29, 0.22) !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] #MainCanvas .supplier-delete-zone-title,
html[data-theme="dark"] #MainCanvas .supplier-delete-zone-text {
  color: #fecaca !important;
}

html[data-theme="dark"] .supplier-delete-cancel {
  background: var(--skin-soft-btn-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-soft-btn-text) !important;
}

/* ----------------------------------------------------------------------
   11. Bootstrap datetimepicker may be appended outside #MainCanvas
------------------------------------------------------------------------ */
html[data-theme="dark"] .bootstrap-datetimepicker-widget,
html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

html[data-theme="dark"] .bootstrap-datetimepicker-widget table td,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table th {
  color: var(--skin-text-color) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.hour:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.minute:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.second:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background: var(--skin-table-row-hover) !important;
}

html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.disabled,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.disabled {
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.active {
  background: var(--skin-primary-btn-bg) !important;
  color: var(--skin-primary-btn-text) !important;
}

/* ----------------------------------------------------------------------
   12. Generic selection / browser affordances
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas ::selection {
  background: rgba(147, 197, 253, 0.30);
  color: var(--skin-title-color);
}

html[data-theme="dark"] #MainCanvas hr {
  border-color: var(--skin-table-cell-border) !important;
}

/* ----------------------------------------------------------------------
   13. High-specificity legacy exceptions discovered in the cycle-3 audit
------------------------------------------------------------------------ */
html[data-theme="dark"] #MainCanvas .detail-table-empty,
html[data-theme="dark"] #MainCanvas .sales-docs-empty,
html[data-theme="dark"] #MainCanvas .purchase-docs-empty,
html[data-theme="dark"] #MainCanvas .purchase-supplier-docs-empty,
html[data-theme="dark"] #MainCanvas .payments-supplier-empty,
html[data-theme="dark"] #MainCanvas .catalog-empty {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-muted-color) !important;
}

/* Product edit has two-ID !important rules, so mirror that specificity in
   Dark mode without editing the protected/special-case module itself. */
html[data-theme="dark"] #MainCanvas #LoginBlock .product-toolbar-btn,
html[data-theme="dark"] #MainCanvas #LoginBlock #List .btn {
  background: var(--skin-soft-btn-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-soft-btn-text) !important;
  box-shadow: 0 8px 18px var(--skin-shadow-color) !important;
}

html[data-theme="dark"] #MainCanvas #LoginBlock .product-toolbar-btn:hover,
html[data-theme="dark"] #MainCanvas #LoginBlock #List .btn:hover {
  background: var(--skin-table-row-hover) !important;
  border-color: var(--skin-focus-color) !important;
  color: var(--skin-title-color) !important;
}

html[data-theme="dark"] #MainCanvas .purchase-supplier-docs-total-amount,
html[data-theme="dark"] #MainCanvas .payments-supplier-total-amount {
  background: transparent !important;
  color: var(--skin-positive-color) !important;
}

/* ----------------------------------------------------------------------
   14. Dark leak hotfix — legacy light surfaces discovered from live review
------------------------------------------------------------------------ */

/* Product edit title row: the legacy $bColor value may render White or
   another very light product colour. Keep that data untouched and neutralise
   only the Dark-mode surface. */
html[data-theme="dark"] #MainCanvas .product-title-row {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

/* Bootstrap "light" / "info" buttons and the high-specificity Product Edit
   update action otherwise remain bright/cyan inside Dark mode. */
html[data-theme="dark"] #MainCanvas .btn-light {
  background: var(--skin-soft-btn-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-soft-btn-text) !important;
}

html[data-theme="dark"] #MainCanvas .btn-info,
html[data-theme="dark"] #MainCanvas #LoginBlock #Enimerosi .btn {
  background: var(--skin-primary-btn-bg) !important;
  border-color: var(--skin-primary-btn-bg) !important;
  color: var(--skin-primary-btn-text) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #MainCanvas .btn-info:hover,
html[data-theme="dark"] #MainCanvas .btn-info:focus,
html[data-theme="dark"] #MainCanvas #LoginBlock #Enimerosi .btn:hover,
html[data-theme="dark"] #MainCanvas #LoginBlock #Enimerosi .btn:focus {
  filter: brightness(1.06);
  color: var(--skin-primary-btn-text) !important;
}

/* Addons / helper chips that use hard-coded pale blue/grey fills. */
html[data-theme="dark"] #MainCanvas .edit-input-group-addon,
html[data-theme="dark"] #MainCanvas .ppsd-addon,
html[data-theme="dark"] #MainCanvas .login-group-icon,
html[data-theme="dark"] #MainCanvas .edit-hidden {
  background: var(--skin-panel-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas .edit-info-chip,
html[data-theme="dark"] #MainCanvas .wholesale-customers-count {
  background: var(--skin-accent-soft-bg) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-accent-soft-text) !important;
}

/* AJAX/loading helper boxes found in payments and sales-detail flows. */
html[data-theme="dark"] #MainCanvas .ppsd-loader,
html[data-theme="dark"] #MainCanvas .detail-edit-loader,
html[data-theme="dark"] #MainCanvas .edit-supplier-box {
  background: var(--skin-panel-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas .ppsd-field label,
html[data-theme="dark"] #MainCanvas .wholesale-customers-name {
  color: var(--skin-title-color) !important;
}

html[data-theme="dark"] #MainCanvas .wholesale-customers-price {
  color: var(--skin-muted-color) !important;
}

html[data-theme="dark"] #MainCanvas .wholesale-customers-total-row td {
  background: var(--skin-panel-bg) !important;
  color: var(--skin-title-color) !important;
}

/* Supplier success flash is emitted by a protected canon screen. Override it
   centrally instead of editing Promitheftes/index.php. */
html[data-theme="dark"] #MainCanvas .supplier-delete-flash {
  background: rgba(22, 163, 74, 0.13) !important;
  border-color: rgba(34, 197, 94, 0.48) !important;
  border-left-color: var(--skin-positive-color) !important;
  color: #bbf7d0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26) !important;
}

/* A few legacy action/menu surfaces are pale even though they are not form
   inputs. */
html[data-theme="dark"] #MainCanvas .edit-btn-menu,
html[data-theme="dark"] #MainCanvas .edit-mini-action {
  background: var(--skin-soft-btn-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-soft-btn-text) !important;
}

html[data-theme="dark"] #MainCanvas .edit-mini-action:hover,
html[data-theme="dark"] #MainCanvas .edit-mini-action:focus {
  background: var(--skin-table-row-hover) !important;
  border-color: var(--skin-focus-color) !important;
  color: var(--skin-title-color) !important;
}

/* Custom supplier balance states precede the shared financial-state helper. */
html[data-theme="dark"] #MainCanvas .edit-balance-positive .edit-input-addon,
html[data-theme="dark"] #MainCanvas .edit-balance-positive .edit-readonly-input {
  background: rgba(22, 163, 74, 0.13) !important;
  border-color: rgba(34, 197, 94, 0.52) !important;
  color: var(--skin-positive-color) !important;
}

html[data-theme="dark"] #MainCanvas .edit-balance-zero .edit-input-addon,
html[data-theme="dark"] #MainCanvas .edit-balance-zero .edit-readonly-input {
  background: var(--skin-panel-bg) !important;
  border-color: var(--skin-input-border) !important;
  color: var(--skin-neutral-color) !important;
}

/* Legacy AJAX actions frequently return bare divs with dynamic Green/Yellow
   inline backgrounds. Attribute selectors act on the rendered HTML, so this
   fixes the whole family without touching dozens of action scripts. */
html[data-theme="dark"] [style*="background-color:Green"],
html[data-theme="dark"] [style*="background-color:green"],
html[data-theme="dark"] [style*="background-color:#d4edda"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background-color:#f0fdf4"] {
  background-color: rgba(22, 163, 74, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.48) !important;
  color: #bbf7d0 !important;
}

html[data-theme="dark"] [style*="background-color:Yellow"],
html[data-theme="dark"] [style*="background-color:yellow"],
html[data-theme="dark"] [style*="background:Yellow"],
html[data-theme="dark"] [style*="background:yellow"] {
  background-color: rgba(217, 119, 6, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.46) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] [style*="background-color:#ffecec"],
html[data-theme="dark"] [style*="background:#ffecec"] {
  background-color: rgba(127, 29, 29, 0.24) !important;
  border-color: rgba(248, 113, 113, 0.52) !important;
  color: #fecaca !important;
}

/* ----------------------------------------------------------------------
   15. Final cycle-2 audit — native/browser and custom state leaks
------------------------------------------------------------------------ */

/* Product Edit legacy/backup variants predate the product-title-row class but
   use the same sticky #Gredials row with a dynamic $bColor. The live EDIT.php
   is already covered explicitly; this closes the same leak if an older route
   or maintenance copy is opened directly. */
html[data-theme="dark"] #MainCanvas #Gredials[style*="position: sticky"] {
  background: var(--skin-panel-bg-strong) !important;
  border-color: var(--skin-panel-border) !important;
  color: var(--skin-text-color) !important;
}

/* Protected supplier edit has its own negative balance class that is not
   the shared financial-negative class. Keep the module untouched and theme
   the state centrally. */
html[data-theme="dark"] #MainCanvas .edit-balance-negative .edit-input-addon,
html[data-theme="dark"] #MainCanvas .edit-balance-negative .edit-readonly-input {
  background: rgba(220, 38, 38, 0.13) !important;
  border-color: rgba(248, 113, 113, 0.58) !important;
  color: var(--skin-negative-color) !important;
}

/* Native select menus may otherwise open with a white option surface even
   though the select itself is dark. */
html[data-theme="dark"] #MainCanvas select option,
html[data-theme="dark"] #MainCanvas select optgroup {
  background: var(--skin-input-bg) !important;
  color: var(--skin-text-color) !important;
}

/* Chromium/Chrome autofill can force a pale yellow/blue field background.
   Use an inset fill so saved credentials remain visually inside Dark mode. */
html[data-theme="dark"] #MainCanvas input:-webkit-autofill,
html[data-theme="dark"] #MainCanvas input:-webkit-autofill:hover,
html[data-theme="dark"] #MainCanvas input:-webkit-autofill:focus,
html[data-theme="dark"] #MainCanvas textarea:-webkit-autofill,
html[data-theme="dark"] #MainCanvas select:-webkit-autofill {
  -webkit-text-fill-color: var(--skin-text-color) !important;
  caret-color: var(--skin-text-color) !important;
  box-shadow: 0 0 0 1000px var(--skin-input-bg) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--skin-input-bg) inset !important;
  border-color: var(--skin-input-border) !important;
  transition: background-color 99999s ease-out 0s;
}