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

   Visual hierarchy only:
   - Distinct workspace / section / interactive surface layers.
   - Fewer nested borders and repetitive shadows.
   - Stronger typography hierarchy and vertical rhythm.
   - Neutral treatment only; module accents belong to Cycle 2/4.
   - No workflow, data, business-logic or search changes.
====================================================================== */

:root,
html[data-theme="dark"] {
  --saas-canvas: #07111f;
  --saas-workspace: #0a1628;
  --saas-section: #0f1d31;
  --saas-surface: #13243a;
  --saas-surface-raised: #172a43;
  --saas-surface-soft: rgba(148, 163, 184, 0.055);
  --saas-keyline: rgba(148, 163, 184, 0.18);
  --saas-keyline-soft: rgba(148, 163, 184, 0.095);
  --saas-keyline-strong: rgba(148, 163, 184, 0.27);
  --saas-text-primary: #edf4fb;
  --saas-text-secondary: #b6c5d6;
  --saas-text-tertiary: #8194aa;
  --saas-shadow-workspace: 0 10px 30px rgba(0, 0, 0, 0.18);
  --saas-shadow-card: 0 5px 16px rgba(0, 0, 0, 0.16);
  --saas-shadow-raised: 0 9px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] {
  --saas-canvas: #eef2f6;
  --saas-workspace: #f7f9fc;
  --saas-section: #ffffff;
  --saas-surface: #f8fafc;
  --saas-surface-raised: #ffffff;
  --saas-surface-soft: rgba(15, 23, 42, 0.035);
  --saas-keyline: rgba(15, 23, 42, 0.11);
  --saas-keyline-soft: rgba(15, 23, 42, 0.065);
  --saas-keyline-strong: rgba(15, 23, 42, 0.17);
  --saas-text-primary: #142033;
  --saas-text-secondary: #475467;
  --saas-text-tertiary: #667085;
  --saas-shadow-workspace: 0 9px 26px rgba(15, 23, 42, 0.065);
  --saas-shadow-card: 0 4px 14px rgba(15, 23, 42, 0.055);
  --saas-shadow-raised: 0 9px 24px rgba(15, 23, 42, 0.085);
}

/* ----------------------------------------------------------------------
   1. Canvas and workspace hierarchy
------------------------------------------------------------------------ */
html body {
  background: var(--saas-canvas) !important;
}

html body #MainCanvas {
  color: var(--ui-text) !important;
}

/* The outer shell is a workspace, not another floating card. */
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 {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-workspace) !important;
  box-shadow: var(--saas-shadow-workspace), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Remove decorative glow repetition. Hierarchy now comes from surfaces. */
html body #MainCanvas .products-shell::after,
html body #MainCanvas .sales-docs-shell::after,
html body #MainCanvas .purchase-docs-shell::after,
html body #MainCanvas .retail-clients-shell::after,
html body #MainCanvas .wholesale-customers-shell::after,
html body #MainCanvas .suppliers-shell::after,
html body #MainCanvas .payments-shell::after,
html body #MainCanvas .receipts-shell::after,
html body #MainCanvas .edit-shell::after,
html body #MainCanvas .detail-edit-shell::after,
html body #MainCanvas .detail-shell::after,
html body #MainCanvas .client-view-shell::after,
html body #MainCanvas .ppsd-shell::after {
  display: none !important;
}

/* The top hairline stays neutral in Cycle 1; semantic accents arrive in Cycle 2. */
html body #MainCanvas .products-shell::before,
html body #MainCanvas .sales-docs-shell::before,
html body #MainCanvas .purchase-docs-shell::before,
html body #MainCanvas .retail-clients-shell::before,
html body #MainCanvas .wholesale-customers-shell::before,
html body #MainCanvas .suppliers-shell::before,
html body #MainCanvas .payments-shell::before,
html body #MainCanvas .receipts-shell::before,
html body #MainCanvas .product-categories-shell::before,
html body #MainCanvas .catalog-shell::before,
html body #MainCanvas .price-lists-shell::before,
html body #MainCanvas .purchase-supplier-docs-shell::before,
html body #MainCanvas .payments-supplier-shell::before,
html body #MainCanvas .edit-shell::before,
html body #MainCanvas .detail-edit-shell::before,
html body #MainCanvas .detail-shell::before,
html body #MainCanvas .client-view-shell::before,
html body #MainCanvas .ppsd-shell::before {
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(90deg, transparent, var(--saas-keyline-strong) 18%, var(--saas-keyline-strong) 82%, transparent) !important;
  opacity: .72 !important;
}

/* ----------------------------------------------------------------------
   2. Page heading: page identity, not another box
------------------------------------------------------------------------ */
html body #MainCanvas .page-title.shell.section-header {
  min-height: 58px !important;
  justify-content: flex-start !important;
  margin: 0 0 var(--ui-space-5) !important;
  padding: 8px 4px 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--saas-keyline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--saas-text-primary) !important;
  font-size: clamp(18px, 1.15vw, 22px) !important;
  font-weight: 650 !important;
  line-height: 1.22 !important;
  letter-spacing: -.022em !important;
}

html body #MainCanvas .page-title.shell.section-header::before {
  top: 13px !important;
  bottom: 15px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: var(--saas-keyline-strong) !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   3. Toolbars: command band rather than another nested panel
------------------------------------------------------------------------ */
html body #MainCanvas .products-toolbar,
html body #MainCanvas .sales-docs-toolbar,
html body #MainCanvas .purchase-docs-toolbar,
html body #MainCanvas .retail-clients-toolbar,
html body #MainCanvas .wholesale-customers-toolbar,
html body #MainCanvas .suppliers-toolbar,
html body #MainCanvas .payments-toolbar,
html body #MainCanvas .receipts-toolbar,
html body #MainCanvas .edit-toolbar,
html body #MainCanvas .detail-edit-toolbar,
html body #MainCanvas .client-view-toolbar,
html body #MainCanvas .ppsd-toolbar,
html body #MainCanvas .catalog-toolbar {
  margin-bottom: var(--ui-space-5) !important;
  padding-bottom: var(--ui-space-4) !important;
  border-bottom-color: var(--saas-keyline-soft) !important;
}

/* Toolbar cards are intentionally flattened to avoid card-on-card repetition. */
html body #MainCanvas .edit-toolbar-card,
html body #MainCanvas .detail-edit-toolbar-card,
html body #MainCanvas .detail-toolbar-card,
html body #MainCanvas .catalog-toolbar-card {
  padding: 4px 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--saas-keyline-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------
   4. Section surfaces: three visual levels
------------------------------------------------------------------------ */
/* Level 2: command/filter surfaces. Quiet and flat. */
html body #MainCanvas .products-search-card,
html body #MainCanvas .products-filters-card,
html body #MainCanvas .sales-docs-search-card,
html body #MainCanvas .purchase-docs-search-card,
html body #MainCanvas .retail-clients-search-card,
html body #MainCanvas .suppliers-search-card,
html body #MainCanvas .payments-search-card,
html body #MainCanvas .receipts-search-card,
html body #MainCanvas .search-style-card {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  box-shadow: none !important;
}

/* Level 2: primary form/detail sections. */
html body #MainCanvas .edit-form-card,
html body #MainCanvas .detail-edit-form-card,
html body #MainCanvas .detail-table-card,
html body #MainCanvas .client-view-card,
html body #MainCanvas .ppsd-card {
  margin-bottom: var(--ui-space-5) !important;
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-section) !important;
  box-shadow: none !important;
}

/* Level 3 / raised: data and preview surfaces deserve more weight. */
html body #MainCanvas .products-table-card,
html body #MainCanvas .sales-docs-table-card,
html body #MainCanvas .purchase-docs-table-card,
html body #MainCanvas .retail-clients-table-card,
html body #MainCanvas .wholesale-customers-card,
html body #MainCanvas .suppliers-table-card,
html body #MainCanvas .payments-table-card,
html body #MainCanvas .receipts-table-card,
html body #MainCanvas .catalog-table-card,
html body #MainCanvas .edit-preview-card {
  border-color: var(--saas-keyline) !important;
  background: var(--saas-surface-raised) !important;
  box-shadow: var(--saas-shadow-card) !important;
}

/* Action / footer cards are tertiary and should not compete with content. */
html body #MainCanvas .edit-actions-card,
html body #MainCanvas .detail-edit-actions-card,
html body #MainCanvas .detail-edit-actions-row,
html body #MainCanvas .edit-actions,
html body #MainCanvas .ppsd-actions {
  background: transparent !important;
  box-shadow: none !important;
}

html body #MainCanvas .edit-actions-card,
html body #MainCanvas .detail-edit-actions-card {
  border-color: var(--saas-keyline-soft) !important;
}

/* Generic nested Bootstrap/cards inside a premium section become tertiary surfaces,
   preventing the "box inside box inside box" effect. */
html body #MainCanvas .edit-form-card .card,
html body #MainCanvas .detail-edit-form-card .card,
html body #MainCanvas .detail-table-card .card,
html body #MainCanvas .client-view-card .card,
html body #MainCanvas .ppsd-card .card,
html body #MainCanvas .products-search-card .card,
html body #MainCanvas .products-filters-card .card {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-surface) !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------
   5. Typography 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,
html body #MainCanvas .wholesale-customers-card-title {
  margin-bottom: var(--ui-space-5) !important;
  padding-left: 0 !important;
  color: var(--saas-text-primary) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.012em !important;
}

/* Gold/accent bars were appearing on nearly every section. Neutralize them in
   hierarchy cycle; semantic accents are intentionally introduced in Cycle 2. */
html body #MainCanvas .edit-section-title::before,
html body #MainCanvas .detail-edit-section-title::before,
html body #MainCanvas .detail-section-title::before,
html body #MainCanvas .client-view-title::before,
html body #MainCanvas .ppsd-card-title::before,
html body #MainCanvas .catalog-section-title::before {
  display: none !important;
}

html body #MainCanvas .ppsd-card-subtitle,
html body #MainCanvas .catalog-section-subtitle,
html body #MainCanvas .client-view-subtitle,
html body #MainCanvas .wholesale-customers-card-subtitle {
  color: var(--saas-text-tertiary) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Labels recede; values and controls carry the content weight. */
html body #MainCanvas .edit-label,
html body #MainCanvas .detail-edit-label,
html body #MainCanvas .client-view-label,
html body #MainCanvas .ppsd-label,
html body #MainCanvas .products-search-label,
html body #MainCanvas .products-filters-title,
html body #MainCanvas label.label-block {
  color: var(--saas-text-tertiary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: .012em !important;
}

html body #MainCanvas .client-view-value,
html body #MainCanvas .detail-value,
html body #MainCanvas .ppsd-value,
html body #MainCanvas strong,
html body #MainCanvas b {
  text-rendering: geometricPrecision;
}

/* Search/filter section labels should read as section metadata, not mini headlines. */
html body #MainCanvas .products-search-label,
html body #MainCanvas .products-filters-title {
  margin-bottom: 8px !important;
}

/* ----------------------------------------------------------------------
   6. Data hierarchy
------------------------------------------------------------------------ */
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-surface) !important;
  color: var(--saas-text-secondary) !important;
  border-bottom-color: var(--saas-keyline) !important;
  letter-spacing: .025em !important;
}

html body #MainCanvas .table-card table tbody td,
html body #MainCanvas table[class$="-table"] tbody td,
html body #MainCanvas table[class*="-table "] tbody td,
html body #MainCanvas table.detail-table tbody td,
html body #MainCanvas table.table.data-table tbody td {
  border-bottom-color: var(--saas-keyline-soft) !important;
}

/* Reduce the number of pills that visually compete with data. */
html body #MainCanvas [class$="-count"],
html body #MainCanvas [class*="-count "] {
  border-color: var(--saas-keyline-soft) !important;
  background: var(--saas-surface-soft) !important;
  color: var(--saas-text-secondary) !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------------
   7. Rhythm — make section boundaries readable without more borders
------------------------------------------------------------------------ */
html body #MainCanvas .edit-form-card + .edit-form-card,
html body #MainCanvas .detail-edit-form-card + .detail-edit-form-card,
html body #MainCanvas .client-view-card + .client-view-card,
html body #MainCanvas .ppsd-card + .ppsd-card {
  margin-top: var(--ui-space-5) !important;
}

html body #MainCanvas [class*="-table-card"] + [class*="-summary"],
html body #MainCanvas [class*="-table-card"] + [class*="-pagination"],
html body #MainCanvas [class*="-table-card"] + [class*="-load-more"] {
  margin-top: var(--ui-space-3) !important;
}

/* ----------------------------------------------------------------------
   8. Light-specific finesse: keep depth without grey-on-grey monotony
------------------------------------------------------------------------ */
html[data-theme="light"] body #MainCanvas .products-shell,
html[data-theme="light"] body #MainCanvas .sales-docs-shell,
html[data-theme="light"] body #MainCanvas .purchase-docs-shell,
html[data-theme="light"] body #MainCanvas .retail-clients-shell,
html[data-theme="light"] body #MainCanvas .wholesale-customers-shell,
html[data-theme="light"] body #MainCanvas .suppliers-shell,
html[data-theme="light"] body #MainCanvas .payments-shell,
html[data-theme="light"] body #MainCanvas .receipts-shell,
html[data-theme="light"] body #MainCanvas .edit-shell,
html[data-theme="light"] body #MainCanvas .detail-edit-shell,
html[data-theme="light"] body #MainCanvas .detail-shell,
html[data-theme="light"] body #MainCanvas .client-view-shell,
html[data-theme="light"] body #MainCanvas .ppsd-shell {
  box-shadow: var(--saas-shadow-workspace) !important;
}

/* ----------------------------------------------------------------------
   9. Responsive: hierarchy survives, decoration steps back
------------------------------------------------------------------------ */
@media (max-width: 900px) {
  html body #MainCanvas .page-title.shell.section-header {
    min-height: 50px !important;
    margin-bottom: var(--ui-space-4) !important;
    padding: 8px 2px 12px 13px !important;
    font-size: 17px !important;
  }

  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 .edit-shell,
  html body #MainCanvas .detail-edit-shell,
  html body #MainCanvas .detail-shell,
  html body #MainCanvas .client-view-shell,
  html body #MainCanvas .ppsd-shell {
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: none !important;
  }

  html body #MainCanvas .edit-form-card,
  html body #MainCanvas .detail-edit-form-card,
  html body #MainCanvas .detail-table-card,
  html body #MainCanvas .client-view-card,
  html body #MainCanvas .ppsd-card,
  html body #MainCanvas .products-search-card,
  html body #MainCanvas .products-filters-card,
  html body #MainCanvas .sales-docs-search-card,
  html body #MainCanvas .purchase-docs-search-card,
  html body #MainCanvas .retail-clients-search-card,
  html body #MainCanvas .suppliers-search-card,
  html body #MainCanvas .payments-search-card,
  html body #MainCanvas .receipts-search-card {
    border-radius: var(--ui-radius-md) !important;
  }
}