@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';
@import '_content/PSC.Blazor.Components.Chartjs/PSC.Blazor.Components.Chartjs.bundle.scp.css';

/* /Layout/Components/Navigation/NavItem.razor.rz.scp.css */
[b-3pwpny7zk0] .nav-item-modern.active {
    background-color: var(--content-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-nav-active);
}

[b-3pwpny7zk0] .nav-item-modern.active span:first-child {
    color: var(--text-primary);
}
/* /Layout/Components/Navigation/NavSection.razor.rz.scp.css */
.nav-section-chevron[b-0usky8tr0c] {
    font-size: 0.6rem;
    transition: transform 0.15s ease;
}

.nav-section-chevron.expanded[b-0usky8tr0c] {
    transform: rotate(90deg);
}

button:hover .community-nav-icon[b-0usky8tr0c] {
    color: #2563eb;
}
/* /Layout/Components/Navigation/NavWorkspaceTree.razor.rz.scp.css */
[b-pseqdtbvyk] .nav-ws-link.active {
    background-color: var(--content-bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-nav-active);
}
/* /Layout/Components/Timesheet/TimeEntriesGrid.razor.rz.scp.css */
/* Shrink fixed-content columns to their content width so the flexible
   columns (Member, Flow, Notes) get the remaining horizontal space. */
.time-entries-table .shrink-col[b-7nmq8chd2i] {
    width: 1%;
    white-space: nowrap;
}

/* Each side of the From -> To flow truncates independently so a long fund
   name doesn't push the arrow out of the cell. */
.time-entries-table .flow-fund[b-7nmq8chd2i] {
    max-width: 110px;
}

.time-entries-table .flow-arrow[b-7nmq8chd2i] {
    font-size: 0.7rem;
}

/* Notes column gets more room since prose is wordier than a label. */
.time-entries-table .notes-cell[b-7nmq8chd2i] {
    max-width: 240px;
}
/* /Layout/Components/Transactions/TransactionGridComponent.razor.rz.scp.css */
/* Custom styles for focus state */
.filter-btn:focus[b-zbtcaowbg0] {
    outline: none;
    box-shadow: none;
}

.profile-img[b-zbtcaowbg0] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px; /* Add margin between the image and the name */
}

.offset-approved-positive[b-zbtcaowbg0] {
    color: green;
    font-size: larger;
}

.offset-approved-negative[b-zbtcaowbg0] {
    color: red;
    font-size: larger;
}

.offset-pending[b-zbtcaowbg0] {
    color: grey;
    font-size: larger;
}

.offset-rejected[b-zbtcaowbg0] {
    color: grey;
    font-size: larger;
    text-decoration: line-through;
}

.balance[b-zbtcaowbg0] {
    color: grey;
    font-size: small;
}

.item-img[b-zbtcaowbg0] {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border-radius: 4px;
    object-fit: cover;
}

.item-info[b-zbtcaowbg0] {
    display: flex;
    align-items: center;
}
/* /Layout/Example.razor.rz.scp.css */
.test[b-v9txxzpnkd] {
    color: brown;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

p[b-v9txxzpnkd] {
    color: darkgreen;
}
/* /Layout/MainLayout.razor.rz.scp.css */

.page[b-e24iz81u04] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-e24iz81u04] {
    flex: 1;
    background-color: var(--page-bg);
    /* Above 641px .page is flex-direction:row, so main is a flex item on the horizontal axis
       and its min-width defaults to auto - the min-content width of everything inside it. A
       canvas contributes its own pixel width there, so a chart that had grown wide pinned main
       open: the content never got narrower, so Chart.js's ResizeObserver never fired, so the
       canvas never shrank, and the page scrolled sideways instead. Charts could grow but never
       shrink, which is what made zooming in cut the expense-overview chart off on the right. */
    min-width: 0;
}

.sidebar[b-e24iz81u04] {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}

.top-row[b-e24iz81u04] {
    background-color: var(--content-bg);
    border-bottom: 1px solid var(--border-default);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-e24iz81u04]  a, .top-row[b-e24iz81u04]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-e24iz81u04]  a:hover, .top-row[b-e24iz81u04]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-e24iz81u04]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-e24iz81u04] {
        justify-content: space-between;
    }

    .top-row[b-e24iz81u04]  a, .top-row[b-e24iz81u04]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-e24iz81u04] {
        flex-direction: row;
    }

    .sidebar[b-e24iz81u04] {
        width: 248px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-e24iz81u04] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-e24iz81u04]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    /* 1rem here + the page containers' own 12px gutter = the mockup's 28px
       content inset; the topbar's 18px inset is set on the TopBar itself. */
    .top-row[b-e24iz81u04], article[b-e24iz81u04] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-couvei31v4] {
    background-color: var(--hover-bg);
    border: 1px solid var(--border-default);
}

.top-row[b-couvei31v4] {
    height: 3.5rem;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-default);
}

.navbar-brand[b-couvei31v4] {
    font-size: 1.1rem;
}

.bi[b-couvei31v4] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-couvei31v4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-couvei31v4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-couvei31v4] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-couvei31v4] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-couvei31v4] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-couvei31v4] {
        padding-bottom: 1rem;
    }

    .nav-item[b-couvei31v4]  a {
        color: var(--text-secondary);
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-couvei31v4]  a.active {
    background-color: var(--active-bg);
    color: var(--text-primary);
    font-weight: 600;
    border-left: 3px solid var(--active-border);
    margin-left: -3px;
}

.nav-item[b-couvei31v4]  a:hover {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

@media (min-width: 641px) {
    .navbar-toggler[b-couvei31v4] {
        display: none;
    }

    .collapse[b-couvei31v4] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-couvei31v4] {
        /* Fixed height, no scroll - child elements handle scrolling */
        height: 100vh;
        overflow: hidden;
    }
}
/* /Pages/Accounts/AccountView.razor.rz.scp.css */
.statement-table-wrap[b-ll24oeakls] {
    max-height: calc(100vh - 280px);
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.statement-table-wrap table[b-ll24oeakls] {
    margin-bottom: 0;
}

.statement-table-wrap thead[b-ll24oeakls] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.statement-table-wrap th[b-ll24oeakls] {
    white-space: nowrap;
}

.statement-cell-text[b-ll24oeakls] {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.statement-table-wrap td[b-ll24oeakls] {
    vertical-align: top;
}

.statement-table-wrap .badge[b-ll24oeakls] {
    white-space: normal;
}

.statement-table-wrap .form-select[b-ll24oeakls],
.statement-table-wrap .form-control[b-ll24oeakls] {
    min-width: 0;
}

.statement-table-wrap select.form-select[b-ll24oeakls] {
    text-overflow: ellipsis;
}

.statement-table-wrap .btn-sm[b-ll24oeakls] {
    white-space: nowrap;
}

.statement-edit-cell[b-ll24oeakls] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.statement-edit-cell-end[b-ll24oeakls] {
    align-items: center;
    justify-content: flex-end;
}

.statement-cell-edit-button[b-ll24oeakls] {
    flex: 0 0 auto;
    padding-left: 6px;
    padding-right: 6px;
}

.statement-amount-editor[b-ll24oeakls] {
    min-width: 96px;
    max-width: 132px;
}

.statement-amount-editor .form-control[b-ll24oeakls] {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .statement-table-wrap[b-ll24oeakls] {
        max-height: none;
    }
}
/* /Pages/Items/GetButton.razor.rz.scp.css */
.btn-sufficient-balance[b-ix80nlxjkw] {
    background-color: #007bff; /* Bootstrap primary color */
    color: white;
}

.btn-sufficient-balance:hover[b-ix80nlxjkw] {
    background-color: #0056b3; /* Darker shade on hover */
}

.btn-insufficient-balance[b-ix80nlxjkw] {
    background-color: #6c757d; /* Bootstrap secondary color */
    color: white;
}

.btn-insufficient-balance:hover[b-ix80nlxjkw] {
    background-color: #5a6268; /* Darker shade on hover */
}
/* /Pages/Items/MarketplaceCard.razor.rz.scp.css */
/* Card container to ensure full height and margins between cards */
.marketplace-item-card[b-nv7hykwojo] {
    font-size: 0.9rem;
}

/* Image container with background color and size constraints */
.card-img-top-container[b-nv7hykwojo] {
    background-color: var(--hover-bg);
    padding: 5px; /* Small padding around the image */
    text-align: center; /* Center the image horizontally */
    height: 128px; /* Fixed height for the image container */
}

/* Styling for the image itself */
.card-img-top[b-nv7hykwojo] {
    max-width: 100%; /* Ensure the image doesn't exceed the width of the container */
    max-height: 100%; /* Ensure the image doesn't exceed the height of the container */
    object-fit: contain; /* Keep the image's aspect ratio and contain it within the box */
}

/* Card title: adjust font size and weight */
.card-title[b-nv7hykwojo] {
    font-size: 0.85rem; /* Slightly smaller font size */
    font-weight: bold; /* Bold text for the item name */
}

/* Card description text */
.card-text[b-nv7hykwojo] {
    font-size: 0.8rem; /* Smaller font for the description */
    flex-grow: 1; /* Allow the description to grow and push the Buy button down */
}

/* The container of the entire card */
.marketplace-item-card[b-nv7hykwojo] {
    height: 100%; /* Ensure the card takes up the full height in the grid */
    margin-bottom: 2rem; /* Add space between the cards */
}

/* Requires Validation Badge: Softer Brownish Maroon */
.requires-validation-badge[b-nv7hykwojo] {
    background-color: #a05252; /* Softer maroon color */
    color: #fff; /* White text for readability */
}

/* Sold Out Badge: Greyish color */
.sold-out-badge[b-nv7hykwojo] {
    background-color: #6c757d; /* Greyish color */
    color: #fff; /* White text */
}
/* /Pages/Statements/BankAccountView.razor.rz.scp.css */
/* Statement entry table — compact, scannable list for a single bank account's
   movements. Rides the app-wide grayscale tokens (see wwwroot/css/app.css) so it
   adapts to dark mode automatically. */

.statement-table-wrap[b-l7sw45edm7] {
    max-height: calc(100vh - 280px);
    overflow: auto;
    border: 1px solid var(--border-default, #dee2e6);
    border-radius: var(--radius, 8px);
}

/* Outer wrapper: top row (calendar + rules panel) stacked above the
   full-width entry table below it. */
.statement-main-layout[b-l7sw45edm7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



/* Period picker — the displayed year's months plus a year row with prev/next
   arrows underneath. Full width, stacked above the entry table. */
.statement-period-panel[b-l7sw45edm7] {
    width: 100%;
}

/* Months fill the row: twelve across on a wide panel, wrapping to fewer per
   row as it narrows, so a month button never stretches out of proportion. */
.statement-period-grid[b-l7sw45edm7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.3rem;
}

.statement-period-month[b-l7sw45edm7] {
    position: relative;
}

.statement-period-month-dot[b-l7sw45edm7] {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bs-warning, #ffc107);
}

.statement-period-year-row[b-l7sw45edm7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Categorization rules — full width, last in the column, under the entry
   table. The width gives the pattern/details columns room to show a full
   rule and lets the actions column keep its buttons on one line. */
.statement-rules-panel[b-l7sw45edm7] {
    width: 100%;
}

/* Entry table — full width below the calendar/rules row, instead of being
   squeezed into the remaining space next to the rules panel. */
.statement-table-section[b-l7sw45edm7] {
    width: 100%;
}

/* Caps the rule list so a long list scrolls in place instead of pushing the
   calendar panel (same row) ever taller. overflow-x stays hidden — the panel
   is sized wide enough, and cells wrap, so nothing needs a horizontal
   scrollbar. */
.statement-rules-table-wrap[b-l7sw45edm7] {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

.statement-rules-table-wrap thead[b-l7sw45edm7] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.statement-rules-table[b-l7sw45edm7] {
    width: 100%;
    /* Fixed layout so the column widths below are honoured instead of being
       re-derived from cell content, which squeezed actions down to one button. */
    table-layout: fixed;
}

.statement-rules-table th[b-l7sw45edm7],
.statement-rules-table td[b-l7sw45edm7] {
    padding: 0.3rem 0.5rem;
    white-space: normal;
    word-break: break-word;
}

/* Column widths: pattern and details get the bulk of the panel so a long
   keyword or a long details text stays readable, while active/actions take
   only what their buttons need. Actions never wraps — it holds two buttons. */
.statement-rules-col-pattern[b-l7sw45edm7] {
    width: 25%;
}

.statement-rules-col-category[b-l7sw45edm7] {
    width: 19%;
}

.statement-rules-col-details[b-l7sw45edm7] {
    width: 38%;
}

.statement-rules-col-active[b-l7sw45edm7] {
    width: 72px;
    white-space: nowrap;
}

.statement-rules-col-actions[b-l7sw45edm7] {
    width: 96px;
    white-space: nowrap;
}

.statement-table-wrap table[b-l7sw45edm7] {
    margin-bottom: 0;
}

.statement-table-wrap thead[b-l7sw45edm7] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.statement-table-wrap th[b-l7sw45edm7] {
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted, #6b7280);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Tight, consistent row rhythm — the bulk of the "too much space per row" fix. */
.statement-table-wrap td[b-l7sw45edm7] {
    vertical-align: top;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.825rem;
    line-height: 1.3;
}

.statement-table-wrap .badge[b-l7sw45edm7] {
    white-space: normal;
    font-weight: 500;
}

.statement-table-wrap .form-select[b-l7sw45edm7],
.statement-table-wrap .form-control[b-l7sw45edm7] {
    min-width: 0;
    font-size: 0.8rem;
}

.statement-table-wrap select.form-select[b-l7sw45edm7] {
    text-overflow: ellipsis;
}

.statement-table-wrap .btn-sm[b-l7sw45edm7] {
    white-space: nowrap;
}

/* Column sizing — fluid instead of a hard-coded 1240px min-width. Description
   is capped instead of left to grow unbounded, so narrower viewports need less
   horizontal scroll than the previous 8-column layout. */
.statement-col-date[b-l7sw45edm7] {
    width: 108px;
}

.statement-col-category[b-l7sw45edm7] {
    width: 150px;
}

.statement-col-amount[b-l7sw45edm7] {
    width: 110px;
}

.statement-col-distribution[b-l7sw45edm7] {
    width: 260px;
}

.statement-col-actions[b-l7sw45edm7] {
    width: 44px;
}

.statement-col-desc[b-l7sw45edm7] {
    width: 220px;
    max-width: 220px;
}

/* Details is its own column next to Description, not a sub-row inside it —
   Description (read-only, no edit control) and Details (editable) need to
   read as clearly separate fields, not like Description itself is editable. */
.statement-col-details[b-l7sw45edm7] {
    width: 170px;
    max-width: 170px;
}

/* While a Details/Category/Amount cell is actively being edited, let that
   column grow past its normal fixed width so the inline input/select has
   real room to show what's being typed/selected — instead of squeezing it
   into a 150-220px sliver. Only the column being edited expands (standard
   table auto-layout sizes the whole column to its widest cell, so this
   widens that column for every row while one entry in it is in edit mode);
   everything else keeps its normal width. The table wrapper's horizontal
   scroll (see .statement-table-wrap) absorbs any extra width this needs on
   narrow viewports instead of clipping it. */
.statement-col-details.statement-col-editing[b-l7sw45edm7],
.statement-col-category.statement-col-editing[b-l7sw45edm7] {
    width: auto;
    max-width: none;
    min-width: 260px;
}

.statement-col-amount.statement-col-editing[b-l7sw45edm7] {
    width: auto;
    max-width: none;
    min-width: 210px;
}

.statement-col-amount.statement-col-editing .statement-amount-editor[b-l7sw45edm7] {
    max-width: 180px;
}

.statement-date-line[b-l7sw45edm7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary, #374151);
    font-size: 0.8rem;
}

.statement-source-icon[b-l7sw45edm7] {
    font-size: 0.7rem;
    color: var(--text-subtle, #9ca3af);
    width: 14px;
    text-align: center;
}

.statement-badge-ignored[b-l7sw45edm7] {
    display: inline-flex;
    margin-top: 0.25rem;
    background-color: var(--hover-bg, #f3f4f6);
    color: var(--text-muted, #6b7280);
    border: 1px solid var(--border-default, #e4e6ea);
    font-size: 0.68rem;
}

/* Single-line, ellipsized — full text is still on the title attribute for a
   hover tooltip. Combined with .statement-cell-text for specificity so this
   wins regardless of source order against its white-space: normal below. */
.statement-cell-text.statement-desc-primary[b-l7sw45edm7],
.statement-cell-text.statement-desc-secondary[b-l7sw45edm7] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.statement-desc-primary[b-l7sw45edm7] {
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.statement-desc-secondary[b-l7sw45edm7] {
    color: var(--text-muted, #6b7280);
    font-size: 0.75rem;
}

.statement-amount[b-l7sw45edm7] {
    font-size: 0.9rem;
    white-space: nowrap;
}

.statement-cell-text[b-l7sw45edm7] {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.statement-edit-cell[b-l7sw45edm7] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.statement-edit-cell-end[b-l7sw45edm7] {
    align-items: center;
    justify-content: flex-end;
}

.statement-cell-edit-button[b-l7sw45edm7] {
    flex: 0 0 auto;
    padding-left: 6px;
    padding-right: 6px;
}

.statement-amount-editor[b-l7sw45edm7] {
    min-width: 96px;
    max-width: 132px;
}

.statement-amount-editor .form-control[b-l7sw45edm7] {
    min-width: 0;
}

.statement-action-btn[b-l7sw45edm7] {
    width: 32px;
    padding-left: 0;
    padding-right: 0;
}

/* Status accent: a slim left border instead of a fully tinted row — reads as a
   calm status marker rather than drowning the row in background color. */
.statement-row[b-l7sw45edm7] {
    border-left: 3px solid transparent;
}

.statement-row-pending[b-l7sw45edm7] {
    border-left-color: #f0ad4e;
    background-color: rgba(240, 173, 78, 0.07);
}

.statement-row-ignored[b-l7sw45edm7] {
    border-left-color: var(--text-subtle, #9ca3af);
    color: var(--text-muted, #6b7280);
    opacity: 0.75;
}

.statement-row-done[b-l7sw45edm7] {
    border-left-color: #2fb380;
}

@media (max-width: 767.98px) {
    .statement-table-wrap[b-l7sw45edm7] {
        max-height: none;
    }
}
/* /Pages/Transactions/TransactionDetails.razor.rz.scp.css */
.profile-img[b-nkso05c5u7] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-default);
}

.profile-img-small[b-nkso05c5u7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.sticky-top[b-nkso05c5u7] {
    position: sticky;
    top: 1rem;
}

.card-title[b-nkso05c5u7] {
    font-size: 1.1rem;
    font-weight: 600;
}

.badge[b-nkso05c5u7] {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}

/* Status badge colors */
.bg-warning.text-dark[b-nkso05c5u7] {
    background-color: #ffc107 !important;
    color: var(--text-primary) !important;
}

/* Transaction amount styling */
.fs-4[b-nkso05c5u7] {
    font-weight: 600;
}

/* Table hover effect */
.table-hover tbody tr:hover[b-nkso05c5u7] {
    background-color: rgba(0, 123, 255, 0.075);
}

/* Alert animation */
.alert[b-nkso05c5u7] {
    animation: fadeInUp-b-nkso05c5u7 0.3s ease-out;
}

@keyframes fadeInUp-b-nkso05c5u7 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading spinner center */
.spinner-border[b-nkso05c5u7] {
    width: 3rem;
    height: 3rem;
}

/* Action buttons spacing */
.d-grid.gap-2[b-nkso05c5u7] {
    gap: 0.75rem !important;
}

/* Profile picture animation */
.profile-img[b-nkso05c5u7] {
    transition: transform 0.2s ease-in-out;
}

.profile-img:hover[b-nkso05c5u7] {
    transform: scale(1.05);
}

/* Card shadow on hover */
.card:hover[b-nkso05c5u7] {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
}

/* Arrow styling */
.fa-arrow-right[b-nkso05c5u7] {
    color: #6c757d !important;
    animation: pulse-b-nkso05c5u7 2s infinite;
}

@keyframes pulse-b-nkso05c5u7 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}