:root {
    --bs-link-color: #337ab7;
    --kendo-font-size: .9rem;

    /* Dark-mode token set. Every consumer below is written as var(--jas-*, <original-light-value>) so
    light mode's rendered output is byte-for-byte unchanged from before these tokens existed - only the
    [data-bs-theme="dark"] block below actually changes anything, and only for pages with the toggle on.
    Deliberately semantic-role tokens (surface/text/border/brand), not a 1:1 alias per literal - dozens of
    near-white/near-black literals across this file map onto the same handful of roles here. */
    --jas-bg: #fff;
    --jas-bg-subtle: #f8fafc;
    --jas-text: #212529;
    /* KEEP THESE TWO IN STEP WITH THE HEX ABOVE - they are the same colours as rgb triples, because
    Bootstrap 5.3 derives values from -rgb companions that it cannot derive from a hex: --bs-secondary-color
    (and therefore .text-muted, on ~150 elements) is rgba(var(--bs-body-color-rgb), .75). CSS cannot split
    a hex itself, so this is the one place in this file where a colour is written twice; they sit adjacent
    so the pair is edited together. The dark block below carries the same four lines. */
    --jas-text-rgb: 33, 37, 41;
    --jas-bg-rgb: 255, 255, 255;
    --jas-text-muted: #6c757d;
    --jas-border: #dee2e6;
    --jas-primary: #337ab7;
    --jas-accent: #16c4f6;
    --jas-selected-bg: #00b6ff57;
    /* The "emphasized" account-header stat callout (e.g. over-limit balance) - a warm cream/orange
    surface, not a small self-contained badge, so unlike this file's badge/alert colors it DOES need a
    dark-mode value rather than being left alone. */
    --jas-emphasis-bg: #fff7ed;
    --jas-emphasis-border: #fed7aa;
    --jas-emphasis-text: #c2410c;
    /* A "this filter/tile is the active selection" tint - Bootstrap-primary-ish blue, used e.g. by
    Timeline/Index.cshtml's active summary tile. Same shape as --jas-emphasis-* above: a surface, not a
    small badge, so it needs its own dark-mode value. */
    --jas-selected-tile-bg: #cfe2ff;
    /* A "this is wrong and is blocking you" callout - the templates workspace's token findings. Same
    shape as --jas-emphasis-* above and added for the same stated reason: a full-width tinted SURFACE
    rather than a small self-contained badge, so the file's usual "leave alert colours alone" rule does
    not apply and it needs a real dark-mode value. */
    --jas-danger-bg: #fdecec;
    --jas-danger-border: #f5c2c2;
    --jas-danger-text: #8c1d1d;
}

/* Values that actually differ in dark mode. --jas-accent has no entry here on purpose - the brand cyan
already reads fine against both a light and a dark surface, so it isn't overridden. --bs-link-color is
included alongside --jas-primary so links stay legible against a dark background too. */
[data-bs-theme="dark"] {
    --bs-link-color: #5b9bd5;
    --jas-bg: #1a1d21;
    --jas-bg-subtle: #242a30;
    --jas-text: #dee2e6;
    /* Same colours as rgb triples - keep in step with the two hexes above. See the light block. */
    --jas-text-rgb: 222, 226, 230;
    --jas-bg-rgb: 26, 29, 33;
    --jas-text-muted: #9aa4ad;
    --jas-border: #3a4048;
    --jas-primary: #5b9bd5;
    --jas-selected-bg: #0d6efd66;
    --jas-emphasis-bg: #3d2c14;
    --jas-emphasis-border: #6b4a1e;
    --jas-emphasis-text: #ffb37a;
    --jas-selected-tile-bg: #1a2744;
    --jas-danger-bg: #3d1d1d;
    --jas-danger-border: #6b2e2e;
    --jas-danger-text: #ff9b9b;
}

/* Bootstrap dark-mode PALETTE OVERRIDE. This was a shim - Bootstrap was v5.2.2, which has no color modes
at all, so [data-bs-theme] did nothing and every one of these rules was reimplementing 5.3 by hand. The
vendored copy is now v5.3.8 and does its own remapping, so what remains here is no longer compensation:
it is this app's palette (--jas-*, defined above) winning over Bootstrap's stock dark palette, which is a
different set of greys and would not match kendo-dark.css.

WHAT IS STILL LOAD-BEARING WAS MEASURED, not assumed - each rule below was disabled in a browser under
[data-bs-theme="dark"] and kept only where the rendering changed. .input-group-text was dropped that way;
5.3 gives it real --bs-* backing, which 5.2.2 did not. Do the same before deleting any of the rest. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--jas-bg);
    --bs-body-color: var(--jas-text);
    --bs-border-color: var(--jas-border);
    --bs-secondary-bg: var(--jas-bg-subtle);
    --bs-tertiary-bg: var(--jas-bg-subtle);
    /* The -rgb companions, because 5.3 derives colours from them that it does not derive from the plain
    variables: --bs-secondary-color (and therefore .text-muted, on ~150 elements) is
    rgba(var(--bs-body-color-rgb), .75). Through --jas-*-rgb rather than as literals, so these follow a
    palette edit the same way every other line in this block does - written out here they would silently
    keep the old grey while --bs-body-color moved. */
    --bs-body-color-rgb: var(--jas-text-rgb);
    --bs-body-bg-rgb: var(--jas-bg-rgb);
}

[data-bs-theme="dark"] #mainNav.bg-light {
    /* #mainNav (_Layout.cshtml) uses Bootstrap's .bg-light utility directly, which is a flat
    background-color, not a variable - overriding --bs-body-bg above doesn't reach it. */
    background-color: var(--jas-bg-subtle) !important;
}

/* .input-group-text (the navbar search icon's box) had its own rule here through the 5.2.2 era, where its
color/background-color/border were hardcoded literals with no --bs-* backing, so no variable override
could reach it - the light border sitting flush against the dark search input was the "weird" seam. 5.3
gives it --bs-secondary-bg/--bs-body-color/--bs-border-color, all three overridden above, so the rule was
deleted after disabling it in the browser changed nothing. */

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-color: var(--jas-text);
    --bs-dropdown-bg: var(--jas-bg-subtle);
    --bs-dropdown-link-color: var(--jas-text);
    --bs-dropdown-link-hover-color: var(--jas-text);
    --bs-dropdown-link-hover-bg: var(--jas-border);
    --bs-dropdown-header-color: var(--jas-text-muted);
    --bs-dropdown-divider-bg: var(--jas-border);
}

[data-bs-theme="dark"] .modal {
    --bs-modal-bg: var(--jas-bg-subtle);
    --bs-modal-color: var(--jas-text);
}

[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--jas-bg-subtle);
    --bs-card-color: var(--jas-text);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    --bs-body-color: var(--jas-text);
    background-color: var(--jas-bg);
    border-color: var(--jas-border);
    color: var(--jas-text);
}

/* The same eight-variant exclusion as the .table rule below, and for the same reason - this selector is
(0,2,0) and outranks .table-warning outright, so without it a contextual table keeps its own colours in
light mode and loses them in dark, which is a worse bug than either alone. Nothing uses the variants
today; the point is that adding one later behaves the same in both themes. */
[data-bs-theme="dark"] .table:not(:is(.table-primary, .table-secondary, .table-success, .table-danger,
                                      .table-warning, .table-info, .table-light, .table-dark)) {
    --bs-table-bg: var(--jas-bg);
    --bs-table-color: var(--jas-text);
    --bs-table-striped-bg: var(--jas-bg-subtle);
    --bs-table-border-color: var(--jas-border);
}

/* BOTH THEMES, unlike everything above it. 5.3 re-based table text on --bs-emphasis-color, which is pure
#000 in light and #fff in dark - so a .table's text stopped matching the body text beside it (#212529
light, --jas-text dark) the moment the library was upgraded. --bs-table-striped-color is the same value
again on the odd rows, which is what made alternating rows two different colours in dark mode.

Not visible on the letters: every .table-striped in this app is in Views/ClientTemplates/, which renders
under _PrintLayout on the separate Bootstrap 3.4.1 copy in ~/Content/. This reaches the ~14 plain .table
/ .table-sm blocks the JS builds (dashboard, debtors_profile, entity_resolution, portal_aging,
CollectorTrend, CollectorWorklist) and Admin/FeatureFlags.

THE :not() IS LOAD-BEARING, and a bare `.table` here would be a land mine. Bootstrap's eight contextual
variants set --bs-table-color and --bs-table-striped-color themselves, on `.table-warning` etc. - the same
(0,1,0) specificity as `.table`. site.css loads after bootstrap.css, so a bare rule wins on source order
and silently repaints any <table class="table table-warning"> with body text: in dark mode #dee2e6 on
Bootstrap's light amber #fff3cd, near-illegible, with nothing in the markup pointing here. Excluding them
by name (via :is(), so the whole :not() costs one class of specificity) leaves each variant owning its own
pair. .table-active and .table-hover are NOT in the list and must not be: they set --bs-table-color-state,
which outranks both variables in Bootstrap's var() chain regardless of what this rule says. */
.table:not(:is(.table-primary, .table-secondary, .table-success, .table-danger,
               .table-warning, .table-info, .table-light, .table-dark)) {
    --bs-table-color: var(--jas-text, #212529);
    --bs-table-striped-color: var(--jas-text, #212529);
}

/* .bg-white/.bg-light are flat utility classes (background-color: <literal>), not variable-driven, so
overriding --bs-body-bg etc. above doesn't reach them - same reason #mainNav needed its own rule. Used
directly in markup (input-group-text addons, card-like sections) on several pages including
Accounts/Details.cshtml. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--jas-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--jas-bg-subtle) !important;
}

/* .text-dark is Bootstrap's flat --bs-dark-rgb literal (bootstrap.css ~line 47, rgb(33,37,41)) with
!important - not variable-backed by this app's shim above, same class of problem as .bg-white/.bg-light.
Only the .bg-light pairing is broken: bg-light's own dark-mode override (above) turns the badge surface
dark while text-dark stays hardcoded near-black. The navbar's lone bg-warning/text-dark badge is
deliberately untouched - like alert-warning below, that surface keeps its light-mode look in both themes,
so dark text on it is still correct. */
[data-bs-theme="dark"] .bg-light.text-dark {
    color: var(--jas-text) !important;
}

/* Bootstrap alerts keep their light-mode pastel bg/dark text (a small badge reads fine unstyled
regardless of theme, but a full-width alert banner does not - the passkey offer banner on every page was
the case that surfaced this). Each variant keeps its own hue, just inverted for a dark surface. */
[data-bs-theme="dark"] .alert-primary {
    --bs-alert-color: #9ec5fe;
    --bs-alert-bg: #1a2744;
    --bs-alert-border-color: #2a3b5c;
}

[data-bs-theme="dark"] .alert-secondary {
    --bs-alert-color: var(--jas-text-muted);
    --bs-alert-bg: var(--jas-bg-subtle);
    --bs-alert-border-color: var(--jas-border);
}

[data-bs-theme="dark"] .alert-success {
    --bs-alert-color: #9ee6b8;
    --bs-alert-bg: #143d24;
    --bs-alert-border-color: #1f5a35;
}

[data-bs-theme="dark"] .alert-danger {
    --bs-alert-color: #f5a3ab;
    --bs-alert-bg: #3d1418;
    --bs-alert-border-color: #5a1f25;
}

[data-bs-theme="dark"] .alert-warning {
    --bs-alert-color: #ffda8a;
    --bs-alert-bg: #3d3212;
    --bs-alert-border-color: #5a4a1e;
}

[data-bs-theme="dark"] .alert-info {
    --bs-alert-color: #9eeaf9;
    --bs-alert-bg: #123a42;
    --bs-alert-border-color: #1e5560;
}

[data-bs-theme="dark"] .alert-light {
    --bs-alert-color: var(--jas-text-muted);
    --bs-alert-bg: var(--jas-bg-subtle);
    --bs-alert-border-color: var(--jas-border);
}

[data-bs-theme="dark"] .alert-dark {
    --bs-alert-color: var(--jas-text-muted);
    --bs-alert-bg: #141619;
    --bs-alert-border-color: #2a2d31;
}

.k-table-td {
    --kendo-spacing-2: .125rem;
}

.nav {
    --bs-nav-link-padding-x: .7rem;
}

.btn-outline-primary {
    --bs-btn-color: var(--jas-primary, #337ab7);
    --bs-btn-border-color: var(--jas-primary, #337ab7);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jas-primary, #337ab7);
    --bs-btn-hover-border-color: var(--jas-primary, #337ab7);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jas-primary, #337ab7);
    --bs-btn-active-border-color: var(--jas-primary, #337ab7);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--jas-primary, #337ab7);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--jas-primary, #337ab7);
    --bs-gradient: none;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

body {
    font-size: 14px;
}

nav {
    font-size: .9rem;
}

.k-grid-header .k-grid-header-menu.k-active {
    background-color: var(--bs-link-color);
}

.addrText {
    font-size: .9em;
    line-height: 1rem;
}

.form-label, .form-text {
    margin: 0 0 .25rem 0;
    font-size: 1rem;
}

.jas-kendo-column-right {
    text-align: right !important;
    justify-content: right !important;
}

.jas-kendo-column-center {
    text-align: center !important;
    justify-content: center !important;
}

.jas-mw-sm {
    max-width: 540px;
}

/* Correspondence/Create - the screen where a collector decides what a debtor receives. It only ever
   renders inside the correspondence Kendo Window, which correspondence_window.js maximizes on open, so it
   always has the whole viewport and nothing to align against; this column is what stops three form
   controls from stranding themselves across the width of whatever monitor opened them. Sized to roughly a
   letter page because #templateEditor renders inside this same column on the tenants that edit the letter
   body here, and a letter is what that editor is editing. */
/* WIDE ENOUGH TO SHOW THE EMAIL AT ITS REAL WIDTH (Ryan, 2026-09-05), which is what this column is
   ultimately for now that it carries a preview.

   It was 760px, sized to roughly a letter page for the sake of #templateEditor. Measured at that width:
   the preview iframe came out 692px, and a table-bearing message is a 900px card (EmailHtml.WideCardWidth)
   whose `max-width:100%` then compressed it into 692 - eight configured columns at about 80px each, every
   one wrapping. Nothing was cut off, which is why it reads as "clipped" rather than as an error, but the
   collector was approving a layout the debtor will never see.

   1040 is arithmetic rather than taste: 1040 - 32 (this element's own padding) - 43 (the field's) - a
   scrollbar leaves the frame ~950px, so a 900px card renders at 900 with room to spare. The controls that
   were sized for the old measure keep it explicitly below, so widening the column moved the preview and
   nothing else. */
.correspondence-create-page {
    max-width: 1040px;
    margin: 0 auto;
    /* Scales with the window rather than sitting at a fixed offset: maximized on a tall monitor this is a
       short form in a very tall frame, and a little more headroom there makes the empty space below read
       as deliberate. Capped, and floored at the fixed value, so a short window does not spend its height
       on padding - correspondence_create.js measures the letter editor from the picker's own top, so
       whatever this costs comes straight off the editor. */
    padding: clamp(1.5rem, 4vh, 3rem) 1rem 2rem;
}

.correspondence-create-header {
    margin-bottom: 1.25rem;
}

.correspondence-create-title {
    margin-bottom: .25rem;
    font-weight: 600;
    color: var(--jas-text, #212529);
}

.correspondence-create-lead {
    max-width: 72ch;
    margin-bottom: 0;
    color: var(--jas-text-muted, #6c757d);
}

/* ONE card with hairline-divided rows, not a card per decision: the three decisions are one form, and
   three shadowed cards stacked at this width read as three unrelated screens. .section-card's own 12px
   padding is dropped so each row can span the full card and its divider can too.

   The border override is not cosmetic drift: .section-card hardcodes #e9ecef, which stays near-white on a
   dark surface. Everything this screen draws goes through the --jas-* tokens instead.

   BOTH OVERRIDES NEED TO OUT-SPECIFY .section-card, which is a single class declared ~5,000 lines
   further down this file - so an equally-specific rule up here loses the cascade and the card silently
   keeps its own 12px padding, which shows up as dividers that stop short of the card edge and as one
   fewer column in the document grid below. The selector names .section-card itself rather than an
   ancestor for that reason: doubling up on the two classes the element already carries buys the same
   specificity as the .correspondence-create-page prefix that used to be here, but it says out loud which
   rule it is beating and it cannot be broken from the markup side. The old prefix depended on a parent
   element that has nothing to do with the override, so moving the card, or dropping a page wrapper that
   looks decorative, silently gave the padding back. Keep both classes in this selector. */
.correspondence-create-card.section-card {
    padding: 0;
    border-color: var(--jas-border, #e9ecef);
}

.correspondence-create-field {
    padding: 1.15rem 1.35rem;
}

.correspondence-create-field + .correspondence-create-field {
    border-top: 1px solid var(--jas-border, #dee2e6);
}

/* Heavier than both the help text under it and the control below it, so the decisions are what gets
   scanned first - before this the whole page was one visual weight. */
.correspondence-create-field-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--jas-text, #212529);
}

    /* An envelope, a PDF and a paperclip. The three decisions are three different kinds of thing and the
       controls under them are near-identical boxes, so this is the part that separates them at a glance,
       before any of the help text has been read. Muted rather than brand-coloured - it is a marker for
       the label, not a thing to look at on its own. */
    .correspondence-create-field-label .bi {
        font-size: 1.05rem;
        line-height: 1;
        color: var(--jas-text-muted, #6c757d);
    }

/* The line that says what a field MEANS. "Email message" and "Letter attachment" are not the same kind of
   thing and two identical combo boxes cannot say so on their own; this is what does. */
/* No max-width, unlike the lead above: this line sits directly on top of a control that spans the whole
   field, and a measure narrower than the box under it just reads as a ragged column. The copy is kept to
   roughly one line at this width instead. */
.correspondence-create-field-help {
    margin-bottom: .65rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--jas-text-muted, #6c757d);
}

/* Marks the two decisions a collector can simply skip. Deliberately quiet - it is a reassurance, not a
   status, and it sits beside a label it must not outweigh. */
.correspondence-create-optional {
    padding: .1rem .45rem;
    border: 1px solid var(--jas-border, #dee2e6);
    border-radius: 999px;
    background: var(--jas-bg-subtle, #f8fafc);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--jas-text-muted, #6c757d);
}

/* Kendo sizes a standalone ComboBox to its own content. Both pickers span their field instead, so they
   line up with each other and with the card - which is what the fixed label column of the input-groups
   these replaced was for, back when the label sat inside the control rather than above it. */
.correspondence-create-field .k-combobox {
    width: 100%;
    /* THE MEASURE THE COLUMN USED TO BE, kept now that the column is 1040px for the preview's sake. A
       picker stretched across the full card is the "controls stranding themselves across the width of
       whatever monitor opened them" this page's own note warns about - and it would be a change nobody
       asked for, since the reason for the extra width sits three fields further down. */
    max-width: 760px;
}

/* The letter editor keeps a letter's measure, which was the ENTIRE reason this column was 760px before
   the preview needed more. The body it edits renders at roughly this width, so editing it at 1040 would
   show line breaks that are not the ones the reader gets. */
#templateEditor .k-editor {
    max-width: 760px;
}

/* The document types were a bare inline row of acronyms. A responsive grid gives each one room for its
   ImageTypeDescription ("Bill of Lading", not "BOL") and keeps the ticks in aligned columns instead of
   wherever the previous label's width left them. */
.correspondence-create-documents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .45rem 1rem;
}

    .correspondence-create-documents .form-check {
        margin-bottom: 0;
    }

/* The tenant's own code for the document, kept beside the description because that is the string the
   collector sees in the imaging system itself. Rendered only where it differs from the description. */
.correspondence-create-doc-code {
    font-size: .75rem;
    color: var(--jas-text-muted, #6c757d);
}

/* The "1,204 invoices, $84,912.03" beside the Aging report box. Same muted treatment as the document
   codes it sits among, but not the same class: this is a measurement of the account rather than a label
   for a file type, and the two should stay independently restyleable. */
.correspondence-create-doc-detail {
    font-size: .75rem;
    color: var(--jas-text-muted, #6c757d);
    font-style: italic;
}

/* A text button that reads as a link, sitting inside a field's label. Not an <a>: it navigates nothing
   (JAS.WebCore/CLAUDE.md - a button that acts is a <button>), and an anchor here would also be picked up
   by the label's own click-to-focus behaviour. margin-left:auto pushes it to the right-hand end of the
   label row, which is a flex container. */
.correspondence-create-preview-link {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--jas-link, #0d6efd);
}

    .correspondence-create-preview-link:hover {
        text-decoration: underline;
    }

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

/* Tall enough to show a letter's first screenful without the pane itself scrolling the page, and it owns
   its own scrollbar so a long letter does not push the submit button out of reach - which the editor
   iframe on this same screen already did once (see correspondence_create.js's editorHeight). */
.correspondence-create-preview-frame {
    width: 100%;
    height: 380px;
    border: 1px solid var(--jas-border, #dee2e6);
    border-radius: 4px;
    background: #ffffff;
}

/* The card's footer, not a row of the form: it sits inside .correspondence-create-card, below the last
   field, and its tint is what stops the divider above it from reading as "another field should have been
   here". That matters most on the variant this screen renders most often - one letter picker and nothing
   else - where a lone field above a detached button looked like a form with a hole in it. */
.correspondence-create-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .9rem 1.35rem;
    border-top: 1px solid var(--jas-border, #dee2e6);
    background: var(--jas-bg-subtle, #f8fafc);
}

    /* The image-download variant of a tenant with no imaging and a request with no invoices: the button
       is rendered but disabled, because a form whose action has simply vanished reads as broken where a
       greyed one reads as unavailable. Scoped to this footer rather than written as a general
       .jas-btn:disabled - only .jas-btn-danger has a disabled state today, and a flat opacity applied to
       every variant at once would wash out screens nobody has looked at (see the note beside
       .jas-btn-danger:disabled). The :hover arm is not redundant: .jas-btn lifts on hover whatever its
       state, and a dead control that still springs at the pointer says the opposite of what is true. */
    .correspondence-create-actions .jas-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

        .correspondence-create-actions .jas-btn:disabled:hover {
            transform: none;
        }

.correspondence-create-note {
    margin: 0;
    font-size: .8125rem;
    color: var(--jas-text-muted, #6c757d);
}

@media (max-width: 575.98px) {
    .correspondence-create-page {
        padding: 1rem .75rem 1.5rem;
    }

    /* The footer tracks the fields' horizontal padding so the button stays on the same left edge as the
       labels and controls above it - it is the end of that column, not a bar of its own. */
    .correspondence-create-field,
    .correspondence-create-actions {
        padding: 1rem;
    }
}

.jas-mw-lg {
    max-width: 970px;
}

.jas-mw-xxsm {
    max-width: 370px;
}

.jas-mw-xxxsm {
    max-width: 240px;
}

.jas-mw-150px {
    max-width: 150px;
}

.jas-width-200px {
    width: 200px;
}

.jas-width-320px {
    width: 320px;
}

.jas-sm-control {
    max-width: 60px;
    display: inline-block;
}

.jas-lg-control {
    max-width: 240px;
    display: inline-block;
}

/* THE WIDTH CAP IS FINE ON A KENDO WIDGET; THE `display` THAT COMES WITH IT IS NOT.
   Kendo copies HtmlAttributes["class"] onto BOTH the widget wrapper and the inner input, and the
   wrapper's own layout is `display: inline-flex` - so `inline-block` from the two rules above takes
   the wrapper out of flex and the text box and the dropdown button stop being a row and STACK.
   Measured on Admin/TenantSettings' tenant picker: a 240x61 control with its arrow underneath the
   text instead of 240x31 beside it. Admin/PayingAgentConfigurations' paying-agent picker is the
   same control with the same class and had the same break.

   Restated here rather than fixed at the two call sites because the class is the shared thing: a
   third widget given it would break identically, and the cap is still what the author wanted. Plain
   inputs (the ~30 TextBoxFor uses of these classes) are untouched - they are not flex containers. */
.k-input.jas-lg-control,
.k-picker.jas-lg-control,
.k-input.jas-sm-control,
.k-picker.jas-sm-control {
    display: inline-flex;
}

.jas_brand {
    height: 33px;
    padding: 2px;
}

/* Mobile main nav search - below md, #searchForm (.jas-nav-search) is toggled by #mobileSearchToggle
   as an absolutely-positioned overlay rather than an unhidden flex row, so opening it never changes
   #mainNav's height. */
@media (max-width: 767.98px) {
    #mainNav {
        position: relative;
    }

    .jas-nav-search {
        display: none;
        position: absolute;
        top: 100%;
        right: .5rem;
        z-index: 1051;
        width: min(320px, calc(100vw - 1rem));
        margin-top: .25rem;
        padding: .5rem;
        background: var(--jas-bg, #fff);
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: .5rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    }

    .jas-nav-search.show {
        display: block;
    }
}

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

.k-grid-content {
    min-height: 175px;
}

#accounts_search .k-grid, .jas-controller-reports .k-grid, .jas-controller-admin .k-grid, .jas-controller-templates .k-grid {
    margin-top: .25rem;
}

#accounts_search #Accounts_Grid tbody, #FileSetSummary_Grid tbody, #FileSets_Grid tbody, #FailedLogins_Grid tbody
, #accounts_summary #ArSummary_Grid tbody, #accounts_summary #ArSummaryCuml_Grid tbody, #TransactionNotes_Grid tbody
, #Carriers_Grid tbody, #PayingAgentFileSets_Grid tbody{
    cursor: pointer;
}

#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 (site.css 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;
}

/* Direct flex item of .account-ar-summary-far-left (display:flex) - flex items default to
   min-width: auto, same as grid items, so without this it refuses to shrink below its Kendo grid's
   intrinsic 640px width and forces the flex container (and the grid track around it) back up to that
   width. min-width:0 on the parent alone wasn't enough.

   overflow-x is just as load-bearing as min-width here: min-width:0 only tells THIS wrapper it's allowed
   to be assigned a track narrower than its content - it does nothing to the Kendo grid inside, which
   keeps rendering at its natural ~640px and, with nothing clipping/scrolling it, visually overflows past
   this box into AccountArSummary_Grid's cell next to it (the "overlapping" seen after min-width:0 alone).
   auto rather than hidden so the %/Total Amount columns stay reachable by scrolling instead of clipped.

   Deliberately NOT applied to the equivalent #AccountArSummary wrapper inside .account-ar-summary-left:
   that grid-item's track is 1fr (flexible), not auto, and #AccountArSummary's own default min-width:auto
   (335px, its natural column width) is the only thing stopping the 1fr track from being squeezed toward
   zero by its auto-sized siblings (far-left/right) at desktop widths - removing it here too squashed
   AccountArSummary_Grid down to a sliver. far-left's track is auto, so it doesn't have that failure mode. */
#AccountCarrierArSummary {
    max-width: 500px;
    min-width: 0;
    overflow-x: auto;
}

/* Overrides the app-wide `.k-grid-content { min-height: 175px; }` (site.css above) - 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;
}

#accounts_details #AccountTransactionHistory_Grid .k-grid-content {
    max-height: calc(var(--jas-grid-dataarea-height) - var(--jas-offcanvas-height) - 36px);
}

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

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

#accounts_details .column-visibility-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

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

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

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

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

#admin_collectionterritories .k-listbox {
    width: 100%;
}

#admin_disputecodes .k-listbox {
    width: 100%;
}

#admin_specialcarriers .k-listbox {
    width: 100%;
}

/* Every dual-listbox transfer pair under Admin renders its border on .k-list rather than
   .k-list-scroller, so the "available" side (which sits under its own bordered search box) and the
   "selected" side (which sits under a blank spacer of the same height) end up with a matching border. */
.k-listbox .k-list-scroller {
    border: none;
}

.k-listbox .k-list {
    border: 1px solid var(--kendo-color-border);
}

/* A KENDO WIDGET IN A BOOTSTRAP .input-group HAS TO BE TOLD IT IS THE FORM CONTROL, and these two
   declarations are Bootstrap's own - copied off `.input-group > .form-control`, which a widget's
   <span class="k-input"> wrapper is not and so never matches. Kendo's own `.k-input, .k-picker` rule sets
   width:100% on that wrapper, and with a flex-basis of auto that 100% IS the flex base size: the widget
   claims the entire group, and .input-group is flex-wrap: wrap, so whatever shares the group with it - a
   button, a label - drops onto a line of its own underneath. width:1% is what stops that (it beats Kendo's
   100% on specificity and is then grown back by flex), NOT flex-basis:0, which would also zero the group's
   intrinsic width and collapse a group that is itself a content-sized flex item.

   This is global because it was three bugs: replacing the app's plain <select>s with ComboBoxes broke the
   Paying Agent credentials button on Accounts/Details, the Go button on Strategies' "skip to step", and the
   Template label on Correspondence/Create, each of which had been styled one at a time. Anything wanting a
   FIXED width in an input-group overrides it with a more specific selector, as #fmcsa_index does below. */
.input-group > .k-input,
.input-group > .k-picker {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* The docket prefix is a Kendo ComboBox now, so the box to size is the widget's WRAPPER - #txtDocketPrefix
   itself is the input Kendo hides behind it, and a max-width there sizes nothing anybody can see. It also
   needs its own corner rounding: Bootstrap joins an .input-group's children with :first-child/:last-child
   rules written for form controls, and a <span class="k-combobox"> is not one, so without this the prefix
   renders as a fully rounded pill overlapping the square left edge of the number box beside it. */
#fmcsa_index .input-group .k-combobox {
    /* Wider than the 75px the bare <select> needed: the same two characters now share the box with the
       widget's own toggle button. */
    flex: 0 0 100px;
    width: 100px;
}

#fmcsa_index .input-group .k-combobox:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

#fmcsa_details .fmcsa-warning {
    background: #FE9FA0;
    --border: 3px solid #FE4C4E;
}

#fmcsa_details #authInsSection td {
    text-align: center !important;
}

#fmcsa_details #authInsSection .borderless {
    border: none;
}

#fmcsa_details #insHist {
    padding-top: 20px;
}

/* The required-field asterisk. Unscoped on purpose, and it used to be
   `#payingagents_credentials #editPayingAgentCredsForm .required` - a selector that matched NOTHING:
   _Layout sets `<body id="@ViewBag.PageId">` and _BaseController builds that as {controller}_{action},
   so the credentials page is `trakiq_credentials` and has been since the action moved to TrakIQController.
   It was the only `.required` rule in any non-minified stylesheet, so Views/TrakIQ/ExportRule.cshtml's
   `class="form-label required"` labels rendered no asterisk either. */
label.required::after {
    content: " *";
    font-weight: bold;
    color: red;
    display: inline;
    font-size: 1.3em;
    vertical-align: sub
}

#reports_index h4 {
    margin-bottom: 2px;
    margin-top: 10px;
}

#reports_index .reportType {
    padding-left: 15px;
}

#reports_accountsworkedbyday #AccountsWorkedByDay_Grid th, #reports_accountsworkedbyday #AccountsWorkedByDay_Grid td
, #reports_activity #Activity_Grid th, #reports_activity #Activity_Grid td
, #reports_collectoraging #TeamAging_Grid, #reports_collectoraging #CollectorAging_Grid
, #reports_workload #WorkLoad_Grid th, #reports_workload #WorkLoad_Grid td {
    text-align: right !important;
}

#reports_collectoraging #TeamAging_Grid, #reports_collectoraging #CollectorAging_Grid, #reports_collectoraging #CollectorAgingAccount_Grid {
    margin-bottom: 25px;
}

#binsize {
    margin-top: 6px;
}


/*#####                         #####*/
/*#####          Home           #####*/
/*#####                         #####*/

/*#####         Tenants         #####*/

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

    #home_tenants .home-page {
        max-width: 1000px;
        margin: 0 auto;
        padding: 24px;
    }

    #home_tenants .k-grid tbody {
        cursor: pointer;
    }

        #home_tenants .k-grid tbody tr {
            transition: background .15s ease;
        }

    #home_tenants .k-grid td.k-selected,
    #home_tenants .k-grid .k-table-row.k-selected > td {
        background-color: rgba(13,202,240,.22);
    }

    #home_tenants .history-section {
        margin-top: 0;
    }

.tenants-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.welcome-logo {
    display: flex;
    justify-content: center;
}

.welcome-logo-image {
    max-height: 100px;
    max-width: 240px;
    object-fit: contain;
}

.welcome-title {
    font-size: 2rem;
    color: var(--jas-text, #212529);
    margin-bottom: .35rem;
}

.welcome-subtitle {
    color: var(--jas-text, #36393b);
    font-size: 15px;
}


/*#####                         #####*/
/*#####     AccountActivity     #####*/
/*#####                         #####*/

/*#####     AccountActivity     #####*/
/*#####         Details         #####*/

.account-activity-details-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

    .account-activity-details-page .section-card {
        margin-bottom: 1.5rem;
    }

.activity-details-section {
    padding: 1.5rem;
}

.account-activity-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.account-activity-group-header {
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    color: var(--jas-text, #1f2937);
    font-size: .9rem;
    font-weight: 700;
}

.account-activity-field {
    display: grid;
    grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
    gap: .8rem;
    padding: .25rem 0;
}

.account-activity-label {
    color: var(--jas-text-muted, #6b7280);
    font-size: .78rem;
    font-weight: 600;
    text-align: right;
}

.account-activity-value {
    min-width: 0;
    color: var(--jas-text, #1f2937);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

    .account-activity-value a {
        font-weight: 600;
        text-decoration: none;
    }

        .account-activity-value a:hover {
            text-decoration: underline;
        }

.account-activity-field-address {
    align-items: start;
}

.account-activity-financial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .9rem;
}

.account-activity-stat {
    min-width: 0;
    padding: .5rem;
    text-align: right;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-border, #e1e6ec);
    border-radius: 9px;
}

.account-activity-stat-label {
    margin-bottom: .2rem;
    color: var(--jas-text-muted, #6b7280);
    font-size: .67rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.account-activity-stat-value {
    color: var(--jas-text, #111827);
    font-size: .92rem;
    font-weight: 700;
}

.account-activity-note-section {
    margin-top: 1.5rem;
    overflow: hidden;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-border, #e1e6ec);
    border-radius: 12px;
}

.account-activity-note-header {
    padding: .7rem 1rem;
    color: var(--jas-text, #374151);
    font-size: .8rem;
    font-weight: 700;
    background: var(--jas-bg-subtle, #f8fafc);
    border-bottom: 1px solid var(--jas-border, #e1e6ec);
}

.account-activity-note-body {
    padding: 1rem;
    color: var(--jas-text, #374151);
    font-size: .88rem;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.account-correspondence-metadata {
    display: grid;
    gap: .65rem;
    padding: 1rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid #e5e9ef;
    border-radius: 11px;
}

.account-correspondence-field {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 1rem;
}

.account-correspondence-label {
    color: var(--jas-text-muted, #6b7280);
    font-size: .78rem;
    font-weight: 700;
    text-align: right;
}

.account-correspondence-value {
    min-width: 0;
    color: var(--jas-text, #1f2937);
    font-size: .86rem;
    overflow-wrap: anywhere;
}

.account-correspondence-attachments,
.account-correspondence-body {
    margin-top: 1.25rem;
}

.account-correspondence-section-label {
    margin-bottom: .55rem;
    color: var(--jas-text, #374151);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.account-correspondence-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.account-correspondence-attachment {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .5rem .75rem;
    color: var(--jas-text, #374151);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--jas-bg, #fff);
    border: 1px solid #d9e0e7;
    border-radius: 8px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .account-correspondence-attachment:hover {
        color: var(--jas-text, #1f2937);
        background: var(--jas-bg-subtle, #f8fafc);
        border-color: var(--jas-border, #bfc9d4);
        box-shadow: 0 2px 5px rgba(15, 23, 42, .07);
    }

    .account-correspondence-attachment span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.account-correspondence-message {
    padding: 1rem;
    color: var(--jas-text, #374151);
    font-size: .87rem;
    line-height: 1.6;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-border, #e1e6ec);
    border-radius: 10px;
    overflow-wrap: anywhere;
}

    .account-correspondence-message img {
        max-width: 100%;
        height: auto;
    }

.account-email-events-grid-section {
    padding: 0 1.5rem 1.5rem;
    overflow-x: auto;
}

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

    .account-activity-details-grid {
        grid-template-columns: 1fr;
    }

    .account-activity-field {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

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

    .account-activity-financial-grid {
        grid-template-columns: 1fr;
    }

    .account-correspondence-field {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

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

    .account-email-events-grid-section {
        padding: 0 1rem 1rem;
    }
}


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

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

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

#fixed-header .fw-semibold {
    font-size: .95rem;
    color: var(--jas-text, #13111c);
}

.nav-arrow-icon {
    color: var(--jas-accent, #16C4F6);
}

    .nav-arrow-icon:hover {
        color: var(--jas-accent, #10bcde);
    }

.backToTopNav {
    margin-top: 1px;
}

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

    #callPhone:hover {
        color: #fff;
    }

.pt1px {
    padding-top: 1px;
}

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

    .account-details-tab-content > .tab-pane {
        padding-top: 1rem;
    }

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

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

    .account-details-header-section {
        padding: 1rem;
    }

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

    #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-summary-header {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .account-details-header-section .form-label,
    .account-details-header-section .form-text {
        text-align: left !important;
    }
}

.account-details-sticky-header {
    position: sticky;
    top: var(--jas-fixed-header-offset, 100px);
    z-index: 1000;
    padding-top: .5rem;
    margin-bottom: 1rem;
}

.account-details-summary-card {
    overflow: visible;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .08), 0 10px 24px rgba(15, 23, 42, .06);
}

.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 #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. Same fix, and same reason, as
   #fmcsa_index's docket prefix. 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;
    /* Deliberately NOT min-width:0 (unlike .account-ar-summary-far-left). This track is 1fr, not auto -
       measured live, far-left's auto track claims ~816px and right's auto track ~313px, leaving this 1fr
       track squeezed to ~28px. Its default min-width:auto (this grid's own ~335px natural width) is what
       stops it being squeezed that far; without it AccountArSummary_Grid's content still renders at its
       natural width and visually overflows out of its near-zero box into the neighboring columns - the
       overlap actually seen. far-left has no such floor, so it's the one that gives way / scrolls
       instead. Harmless at the narrower breakpoints, where this track is alone in its row with nothing
       competing for the same space. */
}

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

.account-ar-summary-bin-size {
    margin-top: .4rem;
    font-size: .8rem;
}

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

    margin-bottom: 1rem !important;
    display: flex;
    gap: .5rem;
    padding: .5rem;
    background: var(--jas-bg, #ffffff);
    backdrop-filter: blur(10px);
    border: 1px solid #e9ecef;
    border-radius: 16px;
    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);
}

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

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

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

.strategy-summary-details {
    padding: 6px 18px;
}

.strategy-summary-row {
    display: grid;
    grid-template-columns: minmax(135px, 25%) 1fr;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #f1f3f5;
}

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

.strategy-summary-label {
    color: var(--jas-text-muted, #6c757d);
    font-size: .825rem;
    font-weight: 600;
}

.strategy-summary-value {
    min-width: 0;
    color: var(--jas-text, #212529);
    font-size: .9rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.strategy-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--jas-bg-subtle, #f8f9fa);
    border-top: 1px solid #e9ecef;
}

.strategy-skip-section .form-label {
    margin-bottom: 6px;
    color: var(--jas-text, #495057);
    font-size: .825rem;
    font-weight: 600;
}

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

@media (max-width: 575.98px) {
    .strategy-summary-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    #pauseStrategyOptions {
        flex-wrap: wrap;
    }

        #pauseStrategyOptions > * {
            flex: 1 1 100%;
            width: 100%;
            border-radius: 6px;
            margin-bottom: 6px;
        }
}

.aging-summary {
    overflow: hidden;
    background: var(--jas-bg, #fff);
    border: 1px solid #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 #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 #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         #####*/
/*#####          Notes          #####*/

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

.account-notes-grid-section {
    padding: 0 1.5rem 1.5rem;
}


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

.accounts-search-toolbar {
    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;
}

@media (max-width: 768px) {
    .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-grid-section {
    padding: 0 1.5rem 1.5rem;
}

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

/* Two classes, one look. `account-link` is the hover-preview anchor AccountQuickPreview binds to;
   `account-cell-link` is the plain same-tab link Transactions/Search uses instead, which deliberately
   does NOT carry the preview class - so it needs its own line here or it renders unstyled in the grid. */
.k-grid a.account-link,
.k-grid a.account-cell-link {
    color: var(--bs-link-color);
    text-decoration: underline;
}

/* accounts_details.js renders several grid links (CarrierNameClientTemplate/.goToCarrierDetails, the
Recent-note-date .goToTNotes, the Transaction Activity date .goToTAct, the child-account rollup link,
Documents' download link) with `class="... text-primary"` - Bootstrap's OWN .text-primary utility
(color: var(--bs-primary) !important, Bootstrap's default blue), not this app's brand blue, so none of
them ever matched account-link/account-cell-link's color even in light mode. Scoped to `.k-grid a` so it
only touches grid links, not every unrelated .text-primary use elsewhere in the app. Overridden here
(matching .text-primary's own !important) so every grid link uses one consistent color. */
.k-grid a.text-primary {
    color: var(--jas-primary, #337ab7) !important;
}

.k-grid a.account-link:hover,
.k-grid a.account-cell-link:hover {
    color: var(--jas-primary, #24587e);
}

.k-grid td.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

/*#tablecards .section-icon.bi-clock {
    background: #9bd9ff;
    padding-top: 2px;
    color: #0000ff;
}

#tablecards .section-icon.bi-graph-up-arrow {
    background: #b6f1ff;
    padding-top: 2px;
    color: #2828ff;
}

#tablecards .section-icon.bi-currency-dollar {
    background: #E2F6E8;
    padding-top: 2px;
    color: #36AB5D;
}

#tablecards .section-icon.bi-check-circle {
    background: #eccaf9;
    padding-top: 2px;
    color: #7000ff;
}*/

#accounts_summary #tablecards .section-header {
    border-bottom: 1px solid #f1f1f1;
}

.jas-controller-admin .row {
    margin-bottom: .5rem;
}

.k-grid-modern {
    border: none;
}

    .k-grid-modern .k-grid-header th,
    .k-grid-modern .k-grid-content td,
    .k-grid-modern .k-grid-table td {
        border-left: none !important;
        border-right: none !important;
    }

    .k-grid-modern.k-grid td:first-child,
    .k-grid-modern.k-grid th:first-child {
        padding-left: 16px !important;
    }

    .k-grid-modern .k-grid-header {
        background: linear-gradient(to bottom, var(--jas-bg-subtle, #f8f9fa), var(--jas-bg-subtle, #f0f1f3));
        border-bottom: 2px solid var(--jas-border, #dee2e6);
        font-weight: 600;
    }

    .k-grid-modern tbody tr:nth-child(even) {
        background-color: var(--jas-bg-subtle, #f8f9fa);
    }

    .k-grid-modern tbody tr:hover {
        background: rgba(13, 202, 240, .13) !important;
        transition: background-color 0.15s ease-in-out;
    }

    .k-grid-modern .k-grid-content td,
    .k-grid-modern .k-grid-table td {
        padding: 0.2rem 0.7rem;
        border-bottom: 1px solid var(--jas-border, #dee2e6);
        vertical-align: middle;
    }

.tasks-count {
    padding: 2px 10px;
    border-radius: 16px;
    height: 28px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--jas-primary, #1E6D9A);
    background-color: #eceef0;
}

.ta-credit-font {
    color: var(--jas-primary, #1E6D9A);
    font-weight: 500;
}

.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 #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 #e9ecef;
    border-color: rgba(13,202,240,.4);
    box-shadow: 0 6px 20px rgba(13,202,240,.08);
}

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

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

.collector-trend-page .dashboard-filters {
    padding: 0 16px;
}

#freshnessWarning {
    margin: 16px;
} 
/* ------------------------------------------------------------------------------------------------------
   Collector Trend filter cards

   The shared .dashboard-filter-card carries min-width: 330px, which is right on the main dashboard (a flex
   row that wants a floor) and wrong inside a Bootstrap grid column. This page lays its filters out in
   col-md-2 / col-md-3 columns: at a 1900px viewport a col-md-2 is roughly 285px, so a 330px floor makes the
   card wider than the column it lives in and it OVERLAPS its neighbour.

   min-width: 0 lets the card be as wide as its column and no wider. The Kendo rules below are the same fix
   .account-summary-filters already needed and for the same reason: a MultiSelect sizes itself from its
   content, so a long strategy name would push the card back out again from the inside.

   Collector Worklist had this same overlap and used to share this rule, but it now keeps the 330px floor
   and reflows the row instead of shrinking the card - see the grid rule in its own page <style> block
   (Reports/CollectorWorklist.cshtml) for why that page gets different treatment.
   ------------------------------------------------------------------------------------------------------ */
.collector-trend-page .dashboard-filters .dashboard-filter-card {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

/* margin: 0 above removes each card's own spacing, and the columns holding them already carry
   padding: 0 (.dashboard-filters > div[class*="col-"] below) - between them, both of this page's filter
   rows (Collector/History/Thresholds, and Strategy/Week/Rank by/Reason) end up edge-to-edge with no gap
   at all.

   NOT flex `gap` - tried first and wrong. Bootstrap's col-md-* columns set flex: 0 0 <percent> with
   flex-shrink: 0, so a row whose columns already sum to 100% (5+3+4, or 3+3+3+3, of 12) has zero spare
   width. gap adds space ON TOP OF that 100%, and shrink-0 columns refuse to give any of it back - so the
   last column has nowhere to go and wraps onto its own line, which is worse than no gap at all.

   padding on each column instead, with a matching negative margin on the row to pull the outermost
   padding back off the row's own edges (Bootstrap's own gutter mechanism, just resized down from its
   1.5rem default). Padding lives INSIDE a border-box element's declared width - box-sizing: border-box is
   a global Bootstrap reset - so it never adds to the flex-basis footprint the way margin/gap would, and
   the columns still sum to exactly 100% with no overflow. */
.collector-trend-page .dashboard-filters {
    margin-left: -6px;
    margin-right: -6px;
}

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

/* ------------------------------------------------------------------------------------------------------
   Collector Trend's attention filters stack their label above their widget.

   .dashboard-filters > div[class*="col-"] is display: flex with the default ROW direction. That is correct
   when the column's only child is a .dashboard-filter-card, because the card then does the stacking itself
   (flex-direction: column). Collector Trend's Strategy / Week / Rank by / Reason columns have no card - the
   label and the Kendo widget sit directly in the column - so those two became side-by-side flex items, and
   .dashboard-filters' align-items: stretch then pulled every picker to the height of the TALLEST column in
   the row. Measured at a 1500px viewport: pickers ~115px tall with their labels floating beside them,
   driven by the Reason column, whose label carries a button that wraps to four lines.

   Pre-existing, not caused by the rules above - verified by screenshotting this row against an unmodified
   site.css. Fixed as a direction change rather than by wrapping those four columns in cards, which would
   have added card chrome to a row that deliberately has none.
   ------------------------------------------------------------------------------------------------------ */
.collector-trend-page .dashboard-filters > div[class*="col-"] {
    flex-direction: column;
}

    /* ...and their widgets line up with each other regardless of how tall each label is.

       The Reason label carries a "What do these mean?" button, so it is taller than the plain Strategy /
       Week / Rank by labels beside it - which left its dropdown sitting a dozen pixels below the other
       three. Since .dashboard-filters stretches every column to the tallest, margin-top: auto pushes each
       picker to the bottom of its column and they all align. Content-independent, so a label that gains a
       second line later cannot knock the row out again.

       Direct child only: a picker inside a .dashboard-filter-card (the History control at the top of this
       page) is not affected, because there the card is the column's child rather than the picker. */
    .collector-trend-page .dashboard-filters > div[class*="col-"] > .k-picker {
        margin-top: auto;
    }

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

    /* NOT touching .dashboard-filter-label here, deliberately. Collector Trend's "What do these mean?" button
       lives inside one and is squeezed narrow at small viewports, which is worth fixing - but flex-wrap on the
       label is NOT the fix: that row's columns hold a bare label plus a widget with no card around them, and
       wrapping split the label's own icon away from its text. Left as it was until someone restructures that
       button out of the label. */

    /* The chip list is the part that actually grows - TagMode.Single keeps it to one chip, but a single long
       strategy name still has to be allowed to truncate rather than widen its container. */
    .collector-worklist-page .dashboard-filters .k-input-values,
    .collector-worklist-page .dashboard-filters .k-chip-list,
    .collector-worklist-page .dashboard-filters .k-input-inner,
    .collector-trend-page .dashboard-filters .k-input-values,
    .collector-trend-page .dashboard-filters .k-chip-list,
    .collector-trend-page .dashboard-filters .k-input-inner {
        min-width: 0;
        max-width: 100%;
    }

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

.k-multiselect {
    border-radius: 14px !important;
    border: 1px solid var(--jas-border, #dee2e6) !important;
    min-height: 48px;
    transition: .2s ease;
    background: var(--jas-bg, #fff);
}

    .k-multiselect:hover {
        border-color: var(--jas-accent, #16C4F6) !important;
    }

    .k-multiselect.k-focus {
        border-color: var(--jas-accent, #16C4F6) !important;
        box-shadow: 0 0 0 4px rgba(13,202,240,.12);
    }

.k-input-inner {
    padding-left: .5rem !important;
}

.k-chip,
.k-chip-solid,
.k-chip-md {
    border-radius: 999px !important;
    background: rgba(13,202,240,.12) !important;
    color: var(--jas-primary, #337ab7) !important;
    border: none !important;
    font-weight: 600;
    padding-inline: .6rem !important;
}

    .k-chip .k-icon {
        opacity: .7;
    }

.k-animation-container .k-list-container {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    overflow: hidden;
}

.k-list-item {
    border-radius: 10px;
    margin: .2rem .4rem;
    transition: .15s ease;
}

    .k-list-item:hover,
    .k-list-item.k-hover {
        background: rgba(13,202,240,.07) !important;
        color: var(--jas-primary, #337ab7) !important;
    }

.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
    background-color: var(--jas-selected-bg, #00b6ff57) !important;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: var(--jas-primary, #337ab7) !important;
    background-color: rgba(13,202,240,.30) !important;
    box-shadow: none;
}

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

.k-input-values::before {
    content: '\F52A';
    font-family: bootstrap-icons;
    color: var(--jas-text-muted, #adb5bd);
    margin-left: .5rem;
}

#tablecards {
    margin: .1rem;
}


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

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

.transaction-notes-grid-section {
    padding: 0 1.5rem 1.5rem;
}

/*#####      ContactMatch       #####*/
/*#####                         #####*/

/*#####      ContactMatch       #####*/
/*#####         Index           #####*/

.contact-match-page {
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px;
}

.contact-match-section {
    padding: 1.5rem;
}

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

.contact-match-filter {
    flex: 1 1 260px;
    min-width: 220px;
}

    .contact-match-filter .form-select,
    .contact-match-filter .form-control {
        width: 100%;
    }

.contact-match-actions {
    display: flex;
    align-items: flex-end;
}


/*#####                         #####*/
/*#####     EmailTemplates      #####*/
/*#####                         #####*/
/*#####     EmailTemplates      #####*/
/*#####         Index           #####*/
.email-templates-section {
    padding: 1rem;
}

.email-template-coverage-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid #e3e8ee;
    border-radius: 12px;
}

.email-template-coverage-header {
    margin-bottom: .85rem;
}

.email-template-coverage-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--jas-text, #212529);
    margin-bottom: .35rem;
}

.email-template-coverage-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.email-template-coverage-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .65rem;
    font-size: .75rem;
    border: 1px solid transparent;
    border-radius: 999px;
}

    .email-template-coverage-item.is-present {
        color: #166534;
        background: #ecfdf3;
        border-color: #bbf7d0;
    }

    .email-template-coverage-item.is-missing {
        color: #991b1b;
        background: #fef2f2;
        border-color: #fecaca;
    }

.email-template-coverage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #fff;
    font-size: .65rem;
    border-radius: 50%;
}

.email-template-coverage-item.is-present
.email-template-coverage-icon {
    background: #22c55e;
}

.email-template-coverage-item.is-missing
.email-template-coverage-icon {
    background: #ef4444;
}

.email-template-coverage-purpose {
    font-weight: 650;
}

.email-template-coverage-status {
    opacity: .78;
}

.email-template-coverage-item.has-info {
    cursor: pointer;
}

.email-template-coverage-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: .65;
    font-size: 1rem;
    line-height: 1;
}

    .email-template-coverage-item.has-info:hover
    .email-template-coverage-info-icon,
    .email-template-coverage-item.has-info:focus-within
    .email-template-coverage-info-icon {
        opacity: 1;
    }

.email-templates-grid-section {
    min-width: 0;
    overflow-x: auto;
}

.email-template-default-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: #15803d;
    background: #dcfce7;
    border-radius: 50%;
}

#EmailTemplates_Grid .k-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .75rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border-bottom: 1px solid var(--jas-border, #e1e6ec);
}

#EmailTemplates_Grid .k-command-cell {
    white-space: nowrap;
}

#EmailTemplates_Grid .k-grid-Edit,
#EmailTemplates_Grid .k-grid-Remove {
    margin: 0 .2rem;
}

.email-template-form-section,
.email-template-editor-section {
    padding: 1rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid #e3e8ee;
    border-radius: 11px;
}

.email-template-editor-section {
    margin-top: 1rem;
}

.email-template-form-header {
    margin-bottom: .9rem;
    padding-bottom: .6rem;
    color: var(--jas-text, #1f2937);
    font-size: .85rem;
    font-weight: 700;
    border-bottom: 1px solid #dde3ea;
}

.email-template-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr);
    gap: 1rem;
}

.email-template-form-field {
    min-width: 0;
    margin-bottom: 1rem;
}

    .email-template-form-field:last-child {
        margin-bottom: 0;
    }

    .email-template-form-field .form-label {
        margin-bottom: .35rem;
        color: var(--jas-text, #374151);
        font-size: .78rem;
        font-weight: 650;
    }

.email-template-default-option {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: 1rem;
    padding: .75rem;
    background: var(--jas-bg, #fff);
    border: 1px solid #e2e7ec;
    border-radius: 8px;
}

    .email-template-default-option .form-check-input {
        flex: 0 0 auto;
        margin-top: .2rem;
    }

    .email-template-default-option .form-check-label {
        color: var(--jas-text-muted, #4b5563);
        font-size: .78rem;
        line-height: 1.45;
    }

/* Admin > Email Templates > Preview (global admin only). */
/* The card header is the only thing on this page carrying the shared .section-card-header's 1.5rem
   side padding, so the title and its description sat 21px right of the toolbar, the context line and
   every preview below them. Scoped to this page rather than fixed on .section-card-header itself,
   which 84 views share and are aligned correctly against their own content. */
.email-preview-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #dce2e8;
    margin-bottom: 1rem;
}

.email-preview-tenant-form {
    min-width: 260px;
}

/* Wider than the tenant chooser beside it: this one holds an account number, a name and a balance in
   three columns, and the popup is sized from the input. */
.email-preview-account-form {
    min-width: 380px;
}

/* The automatic-sample note, subordinate to the account it qualifies rather than beside it. */
.email-preview-hint {
    display: block;
    color: var(--jas-text-muted, #6b7280);
    font-size: .75rem;
}

/* The aging attachment line: an aside about the message, so it reads at the context block's size
   rather than competing with the previews below it. */
.email-preview-attachment {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
    padding: .5rem .75rem;
    border: 1px solid #dce2e8;
    border-radius: .25rem;
    background-color: var(--jas-surface-muted, #f8f9fa);
}

.email-preview-context {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: var(--jas-text-muted, #4b5563);
    font-size: .8rem;
}

.email-preview-warn {
    color: #b02a37;
}

.email-preview-badge {
    display: inline-block;
    border: 1px solid #dce2e8;
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .72rem;
}

    .email-preview-badge.is-live {
        border-color: #146c43;
        color: #146c43;
    }

.email-preview-item {
    margin-bottom: 1.75rem;
}

.email-preview-item-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .4rem;
}

.email-preview-item-name {
    font-weight: 600;
}

.email-preview-item-purpose {
    color: var(--jas-text-muted, #4b5563);
    font-size: .75rem;
    border: 1px solid #dce2e8;
    border-radius: 4px;
    padding: 0 .35rem;
}

.email-preview-item-default {
    color: #146c43;
}

.email-preview-item-subject {
    color: var(--jas-text-muted, #4b5563);
    font-size: .78rem;
    margin-left: auto;
}

/*
   auto-fit against the email's OWN width, not a fixed two columns.

   The widest card a message can have is EmailHtml's 760px table shape plus its 12px of page gutter, and
   a pane narrower than that clips it - which is the one thing this page must never do, since a clipped
   preview is indistinguishable from a broken layout. On a 1265px laptop two panes come out at 533px
   each, so the side-by-side that looks obvious in a mockup silently truncated both emails.

   So: two columns when the window can genuinely hold two whole emails, one column stacked when it
   cannot. Keyed off the email's own widest shape rather than a breakpoint - it was 620px while the card
   was always 600px, and had to move the moment table-bearing messages got their own wider shape. If
   EmailHtml.WideCardWidth changes again, this moves with it.
*/
.email-preview-pane {
    /* SIZED TO THE WIDEST MESSAGE EmailHtml CAN PRODUCE, so the frame never needs a horizontal
       scrollbar and nothing past it is white space around a fixed-width email.

       The arithmetic, and it is worth keeping because this went stale once: EmailHtml.WideCardWidth is
       900, a table-bearing message adds 6px of page padding each side, and the frame carries its own
       vertical scrollbar on any message taller than the pane - roughly 17px. 900 + 12 + 17 = 929, so
       940 leaves a little headroom.

       It read 820px with a comment saying "760px table shape" until 2026-09-06, which was true when it
       was written: WideCardWidth was raised from 760 to 900 for the wide invoice table and this was not.
       Every table-bearing preview got a horizontal scrollbar. If that constant moves again, move this. */
    max-width: 940px;
    border: 1px solid #dce2e8;
    border-radius: 8px;
    overflow: hidden;
    background: var(--jas-bg, #fff);
}

.email-preview-pane-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jas-text-muted, #4b5563);
    padding: .4rem .6rem;
    border-bottom: 1px solid #dce2e8;
}

/* The email renders at its own 600px inside here; the frame just gives it a viewport. */
.email-preview-frame {
    display: block;
    width: 100%;
    height: 620px;
    border: 0;
    background: #f4f5f7;
}

.email-preview-empty {
    padding: 1rem;
    color: var(--jas-text-muted, #4b5563);
    font-size: .82rem;
}

.email-template-editor-wrapper {
    overflow: hidden;
    background: var(--jas-bg, #fff);
    border: 1px solid #dce2e8;
    border-radius: 8px;
}

/* The token reference under the message editor. Every colour here is a --jas-* variable rather than the
literal hexes the older rules in this section use, because those do not have dark-mode values and this
panel is mostly text on a tinted surface - the one shape that goes unreadable when a background flips and
a foreground does not. */
.email-template-token-section {
    margin-top: .9rem;
}

.email-template-token-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .7rem;
    color: var(--jas-text);
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
    background: var(--jas-bg);
    border: 1px solid var(--jas-border);
    border-radius: 8px;
    cursor: pointer;
}

    .email-template-token-toggle:hover {
        border-color: var(--jas-primary);
    }

.email-template-token-toggle-hint {
    margin-left: auto;
    color: var(--jas-text-muted);
    font-size: .72rem;
    font-weight: 400;
}

.email-template-token-chevron {
    transition: transform .15s ease;
}

.email-template-token-toggle.is-expanded .email-template-token-chevron {
    transform: rotate(180deg);
}

/* Capped and scrollable: thirty-odd tokens would otherwise push Save off the bottom of a 700px modal. */
.email-template-token-reference {
    max-height: 300px;
    margin-top: .6rem;
    padding: .8rem;
    overflow-y: auto;
    background: var(--jas-bg);
    border: 1px solid var(--jas-border);
    border-radius: 8px;
}

.email-template-token-note {
    display: flex;
    gap: .5rem;
    margin-bottom: .9rem;
    padding: .55rem .7rem;
    color: var(--jas-emphasis-text);
    font-size: .74rem;
    line-height: 1.45;
    background: var(--jas-emphasis-bg);
    border: 1px solid var(--jas-emphasis-border);
    border-radius: 6px;
}

.email-template-token-group + .email-template-token-group {
    margin-top: .8rem;
}

.email-template-token-group-title {
    margin-bottom: .35rem;
    color: var(--jas-text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.email-template-token-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Two columns so the chips form a scannable left rail - the token is what somebody is looking for, and
the description is what they read once they have found it. */
.email-template-token-item {
    display: grid;
    grid-template-columns: minmax(0, 11.5rem) 1fr;
    gap: .5rem;
    align-items: baseline;
    padding: .25rem 0;
}

.email-template-token-chip {
    justify-self: start;
    max-width: 100%;
    padding: .15rem .45rem;
    overflow: hidden;
    color: var(--jas-primary);
    font-family: var(--bs-font-monospace, monospace);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--jas-bg-subtle);
    border: 1px solid var(--jas-border);
    border-radius: 5px;
    cursor: pointer;
}

    .email-template-token-chip:hover,
    .email-template-token-chip:focus-visible {
        color: var(--jas-bg);
        background: var(--jas-primary);
        border-color: var(--jas-primary);
    }

.email-template-token-meta {
    color: var(--jas-text-muted);
    font-size: .74rem;
    line-height: 1.4;
}

.email-template-token-description {
    margin-right: .3rem;
}

.email-template-token-badge {
    display: inline-block;
    padding: .05rem .35rem;
    font-size: .64rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid var(--jas-border);
    border-radius: 4px;
}

    .email-template-token-badge.is-subject {
        color: var(--jas-emphasis-text);
        background: var(--jas-emphasis-bg);
        border-color: var(--jas-emphasis-border);
    }

    .email-template-token-badge.is-scope {
        color: var(--jas-text-muted);
        background: var(--jas-bg-subtle);
    }

/* One column on a phone: 11.5rem of chip plus a description does not fit, and the description is the
half that becomes unreadable rather than merely cramped. */
@media (max-width: 575.98px) {
    .email-template-token-item {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .email-template-token-toggle-hint {
        display: none;
    }
}

.email-template-window-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

    .email-template-window-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
    }

#emailTemplateWindow .k-window-content {
    padding: 0;
}

#emailTemplateWindow .k-editor {
    border: 0;
}

@media (max-width: 767.98px) {
    .email-template-coverage-section {
        padding: .85rem;
    }

    .email-template-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .email-template-window-actions {
        justify-content: stretch;
    }

        .email-template-window-actions button {
            width: 100%;
        }

    #EmailTemplates_Grid .k-grid-toolbar {
        justify-content: stretch;
    }

        #EmailTemplates_Grid .k-grid-toolbar #btnNewEmailTemplate {
            width: 100%;
        }
}


/*#####     EmailTemplates      #####*/
/*#####         Coverage           #####*/

.email-template-coverage-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 24px;
}

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

.email-template-coverage-instructions {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid #dfe6ed;
    border-left: 4px solid #47baed;
    border-radius: 10px;
}

.email-template-coverage-instructions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--jas-primary, #337ab7);
    font-size: .85rem;
    background: rgba(71, 186, 237, .14);
    border-radius: 50%;
}

.email-template-coverage-instructions-content {
    min-width: 0;
}

.email-template-coverage-instructions-title {
    margin-bottom: .3rem;
    color: var(--jas-text, #1f2937);
    font-size: .88rem;
    font-weight: 700;
}

.email-template-coverage-instructions-text,
.email-template-coverage-instructions-steps {
    color: var(--jas-text-muted, #4b5563);
    font-size: .8rem;
    line-height: 1.55;
}

.email-template-coverage-instructions-steps {
    margin-top: .45rem;
}

.email-template-coverage-grid-section {
    min-width: 0;
    overflow-x: auto;
}

#EmailTemplateCoverage_Grid .k-grid-header th:first-child,
#EmailTemplateCoverage_Grid .k-grid-content td:first-child {
    text-align: center;
}

@media (max-width: 767.98px) {
    .email-template-coverage-page {
        padding: 16px;
    }

    .email-template-coverage-instructions {
        gap: .7rem;
        padding: .85rem;
    }

    .email-template-coverage-instructions-icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }
}


/*#####                         #####*/
/*#####   Templates workspace   #####*/
/*#####                         #####*/

/* The unified templates screen: email templates, letter templates, gallery and coverage on one page.
   Every colour here is a --jas-* variable rather than a literal, so the hand-written dark-mode shim in
   this file (Bootstrap 5.2.2 has no native dark mode) reaches it. */

.template-workspace {
    padding: 16px;
}

/* Only the active tab's pane is rendered, so this is a plain block rather than a Bootstrap .tab-pane -
   see the note above the tab strip in Views/Templates/Index.cshtml. */
.template-workspace-pane {
    min-width: 0;
}

/* The gallery partial's root. It used to carry .email-templates-page + .email-preview-page, which held
   the page chrome it no longer has now that it renders inside the workspace's own section-card. */
.email-preview-pane-root {
    min-width: 0;
}

/* The tab strip. A horizontal scroller of .nav-link pills, like .account-details-tabs and
   .carrier-details-tabs - but NOT the same rules: those two are byte-identical to each other and use a
   filled active pill, this one a flat underline. A fix applied here does NOT reach them. Worth collapsing
   all three onto one class; not done, and this note is here so nobody assumes it already was. */
.template-workspace-tabs {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--jas-border, #e1e6ec);
    margin-bottom: 1rem;
    padding-bottom: .35rem;
}

    .template-workspace-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .template-workspace-tabs .nav-link {
        display: flex;
        align-items: center;
        gap: .4rem;
        white-space: nowrap;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
        color: var(--jas-text-muted, #6b7785);
        padding: .5rem .9rem;
    }

        .template-workspace-tabs .nav-link:hover {
            background: var(--jas-bg-subtle, #f4f6f9);
            color: var(--jas-text, #1f2933);
        }

        .template-workspace-tabs .nav-link.active {
            background: var(--jas-bg-subtle, #f4f6f9);
            color: var(--jas-primary, #2f6fed);
            font-weight: 600;
            box-shadow: inset 0 -2px 0 var(--jas-primary, #2f6fed);
        }

/* ---- The two editors ------------------------------------------------------------------------- */

/* The bar above the editor panes: back on the left, save on the right, and between them the reason the
   save is refused. Sticky so Save stays reachable from the bottom of a long letter form. */
.template-editor-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 0;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--jas-border, #e1e6ec);
    position: sticky;
    top: var(--jas-tab-offset, 100px);
    background: var(--jas-bg, #fff);
    z-index: 3;
}

.template-editor-bar-title {
    font-weight: 600;
    font-size: 1.05rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-editor-bar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
}

    /* A Save that is going to be refused must not look pressable. Scoped to this bar rather than written
       as a general .jas-btn-sm:disabled, following .correspondence-create-actions above - the note beside
       .jas-btn-danger:disabled explains why the general rule is not safe to write blind. The :hover arm is
       not redundant: .jas-btn lifts on hover whatever its state, and a dead control that still springs at
       the pointer says the opposite of what is true. */
    .template-editor-bar-actions .jas-btn-sm:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

        .template-editor-bar-actions .jas-btn-sm:disabled:hover {
            transform: none;
        }

/* Said out loud beside the disabled button rather than hidden in a tooltip - a Save that does nothing
   and does not say why is the thing that makes people distrust a validator. */
.template-editor-blocked {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--jas-danger-text, #b02a37);
}

/* Editor beside preview. Below 1200px they stack: two 600px-ish columns do not fit, and the preview is
   the half that tolerates being scrolled to. */
.template-editor-panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .template-editor-panes {
        grid-template-columns: minmax(0, 1fr);
    }
}

.template-editor-pane {
    min-width: 0;
}

/* Sticky, and capped to the viewport: the point of the preview is to watch it change while editing the
   form beside it, which it cannot do if it has scrolled off. */
.template-editor-pane-preview {
    position: sticky;
    top: calc(var(--jas-tab-offset, 100px) + 3.5rem);
    max-height: calc(100vh - var(--jas-tab-offset, 100px) - 5rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--jas-border, #e1e6ec);
    border-radius: 10px;
    background: var(--jas-bg-subtle, #f4f6f9);
    padding: .75rem;
}

@media (max-width: 1199.98px) {
    .template-editor-pane-preview {
        position: static;
        max-height: none;
    }
}

.template-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.template-preview-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.template-preview-context {
    font-size: .85rem;
    color: var(--jas-text-muted, #6b7785);
    margin-bottom: .5rem;
}

.template-preview-attach {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--jas-primary, #2f6fed);
}

/* The subject line, shown as the inbox would show it - a real question the body preview cannot answer,
   because the subject substitutes only five tokens where the body substitutes twenty-odd. */
.template-preview-subject {
    font-weight: 600;
    padding: .4rem .6rem;
    margin-bottom: .5rem;
    background: var(--jas-bg, #fff);
    border: 1px solid var(--jas-border, #e1e6ec);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.template-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--jas-bg, #fff);
    border-radius: 6px;
}

    .template-preview-body .email-preview-frame {
        width: 100%;
        min-height: 640px;
        border: 0;
    }

/* The letter frame renders _PrintLayout, whose body is a fixed 816px - the page width the PDF renderer
   works at. Scaled down rather than scrolled sideways so the whole page shape is visible, which is the
   thing somebody is checking. */
.letter-preview-frame {
    width: 816px;
    height: 1056px;
    border: 0;
    background: #fff;
    transform: scale(.62);
    transform-origin: top left;
}

.template-editor-pane-preview .template-preview-body:has(.letter-preview-frame) {
    /* 816 * .62 and 1056 * .62 - the frame is transformed, which does not change its layout box, so the
       container has to be told the painted size or it reserves the full 816px. */
    width: 506px;
    height: 655px;
    max-width: 100%;
    overflow: hidden;
}

/* ---- Token findings -------------------------------------------------------------------------- */

.template-token-findings {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: .75rem 0;
}

.template-token-finding {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    font-size: .875rem;
    border: 1px solid transparent;
}

    .template-token-finding.is-error {
        background: var(--jas-danger-bg, #fdecec);
        border-color: var(--jas-danger-border, #f5c2c2);
        color: var(--jas-danger-text, #8c1d1d);
    }

    .template-token-finding.is-warning {
        background: var(--jas-bg-subtle, #f4f6f9);
        border-color: var(--jas-border, #e1e6ec);
        color: var(--jas-text-muted, #6b7785);
    }

    .template-token-finding i {
        margin-top: .1rem;
        flex: 0 0 auto;
    }

.template-token-finding-field {
    font-weight: 600;
    margin-right: .35rem;
}

/* A button, not prose: "did you mean {accountName}?" that you then have to go and type yourself is a
   riddle rather than a fix. */
.template-token-fix {
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 999px;
    font-size: .78rem;
    padding: .05rem .5rem;
    margin-left: .35rem;
    cursor: pointer;
    white-space: nowrap;
}

    .template-token-fix:hover {
        background: rgba(0, 0, 0, .06);
    }

/* ---- Letter editor --------------------------------------------------------------------------- */

.letter-field-stack {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.letter-column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .6rem;
}

.letter-column-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
}

/* GREYED, NOT HIDDEN, and still posted. LetterTemplateFields is advisory: the form posts every field
   whatever this says, because Templates.SaveTemplate writes every column unconditionally and a field
   left out of the post is a field set to NULL. Hiding these would re-create the bug the twelve per-type
   editors had. */
.letter-field.is-unused {
    opacity: .55;
}

.letter-field-unused {
    font-size: .72rem;
    font-style: italic;
    color: var(--jas-text-muted, #6b7785);
    margin-left: .35rem;
}

/* A token chip that is a reference rather than an insert button - the letter list shows both. */
.email-template-token-chip.is-static {
    cursor: default;
}

/*#####                         #####*/
/*#####        Passkey          #####*/
/*#####                         #####*/

/*#####        Passkey          #####*/
/*#####         Manage          #####*/

.passkey-management-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.passkey-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--jas-border, #e1e6ec);
    border-radius: 10px;
}

.passkey-table {
    min-width: 650px;
}

    .passkey-table thead th {
        padding: .75rem 1rem;
        color: var(--jas-text-muted, #4b5563);
        font-size: .75rem;
        font-weight: 700;
        background: var(--jas-bg-subtle, #f8fafc);
        border-bottom: 1px solid var(--jas-border, #e1e6ec);
        white-space: nowrap;
    }

    .passkey-table tbody td {
        padding: .85rem 1rem;
        color: var(--jas-text, #374151);
        font-size: .82rem;
        border-color: var(--jas-border, #edf0f3);
        vertical-align: middle;
    }

    .passkey-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .passkey-table tbody tr:hover {
        background: rgba(13, 202, 240, .06);
    }

.passkey-actions-column {
    width: 130px;
}

.passkey-device-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.passkey-device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--jas-primary, #337ab7);
    font-size: .9rem;
    background: rgba(71, 186, 237, .14);
    border-radius: 8px;
}

.passkey-device-name {
    min-width: 0;
    color: var(--jas-text, #1f2937);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.passkey-never-used {
    color: var(--jas-text-muted, #9ca3af);
    font-style: italic;
}

.passkey-remove-form {
    display: inline-block;
    margin: 0;
}

    .passkey-remove-form button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
    }

.passkey-management-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

    .passkey-management-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
    }

.passkey-empty-state {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px dashed #cfd7df;
    border-radius: 10px;
}

.passkey-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--jas-primary, #337ab7);
    font-size: 1.2rem;
    background: rgba(71, 186, 237, .14);
    border-radius: 10px;
}

.passkey-empty-content {
    min-width: 0;
}

.passkey-empty-title {
    margin-bottom: .15rem;
    color: var(--jas-text, #1f2937);
    font-size: .88rem;
    font-weight: 700;
}

.passkey-empty-description {
    color: var(--jas-text-muted, #6b7280);
    font-size: .8rem;
    line-height: 1.45;
}

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

    .passkey-management-actions {
        justify-content: stretch;
    }

        .passkey-management-actions button {
            width: 100%;
        }

    .passkey-empty-state {
        align-items: flex-start;
    }
}


/*#####                         #####*/
/*#####        Reports          #####*/
/*#####                         #####*/

/*#####          Reports            #####*/
/*#####   Accounts Worked By Day    #####*/
.accounts-worked-by-day-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px;
}

    .accounts-worked-by-day-page .section-card-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 1rem;
    }

.accounts-worked-by-day-grid-section {
    padding: 0 1.5rem 1.5rem;
}


/*#####        Reports          #####*/
/*#####     Account Aging       #####*/

.account-aging-page {
    max-width: 2800px;
    margin: 0 auto;
    padding: 24px;
}

.account-aging-grid-section {
    padding: 0 1.5rem 1.5rem;
}


/*#####         Reports           #####*/
/*#####    Accounts Not Worked    #####*/

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

    .accounts-not-worked-page .section-card-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 1rem;
    }

.accounts-not-worked-grid-section {
    padding: 0 1.5rem 1.5rem;
}

/* ------------------------------------------------------------------------------------------------------
   Accounts Not Worked filter cards

   Same fix, and the same reason, as .collector-trend-page above: the shared .dashboard-filter-card carries
   min-width: 330px plus margin: .7rem 1rem, which is right on the main dashboard (a flex row that wants a
   floor) and wrong inside a Bootstrap grid column. On a phone the column IS the viewport, so 330 + 32 is
   wider than the screen and the whole row scrolls sideways; at col-md-3 on a narrow desktop window the card
   is wider than its column and OVERLAPS its neighbour.

   min-width: 0 lets each card be exactly as wide as its column and no wider. The Kendo rules below are the
   other half of it: a MultiSelect sizes itself from its content, so one long strategy name would push the
   card back out again from the inside.
   ------------------------------------------------------------------------------------------------------ */
.accounts-not-worked-page .dashboard-filters .dashboard-filter-card {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

/* The cards' own margin is gone above, so the gutter comes from padding on the columns with a matching
   negative margin on the row - Bootstrap's own mechanism, resized down from its 1.5rem default. NOT flex
   `gap`: col-md-3 columns are flex-shrink: 0 and already sum to 100%, so gap adds width they cannot give
   back and the last card wraps onto its own line. Padding lives inside a border-box width, so it doesn't. */
.accounts-not-worked-page .dashboard-filters {
    margin-left: -6px;
    margin-right: -6px;
}

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

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

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

/* 24px of page padding plus 1.5rem of section padding is 96px of chrome on each row - a quarter of a
   375px phone. Reclaimed below the md breakpoint, where the cards are stacked one per row and every pixel
   of it is going to a card that is already as narrow as its content allows. */
@media (max-width: 767.98px) {
    .accounts-not-worked-page {
        padding: 12px;
    }

    .accounts-not-worked-grid-section {
        padding: 0 .75rem .75rem;
    }
}


/*#####          Reports            #####*/
/*#####  Accounts Stalled in Step   #####*/

/* The sibling of Accounts Not Worked, and it needs the same page chrome and the same filter-card fixes.
   Kept as its own block rather than a shared selector list: these two pages are siblings today, and a
   grouped selector is the thing that quietly stops matching when one of them is restyled. */
.accounts-stalled-in-step-page {
    max-width: 3380px;
    margin: 0 auto;
    padding: 24px;
}

    .accounts-stalled-in-step-page .section-card-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 1rem;
    }

.accounts-stalled-in-step-grid-section {
    padding: 0 1.5rem 1.5rem;
}

/* See the Accounts Not Worked block above for why every one of these rules is here - the shared
   .dashboard-filter-card's 330px floor overflows any column narrower than 362px, which is every column on
   a phone and a col-md-3 on a narrow desktop window. */
.accounts-stalled-in-step-page .dashboard-filters .dashboard-filter-card {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

.accounts-stalled-in-step-page .dashboard-filters {
    margin-left: -6px;
    margin-right: -6px;
}

.accounts-stalled-in-step-page .dashboard-filters > div[class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

.accounts-stalled-in-step-page .dashboard-filters .k-multiselect,
.accounts-stalled-in-step-page .dashboard-filters .k-input,
.accounts-stalled-in-step-page .dashboard-filters .k-picker {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.accounts-stalled-in-step-page .dashboard-filters .k-input-values,
.accounts-stalled-in-step-page .dashboard-filters .k-chip-list,
.accounts-stalled-in-step-page .dashboard-filters .k-input-inner {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .accounts-stalled-in-step-page {
        padding: 12px;
    }

    .accounts-stalled-in-step-grid-section {
        padding: 0 .75rem .75rem;
    }
}


/*#####        Reports          #####*/
/*#####        Activity         #####*/

.activity-report-page {
    max-width: 2800px;
    margin: 0 auto;
    padding: 24px;
}

.activity-report-grid-section {
    padding: 0 1.5rem 1.5rem;
}

.activity-report-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

    .activity-report-page .section-card {
        margin-bottom: 20px;
    }

    .activity-report-page .section-card-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .activity-report-page .k-grid-header .k-grid-header-sticky,
        .activity-report-page .k-master-row .k-grid-content-sticky {
            border-color: inherit !important;
        }

        .activity-report-page #Activity_Grid td:last-child,
        .activity-report-page #Activity_Grid th:last-child {
            font-weight: 600;
        }


/*#####             Reports               #####*/
/*#####    Open Transactions By Office    #####*/

/* Wide: the grid carries five aging buckets plus three share columns. Matches the other wide reports
   (Account Aging, Activity) rather than the narrow 900px ones. */
.open-transactions-by-office-page {
    max-width: 2100px;
    margin: 0 auto;
    padding: 24px;
}

    .open-transactions-by-office-page .section-card {
        margin-bottom: 20px;
    }

#officeNotices {
    padding: 0 1rem;
}

/*#####             Reports               #####*/
/*#####    Collection Territory Funds     #####*/

.territory-funds-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.territory-funds-grid-section {
    padding: 0 1.5rem 1.5rem;
}

.territory-funds-page tfoot td {
    text-align: right !important;
}

    .territory-funds-page .section-card {
        margin-bottom: 20px;
    }

.territory-funds-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

    .territory-funds-page #TerritoryFunds_Grid .k-grid-footer {
        font-weight: 600;
    }


/*#####        Reports          #####*/
/*#####     Collector Calls      #####*/

.collector-calls-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.collector-calls-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.collector-calls-grid-section {
    padding: 0 1.5rem 1.5rem;
}

/* See the Accounts Not Worked block above for why every one of these rules is here - the shared
   .dashboard-filter-card's 330px floor overflows any column narrower than 362px, which at this page's
   800px width is every one of its three col-md-3 filter cards, so the Start date/End date pickers and
   their popups overlapped their neighbour. */
.collector-calls-page .dashboard-filters .dashboard-filter-card {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

.collector-calls-page .dashboard-filters {
    margin-left: -6px;
    margin-right: -6px;
}

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

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


/*#####        Reports          #####*/
/*#####     Collector Funds      #####*/

.collector-funds-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
}

.collector-funds-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.collector-funds-grid-section {
    padding: 0 1.5rem 1.5rem;
}


/*#####        Reports          #####*/
/*#####     Collector Worklist      #####*/

.collector-worklist-page {
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px;
}

/*#####        Reports          #####*/
/*#####        Dynamic          #####*/

.dynamic-reports-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

    .dynamic-reports-page .k-searchbox {
        min-width: 200px;
    }

    .dynamic-reports-grid-section {
        padding: 0 1.5rem 1.5rem;
    }


/*#####        Reports          #####*/
/*#####         Index           #####*/

.reports-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

.reports-page .section-card-header{
    padding: .9rem;
}

.report-category {
    padding: 1rem;
}

.report-category-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--jas-text, #343a40);
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.report-tile {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem;
    padding-top: 1.5rem;
    text-decoration: none;
    color: inherit;
    background: var(--jas-bg, #ffffff);
    border: 1px solid #e9ecef;
    border-radius: 16px;
    transition: all .1s ease;
    position: relative;
}

    .report-tile:hover {
        text-decoration: none;
        color: inherit;
        
        border-color: rgba(13,202,240,.35);
        box-shadow: 0 10px 24px rgba(0,0,0,.02);
    }

    .report-tile i {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 14px;
        background: rgba(13,202,240,.12);
        color: var(--jas-accent, #16C4F6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
    }

.report-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--jas-text, #212529);
    margin-bottom: .25rem;
}

.report-tile:active {
    transform: translateY(0);
}

.reports-header-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
}

.reports-header-left {
    flex: 1 1 300px;
    min-width: 300px;
}

.reports-help-box {
    flex: 1 1 300px; /* or 0 1 300px if you don't want it growing */
    min-width: 300px;
    max-width: 850px;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.reports-help-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--jas-text, #1f2937);
}

.reports-help-text {
    font-size: 13px;
    color: var(--jas-text, #36393b);
    margin-bottom: 10px;
    line-height: 1.4;
}

.reports-help-button {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 12px;
    background: #47baed;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

    .reports-help-button:hover {
        background: #2ea8db;
    }

@media (max-width: 992px) {

    .reports-page {
        padding: 16px;
    }

    .settings-header {
        padding: 1.25rem;
    }

    .report-category {
        padding: 1.25rem;
    }
}

@media (max-width: 768px) {

    .report-grid {
        grid-template-columns: 1fr;
    }

    .settings-title {
        font-size: 1.7rem;
    }

    .report-category-title {
        font-size: 1.3rem;
    }
}


/*#####        Reports          #####*/
/*#####        Workload         #####*/
.collector-workload-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

.collector-workload-grid-section {
    padding: 0 1.5rem 1.5rem;
}

.collector-workload-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}


/*#####                         #####*/
/*#####         Admin           #####*/
/*#####                         #####*/

/*#####          Admin             #####*/
/*#####   Collection Territories   #####*/

.territories-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 24px;
}

.territories-grid-section {
    padding: 1.5rem;
}

.territories-edit-section {
    padding: 1.5rem;
}

.territories-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.territories-users-panel {
    background: var(--jas-bg-subtle, #fafbfc);
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 1.5rem;
}

.territories-list-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--jas-text, #111827);
    margin-bottom: .75rem;
}

.territories-users-panel .k-listbox {
    width: 100%;
}

.territories-users-panel .k-listbox-toolbar {
    background: white;
    border-left: none;
}

.territories-users-panel .k-button {
    border-radius: 10px;
}

#editCollectionTerritory .form-control {
    border-radius: 12px;
}

#editCollectionTerritory .form-label {
    font-weight: 600;
    margin-bottom: .35rem;
}

@media (max-width: 768px) {

    .territories-toolbar {
        flex-direction: column;
    }

        .territories-toolbar .jas-btn {
            width: 100%;
        }
}


/*#####         Admin           #####*/
/*#####    Collection Types     #####*/

.collection-types-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.collection-types-grid-section {
    padding: 0 1.5rem 1.5rem;
}

.collection-types-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

.collection-types-edit-card {
    margin-top: 1.5rem;
}

.collection-types-edit-section {
    padding: 1.5rem;
}

    .collection-types-edit-section .form-control {
        border-radius: 12px;
    }

@media (max-width:768px) {

    .collection-types-page {
        padding: 16px;
    }

    .collection-types-toolbar {
        flex-direction: column;
    }

        .collection-types-toolbar .jas-btn {
            width: 100%;
        }
}

/*#####          Admin            #####*/
/*#####       CreateTenant        #####*/

.createTenant-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}
.setup-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup-check-item {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    background: var(--jas-bg-subtle, #f8fafc);
    border: 1px solid var(--jas-border, #e5e7eb);
    border-radius: 10px;
}

    .setup-check-item input[type="checkbox"] {
        transform: scale(1.15);
    }


/*#####         Admin           #####*/
/*#####       DataImport        #####*/

.imports-page {
    max-width: 740px;
    margin: 0 auto;
    padding: 24px;
}

.imports-page.imports-page-wide {
    max-width: 1200px;
}

.import-section {
    padding: 1.5rem;
}

.import-upload-card {
    border: 2px dashed #d9e3ea;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--jas-bg-subtle, #fafbfc);
    transition: .2s ease;
}

    .import-upload-card:hover {
        border-color: var(--jas-accent, #16C4F6);
        background: #fcfeff;
    }

.import-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--jas-text, #212529);
    margin-bottom: .35rem;
}

.import-file-row {
    display: flex;
    gap: .75rem;
    align-items: center;
}

    .import-file-row .form-control {
        flex: 1;
    }

    .import-file-row .btn {
        min-width: 120px;
    }

.history-section {
    margin-top: .5rem;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

input[type="file"].form-control {
    padding: .65rem;
    border-radius: 12px;
    border-color: var(--jas-border, #dbe2e8);
}

    input[type="file"].form-control:hover {
        border-color: var(--jas-border, #b9c7d3);
    }

#ImportHistory_Grid th:nth-child(1), #ImportHistory_Grid td:nth-child(1) {
    text-align: right;
}

#ImportHistory_Grid th:nth-child(4), #ImportHistory_Grid td:nth-child(4) {
    text-align: center
}

@media (max-width: 768px) {

    .import-file-row {
        flex-direction: column;
        align-items: stretch;
    }

        .import-file-row .btn {
            width: 100%;
        }
}


/*#####         Admin           #####*/
/*#####      Dispute Codes      #####*/

.dispute-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.dispute-grid-section {
    padding: 0 1.5rem 1.5rem;
}

.dispute-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

.dispute-edit-card {
    margin-top: 1.5rem;
}

.dispute-edit-section {
    padding: 1.5rem;
}

.dispute-listbox-card {
    border: 1px solid #e9ecef;
    border-radius: 18px;
    background: var(--jas-bg-subtle, #fafbfc);
    padding: 1rem;
}

.dispute-listbox-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--jas-text, #212529);
}

.dispute-listbox-card .k-listbox {
    width: 100%;
    min-height: 340px;
}

.dispute-edit-section .form-control {
    border-radius: 12px;
}

.dispute-edit-section hr {
    opacity: .1;
}

@media (max-width: 768px) {

    .dispute-page {
        padding: 16px;
    }

    .dispute-toolbar {
        flex-direction: column;
    }
}


/*#####         Admin           #####*/
/*#####       Employees         #####*/

.employees-page {
    max-width: 2000px;
    margin: 0 auto;
    padding: 24px;
}

#admin_employees .dashboard-filter-card {
    min-height: 140px;
}

    #admin_employees .dashboard-filter-card .form-text {
        color: var(--jas-text, #495057);
        line-height: 1.5;
    }

#admin_employees .history-header {
    margin-bottom: 1rem;
}

#admin_employees .k-grid-jas {
    margin-top: .5rem;
}

#admin_employees #employeeName {
    color: var(--jas-text, #26292d);
}

.employee-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

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

    .employee-label a {
        margin: .2rem .2rem .2rem .5rem;
        color: var(--jas-accent, #16C4F6) !important;
        font-size: 12px;
    }

        .employee-label a:hover {
            color: var(--jas-accent, #10bcde) !important;
            transform: translateY(-1px) !important;
        }

.employee-detail-link {
    text-decoration: none;
    font-weight: 600;
}

    .employee-detail-link:hover {
        color: var(--jas-accent, #10bcde);
    }

#importEmployeeForm .form-control,
#editEmployeeForm .form-control {
    border-radius: 12px;
    border: 1px solid #dbe2e8;
    padding: .7rem .9rem;
}

    #importEmployeeForm .form-control:focus,
    #editEmployeeForm .form-control:focus {
        border-color: var(--jas-accent, #16C4F6);
        box-shadow: 0 0 0 4px rgba(13,202,240,.12);
    }

#editEmployeeForm .form-check-input {
    width: 2.8rem;
    height: 1.4rem;
}

    #editEmployeeForm .form-check-input:checked {
        background-color: var(--jas-accent, #16C4F6);
        border-color: var(--jas-accent, #16C4F6);
    }


/*#####         Admin           #####*/
/*#####      OverrideCodes      #####*/

.override-codes-page {
    max-width: 2200px;
    margin: 0 auto;
    padding: 24px;
}

.login-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 768px) {
    .login-history-header {
        flex-direction: column;
    }
}

/*#####         Admin           #####*/
/*#####      App Settings       #####*/

.app-settings-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

.app-settings-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.app-setting-key {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    word-break: break-all;
}

/* Values are configuration, not prose: a monospace cell is what makes a transposed character in a URL or a
   trailing space visible at all. */
.app-setting-value,
.app-setting-masked {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

.app-setting-value {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.app-setting-masked {
    letter-spacing: 1px;
    color: var(--jas-text-muted, #6b7280);
}

/* A revealed secret is deliberately conspicuous - it is the one thing on this screen that should not be
   left sitting on somebody's second monitor. */
.app-setting-revealed {
    color: var(--jas-text, #111827);
    letter-spacing: normal;
    background: var(--jas-emphasis-bg, #fff4e5);
    padding: 1px 4px;
    border-radius: 4px;
    word-break: break-all;
}

.app-setting-length,
.app-setting-updated-by {
    color: var(--jas-text-muted, #6b7280);
    font-size: 11px;
    margin-left: 6px;
}

.app-setting-updated-by,
.app-setting-last-read {
    display: block;
    margin-left: 0;
    color: var(--jas-text-muted, #6b7280);
    font-size: 11px;
}

.app-setting-reads {
    font-variant-numeric: tabular-nums;
}

/* The row this column exists to surface: a setting nothing reads is the one that can be deleted safely.
   Amber rather than red — it is a candidate to look at, not a fault. */
.app-setting-unread {
    color: var(--jas-emphasis-text, #92400e);
    background: var(--jas-emphasis-bg, #fff4e5);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
}

.app-setting-empty {
    color: var(--jas-text-muted, #9ca3af);
    font-style: italic;
    font-size: 12px;
}

.app-setting-badge {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.app-setting-badge-secret {
    background: #fde2e4;
    color: #9f1239;
}

.app-setting-badge-startup {
    background: var(--jas-border, #e5e7eb);
    color: var(--jas-text, #374151);
}

/* Key Vault. Blue rather than the `secret` badge's red: it is where the value lives, not a warning —
   a vault-backed row is the GOOD state, and colouring it like a fault inverts the whole point. */
.app-setting-badge-vault {
    background: #dbeafe;
    color: #1e40af;
}

/* The one badge on this screen that IS a fault, and the only one that shouts. A setting whose reference
   does not resolve is present and unreadable, so whatever reads it is throwing right now. */
.app-setting-badge-problem {
    background: #9f1239;
    color: #fff;
}

/* Same font stack as .app-setting-value/.app-setting-masked beside it, spelled out rather than via a
   variable: --jas-font-mono is not defined in this stylesheet, so referencing it would silently fall back
   to the default and print a vault secret name in the body font next to monospace neighbours. */
.app-setting-vault-ref {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: var(--jas-text, #374151);
    word-break: break-all;
}

/* --jas-danger-text, NOT the badge's hardcoded #9f1239. The badge gets away with a fixed colour because it
   sets a dark background under it; this is bare text on the grid, and dark crimson on the dark palette is
   under 3:1 - so the one message on this screen worth acting on immediately was the least readable thing on
   it. The token is already redefined for [data-bs-theme="dark"] (#ff9b9b). */
.app-setting-vault-problem {
    display: block;
    margin-top: 2px;
    color: var(--jas-danger-text, #8c1d1d);
    font-size: 11px;
}

.app-setting-edit-card {
    max-width: 900px;
}

.app-setting-value-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-setting-value-input {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

/* Delete sits at the far end from Save rather than beside it. The two are one click apart otherwise, and
   only one of them is recoverable. */
.app-setting-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .app-settings-page {
        padding: 12px;
    }

    /* Stacked, so Delete cannot end up under a thumb reaching for Save on a narrow screen. */
    .app-setting-edit-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/*#####      Feature Flags      #####*/

.feature-flags-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
}

/* The matrix scrolls sideways in here rather than widening the page. -webkit-overflow-scrolling keeps the
   momentum flick on iOS, which a plain overflow-x container loses. */
.feature-flag-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .feature-flag-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .feature-flag-scroll::-webkit-scrollbar-thumb {
        background: var(--jas-border, #d0d7de);
        border-radius: 20px;
    }

.feature-flag-matrix {
    margin-bottom: 0;
    /* Stops the four feature columns being squeezed to nothing instead of scrolling - without a floor the
       table shrinks to the viewport and the switches end up stacked under wrapped headings. */
    min-width: 720px;
}

    /* The switch column headers carry a description and a link, so they need real width - without this the
       tenant column takes most of the table and the feature columns wrap to one word per line. */
    .feature-flag-matrix .feature-flag-feature-col {
        width: 210px;
        vertical-align: top;
    }

    /* Pinned while the feature columns scroll past, so a switch is never anonymous - on a phone the tenant
       name would otherwise be off-screen exactly when you are deciding whether to tick something for it.
       Needs an opaque background of its own: the table is not striped, so without one the scrolling cells
       show straight through it. */
    .feature-flag-matrix .feature-flag-tenant-col {
        vertical-align: top;
        min-width: 260px;
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--jas-bg, #ffffff);
    }

    .feature-flag-matrix .feature-flag-audience-row .feature-flag-tenant-col {
        background-color: var(--jas-bg-subtle, #f5f7fa);
    }

    .feature-flag-matrix tbody .feature-flag-feature-col {
        text-align: center;
    }

        /* form-switch indents for its label; these switches have none, so centre the control itself. */
        .feature-flag-matrix tbody .feature-flag-feature-col .form-check {
            display: inline-block;
            padding-left: 0;
            min-height: auto;
            margin-bottom: 0;
        }

        .feature-flag-matrix tbody .feature-flag-feature-col .form-check-input {
            margin-left: 0;
            float: none;
        }

.feature-flag-feature-name {
    font-weight: 600;
}

.feature-flag-feature-link {
    font-size: .75rem;
    word-break: break-all;
}

.feature-flag-tenant-name {
    display: block;
    font-weight: 600;
}

/* The two audience rows - All Tenants and Global Admins - read as part of the header rather than as the
   first two tenants. Without the tint they sit flush against the tenant list and a click meant for one
   tenant lands on "everybody". */
.feature-flag-audience-row th {
    background-color: var(--jas-bg-subtle, #f5f7fa);
}

/* Separates the last audience row from the tenants below it, so the two kinds of row are not one list. */
.feature-flag-audience-row:last-child th {
    border-bottom: 2px solid #d0d7de;
}

.feature-flag-matrix .form-check-input:checked {
    background-color: var(--jas-accent, #16C4F6);
    border-color: var(--jas-accent, #16C4F6);
}

/* A switch that cannot be changed while the feature is on for All Tenants - readable, but clearly inert. */
.feature-flag-matrix .form-check-input:disabled {
    opacity: .55;
}

@media (max-width: 768px) {
    /* 24px each side is most of a phone's width. Reclaim it for the matrix, which needs every pixel. */
    .feature-flags-page {
        padding: 12px;
    }

    /* The tenant column is the one that has to give: the feature columns are switch-width already. */
    .feature-flag-matrix .feature-flag-tenant-col {
        min-width: 180px;
    }

    .feature-flag-matrix .feature-flag-feature-col {
        width: 160px;
    }

    /* The per-feature URL is a convenience on a desktop and a wrapping nuisance on a phone. */
    .feature-flag-feature-link {
        display: none;
    }
}

/*#####         Admin           #####*/
/*#####      Sales Groups       #####*/

.sales-groups-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.sales-groups-grid-section {
    padding: 0 1.5rem 1.5rem;
}

.sales-groups-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sales-groups-edit-card {
    margin-top: 1.5rem;
}

.sales-groups-edit-section {
    padding: 1.5rem;
}

    .sales-groups-edit-section .form-control {
        border-radius: 12px;
    }

.sales-groups-listbox-card {
    border: 1px solid #e9ecef;
    background: var(--jas-bg-subtle, #fafbfc);
    border-radius: 18px;
    padding: 1rem;
}

.sales-groups-listbox-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--jas-text, #212529);
}

.sales-groups-listbox-card .k-listbox {
    width: 100%;
    min-height: 340px;
}

.sales-groups-edit-section hr {
    opacity: .1;
}

@media (max-width:768px) {

    .sales-groups-page {
        padding: 16px;
    }

    .sales-groups-toolbar {
        flex-direction: column;
    }

        .sales-groups-toolbar .jas-btn {
            width: 100%;
        }
}


/*#####         Admin           #####*/
/*#####     SpecialCarriers     #####*/

.special-carriers-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}


/*#####         Admin           #####*/
/*#####         Teams           #####*/

.teams-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.teams-section {
    padding: 1.5rem;
}

.teams-edit-section {
    padding: 1.5rem;
}

.teams-toolbar {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.teams-members-section {
    background: var(--jas-bg-subtle, #fafbfc);
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 1.5rem;
}

.listbox-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--jas-text, #111827);
    margin-bottom: .75rem;
}

.teams-members-section .k-listbox {
    width: 100%;
}

.teams-members-section .k-listbox-toolbar {
    background: var(--jas-bg, #fff);
    border-left: none;
}

#editTeam .form-control {
    border-radius: 12px;
}


/*#####                         #####*/
/*#####       Carriers          #####*/
/*#####                         #####*/

/*#####       Carriers          #####*/
/*#####        Details          #####*/

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

/* Mirrors the matching .account-details-* rules in the Accounts / Details section above -
   Carriers/Details.cshtml uses its own carrier-details-* classes rather than sharing the
   account-details-* ones, so a future accounts-only tweak can't silently move this page too. */
.carrier-details-content {
    padding: 0 !important;
}

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

    .carrier-details-tab-content > .tab-pane {
        padding-top: 1rem;
    }

.carrier-details-sticky-header {
    position: sticky;
    top: var(--jas-fixed-header-offset, 100px);
    z-index: 1000;
    padding-top: .5rem;
    margin-bottom: 1rem;
}

.carrier-details-summary-card {
    overflow: visible;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .08), 0 10px 24px rgba(15, 23, 42, .06);
}

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

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

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

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

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

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

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

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

    margin-bottom: 1rem !important;
    display: flex;
    gap: .5rem;
    padding: .5rem;
    background: var(--jas-bg, #ffffff);
    backdrop-filter: blur(10px);
    border: 1px solid #e9ecef;
    border-radius: 16px;
    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);
}

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

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

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

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

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

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

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

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

/* Mirrors #accounts_details #fixed-header/#myTab (this page's body id is "carriers_details" per
   _BaseController's ViewBag.PageId - a different id than Accounts/Details, so none of the
   #accounts_details-scoped rules above ever applied here). #myTab is the same element as
   .carrier-details-tabs, which only gets position: sticky from that class - z-index isn't part of
   it, so without this override it paints with the implicit stacking order instead of reliably
   staying above whatever scrolls underneath it (grid content, Kendo popups, etc.) once both this and
   .carrier-details-sticky-header (z-index 1000) are pinned and overlapping. Kept lower than the
   header's 1000 so the header - the outer, later-scrolled-past element - stays on top of the tabs
   strip rather than the reverse. The margin bleed on #fixed-header cancels the Bootstrap row/col
   gutter so the summary card reaches the section-card's edges instead of leaving it inset. */
#carriers_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);
}

#carriers_details #myTab {
    z-index: 999;
    top: var(--jas-tab-offset);
}

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

#carriers_details #CarrierDebtorArSummary_Grid {
    max-width: 680px;
}

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

#carriers_details #CarrierDebtorArSummary_Grid tbody tr:hover {
    cursor: pointer;
}


/*#####       Carriers          #####*/
/*#####        Search           #####*/
/* Mirrors .accounts-search-* above deliberately - the two pages are meant to read as the same
   page shape. Kept as its own class set rather than reusing the accounts one so a future
   accounts-only tweak can't silently move this page too. */
.carriers-search-page {
    max-width: 1940px;
    margin: 0 auto;
    padding: 10px;
}

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

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

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

.carriers-search-quick-search {
    width: 300px;
}

/* The $/% RadioGroup and the open-balance checkbox sit on the toolbar's baseline with the
   inputs, not the labels, so they need the bottom padding the .form-label above the text box
   otherwise supplies. */
.carriers-search-balance-view,
.carriers-search-scope {
    padding-bottom: .35rem;
}

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

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

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

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

    .carriers-search-quick-search {
        width: 100%;
    }

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

/* Marks the carrier row's own navigation affordance in the grid (Carrier Nbr cell). Everything
   else about row navigation is a delegated click - see carriers_search.js. */
.carriers-search-page .jas-grid-link {
    font-weight: 600;
    text-decoration: none;
}

    .carriers-search-page .jas-grid-link:hover {
        text-decoration: underline;
    }

/* Distinguishes a carrier-scoped correspondence row from an account-scoped one in the
   Correspondence queue grid (correspondence_queue.js's queueScopeName). */
.jas-queue-scope-pill {
    margin-right: .4rem;
}


/*#####                         #####*/
/*#####     Correspondence      #####*/
/*#####                         #####*/

/*#####     Correspondence      #####*/
/*#####        Queue            #####*/

.correspondence-queue-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.correspondence-queue-section {
    padding: 1.5rem;
}


/*#####                         #####*/
/*#####       Templates         #####*/
/*#####                         #####*/

.templates-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.templates-content {
    padding: 0 1.5rem 1.5rem;
}

.template-create-card {
    background: var(--jas-bg-subtle, #fafbfc);
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.template-create-header {
    margin-bottom: 1.25rem;
}

.template-grid-section {
    margin-top: .5rem;
}

.template-grid-header {
    margin-bottom: 1rem;
}

#btnCreateTemplate {
    padding: 6px 12px;
}

@media (max-width: 768px) {

    .templates-page {
        padding: 16px;
    }

    .templates-content {
        padding: 0 1rem 1rem;
    }
}

.template-editor-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

    .template-editor-page textarea {
        resize: vertical;
    }

    .template-editor-page .section-card {
        width: 100%;
    }

    .template-editor-page .table {
        font-size: 12px;
    }


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


/*#####                 TrakIQ                  #####*/
/*#####      Bulk Assign Paying Agent IDs       #####*/

.bulk-paying-agent-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.bulk-paying-agent-content-section {
    padding: 0 1.5rem 1.5rem;
}

.bulk-paying-agent-file-input {
    max-width: 350px;
}

.bulk-paying-agent-page .section-card-details {
    margin-bottom: 1.5rem;
}

.bulk-paying-agent-page .section-card-actions {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}


/*#####         TrakIQ          #####*/
/*#####       Credentials       #####*/

.edit-paying-agent-creds-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}

.edit-paying-agent-creds-form-section {
    padding: 0 1.5rem 1.5rem;
}

.edit-paying-agent-creds-page .section-subheader {
    font-size: 1rem;
    font-weight: 600;
    color: var(--jas-text, #1f2937);
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--jas-border, #e5e7eb);
}

.edit-paying-agent-creds-page .form-text {
    padding-top: .5rem;
    color: var(--jas-text-muted, #6b7280);
}


/*#####          TrakIQ            #####*/
/*#####     Customer Name Map      #####*/

.customer-name-map-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}

.customer-name-map-form-section {
    padding: 0 1.5rem 1.5rem;
}

.customer-name-map-grid-section {
    padding: 0 1.5rem 1.5rem;
}


/*#####         TrakIQ          #####*/
/*#####     FileAccepted        #####*/

.file-accepted-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.file-accepted-content {
    padding: 3rem 1.5rem;
    text-align: center;
}

.file-accepted-icon {
    font-size: 4rem;
    color: #22c55e;
    margin-bottom: 1.5rem;
}

.file-accepted-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.file-accepted-message {
    font-size: 1.1rem;
    color: var(--jas-text-muted, #6b7280);
}


/*#####         TrakIQ          #####*/
/*#####        FileSet          #####*/


.trakiq-file-details-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.trakiq-file-details-grid-section {
    padding: 0 1.5rem 1.5rem;
}


/*#####         TrakIQ          #####*/
/*#####        FileSets         #####*/

.trakiq-files-page {
    max-width: 1340px;
    margin: 0 auto;
    padding: 24px;
}

.trakiq-files-grid-section {
    padding: 0 1.5rem 1.5rem;
}


/*#####         TrakIQ          #####*/
/*#####      Paying Agent       #####*/

.paying-agent-info-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px;
}

.paying-agent-info-actions-section {
    padding: 0 1.5rem 1.5rem;
}

.paying-agent-info-details-section {
    padding: 0 1.5rem 1.5rem;
}

.paying-agent-info-grid-section {
    padding: 0 1.5rem 1.5rem;
}

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

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

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


/*#####         TrakIQ          #####*/
/*#####      Paying Agents      #####*/

.paying-agents-page {
    max-width: 1460px;
    margin: 0 auto;
    padding: 24px;
}

.paying-agents-grid-section {
    padding: 0 1.5rem 1.5rem;
}


.paying-agents-page .section-card-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}


/*#####                         #####*/
/*#####        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 #e9ecef;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    overflow: hidden;
    padding: 12px;
}

/* The "this report is a preview" banner sat above .section-card on not-yet-production reports (see
   Reports/Index's nav-preview-badge tiles). A modifier on .section-card rather than a one-off block, so it
   still gets the rounded corners and spacing - just a light, transparent blue instead of white and no
   shadow, so it reads as a notice rather than another content card. */
.report-preview-notice {
    background: rgba(13, 202, 240, .08);
    border: 1px solid rgba(13, 202, 240, .25);
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.25rem;
    color: var(--jas-primary, #0b6377);
    font-size: .9rem;
}

    .report-preview-notice i {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

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

.section-icon {
    width: 36px;
    height: 36px;
    border-radius: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

a.nav-link.subnav-link.dropdown-toggle.show {
    color: var(--jas-text, #495057) !important;
}

.nav-pill {
    color: var(--jas-text, #495057) !important;
    font-weight: 500;
    border-radius: 10px;
    padding: .55rem 1rem !important;
    margin: 0 .15rem;
    transition: all .2s ease;
    position: relative;
}

    .nav-pill:hover {
        background: rgba(13, 202, 240, 0.12);
        color: var(--jas-primary, #337ab7) !important;
    }


.nav-link.nav-pill.active {
    background: #16C4F640;
    color: var(--jas-primary, #337ab7) !important;
}

.nav-pill.active:hover {
    background: #16C4F660;
}

.dropdown-menu {
    border: none;
    border-radius: 16px;
    padding: .5rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    animation: dropdownFade .14s ease;
}

.dropdown-item {
    border-radius: 8px;
    padding: .6rem .85rem;
    transition: .15s ease;
}

    .dropdown-item:hover {
        background: rgba(13, 202, 240, 0.1);
        color: var(--jas-primary, #337ab7);
    }

.nav-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
    color: var(--jas-text, #495057);
}

    .nav-icon-btn:hover {
        background: rgba(13, 202, 240, 0.12);
        color: var(--jas-primary, #337ab7);
    }

/* SUB NAV CONTAINER */
.subnav-container {
    background: var(--jas-bg, #ffffff);
    border-bottom: 1px solid #e9ecef;
    padding: .4rem .75rem;
    gap: .35rem;
    /* Reserves the row's height while it is still empty. _Layout.cshtml renders this container with no
       links in it and subnav_async.js fills it a moment later, so without this the whole sticky header -
       and every page under it - shifts down by a row the instant they land. Matches one .subnav-link:
       .55rem of padding top and bottom around a ~1.5em line, plus this container's own .4rem twice. */
    min-height: 3.15rem;
}

/* Applied by subnav_async.js once the markup is in and turns out to contain no links at all - a
   Specialist, or a factoring-tenant Collector with every count at zero. Reserving a row for a bar that
   is never going to hold anything just puts an empty bordered strip under the navbar on every page. */
.subnav-container.subnav-empty {
    min-height: 0;
    padding: 0;
    border-bottom: 0;
}

/* MAIN SUB NAV LINKS */
.subnav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem !important;
    border: none;
    border-radius: 10px;
    color: var(--jas-text, #242627);
    font-weight: 600;
    transition: all .2s ease;
    position: relative;
    white-space: nowrap;
}

    .subnav-link:hover {
        background: rgba(13, 202, 240, 0.12);
        color: var(--jas-primary, #337ab7);
        transform: translateY(-1px);
    }

    .subnav-link.active {
        background: var(--jas-accent, #16C4F6);
        color: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    }

    .nav-pill.subnav-link.active {
        background: #16C4F640;
        box-shadow: none !important;
    }

        .subnav-link.active:hover {
            background: #0dc1e5;
            color: #fff;
            box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
        }

    .dropdown-item.active, .dropdown-item:active {
        background: #16C4F640;
        color: var(--jas-text, #333);
    }

    .subnav-link .badge,
    .subnav-dropdown-item .badge {
        font-weight: 600;
        border-radius: 999px;
        padding: .35rem .5rem;
        font-size: .72rem;
    }

    .subnav-link.active .badge {
        background: rgb(1 21 97 / 22%) !important;
        color: white;
    }

.subnav-dropdown-item {
    border-radius: 10px;
    padding: .65rem .9rem;
    transition: .18s ease;
    font-weight: 500;
}

    .subnav-dropdown-item:hover {
        background: rgba(13,202,240,.08);
        color: var(--jas-primary, #337ab7);
    }

    .subnav-dropdown-item.active {
        background: rgba(13,202,240,.14);
        color: var(--jas-primary, #337ab7);
    }

nav .bi-person-circle, nav .bi-envelope-paper {
    color: var(--jas-accent, #47baed);
}

.k-button-solid-primary {
    border-color: var(--jas-accent, #10bcde);
    background-color: var(--jas-accent, #16C4F6);
}

.k-button-solid-primary:hover {
    border-color: var(--jas-accent, #10bcde);
    background-color: var(--jas-accent, #10bcde);
}

.k-checkbox:checked, .k-checkbox.k-checked {
    border-color: var(--jas-accent, #10bcde);
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--jas-accent, #16C4F6);
}

.k-grid-jas {
    border: 1px solid var(--jas-border, #dee2e6);
    border-radius: 10px;
    overflow: hidden;
}

    .k-grid-jas .k-grid-content td, .k-grid-jas .k-grid-table td,
    .k-grid-jas .k-grid-jas .k-grid-content td, .k-grid-jas .k-grid-jas .k-grid-table td {
        padding: 0.3rem 0.5rem 0.3rem 0.5rem;
        vertical-align: middle;
    }

    .k-grid-jas .k-column-title {
        font-weight: 600;
        padding: 0.1rem;
        vertical-align: middle;
    }

.k-grid tbody tr:hover {
    background: rgba(13,202,240,.10) !important;
}

.k-grid-header .k-grid-header-menu.k-active {
    background-color: var(--jas-accent, #16C4F6);
    border-radius: 6px;
}

    @keyframes dropdownFade {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


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


.text-bg-info {
    background: rgba(34,193,255,.9) !important;
    color: #fff !important;
}

.text-bg-success {
    background: rgba(38,181,115,.9) !important;
    color: #fff !important;
}

.text-bg-primary {
    background: rgba(24,118,255,.9) !important;
    color: #fff !important;
}

.text-bg-light {
    background: rgba(219,219,219,.9) !important;
    color: #111 !important;
}

.text-bg-dark {
    background: rgba(57,57,57,.9) !important;
    color: #fff !important;
}

.text-bg-secondary {
    background: rgba(90,90,90,.9) !important;
    color: #fff !important;
}

.text-bg-warning {
    background: rgba(233,185,47,.9) !important;
    color: #111 !important;
}

.text-bg-danger {
    background: rgba(229,60,60,.9) !important;
    color: #fff !important;
}

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

    /* Pins the same badge to a report tile's top-right corner instead of flowing inline with text -
       .report-tile establishes the positioning context. */
    .report-tile .nav-preview-badge {
        position: absolute;
        top: .6rem;
        right: .6rem;
        font-size: .72rem;
    }

    /* Main-nav correspondence badge (_Layout.cshtml / correspondence_nav.js) - a slow pulse so it reads
       as "something's actively happening," distinct from the static bg-secondary counts _SubNav.cshtml
       uses for routine Dashboard tallies. */
    .jas-correspondence-badge {
        position: absolute;
        top: 0;
        left: 100%;
        /* translate (not a fixed margin) so the badge stays centered on the icon's corner no matter how
           wide the count text is - a fixed pixel pullback was tuned for a single digit and let a
           double-digit count (e.g. "15") bleed into the next nav item. */
        transform: translate(-60%, -50%);
        animation: jas-badge-pulse 2s ease-in-out infinite;
    }

    @keyframes jas-badge-pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(233,185,47,.6);
        }

        50% {
            box-shadow: 0 0 0 4px rgba(233,185,47,0);
        }
    }

    /* Queue.cshtml row hint for a request whose Heartbeat has gone quiet without reaching a terminal
       state - the worker that owned it is probably gone (app restart/deploy); Cancel is still always
       effective on a row like this (Correspondence.CancelAsync finalizes it immediately when stale). */
    .jas-correspondence-stale {
        opacity: .6;
        font-style: italic;
    }

/* 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 #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 own "No data available" chart overlay (.k-chart-overlay / .k-chart-overlay-top,
   z-index: 10000 - wwwroot/lib/kendo-ui/styles/bootstrap-main.css) sits far above a Bootstrap
   modal (z-index 1055) and its backdrop (1050), so it painted on top of #ctbAlert (New
   Features, _Layout.cshtml) - un-greyed, since the overlay's own background also sat above the
   backdrop's darkening layer - whenever a chart on the page had no data. Bootstrap stamps
   modal-open on <body> for as long as any modal is shown, so hiding the overlay under that
   class removes it only while a modal actually covers the page, rather than raising the
   modal/overlay z-index and risking a fight with Kendo's own much higher Window/Overlay stack
   elsewhere in the app - same reasoning as .jas-quick-preview-panel's own z-index above. */
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 #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 #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;
}
/* ------------------------------------------------------------------
   Timeline workspace chrome - the filter strip and the four tiles
   (docs/timeline-plan.md)

   Here for the same reason the cell styles below are: Views/Timeline/_TimelineWorkspace.cshtml is ONE
   definition rendered on two surfaces - /Timeline and the Accounts/Details Timeline tab - so a <style> block
   in Timeline/Index.cshtml would leave the tab's filters laid out by Bootstrap's .row and its tiles with no
   hover, no focus ring and no active state. These rules were page-scoped as `.timeline-page .dashboard-filters`
   until the tab gained the filters; the scope is now the workspace's own wrapper.
   ------------------------------------------------------------------ */

/* auto-fit/minmax rather than Bootstrap columns, for the reason Collector Worklist and Credit Exposure both
   record: at four or more across, col-md-* drops below .dashboard-filter-card's 330px min-width and the card
   overflows into its neighbour. */
#timelineWorkspaceChrome .dashboard-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;

    /* Flush with the host's content edge, which is where the grid below starts - the grid is no longer
       wrapped in a .dashboard-filter-card, so there is no 1rem card inset to match any more. The shared
       .dashboard-filters carries margin: .2rem, which is enough to read as a misalignment against the
       grid's header bar. */
    margin: 0;
}

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

/* ====================================================================================================
   THE RAIL, COMPACTED (2026-08-23, Ryan - "compact the timeline rail like the notes rail").

   WHY, MEASURED. Once this workspace's grid became full-height, the rail above it stopped being free.
   On a 1366x768 window it was 575px of a 617px viewport: the search box took a row of its own, and the
   four filters and four tiles each wrapped onto two rows because .dashboard-filter-card carries a 330px
   min-width. The grid began below the fold and you had to scroll to see a single entry.

   WHAT GOES IS CHROME, NOT CONTROLS - the same rule the notes rail follows. Every filter and every tile
   keeps its label, its icon and its value, and stays visible; none of this hides a filter that is in
   force, which on a page whose Window defaults to a week would be a list quietly filtered with nothing
   on screen saying so. What goes is the card border, the shadow, the 1rem padding and the explanatory
   subline under the search box, which is now the label's title.

   Scoped to #timelineWorkspaceChrome, so BOTH surfaces get it - /Timeline and the Accounts/Details
   Timeline tab render this one partial, and the tab needs it more (its rail was 356px of the same
   viewport, above a grid already paying for three stacked pinned bars).
   ==================================================================================================== */
#timelineWorkspaceChrome .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 {
    font-size: .8rem;
    margin-bottom: .2rem;
    gap: .35rem;
    white-space: nowrap;
}

    #timelineWorkspaceChrome .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 {
        /* PLAIN BLOCK FLOW, and that is a correction rather than the first idea. Laying the tile out as a
           flex row to get the value up beside its label was tried first and clipped: `flex: 0 0 100%` on
           the sublines did not put them on their own line, so "9 days past due (wtd avg)" ran off the
           right edge of the tile mid-word. Stacking is what these four lines want; the height saving comes
           from the padding and the type sizes below, which is all it ever needed to come from.

           The card look is restated because the toolbar rule above stripped it from every card in this
           chrome, and a tile is the one thing here that still wants to look like one - each is CLICKABLE
           (it sets the Status filter, see timeline.js's TILE_STATUS_IDS) and a clickable thing that looks
           like plain text does not get clicked. */
        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 {
        margin-bottom: .1rem;
    }

    #timelineWorkspaceChrome .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 {
        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 {
    /* --bs-primary-bg-subtle doesn't actually exist in the vendored Bootstrap 5.2.2 (that variable is a 5.3
       color-modes addition), so this was always just rendering its #cfe2ff fallback - readable on a light
       page, but with body text gone light for dark mode (the Bootstrap shim in this file), the tile's own
       text went light-on-light-blue. Uses this app's own --jas-* tokens instead, which DO have a real
       dark-mode value. */
    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)

   Here rather than page-scoped because Views/Timeline/_TimelineGrid.cshtml is ONE grid definition rendered on two
   pages - /Timeline and the Accounts/Details Timeline tab. A <style> block in Timeline/Index.cshtml would leave the
   account tab's chips unstyled, which is exactly the failure the account-cell link in Transactions/Search
   hit and had to be given its own site.css rule for.
   ------------------------------------------------------------------ */

.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 two tenant-wide notes workspaces - Accounts/Notes and Accounts/TransactionNotes
   Views/Accounts/_NotesWorkspace.cshtml

   Only the rules that are about the PAGE FRAME and about cells the Timeline has no equivalent of live
   here. The five cell conventions the two share - .notes-muted, .notes-note-cell, .notes-subline,
   .notes-id-row, .notes-id-label - are declared alongside their .timeline-* twins further up rather than
   restated, because they are the same convention and two copies is how "smaller and greyer" drifts into
   two different smallers.

   Site-wide rather than page-scoped, deliberately: these grids are partials with more than one host, and a
   block scoped to .notes-page would leave the Accounts/Details copy unstyled the moment those tabs adopt
   them - the exact failure the Timeline's own cell styles were moved out of Index.cshtml to avoid.
   ------------------------------------------------------------------ */

.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 SITS ON THE WORKSPACE'S LEFT EDGE, not 24px inside it. The app-wide .section-card-header
   carries `padding: .5rem 1.5rem`, but the workspace below it starts flush with .section-card's own 12px -
   deliberately, and for the same reason the Timeline's rail does: the filters, the grid header and the
   grid's first column all line up on that edge, and the title and description were the one thing stepped in
   from it. The import toggle on the right moves with them, so it lines up with the grid's right edge too.
   Vertical padding is untouched. Page-scoped rather than put on .notes-page-header itself: the class is
   about the flex layout, and only these two hosts render the header at all - the Accounts/Details Notes tab
   renders the workspace with no header of its own. */
.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;
}

/* While the search box has text the window is IGNORED - notes_workspace.js says so in the notice above the
   grid, and this says the same thing in the one place the reader is looking when they wonder: the control
   that has stopped applying. Dimmed rather than disabled, because changing it is how you get back. */
/* The CARD, not #notesWindow: Kendo replaces that input with a generated span wrapper and leaves the
   original hidden, so a rule on the id would dim nothing at all and look like it worked. */
.notes-search-active #notesWindowCard {
    opacity: .45;
}

/* A NOTE IS CLAMPED UNTIL IT IS ASKED TO OPEN.

   An email-sourced account note is not a sentence - it is a whole quoted thread, several hundred lines on
   a real tenant-28 page - so an unclamped note column turns one page of a stream into a document nobody
   can scan. Six lines is enough to tell one note from another; clicking opens it in place, which keeps the
   reader's row, filters and page in a way a link to the detail page would not.

   .notes-note-clampable is added by notesMarkClampableNotes (notes_cells.js) ONLY to the cells that
   actually overflow, measured after each read. That is what keeps the cursor and the fade off the
   two-line notes, which CSS alone cannot tell apart from the long ones. */
.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.

   WHY, MEASURED. Once the tenant-wide notes grids became full-height (2026-08-23) the rail above them
   stopped being free. On a 1440x900 window it was 249px of a 749px viewport, which pushed the grid past
   appFunc.ResizeGridFunc's 350px minimum floor: SIX visible rows, and the page still overflowed by 171px -
   an inner scrollbar and an outer one, on a grid whose whole point was fitting the screen. The rail is now
   ~90px and the grid gets the difference.

   WHAT GOES IS CHROME, NOT CONTROLS. Every filter keeps its label, its icon and its widget, and stays
   visible - none of this hides a filter that is in force, which on a page whose Window defaults to 30 days
   would be a list quietly filtered with nothing on screen saying so. What goes is the card border, the
   shadow, the 1rem padding and the explanatory subline under each control; the sublines move to the
   labels' title attributes (see _NotesWorkspace.cshtml), so the words still exist.

   SCOPED TO .notes-workspace-chrome, ALWAYS. The grid is no longer wrapped in a .dashboard-filter-card of
   its own (2026-08-26), which is what used to make this mandatory - an unscoped
   .notes-workspace-tight .dashboard-filter-card restyled the grid too, the same trap the compact block
   below records measuring the hard way. The scope stays because it says what these rules are about, and
   because the partial gains chrome below the rail from time to time.
   ==================================================================================================== */
.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: 1200px) {
    .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 A TAB PANE.

   An Accounts/Details tab grid is sized to the viewport minus everything above it, so every pixel the
   workspace's controls take comes straight out of the rows. Measured 2026-08-22 on the Notes tab: the
   full-size rail is 274px tall and left the grid a 220px data area - about four rows of a 250-row page.

   What goes is the explanatory subline under each filter card, not the controls themselves. Those lines
   say what a convention is ("a machine-written note carries no employee"), which is worth the space on a
   page somebody arrives at cold and is not worth it on a tab of an account they are already working. The
   SEARCH hint and the search notice stay: they say what the box currently matches and that the window is
   suspended, which are facts about the state in front of the reader rather than about the app. */
/* EVERY RULE HERE IS SCOPED TO .notes-workspace-chrome. That was once mandatory rather than tidy: the grid
   was wrapped in a .dashboard-filter-card of its own, so a compact rule written against
   .notes-workspace-compact .dashboard-filter-card caught the grid too - measured, capping the filter cards'
   width shrank the whole Transaction Notes grid to 460px, header and all. The wrapper is gone (2026-08-26)
   and the scope stays, because it is still the honest description of what these rules govern. */
.notes-workspace-compact .notes-workspace-chrome .dashboard-filter-card .section-description {
    display: none;
}

/* ...EXCEPT THE SEARCH BOX'S, which the paragraph above this block promises stays. It only needs saying
   because of a regression this rule fixes: the search box moved INTO .dashboard-filters as a
   .dashboard-filter-card on 2026-08-23 (so the tenant-wide rail could be one line), which silently brought
   its hint under the blanket rule above and hid it on the tab. Caught in the browser - visibleSublines
   came back 0 where it should have been 1.

   The distinction the blanket rule is drawing is not "sublines are clutter": it is that the OTHER three
   say what a convention is ("a machine-written note carries no employee"), which a reader on a tab of an
   account they are already working does not need, while this one says what the box in front of them
   currently matches. */
.notes-workspace-compact .notes-workspace-chrome .notes-filter-search .section-description {
    display: block;
}

/* THERE WAS A SECOND EXCEPTION HERE - .notes-hidden-types-note, the "WORKFLOW is hidden until you pick it
   here" line - and it went with the thing it explained (2026-08-24). The Type card used to open on "Any
   type" over a grid that was in fact filtered, so a sentence was the only account of the missing rows;
   it now opens with the types it is showing TICKED, which says the same thing where the reader is already
   looking. Nothing emits that class any more. */

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

    /* The gap replaces the cards' horizontal MARGIN, which is the whole point: a margin insets the first
       card from the rail's left edge as well as separating it from its neighbour, and that left inset no
       longer matches anything - the grid below is flush now that it has no card wrapper. A gap only
       separates. */
    gap: 0 .75rem;
}

    /* max-width as well as min-width: .dashboard-filter-card is flex: 1, so on the Transaction Notes tab -
       which has ONE card, because there is no Type filter and no "Logged by" - the Window dropdown stretched
       the full 1800px of an account page. A picker with six options does not need to be wider than the
       search box above it. */
    .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 HERE TOO (2026-08-26, Ryan - "put these filters on the same line").

   It used to be `flex: 0 0 100%`, which is a basis it cannot share, so it took a row of its own and the
   filter cards wrapped below it. That was deliberate at the time - it preserved the layout the tab had
   before the search moved into .dashboard-filters on 2026-08-23, and the comment here said side-by-side was
   "not a change anybody asked for". It has now been asked for: on the Transaction Notes tab, whose rail is
   only Search and Window, two rows for two controls is most of the space above the grid.

   The rail wraps on its own when it has to - every card in this block carries min-width: 260px against the
   base flex-wrap - so a narrow account page still gets the stacked layout.

   flex: 2 1 0 for the same reason the tenant-wide rail gives it: the pickers show short fixed values
   ("Any time", "Anyone", "Any type") and need no more than their own width, while an account name or an
   invoice number is what actually benefits from the room. max-width: none because the 460px cap above is
   there to stop a lone PICKER stretching an 1800px account page - the search box is the one control that
   should take the slack. */
.notes-workspace-compact .notes-workspace-chrome .notes-filter-search {
    flex: 2 1 0;
    max-width: none;
}

/* ====================================================================================================
   THE RAIL BLEEDS WITH THE GRID INSIDE AN ACCOUNTS/DETAILS TAB.

   Every tab-pane grid on that page is pulled out by half a gutter - `#accounts_details .tab-pane .k-grid`
   near the top of this file - so it sits flush with .section-card-body rather than inside the tab
   content's .8rem padding. That is the page's convention and every other tab obeys it.

   Which means a rail sitting flush with its PANE is 10.5px narrower than the grid directly beneath it, at
   both edges. Measured on the Notes and Timeline tabs: filters 42.7-1382.3, grid 32.2-1392.8 - a visible
   step at each side, and the reason the rails used to carry mx-3 and the grid a card of its own (two
   wrongs that looked less wrong together). Matching the same negative margin is what actually lines them
   up.

   The notices need !important because their own margin shorthands above are !important; left/right here
   beat those by order.

   Scoped to #accounts_details rather than to the compact/tight classes because #timelineWorkspaceChrome is
   ONE id shared with /Timeline, where there is no bleed to match.
   ==================================================================================================== */
#accounts_details .tab-pane .notes-workspace-chrome .dashboard-filters,
#accounts_details .tab-pane #timelineWorkspaceChrome .dashboard-filters {
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
}

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

/* ---------------------------------------------------------------------------------------------------
   Admin/StatementLayout - the columns a tenant's statement carries.

   Colours come from the --bs-* shim rather than being written out, so the screen follows dark mode with
   the rest of the app: Bootstrap 5.2.2 has no native dark mode and site.css hand-writes those variables.
   ------------------------------------------------------------------------------------------------ */

.statement-layout-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .statement-layout-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.statement-layout-subhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.statement-layout-subhead .section-description {
    font-weight: 400;
}

.statement-column-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.statement-column {
    display: flex;
    gap: .6rem;
    padding: .6rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
}

/* A column this build cannot read - recessed rather than hidden, because it IS on the statement and an
   admin needs to know it is there without being able to delete it. */
.statement-column-unreadable {
    opacity: .7;
    border-style: dashed;
}

.statement-column-move {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.statement-column-move .jas-btn {
    padding: .05rem .4rem;
    line-height: 1.2;
}

.statement-column-main {
    flex: 1 1 auto;
    min-width: 0;
}

.statement-column-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}

.statement-column-name {
    font-weight: 600;
}

.statement-column-title .btn-remove {
    margin-left: auto;
    padding: .05rem .5rem;
}

.statement-column-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
}

.statement-column-row > label {
    min-width: 5.5rem;
    margin: 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.statement-column-row select,
.statement-column-row input[type="text"] {
    width: auto;
    min-width: 11rem;
    max-width: 22rem;
}

.statement-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    font-size: .85rem;
    color: var(--bs-body-color);
}

.statement-kind-fixed {
    font-size: .78rem;
    padding: .1rem .45rem;
    border-radius: .25rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    cursor: help;
}

.statement-staff-only {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .1rem .4rem;
    border-radius: .25rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    cursor: help;
}

.statement-layout-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
}

/* The preview gate's own line, sat immediately right of Save. Not .section-description: as muted grey at
   13px it was indistinguishable from the four paragraphs of explanation above it and went unread, which
   is half of why the gate was reported as a broken Save button. Amber and a shade larger, because it is
   the answer to "why did nothing happen", not more prose.

   This replaced the .section-description that used to sit in .statement-layout-actions - that was the
   only one in any of the three action rows, so its margin-reset rule went with it. */
.statement-save-hint {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    /* --jas-emphasis-text rather than --bs-warning-text-emphasis (which .statement-staff-only above uses,
       and which does resolve now that Bootstrap is 5.3.8): this line is a refusal, not a warning badge,
       and the --jas-* token is the one whose dark value this file owns. */
    color: var(--jas-emphasis-text, #c2410c);
}

/* Scoped, following .correspondence-create-actions - see the note beside .jas-btn-danger:disabled for
   why the general .jas-btn:disabled rule is not safe to write blind. Save no longer disables itself here
   (the preview gate refuses on click instead), but Reset, Copy and the flex buttons all still do, for a
   read-only test twin and for a non-global admin. The :hover arm is not redundant: .jas-btn lifts on
   hover whatever its state. */
.statement-layout-actions .jas-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

    .statement-layout-actions .jas-btn:disabled:hover {
        transform: none;
    }

.statement-picker-group {
    margin-bottom: .8rem;
}

.statement-picker-group-name {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
}

.statement-picker-field {
    display: block;
    width: 100%;
    text-align: left;
    padding: .25rem .5rem;
    margin-bottom: .15rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: none;
    color: var(--bs-body-color);
    font-size: .87rem;
}

.statement-picker-field:hover:not(:disabled) {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.statement-picker-field:disabled {
    opacity: .45;
}

.statement-preview-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.statement-preview-audience {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    font-size: .87rem;
}

/* The preview is a sandboxed srcdoc document - it inherits no stylesheet from this page, which is the
   whole point: Bootstrap's table rules would otherwise repaint the invoice table into something the
   debtor never sees. White ground because that is what an email client gives it. */
.statement-preview-frame {
    margin-top: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    overflow: hidden;
    background: #fff;
}

.statement-preview-frame iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
}

.statement-wording-grid {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.statement-wording-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .6rem 1rem;
    margin-top: .45rem;
}

.statement-wording-group-name {
    font-weight: 600;
    font-size: .92rem;
}

/* The five field names reach the PDF letters, the debtor portal, global search and four grids. Marked so
   the difference from the ten correspondence-only headings above is visible before anything is typed,
   rather than only in the message after saving. */
.statement-wording-group-wide {
    padding: .6rem .75rem;
    border-left: 3px solid var(--bs-warning-border-subtle);
    background: var(--bs-tertiary-bg);
    border-radius: .375rem;
}

.statement-wording-field label {
    display: block;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
}

.statement-flex-slot {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}

.statement-flex-number {
    min-width: 4.5rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.statement-flex-slot input {
    max-width: 22rem;
}

.statement-layout-readonly,
.statement-layout-unreadable {
    padding: .55rem .7rem;
    border-radius: .375rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

/* Admin/EntraConnection - the customer-facing Microsoft connection screen. Uses --jas-* tokens rather
   than literals so it follows dark mode like everything else added since Bootstrap 5.3.8. */
.entra-permission-table code {
    font-size: .78rem;
}

.entra-permission-label {
    font-weight: 600;
}

.entra-permission-scope {
    color: var(--jas-text-muted, #6c757d);
}

.entra-permission-purpose {
    max-width: 34rem;
}

/* The unavailable-reason row sits directly under its permission and must read as a continuation of it,
   not as a separate entry. No top border, and it inherits the row above's spacing. */
.entra-permission-note > td {
    border-top: 0;
    padding-top: 0;
}

.entra-directory-list {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
}

.entra-empty-state {
    padding: 1.2rem;
    text-align: center;
}

.entra-empty-title {
    font-weight: 600;
}

.entra-empty-description {
    color: var(--jas-text-muted, #6c757d);
    margin-top: .25rem;
}