/** Businfo UI Foundation — page, grid and application-inset layouts. */
html:has(.bi-component-page) {
    scroll-padding-top: var(--bi-scroll-offset-top);
    scroll-padding-bottom: var(--bi-scroll-offset-bottom);
}

body.bi-component-page {
    --bi-viewport-height: 100vh;
    min-width: 20rem;
}

@supports (height: 100dvh) {
    body.bi-component-page {
        --bi-viewport-height: 100dvh;
    }
}

.bi-container,
.bi-component-page :where(.bi-page-container) {
    width: min(100%, var(--bi-page-max));
    margin-inline: auto;
    padding-inline: var(--bi-page-gutter);
}

.bi-content-container {
    width: min(100%, var(--bi-content-max));
    margin-inline: auto;
}

.bi-form-container {
    width: min(100%, var(--bi-form-max));
}

.bi-reading-container {
    width: min(100%, var(--bi-reading-max));
}

.bi-grid {
    display: grid;
    grid-template-columns: repeat(var(--bi-grid-columns), minmax(0, 1fr));
    gap: var(--bi-grid-gutter);
}

.bi-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.bi-grid--cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.bi-stack {
    display: flex;
    flex-direction: column;
    gap: var(--bi-stack-gap, var(--bi-space-4));
}

.bi-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bi-cluster-gap, var(--bi-space-3));
}

.bi-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bi-space-4);
}

.bi-sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bi-grid-gutter);
}

.bi-supporting-pane-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bi-grid-gutter);
}

.bi-page-section {
    padding-block: var(--bi-section-space, var(--bi-space-8));
}

.bi-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bi-space-4);
    margin-bottom: var(--bi-space-6);
}

.bi-page-header h1 {
    margin: 0;
    color: var(--bi-text-primary);
    font-size: var(--bi-font-size-2xl);
    line-height: var(--bi-line-height-tight);
}

.bi-page-header p {
    max-width: var(--bi-reading-max);
    margin: var(--bi-space-2) 0 0;
    color: var(--bi-text-muted);
}

/* Standard inset API. Custom UI may set --bi-fixed-offset. */
[data-bi-fixed-edge="top"],
.bi-fixed-top {
    position: fixed;
    z-index: var(--bi-fixed-z, 1040);
    inset-inline: var(--bi-fixed-inline, 0);
    top: calc(var(--bi-safe-top) + var(--bi-fixed-offset, 0px));
}

[data-bi-fixed-edge="bottom"],
.bi-fixed-bottom {
    position: fixed;
    z-index: var(--bi-fixed-z, 1040);
    inset-inline: var(--bi-fixed-inline, 0);
    bottom: calc(var(--bi-safe-bottom) + var(--bi-keyboard-inset) + var(--bi-fixed-offset, 0px));
}

[data-bi-sticky-edge="top"],
.bi-sticky-top {
    position: sticky;
    z-index: var(--bi-sticky-z, 20);
    top: calc(var(--bi-app-top-inset) + var(--bi-sticky-offset, 0px));
}

[data-bi-sticky-edge="bottom"],
.bi-sticky-bottom {
    position: sticky;
    z-index: var(--bi-sticky-z, 20);
    bottom: calc(var(--bi-app-bottom-inset) + var(--bi-sticky-offset, 0px));
}

[data-bi-scroll-anchor],
.bi-scroll-anchor,
.bi-component-page :where(input, select, textarea, button, [tabindex]):focus {
    scroll-margin-top: var(--bi-scroll-offset-top);
    scroll-margin-bottom: var(--bi-scroll-offset-bottom);
}

.bi-safe-area {
    padding-top: var(--bi-safe-top);
    padding-right: var(--bi-safe-right);
    padding-bottom: var(--bi-safe-bottom);
    padding-left: var(--bi-safe-left);
}

.bi-safe-area-bottom {
    padding-bottom: var(--bi-safe-bottom);
}

.bi-with-bottom-action {
    padding-bottom: calc(var(--bi-app-bottom-inset) + var(--bi-action-height, 4.5rem) + var(--bi-space-6));
}

/* Existing Businfo fixed regions participate in the unified inset stack. */
.bi-component-page :where(.vendor-mobile-appbar, .trip-app-header) {
    padding-top: max(var(--bi-safe-top), var(--bi-space-2));
}

.bi-component-page :where(
    .vendor-mobile-tabbar,
    .profile-savebar,
    .trip-app-bottom-bar,
    .mobile-sticky-bar,
    .company-mobile-cta
) {
    padding-bottom: max(var(--bi-safe-bottom), var(--bi-space-2));
}

/* Medium: 768–1023 */
@media (min-width: 768px) {
    .bi-sidebar-layout {
        grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    }

    .bi-page-section {
        --bi-section-space: var(--bi-space-10);
    }
}

/* Expanded: 1024–1439 */
@media (min-width: 1024px) {
    .bi-supporting-pane-layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    }

    .bi-page-section {
        --bi-section-space: var(--bi-space-12);
    }
}

/* Large: 1440+ */
@media (min-width: 1440px) {
    .bi-sidebar-layout {
        grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    }

    .bi-supporting-pane-layout {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    }

    .bi-page-section {
        --bi-section-space: var(--bi-space-16);
    }
}