/*
 * Story 0078 — constrain Filament topnav contents to the same max-width
 * the page body uses, so the nav doesn't visually extend past the table /
 * page content underneath it.
 *
 * Filament's stock `.fi-topbar > nav` is `flex h-16 items-center
 * gap-x-4 px-4 md:px-6 lg:px-8` and renders edge-to-edge — on a 1920px
 * viewport the nav stretches the full ~1900px while `.fi-main`
 * (max-w-7xl mx-auto) is constrained to 1280px. The misalignment reads
 * as "menu spans entire page rather than occupying the same space as
 * the table below."
 *
 * Fix: at lg+ (1024px+, matching Filament's own `lg:flex` toggles for
 * nav groups + user menu) constrain the nav contents to `max-w-7xl`
 * (1280px) + `mx-auto`. Below lg, Filament's hamburger collapse owns
 * the mobile layout — leave it alone.
 *
 * The shadow / ring / bg-white background stays on the nav (which is
 * narrower now). The page background shows above/below it at wider
 * viewports — acceptable trade-off vs. a structural rewrite of the
 * topbar render hook.
 *
 * NOT done in v1: split-justified nav band (workflow left / admin
 * right). Filament's nav-groups UL is a single flat `<ul>` containing
 * all top-level items + dropdown groups as siblings. Cleanly splitting
 * them would require a custom TOPBAR render hook (story 0078 Q1
 * option c) with mobile-collapse + active-item-highlight regressions
 * to manage. Park for a follow-up if the constrained-width + Filament's
 * natural `ms-auto` on the user-menu doesn't read well enough.
 *
 * Iteration history:
 *   - v1 (commit 90ece4a): 3-column grid on `.fi-topbar > nav`. Broken
 *     in practice — the nav has 6 children (env pill, 2 hidden mobile
 *     buttons, brand DIV, nav-groups UL, user-menu UL), not 3, so grid
 *     auto-placement wrapped the user menu to a second row. Caught in
 *     local Herd UAT.
 *   - v2 (this file): drop the grid; just constrain max-width on the
 *     nav itself. Filament's existing flex layout handles the rest.
 */
@media (min-width: 1024px) {
    .fi-topbar > nav {
        max-width: 80rem;       /* matches Tailwind max-w-7xl (1280px) */
        margin-inline: auto;
    }

    /*
     * Story 0078 v3 — split-justified nav band. Filament renders
     * top-level resources first (Dashboard / Cases / Violations as
     * `LI.fi-topbar-item`), then dropdown groups (Config / Imports as
     * `DIV.fi-dropdown`). Pushing the first dropdown DIV right via
     * auto-margin separates workflow from admin without needing a
     * custom topbar render hook.
     *
     * Live DOM verified 2026-05-16:
     *   <ul class="me-4 hidden items-center gap-x-4 lg:flex">
     *     <li.fi-topbar-item>Dashboard</li>
     *     <li.fi-topbar-item>Cases</li>
     *     <li.fi-topbar-item>Violations</li>
     *     <div.fi-dropdown>Config ▾</div>     ← gets margin-left: auto
     *     <div.fi-dropdown>Imports ▾</div>
     *   </ul>
     *
     * If a future Filament minor reshapes this (e.g., wrapping each
     * dropdown in an LI), the selector below needs updating; the
     * matching JS-side smoke would be: every dropdown sits at
     * `getBoundingClientRect().right` close to the user-menu, every
     * top-level item sits close to the brand.
     */
    .fi-topbar > nav > ul.lg\:flex > .fi-dropdown:first-of-type {
        margin-left: auto !important;
    }

    /*
     * Story 0078 v5 — trim the page-header vertical footprint.
     * Stock Filament renders `.fi-header-heading` at `text-2xl` (24px)
     * base, jumping to `text-3xl` (30px) at sm+. Plus the surrounding
     * `.fi-page > section` carries `py-8` (32px top/bottom) and a
     * `gap-y-8` (32px between header and content), giving the page
     * title and table ~100px of vertical separation. Combined with the
     * breadcrumb above + nav active highlight, that's three signals of
     * "you're on Cases" — the title's font size carries less weight
     * given that redundancy.
     *
     * v5 cuts:
     *   - h1 font from 30px → 20px (text-xl) on lg+
     *   - page section py-8 → py-4 (16px top/bottom)
     *   - gap-y-8 → gap-y-4
     * Reclaims ~50px of above-the-fold vertical space without removing
     * the a11y h1 anchor.
     */
    .fi-page > section .fi-header-heading {
        font-size: 1.25rem !important;       /* text-xl (20px) */
        line-height: 1.75rem !important;
    }

    .fi-page > section.gap-y-8 {
        row-gap: 1rem !important;            /* gap-y-4 (16px) */
        padding-top: 1rem !important;        /* py-4 (16px) */
        padding-bottom: 1rem !important;
    }
}