/* ======================================================================
   TRADER PREMIUM FLUID LAYOUT — WIDE-SCREEN CONSISTENCY V2

   Purpose:
   - Eliminate remaining narrow-left-column layouts on operational screens.
   - Use the full available desktop width for lists, reports and detail lists.
   - Keep edit/add/auth/dashboard reading widths intentionally restrained.
   - Visual/layout only; no workflow, SQL or JavaScript changes.
====================================================================== */

:root {
  --ui-content-wide-gutter: clamp(12px, 1.25vw, 26px);
  --ui-form-workspace-max: 1920px;
  --ui-dashboard-workspace-max: 1600px;
  --ui-dashboard-card-max: 1100px;
}

/* Normal application screens are document flows, not centred flex canvases.
   Leaving the legacy flex centring active caused different screens to size
   differently depending on their immediate child markup. */
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Shared page title belongs to the full application work area. */
html body #MainCanvas > .premium-page-title-row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 15px var(--ui-content-wide-gutter) 10px !important;
  box-sizing: border-box !important;
}

html body #MainCanvas > .premium-page-title-row > .premium-page-title-column {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Operational/list/report/detail-list families use all available width.
   No fixed desktop cap: wide monitors should not waste half the workspace. */
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 .detail-module {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--ui-content-wide-gutter) !important;
  padding-right: var(--ui-content-wide-gutter) !important;
  box-sizing: border-box !important;
}

/* Future-proof operational modules: any top-level module that is not a
   form/edit/view family inherits the wide-screen contract automatically. */
html body #MainCanvas > [class$="-module"]:not(.edit-module):not(.detail-edit-module):not(.client-view-module):not(.ppsd-module) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--ui-content-wide-gutter) !important;
  padding-right: var(--ui-content-wide-gutter) !important;
  box-sizing: border-box !important;
}

/* Shells and dataset surfaces must consume the width granted by their module. */
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 .detail-shell,
html body #MainCanvas .dataset-dashboard-summary,
html body #MainCanvas .dataset-charts-panel,
html body #MainCanvas [class$="-search-card"],
html body #MainCanvas [class$="-filters-card"],
html body #MainCanvas [class$="-table-card"],
html body #MainCanvas [class$="-table-wrap"],
html body #MainCanvas [id$="LiveResults"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Legacy index screens use Bootstrap rows instead of module shells. Keep the
   outer row full-width, while preserving intentional inner 6/4/3-column grids. */
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row > .col-md-12,
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row > .col-sm-12,
html body #MainCanvas.in-middle:not(.premium-auth):not(.premium-dashboard) > .row > .col-xs-12 {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Navigation aligns with the actual application workspace instead of a
   historical 1000/1440px desktop column. */
html body .nav-container {
  width: 100% !important;
  max-width: none !important;
  padding-left: var(--ui-content-wide-gutter) !important;
  padding-right: var(--ui-content-wide-gutter) !important;
  box-sizing: border-box !important;
}

/* Forms still need a readable line length, but the old 1440px ceiling wastes
   too much workspace on 1920/2K desktops. Give edit/detail/view families a
   wider, explicit form workspace while retaining a sensible ultrawide cap. */
html body #MainCanvas .edit-module,
html body #MainCanvas .detail-edit-module,
html body #MainCanvas .client-view-module,
html body #MainCanvas .ppsd-module {
  width: 100% !important;
  max-width: var(--ui-form-workspace-max) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html body #MainCanvas .edit-shell,
html body #MainCanvas .detail-edit-shell,
html body #MainCanvas .client-view-shell,
html body #MainCanvas .ppsd-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Main Menu remains a calm landing screen, but no longer looks like a tiny
   island on a full-HD/2K monitor. The logo itself is kept near native size. */
html body #MainCanvas.premium-dashboard {
  width: min(100%, var(--ui-dashboard-workspace-max)) !important;
  max-width: var(--ui-dashboard-workspace-max) !important;
}

html body #MainCanvas.premium-dashboard .premium-dashboard-logo-card {
  width: min(100%, var(--ui-dashboard-card-max)) !important;
  max-width: var(--ui-dashboard-card-max) !important;
  flex-basis: var(--ui-dashboard-card-max) !important;
}

html body #MainCanvas.premium-dashboard .premium-dashboard-logo {
  width: min(100%, 668px) !important;
  max-width: 668px !important;
}

@media (max-width: 767px) {
  :root {
    --ui-content-wide-gutter: 10px;
  }

  html body #MainCanvas > .premium-page-title-row {
    padding: 10px var(--ui-content-wide-gutter) 8px !important;
  }
}