/*
 * Stat cards keep a big figure on one line, in both panels (the client
 * dashboard's row got the same rule on 2026-09-24).
 *
 * Filament draws a stat value at text-3xl and lets it wrap, so a seven-digit
 * amount with its currency ("7,202,860.29 USD") broke onto two lines on the
 * dashboard's four-across Money row (owner, 2026-09-23). The card becomes an
 * inline-size container and the value never wraps: its size is the smaller of
 * Filament's own 1.875rem and a share of the card's width, so a short figure
 * looks exactly as before and a long one shrinks to fit instead. The line
 * height stays at Filament's 2.25rem, so card heights (and the skeleton that
 * mirrors them) do not move.
 */
:is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat,
.fi-panel-app .fi-wi-stats-overview-stat {
    container-type: inline-size;
}

:is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat-value,
.fi-panel-app .fi-wi-stats-overview-stat-value {
    font-size: min(1.875rem, 10.5cqi);
    line-height: 2.25rem;
    white-space: nowrap;
}

/*
 * The dashboard's currency switch and period (owner decisions 2026-09-23), on
 * the right of the Money heading; the client dashboard's Your money heading
 * carries the same switches since 2026-09-24. Compact: two selects, plus two
 * date inputs for a custom range. On a narrow screen the header wraps and the
 * switcher drops under the heading instead of squeezing it or scrolling the
 * page sideways.
 */
:is(.fi-panel-admin, .fi-panel-provider) .ap-period-section > .fi-section > .fi-section-header,
.fi-panel-app .ap-period-section > .fi-section > .fi-section-header {
    flex-wrap: wrap;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-period,
.fi-panel-app .ap-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

:is(.fi-panel-admin, .fi-panel-provider) .ap-period-date .fi-input,
.fi-panel-app .ap-period-date .fi-input {
    width: 9.5rem;
}

@media (max-width: 639px) {
    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-section > .fi-section > .fi-section-header > .fi-section-header-after-ctn,
    .fi-panel-app .ap-period-section > .fi-section > .fi-section-header > .fi-section-header-after-ctn {
        flex-basis: 100%;
    }

    /* Filament wraps the header's after-slot in content-sized boxes; on a
       phone every one of them takes the full line, so the controls can too. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-section .fi-section-header-after-ctn .fi-sc,
    .fi-panel-app .ap-period-section .fi-section-header-after-ctn .fi-sc,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-section .fi-section-header-after-ctn .fi-sc > div,
    .fi-panel-app .ap-period-section .fi-section-header-after-ctn .fi-sc > div,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-section .fi-section-header-after-ctn .fi-sc-component,
    .fi-panel-app .ap-period-section .fi-section-header-after-ctn .fi-sc-component,
    :is(.fi-panel-admin, .fi-panel-provider) .ap-period,
    .fi-panel-app .ap-period {
        width: 100%;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-period,
    .fi-panel-app .ap-period {
        justify-content: flex-start;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-currency,
    .fi-panel-app .ap-period-currency {
        flex: 0 0 auto;
    }

    /* On the admin, currency and period share the first line; the client
       has the period alone (2026-10-02), which grows to fill it. A custom
       range's two days take the second, half each. */
    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-select,
    .fi-panel-app .ap-period-select {
        flex: 1 1 60%;
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-date,
    .fi-panel-app .ap-period-date {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }

    :is(.fi-panel-admin, .fi-panel-provider) .ap-period-date .fi-input,
    .fi-panel-app .ap-period-date .fi-input {
        width: 100%;
    }
}

/*
 * The admin dashboard on a phone or a tablet (owner, 2026-09-23: "make the
 * admin dashboard mobile friendly"). Admin-scoped twins of the client panel's
 * rules in mobile.css, which stay untouched.
 *
 * Two cards a row from 640px until Filament's own lg grid takes over (every
 * stat section here is a dashboard one); one a row below that. Below md the
 * cards get the client panel's shorter padding and a 1.5rem figure, still
 * shrinking with the card (the container rule above) so a long figure stays
 * on one line. The lazy placeholders use the same classes and move with them.
 */
@media (min-width: 640px) and (max-width: 1023px) {
    /* The client dashboard's Your money cards too (2026-09-24): six full-width
       cards stacked 840px deep on a tablet. Scoped to that section, so the
       Ledger page's own stat row keeps its layout. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview .fi-section-content.fi-grid,
    .fi-panel-app .ap-period-section .fi-section-content.fi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat {
        padding: 1rem;
    }

    /* The client panel's compact cards (mobile.css) take the same figure; it
       is set here because this file loads after mobile.css and its desktop
       size above would otherwise win. */
    :is(.fi-panel-admin, .fi-panel-provider) .fi-wi-stats-overview-stat-value,
    .fi-panel-app .fi-wi-stats-overview-stat-value {
        font-size: min(1.5rem, 10.5cqi);
        line-height: 2rem;
    }
}

/* The Cash in chart's placeholder plot, at the canvas's own ratio. */
.ap-skel-chart {
    aspect-ratio: 2 / 1;
}

@media (max-width: 639px) {
    .ap-skel-chart {
        aspect-ratio: 1.4 / 1;
    }
}

/*
 * Room below the last widget (owner, 2026-09-23). Filament ends the admin page
 * flush with the content, so on a phone the browser's own bottom bar sat on
 * the last cards. Phones get the larger gap plus the device's safe area.
 */
:is(.fi-panel-admin, .fi-panel-provider) .fi-main {
    padding-bottom: 4rem;
}

@media (max-width: 767px) {
    :is(.fi-panel-admin, .fi-panel-provider) .fi-main {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }
}

/*
 * A stat card that links somewhere says so (owner, 2026-09-24): a small
 * arrow in its top-right corner, both panels. Only cards Filament draws as
 * <a> (a Stat with ->url()) get it; plain cards and the lazy placeholders
 * (divs) do not. Absolutely placed, so it moves nothing; the label keeps
 * clear of it. Heroicon arrow-up-right, drawn through a mask so it takes
 * the text colour and follows dark mode.
 */
a.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn {
    padding-inline-end: 1.5rem;
}

a.fi-wi-stats-overview-stat::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--gray-400);
    -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='m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25'/%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='m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color 150ms, transform 150ms;
    pointer-events: none;
}

/* Hover only where there is a mouse: a phone keeps :hover on the last card
   a finger touched, scrolls included, which left arrows lit (2026-10-02). */
@media (hover: hover) and (pointer: fine) {
    a.fi-wi-stats-overview-stat:hover::after {
        background-color: var(--primary-600);
        transform: translate(2px, -2px);
    }
}

a.fi-wi-stats-overview-stat:focus-visible::after {
    background-color: var(--primary-600);
    transform: translate(2px, -2px);
}

@media (max-width: 767px) {
    /* Phone cards carry 1rem of padding (mobile.css, and above for admin). */
    a.fi-wi-stats-overview-stat::after {
        top: 1rem;
        right: 1rem;
    }
}

/*
 * A linked stat card answers the press like an app's tile (owner,
 * 2026-10-02: "more animation so it feels like a click"). Pressed, it sinks
 * a little and dims to gray-100 (its ring, Filament's border, stays), fast in
 * and slower out, and its arrow turns primary.
 *
 * On a touch screen the press is the `ap-pressed` class, not :active (owner,
 * 2026-10-02: scrolling lit the cards up): `filament/app/press-feedback`
 * adds it only once a finger has rested without moving, or on a quick tap,
 * and a scroll takes it away, the way a native list behaves. A mouse keeps
 * :active. The browser's own grey tap flash is off so the two never stack,
 * and touch-action drops the double-tap-to-zoom wait. Reduced motion keeps
 * the dim and drops the movement.
 */
.fi-panel-app 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;
}

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

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

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

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

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

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

/*
 * A clickable table row answers a tap the same way (owner, 2026-10-02:
 * "table row clicks should also feel like native app but not when I
 * scroll"): the `ap-pressed` class from press-feedback dims it to gray-100,
 * a list row's highlight, without moving it. The browser's grey tap flash on
 * the links and buttons inside its cells is off so only the row lights.
 */
.fi-panel-app .fi-ta-row.fi-clickable,
.fi-panel-app .fi-ta-row.fi-clickable * {
    -webkit-tap-highlight-color: transparent;
}

.fi-panel-app .fi-ta-row.fi-clickable {
    transition: background-color 0.22s ease;
}

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

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

/*
 * The client dashboard's quick actions (New deposit, New top-up; owner
 * 2026-10-02) on a phone: two equal halves of the row under the title, 44px
 * tall, rather than two content-width buttons.
 */
@media (max-width: 767px) {
    .fi-panel-app .ap-dashboard .fi-header-actions-ctn,
    .fi-panel-app .ap-dashboard .fi-header-actions-ctn > .fi-ac {
        width: 100%;
    }

    .fi-panel-app .ap-dashboard .fi-header-actions-ctn > .fi-ac {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .fi-panel-app .ap-dashboard .fi-header-actions-ctn .fi-btn {
        width: 100%;
        min-height: 2.75rem;
        justify-content: center;
    }
}