/* Shared page anatomy. Legacy and React headers use the same spacing contract.
   Deliberately excludes cards, table toolbars, dialogs and branding previews. */
body[bp-layout="vertical"] {
    --vera-heading-gap: 24px;
    --vera-heading-inner-gap: 8px;
}
body[bp-layout="vertical"] .page-body > main :is(.page-header,.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) {
    min-width: 0;
    max-width: 100%;
    margin: 0 0 var(--vera-heading-gap) !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--vera-border) !important;
    gap: 16px;
    overflow-wrap: anywhere;
}
body[bp-layout="vertical"] .page-body > main :is(.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
body[bp-layout="vertical"] .page-body > main :is(.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) > :first-child {
    flex: 1 1 20rem;
    min-width: 0;
}
body[bp-layout="vertical"] .page-body > main .page-header > :is(.container-fluid,.container-xl,.container-xxl) {
    width: 100%; max-width: none; padding: 0 !important; margin: 0;
}
body[bp-layout="vertical"] .page-body > main .page-header .row {
    row-gap: 12px;
    align-items: center !important;
}
body[bp-layout="vertical"] .page-body > main .page-header .row > .col {
    flex: 1 1 20rem;
    min-width: 0;
}
body[bp-layout="vertical"] .page-body > main .page-header .row > .col-auto {
    max-width: 100%; flex-wrap: wrap;
}
body[bp-layout="vertical"] .page-body > main .entity-header {
    min-width: 0; margin: 0; padding: 0; align-items: center; gap: 16px;
}
body[bp-layout="vertical"] .page-body > main .entity-header__actions {
    padding-top: 0; gap: 8px;
}
body[bp-layout="vertical"] .page-body > main .entity-header__actions .btn {
    white-space: normal; max-width: 100%; overflow-wrap: anywhere;
}
body[bp-layout="vertical"] .page-body > main :is(.page-header,.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) h1 {
    margin: 0 !important;
    max-width: 100%;
    font-size: var(--vera-type-title,1.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    color: var(--vera-text) !important;
    overflow-wrap: anywhere;
}
body[bp-layout="vertical"] .page-body > main :is(.page-pretitle,.iot-eyebrow,.vera-lab-kicker,.payload-explorer-fallback__eyebrow) {
    margin: 0 0 4px !important;
    font-size: var(--vera-type-small,.8125rem) !important;
    font-weight: 500 !important;
    line-height: 1.5;
    letter-spacing: 0 !important;
    text-transform: none;
}
body[bp-layout="vertical"] .page-body > main :is(.page-header,.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) h1 + :is(p,.text-secondary,.text-muted) {
    margin: var(--vera-heading-inner-gap) 0 0 !important;
    color: var(--vera-muted);
}
body[bp-layout="vertical"] .page-body > main .breadcrumb {
    margin: 0 0 12px !important;
    padding: 0;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}
body[bp-layout="vertical"] .page-body > main :is(.iot-header-actions,.vera-lab-heading > .vera-lab-actions,.payload-explorer-fallback__actions,.vera-page-actions,.page-header .btn-list) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 8px; min-width: 0; max-width: 100%; margin-left: auto;
}
body[bp-layout="vertical"] .page-body > main :is(.page-header,.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) .btn {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
body[bp-layout="vertical"] .page-body > main :is(.iot-dashboard,.ot-branding-page,.ot-company-branding,.payload-explorer-fallback) {
    width: 100%; max-width: none; margin-inline: 0; padding-top: 0; padding-inline: 0;
}
/* Dashboard sections already have a grid gap; do not add it twice. */
body[bp-layout="vertical"] .vera-dashboard-lab > .vera-lab-heading { margin-bottom: 0 !important; }
body[bp-layout="vertical"] .page-body > main .ot-section-tabs {
    margin: 0 0 var(--vera-heading-gap) !important;
    max-width: 100%; min-width: 0;
}
body[bp-layout="vertical"] .page-body > main .company-workspace-nav { margin-bottom: 0 !important; }
body[bp-layout="vertical"] .page-body > main .ot-section-tabs > button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    padding: 8px 14px; flex: 0 0 auto; font: inherit;
    color: var(--vera-link) !important; background: transparent !important;
    border: 0 !important; border-bottom: 2px solid transparent !important;
    border-radius: 0 !important; box-shadow: none !important;
}
body[bp-layout="vertical"] .page-body > main .ot-section-tabs > button:is(.active,[aria-selected="true"],:hover) {
    border-bottom-color: var(--vera-accent) !important;
}
body[bp-layout="vertical"] .page-body > main .ot-section-tabs > button[aria-selected="true"] { font-weight: 600; }
body[bp-layout="vertical"] .page-body > main .ot-section-tabs > button:focus-visible { outline: 2px solid var(--vera-text); outline-offset: -3px; }
body[bp-layout="vertical"] .page-body > main .iot-view-toolbar {
    display: flex; justify-content: flex-end; flex-wrap: wrap;
    min-width: 0; margin-bottom: var(--vera-heading-gap);
}
@media (max-width: 767.98px) {
    body[bp-layout="vertical"] { --vera-heading-gap: 20px; }
    body[bp-layout="vertical"] .page-body > main :is(.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) {
        align-items: stretch; flex-direction: column;
    }
    body[bp-layout="vertical"] .page-body > main :is(.iot-page-header,.vera-lab-heading,.ot-branding-header,.payload-explorer-fallback__header,.vera-page-header) > :first-child {
        flex-basis: auto;
    }
    body[bp-layout="vertical"] .page-body > main :is(.iot-header-actions,.entity-header__actions,.vera-lab-heading > .vera-lab-actions,.payload-explorer-fallback__actions,.vera-page-actions,.page-header .btn-list,.page-header .row > .col-auto) {
        width: 100%; margin-left: 0 !important; justify-content: flex-start !important;
    }
    body[bp-layout="vertical"] .page-body > main .ot-section-tabs { flex-wrap: wrap; overflow-x: visible; }
    body[bp-layout="vertical"] .page-body > main .ot-section-tabs > :is(a,button) {
        max-width: 100%; white-space: normal; overflow-wrap: anywhere;
    }
}