/* /Components/TransactionForm.razor.rz.scp.css */
/* Busy overlay shown while the form's initial category/subcategory/payer lookups
   are loading (_initialLoading) or a save is in flight (_saving) — see the
   TransactionForm.razor @code block for exactly what drives each. Positioned
   absolutely over the whole form (the wrapper is its nearest positioned ancestor)
   so it visually covers every field without unmounting them, and — since it has no
   pointer-events override, so it keeps the browser's default "auto" — it also
   intercepts every click/keystroke meant for whatever's underneath, making the form
   untouchable (not just dimmed-looking) for as long as it's shown.
   --fa-overlay-opacity is a plain CSS custom property so the strength of the
   dimming is a one-line tweak here rather than buried in a component parameter —
   went from 0.85 (too dark/near-opaque) to a black 0.5, then to a white wash at
   half that (0.25) instead, matching FaHelixLoader's light appearance rather than
   dimming to black underneath it. border-radius is set explicitly (--fa-radius-md,
   Fran's fa-styles.css scale) rather than `inherit` from
   .fa-form-busy-wrapper — the wrapper itself carries no radius, so `inherit` was
   resolving to a hard 0 (square corners) even though this overlay visually reads
   as its own rounded panel floating inside FaModal's padded .fa-modal-body. */
.fa-form-busy-wrapper[b-7ewgxbtoj6] {
    position: relative;
}

/* This component's own content is the whole modal body (FaModal has no other
   ChildContent here), but its *natural* height is just whatever the fields
   currently take up — shorter than the modal's own frame for the Edit form
   specifically (fewer fields than New Transaction: no Entry type toggle, no split
   lines). Without a floor here the overlay+loader would only cover that shorter
   content box and sit high in the visibly taller modal instead of centering in it.
   Only applied while the overlay itself is showing, so the form doesn't carry this
   extra height around the rest of the time. */
.fa-form-busy-wrapper-active[b-7ewgxbtoj6] {
    min-height: 22rem;
}

.fa-form-busy-overlay[b-7ewgxbtoj6] {
    --fa-overlay-opacity: 0.25;

    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, var(--fa-overlay-opacity));
    border-radius: var(--fa-radius-md);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ::deep is needed throughout to reach into FaHeader's own markup — CSS isolation
   only guarantees the scope attribute on .fa-app-shell itself (the literal
   wrapping div in MainLayout.razor); FaHeader is rendered several component
   layers below that, not literally written in this file. See
   Transactions.razor.css's identical comment for the same pattern. */

/* The header's own theme switcher and username text move into the account modal
   (theme switcher) or aren't shown at all anymore (username — the modal has name
   +email together) — unconditional at every width, not just desktop, since the
   header's avatar is the single entry point for all of this now, on both mobile
   and desktop (see OnHeaderAvatarClicked in MainLayout.razor and
   account-menu.js). Scoped through .fa-header specifically for the theme switcher
   so this doesn't also catch the FaThemeSwitcher rendered *inside* the account
   modal, which needs to stay visible. */
.fa-app-shell[b-f2nqpxniih]  .fa-header .fa-theme-switcher {
    display: none;
}

.fa-app-shell[b-f2nqpxniih]  .fa-header-username {
    display: none;
}

/* FaHeader.cs renders a login/logout FaButton as .fa-header-user's last child in
   both its signed-in and signed-out branches — identical markup either way
   (<button class="fa-btn fa-btn-secondary">), nothing to distinguish them by
   class alone. Only the signed-in one (an actual "Log out" button, now redundant
   with the avatar's own click opening the account modal, which has its own real
   Sign out action) should disappear; the signed-out "Log in" button is still the
   only way to sign in before there's any avatar/account info to click into, so it
   stays — at every width, including mobile, since there's no separate mobile-menu
   sign-in path anymore either. fa-app-shell-authed (set in MainLayout.razor from
   _isAuthenticated) is what makes that distinction possible. */
.fa-app-shell-authed[b-f2nqpxniih]  .fa-header-user > button:last-child {
    display: none;
}

/* Signed-out counterpart to the rule above — that same last-child button is
   FaHeader's "Log in" FaButton (text label, pill shape) when not authenticated.
   FaHeader has no slot to swap it out for AccountAvatar's own signed-out
   rendering (a circular person-icon avatar), so this restyles the existing
   button in place into that same look instead of hiding it: sized/shaped exactly
   like .fa-avatar (2.25rem circle, same background/shadow tokens), its text
   collapsed via font-size: 0 (invisible but still in the DOM, so it stays in the
   accessible name for screen readers) and replaced with a background-image
   reproducing FaIcon's own Person glyph (Icons/FaIcon.cs's FaIconName.Person
   path), since a background-image can't pick up FaIcon's fa-icon-black/white
   class-based color the way an actual <FaIcon> would. */
.fa-app-shell:not(.fa-app-shell-authed)[b-f2nqpxniih]  .fa-header-user > button:last-child {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    overflow: hidden;
    background-color: var(--fa-primary-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='7.5' r='3.8'/%3E%3Cpath d='M4.5 19.8c0-4.1 3.4-7.4 7.5-7.4s7.5 3.3 7.5 7.4V21h-15z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    box-shadow: 0 0 0 2px var(--fa-text-on-primary), 0 0 8px rgba(232, 135, 61, 0.6);
}

/* FaAvatar (Fran) is a plain <span> with no interactive styling of its own — it
   has no idea account-menu.js made it clickable (see that file's own comment on
   why this had to be a JS click listener rather than a real onclick parameter).
   Without this it shows the default/text-select cursor on hover instead of
   signaling it's actually a button. */
.fa-app-shell[b-f2nqpxniih]  .fa-header .fa-avatar {
    cursor: pointer;
}

/* Deliberately no responsive hiding of .fa-header-user itself (unlike the
   theme-switcher/username/logout-button rules above, which apply at every width)
   — the avatar needs to stay visible in the header at every width now, right of
   the hamburger+brand (.fa-header's own justify-content: space-between), so
   there's exactly one account entry point rather than a second copy tucked inside
   the off-canvas mobile menu. */

/* Account panel — see MainLayout.razor's own comment on why this is a
   Position="Top" FaModal offset via CSS rather than a true anchored popover.
   var(--fa-header-height) (Fran's own header-height token) pushes it down to sit
   below the header/avatar instead of overlapping it, at every width. Desktop:
   also nudged into the top-right, roughly under the avatar. Mobile: stretched
   edge-to-edge, reading as "the area below the top bar became this panel". */
.fa-account-modal[b-f2nqpxniih]  .fa-modal-backdrop-top {
    justify-content: flex-end;
    padding: calc(var(--fa-header-height) + 0.5rem) 1.5rem 0.75rem 0;
}

/* FaModal's own header still renders (Title is never set, so its <h5> is just
   empty) — kept specifically for its × close button in the top-right corner,
   already wired through CloseAccountModal like every other way the panel closes
   (backdrop click, Sign out navigating away). */

@media (max-width: 720px) {
    .fa-account-modal[b-f2nqpxniih]  .fa-modal-backdrop-top {
        padding: var(--fa-header-height) 0 0;
    }

    .fa-account-modal[b-f2nqpxniih]  .fa-modal {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
    }
}

/* .fa-modal-body (Fran) only sets overflow-y, not overflow-x — belt-and-suspenders
   alongside the identity row's own min-width: 0/ellipsis below, so nothing inside
   this panel can ever force it wider than the viewport regardless of content
   length, on any screen size. Explicit cursor: default is a defensive reset —
   the pointer cursor should only ever show over an actual clickable element
   (the avatar/theme buttons, Switch account, Sign out — each sets its own
   cursor: pointer already), never just from hovering the panel generally. */
.fa-account-modal[b-f2nqpxniih]  .fa-modal-body {
    overflow-x: hidden;
    cursor: default;
}

/* Avatar (left) + theme switcher (right) — the first row in the panel (FaModal's
   own header/title is hidden above; there's nothing worth titling, same as
   Google's own panel having no heading). The switcher has no label of its own —
   its three icons (Light/Dark/Colorblind, each with their own title attribute)
   are already self-explanatory everywhere else this component appears. */
.fa-account-modal-theme-row[b-f2nqpxniih] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Full padding, not just top — this used to rely on the identity block
       (name/email) right underneath supplying its own top padding for the gap
       below the avatar/switcher. Signed out, there's no identity block (see
       MainLayout.razor's @if), so Sign in's divider ended up sitting almost
       flush against the icons above it with nothing to fix. Self-contained
       spacing here instead, with identity's own top padding removed below so
       the signed-in case doesn't end up with double the gap. */
    padding: 0.9rem 1.3rem;
}

/* FaThemeSwitcher's own styling (_layout.scss) is built entirely around sitting
   directly on the header's solid --fa-primary (burnt orange) background — its
   icons are hardcoded FaIconColor.White (FaThemeSwitcher.cs's own doc comment
   says so explicitly), and its "active" state is a barely-there white overlay
   (rgba(255,255,255,0.24)) that only reads as a highlight against something
   solid and dark behind it. Dropped onto this modal's own neutral --fa-surface
   background instead, both of those become nearly invisible — white icons and a
   white active-overlay on a light surface is what "selection color matches the
   button background" and "toggle background is too light" were describing.
   Restoring an opaque --fa-primary pill behind it here (rather than the
   near-transparent rgba(0,0,0,0.14) .fa-theme-switcher normally gets, which
   assumes it's already sitting on orange) puts it back in the same visual
   context it was designed for, without touching Fran's own header styling. */
.fa-account-modal-theme-row[b-f2nqpxniih]  .fa-theme-switcher {
    background: var(--fa-primary);
}

/* Name/email — stacked, name on its own line above email (plain block-level
   divs, so they stack by default; no flex/row layout needed now that the
   avatar moved up to share the theme row instead of sitting beside these). */
.fa-account-modal-identity[b-f2nqpxniih] {
    padding: 0 1.3rem 1.1rem;
}

.fa-account-modal-name[b-f2nqpxniih],
.fa-account-modal-email[b-f2nqpxniih] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fa-account-modal-name[b-f2nqpxniih] {
    font-weight: 700;
    color: var(--fa-text);
}

/* Sign out — a plain list-style row (flex-start, icon then label, not spread to
   the row's edges) below a divider separating it from the identity block above,
   rather than Google's/GitHub's own isolated pill-per-action look; this app only
   has the one action here, so a pill would just look like a lone, oddly floating
   button. */
.fa-account-modal-action[b-f2nqpxniih] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1.3rem;
    border: none;
    border-top: 1px solid var(--fa-border);
    background: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--fa-text);
    text-align: left;
    transition: background-color var(--fa-transition-fast);
}

    /* var(--fa-primary-light) (the soft warm avatar-background tint) read as
       barely-there against --fa-surface — not enough contrast to actually look
       "hovered". --fa-border is a stronger, more saturated tint designed
       specifically to stay visible against the surface color (it's what draws
       the divider line above these rows), so it reads as a clear highlight here
       too. */
    .fa-account-modal-action:hover[b-f2nqpxniih] {
        background: var(--fa-border);
    }

/* Topbar import activity / notifications */
.fa-app-shell[b-f2nqpxniih]  .fa-header .fa-header-nav {
    display: flex;
    align-items: center;
}

@media (max-width: 720px) {
    .fa-app-shell[b-f2nqpxniih]  .fa-header .fa-header-nav:has(.fa-topbar-activity) {
        display: flex !important;
        position: static !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 0.5rem !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
}

.fa-topbar-activity[b-f2nqpxniih] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    animation: fa-fade-in-b-f2nqpxniih 0.2s ease-out;
}

@keyframes fa-fade-in-b-f2nqpxniih {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.fa-topbar-analyzing[b-f2nqpxniih] {
    background: rgba(255, 255, 255, 0.18);
    color: var(--fa-text-on-primary, #ffffff);
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fa-topbar-spinner[b-f2nqpxniih] {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: fa-topbar-spin-b-f2nqpxniih 0.75s linear infinite;
}

@keyframes fa-topbar-spin-b-f2nqpxniih {
    to { transform: rotate(360deg); }
}

.fa-topbar-filename[b-f2nqpxniih] {
    opacity: 0.85;
    font-weight: 400;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

.fa-topbar-pill[b-f2nqpxniih] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.fa-topbar-pill:hover[b-f2nqpxniih] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.fa-topbar-pill-ready[b-f2nqpxniih] {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fa-topbar-pill-dup[b-f2nqpxniih] {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fa-topbar-dot[b-f2nqpxniih] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.fa-topbar-discard[b-f2nqpxniih] {
    background: rgba(255, 255, 255, 0.15);
    color: var(--fa-text-on-primary, #ffffff);
    border: none;
    border-radius: 50%;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease;
}

.fa-topbar-discard:hover[b-f2nqpxniih] {
    background: rgba(255, 255, 255, 0.3);
}
/* /Pages/Budgets.razor.rz.scp.css */
/* Goals grid: below Fran's own 720px row-to-card breakpoint, drops the Current/
   Progress columns (fa-hide-mobile) — no fa-row-tap here, see Budgets.razor's
   comment on why there's nothing to tap through to yet for goals. */

@media (max-width: 720px) {
    .fa-goals-grid[b-u45h1t8k9z]  .fa-hide-mobile {
        display: none !important;
    }
}
/* /Pages/Categories.razor.rz.scp.css */
/* "Tap a row to edit" affordance, active at every width now — Add/Edit both moved to
   their own routed pages (CategoryNewPage/CategoryEditPage), so there's no more
   desktop inline expand/edit-in-place for this rule to stay inert for (contrast
   Transactions.razor.css's ::deep .fa-row-tap, still gated to mobile only, wherever
   that page still has one). */

.fa-categories-grid[b-jt2vwbn1d7]  .fa-row-tap {
    cursor: pointer;
    display: block;
    width: 100%;
}
/* /Pages/DashboardView.razor.rz.scp.css */
/* Vince Modern Dashboard Styling */

.vince-dashboard[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

/* Header & Quick Action Bar */
.vince-dashboard-header[b-ibua69faen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fa-border-color, #e5e7eb);
}

.vince-dashboard-title-group h2[b-ibua69faen] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fa-text-color, #111827);
}

.vince-dashboard-subtitle[b-ibua69faen] {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: var(--fa-text-muted, #6b7280);
}

.vince-dashboard-actions[b-ibua69faen] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vince-date-selector[b-ibua69faen] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--fa-surface-muted, #f3f4f6);
    padding: 3px 6px;
    border-radius: 8px;
    border: 1px solid var(--fa-border-color, #e5e7eb);
}

.vince-nav-btn[b-ibua69faen] {
    border: 1px solid var(--fa-border-color, #d1d5db);
    background: #ffffff;
    color: var(--fa-text-color, #374151);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    transition: background-color 0.15s ease;
}

.vince-nav-btn:hover[b-ibua69faen] {
    background-color: var(--fa-surface-hover, #e5e7eb);
}

.vince-date-select[b-ibua69faen] {
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--fa-border-color, #d1d5db);
    border-radius: 6px;
    background: #ffffff;
    color: var(--fa-text-color, #111827);
    cursor: pointer;
}

.vince-today-btn[b-ibua69faen] {
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: var(--fa-primary, #047857);
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.vince-today-btn:hover[b-ibua69faen] {
    opacity: 0.9;
}

/* KPI Metric Cards Grid */
.vince-kpi-grid[b-ibua69faen] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.vince-kpi-card[b-ibua69faen] {
    background: var(--fa-card-bg, #ffffff);
    border: 1px solid var(--fa-border-color, #e5e7eb);
    border-radius: var(--fa-radius-lg, 12px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--fa-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vince-kpi-card:hover[b-ibua69faen] {
    transform: translateY(-2px);
    box-shadow: var(--fa-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.vince-kpi-header[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vince-kpi-title[b-ibua69faen] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fa-text-muted, #6b7280);
}

.vince-kpi-icon[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1rem;
}

.vince-kpi-icon.expense[b-ibua69faen] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.vince-kpi-icon.income[b-ibua69faen] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.vince-kpi-icon.savings[b-ibua69faen] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.vince-kpi-icon.activity[b-ibua69faen] {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.vince-kpi-value[b-ibua69faen] {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.vince-kpi-value.expense[b-ibua69faen] {
    color: #dc2626;
}

.vince-kpi-value.income[b-ibua69faen] {
    color: #059669;
}

.vince-kpi-value.savings-positive[b-ibua69faen] {
    color: #059669;
}

.vince-kpi-value.savings-negative[b-ibua69faen] {
    color: #dc2626;
}

.vince-kpi-footer[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--fa-text-muted, #6b7280);
}

.vince-badge[b-ibua69faen] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.vince-badge.positive[b-ibua69faen] {
    background-color: #d1fae5;
    color: #065f46;
}

.vince-badge.negative[b-ibua69faen] {
    background-color: #fee2e2;
    color: #991b1b;
}

.vince-badge.neutral[b-ibua69faen] {
    background-color: #f3f4f6;
    color: #374151;
}

/* Visualizations Section */
.vince-charts-grid[b-ibua69faen] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.25rem;
}

.vince-chart-card[b-ibua69faen] {
    background: var(--fa-card-bg, #ffffff);
    border: 1px solid var(--fa-border-color, #e5e7eb);
    border-radius: var(--fa-radius-lg, 12px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--fa-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.vince-chart-card-header[b-ibua69faen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vince-chart-title[b-ibua69faen] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fa-text-color, #111827);
    margin: 0;
}

.vince-chart-subtitle[b-ibua69faen] {
    font-size: 0.8rem;
    color: var(--fa-text-muted, #6b7280);
    margin: 0.15rem 0 0 0;
}

/* Donut Chart Layout */
.vince-donut-container[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    min-height: 240px;
}

.vince-donut-svg[b-ibua69faen] {
    width: 220px;
    height: 220px;
    transform: rotate(-90deg);
}

.vince-donut-slice[b-ibua69faen] {
    transition: opacity 0.2s ease, transform 0.2s ease, stroke-width 0.2s ease;
    cursor: pointer;
}

.vince-donut-slice:hover[b-ibua69faen],
.vince-donut-slice.highlighted[b-ibua69faen] {
    opacity: 0.85;
    stroke: #ffffff;
    stroke-width: 2px;
}

.vince-donut-center-text[b-ibua69faen] {
    transform: rotate(90deg);
    transform-origin: 110px 110px;
    text-anchor: middle;
    pointer-events: none;
}

.vince-donut-legend[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 220px;
    overflow-y: auto;
    flex: 1;
    min-width: 180px;
    padding-right: 0.5rem;
}

.vince-legend-item[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vince-legend-item:hover[b-ibua69faen],
.vince-legend-item.active[b-ibua69faen] {
    background-color: var(--fa-surface-hover, #f3f4f6);
}

.vince-legend-color[b-ibua69faen] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.vince-legend-label[b-ibua69faen] {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

.vince-legend-value[b-ibua69faen] {
    font-weight: 600;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Bar Chart */
.vince-bar-container[b-ibua69faen] {
    overflow-x: auto;
    width: 100%;
}

.vince-bar-chart[b-ibua69faen] {
    display: block;
    margin: 0 auto;
}

.vince-bar[b-ibua69faen] {
    cursor: pointer;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.vince-bar:hover[b-ibua69faen] {
    opacity: 0.85;
    filter: brightness(1.1);
}

.vince-bar-legend[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

/* Ranked Breakdowns Grid */
.vince-breakdowns-grid[b-ibua69faen] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.vince-breakdown-card[b-ibua69faen] {
    background: var(--fa-card-bg, #ffffff);
    border: 1px solid var(--fa-border-color, #e5e7eb);
    border-radius: var(--fa-radius-lg, 12px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--fa-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.vince-tab-pills[b-ibua69faen] {
    display: inline-flex;
    background-color: var(--fa-surface-muted, #f3f4f6);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.vince-tab-btn[b-ibua69faen] {
    border: none;
    background: transparent;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fa-text-muted, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.vince-tab-btn.active[b-ibua69faen] {
    background: #ffffff;
    color: var(--fa-primary, #047857);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.vince-item-row[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid var(--fa-border-subtle, #f3f4f6);
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.vince-item-row:hover[b-ibua69faen] {
    background-color: var(--fa-surface-hover, #f9fafb);
}

.vince-item-row:last-child[b-ibua69faen] {
    border-bottom: none;
}

.vince-item-info[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow: hidden;
}

.vince-item-title[b-ibua69faen] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fa-text-color, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vince-item-meta[b-ibua69faen] {
    font-size: 0.75rem;
    color: var(--fa-text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vince-item-values[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
}

.vince-item-amount[b-ibua69faen] {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.vince-item-amount.debit[b-ibua69faen] {
    color: #dc2626;
}

.vince-item-amount.credit[b-ibua69faen] {
    color: #059669;
}

/* Progress bar inside cards */
.vince-progress-track[b-ibua69faen] {
    width: 100%;
    height: 6px;
    background-color: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.vince-progress-fill[b-ibua69faen] {
    height: 100%;
    background-color: var(--fa-primary, #047857);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.vince-progress-fill.danger[b-ibua69faen] {
    background-color: #ef4444;
}

.vince-progress-fill.warning[b-ibua69faen] {
    background-color: #f59e0b;
}

/* Empty State Card */
.vince-empty-card[b-ibua69faen] {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--fa-card-bg, #ffffff);
    border: 1px dashed var(--fa-border-color, #d1d5db);
    border-radius: var(--fa-radius-lg, 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 640px;
    margin: 2rem auto;
}

.vince-empty-icon[b-ibua69faen] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
/* /Pages/LedgerImportPage.razor.rz.scp.css */
/* MyTouchTimes style Drag & Drop Zone */
.mtt-dropzone[b-gfrqdwvkgx] {
    position: relative;
    border: 2px dashed var(--fa-border, #CBD5E1);
    border-radius: 12px;
    background: var(--fa-surface-2, #F8FAFC);
    transition: all 0.2s ease-in-out;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mtt-dropzone:hover[b-gfrqdwvkgx] {
    border-color: var(--fa-color-primary, #059669);
    background: #F0FDF4;
}

.mtt-dropzone-active[b-gfrqdwvkgx] {
    border-color: var(--fa-color-primary, #059669);
    background: #ECFDF5;
    transform: scale(1.008);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.15);
}

.mtt-dropzone-parsing[b-gfrqdwvkgx] {
    border-style: solid;
    border-color: #A7F3D0;
    background: var(--fa-surface-2, #F8FAFC);
    cursor: default;
}

.mtt-dropzone-input[b-gfrqdwvkgx],
[b-gfrqdwvkgx] .mtt-dropzone-input,
[b-gfrqdwvkgx] input[type="file"].mtt-dropzone-input,
[b-gfrqdwvkgx] input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 10;
}

.mtt-dropzone-input:disabled[b-gfrqdwvkgx],
[b-gfrqdwvkgx] .mtt-dropzone-input:disabled,
[b-gfrqdwvkgx] input[type="file"].mtt-dropzone-input:disabled,
[b-gfrqdwvkgx] input[type="file"]:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.mtt-dropzone-content[b-gfrqdwvkgx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    pointer-events: none;
}

.mtt-dropzone-icon[b-gfrqdwvkgx] {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ECFDF5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-color-primary, #059669);
    margin-bottom: 0.85rem;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
}

.mtt-scanning-container[b-gfrqdwvkgx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.25rem 1.5rem;
    width: 100%;
}

.mtt-scanner-stage[b-gfrqdwvkgx] {
    position: relative;
    width: 90px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtt-doc-symbol[b-gfrqdwvkgx] {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.mtt-scan-laser[b-gfrqdwvkgx] {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #059669 20%, #34D399 50%, #059669 80%, transparent);
    box-shadow: 0 0 10px #059669;
    animation: scanLaser-b-gfrqdwvkgx 1.8s ease-in-out infinite;
}

@keyframes scanLaser-b-gfrqdwvkgx {
    0% { top: 4px; opacity: 0.2; }
    50% { top: 62px; opacity: 1; }
    100% { top: 4px; opacity: 0.2; }
}

/* Quick Actions Bar below Dropzone */
.dropzone-quick-actions[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* Spreadsheet Sheet Tabs Bar */
.sheet-tabs-bar[b-gfrqdwvkgx] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.sheet-tabs-header[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sheet-tabs-title[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e293b;
    font-size: 0.95rem;
}

.sheet-tabs-sub[b-gfrqdwvkgx] {
    font-size: 0.8rem;
    color: #64748b;
}

.sheet-tabs-chips[b-gfrqdwvkgx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sheet-chip-btn[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sheet-chip-btn:hover:not(:disabled)[b-gfrqdwvkgx] {
    border-color: var(--fa-color-primary, #059669);
    color: var(--fa-color-primary, #059669);
    background: #f0fdf4;
}

.sheet-chip-active[b-gfrqdwvkgx] {
    background: var(--fa-color-primary, #059669) !important;
    border-color: var(--fa-color-primary, #059669) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.sheet-active-pill[b-gfrqdwvkgx] {
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.3);
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dedicated Copy-Paste Section Card */
.paste-section-card[b-gfrqdwvkgx] {
    background: #ffffff;
    border: 1px solid var(--fa-color-border, #e5e7eb);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.paste-section-header[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.paste-row-badge[b-gfrqdwvkgx] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 9999px;
    border: 1px solid #bae6fd;
}

.paste-textarea[b-gfrqdwvkgx] {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--fa-color-border, #d1d5db);
    border-radius: 6px;
    padding: 0.65rem 0.75rem;
    background: #fafafa;
}

.paste-textarea:focus[b-gfrqdwvkgx] {
    background: #ffffff;
    border-color: var(--fa-color-primary, #059669);
    outline: none;
}

.paste-actions-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Paste/Quick-Add Modals */
.paste-modal-overlay[b-gfrqdwvkgx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(2px);
}

.paste-modal-card[b-gfrqdwvkgx] {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 540px;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.paste-modal-header[b-gfrqdwvkgx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

/* Duplicate Row Styling */
.row-duplicate[b-gfrqdwvkgx] {
    opacity: 0.55;
    background: transparent !important;
}

.row-standard[b-gfrqdwvkgx] {
    /* Standard row styling */
}
/* /Pages/Payers.razor.rz.scp.css */
/* "Tap a row to edit" affordance, active at every width now — Add/Edit both moved to
   their own routed pages (PayerNewPage/PayerEditPage), so there's no more desktop
   in-place modal for these cells to stay inert for (contrast Transactions.razor.css's
   ::deep .fa-row-tap, still gated to mobile only, wherever that page still has one).
   pointer-events: auto only on the row's own interactive children (its "N
   subcategories" button, in the Subcategory column) still needs to keep taking clicks
   over the row-level one — @onclick on a child fires before the parent's, but the
   button needs its own hit target regardless. */

.fa-payers-grid[b-mngykuzp4v]  .fa-row-tap {
    cursor: pointer;
    display: block;
    width: 100%;
}

.fa-payers-grid[b-mngykuzp4v]  .fa-row-tap a,
.fa-payers-grid[b-mngykuzp4v]  .fa-row-tap button {
    pointer-events: auto;
}

@media (max-width: 720px) {
    .fa-payers-grid[b-mngykuzp4v]  .fa-hide-mobile {
        display: none !important;
    }
}
/* /Pages/TransactionDetailPage.razor.rz.scp.css */
/* Debit indicator for the Type/Amount fields above — same fa-ember danger token and
   class name as Transactions.razor.css's grid rule, but this page renders its own
   plain <div>s directly (not through FaGrid), so no ::deep is needed to reach them. */
.fa-debit-text[b-8nb7ggw5sq] {
    color: var(--fa-ember);
}
/* /Pages/TransactionImportPage.razor.rz.scp.css */
/* MyTouchTimes style Drag & Drop Zone for Receipts */
.mtt-dropzone[b-6afipsw75h] {
    position: relative;
    border: 2px dashed var(--fa-border, #CBD5E1);
    border-radius: 12px;
    background: var(--fa-surface-2, #F8FAFC);
    transition: all 0.2s ease-in-out;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mtt-dropzone:hover[b-6afipsw75h] {
    border-color: var(--fa-color-primary, #059669);
    background: #F0FDF4;
}

.mtt-dropzone-active[b-6afipsw75h] {
    border-color: var(--fa-color-primary, #059669);
    background: #ECFDF5;
    transform: scale(1.008);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.15);
}

.mtt-dropzone-parsing[b-6afipsw75h] {
    border-style: solid;
    border-color: #A7F3D0;
    background: var(--fa-surface-2, #F8FAFC);
    cursor: default;
}

.mtt-dropzone-input[b-6afipsw75h],
[b-6afipsw75h] .mtt-dropzone-input,
[b-6afipsw75h] input[type="file"].mtt-dropzone-input,
[b-6afipsw75h] input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 10;
}

.mtt-dropzone-input:disabled[b-6afipsw75h],
[b-6afipsw75h] .mtt-dropzone-input:disabled,
[b-6afipsw75h] input[type="file"].mtt-dropzone-input:disabled,
[b-6afipsw75h] input[type="file"]:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.mtt-dropzone-content[b-6afipsw75h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    pointer-events: none;
}

.mtt-dropzone-icon[b-6afipsw75h] {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ECFDF5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-color-primary, #059669);
    margin-bottom: 0.85rem;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
}

.mtt-scanning-container[b-6afipsw75h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.25rem 1.5rem;
    width: 100%;
}

.mtt-scanner-stage[b-6afipsw75h] {
    position: relative;
    width: 90px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mtt-doc-symbol[b-6afipsw75h] {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.mtt-scan-laser[b-6afipsw75h] {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #059669 20%, #34D399 50%, #059669 80%, transparent);
    box-shadow: 0 0 10px #059669;
    animation: scanLaser-b-6afipsw75h 1.8s ease-in-out infinite;
}

@keyframes scanLaser-b-6afipsw75h {
    0% { top: 4px; opacity: 0.2; }
    50% { top: 62px; opacity: 1; }
    100% { top: 4px; opacity: 0.2; }
}

/* Action Buttons below Dropzone */
.dropzone-quick-actions[b-6afipsw75h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* Modals */
.paste-modal-overlay[b-6afipsw75h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(2px);
}

.paste-modal-card[b-6afipsw75h] {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 540px;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.paste-modal-header[b-6afipsw75h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

/* Duplicate Row Styling */
.row-duplicate[b-6afipsw75h] {
    opacity: 0.55;
    background: transparent !important;
}

.row-standard[b-6afipsw75h] {
    /* Standard row styling */
}
/* /Pages/Transactions.razor.rz.scp.css */
/* No <table> anywhere in this page — see Transactions.razor's own comment for
   why. One flex-based row shape (.fa-txn-row, containing .fa-txn-cell children)
   used identically for the header and every transaction; the only thing that
   changes between wide and narrow is flex-direction, flipped by the @container
   query at the bottom of this file — keyed to this div's own rendered width,
   not the browser viewport. That's deliberate: collapsing the sidebar
   (NavMenu.razor's toggle) frees up width for this list without the window
   itself getting any narrower, and a viewport media query can't see that
   difference. */
.fa-transactions-grid[b-3grpcogwuu] {
    container-type: inline-size;
    container-name: fa-transactions-grid;
}

/* Loading overlay + empty-state wrapper — same shape as TransactionForm.razor's
   fa-form-busy-wrapper/fa-form-busy-overlay, renamed for this file since that
   one is scoped to TransactionForm.razor.css and doesn't reach here. position:
   relative here is what lets the overlay below use position: absolute; inset: 0
   to cover exactly this element rather than the whole page. */
.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-busy-wrapper {
    position: relative;
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-grid-loading-overlay {
    --fa-overlay-opacity: 0.25;

    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, var(--fa-overlay-opacity));
    border-radius: var(--fa-radius-md);
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-grid-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--fa-text-muted);
}

/* The outer list shell — same visual framing Fran's own .fa-table carries
   (_table.scss: border/radius/overflow-hidden/shadow), reproduced by hand here
   since nothing here is a real <table> for that styling to come along with for
   free. */
.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-list {
    background: var(--fa-surface);
    border: var(--fa-border-width) solid var(--fa-border);
    border-radius: var(--fa-radius-md);
    overflow: hidden;
    box-shadow: var(--fa-border-glow);
}

/* Every row (header and data alike) is a flex container of the same three
   cells — direction/alignment differ between wide and narrow, but the DOM shape
   never does. row-gap only (no column-gap: wide mode doesn't need one, Date/
   Payer/Amount's own padding is enough; narrow mode's cells fully wrap onto
   their own lines so there's never two cells sharing a line to gap between). */
.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* column-gap only — row-gap is set separately in the compact @container
       block below, where flex-direction switches to column and this same
       property switches from spacing cells horizontally to spacing them
       vertically. Without this, Date/Payer/Amount sit flush against each other
       with nothing between them (confirmed live: rendered as "DatePayer",
       genuinely touching) — cells carry no padding/margin of their own, only
       the row's own padding below, which only ever affects the row's outer
       edges, not the gaps between its own children. */
    column-gap: 0.9rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--fa-border);
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-row:last-child {
    border-bottom: none;
}

/* Data rows (not the header) are the click target — the whole row navigates to
   the transaction's detail page (OpenDetail, Transactions.razor), not just one
   cell, so there's no per-cell "fa-row-link" click-target trick needed the way
   the old <table>-based version had (a table cell's padding isn't covered by a
   plain click handler on the cell itself the way a div's padding is — this flex
   row has no such gap, cursor:pointer plus the click handler already covers the
   full row including its own padding). */
.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-row:not(.fa-txn-header) {
    cursor: pointer;
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-row:hover:not(.fa-txn-header) {
    background: rgba(232, 135, 61, 0.08);
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-header {
    background: var(--fa-footer);
    font-weight: 700;
    color: var(--fa-primary-dark);
}

/* Payer is the only cell that actually grows/shrinks to fill the row (flex: 1 1
   auto, min-width: 0 so its own ellipsis truncation — below — can kick in
   instead of forcing the row wider). Date and Amount are both fixed to their own
   content width (flex: 0 0 auto) rather than splitting the row into equal
   thirds — a date string is always the same length ("yyyy-MM-dd"), so sizing it
   to content keeps every row's Date column the same width without needing an
   explicit measurement, same as a real table's own column-width algorithm would
   have given it. Both Date and Payer's header cells carry the matching
   fa-txn-date-cell/fa-txn-payer-cell classes too (Transactions.razor), not just
   their data-row counterparts — needed for the header column to actually line
   up with the data below it, since otherwise the header's plain .fa-txn-cell
   rule and the data row's more specific rule would size differently. */
.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-cell {
    flex: 0 0 auto;
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-payer-cell {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-amount-cell {
    margin-left: auto;
    text-align: right;
}

/* An explicit width, not just flex: 0 0 auto (content-sized) — each .fa-txn-row
   is its own independent flex container (unlike a real table's columns, or a
   CSS Grid's, flexbox has no notion of a column shared across separate flex
   containers), so content-sizing alone gave the header row's Date cell
   ("Date", short) a different width than every data row's own Date cell
   ("yyyy-MM-dd", longer) — Payer's own start position shifted between the
   header and data rows as a result, genuinely misaligned, not just a text-align
   issue. Confirmed live: header Payer cell's left edge measured ~47px to the
   left of the data rows' Payer cells. A date string is always the same length
   ("yyyy-MM-dd" — 10 characters), so a fixed width sized for that (in ch units,
   which scale with the font like rem rather than being a raw pixel guess) keeps
   every row's Date column identical regardless of which row (header or data)
   happens to be shorter on its own. */
.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-date-cell {
    width: 11ch;
    color: var(--fa-text-muted);
    white-space: nowrap;
}

/* Debit indicator — Fran's own --fa-ember danger token, plus a real "−" sign
   from its own negation in C#, not color alone, so the distinction still reads
   for colorblind users. */
.fa-transactions-grid[b-3grpcogwuu]  .fa-debit-text {
    color: var(--fa-ember);
}

/* Below 400px of the grid's *own* rendered width (see container-type above, not
   a viewport media query) — the header disappears (Date/Payer/Amount as column
   labels don't earn their space this small) and every data row's three cells
   stack into their own full-width lines instead of sitting side by side. 400px
   (not higher) is deliberate: down to that width the wide row-based layout
   stays put; this only takes over once there genuinely isn't room for it. */
@container fa-transactions-grid (max-width: 400px) {
    /* Custom properties, not a fixed rem value: the *bounds* are rem (0.25rem/
       0.4rem, 0.35rem/0.6rem) so padding never breaks relative to the user's own
       font-size/zoom settings, but the middle clamp() argument is cqw (a
       percentage of *this container's* width, matching container-type above —
       not vw, which would track the viewport instead), so the actual padding
       shrinks smoothly as the container narrows instead of jumping between
       fixed steps. Declared on .fa-txn-list (a descendant), not on
       .fa-transactions-grid itself — cqw/cqi container-query units are invalid
       (resolve to nothing, silently dropping the whole declaration) in a
       property set directly on the element that establishes the query
       container. Confirmed live (on an earlier version of this file): every
       value computed to 0px, completely invisibly, until moved off the
       container element itself. */
    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-list {
        --fa-txn-pad-block: clamp(0.25rem, 2cqw, 0.4rem);
        --fa-txn-pad-inline: clamp(0.35rem, 3cqw, 0.6rem);
    }

    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-header {
        display: none;
    }

    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-row {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: var(--fa-txn-pad-block);
        padding: var(--fa-txn-pad-block) var(--fa-txn-pad-inline);
    }

    /* Every cell (Payer included, whose wide-layout flex: 1 1 auto would
       otherwise still apply — same specificity as this rule, but this one comes
       later in the file) drops to flex: 0 0 auto, natural content height —
       cells don't need to grow/compete for space once they're stacked, each
       just wants its own content height. Necessary, not cosmetic: Payer's own
       flex-grow left its height up to the flex algorithm alone, and a flex
       item's automatic minimum size resolves to 0 (not its content size)
       whenever the item's own overflow isn't visible — which
       .fa-txn-payer-cell's overflow: hidden (for its ellipsis) always is.
       Confirmed live: Payer collapsed to computed height: 0, invisible despite
       its text genuinely being there, until this rule was added. */
    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-cell {
        flex: 0 0 auto;
    }

    /* Payer still grows/shrinks to fill the row here too — same as the wide
       layout's own .fa-txn-payer-cell rule above, restated because it'd
       otherwise lose to the general .fa-txn-cell override just above (same
       specificity, later in the file wins). */
    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-payer-cell {
        flex: 1 1 auto;
    }

    /* Date's fixed wide-layout width (11ch, see .fa-txn-date-cell above) would
       otherwise block align-items: stretch above from giving it the full row
       width here — an explicit width always wins over stretch, which only ever
       applies when the relevant size is auto. */
    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-date-cell {
        width: auto;
    }

    /* Amount goes back to left-aligned — there's nothing to its right on its own
       line to align against anymore (text-align: right, from the wide layout,
       would otherwise still apply here too). */
    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-amount-cell {
        margin-left: 0;
        text-align: left;
    }
}