/*
 * Phone rules for the ADMIN panel (owner, 2026-10-02: "implement all the
 * changes we discussed for the client dashboard on the admin panel, so admins
 * can use it easily from a phone").
 *
 * The admin-scoped twins of the client panel's phone rules in mobile.css and
 * stats.css, which stay untouched; read the comment beside each rule there for
 * the measurements behind it. Registered through FilamentAsset
 * (AppServiceProvider::boot) after every other sheet, so a rule here wins over
 * stats.css and admin-tables.css at the same specificity.
 *
 * Everything is scoped to `.fi-panel-admin` and to phones (below Filament's
 * `md`, 768px) unless a rule says otherwise: the desk works at a desk, and
 * from 768px up the admin is exactly what it was.
 *
 * The provider dashboard (`.fi-panel-provider`, 2026-10-15) shares every rule
 * here, through `:is(.fi-panel-admin, .fi-panel-provider)`: its lists use the
 * same `PhoneRow` cells, `PhoneSheet` popups, bottom tab bar and action menu
 * sheet, so a phone reads it exactly as it reads the admin. `:is()` takes the
 * specificity of its strongest argument, one class, so nothing here changed
 * weight. A rule naming an admin page's own classes simply matches nothing
 * on the provider's pages.
 *
 * Neutral structure only. No brand hexes: `docs/Brand/tokens.css` is the
 * source of truth for colour and nothing here needs any.
 */

/*
 * The logo in the topbar on phones and tablets, centred on the bar, and none
 * in the opened drawer (mobile.css, "The logo in the topbar").
 */
@media (max-width: 1023px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-topbar {
        position: relative;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-sidebar-header-ctn {
        display: none;
    }
}

/*
 * Vertical space: 1rem above the title, between the header and the body and
 * between a page's blocks, instead of 2rem.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-page-header-main-ctn {
        padding-top: 1rem;
        row-gap: 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-page-content {
        row-gap: 1rem;
    }

    /*
     * The title and its actions share a line. admin-tables.css lays a
     * page's actions out as a full-width grid of equal 44px buttons, which
     * suits a record page's four or five verbs; a page with ONE action
     * ("Request ad account" alone, "Generate report") gives the title its
     * row back and sits the button beside it instead.
     */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-header > div:first-child {
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn:has(> .fi-ac > :only-child) {
        width: auto;
        margin-inline-start: auto;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn > .fi-ac:has(> :only-child) {
        display: flex;
        width: auto;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn > .fi-ac:has(> :only-child) .fi-btn {
        width: auto;
        height: auto;
        font-size: 0.875rem;
    }

    /*
     * A list page's header (owner, 2026-10-12: "Manage price list button is
     * a bit off placed", "action buttons are too squished 50/50"). Title and
     * a lone action always share the row: a long title ("Platform
     * managers", "Provider sheet") folds onto two lines and a long label
     * onto two balanced lines, instead of the button wrapping under the
     * title and floating at the right of a row of its own. Two or more
     * actions take the row under the title in equal shares (owner,
     * 2026-10-12), each label on one line through a short phone label where
     * the action names one (`data-phone-label`). Every button stays a 44px tap.
     */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-heading {
        overflow-wrap: anywhere;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-actions-ctn:has(> .fi-ac > :only-child) {
        max-width: 11rem;
        margin-inline-start: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-actions-ctn > .fi-ac:has(> :only-child) .fi-btn {
        min-height: 2.75rem;
        text-align: start;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-actions-ctn:not(:has(> .fi-ac > :only-child)) {
        grid-column: 1 / -1;
    }

    /* Equal shares of the row (owner, 2026-10-12: Ad accounts' two buttons
       50/50), each label on one line through its short phone form. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-actions-ctn > .fi-ac:not(:has(> :only-child)) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-actions-ctn > .fi-ac:not(:has(> :only-child)) > * {
        height: auto;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-actions-ctn > .fi-ac:not(:has(> :only-child)) .fi-btn {
        width: 100%;
        justify-content: center;
        overflow: hidden;
        height: auto;
        min-height: 2.75rem;
        padding-inline: 0.625rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* The short label replaces the long one on screen only: the button's
       own text is still what a screen reader announces, and the swapped-in
       words are given empty alt text so they are not read twice. */
    :is(.fi-panel-admin, .fi-panel-provider) :is(.fi-resource-list-records-page, .fi-resource-view-record-page) .fi-header .fi-header-actions-ctn > .fi-ac .fi-btn[data-phone-label] {
        font-size: 0;
        /* The emptied text still counts as a grid item: half the gap on
           each side of it reads as the usual one between icon and words. */
        gap: 0.1875rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) :is(.fi-resource-list-records-page, .fi-resource-view-record-page) .fi-header .fi-header-actions-ctn > .fi-ac .fi-btn[data-phone-label]::after {
        content: attr(data-phone-label);
        content: attr(data-phone-label) / "";
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

/*
 * Tables on a phone: cells fold instead of pushing the table sideways, a
 * status pill folds only at its spaces, an amount stays on one line at the
 * right, row icons stack as 44px targets with their words kept for screen
 * readers, and a row that is a link drops its View icon (mobile.css, "Table
 * cells wrap" and "Client lists on a phone, second pass").
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell {
        white-space: normal;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text-item,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell-label {
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* A description line, and a column its author already ->wrap()ped
       (Filament marks the cell's text box, not the item), break anywhere:
       that is where a nineteen-digit account id in brackets lives. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text-description,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text-item.fi-wrapped,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text.fi-wrapped .fi-ta-text-item {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-badge {
        white-space: normal;
        overflow-wrap: normal;
        text-align: center;
    }

    /* A figure stays on one line; a word in its place ("Everything
       available") may fold. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.fi-align-end .fi-ta-text-item {
        white-space: nowrap;
    }

    /* 13px rather than 14px in a desk list's cells and headings: four
       columns of names, amounts and pills fit a 358px phone column. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text-item,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-placeholder,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell-label {
        font-size: 0.8125rem;
        line-height: 1.125rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row > .fi-ta-cell:first-of-type {
        padding-inline-start: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text {
        padding-block: 0.75rem;
    }

    /*
     * Gutters of 0.5rem instead of 0.75rem (the client panel keeps
     * Filament's): a desk list keeps four columns on a phone (a client, what,
     * an amount, a status) where the client's keeps two or three, and the
     * 16px this gives back per column is what lets them fit 358px.
     */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell {
        padding-inline: 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:has(> .fi-ta-actions),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:has(> .fi-ta-actions):last-of-type {
        padding-inline: 0 0.25rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell > .fi-ta-actions {
        padding-inline: 0;
    }

    /* The TEST badge's column has no heading and holds one short pill: no
       gutters of its own, the pill's neighbours already have theirs. */
    :is(.fi-panel-admin, .fi-panel-provider) :is(.fi-ta-cell-is-test, .fi-ta-cell-test-series) .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) :is(.fi-ta-header-cell-is-test, .fi-ta-header-cell-test-series) {
        padding-inline: 0;
    }

    /* A heading's sort chevron shows only once the list is sorted by it:
       "Organization" and its 20px chevron held a column at 127px. The
       heading is still the button that sorts. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell:not(.fi-ta-header-cell-sorted) .fi-ta-header-cell-sort-btn > .fi-icon {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-empty-state {
        padding-block: 1.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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%);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-actions .fi-ac-link-action {
        min-width: 2.75rem;
        min-height: 2.75rem;
        align-items: center;
        justify-content: flex-end;
    }

    /*
     * A row that is a link drops its actions column, heading and all: the
     * row tap lands on the record's page, and every admin row menu (approve,
     * confirm, deliver, apply...) is on that page's header too (checked
     * 2026-10-02 against every resource with a view page). Rows that are not
     * links (Business Manager requests) keep theirs.
     */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table:has(.fi-ta-row.fi-clickable) :is(.fi-ta-actions-header-cell, .fi-ta-row.fi-clickable > .fi-ta-cell:has(> .fi-ta-actions)) {
        display: none;
    }

    /* Filament pulls an icon button 0.5rem out on both sides; on the end
       side that hung a 44px button past the table's edge. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-actions .fi-icon-btn {
        margin-inline-end: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-copyable {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        margin-block: -0.75rem;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* A long copyable value (a wallet address, a hash) folds onto two or
       three lines, taller than the 44px box: borrowing the margin then cut
       its last line off under the next row. It keeps its own height. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-entry-stacked .fi-copyable {
        min-height: 0;
        margin-block: 0;
    }

    /* The toolbar: search fills the row, the filter and column buttons are
       plain 44px squares beside it, the filter count on the funnel's
       corner (mobile.css, "The table toolbar on a phone"). */
    /* 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). */
    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar .fi-ta-search-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar .fi-dropdown-trigger > .fi-icon-btn {
        margin: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar .fi-dropdown-trigger {
        width: 2.75rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar .fi-icon-btn-badge-ctn {
        inset-inline-start: 1.5rem;
        inset-inline-end: auto;
        top: 0.25rem;
        translate: none;
    }
}

/*
 * Thumb-sized controls: every button, icon button, link action, menu item,
 * tab and select option at least 44px, text fields at 1rem so iOS does not
 * zoom on focus (mobile.css, "Thumb-sized controls").
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-btn {
        min-height: 2.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-icon-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ac-link-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ac-link-action > .fi-link-label {
        align-self: center;
    }

    :is(.fi-panel-admin, .fi-panel-provider) input.fi-input,
    :is(.fi-panel-admin, .fi-panel-provider) select.fi-select-input,
    :is(.fi-panel-admin, .fi-panel-provider) textarea.fi-input,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-select-input .fi-select-input-btn {
        font-size: 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) input.fi-input,
    :is(.fi-panel-admin, .fi-panel-provider) select.fi-select-input {
        padding-block: 0.625rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-select-input .fi-select-input-btn {
        min-height: 2.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-select-input .fi-select-input-option {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-dropdown-list-item {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-google-btn {
        min-height: 2.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-theme-switcher-btn {
        min-height: 2.75rem;
        align-items: center;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-sidebar-item-btn {
        min-height: 2.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-tabs-item {
        min-height: 2.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell-sort-btn {
        min-height: 2.75rem;
        margin-block: -0.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-toggle,
    :is(.fi-panel-admin, .fi-panel-provider) input[type='checkbox'].fi-checkbox-input,
    :is(.fi-panel-admin, .fi-panel-provider) input[type='radio'].fi-radio-input {
        position: relative;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-toggle::after {
        content: '';
        position: absolute;
        inset: -0.625rem 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) input[type='checkbox'].fi-checkbox-input,
    :is(.fi-panel-admin, .fi-panel-provider) input[type='radio'].fi-radio-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-link:not(.fi-ac-link-action),
    :is(.fi-panel-admin, .fi-panel-provider) a.fi-in-entry-content {
        position: relative;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .fi-select-input-value-remove-btn::after {
        content: '';
        position: absolute;
        inset: -0.875rem;
    }
}

/*
 * Table pagination in one row: "10 of 224 results" on the left (the
 * pagination view override prints the short form), the per-page select and
 * two 44px chevron buttons on the right (mobile.css, "Table pagination").
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-pagination {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-pagination .ap-pagination-overview-long {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-pagination .ap-pagination-overview-short {
        display: inline;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-pagination .fi-pagination-records-per-page-select-ctn {
        order: 2;
        flex: 0 0 auto;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-pagination .fi-pagination-item-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .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");
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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");
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-pagination .fi-pagination-previous-btn::before,
    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }
}

/*
 * Modals as native bottom sheets: full width from the bottom edge, rising on
 * the iOS sheet curve, a grab handle on a sticky header that keeps the close
 * button in view, vertical scrolling only, the bottom safe area cleared, and
 * the actions stacked full width at 48px with the primary one on top.
 * Slide-overs and full-screen modals are left alone (mobile.css, "Modals
 * open as a sheet").
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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;
        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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter,
    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-start,
    :is(.fi-panel-admin, .fi-panel-provider) .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%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window.fi-transition-enter-end,
    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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 :is(.fi-panel-admin, .fi-panel-provider) .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);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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 :is(.fi-panel-admin, .fi-panel-provider) .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);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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));
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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));
    }

    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal-footer-actions .fi-btn {
        width: 100%;
        min-height: 3rem;
        font-size: 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal-footer-actions > .fi-btn:not(.fi-color),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal-footer-actions > :not(.fi-btn):not(:has(.fi-btn.fi-color)) {
        order: 1;
    }

    /* The instant sheet's handover (filament/app/instant-sheet), as in the
       client panel: the real popup appears where the stand-in stands. */
    html.ap-sheet-handover :is(.fi-panel-admin, .fi-panel-provider) .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 :is(.fi-panel-admin, .fi-panel-provider) .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 :is(.fi-panel-admin, .fi-panel-provider) .fi-modal > .fi-modal-close-overlay {
        transition: none !important;
        opacity: 1 !important;
    }

    html.ap-sheet-pending :is(.fi-panel-admin, .fi-panel-provider) .fi-modal > .fi-modal-window-ctn > .fi-modal-window,
    html.ap-sheet-pending :is(.fi-panel-admin, .fi-panel-provider) .fi-modal > .fi-modal-close-overlay {
        visibility: hidden;
    }
}

/*
 * "‹ {List}" above the title on a phone's view, edit and create pages: the
 * breadcrumb trail's first crumb, the rest hidden (mobile.css, "A back link").
 */
@media (max-width: 639px) {
    :is(.fi-panel-admin, .fi-panel-provider) :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;
        margin: -0.625rem 0 0.25rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) :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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) :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 :is(.fi-panel-admin, .fi-panel-provider) :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);
    }

    :is(.fi-panel-admin, .fi-panel-provider) :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: each labelled detail is one row, label left
 * and value right, divided by hairlines, with 1rem of card padding. A long
 * value (a name, an address, a note, a hash, JSON) is marked
 * `ap-entry-stacked` (App\Filament\Support\StackedEntry) and keeps its label
 * above it at full width. An entry with no visible label keeps its own
 * layout. A client report is a document of its own and is left alone.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-section-content {
        padding: 0.25rem 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-section-header {
        padding: 0.875rem 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-section-content.fi-sc-has-gap {
        row-gap: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-section-content > .fi-grid-col:has(.fi-in-repeatable) {
        padding-block: 0.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-in-repeatable-item {
        padding: 0.25rem 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-in-repeatable-item:not(:has(.fi-in-entry-label-ctn)) {
        padding-block: 0.75rem;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-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;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-in-entry:not(.ap-entry-stacked) > .fi-in-entry-label-col {
        flex: 0 1 auto;
        max-width: 50%;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-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;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-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 :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-reports) .fi-section-content > .fi-grid-col:not(.fi-hidden) ~ .fi-grid-col:not(.fi-hidden),
    .dark :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page:not(.fi-resource-client-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);
    }
}

/*
 * The dashboard on a phone: stat cards two a row with 0.75rem of padding,
 * the figure sized off the card so "$2,860,208.50" fits a 175px card, the
 * label and the line under it at 13px, and the link arrow in the bottom
 * corner (mobile.css, "The Your money cards two a row"). Every stat section
 * on the admin dashboard, and the lazy placeholders with them, since they
 * borrow the same classes. Outside the dashboard, a section with an odd
 * number of cards lets its last one take the whole row; the dashboard's own
 * three-card sections lead with their first instead (below).
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview .fi-section-content.fi-grid,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-section .fi-section-content.fi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-page:not(.ap-admin-dashboard) .fi-wi-stats-overview .fi-section-content.fi-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* The dashboard's title takes less of the first screen: 1.25rem, and
       0.75rem above it and under it, still the page's h1. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-page-header-main-ctn {
        padding-top: 0.75rem;
        row-gap: 0.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-header-heading {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    /* 1rem between the widgets, the page's own rhythm, not 1.5rem. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-grid:has(> .fi-wi-widget) {
        row-gap: 1rem;
    }

    /* A section's heading sits 0.5rem over its cards. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview .fi-section.fi-section-not-contained {
        row-gap: 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat {
        padding: 0.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat-content {
        row-gap: 0.25rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat-label {
        font-size: 0.8125rem;
        line-height: 1.125rem;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat-description {
        font-size: 0.8125rem;
        line-height: 1.125rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
        padding-inline-end: 1.25rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn {
        padding-inline-end: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat::after {
        top: auto;
        bottom: 0.75rem;
        right: 0.75rem;
        width: 1rem;
        height: 1rem;
    }

    /* Every card of a row as tall as the tallest. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview .fi-section-content.fi-grid > .fi-grid-col > .fi-sc-component,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview .fi-section-content.fi-grid > .fi-grid-col > .fi-sc-component > .fi-wi-stats-overview-stat {
        height: 100%;
    }

    /* The Cash in chart's card: 1rem of padding, not 1.5rem. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-chart .fi-section-header,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-chart .fi-section-content {
        padding: 1rem;
    }
}

/*
 * The dashboard's lead cards (owner, 2026-10-08). Business lines and Client
 * money (since its Ad spend card moved to Money as Spend, 2026-11-06) are
 * three cards per currency: wherever the row is two wide (below
 * Filament's lg), each currency's first card, marked `ap-stat-lead` by its
 * widget and by the placeholder, takes the full row and the other two sit
 * side by side under it. Driven by the class rather than by counting, so the
 * Separate view's groups (USD's three, then EUR's) each keep their own lead.
 * Money's four stay two by two.
 */
@media (max-width: 1023px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview .fi-section-content.fi-grid > .fi-grid-col:has(.ap-stat-lead) {
        grid-column: 1 / -1;
    }
}

/*
 * Provider overview (2026-11-11): five cards, Balance leads on its own row at
 * every width (the rule above only does so below lg), the other four sit four
 * across from lg and two by two below, so no slot is ever empty.
 */
.fi-panel-provider .fi-wi-stats-overview .fi-section-content.fi-grid > .fi-grid-col:has(.ap-stat-lead) {
    grid-column: 1 / -1;
}

/* With the lead out of the pairs, the last card is no odd one out. */
.fi-panel-provider .fi-page:not(.ap-admin-dashboard) .fi-wi-stats-overview .fi-section-content.fi-grid > :last-child:nth-child(odd):not(:has(.ap-stat-lead)) {
    grid-column: auto;
}

/*
 * One figure size across the dashboard on a desktop (owner, 2026-10-08).
 * stats.css sizes a figure off its own card, so Money's four-across cards
 * drew smaller figures than the three-across sections below. From lg up the
 * section's grid is the container instead, and every figure takes the size a
 * Money card can hold: a quarter of the grid less its three 1.5rem gaps
 * (18px each) and the card's own 1.5rem padding each side, over the 8em a
 * figure like "$2,903,860.03" needs, capped at Filament's 1.875rem. Every
 * section shares the page's width, so every figure comes out the same.
 */
@media (min-width: 1024px) {
    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview .fi-section-content.fi-grid {
        container-type: inline-size;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview-stat {
        container-type: normal;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview-stat-value {
        font-size: min(1.875rem, calc((25cqi - 66px) / 8));
    }
}

/*
 * From 1024px to 1279px the sidebar leaves the grid about 680px to 935px, so
 * Money's four-across cards drew a 12px figure under a label that folded
 * onto two lines (2026-10-09 review). There Money goes two by two and every
 * figure takes the size a three-across card holds (a third of the grid less
 * its share of the gaps and the card's padding, over 8em), still the same
 * across the page: about 20px at 1024px, the full 1.875rem by 1279px.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview .fi-section-content.fi-grid:has(> :nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-admin-dashboard .fi-wi-stats-overview-stat-value {
        font-size: min(1.875rem, calc((33.33cqi - 64px) / 8));
    }
}

/*
 * A linked stat card presses like an app's tile and a clickable row dims
 * under the finger, only on a real tap, never while scrolling (the
 * `ap-pressed` class from filament/app/press-feedback; stats.css has the
 * client panel's rules this mirrors). Every width: a mouse keeps :active.
 */
:is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.22s ease;
}

:is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat.ap-pressed {
    transform: scale(0.96);
    background-color: var(--gray-100);
    transition-duration: 0.06s;
}

:is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat.ap-pressed::after {
    background-color: var(--primary-600);
    transform: translate(2px, -2px);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat.ap-pressed {
    background-color: var(--gray-800);
}

@media (hover: hover) and (pointer: fine) {
    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat:active {
        transform: scale(0.96);
        background-color: var(--gray-100);
        transition-duration: 0.06s;
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat:active {
        background-color: var(--gray-800);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat,
    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat.ap-pressed,
    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat:active,
    :is(.fi-panel-admin, .fi-panel-provider) a.fi-wi-stats-overview-stat.ap-pressed::after {
        transform: none;
    }
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row.fi-clickable,
:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row.fi-clickable * {
    -webkit-tap-highlight-color: transparent;
}

/* The fade only on touch screens, so a desk's hover is what it was. */
@media (hover: none) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row.fi-clickable {
        transition: background-color 0.22s ease;
    }
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row.fi-clickable.ap-pressed {
    background-color: var(--gray-100);
    transition-duration: 0.06s;
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row.fi-clickable.ap-pressed {
    background-color: rgb(255 255 255 / 0.05);
}

/*
 * The smallest phones (below 375px, a 360px Android) take 0.375rem gutters:
 * four columns of a desk list (a client, a TEST pill, a status, an amount)
 * were 4px wider than the card.
 */
@media (max-width: 374px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell {
        padding-inline: 0.375rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row > .fi-ta-cell:first-of-type .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell:first-of-type {
        padding-inline-start: 0.5rem;
    }
}

/*
 * A list's phone row (owner, 2026-10-08), the two cells `PhoneRow` draws
 * below md: at the left the row's name in strong text (one line, cut with an
 * ellipsis, an inline pill such as TEST after it) over ONE muted line of who,
 * when and which document, never wrapping; at the right the figure over its
 * status pill. The primary cell takes the width the trailing one leaves, so
 * nothing pushes the table sideways. A two-line row is about 62px.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-pr-primary-cell {
        width: 100%;
        max-width: 0; /* lets the table cell shrink below its content */
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-pr-primary-cell .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-pr-primary-cell .fi-ta-text-item {
        display: block;
        min-width: 0;
        width: 100%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-pr-trailing-cell {
        width: 1%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-pr-primary-cell, .ap-pr-trailing-cell) .fi-ta-text {
        padding-block: 0.6875rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-line1,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-line2 {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-title,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-muted {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-title {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 500;
        color: var(--gray-950);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-muted,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-note {
        font-size: 0.75rem;
        line-height: 1rem;
        color: var(--gray-500);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-title {
        color: var(--color-white, #fff);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) :is(.ap-pr-muted, .ap-pr-note) {
        color: var(--gray-400);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr .ap-cell-badge {
        flex: none;
        white-space: nowrap;
    }

    /*
     * A trailing cell holding a badge alone (no amount) sizes to its
     * min-content, and Filament's badge label truncates to almost nothing
     * there, so a long label ("Awaiting signature") was cut at its left.
     */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-end .ap-cell-badge {
        min-width: max-content;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-end {
        align-items: flex-end;
        text-align: end;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-amount {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 500;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        color: var(--gray-950);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-amount {
        color: var(--color-white, #fff);
    }

    /* Several badges stack at the right edge, the status first (owner
       2026-11-05: a removal date under Active, not beside it). */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-badges {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-pr-note {
        white-space: nowrap;
    }
}

/*
 * A list whose bulk selection is a desk job (`->extraAttributes(['class' =>
 * 'ap-ta-bulk-desk-only'])`, the provider sheet queue, 2026-10-08): below md
 * no checkbox column, and no toolbar bar holding the bulk menu, which drew
 * an empty strip above the search box.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .ap-ta-bulk-desk-only .fi-ta-selection-cell,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-ta-bulk-desk-only .fi-ta-group-selection-cell,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-ta-bulk-desk-only .fi-ta-header-toolbar > .fi-ta-actions,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-ta-bulk-desk-only .fi-ta-selection-indicator {
        display: none;
    }
}

/*
 * An ad account's Balance history on a phone (owner, 2026-10-08): each
 * reading is one card of two lines, when and how much, then a muted source
 * and recorder line, and the note only when there is one
 * (AdAccountInfolist::phoneReading()). The desk's five entries show from md.
 */
:is(.fi-panel-admin, .fi-panel-provider) .fi-grid-col:has(> .fi-sc-component > .ap-bh-phone) {
    display: none;
}

@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page .fi-grid-col:has(> .fi-sc-component > .ap-bh-desk) {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-grid-col:has(> .fi-sc-component > .ap-bh-phone) {
        display: block;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-bh-phone :is(.ap-bh-line1, .ap-bh-muted, .ap-bh-note) {
        display: block;
        text-align: start;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-bh-line1 {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 500;
        color: var(--gray-950);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-bh-muted {
        font-size: 0.75rem;
        line-height: 1rem;
        color: var(--gray-500);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-bh-note {
        margin-top: 0.25rem;
        font-size: 0.8125rem;
        line-height: 1.125rem;
        color: var(--gray-700);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-bh-line1 {
        color: var(--color-white, #fff);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-bh-muted {
        color: var(--gray-400);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-bh-note {
        color: var(--gray-300);
    }
}

/*
 * Bottom tab bar (owner, 2026-10-12), the twin of the client panel's
 * ("Bottom tab bar" in mobile.css, which carries the measurements). Drawn by
 * `filament/admin/tab-bar` at LAYOUT_END: Home, Deposits, Ad accounts,
 * Top-ups and More, which opens the sidebar drawer. Below 1024px only, the
 * width under which Filament keeps no sidebar on screen; the topbar's menu
 * button stays, as on the client panel.
 *
 * z-index 25: above the page, below the topbar and drawer (30), popups (40),
 * the instant sheet (45) and toasts (50). It slides away while a popup or the
 * instant sheet is open and while a field has focus (`ap-typing`). The `.ap-
 * tabbar { display: none }` default for every width is mobile.css's.
 */
@media (max-width: 1023px) {
    :is(.fi-panel-admin, .fi-panel-provider) {
        --ap-tabbar-height: 3.5rem;
        --ap-tabbar-space: calc(var(--ap-tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .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 :is(.fi-panel-admin, .fi-panel-provider) .ap-tabbar {
        background-color: var(--gray-900);
        box-shadow: 0 -0.5px 0 var(--gray-800);
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        max-width: 8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 2.75rem;
        padding: 0.25rem 0.125rem 0;
        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 :is(.fi-panel-admin, .fi-panel-provider) .ap-tab {
        color: var(--gray-400);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab:active {
        opacity: 0.55;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab.ap-tab-active {
        color: var(--primary-600);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-tab.ap-tab-active {
        color: var(--primary-400);
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab-icon {
        display: flex;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab .ap-tab-icon-active,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab.ap-tab-active .ap-tab-icon-idle {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab.ap-tab-active .ap-tab-icon-active {
        display: flex;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.6875rem;
        line-height: 1rem;
        font-weight: 500;
    }

    /* The sidebar's count, on the icon's top right corner as a native tab
       bar draws it, in the sidebar badge's warning colour (dark ink on
       warning-500 reads; white on it does not). */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-tab-badge {
        position: absolute;
        top: 0.25rem;
        left: calc(50% + 0.5rem);
        min-width: 1.125rem;
        height: 1.125rem;
        padding-inline: 0.3125rem;
        border-radius: 9999px;
        background-color: var(--warning-500);
        color: var(--gray-950);
        box-shadow: 0 0 0 2px var(--color-white, #fff);
        font-size: 0.6875rem;
        line-height: 1.125rem;
        font-weight: 600;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-tab-badge {
        box-shadow: 0 0 0 2px var(--gray-900);
    }

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

    /* Toasts: bottom centre, 8px above the bar (or the safe area while the
       bar is away), newest nearest it, as on the client panel. Desktop keeps
       Filament's top right. */
    :is(.fi-panel-admin, .fi-panel-provider) .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;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .fi-no .fi-no-notification.fi-transition-enter-start {
        translate: 0 1.5rem;
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .fi-no .fi-no-notification:not(.fi-inline) {
        background-color: var(--gray-800);
    }
}

/*
 * A short history on an admin record page (App\Filament\Support\RecordLines,
 * owner 2026-10-12): one divided list, each line what happened over a muted
 * "when · kind" line, its figure at the right on one line. Every width.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-list {
    display: flex;
    flex-direction: column;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.625rem;
    text-align: start;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl + .ap-rl {
    border-top: 1px solid var(--gray-100);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-end {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--gray-950);
    overflow-wrap: anywhere;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-link {
    color: var(--primary-600);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-meta {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
    overflow-wrap: anywhere;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-end .ap-rl-meta {
    white-space: nowrap;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-note {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: var(--gray-700);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-figure {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--gray-950);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-positive {
    color: var(--success-600);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-rl + .ap-rl {
    border-top-color: rgb(255 255 255 / 0.05);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) :is(.ap-rl-title, .ap-rl-figure) {
    color: var(--color-white, #fff);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-rl-link {
    color: var(--primary-400);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-rl-meta {
    color: var(--gray-400);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-rl-note {
    color: var(--gray-300);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-rl-positive {
    color: var(--success-400);
}

/*
 * The record pages of ad accounts, account requests and account top-ups
 * (owner, 2026-10-12, compact admin view pages). On a phone their header
 * buttons drop the icon (the label says it, and "Switch Business Manager"
 * folded over three lines beside one), the More menu keeps its ellipsis,
 * and an odd last button takes the whole row instead of half of it.
 * Everywhere, an id marked `ap-entry-id` (Account ID, Business Manager)
 * never breaks mid-number.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) :is(.fi-resource-ad-accounts, .fi-resource-account-requests, .fi-resource-account-transactions).fi-resource-view-record-page .fi-header-actions-ctn > .fi-ac > .fi-btn > .fi-icon:not(.fi-loading-indicator) {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) :is(.fi-resource-ad-accounts, .fi-resource-account-requests, .fi-resource-account-transactions).fi-resource-view-record-page .fi-header-actions-ctn > .fi-ac > :last-child:nth-child(odd):not(:only-child) {
        grid-column: 1 / -1;
    }
}

/* The BM request page (2026-10-12) reads the same: Complete and More, no
   icons on a phone. */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-transfer-requests.fi-resource-view-record-page .fi-header-actions-ctn > .fi-ac > .fi-btn > .fi-icon:not(.fi-loading-indicator) {
        display: none;
    }
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-entry-id .fi-in-text-item {
    white-space: nowrap;
    overflow-wrap: normal;
}

/*
 * A record page's header buttons on a phone (owner, 2026-10-12): two share a
 * row, and at 16px with the button's own padding "Record payment" or
 * "Match to deposit" broke onto two lines beside its icon. A little less
 * padding and a 15px label keep a two-word verb on one line; the button stays
 * 44px tall.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page .fi-header-actions-ctn .fi-btn {
        padding-inline: 0.5rem;
        column-gap: 0.375rem;
        font-size: 0.9375rem;
    }
}

/*
 * A record line's note may carry a wallet address or a TXID (a platform
 * manager purchase's payments), one a line: it keeps its line breaks and
 * breaks anywhere rather than pushing the card wider than the page.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-rl-note {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/*
 * A phone sheet opens once and stays put (owner, 2026-10-12: "most of popups
 * jump up and down on admin mobile"). Filament's focus trap focuses the
 * popup's first field or button the moment it opens, while the sheet is
 * still a full screen below its place at the start of its slide. The window's
 * container (`.fi-modal-window-ctn`, overflow-y auto in Filament) scrolled
 * itself to show that field, so the sheet shot up past the top of the screen,
 * rode the slide up further and snapped back down when the slide ended and
 * the scroll range collapsed: 200 to 460px each way. A phone sheet has a
 * fixed full height and scrolls inside its own window, so the container never
 * needs to scroll: `clip` (not `hidden`, which a script or a focus can still
 * scroll) makes it impossible. Popups marked PhoneSheet turn that autofocus
 * off and never showed it; this covers every other admin popup too. Admin
 * only; the client panel is unchanged.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn {
        overflow: hidden;
        overflow: clip;
    }
}

/*
 * Action menus as a phone sheet (owner, 2026-10-12: "big action menus open as
 * a phone sheet"). Below 768px a dropdown that lists actions (its panel holds
 * `.fi-dropdown-list`: a page's "Manage client" or "More", a table row's
 * menu, the avatar menu) leaves the floating position Filament computes and
 * rises from the bottom edge: full width, every item listed with the group
 * dividers kept, 48px rows, at most three quarters of the screen and
 * scrolling inside itself, the home indicator cleared. Small menus too, so
 * every menu on a phone opens the same way and no item lands under a thumb
 * at the screen's edge. The filter dropdown holds a form, not a list, and
 * stays a dropdown, and so does any list inside a popup or a select field
 * (a select's options, owner 2026-10-12). Backdrop, header and close button: filament/admin/
 * menu-sheet (`ap-menu-sheet` on the panel, `ap-menu-sheet-open` on <html>).
 * The !important beats the inline left/top Filament's floating script writes
 * and Filament's own `max-width: 14rem !important`.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-dropdown-panel:has(> .fi-dropdown-list):not(.fi-modal *, .fi-select-input-ctn *) {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        /* Over the topbar (30) and the tab bar (25), under a popup (40), the
           instant sheet (45) and toasts. */
        z-index: 38 !important;
        width: 100% !important;
        /* Filament's max-width is !important inside its cascade layer, which
           outranks any unlayered !important; a min-width wins over it. */
        min-width: 100%;
        max-width: none !important;
        max-height: min(75dvh, calc(100dvh - 3rem)) !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -0.5rem 2rem rgb(0 0 0 / 0.18);
        animation: ap-menu-sheet-rise 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-dropdown-panel:has(> .fi-dropdown-list):not(.fi-modal *, .fi-select-input-ctn *) > .fi-dropdown-list {
        padding: 0.25rem 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-dropdown-panel:has(> .fi-dropdown-list):not(.fi-modal *, .fi-select-input-ctn *) .fi-dropdown-list-item {
        min-height: 3rem;
        padding-inline: 0.75rem;
        font-size: 1rem;
    }

    /* The sheet's header: a grab handle, the menu's name and a close button,
       pinned while the items scroll under it. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 3.5rem;
        padding: 0.875rem 0.5rem 0.375rem 1.25rem;
        background-color: #fff;
        border-radius: 1rem 1rem 0 0;
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-head {
        background-color: var(--gray-900);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-head::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 :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-head::before {
        background-color: var(--gray-600);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-950);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-title {
        color: #fff;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-close {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 9999px;
        color: var(--gray-500);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-close svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-close:active {
        background-color: var(--gray-100);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-close:active {
        background-color: rgb(255 255 255 / 0.05);
    }

    /* Beside the panel, in the same stacking context: dims the page, takes
       the tap that closes the menu and no pan gesture. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 37;
        background-color: rgb(3 7 18 / 0.5);
        touch-action: none;
        animation: ap-menu-sheet-fade 0.25s ease both;
    }

    /* The bottom tab bar steps aside, as it does for a popup. */
    html.ap-menu-sheet-open :is(.fi-panel-admin, .fi-panel-provider) .ap-tabbar {
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s 0.2s;
    }
}

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

@keyframes ap-menu-sheet-fade {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-dropdown-panel:has(> .fi-dropdown-list):not(.fi-modal *, .fi-select-input-ctn *),
    :is(.fi-panel-admin, .fi-panel-provider) .ap-menu-sheet-backdrop {
        animation: none;
    }
}

/*
 * A page heading with a shorter phone form (owner, 2026-10-12: Platform
 * managers reads "Managers" on a phone): ListPlatformManagerPurchases::
 * getHeading() draws both spans; only one shows at a time.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-heading-phone {
    display: none;
}

@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .ap-heading-desk {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-heading-phone {
        display: inline;
    }
}