/* /Components/LoadingIndicator.razor.rz.scp.css */
/* ==========================================================================
   Vince Loading Overlay & Indicator Component Styles
   Provides a prominent greyed-out overlay to block interactions during loading
   and displays a clear, high-contrast centered card for maximum icon visibility.
   ========================================================================== */

/* Greyed-out backdrop overlay that disables user interactions */
.vince-loading-overlay[b-651qtje49o] {
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: all;
    user-select: none;
    cursor: wait;
    z-index: 999999 !important;
}

.vince-loading-fullscreen[b-651qtje49o] {
    position: fixed;
    inset: 0;
    z-index: 999999 !important;
}

.vince-loading-relative[b-651qtje49o] {
    position: absolute;
    inset: 0;
    z-index: 999999 !important;
    border-radius: inherit;
}

/* Polished naked loading content without card container */
.vince-loading-content[b-651qtje49o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    text-align: center;
    pointer-events: auto;
    animation: vince-fade-scale-b-651qtje49o 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure growth loader is vivid, sharp, and clearly visible on backdrop */
.vince-loading-content[b-651qtje49o]  .fa-growth-stage,
.vince-loading-inline[b-651qtje49o]  .fa-growth-stage {
    border-bottom: 2.5px solid var(--fa-primary) !important;
}

.vince-loading-content[b-651qtje49o]  .fa-growth-bar,
.vince-loading-inline[b-651qtje49o]  .fa-growth-bar {
    display: block !important;
    background: linear-gradient(180deg, var(--fa-primary) 0%, var(--fa-primary-dark) 100%) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Limit loader strictly to the animated growth bar graph (no yellow circle or currency symbol) */
.vince-loading-content[b-651qtje49o]  .fa-growth-spark,
.vince-loading-inline[b-651qtje49o]  .fa-growth-spark,
.vince-loading-content[b-651qtje49o]  .fa-growth-currency-symbol,
.vince-loading-inline[b-651qtje49o]  .fa-growth-currency-symbol {
    display: none !important;
}

.vince-loading-message[b-651qtje49o] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fa-text-on-primary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: -0.01em;
    margin: 0;
}

/* Inline mode for smaller grids / embedded locations */
.vince-loading-inline[b-651qtje49o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 0.75rem;
}

.vince-loading-message-inline[b-651qtje49o] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fa-text-muted);
}

@keyframes vince-fade-scale-b-651qtje49o {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /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. */

/* Lock primary topbar height and padding to ensure pixel-perfect synchronization with sticky secondary row */
.fa-app-shell[b-f2nqpxniih]  .fa-header {
    height: var(--fa-header-height, 4rem) !important;
    min-height: var(--fa-header-height, 4rem) !important;
    max-height: var(--fa-header-height, 4rem) !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Vince Header Brand Logo */
.fa-app-shell[b-f2nqpxniih]  .fa-header .fa-header-brand {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 0.15rem 0 !important;
}

.fa-app-shell[b-f2nqpxniih]  .fa-header .fa-header-brand-icon {
    height: 1.85rem !important;
    width: auto !important;
    max-height: 32px !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Ensure full Vince logo is used and preserved on small/mobile screens (no icon swapping or shrinking) */
@media (max-width: 720px) {
    .fa-app-shell[b-f2nqpxniih]  .fa-header .fa-header-brand-icon {
        height: 1.75rem !important;
        width: auto !important;
        display: block !important;
    }
}

/* 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);
    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: var(--fa-text-on-primary);
    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: var(--fa-accent);
    color: var(--fa-text-on-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fa-topbar-pill-dup[b-f2nqpxniih] {
    background: var(--fa-gold);
    color: var(--fa-text-on-primary);
    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);
    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);
}

/* Mobile Bottom Navigation Bar (Docked to Thumb Zone) */
.vince-mobile-bottom-nav[b-f2nqpxniih] {
    display: none;
}

@media (max-width: 720px) {
    /* Ensure page content has bottom padding so it never hides behind the bottom nav */
    .fa-app-shell[b-f2nqpxniih]  .fa-shell-content {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* On mobile screens, hide desktop secondary topbar row and hamburger toggle */
    [b-f2nqpxniih] .fa-header-subnav-row,
    [b-f2nqpxniih] .fa-shell-subnav-row,
    [b-f2nqpxniih] .fa-subnav,
    [b-f2nqpxniih] .fa-subnav-mobile-bar,
    [b-f2nqpxniih] .fa-header-nav-toggle,
    .fa-app-shell[b-f2nqpxniih]  .fa-header-subnav-row,
    .fa-app-shell[b-f2nqpxniih]  .fa-shell-subnav-row,
    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-nav,
    .fa-app-shell[b-f2nqpxniih]  .fa-header-nav-toggle,
    .fa-header-subnav-row[b-f2nqpxniih],
    .fa-shell-subnav-row[b-f2nqpxniih],
    .fa-subnav[b-f2nqpxniih],
    .fa-subnav-mobile-bar[b-f2nqpxniih],
    .vince-topbar-nav[b-f2nqpxniih],
    .fa-header-nav-toggle[b-f2nqpxniih] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }

    .vince-mobile-bottom-nav[b-f2nqpxniih] {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        min-height: calc(56px + env(safe-area-inset-bottom, 0px));
        background: var(--fa-surface);
        border-top: 1px solid var(--fa-border);
        z-index: 100;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
        padding-top: 6px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }

    .vince-mobile-nav-container[b-f2nqpxniih] {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        margin: 0;
        padding: 0 0.5rem;
        box-sizing: border-box;
    }

    .vince-mobile-nav-item[b-f2nqpxniih] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        margin: 0 2px;
        border-radius: var(--fa-radius-md, 6px);
        color: var(--fa-text-muted) !important;
        text-decoration: none;
        transition: all 0.15s ease;
    }

    .vince-mobile-nav-item svg[b-f2nqpxniih],
    .vince-mobile-nav-item[b-f2nqpxniih]  svg,
    .vince-mobile-nav-item .fa-icon[b-f2nqpxniih],
    .vince-mobile-nav-item[b-f2nqpxniih]  .fa-icon {
        color: inherit !important;
        fill: currentColor !important;
        opacity: 0.85;
    }

    .vince-mobile-nav-item:hover[b-f2nqpxniih],
    .vince-mobile-nav-item.active[b-f2nqpxniih] {
        color: var(--fa-text) !important;
        background: rgba(120, 180, 140, 0.14) !important;
    }

    .vince-mobile-nav-item:hover svg[b-f2nqpxniih],
    .vince-mobile-nav-item:hover[b-f2nqpxniih]  svg,
    .vince-mobile-nav-item.active svg[b-f2nqpxniih],
    .vince-mobile-nav-item.active[b-f2nqpxniih]  svg,
    .vince-mobile-nav-item.active .fa-icon[b-f2nqpxniih],
    .vince-mobile-nav-item.active[b-f2nqpxniih]  .fa-icon {
        color: inherit !important;
        fill: currentColor !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   Secondary Topbar Navigation Row (Desktop & Tablet)
   Standalone row traversing 100% full-width across the entire page
   ========================================================================== */
@media (min-width: 721px) {
    /* Unified Sticky Header Group: pins primary header + secondary row as ONE sticky unit at top: 0 with zero jitter */
    .fa-app-shell[b-f2nqpxniih]  .fa-header-group.fa-header-sticky {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        width: 100% !important;
    }

    .fa-app-shell[b-f2nqpxniih]  .fa-header-group .fa-header {
        position: relative !important;
        top: auto !important;
        box-shadow: none !important;
    }

    .fa-app-shell[b-f2nqpxniih]  .fa-header-group .fa-header-subnav-row,
    .fa-app-shell[b-f2nqpxniih]  .fa-header-group .fa-shell-subnav-row {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
    }

    .fa-app-shell[b-f2nqpxniih]  .fa-header-subnav-row,
    .fa-app-shell[b-f2nqpxniih]  .fa-shell-subnav-row {
        background: var(--fa-primary-dark) !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.22) !important;
        padding: 0 1.5rem !important;
        width: 100% !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16) !important;
        box-sizing: border-box !important;
        position: sticky !important;
        top: var(--fa-header-height, 4rem) !important;
        z-index: 39 !important;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-nav {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-nav-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        width: 100%;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.85rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--fa-text-on-primary) !important;
        text-decoration: none;
        border-radius: var(--fa-radius-sm, 6px);
        transition: all 0.15s ease;
        white-space: nowrap;
        opacity: 0.9;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-link:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.16);
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-link.active,
    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-group.active-route > .vince-topbar-link {
        opacity: 1;
        background: rgba(255, 255, 255, 0.24);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
        font-weight: 700;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-icon {
        display: flex;
        align-items: center;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-caret {
        font-size: 0.75rem;
        opacity: 0.8;
        margin-left: 0.15rem;
        transition: transform 0.15s ease;
    }

    /* Dropdown Group and Menu */
    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-group {
        position: relative;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-group:hover .vince-topbar-caret,
    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-group:focus-within .vince-topbar-caret {
        transform: rotate(180deg);
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        min-width: 260px;
        background: var(--fa-surface);
        color: var(--fa-text);
        border: 1px solid var(--fa-border);
        border-radius: var(--fa-radius-md, 12px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1);
        padding: 0.5rem;
        display: none;
        flex-direction: column;
        gap: 0.25rem;
        z-index: 1000;
        animation: vince-dropdown-pop-b-f2nqpxniih 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-group:hover .vince-topbar-dropdown-menu,
    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-group:focus-within .vince-topbar-dropdown-menu {
        display: flex;
    }

    @keyframes vince-dropdown-pop-b-f2nqpxniih {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-item {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.55rem 0.75rem;
        border-radius: var(--fa-radius-sm, 8px);
        text-decoration: none;
        color: var(--fa-text) !important;
        transition: background 0.12s ease;
        cursor: pointer;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-item:hover,
    .fa-app-shell[b-f2nqpxniih]  .vince-topbar-dropdown-item.active {
        background: rgba(120, 180, 140, 0.14) !important;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-dropdown-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-top: 2px;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-dropdown-item-text {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-dropdown-item-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--fa-text);
    }

    .fa-app-shell[b-f2nqpxniih]  .vince-dropdown-item-desc {
        font-size: 0.73rem;
        color: var(--fa-text-muted);
        line-height: 1.25;
    }
}

/* ==========================================================================
   Global Footer (Unified Accent Color, no white card, no border)
   ========================================================================== */
.fa-app-shell[b-f2nqpxniih]  .fa-footer {
    background: var(--fa-accent) !important;
    border-top: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.fa-app-shell[b-f2nqpxniih]  .vince-global-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: var(--fa-accent) !important;
    border-top: none !important;
    border: none !important;
    box-shadow: none !important;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--fa-text-on-primary) !important;
    width: 100%;
}

.fa-app-shell[b-f2nqpxniih]  .vince-footer-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.fa-app-shell[b-f2nqpxniih]  .vince-footer-logo {
    height: 22px;
    width: auto;
}

.fa-app-shell[b-f2nqpxniih]  .vince-footer-vault-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--fa-radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fa-text-on-primary) !important;
}

.fa-app-shell[b-f2nqpxniih]  .vince-footer-right {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure the page body content stays flex and scales responsively without horizontal overflow */
.fa-app-shell[b-f2nqpxniih]  .fa-shell-main {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

@media (max-width: 720px) {
    .fa-app-shell[b-f2nqpxniih]  .vince-global-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}


/* /Layout/NavMenu.razor.rz.scp.css */
/* Navigation group with parent link and optional sub-links */
.fa-nav-group[b-8glsbtpvt5] {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0.15rem;
}

/* Sub-group indented under the parent link when expanded */
.fa-sidebar-subgroup[b-8glsbtpvt5] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.2rem 0 0.4rem 1.4rem;
    padding-left: 0.5rem;
    border-left: 1.5px solid rgba(255, 255, 255, 0.22);
    animation: fa-subgroup-expand-b-8glsbtpvt5 0.18s ease-out;
}

@keyframes fa-subgroup-expand-b-8glsbtpvt5 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fa-sidebar-sublink[b-8glsbtpvt5],
a.fa-sidebar-sublink[b-8glsbtpvt5],
label.fa-sidebar-sublink[b-8glsbtpvt5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--fa-radius-sm, 6px);
    background: rgba(0, 0, 0, 0.14);
    color: var(--fa-text-on-primary) !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.95;
    transition: background-color var(--fa-transition-fast, 0.15s ease), opacity var(--fa-transition-fast, 0.15s ease), transform var(--fa-transition-fast, 0.15s ease);
    position: relative;
    min-width: 0;
}

.fa-sidebar-sublink:hover[b-8glsbtpvt5],
a.fa-sidebar-sublink:hover[b-8glsbtpvt5],
label.fa-sidebar-sublink:hover[b-8glsbtpvt5] {
    background: rgba(0, 0, 0, 0.24);
    opacity: 1;
    color: var(--fa-text-on-primary) !important;
    transform: translateX(2px);
}

.fa-sidebar-sublink.active[b-8glsbtpvt5],
a.fa-sidebar-sublink.active[b-8glsbtpvt5] {
    background: rgba(0, 0, 0, 0.36);
    opacity: 1;
    color: var(--fa-text-on-primary) !important;
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--fa-glow, rgba(255, 255, 255, 0.4));
}

.fa-sublink-label[b-8glsbtpvt5] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fa-text-on-primary) !important;
    flex: 1;
    min-width: 0;
}

.fa-sublink-suffix[b-8glsbtpvt5] {
    font-family: var(--fa-font-mono, monospace);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 0.85;
    flex-shrink: 0;
}

/* Category & Account icon styling */
.fa-sublink-icon[b-8glsbtpvt5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--fa-radius-sm, 4px);
    background: rgba(0, 0, 0, 0.18);
    color: var(--fa-text-on-primary) !important;
}

.fa-sublink-icon svg[b-8glsbtpvt5] {
    color: var(--fa-text-on-primary) !important;
    fill: currentColor !important;
}

.fa-sublink-icon.dot-bank svg[b-8glsbtpvt5],
.fa-sublink-icon.icon-bank svg[b-8glsbtpvt5],
.fa-sublink-icon.dot-credit svg[b-8glsbtpvt5],
.fa-sublink-icon.icon-credit svg[b-8glsbtpvt5],
.fa-sublink-icon.dot-invest svg[b-8glsbtpvt5],
.fa-sublink-icon.icon-invest svg[b-8glsbtpvt5],
.fa-sublink-icon.dot-all svg[b-8glsbtpvt5],
.fa-sublink-icon.icon-all svg[b-8glsbtpvt5] {
    color: var(--fa-text-on-primary) !important;
}

/* Category & Account dots (backward compatibility) */
.fa-sublink-dot[b-8glsbtpvt5] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.7);
}

.dot-all[b-8glsbtpvt5],
.dot-bank[b-8glsbtpvt5],
.dot-credit[b-8glsbtpvt5],
.dot-invest[b-8glsbtpvt5] {
    background: rgba(0, 0, 0, 0.18);
}

/* Thin white indicator line under header icon when sub-buttons are available */
[b-8glsbtpvt5] .fa-nav-group.is-expanded > .fa-sidebar-link .fa-nav-icon,
.fa-nav-group.is-expanded > .fa-sidebar-link .fa-nav-icon[b-8glsbtpvt5] {
    position: relative;
}

[b-8glsbtpvt5] .fa-nav-group.is-expanded > .fa-sidebar-link .fa-nav-icon::after,
.fa-nav-group.is-expanded > .fa-sidebar-link .fa-nav-icon[b-8glsbtpvt5]::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 1.5px;
    background: var(--fa-text-on-primary) !important;
    border-radius: 1px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
}

[b-8glsbtpvt5] html.fa-sidebar-collapsed .fa-sidebar-subgroup::before,
html.fa-sidebar-collapsed .fa-sidebar-subgroup[b-8glsbtpvt5]::before {
    display: none !important;
}

/* When the sidebar is collapsed, sublink icons remain visible inline */
[b-8glsbtpvt5] html.fa-sidebar-collapsed .fa-sidebar-sublink .fa-sublink-icon,
html.fa-sidebar-collapsed .fa-sidebar-sublink .fa-sublink-icon[b-8glsbtpvt5] {
    background: transparent !important;
}

label.fa-sidebar-upload-sublink[b-8glsbtpvt5] {
    cursor: pointer;
}

/* Ensure nav groups do not clip popovers when collapsed */
[b-8glsbtpvt5] html.fa-sidebar-collapsed .fa-nav-group,
html.fa-sidebar-collapsed .fa-nav-group[b-8glsbtpvt5] {
    overflow: visible !important;
}
/* /Pages/Account.razor.rz.scp.css */
/* FaCard/FaAvatar render their own root elements — CSS isolation only scopes
   elements literally authored in this file, so reaching their rendered markup
   needs ::deep (same reasoning as MainLayout.razor.css's own comment). */
[b-xz3q7azug6] .fa-account-page-card {
    max-width: 28rem;
}

.fa-account-page-identity[b-xz3q7azug6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

[b-xz3q7azug6] .fa-account-page-avatar {
    width: 3rem;
    height: 3rem;
    font-size: 1.1rem;
}

.fa-account-page-name[b-xz3q7azug6] {
    font-weight: 700;
}
/* /Pages/Accounts.razor.rz.scp.css */
.accounts-header[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.accounts-actions[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .accounts-header[b-ck99eh2ewv] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .accounts-actions[b-ck99eh2ewv] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .accounts-actions button:first-child[b-ck99eh2ewv] {
        grid-column: 1 / -1;
    }
}

/* Stat Grid */
.account-stat-grid[b-ck99eh2ewv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}


.account-stat-card[b-ck99eh2ewv] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-md, 10px);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.net-worth-card[b-ck99eh2ewv] {
    border-color: var(--fa-accent);
    background: var(--fa-surface);
}

.stat-header[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--fa-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value[b-ck99eh2ewv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fa-text);
    font-family: var(--fa-font-mono, monospace);
    letter-spacing: -0.02em;
}

.credit-card-val[b-ck99eh2ewv] {
    color: var(--fa-ember);
}

.investment-val[b-ck99eh2ewv] {
    color: var(--fa-accent);
}

.positive-val[b-ck99eh2ewv] {
    color: var(--fa-accent);
}

.negative-val[b-ck99eh2ewv] {
    color: var(--fa-ember);
}

.stat-subtext[b-ck99eh2ewv] {
    font-size: 0.75rem;
    color: var(--fa-text-muted);
}

/* Active Category Header */
.active-category-header[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--fa-border);
}

.active-category-title[b-ck99eh2ewv] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fa-text);
}

/* Accounts Grid */
.accounts-grid[b-ck99eh2ewv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem;
}

.account-card[b-ck99eh2ewv] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-lg, 12px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.account-card:hover[b-ck99eh2ewv] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: var(--fa-border);
}

.primary-account-card[b-ck99eh2ewv] {
    border-color: var(--fa-gold);
    background: var(--fa-surface);
}

.account-card-header[b-ck99eh2ewv] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.account-icon-wrapper[b-ck99eh2ewv] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-bank[b-ck99eh2ewv] {
    background: var(--fa-alert-info-bg);
    color: var(--fa-primary);
}

.icon-credit[b-ck99eh2ewv] {
    background: var(--fa-alert-danger-bg);
    color: var(--fa-ember);
}

.icon-invest[b-ck99eh2ewv] {
    background: var(--fa-alert-success-bg);
    color: var(--fa-accent);
}

.account-title-group[b-ck99eh2ewv] {
    flex: 1;
    min-width: 0;
}

.account-name[b-ck99eh2ewv] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fa-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.primary-badge[b-ck99eh2ewv] {
    background: var(--fa-alert-info-bg);
    color: var(--fa-gold);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--fa-gold);
}

.account-meta[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--fa-text-muted);
}

.type-pill[b-ck99eh2ewv] {
    background: var(--fa-footer);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.institution-name[b-ck99eh2ewv] {
    font-weight: 500;
}

.account-card-body[b-ck99eh2ewv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--fa-border);
    border-bottom: 1px solid var(--fa-border);
}

.account-balance-section[b-ck99eh2ewv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.balance-label[b-ck99eh2ewv] {
    font-size: 0.75rem;
    color: var(--fa-text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.balance-value[b-ck99eh2ewv] {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: var(--fa-font-mono, monospace);
}

.credit-balance[b-ck99eh2ewv] {
    color: var(--fa-ember);
}

.normal-balance[b-ck99eh2ewv] {
    color: var(--fa-text);
}

.account-number-section[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.account-number-pill[b-ck99eh2ewv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.mono-number[b-ck99eh2ewv] {
    font-family: var(--fa-font-mono, monospace);
    letter-spacing: 0.05em;
    color: var(--fa-text-muted);
}

.vault-active-tag[b-ck99eh2ewv] {
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--fa-alert-success-bg);
    color: var(--fa-accent);
    border: 1px solid var(--fa-accent);
    border-radius: 4px;
    padding: 1px 6px;
}

/* Footer Actions */
.account-card-footer[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.footer-links[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.card-action-btn[b-ck99eh2ewv] {
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    border-radius: 6px;
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fa-text);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.card-action-btn:hover[b-ck99eh2ewv] {
    background: var(--fa-footer);
    border-color: var(--fa-border);
}

.footer-menu[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-icon-btn[b-ck99eh2ewv] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-text-muted);
    transition: all 0.15s ease;
}

.card-icon-btn:hover[b-ck99eh2ewv] {
    background: var(--fa-footer);
    color: var(--fa-text);
}

.card-icon-btn.delete-btn:hover[b-ck99eh2ewv] {
    background: var(--fa-alert-danger-bg);
    color: var(--fa-ember);
}

/* Empty State */
.accounts-empty-card[b-ck99eh2ewv] {
    padding: 3rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--fa-border);
    background: var(--fa-surface);
    border-radius: 12px;
}

.empty-icon-circle[b-ck99eh2ewv] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fa-footer);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* Modal Form Controls */
.modal-form-body[b-ck99eh2ewv] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.25rem 0;
}

.form-row[b-ck99eh2ewv] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.form-group[b-ck99eh2ewv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-label[b-ck99eh2ewv] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fa-text);
}

.form-hint[b-ck99eh2ewv] {
    font-size: 0.725rem;
    color: var(--fa-text-muted);
    line-height: 1.3;
}

.mono-input[b-ck99eh2ewv] {
    font-family: var(--fa-font-mono, monospace);
    letter-spacing: 0.05em;
}

.checkbox-label[b-ck99eh2ewv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

/* Bank Aggregation & Connections Section */
.connections-section[b-ck99eh2ewv] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-lg, 12px);
    padding: 1rem 1.25rem;
}

.connections-header[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.connections-title[b-ck99eh2ewv] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fa-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.connections-count-badge[b-ck99eh2ewv] {
    background: var(--fa-alert-info-bg);
    color: var(--fa-primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
}

.connections-grid[b-ck99eh2ewv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.connection-card[b-ck99eh2ewv] {
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.connection-info[b-ck99eh2ewv] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.connection-name-row[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.connection-name[b-ck99eh2ewv] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fa-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-status-pill[b-ck99eh2ewv] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--fa-footer);
    color: var(--fa-text-muted);
}

.status-connected[b-ck99eh2ewv] {
    background: var(--fa-alert-success-bg);
    color: var(--fa-accent);
}

.connection-meta[b-ck99eh2ewv] {
    font-size: 0.75rem;
    color: var(--fa-text-muted);
}

.connection-actions[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.conn-action-btn[b-ck99eh2ewv] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fa-text);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.conn-action-btn:hover:not(:disabled)[b-ck99eh2ewv] {
    background: rgba(120, 180, 140, 0.14);
    border-color: var(--fa-border-focus);
}

.conn-action-btn:disabled[b-ck99eh2ewv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.conn-icon-btn[b-ck99eh2ewv] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-text-muted);
    transition: all 0.15s ease;
}

.conn-icon-btn:hover:not(:disabled)[b-ck99eh2ewv] {
    background: var(--fa-alert-danger-bg);
    color: var(--fa-ember);
}

/* Sync Promo Banner */
.sync-banner[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--fa-alert-info-bg);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-lg, 12px);
    flex-wrap: wrap;
}

.sync-banner-content[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 280px;
}

.sync-banner-icon[b-ck99eh2ewv] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--fa-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.sync-banner-title[b-ck99eh2ewv] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fa-primary);
    margin-bottom: 0.2rem;
}

.sync-banner-desc[b-ck99eh2ewv] {
    font-size: 0.825rem;
    color: var(--fa-primary);
    line-height: 1.35;
}

.sync-banner-btn[b-ck99eh2ewv] {
    white-space: nowrap;
}

/* Sync Badge on Account Cards */
.sync-badge[b-ck99eh2ewv] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--fa-alert-success-bg);
    color: var(--fa-accent);
    border: 1px solid var(--fa-accent);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

.sync-dot[b-ck99eh2ewv] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fa-accent);
    display: inline-block;
}

/* Connect Modal Styles */
.connect-modal-body[b-ck99eh2ewv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-institutions-label[b-ck99eh2ewv] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fa-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quick-institutions-grid[b-ck99eh2ewv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.institution-quick-btn[b-ck99eh2ewv] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.institution-quick-btn:hover:not(:disabled)[b-ck99eh2ewv] {
    border-color: var(--fa-border-focus);
    background: rgba(120, 180, 140, 0.14);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.institution-quick-btn.category-btn-selected[b-ck99eh2ewv] {
    border-color: var(--fa-accent);
    background: var(--fa-alert-success-bg);
    box-shadow: 0 0 0 2px var(--fa-accent);
}

.institution-quick-btn:disabled[b-ck99eh2ewv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.inst-icon-circle[b-ck99eh2ewv] {
    font-size: 1.4rem;
    line-height: 1;
}

.inst-details[b-ck99eh2ewv] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.inst-name[b-ck99eh2ewv] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fa-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inst-sub[b-ck99eh2ewv] {
    font-size: 0.725rem;
    color: var(--fa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.divider-or[b-ck99eh2ewv] {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--fa-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0.25rem 0;
}

.divider-or[b-ck99eh2ewv]::before,
.divider-or[b-ck99eh2ewv]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--fa-border);
}

.divider-or span[b-ck99eh2ewv] {
    padding: 0 0.75rem;
}

/* /Pages/Budgets.razor.rz.scp.css */
/* Vince Budget & Cashflow Runway Styling */

.vince-runway-header[b-u45h1t8k9z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.vince-runway-title[b-u45h1t8k9z] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fa-text);
}

.vince-runway-subtitle[b-u45h1t8k9z] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--fa-text-muted);
}

.vince-horizon-selector[b-u45h1t8k9z] {
    display: flex;
    gap: 0.25rem;
    background: var(--fa-footer);
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--fa-border);
}

.vince-horizon-btn[b-u45h1t8k9z] {
    border: none;
    background: transparent;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    color: var(--fa-text-muted);
    transition: all 0.15s ease-in-out;
}

.vince-horizon-btn:hover[b-u45h1t8k9z] {
    color: var(--fa-text);
    background: rgba(0, 0, 0, 0.05);
}

.vince-horizon-btn.active[b-u45h1t8k9z] {
    background: var(--fa-surface);
    color: var(--fa-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* KPI Runway Grid */
.vince-runway-kpis[b-u45h1t8k9z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.vince-kpi-card[b-u45h1t8k9z] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vince-kpi-header[b-u45h1t8k9z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.vince-kpi-title[b-u45h1t8k9z] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fa-text-muted);
}

.vince-kpi-value[b-u45h1t8k9z] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fa-text);
    margin-bottom: 0.35rem;
}

.vince-kpi-value.surplus[b-u45h1t8k9z] {
    color: var(--fa-accent);
}

.vince-kpi-value.deficit[b-u45h1t8k9z] {
    color: var(--fa-ember);
}

.vince-kpi-value.expense[b-u45h1t8k9z] {
    color: var(--fa-text-muted);
}

.vince-kpi-footer[b-u45h1t8k9z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--fa-text-muted);
}

/* Status Banner */
.vince-runway-status-banner[b-u45h1t8k9z] {
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vince-runway-status-banner.sufficient[b-u45h1t8k9z] {
    background: var(--fa-alert-success-bg);
    border: 1px solid var(--fa-accent);
    color: var(--fa-accent);
}

.vince-runway-status-banner.shortfall[b-u45h1t8k9z] {
    background: var(--fa-alert-danger-bg);
    border: 1px solid var(--fa-ember);
    color: var(--fa-ember);
}

.vince-status-content[b-u45h1t8k9z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vince-status-icon[b-u45h1t8k9z] {
    font-size: 1.25rem;
}

.vince-status-text strong[b-u45h1t8k9z] {
    display: block;
    font-size: 0.9375rem;
}

.vince-status-text span[b-u45h1t8k9z] {
    font-size: 0.8125rem;
    opacity: 0.9;
}

/* Inferred suggestions banner */
.vince-inferred-card[b-u45h1t8k9z] {
    background: var(--fa-alert-info-bg);
    border: 1px solid var(--fa-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
}

.vince-inferred-title[b-u45h1t8k9z] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fa-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vince-inferred-list[b-u45h1t8k9z] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.vince-inferred-row[b-u45h1t8k9z] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--fa-text);
}

/* Sections */
.vince-section[b-u45h1t8k9z] {
    margin-bottom: 2rem;
}

.vince-section-title-wrap[b-u45h1t8k9z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vince-section-h2[b-u45h1t8k9z] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fa-text);
    margin: 0;
}

/* Budget category progress */
.vince-category-budget-row[b-u45h1t8k9z] {
    margin-bottom: 0.75rem;
}

.vince-budget-progress-track[b-u45h1t8k9z] {
    background: var(--fa-border);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}

.vince-budget-progress-bar[b-u45h1t8k9z] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.vince-budget-progress-bar.good[b-u45h1t8k9z] {
    background: var(--fa-accent);
}

.vince-budget-progress-bar.warning[b-u45h1t8k9z] {
    background: var(--fa-gold);
}

.vince-budget-progress-bar.danger[b-u45h1t8k9z] {
    background: var(--fa-ember);
}

/* Goals grid */
@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%;
}

/* Ensure the loading opacity overlay is z-index greater than any chrome, header, or element on the page */
.fa-categories-grid[b-jt2vwbn1d7]  .fa-grid-loading-overlay {
    z-index: 999999 !important;
}

/* /Pages/DashboardView.razor.rz.scp.css */
/* Vince Modern Dashboard Styling — Built strictly on Fran Design System tokens */

.vince-dashboard[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 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: var(--fa-border-width, 1px) solid var(--fa-border);
}

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

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

.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);
    padding: 3px 6px;
    border-radius: var(--fa-radius-sm, 8px);
    border: var(--fa-border-width, 1px) solid var(--fa-border);
    box-shadow: var(--fa-border-glow);
}

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

.vince-nav-btn:hover[b-ibua69faen] {
    background-color: var(--fa-primary);
    color: var(--fa-text-on-primary);
    border-color: var(--fa-border-focus);
}

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

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

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

/* Section Titles and Section Dividers */
.vince-dashboard-section-title[b-ibua69faen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--fa-border);
}

.vince-section-title-left[b-ibua69faen] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.vince-section-num-pill[b-ibua69faen] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--fa-radius-pill, 999px);
    background: var(--fa-primary);
    color: var(--fa-text-on-primary);
    font-size: 0.75rem;
    font-weight: 800;
    font-family: var(--fa-font-mono, monospace);
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.vince-section-title[b-ibua69faen] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fa-text);
    letter-spacing: -0.01em;
}

.vince-section-subtitle[b-ibua69faen] {
    margin: 0.15rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--fa-text-muted);
}

.vince-section-title-right[b-ibua69faen] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* KPI Metric Cards Grid */
.vince-kpi-grid[b-ibua69faen] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .vince-kpi-grid[b-ibua69faen] {
        gap: 1rem;
    }
}

@media (max-width: 720px) {
    .vince-dashboard-header[b-ibua69faen] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .vince-dashboard-actions[b-ibua69faen] {
        width: 100%;
        justify-content: space-between;
    }

    .vince-date-selector[b-ibua69faen] {
        width: 100%;
        justify-content: space-between;
    }

    .vince-date-select[b-ibua69faen] {
        flex: 1;
        min-width: 0;
    }

    .vince-kpi-grid[b-ibua69faen] {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        padding: 0.25rem 0.25rem 0.75rem 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .vince-kpi-grid[b-ibua69faen]::-webkit-scrollbar {
        display: none;
    }

    .vince-kpi-card[b-ibua69faen] {
        flex: 0 0 calc(78% - 0.5rem);
        min-width: 230px;
        max-width: 290px;
        scroll-snap-align: start;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
}


.vince-kpi-card[b-ibua69faen] {
    background: var(--fa-surface) !important;
    border: var(--fa-border-width, 1px) solid var(--fa-border) !important;
    border-radius: var(--fa-radius-md, 6px) !important;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--fa-border-glow) !important;
    transition: transform var(--fa-transition-fast, 0.15s ease), box-shadow var(--fa-transition-fast, 0.15s ease), border-color var(--fa-transition-fast, 0.15s ease);
    cursor: pointer;
    flex: 1 1 calc(25% - 1rem);
    min-width: 220px;
    max-width: 100%;
    box-sizing: border-box;
}

.vince-kpi-card:hover[b-ibua69faen] {
    transform: translateY(-2px);
    border-color: var(--fa-border-focus) !important;
    box-shadow: var(--fa-border-glow-focus) !important;
}

.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);
}

.vince-kpi-icon[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--fa-radius-sm, 8px);
    font-size: 1rem;
    font-weight: 700;
}

.vince-kpi-icon.expense[b-ibua69faen] {
    background-color: var(--fa-alert-danger-bg);
    color: var(--fa-ember);
}

.vince-kpi-icon.income[b-ibua69faen] {
    background-color: var(--fa-alert-success-bg);
    color: var(--fa-accent);
}

.vince-kpi-icon.savings[b-ibua69faen] {
    background-color: var(--fa-alert-info-bg);
    color: var(--fa-primary);
}

.vince-kpi-icon.activity[b-ibua69faen] {
    background-color: var(--fa-alert-info-bg);
    color: var(--fa-gold, var(--fa-primary));
}

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

.vince-kpi-value.expense[b-ibua69faen] {
    color: var(--fa-ember) !important;
}

.vince-kpi-value.income[b-ibua69faen] {
    color: var(--fa-accent) !important;
}

.vince-kpi-value.savings-positive[b-ibua69faen] {
    color: var(--fa-accent) !important;
}

.vince-kpi-value.savings-negative[b-ibua69faen] {
    color: var(--fa-ember) !important;
}

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

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

.vince-badge.positive[b-ibua69faen] {
    background-color: var(--fa-alert-success-bg);
    color: var(--fa-accent);
}

.vince-badge.negative[b-ibua69faen] {
    background-color: var(--fa-alert-danger-bg);
    color: var(--fa-ember);
}

.vince-badge.neutral[b-ibua69faen] {
    background-color: var(--fa-surface);
    border: 1px solid var(--fa-border);
    color: var(--fa-text-muted);
}

/* Visualizations Section */
.vince-charts-grid[b-ibua69faen] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.vince-charts-grid > .vince-chart-card[b-ibua69faen] {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 320px;
    max-width: 100%;
    box-sizing: border-box;
}

.vince-charts-grid > .vince-burn-rate-card[b-ibua69faen] {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.vince-chart-card[b-ibua69faen] {
    background: var(--fa-surface) !important;
    border: var(--fa-border-width, 1px) solid var(--fa-border) !important;
    border-radius: var(--fa-radius-md, 6px) !important;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--fa-border-glow) !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.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);
    margin: 0;
}

.vince-chart-subtitle[b-ibua69faen] {
    font-size: 0.8rem;
    color: var(--fa-text-muted);
    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: var(--fa-surface);
    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: var(--fa-radius-sm, 6px);
    cursor: pointer;
    color: var(--fa-text);
    transition: background-color var(--fa-transition-fast, 0.15s ease);
}

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

.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;
    color: var(--fa-text);
}

/* Bar Chart */
.vince-bar-container[b-ibua69faen] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.vince-bar-chart[b-ibua69faen] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 220px;
    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;
    color: var(--fa-text-muted);
}

/* Ranked Breakdowns Grid */
.vince-breakdowns-grid[b-ibua69faen] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.vince-breakdowns-grid > .vince-breakdown-card[b-ibua69faen] {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 320px;
    max-width: 100%;
    box-sizing: border-box;
}

.vince-breakdown-card[b-ibua69faen] {
    background: var(--fa-surface) !important;
    border: var(--fa-border-width, 1px) solid var(--fa-border) !important;
    border-radius: var(--fa-radius-md, 6px) !important;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--fa-border-glow) !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.vince-tab-pills[b-ibua69faen] {
    display: inline-flex;
    background-color: var(--fa-cream);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-sm, 8px);
    padding: 2px;
    gap: 2px;
}

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

.vince-tab-btn.active[b-ibua69faen] {
    background: var(--fa-primary);
    color: var(--fa-text-on-primary) !important;
    box-shadow: var(--fa-border-glow);
}

.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);
    cursor: pointer;
    border-radius: var(--fa-radius-sm, 6px);
    transition: background-color var(--fa-transition-fast, 0.15s ease);
}

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

.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);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vince-item-meta[b-ibua69faen] {
    font-size: 0.75rem;
    color: var(--fa-text-muted);
    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: var(--fa-ember) !important;
}

.vince-item-amount.credit[b-ibua69faen] {
    color: var(--fa-accent) !important;
}

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

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

.vince-progress-fill.danger[b-ibua69faen] {
    background-color: var(--fa-ember) !important;
}

.vince-progress-fill.warning[b-ibua69faen] {
    background-color: var(--fa-gold) !important;
}

/* Empty State Card — Strict Fran Theme Alignment (Light, Dark, Colorblind) */
.vince-empty-card[b-ibua69faen] {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--fa-surface) !important;
    border: var(--fa-border-width, 1px) dashed var(--fa-border) !important;
    border-radius: var(--fa-radius-md, 6px) !important;
    box-shadow: var(--fa-border-glow) !important;
    color: var(--fa-text) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    margin: 1.5rem 0;
}

.vince-empty-card p[b-ibua69faen] {
    color: var(--fa-text) !important;
    font-size: 1.05rem;
    margin: 0;
    max-width: 680px;
}

.vince-empty-icon[b-ibua69faen] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: var(--fa-text-muted);
}

/* Inter-Account Transfers Banner */
.vince-transfers-banner[b-ibua69faen] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--fa-surface);
    border: var(--fa-border-width, 1px) solid var(--fa-border);
    border-radius: var(--fa-radius-sm, 4px);
    box-shadow: var(--fa-border-glow);
    font-size: 0.875rem;
    color: var(--fa-text);
}

.vince-transfers-badge[b-ibua69faen] {
    font-weight: 700;
    color: var(--fa-primary);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.vince-transfers-text[b-ibua69faen] {
    color: var(--fa-text-muted);
}

.vince-transfers-text strong[b-ibua69faen] {
    color: var(--fa-text);
}

/* 360° Multi-Account Cash Flow Section */
.vince-360-section[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.vince-360-header[b-ibua69faen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vince-360-header[b-ibua69faen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

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

/* Portfolio Summary Bar */
.vince-portfolio-summary-bar[b-ibua69faen] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--fa-surface);
    border: var(--fa-border-width, 1px) solid var(--fa-border);
    border-radius: var(--fa-radius-md, 6px);
    padding: 1rem 1.25rem;
    box-shadow: var(--fa-border-glow);
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.vince-portfolio-stat[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    text-align: center;
    min-width: 120px;
}

.vince-portfolio-label[b-ibua69faen] {
    font-size: 0.75rem;
    color: var(--fa-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vince-portfolio-val[b-ibua69faen] {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: var(--fa-font-mono, monospace);
    color: var(--fa-text);
}

.vince-portfolio-val.positive[b-ibua69faen] {
    color: var(--fa-accent);
}

.vince-portfolio-val.negative[b-ibua69faen] {
    color: var(--fa-ember);
}

.vince-portfolio-divider[b-ibua69faen] {
    width: 1px;
    height: 36px;
    background-color: var(--fa-border);
}

@media (max-width: 640px) {
    .vince-portfolio-divider[b-ibua69faen] {
        display: none;
    }
    .vince-portfolio-summary-bar[b-ibua69faen] {
        justify-content: space-between;
    }
}

.vince-accounts-grid[b-ibua69faen] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.vince-account-card[b-ibua69faen] {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 100%;
    background: var(--fa-surface);
    border: var(--fa-border-width, 1px) solid var(--fa-border);
    border-radius: var(--fa-radius-md, 6px);
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--fa-border-glow);
    transition: transform var(--fa-transition-fast, 0.15s ease), border-color var(--fa-transition-fast, 0.15s ease), box-shadow var(--fa-transition-fast, 0.15s ease);
    cursor: pointer;
    box-sizing: border-box;
}

.vince-account-card:hover[b-ibua69faen] {
    border-color: var(--fa-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vince-account-card.primary-account[b-ibua69faen] {
    border-left: 3px solid var(--fa-primary);
}

.vince-account-card-header[b-ibua69faen] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.vince-account-icon[b-ibua69faen] {
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--fa-radius-sm, 8px);
    background: rgba(31, 58, 51, 0.06);
    flex-shrink: 0;
}

.vince-account-title-wrap[b-ibua69faen] {
    flex: 1;
    min-width: 0;
}

.vince-account-name[b-ibua69faen] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fa-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vince-account-subtext[b-ibua69faen] {
    font-size: 0.775rem;
    color: var(--fa-text-muted);
    margin-top: 0.15rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.vince-account-badges[b-ibua69faen] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.vince-badge.primary-badge[b-ibua69faen] {
    background: var(--fa-primary);
    color: var(--fa-text-on-primary) !important;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
}

.vince-account-badge[b-ibua69faen] {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--fa-radius-pill, 9999px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    color: var(--fa-text-muted);
}

.vince-account-badge.credit-card[b-ibua69faen],
.vince-account-badge.line-of-credit[b-ibua69faen],
.vince-account-badge.loan[b-ibua69faen] {
    border-color: var(--fa-ember);
    color: var(--fa-ember);
}

.vince-account-badge.savings[b-ibua69faen] {
    border-color: var(--fa-accent);
    color: var(--fa-accent);
}

.vince-account-badge.checking[b-ibua69faen] {
    border-color: var(--fa-primary);
    color: var(--fa-primary);
}

.vince-account-badge.digital-wallet[b-ibua69faen],
.vince-account-badge.wallet[b-ibua69faen] {
    border-color: var(--fa-gold);
    color: var(--fa-gold);
}

.vince-account-badge.investment[b-ibua69faen],
.vince-account-badge.brokerage[b-ibua69faen] {
    border-color: var(--fa-primary);
    color: var(--fa-primary);
}

.vince-account-balance-block[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.75rem;
    background: rgba(31, 58, 51, 0.04);
    border-radius: var(--fa-radius-sm, 8px);
    border: 1px solid var(--fa-border);
}

.vince-account-balance-label[b-ibua69faen] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fa-text-muted);
    font-weight: 600;
}

.vince-account-balance-value[b-ibua69faen] {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--fa-font-mono, monospace);
    color: var(--fa-text);
}

.vince-account-balance-value.liability[b-ibua69faen] {
    color: var(--fa-ember);
}

.vince-account-card-footer[b-ibua69faen] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--fa-border);
    padding-top: 0.45rem;
    margin-top: auto;
}

.vince-account-link-hint[b-ibua69faen] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fa-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap var(--fa-transition-fast, 0.15s ease);
}

.vince-account-card:hover .vince-account-link-hint[b-ibua69faen] {
    gap: 0.45rem;
}

.vince-360-empty-card[b-ibua69faen] {
    background: var(--fa-surface);
    border: var(--fa-border-width, 1px) dashed var(--fa-border);
    border-radius: var(--fa-radius-md, 6px);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.vince-account-card-body[b-ibua69faen] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vince-account-metric[b-ibua69faen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.vince-metric-label[b-ibua69faen] {
    color: var(--fa-text-muted);
}

.vince-metric-val[b-ibua69faen] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vince-metric-val.expense[b-ibua69faen] {
    color: var(--fa-ember);
}

.vince-metric-val.income[b-ibua69faen] {
    color: var(--fa-accent);
}

/* Burn Rate Card & Pacing Visualization */
.vince-burn-rate-card[b-ibua69faen] {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.vince-burn-rate-container[b-ibua69faen] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.vince-burn-rate-svg[b-ibua69faen] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 200px;
    margin: 0 auto;
}

.vince-burn-bar[b-ibua69faen] {
    transition: opacity var(--fa-transition-fast, 0.15s ease);
}

.vince-burn-bar:hover[b-ibua69faen] {
    opacity: 0.75;
    cursor: pointer;
}
/* /Pages/LedgerImportPage.razor.rz.scp.css */
/* MyTouchTimes style Drag & Drop Zone */
.mtt-dropzone[b-gfrqdwvkgx] {
    position: relative;
    border: 2px dashed var(--fa-border);
    border-radius: var(--fa-radius-lg, 8px);
    background: var(--fa-footer);
    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-primary);
    background: var(--fa-alert-success-bg);
}

.mtt-dropzone-active[b-gfrqdwvkgx] {
    border-color: var(--fa-primary);
    background: var(--fa-alert-success-bg);
    transform: scale(1.008);
    box-shadow: var(--fa-border-glow-focus);
}

.mtt-dropzone-parsing[b-gfrqdwvkgx] {
    border-style: solid;
    border-color: var(--fa-accent);
    background: var(--fa-footer);
    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: var(--fa-alert-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-primary);
    margin-bottom: 0.85rem;
    box-shadow: var(--fa-border-glow);
}

.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, var(--fa-primary) 20%, var(--fa-glow) 50%, var(--fa-primary) 80%, transparent);
    box-shadow: 0 0 10px var(--fa-primary);
    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: var(--fa-footer);
    border: 1px solid var(--fa-border);
    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: var(--fa-text);
    font-size: 0.95rem;
}

.sheet-tabs-sub[b-gfrqdwvkgx] {
    font-size: 0.8rem;
    color: var(--fa-text-muted);
}

.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: var(--fa-radius-sm, 6px);
    border: 1px solid var(--fa-border);
    background: var(--fa-surface);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fa-text);
    cursor: pointer;
    transition: all var(--fa-transition-fast, 0.15s ease);
}

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

.sheet-chip-active[b-gfrqdwvkgx] {
    background: var(--fa-primary) !important;
    border-color: var(--fa-border-focus) !important;
    color: var(--fa-text-on-primary) !important;
    font-weight: 600;
    box-shadow: var(--fa-border-glow);
}

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

/* Dedicated Copy-Paste Section Card */
.paste-section-card[b-gfrqdwvkgx] {
    background: var(--fa-surface);
    border: var(--fa-border-width, 1px) solid var(--fa-border);
    border-radius: var(--fa-radius-md, 6px);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--fa-border-glow);
}

/* Import Methods Accordion */
.import-methods-accordion[b-gfrqdwvkgx] {
    margin-bottom: 1.5rem;
}

.import-methods-accordion .fa-accordion-panel[b-gfrqdwvkgx] {
    padding-top: 0.5rem;
}

.import-methods-accordion .mtt-dropzone[b-gfrqdwvkgx] {
    margin-bottom: 0.5rem;
}

.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: var(--fa-alert-info-bg);
    color: var(--fa-primary);
    border-radius: var(--fa-radius-pill, 9999px);
    border: 1px solid var(--fa-border);
}

.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-border);
    border-radius: var(--fa-radius-sm, 6px);
    padding: 0.65rem 0.75rem;
    background: var(--fa-surface);
    color: var(--fa-text);
}

.paste-textarea:focus[b-gfrqdwvkgx] {
    background: var(--fa-surface);
    border-color: var(--fa-border-focus);
    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: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-md, 6px);
    width: 90%;
    max-width: 540px;
    padding: 1.5rem;
    box-shadow: var(--fa-border-glow);
    color: var(--fa-text);
}

.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 */
}

/* Compact Ledger Review & Summary Bar */
.import-summary-card[b-gfrqdwvkgx] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-md, 6px);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.import-stat-block[b-gfrqdwvkgx] {
    display: flex;
    flex-direction: column;
}

.import-stat-label[b-gfrqdwvkgx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fa-text-muted);
}

.import-stat-value[b-gfrqdwvkgx] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fa-text);
}

.import-stat-value.debit[b-gfrqdwvkgx] {
    color: var(--fa-ember);
}

.import-stat-value.credit[b-gfrqdwvkgx] {
    color: var(--fa-accent);
}

.accounts-breakdown-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.account-breakdown-chip[b-gfrqdwvkgx] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 0.45rem 0.75rem;
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-sm, 6px);
    font-size: 0.75rem;
    line-height: 1.25;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    min-width: 130px;
    flex: 1 1 auto;
}

.account-breakdown-chip:hover[b-gfrqdwvkgx] {
    background: var(--fa-footer);
    border-color: var(--fa-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.account-breakdown-chip.active[b-gfrqdwvkgx] {
    background: var(--fa-alert-success-bg);
    color: var(--fa-accent);
    border-color: var(--fa-primary);
    box-shadow: 0 0 0 1px var(--fa-primary), 0 2px 4px rgba(5, 150, 105, 0.1);
    font-weight: 600;
}

.account-breakdown-name[b-gfrqdwvkgx] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fa-text);
    white-space: nowrap;
    width: 100%;
}

.account-breakdown-chip.active .account-breakdown-name[b-gfrqdwvkgx] {
    color: var(--fa-accent);
}

.account-breakdown-details-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
}

.account-breakdown-items[b-gfrqdwvkgx] {
    font-size: 0.7rem;
    color: var(--fa-text-muted);
    white-space: nowrap;
    text-align: left;
}

.account-breakdown-sum[b-gfrqdwvkgx] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fa-text);
    white-space: nowrap;
    text-align: right;
    margin-left: auto;
}

.account-breakdown-chip.active .account-breakdown-sum[b-gfrqdwvkgx] {
    color: var(--fa-accent);
}

/* Filter Toggle Buttons */
.import-filter-toggles[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Streamlined Import Review Toolbar */
.import-review-toolbar[b-gfrqdwvkgx] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-md, 8px);
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.import-review-controls-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.account-select-wrapper[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 280px;
    max-width: 440px;
}

.account-select-label[b-gfrqdwvkgx] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fa-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.account-filter-select[b-gfrqdwvkgx] {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    width: 100%;
    border-radius: var(--fa-radius-sm, 6px);
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    color: var(--fa-text);
    cursor: pointer;
}

.account-filter-select:focus[b-gfrqdwvkgx] {
    border-color: var(--fa-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

.import-review-actions-group[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.import-search-box[b-gfrqdwvkgx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 220px;
}

.import-search-input[b-gfrqdwvkgx] {
    padding: 0.3rem 1.8rem 0.3rem 0.65rem;
    font-size: 0.825rem;
    width: 100%;
    border-radius: 20px;
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
}

.import-search-input:focus[b-gfrqdwvkgx] {
    background: var(--fa-surface);
    border-color: var(--fa-primary);
    outline: none;
}

.import-search-clear-btn[b-gfrqdwvkgx] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--fa-text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
}

.import-filter-toggles-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--fa-border);
}

/* Duplicates Alert Banner Card */
.duplicates-alert-card[b-gfrqdwvkgx] {
    background: var(--fa-alert-danger-bg);
    border: 1px solid var(--fa-ember);
    border-radius: var(--fa-radius-md, 6px);
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.duplicates-alert-header[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.duplicates-alert-info[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.duplicates-alert-icon[b-gfrqdwvkgx] {
    font-size: 1.25rem;
    line-height: 1;
}

.duplicates-alert-title[b-gfrqdwvkgx] {
    font-size: 0.925rem;
    color: var(--fa-ember);
}

.duplicates-alert-subtext[b-gfrqdwvkgx] {
    font-size: 0.8rem;
    color: var(--fa-ember);
    margin-top: 2px;
}

.duplicates-alert-actions[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.duplicate-action-btn[b-gfrqdwvkgx] {
    font-size: 0.775rem !important;
    padding: 0.3rem 0.65rem !important;
    font-weight: 600;
}

.duplicate-action-btn.keep-btn[b-gfrqdwvkgx] {
    color: var(--fa-accent) !important;
    background: var(--fa-alert-success-bg) !important;
    border-color: var(--fa-accent) !important;
}

.duplicate-action-btn.keep-btn:hover[b-gfrqdwvkgx] {
    background: var(--fa-alert-success-bg) !important;
    border-color: var(--fa-accent) !important;
}

.duplicate-action-btn.discard-btn[b-gfrqdwvkgx] {
    color: var(--fa-ember) !important;
    background: var(--fa-alert-danger-bg) !important;
    border-color: var(--fa-ember) !important;
}

.duplicate-action-btn.discard-btn:hover[b-gfrqdwvkgx] {
    background: var(--fa-alert-danger-bg) !important;
    border-color: var(--fa-ember) !important;
}

.view-mode-toggle-group[b-gfrqdwvkgx] {
    display: inline-flex;
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-sm, 6px);
    overflow: hidden;
    background: var(--fa-footer);
}

.view-mode-btn[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fa-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-mode-btn:hover[b-gfrqdwvkgx] {
    color: var(--fa-text);
    background: rgba(0, 0, 0, 0.04);
}

.view-mode-btn.active[b-gfrqdwvkgx] {
    background: var(--fa-primary);
    color: var(--fa-text-on-primary);
    font-weight: 600;
}

.import-filter-toggle[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--fa-text);
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-pill, 9999px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.import-filter-toggle:hover[b-gfrqdwvkgx] {
    border-color: var(--fa-border-focus);
    color: var(--fa-primary);
}

.import-filter-toggle.active[b-gfrqdwvkgx] {
    background: var(--fa-primary);
    border-color: var(--fa-primary);
    color: var(--fa-text-on-primary);
    font-weight: 600;
}

.import-filter-badge[b-gfrqdwvkgx] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
}

.import-filter-toggle.active .import-filter-badge[b-gfrqdwvkgx] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--fa-text-on-primary);
}

/* Pagination Footer */
.import-pagination-bar[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    border-radius: 8px;
    margin-top: 1rem;
}

/* Responsive Staged Cards Flex Grid */
.staged-cards-grid[b-gfrqdwvkgx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.staged-item-card[b-gfrqdwvkgx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.8rem;
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-md, 10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
    color: var(--fa-text);
}

.staged-item-card:hover[b-gfrqdwvkgx] {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
}

.staged-item-card.is-credit:hover[b-gfrqdwvkgx] {
    border-color: var(--fa-accent);
    box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.25), 0 4px 8px -2px rgba(16, 185, 129, 0.15), 0 0 0 2px var(--fa-accent);
}

.staged-item-card.is-debit:hover[b-gfrqdwvkgx] {
    border-color: var(--fa-ember);
    box-shadow: 0 12px 24px -4px rgba(239, 68, 68, 0.25), 0 4px 8px -2px rgba(239, 68, 68, 0.15), 0 0 0 2px var(--fa-ember);
}

.staged-item-card.is-excluded[b-gfrqdwvkgx] {
    opacity: 0.55;
    background-color: var(--fa-text);
    border-color: var(--fa-border);
}

.staged-item-card.is-duplicate[b-gfrqdwvkgx] {
    background-color: var(--fa-footer);
    border-color: var(--fa-border);
}

.staged-card-top-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.staged-card-top-left[b-gfrqdwvkgx] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
}

.staged-card-flow-badge[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.staged-card-flow-badge.flow-credit[b-gfrqdwvkgx] {
    color: var(--fa-accent);
    background: var(--fa-alert-success-bg);
    border: 1px solid var(--fa-accent);
}

.staged-card-flow-badge.flow-debit[b-gfrqdwvkgx] {
    color: var(--fa-ember);
    background: var(--fa-alert-danger-bg);
    border: 1px solid var(--fa-ember);
}

.staged-card-middle-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.staged-card-amount[b-gfrqdwvkgx] {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 65px;
}

.staged-card-amount.amount-debit[b-gfrqdwvkgx] {
    color: var(--fa-ember);
}

.staged-card-amount.amount-credit[b-gfrqdwvkgx] {
    color: var(--fa-accent);
}

.staged-card-edit-btn[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1;
}

.card-icon-btn[b-gfrqdwvkgx] {
    padding: 0.2rem 0.3rem;
    font-size: 0.75rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-text-muted);
}

.card-icon-btn:hover[b-gfrqdwvkgx] {
    background: var(--fa-footer);
    border-color: var(--fa-border);
}

.card-icon-btn.edit-btn:hover[b-gfrqdwvkgx] {
    color: var(--fa-primary);
    background: var(--fa-alert-info-bg);
    border-color: var(--fa-border);
}

.card-icon-btn.delete-btn[b-gfrqdwvkgx] {
    color: var(--fa-ember);
    background: var(--fa-alert-danger-bg);
    border: 1px solid var(--fa-ember);
    border-radius: 4px;
    padding: 0.2rem 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.card-icon-btn.delete-btn:hover[b-gfrqdwvkgx] {
    color: var(--fa-ember);
    background: var(--fa-alert-danger-bg);
    border-color: var(--fa-ember);
    transform: scale(1.08);
}

.staged-card-bottom-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-top: 0.15rem;
    min-height: 24px;
}

.staged-keep-discard-toggle[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.staged-keep-discard-toggle .toggle-btn[b-gfrqdwvkgx] {
    border: 1px solid transparent;
    background: transparent;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
    transition: all 0.15s ease;
    color: var(--fa-text-muted);
}

.staged-keep-discard-toggle .toggle-btn:hover[b-gfrqdwvkgx] {
    color: var(--fa-text);
}

.staged-keep-discard-toggle .toggle-btn.keep-btn.active[b-gfrqdwvkgx] {
    background: var(--fa-surface);
    color: var(--fa-accent);
    font-weight: 700;
    border-color: var(--fa-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.staged-keep-discard-toggle .toggle-btn.discard-btn.active[b-gfrqdwvkgx] {
    background: var(--fa-surface);
    color: var(--fa-ember);
    font-weight: 700;
    border-color: var(--fa-ember);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.staged-card-payer-row[b-gfrqdwvkgx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.staged-card-payer-name-wrap[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

.staged-card-payer-block[b-gfrqdwvkgx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.1rem;
}

.staged-card-payer-name[b-gfrqdwvkgx] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fa-text);
    line-height: 1.25;
    word-break: break-word;
}

.staged-card-statement-text[b-gfrqdwvkgx] {
    font-size: 0.72rem;
    color: var(--fa-text-muted);
    line-height: 1.25;
    word-break: break-word;
}

.staged-card-subline[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--fa-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staged-subline-cat[b-gfrqdwvkgx] {
    font-weight: 600;
    color: var(--fa-text-muted);
}

.staged-subline-acc[b-gfrqdwvkgx] {
    color: var(--fa-text-muted);
}

.staged-subline-raw[b-gfrqdwvkgx] {
    color: var(--fa-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staged-subline-uncategorized[b-gfrqdwvkgx] {
    color: var(--fa-text-muted);
    font-style: italic;
    font-size: 0.72rem;
}

.staged-subline-dot[b-gfrqdwvkgx] {
    color: var(--fa-text-muted);
}

.staged-card-pill[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.staged-card-pill.pill-duplicate[b-gfrqdwvkgx] {
    background: var(--fa-alert-danger-bg);
    color: var(--fa-ember);
    border: 1px solid var(--fa-ember);
}

@media (max-width: 640px) {
    .staged-cards-grid[b-gfrqdwvkgx] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .staged-card-top-row[b-gfrqdwvkgx] {
        flex-wrap: wrap;
    }
}


/* ==========================================================================
   Clean Tabbed Workflow Navigation
   ========================================================================== */
.import-workflow-tabs[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem;
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-lg, 10px);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.import-workflow-tab[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: var(--fa-radius-md, 8px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--fa-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}

.import-workflow-tab:hover:not(:disabled)[b-gfrqdwvkgx] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--fa-text);
}

.import-workflow-tab.active[b-gfrqdwvkgx] {
    background: var(--fa-surface);
    color: var(--fa-primary);
    border-color: var(--fa-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.import-workflow-tab:disabled[b-gfrqdwvkgx] {
    opacity: 0.45;
    cursor: not-allowed;
}

.import-workflow-step-num[b-gfrqdwvkgx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fa-footer);
    color: var(--fa-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.import-workflow-tab.active .import-workflow-step-num[b-gfrqdwvkgx] {
    background: var(--fa-primary);
    color: var(--fa-text-on-primary);
}

.import-workflow-badge[b-gfrqdwvkgx] {
    padding: 1px 7px;
    border-radius: 12px;
    background: var(--fa-footer);
    color: var(--fa-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.import-workflow-badge.badge-warning[b-gfrqdwvkgx] {
    background: var(--fa-alert-info-bg);
    color: var(--fa-gold);
    border: 1px solid var(--fa-gold);
}

.import-tab-nav-footer[b-gfrqdwvkgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--fa-footer);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-lg, 10px);
    margin-top: 1.5rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}


/* Table view row click styling */
.staged-table-row-clickable[b-gfrqdwvkgx] {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.staged-table-row-clickable:hover[b-gfrqdwvkgx] {
    background-color: var(--fa-footer) !important;
}

.staged-table-row-clickable:focus-visible[b-gfrqdwvkgx] {
    outline: 2px solid var(--fa-primary);
    outline-offset: -2px;
}

/* Description & Bank Description Popover with delayed hover & 1-second stick */
.desc-popover-container[b-gfrqdwvkgx] {
    position: relative;
    display: block;
    max-width: 260px;
    cursor: default;
}

.desc-primary-text[b-gfrqdwvkgx] {
    font-size: 0.85rem;
    color: var(--fa-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.desc-bank-text[b-gfrqdwvkgx] {
    font-size: 0.73rem;
    color: var(--fa-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 1px;
}

.desc-popover[b-gfrqdwvkgx] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    min-width: 250px;
    max-width: 380px;
    background: var(--fa-surface);
    color: var(--fa-text);
    border: 1px solid var(--fa-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    transition-delay: 1.0s; /* "stick for a second" on mouse leave */
}

.desc-popover-container.popover-up .desc-popover[b-gfrqdwvkgx] {
    top: auto;
    bottom: calc(100% + 4px);
    transform: translateY(4px);
}

.desc-popover-container:hover .desc-popover[b-gfrqdwvkgx],
.desc-popover:hover[b-gfrqdwvkgx] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.45s; /* "not right away": 0.45s hover delay before appearing */
}

.duplicate-table-compare-btn:hover[b-gfrqdwvkgx] {
    background: var(--fa-alert-info-bg) !important;
    border-color: var(--fa-gold) !important;
    color: var(--fa-gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
}
/* /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;
    }
}

/* Ensure the loading opacity overlay is z-index greater than any chrome, header, or element on the page */
.fa-payers-grid[b-mngykuzp4v]  .fa-grid-loading-overlay {
    z-index: 999999 !important;
}
/* /Pages/SimilarTransactionsPage.razor.rz.scp.css */
.similar-page-container[b-rwyunozl6t] {
    max-width: 1400px;
    margin: 0 auto;
}

.similar-filter-card[b-rwyunozl6t] {
    background: var(--fa-surface);
    border: var(--fa-border-width, 1px) solid var(--fa-border);
    border-radius: var(--fa-radius-md, 8px);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--fa-border-glow);
    margin-bottom: 1.5rem;
}

.batch-action-bar[b-rwyunozl6t] {
    background: linear-gradient(180deg, rgba(31,58,51,0.06) 0%, rgba(106,122,67,0.08) 100%);
    border: 1px solid var(--fa-primary);
    border-radius: var(--fa-radius-md, 8px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.batch-action-controls[b-rwyunozl6t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.similar-table-container[b-rwyunozl6t] {
    background: var(--fa-surface);
    border: var(--fa-border-width, 1px) solid var(--fa-border);
    border-radius: var(--fa-radius-md, 8px);
    overflow: hidden;
    box-shadow: var(--fa-border-glow);
}

.similar-table[b-rwyunozl6t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.similar-table th[b-rwyunozl6t] {
    background: rgba(31, 58, 51, 0.04);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--fa-text);
    border-bottom: 2px solid var(--fa-border);
}

.similar-table td[b-rwyunozl6t] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--fa-border);
    vertical-align: middle;
    color: var(--fa-text);
}

.similar-table tr:hover[b-rwyunozl6t] {
    background: rgba(31, 58, 51, 0.02);
}

.similar-table tr.selected-row[b-rwyunozl6t] {
    background: rgba(31, 58, 51, 0.05);
}

.fa-account-badge[b-rwyunozl6t] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--fa-radius-sm, 4px);
    background: rgba(31, 58, 51, 0.08);
    color: var(--fa-primary-dark);
    border: 1px solid rgba(31, 58, 51, 0.15);
    white-space: nowrap;
}

.fa-account-badge-credit[b-rwyunozl6t] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--fa-ember);
    border-color: rgba(239, 68, 68, 0.25);
}

.fa-account-badge-savings[b-rwyunozl6t] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--fa-accent);
    border-color: rgba(16, 185, 129, 0.25);
}

.fa-account-badge-invest[b-rwyunozl6t] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--fa-primary);
    border-color: rgba(99, 102, 241, 0.25);
}

.fa-original-desc[b-rwyunozl6t] {
    font-size: 0.75rem;
    color: var(--fa-text-muted);
    margin-top: 2px;
    font-family: var(--fa-font-mono, monospace);
}

.fa-debit-text[b-rwyunozl6t] {
    color: var(--fa-ember);
    font-weight: 600;
}

.fa-credit-text[b-rwyunozl6t] {
    color: var(--fa-accent);
    font-weight: 600;
}

.table-action-btn[b-rwyunozl6t] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: var(--fa-radius-sm, 4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-text-muted);
    transition: all 0.15s ease-in-out;
}

.table-action-btn:hover[b-rwyunozl6t] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--fa-ember);
}

.similar-pagination-bar[b-rwyunozl6t] {
    padding: 0.75rem 1rem;
    background: rgba(31, 58, 51, 0.03);
    border-top: 1px solid var(--fa-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.similar-pagination-size[b-rwyunozl6t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.similar-pagination-info[b-rwyunozl6t] {
    font-size: 0.825rem;
    color: var(--fa-text-muted);
}

.similar-pagination-nav[b-rwyunozl6t] {
    display: flex;
    align-items: center;
}


/* /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);
    border-radius: var(--fa-radius-lg, 8px);
    background: var(--fa-footer);
    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-primary);
    background: var(--fa-alert-success-bg);
}

.mtt-dropzone-active[b-6afipsw75h] {
    border-color: var(--fa-primary);
    background: var(--fa-alert-success-bg);
    transform: scale(1.008);
    box-shadow: var(--fa-border-glow-focus);
}

.mtt-dropzone-parsing[b-6afipsw75h] {
    border-style: solid;
    border-color: var(--fa-accent);
    background: var(--fa-footer);
    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: var(--fa-alert-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fa-primary);
    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, var(--fa-primary) 20%, var(--fa-glow) 50%, var(--fa-primary) 80%, transparent);
    box-shadow: 0 0 10px var(--fa-primary);
    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: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-md, 6px);
    width: 90%;
    max-width: 540px;
    padding: 1.5rem;
    box-shadow: var(--fa-border-glow);
    color: var(--fa-text);
}

.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;
    }

    .fa-transactions-grid[b-3grpcogwuu]  .fa-txn-account-cell {
        width: auto;
        font-size: 0.75rem;
    }

    /* 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;
    }
}


/* Selected Account Summary Card */
.fa-account-summary-card[b-3grpcogwuu] {
    background: linear-gradient(180deg, rgba(31, 58, 51, 0.03) 0%, rgba(106, 122, 67, 0.05) 100%);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius-md, 8px);
    padding: 0.75rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Account Column & Badges in Rows */
.fa-transactions-grid[b-3grpcogwuu]  .fa-txn-account-cell {
    width: 14ch;
    flex: 0 0 auto;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-account-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--fa-radius-sm, 4px);
    background: rgba(31, 58, 51, 0.08);
    color: var(--fa-primary-dark);
    border: 1px solid rgba(31, 58, 51, 0.15);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.12s ease-in-out;
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-account-badge:hover {
    background: rgba(31, 58, 51, 0.15);
    border-color: var(--fa-primary);
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-account-badge-savings {
    background: rgba(16, 185, 129, 0.1);
    color: var(--fa-accent);
    border-color: rgba(16, 185, 129, 0.25);
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-account-badge-credit {
    background: rgba(239, 68, 68, 0.1);
    color: var(--fa-ember);
    border-color: rgba(239, 68, 68, 0.25);
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-account-badge-muted {
    background: rgba(100, 116, 139, 0.08);
    color: var(--fa-text-muted);
    border-color: rgba(100, 116, 139, 0.2);
}

/* Account Section Header in Grouped View */
.fa-transactions-grid[b-3grpcogwuu]  .fa-account-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    background: rgba(31, 58, 51, 0.06);
    border-bottom: 2px solid var(--fa-border);
    border-top: 1px solid var(--fa-border);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fa-primary-dark);
}

.fa-transactions-grid[b-3grpcogwuu]  .fa-account-group-header:first-child {
    border-top: none;
}

/* Mobile Filter Bar & Collapsible Drawer */
.vince-mobile-filter-bar[b-3grpcogwuu] {
    display: none;
}

.vince-filter-badge[b-3grpcogwuu] {
    background: var(--fa-surface);
    color: var(--fa-primary);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 0.35rem;
}

@media (max-width: 720px) {
    .vince-mobile-filter-bar[b-3grpcogwuu] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        width: 100%;
    }

    .vince-mobile-quick-search[b-3grpcogwuu] {
        width: 100%;
        padding: 0.45rem 0.75rem;
        font-size: 0.88rem;
        border-radius: var(--fa-radius-md, 8px);
    }

    .vince-mobile-filter-btn[b-3grpcogwuu] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        border-radius: var(--fa-radius-md, 8px);
    }

    .vince-filter-form-wrap:not(.is-expanded)[b-3grpcogwuu] {
        display: none !important;
    }

    .vince-filter-form-wrap.is-expanded[b-3grpcogwuu] {
        display: block !important;
        background: var(--fa-surface);
        border: 1px solid var(--fa-border);
        border-radius: var(--fa-radius-md, 8px);
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        animation: vince-slide-down-b-3grpcogwuu 0.2s ease-out;
    }

    .vince-filters-grid[b-3grpcogwuu] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .vince-filter-desc-col[b-3grpcogwuu],
    .vince-filter-actions-col[b-3grpcogwuu] {
        width: 100%;
    }

    .vince-filter-actions-col[b-3grpcogwuu] {
        margin-top: 0.5rem;
    }
}

@keyframes vince-slide-down-b-3grpcogwuu {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}