/*
 * A client's own clients and the balance stop (2026-10-30), every panel
 * that draws them: BC chips, the end client chip on an account, the Clients
 * list's balance cell, the client page's figures and funds history, the stop
 * note and the desk's End clients table. The popups reuse spend-limits.css
 * (.ap-preview, .ap-chips).
 *
 * Filament's own colour variables only, dark mode on Filament's `.dark`.
 */

/* ---- Chips ---- */
.ap-chips-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 18rem;
}

.ap-bc-chip,
.ap-ec-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.6875rem;
    line-height: 1.1rem;
    font-weight: 500;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--gray-700);
    background: var(--gray-100);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    white-space: nowrap;
}

.ap-bc-chip small {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--gray-500);
}

.ap-bc-adding,
.ap-bc-removing,
.ap-bc-held {
    color: var(--info-700, var(--primary-700));
    background: var(--info-50, var(--primary-50));
    box-shadow: inset 0 0 0 1px var(--info-200, var(--primary-200));
}

.ap-bc-failed {
    color: var(--danger-700);
    background: var(--danger-50);
    box-shadow: inset 0 0 0 1px var(--danger-200);
}

.ap-bc-more {
    font-size: 0.6875rem;
    color: var(--gray-500);
    align-self: center;
}

.ap-ec-chip {
    color: var(--primary-700);
    background: var(--primary-50);
    box-shadow: inset 0 0 0 1px var(--primary-200);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A long client name ends in an ellipsis rather than being cut mid-letter,
   and on a phone stays short enough to share the status line (2026-11-02). */
.ap-ec-chip {
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .ap-name-status .ap-ec-chip {
        max-width: 7rem;
    }

    /* The Clients list on a phone: the contact and the figures line keep
       to one line each, cut with an ellipsis: the Client cell takes only
       the room the Balance column and the row's menu leave (2026-11-02). */
    .fi-panel-app .fi-ta-table:has(th.ap-ecw-client) td.fi-ta-cell-name {
        width: 100%;
        max-width: 0;
    }

    /* Closer columns give the figures line its room. */
    .fi-panel-app .fi-ta-table:has(th.ap-ecw-client) td.fi-ta-cell-name .fi-ta-text {
        padding-inline-end: 0.25rem;
    }

    .fi-panel-app .fi-ta-table:has(th.ap-ecw-client) td.fi-ta-cell-balance .fi-ta-text {
        padding-inline-start: 0.25rem;
    }

    .fi-panel-app .fi-ta-table:has(th.ap-ecw-client) td.fi-ta-cell:last-child {
        padding-inline-start: 0.25rem;
    }

    .fi-panel-app .ap-ec-contact,
    .fi-panel-app .ap-ec-phone {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fi-panel-app .ap-ec-phone {
        display: block;
        font-size: 0.6875rem;
    }

    .fi-panel-app .ap-ec-phone > span {
        display: inline;
    }

    /* A long name keeps to two lines on a phone (both client lists). */
    .fi-panel-app .fi-ta-cell-name .fi-ta-text-item {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

:where(.dark, .dark *) .ap-bc-chip {
    color: var(--gray-200);
    background: var(--gray-800);
    box-shadow: inset 0 0 0 1px var(--gray-700);
}

:where(.dark, .dark *) .ap-ec-chip {
    color: var(--primary-300);
    background: color-mix(in oklab, var(--primary-500) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 35%, transparent);
}

/* The end client under an account's name: phone and below lg, where the
   Client column is not drawn. */
.ap-ec-under-name {
    display: block;
    margin-top: 0.2rem;
}

@media (min-width: 1024px) {
    .ap-ec-under-name {
        display: none !important;
    }
}

/* ---- The Clients list ---- */
.ap-ec-balance {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ap-ec-flag {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
    color: var(--danger-600);
}

:where(.dark, .dark *) .ap-ec-flag {
    color: var(--danger-400);
}

.ap-ec-balance strong {
    font-weight: 600;
    color: var(--gray-950);
}

:where(.dark, .dark *) .ap-ec-balance strong {
    color: var(--gray-50);
}

.ap-ec-negative,
.ap-ec-balance strong.ap-ec-negative,
:where(.dark, .dark *) .ap-ec-balance strong.ap-ec-negative {
    color: var(--danger-600);
}

.ap-ec-positive {
    color: var(--success-700);
}

.ap-ec-contact {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.ap-ec-archived {
    display: inline-block;
    margin-inline-end: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ap-ec-phone {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    gap: 0;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

/* "2 acc. · $4,850.00 spent" (2026-11-02). */
.ap-ec-phone > span + span::before {
    content: '·';
    margin-inline: 0.3125rem;
    color: var(--gray-400);
}

/* ---- The client page ---- */
.ap-ec-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem 1rem;
    font-variant-numeric: tabular-nums;
}

.ap-ec-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ap-ec-stat > span {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.ap-ec-stat > strong {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-950);
}

.ap-ec-stat.ap-ec-negative > strong {
    color: var(--danger-600);
}

:where(.dark, .dark *) .ap-ec-stat > strong {
    color: var(--gray-50);
}

:where(.dark, .dark *) .ap-ec-stat.ap-ec-negative > strong {
    color: var(--danger-400);
}

.ap-ec-stop,
.ap-stop-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: var(--danger-700);
    background: var(--danger-50);
    box-shadow: inset 0 0 0 1px var(--danger-200);
}

.ap-stop-note {
    margin: 0;
}

/* The badge keeps its word on a phone: beside a two-line note it was
   squeezed to "St..." (e2e 2026-10-30). */
.ap-stop-note > .fi-badge {
    flex-shrink: 0;
}

.ap-ec-stop-muted {
    color: var(--gray-600);
    background: var(--gray-50);
    box-shadow: inset 0 0 0 1px var(--gray-200);
}

:where(.dark, .dark *) .ap-ec-stop,
:where(.dark, .dark *) .ap-stop-note {
    color: var(--danger-300);
    background: color-mix(in oklab, var(--danger-500) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-500) 35%, transparent);
}

/* An account on its way out for no spend (owner decision 2026-11-05): the
   stop note's shape in the warning colours. */
.ap-stop-note.ap-risk-note {
    color: var(--warning-800);
    background: var(--warning-50);
    box-shadow: inset 0 0 0 1px var(--warning-200);
}

:where(.dark, .dark *) .ap-stop-note.ap-risk-note {
    color: var(--warning-300);
    background: color-mix(in oklab, var(--warning-500) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 35%, transparent);
}

.ap-ec-moves {
    display: flex;
    flex-direction: column;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* One fund row (2026-11-02): what and its code on the left, the day muted
   beside it, the amount at the right; on a phone the day folds under the
   what, two lines at most. */
.ap-ec-move {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0 1rem;
    align-items: baseline;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--gray-100);
}

:where(.dark, .dark *) .ap-ec-move {
    border-color: var(--gray-800);
}

.ap-ec-move-what {
    color: var(--gray-800);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-ec-move-what code {
    margin-inline-start: 0.25rem;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--gray-400);
}

:where(.dark, .dark *) .ap-ec-move-what {
    color: var(--gray-200);
}

.ap-ec-move-when {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.ap-ec-move strong {
    font-weight: 600;
    text-align: end;
    white-space: nowrap;
}

/* All time · Ad spend charged: a quiet footer line. */
.ap-ec-move-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

@media (max-width: 639px) {
    .ap-ec-move {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'what amount' 'when amount';
        row-gap: 0.05rem;
        align-items: center;
    }

    .ap-ec-move-what { grid-area: what; }
    .ap-ec-move-when { grid-area: when; font-size: 0.6875rem; }
    .ap-ec-move strong { grid-area: amount; }

    .ap-ec-stat > strong,
    .ap-ec-stat.ap-ec-negative > strong {
        font-size: 1rem;
    }
}

/* The stop note: one short line under the figures (2026-11-02). */
.ap-ec-stopline {
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--danger-600);
}

.ap-ec-stopline-muted {
    color: var(--gray-500);
}

:where(.dark, .dark *) .ap-ec-stopline:not(.ap-ec-stopline-muted) {
    color: var(--danger-400);
}

/* The BC IDs row: the IDs as text with the copy icon, Add and Remove as
   links after them, never stretched across a wide desk. */
.ap-ec-bc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-variant-numeric: tabular-nums;
}

.ap-ec-bc-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ap-ec-bc-item small {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* The dashboard's client switch: as wide as a name needs, never wider. */
.ap-period-client {
    max-width: 14rem;
}

@media (max-width: 639px) {
    .ap-period-client {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* ---- The desk's End clients table ---- */
.ap-ec-admin-table {
    margin-top: 0.75rem;
    overflow-x: auto;
}

.ap-ec-admin-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.ap-ec-admin-table th {
    text-align: start;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--gray-500);
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.ap-ec-admin-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}

:where(.dark, .dark *) .ap-ec-admin-table th,
:where(.dark, .dark *) .ap-ec-admin-table td {
    border-color: var(--gray-800);
}

.ap-ec-admin-table .ap-num {
    text-align: end;
    white-space: nowrap;
}

/* The Stopped / Paused badge keeps its word ("Sto..." on a phone). */
.ap-ec-admin-table td:last-child {
    white-space: nowrap;
}

.ap-ec-admin-table td:last-child .fi-badge,
.ap-ec-admin-table td:last-child .fi-badge * {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* On a phone the balance, the column the desk opens it for, sat off screen
   behind the 19-digit BC IDs (e2e 2026-10-30): there only the end client,
   its balance and its stop show; the rest is on a wider screen. */
@media (max-width: 639px) {
    .ap-ec-admin-table th:nth-child(2),
    .ap-ec-admin-table td:nth-child(2),
    .ap-ec-admin-table th:nth-child(3),
    .ap-ec-admin-table td:nth-child(3),
    .ap-ec-admin-table th:nth-child(5),
    .ap-ec-admin-table td:nth-child(5) {
        display: none;
    }

    .ap-ec-admin-table th,
    .ap-ec-admin-table td {
        padding-inline: 0.35rem;
    }
}

/* The preview's closing line: what Unallocated keeps. */
.ap-preview-row.ap-preview-total {
    margin-top: 0.2rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--gray-200);
}

:where(.dark, .dark *) .ap-preview-row.ap-preview-total {
    border-color: var(--gray-700);
}

/* The Total / Allocated / Unallocated split stays one row on a phone:
   three compact figures, the lines under them dropped. */
@media (max-width: 639px) {
    .ap-balance-split .fi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .ap-balance-split .fi-wi-stats-overview-stat {
        padding: 0.625rem 0.625rem !important;
    }

    .ap-balance-split .fi-wi-stats-overview-stat-label {
        font-size: 0.6875rem;
    }

    .ap-balance-split .fi-wi-stats-overview-stat-value {
        font-size: 0.9375rem !important;
        line-height: 1.375rem;
    }

    .ap-balance-split .fi-wi-stats-overview-stat-description {
        display: none;
    }
}

.ap-ec-bc-label {
    margin-inline-end: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-950);
}

:where(.dark, .dark *) .ap-ec-bc-label {
    color: var(--gray-50);
}

.ap-ec-bc-list {
    align-items: center;
}

/* Add and Remove sit side by side at the row's end. */
.ap-ec-bc-card .fi-sc-actions > .fi-ac {
    flex-wrap: nowrap;
    gap: 1rem;
}

/* The client page's headless cards (figures, BC IDs) get the same 16px
   inset as the other cards; the record page's compact rules had squeezed
   their top and bottom padding (owner 2026-11-02). */
.ap-ec-card:not(:has(.fi-section-header)) .fi-section-content {
    padding: 1rem !important;
}

/* On a phone the client page's "Ad accounts" heading and its Attach accounts
   button share one line instead of stacking (owner 2026-11-02). */
@media (max-width: 639px) {
    .fi-resource-clients .fi-ta-header {
        flex-direction: row;
        align-items: center;
        padding-block: 0.75rem;
    }

    .fi-resource-clients .fi-ta-header .fi-ta-actions {
        margin: 0 0 0 auto !important;
    }

    .fi-resource-clients .fi-ta-header .fi-ta-actions .fi-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* The Funds card's list ends with the same inset as its top (owner 2026-11-02). */
.ap-ec-card:has(.fi-section-header) .fi-section-content {
    padding-bottom: 1rem !important;
}

/* The client page on a phone, one rhythm for every card (owner 2026-11-02:
   "make sure sub client row view is consistent on mobile"): each card's
   title row is 16px in and 12px down like the Ad accounts table's, its
   title the same 16px semibold, its links (Add, Remove, Show all) on the
   title's line at the right, and its content 16px in. The desk is
   untouched. */
@media (max-width: 639px) {
    .ap-ec-card .fi-section-header {
        flex-direction: row;
        align-items: center;
        padding: 0.75rem 1rem;
    }

    .ap-ec-card .fi-section-header-after-ctn {
        margin-inline-start: auto;
    }

    .ap-ec-card:has(.fi-section-header) .fi-section-content {
        padding: 0.5rem 1rem 1rem !important;
    }

    .ap-ec-bc-card .fi-section {
        position: relative;
    }

    .ap-ec-bc-label {
        flex-basis: 100%;
        margin: 0 0 0.25rem;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5rem;
    }

    .ap-ec-bc-list {
        row-gap: 0.125rem;
    }

    /* Add and Remove on the title's line, like Show all. */
    .ap-ec-bc-card .fi-sc-actions {
        position: absolute;
        top: 0.375rem;
        inset-inline-end: 1rem;
    }
}