/*
 * The save bar that comes to the reader (Sets, 06.08.2026).
 *
 * ⚠ Plain CSS served through `filament:assets`, NOT a Tailwind theme build —
 * the same reason `permission-matrix.css` gives: the panel has no custom theme,
 * and referencing the Vite manifest from the provider crashed the application
 * wherever the front end was not built (build #765).
 *
 * ── What it does ──────────────────────────────────────────────────────────
 *
 * ⛔ The notification settings page is thirty-two cards long and the save
 * button sat under the last one. Changing a span near the top meant scrolling
 * past everything to reach it, and nothing but memory said there was an unsaved
 * change at all.
 *
 * ⚠ The button is NOT hidden while the page is clean. It stays where it has
 * always been, at the end of the form; `fi-save-bar-raised` is added once
 * something changes and that is what pins it to the bottom of the viewport. A
 * button that exists only while a script says so is a button that disappears
 * when the script is wrong.
 *
 * ⚠ `bottom: -1px` rather than `0`: a sticky element parked exactly on the edge
 * leaves a hairline of page showing through under it on fractional device pixel
 * ratios, and the border then reads as two lines.
 */

.fi-save-bar {
    justify-content: flex-end;
    gap: 0.75rem;
}

/*
 * ⛔ The sticky goes on the FORM'S OWN CHILD, not on the bar (Sets, 06.08.2026
 * — "hala sayfanin en altinda scrolla gorebilecegim sekilde cikiyor").
 *
 * A sticky element can only travel inside its containing block, and the bar's
 * was three wrappers each exactly as tall as the bar itself: 36 pixels of
 * range, so it never lifted a single pixel. Measured in the browser — the rule
 * was applied, the class was on the element, and nothing moved. Everything
 * about it looked right except the one number that mattered.
 *
 * ⚠ `:has()` reaches from the row that CAN travel — a direct child of the
 * 6959 pixel form — down to the marker the page puts on the bar. Styling that
 * row directly from PHP is not possible: Filament owns it, and the schema only
 * hands attributes to the components it is given.
 */
.fi-sc-form > .fi-grid:has(.fi-save-bar-raised) {
    position: sticky;

    /*
     * ⚠ `-1px` rather than `0`: parked exactly on the edge, a hairline of page
     * shows through underneath on fractional device pixel ratios and the border
     * then reads as two lines.
     */
    bottom: -1px;
    z-index: 20;

    margin: 0 -1rem -1rem;
    padding: 0.75rem 1rem;

    /*
     * ⚠ Filament's own surface variables, so the bar follows the panel into
     * dark mode instead of carrying a colour of its own that is right in one
     * theme and wrong in the other.
     *
     * ⛔ `var(--gray-50)`, NOT `rgb(var(--gray-50))`. Filament 5 stores a
     * COMPLETE colour in these — `oklch(0.985 0 0)` — rather than the channel
     * triplet the `rgb(...)` wrapper expects, so wrapping it produced an
     * invalid value the browser threw away. The bar was transparent and the
     * page scrolled straight through it (measured, 06.08.2026).
     */
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 12px -8px rgb(0 0 0 / 0.25);
}

/* ⚠ `:where()` keeps the dark rule at the same weight as the light one, the
 * way `permission-matrix.css` writes it. */
:where(.dark) .fi-sc-form > .fi-grid:has(.fi-save-bar-raised) {
    background-color: var(--gray-900);
    border-top: 1px solid var(--gray-700);
}

/* ⚠ Keeps the "unsaved" line from flashing before Alpine has decided. */
[x-cloak] {
    display: none !important;
}