/* ============================================================================
 * SignDesigner mobile overlay — infra Phase 5, 2026-07-05.
 *
 * RULES (per CLAUDE.md + the phase spec):
 *   - Loaded AFTER miami-nights-compiled.css (renderHook order in
 *     AdminPanelProvider) so it wins ties on layout properties.
 *   - ONLY @media (max-width: 820px). Nothing outside this block except the
 *     default-hidden state of the bottom nav.
 *   - ZERO color rules. Layout / spacing / sizing only. The bottom nav's
 *     colors live in its own blade partial (theme-prefixed, dual-theme),
 *     exactly like every other custom blade in this codebase.
 * ========================================================================== */

/* Bottom nav exists in the DOM on every panel page; desktop never sees it. */
.sd-bottom-nav { display: none; }

/* Livewire progress bar (partials/mobile-progress-bar.blade.php) — same
   pattern: in the DOM everywhere, visible only under the media query. */
.sd-progress-track { display: none; }

@media (max-width: 820px) {

    /* ── Bottom navigation ─────────────────────────────────────────────── */
    .sd-bottom-nav {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 40; /* above content; modal sheets bump to 60 (vendor ctn
                        is ALSO z-40 and earlier in the DOM — see the bottom
                        sheet section) */
        justify-content: space-around;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .sd-bottom-nav a,
    .sd-bottom-nav .sd-nav-more {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        flex: 1 1 0;
        min-height: 56px; /* > 44px touch target */
        font-size: 0.65rem;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* "More" is a raw <button> (type="button" in the partial) — appearance
       reset only; its colors live in the partial like every nav item. */
    .sd-bottom-nav .sd-nav-more {
        background: none;
        border: 0;
        padding: 0;
        font-family: inherit;
        cursor: pointer;
    }

    .sd-bottom-nav svg { width: 1.45rem; height: 1.45rem; }

    /* Active-item dot (structure only; dot color set per theme in the
       partial's style block). */
    .sd-bottom-nav a::after,
    .sd-bottom-nav .sd-nav-more::after {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 9999px;
        opacity: 0;
    }
    .sd-bottom-nav .sd-nav-active::after { opacity: 1; }

    /* ── "More" overflow sheet (5th nav slot) ──────────────────────────── */
    .sd-more-overlay {
        position: fixed;
        inset: 0;
        z-index: 46; /* above the mentions FAB (45), below modal sheets */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .sd-more-overlay.sd-open {
        opacity: 1;
        pointer-events: auto;
    }
    .sd-more-sheet {
        position: fixed;
        inset-inline: 0;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)); /* nav height */
        z-index: 47; /* above scrim + FAB, below modal sheets (z-60) */
        border-radius: 1rem 1rem 0 0;
        max-height: 60dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.35rem 0 0.6rem;
        transform: translateY(115%);
        visibility: hidden;
        transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
    }
    .sd-more-sheet.sd-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.2s ease-out;
    }
    .sd-more-sheet::before { /* drag handle; color in the partial */
        content: '';
        display: block;
        width: 2.25rem;
        height: 0.3rem;
        border-radius: 9999px;
        margin: 0.35rem auto 0.5rem;
    }
    .sd-more-sheet a {
        display: flex;
        /* row + start explicitly: these <a>s are inside .sd-bottom-nav, whose
           item rule sets flex-direction:column at equal specificity. */
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        flex: 0 0 auto;
        min-height: 48px;
        padding-inline: 1.1rem;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
    }
    .sd-more-sheet svg { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; }

    /* Studio Admin section caption + divider inside the More sheet (owner-
       only; colors per theme in the partial's style block). */
    .sd-more-label {
        margin-top: 0.5rem;
        padding: 0.6rem 1.1rem 0.2rem;
        border-top: 1px solid;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    /* ── Sidebar retired on mobile (app-feel pass) ─────────────────────── */
    /* The bottom nav IS the navigation. Gated with :has() so any user whose
       nav doesn't render (count<=1 → roleless edge case) keeps the vendor
       hamburger and is never stranded without navigation. */
    body:has(.sd-bottom-nav) .fi-topbar-open-sidebar-btn,
    body:has(.sd-bottom-nav) .fi-topbar-close-sidebar-btn,
    body:has(.sd-bottom-nav) .fi-sidebar {
        display: none !important;
    }

    /* Clear the fixed nav (56px + iOS safe area). */
    .fi-layout { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* ── Single-column widgets & dashboards ────────────────────────────── */
    .fi-wi-widgets,
    .fi-widgets,
    .fi-page [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Touch targets (44px minimum) ──────────────────────────────────── */
    /* miami-nights deliberately COMPACTS controls for desktop density with
       `html body .fi-btn { min-height:1.6rem !important }` etc. (~L1485) —
       (0,1,2)-specific AND !important, so a plain `.fi-btn` here loses even
       loading last. These selectors match that specificity; this file loads
       after, so ties break to the overlay. Verified via getComputedStyle at
       390px. Do NOT touch miami-nights itself. */
    /* The dark theme's compact rules are NESTED (`.dark { .fi-btn {...} }` →
       `.dark .fi-btn`, (0,2,0)) — the documented specificity trap. The
       html.dark twins below out-specify them; the plain `html body` variants
       cover the unnested light/base compact rules (~L1485). */
    html body .fi-btn,
    html.dark body .fi-btn,
    html body .fi-btn.fi-btn-size-sm,
    html.dark body .fi-btn.fi-btn-size-sm,
    html body .fi-dropdown-list-item,
    html.dark body .fi-dropdown-list-item,
    html body .fi-ta-actions .fi-link,
    html.dark body .fi-ta-actions .fi-link {
        min-height: 44px !important;
    }

    html body .fi-icon-btn,
    html.dark body .fi-icon-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    html body .fi-icon-btn svg,
    html.dark body .fi-icon-btn svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    html body .fi-input,
    html body .fi-select-input,
    html body select,
    html body textarea {
        min-height: 44px !important;
        font-size: 16px !important; /* prevents iOS focus auto-zoom */
    }

    html body .fi-ta-search-field input {
        height: 44px !important;
        font-size: 16px !important;
    }

    /* Fixed bottom nav: keep scrolled-into-view content above it (anchor
       jumps, keyboard focus, JS scrollIntoView all respect this). */
    html { scroll-padding-bottom: 76px; }

    /* ── Tables scroll sideways instead of squeezing ───────────────────── */
    /* Filament 5.6.7 renders the scroll wrapper as .fi-ta-content-ctn (the
       original Phase-5 .fi-ta-content selector no longer matches anything —
       kept for one release in case of rollback, costs nothing). */
    .fi-ta-content,
    .fi-ta-content-ctn {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fi-ta-content table,
    .fi-ta-content-ctn table { min-width: 640px; }

    /* ── Bottom sheets: modals & slide-overs (app-feel pass, 2026-07-07) ─ */
    /* CSS-only re-anchor of Filament's modal stack. The vendor window-ctn is
       a position:fixed inset-0 grid (rows 1fr auto 3fr) that centers the
       window; collapsing the bottom spacer rests the window on the bottom
       edge. The ctn still spans the viewport, so backdrop-click dismissal
       and x-trap focus containment are untouched. fi-width-screen modals are
       vendor full-viewport takeovers — excluded, they stay fullscreen. */
    html body .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn {
        grid-template-rows: 1fr auto;
        align-items: end;
        justify-items: stretch;
        padding: 0 !important;
        /* Vendor ctn and the bottom nav tie at z-40 with the nav later in
           the DOM — without this bump every sheet paints UNDER the nav. */
        z-index: 60;
    }
    html body .fi-modal:not(.fi-width-screen) > .fi-modal-close-overlay {
        z-index: 55;
    }
    /* Preserve the vendor's stacked-modal tiers (base 40 / stacked sibling
       50), which our uniform 60/55 bump would otherwise flatten — without
       this a stacked child sheet's dim overlay paints UNDER the parent
       sheet (review fix). Mirrors the vendor's own sibling selector. */
    html body .fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open:not(.fi-width-screen) > .fi-modal-window-ctn {
        z-index: 62;
    }
    html body .fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open:not(.fi-width-screen) > .fi-modal-close-overlay {
        z-index: 61;
    }

    html body .fi-modal:not(.fi-width-screen) .fi-modal-window {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;         /* kills slide-over 100dvh */
        max-height: 85dvh !important;    /* virtual-keyboard headroom */
        margin: 0 !important;            /* kills margin-inline auto/start */
        border-radius: 1rem 1rem 0 0 !important;
        border-left-width: 0 !important; /* light slide-over accent border */
        overflow-y: hidden !important;   /* content scrolls, not the window */
    }

    /* 200ms sheet motion. The vendor sets transition-duration:.3s as a
       literal on the window's .fi-transition-enter/.fi-transition-leave
       states (nothing reads --tw-duration there — a custom-property knob is
       a no-op; review fix). (0,4,2) + later/unlayered beats the vendor's
       layered (0,4,0). */
    html body .fi-modal:not(.fi-width-screen) .fi-modal-window.fi-transition-enter,
    html body .fi-modal:not(.fi-width-screen) .fi-modal-window.fi-transition-leave {
        transition-duration: 200ms;
    }

    /* Internal scroll + always-visible footer: the vendor window is already
       flex-column, so pin header/footer and let the content flex-scroll. */
    html body .fi-modal:not(.fi-width-screen) .fi-modal-window > .fi-modal-content {
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    html body .fi-modal:not(.fi-width-screen) .fi-modal-window > .fi-modal-header,
    html body .fi-modal:not(.fi-width-screen) .fi-modal-window > .fi-modal-footer {
        flex: 0 0 auto;
    }
    html body .fi-modal:not(.fi-width-screen) .fi-modal-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    html body .fi-modal:not(.fi-width-screen) .fi-modal-footer .fi-modal-footer-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    html body .fi-modal:not(.fi-width-screen) .fi-modal-footer-actions .fi-btn {
        width: 100%;
        min-height: 48px !important;
    }

    /* Drag handle — structure only; its background-color lives in
       miami-nights SECTION 2/3 (the one explicitly-allowed theme touch).
       Desktop never generates this pseudo-element: this rule is media-
       scoped, so the theme color rules are inert at >=821px. */
    html body .fi-modal:not(.fi-width-screen) .fi-modal-window::before {
        content: '';
        display: block;
        flex: 0 0 auto;
        width: 2.25rem;
        height: 0.3rem;
        border-radius: 9999px;
        margin: 0.5rem auto 0;
    }

    /* Slide-up motion: override the vendor Alpine transition chains at their
       own four states. translate/scale/opacity are not colors → overlay-
       legal. Slide-over chains carry the direction class ((0,6,0) in the
       vendor bundle) so both directions are spelled out to reach (0,6,2).
       FALLBACK if real-browser testing shows broken motion: delete from here
       through the transition-delay rule — the sheet then rests bottom-
       anchored with the vendor's default fade. */
    html body .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
    html body .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-end,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-end > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-end > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-end,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-end {
        --tw-translate-x: 0;
        --tw-translate-y: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        scale: 1;
        opacity: 1;
    }
    html body .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-end,
    html body .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-start,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-end > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-end,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-end > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-start,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-end,
    html body .fi-modal.fi-modal-slide-over.fi-modal-slide-over-from-start > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-start {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        scale: 1;
        opacity: 1;
    }
    /* (No transition-delay override needed: the vendor bundle has no delay
       rule on the modal window — verified against the live compiled theme.) */

    /* ── Page chrome breathing room ────────────────────────────────────── */
    .fi-header { flex-wrap: wrap; gap: 0.5rem; }
    /* Landscape/notch: content clears the rounded corners/notch (plan #6d,
       2026-07-13) — max() keeps the portrait padding unchanged. */
    .fi-main { padding-inline: max(0.75rem, env(safe-area-inset-left), env(safe-area-inset-right)); }

    /* ── App-bar chrome diet (app-feel pass, 2026-07-07) ───────────────── */
    /* The topbar is ALREADY sticky + slim (vendor .fi-topbar-ctn is
       position:sticky/top:0; miami-nights compacts .fi-topbar to 2.75rem).
       No position rules here — only safe-area padding, which is inert until
       the viewport-fit=cover meta (AdminPanelProvider head.end hook) lands,
       then activates on notched phones so the status bar joins the app bar. */
    .fi-topbar-ctn { padding-top: env(safe-area-inset-top, 0px); }

    /* ── Global clock bar (plan #2, 2026-07-13; layout only) ───────────── */
    /* While the bar shows, IT owns the safe-area inset (panel-theme.css
       .sd-clockbar--on padding) and the topbar sits below it — keeping the
       rule above too would double-pad the notch. */
    body:has(.sd-clockbar--on) .fi-topbar-ctn { padding-top: 0; }

    /* Stop / toggle / stop-all all hit the 44px touch floor. */
    .sd-clockbar button { min-height: 44px; }

    /* Breadcrumbs are website chrome; the page heading carries context. */
    html body .fi-breadcrumbs { display: none !important; }

    /* v5's topbar user-menu trigger renders avatar-only; defensive no-op
       that holds if the trigger ever grows a text label. */
    .fi-topbar .fi-user-menu-trigger-text { display: none; }

    /* Page heading: NO size rule needed — miami-nights already compacts it
       (nested dark rule L213 sets 0.9rem uppercase at (0,2,0)!important, and
       html{font-size:87%} L1452 scales it to ~12.5px). A rule here would
       need (0,2,2) to win and would only make the heading BIGGER. */

    /* Header actions: one horizontally scrolling row, never a button pile.
       (.fi-header-actions-ctn wraps a .fi-ac group — both must not wrap.)
       Scrollbar is VISIBLE-thin (plan #6b, 2026-07-13): with it hidden,
       EditWorkOrder's off-screen buttons had zero affordance — same call
       Alex already made for wide tables on Android (see the scrollbar-hide
       allowlist note below; do NOT add this ctn to that allowlist). Thumb
       colors live in miami-nights-compiled.css (media-scoped twin block). */
    html body .fi-header-actions-ctn {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
        padding-bottom: 2px; /* keep the bar off the buttons */
    }
    html body .fi-header-actions-ctn::-webkit-scrollbar { height: 4px; }
    html body .fi-header-actions-ctn::-webkit-scrollbar-thumb { border-radius: 2px; }
    html body .fi-header-actions-ctn .fi-ac { flex-wrap: nowrap; }
    html body .fi-header-actions-ctn .fi-btn {
        white-space: nowrap;
        scroll-snap-align: start;
    }

    /* ── Mentions FAB sits above the bottom nav instead of on it ───────── */
    .mp-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
    .mp-panel { bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
    /* Desktop gives the FAB z-9999; on mobile drop it BELOW the bottom nav
       (40). The More sheet/scrim live INSIDE the nav's stacking context, so
       only the nav's own z competes with the FAB — any FAB z above 40 would
       paint over the open More sheet. 39 keeps it above page content, under
       nav, More sheet, and modal sheets (55/60) alike; it never spatially
       overlaps the nav bar itself. */
    .mp-fab, .mp-panel { z-index: 39 !important; }

    /* ── Livewire progress bar (layout; colors in its partial) ─────────── */
    .sd-progress-track {
        display: block;
        position: fixed;
        /* With viewport-fit=cover the layout viewport extends under the
           notch/status bar in the installed PWA — top:0 would hide the bar
           inside it (review fix). */
        top: env(safe-area-inset-top, 0px);
        inset-inline: 0;
        height: 3px;
        z-index: 70; /* above modal sheets (60) */
        pointer-events: none;
    }
    .sd-progress-bar {
        height: 100%;
        width: 0;
        opacity: 0;
        transition: width 0.25s ease, opacity 0.3s ease;
    }

    /* ── Native-feel polish (app-feel pass, 2026-07-07) ────────────────── */
    /* No grey tap flash. `transparent` is not a theme color — the contract
       exception is documented in PROJECT_STATE §15. */
    * { -webkit-tap-highlight-color: transparent; }

    /* Press feedback on controls and nav ONLY — never table rows/cells
       (scale on rows causes reflow jank and misclick drift mid-tap). */
    html body .fi-btn:active,
    html body .fi-icon-btn:active,
    .sd-bottom-nav a:active,
    .sd-bottom-nav .sd-nav-more:active,
    .sd-more-sheet a:active {
        transform: scale(0.97);
        transition: transform 0.08s ease;
    }

    /* Kill the 300ms double-tap delay; pinch-zoom is unaffected. */
    a, button, .fi-btn, .fi-icon-btn { touch-action: manipulation; }

    /* Rubber-band containment on inner scrollers only. Body pull-to-refresh
       stays ON deliberately (Alex 2026-07-07): navigations are network-only
       in the installed PWA, so P2R is the one easy reload gesture. */
    .fi-ta-content,
    .fi-ta-content-ctn { overscroll-behavior-x: contain; }

    /* Hide scrollbars on chrome scrollers — explicit allowlist. Table
       scrollers (.fi-ta-content) KEEP their bar (Alex 2026-07-07): on
       Android it is the only affordance that a wide table scrolls. */
    html, body, .fi-modal-content, .sd-more-sheet, .fi-sidebar-nav {
        scrollbar-width: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .fi-modal-content::-webkit-scrollbar,
    .sd-more-sheet::-webkit-scrollbar,
    .fi-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    /* Chrome is not text — content stays selectable (WO numbers, phone
       numbers, comments, modal content, inputs are all untouched). */
    .fi-topbar,
    .sd-bottom-nav,
    .sd-more-sheet,
    .fi-header-actions-ctn,
    .fi-btn,
    .fi-icon-btn,
    .fi-tabs,
    .fi-pagination,
    .fi-modal-header,
    .fi-modal-footer {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Installed-app tightening only: no browser URL bar exists to give the
   app bar breathing room. Combined condition keeps this mobile-only and
   layout-only — the documented exception to the single-block contract. */
@media (display-mode: standalone) and (max-width: 820px) {
    /* (safe-area padding already comes from the .fi-topbar-ctn rule in the
       main block — do not repeat it here or it double-pads) */
    html body .fi-topbar { min-height: 2.5rem !important; }
}