/*
 * Spending limits on card accounts and the client's account labels (owner
 * decisions 2026-10-30), every panel that draws them: the compact list cell
 * (figure, slim bar, badge), the account page block, the popups' live
 * preview and chips, the dashboard notice and the label badges.
 *
 * Filament's own colour variables only (--gray-*, --success-*, --warning-*,
 * --danger-*, --primary-*), dark mode on Filament's `.dark`; the brand's
 * tokens through `--ap-*` where a brand colour is meant. No hex.
 */

/* ---- The list cell ---- */
.ap-limit {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 10.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.ap-limit-figure {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
}

:where(.dark, .dark *) .ap-limit-figure {
    color: var(--gray-100);
}

.ap-limit-status {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-limit-text-ok,
.ap-limit-text-muted {
    color: var(--gray-500);
    font-weight: 400;
}

.ap-limit-text-warning {
    color: var(--warning-700);
}

.ap-limit-text-danger {
    color: var(--danger-600);
}

.ap-limit-text-info {
    color: var(--info-600);
}

:where(.dark, .dark *) .ap-limit-text-warning {
    color: var(--warning-400);
}

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

:where(.dark, .dark *) .ap-limit-text-info {
    color: var(--info-400);
}

.ap-limit-bar {
    position: relative;
    display: block;
    height: 4px;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: var(--gray-200);
}

:where(.dark, .dark *) .ap-limit-bar {
    background: var(--gray-700);
}

.ap-limit-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--success-500);
    transition: width 0.3s ease;
}

.ap-limit-bar.ap-limit-warning > span {
    background: var(--warning-500);
}

.ap-limit-bar.ap-limit-danger > span {
    background: var(--danger-500);
}

.ap-limit-bar.ap-limit-muted > span {
    background: var(--gray-400);
}

.ap-limit-bar.ap-limit-info > span {
    background: var(--info-400);
}

.ap-limit-bar-lg {
    height: 6px;
}

.ap-muted {
    color: var(--gray-400);
}

/* On a phone the cell rides under the name, full row width. */
.ap-name-limit {
    display: block;
    margin-top: 0.35rem;
}

.ap-name-limit .ap-limit {
    display: flex;
    width: 100%;
    max-width: 16rem;
}

/* Labels under the name until the Labels column has room (2xl). */
@media (min-width: 96rem) {
    .ap-labels-under-name {
        display: none !important;
    }
}

.ap-labels-under-name {
    display: block;
    margin-top: 0.2rem;
}

/* ---- Labels ---- */
.ap-labels {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 14rem;
}

.ap-label {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.6875rem;
    line-height: 1.1rem;
    font-weight: 500;
    color: var(--gray-700);
    background: var(--gray-100);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    white-space: nowrap;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* ---- The account page block ---- */
.ap-limit-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-variant-numeric: tabular-nums;
}

.ap-limit-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 0.75rem;
}

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

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

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

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

.ap-limit-note,
.ap-limit-add {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

:where(.dark, .dark *) .ap-limit-note,
:where(.dark, .dark *) .ap-limit-add {
    color: var(--gray-400);
}

@media (max-width: 479px) {
    .ap-limit-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ap-limit-stat-badge {
        grid-column: 1 / -1;
        order: -1;
    }

    .ap-limit-stat > strong {
        font-size: 1rem;
    }
}

/* ---- The popups: chips and the live preview ---- */
.ap-chips .fi-ac {
    gap: 0.375rem;
    flex-wrap: wrap;
}

.ap-chip.fi-btn {
    border-radius: 999px;
    padding-inline: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.ap-preview {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

:where(.dark, .dark *) .ap-preview {
    background: var(--gray-900);
    box-shadow: inset 0 0 0 1px var(--gray-700);
}

.ap-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--gray-600);
}

.ap-preview-row strong {
    font-weight: 600;
    color: var(--gray-950);
    white-space: nowrap;
}

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

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

.ap-preview-delta {
    font-weight: 500;
    color: var(--gray-500);
}

.ap-preview-warn {
    margin: 0.2rem 0 0;
    color: var(--danger-600);
    font-weight: 500;
}

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

.ap-preview-note {
    margin: 0.1rem 0 0;
    color: var(--gray-500);
    font-size: 0.75rem;
}

.ap-preview[data-ap-over] {
    box-shadow: inset 0 0 0 1px var(--danger-300);
}

/* ---- The dashboard notice ---- */
.ap-limit-notice {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--danger-50);
    box-shadow: inset 0 0 0 1px var(--danger-200);
}

:where(.dark, .dark *) .ap-limit-notice {
    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);
}

/* The warning variant: ad accounts to be removed for no spend (2026-11-05). */
.ap-limit-notice.ap-limit-notice-warning {
    background: var(--warning-50);
    box-shadow: inset 0 0 0 1px var(--warning-200);
}

:where(.dark, .dark *) .ap-limit-notice.ap-limit-notice-warning {
    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-limit-notice-warning .ap-limit-notice-icon {
    background: var(--warning-100);
    color: var(--warning-600);
}

:where(.dark, .dark *) .ap-limit-notice-warning .ap-limit-notice-icon {
    background: color-mix(in oklab, var(--warning-500) 20%, transparent);
    color: var(--warning-400);
}

.ap-limit-notice-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--danger-100);
    color: var(--danger-600);
}

:where(.dark, .dark *) .ap-limit-notice-icon {
    background: color-mix(in oklab, var(--danger-500) 20%, transparent);
    color: var(--danger-400);
}

.ap-limit-notice-svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ap-limit-notice-text {
    flex: 1;
    min-width: 0;
}

.ap-limit-notice-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-950);
}

:where(.dark, .dark *) .ap-limit-notice-title {
    color: var(--gray-50);
}

.ap-limit-notice-body {
    margin: 0.1rem 0 0;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

:where(.dark, .dark *) .ap-limit-notice-body {
    color: var(--gray-400);
}

.ap-limit-notice-add {
    display: inline-block;
    margin-inline-start: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.ap-limit-notice-cta {
    flex: none;
}

@media (max-width: 639px) {
    .ap-limit-notice {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ap-limit-notice-text {
        flex-basis: calc(100% - 3.25rem);
    }

    .ap-limit-notice-cta {
        width: 100%;
        justify-content: center;
    }

    .ap-limit-notice-add {
        display: block;
        margin-inline-start: 0;
        margin-top: 0.15rem;
    }
}

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

/* The list's bulk buttons (Set limit, Labels) sit side by side on a phone:
   mobile.css stacks a row's actions in a column, which is for row menus. */
@media (max-width: 767px) {
    .fi-panel-app .fi-ta-header-toolbar > .fi-ta-actions {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    /* With nothing selected every bulk button is x-show hidden, yet the
       row kept Filament's 36px min-height on its own wrapped line: a blank
       gap above the search (Clients, e2e 2026-10-30). Gone until a row is
       picked. */
    .fi-panel-app .fi-ta-header-toolbar > .fi-ta-actions:not(:has(> :not([style*="display: none"]))) {
        display: none;
    }

    .fi-panel-app .fi-ta-header-toolbar > .fi-ta-actions > .fi-dropdown,
    .fi-panel-app .fi-ta-header-toolbar > .fi-ta-actions .fi-dropdown-trigger,
    .fi-panel-app .fi-ta-header-toolbar > .fi-ta-actions .fi-dropdown-trigger > .fi-btn {
        width: auto;
        min-width: 0;
        position: static;
        margin: 0;
    }
}