/*
 * Load this file AFTER Filament's theme (see STYLES_AFTER hook) so these rules win in the cascade.
 * Body uses: class="fi-body fi-panel-admin"
 */
body.fi-body.fi-panel-admin .fi-layout {
    width: 100% !important;
    max-width: 100vw !important;
}

/* Sidebar row: main area must grow — w-screen (100vw) on .fi-main-ctn breaks flex sizing */
body.fi-body.fi-panel-admin .fi-layout > .fi-main-ctn {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Use full width of .fi-main-ctn (drop 1920px cap if it fights the layout) */
body.fi-body.fi-panel-admin main.fi-main,
body.fi-body.fi-panel-admin .fi-main {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.fi-body.fi-panel-admin .fi-page,
body.fi-body.fi-panel-admin .fi-page-content,
body.fi-body.fi-panel-admin .fi-page-header-main-ctn {
    max-width: none !important;
    width: 100%;
}

/* Schema: grid columns may get .fi-width-7xl etc. — fill the track */
body.fi-body.fi-panel-admin .fi-sc > .fi-grid-col,
body.fi-body.fi-panel-admin .fi-grid-col {
    max-width: none !important;
}

/*
 * Filament (e.g. app.css @layer components) includes:
 *   @media (min-width: 64rem) {
 *     .fi-grid:not(.fi-grid-direction-col).lg:fi-grid-cols { grid-template-columns: var(--cols-lg); }
 *   }
 * --cols-lg inherits. A nested .fi-grid can use a parent’s --cols-lg, so tracks don’t match this grid’s
 * own inline --cols-default / --cols-xl / --cols-2xl. Commenting that line fixes layout by staying on
 * --cols-default until xl/2xl. We recreate that with unlayered !important rules (larger breakpoints last).
 */
@media (min-width: 64rem) {
    body.fi-body.fi-panel-admin .fi-grid:not(.fi-grid-direction-col).lg\:fi-grid-cols {
        grid-template-columns: var(--cols-default) !important;
    }
}

@media (min-width: 80rem) {
    body.fi-body.fi-panel-admin .fi-grid:not(.fi-grid-direction-col).xl\:fi-grid-cols {
        grid-template-columns: var(--cols-xl) !important;
    }
}

@media (min-width: 96rem) {
    body.fi-body.fi-panel-admin .fi-grid:not(.fi-grid-direction-col).\32xl\:fi-grid-cols {
        grid-template-columns: var(--cols-2xl) !important;
    }
}

/* Select / input wrappers: avoid absurdly narrow columns */
body.fi-body.fi-panel-admin .fi-fo-field,
body.fi-body.fi-panel-admin .fi-input-wrp {
    min-width: 0;
}

/* Resource create/edit pages: ensure page shell + schema use full main width */
body.fi-body.fi-panel-admin .fi-resource-edit-record-page,
body.fi-body.fi-panel-admin .fi-resource-create-record-page {
    width: 100% !important;
    max-width: none !important;
}

body.fi-body.fi-panel-admin .fi-resource-edit-record-page .fi-page,
body.fi-body.fi-panel-admin .fi-resource-edit-record-page .fi-page-content,
body.fi-body.fi-panel-admin .fi-resource-edit-record-page .fi-page-header-main-ctn,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .fi-page,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .fi-page-content,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .fi-page-header-main-ctn {
    width: 100% !important;
    max-width: none !important;
}

body.fi-body.fi-panel-admin .fi-resource-edit-record-page form.fi-sc-form,
body.fi-body.fi-panel-admin .fi-resource-edit-record-page .fi-sc:not(.fi-inline),
body.fi-body.fi-panel-admin .fi-resource-create-record-page form.fi-sc-form,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .fi-sc:not(.fi-inline) {
    width: 100% !important;
    max-width: none !important;
}

/*
 * .fi-page-content is a CSS grid with grid-auto-columns: minmax(0,1fr) (Tailwind auto-cols-fr).
 * With one child, that track can still shrink to the child’s max-content width (~700px here), so
 * repeat(3, 1fr) becomes three ~236px columns. Force a single full-width column track and stretch children.
 */
body.fi-body.fi-panel-admin .fi-resource-edit-record-page .fi-page-main,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .fi-page-main {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

body.fi-body.fi-panel-admin .fi-resource-edit-record-page main.fi-main,
body.fi-body.fi-panel-admin .fi-resource-create-record-page main.fi-main {
    max-width: none !important;
}

body.fi-body.fi-panel-admin .fi-resource-edit-record-page .fi-page-content,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .fi-page-content {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

body.fi-body.fi-panel-admin .fi-resource-edit-record-page .fi-page-content > *,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .fi-page-content > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

body.fi-body.fi-panel-admin .fi-resource-edit-record-page .qr-main-layout-grid,
body.fi-body.fi-panel-admin .fi-resource-create-record-page .qr-main-layout-grid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* QR / style preset forms: keep preview visible while scrolling (was 2xl-only via Tailwind). */
@media (min-width: 64rem) {
    body.fi-body.fi-panel-admin .fi-qr-preview-sticky-section {
        position: sticky;
        top: 1rem;
        align-self: start;
        z-index: 2;
    }
}

/*
 * QR preview loading overlay — must be plain CSS: markup is built in PHP (QrPreviewFrame) so Tailwind JIT
 * never sees those class names and utilities like absolute/inset-0/flex were missing from the bundle.
 */
body.fi-body.fi-panel-admin .fi-qr-preview__stack {
    position: relative;
    isolation: isolate;
    min-height: 12rem;
}

body.fi-body.fi-panel-admin .fi-qr-preview__content {
    position: relative;
    z-index: 0;
}

body.fi-body.fi-panel-admin .fi-qr-preview__overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    box-sizing: border-box;
    border-radius: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: #ffffff;
    /* When Livewire sets `display: flex` via `wire:loading.flex`, center the block */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.fi-body.fi-panel-admin .dark .fi-qr-preview__overlay,
html.dark body.fi-body.fi-panel-admin .fi-qr-preview__overlay {
    background: rgba(0, 0, 0, 0.58);
}

body.fi-body.fi-panel-admin .fi-qr-preview__overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

body.fi-body.fi-panel-admin .fi-qr-preview__overlay-icon {
    color: #ffffff !important;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

body.fi-body.fi-panel-admin .fi-qr-preview__overlay-msg {
    margin: 0;
    max-width: 20rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.375;
    color: rgba(255, 255, 255, 0.95);
}