/*
 * Wanfan Admin — route-level responsive system V2.
 * The shell stays fluid; business canvases, forms, cards and dialogs keep a
 * deliberate SaaS density instead of stretching every control to the viewport.
 */

:root {
  --wf-content-max: 1840px;
  --wf-editor-max: 1800px;
  --wf-page-gutter: clamp(14px, 1.35vw, 28px);
  --wf-section-gap: clamp(14px, 1vw, 22px);
  --wf-grid-gap: clamp(12px, .9vw, 20px);
  --wf-anchor-width: 156px;
  --wf-dialog-gutter: clamp(12px, 3vw, 34px);
  --wf-control-max-short: 360px;
  --wf-card-max: 620px;
}

html,
body,
#root,
.admin-shell,
.main-shell,
.content-area {
  min-width: 0;
  max-width: none;
}

.content-area {
  width: 100%;
  padding-inline: var(--wf-page-gutter);
  box-sizing: border-box;
}

/* A centered business canvas absorbs ultrawide space without recreating the
   former narrow shell. Wide data tables can still opt into their full wrapper. */
.content-area > :where(.panel, .page-head, .workflow-stats, .candidate-detail-page,
  .selection-list-tabs, .selection-list-filters, .selection-library-toolbar,
  .selection-library-grid, .landing-template-grid, .template-lab-grid,
  .meta-account-notice, .meta-account-table-card, .domain-registry-card) {
  width: min(100%, var(--wf-content-max));
  margin-inline: auto;
  box-sizing: border-box;
}

/* Product editor: shell is fluid, editing canvas is bounded and the anchor is
   physically coupled to that canvas. */
body.product-editor-route .content-area {
  padding-inline: var(--wf-page-gutter);
}

body.product-editor-route .company-editor-shell,
body.product-editor-route .company-editor-footer,
body.product-editor-route .error-state {
  width: min(100%, var(--wf-editor-max));
  max-width: var(--wf-editor-max) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

body.product-editor-route .company-editor-layout.company-editor-continuous-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wf-anchor-width);
  gap: var(--wf-section-gap);
  align-items: start;
  width: 100%;
  min-width: 0;
}

body.product-editor-route .company-editor-main.company-editor-continuous-main {
  width: 100%;
  min-width: 0;
  max-width: none;
}

body.product-editor-route .company-business-nav.company-editor-anchor-nav {
  position: sticky;
  top: 72px;
  width: var(--wf-anchor-width);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  box-sizing: border-box;
}

body.product-editor-route .editor-form-grid-v2 {
  column-gap: var(--wf-grid-gap);
  row-gap: 18px;
}

body.product-editor-route .company-form-grid {
  column-gap: var(--wf-grid-gap) !important;
}

body.product-editor-route :where(.company-form-section, .editor-card.full-editor-card,
  .company-content-settings, .company-spec-page, .company-marketing-page,
  .company-continuous-section) {
  min-width: 0;
  max-width: 100%;
}

/* Short semantic controls must not become 700–900px bars on ultrawide screens. */
body.product-editor-route :where(.company-spec-summary, .company-spec-grid,
  .company-addon-fields, .logistics-fees, .company-ad-pixel-grid) {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: var(--wf-grid-gap);
}

body.product-editor-route :where(.company-spec-summary, .company-spec-grid,
  .company-addon-fields, .logistics-fees, .company-ad-pixel-grid) > * {
  min-width: 0;
}

body.product-editor-route .template-editor-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: var(--wf-grid-gap);
}

body.product-editor-route .template-editor-settings > :where(h2, h3, header, .template-editor-current) {
  grid-column: 1 / -1;
}

body.product-editor-route :where(.editor-active-template-grid, .active-template-grid,
  .template-editor-grid, .landing-template-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: var(--wf-grid-gap);
}

body.product-editor-route :where(.editor-active-template-card, .active-template-card,
  .landing-template-card) {
  width: 100%;
  max-width: var(--wf-card-max);
  justify-self: start;
  box-sizing: border-box;
}

/* Existing package/SKU/recommendation contracts keep their own column widths;
   only their immediate wrapper may scroll horizontally. */
body.product-editor-route :where(.company-package-editor, .company-detail-section,
  .product-recommendation-table-wrap, .product-review-table-wrap,
  .procurement-sku-mapping-table) {
  max-width: 100%;
  min-width: 0;
}

body.product-editor-route :where(.company-package-editor, .company-detail-section,
  .product-recommendation-table-wrap, .product-review-table-wrap) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* Route-level filters/cards: balanced at large widths, then degrade without
   collapsing controls below a useful size. */
.selection-list-filters {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.selection-library-filters,
.procurement-filter-panel {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.selection-library-grid,
.landing-template-grid,
.template-lab-grid,
.archived-template-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.selection-library-card,
.landing-template-card,
.template-lab-card,
.archived-template-card {
  max-width: 440px;
  width: 100%;
  justify-self: start;
}

/* All data grids scroll inside their designated region, never through the page. */
:where(.table-wrap, .table-scroll, .admin-table, .product-replica-table-scroll,
  .selection-company-table, .domain-table-shell, .meta-account-table-shell,
  .procurement-table-shell, .order-company-table-scroll, .b-product-table-wrap) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* Responsive dialog contract: bounded to viewport, scrollable body and
   persistent actions. */
:where(.b-product-modal-backdrop, .meta-account-modal-backdrop, .modal-backdrop) {
  padding: var(--wf-dialog-gutter);
  box-sizing: border-box;
}

:where(.b-product-modal, .recommendation-selector-modal, .meta-account-modal,
  .domain-operation-modal, .modal-card) {
  width: min(1220px, calc(100vw - (2 * var(--wf-dialog-gutter))));
  max-width: 100%;
  max-height: calc(100vh - (2 * var(--wf-dialog-gutter)));
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

:where(.b-product-modal, .recommendation-selector-modal) {
  height: min(760px, calc(100vh - (2 * var(--wf-dialog-gutter))));
}

:where(.b-product-modal, .recommendation-selector-modal, .meta-account-modal,
  .domain-operation-modal, .modal-card) > :where(main, .modal-body, .domain-operation-body) {
  min-height: 0;
  overflow: auto;
}

.b-product-modal > footer,
.recommendation-selector-modal > footer,
.meta-account-modal > footer,
.domain-operation-modal > footer {
  position: relative;
  z-index: 2;
  background: #fff;
}

.drawer {
  width: min(var(--drawer-width, 760px), calc(100vw - 20px));
  max-width: 100vw;
}

@media (min-width: 2200px) {
  :root {
    --wf-content-max: 1940px;
    --wf-editor-max: 1860px;
    --wf-page-gutter: 30px;
  }

  body.product-editor-route .editor-form-grid-v2 {
    column-gap: 24px;
  }
}

@media (max-width: 1599px) {
  :root {
    --wf-page-gutter: 18px;
    --wf-section-gap: 16px;
    --wf-anchor-width: 142px;
  }

  .selection-list-filters,
  .selection-library-filters,
  .procurement-filter-panel {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }
}

@media (max-width: 1279px) {
  :root { --wf-page-gutter: 14px; }

  body.product-editor-route .company-editor-layout.company-editor-continuous-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "editor-anchor" "editor-content" !important;
  }

  body.product-editor-route .company-editor-main.company-editor-continuous-main {
    grid-area: editor-content !important;
  }

  body.product-editor-route .company-business-nav.company-editor-anchor-nav {
    position: sticky !important;
    z-index: 12 !important;
    top: 36px !important;
    display: flex !important;
    grid-area: editor-anchor !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    gap: 4px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid #e6eaf0 !important;
    border-left: 0 !important;
    background: rgba(255,255,255,.98) !important;
    box-sizing: border-box;
    scrollbar-width: thin;
  }

  body.product-editor-route .company-business-nav.company-editor-anchor-nav h3 {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 10px;
    white-space: nowrap;
  }

  body.product-editor-route .company-business-nav.company-editor-anchor-nav button {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  body.product-editor-route :where(.company-spec-summary, .company-spec-grid,
    .company-addon-fields, .logistics-fees, .company-ad-pixel-grid) {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  body.product-editor-route .template-editor-settings {
    grid-template-columns: 1fr;
  }

  body.product-editor-route .template-editor-settings > * {
    grid-column: 1;
  }

  .selection-list-filters,
  .selection-library-filters,
  .procurement-filter-panel {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 1023px) {
  body.product-editor-route .editor-form-grid-v2 > :where(.editor-col-4, .editor-col-6) {
    grid-column: span 6;
  }

  .b-product-modal-layout {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .b-product-filters {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .b-product-keyword {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  :root {
    --wf-page-gutter: 10px;
    --wf-dialog-gutter: 10px;
  }

  body.product-editor-route .editor-form-grid-v2 > :where(.editor-col-4, .editor-col-6, .editor-col-12),
  body.product-editor-route :where(.company-spec-summary, .company-spec-grid,
    .company-addon-fields, .logistics-fees, .company-ad-pixel-grid) > * {
    grid-column: 1 / -1 !important;
  }

  body.product-editor-route .company-form-grid.three,
  body.product-editor-route .company-spec-summary,
  body.product-editor-route .company-spec-grid,
  body.product-editor-route .company-spec-value-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.product-editor-route :where(.company-spec-summary, .company-spec-grid,
    .company-addon-fields, .logistics-fees, .company-ad-pixel-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.product-editor-route :where(.company-form-section, .editor-card.full-editor-card,
    .company-content-settings, .company-spec-page, .company-marketing-page) {
    padding: 18px 14px;
  }

  .selection-list-filters,
  .selection-library-filters,
  .procurement-filter-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .b-product-modal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .b-product-modal-layout > aside {
    display: flex;
    min-height: 42px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .b-product-modal-layout > aside h3,
  .b-product-modal-layout > aside button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .b-product-modal > header,
  .b-product-modal > footer {
    padding: 12px 14px;
  }

  .recommendation-selector-modal > footer .recommendation-limit-note {
    display: none;
  }
}

@media (max-width: 720px) {
  .selection-list-filters,
  .selection-library-filters,
  .procurement-filter-panel,
  .b-product-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .b-product-keyword { grid-column: 1; }

  .drawer {
    width: 100vw;
  }
}