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

   Semantic accents only:
   - Restrained module identity through small signature accents.
   - KPI cards become calmer: colour in edge/icon, not every value.
   - Financial positive / negative / neutral states remain semantic but quiet.
   - Gold is reserved for real primary CTAs instead of generic decoration.
   - No workflow, business-logic, search or layout changes.
====================================================================== */

:root,
html[data-theme="dark"] {
  --saas-gold: #d8b85a;
  --saas-gold-hover: #e2c56d;
  --saas-blue: #6f9cf5;
  --saas-cyan: #55bfd4;
  --saas-emerald: #55c894;
  --saas-violet: #9b83ee;
  --saas-amber: #d9a055;
  --saas-coral: #e17972;
  --saas-neutral: #8da1b7;

  --saas-positive: #65d3a1;
  --saas-positive-soft: rgba(101, 211, 161, .075);
  --saas-positive-border: rgba(101, 211, 161, .22);
  --saas-negative: #ef8585;
  --saas-negative-soft: rgba(239, 133, 133, .075);
  --saas-negative-border: rgba(239, 133, 133, .22);
  --saas-warning: #dfac61;
  --saas-warning-soft: rgba(223, 172, 97, .08);
  --saas-warning-border: rgba(223, 172, 97, .23);
  --saas-neutral-soft: rgba(141, 161, 183, .065);
  --saas-neutral-border: rgba(141, 161, 183, .16);
}

html[data-theme="light"] {
  --saas-gold: #9a7214;
  --saas-gold-hover: #7f5d0d;
  --saas-blue: #315fbd;
  --saas-cyan: #187d97;
  --saas-emerald: #187a55;
  --saas-violet: #6848b8;
  --saas-amber: #9a6419;
  --saas-coral: #b64b45;
  --saas-neutral: #667085;

  --saas-positive: #147a55;
  --saas-positive-soft: rgba(20, 122, 85, .055);
  --saas-positive-border: rgba(20, 122, 85, .18);
  --saas-negative: #b84040;
  --saas-negative-soft: rgba(184, 64, 64, .055);
  --saas-negative-border: rgba(184, 64, 64, .18);
  --saas-warning: #9a6419;
  --saas-warning-soft: rgba(154, 100, 25, .055);
  --saas-warning-border: rgba(154, 100, 25, .18);
  --saas-neutral-soft: rgba(102, 112, 133, .045);
  --saas-neutral-border: rgba(102, 112, 133, .14);
}

/* ----------------------------------------------------------------------
   1. Module identity — a small signature, never a full-colour shell
------------------------------------------------------------------------ */
html body #MainCanvas .products-shell,
html body #MainCanvas .product-categories-shell,
html body #MainCanvas .catalog-shell,
html body #MainCanvas .price-lists-shell {
  --saas-module-accent: var(--saas-blue);
}

html body #MainCanvas .sales-docs-shell {
  --saas-module-accent: var(--saas-cyan);
}

html body #MainCanvas .purchase-docs-shell,
html body #MainCanvas .purchase-supplier-docs-shell {
  --saas-module-accent: var(--saas-coral);
}

html body #MainCanvas .retail-clients-shell,
html body #MainCanvas .wholesale-customers-shell {
  --saas-module-accent: var(--saas-cyan);
}

html body #MainCanvas .suppliers-shell {
  --saas-module-accent: var(--saas-violet);
}

html body #MainCanvas .receipts-shell {
  --saas-module-accent: var(--saas-emerald);
}

html body #MainCanvas .payments-shell,
html body #MainCanvas .payments-supplier-shell {
  --saas-module-accent: var(--saas-amber);
}

/* Forms/details do not have a reliable module class in this legacy app.
   Keep them neutral rather than guessing semantic identity. */
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 {
  --saas-module-accent: var(--saas-neutral);
}

/* Replace the neutral top hairline from Cycle 1 with a restrained module tint. */
html body #MainCanvas .products-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 .sales-docs-shell::before,
html body #MainCanvas .purchase-docs-shell::before,
html body #MainCanvas .purchase-supplier-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 .receipts-shell::before,
html body #MainCanvas .payments-shell::before,
html body #MainCanvas .payments-supplier-shell::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--saas-module-accent) 48%, transparent) 16%,
    color-mix(in srgb, var(--saas-module-accent) 48%, transparent) 84%,
    transparent
  ) !important;
  opacity: .9 !important;
}

/* The page marker becomes the main module signature. */
html body #MainCanvas .products-shell .page-title.shell.section-header::before,
html body #MainCanvas .product-categories-shell .page-title.shell.section-header::before,
html body #MainCanvas .catalog-shell .page-title.shell.section-header::before,
html body #MainCanvas .price-lists-shell .page-title.shell.section-header::before,
html body #MainCanvas .sales-docs-shell .page-title.shell.section-header::before,
html body #MainCanvas .purchase-docs-shell .page-title.shell.section-header::before,
html body #MainCanvas .purchase-supplier-docs-shell .page-title.shell.section-header::before,
html body #MainCanvas .retail-clients-shell .page-title.shell.section-header::before,
html body #MainCanvas .wholesale-customers-shell .page-title.shell.section-header::before,
html body #MainCanvas .suppliers-shell .page-title.shell.section-header::before,
html body #MainCanvas .receipts-shell .page-title.shell.section-header::before,
html body #MainCanvas .payments-shell .page-title.shell.section-header::before,
html body #MainCanvas .payments-supplier-shell .page-title.shell.section-header::before {
  background: var(--saas-module-accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--saas-module-accent) 12%, transparent),
              0 0 18px color-mix(in srgb, var(--saas-module-accent) 12%, transparent) !important;
}

/* Dataset heading follows the module without turning the whole card colourful. */
html body #MainCanvas [class$="-shell"] .dataset-dashboard-kicker,
html body #MainCanvas [class*="-shell "] .dataset-dashboard-kicker {
  color: var(--saas-module-accent, var(--saas-neutral)) !important;
}

/* ----------------------------------------------------------------------
   2. KPI cards — colour is metadata, not the entire content hierarchy
------------------------------------------------------------------------ */
html body #MainCanvas .dataset-summary-card {
  border-color: var(--saas-keyline-soft) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--saas-surface-raised) 88%, transparent), var(--saas-surface)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022) !important;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}

html body #MainCanvas .dataset-summary-card:hover {
  border-color: var(--saas-keyline) !important;
  transform: translateY(-1px);
}

/* Thinner rail: enough to communicate tone without traffic-light blocks. */
html body #MainCanvas .dataset-summary-card::before {
  width: 2px !important;
  background: var(--saas-neutral) !important;
}

html body #MainCanvas .dataset-summary-card.dataset-tone-positive::before { background: var(--saas-positive) !important; }
html body #MainCanvas .dataset-summary-card.dataset-tone-negative::before { background: var(--saas-negative) !important; }
html body #MainCanvas .dataset-summary-card.dataset-tone-warning::before { background: var(--saas-warning) !important; }
html body #MainCanvas .dataset-summary-card.dataset-tone-info::before { background: var(--saas-module-accent, var(--saas-blue)) !important; }
html body #MainCanvas .dataset-summary-card.dataset-tone-purple::before { background: var(--saas-violet) !important; }

/* Icons keep semantic colour; values remain typographically dominant and calm. */
html body #MainCanvas .dataset-summary-icon {
  border: 1px solid var(--saas-neutral-border) !important;
  background: var(--saas-neutral-soft) !important;
  color: var(--saas-neutral) !important;
}

html body #MainCanvas .dataset-tone-positive .dataset-summary-icon {
  border-color: var(--saas-positive-border) !important;
  background: var(--saas-positive-soft) !important;
  color: var(--saas-positive) !important;
}
html body #MainCanvas .dataset-tone-negative .dataset-summary-icon {
  border-color: var(--saas-negative-border) !important;
  background: var(--saas-negative-soft) !important;
  color: var(--saas-negative) !important;
}
html body #MainCanvas .dataset-tone-warning .dataset-summary-icon {
  border-color: var(--saas-warning-border) !important;
  background: var(--saas-warning-soft) !important;
  color: var(--saas-warning) !important;
}
html body #MainCanvas .dataset-tone-info .dataset-summary-icon {
  border-color: color-mix(in srgb, var(--saas-module-accent, var(--saas-blue)) 24%, transparent) !important;
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-blue)) 8%, transparent) !important;
  color: var(--saas-module-accent, var(--saas-blue)) !important;
}
html body #MainCanvas .dataset-tone-purple .dataset-summary-icon {
  border-color: color-mix(in srgb, var(--saas-violet) 24%, transparent) !important;
  background: color-mix(in srgb, var(--saas-violet) 8%, transparent) !important;
  color: var(--saas-violet) !important;
}

/* Tone no longer paints every headline number. Context-aware financial state
   (added by financial-states.js) may still colour a true money value below. */
html body #MainCanvas .dataset-summary-card .dataset-summary-value,
html body #MainCanvas .dataset-tone-positive .dataset-summary-value,
html body #MainCanvas .dataset-tone-negative .dataset-summary-value,
html body #MainCanvas .dataset-tone-warning .dataset-summary-value,
html body #MainCanvas .dataset-tone-info .dataset-summary-value,
html body #MainCanvas .dataset-tone-purple .dataset-summary-value {
  color: var(--saas-text-primary) !important;
  font-weight: 760 !important;
}

html body #MainCanvas .dataset-summary-value.financial-positive {
  color: var(--saas-positive) !important;
}
html body #MainCanvas .dataset-summary-value.financial-negative {
  color: var(--saas-negative) !important;
}
html body #MainCanvas .dataset-summary-value.financial-zero {
  color: var(--saas-text-secondary) !important;
}

/* ----------------------------------------------------------------------
   3. Financial semantics — readable, quiet, consistent
------------------------------------------------------------------------ */
html body #MainCanvas .financial-state-value.financial-positive,
html body #MainCanvas .financial-state-value.financial-positive strong,
html body #MainCanvas .financial-state-value.financial-positive b,
html body #MainCanvas .financial-state-value.financial-positive span,
html body #MainCanvas .financial-input-group.financial-positive .edit-input-addon,
html body #MainCanvas .financial-input-group.financial-positive .edit-readonly-input,
html body #MainCanvas .financial-input-group.financial-positive .input-group-addon {
  color: var(--saas-positive) !important;
}

html body #MainCanvas .financial-state-value.financial-negative,
html body #MainCanvas .financial-state-value.financial-negative strong,
html body #MainCanvas .financial-state-value.financial-negative b,
html body #MainCanvas .financial-state-value.financial-negative span,
html body #MainCanvas .financial-input-group.financial-negative .edit-input-addon,
html body #MainCanvas .financial-input-group.financial-negative .edit-readonly-input,
html body #MainCanvas .financial-input-group.financial-negative .input-group-addon {
  color: var(--saas-negative) !important;
}

html body #MainCanvas .financial-state-value.financial-zero,
html body #MainCanvas .financial-state-value.financial-zero strong,
html body #MainCanvas .financial-state-value.financial-zero b,
html body #MainCanvas .financial-state-value.financial-zero span,
html body #MainCanvas .financial-input-group.financial-zero .edit-input-addon,
html body #MainCanvas .financial-input-group.financial-zero .edit-readonly-input,
html body #MainCanvas .financial-input-group.financial-zero .input-group-addon {
  color: var(--saas-neutral) !important;
}

/* Normal data cells receive only a whisper of semantic tint. */
html body #MainCanvas td[data-financial-value].financial-positive,
html body #MainCanvas th[data-financial-value].financial-positive {
  border-color: transparent !important;
  background: var(--saas-positive-soft) !important;
}
html body #MainCanvas td[data-financial-value].financial-negative,
html body #MainCanvas th[data-financial-value].financial-negative {
  border-color: transparent !important;
  background: var(--saas-negative-soft) !important;
}
html body #MainCanvas td[data-financial-value].financial-zero,
html body #MainCanvas th[data-financial-value].financial-zero {
  border-color: transparent !important;
  background: transparent !important;
}

/* Totals deserve stronger semantic treatment than ordinary rows. */
html body #MainCanvas tr.financial-total-row td.financial-positive,
html body #MainCanvas tr.financial-total-row th.financial-positive {
  border-color: var(--saas-positive-border) !important;
  background: color-mix(in srgb, var(--saas-positive) 10%, var(--saas-surface-raised)) !important;
}
html body #MainCanvas tr.financial-total-row td.financial-negative,
html body #MainCanvas tr.financial-total-row th.financial-negative {
  border-color: var(--saas-negative-border) !important;
  background: color-mix(in srgb, var(--saas-negative) 10%, var(--saas-surface-raised)) !important;
}

/* Charts share the same quieter semantic palette. */
html body #MainCanvas .dataset-tone-bg-positive { background: var(--saas-positive) !important; }
html body #MainCanvas .dataset-tone-bg-negative { background: var(--saas-negative) !important; }
html body #MainCanvas .dataset-tone-bg-warning { background: var(--saas-warning) !important; }
html body #MainCanvas .dataset-tone-bg-info { background: var(--saas-module-accent, var(--saas-blue)) !important; }
html body #MainCanvas .dataset-tone-bg-purple { background: var(--saas-violet) !important; }
html body #MainCanvas .dataset-tone-bg-neutral { background: var(--saas-neutral) !important; }

/* ----------------------------------------------------------------------
   4. Gold becomes scarce — primary CTA only
------------------------------------------------------------------------ */
/* Generic counters/chips use module or neutral identity instead of gold. */
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;
}

/* Selected/active filter chips use module identity; the global gold is not spent here. */
html body #MainCanvas [class*="filter"].active,
html body #MainCanvas [class*="filter"].is-active,
html body #MainCanvas [class*="chip"].active,
html body #MainCanvas [class*="chip"].is-active {
  border-color: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 28%, var(--saas-keyline)) !important;
  background: color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 8%, var(--saas-section)) !important;
  color: var(--saas-module-accent, var(--saas-text-secondary)) !important;
  box-shadow: none !important;
}

/* Primary CTA remains intentionally valuable. Dark keeps brushed gold; Light
   keeps the existing accessible blue behaviour from the base theme. */
html[data-theme="dark"] body #MainCanvas .btn-primary,
html[data-theme="dark"] body #MainCanvas .edit-btn-primary,
html[data-theme="dark"] body #MainCanvas .detail-edit-btn-primary,
html[data-theme="dark"] body #MainCanvas [type="submit"]:not(.btn-danger):not(.btn-success) {
  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;
  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 .btn-primary:hover,
html[data-theme="dark"] body #MainCanvas .btn-primary:focus,
html[data-theme="dark"] body #MainCanvas .edit-btn-primary:hover,
html[data-theme="dark"] body #MainCanvas .detail-edit-btn-primary:hover {
  border-color: var(--saas-gold-hover) !important;
  background: var(--saas-gold-hover) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 7px 18px rgba(0,0,0,.2) !important;
}

/* ----------------------------------------------------------------------
   5. Analytics — module-aware but still secondary to operational data
------------------------------------------------------------------------ */
html body #MainCanvas [class$="-shell"] .dataset-charts-summary,
html body #MainCanvas [class*="-shell "] .dataset-charts-summary {
  border-bottom: 1px solid color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 14%, var(--saas-keyline-soft)) !important;
}

html body #MainCanvas [class$="-shell"] .dataset-chart-card,
html body #MainCanvas [class*="-shell "] .dataset-chart-card {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--saas-module-accent, var(--saas-neutral)) 2.5%, var(--saas-surface)),
      var(--saas-surface)) !important;
}

/* ----------------------------------------------------------------------
   6. Responsive — accents become even quieter on compact screens
------------------------------------------------------------------------ */
@media (max-width: 900px) {
  html body #MainCanvas .dataset-summary-card::before {
    width: 2px !important;
  }

  html body #MainCanvas .products-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 .sales-docs-shell::before,
  html body #MainCanvas .purchase-docs-shell::before,
  html body #MainCanvas .purchase-supplier-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 .receipts-shell::before,
  html body #MainCanvas .payments-shell::before,
  html body #MainCanvas .payments-supplier-shell::before {
    opacity: .62 !important;
  }
}