/*
 * Phone rules for the CLIENT panel (mobile audit, 2026-09-17).
 *
 * Registered through FilamentAsset (AppServiceProvider::boot) and published by
 * `php artisan filament:assets`, which the deploy already runs via the composer
 * post-autoload `filament:upgrade` hook, exactly like skeleton.css beside it.
 *
 * Everything here is scoped to `.fi-panel-app` and to `max-width: 767px`, the
 * width below Filament's `md` breakpoint (48rem). The admin desk is a desktop
 * tool and is deliberately left alone; so is every panel at md and up, which is
 * the point: the columns the tables hide below md do it through Filament's own
 * `visibleFrom('md')`, and the desktop table is byte-for-byte what it was.
 *
 * Neutral structure only. No brand hexes: `docs/Brand/tokens.css` is the source
 * of truth for colour and nothing here needs any.
 */

/*
 * Table cells wrap instead of pushing the table sideways.
 *
 * Filament pins `white-space: nowrap` on every cell, which is right on a desk:
 * a column is as wide as its widest value and the table scrolls. On a 358px
 * content column it is what made every client list two to three screens wide,
 * because one long ad-account name ("JBZ130 - Apatch-SHM-TT-1 - TT1", 250px)
 * held the whole column open. Below md the text is allowed to fold instead, so
 * the browser can fit the remaining columns in the width it actually has.
 *
 * Badges keep their nowrap: a status that reads "Invitation" over "pending" is
 * worse than a slightly wider pill.
 */
@media (max-width: 767px) {
    .fi-panel-app .fi-ta-cell,
    .fi-panel-app .fi-ta-header-cell {
        white-space: normal;
    }

    /*
     * break-word, not anywhere: a word is broken only when it cannot fit on a
     * line of its own, so the column's floor is the longest word rather than
     * one character. With `anywhere` the browser happily gave the Name column
     * 64px and spelled an ad account down the page a letter at a time.
     */
    .fi-panel-app .fi-ta-cell .fi-ta-text-item,
    .fi-panel-app .fi-ta-header-cell-label {
        white-space: normal;
        overflow-wrap: break-word;
    }

    /*
     * The description line under a cell gets `anywhere` rather than
     * break-word: it is secondary text and it is where the unbreakable things
     * live, an email address or a nineteen-digit platform id, whose full width
     * would otherwise be the floor for the whole column. `anywhere` is the one
     * value that lowers a column's min-content, and here the line above it
     * still sets a sane floor of its own.
     */
    .fi-panel-app .fi-ta-cell .fi-ta-text-description,
    /*
     * ...and so does a column whose author already called ->wrap() on it: the
     * ledger's own description, which ends in a nineteen-digit account id in
     * brackets. That bracketed run alone held the column at 189px.
     */
    .fi-panel-app .fi-ta-cell .fi-ta-text-item.fi-wrapped {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /*
     * A status pill folds at its spaces, and only at its spaces.
     *
     * `overflow-wrap: normal`, not the `break-word` its neighbours get: a word
     * is never broken, so a one-word status ("Active", "Paid", "Confirmed")
     * has a min-content of the whole word and can never fold. Only a status
     * written in several words can, and it does it at a space, centred.
     *
     * The original rule here was a flat nowrap, on the grounds that "Invitation
     * over pending" reads worse than a slightly wider pill. It does, and a
     * pill still only folds when the table has no width left to give it. What
     * changed is the arrival of "Paid, awaiting handover" on BM requests: 158px
     * of unbreakable pill, a third of the phone's content column, which pushed
     * the whole table off the screen rather than cost itself a second line.
     */
    .fi-panel-app .fi-ta-cell .fi-badge {
        white-space: normal;
        overflow-wrap: normal;
        text-align: center;
    }

    /*
     * Row actions stack, and stack as icons.
     *
     * Two link actions side by side ("View", "Withdraw") were 177px, half the
     * phone's content column, spent on words the icons already say. The label
     * is clipped rather than removed, so it is still the button's accessible
     * name and still what a screen reader reads out; only the sighted layout
     * loses it. Every action keeps a 2rem icon in a row that is at least 3.5rem
     * tall, and the whole row is a link to the record's own page anyway.
     */
    .fi-panel-app .fi-ta-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .fi-panel-app .fi-ta-actions .fi-ac-link-action:has(.fi-icon) .fi-link-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        clip-path: inset(50%);
    }

    /* A 16px icon is not a thumb. The box around it is. */
    .fi-panel-app .fi-ta-actions .fi-ac-link-action {
        min-width: 2.75rem;
        min-height: 2.75rem;
        align-items: center;
        justify-content: flex-end;
    }

    /*
     * Filament's own 0.75rem gutters again (owner, 2026-09-24). The 8px
     * gutters that used to sit here existed to squeeze long cells into a
     * 358px column; phone rows now carry one short line and a short sub-line
     * (a marker, a document number, a day), and the full text is one tap
     * away in the row's own detail, so every list fits at Filament's spacing.
     */

    /*
     * A copyable value is a 17px line of text and nothing else.
     *
     * Filament makes the value itself the button (`.fi-copyable`, one span, no
     * icon), which is the right idea and the wrong size: 17px tall is half a
     * thumb, and the values it is used on are the ones a client copies rather
     * than reads, an ad account id and, on the Business Managers page, the
     * login and password of a manager we will never mail them.
     *
     * A 2.5rem inline-flex box gives the same 40px target the row actions and
     * the banners were given, centred on the line it already sat on.
     *
     * `anywhere` rather than the `break-word` its neighbours get, and it is not
     * optional here: a flex box sizes itself to its content's min-content, and
     * break-word does not lower min-content. Without it a 69-character login
     * pushed 82px past the card it sits in. A login and a password have no
     * words to keep whole, so breaking one mid-run is exactly right.
     */
    .fi-panel-app .fi-copyable {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        /* ...lent back to the line it sits on, so a copyable value keeps
           the spacing of the plain values around it on an account's page. */
        margin-block: -0.75rem;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/*
 * Compact stat cards (owner request 2026-09-17).
 *
 * Below lg the stats grid is one card per row, which put six full-size cards,
 * 140px each, between the client and the first table on their dashboard. The
 * cards get shorter, 1rem of padding and a 1.5rem value: 120px a card. The
 * dashboard's Your money cards have since gone two a row (2026-10-02, further
 * down, once the figures dropped their currency code); this stays for the
 * Ledger page's row.
 *
 * ZERO-LAYOUT-SHIFT RULE (see resources/css/filament/skeleton.css): these rules
 * name Filament's own stat classes, and the placeholder in
 * resources/views/filament/skeleton/stats.blade.php borrows exactly those, so
 * the ghost cards shrink with the real ones and the swap stays invisible.
 * Browser-verified at 390px: 120px placeholder = 120px loaded.
 */
@media (max-width: 767px) {
    .fi-panel-app .fi-wi-stats-overview-stat {
        padding: 1rem;
    }

    /* The 1.5rem figure lives in stats.css beside the rule it overrides:
       stats.css loads after this file, so a size set here lost to its
       desktop one (a 30px figure and 4px taller cards on a phone). */
}

/*
 * Dashboard table headers keep their "View all" on the heading's line
 * (mobile check, 2026-09-24).
 *
 * Below sm Filament stacks a table header, so the heading, its period line and
 * a lone "View all →" link took three rows, 109px a table where the lazy
 * placeholder (skeleton/table.blade.php) reserves one. Side by side, as from
 * sm up, the header is the placeholder's height again and four tables give
 * back about 50px each. Widget tables only: a resource list's header can carry
 * several actions and keeps Filament's stacking.
 */
@media (max-width: 639px) {
    .fi-panel-app .fi-wi-widget .fi-ta-header.fi-ta-header-adaptive-actions-position {
        flex-direction: row;
        align-items: center;
    }

    .fi-panel-app .fi-wi-widget .fi-ta-header.fi-ta-header-adaptive-actions-position > div:first-child {
        min-width: 0;
    }

    /* The link keeps its 2.75rem touch box (below) but lends 0.625rem of it
       to the header's padding either way, so a heading with no period line
       under it (Active ad accounts) is 57px like its placeholder, not 77px. */
    .fi-panel-app .fi-wi-widget .fi-ta-header.fi-ta-header-adaptive-actions-position .fi-ta-actions {
        flex-shrink: 0;
        margin-block: -0.625rem;
        margin-inline-start: auto;
    }
}

/*
 * Thumb-sized controls across the client panel (owner, 2026-09-24: "most
 * clients use the platform on their phones"; the Display timezone modal's
 * Save and Cancel were 36px pills side by side).
 *
 * Below md every control is at least 2.75rem (44px) tall, Apple's and
 * Google's minimum touch target, and every text field reads at 1rem, the size
 * under which iOS Safari zooms the page on focus. Filament already does the
 * latter behind `@supports (-webkit-touch-callout: none)`; doing it for every
 * phone keeps an Android and an iPhone looking the same. Desktop, and the
 * admin panel, are untouched: everything sits under `.fi-panel-app` and
 * `max-width: 767px`.
 *
 * ZERO-LAYOUT-SHIFT RULE: the dashboard's Your money placeholder draws the
 * real period switcher (the same `.fi-input-wrp` / `.fi-select-input`), so it
 * grows with the loaded one; the table placeholder's footer follows below.
 */
@media (max-width: 767px) {
    /* Buttons: header actions, form submits, pagination Previous / Next. */
    .fi-panel-app .fi-btn {
        min-height: 2.75rem;
    }

    /* Icon buttons: the topbar menu, table filter and column toggles, a
       modal's close. Filament pulls them in by 0.5rem either side, which
       keeps their neighbours where they were. */
    .fi-panel-app .fi-icon-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* Link actions outside a table row ("Open the agreement", "Download
       signed PDF" in Account settings): a 20px line of text becomes a 44px
       box on the same baseline. */
    .fi-panel-app .fi-ac-link-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /* Filament sits the label on the baseline, which in a 44px box is its
       top: the Max inside an amount field floated over the figure. */
    .fi-panel-app .fi-ac-link-action > .fi-link-label {
        align-self: center;
    }

    /* Text inputs, native selects and Filament's own searchable select. */
    .fi-panel-app input.fi-input,
    .fi-panel-app select.fi-select-input,
    .fi-panel-app textarea.fi-input,
    .fi-panel-app .fi-select-input .fi-select-input-btn {
        font-size: 1rem;
    }

    .fi-panel-app input.fi-input,
    .fi-panel-app select.fi-select-input {
        padding-block: 0.625rem;
    }

    .fi-panel-app .fi-select-input .fi-select-input-btn {
        min-height: 2.75rem;
    }

    .fi-panel-app .fi-select-input .fi-select-input-option {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    /* Menus: the user menu, a table's bulk or row menus, the theme switch. */
    .fi-panel-app .fi-dropdown-list-item {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    /* The sign-in page's Continue with Google (auth/google-button.blade.php). */
    .fi-panel-app .ap-google-btn {
        min-height: 2.75rem;
    }

    .fi-panel-app .fi-theme-switcher-btn {
        min-height: 2.75rem;
        align-items: center;
    }

    /* The sidebar drawer's links. */
    .fi-panel-app .fi-sidebar-item-btn {
        min-height: 2.75rem;
    }

    .fi-panel-app .fi-tabs-item {
        min-height: 2.75rem;
    }

    /* Previous / Next are 44px buttons now, so a table's pagination strip is
       4.25rem, not 3.75rem; the table placeholder's footer follows it. */
    .fi-panel-app .ap-skel-table-footer {
        height: calc(4.25rem + 0.5px);
    }

    /* A phone row with a line under its value (Ledger activity, Top-ups) is
       two 1.25rem lines in Filament's 1rem padding: 81px, as loaded. */
    .fi-panel-app .ap-skel-table-row-two-line {
        height: calc(5rem + 1px);
    }

    .fi-panel-app .fi-pagination .fi-pagination-item-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /* A sortable column head is a 20px line in a 48px cell: the button fills
       the cell's height instead, without making the cell any taller. */
    .fi-panel-app .fi-ta-header-cell-sort-btn {
        min-height: 2.75rem;
        margin-block: -0.75rem;
    }

    /* Toggles, checkboxes and radios keep their drawn size; an invisible
       ring around each takes the thumb. The label beside a checkbox or radio
       is already part of its target. */
    .fi-panel-app .fi-toggle,
    .fi-panel-app input[type='checkbox'].fi-checkbox-input,
    .fi-panel-app input[type='radio'].fi-radio-input {
        position: relative;
    }

    .fi-panel-app .fi-toggle::after {
        content: '';
        position: absolute;
        inset: -0.625rem 0;
    }

    .fi-panel-app input[type='checkbox'].fi-checkbox-input,
    .fi-panel-app input[type='radio'].fi-radio-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /*
     * Modals open as a sheet from the bottom of the screen, where the thumb
     * is, full width, with their actions stacked full width underneath: the
     * primary one on top, Cancel under it, each 3rem tall at 1rem type.
     *
     * Filament centres a modal in a 1fr / auto / 1fr grid with 1rem around it;
     * a 1fr / auto grid with no padding drops it to the bottom edge instead,
     * and the window keeps its own scroll for a tall form. Slide-overs and
     * full-screen modals are left alone.
     */
    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn {
        grid-template-rows: 1fr auto;
        padding: 1rem 0 0;
        overflow-x: hidden;
    }

    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
        position: relative;
        max-width: none;
        max-height: calc(100dvh - 2.5rem);
        overflow-y: auto;
        /* Vertical only (owner, 2026-10-02: "popup on mobile has horizontal
           scroll, small but it is there"). A scrolling box lets the other
           axis pan too, and a phone's fractional pixel width can leave its
           content a hair wider than the sheet; nothing in a sheet is meant
           to move sideways, so that axis is shut. */
        overflow-x: hidden;
        overscroll-behavior: contain;
        touch-action: pan-y;
        border-start-start-radius: 1rem;
        border-start-end-radius: 1rem;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    /*
     * Native sheet behaviour (owner, 2026-10-02: "popups should slide from
     * the bottom and feel like app natives ... bottom safezones"). The sheet
     * rises from below the screen on the iOS sheet curve and drops back on
     * close, instead of Filament's centred fade-and-zoom; a grab handle sits
     * on its top edge. Filament animates with the `scale`/`translate`
     * properties, so those are what is overridden.
     */
    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter,
    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave {
        transition-property: translate;
        transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
        transition-duration: 0.35s;
        transition-delay: 0s;
    }

    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave {
        transition-duration: 0.25s;
    }

    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-end {
        scale: 1;
        opacity: 1;
        translate: 0 100%;
    }

    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-end,
    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-leave-start {
        scale: 1;
        opacity: 1;
        translate: 0 0;
    }

    /*
     * The header (title, and the close button Filament draws inside it) stays
     * pinned to the top of the sheet while a long form scrolls under it
     * (owner, 2026-10-02), with the grab handle on it, so the way out is never
     * scrolled away. A hairline under it shows where the content slides.
     */
    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
        position: sticky;
        top: 0;
        z-index: 10;
        padding-top: 1.25rem;
        padding-bottom: 0.875rem;
        background-color: #fff;
        border-start-start-radius: 1rem;
        border-start-end-radius: 1rem;
        box-shadow: 0 1px 0 var(--gray-100);
    }

    .dark .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
        background-color: var(--gray-900);
        box-shadow: 0 1px 0 rgb(255 255 255 / 0.05);
    }

    .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        left: 50%;
        width: 2.25rem;
        height: 0.3125rem;
        translate: -50% 0;
        border-radius: 9999px;
        background-color: var(--gray-300);
    }

    .dark .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header::before {
        background-color: var(--gray-600);
    }

    /*
     * The bottom safe area on every browser: the home indicator on iOS, the
     * gesture bar on Android. env() is 0 where there is nothing to clear, so
     * the 1rem floor keeps the buttons off the screen's edge either way. A
     * sticky footer carries it (it is what touches the bottom), otherwise the
     * window does.
     */
    .fi-panel-app .fi-modal.fi-modal-has-sticky-footer:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
        padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
    }

    .fi-panel-app .fi-modal:not(.fi-modal-has-sticky-footer):not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
        padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
    }

    .fi-panel-app .fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-footer .fi-modal-footer-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .fi-panel-app .fi-modal-footer-actions .fi-btn {
        width: 100%;
        min-height: 3rem;
        font-size: 1rem;
    }

    /* The primary action on top: a Cancel is Filament's uncoloured button,
       wherever the modal puts it in the markup. */
    .fi-panel-app .fi-modal-footer-actions > .fi-btn:not(.fi-color),
    .fi-panel-app .fi-modal-footer-actions > :not(.fi-btn):not(:has(.fi-btn.fi-color)) {
        order: 1;
    }
}

/*
 * Client lists on a phone, second pass (owner, 2026-09-24: "all sections on
 * the client side should be super optimized for mobile").
 */
@media (max-width: 767px) {
    /*
     * An amount stays on one line and right-aligned: "1,402,085.00 USD" split
     * after the figure read as two values. Every money column in the client
     * lists is `alignEnd()`, and nothing else is; the line under it (a date,
     * "Settles later") still folds.
     */
    .fi-panel-app .fi-ta-cell.fi-align-end .fi-ta-text-item,
    .fi-panel-app .fi-ta-cell.fi-align-end .fi-ta-text-description,
    .fi-panel-app .fi-ta-cell.fi-align-end .fi-ta-placeholder {
        white-space: nowrap;
    }

    /* Filament starts a row's first cell 4px in, so a list's first value
       sat 4px right of its own column heading. Never a row's checkbox
       (2026-11-02): with no padding it stuck out past the card's edge and
       out of line with the select-all box above it. */
    .fi-panel-app .fi-ta-row > .fi-ta-cell:first-of-type:not(.fi-ta-selection-cell) {
        padding-inline-start: 0;
    }

    /* A document number (AP-PF-12426) is one word to its reader, not three. */
    .fi-panel-app .fi-ta-cell-mobile-number .fi-ta-text-item {
        white-space: nowrap;
    }

    /*
     * A row that is itself a link to the record drops its "View" icon: the
     * whole row is the tap, so the icon was a 44px column spent on a second
     * way to do the same thing, taken from the name beside it. The actions
     * that do something else (Top up, Withdraw) stay. A table whose rows are
     * not links keeps its View.
     */
    .fi-panel-app .fi-ta-row.fi-clickable .fi-ta-actions > a.fi-ac-link-action[href],
    .fi-panel-app .fi-ta-actions > .ap-row-open {
        display: none;
    }

    /* ...and a table whose rows carry nothing else (Deposits) drops the
       then-empty actions column with it, heading and all. */
    .fi-panel-app .fi-ta-table:has(.fi-ta-row.fi-clickable):not(:has(.fi-ta-actions > :not(a.fi-ac-link-action[href], .ap-row-open))) :is(.fi-ta-actions-header-cell, .fi-ta-cell:has(> .fi-ta-actions)) {
        display: none;
    }

    /*
     * A table with no toolbar actions still draws their empty 2.25rem slot,
     * which on a phone wrapped onto a line of its own above the search box.
     */
    .fi-panel-app .fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) {
        display: none;
    }

    /*
     * Text links inside a page (an infolist's "View the deposit", a filter
     * form's Reset, the checklist's "Open My account") keep their line
     * height; an invisible 44px band around each takes the thumb.
     */
    .fi-panel-app .fi-link:not(.fi-ac-link-action),
    .fi-panel-app a.fi-in-entry-content {
        position: relative;
    }

    .fi-panel-app .fi-link:not(.fi-ac-link-action)::after,
    .fi-panel-app a.fi-in-entry-content::after {
        content: '';
        position: absolute;
        inset: -0.75rem 0;
    }

    /* Already absolutely placed inside its select, so the ring needs no
       positioning of its own. */
    .fi-panel-app .fi-select-input-value-remove-btn::after {
        content: '';
        position: absolute;
        inset: -0.875rem;
    }
}


/*
 * Sign-in and the other simple pages on a phone (owner, 2026-09-24): no gap
 * on top. Filament centres a card with 4rem of margin and 3rem of padding,
 * which on a phone left a grey band and pushed Continue with Google to the
 * bottom edge. Below sm the card IS the screen: flush to the top, white to
 * the bottom, less padding. Every panel, since they share the layout.
 */
@media (max-width: 639px) {
    .fi-simple-main-ctn {
        align-items: stretch;
    }

    .fi-simple-main {
        margin-block: 0;
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        box-shadow: none;
        --tw-ring-shadow: 0 0 #0000;
    }
}

/*
 * The Ad accounts list on a phone: name, status over what is left, and the
 * row is the tap (2026-09-24). Its row icons were a column of one to three
 * 44px buttons whose set changes with the account's state (Top up on a live
 * one, Withdraw, Move on a dead one), so they never lined up from row to row
 * and took the width the name needed. On a phone every one of them is on the
 * account's own page instead, where the row tap lands (ViewAdAccount carries
 * Top up, Withdraw and Move); desktop keeps its icons.
 */
/* Superseded 2026-10-05 (owner): the phone list now ends each row with a
   menu of that account's actions, and the status rides under the name. */

/*
 * The table toolbar on a phone (owner, 2026-09-24: "search and filter icon
 * is a bit off"). With the empty actions slot hidden, Filament's ms-auto
 * still pushed the search box 43px in from the left, and the filter
 * button's -8px tap-area margin shoved its badge into the card's edge.
 * Now: search fills the row from the left gutter, the filter button is a
 * plain 44px square beside it, and its badge sits inside the card.
 */
@media (max-width: 767px) {
    /* justify-content: a table with no search box (Account requests)
       drew its funnel at the left edge, the row's start, where every other
       table and the desktop keep it at the right (owner, 2026-10-05). */
    .fi-panel-app .fi-ta-header-toolbar > div:not(.fi-ta-actions) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        width: 100%;
        margin-inline-start: 0;
    }

    .fi-panel-app .fi-ta-header-toolbar .fi-ta-search-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    .fi-panel-app .fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn {
        margin: 0;
    }

    .fi-panel-app .fi-ta-header-toolbar .fi-dropdown-trigger {
        width: 2.75rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The count sits on the icon's top-right corner, as on desktop.
       Filament centres it on the button's corner with a -50% `translate`,
       which on the 44px button floated it above the funnel (2026-10-02):
       the icon spans 12-32px, so the 16px badge is placed at 24px / 4px
       with the translate dropped. */
    .fi-panel-app .fi-ta-header-toolbar .fi-icon-btn-badge-ctn {
        inset-inline-start: 1.5rem;
        inset-inline-end: auto;
        top: 0.25rem;
        translate: none;
    }
}

/*
 * The logo in the topbar on phones and tablets (owner, 2026-10-02).
 *
 * Filament hides the topbar's start (`hidden lg:flex`) below lg, so under
 * 1024px the bar held only the menu button and the user menu, and the logo
 * appeared only inside the opened drawer. The start holds nothing but the
 * linked logo here (the sidebar is not collapsible on desktop), so showing it
 * puts the brand, and a tap back to the dashboard, in the bar. Centred on
 * the bar (owner, 2026-10-02) rather than beside the menu button, so it sits
 * in the middle whatever the user menu on the right weighs. Slightly shorter
 * than the desktop 1.75rem so it fits a 360px bar.
 */
@media (max-width: 1023px) {
    .fi-panel-app .fi-topbar {
        position: relative;
    }

    .fi-panel-app .fi-topbar-start {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    .fi-panel-app .fi-topbar-start .fi-logo {
        height: 2rem !important; /* beats the inline brandLogoHeight; larger than desktop's 1.75rem (owner, 2026-10-02), the 64px bar unchanged */
        margin: 0;
    }
}

/*
 * No logo in the opened menu (owner, 2026-10-02): the topbar carries it now,
 * so the drawer's header, which holds nothing else in this panel, goes and
 * the menu starts at the top.
 */
@media (max-width: 1023px) {
    .fi-panel-app .fi-sidebar-header-ctn {
        display: none;
    }
}

/*
 * Vertical space on a phone, every client page (owner, 2026-10-02: "this
 * dashboard should be super optimized for mobile" and "optimize vertical
 * space on mobile for all pages"). Measured at 390px before: 48px from a
 * notice banner to the page title, 32px from the title to the content, the
 * lone header action on a 44px row of its own under a 32px title, and 32px
 * between dashboard sections.
 */
@media (max-width: 767px) {
    /* Filament's 2rem above the title and between the header and the page
       body halve; the 2rem below the last section stays, it is where the
       browser's own bottom bar sits. */
    .fi-panel-app .fi-page-header-main-ctn {
        padding-top: 1rem;
        row-gap: 1rem;
    }

    /* Between the dashboard's sections, and a page's own stacked blocks. */
    .fi-panel-app .fi-page-content {
        row-gap: 1rem;
    }

    /*
     * The title and its actions share a line, the actions on the right, as
     * from sm up. A page with one action ("New top-up", "New deposit",
     * "Export for accounting") gives back the 60px row the button stood on;
     * actions that do not fit beside the title wrap under it as before.
     */
    .fi-panel-app .fi-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        /* 0.5rem across: "Ad Accounts" and "Request accounts" fit a 360px
           phone side by side with it, not with Filament's 1rem. */
        gap: 0.75rem 0.5rem;
    }

    .fi-panel-app .fi-header > div:first-child {
        min-width: 0;
    }

    /*
     * The notice banners above the title (agreement, suspension,
     * impersonation) draw their box inline, so only !important reaches it.
     * No margin under the last one: the 1rem above the title is the gap.
     * Their links keep the 44px target they lend from the padding.
     */
    .fi-panel-app .ap-notice-banner {
        margin-bottom: 0 !important;
        padding: 0.625rem 0.875rem !important;
    }
}

/*
 * The Your money cards two a row on a phone (owner, 2026-10-02), replacing
 * the one-a-row compact cards above: six cards stacked 840px deep, now three
 * rows of about 115px. The card is 175px at 390px (151px inside), so the
 * figure is sized off the card (13.5cqi, the container rule in stats.css)
 * and "$1,234,567.89" fills it exactly at about 20px, a short figure capped
 * at 1.375rem. The label and the line under it read at 13px; the line may
 * take two short lines. The arrow moves to the bottom corner so the longest
 * label ("Returned from accounts") keeps one line, and the line under the
 * figure keeps clear of it. Scoped to the section, so the Ledger page's
 * stat row is untouched; this file loads before stats.css, and the extra
 * class is what wins over its phone figure.
 *
 * ZERO-LAYOUT-SHIFT RULE: the placeholder (skeleton/dashboard-stats) draws
 * the same section class and stat classes with the real labels and lines,
 * so the ghost cards take the same grid and heights.
 */
@media (max-width: 767px) {
    .fi-panel-app .ap-period-section .fi-section-content.fi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .fi-panel-app .ap-period-section .fi-wi-stats-overview-stat {
        padding: 0.75rem;
    }

    .fi-panel-app .ap-period-section .fi-wi-stats-overview-stat-content {
        row-gap: 0.25rem;
    }

    .fi-panel-app .ap-period-section .fi-wi-stats-overview-stat-label {
        font-size: 0.8125rem;
        line-height: 1.125rem;
    }

    .fi-panel-app .ap-period-section .fi-wi-stats-overview-stat-value {
        font-size: min(1.375rem, 13.5cqi);
        line-height: 1.75rem;
    }

    .fi-panel-app .ap-period-section .fi-wi-stats-overview-stat-description {
        font-size: 0.8125rem;
        line-height: 1.125rem;
        padding-inline-end: 1.25rem;
    }

    .fi-panel-app .ap-period-section a.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn {
        padding-inline-end: 0;
    }

    .fi-panel-app .ap-period-section a.fi-wi-stats-overview-stat::after {
        top: auto;
        bottom: 0.75rem;
        right: 0.75rem;
        width: 1rem;
        height: 1rem;
    }
}

/*
 * Tables on a phone, shorter (2026-10-02). A row's cells lose 0.25rem top
 * and bottom (a two-line row 81px to 73px, the whole row is still the tap),
 * a dashboard table's header 0.25rem either side, and an empty table's
 * message half of its 3rem padding. The table placeholder follows the row
 * and header heights below.
 */
@media (max-width: 767px) {
    .fi-panel-app .fi-ta-cell .fi-ta-text {
        padding-block: 0.75rem;
    }

    .fi-panel-app .fi-wi-widget .fi-ta-header {
        padding-block: 0.75rem;
    }

    .fi-panel-app .fi-ta-empty-state {
        padding-block: 1.5rem;
    }

    .fi-panel-app .ap-skel-table-header {
        height: calc(3rem + 1px);
    }

    .fi-panel-app .ap-skel-table-header-described {
        height: calc(4.5rem + 1px);
    }

    .fi-panel-app .ap-skel-table-row {
        height: calc(3rem + 1px);
    }

    .fi-panel-app .ap-skel-table-row-two-line {
        height: calc(4.5rem + 1px);
    }
}

/*
 * The dashboard's tables on a phone carry no column headings (owner,
 * 2026-10-02): each row already says what it is (a name, a dated line, an
 * amount or a badge) and the card's title names the list, so the heading row
 * was 50px of repetition per table. Desktop, with more columns, keeps it.
 */
@media (max-width: 767px) {
    .fi-panel-app .ap-dashboard .fi-wi-widget .fi-ta-table > thead,
    .fi-panel-app .ap-skel-table-colhead-preview {
        display: none;
    }

    /* Active ad accounts' platform badge sits at the row's end, where every
       other dashboard table keeps its badge or amount. */
    .fi-panel-app .ap-dashboard .fi-ta-cell-platform .fi-ta-text {
        justify-content: flex-end;
        text-align: end;
    }
}

/*
 * Table pagination on a phone (owner, 2026-10-02: "I cannot see how many
 * results are in total and per page and next buttons are a bit off", then
 * "next and per page are on top of each other", then the count reading
 * just "10 of 20 results").
 *
 * Filament drops its overview below md and sets Previous, the per-page select
 * and Next on a three-column grid, so on the first page, with no Previous,
 * the select floated mid-row. One row instead: the short overview on the
 * left (our pagination view override prints it beside Filament's sentence),
 * the per-page select and the two page buttons on the right, the buttons as
 * 44px chevron squares. Their words stay in the DOM at zero size, so a
 * screen reader still says Previous and Next.
 */
.ap-pagination-overview-short {
    display: none;
}

@media (max-width: 767px) {
    .fi-panel-app .fi-pagination {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .fi-panel-app .fi-pagination .fi-pagination-overview {
        display: block;
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.8125rem;
        line-height: 1.25rem;
        font-weight: 400;
        color: var(--gray-500);
    }

    .fi-panel-app .fi-pagination .ap-pagination-overview-long {
        display: none;
    }

    .fi-panel-app .fi-pagination .ap-pagination-overview-short {
        display: inline;
    }

    .fi-panel-app .fi-pagination .fi-pagination-records-per-page-select-ctn {
        order: 2;
        flex: 0 0 auto;
    }

    .fi-panel-app .fi-pagination .fi-pagination-previous-btn,
    .fi-panel-app .fi-pagination .fi-pagination-next-btn {
        position: relative;
        flex: 0 0 auto;
        width: 2.75rem;
        min-width: 2.75rem;
        padding: 0;
        font-size: 0;
    }

    .fi-panel-app .fi-pagination .fi-pagination-previous-btn {
        order: 3;
        --ap-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E");
    }

    .fi-panel-app .fi-pagination .fi-pagination-next-btn {
        order: 4;
        --ap-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
    }

    .fi-panel-app .fi-pagination .fi-pagination-previous-btn::before,
    .fi-panel-app .fi-pagination .fi-pagination-next-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.25rem;
        height: 1.25rem;
        background-color: currentColor;
        -webkit-mask: var(--ap-chevron) center / contain no-repeat;
        mask: var(--ap-chevron) center / contain no-repeat;
    }
}

/*
 * The instant sheet (owner, 2026-10-02: "open popup faster with no delay"):
 * a stand-in drawn by `filament/app/instant-sheet` on the tap, shaped like
 * the phone sheet above (rounded top, grab handle, title, three shimmering
 * fields and a button), sliding up on the same curve while the server
 * prepares the real popup. `ap-sheet-handover` then lets the real one appear
 * where the stand-in already is: no second slide, no second backdrop fade.
 */
.ap-instant-sheet {
    position: fixed;
    inset: 0;
    z-index: 45;
}

.ap-instant-sheet-backdrop {
    position: absolute;
    inset: 0;
    /* Filament's own backdrop exactly (bg-gray-950/50, /75 in dark), so the
       swap to the real one shows no step. */
    background-color: color-mix(in oklab, var(--gray-950) 50%, transparent);
    animation: ap-instant-sheet-fade 0.3s ease both;
}

.dark .ap-instant-sheet-backdrop {
    background-color: color-mix(in oklab, var(--gray-950) 75%, transparent);
}

.ap-instant-sheet-window {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.25rem 1.5rem max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
    border-start-start-radius: 1rem;
    border-start-end-radius: 1rem;
    background-color: #fff;
    animation: ap-instant-sheet-rise 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.dark .ap-instant-sheet-window {
    background-color: var(--gray-900);
}

.ap-instant-sheet-window::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 2.25rem;
    height: 0.3125rem;
    translate: -50% 0;
    border-radius: 9999px;
    background-color: var(--gray-300);
}

/* The real sheet's handle in dark (gray-600), so the swap shows no step. */
.dark .ap-instant-sheet-window::before {
    background-color: var(--gray-600);
}

.ap-instant-sheet-title {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--gray-950);
}

.dark .ap-instant-sheet-title {
    color: #fff;
}

.ap-instant-sheet-label {
    width: 7rem;
    height: 0.875rem;
    margin-bottom: 0.625rem;
}

.ap-instant-sheet-field {
    height: 2.75rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
}

.ap-instant-sheet-button {
    height: 3rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
}

@keyframes ap-instant-sheet-rise {
    from { translate: 0 100%; }
    to { translate: 0 0; }
}

@keyframes ap-instant-sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 767px) {
    /* Not !important: the stand-in's script glides the window with inline
       styles, which must win over these. The backdrop's fade is Alpine's own
       inline transition, so that one needs the weight. */
    html.ap-sheet-handover .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter {
        transition: none;
    }

    html.ap-sheet-handover .fi-panel-app .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start {
        translate: 0 0;
    }

    .ap-sheet-handover .fi-panel-app .fi-modal > .fi-modal-close-overlay {
        transition: none !important;
        opacity: 1 !important;
    }

    /* While pending, the real popup's window AND its backdrop stay hidden:
       the stand-in's backdrop is still up, and the two together darkened the
       page for a frame (the flicker, 2026-10-02). Both swap in one frame. */
    html.ap-sheet-pending .fi-panel-app .fi-modal > .fi-modal-window-ctn > .fi-modal-window,
    html.ap-sheet-pending .fi-panel-app .fi-modal > .fi-modal-close-overlay {
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-instant-sheet-window,
    .ap-instant-sheet-backdrop {
        animation: none;
    }
}

/*
 * A back link on a phone's detail pages (owner, 2026-10-02: "there is no
 * back button on mobile"). Filament hides the breadcrumb trail below sm, so a
 * view, edit or create page (a deposit, an invoice, an ad account) had no
 * way up but the menu. Its first crumb, the list it belongs to, comes back as
 * "‹ Deposits" above the title, a 44px tap; the rest of the trail stays
 * hidden. List pages show none: their first crumb is the page itself. The
 * link is Filament's own, so it moves without a reload like the menu does.
 */
@media (max-width: 639px) {
    .fi-panel-app :is(.fi-resource-view-record-page, .fi-resource-edit-record-page, .fi-resource-create-record-page, .fi-resource-manage-related-records-page) .fi-header .fi-breadcrumbs {
        display: block;
        /* Some air under it before the title (owner, 2026-10-02). */
        margin: -0.625rem 0 0.25rem;
    }

    .fi-panel-app :is(.fi-resource-view-record-page, .fi-resource-edit-record-page, .fi-resource-create-record-page, .fi-resource-manage-related-records-page) .fi-header .fi-breadcrumbs-item:not(:first-child) {
        display: none;
    }

    .fi-panel-app :is(.fi-resource-view-record-page, .fi-resource-edit-record-page, .fi-resource-create-record-page, .fi-resource-manage-related-records-page) .fi-header .fi-breadcrumbs-item:first-child > a {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        min-height: 2.75rem;
        padding-inline-end: 0.75rem;
        font-size: 0.9375rem;
        color: var(--primary-600);
        -webkit-tap-highlight-color: transparent;
    }

    .dark .fi-panel-app :is(.fi-resource-view-record-page, .fi-resource-edit-record-page, .fi-resource-create-record-page, .fi-resource-manage-related-records-page) .fi-header .fi-breadcrumbs-item:first-child > a {
        color: var(--primary-400);
    }

    .fi-panel-app :is(.fi-resource-view-record-page, .fi-resource-edit-record-page, .fi-resource-create-record-page, .fi-resource-manage-related-records-page) .fi-header .fi-breadcrumbs-item:first-child > a::before {
        content: '';
        width: 1.125rem;
        height: 1.125rem;
        margin-inline-start: -0.25rem;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/*
 * A record's page on a phone (owner, 2026-10-02: "make this view compact on
 * mobile, use space efficiently", first for deposits, then every client view
 * page). Each detail is one row, label left and value right like a phone's
 * settings list, divided by hairlines, instead of a label stacked over its
 * value with 1.5rem between pairs; the cards carry 1rem of padding instead of
 * 1.5rem. A long value (a name, a landing page, a note, a Business Manager
 * id) is marked `ap-entry-stacked` (App\Filament\App\Support\Stacked) and
 * keeps its label above it at full width, divided and padded the same. An
 * entry with no visible label (the payment block, an invoice line) keeps its
 * own layout. A report is a document of its own and is left alone.
 */
@media (max-width: 767px) {
    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-section-content {
        padding: 0.25rem 1rem;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-section-header {
        padding: 0.875rem 1rem;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-section-content.fi-sc-has-gap {
        row-gap: 0;
    }

    /* A repeatable block (delivered accounts, credentials) is a card of its
       own inside the section: room around it, rows inside it. */
    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-section-content > .fi-grid-col:has(.fi-in-repeatable) {
        padding-block: 0.75rem;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-repeatable-item {
        padding: 0.25rem 1rem;
    }

    /* An item with no labelled rows (an invoice line) is one line of text. */
    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-repeatable-item:not(:has(.fi-in-entry-label-ctn)) {
        padding-block: 0.75rem;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-repeatable-item > .fi-sc.fi-sc-has-gap {
        row-gap: 0;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 3rem;
        padding-block: 0.5rem;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .ap-entry-stacked {
        row-gap: 0.25rem;
        padding-block: 0.75rem;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-entry:not(.ap-entry-stacked) > .fi-in-entry-label-col {
        flex: 0 0 auto;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-entry-label {
        font-weight: 400;
        color: var(--gray-500);
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) > .fi-in-entry-content-col {
        flex: 1 1 auto;
        min-width: 0;
        text-align: end;
        overflow-wrap: anywhere;
    }

    /* Filament sets the content block full width and text-start; the value
       sits at the row's end instead, a helper line under it too. */
    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) .fi-in-entry-content {
        text-align: end;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) .fi-in-text {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) > .fi-in-entry-content-col > .fi-sc {
        justify-content: flex-end;
    }

    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden),
    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-repeatable-item > .fi-sc > .fi-grid-col:not(.fi-hidden):has(.fi-in-entry-label-ctn) ~ .fi-grid-col:not(.fi-hidden):has(.fi-in-entry-label-ctn) {
        border-top: 1px solid var(--gray-100);
    }

    .dark .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden),
    .dark .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-in-repeatable-item > .fi-sc > .fi-grid-col:not(.fi-hidden):has(.fi-in-entry-label-ctn) ~ .fi-grid-col:not(.fi-hidden):has(.fi-in-entry-label-ctn) {
        border-top-color: rgb(255 255 255 / 0.05);
    }
}

/*
 * A TRON wallet address (34 characters) fits one line of a phone's payment
 * block at 13px, so it no longer leaves a lone last character on a second
 * line (2026-10-02); a 42-character ERC-20 one still folds, evenly.
 */
/*
 * The payment QR fills its white box at every size (2026-10-02, dark mode
 * check): the SVG is 132px wide and the box's content 128px, so it stuck out
 * past the right edge, square corners and all, which only shows on a dark
 * page. The copy tick turns success-400 in dark, where 500 read dim.
 */
.ap-pay-qr > svg {
    display: block;
    width: 100%;
    height: auto;
}

.ap-pay-tick {
    color: var(--success-500);
}

.dark .ap-pay-tick {
    color: var(--success-400);
}

@media (max-width: 767px) {
    .fi-panel-app .ap-pay-value {
        font-size: 0.8125rem;
        letter-spacing: -0.01em;
    }
}

/*
 * A client report on a phone (owner, 2026-10-02). The report's own styles
 * travel inside its stored copy (`published_html`), so a published report
 * cannot be restyled through its template; these rules only change how its
 * tables sit on a narrow screen, never a word or a figure. Cells are tighter,
 * a date folds under itself, the description and account columns ask for
 * less width, and a wide table that still scrolls inside its box shows a
 * shadow on the side there is more to see (background-attachment: local
 * moves the cover with the content, the scroll shadow stays put). Both
 * panels, since the desk reads the same report. `html body` outweighs the
 * report's own rules, which come later in the page at the same weight.
 */
@media (max-width: 767px) {
    html body .ap-report .rp-table th,
    html body .ap-report .rp-table td {
        padding: 0.4375rem 0.375rem;
    }

    html body .ap-report .rp-table {
        font-size: 0.75rem;
    }

    html body .ap-report .rp-date {
        white-space: normal;
        min-width: 5.25rem;
    }

    html body .ap-report .rp-type {
        white-space: normal;
        min-width: 5.5rem;
    }

    html body .ap-report .rp-desc {
        min-width: 9rem;
        overflow-wrap: anywhere;
    }

    html body .ap-report .rp-account {
        min-width: 8.5rem;
    }

    html body .ap-report .rp-scroll {
        background:
            linear-gradient(to right, var(--rp-surface, #fff) 30%, transparent) left / 2rem 100% no-repeat local,
            linear-gradient(to left, var(--rp-surface, #fff) 30%, transparent) right / 2rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.14), transparent) left / 0.75rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.14), transparent) right / 0.75rem 100% no-repeat scroll;
        -webkit-overflow-scrolling: touch;
    }

    /* On the dark card a 14% black shadow is invisible, so it deepens. */
    html.dark body .ap-report .rp-scroll {
        --rp-surface: var(--gray-900);
        background:
            linear-gradient(to right, var(--rp-surface) 30%, transparent) left / 2rem 100% no-repeat local,
            linear-gradient(to left, var(--rp-surface) 30%, transparent) right / 2rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.6), transparent) left / 0.75rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.6), transparent) right / 0.75rem 100% no-repeat scroll;
    }
}

/* A page's subheading on a phone reads as body text under the 24px title,
   not as a second 18px heading (2026-10-02, the Request appeal page). */
@media (max-width: 767px) {
    .fi-panel-app .fi-header-subheading {
        margin-top: 0.375rem;
        font-size: 0.9375rem;
        line-height: 1.4;
    }
}

/*
 * A record page's block without a label of its own (the payment
 * instructions on a deposit or a Business Manager purchase) gets room above
 * and below on a phone (owner, 2026-10-02: "a bit more spacing on top of
 * Crypto transfer"): the compact page trims a card's padding to 0.25rem for
 * its label/value rows, which left such a block against the card's top
 * rule. Such a block is a bare view in the card (no entry wrapper), which
 * is what the selector keys on; entries and repeatable lists are untouched.
 */
@media (max-width: 767px) {
    .fi-panel-app .fi-resource-view-record-page:not(.fi-resource-reports) .fi-section-content > .fi-grid-col > .fi-sc-component:not(:has(.fi-in-entry)) {
        padding-block: 1rem 0.75rem;
    }
}

/*
 * Count fields with minus and plus (App\Filament\Support\Stepper, owner
 * 2026-10-02), at every width and in both panels: two 44px buttons hugging
 * a centred number. Filament's prefix and suffix boxes lose their padding
 * and divider so the buttons fill them edge to edge.
 */
.ap-stepper .fi-input-wrp-prefix,
.ap-stepper .fi-input-wrp-suffix {
    padding: 0;
    border: 0;
    /* The full height of the box, so the button inside centres its icon on
       the number, not above it (owner, 2026-10-06). */
    align-self: stretch;
    display: flex;
    align-items: stretch;
}

/* Filament wraps the button in a label span; it passes the height on. */
.ap-stepper .fi-input-wrp-label {
    display: flex;
    align-items: stretch;
}

.ap-stepper .fi-input {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ap-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    /* As tall as the box it sits in, so a count field is the height of
       every other field on a desk (owner, 2026-10-06); a touch screen keeps
       the 44px target below. */
    align-self: stretch;
    height: auto;
    color: var(--gray-500);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (pointer: coarse) {
    .ap-stepper-btn {
        min-height: 2.75rem;
    }
}

.ap-stepper-btn:active {
    color: var(--primary-600);
}

.ap-stepper-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/*
 * No browser spin arrows on any number box (owner, 2026-10-02: "money and
 * other number fields which require larger numbers don't need the arrows");
 * a count gets the stepper above instead.
 */
.fi-input[type='number']::-webkit-inner-spin-button,
.fi-input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fi-input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/*
 * Bottom tab bar (owner, 2026-10-02: "native-app style bottom tab bar").
 * Drawn by `filament/app/tab-bar` at LAYOUT_END; four destinations and More,
 * which opens the sidebar drawer. Below 1024px only, the width under which
 * Filament keeps no sidebar on screen and shows the topbar's menu button.
 *
 * 56px plus the device's safe area, white (gray-900 in dark) with a hairline
 * on top. z-index 25: above the page and its sticky bits, below the topbar
 * and the sidebar drawer with its overlay (30), Filament's popups (40), the
 * instant sheet (45) and the toasts (50). It slides away while a popup or the
 * instant sheet is open and while a field has focus (`ap-typing`, toggled by
 * the view's script), so it never rides on the phone keyboard. Fixed, so
 * hiding it moves nothing on the page.
 */
.ap-tabbar {
    display: none;
}

@media (max-width: 1023px) {
    .fi-panel-app {
        --ap-tabbar-height: 3.5rem;
        /* What the bar takes from the bottom of the screen right now; the
           toasts stand on it. */
        --ap-tabbar-space: calc(var(--ap-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    .fi-panel-app.ap-typing,
    .fi-panel-app:has(.fi-modal.fi-modal-open),
    .fi-panel-app:has(> .ap-instant-sheet) {
        --ap-tabbar-space: env(safe-area-inset-bottom, 0px);
    }

    .fi-panel-app .ap-tabbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 25;
        display: flex;
        align-items: stretch;
        justify-content: center;
        height: calc(var(--ap-tabbar-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
        background-color: var(--color-white, #fff);
        box-shadow: 0 -0.5px 0 var(--gray-200);
        transition: transform 0.2s ease;
    }

    .dark .fi-panel-app .ap-tabbar {
        background-color: var(--gray-900);
        box-shadow: 0 -0.5px 0 var(--gray-800);
    }

    .fi-panel-app.ap-typing .ap-tabbar,
    .fi-panel-app:has(.fi-modal.fi-modal-open) .ap-tabbar,
    .fi-panel-app:has(> .ap-instant-sheet) .ap-tabbar {
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s 0.2s;
    }

    .fi-panel-app .ap-tab {
        flex: 1 1 0;
        min-width: 0;
        /* A tablet keeps the tabs together in the middle, as iPadOS does. */
        max-width: 8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 2.75rem;
        /* Centred, the same space over the icon as under the label (owner
           2026-11-05); the home indicator's inset below is the bar's own. */
        padding: 0 0.125rem;
        color: var(--gray-500);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        transition: opacity 0.1s ease;
    }

    .dark .fi-panel-app .ap-tab {
        color: var(--gray-400);
    }

    /* Press feedback: a brief dim, as a native tab does. */
    .fi-panel-app .ap-tab:active {
        opacity: 0.55;
    }

    .fi-panel-app .ap-tab.ap-tab-active {
        color: var(--primary-600);
    }

    .dark .fi-panel-app .ap-tab.ap-tab-active {
        color: var(--primary-400);
    }

    .fi-panel-app .ap-tab:focus-visible {
        outline: 2px solid var(--primary-500);
        outline-offset: -4px;
        border-radius: 0.5rem;
    }

    .fi-panel-app .ap-tab-icon {
        display: flex;
    }

    .fi-panel-app .ap-tab-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Outlined at rest, filled on the tab you are on. */
    .fi-panel-app .ap-tab .ap-tab-icon-active,
    .fi-panel-app .ap-tab.ap-tab-active .ap-tab-icon-idle {
        display: none;
    }

    .fi-panel-app .ap-tab.ap-tab-active .ap-tab-icon-active {
        display: flex;
    }

    .fi-panel-app .ap-tab-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.6875rem;
        /* Tight to the glyphs so the centring is what the eye sees. */
        line-height: 0.875rem;
        font-weight: 500;
    }

    /* The page ends above the bar, its last row and pagination reachable. */
    .fi-panel-app .fi-main-ctn {
        padding-bottom: calc(var(--ap-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    /* The topbar's menu button stays beside More (owner, 2026-10-02: "keep
       the nav icon also on the left top"); both open the same drawer. */

    /*
     * Toasts (owner, 2026-10-02): bottom centre, the width of the screen less
     * a 16px gutter (at most 28rem on a tablet), 8px above the bar, or above
     * the safe area while the bar is away; newest nearest the bar, older ones
     * stacking upward, each sliding up as it arrives. Desktop keeps
     * Filament's top-right.
     */
    .fi-panel-app .fi-no {
        inset: auto 1rem calc(var(--ap-tabbar-space) + 0.5rem) 1rem;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
        transition: bottom 0.2s ease;
    }

    .fi-panel-app .fi-no .fi-no-notification:not(.fi-inline) {
        width: 100%;
        max-width: 28rem;
    }

    .fi-panel-app .fi-no .fi-no-notification.fi-transition-enter-start {
        translate: 0 1.5rem;
    }

    /* In dark a toast sits on cards of its own gray-900, where its shadow
       does not show; one step lighter lifts it off them. */
    .dark .fi-panel-app .fi-no .fi-no-notification:not(.fi-inline) {
        background-color: var(--gray-800);
    }
}

/* A sheet's header is its drag handle on a phone (filament/sheet-drag,
   2026-10-03): the browser leaves that gesture to the script. Both panels. */
@media (max-width: 767px) {
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
        touch-action: none;
    }
}

/* A phone sheet sits on top of the on-screen keyboard and loses that much
   height (filament/sheet-keyboard sets --ap-keyboard, 0 without one). Both
   panels; 2026-10-05. */
@media (max-width: 767px) {
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn {
        /* Over the sheet rules' own `padding: 1rem 0 0`, which are more
           specific and would otherwise zero it. */
        padding-bottom: var(--ap-keyboard, 0px) !important;
        transition: padding-bottom 0.2s ease;
    }

    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
        max-height: calc(100dvh - 2.5rem - var(--ap-keyboard, 0px)) !important;
    }
}

/*
 * A phone sheet with a field to type in opens at full height (owner,
 * 2026-10-05: "make those mobile popups full height so they don't flicker
 * up/down when keyboard opens"). Sized to its content, such a sheet put its
 * field low on the screen, where the keyboard comes in: the browser slid the
 * page up to show it and the sheet then lifted, the flicker. At full height
 * the fields sit in the top half, clear of the keyboard, and the keyboard
 * only shortens the sheet from the bottom, its button riding on top of it.
 * The top stays still: the container's padding grows by what the height
 * loses, on the same curve. Since the same day every phone sheet is full
 * height, confirmations such as Withdraw included (owner: "these popups are
 * jumping if they are not full height"). The top gap clears the notch when the
 * page runs standalone. Both panels.
 */
@media (max-width: 767px) {
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn {
        padding-top: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.5rem)) !important;
    }

    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
        height: calc(100dvh - max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.5rem)) - var(--ap-keyboard, 0px));
        max-height: none !important;
        transition: height 0.2s ease;
    }

    /* The fields at the top, the buttons on the bottom edge. */
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-content {
        flex: 1 0 auto;
    }

    /* A confirmation with no content still keeps its buttons on the edge. */
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
        margin-top: auto;
    }

    /* The stand-in for such a popup is full height too, so the real one
       appears in its place with no glide. */
    .ap-instant-sheet-window {
        top: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.5rem));
        display: flex;
        flex-direction: column;
    }

    .ap-instant-sheet-window > .ap-instant-sheet-button {
        margin-top: auto;
    }
}

/*
 * Desk-only and phone-only pieces of a client list row (owner, 2026-10-05,
 * ad accounts): the desk shows Top up or Replace inline with Withdraw in a
 * menu and the status in its own column; a phone shows the status badge and
 * Remaining under the name and every action in one menu at the row's end.
 */
@media (min-width: 768px) {
    .fi-panel-app .ap-phone-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .fi-panel-app .ap-desk-only {
        display: none !important;
    }

    .fi-panel-app .ap-name-status {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.5rem;
        margin-top: 0.25rem;
        font-size: 0.8125rem;
        color: var(--gray-500);
        font-variant-numeric: tabular-nums;
    }
}

/* On a desk the name's second line holds only the phone's status line when
   there is no ID / marker line (2026-11-02) to show; it goes, so the
   name sits centred. */
@media (min-width: 768px) {
    .fi-panel-app .fi-ta-text-description:has(> .ap-name-status):not(:has(> .ap-desk-only)):not(:has(> .ap-name-meta)) {
        display: none;
    }
}

/*
 * No Cancel button in a phone sheet that holds a form (owner, 2026-10-05):
 * the header's close button, dragging the sheet down and tapping the dimmed
 * page all leave it, so Cancel only took a full-width row from the space
 * left beside the keyboard. A popup with no form (a confirmation such as
 * "Cancel this request?" with Keep request, Remove teammate, Withdraw) keeps
 * both buttons, the second being an answer rather than a way out. Desktop
 * dialogs keep Cancel. Both panels.
 */
@media (max-width: 767px) {
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-modal-window-has-content .fi-modal-footer-actions > .fi-btn:not(.fi-color) {
        display: none;
    }
}

/*
 * On a desk the main button sits on the right of a popup's footer with the
 * secondary ones (Cancel) to its left (owner, 2026-10-05), as in Filament's
 * own end alignment. Centred footers (confirmations) keep their layout.
 * Both panels.
 */
@media (min-width: 768px) {
    .fi-modal .fi-modal-footer:is(.fi-align-start, .fi-align-left) .fi-modal-footer-actions {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
}

/* The top-up popup's Total: the figure larger and bold, the calculation
   under it (owner, 2026-10-05). */
.ap-quote-total {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--gray-950);
    font-variant-numeric: tabular-nums;
}

.dark .ap-quote-total {
    color: #fff;
}

.ap-quote-calc {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

.dark .ap-quote-calc {
    color: var(--gray-400);
}

/*
 * Main button off while a field shows an error nobody has edited since
 * (owner, 2026-10-05; filament/form-errors marks an edited field). Every
 * width, both panels.
 */
.fi-modal-window:has(.fi-fo-field:not(.ap-edited) .fi-fo-field-wrp-error-message) .fi-modal-footer-actions .fi-btn.fi-color,
.fi-modal-window.ap-form-incomplete .fi-modal-footer-actions .fi-btn.fi-color {
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
}

/* A picked dropdown value stays on one line, ending in an ellipsis when it
   does not fit (owner, 2026-10-05: "make sure value for the dropdown is not
   in 2 lines"). The open list still wraps, so nothing there is cut. Both
   panels, every width. */
.fi-select-input-value-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

/* A chosen value in the Business Manager request popup stays on one line,
   cut with an ellipsis rather than wrapping (2026-10-05). Every width. */
.fi-panel-app .ap-bm-request select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * The Ledger page's two cards, compact like the dashboard's Your money row
 * (owner, 2026-10-05: "Ledger should look as good as Dashboard, compact,
 * small spacings for cards"). The same rules as the `.ap-period-section`
 * ones above, under the Ledger section's own class (`LedgerSummary`):
 * two a row from a phone up, 0.5rem apart below md, 0.75rem padding, 13px
 * label and line, a 1.375rem figure that shrinks with its card. The cards
 * carry no link, so there is no arrow to make room for. Its placeholder
 * (skeleton/dashboard-stats with the same section class) moves with it.
 */
@media (max-width: 1023px) {
    .fi-panel-app .ap-compact-stats .fi-section-content.fi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fi-panel-app .ap-compact-stats .fi-section-content.fi-grid {
        gap: 0.5rem;
    }

    .fi-panel-app .ap-compact-stats .fi-wi-stats-overview-stat {
        padding: 0.75rem;
    }

    .fi-panel-app .ap-compact-stats .fi-wi-stats-overview-stat-content {
        row-gap: 0.25rem;
    }

    .fi-panel-app .ap-compact-stats .fi-wi-stats-overview-stat-label,
    .fi-panel-app .ap-compact-stats .fi-wi-stats-overview-stat-description {
        font-size: 0.8125rem;
        line-height: 1.125rem;
    }

    .fi-panel-app .ap-compact-stats .fi-wi-stats-overview-stat-value {
        font-size: min(1.375rem, 13.5cqi);
        line-height: 1.75rem;
    }
}

/* With viewport-fit=cover (2026-10-06) a phone held sideways draws under its
   notch; the page keeps clear of it. The bottom inset is carried by the tab
   bar, the sheets and the toasts. Both panels. */
@media (max-width: 1023px) {
    body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/*
 * Business Manager logins (2026-10-06): an order for several shows one block
 * per manager, ruled off from the one before it like the rows of a card.
 */
.ap-bm-login + .ap-bm-login {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.5rem;
}

.dark .ap-bm-login + .ap-bm-login {
    border-top-color: rgb(255 255 255 / 0.1);
}

/*
 * The side menu on a phone or tablet scrolls by itself (owner, 2026-10-06:
 * "when I scroll it, the page under it scrolls too and the mobile browser
 * bottom nav opens/closes"): the menu always has room to scroll, its scroll
 * never hands over to the page at its ends, and a drag on the dimmed page
 * moves nothing. Both panels, below 1024px, where
 * the menu is an overlay.
 */
@media (max-width: 1023px) {
    /* No overflow lock on the page root (removed 2026-10-06): the menu
       stopped scrolling under the finger on the owner's iPhone with it on.
       The menu always has something to scroll (the block below) and never
       hands its scroll on to the page, which is what held the page still. */
    .fi-sidebar.fi-sidebar-open .fi-sidebar-nav {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* The last item (My account) clears the home indicator and the
           browser's own bottom bar with room to spare, so the menu scrolls
           it up into easy reach (owner, 2026-10-06). */
    }

    /* The room is a real block at the end of the list, not padding: Safari's
       engine (every browser on an iPhone) leaves a scroll box's own bottom
       padding out of what it scrolls to, so padding gave the list nothing to
       scroll on the owner's iPhone while Chrome on a desk scrolled fine
       (2026-10-06). A sixth of the screen at least (halved on the owner's ask), so the list always
       scrolls however tall the phone. */
    .fi-sidebar.fi-sidebar-open .fi-sidebar-nav::after {
        content: '';
        display: block;
        flex: none;
        height: calc(env(safe-area-inset-bottom, 0px) + max(4rem, 17.5dvh));
    }

    .fi-sidebar-close-overlay {
        touch-action: none;
        overscroll-behavior: contain;
    }
}

/*
 * Team (owner, 2026-10-06): on a phone the colleague's email sits under the
 * name and folds anywhere, since an address has no space to break at; the
 * role badge (with "Invited" under it) and the row's one menu stay on screen.
 * On a desk the email has its own column and this line is hidden.
 */
@media (max-width: 767px) {
    .fi-panel-app .ap-team-email {
        display: block;
        overflow-wrap: anywhere;
    }

    /* "Invited" under the role rather than beside it, neither one folding. */
    .fi-panel-app .fi-ta-cell-role .fi-ta-text-has-badges {
        flex-direction: column;
        align-items: flex-start;
    }

    .fi-panel-app .fi-ta-cell-role .fi-badge {
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .fi-panel-app .fi-ta-text-description:has(> .ap-team-email) {
        display: none;
    }
}

/* With three columns there is room from xl for an address on one line. */
@media (min-width: 1280px) {
    .fi-panel-app .fi-ta-cell.ap-col-fold.ap-team-email-cell .fi-ta-text {
        max-width: none;
    }
}

/*
 * A client report's page on a phone (owner, 2026-10-06: "Reports, review and
 * optimize"). The report's card keeps 0.75rem of padding instead of 1.5rem,
 * so its tables get 24px more room before they scroll in their own box; the
 * four balance figures sit two a row instead of four stacked 70px cards; the
 * report's own head and sections close up a little. Layout only: a published
 * report's stored copy (`published_html`) keeps every word and figure, and
 * these rules only change how it sits on a narrow screen. Both panels, like
 * the table rules above (`html body` outweighs the report's own style block,
 * which comes later in the page at the same weight).
 */
@media (max-width: 767px) {
    .ap-report-card .fi-section-content {
        padding: 0.875rem 0.75rem;
    }

    html body .ap-report .rp-head {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    html body .ap-report .rp-kind {
        font-size: 1.0625rem;
    }

    html body .ap-report .rp-section {
        margin-bottom: 1.25rem;
    }

    html body .ap-report .rp-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    html body .ap-report .rp-figure {
        padding: 0.5rem 0.625rem;
    }

    html body .ap-report .rp-figure strong {
        font-size: 0.875rem;
        overflow-wrap: anywhere;
    }
}

/*
 * My account, compact (owner, 2026-10-06: "make it compact, remove unused or
 * unnecessary stuff, make it super optimized for mobile", then "go over My
 * Account once more, specifically on mobile, adjust spacings"). Every card
 * on the page carries `ap-settings-card` (App\Filament\App\Pages\
 * AccountSettings). One rhythm on a phone, the deposit view's: 1rem between
 * cards and above Save changes, headers 0.875rem 1rem, a read-only detail a
 * 3rem row (label left in gray, value right) under a hairline, a long value
 * stacked under its label. A card's buttons close it as one more row, above
 * a hairline. Payment sources are a flat list (label and type, the address
 * under them) instead of boxes inside the card. Notifications are one 3rem
 * row per event at every width: its name, then a cell per channel, the
 * channel names once above them; the switch sits on the row's centre line.
 */
.fi-panel-app .ap-notify .fi-section-content.fi-sc-has-gap,
.fi-panel-app .ap-notify .fi-section-content > .fi-sc {
    row-gap: 0;
}

.fi-panel-app .ap-notify-row,
.fi-panel-app .ap-notify-telegram,
.fi-panel-app .ap-notify-head {
    gap: 0.75rem;
}

.fi-panel-app .ap-notify-row {
    min-height: 3rem;
    border-top: 1px solid var(--gray-100);
}

.dark .fi-panel-app .ap-notify-row {
    border-top-color: rgb(255 255 255 / 0.05);
}

.fi-panel-app .ap-notify-row .fi-sc-text {
    color: var(--gray-950);
}

.dark .fi-panel-app .ap-notify-row .fi-sc-text {
    color: var(--color-white, #fff);
}

/* With one switch a row the name is its label: the whole row is the tap. */
.fi-panel-app .ap-notify-row .fi-sc-text label {
    display: block;
    cursor: pointer;
    padding-block: 0.75rem;
}

.fi-panel-app .ap-notify-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fi-panel-app .ap-notify-cell .fi-fo-field-label-col,
.fi-panel-app .ap-notify-cell .fi-fo-field-label-ctn,
.fi-panel-app .ap-notify-cell .fi-fo-field-label {
    display: flex;
    align-items: center;
}

.fi-panel-app .ap-notify:has(.ap-notify-head) .ap-notify-cell {
    width: 4.5rem;
}

.fi-panel-app .ap-notify-group {
    display: block;
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
    color: var(--gray-500);
}

.dark .fi-panel-app .ap-notify-group {
    color: var(--gray-400);
}

.fi-panel-app .ap-notify .fi-section-content > .fi-grid-col:first-child .ap-notify-group {
    padding-top: 0.75rem;
}

.fi-panel-app .ap-notify-telegram {
    padding-block: 0.75rem 0.5rem;
}

.fi-panel-app .ap-notify-head {
    padding-top: 0.25rem;
}

.fi-panel-app .ap-settings-stack > .fi-sc {
    row-gap: 1.5rem;
}

/* Payment sources: a flat list, one source a block, ruled off. */
.fi-panel-app .ap-sources .fi-in-repeatable-item {
    padding-block: 0.75rem;
}

.fi-panel-app .ap-sources .fi-in-repeatable-item + .fi-in-repeatable-item {
    border-top: 1px solid var(--gray-100);
}

.dark .fi-panel-app .ap-sources .fi-in-repeatable-item + .fi-in-repeatable-item {
    border-top-color: rgb(255 255 255 / 0.05);
}

.fi-panel-app .ap-sources .fi-in-repeatable-item > .fi-sc.fi-sc-has-gap {
    row-gap: 0.125rem;
}

.fi-panel-app .ap-sources .fi-in-repeatable {
    gap: 0;
}

@media (max-width: 767px) {
    /* Between the cards and above Save changes, the dashboard's 1rem. */
    .fi-panel-app form.fi-sc-form:has(.ap-settings-card),
    .fi-panel-app form.fi-sc-form:has(.ap-settings-card) > .fi-sc.fi-sc-has-gap,
    .fi-panel-app form.fi-sc-form:has(.ap-settings-card) > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc.fi-sc-has-gap,
    .fi-panel-app .ap-settings-stack > .fi-sc {
        row-gap: 1rem;
    }

    .fi-panel-app .ap-settings-card .fi-section-header {
        padding: 0.875rem 1rem;
    }

    .fi-panel-app .ap-settings-card .fi-section-content {
        padding: 0.25rem 1rem;
    }

    /* A card of fields (Profile): room around the inputs. */
    .fi-panel-app .ap-settings-card:has(.fi-input-wrp) .fi-section-content {
        padding-top: 1rem;
    }

    .fi-panel-app .ap-settings-card:has(.fi-input-wrp) .fi-section-content.fi-sc-has-gap {
        row-gap: 1rem;
    }

    .fi-panel-app .ap-settings-card:not(:has(.fi-input-wrp)) .fi-section-content.fi-sc-has-gap {
        row-gap: 0;
    }

    /* Hairlines between a read-only card's rows. */
    .fi-panel-app .ap-settings-card:not(:has(.fi-input-wrp, .fi-toggle)) .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden),
    .fi-panel-app .ap-settings-card .fi-section-content > .fi-grid-col:has(> .fi-sc-component > .ap-settings-card-actions) {
        border-top: 1px solid var(--gray-100);
    }

    .dark .fi-panel-app .ap-settings-card:not(:has(.fi-input-wrp, .fi-toggle)) .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden),
    .dark .fi-panel-app .ap-settings-card .fi-section-content > .fi-grid-col:has(> .fi-sc-component > .ap-settings-card-actions) {
        border-top-color: rgb(255 255 255 / 0.05);
    }

    .fi-panel-app .ap-settings-card .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 3rem;
        padding-block: 0.5rem;
    }

    .fi-panel-app .ap-settings-card .ap-entry-stacked {
        row-gap: 0.125rem;
        padding-block: 0.75rem;
    }

    .fi-panel-app .ap-settings-card .fi-in-entry:not(.ap-entry-stacked) > .fi-in-entry-label-col {
        flex: 0 0 auto;
    }

    .fi-panel-app .ap-settings-card .fi-in-entry-label {
        font-weight: 400;
        color: var(--gray-500);
    }

    .dark .fi-panel-app .ap-settings-card .fi-in-entry-label {
        color: var(--gray-400);
    }

    .fi-panel-app .ap-settings-card .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) > .fi-in-entry-content-col {
        flex: 1 1 auto;
        min-width: 0;
        text-align: end;
        overflow-wrap: anywhere;
    }

    .fi-panel-app .ap-settings-card .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) .fi-in-entry-content {
        text-align: end;
    }

    .fi-panel-app .ap-settings-card .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) .fi-in-text {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .fi-panel-app .ap-settings-card .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) > .fi-in-entry-content-col > .fi-sc {
        justify-content: flex-end;
    }

    /* In the Profile card the email line is a row between the fields and
       the buttons, without its own hairlines. */
    .fi-panel-app .ap-settings-card:has(.fi-input-wrp) .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn) {
        min-height: 0;
        padding-block: 0;
    }

    /* A card's buttons close it as its last row: equal halves... */
    .fi-panel-app .ap-settings-card .fi-section-content > .fi-grid-col:has(> .fi-sc-component > .ap-settings-card-actions) {
        padding-block: 0.75rem;
    }

    .fi-panel-app .ap-settings-card .ap-settings-card-actions > .fi-ac {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .fi-panel-app .ap-settings-card .ap-settings-card-actions > .fi-ac > .fi-btn {
        width: 100%;
    }

    /* ...or, for links (the agreement's), their own widths a gap apart. */
    .fi-panel-app .ap-settings-card .ap-settings-card-actions > .fi-ac:has(> .fi-ac-link-action) {
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.75rem;
    }

    .fi-panel-app .ap-settings-card .ap-settings-card-actions:has(.fi-ac-link-action) {
        margin-block: -0.5rem;
    }

    /* In the Profile card the buttons follow the fields at the same gap. */
    .fi-panel-app .ap-settings-card:has(.fi-input-wrp) .fi-section-content > .fi-grid-col:has(> .fi-sc-component > .ap-settings-card-actions) {
        border-top: 0;
        padding-block: 0 0.75rem;
    }

    /* Two channels leave the event's name more room on a phone; a name
       that still folds keeps the row's padding around its two lines. */
    .fi-panel-app .ap-notify:has(.ap-notify-head) .ap-notify-cell {
        width: 3.5rem;
    }

    .fi-panel-app .ap-notify:has(.ap-notify-head) .ap-notify-row .fi-sc-text {
        display: block;
        padding-block: 0.5rem;
    }

    .fi-panel-app .ap-notify-row,
    .fi-panel-app .ap-notify-head {
        gap: 0.5rem;
    }

    .fi-panel-app .ap-notify .fi-section-content {
        padding-bottom: 0.25rem;
    }

    .fi-panel-app .ap-settings-save > .fi-ac,
    .fi-panel-app .ap-settings-save > .fi-ac > .fi-btn {
        width: 100%;
    }
}

/*
 * Agreement page (owner, 2026-10-06: "Do the same optimization as for My
 * Account to contract signing"). App\Filament\App\Pages\Agreement carries
 * `ap-agreement-page`. The Sign agreement button is off, as a popup's main
 * button is, until both fields are filled and the box is ticked (the form's
 * own Alpine check); the server validates again on submit. Every width.
 */
.fi-panel-app .ap-agreement-page .ap-sign-button:disabled {
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
}

/* Go to signing lands on the sign card's heading, not under the topbar. */
.fi-panel-app .ap-agreement-page #sign-agreement {
    scroll-margin-top: 5rem;
}

@media (max-width: 767px) {
    /* The summary card reads like a record's page: one row per detail, label
       left and value right, hairlines between, 1rem of padding. */
    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-section-content {
        padding: 0.25rem 1rem 1rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-section-content.fi-sc-has-gap {
        row-gap: 0;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-in-entry {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 3rem;
        padding-block: 0.5rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-in-entry > .fi-in-entry-label-col {
        flex: 0 0 auto;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-in-entry-label {
        font-weight: 400;
        color: var(--gray-500);
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-in-entry > .fi-in-entry-content-col {
        flex: 1 1 auto;
        min-width: 0;
        text-align: end;
        overflow-wrap: anywhere;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-in-entry-content,
    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-in-entry > .fi-in-entry-content-col > .fi-sc {
        text-align: end;
        justify-content: flex-end;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden) {
        border-top: 1px solid var(--gray-100);
    }

    .dark .fi-panel-app .ap-agreement-page .ap-agreement-summary .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden) {
        border-top-color: rgb(255 255 255 / 0.05);
    }

    /* Download and Go to signing share the row, half each. */
    .fi-panel-app .ap-agreement-page .ap-agreement-buttons {
        padding-top: 0.75rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-buttons .fi-ac {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-buttons .fi-btn {
        width: 100%;
        justify-content: center;
    }

    /* The contract: 1rem of card padding instead of 1.5rem, and a 15px text,
       about forty characters a line at 390px. */
    .fi-panel-app .ap-agreement-page .ap-agreement-text .fi-section-content {
        padding: 1rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement .agreement-title {
        font-size: 1.25rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement .agreement-heading {
        margin-top: 1.5rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement .agreement-callout {
        padding: 0.75rem 0.875rem 0.125rem;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement .agreement-list {
        padding-left: 1rem;
    }

    /* The signed copy fills its card: the frozen document brings its own
       margins, so the card's padding and the frame's border only narrowed
       it. Nothing inside the frame is restyled. */
    .fi-panel-app .ap-agreement-page .ap-agreement-text .fi-section-content:has(.ap-agreement-frame) {
        padding: 0;
    }

    .fi-panel-app .ap-agreement-page .ap-agreement-frame {
        border: 0;
        border-radius: 0.75rem;
    }

    /* The sign card: 1rem of padding, one column, the button full width. */
    .fi-panel-app .ap-agreement-page #sign-agreement .fi-section-header {
        padding: 0.875rem 1rem;
    }

    .fi-panel-app .ap-agreement-page #sign-agreement .fi-section-content {
        padding: 1rem;
    }

    .fi-panel-app .ap-agreement-page .ap-sign-button {
        width: 100%;
        justify-content: center;
    }
}

/*
 * Sign-in screen on a phone (owner, 2026-10-06: the pages a client sees
 * before the panel). The "or" rule under Sign in carried a desktop margin on
 * top of the form's own gap, so Sign in and Continue with Google sat a
 * thumb's width apart; on a phone they read as one block now. The Google
 * button keeps the Sign in button's 44px tap height. Client panel only: the
 * admin sign-in is left as it is.
 */
@media (max-width: 767px) {
    /* Each sits in a 24px schema gap already; pull the rule into it. */
    .fi-panel-app .fi-simple-page .ap-google-divider {
        margin: -4px 0 -10px;
    }

    .fi-panel-app .fi-simple-page .ap-google-btn {
        min-height: 44px;
    }
}

/*
 * A whitelisted account's landing pages on the client's ad account page and
 * in each account of a whitelisted order (App\Filament\Support\
 * WhitelistRequestPages, owner request 2026-10-23: the desk's request page
 * look, the same block). admin-tables.css draws it for the admin and
 * provider panels; these are its client panel twins: the address whole and
 * folding anywhere, copied on a tap, the open-in-a-new-tab icon after it,
 * and an ad account ID that never folds mid-number.
 */
.fi-panel-app .ap-copy-id {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.fi-panel-app .ap-copy-id-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 120ms ease;
}

.fi-panel-app .ap-copy-id:hover .ap-copy-id-icon,
.fi-panel-app .ap-copy-id:focus-visible .ap-copy-id-icon {
    opacity: 1;
}

.fi-panel-app .ap-copy-id.ap-copy-id-wrap {
    display: inline;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.fi-panel-app .ap-copy-id-wrap .ap-copy-id-icon {
    display: inline-block;
    vertical-align: -0.125rem;
    margin-left: 0.25rem;
}

.fi-panel-app .ap-wl-url {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.fi-panel-app .ap-wl-open {
    display: inline-block;
    margin-left: 0.375rem;
    vertical-align: -0.125rem;
    color: var(--primary-600);
}

.dark .fi-panel-app .ap-wl-open,
.fi-panel-app:where(.dark *) .ap-wl-open {
    color: var(--primary-400);
}

.fi-panel-app .ap-wl-open svg {
    width: 0.875rem;
    height: 0.875rem;
}

.fi-panel-app .ap-entry-id .fi-in-text-item,
.fi-panel-app .ap-entry-id .fi-in-text-item * {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/*
 * On a phone: the view page rules above divide a section's items and pad
 * each entry as a settings row; inside the landing page boxes that left
 * wide gaps. Boxes 1rem apart, slimmer boxes, 0.625rem between an address
 * and its countries, no hairline between boxes. The repeated classes
 * outrank the view page rules.
 */
@media (max-width: 767px) {
    .fi-panel-app .ap-wl-pages.ap-wl-pages .fi-section-content.fi-section-content.fi-sc-has-gap {
        padding: 0.75rem;
        row-gap: 1rem;
    }

    .fi-panel-app .ap-wl-pages.ap-wl-pages .fi-section-content.fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden) {
        border-top: 0;
    }

    .fi-panel-app .ap-wl-page.ap-wl-page.fi-fieldset,
    .fi-panel-app .ap-wl-slot.ap-wl-slot.fi-fieldset {
        padding: 0.375rem 0.75rem 0.75rem;
    }

    .fi-panel-app .ap-wl-page.ap-wl-page > .fi-grid.fi-sc-has-gap,
    .fi-panel-app .ap-wl-slot.ap-wl-slot > .fi-grid.fi-sc-has-gap {
        row-gap: 0.625rem;
    }

    .fi-panel-app .ap-wl-page.ap-wl-page .fi-in-entry.ap-entry-stacked {
        padding-block: 0;
    }

    .fi-panel-app .ap-wl-slot-facts.ap-wl-slot-facts > .fi-grid.fi-sc-has-gap {
        row-gap: 0;
    }

    .fi-panel-app .ap-wl-slot-facts .fi-in-entry:has(> .fi-in-entry-label-col > .fi-in-entry-label-ctn):not(.ap-entry-stacked) {
        min-height: 2.5rem;
        padding-block: 0.25rem;
    }

    .fi-panel-app .ap-wl-slot-facts .fi-in-entry.ap-entry-stacked {
        padding-block: 0.5rem;
    }
}

/* A record page's header verbs on a phone (owner 2026-11-05): they take the
   row under the title; the main buttons share it in equal parts (one alone
   takes it all) and a More menu, icon only, closes it at its own width. */
@media (max-width: 767px) {
    .fi-panel-app .fi-resource-view-record-page .fi-header > .fi-header-actions-ctn {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .fi-panel-app .fi-resource-view-record-page .fi-header > .fi-header-actions-ctn > .fi-ac {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        width: 100%;
    }

    .fi-panel-app .fi-resource-view-record-page .fi-header > .fi-header-actions-ctn > .fi-ac > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .fi-panel-app .fi-resource-view-record-page .fi-header > .fi-header-actions-ctn > .fi-ac > .fi-dropdown {
        flex: none;
    }

    .fi-panel-app .fi-resource-view-record-page .fi-header > .fi-header-actions-ctn > .fi-ac > :not(.fi-dropdown) .fi-btn,
    .fi-panel-app .fi-resource-view-record-page .fi-header > .fi-header-actions-ctn > .fi-ac > .fi-btn {
        width: 100%;
        justify-content: center;
        min-height: 2.75rem;
    }

    /* More shows its icon only; its word stays for a screen reader. */
    .fi-panel-app .fi-resource-view-record-page .fi-header > .fi-header-actions-ctn > .fi-ac > .fi-dropdown > .fi-dropdown-trigger > .fi-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding-inline: 0.75rem;
        gap: 0;
        font-size: 0;
    }
}

/* The no-spend removal notice on an account page on a phone (owner
   2026-11-05): the same space under it as over it (the header's 1rem), not
   the schema's 1.5rem gap. A wide screen already has 1.5rem on both sides. */
@media (max-width: 767px) {
    .fi-panel-app .ap-limit-notice.ap-removal-note {
        margin-bottom: -0.5rem;
    }
}