/* ======================================================================
   TRADER PREMIUM FINANCIAL SaaS — CYCLE 4/4
   FINAL REGRESSION & POLISH CLOSURE

   Goals:
   - Close remaining visual inconsistencies from late legacy module CSS.
   - Preserve the hierarchy/accent/component language from Cycles 1–3.
   - Keep Dark default and Light fully supported.
   - Stabilise desktop / 2K / tablet / mobile behaviour.
   - No workflow, routing, AJAX, SQL or business-logic changes.
====================================================================== */

:root,
html[data-theme="dark"] {
  --saas-final-focus-ring: rgba(111, 156, 245, .24);
  --saas-final-hover-line: rgba(148, 163, 184, .22);
  --saas-final-disabled-opacity: .52;
  --saas-final-field-min: 44px;
  --saas-final-mobile-hit: 44px;
  --saas-final-table-radius: 12px;
  --saas-final-overlay: rgba(1, 7, 15, .74);
}

html[data-theme="light"] {
  --saas-final-focus-ring: rgba(49, 95, 189, .18);
  --saas-final-hover-line: rgba(15, 23, 42, .17);
  --saas-final-disabled-opacity: .58;
  --saas-final-overlay: rgba(15, 23, 42, .42);
}

/* ----------------------------------------------------------------------
   1. Workspace rhythm and final hierarchy
------------------------------------------------------------------------ */
html body #MainCanvas:not(.premium-auth):not(.premium-dashboard) {
  color: var(--saas-text-primary) !important;
}

html body #MainCanvas > .premium-page-title-row {
  margin-bottom: 2px !important;
}

html body #MainCanvas .page-title.shell.section-header,
html body #MainCanvas .premium-page-title {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #MainCanvas .page-title.shell.section-header {
  color: var(--saas-text-primary) !important;
}

/* Final shell closure. Late module-local CSS still paints several shells white. */
html body #MainCanvas .products-shell,
html body #MainCanvas .sales-docs-shell,
html body #MainCanvas .purchase-docs-shell,
html body #MainCanvas .retail-clients-shell,
html body #MainCanvas .wholesale-customers-shell,
html body #MainCanvas .suppliers-shell,
html body #MainCanvas .payments-shell,
html body #MainCanvas .receipts-shell,
html body #MainCanvas .product-categories-shell,
html body #MainCanvas .catalog-shell,
html body #MainCanvas .price-lists-shell,
html body #MainCanvas .purchase-supplier-docs-shell,
html body #MainCanvas .payments-supplier-shell,
html body #MainCanvas .edit-shell,
html body #MainCanvas .detail-edit-shell,
html body #MainCanvas .detail-shell,
html body #MainCanvas .client-view-shell,
html body #MainCanvas .ppsd-shell {
  background: var(--saas-workspace) !important;
  border-color: var(--saas-keyline-soft) !important;
  color: var(--saas-text-primary) !important;
}

/* Section surfaces: calm and flat. Output/data surfaces stay one level higher. */
html body #MainCanvas .edit-form-card,
html body #MainCanvas .detail-edit-form-card,
html body #MainCanvas .client-view-card,
html body #MainCanvas .ppsd-card,
html body #MainCanvas .search-style-card,
html body #MainCanvas .sales-docs-card,
html body #MainCanvas .purchase-docs-card,
html body #MainCanvas .purchase-supplier-docs-card,
html body #MainCanvas .payments-supplier-card,
html body #MainCanvas .catalog-toolbar-card {
  background: var(--saas-section) !important;
  border-color: var(--saas-keyline-soft) !important;
  box-shadow: none !important;
}

html body #MainCanvas .edit-preview-card,
html body #MainCanvas .detail-table-card,
html body #MainCanvas .table-card,
html body #MainCanvas .catalog-table-card,
html body #MainCanvas .sales-docs-table-card,
html body #MainCanvas .purchase-docs-table-card,
html body #MainCanvas .purchase-supplier-docs-table-card,
html body #MainCanvas .payments-supplier-table-card {
  background: var(--saas-surface-raised) !important;
  border-color: var(--saas-keyline) !important;
  box-shadow: var(--saas-shadow-card) !important;
}

/* Legacy Bootstrap/UIkit cards that still appear in old screens. */
html body #MainCanvas .well,
html body #MainCanvas .panel,
html body #MainCanvas .panel-default,
html body #MainCanvas .w3-card,
html body #MainCanvas .w3-card-2,
html body #MainCanvas .w3-card-4,
html body #MainCanvas .list-group-item,
html body #MainCanvas fieldset {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: none !important;
}

html body #MainCanvas .panel-heading,
html body #MainCanvas .panel-footer,
html body #MainCanvas legend {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-surface-soft) !important;
  color: var(--saas-text-secondary) !important;
}

/* ----------------------------------------------------------------------
   2. Typography, labels and information hierarchy
------------------------------------------------------------------------ */
html body #MainCanvas .edit-section-title,
html body #MainCanvas .detail-edit-section-title,
html body #MainCanvas .detail-section-title,
html body #MainCanvas .client-view-title,
html body #MainCanvas .ppsd-card-title,
html body #MainCanvas .catalog-section-title {
  color: var(--saas-text-primary) !important;
  letter-spacing: -.012em !important;
}

html body #MainCanvas .edit-label,
html body #MainCanvas .detail-edit-label,
html body #MainCanvas .field-label,
html body #MainCanvas label:not(.btn) {
  color: var(--saas-text-secondary) !important;
}

html body #MainCanvas .edit-field-note,
html body #MainCanvas .detail-edit-field-note,
html body #MainCanvas .search-style-note,
html body #MainCanvas .search-style-meta,
html body #MainCanvas .client-view-subtitle,
html body #MainCanvas .ppsd-card-subtitle,
html body #MainCanvas .text-muted,
html body #MainCanvas small {
  color: var(--saas-text-tertiary) !important;
}

html body #MainCanvas .dataset-summary-value,
html body #MainCanvas [data-financial-value],
html body #MainCanvas input[type="number"] {
  font-variant-numeric: tabular-nums !important;
}

/* ----------------------------------------------------------------------
   3. Controls, focus, disabled and action hierarchy
------------------------------------------------------------------------ */
html body #MainCanvas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
html body #MainCanvas select,
html body #MainCanvas textarea,
html body #MainCanvas .form-control,
html body #MainCanvas .edit-input,
html body #MainCanvas .edit-input-number,
html body #MainCanvas .edit-input-date,
html body #MainCanvas .edit-input-date-native,
html body #MainCanvas .edit-select,
html body #MainCanvas .edit-textarea,
html body #MainCanvas .detail-edit-input,
html body #MainCanvas .ppsd-input {
  min-height: var(--saas-final-field-min) !important;
  border-color: var(--saas-control-border) !important;
  background: var(--saas-control-bg) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: none !important;
}

html body #MainCanvas textarea,
html body #MainCanvas .edit-textarea {
  min-height: 104px !important;
  line-height: 1.45 !important;
}

html body #MainCanvas input::placeholder,
html body #MainCanvas textarea::placeholder {
  color: var(--saas-text-tertiary) !important;
  opacity: .78 !important;
}

html body #MainCanvas input[readonly],
html body #MainCanvas input[disabled],
html body #MainCanvas textarea[readonly],
html body #MainCanvas textarea[disabled],
html body #MainCanvas select[disabled],
html body #MainCanvas .edit-readonly-input,
html body #MainCanvas .detail-edit-input[readonly],
html body #MainCanvas .ppsd-input[readonly] {
  background: var(--saas-surface-soft) !important;
  border-color: var(--saas-keyline-soft) !important;
  color: var(--saas-text-tertiary) !important;
  opacity: 1 !important;
}

html body #MainCanvas button[disabled],
html body #MainCanvas .btn[disabled],
html body #MainCanvas .btn.disabled,
html body #MainCanvas [aria-disabled="true"] {
  opacity: var(--saas-final-disabled-opacity) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Keyboard focus is visible without spending the gold accent. */
html body #MainCanvas a:focus-visible,
html body #MainCanvas button:focus-visible,
html body #MainCanvas .btn:focus-visible,
html body #MainCanvas [role="button"]:focus-visible,
html body #MainCanvas input:focus-visible,
html body #MainCanvas select:focus-visible,
html body #MainCanvas textarea:focus-visible,
html body .theme-toggle:focus-visible {
  outline: 2px solid var(--saas-focus-accent, var(--saas-blue)) !important;
  outline-offset: 2px !important;
}

/* High-specificity closure for Product Edit legacy buttons. */
html body #MainCanvas #LoginBlock .product-toolbar-btn,
html body #MainCanvas #LoginBlock #List .btn {
  border-color: var(--saas-control-border) !important;
  background: transparent !important;
  color: var(--saas-text-secondary) !important;
  box-shadow: none !important;
}

html body #MainCanvas #LoginBlock .product-toolbar-btn:hover,
html body #MainCanvas #LoginBlock .product-toolbar-btn:focus,
html body #MainCanvas #LoginBlock #List .btn:hover,
html body #MainCanvas #LoginBlock #List .btn:focus {
  border-color: var(--saas-control-border-hover) !important;
  background: var(--saas-surface-soft) !important;
  color: var(--saas-text-primary) !important;
}

/* ----------------------------------------------------------------------
   4. Validation and semantic state closure
------------------------------------------------------------------------ */
html body #MainCanvas .is-invalid,
html body #MainCanvas input.is-invalid,
html body #MainCanvas select.is-invalid,
html body #MainCanvas textarea.is-invalid {
  border-color: var(--saas-negative-border) !important;
  background: var(--saas-negative-soft) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saas-negative) 12%, transparent) !important;
}

html body #MainCanvas .supplier-delete-flash,
html body #MainCanvas .alert-success {
  border-color: var(--saas-positive-border) !important;
  background: var(--saas-positive-soft) !important;
  color: var(--saas-positive) !important;
}

html body #MainCanvas .alert-danger,
html body #MainCanvas .alert-error {
  border-color: var(--saas-negative-border) !important;
  background: var(--saas-negative-soft) !important;
  color: var(--saas-negative) !important;
}

html body #MainCanvas .alert-warning {
  border-color: var(--saas-warning-border) !important;
  background: var(--saas-warning-soft) !important;
  color: var(--saas-warning) !important;
}

/* ----------------------------------------------------------------------
   5. Search / autocomplete regression closure
------------------------------------------------------------------------ */
html body #MainCanvas .search-style-field {
  position: relative !important;
  min-width: 0 !important;
}

html body #MainCanvas .search-style-field > .search-style-icon {
  position: absolute !important;
  left: 18px !important;
  top: 30px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: var(--saas-text-tertiary) !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

html body #MainCanvas .search-style-field > .search-style-input {
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 18px 0 52px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

html body #MainCanvas .search-style-results {
  max-height: min(380px, 48vh) !important;
  overflow: hidden !important;
  border-color: var(--saas-keyline) !important;
  background: var(--saas-surface-raised) !important;
  box-shadow: var(--saas-shadow-raised) !important;
  z-index: 1200 !important;
}

html body #MainCanvas .search-style-results-scroll {
  max-height: min(350px, 44vh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html body #MainCanvas .search-style-result-item {
  border-color: var(--saas-keyline-soft) !important;
  background: transparent !important;
  color: var(--saas-text-primary) !important;
}

html body #MainCanvas .search-style-result-item:hover,
html body #MainCanvas .search-style-result-item.is-active {
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 7%, var(--saas-surface)) !important;
}

/* Keep all eight live-list searches icon-safe after every later component pass. */
html body #MainCanvas .products-search-wrap > .products-search-input,
html body #MainCanvas .suppliers-search-wrap > .suppliers-search-input,
html body #MainCanvas .purchase-docs-search-wrap > .purchase-docs-search-input,
html body #MainCanvas .sales-docs-search-wrap > .sales-docs-search-input,
html body #MainCanvas .retail-clients-search-wrap > .retail-clients-search-input,
html body #MainCanvas .payments-search-wrap > .payments-search-input,
html body #MainCanvas .receipts-search-wrap > .receipts-search-input,
html body #MainCanvas .price-lists-search-wrap > .price-lists-search-input {
  padding-left: 40px !important;
  padding-right: 104px !important;
}

/* ----------------------------------------------------------------------
   6. Tables, totals, empty states and overflow
------------------------------------------------------------------------ */
html body #MainCanvas .table-responsive,
html body #MainCanvas [class$="-table-wrap"],
html body #MainCanvas [class*="-table-wrap "] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  border-radius: var(--saas-final-table-radius) !important;
}

html body #MainCanvas table,
html body #MainCanvas .table,
html body #MainCanvas table.detail-table,
html body #MainCanvas table.sales-docs-table,
html body #MainCanvas table.purchase-docs-table,
html body #MainCanvas table.purchase-supplier-docs-table,
html body #MainCanvas table.payments-supplier-table,
html body #MainCanvas table.catalog-table,
html body #MainCanvas table.wholesale-customers-table {
  color: var(--saas-text-primary) !important;
  background: transparent !important;
}

html body #MainCanvas table thead th,
html body #MainCanvas .table thead th,
html body #MainCanvas table.detail-table thead th,
html body #MainCanvas table.sales-docs-table thead th,
html body #MainCanvas table.purchase-docs-table thead th,
html body #MainCanvas table.purchase-supplier-docs-table thead th,
html body #MainCanvas table.payments-supplier-table thead th,
html body #MainCanvas table.catalog-table thead th,
html body #MainCanvas table.wholesale-customers-table thead th {
  border-color: var(--saas-keyline) !important;
  background: var(--saas-table-head) !important;
  color: var(--saas-text-secondary) !important;
  text-shadow: none !important;
}

html body #MainCanvas table tbody td,
html body #MainCanvas table tbody th {
  border-color: var(--saas-keyline-soft) !important;
}

html body #MainCanvas td[data-financial-value],
html body #MainCanvas th[data-financial-value],
html body #MainCanvas .financial-state-value,
html body #MainCanvas [class*="total-amount"],
html body #MainCanvas [class*="total-value"] {
  font-variant-numeric: tabular-nums !important;
}

/* Late module-local empty cards and totals are common leak points. */
html body #MainCanvas .sales-docs-empty,
html body #MainCanvas .purchase-docs-empty,
html body #MainCanvas .purchase-supplier-docs-empty,
html body #MainCanvas .payments-supplier-empty,
html body #MainCanvas .catalog-empty,
html body #MainCanvas .detail-table-empty,
html body #MainCanvas [class$="-empty"],
html body #MainCanvas [class*="-empty "] {
  border-color: var(--saas-keyline-soft) !important;
  background: transparent !important;
  color: var(--saas-text-secondary) !important;
  box-shadow: none !important;
}

html body #MainCanvas .sales-docs-totals td,
html body #MainCanvas .purchase-docs-totals td,
html body #MainCanvas .purchase-supplier-docs-totals td,
html body #MainCanvas .payments-supplier-totals td,
html body #MainCanvas .wholesale-customers-total-row td,
html body #MainCanvas table tfoot td,
html body #MainCanvas table tfoot th {
  border-top-color: var(--saas-keyline-strong) !important;
  background: var(--saas-surface-raised) !important;
  color: var(--saas-text-primary) !important;
}

html body #MainCanvas .purchase-supplier-docs-totals .purchase-supplier-docs-total-amount,
html body #MainCanvas .payments-supplier-totals .payments-supplier-total-amount {
  background: transparent !important;
}

/* ----------------------------------------------------------------------
   7. Analytics hierarchy and spacing
------------------------------------------------------------------------ */
html body #MainCanvas .dataset-dashboard-summary {
  margin-bottom: var(--ui-space-4) !important;
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  box-shadow: none !important;
}

html body #MainCanvas .dataset-charts-panel {
  margin-top: var(--ui-space-6) !important;
  border-color: var(--saas-keyline-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #MainCanvas .dataset-chart-card {
  min-width: 0 !important;
  border-color: var(--saas-keyline-soft) !important;
  box-shadow: none !important;
}

html body #MainCanvas .dataset-chart-title {
  color: var(--saas-text-primary) !important;
}

html body #MainCanvas .dataset-chart-subtitle,
html body #MainCanvas .dataset-chart-legend,
html body #MainCanvas .dataset-chart-note {
  color: var(--saas-text-tertiary) !important;
}

/* ----------------------------------------------------------------------
   8. Modal / overlay final closure
------------------------------------------------------------------------ */
html body .modal,
html body .supplier-delete-modal {
  background: var(--saas-final-overlay) !important;
}

html body .modal-dialog {
  max-width: calc(100vw - 28px) !important;
}

html body .modal-content,
html body .supplier-delete-dialog {
  border-color: var(--saas-keyline) !important;
  background: var(--saas-surface-raised) !important;
  color: var(--saas-text-primary) !important;
}

html body .modal-header,
html body .modal-footer {
  border-color: var(--saas-keyline-soft) !important;
  background: transparent !important;
}

/* ----------------------------------------------------------------------
   9. Targeted Dark-mode closure for hard-coded legacy light islands
------------------------------------------------------------------------ */
html[data-theme="dark"] body #MainCanvas .w3-white,
html[data-theme="dark"] body #MainCanvas .bg-white,
html[data-theme="dark"] body #MainCanvas .thumbnail {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  color: var(--saas-text-primary) !important;
}

/* Only structural nodes: do not repaint images or deliberate colour swatches. */
html[data-theme="dark"] body #MainCanvas div[style*="background:#fff"],
html[data-theme="dark"] body #MainCanvas div[style*="background: #fff"],
html[data-theme="dark"] body #MainCanvas div[style*="background-color:#fff"],
html[data-theme="dark"] body #MainCanvas div[style*="background-color: #fff"],
html[data-theme="dark"] body #MainCanvas section[style*="background:#fff"],
html[data-theme="dark"] body #MainCanvas section[style*="background: #fff"],
html[data-theme="dark"] body #MainCanvas form[style*="background:#fff"],
html[data-theme="dark"] body #MainCanvas form[style*="background: #fff"] {
  background: var(--saas-section) !important;
  color: var(--saas-text-primary) !important;
}

/* The retail credentials island is still defined with a late white gradient. */
html body #MainCanvas .login-group-card {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: none !important;
}

html body #MainCanvas .login-group-icon {
  border-color: color-mix(in srgb, var(--saas-module-accent, var(--saas-cyan)) 22%, var(--saas-keyline)) !important;
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-cyan)) 7%, transparent) !important;
  color: var(--saas-module-accent, var(--saas-cyan)) !important;
}

/* ----------------------------------------------------------------------
   10. Responsive closure
------------------------------------------------------------------------ */
@media (max-width: 1199px) {
  html body #MainCanvas .edit-grid,
  html body #MainCanvas .detail-edit-grid {
    column-gap: var(--ui-space-3) !important;
    row-gap: var(--ui-space-4) !important;
  }

  html body #MainCanvas [class*="-toolbar"],
  html body #MainCanvas .edit-actions,
  html body #MainCanvas .detail-edit-actions-row {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 900px) {
  html body #MainCanvas .dataset-charts-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #MainCanvas .dataset-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #MainCanvas .edit-form-card,
  html body #MainCanvas .detail-edit-form-card,
  html body #MainCanvas .client-view-card,
  html body #MainCanvas .ppsd-card {
    padding: 16px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --saas-final-field-min: 46px;
  }

  html body #MainCanvas .edit-grid,
  html body #MainCanvas .detail-edit-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #MainCanvas .edit-col-3,
  html body #MainCanvas .edit-col-4,
  html body #MainCanvas .edit-col-6,
  html body #MainCanvas .edit-col-8,
  html body #MainCanvas .edit-col-9,
  html body #MainCanvas .edit-col-12,
  html body #MainCanvas .detail-edit-col-3,
  html body #MainCanvas .detail-edit-col-4,
  html body #MainCanvas .detail-edit-col-6,
  html body #MainCanvas .detail-edit-col-8,
  html body #MainCanvas .detail-edit-col-9,
  html body #MainCanvas .detail-edit-col-12 {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  html body #MainCanvas .dataset-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #MainCanvas .search-style-field > .search-style-input {
    height: 52px !important;
    min-height: 52px !important;
    padding-left: 46px !important;
  }

  html body #MainCanvas .search-style-field > .search-style-icon {
    left: 16px !important;
    top: 26px !important;
  }

  html body #MainCanvas button,
  html body #MainCanvas .btn,
  html body #MainCanvas [class*="-btn"] {
    min-height: var(--saas-final-mobile-hit) !important;
  }

  html body #MainCanvas .edit-actions,
  html body #MainCanvas .detail-edit-actions-row,
  html body #MainCanvas [class$="-toolbar"],
  html body #MainCanvas [class*="-toolbar "] {
    gap: 8px !important;
  }

  html body #MainCanvas .edit-actions-left,
  html body #MainCanvas .edit-actions-right,
  html body #MainCanvas .detail-edit-actions-left,
  html body #MainCanvas .detail-edit-actions-right,
  html body #MainCanvas [class$="-toolbar-left"],
  html body #MainCanvas [class$="-toolbar-right"] {
    width: 100% !important;
  }

  html body #MainCanvas .table-responsive,
  html body #MainCanvas [class$="-table-wrap"],
  html body #MainCanvas [class*="-table-wrap "] {
    border-radius: 10px !important;
  }

  html body .modal-dialog,
  html body .supplier-delete-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }
}

@media (max-width: 479px) {
  html body #MainCanvas .edit-form-card,
  html body #MainCanvas .detail-edit-form-card,
  html body #MainCanvas .client-view-card,
  html body #MainCanvas .ppsd-card,
  html body #MainCanvas [class$="-search-card"],
  html body #MainCanvas [class*="-search-card "] {
    padding: 13px !important;
  }

  html body #MainCanvas .dataset-summary-card {
    min-height: 0 !important;
  }
}

/* ----------------------------------------------------------------------
   11. Motion / contrast preferences
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html body #MainCanvas *,
  html body #MainCanvas *::before,
  html body #MainCanvas *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-contrast: more) {
  html body #MainCanvas .edit-form-card,
  html body #MainCanvas .detail-edit-form-card,
  html body #MainCanvas .table-card,
  html body #MainCanvas [class$="-table-card"],
  html body #MainCanvas .search-style-card,
  html body .modal-content {
    border-color: var(--saas-keyline-strong) !important;
  }
}

/* ----------------------------------------------------------------------
   12. Legacy row-based screens — final visual bridge
   These older maintenance screens predate the *-module/*-shell vocabulary.
   Give them the same hierarchy without rewriting their PHP markup.
------------------------------------------------------------------------ */
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row#Gredials:not(.product-title-row) {
  width: calc(100% - (2 * var(--ui-content-wide-gutter))) !important;
  margin: 0 var(--ui-content-wide-gutter) var(--ui-space-3) !important;
  padding: clamp(13px, 1.2vw, 18px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--saas-keyline-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row#LoginBlock {
  width: calc(100% - (2 * var(--ui-content-wide-gutter))) !important;
  margin: var(--ui-space-4) var(--ui-content-wide-gutter) var(--ui-space-6) !important;
  padding: var(--ui-space-4) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--saas-keyline-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Old maintenance lists use an inline translucent-white table + heavy shadow. */
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row div[style*="overflow-x"] > table,
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row div[style*="overflow-x:"] > table {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--saas-keyline) !important;
  border-radius: var(--saas-final-table-radius) !important;
  background: var(--saas-surface-raised) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: var(--saas-shadow-card) !important;
}

html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row div[style*="overflow-x"] > table td,
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row div[style*="overflow-x"] > table th {
  border-color: var(--saas-keyline-soft) !important;
  background: transparent !important;
  color: var(--saas-text-primary) !important;
}

html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row div[style*="overflow-x"] > table tr:hover td {
  background: var(--saas-table-hover) !important;
}

/* Legacy full-block Bootstrap actions become a calm command row. */
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > #LoginBlock .btn-block {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

@media (max-width: 767px) {
  html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row#Gredials:not(.product-title-row),
  html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row#LoginBlock {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* Embedded legacy list fragments do not always own #MainCanvas themselves.
   When injected into a modern parent, neutralise the old 10px black shadow
   and translucent-white table directly by its legacy inline signature. */
html body #MainCanvas table[style*="box-shadow"],
html body #MainCanvas table[style*="rgb(255, 255, 255"],
html body #MainCanvas table[style*="rgba(255, 255, 255"] {
  border: 1px solid var(--saas-keyline) !important;
  background: var(--saas-surface-raised) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: var(--saas-shadow-card) !important;
}

/* ----------------------------------------------------------------------
   14. High-specificity legacy command rows
   Older screens identify actions with IDs (#List/#Enimerosi/#Diagrafi).
   These ID-heavy rules otherwise outrank the SaaS button semantics.
------------------------------------------------------------------------ */
html[data-theme="dark"] body #MainCanvas #LoginBlock #Enimerosi .btn,
html[data-theme="dark"] body #MainCanvas #LoginBlock #Enimerosi .btn-primary {
  border-color: color-mix(in srgb, var(--saas-gold) 62%, var(--saas-keyline-strong)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--saas-gold) 95%, #fff 5%), var(--saas-gold)) !important;
  color: #17130a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 14px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] body #MainCanvas #LoginBlock #Enimerosi .btn:hover,
html[data-theme="dark"] body #MainCanvas #LoginBlock #Enimerosi .btn:focus {
  border-color: var(--saas-gold-hover) !important;
  background: var(--saas-gold-hover) !important;
  color: #17130a !important;
}

html[data-theme="light"] body #MainCanvas #LoginBlock #Enimerosi .btn,
html[data-theme="light"] body #MainCanvas #LoginBlock #Enimerosi .btn-primary {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
  color: var(--ui-accent-contrast) !important;
}

html body #MainCanvas #LoginBlock #Diagrafi .btn,
html body #MainCanvas #LoginBlock #Diagrafi .btn-danger {
  border-color: var(--saas-negative-border) !important;
  background: var(--saas-negative-soft) !important;
  color: var(--saas-negative) !important;
  box-shadow: none !important;
}

html body #MainCanvas #LoginBlock #NewRecord .btn,
html body #MainCanvas #LoginBlock #NewRecord .btn-success {
  border-color: var(--saas-positive-border) !important;
  background: var(--saas-positive-soft) !important;
  color: var(--saas-positive) !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------
   15. Print regression closure
   Premium Dark/Light rules use !important extensively, so explicitly return
   printable documents to a neutral paper surface.
------------------------------------------------------------------------ */
@media print {
  html,
  html body,
  html body #MainCanvas {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  html body .nav-bar,
  html body .nav-container,
  html body .theme-toggle,
  html body #MainCanvas button,
  html body #MainCanvas .btn,
  html body #MainCanvas [class*="-toolbar"],
  html body #MainCanvas .edit-actions,
  html body #MainCanvas .detail-edit-actions-row {
    display: none !important;
  }

  html body #MainCanvas [class*="-shell"],
  html body #MainCanvas [class*="-card"],
  html body #MainCanvas .card,
  html body #MainCanvas .well,
  html body #MainCanvas .panel,
  html body #MainCanvas table,
  html body #MainCanvas .table,
  html body #MainCanvas table th,
  html body #MainCanvas table td,
  html body #MainCanvas input,
  html body #MainCanvas select,
  html body #MainCanvas textarea {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  html body #MainCanvas table,
  html body #MainCanvas table th,
  html body #MainCanvas table td,
  html body #MainCanvas [class*="-card"],
  html body #MainCanvas .card {
    border-color: #c7cbd1 !important;
  }

  html body #MainCanvas a,
  html body #MainCanvas a:visited {
    color: #111 !important;
    text-decoration: none !important;
  }

  html body #MainCanvas .dataset-charts-panel,
  html body #MainCanvas .dataset-dashboard-summary {
    break-inside: avoid !important;
  }
}