/* Form grid: stack on mobile, two columns on desktop */
@media (min-width: 64rem) {

    /* Default: allow two fields per row */
    .fi-sc-form>.fi-sc.lg\:fi-grid-cols,
    form>.fi-sc.lg\:fi-grid-cols,
    .fi-sc.lg\:fi-grid-cols,
    .fi-section-content.lg\:fi-grid-cols {
        --cols-lg: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Force wide components to span full width */
    .fi-section-content .fi-grid-col:has(.fi-fo-textarea-wrp),
    .fi-section-content .fi-grid-col:has(.fi-fo-rich-editor),
    .fi-section-content .fi-grid-col:has(.fi-fo-file-upload),
    .fi-section-content .fi-grid-col:has(.fi-fo-repeater) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 0rem) {

    /* Mobile: single column for all */
    .fi-sc-form>.fi-sc.fi-grid,
    form>.fi-sc.fi-grid,
    .fi-sc.fi-grid,
    .fi-section-content.fi-grid {
        --cols: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* Form action buttons - attached to form */
.fi-sc-actions:not(.fi-sticky) {
    margin-top: 1.5rem !important;
    padding: 1rem 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Button spacing */
.fi-sc-actions:not(.fi-sticky) .fi-ac {
    gap: 0.75rem !important;
}

/* Button styling */
.fi-sc-actions:not(.fi-sticky) .fi-ac .fi-btn {
    min-width: 120px !important;
    padding: 0.5rem 1.25rem !important;
    justify-content: center !important;
}

/* Move "Per page" selector to the far right */
/* Target the pagination wrapper */
.fi-pagination {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* Records info on the left */
.fi-pagination-records {
    order: 1 !important;
    flex: 0 0 auto !important;
}

/* Page selector (Per page) on the far right */
.fi-pagination-page-selector {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Pagination buttons in the middle */
.fi-pagination nav {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
}