/*
 * Column widths for the CLIENT panel's tables on a desk (owner, 2026-10-02:
 * "do all tables").
 *
 * Registered through FilamentAsset (AppServiceProvider::boot) and published by
 * `php artisan filament:assets`, exactly like mobile.css beside it.
 *
 * Filament's tables lay out with `table-layout: auto`, which hands spare width
 * out to every column in proportion to how long its content is, the figures
 * included: on the Deposits list at 1440px that left 107px between Requested
 * and Credit and 24px between Credit and Total due.
 *
 * The rule here, at md (768px) and up: the figures (every right-aligned
 * column, `->alignEnd()`) and the row actions are exactly as wide as their
 * content, so they sit together at the right like the columns of a statement,
 * and the leading columns (what the row is, where it stands, its dates) share
 * the rest of the width between them, the browser handing each a share in
 * proportion to its own width. No single gap swallows the spare width (owner,
 * 2026-10-02: one big gap "looks very empty"), and none falls between two
 * figures. Each table orders its columns to match: identity, status, dates,
 * then the figures.
 *
 * A long text value marked with `ColumnWidths::fold()` (an account name or
 * label, a timezone, an email address) folds at `--ap-wrap-measure` instead of
 * holding the table open on one line: as wide as it needs up to the measure,
 * folding past it. That measure is what keeps those columns from pushing the
 * table sideways at laptop widths. A column whose author called `->wrap()`
 * (the ledger's description, a note) folds wherever the width runs out.
 *
 * Everything here is `.fi-panel-app` and md and up; phones keep the layout
 * mobile.css gives them, untouched.
 */
.fi-panel-app {
    --ap-wrap-measure: 10rem;
}

@media (min-width: 80rem) {
    .fi-panel-app {
        --ap-wrap-measure: 12rem;
    }
}

@media (min-width: 768px) {
    /*
     * 1% asks for no share of the spare width; the browser still never draws
     * a column narrower than its content. The header keeps to one line, or a
     * two-word label over a short figure ("Total due" over "$0.00") would fold.
     */
    .fi-panel-app .fi-ta-table > thead > tr > th.fi-ta-header-cell.fi-align-end,
    .fi-panel-app .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell {
        width: 1%;
        white-space: nowrap;
    }

    .fi-panel-app .fi-ta-cell.ap-col-fold .fi-ta-text,
    .fi-panel-app .fi-ta-cell .fi-ta-text.fi-wrapped {
        white-space: normal;
        /*
         * A folded line breaks at a space, and inside a run with no space (an
         * email address, a nineteen-digit platform id in brackets) only where
         * nothing else fits.
         */
        overflow-wrap: break-word;
    }

    .fi-panel-app .fi-ta-cell.ap-col-fold .fi-ta-text {
        width: max-content;
        max-width: calc(var(--ap-wrap-measure) + 1.5rem);
    }
}

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

/*
 * Several row actions show as icons below xl (owner, 2026-10-02).
 *
 * Between md and xl (768 to 1279px, the sidebar open from 1024) a row of
 * "View", "Top up", "Withdraw" was 263px, a third of the table, and on the
 * ad account list it alone pushed the table past the screen. The phone has
 * shown these as icons since the mobile audit; a narrow desk now does the
 * same, but only where a row carries more than one action. A lone "View"
 * keeps its word. The label is clipped rather than removed, so it is still the
 * button's accessible name.
 */
@media (min-width: 768px) and (max-width: 1279px) {
    .fi-panel-app .fi-ta-actions:has(> :nth-child(2)) .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%);
    }

    .fi-panel-app .fi-ta-actions:has(> :nth-child(2)) .fi-ac-link-action:has(.fi-icon) {
        min-width: 2.25rem;
        min-height: 2.25rem;
        align-items: center;
        justify-content: center;
    }
}

/*
 * The column picker lists only columns a client can switch (owner,
 * 2026-10-02: "there are columns that cannot be removed, are they
 * necessary?"). Filament lists every column and greys out the fixed ones;
 * with a table's phone and desktop twins both listed ("Account" and "Status"
 * twice on Top-ups) the picker was mostly locked rows. Every size.
 */
.fi-panel-app .fi-ta-col-manager-item:has(input[type='checkbox']:disabled) {
    display: none;
}

/*
 * Filters that sit above a list (Invoices, Ledger) on a phone, compact
 * (owner, 2026-10-02): the panel's padding, the gap between its rows and
 * the labels' space shrink, so From / Until / Type / Status take two short
 * rows under a slim "Filters  Reset" line instead of 300px above the first
 * document.
 */
@media (max-width: 767px) {
    .fi-panel-app .fi-ta-filters-above-content-ctn {
        padding: 0.75rem 1rem;
    }

    .fi-panel-app .fi-ta-filters-above-content-ctn .fi-ta-filters {
        row-gap: 0.625rem;
    }

    .fi-panel-app .fi-ta-filters-above-content-ctn .fi-ta-filters-heading {
        font-size: 0.875rem;
    }

    .fi-panel-app .fi-ta-filters-above-content-ctn .fi-sc-has-gap {
        row-gap: 0.625rem;
        column-gap: 0.625rem;
    }

    .fi-panel-app .fi-ta-filters-above-content-ctn .fi-fo-field-label-ctn,
    .fi-panel-app .fi-ta-filters-above-content-ctn .fi-fo-field-wrp-label {
        margin-bottom: -0.25rem;
    }

    .fi-panel-app .fi-ta-filters-above-content-ctn .fi-fo-field-label-content {
        font-size: 0.8125rem;
        font-weight: 400;
        color: var(--gray-500);
    }
}

/*
 * The ad accounts list's one action a row (Top up or Replace) plus its menu
 * (owner, 2026-10-05) sit at the table's right edge, the menu last on every
 * row, so the action beside it lines up from row to row. No minimum width
 * (owner 2026-11-02: it left an empty band after the menu); the columns
 * share the whole width.
 */
@media (min-width: 768px) {
    .fi-panel-app .fi-resource-ad-accounts.fi-resource-list-records-page .fi-ta-actions,
    .fi-panel-app .fi-resource-end-clients .fi-ta-actions {
        justify-content: flex-end;
    }
}

/*
 * The one muted line under an ad account's name (owner 2026-11-02): the
 * full account ID, never shortened, and a small copy icon right after it
 * (`partials/copy-inline.blade.php`). The icon is no taller than the text,
 * so the row grows by this one line only. The line does not fold, so the
 * Name column is always wide enough for the whole ID.
 */
.fi-panel-app .ap-name-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fi-panel-app .ap-copy-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;
    flex: 0 0 auto;
}

.fi-panel-app .ap-copy-inline-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fi-panel-app .ap-copy-inline-btn:hover,
.fi-panel-app .ap-copy-inline-btn:focus-visible {
    opacity: 1;
    color: var(--primary-600);
}

.fi-panel-app .ap-copy-inline-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* A phone and a narrow desk: the whole 19-digit ID beside its icon, a
   touch smaller. */
@media (max-width: 1279px) {
    .fi-panel-app .ap-name-meta {
        font-size: 0.6875rem;
        letter-spacing: -0.01em;
    }
}

/* An empty cell's "-" stays quiet (owner 2026-11-02). */
.fi-panel-app .fi-ta-cell .fi-ta-placeholder {
    color: var(--gray-300);
}

.dark .fi-panel-app .fi-ta-cell .fi-ta-placeholder,
.fi-panel-app.dark .fi-ta-cell .fi-ta-placeholder {
    color: var(--gray-600);
}

/* Spend figures line up digit under digit. */
.fi-panel-app .ap-num,
.fi-panel-app .ap-name-spend {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "Spend" and the info icon naming the period (owner 2026-11-02,
   `SpendPeriodFilter::spendHeading()`): the icon is muted, the heading's
   size, and a tap or hover on it shows the period without sorting. */
.fi-panel-app .ap-th-hint-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-panel-app .ap-th-hint {
    display: inline-flex;
    align-items: center;
    color: var(--gray-400);
    cursor: help;
    border-radius: 9999px;
    -webkit-tap-highlight-color: transparent;
}

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

.fi-panel-app .ap-th-hint .ap-th-hint-icon {
    width: 1rem;
    height: 1rem;
}

/* Several BC IDs in one cell, each with its copy icon. */
.fi-panel-app .ap-copy-inline + .ap-copy-inline {
    margin-inline-start: 0.5rem;
}

/* The ad account tables between md and 1440 (2026-11-02): the admin's
   tighter cell padding, so the columns fit a 1024 or 1280 screen without
   scrolling sideways. Between 1280 and 1440 the Time zone column waits
   (it is on the account's page and in the filter). */
@media (min-width: 768px) and (max-width: 1439px) {
    .fi-panel-app .fi-ta-table:has(.ap-name-meta) .fi-ta-header-cell,
    .fi-panel-app .fi-ta-table:has(.ap-name-meta) .fi-ta-cell .fi-ta-text {
        padding-inline: 0.5rem;
    }

    .fi-panel-app .fi-ta-table:has(.ap-name-meta) .fi-ta-cell.ap-col-fold .fi-ta-text {
        max-width: calc(var(--ap-wrap-measure) + 1rem);
    }
}

/* The Clients list's columns share the width (owner 2026-11-02): Client
   and BC ID a fixed share each (a long name folds inside its share), the
   figures an even share each, the row's actions as wide as they are, so
   no column soaks up the rest and nothing bunches at the right. */
@media (min-width: 768px) {
    .fi-panel-app .fi-ta-table > thead > tr > th.ap-ecw-client {
        width: 28%;
    }

    .fi-panel-app .fi-ta-table > thead > tr > th.ap-ecw-bc {
        width: 20%;
    }

    .fi-panel-app .fi-ta-table > thead > tr > th.fi-ta-header-cell.ap-ecw-fig {
        width: 13%;
    }

    /* The checkbox and the row's actions keep to their content, so a
       narrower desk (no BC ID column) hands the rest to the shares. */
    .fi-panel-app .fi-ta-table:has(th.ap-ecw-client) > thead > tr > th:first-child:not(.fi-ta-header-cell),
    .fi-panel-app .fi-ta-table:has(th.ap-ecw-client) > thead > tr > th.fi-ta-actions-header-cell {
        width: 1%;
    }
}

.fi-panel-app .ap-bc-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.fi-panel-app .ap-bc-more-muted {
    font-size: 0.75rem;
    color: var(--gray-400);
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .fi-panel-app .fi-ta-table:has(.ap-name-meta) .fi-ta-header-cell-timezone,
    .fi-panel-app .fi-ta-table:has(.ap-name-meta) .fi-ta-cell-timezone {
        display: none;
    }
}