/* ======================================================================
   TRADER PREMIUM FINANCIAL SaaS — CYCLE 3/4

   Component refinement:
   - Cards, buttons, tabs, filters, forms, tables, analytics, modals,
     empty/loading/status states.
   - Less nested chrome; stronger interaction hierarchy.
   - Visual/cascade changes only. No workflow, data or business logic.
====================================================================== */

:root,
html[data-theme="dark"] {
  --saas-control-bg: #0d1a2c;
  --saas-control-hover: #122238;
  --saas-control-pressed: #0a1626;
  --saas-control-border: rgba(148,163,184,.17);
  --saas-control-border-hover: rgba(148,163,184,.29);
  --saas-table-head: rgba(7,17,31,.62);
  --saas-table-hover: rgba(148,163,184,.055);
  --saas-modal-backdrop: rgba(1,7,15,.72);
  --saas-focus-accent: var(--saas-module-accent, var(--saas-blue));
}

html[data-theme="light"] {
  --saas-control-bg: #ffffff;
  --saas-control-hover: #f7f9fc;
  --saas-control-pressed: #eef2f6;
  --saas-control-border: rgba(15,23,42,.12);
  --saas-control-border-hover: rgba(15,23,42,.22);
  --saas-table-head: #f6f8fb;
  --saas-table-hover: rgba(15,23,42,.035);
  --saas-modal-backdrop: rgba(15,23,42,.42);
  --saas-focus-accent: var(--saas-module-accent, var(--saas-blue));
}

/* ----------------------------------------------------------------------
   1. Card hierarchy — stop treating every block like a floating widget
------------------------------------------------------------------------ */
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 [class$="-search-card"],
html body #MainCanvas [class*="-search-card "] {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  box-shadow: none !important;
}

/* Data/preview surfaces may remain raised because they are outputs, not form chrome. */
html body #MainCanvas .edit-preview-card,
html body #MainCanvas .detail-table-card,
html body #MainCanvas .table-card,
html body #MainCanvas [class$="-table-card"],
html body #MainCanvas [class*="-table-card "] {
  border-color: var(--saas-keyline) !important;
  background: var(--saas-surface-raised) !important;
  box-shadow: var(--saas-shadow-card) !important;
}

/* Action containers are command zones, not separate cards. */
html body #MainCanvas .edit-actions-card,
html body #MainCanvas .detail-edit-actions-card,
html body #MainCanvas [class$="-actions-card"],
html body #MainCanvas [class*="-actions-card "] {
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--saas-keyline-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Consecutive nested cards need breathing room, not repeated heavy outlines. */
html body #MainCanvas .edit-form-card + .edit-form-card,
html body #MainCanvas .detail-edit-form-card + .detail-edit-form-card,
html body #MainCanvas .ppsd-card + .ppsd-card {
  margin-top: var(--ui-space-5) !important;
}

/* ----------------------------------------------------------------------
   2. Buttons — primary, secondary, tonal semantic, destructive
------------------------------------------------------------------------ */
html body #MainCanvas button,
html body #MainCanvas .btn,
html body #MainCanvas [class*="-btn"] {
  box-shadow: none !important;
  letter-spacing: .004em !important;
}

/* Secondary actions become quiet ghost controls. */
html body #MainCanvas .btn-default,
html body #MainCanvas .btn-light,
html body #MainCanvas .btn-soft,
html body #MainCanvas .edit-btn-secondary,
html body #MainCanvas .detail-edit-btn-secondary,
html body #MainCanvas [class*="-clear-btn"] {
  border-color: var(--saas-control-border) !important;
  background: transparent !important;
  color: var(--saas-text-secondary) !important;
}

html body #MainCanvas .btn-default:hover,
html body #MainCanvas .btn-light:hover,
html body #MainCanvas .btn-soft:hover,
html body #MainCanvas .edit-btn-secondary:hover,
html body #MainCanvas .detail-edit-btn-secondary:hover,
html body #MainCanvas [class*="-clear-btn"]:hover {
  border-color: var(--saas-control-border-hover) !important;
  background: var(--saas-surface-soft) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: none !important;
}

/* Semantic actions are tonal by default; reserve solid fills for the primary CTA. */
html body #MainCanvas .btn-success,
html body #MainCanvas .detail-edit-btn-success {
  border-color: var(--saas-positive-border) !important;
  background: var(--saas-positive-soft) !important;
  color: var(--saas-positive) !important;
  box-shadow: none !important;
}

html body #MainCanvas .btn-danger,
html body #MainCanvas .detail-edit-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 .btn-info {
  border-color: color-mix(in srgb, var(--saas-module-accent, var(--saas-blue)) 24%, var(--saas-keyline)) !important;
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-blue)) 7%, transparent) !important;
  color: var(--saas-module-accent, var(--saas-blue)) !important;
  box-shadow: none !important;
}

/* The actual Danger Zone is intentionally stronger than ordinary danger actions. */
html body #MainCanvas .supplier-delete-zone .btn-danger,
html body #MainCanvas .supplier-delete-dialog .btn-danger,
html body #MainCanvas .supplier-delete-confirm {
  border-color: color-mix(in srgb, var(--saas-negative) 72%, var(--saas-keyline)) !important;
  background: var(--saas-negative) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--saas-negative) 16%, transparent) !important;
}

/* Compact icon actions should read as affordances, not miniature CTA buttons. */
html body #MainCanvas [class$="-action-icon"],
html body #MainCanvas [class*="-action-icon "] {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--saas-text-tertiary) !important;
}

html body #MainCanvas tr:hover [class$="-action-icon"],
html body #MainCanvas tr:hover [class*="-action-icon "] {
  border-color: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 20%, transparent) !important;
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 7%, transparent) !important;
  color: var(--saas-module-accent, var(--saas-text-primary)) !important;
}

/* ----------------------------------------------------------------------
   3. Tabs / segmented navigation — understated Financial SaaS pattern
------------------------------------------------------------------------ */
html body #MainCanvas .nav-tabs,
html body #MainCanvas .nav-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: var(--ui-space-4) !important;
  padding: 3px !important;
  border: 1px solid var(--saas-keyline-soft) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--saas-surface-soft) !important;
}

html body #MainCanvas .nav-tabs > li,
html body #MainCanvas .nav-pills > li {
  margin: 0 !important;
  float: none !important;
}

html body #MainCanvas .nav-tabs > li > a,
html body #MainCanvas .nav-pills > li > a {
  margin: 0 !important;
  padding: 7px 11px !important;
  border: 0 !important;
  border-radius: calc(var(--ui-radius-md) - 2px) !important;
  background: transparent !important;
  color: var(--saas-text-secondary) !important;
  font-size: var(--ui-font-size-sm) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

html body #MainCanvas .nav-tabs > li.active > a,
html body #MainCanvas .nav-tabs > li.active > a:hover,
html body #MainCanvas .nav-tabs > li.active > a:focus,
html body #MainCanvas .nav-pills > li.active > a,
html body #MainCanvas .nav-pills > li.active > a:hover,
html body #MainCanvas .nav-pills > li.active > a:focus {
  border: 0 !important;
  background: var(--saas-surface-raised) !important;
  color: var(--saas-text-primary) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
}

html body #MainCanvas .tab-content {
  padding-top: var(--ui-space-2) !important;
}

/* ----------------------------------------------------------------------
   4. Filters / search — controls first, chrome second
------------------------------------------------------------------------ */
html body #MainCanvas [class$="-filters-card"],
html body #MainCanvas [class*="-filters-card "] {
  padding: 10px 0 2px !important;
  border: 0 !important;
  border-top: 1px solid var(--saas-keyline-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #MainCanvas [class$="-filter-btn"],
html body #MainCanvas [class*="-filter-btn "] {
  border-color: transparent !important;
  background: var(--saas-surface-soft) !important;
  color: var(--saas-text-secondary) !important;
  box-shadow: none !important;
}

html body #MainCanvas [class$="-filter-btn"].is-active,
html body #MainCanvas [class*="-filter-btn "].is-active,
html body #MainCanvas [class$="-filter-btn"][aria-pressed="true"],
html body #MainCanvas [class*="-filter-btn "][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 24%, transparent) !important;
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 9%, var(--saas-section)) !important;
  color: var(--saas-module-accent, var(--saas-text-primary)) !important;
}

/* Search cards become command strips rather than nested cards. */
html body #MainCanvas [class$="-search-card"],
html body #MainCanvas [class*="-search-card "] {
  border-color: var(--saas-keyline-soft) !important;
  background: color-mix(in srgb, var(--saas-section) 94%, transparent) !important;
}

/* ----------------------------------------------------------------------
   5. Forms — quieter fields, stronger focus, clearer read-only state
------------------------------------------------------------------------ */
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-select,
html body #MainCanvas .detail-edit-input,
html body #MainCanvas .detail-edit-select {
  border-color: var(--saas-control-border) !important;
  background: var(--saas-control-bg) !important;
  box-shadow: none !important;
}

html body #MainCanvas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):hover,
html body #MainCanvas select:hover,
html body #MainCanvas textarea:hover,
html body #MainCanvas .form-control:hover {
  border-color: var(--saas-control-border-hover) !important;
  background: var(--saas-control-hover) !important;
}

html body #MainCanvas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):focus,
html body #MainCanvas select:focus,
html body #MainCanvas textarea:focus,
html body #MainCanvas .form-control:focus {
  border-color: color-mix(in srgb, var(--saas-focus-accent) 60%, var(--saas-control-border-hover)) !important;
  background: var(--saas-control-bg) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saas-focus-accent) 14%, transparent) !important;
}

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

/* Group addons should recede from the editable control. */
html body #MainCanvas .input-group-addon,
html body #MainCanvas .edit-input-addon,
html body #MainCanvas .edit-input-group-addon,
html body #MainCanvas .detail-edit-addon,
html body #MainCanvas [class*="-addon"] {
  border-color: var(--saas-control-border) !important;
  background: var(--saas-surface-soft) !important;
  color: var(--saas-text-tertiary) !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------
   6. Tables — cleaner data plane, calmer zebra, clearer active row
------------------------------------------------------------------------ */
html body #MainCanvas .table-card table thead th,
html body #MainCanvas table[class$="-table"] thead th,
html body #MainCanvas table[class*="-table "] thead th,
html body #MainCanvas table.detail-table thead th,
html body #MainCanvas table.table.data-table thead th {
  background: var(--saas-table-head) !important;
  border-bottom-color: var(--saas-keyline) !important;
  color: var(--saas-text-secondary) !important;
  box-shadow: none !important;
  letter-spacing: .045em !important;
}

/* Remove the overly visible zebra pattern; spacing and hover carry hierarchy. */
html body #MainCanvas .table-card table tbody tr:nth-child(even),
html body #MainCanvas table[class$="-table"] tbody tr:nth-child(even),
html body #MainCanvas table[class*="-table "] tbody tr:nth-child(even),
html body #MainCanvas table.detail-table tbody tr:nth-child(even),
html body #MainCanvas table.table.data-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--saas-surface-soft) 48%, transparent) !important;
}

html body #MainCanvas .table-card table tbody tr:hover,
html body #MainCanvas table[class$="-table"] tbody tr:hover,
html body #MainCanvas table[class*="-table "] tbody tr:hover,
html body #MainCanvas table.detail-table tbody tr:hover,
html body #MainCanvas table.table.data-table tbody tr:hover {
  background: var(--saas-table-hover) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 62%, transparent) !important;
}

html body #MainCanvas table tbody tr[aria-selected="true"],
html body #MainCanvas table tbody tr.is-selected,
html body #MainCanvas table tbody tr.selected {
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 8%, var(--saas-surface)) !important;
  box-shadow: inset 2px 0 0 var(--saas-module-accent, var(--saas-neutral)) !important;
}

/* Totals are a financial footer, not another coloured row. */
html body #MainCanvas table tr[class*="totals"] > td,
html body #MainCanvas table tr[class*="total-row"] > td,
html body #MainCanvas table tr.financial-total-row > td,
html body #MainCanvas table tfoot tr > td {
  border-top-color: var(--saas-keyline-strong) !important;
  background: color-mix(in srgb, var(--saas-surface-raised) 86%, transparent) !important;
  color: var(--saas-text-primary) !important;
}

/* ----------------------------------------------------------------------
   7. Analytics — secondary insight surface, less dashboard-within-dashboard
------------------------------------------------------------------------ */
html body #MainCanvas .dataset-dashboard-summary {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  box-shadow: none !important;
}

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

html body #MainCanvas .dataset-charts-summary {
  padding: 13px 4px !important;
  border-bottom-color: var(--saas-keyline-soft) !important;
  background: transparent !important;
  color: var(--saas-text-primary) !important;
}

html body #MainCanvas .dataset-charts-grid {
  padding: 14px 0 0 !important;
}

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

html body #MainCanvas .dataset-bar-track,
html body #MainCanvas .dataset-column-track,
html body #MainCanvas .dataset-comparison-track {
  background: var(--saas-surface-soft) !important;
}

html body #MainCanvas .dataset-donut-center {
  background: var(--saas-surface-raised) !important;
  box-shadow: inset 0 0 0 1px var(--saas-keyline-soft) !important;
}

/* ----------------------------------------------------------------------
   8. Modals — focused task surface, clean separation from the app
------------------------------------------------------------------------ */
html body .modal,
html body .supplier-delete-modal {
  background: var(--saas-modal-backdrop) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html body .modal-content,
html body .supplier-delete-dialog {
  border: 1px solid var(--saas-keyline) !important;
  border-radius: var(--ui-radius-xl) !important;
  background: var(--saas-surface-raised) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow: hidden !important;
}

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

html body .modal-header .close {
  color: var(--saas-text-tertiary) !important;
  opacity: .82 !important;
  text-shadow: none !important;
}

html body .modal-header .close:hover {
  color: var(--saas-text-primary) !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   9. Empty / status / loading states — calm, useful, non-decorative
------------------------------------------------------------------------ */
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 [class$="-empty-icon"],
html body #MainCanvas [class*="-empty-icon "] {
  color: var(--saas-text-tertiary) !important;
  opacity: .8 !important;
}

html body #MainCanvas .alert,
html body #MainCanvas [class$="-flash"],
html body #MainCanvas [class*="-flash "] {
  border-left-width: 3px !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
}

/* Replace legacy remote loader GIF presentation with a local CSS spinner.
   The containers and AJAX logic stay untouched. */
html body #MainCanvas .edit-loading,
html body #MainCanvas .edit-preview-loading,
html body #MainCanvas .detail-edit-loader,
html body #MainCanvas .ppsd-loader {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: var(--saas-text-tertiary) !important;
}

html body #MainCanvas .edit-loading > img,
html body #MainCanvas .edit-preview-loading > img,
html body #MainCanvas .detail-edit-loader > img,
html body #MainCanvas .ppsd-loader > img {
  display: none !important;
}

html body #MainCanvas .edit-loading::before,
html body #MainCanvas .edit-preview-loading::before,
html body #MainCanvas .detail-edit-loader::before,
html body #MainCanvas .ppsd-loader::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid var(--saas-keyline) !important;
  border-top-color: var(--saas-module-accent, var(--saas-neutral)) !important;
  border-radius: 50%;
  animation: trader-saas-spin .72s linear infinite;
}

@keyframes trader-saas-spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------
   10. Responsive component behaviour
------------------------------------------------------------------------ */
@media (max-width: 900px) {
  html body #MainCanvas .dataset-charts-grid {
    gap: 10px !important;
  }

  html body #MainCanvas .edit-actions-card,
  html body #MainCanvas .detail-edit-actions-card,
  html body #MainCanvas [class$="-actions-card"],
  html body #MainCanvas [class*="-actions-card "] {
    padding-top: 10px !important;
  }
}

@media (max-width: 767px) {
  html body #MainCanvas .nav-tabs,
  html body #MainCanvas .nav-pills {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }

  html body #MainCanvas .nav-tabs::-webkit-scrollbar,
  html body #MainCanvas .nav-pills::-webkit-scrollbar {
    display: none !important;
  }

  html body #MainCanvas .nav-tabs > li,
  html body #MainCanvas .nav-pills > li {
    flex: 0 0 auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #MainCanvas .edit-loading::before,
  html body #MainCanvas .edit-preview-loading::before,
  html body #MainCanvas .detail-edit-loader::before,
  html body #MainCanvas .ppsd-loader::before {
    animation-duration: 1.6s !important;
  }
}