/* Shared workspace composition. Domain-specific editors keep their own layouts. */
.blackx-app-content {
  container: workspace / inline-size;
  width: min(calc(100% - (2 * var(--bx-page-gutter))), 1680px);
}

/* Page gutters belong to the workspace, not every nested section. */
.blackx-app-content .container {
  width: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-inline: 0;
}

.blackx-app-content {
  --bx-heading-padding-block: clamp(1.25rem, 2.2cqi, 2rem);
  --bx-heading-padding-inline: clamp(1.25rem, 2.8cqi, 2.5rem);
}

/* Inset the complete heading surface, including its copy and action buttons. */
.blackx-app-content :is(.erp-page-head, .bx-page-head, .blackx-page-header, .page-header,
  .bx-report-head, .projects-page-head, .rx-page-head) {
  padding-block: var(--bx-heading-padding-block);
  padding-inline: var(--bx-heading-padding-inline);
  box-sizing: border-box;
  min-inline-size: 0;
}

.blackx-app-content :is(.bx-dashboard-hero, .erp-hero, .blackx-page-hero) {
  padding-block: clamp(1.5rem, 3cqi, 2.75rem);
  padding-inline: var(--bx-heading-padding-inline);
  box-sizing: border-box;
  min-inline-size: 0;
}

/* Hero rows inherit their inset from the surface, avoiding doubled padding. */
.blackx-app-content .bx-dashboard-hero .bx-dashboard-hero__row,
.blackx-app-content .erp-hero .erp-hero-grid {
  padding-block: 0;
}

.blackx-app-content :is(.erp-page-head, .bx-page-head, .blackx-page-header, .page-header)::after {
  inset-inline: var(--bx-heading-padding-inline);
}

.blackx-app-content :is(.erp-page-head, .bx-page-head, .bx-report-head) h1 {
  margin-block: 0 .4rem;
  font-size: clamp(1.4rem, 2.5cqi, 2rem);
  line-height: 1.4;
}

.blackx-app-content :is(.erp-page-head, .bx-page-head, .bx-report-head) p:not(.erp-kicker) {
  font-size: .9rem;
  line-height: 1.8;
}

.blackx-app-content :is(.erp-filter-grid, .erp-filter-form, .bx-filter-form, .bx-report-filter__grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .85rem 1rem;
  align-items: end;
  min-inline-size: 0;
}

.blackx-app-content :is(.erp-filter-grid, .erp-filter-form, .bx-filter-form) > * {
  min-inline-size: 0;
}

.blackx-app-content :is(.erp-form-grid, .bx-form-grid, .blackx-form-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.blackx-app-content .bx-form-shell {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Form sections are stacked full-width; their inner field grids retain responsive columns. */
.blackx-app-content .bx-form-shell > * {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
}

.blackx-app-content .bx-form-shell > .bx-fieldset:not(:has(~ .bx-fieldset)):not(.bx-fieldset ~ .bx-fieldset) {
  grid-column: 1 / -1;
}

.blackx-app-content .bx-form-shell > :is(.bx-source-line-list, .bx-table-wrap, .erp-table-wrap, .table-responsive) {
  grid-column: 1 / -1;
  min-inline-size: 0;
}

.blackx-app-content .bx-form-shell > .bx-fieldset {
  min-block-size: auto;
  min-inline-size: 0;
}

.blackx-app-content .bx-form-shell > .bx-fieldset:has(.bx-field--wide):not(:has(.bx-field:not(.bx-field--wide))) {
  grid-column: 1 / -1;
}

.blackx-app-content .bx-form-actions {
  position: static;
  margin-inline: 0;
}

.blackx-app-content .bx-secondary-operation {
  display: grid;
  gap: 1rem;
  margin-block: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--bx-border-soft);
}

.blackx-app-content :is(.erp-filter-grid, .erp-filter-form, .bx-filter-form) + :is(.erp-table-wrap, .bx-table-wrap, .table-responsive) {
  margin-block-start: 1rem;
}

/* Keep labels above controls, with help/errors below the same control. */
.blackx-app-content :is(.bx-field, .erp-form-field, .bx-report-filter__field, .media-op-field) > label {
  display: block;
  margin-block: 0 .4rem;
  line-height: 1.6;
}

.blackx-app-content .bx-field--choice {
  align-self: start;
}

.blackx-app-content .bx-field > textarea {
  block-size: 8rem;
  min-block-size: 7rem;
  resize: vertical;
}

.blackx-app-content .bx-choice-grid {
  max-block-size: 30rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: .5rem;
  border: 1px solid var(--bx-border-soft);
  border-radius: var(--bx-radius-sm);
}

.blackx-app-content .bx-choice-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .6rem;
}

.blackx-app-content .bx-choice-grid label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: .6rem;
  min-inline-size: 0;
  block-size: 100%;
  border-radius: var(--bx-radius-xs);
  background: rgba(11, 36, 31, .04);
  font-size: .85rem;
  line-height: 1.7;
}

.blackx-app-content .bx-choice-grid input[type="checkbox"] {
  flex: 0 0 auto;
  margin-block-start: .2rem;
}

.blackx-app-content .bx-field--choice > input[type="checkbox"] {
  display: block;
  margin-block: .65rem;
}

.blackx-app-content :is(.erp-page-grid, .projects-detail-grid, .bx-comparison-grid, .erp-two-columns, .erp-detail-grid, .bx-definition-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  align-items: start;
}

.blackx-app-content .bx-company-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  align-items: start;
}

.blackx-app-content .bx-source-line-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  align-items: start;
}

/* Collapse according to usable content width, including an expanded sidebar. */
@container workspace (max-width: 38rem) {
  .blackx-app-content :is(.erp-form-grid, .bx-form-grid, .blackx-form-grid, .bx-form-shell) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .blackx-app-content :is(.erp-form-grid, .bx-form-grid, .blackx-form-grid, .bx-form-shell) {
    grid-template-columns: minmax(0, 1fr);
  }
}