/*
 * Sticky page heading shared by every admin page (tracker #78). The block each
 * page opens with (`.page-header-breadcrumb`: page title, breadcrumb and the
 * page's own buttons such as Add New) stays pinned under the fixed top bar
 * while the page scrolls, so admins always see which section they are in and
 * can reach its main actions. On the add/edit forms the form card's header
 * (title and Back) stays pinned below it, and the Previous / Next / Save row
 * stays at the bottom of the window. Loaded globally from includes/head.blade.php.
 *
 * Its script, assets/js/admin/sticky-heading.js, marks what is pinned
 * (`.is-stuck`), publishes how much of the window the top bar plus the
 * pinned heading cover (`--admin-sticky-offset`) and keeps the DataTables
 * floating column header just below them, measured against the table's
 * current size.
 *
 * Nothing is pinned in the mobile layout (below 992 px, Viren 2026-10-30) or
 * on short windows (a phone held sideways): there the page scrolls as before
 * and only the floating column header stays, under the top bar.
 *
 * At rest the page looks as before: half of the heading's 1.5rem `.my-4`
 * margins becomes padding inside its own background, and the action row's
 * extra bottom padding is taken back by a negative margin.
 */

/* Keyboard focus, anchor jumps and scrollIntoView() stop just below the top
   bar and the pinned heading instead of under them. */
html:has(.app-header) {
    scroll-padding-top: calc(var(--admin-sticky-offset, 4.25rem) + 0.5rem);
}

/* A focused control in a table body also clears the floating column header
   (DataTables FixedHeader) that sits under the pinned heading. */
table.dataTable > tbody :is(a, button, input, select, textarea, [tabindex]) {
    scroll-margin-top: 5rem; /* the column header can wrap onto two lines on narrow screens */
}

@media (min-width: 992px) and (min-height: 500px) {
    .app-content .page-header-breadcrumb {
        position: sticky;
        top: 4.25rem; /* height of the fixed .app-header (styles.css) */
        /* Above the page content and the floating column header (z-index 2);
           below the top bar (100), the phone menu backdrop (101) and the
           sidebar (103). */
        z-index: 99;
        /* Spread to the edges of .container-fluid so nothing shows beside it. */
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding: 0.5rem calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        background-color: var(--default-body-bg-color);
    }

    /* 1rem margin + 0.5rem padding = the 1.5rem gap above and below at rest. */
    .app-content .page-header-breadcrumb.my-4 {
        margin-block: 1rem !important;
    }

    .app-content .page-header-breadcrumb.my-3 {
        margin-block: 0.5rem !important;
    }

    /* ---- Add/edit forms (every page built on <x-admin.wizard-vertical>) ---- */

    /* The form card's header (its title and the Back button) stays just below
       the pinned heading, over the card's own background. */
    .app-content .card:has(> .card-body .vertical-wizard) > .card-header {
        position: sticky;
        top: var(--admin-sticky-offset, 8.25rem);
        z-index: 98;
        background-color: var(--custom-white) !important; /* the theme makes it transparent */
        border-start-start-radius: inherit;
        border-start-end-radius: inherit;
    }

    /* The Previous / Next / Save row stays at the bottom of the window while
       the step is taller than the window. */
    .app-content .vertical-wizard .wizard-actions {
        position: sticky;
        bottom: 0;
        z-index: 98;
        padding-bottom: 0.75rem;
        margin-bottom: -0.75rem;
        background-color: var(--custom-white);
    }

    /* Room for the pinned form card header and the pinned action row, so a
       focused field is not left under them. */
    html:has(.app-content .vertical-wizard) {
        scroll-padding-top: calc(var(--admin-sticky-offset, 4.25rem) + 4.5rem);
        scroll-padding-bottom: 5.5rem;
    }

    /* Pinned: a hairline and a soft shadow set each bar off from the content
       scrolling past it. Shadows take no room, so the page does not move. */
    .app-content .page-header-breadcrumb.is-stuck,
    .app-content .card > .card-header.is-stuck {
        box-shadow: 0 1px 0 var(--default-border), 0 0.375rem 0.75rem -0.5rem rgba(0, 0, 0, 0.18);
    }

    .app-content .vertical-wizard .wizard-actions.is-stuck {
        box-shadow: 0 -0.375rem 0.75rem -0.5rem rgba(0, 0, 0, 0.18);
    }
}