/* Filament already provides responsive grids, table scrolling, and Livewire's
   request-scoped loading visibility. Keep this file limited to layout guards. */

.fi-header-actions-ctn {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.fi-header-actions-ctn > *,
.fi-fo-field-wrp,
.fi-input-wrp {
    min-width: 0;
    max-width: 100%;
}

/* Never let a Filament grid/section child define a wider page than its viewport. */
.fi-main,
.fi-page,
.fi-page > *,
.fi-section,
.fi-section-content-ctn,
.fi-section-content,
.fi-fo-component-ctn,
.fi-grid,
.fi-grid > *,
.fi-wi,
.fi-wi > * {
    min-width: 0;
}

.fi-section,
.fi-section-content-ctn,
.fi-section-content,
.fi-fo-component-ctn,
.fi-grid,
.fi-wi {
    max-width: 100%;
}

.fi-section-header-heading,
.fi-section-header-description,
.fi-header-heading,
.fi-header-subheading {
    overflow-wrap: anywhere;
}

textarea.fi-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.fi-ta-content-ctn {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Generous and clean spacing between all action buttons across Filament pages. */
.fi-ta-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    flex-wrap: nowrap;
}

.fi-ta-actions .fi-btn,
.fi-ta-actions .fi-icon-btn {
    margin: 0.125rem !important;
}

.fi-page-header-actions,
.fi-header-actions-ctn,
.fi-header-actions-ctn > .fi-ac,
.fi-ta-header-actions,
.fi-form-actions,
.fi-form-actions .fi-ac,
.fi-modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem !important;
}

.fi-ac {
    gap: 0.625rem !important;
}

.fi-btn {
    gap: 0.5rem !important;
}

@media (max-width: 640px) {
    /* Mobile pages should never create document-level horizontal scrolling. */
    .fi-main {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .fi-page,
    .fi-page > *,
    .fi-section,
    .fi-section-content-ctn,
    .fi-section-content,
    .fi-fo-component-ctn,
    .fi-grid,
    .fi-grid > *,
    .fi-wi,
    .fi-wi > * {
        min-width: 0;
        max-width: 100%;
    }

    .fi-header-actions-ctn {
        width: 100%;
        align-items: stretch;
    }

    .fi-header-actions-ctn > .fi-ac {
        width: 100%;
        flex-wrap: wrap;
    }

    .fi-section-header {
        min-width: 0;
        flex-wrap: wrap;
    }

    .fi-ta-header-toolbar,
    .fi-ta-header-toolbar > *,
    .fi-ta-search-field {
        min-width: 0;
        max-width: 100%;
    }

    .fi-form-actions,
    .fi-form-actions .fi-ac {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* Keep dialogs inside the visual viewport, including iOS Safari's dynamic bars. */
    .fi-modal-window-ctn {
        padding: 0.5rem !important;
    }

    .fi-modal-window-ctn > .fi-modal-window {
        width: 100% !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        margin-inline: auto;
    }

    .fi-modal-window .fi-modal-header,
    .fi-modal-window .fi-modal-content,
    .fi-modal-window .fi-modal-footer {
        max-width: 100%;
        padding-inline: 1rem !important;
    }

    .fi-modal-window .fi-modal-content {
        overflow-x: hidden;
    }

    .fi-modal-footer-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .fi-modal-footer-actions .fi-btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
}

/* ─── Icon sizing ────────────────────────────────────────────────────────────
   Guard: prevent bare classless SVGs inside widgets/pages from growing huge.
   Uses max-width/max-height WITHOUT !important so inline style= wins.      */
.fi-page > * svg:not([class]):not([style]),
.fi-widget > * svg:not([class]):not([style]) {
    max-width: 1.5rem;
    max-height: 1.5rem;
}

/* System guide: tabs in dark hero bar — hide scrollbar on small screens. */
.sg-tabs-bar {
    scrollbar-width: none;
}

.sg-tabs-bar::-webkit-scrollbar {
    display: none;
}