/* PublicMarket page geometry. Loaded by both shared layouts in every environment.
   Business Dashboard reference: 1600px usable content, 240px/76px sidebar.
   See docs/architecture/page-layout.md before introducing a sizing exception. */
:root {
  --pm-page-max-width: 1600px;
  --pm-page-gutter: clamp(16px, 2.5vw, 32px);
  --pm-page-top: 24px;
  --pm-page-bottom: 32px;
  --pm-sidebar-width: 240px;
  --pm-sidebar-collapsed-width: 76px;
}

/* Public page sections and shared navigation use the same usable width.
   Narrow text, dialogs and other component limits remain component-owned. */
.container-shell {
  box-sizing: border-box;
  width: min(var(--pm-page-max-width), calc(100% - 2 * var(--pm-page-gutter)));
  margin-inline: auto;
}
body .navbar .container-shell {
  width: min(var(--pm-page-max-width), calc(100% - 2 * var(--pm-page-gutter)));
}

/* The shell owns gutters once, including notifications, sync and workspace context. */
.dashboard-body .dashboard-content-inner,
.pm-page-container {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: calc(var(--pm-page-max-width) + 2 * var(--pm-page-gutter));
  margin-inline: auto;
  padding: var(--pm-page-top) var(--pm-page-gutter) var(--pm-page-bottom);
}
.dashboard-body .dashboard-content { min-width: 0; padding: 0; }
.dashboard-body .dashboard-content > .dashboard-topbar {
  /* Keep the full-width sticky background while aligning its controls to content. */
  padding-inline: max(var(--pm-page-gutter), calc((100% - var(--pm-page-max-width)) / 2));
}

/* Existing page roots cannot introduce a second container. New unwrapped page
   content already inherits the shell. Heading-bearing wrappers and the reusable
   pm-page class also inherit it automatically. Do not target nested cards/forms. */
.dashboard-body .pm-page-container > :is(.pm-page, .container-shell, .dashboard-page, .commerce, section:has(h1), article:has(h1), div:has(h1)):not([data-pm-layout-exception]):not([role="dialog"]):not(.modal) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-top: 0;
}
.pm-page { min-width: 0; width: 100%; }
.pm-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }

@media (min-width: 992px) {
  .dashboard-body .dashboard-shell { grid-template-columns: var(--pm-sidebar-width) minmax(0, 1fr); }
  .dashboard-body.dashboard-sidebar-collapsed .dashboard-shell { grid-template-columns: var(--pm-sidebar-collapsed-width) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  :root { --pm-page-gutter: 16px; --pm-page-top: 16px; }
}