.content-area {
    --hub-page-content-max-width:var(--common-page-max-width);
    --hub-page-row-gap:var(--common-page-panel-row-gap);
    --hub-page-column-gap:var(--common-page-panel-column-gap);
    padding: var(--common-page-header-offset) var(--common-page-horizontal-padding) var(--common-page-horizontal-padding);
}

.page {
    --hub-page-max-width-md:var(--common-page-max-width);
    --hub-page-max-width-lg:var(--common-page-max-width);
    --hub-page-padding: 0;
}

/* Standard Hub page layout contract. Shared components emit these classes;
   the legacy structural selectors below keep specialized pages compatible. */
.hub-page-surface {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.hub-panel {
    align-self: stretch;
}

.hub-panel-grid {
    display: grid;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--hub-page-row-gap, var(--common-page-panel-row-gap)) var(--hub-page-column-gap, var(--common-page-panel-column-gap)) !important;
}

.hub-panel-grid > * {
    min-width: 0;
}

/* Opt-in bridge for legacy Bootstrap rows that arrange peer page panels or
   equal form groups. The DB-backed minimum width determines the live column
   count; Bootstrap breakpoint spans no longer determine composition. */
.row.common-page-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--common-page-panel-min-width)), 1fr));
    gap: var(--common-page-panel-row-gap) var(--common-page-panel-column-gap) !important;
    margin: 0;
}

.row.common-page-panel-grid > [class*="col-"] {
    width: auto;
    max-width: min(100%, var(--common-page-max-width));
    min-width: 0;
    padding: 0;
    flex: none;
}

.hub-panel-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--hub-page-row-gap, var(--common-page-panel-row-gap)) !important;
}

/* A gap needs a layout container. Legacy panel bodies and Bootstrap cards
   use the same vertical flow as the shared section component. */
.content-area :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 var(--common-page-inline-gap);
}

.content-area :where(p, ul, ol, dl, blockquote) {
    margin-block: 0 var(--common-page-panel-row-gap);
}

.content-area :where(ul, ol) {
    padding-inline-start: var(--common-page-horizontal-padding);
}

.content-area :where(.section-panel-header) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--common-page-inline-gap);
    min-width: 0;
}

.content-area :where(.section-panel, .panel-card__body, .sf-section-panel__body,
    .section-panel__body, .card-body) {
    display: flex;
    flex-direction: column;
    gap: var(--common-page-panel-row-gap);
    min-width: 0;
}

.content-area :where(.section-panel, .card-body, .modal-body, .accordion-body) {
    padding: var(--common-page-panel-padding-y) var(--common-page-panel-padding-x);
}

.content-area :where(.hub-panel-stack, .section-panel, .panel-card__body,
    .sf-section-panel__body, .section-panel__body, .card-body)
    > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl) {
    margin-block: 0;
}

/* Bootstrap defaults must inherit the persisted layout, including surfaces
   mounted outside the routed article (dialogs and menus). */
.btn {
    --bs-btn-padding-y: var(--common-page-compact-padding-y);
    --bs-btn-padding-x: var(--common-page-compact-padding-x);
    min-height: var(--common-page-control-height);
}

.form-control,
.form-select {
    min-height: var(--common-page-control-height);
    padding: var(--common-page-compact-padding-y) var(--common-page-compact-padding-x);
}

.form-select {
    background-size: var(--common-page-indicator-size) var(--common-page-indicator-size);
    background-position: right var(--common-page-compact-padding-x) center;
    padding-inline-end: calc(var(--common-page-compact-padding-x) + var(--common-page-indicator-size) + var(--common-page-inline-gap));
}

.card {
    --bs-card-spacer-y: var(--common-page-panel-padding-y);
    --bs-card-spacer-x: var(--common-page-panel-padding-x);
    --bs-card-cap-padding-y: var(--common-page-compact-padding-y);
    --bs-card-cap-padding-x: var(--common-page-panel-padding-x);
    --bs-card-title-spacer-y: var(--common-page-inline-gap);
}

.modal {
    --bs-modal-width: var(--common-page-max-width);
    --bs-modal-margin: var(--common-page-panel-row-gap);
    --bs-modal-padding: var(--common-page-panel-padding-y);
    --bs-modal-header-padding: var(--common-page-panel-padding-y) var(--common-page-panel-padding-x);
    --bs-modal-footer-gap: var(--common-page-inline-gap);
}

.modal-dialog {
    max-width: min(100%, var(--common-page-max-width));
    margin: var(--common-page-panel-row-gap) auto;
}

.modal-header,
.modal-body {
    padding: var(--common-page-panel-padding-y) var(--common-page-panel-padding-x);
}

.modal-footer {
    gap: var(--common-page-inline-gap);
    padding: var(--common-page-compact-padding-y) var(--common-page-panel-padding-x);
}

.modal-footer > * {
    margin: 0;
}

.dropdown-menu {
    --bs-dropdown-min-width: 0;
    --bs-dropdown-padding-x: var(--common-page-compact-padding-x);
    --bs-dropdown-padding-y: var(--common-page-compact-padding-y);
    --bs-dropdown-spacer: var(--common-page-inline-gap);
    --bs-dropdown-item-padding-x: var(--common-page-compact-padding-x);
    --bs-dropdown-item-padding-y: var(--common-page-compact-padding-y);
    max-width: min(var(--common-page-max-width), calc(100vw - var(--common-page-horizontal-padding) - var(--common-page-horizontal-padding)));
}

.dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
}

.accordion {
    --bs-accordion-body-padding-y: var(--common-page-panel-padding-y);
    --bs-accordion-body-padding-x: var(--common-page-panel-padding-x);
    --bs-accordion-btn-padding-y: var(--common-page-compact-padding-y);
    --bs-accordion-btn-padding-x: var(--common-page-panel-padding-x);
}

/* Text editors grow with measured content instead of fixed HTML row counts. */
.content-area textarea {
    field-sizing: content;
    height: auto;
    min-height: var(--common-page-control-height);
    max-height: var(--common-page-content-viewport-height);
    max-width: min(100%, var(--common-page-max-width));
    box-sizing: border-box;
    padding: var(--common-page-compact-padding-y) var(--common-page-compact-padding-x);
}

.content-area > :where(.hub-page-shell, .hub-page-surface) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.content-area > :where(.hub-page-shell),
.content-area > :where(:not(script):not(style)):has(.hub-page-hero) {
    padding: 0 !important;
}

.content-area :where(.hub-page-shell):has(> .hub-page-hero) > :where(.hub-page-surface) {
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
}

.content-area :where(.hub-page-hero) ~ :where(.hub-page-surface, .hub-panel-grid, .hub-panel-stack) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
}

.content-area > :where(:not(script):not(style)) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.content-area > :where(.page-hero, .panel-card, .sf-section-panel, .section-panel, .streaming-settings-grid, .streaming-table, .container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.content-area :where(.page-hero, .panel-card, .sf-section-panel, .section-panel) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    min-width: 0;
    box-sizing: border-box;
}

.content-area > :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]) {
    padding: 0 !important;
}

.content-area > :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.content-area > :where(:not(script):not(style)):has(.page-hero) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.content-area :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]):has(> .page-hero) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    gap: var(--common-page-panel-row-gap) var(--common-page-panel-column-gap) !important;
    row-gap: var(--common-page-panel-row-gap) !important;
    column-gap: var(--common-page-panel-column-gap) !important;
    box-sizing: border-box;
}

.content-area :where(.page-hero) ~ :where(.panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, .d-grid, .row, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-grid"], [class*="-grid "], [class$="-columns"], [class*="-columns "], [class$="-table-wrap"], [class*="-table-wrap "]),
.content-area :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]):has(> .page-hero) > :where(.page-hero) ~ :where(.panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, .d-grid, .row, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-grid"], [class*="-grid "], [class$="-columns"], [class*="-columns "], [class$="-table-wrap"], [class*="-table-wrap "]) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Page-level Bootstrap rows share the Page Hero boundary and DB gaps.
   Stack top-level panels without negative gutter compensation. */
.content-area :where(.page-hero) ~ :where(.row),
.content-area :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]):has(> .page-hero) > :where(.page-hero) ~ :where(.row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--common-page-panel-row-gap) var(--common-page-panel-column-gap);
    width: 100%;
    max-width: var(--common-page-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.content-area > :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]) > :first-child {
    margin-top: 0;
}

.content-area :where(.page-hero--header) {
    margin-bottom: var(--common-page-panel-row-gap);
}

.content-area :where(.mt-3, .mt-4) {
    margin-top: var(--common-page-panel-row-gap) !important;
}

.content-area :where(.mb-3, .mb-4) {
    margin-bottom: var(--common-page-panel-row-gap) !important;
}

/* Every routed Hub page is normalized by SharedMainLayout before product
   markup is rendered. Product pages may keep semantic local class names, but
   page position, width, and outer spacing remain owned by this shared rule. */
.hub-route-surface {
    width: 100%;
    max-width: var(--hub-page-content-max-width) !important;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Bootstrap spacing utilities are used by every Hub. Keep their convenient
   class contract, but resolve the actual distance from Common Setting DB. */
.content-area {
    --common-space-1: var(--common-page-dense-gap);
    --common-space-2: var(--common-page-inline-gap);
    --common-space-3: var(--common-page-panel-row-gap);
    --common-space-4: var(--common-page-horizontal-padding);
    --common-space-5: var(--common-page-horizontal-padding);
}

.content-area :where(.gap-1) { gap: var(--common-space-1) !important; }
.content-area :where(.gap-2) { gap: var(--common-space-2) !important; }
.content-area :where(.gap-3) { gap: var(--common-space-3) !important; }
.content-area :where(.gap-4) { gap: var(--common-space-4) !important; }
.content-area :where(.gap-5) { gap: var(--common-space-5) !important; }

.content-area :where(.m-1) { margin: var(--common-space-1) !important; }
.content-area :where(.m-2) { margin: var(--common-space-2) !important; }
.content-area :where(.m-3) { margin: var(--common-space-3) !important; }
.content-area :where(.m-4) { margin: var(--common-space-4) !important; }
.content-area :where(.m-5) { margin: var(--common-space-5) !important; }
.content-area :where(.mt-1) { margin-top: var(--common-space-1) !important; }
.content-area :where(.mt-2) { margin-top: var(--common-space-2) !important; }
.content-area :where(.mt-3) { margin-top: var(--common-space-3) !important; }
.content-area :where(.mt-4) { margin-top: var(--common-space-4) !important; }
.content-area :where(.mt-5) { margin-top: var(--common-space-5) !important; }
.content-area :where(.mb-1) { margin-bottom: var(--common-space-1) !important; }
.content-area :where(.mb-2) { margin-bottom: var(--common-space-2) !important; }
.content-area :where(.mb-3) { margin-bottom: var(--common-space-3) !important; }
.content-area :where(.mb-4) { margin-bottom: var(--common-space-4) !important; }
.content-area :where(.mb-5) { margin-bottom: var(--common-space-5) !important; }
.content-area :where(.ms-1) { margin-left: var(--common-space-1) !important; }
.content-area :where(.ms-2) { margin-left: var(--common-space-2) !important; }
.content-area :where(.ms-3) { margin-left: var(--common-space-3) !important; }
.content-area :where(.ms-4) { margin-left: var(--common-space-4) !important; }
.content-area :where(.ms-5) { margin-left: var(--common-space-5) !important; }
.content-area :where(.me-1) { margin-right: var(--common-space-1) !important; }
.content-area :where(.me-2) { margin-right: var(--common-space-2) !important; }
.content-area :where(.me-3) { margin-right: var(--common-space-3) !important; }
.content-area :where(.me-4) { margin-right: var(--common-space-4) !important; }
.content-area :where(.me-5) { margin-right: var(--common-space-5) !important; }
.content-area :where(.mx-1) { margin-left: var(--common-space-1) !important; margin-right: var(--common-space-1) !important; }
.content-area :where(.mx-2) { margin-left: var(--common-space-2) !important; margin-right: var(--common-space-2) !important; }
.content-area :where(.my-2) { margin-top: var(--common-space-2) !important; margin-bottom: var(--common-space-2) !important; }
.content-area :where(.my-3) { margin-top: var(--common-space-3) !important; margin-bottom: var(--common-space-3) !important; }

.content-area :where(.p-1) { padding: var(--common-space-1) !important; }
.content-area :where(.p-2) { padding: var(--common-space-2) !important; }
.content-area :where(.p-3) { padding: var(--common-space-3) !important; }
.content-area :where(.p-4) { padding: var(--common-space-4) !important; }
.content-area :where(.p-5) { padding: var(--common-space-5) !important; }
.content-area :where(.pt-1) { padding-top: var(--common-space-1) !important; }
.content-area :where(.pt-2) { padding-top: var(--common-space-2) !important; }
.content-area :where(.pt-3) { padding-top: var(--common-space-3) !important; }
.content-area :where(.pb-1) { padding-bottom: var(--common-space-1) !important; }
.content-area :where(.pb-2) { padding-bottom: var(--common-space-2) !important; }
.content-area :where(.pb-3) { padding-bottom: var(--common-space-3) !important; }
.content-area :where(.ps-3) { padding-left: var(--common-space-3) !important; }
.content-area :where(.px-3) { padding-left: var(--common-space-3) !important; padding-right: var(--common-space-3) !important; }
.content-area :where(.px-4) { padding-left: var(--common-space-4) !important; padding-right: var(--common-space-4) !important; }
.content-area :where(.py-1) { padding-top: var(--common-space-1) !important; padding-bottom: var(--common-space-1) !important; }
.content-area :where(.py-2) { padding-top: var(--common-space-2) !important; padding-bottom: var(--common-space-2) !important; }
.content-area :where(.py-3) { padding-top: var(--common-space-3) !important; padding-bottom: var(--common-space-3) !important; }
.content-area :where(.py-4) { padding-top: var(--common-space-4) !important; padding-bottom: var(--common-space-4) !important; }
.content-area :where(.py-5) { padding-top: var(--common-space-5) !important; padding-bottom: var(--common-space-5) !important; }

@media (min-width: 1200px) {
    .content-area :where(.px-xl-4) {
        padding-left: var(--common-space-4) !important;
        padding-right: var(--common-space-4) !important;
    }
}

.content-area :where(.page-hero) + :where(.mt-3, .mt-4, .panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, .d-grid, .row, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-grid"], [class*="-grid "], [class$="-layout"], [class*="-layout "], [class$="-table-wrap"], [class*="-table-wrap "]),
.content-area :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]):has(> .page-hero) > :where(.page-hero) + :where(.mt-3, .mt-4, .panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, .d-grid, .row, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-grid"], [class*="-grid "], [class$="-layout"], [class*="-layout "], [class$="-table-wrap"], [class*="-table-wrap "]) {
    margin-top: 0 !important;
}

.content-area > :where(.panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-table-wrap"], [class*="-table-wrap "]) + :where(.panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-table-wrap"], [class*="-table-wrap "]),
.content-area :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]):has(> .page-hero) > :where(.panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-table-wrap"], [class*="-table-wrap "]) + :where(.panel-card, .sf-section-panel, .section-panel, .card, .table-responsive, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-table-wrap"], [class*="-table-wrap "]) {
    margin-top: var(--common-page-panel-row-gap) !important;
}

.content-area :where(.dashboard-grid, .streaming-settings-grid, .automation-page-shell, [class$="-page"], [class*="-page "], [class$="-panel"], [class*="-panel "], [class$="-grid"], [class*="-grid "], [class$="-columns"], [class*="-columns "], [class$="-layout"], [class*="-layout "], [class$="-workspace"], [class*="-workspace "], [class$="-shell"], [class*="-shell "], [class$="-root"], [class*="-root "]) {
    gap: var(--common-page-panel-row-gap) var(--common-page-panel-column-gap) !important;
    column-gap: var(--common-page-panel-column-gap) !important;
    row-gap: var(--common-page-panel-row-gap) !important;
}

/* Hub screens also use BEM names such as dashboard__grid and settings__panel.
   Keep those containers on the same database-backed spacing contract as the
   hyphenated class names above. */
.content-area :where([class$="__page"], [class*="__page "], [class$="__page-shell"], [class*="__page-shell "], [class$="__workspace"], [class*="__workspace "], [class$="__settings-shell"], [class*="__settings-shell "], [class$="__layout"], [class*="__layout "], [class$="__root"], [class*="__root "]) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    min-width: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.content-area :where([class$="__panel"], [class*="__panel "], [class$="__grid"], [class*="__grid "], [class$="__columns"], [class*="__columns "], [class$="__layout"], [class*="__layout "], [class$="__workspace"], [class*="__workspace "], [class$="__shell"], [class*="__shell "], [class$="__root"], [class*="__root "]) {
    gap: var(--common-page-panel-row-gap) var(--common-page-panel-column-gap) !important;
    column-gap: var(--common-page-panel-column-gap) !important;
    row-gap: var(--common-page-panel-row-gap) !important;
}

.content-area :where(.page-hero) ~ :where(.d-grid, .row, [class$="-grid"], [class*="-grid "], [class$="-columns"], [class*="-columns "]),
.content-area :where(.container-fluid, .ovc-page, [class$="-page"], [class*="-page "], [class$="-page-shell"], [class*="-page-shell "], [class$="-workspace"], [class*="-workspace "], [class$="-settings-shell"], [class*="-settings-shell "], [class$="-layout"], [class*="-layout "], [class$="-root"], [class*="-root "]):has(> .page-hero) > :where(.page-hero) ~ :where(.d-grid, .row, [class$="-grid"], [class*="-grid "], [class$="-columns"], [class*="-columns "]) {
    gap: var(--common-page-panel-row-gap) var(--common-page-panel-column-gap) !important;
    column-gap: var(--common-page-panel-column-gap) !important;
    row-gap: var(--common-page-panel-row-gap) !important;
}

/* Top-level panel composition is derived from the database-backed minimum
   panel width. The browser chooses the usable column count from available
   space instead of relying on fixed child-count or breakpoint tables. */
.content-area :where(.page-hero) ~ :is(.hub-panel-grid, .d-grid, [class$="-grid"], [class*="-grid "], [class$="-columns"], [class*="-columns "], [class$="__grid"], [class*="__grid "], [class$="__columns"], [class*="__columns "]):not(.common-responsive-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--common-page-panel-min-width)), 1fr)) !important;
}

/* Bootstrap rows use the same database-backed composition threshold. */
.content-area :where(.page-hero) ~ .row > * {
    flex: 1 1 var(--common-page-panel-min-width) !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: min(100%, var(--common-page-panel-min-width));
}

.content-area :where(.panel-card__header, .sf-section-panel__header) {
    padding: var(--common-page-panel-padding-y) var(--common-page-panel-padding-x) !important;
}

.content-area :where(.panel-card__body, .sf-section-panel__body, .section-panel__body) {
    padding: var(--common-page-panel-padding-y) var(--common-page-panel-padding-x) !important;
}

.content-area :where(.row) {
    --bs-gutter-x:var(--common-page-panel-column-gap);
    --bs-gutter-y:var(--common-page-panel-row-gap);
}

.content-area > .ovc-page {
    padding: 0;
}

.content-area > .ovc-page > :where(.page-hero, .panel-card, .sf-section-panel, .section-panel) {
    width: 100%;
    max-width:var(--common-page-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.content-area > .ovc-page > :where(.mt-3, .mt-4) {
    margin-top: var(--common-page-panel-row-gap) !important;
}

:root[data-theme="dark"] .content-area :where(.panel-card, .sf-section-panel, .section-panel, .card, .metric-card, .sph-summary-card, .sf-info-tile) {
    border-top-color: var(--dep-color-border-subtle, var(--color-border, #3c3c3c)) !important;
    box-shadow: var(--dep-shadow-md, 0 4px 12px -2px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15)) !important;
}

:root[data-theme="dark"] .content-area :where(.panel-card__header, .sf-section-panel__header, .card-header) {
    border-top: 0 !important;
}

@media (max-width: 640.98px) {
    .content-area {
        padding: var(--common-page-header-offset) var(--common-page-horizontal-padding) var(--common-page-panel-row-gap);
    }
}

/* Bootstrap spacing tokens used by Hub screens are semantic aliases over the
   Common Setting-backed spacing scale. Keep the token inventory synchronized
   with the central layout validator before introducing another utility token. */
.g-2 { --bs-gutter-x: var(--common-space-2) !important; --bs-gutter-y: var(--common-space-2) !important; }
.g-3 { --bs-gutter-x: var(--common-space-3) !important; --bs-gutter-y: var(--common-space-3) !important; }
.g-4 { --bs-gutter-x: var(--common-space-4) !important; --bs-gutter-y: var(--common-space-4) !important; }
.gap-1 { gap: var(--common-space-1) !important; }
.gap-2 { gap: var(--common-space-2) !important; }
.gap-3 { gap: var(--common-space-3) !important; }
.m-3 { margin: var(--common-space-3) !important; }
.mb-1 { margin-bottom: var(--common-space-1) !important; }
.mb-2 { margin-bottom: var(--common-space-2) !important; }
.mb-3 { margin-bottom: var(--common-space-3) !important; }
.mb-4 { margin-bottom: var(--common-space-4) !important; }
.me-1 { margin-inline-end: var(--common-space-1) !important; }
.me-2 { margin-inline-end: var(--common-space-2) !important; }
.ms-1 { margin-inline-start: var(--common-space-1) !important; }
.ms-2 { margin-inline-start: var(--common-space-2) !important; }
.ms-1 { margin-inline-start: var(--common-space-1) !important; }
.ms-2 { margin-inline-start: var(--common-space-2) !important; }
.mt-1 { margin-top: var(--common-space-1) !important; }
.mt-2 { margin-top: var(--common-space-2) !important; }
.mt-3 { margin-top: var(--common-space-3) !important; }
.mt-4 { margin-top: var(--common-space-4) !important; }
.mx-1 { margin-inline: var(--common-space-1) !important; }
.mx-2 { margin-inline: var(--common-space-2) !important; }
.my-2 { margin-block: var(--common-space-2) !important; }
.my-3 { margin-block: var(--common-space-3) !important; }
.p-2 { padding: var(--common-space-2) !important; }
.p-3 { padding: var(--common-space-3) !important; }
.pb-1 { padding-bottom: var(--common-space-1) !important; }
.pb-2 { padding-bottom: var(--common-space-2) !important; }
.pb-3 { padding-bottom: var(--common-space-3) !important; }
.ps-3 { padding-inline-start: var(--common-space-3) !important; }
.pt-2 { padding-top: var(--common-space-2) !important; }
.pt-3 { padding-top: var(--common-space-3) !important; }
.px-3 { padding-inline: var(--common-space-3) !important; }
.px-4 { padding-inline: var(--common-space-4) !important; }
.py-1 { padding-block: var(--common-space-1) !important; }
.py-2 { padding-block: var(--common-space-2) !important; }
.py-3 { padding-block: var(--common-space-3) !important; }
.py-4 { padding-block: var(--common-space-4) !important; }
.py-5 { padding-block: var(--common-space-5) !important; }

.content-area :where(.page-hero) ~ :where(.row) > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}