/*
 * Compact rows on every admin list (owner, 2026-09-23 for Access requests,
 * 2026-10-08 for every list): Filament pads a text cell 1rem top and bottom,
 * which puts a two-line cell (value + description) at 81px. 0.625rem keeps
 * both lines and the row lands near 69px, a one-line row near 57px. The row
 * menu's cell takes no padding of its own; its trigger keeps its tap size.
 * From md up; admin-mobile.css sizes a phone's rows. The provider dashboard
 * shares these rules (`:is(.fi-panel-admin, .fi-panel-provider)`, 2026-10-15).
 *
 * Registered through FilamentAsset (AppServiceProvider::boot) and published by
 * `php artisan filament:assets`, exactly like skeleton.css beside it.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row > .fi-ta-cell .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row > .fi-ta-cell .fi-ta-actions {
        padding-block: 0.625rem;
    }

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

/*
 * The access request view on a phone (owner, 2026-09-23): Filament's 1.5rem
 * section padding left little room for the values on a 390px screen.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-access-requests.fi-resource-view-record-page .fi-section-header,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-access-requests.fi-resource-view-record-page .fi-section-content {
        padding: 1rem;
    }
}

/*
 * Page header actions on a phone (owner, 2026-09-23): Approve, Reject and the
 * rest were 36px chips. Below md they become 44px buttons, the minimum
 * comfortable tap height, all the same width: a grid of equal columns at
 * least 10rem wide, so two actions share a row on a phone and a third wraps
 * to the next. A label too long for its column breaks onto two lines inside
 * the button, and the row grows so its buttons stay the same height.
 * Every admin page header.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn {
        width: 100%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn > .fi-ac {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
        align-items: stretch;
        width: 100%;
    }

    /* A dropdown's wrappers pass the row's height down to their trigger. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn > .fi-ac > *,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn > .fi-ac .fi-dropdown-trigger {
        min-width: 0;
        height: 100%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-header-actions-ctn .fi-btn {
        width: 100%;
        height: 100%;
        justify-content: center;
        min-height: 2.75rem;
        font-size: 1rem;
        text-wrap: balance;
        line-height: 1.25rem;
    }
}

/*
 * A record page with many header actions on a desk (the ad account page has
 * up to seven): Filament keeps title and actions on one line and the actions
 * from shrinking, so the last buttons ran off the right edge, out of reach.
 * The actions take their own line under the title instead, and wrap.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page .fi-header {
        flex-wrap: wrap;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-view-record-page .fi-header-actions-ctn {
        flex-shrink: 1;
        min-width: 0;
    }
}

/*
 * Column widths for the admin lists on a desk (owner, 2026-10-02: "desktop
 * should also be optimised"), the admin twin of the client panel's
 * tables.css; read the comment there for the measurements behind it.
 *
 * At md (768px) and up the figures (every right-aligned column,
 * `->alignEnd()`) and the row actions are exactly as wide as their content,
 * together at the right, and the leading columns (who, what, where it
 * stands, when) share the rest. A client's name and any column marked with
 * `TableColumns::fold()` may fold at its spaces instead of holding the table
 * open on one line: unlike the client panel there is no fixed measure, so
 * the browser folds those columns only as far as the width runs out (a
 * long run with no space, an id, never breaks for that), up to 22rem when
 * there is room to spare. A column its author `->wrap()`ped folds the same
 * way. At 1280px, with the sidebar open, that keeps the desk's queues inside
 * their card while a wide screen reads each row on one line.
 */

@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th.fi-ta-header-cell.fi-align-end,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell {
        width: 1%;
        white-space: nowrap;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-fold .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .fi-ta-text.fi-wrapped {
        white-space: normal;
        overflow-wrap: break-word;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-fold .fi-ta-text {
        max-width: 22rem;
    }

    /* Filament puts nowrap on the item itself too. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-fold .fi-ta-text-item,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-fold .fi-ta-text-description {
        white-space: normal;
        overflow-wrap: break-word;
    }
}

/*
 * Remaining on the ad accounts list (owner, 2026-10-13): the figure on one
 * line, and under it, small and on one line too, the reading's date
 * ("13 Oct, 05:49") or a dead account's short held note.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-remaining .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-remaining .fi-ta-text-item,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-remaining .fi-ta-text-description {
        white-space: nowrap;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-remaining .fi-ta-text-description {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

/*
 * Below 2xl the words standing in for a missing figure ("Everything
 * available") fold at their space, so they never hold a figure column wider
 * than its figures.
 */
@media (min-width: 768px) and (max-width: 1535px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.fi-align-end .fi-ta-placeholder {
        white-space: normal;
    }
}

/*
 * A timestamp column (`TableColumns::when()`, "06 Oct, 11:55") keeps date
 * and time on one line from xl (1280px) up (owner, 2026-10-08: dates folding
 * to two lines made 81px rows). On a tablet (768px to 1279px) the time folds
 * under its date, a date's width instead of a timestamp's.
 */
@media (min-width: 768px) and (max-width: 1279px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-when .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-when .fi-ta-text-item {
        white-space: normal;
    }

    /* Room for "06 Oct, 11:55" on one line at 13px, so only another
       year's longer date folds, and every row folds alike. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-when .fi-ta-text {
        width: min-content;
        min-width: 6.75rem;
    }
}

@media (min-width: 1280px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-col-when, .ap-col-day) .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-col-when, .ap-col-day) .fi-ta-text-item {
        white-space: nowrap;
    }
}

/*
 * The client column (`ClientName::column()`, owner 2026-10-08): it held
 * 285px to 369px of a desk for one name. At most 16rem and two lines, cut
 * with an ellipsis after that (the full name is the tooltip); the company
 * line under an internal name keeps to one line. The TEST pill
 * (`testBadge: true`) sits right after the name and never folds.
 */
@media (min-width: 768px) {
    /* 16rem of name plus the cell's own gutters. The heading's width asks
       the table to give any room to spare to the other columns. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-client .fi-ta-text {
        max-width: 17.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-col-client {
        width: 17.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-client .fi-ta-text-item {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-client .fi-ta-text-description {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* A name with no company line is the clamped item and the padded text
       box at once: its padding showed the top of a third line. Margin
       instead, so the clamp cuts clean. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-row > .fi-ta-cell.ap-col-client .fi-ta-text-item.fi-ta-text {
        padding-block: 0;
        margin-block: 0.625rem;
    }
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .ap-cell-badge {
    display: inline-flex;
    vertical-align: 0.0625rem;
    white-space: nowrap;
}

/* A document number or marker never breaks at its hyphens. */
:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-number .fi-ta-text-item,
:is(.fi-panel-admin, .fi-panel-provider) .ap-pr-token {
    white-space: nowrap;
}

/*
 * A second-rank column (`TableColumns::wide()`) shows from 120rem (1920px)
 * only: a second date, a provider id, a note. It is always on the record's
 * page. Filament's own `visibleFrom()` breakpoints stop at 2xl (96rem),
 * where the page is still capped at 80rem, so up to 120rem a list keeps the
 * laptop's columns and from there takes the whole width (below).
 */
:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-col-wide,
:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-wide {
    display: none;
}

@media (min-width: 120rem) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-col-wide,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-wide {
        display: table-cell;
    }
}

/* A third-rank column (`TableColumns::widest()`): from 150rem (2400px). */
:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-col-widest,
:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-widest {
    display: none;
}

@media (min-width: 150rem) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-col-widest,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-widest {
        display: table-cell;
    }
}

/*
 * A description standing in for second-rank columns from md to 120rem
 * (`TableColumns::belowWide()`): one line per part, gone from 120rem up
 * where those columns show. A phone has its own cell for the row.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-below-wide {
    display: block;
}

@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-text-description:has(> .ap-below-wide) {
        display: none;
    }
}

@media (min-width: 120rem) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-text-description:has(> .ap-below-wide) {
        display: none;
    }
}

/*
 * Slimmer gutters between columns on a laptop (768px to 2xl): 0.625rem each
 * side instead of 0.75rem, and 1rem at the table's edges instead of 1.5rem.
 * Across nine columns that is the 50px a 1280px screen with the sidebar open
 * was short of. Wider screens keep Filament's spacing.
 */
@media (min-width: 768px) and (max-width: 1535px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-header-cell,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-cell .fi-ta-text {
        padding-inline: 0.625rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th:nth-child(1 of :not(.md\:fi-hidden)),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td:nth-child(1 of :not(.md\:fi-hidden)) .fi-ta-text {
        padding-inline-start: 1rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th:nth-last-child(1 of :not(.md\:fi-hidden)),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td:nth-last-child(1 of :not(.md\:fi-hidden)) .fi-ta-text {
        padding-inline-end: 1rem;
    }
}

/*
 * A list's first and last columns line up with their headings (owner,
 * 2026-10-08: at 1440px a first cell's text started 12px right of its
 * heading). Filament pads a row's first and last cell 0.75rem on top of the
 * text's own padding, which its headings do not have, and counts a phone
 * twin (`PhoneRow`, hidden from md) as the first or last column. From md up
 * the cells lose that padding and the edge goes on the first and last
 * column a desk actually draws: 1.5rem from 2xl (Filament's heading edge),
 * 1rem on a laptop and 0.75rem on a tablet (below).
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > .fi-ta-cell:not(:has(> .fi-ta-actions)) {
        padding-inline: 0;
    }
}

@media (min-width: 1536px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th:nth-child(1 of :not(.md\:fi-hidden)),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td:nth-child(1 of :not(.md\:fi-hidden)) .fi-ta-text {
        padding-inline-start: 1.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th:nth-last-child(1 of :not(.md\:fi-hidden)),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td:nth-last-child(1 of :not(.md\:fi-hidden)) .fi-ta-text {
        padding-inline-end: 1.5rem;
    }
}

/*
 * A list takes the whole width of a big screen (120rem, 1920px, and up), where
 * its second-rank columns appear; a record's page keeps Filament's 80rem.
 */
@media (min-width: 120rem) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-main:has(.fi-resource-list-records-page) {
        max-width: none;
    }
}

/*
 * Tablets (owner, 2026-10-02: "tablet widths still scroll sideways"), md to
 * just under xl (768px to 1279px). The table has 720px at 768px and only
 * 640px at 1024px, where the sidebar opens beside it, against the 700px to
 * 860px the lists needed. The phone's tightenings come up to here: a 1rem
 * page gutter instead of 1.5rem/2rem, 13px type in cells and headings,
 * 0.5rem between columns and 0.75rem at the table's edges, the sort chevron
 * only on the column the list is sorted by (the heading still sorts), and
 * no gutters of its own for the TEST badge's heading-less column. What still
 * did not fit goes under a neighbouring column (`TableColumns::desk()`) or
 * into the phone's two cells (`PhoneRow`). From xl
 * (1280px) up nothing here applies.
 */
@media (min-width: 768px) and (max-width: 1279px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-main:has(.fi-resource-list-records-page) {
        padding-inline: 1rem;
    }

    :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-table .fi-ta-header-cell,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-cell .fi-ta-text {
        padding-inline: 0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th:nth-child(1 of :not(.md\:fi-hidden)),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td:nth-child(1 of :not(.md\:fi-hidden)) .fi-ta-text {
        padding-inline-start: 0.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table > thead > tr > th:nth-last-child(1 of :not(.md\:fi-hidden)),
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td:nth-last-child(1 of :not(.md\:fi-hidden)) .fi-ta-text {
        padding-inline-end: 0.75rem;
    }

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

    :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;
    }

    :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;
    }

    /* A pill ("Awaiting payment") and a heading ("Sheet status") may fold
       at their spaces, only as far as the width runs out; a figure's
       heading keeps its one line (above). */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:not(.fi-align-end) .fi-badge,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell:not(.fi-align-end) .fi-ta-header-cell-label {
        white-space: normal;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:not(.fi-align-end) .fi-badge {
        text-align: center;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell:not(.fi-align-end, .fi-ta-actions-header-cell) {
        white-space: normal;
    }

}

/*
 * A column a tablet does without (`TableColumns::desk()`) and the lines that
 * stand in for it under a neighbour (`TableColumns::belowDesk()`), shown from
 * 768px to 1279px only. A description holding nothing but such lines goes
 * away elsewhere.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-line {
    display: block;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-below-desk {
    display: none;
}

@media (min-width: 768px) and (max-width: 1279px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-col-desk,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-desk {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-below-desk {
        display: block;
    }

    /* Part of a line a tablet does without (an id after a name). */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .ap-desk-only {
        display: none;
    }
}

@media (max-width: 767px), (min-width: 1280px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-text-description:has(> .ap-below-desk):not(:has(> :not(.ap-below-desk))) {
        display: none;
    }
}

/*
 * Notes under a status (`ap-col-notes`, Business Manager requests): one line
 * each, cut with an ellipsis at a set width (the whole note on hover), so a
 * long note never widens the column past its neighbours.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-notes .ap-line {
        max-width: 16rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-notes .ap-line {
        max-width: 10rem;
    }
}

/* A "from → to" pair of Business Manager ids on one line from 1440px up
   (below that the table has no room for it and would scroll). */
@media (min-width: 90rem) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell .ap-bm-path {
        white-space: nowrap;
    }
}

/*
 * A list page's chrome (owner, 2026-10-08). The "{Resource} > List" trail
 * above a list's title said nothing the title and the sidebar do not; a
 * record's view and edit pages keep theirs. The All / Needs us tabs sat
 * centred in a 60px band of their own: they start at the left, in a compact
 * pill row that scrolls sideways on a phone when there are many, closer to
 * the table they filter.
 */
:is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header .fi-breadcrumbs {
    display: none;
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-sc-tabs {
    align-items: flex-start;
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-sc-tabs > .fi-tabs {
    margin-inline: 0;
    padding: 0.25rem;
    gap: 0.125rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-sc-tabs > .fi-tabs::-webkit-scrollbar {
    display: none;
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-sc-tabs > .fi-tabs .fi-tabs-item {
    flex: none;
    padding: 0.375rem 0.75rem;
}

@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-sc-tabs {
        margin-bottom: -1rem;
    }
}

@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-sc-tabs {
        margin-bottom: -0.25rem;
    }

    /* Still a 44px tap (admin-mobile.css), no taller. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-sc-tabs > .fi-tabs .fi-tabs-item {
        min-height: 2.75rem;
        padding: 0 0.875rem;
    }
}

/*
 * A row's bulk checkbox sits under its heading's (2026-10-08): the rule above
 * that takes a desk cell's own padding off left the checkbox cell with none,
 * 16px left of the heading's box. Same edges as the heading at each width.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td.fi-ta-cell.fi-ta-selection-cell {
        padding-inline: 0.75rem;
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td.fi-ta-cell.fi-ta-selection-cell {
        padding-inline-start: 1rem;
    }
}

@media (min-width: 1536px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-table .fi-ta-row > td.fi-ta-cell.fi-ta-selection-cell {
        padding-inline-start: 1.5rem;
    }
}

/*
 * The column picker lists only the columns a person can switch (2026-10-09
 * review): Filament also draws every fixed column as a greyed, ticked box,
 * and the phone twins made "Balance" or "Total due" appear twice.
 */
:is(.fi-panel-admin, .fi-panel-provider) .fi-ta-col-manager-item:has(> .fi-ta-col-manager-label input:disabled) {
    display: none;
}

/*
 * The tabs in the search row (owner decision 2026-10-12). Below md a list
 * page's All / Needs us (or All / Stock) pill row cost about 70px of height
 * above the table card for two words. The same tabs are drawn again inside
 * the table's search row (App\Filament\Support\PhoneTabs, from the
 * TOOLBAR_SEARCH_BEFORE hook) as a compact segmented switch at the row's
 * start (the search box folded behind a magnifier, below), and the pill row is hidden, but only on a page that drew the
 * switch, so a table with no toolbar keeps its tabs. Each segment is a 44px
 * tap; the count keeps its warning badge and is never cut. From md up the
 * switch is not drawn and the pill row is as before.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-phone-tabs {
    display: none;
}

@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page:has(.ap-phone-tabs) .fi-grid-col:has(> .fi-sc-component > .fi-sc-tabs[id$="resourceTabs"]) {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:not(.fi-ta-actions):has(> .ap-phone-tabs) {
        flex-wrap: wrap;
    }

    /* The switch takes the row's free width left of the magnifier and the
       funnel, each segment an equal share (owner, 2026-10-12: "all/stock
       switcher should be wider so it can be clicked easily on mobile"). */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-phone-tabs {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        align-items: stretch;
        border-radius: 0.5rem;
        outline: 1px solid var(--gray-200);
        outline-offset: -1px;
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-phone-tabs {
        outline-color: rgb(255 255 255 / 0.1);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-phone-tabs-item {
        display: inline-flex;
        flex: 1 1 0;
        min-width: 5.5rem;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        min-height: 2.75rem;
        padding: 0 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
        white-space: nowrap;
        color: var(--gray-500);
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .ap-phone-tabs-item.ap-active {
        background: var(--gray-100);
        color: var(--primary-700);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-phone-tabs-item.ap-active {
        background: rgb(255 255 255 / 0.1);
        color: var(--primary-400);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-phone-tabs-badge {
        flex: none;
        width: max-content;
    }
}

/*
 * The search behind a magnifier (owner decision 2026-10-12: "do not show the
 * whole search bar on phone, just an icon that opens the full search bar").
 * On a list that draws the tab switch above, the search box folds into a
 * 44px magnifier beside the funnel below md (PhoneTabs::renderSearchToggle):
 * tabs on the left, magnifier and funnel on the right. Tapping it opens the
 * box across the whole row, tabs and funnel hidden for that moment, with an
 * X that clears the term and folds it back; leaving an empty box folds it
 * too. A term that is set (typed and left, or back from a reload or the
 * ?tableSearch= link) keeps the box open on a line of its own under the
 * tabs and funnel, so the list never looks unfiltered while it is and the
 * tabs stay a tap away. Untabbed lists keep their full search box; from md
 * up nothing changes.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle {
    display: none;
}

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

    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle > button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.5rem;
        color: var(--gray-400);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle > button:hover,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle > button:focus-visible {
        color: var(--gray-500);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle > button {
        color: var(--gray-500);
    }

    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle > button:hover,
    .dark :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle > button:focus-visible {
        color: var(--gray-400);
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Folded: the magnifier, no box, no X. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .ap-search-toggle) > .fi-ta-search-field,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle > .ap-search-toggle-clear {
        display: none;
    }

    /* A term is set and the box is not in use: the box and its X on their
       own line, under the tabs and the funnel. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .fi-ta-search-field input:not(:placeholder-shown)):has(> .ap-search-toggle:not(.ap-open)) > .fi-ta-search-field {
        display: block;
        order: 10;
        flex: 1 1 calc(100% - 3.25rem);
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .fi-ta-search-field input:not(:placeholder-shown)) > .ap-search-toggle:not(.ap-open) {
        order: 11;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .fi-ta-search-field input:not(:placeholder-shown)) > .ap-search-toggle > .ap-search-toggle-open {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .fi-ta-search-field input:not(:placeholder-shown)) > .ap-search-toggle > .ap-search-toggle-clear {
        display: flex;
    }

    /* Open: the box across the whole row, then its X; nothing else. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .ap-search-toggle.ap-open) > :not(.fi-ta-search-field):not(.ap-search-toggle) {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .ap-search-toggle.ap-open) > .fi-ta-search-field {
        display: block;
        order: 0;
        flex: 1 1 0;
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle.ap-open {
        order: 1;
    }

    /* The X beside the box clears it; WebKit's own clear button inside the
       box would be a second one. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-toolbar > div:has(> .ap-search-toggle) > .fi-ta-search-field input::-webkit-search-cancel-button {
        display: none;
        -webkit-appearance: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle.ap-open > .ap-search-toggle-open {
        display: none;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-search-toggle.ap-open > .ap-search-toggle-clear {
        display: flex;
    }
}

/*
 * A list page's header actions sit level with its title on a desk
 * (2026-10-12, owner: "Manage price list button is a bit off placed").
 * Filament pushes the actions 28px down to line up with a title under its
 * breadcrumbs, and a list page hides those (above), so the button hung 14px
 * below the title's middle.
 */
@media (min-width: 640px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-resource-list-records-page .fi-header-has-breadcrumbs .fi-header-actions-ctn {
        margin-top: 0;
    }
}

/*
 * An id the desk copies from a table cell (App\Filament\Support\CopyId,
 * owner 2026-10-15): the id, then a small copy icon. A tap on either copies
 * it and does not open the row.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-copy-id {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-copy-id-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 120ms ease;
}

/*
 * A long value copied the same way (a landing page address,
 * App\Filament\Support\WhitelistRequestPages): it folds anywhere, the icon
 * riding at the end of its last line.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-copy-id.ap-copy-id-wrap {
    display: inline;
    overflow-wrap: anywhere;
    word-break: break-word;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-copy-id-wrap .ap-copy-id-icon {
    display: inline-block;
    vertical-align: -0.125rem;
    margin-left: 0.25rem;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-wl-url {
    display: block;
    min-width: 0;
    max-width: 100%;
}

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

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

:is(.fi-panel-admin, .fi-panel-provider) .ap-wl-open svg {
    width: 0.875rem;
    height: 0.875rem;
}

/*
 * The landing pages and facts on a phone (App\Filament\Support\
 * WhitelistRequestPages, owner request 2026-10-22: compact and even). The
 * record page's settings rows (admin-mobile.css) pad every entry and divide
 * the section's items, and the Fieldset and Grid keep their desk gaps, which
 * together left ~50px around each address. Here: boxes 1rem apart, a slimmer
 * box, 0.625rem between an address and its countries, the facts as plain
 * rows. The repeated classes outrank admin-mobile.css's view page rules
 * whichever file loads last. The desk (768px and up) is untouched.
 */
@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .ap-wl-pages.ap-wl-pages .fi-section-content.fi-section-content.fi-sc-has-gap {
        padding: 0.75rem;
        row-gap: 1rem;
    }

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

    :is(.fi-panel-admin, .fi-panel-provider) .ap-wl-page.ap-wl-page.fi-fieldset {
        padding: 0.375rem 0.75rem 0.75rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-wl-page.ap-wl-page > .fi-grid.fi-sc-has-gap {
        row-gap: 0.625rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-wl-page.ap-wl-page .fi-in-entry.ap-entry-stacked {
        padding-block: 0;
    }

    /* In the Approve popup: the boxes 1rem apart, not the form's 1.5rem. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-modal-content .fi-grid-col:has(> .fi-sc-component > .ap-wl-page) + .fi-grid-col:has(> .fi-sc-component > .ap-wl-page) {
        margin-top: -0.5rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-wl-facts.ap-wl-facts > .fi-grid.fi-sc-has-gap {
        row-gap: 0;
    }
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-copy-id:hover .ap-copy-id-icon,
:is(.fi-panel-admin, .fi-panel-provider) .ap-copy-id:focus-visible .ap-copy-id-icon {
    opacity: 1;
}

/*
 * A landing page in a table cell (App\Filament\Support\LandingPageLink,
 * owner 2026-10-16): one line in the link colour, the whole address on hover.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-landing-link {
    white-space: nowrap;
    color: var(--primary-600);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-landing-link:hover {
    text-decoration: underline;
}

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

/*
 * The answer under a whitelist request's status (owner 2026-10-16): one line
 * each, cut with an ellipsis (the whole note on hover), so a long provider
 * note never widens the table.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-answer .ap-line {
        max-width: 10.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* Its details lines (countries and timezone, the BM) the same way, wider. */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-details .ap-line {
        max-width: 12.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/*
 * Whitelist requests hold four columns and the row menu on a 1280px laptop
 * with the sidebar open (owner 2026-10-16: the menu was pushed out of view),
 * so its client column takes 15rem rather than 17.5rem and its landing page
 * link stops at the details' measure.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-client.ap-col-client-narrow .fi-ta-text {
        max-width: 15rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-col-client.ap-col-client-narrow {
        width: 15rem;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-details .ap-landing-link {
        display: inline-block;
        max-width: 12.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}

/* An id line there is never cut: the other lines give way to it. */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-col-details, .ap-col-answer) .ap-line.ap-line-id {
        max-width: none;
        overflow: visible;
    }

    /* A whitelist landing page's countries wrap under it (owner decision
       2026-10-22: countries per landing page), every code in view. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell.ap-col-details .ap-line.ap-line-wrap {
        white-space: normal;
        overflow: visible;
    }
}

/*
 * The provider's whitelist requests list (owner request 2026-10-23): compact,
 * one line a row, every column at its own measure, a long value cut with an
 * ellipsis (whole on hover, and on the request's page). The landing page
 * takes what is left, so the row fills the table with no wide empty column.
 */
@media (min-width: 768px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-wl-request, .ap-wl-day, .ap-wl-timezone) .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-wl-request, .ap-wl-day, .ap-wl-timezone) .fi-ta-text-item,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-wl-request, .ap-wl-day, .ap-wl-timezone) .fi-ta-text-description {
        white-space: nowrap;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell:is(.ap-wl-request, .ap-wl-day, .ap-wl-timezone, .ap-wl-status) {
        width: 1%;
        white-space: nowrap;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-header-cell.ap-wl-countries {
        width: 18%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-wl-landing, .ap-wl-countries) .fi-ta-text,
    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-wl-landing, .ap-wl-countries) .fi-ta-text-item {
        min-width: 0;
        max-width: 100%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .fi-ta-cell:is(.ap-wl-landing, .ap-wl-countries) .ap-line {
        max-width: 16rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* "Spend" and the info icon naming the period (2026-11-02, the Clients
   list; `SpendPeriodFilter::spendHeading()`, as in the client panel). */
:is(.fi-panel-admin, .fi-panel-provider) .ap-th-hint-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-th-hint {
    display: inline-flex;
    align-items: center;
    color: var(--gray-400);
    cursor: help;
    border-radius: 9999px;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-th-hint:hover,
:is(.fi-panel-admin, .fi-panel-provider) .ap-th-hint:focus-visible {
    color: var(--gray-600);
    outline: none;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-th-hint .ap-th-hint-icon {
    width: 1rem;
    height: 1rem;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * The provider page's Deposit popup (owner 2026-11-03, ProviderActions::
 * requestDeposit): "Pay to" wallets with a copy button, the card top-ups as
 * compact one-line rows in a scrolling box, and the live summary whose
 * figures copy bare. Mark paid shares the "Pay to" block.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-heading {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--gray-950);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-heading,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-heading {
    color: #fff;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-wallet {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin-top: 0.25rem;
    padding: 0.375rem 0.25rem 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    outline: 1px solid var(--gray-200);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-wallet,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-wallet {
    background: rgb(255 255 255 / 0.05);
    outline-color: rgb(255 255 255 / 0.1);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-chain {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-address {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-none {
    font-size: 0.875rem;
    color: var(--gray-500);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-block: -0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--gray-500);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy:hover,
:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy:focus-visible {
    color: var(--primary-600);
    background: var(--gray-100);
    outline: none;
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy:hover,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-copy:hover,
.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy:focus-visible,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-copy:focus-visible {
    color: var(--primary-400);
    background: rgb(255 255 255 / 0.05);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy svg {
    width: 1rem;
    height: 1rem;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy .ap-dep-copy-tick {
    color: var(--success-600);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-copy-gap {
    flex: 0 0 auto;
    width: 2.25rem;
}

/* The top-ups: one row each, a scrolling box past about a dozen. Filament
   lays the options out in CSS columns, which a capped height would spill
   sideways, so they are plain blocks here. */
:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups.fi-fo-checkbox-list-options {
    display: block;
    columns: auto;
    gap: 0;
    max-height: min(22rem, 45vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
    outline: 1px solid var(--gray-200);
}

/* Clear of "Select all" above it: Filament's column layout pulls the list
   up with -mt-4, so this needs the extra class to win. */
:is(.fi-panel-admin, .fi-panel-provider) .fi-fo-checkbox-list .ap-dep-topups.fi-fo-checkbox-list-options {
    margin-top: 0.5rem;
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups.fi-fo-checkbox-list-options,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-topups.fi-fo-checkbox-list-options {
    outline-color: rgb(255 255 255 / 0.1);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups .fi-fo-checkbox-list-option-ctn {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--gray-100);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups .fi-fo-checkbox-list-option-ctn,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-topups .fi-fo-checkbox-list-option-ctn {
    border-top-color: rgb(255 255 255 / 0.05);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups .fi-fo-checkbox-list-option-ctn:first-child {
    border-top: 0;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups .fi-fo-checkbox-list-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.75rem;
    cursor: pointer;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups .fi-fo-checkbox-list-option:has(input:disabled) {
    cursor: default;
    opacity: 0.6;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups .fi-fo-checkbox-list-option-text {
    flex: 1 1 auto;
    min-width: 0;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-topups .fi-fo-checkbox-list-option-label {
    display: block;
    font-weight: 400;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-opt {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-opt-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-opt-amount {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-opt-meta {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The summary: the total first and larger, then its parts. */
:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-summary {
    padding: 0.5rem 0.25rem 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--gray-50);
    outline: 1px solid var(--gray-200);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-summary,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-summary {
    background: rgb(255 255 255 / 0.05);
    outline-color: rgb(255 255 255 / 0.1);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-row {
    color: var(--gray-400);
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row-label {
    flex: 1 1 auto;
    min-width: 0;
}

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

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row-value {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row-main {
    min-height: 2.5rem;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-950);
    font-weight: 600;
}

.dark :is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row-main,
:is(.fi-panel-admin, .fi-panel-provider):where(.dark *) .ap-dep-row-main {
    border-bottom-color: rgb(255 255 255 / 0.1);
    color: #fff;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row-main:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-row-main .ap-dep-row-value {
    font-size: 1.125rem;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-dep-currency {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
}