/* Components used by more than one page: .jas-btn, .section-card, dashboard filter cards, brand logo,
   global search results, quick preview, status pills, badges. */

/* The packet on Correspondence/Send: one row per file, replacing a single opaque "Download Attachment"
   button. A list rather than a row of buttons because the count varies from one to several and the file
   NAME is the useful part - it carries the account number, the letter name and the build timestamp. */
.correspondence-attachments {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
}

    .correspondence-attachments li + li {
        margin-top: .25rem;
    }

    /* Only Send.cshtml's "AllowRemove" variant puts a second element in the li (see
       _AttachmentList.cshtml) - flex keeps it sitting just to the right of the filename rather than
       wrapping under it. NOT justify-content: space-between - that pulled the button all the way to the
       row's trailing edge, far from the file it removes; flex-start plus the gap below is what keeps it
       close. Harmless on Download.cshtml's plain single-child li either way. */
    .correspondence-attachments li {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    .correspondence-attachments a {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        font-size: .875rem;
    }

    /* Overrides jas-btn-sm's own padding/font-size (6px 12px / 12px) - a round icon-only button reads
       right smaller than a labeled one, and at that size a rectangular pill looked oversized next to an
       X. Red, flat in both themes, matches .jas-btn-danger's own un-varied red further down this file -
       this IS a destructive action, just one too small a control to spell "Remove" on the button itself;
       the label moved to the native title attribute (hover tooltip, no JS) and aria-label instead. */
    .correspondence-attachments .correspondence-attachment-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        padding: 0;
        font-size: 12px;
        line-height: 1;
        color: #dc3545;
    }

        .correspondence-attachments .correspondence-attachment-remove:hover {
            color: #c62b39;
        }

    .correspondence-attachments .bi {
        color: var(--jas-text-muted, #6c757d);
    }

    /* Wins over the muted-gray rule above on specificity (three classes vs. two) - without it the X
       icon's own .bi rule would override the red set on its parent button, since color on a directly
       matched element beats inheriting one from an ancestor regardless of source order. */
    .correspondence-attachments .correspondence-attachment-remove .bi {
        color: inherit;
    }

.jas_brand {
    font-size: 7.7px;
    padding: 2px;
}

    /* Navbar only: the letters a step smaller than the logo's default, beside a much smaller mark. Doubled
       class so it beats .brand-logo--jas .brand-logo-word / .brand-logo-mark, which are the same
       specificity and later. */
    .jas_brand.brand-logo--jas .brand-logo-word {
        font-size: 1.75em;
    }

    .jas_brand.brand-logo--jas .brand-logo-mark {
        height: 1.5em;
    }

/* Views/Shared/_BrandLogo.cshtml. Size a logo with font-size; everything inside is in em. The wordmark font
   is self-hosted because CSP allows fonts from 'self' only. */
@font-face {
    font-family: "Montserrat";
    src: url("../../lib/montserrat/montserrat-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.brand-logo {
    --brand-ink: #26323f;
    --brand-accent: #1cb8ee;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--brand-ink);
    font-family: "Montserrat", var(--bs-body-font-family);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.brand-logo-mark {
    flex: none;
    height: 3em;
    width: auto;
}

/* Views/Shared/_BrandLogo.cshtml's TrakIq branch: the hand-drawn "IQ" glyph, sized to sit on the
   "Trak" text's own baseline/cap-height (em is relative to .brand-logo-word's font-size, its parent). */
.brand-logo-iq {
    height: 0.78em;
    width: auto;
    vertical-align: -0.06em;
    margin-left: 0.12em;
}

.brand-logo--jas .brand-logo-word {
    font-size: 2.05em;
    font-weight: 600;
    letter-spacing: .04em;
}

.brand-logo--trakiq {
    --brand-ink: #141414;
    --brand-accent: #10c4f4;
    gap: .4em;
}

    .brand-logo--trakiq .brand-logo-word {
        font-size: 2.5em;
        font-weight: 650;
        letter-spacing: -.01em;
    }

.brand-logo--ctb .brand-logo-word {
    display: flex;
    flex-direction: column;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.05;
}

[data-bs-theme="dark"] .brand-logo {
    --brand-ink: #e8edf2;
}

/* Navbar global search autocomplete (globalsearch.js) - result rows and group headers, plus the
   widened popup class applied via onGlobalSearchOpen. Scoped to .jas-global-search-popup rather
   than the shared .k-list-container/.k-list so it doesn't affect any other Kendo dropdown's popup. */
.jas-global-search-popup {
    max-width: min(480px, calc(100vw - 1rem));
}

.jas-gsi {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .15rem 0;
}

.jas-gsi-icon {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--bs-secondary-color, #6c757d);
}

.jas-gsi-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.jas-gsi-primary {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jas-gsi-secondary {
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shown on every real hit (see globalsearch.js's template) - which field actually matched, so a
   result that doesn't look related to what was typed (e.g. matched via a PO Reference note) isn't
   a mystery. Same size as .jas-gsi-carrier but not italicized, to stay visually distinct from it. */
.jas-gsi-matched {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Factoring-tenant transaction hits only (see globalsearch.js's template) - smaller than
   .jas-gsi-secondary and explicitly labeled "Carrier:" so it reads as a distinct, lower-priority
   fact about the transaction rather than a second account name. */
.jas-gsi-carrier {
    font-size: .75rem;
    font-style: italic;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Debtor 360, on account-kind hits only (see globalsearch.js's template and GlobalSearchHit.ProfileUrl).
   A real anchor inside a dropdown item, so it needs pointer-events of its own and a click handler that
   stops the event reaching Kendo's delegated item click - see globalsearch.js. Sized like the other
   sub-lines so it reads as an alternative destination rather than as the hit's own title. */
.jas-gsi-profile {
    font-size: .75rem;
    align-self: flex-start;
    text-decoration: none;
}

    .jas-gsi-profile:hover {
        text-decoration: underline;
    }

/* The synthetic "view all results in the grid" row appended per Kind (see GlobalSearch.
   SearchAsync/BuildViewAllHit) - always the last item within its group, so a top border and a
   link-styled primary line keep it from reading as just another account/transaction match. */
.jas-gsi-viewall {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    margin-top: .15rem;
    padding-top: .5rem;
}

.jas-gsi-viewall .jas-gsi-icon,
.jas-gsi-viewall .jas-gsi-primary {
    color: var(--bs-primary, #0d6efd);
}

.jas-gsi-group {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-tertiary-bg, #f8f9fa);
    padding: .25rem .75rem;
}

.jas-gsi-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    color: var(--bs-secondary-color, #6c757d);
}

.jas-gsi-empty-icon {
    font-size: 1.5rem;
    opacity: .5;
}

.jas-gsi-empty-text {
    font-size: .875rem;
}

/* The Show/Hide Columns panel (site/grid-columns.js): Accounts/Details' offcanvas and Accounts/Search's
   Columns dropdown. */
/* 1rem, not wider: Accounts/Search's seven groups then fit one row on a 1280px screen. */
.column-visibility-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.column-visibility-group {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.column-visibility-group-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* As wide as one row of every group, so the groups sit side by side instead of stacking into a scroll;
   it wraps only where its containing block (.accounts-search-toolbar) is narrower than that. */
.column-visibility-menu {
    width: max-content;
    max-width: 100%;
    max-height: 60vh;
    overflow-y: auto;
}

.binsize-selector {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
    background: var(--jas-bg, #fff);
}

.binsize-label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--jas-text, #36393b);
}

.binsize-options {
    display: flex;
    gap: 8px;
}

/* .changeCollectorBinSize is the Dashboard per-collector Aging card's own bin size selector - same pill
   look as .changeBinSize (the Supervisor summary row's), but a separate class so its click handler
   (dashboard.js) can target its own grid/state variable without also firing .changeBinSize's handler on
   the same click. */
.changeBinSize,
.changeCollectorBinSize {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 50%;
    border: 2px solid transparent;
    color: var(--jas-text, #36393b);
    background: var(--jas-bg-subtle, #f8f9fa);
    transition: all .2s ease;
}

    .changeBinSize:hover,
    .changeCollectorBinSize:hover {
        background: var(--jas-bg-subtle, #eef8fd);
        color: var(--jas-primary, #2797d4);
        border-color: var(--jas-accent, #47baed);
    }

    .changeBinSize.active,
    .changeCollectorBinSize.active {
        background: var(--jas-accent, #16C4F6);
        color: white;
        border-color: var(--jas-accent, #45a5d9);
    }

        .changeBinSize.active:hover,
        .changeCollectorBinSize.active:hover {
            background: #36b4cd;
            color: white;
            border-color: #45a5d9;
        }

.dashboard-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: .2rem;
}

    .dashboard-filters > div[class*="col-"] {
        display: flex;
        padding: 0;
    }

    .dashboard-filters .dashboard-filter-card {
        width: 100%;
        margin: .7rem 1rem;
        display: flex;
        flex-direction: column;
    }

.dashboard-filter-card {
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-divider, #f1f1f1);
    border-radius: 16px;
    padding: 1rem;
    margin: .7rem 1rem;
    min-width: 330px;
    flex: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    transition: .2s ease;
}

.dashboard-filter-card h4 {
    padding: 0 0 .2rem .7rem;
}

    .dashboard-filter-card .k-multiselect {
        min-height: 34px !important;
    }

.col.dashboard-filter-card {
    padding: 1rem 0 !important;
}

.dashboard-filter-card:hover {
    border: 1px solid var(--jas-divider, #e9ecef);
    border-color: rgba(13,202,240,.4);
    box-shadow: 0 6px 20px rgba(13,202,240,.08);
}

/* A filter row laid out as a grid instead of Bootstrap columns. Inside a col-md-3 the card's 330px min-width
   overflowed into its neighbour; here the 330px floor is the column width, and the row reflows to fewer
   columns as the window narrows. --narrow is the 260px variant the Open Transactions reports use. */
.dashboard-filters.dashboard-filters--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1rem;
}

.dashboard-filters.dashboard-filters--grid.dashboard-filters--narrow {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding: 12px;
}

.dashboard-filters.dashboard-filters--grid .dashboard-filter-card {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
}

/* A filter row that keeps its Bootstrap columns: each card shrinks to its column instead (its 330px
   min-width overflowed a col-md-2/3, and a phone scrolled sideways). The gutter is column padding plus a
   matching negative row margin, not flex gap: the columns already sum to 100% and do not shrink, so a gap
   wraps the last one. The Kendo rules stop a MultiSelect's chips widening the card again. */
.dashboard-filters.dashboard-filters--fit {
    margin-left: -6px;
    margin-right: -6px;
}

    .dashboard-filters.dashboard-filters--fit > div[class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .dashboard-filters.dashboard-filters--fit .dashboard-filter-card {
        min-width: 0;
        max-width: 100%;
        margin: 0;
        height: 100%;
        box-sizing: border-box;
    }

    .dashboard-filters.dashboard-filters--fit .k-multiselect,
    .dashboard-filters.dashboard-filters--fit .k-input,
    .dashboard-filters.dashboard-filters--fit .k-picker {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dashboard-filters.dashboard-filters--fit .k-input-values,
    .dashboard-filters.dashboard-filters--fit .k-chip-list,
    .dashboard-filters.dashboard-filters--fit .k-input-inner {
        min-width: 0;
        max-width: 100%;
    }

.dashboard-filter-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--jas-text, #000);
    margin-bottom: .5rem;
    font-size: 1rem;
}

    .dashboard-filter-label i {
        color: var(--jas-accent, #16C4F6) !important;
        font-size: 1.2rem;
    }

.section-card-body {
    padding-top: 1.5rem;
}

/* Every new page wraps .section-card-body's content in this, so it lines up with the header's 1.5rem.
   Not put on .section-card-body itself: many pages already add their own wrapper with this padding
   (grep "padding: 0 1.5rem 1.5rem"), and it would double on each. JAS.WebCore/CLAUDE.md has the rule. */
.section-card-content {
    padding: 0 1.5rem 1.5rem;
}

@media (max-width: 767.98px) {
    .section-card-content {
        padding: 0 1rem 1rem;
    }
}

/* Tighter mobile padding, opt-in with both classes. The selector is doubled so it beats the @media rule
   above on specificity rather than on source order. */
@media (max-width: 767.98px) {
    .section-card-content.section-card-content--compact {
        padding: 0 .75rem .75rem;
    }
}

.section-subcard {
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-border, #e5e7eb);
    border-radius: .75rem;
    height: 100%;
}

.section-subcard-header {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--jas-divider, #e5e7eb);
}

.section-subcard-body {
    padding: 1.25rem;
}

.section-card-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}


/*#####         TrakIQ          #####*/
/*#####        Accounts         #####*/

/* Previously unstyled - Views/TrakIQ/Accounts.cshtml, the global-admin account list. Same 1900px family
   as every other TrakIQ grid/workspace page - see .customer-name-map-page's own comment. */
.accounts-page {
    max-width: 1900px;
    margin: 0 auto;
    padding: 24px;
}


/*#####                         #####*/
/*#####        Shared           #####*/
/*#####                         #####*/

.jas-btn {
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: .2s ease;
}

    .jas-btn:hover, .jas-btn-sm:hover {
        transform: translateY(-1px);
    }

.jas-btn-sm {
    border: none;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: .2s ease;
}

.jas-btn-primary {
    background: var(--jas-accent, #16C4F6);
    color: white;
}

    .jas-btn-primary:hover {
        background: #17bceb;
        color: white;
    }

.jas-btn-secondary {
    background: #ededed;
    color: var(--jas-text, #111827);
}

    .jas-btn-secondary:hover {
        background: #e5e7eb;
    }

[data-bs-theme="dark"] .jas-btn-secondary {
    /* Dark mode gives this button its own dark-gray surface (rather than reusing the light-mode
       #ededed), so the text needs to flip light-gray here to match - the opposite of the old fix,
       which only had to darken text against a background that stayed light in both modes. */
    background: var(--jas-border, #3a4048);
    color: var(--jas-text-muted, #9aa4ad);
}

    [data-bs-theme="dark"] .jas-btn-secondary:hover {
        background: var(--jas-bg-subtle, #242a30);
    }

/* For the one action on a screen that removes something rather than changing it. Kept visually distinct
   from primary so a destructive button can never be the one you hit by muscle memory. */
.jas-btn-danger {
    background: #dc3545;
    color: white;
}

    .jas-btn-danger:hover {
        background: #c62b39;
        color: white;
    }

    .jas-btn-danger:disabled {
        background: #e9a7ad;
        cursor: not-allowed;
        transform: none;
    }

/* NOTE: .jas-btn-danger is the only variant with a disabled treatment. A disabled .jas-btn-primary or
   .jas-btn-secondary still renders at full strength and still lifts on hover, which is why the one on
   Correspondence/Create has to fade itself (.correspondence-create-actions, further up this file).
   There are disabled .jas-btn-sm buttons on Transactions/Disputes, Emails/_MailWorkspace and
   Reports/CollectorWorklist with the same problem, so the rule below wants generalising - but not
   blind: a flat opacity on .jas-btn-secondary's #ededed is close to invisible against white, and the
   Disputes toolbar puts six of them in a row. Whoever does it should look at that screen first. */

.notes-dt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 2px 6px;
    color: var(--jas-text, #111) !important;
    border-radius: 16px;
    border-color: var(--jas-border, #959595);
    background-color: var(--jas-bg-subtle, #e3e3e3);
}

.notes-dt-button:hover {
    background-color: #16C4F665;
}

.section-card {
    background: var(--jas-bg, #ffffff);
    border: 1px solid var(--jas-divider, #e9ecef);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    overflow: hidden;
    padding: 12px;
}

.section-card-header {
    padding: .5rem 1.5rem;
}

.section-card-title {
    font-size: 28px;
    color: var(--jas-text, #212529);
    margin-bottom: .25rem;
}

.section-header {
    padding: 0rem 1rem 1rem 1rem;
}

/* The "What do these mean?" reference popup - Dashboard's #dashboardHelpContent and CollectorTrend's
   #helpContent (dashboard.js/reports_collectortrend.js render identical markup into both from duplicated
   builder functions, so one rule set here covers both). */
#dashboardHelpContent .section-header,
#helpContent .section-header {
    padding: .1rem;
}

/* Every table in this popup is two columns (a badge/label cell, then a description cell) - fixed layout
   pins the first column at 180px and lets the second take the rest, rather than auto-sizing off content. */
#dashboardHelpContent table,
#helpContent table {
    table-layout: fixed;
}

#dashboardHelpContent table th:first-child,
#helpContent table th:first-child {
    width: 180px;
}

.section-card-details {
    border: 1px solid var(--jas-divider, #d9e3ea);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--jas-bg-subtle, #fafbfc);
    transition: .2s ease;
}

.section-padding {
    padding: 1.5rem;
}

.section-title {
    font-size: 22px;
    color: var(--jas-text, #111827);
}

.section-title-minor {
    font-size: 18px;
    color: var(--jas-text, #111827);
}

.section-description {
    color: var(--jas-text, #36393b);
    font-size: 13px;
    line-height: 1.45;
}

/* After .section-title-minor on purpose: both are one class, and markup pairs them to recolour the title. */
.primary-text {
    color: var(--jas-accent, #16C4F6);
}


    .status-pill {
        display: inline-block;
        padding: .25rem .7rem;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
    }

    .status-success {
        background: rgba(38,181,115,.9);
    }

    .status-neutral {
        background: rgba(157,157,157,.9);
    }

    .status-warning {
        background: rgba(233,185,47,.9);
    }

    .status-danger {
        background: rgba(229,60,60,.9);
    }

    /* Small "this feature is still in preview" tag for nav items (_Layout.cshtml's Inbound Emails
       dropdown) - soft purple, same family as the Category=Legal badge in emails.css, rather than a
       new one-off color. */
    .nav-preview-badge {
        background-color: #e2d9f3;
        color: #4b2e83;
        font-size: .62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: .2em .5em;
        vertical-align: middle;
        border-radius: 999px;
    }

/* Account quick-preview hover card on Transactions/Search (Views/Accounts/_AccountQuickPreview.cshtml,
   positioned by transactions_search.js). Lives here rather than in a <style> block because the markup
   arrives by AJAX, where an inline style tag has no clean access to the CSP nonce.

   The panel is positioned in JS, so only its size/appearance is here - top/left are set inline. */
.jas-quick-preview-panel {
    position: fixed;
    z-index: 1080; /* above Kendo's grid chrome, below its modal windows */
    width: 440px;
    max-width: calc(100vw - 20px);
    max-height: 80vh;
    overflow-y: auto;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-divider, #d5d8dc);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    padding: 10px 12px;
    font-size: .82rem;
    /* The card is informational and the row underneath it is clickable, so it must never swallow a
       click meant for the grid. */
    pointer-events: none;
}

    .jas-quick-preview-panel[hidden] {
        display: none;
    }

.jas-quick-preview-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
}

/* Kendo's "No data available" chart overlay (z-index 10000) painted over Bootstrap modals (1055).
   Hidden while a modal is open rather than re-stacking z-indexes against Kendo's own windows. */
body.modal-open .k-chart-overlay {
    display: none;
}

.jas-quick-preview-subtitle {
    font-size: .87rem;
    color: var(--jas-text-muted, #6c757d);
    margin-bottom: 6px;
}

.jas-quick-preview-section {
    border-top: 1px solid var(--jas-divider, #eceef0);
    padding-top: 5px;
    margin-top: 5px;
}

.jas-quick-preview-section-label {
    font-weight: 600;
    font-size: .87rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--jas-text-muted, #6c757d);
    margin-bottom: 3px;
}

.jas-quick-preview-freshness {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
}

/* Two columns of label/value pairs. auto-fit rather than a fixed count so the optional rows (DBT,
   Alerts, Calls due) don't leave a hole when they're absent. */
.jas-quick-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 10px;
}

    .jas-quick-preview-grid > div {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        min-width: 0;
    }

.jas-quick-preview-wide {
    grid-column: 1 / -1;
}

.jas-quick-preview-label {
    color: var(--jas-text-muted, #6c757d);
    white-space: nowrap;
}

.jas-quick-preview-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jas-quick-preview-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}

.jas-quick-preview-noflags,
.jas-quick-preview-footer {
    font-size: .85rem;
}

.jas-quick-preview-footer {
    border-top: 1px solid var(--jas-divider, #eceef0);
    margin-top: 5px;
    padding-top: 4px;
    font-style: italic;
}

.jas-quick-preview-loading {
    color: var(--jas-text-muted, #6c757d);
    font-style: italic;
}

/* Selection summary bar above the Transactions/Search grid. */
.transactions-selection-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.transactions-selection-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

    /* Past the distinct-account ceiling the actions are disabled, so the count has to say why. */
    .transactions-selection-count.over-limit {
        color: #b02a37;
    }

.er-page {
    max-width: 2600px;
    margin: 0 auto;
    padding: 24px;
}