/* ======================================================================
   TRADER PREMIUM SCREENS — CYCLE 4/5

   Scope:
   - Screen-level hierarchy for high-use list, edit, detail and view screens.
   - Visual/cascade changes only. No business logic, URLs or workflows.
   - Builds on premium-foundation/components/data.
====================================================================== */

/* ----------------------------------------------------------------------
   Common page title — one quiet, premium page heading across the GUI.
------------------------------------------------------------------------ */
html body #MainCanvas .page-title.shell.section-header {
  position: relative !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-screen-title-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-screen-title-bg) !important;
  color: var(--ui-text-strong) !important;
  box-shadow: var(--ui-shadow-xs) !important;
  font-size: var(--ui-font-size-lg) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  line-height: var(--ui-leading-tight) !important;
  letter-spacing: var(--ui-tracking-tight) !important;
}

html body #MainCanvas .page-title.shell.section-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  background: var(--ui-accent) !important;
  opacity: .86 !important;
}

html body #MainCanvas .page-title.shell.section-header hr {
  display: none !important;
}

/* ----------------------------------------------------------------------
   Screen modules — coherent width and breathing room.
------------------------------------------------------------------------ */
html body #MainCanvas .products-module,
html body #MainCanvas .sales-docs-module,
html body #MainCanvas .purchase-docs-module,
html body #MainCanvas .retail-clients-module,
html body #MainCanvas .wholesale-customers-module,
html body #MainCanvas .suppliers-module,
html body #MainCanvas .payments-module,
html body #MainCanvas .receipts-module,
html body #MainCanvas .product-categories-module,
html body #MainCanvas .catalog-module,
html body #MainCanvas .price-lists-module,
html body #MainCanvas .purchase-supplier-docs-module,
html body #MainCanvas .payments-supplier-module,
html body #MainCanvas .edit-module,
html body #MainCanvas .detail-edit-module,
html body #MainCanvas .detail-module,
html body #MainCanvas .client-view-module,
html body #MainCanvas .ppsd-module {
  width: min(100%, var(--ui-content-max)) !important;
  margin-inline: auto !important;
  padding: 0 var(--ui-content-gutter) var(--ui-space-8) !important;
  box-sizing: border-box !important;
}

/* ----------------------------------------------------------------------
   Primary shells — executive financial surface, not decorative glass.
------------------------------------------------------------------------ */
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 {
  position: relative !important;
  isolation: isolate !important;
  overflow: clip !important;
  padding: clamp(16px, 1.7vw, 24px) !important;
  border: 1px solid var(--ui-screen-shell-border) !important;
  border-radius: var(--ui-radius-xl) !important;
  background: var(--ui-screen-shell-bg) !important;
  box-shadow: var(--ui-shadow-md), inset 0 1px 0 var(--ui-screen-shell-highlight) !important;
  backdrop-filter: none !important;
}

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 {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 0 !important;
  left: 8% !important;
  right: 8% !important;
  height: 1px !important;
  background: var(--ui-screen-accent-line) !important;
  opacity: .78 !important;
}

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 {
  content: "" !important;
  position: absolute !important;
  z-index: -2 !important;
  top: -110px !important;
  right: -90px !important;
  width: 260px !important;
  height: 260px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--ui-screen-accent-glow) 0%, transparent 68%) !important;
  pointer-events: none !important;
}

/* ----------------------------------------------------------------------
   Toolbars — actions read as one command band.
------------------------------------------------------------------------ */
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 {
  margin: 0 0 var(--ui-space-4) !important;
  padding: 0 0 var(--ui-space-4) !important;
  gap: var(--ui-space-2) !important;
  border-bottom: 1px solid var(--ui-divider) !important;
  background: transparent !important;
}

html body #MainCanvas .products-toolbar-left,
html body #MainCanvas .products-toolbar-right,
html body #MainCanvas .sales-docs-toolbar-left,
html body #MainCanvas .sales-docs-toolbar-right,
html body #MainCanvas .purchase-docs-toolbar-left,
html body #MainCanvas .purchase-docs-toolbar-right,
html body #MainCanvas .retail-clients-toolbar-left,
html body #MainCanvas .retail-clients-toolbar-right,
html body #MainCanvas .suppliers-toolbar-left,
html body #MainCanvas .suppliers-toolbar-right,
html body #MainCanvas .payments-toolbar-left,
html body #MainCanvas .payments-toolbar-right,
html body #MainCanvas .receipts-toolbar-left,
html body #MainCanvas .receipts-toolbar-right,
html body #MainCanvas .edit-toolbar-left,
html body #MainCanvas .edit-toolbar-right,
html body #MainCanvas .detail-edit-toolbar-left,
html body #MainCanvas .detail-edit-toolbar-right {
  gap: var(--ui-space-2) !important;
}

/* ----------------------------------------------------------------------
   Command/search surfaces — less card-on-card noise, stronger focus state.
------------------------------------------------------------------------ */
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 {
  position: relative !important;
  padding: var(--ui-space-4) !important;
  margin-bottom: var(--ui-space-4) !important;
  border: 1px solid var(--ui-screen-card-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-screen-card-bg) !important;
  box-shadow: var(--ui-shadow-xs) !important;
  transition: border-color var(--ui-duration-base) var(--ui-ease-standard), box-shadow var(--ui-duration-base) var(--ui-ease-standard) !important;
}

html body #MainCanvas .products-search-card:focus-within,
html body #MainCanvas .sales-docs-search-card:focus-within,
html body #MainCanvas .purchase-docs-search-card:focus-within,
html body #MainCanvas .retail-clients-search-card:focus-within,
html body #MainCanvas .suppliers-search-card:focus-within,
html body #MainCanvas .payments-search-card:focus-within,
html body #MainCanvas .receipts-search-card:focus-within,
html body #MainCanvas .search-style-card:focus-within {
  border-color: var(--ui-accent-soft-border) !important;
  box-shadow: var(--ui-shadow-xs), 0 0 0 3px var(--ui-focus-ring) !important;
}

/* Counts become quiet KPI anchors instead of loose text. */
html body #MainCanvas .products-count,
html body #MainCanvas .sales-docs-count,
html body #MainCanvas .purchase-docs-count,
html body #MainCanvas .retail-clients-count,
html body #MainCanvas .wholesale-customers-count,
html body #MainCanvas .suppliers-count,
html body #MainCanvas .payments-count,
html body #MainCanvas .receipts-count {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border: 1px solid var(--ui-screen-kpi-border) !important;
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-screen-kpi-bg) !important;
  color: var(--ui-text-strong) !important;
  font-size: var(--ui-font-size-xs) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ----------------------------------------------------------------------
   Data cards on primary screens — stronger container, quieter rows inside.
------------------------------------------------------------------------ */
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 {
  border: 1px solid var(--ui-screen-card-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-screen-card-bg) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

html body #MainCanvas .wholesale-customers-card-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--ui-divider) !important;
  background: var(--ui-data-head-bg) !important;
}

html body #MainCanvas .wholesale-customers-card-title {
  color: var(--ui-text-strong) !important;
  font-size: var(--ui-font-size-lg) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  letter-spacing: var(--ui-tracking-tight) !important;
}

html body #MainCanvas .wholesale-customers-card-subtitle {
  color: var(--ui-text-muted) !important;
}

/* ----------------------------------------------------------------------
   Edit / detail / client cards — consistent form hierarchy.
------------------------------------------------------------------------ */
html body #MainCanvas .edit-form-card,
html body #MainCanvas .edit-preview-card,
html body #MainCanvas .detail-edit-toolbar-card,
html body #MainCanvas .detail-edit-form-card,
html body #MainCanvas .detail-edit-actions-card,
html body #MainCanvas .detail-toolbar-card,
html body #MainCanvas .detail-table-card,
html body #MainCanvas .client-view-card,
html body #MainCanvas .ppsd-card {
  padding: clamp(16px, 1.45vw, 22px) !important;
  margin-bottom: var(--ui-space-4) !important;
  border: 1px solid var(--ui-screen-card-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-screen-card-bg) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

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 {
  position: relative !important;
  margin: 0 0 var(--ui-space-4) !important;
  padding-left: 12px !important;
  color: var(--ui-text-strong) !important;
  font-size: var(--ui-font-size-md) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  line-height: var(--ui-leading-snug) !important;
  letter-spacing: var(--ui-tracking-tight) !important;
}

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 {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .18em !important;
  bottom: .18em !important;
  width: 3px !important;
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-accent) !important;
  opacity: .82 !important;
}

html body #MainCanvas .ppsd-card-subtitle,
html body #MainCanvas .catalog-section-subtitle,
html body #MainCanvas .client-view-subtitle {
  color: var(--ui-text-muted) !important;
  font-size: var(--ui-font-size-xs) !important;
  line-height: var(--ui-leading-normal) !important;
}

html body #MainCanvas .edit-actions,
html body #MainCanvas .detail-edit-actions-row,
html body #MainCanvas .ppsd-actions {
  margin-top: var(--ui-space-4) !important;
  padding-top: var(--ui-space-4) !important;
  border-top: 1px solid var(--ui-divider) !important;
}

/* ----------------------------------------------------------------------
   Dashboard / Main Menu — restrained branded landing surface.
------------------------------------------------------------------------ */
html body #MainCanvas.premium-dashboard {
  width: min(100%, 1080px) !important;
  margin-inline: auto !important;
  padding: clamp(28px, 6vh, 72px) var(--ui-content-gutter) var(--ui-space-10) !important;
}

html body #MainCanvas.premium-dashboard .premium-dashboard-hero {
  width: 100% !important;
  margin: 0 auto var(--ui-space-6) !important;
  display: flex !important;
  justify-content: center !important;
}

html body #MainCanvas.premium-dashboard .premium-dashboard-spacer {
  display: none !important;
}

html body #MainCanvas.premium-dashboard .premium-dashboard-logo-card {
  position: relative !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  flex: 0 1 760px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 4vw, 46px) !important;
  text-align: center !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-screen-shell-border) !important;
  border-radius: var(--ui-radius-2xl) !important;
  background: var(--ui-screen-shell-bg) !important;
  box-shadow: var(--ui-shadow-lg), inset 0 1px 0 var(--ui-screen-shell-highlight) !important;
}

html body #MainCanvas.premium-dashboard .premium-dashboard-logo-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 14% !important;
  right: 14% !important;
  height: 1px !important;
  background: var(--ui-screen-accent-line) !important;
}

html body #MainCanvas.premium-dashboard .premium-dashboard-logo {
  display: block !important;
  width: min(100%, 620px) !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .18)) !important;
}

/* ----------------------------------------------------------------------
   Responsive screen rhythm.
------------------------------------------------------------------------ */
@media (max-width: 767px) {
  html body #MainCanvas .products-module,
  html body #MainCanvas .sales-docs-module,
  html body #MainCanvas .purchase-docs-module,
  html body #MainCanvas .retail-clients-module,
  html body #MainCanvas .wholesale-customers-module,
  html body #MainCanvas .suppliers-module,
  html body #MainCanvas .payments-module,
  html body #MainCanvas .receipts-module,
  html body #MainCanvas .edit-module,
  html body #MainCanvas .detail-edit-module,
  html body #MainCanvas .detail-module,
  html body #MainCanvas .client-view-module,
  html body #MainCanvas .ppsd-module {
    padding-left: 10px !important;
    padding-right: 10px !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 .edit-shell,
  html body #MainCanvas .detail-edit-shell,
  html body #MainCanvas .detail-shell,
  html body #MainCanvas .client-view-shell,
  html body #MainCanvas .ppsd-shell {
    padding: 14px !important;
    border-radius: var(--ui-radius-lg) !important;
  }

  html body #MainCanvas .page-title.shell.section-header {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: var(--ui-font-size-md) !important;
  }

  html body #MainCanvas.premium-dashboard {
    padding-top: var(--ui-space-6) !important;
  }

  html body #MainCanvas.premium-dashboard .premium-dashboard-logo-card {
    padding: 24px 18px !important;
    border-radius: var(--ui-radius-xl) !important;
  }
}