/**
 * Restaurant panel layout + cluster tab fixes.
 *
 * 1. Filament sets .fi-main-ctn to w-screen (100vw) next to the sidebar, which
 *    makes the page wider than the viewport and crops the right side.
 * 2. Cluster tabs use a scroll wrapper so many tabs never expand page width.
 */

/* --- Fix page wider than viewport (sidebar + w-screen) --- */
.fi-body.fi-body-has-navigation .fi-layout {
    width: 100%;
    max-width: 100%;
}

.fi-body.fi-body-has-navigation .fi-main-ctn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    flex: 1 1 0% !important;
}

.fi-page,
.fi-page-header-main-ctn,
.fi-page-main,
.fi-page-content {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* --- Constrained page width with side breathing room --- */
.fi-body.fi-body-has-navigation .fi-main {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2.5vw, 1.75rem);
    box-sizing: border-box;
}

/* --- Cluster tabs between title and action button (single row) --- */
.fi-header.boostx-header-with-cluster-tabs {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(12rem, 1fr) max-content;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
}

.fi-header.boostx-header-with-cluster-tabs > div:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
}

.fi-header.boostx-header-with-cluster-tabs .fi-header-heading,
.fi-header.boostx-header-with-cluster-tabs .fi-header-subheading {
    white-space: normal;
    overflow-wrap: break-word;
}

.fi-header.boostx-header-with-cluster-tabs > .boostx-cluster-tabs--header {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    align-self: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    border-top: none;
    padding-top: 0;
}

.fi-header.boostx-header-with-cluster-tabs > .fi-header-actions-ctn {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0 !important;
    justify-self: end;
    align-self: center;
}

.fi-page.boostx-cluster-tabs-in-header.fi-page-has-sub-navigation-top .fi-page-main {
    gap: 1.5rem;
}

.fi-page.boostx-cluster-tabs-in-header .fi-page-header-main-ctn {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 1.5rem;
}

/* --- Cluster tab scroll wrapper (injected via render hooks) --- */
.boostx-cluster-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: rgb(212 212 216) transparent;
}

.boostx-cluster-tabs--header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.boostx-cluster-tabs--header > .fi-page-sub-navigation-tabs.fi-tabs {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: 0;
    gap: 0.125rem;
}

.boostx-cluster-tabs--header .fi-tabs-item {
    flex: 0 0 auto;
    max-width: none;
}

.boostx-cluster-tabs--header .fi-tabs-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .fi-header.boostx-header-with-cluster-tabs > .boostx-cluster-tabs--header {
        display: none;
    }
}

.boostx-cluster-tabs::-webkit-scrollbar {
    height: 6px;
}

.boostx-cluster-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.boostx-cluster-tabs::-webkit-scrollbar-thumb {
    background-color: rgb(212 212 216);
    border-radius: 9999px;
}

.dark .boostx-cluster-tabs {
    scrollbar-color: rgb(82 82 91) transparent;
}

.dark .boostx-cluster-tabs::-webkit-scrollbar-thumb {
    background-color: rgb(82 82 91);
}

@media (min-width: 768px) {
    .boostx-cluster-tabs:not(.boostx-cluster-tabs--header) > .fi-page-sub-navigation-tabs.fi-tabs {
        display: inline-flex;
        width: auto;
        max-width: none;
        margin-inline: unset;
        vertical-align: top;
        text-align: left;
    }
}

.boostx-cluster-tabs .fi-tabs-item {
    flex: 0 0 auto;
}

.boostx-cluster-tabs .fi-tabs-item.fi-active,
.boostx-cluster-tabs .fi-tabs-item[aria-selected="true"] {
    background-color: #1D4D2B !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 0.7rem;
}

.boostx-cluster-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.boostx-cluster-tabs .fi-tabs-item.fi-active .fi-icon,
.boostx-cluster-tabs .fi-tabs-item.fi-active svg,
.boostx-cluster-tabs .fi-tabs-item[aria-selected="true"] .fi-tabs-item-label,
.boostx-cluster-tabs .fi-tabs-item[aria-selected="true"] .fi-icon,
.boostx-cluster-tabs .fi-tabs-item[aria-selected="true"] svg {
    color: #ffffff !important;
}