/*
 * This CSS file provides comprehensive styling for the Filament Tiptap Editor's
 * Grid Builder. It interprets the `data-col-span` and `data-stack-at`
 * attributes to create a fully responsive CSS Grid layout.
 *
 * This is a direct replacement for the Tailwind CSS utility classes
 * the plugin is designed to work with, allowing it to function correctly
 * in any project that uses a modern frontend framework like Bootstrap.
 *
 * NOTE: The addition of `!important` is necessary to override inline styles
 * that may be added to the grid columns by the editor itself.
 *
 * The previous version had a selector issue where `data-stack-at` was
 * incorrectly applied to the column selector. This has been fixed to
 * correctly target children of the grid container with the `data-stack-at`
 * attribute.
 */

/*
 * 1. Base Grid Container Styles
 * --------------------------------------------------------------------------
 * The parent element that defines the grid. `grid-template-columns` is set
 * to a 12-column layout to match common grid systems. The `!important` is
 * crucial for overriding any inline styles from the editor.
 */
.filament-tiptap-grid-builder {
    display: grid;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 1.5rem; /* Standard Bootstrap 5 gutter spacing */
}

/*
 * 2. Default Stacking on Small Screens (Mobile-first approach)
 * --------------------------------------------------------------------------
 * By default, all columns will span the full 12 columns. This ensures that
 * on the smallest screen sizes, the layout is stacked vertically.
 * `!important` has been added here to override inline styles.
 */
.filament-tiptap-grid-builder__column {
    grid-column: span 12 !important;
}

/*
 * 3. Breakpoint-specific Column Spans
 * --------------------------------------------------------------------------
 * We define media queries for each possible `data-stack-at` value from
 * the Tiptap editor. The selectors now correctly target columns that are
 * children of a grid with a specific `data-stack-at` attribute.
 *
 * The `!important` rule ensures these specific grid rules override the
 * default stacking behavior and any inline styles.
 */

/* --- `sm` breakpoint: > 576px (Bootstrap's 'sm') --- */
@media (min-width: 576px) {
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="1"] {
        grid-column: span 1 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="2"] {
        grid-column: span 2 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="3"] {
        grid-column: span 3 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="4"] {
        grid-column: span 4 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="5"] {
        grid-column: span 5 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="6"] {
        grid-column: span 6 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="7"] {
        grid-column: span 7 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="8"] {
        grid-column: span 8 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="9"] {
        grid-column: span 9 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="10"] {
        grid-column: span 10 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="11"] {
        grid-column: span 11 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="sm"]
        > .filament-tiptap-grid-builder__column[data-col-span="12"] {
        grid-column: span 12 !important;
    }
}

/* --- `md` breakpoint: > 768px (Bootstrap's 'md') --- */
@media (min-width: 768px) {
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="1"] {
        grid-column: span 1 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="2"] {
        grid-column: span 2 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="3"] {
        grid-column: span 3 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="4"] {
        grid-column: span 4 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="5"] {
        grid-column: span 5 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="6"] {
        grid-column: span 6 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="7"] {
        grid-column: span 7 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="8"] {
        grid-column: span 8 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="9"] {
        grid-column: span 9 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="10"] {
        grid-column: span 10 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="11"] {
        grid-column: span 11 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="md"]
        > .filament-tiptap-grid-builder__column[data-col-span="12"] {
        grid-column: span 12 !important;
    }
}

/* --- `lg` breakpoint: > 992px (Bootstrap's 'lg') --- */
@media (min-width: 992px) {
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="1"] {
        grid-column: span 1 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="2"] {
        grid-column: span 2 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="3"] {
        grid-column: span 3 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="4"] {
        grid-column: span 4 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="5"] {
        grid-column: span 5 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="6"] {
        grid-column: span 6 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="7"] {
        grid-column: span 7 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="8"] {
        grid-column: span 8 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="9"] {
        grid-column: span 9 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="10"] {
        grid-column: span 10 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="11"] {
        grid-column: span 11 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="lg"]
        > .filament-tiptap-grid-builder__column[data-col-span="12"] {
        grid-column: span 12 !important;
    }
}

/* --- `xl` breakpoint: > 1200px (Bootstrap's 'xl') --- */
@media (min-width: 1200px) {
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="1"] {
        grid-column: span 1 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="2"] {
        grid-column: span 2 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="3"] {
        grid-column: span 3 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="4"] {
        grid-column: span 4 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="5"] {
        grid-column: span 5 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="6"] {
        grid-column: span 6 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="7"] {
        grid-column: span 7 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="8"] {
        grid-column: span 8 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="9"] {
        grid-column: span 9 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="10"] {
        grid-column: span 10 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="11"] {
        grid-column: span 11 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="12"] {
        grid-column: span 12 !important;
    }
}

/* --- `2xl` breakpoint: > 1400px (Bootstrap 5.2+ 'xxl') --- */
@media (min-width: 1400px) {
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="1"] {
        grid-column: span 1 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="2"] {
        grid-column: span 2 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="3"] {
        grid-column: span 3 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="4"] {
        grid-column: span 4 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="5"] {
        grid-column: span 5 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="6"] {
        grid-column: span 6 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="7"] {
        grid-column: span 7 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="8"] {
        grid-column: span 8 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="9"] {
        grid-column: span 9 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="10"] {
        grid-column: span 10 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="11"] {
        grid-column: span 11 !important;
    }
    .filament-tiptap-grid-builder[data-stack-at="2xl"]
        > .filament-tiptap-grid-builder__column[data-col-span="12"] {
        grid-column: span 12 !important;
    }
}

/*
 * 4. Handling Grids with No `data-stack-at` Attribute
 * --------------------------------------------------------------------------
 * If a grid is created with no stacking breakpoint (e.g., it always spans),
 * we apply the column spans at the base level to ensure it always renders
 * as a grid. The `!important` rule here is to ensure it takes precedence
 * over other rules.
 */
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="1"] {
    grid-column: span 1 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="2"] {
    grid-column: span 2 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="3"] {
    grid-column: span 3 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="4"] {
    grid-column: span 4 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="5"] {
    grid-column: span 5 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="6"] {
    grid-column: span 6 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="7"] {
    grid-column: span 7 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="8"] {
    grid-column: span 8 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="9"] {
    grid-column: span 9 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="10"] {
    grid-column: span 10 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="11"] {
    grid-column: span 11 !important;
}
.filament-tiptap-grid-builder:not([data-stack-at])
    > .filament-tiptap-grid-builder__column[data-col-span="12"] {
    grid-column: span 12 !important;
}