/* Responsive layout layer for Vagard admin and WooCommerce customer views. */
body.vagard-system-screen,
body.toplevel_page_vagard,
body.vagard-design-system {
  --vg-layout-page-max: 2240px;
  --vg-layout-gutter: clamp(16px, 1.65vw, 36px);
}

/* Make the usable content area fluid instead of pinning layouts to old laptop widths. */
@media (min-width: 1501px) {
  body.vagard-system-screen #wpbody-content > :is(.wrap, .vagard-admin, .vagard-dashboard-v2),
  body.toplevel_page_vagard #wpbody-content > :is(.wrap, .vagard-admin, .vagard-dashboard-v2),
  body.vagard-design-system #wpbody-content > :is(.wrap, .vagard-admin) {
    box-sizing: border-box !important;
    width: calc(100% - 2 * var(--vg-layout-gutter)) !important;
    max-width: var(--vg-layout-page-max) !important;
    margin-inline: auto !important;
  }
  body.vg-settings-workspace-active .vg-config-workspace,
  body.vagard-system-screen .vagard-report-workspace,
  body.vagard-system-screen .vagard-routing-workspace,
  body.vagard-system-screen .vg-settings-landing,
  body.vagard-system-screen .vg-settings-form-shell {
    box-sizing: border-box;
    width: min(100%, var(--vg-layout-page-max));
    max-width: var(--vg-layout-page-max) !important;
    margin-inline: auto;
  }
  body.vg-automation-screen #wpbody-content .wrap.vagard-admin {
    width: calc(100% - 2 * var(--vg-layout-gutter)) !important;
    max-width: var(--vg-layout-page-max) !important;
    margin-inline: auto !important;
  }
}

/* Prevent nested flex/grid children and media from forcing the panel past its container. */
body.vagard-system-screen #wpbody-content :is(
  .vagard-admin, .vagard-dashboard-v2, .vagard-dashboard-grid,
  .vagard-workspace-grid, .vagard-admin-grid, .vagard-hub-grid,
  .vagard-dash-main, .vagard-dash-widgets, .vagard-dash-panel,
  .vagard-p-shell, .vagard-p-main, .vagard-p-card,
  .vagard-returns-page, .vagard-return-workspace,
  .vagard-report-workspace, .vagard-routing-workspace,
  .vg-config-workspace, .vg-config-inner,
  .vg-config-fieldgrid, .vg-config-field, .vagard-filterbar
) { min-width: 0; max-width: 100%; }
body.vagard-system-screen #wpbody-content :is(
  .vagard-admin, .vagard-dashboard-v2, .vagard-premium,
  .vagard-report-workspace, .vagard-routing-workspace, .vg-config-workspace
) :is(img, video, canvas) { max-width: 100%; }
body.vagard-system-screen #wpbody-content :is(
  .vagard-admin, .vagard-dashboard-v2, .vagard-premium,
  .vg-config-workspace, .vagard-report-workspace
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
}

/* Oversized tables should scroll inside their cards, not move the entire admin canvas. */
body.vagard-system-screen #wpbody-content :is(
  .vagard-table-wrap, .vagard-dash-table-scroll, .vagard-p-tablewrap,
  .vg-table-scroll, .vagard-table-scroll, .table-responsive,
  .vagard-table-container, .vagard-report-table-wrap
) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
body.vagard-system-screen #wpbody-content :is(
  .vagard-table-wrap, .vagard-dash-table-scroll, .vagard-p-tablewrap,
  .vg-table-scroll, .vagard-table-scroll, .table-responsive,
  .vagard-table-container, .vagard-report-table-wrap
) > table { width: 100%; }

/* Navigation borders must be included in its width on widescreen displays. */
body.vagard-system-screen .vagard-navigation-shell,
body.toplevel_page_vagard .vagard-navigation-shell {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Navigation needs to share width with branding/actions on large, zoomed and narrow screens. */
body.vagard-system-screen .vagard-navigation-top,
body.toplevel_page_vagard .vagard-navigation-top { max-width: 100%; }
body.vagard-system-screen .vagard-navigation-primary,
body.toplevel_page_vagard .vagard-navigation-primary {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
body.vagard-system-screen .vagard-navigation-context,
body.vagard-system-screen .vagard-navigation-secondary,
body.vagard-system-screen .vagard-view-controls { min-width: 0; max-width: 100%; }

/* Keep widescreen metrics readable, rather than stretching to eight tiny columns. */
@media (min-width: 1651px) {
  body.toplevel_page_vagard .vagard-dashboard-v2 .vagard-dash-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.vagard-system-screen .vagard-premium .vagard-p-kpis {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  body.vagard-system-screen #wpbody-content .vagard-setup-profiles {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 1499px) {
  body.vagard-system-screen #wpbody-content :is(.vagard-dashboard-v2, .vagard-admin, .wrap),
  body.toplevel_page_vagard #wpbody-content :is(.vagard-dashboard-v2, .vagard-admin, .wrap) {
    box-sizing: border-box;
    min-width: 0;
  }
  body.vagard-system-screen .vagard-navigation-top,
  body.toplevel_page_vagard .vagard-navigation-top { flex-wrap: wrap !important; }
  body.vagard-system-screen .vagard-navigation-primary,
  body.toplevel_page_vagard .vagard-navigation-primary {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  body.vagard-system-screen :is(.vagard-navigation-primary, .vagard-navigation-secondary) {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 1100px) {
  body.vagard-system-screen #wpbody-content .vagard-admin :is(
    .vagard-admin-grid, .vagard-dashboard-grid, .vagard-workspace-grid
  ) { grid-template-columns: minmax(0, 1fr); }
  body.vagard-system-screen #wpbody-content .vagard-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.vagard-system-screen #wpbody-content .vagard-filterbar {
    max-width: 100%;
    flex-wrap: wrap;
  }
}
@media (max-width: 782px) {
  body.vagard-system-screen .vagard-navigation-shell,
  body.toplevel_page_vagard .vagard-navigation-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  body.vagard-system-screen #wpbody-content > :is(.vagard-admin, .wrap, .vagard-dashboard-v2),
  body.toplevel_page_vagard #wpbody-content > :is(.vagard-admin, .wrap, .vagard-dashboard-v2) {
    box-sizing: border-box !important;
    width: calc(100% - 20px) !important;
    margin-inline: auto !important;
    min-width: 0 !important;
  }
  body.vagard-system-screen #wpbody-content .vagard-hub-grid,
  body.vagard-system-screen #wpbody-content .vagard-setup-profiles {
    grid-template-columns: minmax(0, 1fr);
  }
  body.vagard-system-screen #wpbody-content :is(
    .vagard-dash-heading, .vagard-dash-panelhead, .vagard-p-cardhead
  ) { flex-wrap: wrap; }
  body.vagard-system-screen .vagard-navigation-top {
    row-gap: 8px !important;
    overflow: visible;
  }
}

/* The WooCommerce customer return panel must respect its theme's content width. */
.woocommerce-account .vagard-wrap,
.woocommerce-account .vagard-return-workspace,
.woocommerce-account .vagard-customer-page {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.woocommerce-account .vagard-wrap :is(img, video, canvas) { max-width: 100%; }
.woocommerce-account .vagard-wrap :is(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea
) { box-sizing: border-box; max-width: 100%; }
.woocommerce-account .vagard-wrap :is(
  .vagard-table-wrap, .vagard-table-scroll, .vagard-returns-list
) { min-width: 0; max-width: 100%; overflow-x: auto; }