/* V882 — consistent browser zoom across Windows and macOS desktops.
   Desktop status is set before CSS in base.html (Mac desktop doesn't require
   pointer/hover matches). Touch iPad/iPhone remain responsive. Keep layout
   scoped to desktop: no manual transform or browser zoom manipulation. */

/* The banner must use the same *content* width as warnings and metric panels.
   A 100vw-based calculation creates different visible widths in Safari when
   browser page zoom changes its CSS viewport. */
html.app-desktop-device body.app-modern-shell main.page-container > .hero-banner-enhanced {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

/* Dashboard uses named grid areas (chart/news, top/activity,
   distribution/subscription). V882 accidentally used grid-column: 1 / -1
   for chart and top while the named right-column panels remained positioned;
   this caused panels to visibly overlap even at ordinary browser zoom. Keep
   every grid item inside its single, explicit area at any desktop zoom. */
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid {
  grid-template-columns: minmax(0,1.7fr) minmax(360px,.95fr) !important;
  grid-template-areas:
    "chart news"
    "top activity"
    "distribution subscription" !important;
  align-items: stretch;
}
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid > .dashboard-panel {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid > .dashboard-panel--chart { grid-area: chart !important; }
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid > .dashboard-panel--news { grid-area: news !important; }
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid > .dashboard-panel--top { grid-area: top !important; }
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid > .dashboard-panel--activity { grid-area: activity !important; }
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid > .dashboard-panel--distribution { grid-area: distribution !important; }
html.app-desktop-device body.dashboard-unified-body .dashboard-content-grid > .dashboard-panel--subscription { grid-area: subscription !important; }

/* Never allow monetary values/quantity labels to paint over one another.
   Some older dashboard breakpoints force incompatible two-column grids. */
html.app-desktop-device body.dashboard-unified-body .orders-card-row {
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}
html.app-desktop-device body.dashboard-unified-body .orders-card-primary {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
html.app-desktop-device body.dashboard-unified-body .orders-card-primary strong,
html.app-desktop-device body.dashboard-unified-body .orders-card-primary span {
  display: block !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
html.app-desktop-device body.dashboard-unified-body .orders-card-row .metric-change {
  grid-column: 2 !important;
  min-width: max-content !important;
  justify-self: end !important;
}

/* At very strong zoom, desktop composition intentionally overflows the visual
   viewport. Keep this width linked to the intrinsic site-shell, not 100vw. */
html.app-desktop-device body.app-modern-shell main.page-container {
  box-sizing: border-box !important;
  min-width: 0 !important;
}