/* Accounts and Transactions screens, and the workspaces several of them host: Accounts/Details and its
   tabs, Search, Summary, Notes, the Timeline and Cash Forecast chrome. Global because those workspaces
   render on more than one page. */

#accounts_details #s8 {
    height: 100%;
}

/* .inboundParseNote is gone: an email-sourced note's TEXT is no longer a click target - the "Read the
   email" button in the Employee column opens the same viewer (note_author.js). The rule below stays
   because a sent-email note still works that way. */

/* Un-scoped from #accounts_details 2026-08-22: the tenant-wide Account Notes page renders the same click
   target through the same shared cell (notes_cells.js's accountNoteActivityCell), and an id-scoped rule
   would have left it looking like plain text on the page that got it second. */
.sentEmailNote {
    cursor: pointer;
    color: var(--jas-primary, #0078d4);
}

#accounts_details .salesRepLabel {
    display: inline-block;
    width: 80px;
    text-align: right;
    padding-right: 10px;
}

#accounts_details .form-text {
    color: var(--bs-body-color);
}

#accounts_details #fixed-header {
    z-index: 1000;
    top: var(--jas-fixed-header-offset);
    margin-top: -3.5px;
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
}

#accounts_details textarea {
    height: 32px;
    max-height: 150px;
    resize: none;
}

#accounts_details #myTab {
    z-index: 999;
    top: var(--jas-tab-offset);
    /*margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);*/
}

#accounts_details .tab-pane .k-grid {
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
}

#accounts_details #Tasks_Grid td {
    font-size: 1rem !important;
}

#accounts_details #Tasks_Grid:hover {
    cursor: pointer;
}

#accounts_details #AccountArSummary_Grid tbody tr:hover {
    cursor: pointer;
}

#accounts_details #AccountCarrierArSummary_Grid tbody tr:hover {
    cursor: pointer;
}

/* #accounts_details .tab-pane .k-grid (above) pulls every grid on this page outward by half a
   Bootstrap gutter on each side, to bleed a full-width grid to its card's edges - AccountTransactionHistory_Grid
   wants that, but these two small grids sit side by side in .account-ar-summary-layout, so the same rule
   pulls their facing edges toward each other by a combined gutter's worth and overlaps them. Not a
   min-width/overflow issue - undoing the bleed here is the actual fix. */
#accounts_details #AccountCarrierArSummary_Grid,
#accounts_details #AccountArSummary_Grid {
    margin-left: 0;
    margin-right: 0;
}

/* min-width: 0 lets this flex item shrink below its grid's ~640px natural width; overflow-x: auto then
   scrolls the grid instead of letting it spill over the AR summary grid beside it. Not applied to
   #AccountArSummary: its 1fr track needs its ~335px min-width or the auto tracks squeeze it to a sliver. */
#AccountCarrierArSummary {
    max-width: 500px;
    min-width: 0;
    overflow-x: auto;
}

/* Overrides the app-wide `.k-grid-content { min-height: 175px; }` (site/kendo.css) - that floor is right
   for this app's other, bigger paged grids but leaves a visible gap below this one's 5 compact rows. Same
   fix as CarrierDebtorArSummary_Grid on Carriers/Details. */
#accounts_details #AccountCarrierArSummary_Grid .k-grid-content {
    min-height: 0;
}

/* The AR summary above this grid scrolls away, so the grid alone is the window's height below the pinned bars:
   scrolled fully down, it starts just below the tab bar and its pager meets the window's bottom. */
#accounts_details #AccountTransactionHistory_Grid {
    height: var(--jas-grid-dataarea-height);
    min-height: 350px;
}

#accounts_details #AccountTransactionHistory_Grid #btnPtpStatusChange {
    margin-left: 1rem !important;
}

#accounts_details #AccountTransactionHistory_Grid #btnFilter {
    margin-right: 1rem !important;
}

#accounts_details .offcanvas.offcanvas-bottom {
    height: auto;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
}

#accounts_details #offcanvasSpacer {
    height: var(--jas-offcanvas-height);
}


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

/*#####        Accounts         #####*/
/*#####         Details         #####*/

#accountHeader {
    padding: 8px 18px 0 18px;
}

#callPhone {
    font-size: 10px;
    margin-left: 12px;
    border-radius: 20px;
    text-decoration: none;
}

    #callPhone:hover {
        color: #fff;
    }

.account-details-page {
    max-width: 4000px;
    margin: 0 auto;
    padding: 2px 8px 0 8px;
}

    .account-details-page .k-switch-on .k-switch-track {
        background-color: var(--jas-accent, #16C4F6);
        border-color: var(--jas-accent, #16C4F6);
    }

    .account-details-page .section-card {
        margin-bottom: 12px;
    }

    .account-details-page  .k-grid-jas .k-column-title {
        padding: 0.1rem;
    }

    .account-details-content {
        padding: 0 !important;
    }

#accountComment {
    margin: 0 1.5rem 1rem;
}

    #accountComment textarea {
        min-height: 72px;
        resize: vertical;
    }

.account-details-comments-section,
.account-details-tasks-section {
    height: 100%;
}

    .account-details-comments-section .section-card,
    .account-details-tasks-section .section-card {
        height: 100%;
    }

.account-details-tasks-section {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.account-details-tab-content {
    padding: 0 .8rem;
}

    /* No padding-top here: unlike the .8rem left/right on .account-details-tab-content above, which the
       filter row's own Bootstrap .row negative margin mostly cancels back out, nothing cancels this one -
       it just added straight onto the card's own padding-top, making the gap above a tab's content
       noticeably taller than the gap to either side of it. The card's own padding is enough on its own. */
    .account-details-tab-content > .tab-pane {
        padding-top: 0;
    }

/* Apply the shared JAS grid treatment without modifying every Kendo builder. */
.account-details-page .k-grid {
    border-radius: .75rem;
    overflow: hidden;
}

.account-details-page .k-grid-header,
.account-details-page .k-grid-toolbar,
.account-details-page .k-grid-pager {
    border-color: var(--jas-border, #e5e7eb);
}

.account-details-page .k-grid-toolbar {
    gap: .4rem;
}

.account-details-page .k-grid-content,
.account-details-page .k-grid-content-locked {
    background: var(--jas-bg, #fff);
}

.account-details-page .k-window-content .k-grid {
    border-radius: .5rem;
}

.account-details-page .section-card-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Sales office note on Accounts/Details: keeps the line breaks the admin typed. */
.sales-office-note-text {
    white-space: pre-wrap;
}

@media (max-width: 991.98px) {
    .account-details-page {
        padding: 16px;
    }

    #accountComment,
    .account-details-tasks-section {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .account-details-tab-content {
        padding: 0 1rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .account-details-page {
        padding: 8px;
    }
}

.account-details-sticky-header {
    position: sticky;
    top: var(--jas-fixed-header-offset, 100px);
    z-index: 1000;
    padding-top: .5rem;
    margin-bottom: 1rem;
    /* Without this, content scrolled underneath showed through the card's rounded corners once pinned. */
    background: var(--jas-bg, #fff);
}

.account-details-summary-nav {
    padding: 0 1.25rem;
    background: var(--jas-bg, #fff);
    border-radius: inherit;
}

.account-details-summary-label {
    margin-bottom: .15rem;
    color: var(--jas-text-muted, #5d636d);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
}

.account-details-summary-nav a {
    text-decoration: none;
}

.account-details-summary-nav > .d-flex {
    min-width: 0;
}


@media (max-width: 991.98px) {
    .account-details-summary-nav {
        overflow-x: auto;
        padding: .65rem 1rem;
    }

        .account-details-summary-nav > .d-flex {
            min-width: max-content;
        }
}

.account-header-group {
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-border, #e5e7eb);
    border-radius: .8rem;
}

.account-header-group-title {
    margin-bottom: .85rem;
    padding-bottom: .55rem;
    color: var(--jas-text, #374151);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--jas-divider, #e5e7eb);
}

.account-header-field {
    display: grid;
    grid-template-columns: minmax(100px, 30%) minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    min-height: 24px;
    padding: .2rem 0;
}

.account-header-field-start {
    align-items: start;
}

.account-header-label {
    color: var(--jas-text, #343639);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: right;
    margin-bottom: 2px;
}

    .account-header-label label {
        margin: 0;
    }

.account-header-value {
    min-width: 0;
    color: var(--jas-text, #13111c);
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* The Paying Agent picker shares an .input-group with its "edit credentials" button, and needs its own
   corner rounding: Bootstrap joins an input-group's children with :first-child/:last-child rules written
   for form controls, and a Kendo widget is a <span> - so without this the picker renders as a fully rounded
   pill overlapping the square left edge of the button beside it. Its WIDTH is not set here: `.input-group > .k-input` above does that for
   every Kendo widget in an input-group, this one included. */
    .account-header-value .input-group > .k-combobox:not(:last-child) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

.account-header-inline-value {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.account-header-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 20px;
    padding: 0;
    margin: 0;
}

.account-header-group .form-select,
.account-header-group .form-control {
    min-height: 31px;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .85rem;
}

.account-header-group .input-group-sm > .form-select,
.account-header-group .input-group-sm > .form-control,
.account-header-group .input-group-sm > .btn {
    min-height: 31px;
}

.account-header-financial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .8rem;
}

.account-header-stat {
    padding: .4rem .5rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid var(--jas-border, #e5e7eb);
    border-radius: .55rem;
}

.account-header-stat-label {
    margin-bottom: .2rem;
    color: var(--jas-text-muted, #5d636d);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.account-header-stat-value {
    color: var(--jas-text, #1a1e27);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
}

.account-header-stat-emphasis {
    background: var(--jas-emphasis-bg, #fff7ed);
    border-color: var(--jas-emphasis-border, #fed7aa);
}

    .account-header-stat-emphasis .account-header-stat-value {
        color: var(--jas-emphasis-text, #c2410c);
    }

.account-header-stat-double {
    display: inline-flex;
    justify-content: flex-end;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid var(--jas-border, #dbe4ee);
    border-radius: 12px;
    padding: .45rem .75rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
    margin-left: auto;
}

.account-header-stat-column {
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    min-width: 110px;
}

.account-header-stat-divider {
    width: 1px;
    align-self: stretch;
    background: var(--jas-border, #dbe4ee);
    margin: 0 .75rem;
}

.account-header-metadata {
    padding-top: .2rem;
}

.account-header-group a {
    text-decoration: none;
}

    .account-header-group a:hover {
        text-decoration: underline;
    }

/* Named grid-areas rather than relying on child order/count: has-carrier-grid (factoring tenants) adds
   the far-left column/row, and every breakpoint below re-templates around whichever areas actually have
   an element - a bare "farleft" area with nothing placed in it would otherwise reserve an empty row. */
.account-ar-summary-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "left right";
    gap: 1.5rem;
    align-items: end;
    width: 100%;
    margin-bottom: 1rem;
}

.account-ar-summary-layout.has-carrier-grid {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "farleft left right";
}

.account-ar-summary-far-left {
    grid-area: farleft;
    display: flex;
    align-items: flex-end;
    /* A grid item's default min-width is auto, meaning it never shrinks below its content's intrinsic
       width - AccountCarrierArSummary_Grid's columns sum to 640px, wider than a narrow viewport, so
       without this the shared 1fr column (and the whole page) is forced that wide instead of the grid
       showing its own internal horizontal scrollbar (it's already .Scrollable()). */
    min-width: 0;
}

.account-ar-summary-left {
    grid-area: left;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* No min-width: 0 here, unlike far-left. This 1fr track sits between auto tracks measured at ~816px
       and ~313px; its default min-width (~335px) is what stops it collapsing to ~28px. */
}

.account-ar-summary-right {
    grid-area: right;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

    .account-ar-summary-right .account-header-stat-double {
        margin-bottom: 0;
    }

/* Medium: a 390px AccountCarrierArSummary_Grid no longer fits beside the other two, so it takes its own
   row on top; the aging-bucket grid and the stat block still fit side by side below it. */
@media (max-width: 1199.98px) {
    .account-ar-summary-layout.has-carrier-grid {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "farleft farleft"
            "left right";
    }

    .account-ar-summary-layout.has-carrier-grid .account-ar-summary-far-left {
        margin-bottom: .75rem;
    }
}

/* Narrow: the aging-bucket grid and the stat block stack too, so every area gets its own row. */
@media (max-width: 767.98px) {
    .account-ar-summary-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "right";
    }

    .account-ar-summary-layout.has-carrier-grid {
        grid-template-areas:
            "farleft"
            "left"
            "right";
    }

    .account-ar-summary-far-left {
        margin-bottom: .75rem;
    }

    .account-ar-summary-right {
        display: flex;
        justify-content: flex-start;
        margin-top: .75rem;
        max-width: 100%;
    }

    .account-ar-summary-right .account-header-stat-double {
        margin-left: 0;
        flex-wrap: wrap;
        max-width: 100%;
    }
}

@media (max-width: 1199.98px) {
    .account-header-financial-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .account-header-group {
        padding: .9rem;
    }

    .account-header-field {
        grid-template-columns: 1fr;
        gap: .15rem;
        padding: .35rem 0;
    }

    .account-header-label {
        text-align: left;
    }

    .account-header-financial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .account-header-financial-grid {
        grid-template-columns: 1fr;
    }
}

.account-details-tabs {
    position: sticky;
    top: var(--jas-tab-offset, 100px);

    /* Was 1rem: on top of the card's own padding-top below it, that read as noticeably more whitespace
       above a tab's content than the card's left/right padding gives it on the sides. */
    margin-bottom: 0 !important;
    display: flex;
    gap: .5rem;
    padding: .5rem;
    background: var(--jas-bg, #ffffff);
    backdrop-filter: blur(10px);
    border: 1px solid var(--jas-divider, #e9ecef);
    border-radius: 16px;
    /* A horizontal scroller until accounts_details/layout.js's TabBar takes over (below), so every tab stays reachable
       if that script never runs. */
    scrollbar-width: thin;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}

    /* TabBar moves what does not fit into More, and any overflow but visible would clip the group dropdowns. */
    .account-details-tabs.jas-tabs-managed {
        overflow: visible;
    }

    .account-details-tabs::-webkit-scrollbar {
        height: 8px;
    }

    .account-details-tabs::-webkit-scrollbar-thumb {
        background: var(--jas-border, #d0d7de);
        border-radius: 20px;
    }

    .account-details-tabs .nav-link {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        white-space: nowrap;
        padding: .65rem 1rem;
        border: none;
        border-radius: 10px;
        color: var(--jas-text, #242627);
        background: transparent;
        font-weight: 600;
        font-size: .92rem;
        transition: all .2s ease;
    }

        .account-details-tabs .nav-link i {
            font-size: 1rem;
            opacity: .75;
        }

        .account-details-tabs .nav-link:hover {
            background: #2cdcff25;
            transform: translateY(-1px);
        }

        .account-details-tabs .nav-link.active:hover {
            background: var(--jas-accent, #10bcde);
            color: #fff;
            transform: translateY(-1px);
        }

        .account-details-tabs .nav-link.active,
        .account-details-tabs .nav-link.show {
            background: var(--jas-accent, #16C4F6);
            color: #fff;
        }

            .account-details-tabs .nav-link.active i {
                opacity: 1;
            }

        /* A tab inside a group or More keeps its icon beside its label. */
        .account-details-tabs .dropdown-item {
            display: flex;
            align-items: center;
            gap: .45rem;
            cursor: pointer;
        }

        .account-details-tabs .dropdown-item.active {
            background: var(--jas-accent, #16C4F6);
            color: #fff;
        }


.strategyQueueStatus {
    display: flex;
    align-items: center;
    color: var(--jas-text-muted, #6c757d);
    font-size: .85rem;
}

.aging-summary {
    overflow: hidden;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-divider, #e9ecef);
    border-radius: 12px;
}

.aging-summary-header,
.aging-summary-row {
    display: grid;
    grid-template-columns: minmax(95px, 1.1fr) repeat(2, minmax(80px, 1fr));
    align-items: center;
    column-gap: 14px;
    padding: 10px 14px;
}

.aging-summary-header {
    background: var(--jas-bg-subtle, #f8f9fa);
    border-bottom: 1px solid var(--jas-divider, #e9ecef);
    color: var(--jas-text-muted, #6c757d);
    font-size: .75rem;
    font-weight: 700;
    text-align: right;
}

    .aging-summary-header > div:first-child {
        text-align: left;
    }

.aging-summary-row {
    border-bottom: 1px solid var(--jas-divider, #f1f3f5);
    color: var(--jas-text, #212529);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

    .aging-summary-row:last-child {
        border-bottom: 0;
    }

.aging-summary-label {
    color: var(--jas-text-muted, #6c757d);
    font-weight: 600;
    text-align: left;
}

.aging-summary-highlight {
    background: rgb(240 13 13 / 6%);
}

    .aging-summary-highlight .aging-summary-label {
        color: #d54242;
    }

.aging-summary-total {
    background: var(--jas-bg-subtle, #f8f9fa);
    font-weight: 700;
}

    .aging-summary-total .aging-summary-label {
        color: var(--jas-text, #212529);
    }

@media (max-width: 575.98px) {
    .aging-summary {
        overflow-x: auto;
    }

    .aging-summary-header,
    .aging-summary-row {
        min-width: 410px;
    }
}

/*#####        Accounts         #####*/
/*#####         Search          #####*/

.accounts-search-page {
    max-width: 3200px;
    margin: 0 auto;
    padding: 10px;
}

    .accounts-search-page .section-card {
        padding-top: 12px;
    }

    .accounts-search-page .section-card-header {
        padding: .2rem;
    }

.accounts-search-grid-section {
    padding: 0 .2rem;
}

.accounts-search-queue-section {
    margin-bottom: 1rem;
}

    .accounts-search-queue-section textarea {
        min-height: 80px;
        max-height: 180px;
        resize: vertical;
    }

/* Positioned so the Columns menu (data-bs-display="static" in a position-static .dropdown) hangs off the
   whole toolbar, not its button: right-aligned to the toolbar's edge and as wide as the toolbar allows. */
.accounts-search-toolbar {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.accounts-search-quick-search {
    width: 260px;
}

.accounts-search-collector-filter {
    width: 280px;
}

/* The global .k-multiselect rule (below) sizes it as a 48px pill for the dashboard-filter-card look every
   other collector picker uses - but this toolbar sits it directly beside plain Bootstrap .form-control
   inputs (#acctSearch) in a flex row with align-items: flex-end, so the taller widget pushed its own label
   up out of line with "Search"'s. Matched to .form-control's own height here instead. */
.accounts-search-collector-filter .k-multiselect {
    min-height: calc(1.5em + .75rem + 2px);
}

.accounts-search-toolbar .section-card-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* The saved views menu grows with its longest name; 56rem fits the 100-character maximum on one line, and a
   narrower screen wraps it. The button shows the active name cut short, with the full name in its title. */
.saved-views-menu {
    min-width: 20rem;
    width: max-content;
    max-width: min(56rem, calc(100vw - 2rem));
    max-height: 60vh;
    overflow-y: auto;
}

.saved-views-menu .dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
}

#savedViewsLabel {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 767.98px) {
    .accounts-search-page {
        padding: 16px;
    }

    .accounts-search-grid-section {
        padding: 0 1rem 1rem;
    }

    .accounts-search-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .accounts-search-quick-search,
    .accounts-search-collector-filter {
        width: 100%;
    }

    .accounts-search-toolbar .section-card-actions {
        flex-wrap: wrap;
    }
}

/*#####      Transactions       #####*/
/*#####         Search          #####*/

.transactions-search-page {
    max-width: 3200px;
    margin: 0 auto;
    padding: 24px;
}

.transactions-search-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.transactions-search-quick-search {
    width: 220px;
}

.transactions-search-collector-filter {
    width: 280px;
}

/* Same reasoning as .accounts-search-collector-filter's own override above: this toolbar sits the picker
   beside plain Bootstrap .form-control inputs (#txnSearch, #overDays) in a flex row with
   align-items: flex-end, and the global .k-multiselect 48px pill height pushed its label out of line with
   theirs. */
.transactions-search-collector-filter .k-multiselect {
    min-height: calc(1.5em + .75rem + 2px);
}

.transactions-search-age-filter {
    width: 160px;
}

/* The "Logged any time" window picker under the Disputes only toggle. It needed no width while it was a
   .form-select, which sizes itself to its widest option - a Kendo ComboBox is 100% of its container
   instead, and this cell shrink-wrapped it to 76px, narrower than every label in it. Sized like its
   neighbours above rather than with a min-width, so the toolbar keeps its fixed-cell rhythm. */
.transactions-search-disputes-filter {
    width: 200px;
}

.transactions-search-toolbar .section-card-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

@media (max-width: 767.98px) {
    .transactions-search-page {
        padding: 16px;
    }

    .transactions-search-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .transactions-search-quick-search,
    .transactions-search-collector-filter,
    .transactions-search-age-filter {
        width: 100%;
    }

    .transactions-search-toolbar .section-card-actions {
        flex-wrap: wrap;
    }
}


/*#####        Accounts         #####*/
/*#####         Summary         #####*/

#accounts_summary {
    background: var(--jas-bg, #fdfdfd);
}

#summaryContainer {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#accounts_summary #tablecards tr, #ArPastDueByUser_Grid tr
, #DashboardCompletedToday_Grid tr, #DashboardAging_Grid tr {
    background: var(--jas-bg, #fff) !important;
}

#accounts_summary #tablecards tbody > tr:hover, #ArPastDueByUser_Grid tbody tr:hover {
    background: rgba(13,202,240,.2) !important;
}

#accounts_summary #arPastDueByUserChart {
    height: 350px;
}

#accounts_summary #tablecards .section-header {
    border-bottom: 1px solid var(--jas-divider, #f1f1f1);
}

    .account-summary-filters > [class*="col-"] {
        display: flex;
        min-width: 0;
    }

    .account-summary-filters .dashboard-filter-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        margin: .5rem 1rem;
        box-sizing: border-box;
    }

    /* Prevent the Kendo MultiSelect from forcing its column wider */
    .account-summary-filters .k-multiselect,
    .account-summary-filters .k-input,
    .account-summary-filters .account-summary-filter-control {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

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

@media (max-width: 767.98px) {
    .account-summary-filters .dashboard-filter-card {
        margin: 0;
    }
}

.account-trends-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.account-trends-summary {
    flex: 0 0 320px;
    margin: 0 2px;
}

.account-trends-grid-section {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 12px;
}

    .account-trends-grid-section .k-grid {
        width: 100%;
    }

/* Stack the summary and grid when there is not enough room */
@media (max-width: 1410px) {
    .account-trends-layout {
        flex-direction: column;
    }

    .account-trends-summary {
        flex-basis: auto;
        width: 100%;
        max-width: 420px;
    }

    .account-trends-grid-section {
        width: 100%;
    }
}

#AccountsTrends_Grid {
    height: 426px !important;
}

#ArSummary_Grid tfoot td {
    border: none !important;
}

#tablecards {
    margin: .1rem;
}
/* ------------------------------------------------------------------
   Timeline workspace chrome - the filter strip and the four tiles (docs/timeline-plan.md). Global because
   _TimelineWorkspace renders on /Timeline and on the Accounts/Details Timeline tab.
   ------------------------------------------------------------------ */

/* A grid rather than Bootstrap columns: at four across, col-md-* is narrower than the card's 330px
   min-width and cards overlap. #cashForecastChrome (tiles only) shares these rules. */
#timelineWorkspaceChrome .dashboard-filters,
#cashForecastChrome .dashboard-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;

    /* Flush with the grid below; the shared .2rem margin reads as a step against its header bar. */
    margin: 0;
}

#timelineWorkspaceChrome .dashboard-filters .dashboard-filter-card,
#cashForecastChrome .dashboard-filters .dashboard-filter-card {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
}

/* ====================================================================================================
   THE RAIL, COMPACTED. At 1366x768 the full-size rail took 575px of a 617px viewport (356px on the
   Accounts/Details tab), pushing the grid below the fold. Card chrome goes - border, shadow, padding, the
   search subline (now the label's title) - but every filter and tile stays visible, so a filter in force
   is never hidden.
   ==================================================================================================== */
#timelineWorkspaceChrome .dashboard-filters,
#cashForecastChrome .dashboard-filters {
    gap: .6rem .75rem;

    /* 200px, not the 240px the uncompacted grid above uses. With the search box now a fifth card in this
       grid, 240px gave only four columns on a 1366px window and the fifth wrapped onto a second row -
       which is half the height saving handed straight back. auto-fit collapses the spare tracks and
       stretches the rest, so a wide window still gets five full-width controls rather than five narrow
       ones with a gap after them. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

    /* No card: this is a toolbar now. */
    #timelineWorkspaceChrome .dashboard-filters .dashboard-filter-card {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

        #timelineWorkspaceChrome .dashboard-filters .dashboard-filter-card:hover {
            border: 0;
            box-shadow: none;
        }

#timelineWorkspaceChrome .dashboard-filter-label,
#cashForecastChrome .dashboard-filter-label {
    font-size: .8rem;
    margin-bottom: .2rem;
    gap: .35rem;
    white-space: nowrap;
}

    #timelineWorkspaceChrome .dashboard-filter-label i,
    #cashForecastChrome .dashboard-filter-label i {
        font-size: .95rem;
    }

/* The words are not lost - they are the label's title. */
#timelineWorkspaceChrome #timelineSearchHint {
    display: none;
}

/* THE FOUR TILES AS A STRIP, not four stacked blocks. Label and value on one line rather than the value
   under the label, which is what halves their height; the sublines stay, on their own line, because they
   are what makes a number mean something ("of 1,240 entries", "$41,882 closed").

   Kept as real tiles - a border and a background - unlike the filter cards above, because they are
   CLICKABLE (each one sets the Status filter, see timeline.js's TILE_STATUS_IDS) and a clickable thing
   that looks like plain text does not get clicked. */
#timelineWorkspaceChrome .timeline-summary-strip {
    margin-top: .5rem;
}

    #timelineWorkspaceChrome .timeline-summary-strip .dashboard-filter-card,
    #cashForecastChrome .timeline-summary-strip .dashboard-filter-card {
        /* Block flow, not flex: a flex row clipped the sublines mid-word. The card look is restated
           because the rule above strips it from every card here, and a tile is clickable (it sets the
           Status filter, timeline.js TILE_STATUS_IDS) so it has to look like one. */
        background: var(--jas-bg, #fff);
        border: 1px solid var(--jas-border, #f1f1f1);
        border-radius: 12px;
        padding: .45rem .7rem;
    }

    #timelineWorkspaceChrome .timeline-summary-strip .dashboard-filter-label,
    #cashForecastChrome .timeline-summary-strip .dashboard-filter-label {
        margin-bottom: .1rem;
    }

    #timelineWorkspaceChrome .timeline-summary-strip .timeline-stat-value,
    #cashForecastChrome .timeline-summary-strip .timeline-stat-value {
        font-size: 1.25rem;
        line-height: 1.15;
    }

    /* The sublines are what make a number mean something ("$30.6M closed", "43 days to close") so they
       stay - just smaller, and wrapping rather than overflowing. */
    #timelineWorkspaceChrome .timeline-summary-strip .section-description,
    #cashForecastChrome .timeline-summary-strip .section-description {
        font-size: .72rem;
        line-height: 1.25;
    }

        /* timeline.js leaves these empty on the scopes that have no second number, and an empty div with
           a line-height is a blank row in every tile. */
        #timelineWorkspaceChrome .timeline-summary-strip .section-description:empty {
            display: none;
        }

/* The notice only exists while a search is running, and it is the last thing between the rail and the
   grid - a thin strip rather than a full alert block, matching the notes rail. */
#timelineWorkspaceChrome #timelineSearchNotice {
    /* Left-aligned with the rail and the grid, not inset - see the .dashboard-filters margin above. */
    margin: .5rem 0 0 !important;
    padding: .3rem .6rem;
    font-size: .8rem;
}

.timeline-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
}

/* The four tiles double as Status filter shortcuts (timeline.js). Cursor and a focus ring so a keyboard user
   can find them - role="button"/tabindex="0" on the markup makes them reachable, this makes them visibly
   interactive. */
#timelineSummary [data-timeline-tile] {
    cursor: pointer;
}

#timelineSummary [data-timeline-tile]:hover {
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
}

#timelineSummary [data-timeline-tile]:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* Highlights whichever tile's status ids match the Status filter's current value - kept in sync from one
   place, onTimelineFilterChange(), so a manual dropdown edit and a tile click can never disagree about which
   tile is "active". */
#timelineSummary [data-timeline-tile].timeline-tile-active {
    /* --jas-* tokens, which carry a dark-mode value; a fixed light blue here put light text on light blue
       in dark mode. */
    background-color: var(--jas-selected-tile-bg, #cfe2ff);
    border-color: var(--jas-primary, #0d6efd);
}

/* The "N new entries" pill. Hidden until there is something to say - a control that is always present and
   usually says zero stops being read. /Timeline only; see TimelineGridViewModel.ShowNewEntryPill. */
.timeline-new-pill {
    cursor: pointer;
}

/* ------------------------------------------------------------------
   Timeline grid cells (docs/timeline-plan.md). Global because _TimelineGrid renders on /Timeline and on
   the Accounts/Details Timeline tab.
   ------------------------------------------------------------------ */

.timeline-muted,
.notes-muted {
    color: var(--bs-secondary-color, #6c757d);
}

/* One chip per reference, so several read as several rather than as one run-on string - a transaction
   legitimately carries a check number, a username and an adjustment code side by side. */
.timeline-ref-chip {
    display: inline-block;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.78rem;
    padding: 1px 6px;
    margin: 1px 2px 1px 0;
    border-radius: 4px;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.18);
    white-space: nowrap;
}

    /* The chip the search term actually matched, so a row explains why it is on screen. */
    .timeline-ref-chip.timeline-ref-match {
        background: rgba(255, 193, 7, 0.25);
        border-color: rgba(255, 193, 7, 0.65);
        font-weight: 600;
    }

/* Which column the value came from. Small and muted, but always present: the same column holds a check
   number on one tenant and a payment-method code on another, so an unlabelled chip is ambiguous. */
.timeline-ref-source {
    font-family: var(--bs-body-font-family);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.65;
    margin-right: 4px;
    font-weight: 700;
}

    .timeline-ref-source:empty {
        display: none;
    }

.timeline-note-cell,
.notes-note-cell {
    white-space: normal;
    line-height: 1.3;
}

/* A secondary line stacked under a cell's primary value - the account number under its name, the dispute
   reason/promised date/age under the status badge, who logged it under the note. This is what lets several
   of the grid's old columns fold into one without losing anything they said; kept in one shared rule so
   every combined cell reads the same way rather than each inventing its own "smaller and greyer" convention. */
.timeline-subline,
.notes-subline {
    display: block;
    font-size: .87rem;
    opacity: .9;
    white-space: normal;
    margin-top: 1px;
}

/* One row of the Identification cell - Invoice/BOL/PO/Carrier folded into a single column, each on its own
   line so a tenant that populates all four is not truncated into a run-on string. */
.timeline-id-row,
.notes-id-row {
    white-space: normal;
    line-height: 1.3;
}

.timeline-id-label,
.notes-id-label {
    display: inline-block;
    min-width: 2.75rem;
    font-size: .77rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .75;
    font-weight: 700;
}

/* WHY a check was written - "OVERPAYMENT", "W/O ACCESS CHGR" - under the chips it explains. Its own line
   rather than another chip, because it is prose about the payment rather than another identifier of it, and
   because on tenant 18 thirty rows in fifty carry one and thirty inline additions would wreck the column. */
.timeline-ref-reason {
    font-size: 0.75rem;
    line-height: 1.25;
    margin-top: 2px;
    color: var(--bs-secondary-color, #6c757d);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A closure's balance: the figure that CLOSED, not a figure still owed.
   The strikethrough is load-bearing rather than decorative - see timelineBalance in timeline_cells.js. Kept at full
   text colour rather than muted, because the amount is the point of the cell; it is the line through it that
   says the debt is gone. */
.timeline-balance-closed {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--bs-secondary-color, #6c757d);
}

/* The expanded note thread. Indented and tinted so a detail row reads as belonging to the entry above it
   rather than as a second grid that happens to be nearby. */
.timeline-notes-grid {
    margin: 4px 0 6px 0;
    border-left: 3px solid rgba(13, 110, 253, 0.25);
}

.timeline-note-thread {
    white-space: pre-wrap;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   The notes workspace (Views/Accounts/_NotesWorkspace.cshtml): Accounts/Notes, Accounts/TransactionNotes
   and the Accounts/Details notes tabs. The cell conventions it shares with the Timeline (.notes-muted,
   -note-cell, -subline, -id-row, -id-label) are declared beside their .timeline-* twins above, not here.
   ------------------------------------------------------------------ */

.notes-page {
    max-width: 1900px;
    margin: 0 auto;
    padding: 24px;
}

/* Title and description on the left, the bulk-import toggle on the right, wrapping onto its own line on a
   narrow window rather than squeezing the title. */
.notes-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
}

/* The header lines up with the filters and grid below, which sit at .section-card's 12px, not at
   .section-card-header's 1.5rem. */
.notes-page > .section-card > .section-card-header {
    padding-left: 0;
    padding-right: 0;
}

/* The date, which is what a reader scans down the When column - the time sits under it as a .notes-subline. */
.notes-when,
.notes-when-link {
    font-weight: 600;
}

.notes-when-link {
    text-decoration: none;
}

    .notes-when-link:hover {
        text-decoration: underline;
    }

/* What kind of contact the note recorded, under the AUTHOR who recorded it - moved there from under the
   note body 2026-08-24, because a note cell's height varies from one line to eighteen and the chip landed
   at a different depth in every row, which is the one thing a chip is for. A chip rather than another grey
   subline: it is a value from a fixed vocabulary (the Type filter's own list), not prose about the note,
   and reading down the column the chips are what make one kind findable by eye. */
.notes-type-chip {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.18);
    opacity: 1;
}

/* A WORKFLOW note carries a second chip naming which header change it was (notes_cells.js's
   accountNoteWhoCell) - adjacent siblings, so the gap goes here rather than as a trailing margin that
   would also indent the single-chip case. */
.notes-type-chip + .notes-type-chip {
    margin-left: 4px;
}

/* The balance itself, over the past-due and 61+ sublines that explain it. */
.notes-balance-value {
    font-weight: 600;
}

/* A search ignores the "When" window, so its card dims while one is active (notes_workspace.js toggles
   .notes-search-active). Dimmed, not disabled: changing it is how you get back. On the card, not on
   #notesWindow, which Kendo hides behind its own wrapper. */
.notes-search-active .notes-window-card {
    opacity: .45;
}

/* A note shows six lines until clicked; email-sourced notes can run to hundreds. notes_cells.js
   (notesMarkClampableNotes) adds .notes-note-clampable only to cells that actually overflow. */
.notes-note-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-note-clampable {
    cursor: zoom-in;
}

    .notes-note-clampable:hover {
        background: var(--bs-tertiary-bg, rgba(0, 0, 0, .03));
    }

.notes-note-clamp.notes-note-expanded {
    display: block;
    -webkit-line-clamp: none;
    cursor: zoom-out;
}

/* ====================================================================================================
   THE TENANT-WIDE RAIL, ON ONE LINE. At 1440x900 the full-size rail took 249px of a 749px viewport and
   left the grid six rows; on one line it is ~90px. Card chrome goes and each subline becomes its label's
   title, but every filter stays visible. Scoped to .notes-workspace-chrome so no rule reaches the grid.
   ==================================================================================================== */
.notes-workspace-tight .notes-workspace-chrome .dashboard-filters {
    margin: 0;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: .75rem;
}

.notes-workspace-tight .notes-workspace-chrome .dashboard-filter-card {
    /* No card at all: this is a toolbar now. Border, shadow, radius and hover all belong to a rail that
       had a row to itself. */
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    flex: 1 1 0;
}

    .notes-workspace-tight .notes-workspace-chrome .dashboard-filter-card:hover {
        border: 0;
        box-shadow: none;
    }

    /* The words are not lost - they are the label's title. */
    .notes-workspace-tight .notes-workspace-chrome .dashboard-filter-card .section-description {
        display: none;
    }

.notes-workspace-tight .notes-workspace-chrome .dashboard-filter-label {
    font-size: .8rem;
    margin-bottom: .2rem;
    gap: .35rem;
    white-space: nowrap;
}

    .notes-workspace-tight .notes-workspace-chrome .dashboard-filter-label i {
        font-size: .95rem;
    }

/* The search box earns the slack. The three pickers show short fixed values ("Last 30 days", "Anyone",
   "Any type") and need no more than their own width; an account name or an invoice number is what
   actually benefits from the room. */
.notes-workspace-tight .notes-workspace-chrome .notes-filter-search {
    flex: 2 1 0;
}

.notes-workspace-tight .notes-workspace-chrome .row {
    margin-bottom: 0 !important;
}

/* The notice only exists while a search is running, and on one line it is the only thing between the rail
   and the grid - so it is a thin strip rather than a full alert block. resizeGrid() re-measures when it
   appears, so the rows give way to it rather than the pager falling off the viewport. */
.notes-workspace-tight .js-notes-search-notice,
.notes-workspace-compact .js-notes-search-notice {
    /* Left-aligned with the rail and the grid, not inset - the grid has no card inset to match any more.
       The compact surface is here too because the notice lost its mx-3/mt-3 in the markup, and without a
       rule it would fall back to the .alert default margin-bottom on the account tab. */
    margin: .4rem 0 0 !important;
    padding: .3rem .6rem;
    font-size: .8rem;
}

/* On a narrow window one line stops being an improvement: four controls sharing 900px leaves the search
   box too small to read an account name in. Below that it wraps back to the block layout, which is what
   flex-wrap and a real min-width give it. */
@media (max-width: 1199.98px) {
    .notes-workspace-tight .notes-workspace-chrome .dashboard-filters {
        flex-wrap: wrap;
        gap: .5rem .75rem;
    }

    .notes-workspace-tight .notes-workspace-chrome .dashboard-filter-card {
        flex: 1 1 240px;
        min-width: 240px;
    }
}

/* THE SAME RAIL, TIGHTER, INSIDE AN ACCOUNTS/DETAILS TAB. The full-size rail (274px) left the tab's grid
   about four rows. The filter sublines go - they explain conventions - but the search hint and the search
   notice stay, because they describe the current state. */
.notes-workspace-compact .notes-workspace-chrome .dashboard-filter-card .section-description {
    display: none;
}

/* ...except the search box's: it is a .dashboard-filter-card too, so the rule above would hide it. */
.notes-workspace-compact .notes-workspace-chrome .notes-filter-search .section-description {
    display: block;
}

.notes-workspace-compact .notes-workspace-chrome .dashboard-filters {
    margin: 0;

    /* A gap, not card margins: a margin would also inset the first card from the grid's left edge. */
    gap: 0 .75rem;
}

    /* max-width: on the Transaction Notes tab the Window picker is the only card and would stretch the
       full width of the page. */
    .notes-workspace-compact .notes-workspace-chrome .dashboard-filter-card {
        margin: .35rem 0;
        padding: .6rem .8rem;
        min-width: 260px;
        max-width: 460px;
    }

.notes-workspace-compact .notes-workspace-chrome .row {
    margin-bottom: 0 !important;
}

/* The search box shares the line with the pickers and takes the slack (flex: 2): the pickers show short
   fixed values, a search term does not. Cards still wrap at their 260px min-width on a narrow page. */
.notes-workspace-compact .notes-workspace-chrome .notes-filter-search {
    flex: 2 1 0;
    max-width: none;
}

/* ====================================================================================================
   Inside an Accounts/Details tab every grid is pulled out by half a gutter (#accounts_details .tab-pane
   .k-grid), so the rail above it takes the same negative margin or it sits 10.5px inside the grid at each
   edge. Scoped to #accounts_details because /Timeline has no bleed. The notices' !important is needed to
   beat their own !important margin shorthand above.
   ==================================================================================================== */
#accounts_details .tab-pane .notes-workspace-chrome .dashboard-filters,
#accounts_details .tab-pane #timelineWorkspaceChrome .dashboard-filters,
#accounts_details .tab-pane #cashForecastChrome .dashboard-filters {
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
}

/* Nothing sits between the Cash Forecast tiles and the grid, so the grid would otherwise touch them. */
#accounts_details .tab-pane #cashForecastChrome {
    margin-bottom: .6rem;
}

/* The Cash Forecast workspace's toolbar and chart (Views/Forecast/_ForecastWorkspace.cshtml), on /Forecast and the
   Accounts/Details Forecast tab. The tiles use the Timeline strip rules above. */
#cashForecastChrome .forecast-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
}

#cashForecastChrome .forecast-toolbar-group {
    display: flex;
    flex-direction: column;
}

#cashForecastChrome .forecast-toolbar-group .form-select,
#cashForecastChrome .forecast-toolbar-group .form-control {
    min-width: 200px;
}

#cashForecastWorkspace .btn-check:checked + .btn {
    background-color: var(--jas-accent, #16c4f6);
    border-color: var(--jas-accent, #16c4f6);
    color: #fff;
}

#cashForecastWorkspace .btn-check:disabled + .btn {
    opacity: .45;
}

#cashForecastChrome .forecast-chart {
    margin-top: .6rem;
    margin-bottom: .6rem;
    padding: .45rem .7rem;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-border, #f1f1f1);
    border-radius: 12px;
}

#accounts_details .tab-pane .js-notes-search-notice,
#accounts_details .tab-pane #timelineSearchNotice {
    margin-left: calc(var(--bs-gutter-x) * -.5) !important;
    margin-right: calc(var(--bs-gutter-x) * -.5) !important;
}