/*
  Canonical operational bridge

  Legacy operational templates retain their form and POST contracts, but they
  now render inside the V2 application shell.  This final stylesheet is loaded
  after both CSS systems and translates the legacy surface to the canonical
  token, spacing and component language without changing business markup.
*/
:where(html[data-ui-version="v2"]) .legacy-functional-surface {
  --depo-bg: var(--ds-color-canvas);
  --depo-bg-soft: var(--ds-color-surface-subtle);
  --depo-surface: var(--ds-color-surface);
  --depo-surface-2: var(--ds-color-surface-muted);
  --depo-surface-strong: var(--ds-color-surface-inverse);
  --depo-text: var(--ds-color-text);
  --depo-text-soft: var(--ds-color-text-muted);
  --depo-muted: var(--ds-color-text-subtle);
  --depo-border: var(--ds-color-border);
  --depo-border-strong: var(--ds-color-border-strong);
  --depo-primary: var(--ds-color-brand);
  --depo-primary-2: var(--ds-color-brand-strong);
  --depo-primary-dark: var(--ds-color-brand-strong);
  --depo-success: var(--ds-color-success);
  --depo-warning: var(--ds-color-warning);
  --depo-danger: var(--ds-color-danger);
  --depo-info: var(--ds-color-info);
  --depo-focus: var(--ds-color-focus);
  --depo-shadow-sm: var(--ds-shadow-xs);
  --depo-shadow: var(--ds-shadow-sm);
  --depo-shadow-strong: var(--ds-shadow-md);
  --depo-radius-xs: var(--ds-radius-xs);
  --depo-radius-sm: var(--ds-radius-sm);
  --depo-radius: var(--ds-radius-md);
  --depo-radius-lg: var(--ds-radius-lg);
  --depo-radius-xl: var(--ds-radius-xl);
  --depo-gap-xs: var(--ds-space-2);
  --depo-gap-sm: var(--ds-space-3);
  --depo-gap: var(--ds-space-4);
  --depo-gap-lg: var(--ds-space-6);
  --depo-gap-xl: var(--ds-space-8);
  --depo-font: var(--ds-font-sans);
  --ui-surface: var(--ds-color-surface);
  --ui-surface-subtle: var(--ds-color-surface-subtle);
  --ui-text: var(--ds-color-text);
  --ui-text-secondary: var(--ds-color-text-muted);
  --ui-text-muted: var(--ds-color-text-subtle);
  --ui-border: var(--ds-color-border);
  --ui-brand-primary: var(--ds-color-brand);
  --ui-brand-primary-strong: var(--ds-color-brand-strong);
  --ui-brand-primary-soft: var(--ds-color-brand-soft);
  --ui-radius-card: var(--ds-radius-lg);
  --ui-radius-control: var(--ds-radius-md);
  --ui-shadow-card: var(--ds-shadow-surface);
  min-block-size: 0;
  overflow: visible !important;
  background: transparent !important;
  color: var(--ds-color-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  line-height: var(--ds-leading-normal);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(
  .page-shell,
  .nv-inventory-workbench,
  .page-content,
  .workspace-shell,
  .finance-workspace-shell,
  .products-workspace-shell,
  .warehouse-list-shell-v432
) {
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  gap: var(--ds-space-5);
  margin: 0;
  padding: 0;
  background: transparent;
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(
  .page-hero,
  .premium-hero-panel,
  .compact-hero
) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-5);
  min-inline-size: 0;
  margin: 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--ds-color-brand-border);
  border-radius: var(--ds-radius-xl);
  background: linear-gradient(135deg, var(--ds-color-surface) 0%, var(--ds-color-brand-soft) 100%);
  box-shadow: var(--ds-shadow-surface);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.page-hero h1, .page-title, h1) {
  margin: 0 0 var(--ds-space-2);
  color: var(--ds-color-text-strong);
  font-size: var(--ds-text-3xl);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-letter-tight);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(h2, .section-title) {
  color: var(--ds-color-text-strong);
  font-size: var(--ds-text-xl);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-letter-tight);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(
  .card,
  .panel,
  .section-card,
  .metric-card,
  .table-stage-v431,
  .table-stage-head-v431,
  .data-decision-card,
  .detail-ops-card,
  .ops-triage-card,
  .data-command-card,
  .workflow-atlas-card,
  .finance-governance-card,
  .finance-actor-card
) {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-xs);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.card, .panel, .section-card) {
  padding: clamp(1rem, 1.7vw, 1.5rem);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(
  .toolbar-grid,
  .stack-form,
  .form-grid,
  .filter-grid
) {
  gap: var(--ds-space-3);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(label, legend) {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(input, select, textarea) {
  min-block-size: var(--ds-control-height);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  box-shadow: none;
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(input, select, textarea):focus {
  border-color: var(--ds-color-focus);
  box-shadow: var(--ds-shadow-focus);
  outline: 0;
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.btn, .button, .primary-button, .secondary-button) {
  min-block-size: var(--ds-control-height);
  border-radius: var(--ds-radius-md);
  font-weight: var(--ds-weight-semibold);
  box-shadow: none;
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.btn.primary, .button.primary, .primary-button) {
  background: var(--ds-color-brand);
  color: var(--ds-color-on-brand);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.btn.secondary, .button.secondary, .secondary-button, .btn.ghost) {
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
  color: var(--ds-color-brand-strong);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.badge, .filter-chip) {
  border-color: var(--ds-color-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface-subtle);
  color: var(--ds-color-text-muted);
  font-weight: var(--ds-weight-semibold);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.table-wrap, .table-responsive) {
  overflow: auto;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface table :where(th, td) {
  border-color: var(--ds-color-divider);
}

:where(html[data-ui-version="v2"]) .legacy-functional-surface table th {
  background: var(--ds-color-surface-subtle);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-letter-caps);
  text-transform: uppercase;
}

/* Generated narrative bands duplicated the main shell navigation and pushed
   real forms/tables far below the fold.  Their operational destinations stay
   available from the canonical sidebar; only this redundant presentation is
   removed. */
:where(html[data-ui-version="v2"]) .legacy-functional-surface :where(
  .operations-backbone-v708,
  .compact-page-summary-strip,
  .data-decision-deck,
  .detail-ops-band,
  .ops-triage-shell,
  .data-command-board,
  .workflow-atlas-band
) {
  display: none !important;
}

/* The generated V1 bundle contains selectors with two or three class parts.
   Keep the bridge authoritative even against those historical rules. */
html[data-ui-version="v2"] body .legacy-functional-surface {
  min-block-size: 0;
  overflow: visible !important;
  background: transparent !important;
  color: var(--ds-color-text) !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .page-shell,
  .nv-inventory-workbench,
  .page-content,
  .workspace-shell,
  .finance-workspace-shell,
  .products-workspace-shell,
  .warehouse-list-shell-v432
) {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  background: transparent;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(.page-hero, .premium-hero-panel, .compact-hero) {
  border-color: #9fd2c4 !important;
  border-radius: var(--ds-radius-xl) !important;
  background: linear-gradient(135deg, #ffffff 0%, #e2f2ed 100%) !important;
  box-shadow: var(--ds-shadow-surface) !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .card,
  .panel,
  .section-card,
  .metric-card,
  .table-stage-v431,
  .table-stage-head-v431,
  .finance-governance-card,
  .finance-actor-card
) {
  border-color: var(--ds-color-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  background: var(--ds-color-surface) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(input, select, textarea) {
  border-color: var(--ds-color-border-strong) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-color-surface) !important;
  color: var(--ds-color-text) !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(.btn.primary, .button.primary, .primary-button) {
  border-color: var(--ds-color-brand) !important;
  background: var(--ds-color-brand) !important;
  color: var(--ds-color-on-brand) !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .operations-backbone-v708,
  .compact-page-summary-strip,
  .data-decision-deck,
  .detail-ops-band,
  .ops-triage-shell,
  .data-command-board,
  .workflow-atlas-band,
  .hero-visual-wrap,
  .hero-visual-art
) {
  display: none !important;
}

@media (max-width: 52rem) {
  :where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.page-hero, .premium-hero-panel, .compact-hero) {
    flex-direction: column;
    padding: var(--ds-space-4);
  }

  :where(html[data-ui-version="v2"]) .legacy-functional-surface :where(.page-hero .hero-actions, .page-hero .a4-operation-actions) {
    inline-size: 100%;
  }
}

/*
  Canonical operational layout recovery.

  Historical route styles used body:where(.component) selectors for child
  components.  The scoped bundle now repairs those selectors at build time;
  this compact final layer also gives every shared operation family a stable
  baseline when a route has no bespoke rule.  Keep this list semantic and
  component-based so the V2 shell itself remains untouched.
*/
html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .detail-shell,
  .dashboard-shell,
  .settings-shell,
  .users-shell,
  .shift-center-shell,
  .shift-planner-shell,
  .brand-landing-shell
) {
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  gap: var(--ds-space-5);
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .detail-hero,
  .dashboard-hero,
  .users-hero-shell
) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-6);
  min-inline-size: 0;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem) !important;
  overflow: hidden;
  border: 1px solid var(--ds-color-brand-border) !important;
  border-radius: var(--ds-radius-xl) !important;
  background: linear-gradient(135deg, var(--ds-color-surface) 0%, var(--ds-color-brand-soft) 100%) !important;
  box-shadow: var(--ds-shadow-surface) !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .detail-hero-main,
  .detail-hero-side,
  .hero-copy,
  .section-head > *,
  .summary-card-header > *
) {
  min-inline-size: 0;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .detail-hero,
  .dashboard-hero,
  .users-hero-shell
) h1 {
  max-inline-size: 22ch;
  margin: 0 0 var(--ds-space-2);
  font-size: clamp(2rem, 3.2vw, 3.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: var(--ds-letter-tight) !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .command-center-grid,
  .tenant-settings-summary-grid,
  .metric-grid,
  .clean-metric-grid,
  .stats-grid,
  .mini-stats-grid,
  .kpi-grid,
  .info-grid,
  .dashboard-card-grid,
  .compact-dashboard-card-grid,
  .inventory-intelligence-grid-v220,
  .role-policy-grid,
  .list-health-grid,
  .management-insight-grid,
  .nr-metric-grid,
  .finance-breakdown-grid,
  .planning-health-grid,
  .finance-governance-grid,
  .finance-report-grid,
  .finance-signal-grid,
  .finance-precision-grid,
  .reservation-service-board,
  .compact-reservation-board,
  .reservation-console-grid,
  .reservation-response-grid,
  .reservation-guest-grid,
  .reservation-zone-grid,
  .reservation-available-grid,
  .permission-grid,
  .permission-checklist,
  .settings-inline-disclosure-grid
) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--ds-space-3);
  min-inline-size: 0;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .detail-grid.cols-2,
  .grid-2,
  .users-layout-grid,
  .reservation-module-grid,
  .reservation-module-grid-wide,
  .reservation-crm-grid
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-4);
  min-inline-size: 0;
  align-items: start;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .toolbar-grid,
  .product-toolbar-grid,
  .finance-toolbar-grid,
  .compact-toolbar-grid,
  .list-filter-grid,
  .stack-form-grid,
  .crm-inline-grid
) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--ds-space-3);
  min-inline-size: 0;
  align-items: end;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .command-center-card,
  .summary-card,
  .service-board-card,
  .list-health-card,
  .management-summary-card,
  .inventory-command-card-v432,
  .governance-command-card-v433
) {
  display: grid;
  align-content: start;
  gap: var(--ds-space-2);
  min-inline-size: 0;
  padding: var(--ds-space-4);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-xs);
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .command-center-card,
  .summary-card,
  .service-board-card,
  .list-health-card
) > :is(strong, b) {
  color: var(--ds-color-text-strong);
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-tight);
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .command-center-card,
  .summary-card,
  .service-board-card,
  .list-health-card
) > :is(p, small, span) {
  margin: 0;
  color: var(--ds-color-text-muted);
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .section-head,
  .summary-card-header,
  .management-toolbar,
  .core-toolbar-strip,
  .toolbar-actions,
  .section-head-actions,
  .table-stage-actions-v431,
  .table-governance-rail,
  .finance-context-rail,
  .page-context-rail,
  .hero-actions,
  .module-mini-actions,
  .console-action-row,
  .row.gap,
  .empty-state-actions,
  .actions-right,
  .inventory-submit-row-v432,
  .preview-pill-row,
  .role-capability-list
) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  min-inline-size: 0;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(.section-head, .summary-card-header) {
  justify-content: space-between;
  margin-block-end: var(--ds-space-3);
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .rich-section-nav,
  .recipe-production-cluster,
  .management-toolbar,
  .core-toolbar-strip
) {
  padding: var(--ds-space-2);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface-subtle);
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .rich-section-nav,
  .recipe-production-cluster,
  .management-toolbar,
  .core-toolbar-strip
) a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding-inline: var(--ds-space-3);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface);
  color: var(--ds-color-brand-strong);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
}

html[data-ui-version="v2"] body .legacy-functional-surface .core-ops-cluster {
  display: none !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(.ops-inline-summary, .core-focus-summary) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface-subtle);
  color: var(--ds-color-text-muted);
}

html[data-ui-version="v2"] body .legacy-functional-surface pre.text-prewrap {
  max-inline-size: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

html[data-ui-version="v2"] body .legacy-functional-surface input:is([type="checkbox"], [type="radio"]) {
  inline-size: 1.125rem !important;
  block-size: 1.125rem !important;
  min-inline-size: 1.125rem !important;
  min-block-size: 1.125rem !important;
  flex: 0 0 1.125rem;
  margin: 0;
  padding: 0;
  accent-color: var(--ds-color-brand);
  box-shadow: none;
}

html[data-ui-version="v2"] body .legacy-functional-surface :is(
  .check-inline,
  .checkbox-row,
  .radio-row,
  .permission-check,
  .permission-checklist label
) {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-inline-size: 0;
}

html[data-ui-version="v2"] body .legacy-functional-surface .users-hero-visual-card {
  display: none !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface .users-hero-shell {
  grid-template-columns: minmax(0, 1fr);
}

html[data-ui-version="v2"] body .legacy-functional-surface .users-hero-shell h1 {
  max-inline-size: 32ch;
}

html[data-ui-version="v2"] body .legacy-functional-surface .workspace-runtime-alert {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-self: start;
  gap: var(--ds-space-1) var(--ds-space-2);
  max-inline-size: min(100%, 36rem);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-color-warning-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-warning-soft);
  color: var(--ds-color-text);
  text-decoration: none;
}

html[data-ui-version="v2"] body .legacy-functional-surface .workspace-runtime-alert > strong {
  color: var(--ds-color-warning);
}

html[data-ui-version="v2"] body .legacy-functional-surface .workspace-runtime-alert > small {
  grid-column: 1 / -1;
  color: var(--ds-color-text-muted);
}

@media (max-width: 70rem) {
  html[data-ui-version="v2"] body .legacy-functional-surface :is(
    .detail-grid.cols-2,
    .grid-2,
    .users-layout-grid,
    .reservation-module-grid,
    .reservation-module-grid-wide,
    .reservation-crm-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 52rem) {
  html[data-ui-version="v2"] body .legacy-functional-surface :is(
    .detail-hero,
    .dashboard-hero,
    .users-hero-shell
  ) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-4);
    padding: var(--ds-space-4) !important;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface :is(
    .detail-hero-side,
    .users-hero-visual-card
  ) {
    display: none;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface :is(
    .command-center-grid,
    .tenant-settings-summary-grid,
    .metric-grid,
    .clean-metric-grid,
    .stats-grid,
    .mini-stats-grid,
    .kpi-grid,
    .info-grid,
    .dashboard-card-grid,
    .compact-dashboard-card-grid,
    .inventory-intelligence-grid-v220,
    .role-policy-grid,
    .list-health-grid,
    .management-insight-grid,
    .nr-metric-grid,
    .finance-breakdown-grid,
    .planning-health-grid,
    .finance-governance-grid,
    .finance-report-grid,
    .finance-signal-grid,
    .finance-precision-grid,
    .reservation-service-board,
    .compact-reservation-board,
    .reservation-console-grid,
    .reservation-response-grid,
    .reservation-guest-grid,
    .reservation-zone-grid,
    .reservation-available-grid,
    .permission-grid,
    .permission-checklist,
    .settings-inline-disclosure-grid,
    .toolbar-grid,
    .product-toolbar-grid,
    .finance-toolbar-grid,
    .compact-toolbar-grid,
    .list-filter-grid,
    .stack-form-grid,
    .crm-inline-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ui-version="v2"] body .legacy-functional-surface :is(.page-hero, .detail-hero, .dashboard-hero) > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface :is(.page-hero, .detail-hero, .dashboard-hero) .hero-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center;
    justify-content: flex-start !important;
    inline-size: 100%;
    max-inline-size: 100%;
    padding-block: var(--ds-space-1);
    overflow: visible;
    scroll-snap-type: none;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface :is(.page-hero, .detail-hero, .dashboard-hero) .page-context-rail {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center;
    justify-content: flex-start !important;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: var(--ds-space-1);
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface :is(.page-hero, .detail-hero, .dashboard-hero) .hero-actions > :is(a, button, .btn):not(.badge, .chip) {
    inline-size: auto !important;
    min-inline-size: 0 !important;
    max-inline-size: 100%;
    flex: 1 1 8.5rem !important;
    white-space: normal;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface :is(.page-hero, .detail-hero, .dashboard-hero) .page-context-rail > :is(a, button, .btn, .badge, .chip) {
    inline-size: auto !important;
    min-inline-size: max-content !important;
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
}

/*
  V900 operational surface repair.

  Products and purchase orders are the core live-demo flows.  Keep their hero
  children inside the available inline size on phones, while reserving a real
  desktop column for the only per-row action.  This is route-local by design:
  it does not change report, reservation or shift layouts.
*/
html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(.products-hero-v431, .ops-hero-v434) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
  min-inline-size: 0 !important;
}

html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(.products-hero-v431, .ops-hero-v434) > * {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

@media (min-width: 52.0625rem) {
  html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(#productsTable, #tblPurchaseOrders) {
    table-layout: auto !important;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(#productsTable, #tblPurchaseOrders) :is(th:last-child, td:last-child) {
    inline-size: 8.5rem !important;
    min-inline-size: 8.5rem !important;
    white-space: nowrap !important;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(#productsTable, #tblPurchaseOrders) td:last-child .btn {
    display: inline-flex !important;
    min-inline-size: 6.5rem !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

@media (max-width: 52rem) {
  html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(.products-hero-v431, .ops-hero-v434) {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(.products-hero-v431, .ops-hero-v434) .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow: visible !important;
  }

  html[data-ui-version="v2"] body .legacy-functional-surface:is([data-path="/products"], [data-path="/purchase-orders"]) :is(.products-hero-v431, .ops-hero-v434) .hero-actions > :is(a, button, .btn) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
  }
}