/* =============================================================================
   CCVC Online — redesign Phase 1: application shell (navy sidebar + top bar)
   -----------------------------------------------------------------------------
   Framework-agnostic chrome, loaded AFTER style.min.css + theme.css. It replaces
   the compiled admin theme's h-menu layout with a left navy sidebar + slim top
   bar, while the existing 109 content views render unchanged inside #main-content.
   Colors come from theme.css tokens (CCVC navy --primary + gold --accent).
   ============================================================================= */

:root {
    /* 18 x 13px = 234px, unchanged at scale 1. The expanded rail holds nav labels and the signed-in
       user's name, all of which scale; leaving it fixed clipped .ccvc-side-user by 15px at 125% on
       every screen in the app. Fourth instance of the same pattern, after .ccvc-acct-id strong,
       .ccvc-chstrip .select2-container and .smx-list.
       This one clears completely rather than merely improving, because the 30px avatar beside the
       name does NOT scale - so the text gains proportionally more room than the text itself grows. */
    --side-w: calc(var(--fs-base) * 18);
    /* Collapsed rail stays fixed: it shows icons only, and icon glyph size is geometry rather than
       typography (the same reason the fit probe holds icons out of the type scale). */
    --side-w-collapsed: 66px;
    --topbar-h: 60px;
    --side-bg: linear-gradient(185deg, #1d2d4f 0%, #16243f 62%, #121d34 100%);
    --side-fg: rgba(255, 255, 255, .86);
    --side-muted: rgba(255, 255, 255, .5);
    --side-hover: rgba(255, 255, 255, .08);
    --side-active: rgba(182, 138, 78, .18);
    --side-active-fg: #e7c690;
    --side-border: rgba(255, 255, 255, .09);

    /* Sidebar type, held OUT of the shared 8-step scale on purpose (2026-08-12).
       Phase 2b collapsed 26 numeric tokens onto 8 semantic ones BY VALUE, and every sidebar size
       rounded UP: the group eyebrows 9.5 -> 11 (--fs-xs), nav labels 12.5 -> 13 (--fs-base), the
       signed-in email 12 -> 13, "Administrator" 10.5 -> 11. About +20px of rail height, which was
       enough to push the user card below the fold on a 1920x1080 screen - the rail is the one
       surface in the app whose content height is fixed and cannot scroll away.
       --fs-xs is 11px because 11 was chosen for BADGES, deliberately, to keep them readable. These
       eyebrows are not badges; they are 9.5px chrome. Rather than drag --fs-xs back down and shrink
       every badge in the app, the rail keeps its own values.
       Still multiplied by --ccvc-fs-scale, so Alt+T (Normal/Large/Larger) works exactly as before -
       this restores the PROPORTIONS, it does not opt the sidebar out of the text-size setting. */
    --side-fs-group: calc(9.5px  * var(--ccvc-fs-scale, 1));
    --side-fs-nav:   calc(12.5px * var(--ccvc-fs-scale, 1));
    --side-fs-user:  calc(12px   * var(--ccvc-fs-scale, 1));
    --side-fs-av:    calc(11.5px * var(--ccvc-fs-scale, 1));
    --side-fs-meta:  calc(10.5px * var(--ccvc-fs-scale, 1));

    /* Aliases → theme.css tokens (theme.css uses long names; the shell + dashboard
       components use short names). Defined on :root so they re-resolve in dark mode. */
    --surf: var(--surface);
    --surf-2: var(--surface-2);
    --surf-3: var(--surface-3);
    --bd: var(--border);
    --bd-strong: var(--border-strong);
    --muted: var(--text-muted);
    --head: var(--heading);
    --ok: var(--success);
    --warn: var(--warning);
    --bad: var(--danger);
    --accentbg: rgba(182, 138, 78, .14);
    --accentfg: var(--accent);
}

/* ---- neutralize the compiled theme's layout for #main-content ------------- */
.ccvc-shell #main-content {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    transition: none !important;
}
.ccvc-shell { min-height: 100vh; }

/* ---- app frame ------------------------------------------------------------ */
.ccvc-app { display: flex; min-height: 100vh; align-items: stretch; }

/* ---- sidebar -------------------------------------------------------------- */
.ccvc-sidebar {
    width: var(--side-w); flex: 0 0 var(--side-w);
    background: var(--side-bg); color: var(--side-fg);
    border-right: 1px solid var(--side-border);
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; padding: 14px 12px;
    z-index: 30; transition: width .18s ease, transform .18s ease;
    /* The sidebar is a fixed 100vh box, so anything taller than the viewport was unreachable:
       page scrolling moves the main pane, not this one. It bites at browser zoom — presenting on a
       big screen — and on short windows, where the last nav items could not be reached at all.
       overscroll-behavior stops the scroll chaining to the page once this reaches its end. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--side-border) transparent;
}

/* ---- presentation mode ------------------------------------------------------
   Alt+N hides the sidebar outright, for demos and for viewers on small screens where the app is
   zoomed and every pixel of the data pane counts. The collapsed (icon-only) mode still saves
   168px; this reclaims all 234px.
   The top bar and its hamburger stay visible, so there is always an obvious way back — hiding
   navigation with no visible escape is how you strand someone. */
.ccvc-nav-hidden .ccvc-sidebar { display: none; }
.ccvc-nav-hidden .ccvc-backdrop { display: none !important; }

/* Keep the scrollbar unobtrusive so it reads as part of the navy panel, not a browser artifact. */
.ccvc-sidebar::-webkit-scrollbar { width: 8px; }
.ccvc-sidebar::-webkit-scrollbar-track { background: transparent; }
.ccvc-sidebar::-webkit-scrollbar-thumb { background: var(--side-border); border-radius: 4px; }
.ccvc-sidebar::-webkit-scrollbar-thumb:hover { background: var(--side-hover); }
.ccvc-brand { padding: 6px 6px 16px; }
.ccvc-brand a { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.ccvc-mk {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, #c9a063, #b68a4e); color: #16213d;
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-17);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.ccvc-wm { line-height: 1.06; white-space: nowrap; }
.ccvc-wm b { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-16-5); color: #e7c690; letter-spacing: .5px; display: block; font-weight: 700; }
.ccvc-wm span { font-size: var(--fs-8); letter-spacing: 2.2px; color: var(--side-muted); }
/* Real CCVC INC logo on a clean white plate (lockup is on a light background). */
.ccvc-logo { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; padding: 7px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }

/* Rail padding is tuned to FIT, not chosen by eye. The real constraint is Chrome maximised on a
   1080p screen WITH the bookmarks bar showing, which leaves ~906px of viewport - and the rail is
   fixed-height content that cannot scroll away, so anything over that clips the signed-in user card
   off the bottom. Measured at 906px before this change: 949px of content, 43px of overflow.
   The savings have to come from what MULTIPLIES: 6 group eyebrows and 15 nav items. 14px -> 10px
   above each eyebrow and 5 -> 4 below is 30px; 9px -> 8px on each nav item is another 30px.
   Verified live at 1920x906: the user card's bottom moved from 935 (29px off-screen) to 892, so it
   now clears by 14px and the rail stops clipping at roughly an 892px viewport.
   Measure the CARD, not scrollHeight - .ccvc-side-foot has margin-top:auto, so the rail always
   stretches to fill and scrollHeight == clientHeight whenever it fits, which hides the real slack.
   Do not reclaim more here - the next thing to give is the click target (nav items are 36px). */
.ccvc-navgroup { font-size: var(--side-fs-group); letter-spacing: 1px; color: var(--side-muted); padding: 10px 12px 4px; text-transform: uppercase; }
.ccvc-nav {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 8px; color: var(--side-fg);
    font-size: var(--side-fs-nav); text-decoration: none; border-left: 2px solid transparent;
    margin-bottom: 1px; transition: background .12s ease, color .12s ease; white-space: nowrap;
}
.ccvc-nav i { font-size: var(--fs-15); width: 18px; text-align: center; opacity: .85; flex-shrink: 0; }
.ccvc-nav:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.ccvc-nav.active { background: var(--side-active); color: var(--side-active-fg); border-left-color: var(--accent); font-weight: 600; }
.ccvc-nav.active i { opacity: 1; color: var(--side-active-fg); }
.ccvc-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--side-border); }
.ccvc-side-user { display: flex; align-items: center; gap: 10px; padding: 6px; font-size: var(--side-fs-user); color: var(--side-fg); white-space: nowrap; overflow: hidden; }
.ccvc-side-user .av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: rgba(231, 198, 144, .14); color: #e7c690; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--side-fs-av); border: 1px solid rgba(231, 198, 144, .35); }
.ccvc-side-user small { display: block; color: var(--side-muted); font-size: var(--side-fs-meta); }

/* ---- collapsed (icon-only) sidebar ---------------------------------------- */
.ccvc-collapsed .ccvc-sidebar { width: var(--side-w-collapsed); flex-basis: var(--side-w-collapsed); }
/* ⚠ :not(.av) - THE INITIALS PILL IS A <span> TOO. Hiding every span in the user card took the
   avatar with the name and role, leaving a narrow rail that ended in an empty box. The pill is the
   one part of that card that still works at 66px: it is already a fixed 30px circle and initials
   are legible without a label. Keeping it means the foot of the rail still answers "who am I signed
   in as", which in an app where staff share workstations is not a decoration. */
.ccvc-collapsed .ccvc-wm, .ccvc-collapsed .ccvc-navgroup, .ccvc-collapsed .ccvc-nav span, .ccvc-collapsed .ccvc-side-user span:not(.av) { display: none; }
.ccvc-collapsed .ccvc-nav { justify-content: center; gap: 0; padding: 10px; }
.ccvc-collapsed .ccvc-nav i { width: auto; }
.ccvc-collapsed .ccvc-brand a { justify-content: center; }
/* Collapsed: crop the lockup down to just the navy dove emblem. */
.ccvc-collapsed .ccvc-logo { width: 40px; height: 40px; object-fit: cover; object-position: 0 center; padding: 0; background: transparent; box-shadow: none; }
.ccvc-collapsed .ccvc-side-user { justify-content: center; }

/* State branding (System Administration → State Branding): the uploaded state logo can be any shape — a square
   seal, not the wide CCVC lockup — so cap its height instead of filling the rail width; the "Powered by CCVC INC"
   credit sits at the foot. Both only render when a state brand is active. */
/* No white plate for state logos. The .ccvc-logo plate above is for the CCVC INC lockup, which is dark
   artwork meant for a light background. A state seal is uploaded as transparent art sized for the dark
   rail, so the plate reads as an obtrusive white card around it. Collapsed/autohide already drop it. */
.ccvc-logo.ccvc-logo-state { width: auto; max-width: 100%; max-height: 92px; margin: 0 auto; object-fit: contain; background: transparent; padding: 0; box-shadow: none; }
.ccvc-collapsed .ccvc-logo.ccvc-logo-state { width: 40px; max-width: 40px; height: 40px; max-height: 40px; object-fit: contain; }
/* "Powered by" over a readable CCVC INC logo - the fleet-standard footer ACP and YDC carry. The
   white rounded card is the same treatment as .ccvc-logo above, so it reads in both themes. */
.ccvc-poweredby { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 2px 6px 4px; font-size: var(--fs-11); letter-spacing: .2px; color: var(--side-muted); }
.ccvc-poweredby-logo { display: block; height: 54px; width: auto; max-width: 100%; background: #fff; border-radius: 8px; padding: 7px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
/* Icon-only sidebar: keep a small logo, drop the caption. */
.ccvc-collapsed .ccvc-poweredby { align-items: center; padding: 2px 0 4px; }
.ccvc-collapsed .ccvc-poweredby span { display: none; }
/* The wordmark squashes into ~40px, so show only the emblem - the same crop the collapsed top logo uses. */
.ccvc-collapsed .ccvc-poweredby-logo { width: 36px; height: 36px; padding: 3px; object-fit: cover; object-position: 0 center; }

/* ---- auto-hide (compact footprint, reveals on hover) -----------------------
   The third rail state, between Expanded and Compact: you get the data pane back like Compact, but
   the labels are one mouse-move away instead of requiring a click to a different mode.

   ⚠ IT FLOATS, IT DOES NOT PUSH. The rail leaves the flex flow (position:fixed) and .ccvc-app holds
   its footprint open with a matching padding-left, so revealing it changes nothing about the page
   underneath. Widening it in flow instead would reflow the entire content column on every hover -
   and the grids are the worst case, because DataTables measures column widths against its container
   and would re-measure on a mouse-over. A rail that reshuffles the table you were reading is worse
   than no rail at all.

   ⚠ :focus-within IS NOT DECORATION. Without it, tabbing into the rail moves focus onto items that
   are still 66px wide and label-less, so a keyboard user navigates blind. Hover reveals for the
   mouse; focus-within reveals for the keyboard. Both must be here.

   Touch never reaches this state - theme-toggle.js drops Auto-hide from the cycle when the pointer
   cannot hover, since "reveals on hover" means "never reveals" on a tablet. */
.ccvc-autohide .ccvc-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh;
    width: var(--side-w-collapsed); flex-basis: var(--side-w-collapsed);
    z-index: 40;
}
.ccvc-autohide .ccvc-app { padding-left: var(--side-w-collapsed); }
.ccvc-autohide .ccvc-sidebar:hover,
.ccvc-autohide .ccvc-sidebar:focus-within {
    width: var(--side-w);
    box-shadow: 8px 0 28px rgba(0, 0, 0, .30);
}

/* Narrow chrome until revealed. Mirrors the Compact rules above; scoping them to :not(:hover) means
   the reveal needs no rules of its own - the narrow ones simply stop applying and the defaults return. */
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-wm,
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-navgroup,
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-nav span,
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-side-user span:not(.av),
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-poweredby span { display: none; }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-poweredby { align-items: center; padding: 2px 0 4px; }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-poweredby-logo { width: 36px; height: 36px; padding: 3px; object-fit: cover; object-position: 0 center; }

/* ---- which state am I in? -------------------------------------------------
   The hamburger cycles three states and looked identical in all three, so "compact" and "auto-hide
   at rest" were the same picture: a 66px rail and no way to tell whether it was locked that way or
   about to open under the cursor. The tooltip says what the NEXT press does, but only on hover -
   which is no help to someone glancing at the screen wondering why the menu keeps appearing.
   A pip on the button carries the state permanently, in the one place the control already is.
   Hollow ring = auto-hide, the rail is only resting. Solid = compact, it is locked narrow.
   Expanded needs no pip: a full-width rail is its own indicator. */
.ccvc-collapse { position: relative; }
.ccvc-autohide .ccvc-collapse::after,
.ccvc-collapsed .ccvc-collapse::after {
    content: ""; position: absolute; top: 3px; right: 3px;
    width: 7px; height: 7px; border-radius: 50%;
    border: 1.5px solid var(--accent); box-sizing: border-box;
}
.ccvc-collapsed .ccvc-collapse::after { background: var(--accent); }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-nav { justify-content: center; gap: 0; padding: 10px; }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-nav i { width: auto; }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-brand a { justify-content: center; }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-logo { width: 40px; height: 40px; object-fit: cover; object-position: 0 center; padding: 0; background: transparent; box-shadow: none; }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-logo.ccvc-logo-state { width: 40px; max-width: 40px; height: 40px; max-height: 40px; object-fit: contain; }
.ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-side-user { justify-content: center; }

/* ---- main column ---------------------------------------------------------- */
html { scrollbar-gutter: stable; }
.ccvc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---- top bar -------------------------------------------------------------- */
.ccvc-topbar {
    height: var(--topbar-h); background: var(--surf); border-bottom: 1px solid var(--bd);
    display: flex; align-items: center; gap: 12px; padding: 0 18px;
    position: sticky; top: 0; z-index: 25;
}
.ccvc-collapse { width: 38px; height: 38px; border-radius: 9px; border: none; background: transparent; color: var(--muted); font-size: var(--fs-18); cursor: pointer; flex-shrink: 0; }
.ccvc-collapse:hover { background: var(--surf-3); color: var(--head); }

/* claim search — keeps #ClaimSearchForm / #claimNumber intact for site.js */
.ccvc-search { flex: 1; max-width: 420px; }
.ccvc-search .input-group { background: var(--surf-2); border: 1px solid var(--bd); border-radius: 9px; overflow: hidden; }
.ccvc-search .form-control { border: 0 !important; background: transparent !important; box-shadow: none !important; height: 38px; font-size: var(--fs-12-5); color: var(--text) !important; }
.ccvc-search .form-control:focus { box-shadow: none !important; }
.ccvc-search .input-group:focus-within { border-color: var(--primary); box-shadow: var(--focus-ring); }
.ccvc-search .btn { background: transparent !important; border: 0 !important; color: var(--muted) !important; box-shadow: none !important; margin: 0 !important; }
.ccvc-search .btn:hover { color: var(--primary) !important; }

.ccvc-spacer { flex: 1; }

/* right-side action list (override Bootstrap navbar-nav defaults) */
.ccvc-actions { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ccvc-actions > li { position: relative; list-style: none; }
.ccvc-actions > li > a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; color: var(--muted); font-size: var(--fs-17); cursor: pointer; text-decoration: none; position: relative; }
.ccvc-actions > li > a:hover { background: var(--surf-3); color: var(--head); }
.ccvc-actions .notification-dot {
    position: absolute; top: 5px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--accent); color: #16213d; font-size: var(--fs-9); font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--surf);
}
.ccvc-actions .bg-red.notification-dot { background: var(--danger); color: #fff; }

/* Autocomplete (AutoComplete) results dropdown — tabulated multi-column rows (provider =
   PrNo | Name | Addr | CSZ | Updated) collapse to "C..." at the field's own narrow width. Give the
   dropdown room so the columns are legible; capped to the viewport so it never overflows on the right.
   !important because select2 writes an inline min-width (= the field's own width) on the dropdown, and
   an inline style would otherwise beat this rule and let the columns re-compress in narrow contexts. */
.select2-dropdown.ccvc-auto-dropdown { min-width: 520px !important; max-width: 96vw; }

/* Reminder notification dropdown — modern card (overrides legacy AdminBSB feeds widget) */
.ccvc-actions .feeds_widget.dropdown-menu {
    width: 330px; max-width: 92vw; padding: 0; margin: 10px 0 0 0 !important; right: 0; left: auto;
    background: var(--surf); border: 1px solid var(--bd); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.20); overflow: hidden;
}
.ccvc-actions .feeds_widget .ccvc-feed-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; font-size: var(--fs-13); font-weight: 700; color: var(--head);
    background: var(--surf-2); border-bottom: 1px solid var(--bd);
}
.ccvc-actions .feeds_widget .ccvc-feed-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: var(--fs-11); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.ccvc-actions .feeds_widget .ccvc-feed-scroll { max-height: 320px; overflow-y: auto; padding: 0; }
.ccvc-actions .feeds_widget .feeds-list { margin: 0; padding: 0; }
.ccvc-actions .feeds_widget .feeds-list > li { list-style: none; border-bottom: 1px solid var(--bd); }
.ccvc-actions .feeds_widget .feeds-list > li:last-child { border-bottom: 0; }
.ccvc-actions .feeds_widget .feeds-list > li > a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 16px; text-decoration: none; }
.ccvc-actions .feeds_widget .feeds-list > li > a:hover { background: var(--surf-3); }
.ccvc-actions .feeds_widget .feeds-left { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.ccvc-actions .feeds_widget .feeds-left.bg-danger { background: var(--danger) !important; }
.ccvc-actions .feeds_widget .feeds-body { flex: 1 1 auto; min-width: 0; }
.ccvc-actions .feeds_widget .feeds-body h6 { font-size: var(--fs-13); font-weight: 600; color: var(--head) !important; margin: 0 0 2px; display: flex; justify-content: space-between; gap: 8px; }
.ccvc-actions .feeds_widget .feeds-body h6 small { font-weight: 400; color: var(--muted) !important; font-size: var(--fs-11); flex: 0 0 auto; }
.ccvc-actions .feeds_widget .feeds-body > small { color: var(--muted); font-size: var(--fs-12); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccvc-actions .feeds_widget .ccvc-feed-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: var(--fs-12-5); }
.ccvc-actions .feeds_widget .ccvc-feed-foot { border-top: 1px solid var(--bd); }
.ccvc-actions .feeds_widget .ccvc-feed-foot a { display: block; padding: 11px 16px; text-align: center; font-weight: 600; font-size: var(--fs-12-5); color: var(--primary); text-decoration: none; }
.ccvc-actions .feeds_widget .ccvc-feed-foot a:hover { background: var(--surf-3); }
.ccvc-actions .useroverride { display: none; align-items: center; color: var(--ok); font-size: var(--fs-11-5); font-weight: 600; padding: 4px 11px; margin-right: 2px; white-space: nowrap; background: rgba(34,160,90,.13); border-radius: 999px; }
.ccvc-actions .useroverride .h4 { font-size: var(--fs-12-5); color: var(--ok); margin: 0; font-weight: 700; }
#themeToggle i { font-size: var(--fs-16); }

/* Modern inline-SVG toolbar icons (thin-stroke; inherit currentColor so hover + theming just work) */
.ccvc-ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ccvc-ico-sm { width: 15px; height: 15px; stroke-width: 1.8; }
.ccvc-actions .useroverride .ccvc-ico { color: var(--ok); margin-right: 4px; }
.ccvc-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-12-5); margin-left: 4px; }

/* Account dropdown (top-right): My Profile + User/System Administration + theme + sign out.
   Admin entry points live here (the modern standard), not in the daily-workflow left nav. */
.ccvc-acct { position: relative; margin-left: 4px; }
.ccvc-acct > summary { list-style: none; display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 2px 6px 2px 2px; border-radius: 999px; }
.ccvc-acct > summary::-webkit-details-marker { display: none; }
.ccvc-acct > summary::marker { content: ""; }
.ccvc-acct > summary:hover, .ccvc-acct[open] > summary { background: var(--surf-3); }
.ccvc-acct .ccvc-avatar { margin-left: 0; }
/* Name + role beside the avatar (fleet standard: the ACP and YDC pills both say who you are).
   The pill is the one place identity lives now - the sidebar footer gave its user block up for
   the "Powered by" credit. Long names ellipsis rather than push the toolbar icons off-screen, and
   the width follows the type token so a larger text size doesn't clip it. */
.ccvc-acct > summary { padding-right: 8px; }
.ccvc-acct-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; text-align: left; }
.ccvc-acct-who strong { font-size: var(--fs-13); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(13.46 * var(--fs-13)); }
.ccvc-acct-who small { font-size: var(--fs-11); color: var(--muted); white-space: nowrap; }
/* Phones and narrow windows: back to the avatar alone - the search box needs the room more. */
@media (max-width: 767.98px) { .ccvc-acct-who { display: none; } }
.ccvc-acct-caret { font-size: var(--fs-12); color: var(--muted); transition: transform .15s ease; }
.ccvc-acct[open] > summary .ccvc-acct-caret { transform: rotate(180deg); }
.ccvc-acct-menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 246px;
    background: var(--surf); border: 1px solid var(--bd); border-radius: 12px;
    box-shadow: var(--shadow-lg, 0 14px 38px rgba(16, 24, 40, .18)); padding: 6px; z-index: 1300;
}
.ccvc-acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--bd); margin-bottom: 6px; }
.ccvc-avatar.lg { width: 40px; height: 40px; font-size: var(--fs-14); margin: 0; }
.ccvc-acct-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
/* max-width follows the type: 13.46 x 13px = 175px, unchanged at scale 1, but it now grows with
   --ccvc-fs-scale instead of staying a fixed box while the name inside it gets bigger. At 125% the
   fixed 175px clipped this on every screen in the app (it is the account name in the top bar).
   Expressed against the token rather than in em because em would resolve correctly here but NOT on
   .select2-container below, and one technique for one problem beats two. */
.ccvc-acct-id strong { font-size: var(--fs-13); color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--fs-13) * 13.46); }
.ccvc-acct-id small { font-size: var(--fs-11); color: var(--muted); }
.ccvc-acct-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); font-size: var(--fs-13); text-decoration: none; cursor: pointer; }
.ccvc-acct-item > i { width: 18px; text-align: center; font-size: var(--fs-15); color: var(--muted); }
.ccvc-acct-item > span { flex: 1; }
.ccvc-acct-item:hover { background: var(--surf-3); color: var(--head); }
.ccvc-acct-item:hover > i { color: var(--primary); }
.ccvc-acct-item.danger { color: var(--danger); }
.ccvc-acct-item.danger > i { color: var(--danger); }
.ccvc-acct-item.danger:hover { background: rgba(220, 38, 38, .09); color: var(--danger); }
.ccvc-acct-item > svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.ccvc-acct-item:hover > svg { color: var(--primary); }
.ccvc-acct-item.danger > svg { color: var(--danger); }
.ccvc-acct-badge { flex: none; font-size: var(--fs-9); font-weight: 700; letter-spacing: .02em; background: var(--primary); color: #fff; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.ccvc-acct-sep { height: 1px; background: var(--bd); margin: 6px 4px; }

/* Settings-style console header + section tabs (User / System Administration). */
.ccvc-console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 2px 0 14px; }
.ccvc-console-title { font-size: var(--fs-20); font-weight: 700; color: var(--head); margin: 0; display: flex; align-items: center; gap: 10px; }
.ccvc-console-title > i { color: var(--accent); font-size: var(--fs-18); }
.ccvc-console-sub { color: var(--muted); font-size: var(--fs-13); margin: 4px 0 0; }
.ccvc-console-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--bd); margin-bottom: 18px; }
.ccvc-console-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: var(--fs-13-5); font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ccvc-console-tab > i { font-size: var(--fs-14); }
.ccvc-console-tab:hover { color: var(--head); }
.ccvc-console-tab.active { color: var(--primary); border-bottom-color: var(--accent); }

/* Hub card grid (Integration, and other landing hubs). */
.ccvc-hub-section { margin-bottom: 22px; }
.ccvc-hub-h { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; }
.ccvc-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.ccvc-hub-card { display: flex; flex-direction: column; gap: 5px; padding: 16px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; text-decoration: none; color: var(--text); position: relative; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ccvc-hub-card:not(.is-soon):hover { border-color: var(--primary); box-shadow: var(--shadow, 0 2px 10px rgba(16, 24, 40, .08)); transform: translateY(-1px); color: var(--text); text-decoration: none; }
.ccvc-hub-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft, rgba(27, 42, 74, .09)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-18); margin-bottom: 4px; }
.ccvc-hub-t { font-weight: 700; font-size: var(--fs-14); color: var(--head); }
.ccvc-hub-d { font-size: var(--fs-12); color: var(--muted); line-height: 1.4; }
.ccvc-hub-card.is-soon { opacity: .65; cursor: default; }
.ccvc-setup-pill { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; }
.ccvc-hub-badge:not(:empty) { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--primary); color: #fff; font-size: var(--fs-11); font-weight: 700; vertical-align: middle; }
.ccvc-hub-badge { position: absolute; top: 12px; right: 12px; font-size: var(--fs-9); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--surf-3); color: var(--muted); border: 1px solid var(--bd); border-radius: 999px; padding: 2px 8px; }

/* Record pages seat their actions in the crumb bar (claim/offender/advocate/provider): the
   group wrapper is transparent to the bar's flex layout and mirrors the form's ccvc-readmode
   class, so the standard .ccvc-editbtn / .appButton visibility rules drive which buttons show. */
.ccvc-crumb-recact { display: contents; }

/* Manage Users list — identity-first rows, role chips, status pills. */
.ccvc-userrow { display: flex; align-items: center; gap: 10px; }
.ccvc-userav { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft, rgba(27, 42, 74, .09)); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-12); flex: none; text-transform: uppercase; }
.ccvc-userid { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ccvc-userid b { font-weight: 600; color: var(--head); font-size: var(--fs-13); }
.ccvc-userid small { color: var(--muted); font-size: var(--fs-11-5); }
.ccvc-pill { display: inline-block; font-size: var(--fs-11); font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.ccvc-pill.is-ok { background: rgba(22, 163, 74, .12); color: var(--ok, #16a34a); }
.ccvc-pill.is-off { background: var(--surf-3); color: var(--muted); }
.ccvc-pill.is-warn { background: rgba(183, 121, 31, .13); color: #b7791f; }
.ccvc-rolechip { display: inline-block; font-size: var(--fs-11); font-weight: 600; background: var(--surf-3); color: var(--muted); border-radius: 999px; padding: 2px 9px; margin: 1px 2px; white-space: nowrap; }
/* Super-user (Genoa) role chip — gold, the highest tier; only rendered for super users. */
.ccvc-rolechip-super { background: var(--accent); color: var(--primary); font-weight: 800; }
/* Test-account chip — deliberately reads as "not a real role": outlined amber, dashed. */
.ccvc-rolechip-tester { background: transparent; border: 1.5px dashed var(--warn, #b3760f); color: var(--warn, #b3760f); font-weight: 700; padding: 1px 8px; }
.ccvc-muted { color: var(--muted); }

/* System Config Editors — grouped, searchable, consistent cards (no rainbow icons). */
.ccvc-edit-toolbar { display: flex; align-items: center; gap: 8px; background: var(--surf-2); border: 1px solid var(--bd); border-radius: 9px; padding: 7px 12px; max-width: 320px; margin-bottom: 16px; }
.ccvc-edit-toolbar > i { color: var(--muted); font-size: var(--fs-14); }
.ccvc-edit-toolbar input { border: 0; background: transparent; outline: none; font-size: var(--fs-13); color: var(--text); width: 100%; }
.ccvc-edit-section { margin-bottom: 20px; }
.ccvc-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ccvc-edit-card { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--surf); border: 1px solid var(--bd); border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ccvc-edit-card:hover { border-color: var(--primary); box-shadow: var(--shadow, 0 2px 10px rgba(16, 24, 40, .08)); transform: translateY(-1px); color: var(--text); text-decoration: none; }
.ccvc-edit-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--primary-soft, rgba(27, 42, 74, .09)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-15); flex: none; }
.ccvc-edit-t { font-size: var(--fs-13); font-weight: 600; color: var(--head); }

/* My Profile header. */
.ccvc-profile-head { display: flex; align-items: center; gap: 18px; background: var(--surf); border: 1px solid var(--bd); border-radius: var(--radius-lg, 16px); padding: 18px 22px; margin-bottom: 16px; }
.ccvc-profile-dp { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bd); cursor: pointer; flex: none; }
.ccvc-profile-id { min-width: 0; }
.ccvc-profile-name { font-size: var(--fs-20); font-weight: 700; color: var(--head); margin: 0; }
.ccvc-profile-title { color: var(--muted); font-size: var(--fs-13); margin: 2px 0 8px; }
.ccvc-profile-contacts { display: flex; flex-wrap: wrap; gap: 8px; }
.ccvc-profile-contacts a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12-5); color: var(--text); background: var(--surf-2); border: 1px solid var(--bd); border-radius: 999px; padding: 4px 12px; text-decoration: none; }
.ccvc-profile-contacts a:hover { border-color: var(--primary); color: var(--primary); }
.ccvc-profile-contacts a > i { color: var(--accent); }

/* My Profile — sectioned form body */
.ccvc-profile-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ccvc-profile-grid { grid-template-columns: 1fr; } }
.ccvc-psec { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.ccvc-psec-head { display: flex; align-items: center; gap: 9px; padding: 12px 18px; font-size: var(--fs-13-5); font-weight: 700; color: var(--head); background: var(--surf-2); border-bottom: 1px solid var(--bd); }
.ccvc-psec-head > i { color: var(--primary); }
.ccvc-psec-body { padding: 16px 18px; }
.ccvc-psec-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--bd); background: var(--surf-2); }
.ccvc-psec-hint { color: var(--muted); font-size: var(--fs-12-5); margin: 0 0 12px; }
.ccvc-psec-label { display: block; font-size: var(--fs-11-5); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }

/* Global Settings — config-driven rows (label/desc · control · save), grouped in .ccvc-psec cards. */
.ccvc-gs-row { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--bd); }
.ccvc-gs-row:last-child { border-bottom: 0; }
.ccvc-gs-name { display: block; margin: 0; font-size: var(--fs-13); font-weight: 600; color: var(--head); }
.ccvc-gs-desc { margin-top: 4px; font-size: var(--fs-11-5); line-height: 1.45; color: var(--muted); }
.ccvc-gs-field { min-width: 0; }
.ccvc-gs-toggle { margin: 6px 0 0; }
.ccvc-gs-save { padding-top: 1px; }
@media (max-width: 820px) { .ccvc-gs-row { grid-template-columns: 1fr; gap: 8px; } }
.ccvc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 16px; }
.ccvc-form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ccvc-form-grid .form-group { margin-bottom: 12px; }
.ccvc-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 4px 0 18px; }
.ccvc-toggle-row { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--bd); }
.ccvc-toggle-row:last-child { border-bottom: 0; }
.ccvc-toggle-row .switch { flex: 0 0 auto; margin: 0; }
/* An option that a module the agency does not have would govern. Left visible so it stays
   discoverable and can explain itself, but visibly inert and not clickable. */
.ccvc-toggle-row-disabled .switch, .ccvc-toggle-row-disabled .ccvc-toggle-label { opacity: .55; }
.ccvc-toggle-row-disabled .switch { cursor: not-allowed; }
.ccvc-toggle-row-disabled .ccvc-toggle-label b { opacity: 1; }
.ccvc-toggle-label { flex: 1; font-size: var(--fs-13); color: var(--text); line-height: 1.35; }
.ccvc-toggle-label small { display: block; color: var(--muted); font-size: var(--fs-11-5); margin-top: 2px; }
.ccvc-set-list { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 2px 18px; max-width: 900px; box-shadow: var(--shadow-sm); }
/* Two-value choice control for settings rows that pick between labels (e.g. Warrant | Check). */
.ccvc-optseg { display: inline-flex; flex: 0 0 auto; width: 224px; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; background: var(--surf); }
/* Wider track for 3-option toggles (Board/Batch/Docket, Reminders/Tasks/Work Queue) so longer labels fit. */
.ccvc-optseg.ccvc-optseg-3 { width: 320px; }
/* Five options, but every one is a short acronym (SAFE/SAE/FSAE/SANE/SARU), so the 3-option track still
   fits them — reusing that width keeps the toggle column aligned straight down the page. */
.ccvc-optseg.ccvc-optseg-5 { width: 320px; }
.ccvc-optseg.ccvc-optseg-5 label { padding: 6px 4px; }
/* Multi-select membership track (meeting-packet sections): checkboxes instead of radios. Sizes
   to its content on ONE line — the earlier 300px wrap put the 5th pill on a lonely second row,
   which read as broken. Slightly tighter pills keep five sections compact. */
.ccvc-optseg.ccvc-optseg-multi { width: auto; max-width: none; flex-wrap: nowrap; }
.ccvc-optseg.ccvc-optseg-multi label { flex: 0 0 auto; padding: 6px 9px; font-size: var(--fs-12); }
.ccvc-optseg input { position: absolute; opacity: 0; width: 0; height: 0; }
.ccvc-optseg input:disabled + label { opacity: .4; cursor: not-allowed; }
.ccvc-optseg label { flex: 1 1 0; margin: 0; padding: 6px 8px; text-align: center; white-space: nowrap; font-size: var(--fs-12-5); font-weight: 700; color: var(--muted); cursor: pointer; border-right: 1px solid var(--bd); transition: background .12s ease, color .12s ease; }
.ccvc-optseg label:last-of-type { border-right: 0; }
.ccvc-optseg input:checked + label { background: var(--primary); color: #fff; }
.ccvc-optseg input:not(:checked) + label:hover { color: var(--head); }
#claimFilesTable td, #claimFilesTable th { white-space: nowrap; }
.ccvc-tz { margin-top: 14px; margin-bottom: 0; max-width: 320px; }
.ccvc-sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd); }
.ccvc-sig-current { border: 1px solid var(--bd); border-radius: 8px; background: var(--surf-3); padding: 8px; min-height: 56px; display: flex; align-items: center; margin-bottom: 10px; }
.ccvc-sig-current img { max-width: 100%; }
.ccvc-sig-padwrap { border: 1px dashed var(--bd); border-radius: 8px; overflow: hidden; display: inline-block; margin-bottom: 10px; }
.ccvc-sig-actions { display: flex; gap: 8px; }

/* Auth pages (sign-in / forgot / change password) — centered card. */
.ccvc-auth { display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; }
.ccvc-auth-card { width: 100%; max-width: 380px; background: var(--surf); border: 1px solid var(--bd); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg, 0 14px 38px rgba(16, 24, 40, .12)); padding: 32px 30px; text-align: center; }
.ccvc-auth-logo { max-height: 56px; max-width: 200px; margin-bottom: 18px; }
/* State branding: the auth screens co-brand — the state department logo sits a little larger at the top of
   the card, with the state's authority line under it. The CCVC INC vendor credit is the logo card at the
   BOTTOM of the card (.ccvc-auth-powered), not text under the logo. Only rendered when a state brand is active. */
.ccvc-auth-logo-state { max-height: 72px; max-width: 240px; margin-bottom: 10px; border-radius: 3px; }
.ccvc-auth-authority { font-size: var(--fs-12); color: var(--muted); margin: 0 0 18px; letter-spacing: .2px; }
/* Vendor credit at the bottom of the card: "Powered by" + the CCVC INC logo card (fleet standard, matching
   the nav footer and the YDC / ACP login footer). Bordered so the white logo card reads on the white auth card. */
.ccvc-auth-powered { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: var(--fs-11); color: var(--muted); letter-spacing: .2px; }
.ccvc-auth-powered-logo { height: 26px; background: #fff; border: 1px solid var(--bd); border-radius: 6px; padding: 4px 8px; box-shadow: 0 1px 4px rgba(16, 24, 40, .08); display: block; }
.ccvc-auth-title { font-size: var(--fs-22); font-weight: 700; color: var(--head); margin: 0; }
.ccvc-auth-sub { color: var(--muted); font-size: var(--fs-13); margin: 4px 0 22px; }
.ccvc-auth-card .form-group { text-align: left; margin-bottom: 14px; }
.ccvc-auth-card .btn-block { display: block; width: 100%; margin-top: 6px; }
.ccvc-auth-foot { margin-top: 16px; font-size: var(--fs-13); }
.ccvc-auth-foot a { color: var(--muted); text-decoration: none; }
.ccvc-auth-foot a:hover { color: var(--primary); }

/* Payment-lifecycle stepper (claim Payment tab) — horizontal, per-stage counts for the claim. */
.ccvc-paystepper { display: flex; align-items: flex-start; flex-wrap: wrap; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.ccvc-paystepper:empty { display: none; }
.ccvc-pstep { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; min-width: 88px; }
.ccvc-pstep-n { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-14); background: var(--surf-3); color: var(--muted); border: 1px solid var(--bd); }
.ccvc-pstep.has .ccvc-pstep-n { background: var(--primary); color: #fff; border-color: var(--primary); }
.ccvc-pstep-l { font-size: var(--fs-11); color: var(--muted); text-align: center; white-space: nowrap; }
.ccvc-pstep.has .ccvc-pstep-l { color: var(--head); font-weight: 600; }
.ccvc-pstep-bar { flex: 1 1 auto; height: 2px; min-width: 24px; background: var(--bd); margin: 17px 4px 0; }

/* Manage Users metric strip. */
.ccvc-umetrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ccvc-umetric { background: var(--surf-2); border-radius: 10px; padding: 12px 16px; }
.ccvc-umetric-n { display: block; font-size: var(--fs-24); font-weight: 700; color: var(--head); line-height: 1.1; }
.ccvc-umetric-l { display: block; font-size: var(--fs-12); color: var(--muted); margin-top: 2px; }

/* ---- tabbed user editor (Profile & roles | Screen access) ----------------- */
.ccvc-modal-head { display: block; }
.ccvc-modal-tabs { display: flex; gap: 4px; list-style: none; margin: 10px 0 -1px; padding: 0; border-bottom: 1px solid var(--bd); }
.ccvc-modal-tabs > li { margin: 0; }
.ccvc-modal-tabs > li > a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; font-size: var(--fs-13); font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; }
.ccvc-modal-tabs > li > a > i { font-size: var(--fs-13); }
.ccvc-modal-tabs > li > a:hover { color: var(--head); }
.ccvc-modal-tabs > li > a.active { color: var(--primary); border-bottom-color: var(--accent); }
.ccvc-modal-utils { display: inline-flex; gap: 8px; }
#paneProfile, #paneAccess { padding-top: 16px; }
.ccvc-access-note { background: var(--primary-soft); color: var(--head); border-radius: 8px; padding: 14px 16px; font-size: var(--fs-13-5); }
.ccvc-access-note > i { color: var(--primary); margin-right: 6px; }

/* The same band, saying something is outstanding rather than merely explaining. Amber, not red:
   a user with no screen access yet is an unfinished job, not a fault. Laid out as a row so the
   action sits with the sentence instead of below it. */
.ccvc-access-warn { display: flex; align-items: center; gap: 10px; background: rgba(183, 121, 31, .10); border: 1px solid rgba(183, 121, 31, .28); margin-bottom: 14px; }
.ccvc-access-warn > i { color: #b7791f; margin-right: 0; }
.ccvc-access-warn > span { flex: 1; }
[data-theme="dark"] .ccvc-access-warn { background: rgba(214, 158, 46, .12); border-color: rgba(214, 158, 46, .32); }
[data-theme="dark"] .ccvc-access-warn > i { color: #d69e2e; }
/* One compact row (the "setting access for" grey-bar style the user likes): user context on the left,
   Copy-from + Set-all controls on the right — replaces the separate for-bar + toolbar + hint stack. */
.ccvc-access-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--primary-soft); border-radius: 8px; padding: 8px 13px; margin: 0 0 12px; }
.ccvc-access-for { flex: 1 1 0; min-width: 0; color: var(--head); font-size: var(--fs-13); }
.ccvc-access-ctrls { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px 14px; flex-wrap: wrap; }
.ccvc-access-for > i { color: var(--primary); margin-right: 5px; }
.ccvc-access-for strong { color: var(--primary); font-weight: 700; }
.ccvc-access-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 12px; }
.ccvc-access-copy { display: flex; align-items: center; gap: 8px; }
.ccvc-access-copy > label { font-size: var(--fs-12-5); color: var(--muted); white-space: nowrap; }
.ccvc-access-copy > select { width: auto; min-width: 200px; }
.ccvc-access-bulk { display: flex; align-items: center; gap: 8px; margin-left: 16px; padding-left: 18px; border-left: 2px solid var(--muted); align-self: stretch; }
.ccvc-access-bulk > span { font-size: var(--fs-12-5); color: var(--muted); white-space: nowrap; }
/* Set-all buttons use the SAME brand green / amber / slate as the group Full / Read Only / None
   controls (they were Bootstrap outline defaults = a brighter gold that didn't match). */
.ccvc-access-bulk #setAllFull { color: var(--ok); border-color: var(--ok); }
.ccvc-access-bulk #setAllFull:hover { background: var(--ok); color: #fff; }
.ccvc-access-bulk #setAllReadOnly { color: var(--warn); border-color: var(--warn); }
.ccvc-access-bulk #setAllReadOnly:hover { background: var(--warn); color: #16213d; }
.ccvc-access-bulk #setAllNone { color: var(--muted); border-color: var(--muted); }
.ccvc-access-bulk #setAllNone:hover { background: var(--muted); color: #fff; }
/* Screen-access matrix grouped by area into compact multi-column cards (replaces the flat table). */
.ccvc-access-search { flex: 0 0 auto; width: 240px; max-width: 40%; margin: 0; }
/* Multi-column (masonry-ish) packing so short groups flow up into the empty space; break-inside:avoid
   keeps each group card whole. */
.ccvc-access-groups { column-width: 400px; column-gap: 16px; }
.ccvc-acc-group { border: 1px solid var(--bd); border-radius: 10px; background: var(--surf); overflow: hidden; break-inside: avoid; margin: 0 0 10px; }
.ccvc-acc-grouph { margin: 0; font-size: var(--fs-10-5); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 6px 12px 5px; background: var(--surf-2); border-bottom: 1px solid var(--bd); }
.ccvc-acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; }
.ccvc-acc-row + .ccvc-acc-row { border-top: 1px solid var(--surf-2); }
.ccvc-acc-row .ccvc-seg { flex: 0 0 auto; }
.ccvc-acc-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13); color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-access-hint { font-size: var(--fs-12); color: var(--muted); margin: 0; flex-basis: 100%; }
/* Per-screen access — segmented Full / Read Only / None control (in the grouped card matrix). Each
   option is tinted by its level at rest (green / amber / slate) and filled when active. */
.ccvc-access-groups .ccvc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surf); white-space: nowrap; }
.ccvc-access-groups .ccvc-seg-opt {
    appearance: none; border: 0; border-right: 1px solid var(--border); background: transparent;
    padding: 4px 12px; font-size: var(--fs-12); font-weight: 600; line-height: 1.7; color: var(--muted);
    cursor: pointer; transition: background .12s ease, color .12s ease;
}
.ccvc-access-groups .ccvc-seg-opt:last-child { border-right: 0; }
.ccvc-access-groups .ccvc-seg-opt.is-full { color: var(--ok); }
.ccvc-access-groups .ccvc-seg-opt.is-ro   { color: var(--warn); }
.ccvc-access-groups .ccvc-seg-opt.is-none { color: var(--muted); }
.ccvc-access-groups .ccvc-seg-opt:hover:not(.is-active) { background: var(--surf-2); }
.ccvc-access-groups .ccvc-seg-opt.is-active { color: #fff; }
.ccvc-access-groups .ccvc-seg-opt.is-full.is-active { background: var(--ok); }
.ccvc-access-groups .ccvc-seg-opt.is-ro.is-active   { background: var(--warn); color: #16213d; }
.ccvc-access-groups .ccvc-seg-opt.is-none.is-active { background: var(--muted); }
.ccvc-access-groups .ccvc-seg-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ---- content area --------------------------------------------------------- */
/* Bottom padding is deliberately lighter than the top. It sits BELOW #copyright - trailing
   whitespace under the last thing on the page - whereas the top 20px does real work separating the
   content from the topbar. At a symmetric 20 the longest list screens ran 8px past a maxed Chrome
   window on 1920x1080 (906px of viewport with the bookmarks bar) and raised a scrollbar with
   essentially nothing to scroll to. Providers is the worst case because its rows are the tallest in
   the system: each carries a clickable Active/Inactive pill (24.3px) instead of plain 19.5px text,
   ~4.8px x 10 rows. Trimming the pill was the wrong fix - it is a pointer target at the 24px floor,
   and the same class is the primary control on Modules, Options, Security Settings and User Profile. */
.ccvc-content { padding: 20px 22px 12px; }
.ccvc-content .card.ccvc-card { margin: 0 !important; }
.ccvc-card > .header { padding: 14px 18px; }
.ccvc-card > .header .breadcrumb { margin: 0; padding: 0; background: transparent; font-size: var(--fs-12); }

/* Breadcrumb bar: breadcrumb left, page actions (@section CrumbActions) far right. The middle
   column is what the Claims lens toggle used to sit in; it now lives in each page's own header row
   beside that page's other view switch, so this row is back to one line of text. The empty column
   is kept rather than collapsed to two: it is the centre slot anything else that wants the crumb
   row would land in, and an `auto` track with no child measures 0. */
.ccvc-crumbbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 14px; }
.ccvc-crumbbar > nav { grid-column: 1; }
.ccvc-crumbbar > .ccvc-crumb-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* A result total (e.g. Receipts "Total received") centered in a grid's toolbar row so it reads
   as the sum of the current metric-card filter. Injected as .ccvc-dt-total by the page's JS. */
.dt-top { position: relative; }
.ccvc-dt-total { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--fs-13); font-weight: 600; color: var(--muted); white-space: nowrap; pointer-events: none; }
.ccvc-dt-total strong { color: var(--head); font-weight: 700; margin-left: 3px; }
.ccvc-lenstoggle { display: inline-flex; border: 1px solid var(--bd); border-radius: 9px; overflow: hidden; background: var(--surf); }
.ccvc-lens { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; font-size: var(--fs-12-5); font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ccvc-lens + .ccvc-lens { border-left: 1px solid var(--bd); }
.ccvc-lens:hover { color: var(--head); text-decoration: none; }
.ccvc-lens.is-on { background: var(--primary); color: #fff; }
.ccvc-card > .body.mainBody { padding: 16px 18px; }
.ccvc-card .header-dropdown { list-style: none; }
/* Record-header context menu ("kebab") — ONE shared trigger for every record screen
   (Claim, Offender, Advocate). Subtle bordered pill with a soft shadow so it reads as a
   button at rest; fills navy on hover/open. .ccvc-claim-kebab kept as an alias. */
.ccvc-kebab, .ccvc-claim-kebab { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--head); background: var(--surf-2); border: 1px solid var(--bd); font-size: var(--fs-16); line-height: 1; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.06); transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.ccvc-kebab:hover, .ccvc-kebab[aria-expanded="true"], .ccvc-claim-kebab:hover, .ccvc-claim-kebab[aria-expanded="true"] { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 6px rgba(16,24,40,.14); }
.ccvc-kebab::after, .ccvc-claim-kebab::after { display: none; }
.header-dropdown .dropdown-menu { box-shadow: var(--shadow-lg); border: 1px solid var(--bd); }

/* 14px above and below a single 20px line made this band 48px - 28px of padding on the least
   important text on the page, sitting right where vertical space runs out. Measured on Offenders at
   1920x906: card 774 + copyright 48 + the content block's 20/20 padding = 862 against 846 available,
   so the page scrolled 16px for nothing. 6px top and bottom returns exactly that 16px.
   NOT a .ccvc-app min-height bug, which is what it looks like at first: .ccvc-app is min-height:100vh
   with a 60px topbar nested inside, so it reads like double-counting - but the shell only ever
   stretches to that floor, and here the content genuinely exceeded it. Verified before changing:
   .ccvc-main measured 921 against a 906 viewport, i.e. content-driven, not floor-driven. */
#copyright { padding: 6px 22px; }
#copyright p { margin: 0; }

/* ---- responsive: off-canvas sidebar under 992px --------------------------- */
.ccvc-backdrop { display: none; }
@media (max-width: 991.98px) {
    .ccvc-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .ccvc-side-open .ccvc-sidebar { transform: translateX(0); }
    .ccvc-collapsed .ccvc-sidebar { width: var(--side-w); flex-basis: var(--side-w); }
    .ccvc-collapsed .ccvc-wm, .ccvc-collapsed .ccvc-navgroup, .ccvc-collapsed .ccvc-nav span, .ccvc-collapsed .ccvc-side-user span { display: revert; }
    .ccvc-collapsed .ccvc-poweredby span { display: revert; }
    .ccvc-collapsed .ccvc-poweredby { align-items: flex-start; padding: 2px 6px 4px; }
    .ccvc-collapsed .ccvc-poweredby-logo { width: auto; height: 54px; padding: 7px 10px; object-fit: fill; }
    /* Auto-hide surrenders to the off-canvas rail below 992px, exactly as Compact does. The drawer
       already IS a hidden-until-summoned rail, so a hover-reveal on top of it would be two competing
       answers to the same question - and the padding-left footprint would strand a 66px navy stripe
       beside a rail that is meant to be fully off-screen. A desktop window dragged narrow lands here
       too, not just tablets, so this cannot be left to the pointer check in theme-toggle.js. */
    .ccvc-autohide .ccvc-sidebar { width: var(--side-w); flex-basis: var(--side-w); z-index: 30; }
    .ccvc-autohide .ccvc-app { padding-left: 0; }
    .ccvc-autohide .ccvc-sidebar:hover, .ccvc-autohide .ccvc-sidebar:focus-within { width: var(--side-w); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-wm,
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-navgroup,
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-nav span,
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-side-user span { display: revert; }
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-poweredby span { display: revert; }
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-poweredby { align-items: flex-start; padding: 2px 6px 4px; }
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-poweredby-logo { width: auto; height: 54px; padding: 7px 10px; object-fit: fill; }
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-nav { justify-content: flex-start; gap: 12px; padding: 8px 12px; }
    .ccvc-autohide .ccvc-sidebar:not(:hover):not(:focus-within) .ccvc-brand a { justify-content: flex-start; }
    .ccvc-side-open .ccvc-backdrop { display: block; position: fixed; inset: 0; background: rgba(16,22,40,.5); z-index: 29; }
    .ccvc-content { padding: 16px 14px; }
}

/* ---- dashboard (Phase 2a) ------------------------------------------------- */
/* Flatten the generic page card so the dashboard sits on the app background. */
.ccvc-card:has(.ccvc-dash) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ccvc-card:has(.ccvc-dash) > .header { border: 0 !important; padding: 0 0 4px !important; }
.ccvc-card:has(.ccvc-dash) > .body.mainBody { padding: 0 !important; }

.ccvc-dash-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
/* Baseline, so the filter pills line up with the subtitle rather than floating against the H2. */
.ccvc-pw .ccvc-dash-head { align-items: baseline; row-gap: 10px; }
.ccvc-dash-welcome { flex: 1 1 0; min-width: 220px; }
.ccvc-dash-head .ccvc-dash-actions { flex: 0 0 auto; }
.ccvc-dash-headspacer { flex: 1 1 0; }
.ccvc-dash-head h2 { margin: 0; font-size: var(--fs-21); font-weight: 700; color: var(--head); }
.ccvc-dash-sub { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-12-5); }
.ccvc-dash-actions { display: flex; gap: 8px; align-items: center; }

/* My / Agency dashboard scope toggle */
.ccvc-scopetoggle .btn { border: 1px solid var(--bd); background: var(--surf); color: var(--muted); font-weight: 600; box-shadow: none; }
.ccvc-scopetoggle .btn:hover { color: var(--head); background: var(--surf-3); }
.ccvc-scopetoggle .btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .ccvc-scopetoggle .btn.active { background: var(--accentfg); border-color: var(--accentfg); color: #16213d; }
/* Admin-only "view a specific investigator's dashboard" picker, sits beside the My/Agency toggle. */
.ccvc-dash-invpick { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.ccvc-dash-invpick > i { font-size: var(--fs-13); }
.ccvc-dash-invpick select { width: auto; min-width: 200px; height: 31px; font-size: var(--fs-13); }

/* Manage User — full in-pane editor (replaces the old #usersModal). Two tabs (Profile & roles /
   Screen access) get the full width; the card is capped to the viewport with a fixed header + tabs, a
   scrolling body, and a PINNED footer, so the Save bar stays put and nothing runs off the bottom (the
   behaviour the old modal had). */
.ccvc-usereditor { display: flex; flex-direction: column; max-height: calc(100vh - 120px); background: var(--surf); border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.ccvc-usereditor > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ccvc-usereditor-head { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 18px 0; flex-wrap: wrap; }
.ccvc-ue-back { flex: 0 0 auto; }
.ccvc-ue-title { margin: 0; font-size: var(--fs-17); font-weight: 700; color: var(--head); flex: 1 1 auto; }
.ccvc-ue-tabs { flex: 1 0 100%; margin: 10px 0 0; border-bottom: 1px solid var(--bd); }
.ccvc-usereditor-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 6px 18px 14px; }
.ccvc-usereditor-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--bd); background: var(--surf-2); }
/* Subtle Status/Resolution segmented toggle, sized to sit inline right next to the "Claim" label:
   a muted track with a soft "thumb" on the active segment (no heavy fill). */
.ccvc-wf-clabel { display: inline-flex; align-items: center; gap: 10px; }
.ccvc-wftoggle { display: inline-flex; gap: 1px; padding: 2px; background: var(--surf-3); border-radius: 6px; }
.ccvc-wftoggle button { font-family: inherit; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-10-5); font-weight: 600; line-height: 1.5; padding: 1px 9px; border-radius: 4px; cursor: pointer; text-transform: none; letter-spacing: normal; transition: background .12s ease, color .12s ease; }
.ccvc-wftoggle button:hover { color: var(--head); }
.ccvc-wftoggle button.active { background: var(--surf); color: var(--head); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* Reports → Ad-hoc Explorer */
.ccvc-explorer-head { align-items: flex-start; }
.ccvc-explorer-title { margin: 0 0 2px; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-explorer-sub { font-size: var(--fs-12-5); max-width: 740px; line-height: 1.5; }
.ccvc-explorer-wrap { margin-top: 8px; }
.ccvc-explorer-wrap table.dataTable { width: 100% !important; }

/* Report viewer — branded pdf.js viewer (replaces the broken WebReport SVG + the native PDF chrome) */
.ccvc-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ccvc-report-headl { display: flex; align-items: center; gap: 12px; }
.ccvc-report-back { border: 1px solid var(--bd); background: var(--surf); color: var(--head); font-weight: 600; }
.ccvc-report-back:hover { border-color: var(--accent-2); color: var(--head); }
.ccvc-report-title { margin: 0; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-report-paramform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.ccvc-report-paramform #reportParameterContainer { flex: 1 1 100%; }
.ccvc-report-paramform #reportParameterContainer .form-control { min-width: 160px; }

.ccvc-pdfviewer { border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surf); }
.ccvc-pdf-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 12px; background: var(--primary); color: #fff; }
.ccvc-pdf-tgroup { display: flex; align-items: center; gap: 7px; }
.ccvc-pdf-tright { margin-left: auto; }
.ccvc-pdf-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; padding: 5px 10px; font-size: var(--fs-12-5); line-height: 1; cursor: pointer; text-decoration: none; transition: background .12s ease; }
.ccvc-pdf-btn:hover { background: rgba(255,255,255,.24); color: #fff; }
.ccvc-pdf-btn-accent { background: var(--accentfg); color: #16213d; border-color: var(--accentfg); font-weight: 700; }
.ccvc-pdf-btn-accent:hover { background: var(--accentfg); color: #16213d; filter: brightness(1.06); }
.ccvc-pdf-pageinfo, .ccvc-pdf-zoom { font-size: var(--fs-12-5); font-weight: 600; color: #fff; white-space: nowrap; }
.ccvc-pdf-zoom { min-width: 42px; text-align: center; }
.ccvc-pdf-pageinput { width: 46px; text-align: center; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.95); color: #16213d; padding: 3px 4px; font-size: var(--fs-12-5); font-weight: 600; }
.ccvc-pdf-btn.active { background: var(--accentfg); color: #16213d; border-color: var(--accentfg); font-weight: 700; }
.ccvc-pdf-btn.active:hover { background: var(--accentfg); color: #16213d; filter: brightness(1.06); }
.ccvc-pdf-stage { height: calc(100vh - 250px); min-height: 480px; overflow: auto; background: #4b4f56; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ccvc-pdf-row { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }
.ccvc-pdf-page { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.ccvc-pdf-page canvas { display: block; }
.ccvc-pdf-loading, .ccvc-pdf-error { color: #fff; padding: 48px 24px; font-size: var(--fs-14); text-align: center; }

/* Report viewer window chrome (minimal layout — no sidebar/breadcrumb) */
.ccvc-reportwin { display: flex; flex-direction: column; min-height: 100vh; background: var(--app-bg); }
.ccvc-reportwin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.ccvc-reportwin-brand { font-weight: 700; font-size: var(--fs-14); display: flex; align-items: center; gap: 6px; }
.ccvc-reportwin-close { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 6px 16px; font-size: var(--fs-13); font-weight: 600; cursor: pointer; transition: background .12s ease; }
.ccvc-reportwin-close:hover { background: rgba(255,255,255,.28); }
.ccvc-reportwin-body { flex: 1; padding: 16px 20px 22px; }
.ccvc-reportwindow .ccvc-pdf-stage { height: calc(100vh - 196px); }

/* Board Prep workspace */
.ccvc-bp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ccvc-bp-title { margin: 0 0 2px; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-bp-sub { font-size: var(--fs-12-5); max-width: 560px; line-height: 1.5; }
.ccvc-bp-datepick { display: flex; flex-direction: column; gap: 4px; min-width: 230px; }
.ccvc-bp-datelabel { font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ccvc-bp-dateselect { min-width: 230px; }
.ccvc-bp-summary { margin-top: 18px; }
/* The Awaiting-decision card on both Board Prep strips: an ever-so-subtle gold wash + tinted
   border set the still-to-decide card apart from the recorded-outcome tallies, while both strips
   keep all five cards so they never fall out of balance. */
.ccvc-bp-summary .ccvc-metric.is-await { background: linear-gradient(180deg, rgba(212,175,55,.09), rgba(212,175,55,.04)); border-color: rgba(212,175,55,.45); }
.ccvc-bp-hint { margin: 18px 0 6px; padding: 13px 15px; border: 1px dashed var(--bd); border-radius: 12px; background: var(--surf); color: var(--muted); font-size: var(--fs-12-5); font-weight: 600; }
.ccvc-bp-hint .fa { color: var(--accentfg); margin-right: 4px; }
.ccvc-bp-reports { margin-top: 6px; }
.ccvc-bp-group { margin-top: 18px; }
.ccvc-bp-grouptitle { margin: 0 0 10px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ccvc-bp-grouptitle .fa { color: var(--accentfg); margin-right: 5px; }
.ccvc-bp-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ccvc-bp-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 15px; box-shadow: var(--shadow-sm); opacity: .55; transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease; }
.ccvc-bp-card.is-enabled { opacity: 1; }
.ccvc-bp-card.is-enabled:hover { border-color: var(--accent-2); box-shadow: var(--shadow); }
.ccvc-bp-cardbody { min-width: 0; }
.ccvc-bp-cardtitle { font-size: var(--fs-13); font-weight: 700; color: var(--head); }
.ccvc-bp-carddesc { font-size: var(--fs-11-5); color: var(--muted); line-height: 1.4; margin-top: 3px; }
.ccvc-bp-open { white-space: nowrap; flex-shrink: 0; }

/* Claim Determination workspace */
.ccvc-cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ccvc-cd-title { margin: 0 0 2px; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-cd-sub { font-size: var(--fs-12-5); max-width: 620px; line-height: 1.5; }

/* gate-bucket rail (the workbench's stage selector) */
/* Shared workbench stage cards — Adjudication rail (#cdRail) + Payments rail (#pwStages):
   compact one-row card, a tone-coloured icon per gate, filled navy when selected. */
.ccvc-cdrail, .pw-stages { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
.ccvc-wbstage { flex: 1 1 0; min-width: 112px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.ccvc-wbstage:hover { border-color: var(--accent-2); }
.ccvc-wbstage.sel { background: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .ccvc-wbstage.sel { border-color: var(--accentfg); }
.ccvc-wbstage .ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-15); flex: 0 0 auto; }
.ccvc-wbstage.sel .ic { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.ccvc-wbstage .meta { display: flex; flex-direction: column; min-width: 0; }
.ccvc-wbstage .n { font-size: var(--fs-19); font-weight: 800; color: var(--head); line-height: 1.12; font-variant-numeric: tabular-nums; }
.ccvc-wbstage .l { font-size: var(--fs-11); font-weight: 600; color: var(--muted); line-height: 1.22; }
.ccvc-wbstage.sel .n { color: #fff; }
.ccvc-wbstage.sel .l { color: #c7d2e6; }
.ccvc-wbarrow { align-self: center; color: var(--muted); opacity: .55; font-size: var(--fs-14); flex: 0 0 auto; }

/* Outcome group — the terminal states, which are NOT a continuation of the pipeline.
   ⚠ A CHEVRON ASSERTS THAT WORK MOVES THAT WAY. Approved / Denied / Unable to process are mutually
   exclusive endings reached FROM the decision and never from each other, so chaining them with the
   same arrow as the real gates told the user something false — it read as a seven-step conveyor.
   Inside the group the separator is a middot: "or", not "then". Owner's call, 2026-09-27.
   The cards stay ordinary .ccvc-wbstage filters — this changes what the rail CLAIMS, not what it does. */
/* ⚠ THE CHIPS HAVE A HARD FLOOR, NOT JUST A PROPORTIONAL SHARE. flex-grow alone kept them legible
   at the widths tested, but it makes legibility depend on how many pipeline cards happen to be on
   screen - which changes with every workflow switch a state flips. A minimum cannot be argued with:
   three chips at 132px plus gaps is the group's floor, and the pipeline cards yield first because
   their labels are short ("Open", "Paid"). Owner's call after seeing "10, 653 Paid" and "Deni ed"
   wrap on the Payments rail. Below ~1100px the rail scrolls instead, which is a better failure than
   shredding a number. */
/* ⚠ --surf2 DID NOT EXIST. The token is --surf-2, with a hyphen, and the misspelling appeared
   exactly once in this stylesheet - here. So the group rendered with NO FILL, leaving a 1px dashed
   line in the lightest grey in the palette on a near-white page, which is why the owner could barely
   see it. The mockup it came from used a literal colour, so it looked correct there and wrong in the
   application. An undefined custom property fails silently: no warning, no fallback, just nothing.
   Solid rather than dashed, and --bd-strong rather than --bd: a dashed hairline reads as
   "provisional" where this needs to read as "these belong together". Both tokens are theme-aware,
   so dark mode follows without a separate rule. */
.ccvc-wboutcomes { flex: 1 1 0; min-width: 424px; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px 7px; background: var(--surf-2); border: 1px solid var(--bd-strong); border-radius: 12px; }
.ccvc-wbohead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 3px 1px; }
.ccvc-wbohead .ttl { font-size: var(--fs-10, 10px); font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
/* The roll-up (e.g. "Decision · 21,015"). ⚠ IT IS A HEADING, NOT A BUCKET: its claims are the same
   claims as the cards beneath it, so it must never become a .ccvc-wbstage — the rail's cards are
   disjoint filters whose counts partition the caseload, and a fourth card would break that. */
.ccvc-wbohead .roll { font-size: var(--fs-11); color: var(--muted); white-space: nowrap; }
.ccvc-wbohead .roll b { font-size: var(--fs-12, 12px); color: var(--head); font-variant-numeric: tabular-nums; }
.ccvc-wboset { display: flex; gap: 5px; align-items: stretch; }
.ccvc-wboutcomes .ccvc-wbstage { flex: 1 1 0; min-width: 132px; padding: 7px 9px; border-radius: 9px; }
.ccvc-wboutcomes .ccvc-wbstage .ic { width: 24px; height: 24px; font-size: var(--fs-12, 12px); border-radius: 7px; }
.ccvc-wboutcomes .ccvc-wbstage .n { font-size: var(--fs-15); }
.ccvc-wbdot { align-self: center; color: var(--bd); font-size: var(--fs-15); flex: 0 0 auto; line-height: 1; padding: 0 1px; }
/* ⚠ THE OUTCOME GROUP TAKES ITS ROOM FROM THE PIPELINE CARDS, NOT FROM ITS OWN LABELS.
   The group holds three cards where a pipeline slot holds one, so an equal share squeezed
   "Unable to process" onto two lines at 1366px - an ordinary laptop - and four lines at 1024.
   Widening the outcome chips instead would have pushed them onto a second row and made the whole
   rail taller; a pipeline card has a short label ("Open", "Paid") and can give up the width for free.
   ⚠ MEASURED WITH EVERY WORKFLOW STEP ON, which is the case that actually breaks. With four pipeline
   cards an equal share gave each of them 310px for a one-word label while the whole group got 302px:
   "Unable to process" came out over FIVE lines at a 1901px viewport, on a full-size screen. Missed
   first time round because test.wy had QC and Commission review OFF, so the rail under test had only
   two pipeline cards and room to spare. grow:4 puts the pipeline at 204px each and the group at 729px
   (225px a chip), every label single-line. */
.ccvc-cdrail > .ccvc-wbstage, .pw-stages > .ccvc-wbstage { min-width: 96px; }
.ccvc-wboutcomes { flex-grow: 4; }
.ccvc-wbofoot { font-size: var(--fs-10, 10px); color: var(--muted); padding: 2px 3px 0; }

/* Dashboard Workflows panel — the PAYMENT row's outcome group. Reuses the CLAIM row's .ccvc-decbox
   chips so both rows say "these are endings" the same way; stacked because the payment row has
   three chips and less width than the claim row. */
/* Dashboard Workflows panel — the outcome group on BOTH rows. Same bordered treatment as the
   workbench rails (.ccvc-wboutcomes), so the same shape means the same thing on the dashboard as on
   the screen it deep-links into. */
.ccvc-dnode-outcomes { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 176px; }
.ccvc-decbox-stack { display: flex; flex-direction: column; gap: 3px; align-items: stretch; background: var(--surf-2); border: 1px solid var(--bd-strong); border-radius: 10px; padding: 6px 7px 7px; }
.ccvc-decbox-ttl { font-size: var(--fs-10, 10px); font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); padding: 0 2px 1px; }
/* ⚠ A TICK MEANS "PASSED", A NUMBER MEANS "QUEUED HERE NOW" — the one difference between the two
   rows that carries meaning, and the only one left. The claim row used to differ in four ways: a
   30px dot against 50px, the count on its own line rather than beside the label, GREEN arrows, and a
   12px label against 11.5px. None of those encoded anything, and the green arrows actively misled -
   green reads as "approved" everywhere else, competing with the ticks that do mean approval. */
.ccvc-ddot-tick { font-size: var(--fs-19, 19px); }
.ccvc-dlabel-n { color: var(--head); font-weight: 800; }
.ccvc-dlabel-foot { font-size: var(--fs-10, 10px); color: var(--muted); max-width: 190px; line-height: 1.25; }
.wb-blue { color: #2f7fcf; background: rgba(47,127,207,.14); }
.wb-amber { color: #c0860f; background: rgba(192,134,15,.17); }
.wb-purple { color: #6b5fd0; background: rgba(107,95,208,.16); }
.wb-teal { color: #0f9b76; background: rgba(15,155,118,.15); }
.wb-green { color: #5a9e1f; background: rgba(90,158,31,.17); }
.wb-red { color: #d6453f; background: rgba(214,69,63,.14); }
.wb-gray { color: #7b8794; background: rgba(123,135,148,.17); }

/* per-bucket sub-bar (title + on-the-docket filter + the bucket's actions) */
.ccvc-cd-subbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 8px; padding: 9px 13px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-sm); }
.ccvc-cd-bktitle { font-size: var(--fs-14); font-weight: 700; color: var(--head); }
.ccvc-cd-bkcount { font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.ccvc-cd-docket { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.ccvc-cd-docket .fa { color: var(--accentfg); }
.ccvc-cd-docket .ccvc-cd-dateselect { min-width: 180px; }
.ccvc-cd-subbar .ccvc-cd-selbtns { margin-left: auto; }

.ccvc-cd-datepick { display: flex; flex-direction: column; gap: 4px; min-width: 230px; }
.ccvc-cd-datelabel { font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ccvc-cd-dateselect { min-width: 230px; }
.ccvc-cd-summary { margin-top: 18px; }
.ccvc-cd-hint { margin: 18px 0 6px; padding: 13px 15px; border: 1px dashed var(--bd); border-radius: 12px; background: var(--surf); color: var(--muted); font-size: var(--fs-12-5); font-weight: 600; }
.ccvc-cd-hint .fa { color: var(--accentfg); margin-right: 4px; }
.ccvc-cd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 6px; padding: 10px 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-sm); }
.ccvc-cd-flags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccvc-cd-flabel { font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ccvc-chip { background: transparent; border: 1px solid var(--bd); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-12); font-weight: 600; color: var(--head); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.ccvc-chip:hover { border-color: var(--accent-2); }
.ccvc-chip.active { background: var(--accentbg); border-color: var(--accentfg); color: var(--head); }
.ccvc-cd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccvc-cd-selcount { font-size: var(--fs-12); font-weight: 700; color: var(--muted); white-space: nowrap; }
.ccvc-cd-vdiv { width: 1px; align-self: stretch; background: var(--bd); margin: 0 2px; }
.ccvc-cd-sel { border: 1px solid var(--bd); background: var(--surf); color: var(--head); font-weight: 600; }
.ccvc-cd-sel:hover { border-color: var(--accent-2); color: var(--head); }
.ccvc-cd-act { display: inline-flex; align-items: center; border: 1px solid transparent; background: transparent; font-weight: 600; transition: background .12s ease, color .12s ease; }
.ccvc-cd-act:disabled { opacity: .45; cursor: not-allowed; }
.ccvc-cd-act.is-approve { color: var(--success); border-color: var(--success); }
.ccvc-cd-act.is-approve:hover:not(:disabled) { background: var(--success); color: #fff; }
.ccvc-cd-act.is-deny { color: var(--warning); border-color: var(--warning); }
.ccvc-cd-act.is-deny:hover:not(:disabled) { background: var(--warning); color: #16213d; }
.ccvc-cd-act.is-unable { color: var(--danger); border-color: var(--danger); }
.ccvc-cd-act.is-unable:hover:not(:disabled) { background: var(--danger); color: #fff; }
.ccvc-cd-act.is-qc { color: var(--head); border-color: var(--bd); }
.ccvc-cd-act.is-qc:hover:not(:disabled) { background: var(--head); color: var(--surf); }
.ccvc-cd-act.is-cr { color: var(--info); border-color: var(--info); }
.ccvc-cd-act.is-cr:hover:not(:disabled) { background: var(--info); color: #fff; }
.ccvc-cd-act.is-sendback { color: #b5760a; border-color: #d08700; }
.ccvc-cd-act.is-sendback:hover:not(:disabled) { background: #d08700; color: #fff; }
/* Select page / Clear moved into the sub-bar, grouped with the count + actions (secondary/ghost look). */
.ccvc-cd-selbtns { display: inline-flex; align-items: center; gap: 8px; }
.ccvc-cd-selbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bd); background: transparent; color: var(--head); font-weight: 600; font-size: var(--fs-11-5); padding: 5px 11px; }
.ccvc-cd-selbtn:hover:not(:disabled) { background: var(--head); color: var(--surf); }
.ccvc-cd-selbtn:disabled { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .ccvc-cd-selbtn { color: #cdd8ec; }
.ccvc-cd-gridwrap { margin-top: 8px; }

/* gated determination strip on the claim record */
.ccvc-detstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 8px 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 10px; }
.ccvc-detstep { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.ccvc-detstep .fa { font-size: var(--fs-13); }
.ccvc-detstep.is-done { color: var(--head); }
.ccvc-detstep.is-done .fa { color: var(--success); }
.ccvc-detstep em { font-style: normal; font-weight: 500; color: var(--muted); }
.ccvc-detsep { color: var(--muted); opacity: .45; font-size: var(--fs-13); }
.ccvc-gatehint { display: inline-block; margin-top: 4px; font-size: var(--fs-11); font-weight: 600; color: var(--accentfg); }
.ccvc-gatehint .fa { font-size: var(--fs-11); }

/* Payment Reports — grouped report runner */
.ccvc-pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ccvc-pr-title { margin: 0 0 2px; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-pr-sub { font-size: var(--fs-12-5); max-width: 620px; line-height: 1.5; }
.ccvc-pr-search { position: relative; min-width: 240px; }
.ccvc-pr-search .fa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-12-5); }
.ccvc-pr-search input { width: 100%; border: 1px solid var(--bd); border-radius: 9px; background: var(--surf); color: var(--head); font-size: var(--fs-13); padding: 7px 12px 7px 30px; }
.ccvc-pr-search input:focus { outline: none; border-color: var(--accentfg); box-shadow: 0 0 0 1px var(--accentfg) inset; }
.ccvc-pr-reports { margin-top: 8px; }
.ccvc-pr-group { margin-top: 18px; }
.ccvc-pr-grouptitle { margin: 0 0 10px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ccvc-pr-grouptitle .fa { color: var(--accentfg); margin-right: 5px; }
.ccvc-pr-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ccvc-pr-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 15px; box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .12s ease; }
.ccvc-pr-card:hover { border-color: var(--accent-2); box-shadow: var(--shadow); }
.ccvc-pr-cardbody { min-width: 0; }
.ccvc-pr-cardtitle { font-size: var(--fs-13); font-weight: 700; color: var(--head); }
.ccvc-pr-carddesc { font-size: var(--fs-11-5); color: var(--muted); line-height: 1.4; margin-top: 3px; }
.ccvc-pr-open { white-space: nowrap; flex-shrink: 0; }
.ccvc-pr-empty { padding: 28px 4px; color: var(--muted); font-size: var(--fs-13); }

/* Form Letters — list + focused editor */
.ccvc-fl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ccvc-fl-title { margin: 0 0 2px; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-fl-sub { font-size: var(--fs-12-5); max-width: 640px; line-height: 1.5; }
.ccvc-fl-listwrap { margin-top: 8px; }

.ccvc-fl-edithead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ccvc-fl-headl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ccvc-fl-back { border: 1px solid var(--bd); background: var(--surf); color: var(--head); font-weight: 600; }
.ccvc-fl-back:hover { border-color: var(--accent-2); color: var(--head); }
.ccvc-fl-pick { display: flex; align-items: center; gap: 8px; }
.ccvc-fl-pick label { margin: 0; font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ccvc-fl-pick .select2-container { width: 300px !important; }
.ccvc-fl-chip:empty { display: none; }
.ccvc-fl-chip { display: inline-block; font-size: var(--fs-11); font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accentbg); color: var(--head); }
.ccvc-fl-chip-rpt { background: rgba(27,42,74,.08); color: var(--primary); }
.ccvc-fl-show { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-12-5); color: var(--head); white-space: nowrap; }

.ccvc-fl-meta { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 14px 0 10px; }
.ccvc-fl-field { display: flex; flex-direction: column; gap: 4px; }
.ccvc-fl-field label { margin: 0; font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ccvc-fl-field-grow { flex: 1 1 260px; min-width: 200px; }
.ccvc-fl-field-sm { width: 88px; flex: 0 0 auto; }
.ccvc-fl-lang { display: flex; gap: 8px; align-items: center; }
.ccvc-fl-langselect { min-width: 150px; }

.ccvc-fl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.ccvc-fl-toolspacer { flex: 1 1 auto; }
.ccvc-fl-tool { border: 1px solid var(--bd); background: var(--surf); color: var(--head); font-weight: 600; }
.ccvc-fl-tool:hover { border-color: var(--accent-2); color: var(--head); }

.ccvc-fl-editorwrap { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 14px; }
.ccvc-fl-editorwrap #editor, .ccvc-fl-editorwrap .note-editor { max-width: 880px; margin: 0 auto; }
.ccvc-fl-editorwrap .note-editable { min-height: 460px; }

/* ----- Form Letter editor v2 (ACP-style Quill paper sheet + merge-token sidebar) ----- */
.ccvc-fl-edithead2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ccvc-fl-headl2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ccvc-fl-name { margin: 0; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-fl-headr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccvc-fl-headsep { width: 1px; align-self: stretch; background: var(--bd); margin: 3px 4px; }

.ccvc-fl-grid { display: grid; grid-template-columns: minmax(380px, 38%) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ccvc-fl-grid { grid-template-columns: 1fr; } }

.ccvc-fl-tokenwrap { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 12px 14px 14px; max-height: calc(100vh - 180px); overflow: auto; }

/* Language selector + Translate read as one control. */
.ccvc-fl-translategroup { display: inline-flex; align-items: stretch; }
.ccvc-fl-translategroup .ccvc-fl-langselect { min-width: 150px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ccvc-fl-translategroup .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ccvc-fl-translatebtn { border: 1px solid var(--bd); border-left: 0; background: var(--surf); color: var(--head); font-weight: 600; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ccvc-fl-translatebtn:hover { border-color: var(--accent-2); color: var(--head); }
.ccvc-fl-tokenhdr { font-size: var(--fs-13); font-weight: 700; color: var(--head); margin-bottom: 4px; }
.ccvc-fl-tokenhint { font-size: var(--fs-11); color: var(--muted); line-height: 1.45; margin-bottom: 12px; }
.ccvc-fl-tokenhint code { background: var(--accentbg); color: var(--head); padding: 0 4px; border-radius: 4px; }
.ccvc-fl-tgroup { margin-bottom: 12px; }
.ccvc-fl-tgrouph { display: flex; align-items: center; font-size: var(--fs-10-5); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ccvc-fl-tgrouph .fa:not(.ccvc-fl-tcaret) { color: var(--accentfg); margin-right: 4px; }
#flTokenPanel .ccvc-fl-tgrouph { cursor: pointer; user-select: none; background: var(--surf-3); padding: 5px 9px; border-radius: 6px; }
#flTokenPanel .ccvc-fl-tgrouph:hover { color: var(--head); background: var(--accentbg); }
.ccvc-fl-tcaret { margin-left: auto; font-size: var(--fs-9); color: var(--muted); transition: transform .15s ease; }
.ccvc-fl-tgroup.collapsed .ccvc-fl-tcaret { transform: rotate(-90deg); }
.ccvc-fl-tgroup.collapsed .ccvc-fl-tchips { display: none; }
.ccvc-fl-tchips { display: flex; flex-wrap: wrap; gap: 5px; }
.ccvc-fl-token { background: transparent; border: 1px solid var(--bd); border-radius: 999px; padding: 3px 9px; font-size: var(--fs-11-5); font-weight: 600; color: var(--head); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.ccvc-fl-token:hover { border-color: var(--accentfg); background: var(--accentbg); }

.ccvc-fl-bodywrap { min-width: 0; }
.ccvc-fl-bodyhdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ccvc-fl-bodylabel { font-size: var(--fs-13); font-weight: 700; color: var(--head); }
.ccvc-fl-bodytools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ccvc-fl-langselect { min-width: 150px; }

/* Editor shell: grey "desk" that scrolls, sticky Quill toolbar, white paper sheet centered. */
.ccvc-fl-editorshell { height: calc(100vh - 230px); min-height: 480px; border: 1px solid var(--bd); border-radius: 10px; overflow: auto; background: #e8eaed; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--shadow-sm); }
.ccvc-fl-editorshell .ql-toolbar.ql-snow { grid-row: 1; border: 0; border-bottom: 1px solid #ddd; background: #fafafa; position: sticky; top: 0; z-index: 5; }
/* Translation controls relocated onto the toolbar (moveTranslateIntoToolbar): flex the toolbar, push the group right. */
.ccvc-fl-editorshell .ql-toolbar.ql-snow:has(.ccvc-fl-translategroup) { display: flex; flex-wrap: wrap; align-items: center; }
.ccvc-fl-editorshell .ql-toolbar.ql-snow .ccvc-fl-translategroup { margin-left: auto; flex: 0 0 auto; }
.ccvc-fl-editorshell .ql-toolbar.ql-snow .ccvc-fl-langselect { min-width: 120px; }
.ccvc-fl-editorshell .ql-toolbar.ql-snow .ccvc-fl-translatebtn { padding: 2px 10px; flex: 0 0 auto; white-space: nowrap; }
.ccvc-fl-editorshell .ql-container.ql-snow { grid-row: 2; border: 0; background: #e8eaed; font-family: 'Times New Roman', Times, serif; font-size: 12pt; }
/* padding matches the generated PDF's 0.5in page margins (PdfRenderer MarginOptions) so the
   "paper" text width here is the real 7.5in printable width — tables wrap identically to preview. */
.ccvc-fl-editorshell .ql-editor { background: #fff; max-width: 8.5in; margin: 16px auto; box-shadow: 0 1px 4px rgba(0,0,0,.18); padding: 0.5in; min-height: 11in; box-sizing: border-box; color: #1d1b20; line-height: 1.4; }
/* Single-spaced like a Word letter: Enter = a tight new line (press Enter twice for a blank line),
   instead of every paragraph carrying a 0.75em gap (which spaced the address block way too far apart). */
.ccvc-fl-editorshell .ql-editor p { margin: 0; }
/* Table cells: replace Quill Snow's forced black grid with a FAINT DASHED guide (editor-only —
   never in the generated letter). Crucially there's NO !important, so a cell's own inline border
   wins over the guide: real data tables show their real (solid) borders, while borderless layout
   tables get just the faint dashed guide so cell boundaries stay visible while editing. */
.ccvc-fl-editorshell .ql-editor td,
.ccvc-fl-editorshell .ql-editor th { border: 1px dashed #d3d7de; background: none; vertical-align: top; }
/* Tighten table cells: no trailing paragraph margin (matches the PDF). */
.ccvc-fl-editorshell .ql-editor td p:last-child,
.ccvc-fl-editorshell .ql-editor th p:last-child { margin-bottom: 0; }
.ql-font-times { font-family: 'Times New Roman', Times, serif; }
.ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-font-calibri { font-family: Calibri, 'Segoe UI', sans-serif; }
.ql-font-courier { font-family: 'Courier New', Courier, monospace; }
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-size-10pt { font-size: 10pt; } .ql-size-11pt { font-size: 11pt; } .ql-size-12pt { font-size: 12pt; }
.ql-size-14pt { font-size: 14pt; } .ql-size-16pt { font-size: 16pt; } .ql-size-18pt { font-size: 18pt; } .ql-size-24pt { font-size: 24pt; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=""]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=""]::before { content: 'Default'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before { content: 'Times New Roman'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: 'Arial'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="calibri"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="calibri"]::before { content: 'Calibri'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before { content: 'Courier New'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before { content: 'Verdana'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=""]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=""]::before { content: 'Size'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10pt"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10pt"]::before { content: '10pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11pt"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11pt"]::before { content: '11pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12pt"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12pt"]::before { content: '12pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14pt"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14pt"]::before { content: '14pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16pt"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16pt"]::before { content: '16pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18pt"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18pt"]::before { content: '18pt'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24pt"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24pt"]::before { content: '24pt'; }

.ccvc-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1200px) { .ccvc-metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ccvc-metrics { grid-template-columns: repeat(2, 1fr); } }
.ccvc-metric { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 15px; position: relative; box-shadow: var(--shadow-sm); }
.ccvc-mdivider { align-self: center; width: 2px; height: 58%; min-height: 38px; background: var(--muted); opacity: .4; border-radius: 2px; margin: 0 4px; }
#offenderMetrics { grid-template-columns: 1fr 1fr auto 1fr; }
.ccvc-dropzone { border: 2px dashed var(--bd); border-radius: 12px; background: var(--surf-2); padding: 12px 16px 14px; margin: 2px 0 16px; }
.ccvc-dropzone p { margin: 0 0 8px; }
.ccvc-dropzone .files.table { margin: 8px 0 0; }
.ccvc-metric .ic { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-15); background: rgba(27,42,74,.08); color: var(--primary); }
.ccvc-metric .ic.gold { background: var(--accentbg); color: var(--accentfg); }
.ccvc-metric .ic.alert { background: rgba(200, 55, 42, .12); color: var(--danger); }

/* Reminders metric strip — two grouped clusters: lifecycle (left) + due-date status (right). */
.ccvc-rem-metrics { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px 22px; margin-bottom: 18px; }
.ccvc-rem-cluster { display: flex; flex-wrap: wrap; gap: 12px; }
/* Fill the row edge to edge, like the .ccvc-metrics-fit strips on every other list screen (those use
   auto-fit grid columns; this one is flex because of the two clusters + divider, so it has to be done
   with flex-grow). Cards were a fixed 142px, so they sized to content and left the right-hand third of
   the strip empty.
   The grow factors are the CHILD COUNTS - 3 lifecycle cards, 5 due-date cards - so both clusters get
   space in proportion and all eight cards land the same width. Hardcoded because CSS cannot count
   children, and safe because these buckets are fixed by design; ADD A CARD AND THIS NUMBER MOVES. */
.ccvc-rem-metrics > .ccvc-rem-cluster { flex: 3 1 0; }
.ccvc-rem-metrics > .ccvc-rem-cluster-due { flex: 5 1 0; }
.ccvc-rem-cluster .ccvc-metric { width: auto; flex: 1 1 0; }
.ccvc-rem-cluster-due { padding-left: 22px; border-left: 1px solid var(--bd); }
@media (max-width: 1000px) { .ccvc-rem-cluster-due { padding-left: 0; border-left: 0; } }

/* Claim Correspondence tab — history view + form-letter compose view */
.ccvc-corr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ccvc-corr-title { font-size: var(--fs-15); font-weight: 700; color: var(--head); margin: 0; }
.ccvc-corr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ccvc-corr-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ccvc-corr-fltools { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.ccvc-corr-flbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.ccvc-corr-translate { display: flex; align-items: center; gap: 8px; }
.ccvc-corr-translate select { width: auto; min-width: 150px; }

/* Send a Form Letter — controls on the left, editor sized to an 8.5in letter page on the right. */
.ccvc-fl-compose { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.ccvc-fl-controls { flex: 0 0 390px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.ccvc-fl-controls .form-group { margin-bottom: 0; }
.ccvc-fl-controls .ccvc-corr-flags:empty { display: none; }
/* Three labelled groups in the left rail: choose-a-letter selectors · action buttons · translate. */
.ccvc-fl-group { display: flex; flex-direction: column; gap: 9px; padding-top: 13px; border-top: 1px solid var(--bd); }
.ccvc-fl-group:first-of-type { padding-top: 0; border-top: 0; }
.ccvc-fl-group-label { font-size: var(--fs-10-5); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ccvc-fl-actions { display: flex; flex-direction: column; gap: 6px; }
.ccvc-fl-actions .btn, .ccvc-fl-translate .btn { width: 100%; text-align: left; }
/* Secondary buttons read as buttons (subtle filled chip) rather than blank white; Print stays primary. */
.ccvc-fl-actions .btn-outline-secondary, .ccvc-fl-actions .btn-outline-primary, .ccvc-fl-translate .btn-outline-secondary {
    background: var(--surf-2) !important; border-color: var(--bd) !important; color: var(--text) !important;
}
.ccvc-fl-actions .btn-outline-secondary:hover, .ccvc-fl-actions .btn-outline-primary:hover, .ccvc-fl-translate .btn-outline-secondary:hover {
    background: var(--surf-3) !important; border-color: var(--primary) !important; color: var(--head) !important;
}
.ccvc-fl-translate { display: flex; flex-direction: column; gap: 6px; }
/* The select2 controls are initialised while #formLetterPanel is hidden (display:none), which leaves
   their containers zero/auto width and looking like flat, unusable fields. Force them to fill the
   column so they render as proper dropdowns once the panel is shown. */
#formLetterPanel .select2-container { width: 100% !important; }
/* The editor column mimics a portrait letter page (8.5in wide), responsive down on narrow screens. */
.ccvc-fl-page { flex: 1 1 8.5in; max-width: 8.5in; min-width: 0; }
.ccvc-fl-page .note-editor { width: 100%; box-shadow: var(--shadow-sm); }

/* Send-a-Form-Letter merge-token rail (right of the editor): collapsed groups, click to reveal tokens. */
/* token rail lives in the LEFT controls column (the 3-col compose didn't fit the offender's
   rail-narrowed content, so the rail wrapped off-screen below the editor). Fill the column. */
.ccvc-fl-tokens { width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--surf-2); padding: 8px; overflow-y: auto; max-height: 440px; }
.ccvc-fl-tokens:empty { display: none; }
.ccvc-fl-tokens-h { font-size: var(--fs-10); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 4px 6px 8px; }
.ccvc-fl-tgrp { margin-bottom: 4px; }
.ccvc-fl-tgrp-h { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surf); color: var(--head); border-radius: 8px; padding: 7px 10px; font-size: var(--fs-12); font-weight: 600; cursor: pointer; }
.ccvc-fl-tgrp-h:hover { background: var(--surf-3); }
.ccvc-fl-tgrp-h.open { background: var(--accentbg); border-color: var(--accent); color: var(--primary); }
.ccvc-fl-tgrp-h > span { flex: 1; }
.ccvc-fl-tgrp-h > .fa:first-child { color: var(--muted); width: 14px; text-align: center; }
.ccvc-fl-tgrp-h.open > .fa:first-child { color: var(--accentfg); }
.ccvc-fl-tgrp-caret { transition: transform .15s ease; font-size: var(--fs-11); }
.ccvc-fl-tgrp-h.open .ccvc-fl-tgrp-caret { transform: rotate(180deg); }
.ccvc-fl-tgrp-body { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 4px 6px; }
.ccvc-fl-token { border: 1px solid var(--border); background: var(--surf); color: var(--head); border-radius: 14px; padding: 4px 10px; font-size: var(--fs-11-5); cursor: pointer; line-height: 1.2; }
.ccvc-fl-token:hover { background: var(--accentbg); border-color: var(--accent); color: var(--primary); }
.ccvc-fl-tokens--disabled { opacity: .55; }
.ccvc-fl-tokens--disabled .ccvc-fl-token { cursor: not-allowed; }
.ccvc-readmode .tab-content #formLetterPanel .ccvc-fl-tgrp-h,
.ccvc-readmode .tab-content #formLetterPanel .ccvc-fl-token { pointer-events: auto !important; }
@media (max-width: 1200px) { .ccvc-fl-tokens { flex-basis: 100%; max-width: 100%; max-height: 260px; } }

/* The in-page print-preview block lived here — .ccvc-printpreview-actions, .ccvc-print-page,
   .ccvc-print-h1 and .ccvc-print-table. All removed 2026-08-12: zero references in any
   .cs/.cshtml/.js. Reports render through the C#-built HTML -> Chromium pipeline, which carries its
   own styles, so nothing has needed a screen-side print stylesheet since that switch. */
.ccvc-metric .lbl { font-size: var(--fs-11); color: var(--muted); font-weight: 600; }
.ccvc-metric .val { font-size: var(--fs-24); font-weight: 700; color: var(--head); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* List-page metric rows: size cards to the number present instead of a fixed 6-col grid. */
/* The 150px floor follows the type: 11.54 x 13px = 150px, unchanged at scale 1. These columns hold
   uppercase, letter-spaced metric labels ("DEFINITE (TAX ID / NPI)"), so a fixed minimum clipped
   div.lbl by 11px at 125%. Fifth instance of the same pattern, after .ccvc-acct-id strong,
   .ccvc-chstrip .select2-container, .smx-list and --side-w.
   auto-fit means the floor only decides HOW MANY columns fit, so raising it with the type keeps the
   label-to-column relationship constant rather than squeezing more columns in as the text grows. */
.ccvc-metrics-fit { grid-template-columns: repeat(auto-fit, minmax(calc(var(--fs-base) * 11.54), 1fr)); }

/* Clickable metric cards that double as list filters. */
.ccvc-mfilter { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.ccvc-mfilter:hover { border-color: var(--accent-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.ccvc-mfilter.active { border-color: var(--accentfg); box-shadow: 0 0 0 1px var(--accentfg) inset; }
.ccvc-mfilter.active .lbl { color: var(--head); }
.ccvc-mfilter.active .ic { background: var(--accentbg); color: var(--accentfg); }

/* .ccvc-panel* is still the generic panel used across the app. Its former dashboard-only
   companions — .ccvc-dash-grid (+ its 992px query), .ccvc-dash-side, .ccvc-link, .ccvc-count and
   .ccvc-table-wrap — went with the v1 dashboard on 2026-08-12; all were unreferenced. */
.ccvc-panel { background: var(--surf); border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.ccvc-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--bd); }
.ccvc-panel-head h3 { margin: 0; font-size: var(--fs-13-5); font-weight: 700; color: var(--head); }
.ccvc-panel-body { padding: 8px 16px 14px; }

/* .ccvc-dtable removed 2026-08-12 — a THIRD on-screen table treatment (12px header, 10/14 padding)
   with zero references anywhere; every grid in the app is .table.dataTable. It was actively
   misleading: it reads as a live standard when auditing table styles.
   .ccvc-strong went the same day. The note here used to call it alive alongside .ccvc-muted, but
   that was a mis-read of one grep: .ccvc-muted is in 34 files, .ccvc-strong was in none.
   Still alive and interleaved here, so mind the neighbours when editing this run: .ccvc-muted,
   .ccvc-empty, and the .ccvc-dash half of the text-right rule. */
.ccvc-muted { color: var(--muted); }
.ccvc-dash .text-right { text-align: right; }
.ccvc-empty { color: var(--muted); padding: 16px; text-align: center; font-size: var(--fs-12); }

/* ---------------------------------------------------------------------------------------------
   The v1 dashboard lived here and was removed 2026-08-12. It was the 4-up clickable summary panels
   plus the drill-down results list underneath them, and it was replaced wholesale by the workflow
   dashboard immediately below - which shares none of its class names (.ccvc-dmetric, .ccvc-sstage,
   .ccvc-cstep, .ccvc-dnode). Every class in it measured zero references across .cs/.cshtml/.js:

     .ccvc-stat, .ccvc-stat-row, .ccvc-stat.ccvc-clickable (needs BOTH classes; .ccvc-stat is never
     emitted, so these could not match even though .ccvc-clickable itself is alive on the new
     dashboard), .ccvc-dash-summaries + its 1200/640 queries, .ccvc-total-link, .ccvc-proc-avg,
     .ccvc-drill-foot, #drillInfo, .ccvc-drill-nav, .ccvc-drill-tools, .ccvc-drill-search,
     .ccvc-dash-results.

   Taken as one block rather than class by class: the drill list only ever existed to show what a
   summary panel was clicked into, so removing half would have left an orphan that reads as a live
   feature. The .ccvc-dtable rules scoped to this family went the same way earlier; .ccvc-num
   survives because it is used in 7 files and styled elsewhere.
   --------------------------------------------------------------------------------------------- */

/* ---- dashboard: workflow redesign (metrics row + pipelines) ---------------- */
.ccvc-dash-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .ccvc-dash-metrics { grid-template-columns: repeat(2, 1fr); } }
.ccvc-dmetric { display: flex; align-items: center; gap: 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 14px 16px; text-decoration: none; }
a.ccvc-dmetric { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
a.ccvc-dmetric:hover { border-color: var(--accent); background: var(--accentbg); text-decoration: none; }
a.ccvc-dmetric.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ccvc-dmetric.ccvc-clickable { cursor: pointer; transition: background .12s ease, box-shadow .12s ease, transform .12s ease; }
.ccvc-dmetric.ccvc-clickable:hover { background: var(--surf-3); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,24,40,.10); }
.ccvc-dmetric.ccvc-clickable:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.ccvc-dmetric-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--accentbg); color: var(--accentfg); font-size: var(--fs-18); }
.ccvc-dmetric-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ccvc-dmetric-n { font-size: var(--fs-22); font-weight: 800; color: var(--head); }
.ccvc-dmetric-l { font-size: var(--fs-11-5); color: var(--muted); }
.ccvc-dmetric-quiet .ccvc-dmetric-ic { background: var(--surf-3); color: var(--muted); }

.ccvc-dwfpanel { margin-bottom: 16px; }
.ccvc-dhint { font-size: var(--fs-11-5); color: var(--muted); font-weight: 400; }
.ccvc-dpipe-wrap { overflow-x: auto; padding: 18px 16px 16px; }
.ccvc-dpipe { display: flex; align-items: flex-start; min-width: min-content; }
.ccvc-dnode { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; width: 116px; text-align: center; cursor: pointer; }
.ccvc-ddot { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-17); font-weight: 800; border: 2px solid transparent; transition: transform .1s ease; }
.ccvc-dnode:hover .ccvc-ddot { transform: scale(1.06); }
.ccvc-dnode.active .ccvc-ddot { box-shadow: 0 0 0 3px var(--accent); }
.ccvc-dlabel { font-size: var(--fs-11-5); color: var(--muted); line-height: 1.25; white-space: nowrap; }
.ccvc-dlabel-sub { font-size: var(--fs-10); color: var(--muted); opacity: .8; }
.ccvc-dnode.active .ccvc-dlabel { color: var(--head); font-weight: 600; }
.ccvc-dlink { flex: 1 1 auto; height: 3px; background: var(--bd); margin-top: 24px; min-width: 18px; border-radius: 2px; }
.ccvc-dlink-arrow { height: auto; background: none; display: flex; align-items: center; margin-top: 23px; }
.ccvc-dlink-arrow .ln { flex: 1; height: 3px; background: var(--bd); border-radius: 2px; }
.ccvc-dlink-arrow .fa { font-size: var(--fs-12); margin-left: -3px; color: var(--muted); }
.ccvc-ddot-neutral { background: var(--surf-3); color: var(--head); }
.ccvc-ddot-mid { background: #e6f1fb; color: #0c447c; }
.ccvc-ddot-ok { background: #eaf3de; color: #27500a; }
.ccvc-ddot-bad { background: #fcebeb; color: #791f1f; }
[data-theme="dark"] .ccvc-ddot-mid { background: #0c447c; color: #b5d4f4; }
[data-theme="dark"] .ccvc-ddot-ok { background: #27500a; color: #c0dd97; }
[data-theme="dark"] .ccvc-ddot-bad { background: #791f1f; color: #f7c1c1; }
/* Empty stage (0 records) — render the node de-emphasized but present, so the workflow graphic
   always shows its full shape (zeros included) instead of collapsing to "None." */
.ccvc-ddot-zero { background: var(--surf-2); color: var(--muted); border: 2px dashed var(--bd); }
.ccvc-dnode:hover .ccvc-ddot-zero { border-color: var(--accent); }
/* Running total shown in the workflow panel headers (replaces the removed metric cards). */
.ccvc-dwf-total { color: var(--accent); font-weight: 800; }

/* Claim Status Workflow — data-driven horizontal stepper (green circle + count + label per stage). */
.ccvc-cstep-wrap { overflow-x: auto; padding: 22px 18px 18px; }
/* ---------------------------------------------------------------------------------------------
   The claim row's own stepper (.ccvc-cstepper / .ccvc-cstep*) was retired 2026-09-28. It drew the
   Resolution pipeline with a 30px tick dot, the count on its own line and GREEN connector arrows,
   while the payment row directly beneath used a 50px dot with the count inside and grey arrows.
   Four differences, one of which meant anything - so the row now renders with .ccvc-dnode /
   .ccvc-ddot like the payment row and the two read as one panel. The surviving difference is the
   one that carries meaning: a TICK where claims have passed a milestone, a NUMBER where payments
   are queued. The green arrows were the worst of it - green reads as "approved" everywhere else in
   the product, so they competed with the ticks that genuinely do mean approval.

   Removed as a block, per the v1-dashboard note above: half a component left behind reads as a live
   feature. Every class here measured zero references across .cs/.cshtml/.js afterwards.
   ⚠ .ccvc-cstep-wrap is KEPT - still the scroll container on Pages/Index.cshtml and still targeted
   by .ccvc-wfmerged further down. Only its contents changed.
   --------------------------------------------------------------------------------------------- */
.ccvc-cbk { font-size: var(--fs-11); border-radius: 6px; padding: 3px 8px; cursor: pointer; background: var(--surf-2); color: var(--muted); line-height: 1.3; }
.ccvc-cbk b { font-weight: 700; }
.ccvc-cbk-ok { background: #e4f5ec; color: #1c7a4a; }
.ccvc-cbk-bad { background: #fdeceb; color: #b0322a; }
.ccvc-cbk-warn { background: #fbf0dc; color: #8a5a00; }
[data-theme="dark"] .ccvc-cbk-ok { background: #14331f; color: #6ed79b; }
[data-theme="dark"] .ccvc-cbk-bad { background: #3a1a1a; color: #f0a39b; }
[data-theme="dark"] .ccvc-cbk-warn { background: #3a2c12; color: #e7c07a; }
/* Decision-outcomes box: the three OVC dispositions in ONE in-line bubble after the Decision node, laid
   out horizontally and pinned to the circle row so the Workflow panel never grows taller. */
.ccvc-decbox { display: inline-flex; flex-direction: column; gap: 3px; padding: 4px 6px; border: 1px solid var(--bd); border-radius: 11px; background: var(--surf-2); }
.ccvc-decbox .ccvc-cbk { padding: 2px 8px; white-space: nowrap; text-align: left; }

/* Status view grouped by Dashboard Stage — section cards (Intake → … → Closed) with statuses listed inside. */
.ccvc-sstages { display: flex; align-items: stretch; gap: 2px; }
.ccvc-sstage { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--bd); border-radius: 10px; background: var(--surf-2); overflow: hidden; }
.ccvc-sstage-head { padding: 7px 9px; border-bottom: 1px solid var(--bd); display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.ccvc-sstage-head.ccvc-clickable { cursor: pointer; }
.ccvc-sstage-head.ccvc-clickable:hover { background: var(--surf-3); }
.ccvc-sstage-name { font-size: var(--fs-10); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-sstage-tot { font-size: var(--fs-14); font-weight: 800; color: var(--head); }
.ccvc-sstage-body { padding: 8px 9px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ccvc-sst { display: flex; gap: 7px; align-items: flex-start; cursor: pointer; border-radius: 6px; padding: 1px 2px; margin: -1px -2px; }
.ccvc-sst:hover { background: var(--surf-3); }
.ccvc-sst-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 3px; flex: none; }
.ccvc-sst-ok { background: #2e9e4f; }
.ccvc-sst-bad { background: #c0392b; }
.ccvc-sst-neutral { background: #78716c; }
.ccvc-sst-zero { background: transparent; border: 1.5px dashed var(--bd); }
.ccvc-sst-txt { font-size: var(--fs-11); line-height: 1.3; color: var(--muted); }
.ccvc-sst-txt b { color: var(--head); font-weight: 700; }
.ccvc-sstage-empty-msg { font-size: var(--fs-10-5); color: var(--muted); font-style: italic; }
.ccvc-sstage-flow { display: flex; align-items: center; color: var(--muted); flex: 0 0 78px; }
.ccvc-sstage-flow .ln { flex: 1; height: 2px; background: var(--bd); border-radius: 2px; }
.ccvc-sstage-flow .fa { font-size: var(--fs-12); margin-left: -2px; }

/* Merged "Workflows" panel — resolution stepper on top, Claim-Status + Payments pipelines side-by-side. */
.ccvc-wfmerged .ccvc-wf-steplabel { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 10px 18px 0; }
.ccvc-wfmerged .ccvc-cstep-wrap { padding-top: 8px; padding-bottom: 14px; }
.ccvc-wf-steplabel2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ccvc-wf-steplabel-sep { border-top: 1px solid var(--bd); margin-top: 4px; }
.ccvc-wf-steplabel2 .ccvc-wf-coltot { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: var(--fs-11-5); color: var(--muted); }
.ccvc-wf-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bd); }
.ccvc-wf-col { padding: 2px 4px 8px; min-width: 0; }
.ccvc-wf-col + .ccvc-wf-col { border-left: 1px solid var(--bd); }
.ccvc-wf-colhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 0; font-size: var(--fs-12-5); font-weight: 700; color: var(--head); }
.ccvc-wf-colhead .ccvc-wf-coltot { font-size: var(--fs-11-5); font-weight: 400; color: var(--muted); }
.ccvc-wf-col .ccvc-dpipe-wrap { padding-top: 12px; }
.ccvc-wf-col .ccvc-dnode { width: 104px; }
.ccvc-wf-col .ccvc-ddot { width: 44px; height: 44px; font-size: var(--fs-15); }
@media (max-width: 1200px) {
    .ccvc-wf-grid { grid-template-columns: 1fr; }
    .ccvc-wf-col + .ccvc-wf-col { border-left: 0; border-top: 1px solid var(--bd); }
}

.ccvc-dash-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .ccvc-dash-row2 { grid-template-columns: 1fr; } }

/* "Your reminders today" list */
.ccvc-remrow { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--bd); cursor: pointer; }
.ccvc-remrow:last-child { border-bottom: 0; }
.ccvc-remrow:hover { background: var(--surf-3); }
.ccvc-rembadge { flex: 0 0 auto; font-size: var(--fs-11); font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.ccvc-rembadge-bad { background: #fcebeb; color: #791f1f; }
.ccvc-rembadge-warn { background: #faeeda; color: #633806; }
.ccvc-rembadge-soon { background: #e6f1fb; color: #0c447c; }
.ccvc-rembadge-neutral { background: var(--surf-3); color: var(--muted); }
[data-theme="dark"] .ccvc-rembadge-bad { background: #791f1f; color: #f7c1c1; }
[data-theme="dark"] .ccvc-rembadge-warn { background: #633806; color: #fac775; }
[data-theme="dark"] .ccvc-rembadge-soon { background: #0c447c; color: #b5d4f4; }
.ccvc-remdue { flex: 0 0 auto; min-width: 92px; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.ccvc-remtext { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13); color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-remname { color: var(--muted); }
.ccvc-remnotes { color: var(--muted); font-style: italic; }
.ccvc-remnoteicon { flex: 0 0 auto; color: var(--muted); cursor: help; font-size: var(--fs-12); }
.ccvc-remclaim { flex: 0 0 auto; font-size: var(--fs-12); color: var(--muted); }

/* "Your day": overdue/due-today cards (left) beside the reminders list (right) */
.ccvc-dash-day { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
@media (max-width: 900px) { .ccvc-dash-day { grid-template-columns: 1fr; } }
.ccvc-dash-day-cards { display: flex; flex-direction: column; gap: 10px; }
.ccvc-dday { flex: 0 0 auto; border-left: 4px solid var(--bd); }
.ccvc-dash-day-cards .ccvc-dmetric { padding: 9px 14px; }
.ccvc-dash-day-cards .ccvc-dmetric-ic { width: 34px; height: 34px; font-size: var(--fs-15); background: var(--surf-2); color: var(--muted); }
.ccvc-dash-day-cards .ccvc-dmetric-n { font-size: var(--fs-18); }
.ccvc-dday-overdue { border-left: 4px solid #c0392b; }
.ccvc-dday-overdue .ccvc-dmetric-ic { background: #fcebeb; color: #791f1f; }
.ccvc-dday-overdue .ccvc-dmetric-n { color: #a32d2d; }
.ccvc-dday-today { border-left: 4px solid var(--accent); }
.ccvc-dday-today .ccvc-dmetric-ic { background: #faeeda; color: #633806; }
.ccvc-dash-day-list { display: flex; flex-direction: column; }
[data-theme="dark"] .ccvc-dday-overdue .ccvc-dmetric-ic { background: #791f1f; color: #f7c1c1; }
[data-theme="dark"] .ccvc-dday-overdue .ccvc-dmetric-n { color: #f09595; }
[data-theme="dark"] .ccvc-dday-today .ccvc-dmetric-ic { background: #633806; color: #fac775; }
.ccvc-bar { height: 6px; background: var(--surf-3); border-radius: 999px; overflow: hidden; }
.ccvc-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #2e4675); border-radius: 999px; }

/* ---- list pages: saved-view pills + gold CTA (Phase 2b) ------------------- */
.ccvc-cta { background: var(--accent) !important; border-color: var(--accent) !important; color: #16213d !important; font-weight: 700 !important; }
.ccvc-cta:hover, .ccvc-cta:focus { filter: brightness(1.06); color: #16213d !important; box-shadow: var(--shadow-sm); }

.ccvc-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ccvc-listactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Page header row carrying a CENTERED lens toggle: title left, lens centred on the row itself, the
   page's own switches (My queue / Agency) right. Three explicit columns rather than flex, because
   space-between would centre the toggle between its neighbours — which drifts as the title or the
   right-hand controls change width — and the toggle has to land in the same place on every screen
   that shows it. Same shape as .ccvc-crumbbar, where this toggle used to live.
   Declared AFTER .ccvc-listhead and .ccvc-dash-head: it shares their specificity and has to win the
   display property off both. */
.ccvc-headrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 16px; }
.ccvc-headrow > .ccvc-lenstoggle { grid-column: 2; justify-self: center; }
.ccvc-headrow > .ccvc-headend { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Too narrow for three tracks: the lens keeps the top row beside the title and the page's own
   switches drop to a line of their own rather than all three squeezing. */
@media (max-width: 1200px) {
    .ccvc-headrow { grid-template-columns: 1fr auto; }
    .ccvc-headrow > .ccvc-lenstoggle { grid-column: 2; justify-self: end; }
    .ccvc-headrow > .ccvc-headend { grid-column: 1 / -1; }
}

/* inline "view reminders for <employee>" selector on the Reminders list */
.ccvc-remind-as { display: inline-flex; align-items: center; gap: 8px; }
.ccvc-remind-as label { margin: 0; font-size: var(--fs-12); font-weight: 600; color: var(--muted); white-space: nowrap; }
.ccvc-remind-as select { width: auto; min-width: 180px; height: 32px; border-radius: 8px; }
/* Pin the select2 width so the control doesn't shrink to the selected name (e.g. "All" vs a full
   investigator name). Fixed width = consistent size regardless of selection. */
.ccvc-remind-as .select2-container { width: 240px !important; max-width: 100%; }

/* "My reminders" toggle next to the investigator selector */
.ccvc-myremind { white-space: nowrap; }
.ccvc-myremind.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; box-shadow: var(--shadow-sm); }
.ccvc-views { align-items: center; }
.ccvc-views { display: flex; gap: 5px; flex-wrap: wrap; }
.ccvc-views .btnFilter {
    font-size: var(--fs-11-5); padding: 6px 13px !important; border-radius: 999px !important;
    color: var(--muted) !important; background: transparent !important; border: 1px solid transparent !important;
    cursor: pointer; box-shadow: none !important; font-weight: 600; font-style: normal !important; margin: 0 !important;
}
.ccvc-views .btnFilter:hover { background: var(--surf-3) !important; color: var(--head) !important; }
.ccvc-views .btnFilter.font-weight-bold {
    background: var(--surf) !important; border-color: var(--bd) !important; color: var(--primary) !important;
    box-shadow: var(--shadow-sm); font-style: normal !important;
}
[data-theme="dark"] .ccvc-views .btnFilter.font-weight-bold { color: var(--accentfg) !important; }

/* ---- claim workspace (Phase 2c): restyle the existing tabbed claim page ---- */
/* Flatten the generic page card so the claim card is the workspace surface. */
.ccvc-card:has(.ccvc-claimpage) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ccvc-card:has(.ccvc-claimpage) > .header { border: 0 !important; padding: 0 0 6px !important; }
.ccvc-card:has(.ccvc-claimpage) > .body.mainBody { padding: 0 !important; }

/* The claim card itself = the workspace surface (direct child only). */
.ccvc-claimpage > .row > div > .card {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; overflow: hidden;
}
.ccvc-claimpage > .row > div > .card > .header { padding: 14px 18px !important; border-bottom: 1px solid var(--border); }
.ccvc-claimpage > .row > div > .card > .header .row { align-items: center; }
.ccvc-claimpage .header .col-form-label { color: var(--text); }
.ccvc-claimpage .header .text-primary { color: var(--primary) !important; }
/* claim-number badge → navy; status (dcj) badge → gold */
.ccvc-claimpage .header .badge.badge-danger { background: var(--primary) !important; color: #fff !important; }
.ccvc-claimpage .header .badge.badge-warning { background: var(--accentbg) !important; color: var(--accentfg) !important; }

/* Save = gold CTA, sitting above the card. */
.ccvc-claimpage .saveClaim.btn, .ccvc-claimpage .saveOffender.btn, .ccvc-claimpage .saveAdvocate.btn { background: var(--accent) !important; border-color: var(--accent) !important; color: #16213d !important; font-weight: 700 !important; }
.ccvc-claimpage .saveClaim.btn:hover, .ccvc-claimpage .saveOffender.btn:hover, .ccvc-claimpage .saveAdvocate.btn:hover { filter: brightness(1.06); color: #16213d !important; }

/* --- Save Changes is inert until something actually changes ------------------------------------
   The lit accent button is a promise that there is something to save. Before this it looked
   identical whether or not anything had been edited, and clicking it with no changes exited edit
   mode silently - indistinguishable from a successful save. Needs !important to beat the accent
   rule above, which carries its own. pointer-events blocks the click on an <a>, which ignores the
   disabled attribute entirely. */
.ccvc-crumb-recact.ccvc-nodirty .saveClaim.btn {
    background: var(--surf) !important;
    border-color: var(--bd) !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mid-save. The old code called .attr("disabled") with no value - a getter - so nothing was ever
   disabled and a second click could post twice. */
.ccvc-claimpage .saveClaim.ccvc-busy,
.ccvc-crumb-recact .saveClaim.ccvc-busy {
    pointer-events: none;
    opacity: .65;
}


/* Workspace tabs — plain horizontal strips (UnassignedDocuments / ReportManager / Provider top tabs):
   underline-style, gold active accent. Rails (.ccvc-rail-nav) are excluded — they keep the vertical
   styling defined further below. Scoped .nav.nav-tabs2:not(.ccvc-rail-nav) (specificity 0,4,0+) so it
   out-ranks the vendor AdminBSB pill (.nav.nav-tabs2>li>a.active = 0,3,2), which otherwise leaks a
   cyan/violet rounded pill on hover + active. */
.nav.nav-tabs2:not(.ccvc-rail-nav) { border-bottom: 1px solid var(--border); gap: 2px; }
.nav.nav-tabs2:not(.ccvc-rail-nav) .nav-link {
    color: var(--text-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    font-size: var(--fs-12-5); font-weight: 600; padding: 9px 14px; margin: 0; background: transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nav.nav-tabs2:not(.ccvc-rail-nav) .nav-link i { color: var(--text-muted); margin-right: 5px; }
.nav.nav-tabs2:not(.ccvc-rail-nav) .nav-link:hover { color: var(--primary); background: transparent; border-bottom-color: var(--border); }
.nav.nav-tabs2:not(.ccvc-rail-nav) .nav-link:hover i { color: var(--primary); }
.nav.nav-tabs2:not(.ccvc-rail-nav) .nav-link.active {
    color: var(--primary); background: transparent; border-bottom-color: var(--accent); font-weight: 700;
}
.nav.nav-tabs2:not(.ccvc-rail-nav) .nav-link.active i { color: var(--accentfg); }
[data-theme="dark"] .nav.nav-tabs2:not(.ccvc-rail-nav) .nav-link.active { color: var(--accentfg); }

/* ---- claim Overview tab (Phase 2c / C) ------------------------------------ */
.ccvc-ov { padding: 4px 2px; }
.ccvc-ov-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 640px) { .ccvc-ov-tiles { grid-template-columns: 1fr; } }
.ccvc-ovt { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ccvc-ovt small { font-size: var(--fs-11); color: var(--text-muted); font-weight: 600; }
.ccvc-ovt > div { font-size: var(--fs-22); font-weight: 700; color: var(--heading); margin-top: 4px; }
.ccvc-ovt.gold > div { color: var(--accentfg); }
.ccvc-ovt-legacy > div { font-size: var(--fs-16); }
.ccvc-ov-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 760px) { .ccvc-ov-grid { grid-template-columns: 1fr; } }
.ccvc-ovcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ccvc-ovh { font-size: var(--fs-12-5); font-weight: 700; color: var(--heading); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ccvc-ovr { display: flex; justify-content: space-between; gap: 14px; padding: 10px 16px; font-size: var(--fs-12-5); border-bottom: 1px solid var(--surface-3); }
.ccvc-ovr:last-child { border-bottom: 0; }
.ccvc-ovr span { color: var(--text-muted); }
.ccvc-ovr b { color: var(--heading); font-weight: 600; text-align: right; }
.ccvc-ovjumps { padding: 10px; display: grid; gap: 6px; }
.ccvc-ovjump { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: var(--fs-12-5); color: var(--text); text-decoration: none; border: 1px solid var(--border); cursor: pointer; }
.ccvc-ovjump i { color: var(--accentfg); width: 18px; text-align: center; }
.ccvc-ovjump:hover { background: var(--surface-2); border-color: var(--accent); color: var(--primary); text-decoration: none; }

/* ---- claim status pipeline + milestones (Overview) ------------------------ */
.ccvc-pipe { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); flex-wrap: wrap; gap: 8px 0; }

/* Overview milestone pipeline — federal stages, current highlighted, with the local status pill beneath. */
.ccvc-claimpipe { align-items: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 0; }
.ccvc-cpipe-step { flex: 0 0 auto; width: 124px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ccvc-cpipe-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); background: var(--surf-2); color: var(--muted); border: 2px solid var(--bd); }
.ccvc-cpipe-done .ccvc-cpipe-dot { background: #2e9e4f; color: #fff; border-color: #2e9e4f; }
.ccvc-cpipe-current .ccvc-cpipe-dot { background: var(--surface); color: #2e9e4f; border-color: #2e9e4f; box-shadow: 0 0 0 3px rgba(46,158,79,.22); }
.ccvc-cpipe-label { font-size: var(--fs-12); color: var(--muted); line-height: 1.2; }
.ccvc-cpipe-current .ccvc-cpipe-label { color: var(--head); font-weight: 700; }
.ccvc-cpipe-status { font-size: var(--fs-11); font-weight: 600; background: var(--surf-3); color: var(--head); border: 1px solid var(--bd); border-radius: 6px; padding: 2px 8px; margin-top: 1px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-cpipe-arrow { flex: 1 1 auto; min-width: 20px; display: flex; align-items: center; margin-top: 14px; color: var(--bd); }
.ccvc-cpipe-arrow.done { color: #2e9e4f; }
.ccvc-cpipe-arrow .ln { flex: 1; height: 3px; background: currentColor; border-radius: 2px; }
.ccvc-cpipe-arrow .fa { font-size: var(--fs-12); margin-left: -2px; }
/* Slim claim milestone pipeline (matches the payments-tab stepper): thin single row, small dots +
   inline labels. #claimPipeline is JS-rendered into .ccvc-pstep / .ccvc-pdot / .ccvc-pconn. */
#claimPipeline { align-items: center; padding: 8px 16px; }
#claimPipeline .ccvc-pstep { flex-direction: row; gap: 6px; min-width: 0; }
#claimPipeline .ccvc-pdot { width: 20px; height: 20px; font-size: var(--fs-11); }
#claimPipeline .ccvc-pconn { margin: 0 8px; }
.ccvc-pstep { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
.ccvc-pdot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: var(--fs-11); font-weight: 700; color: var(--text-muted); }
.ccvc-pstep.done .ccvc-pdot { background: var(--success); border-color: var(--success); color: #fff; }
.ccvc-pstep.cur .ccvc-pdot { background: var(--accent); border-color: var(--accent); color: #16213d; }
.ccvc-pstep.cur { color: var(--accentfg); font-weight: 700; }
.ccvc-pstep.done { color: var(--heading); }
.ccvc-pconn { flex: 1; min-width: 22px; height: 2px; background: var(--border-strong); margin: 0 10px; }
.ccvc-pconn.done { background: var(--success); }
.ccvc-pstep.denied .ccvc-pdot { background: var(--danger); border-color: var(--danger); color: #fff; }
.ccvc-pstep.denied { color: var(--danger); font-weight: 700; }
.ccvc-pstep.approved .ccvc-pdot { background: var(--success); border-color: var(--success); color: #fff; }
.ccvc-pstep.approved { color: var(--success); font-weight: 700; }

/* ---- command palette (Ctrl/Cmd-K) ---------------------------------------- */
.ccvc-kbd-launch { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--muted); background: var(--surf-2); border: 1px solid var(--bd); border-radius: 8px; padding: 7px 11px; cursor: pointer; white-space: nowrap; }
.ccvc-kbd-launch:hover { border-color: var(--bd-strong); color: var(--head); }
.ccvc-kbd-launch kbd { font-size: var(--fs-10); border: 1px solid var(--bd); border-radius: 5px; padding: 1px 5px; background: var(--surf); color: var(--muted); font-family: inherit; }

.ccvc-pal-overlay { position: fixed; inset: 0; background: rgba(16,22,40,.5); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; z-index: 1000; }
.ccvc-pal-overlay.show { display: flex; }
.ccvc-pal { width: 580px; max-width: 92vw; margin-top: 11vh; background: var(--surf); border: 1px solid var(--bd); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ccvc-pal-in { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--bd); }
.ccvc-pal-in i { font-size: var(--fs-17); color: var(--muted); }
.ccvc-pal-in input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--fs-15); color: var(--text); font-family: inherit; }
.ccvc-pal-esc { font-size: var(--fs-10); border: 1px solid var(--bd); border-radius: 5px; padding: 2px 7px; color: var(--muted); }
.ccvc-pal-results { max-height: 340px; overflow: auto; padding: 8px; }
.ccvc-pal-res { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; cursor: pointer; font-size: var(--fs-13); color: var(--text); }
.ccvc-pal-res i { font-size: var(--fs-16); color: var(--primary); width: 20px; text-align: center; }
[data-theme="dark"] .ccvc-pal-res i { color: var(--accentfg); }
.ccvc-pal-res.on, .ccvc-pal-res:hover { background: var(--surf-3); }
.ccvc-pal-lbl { display: flex; flex-direction: column; }
.ccvc-pal-lbl small { color: var(--muted); font-size: var(--fs-11); }
.ccvc-pal-empty { padding: 18px; text-align: center; color: var(--muted); font-size: var(--fs-13); }
.ccvc-pal-foot { padding: 9px 16px; border-top: 1px solid var(--bd); font-size: var(--fs-11); color: var(--muted); }

.ccvc-mile { padding: 6px 4px 2px; }
.ccvc-mrow { position: relative; padding-left: 16px; padding-bottom: 11px; font-size: var(--fs-12); }
.ccvc-mrow:before { content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ccvc-mrow:after { content: ""; position: absolute; left: 3px; top: 11px; bottom: 0; width: 1px; background: var(--border); }
.ccvc-mrow:last-child:after { display: none; }
.ccvc-mrow b { color: var(--heading); font-weight: 600; display: block; }
.ccvc-mrow em { color: var(--text-muted); font-style: normal; font-size: var(--fs-11); }
.ccvc-mile-empty { color: var(--text-muted); font-size: var(--fs-12); padding: 6px 0; }

/* ---- claim section rail (vertical, grouped) — replaces the 11 horizontal tabs ---- */
.ccvc-claim-ws { display: flex; gap: 0; align-items: stretch; }
.ccvc-claim-rail { width: 214px; flex-shrink: 0; border-right: 1px solid var(--border); padding-right: 10px; }
.ccvc-claim-main { flex: 1; min-width: 0; padding-left: 18px; }
@media (max-width: 920px) { .ccvc-claim-ws { flex-direction: column; } .ccvc-claim-rail { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 8px; } .ccvc-claim-main { padding-left: 0; padding-top: 12px; } }

.ccvc-rail-nav { flex-direction: column !important; border: 0 !important; }
.ccvc-rail-nav .nav-item { width: 100%; }

/* ---- flex-body rail (Offenders/Advocates: no div restructure, classes only) ---- */
.ccvc-railbody { display: flex; align-items: stretch; gap: 0; }
.ccvc-railbody > .ccvc-rail-col { margin: 0; width: 224px; flex-shrink: 0; border-right: 1px solid var(--border); }
.ccvc-railbody > .ccvc-rail-col > [class*="col-"] { padding: 4px 8px 4px 0; }
.ccvc-railbody > .ccvc-main-col { margin: 0; flex: 1; min-width: 0; }
.ccvc-railbody > .ccvc-main-col > [class*="col-"] { padding-left: 18px; }
@media (max-width: 920px) {
    .ccvc-railbody { flex-direction: column; }
    .ccvc-railbody > .ccvc-rail-col { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
    .ccvc-railbody > .ccvc-rail-col > [class*="col-"] { padding: 0 0 8px; }
    .ccvc-railbody > .ccvc-main-col > [class*="col-"] { padding-left: 0; padding-top: 12px; }
}
.ccvc-rail-grp { list-style: none; font-size: var(--fs-9-5); letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding: 13px 12px 4px; }
.ccvc-claimpage .ccvc-rail-nav .nav-link {
    display: flex; align-items: center; gap: 10px; text-align: left; justify-content: flex-start;
    border: 0 !important; border-left: 2px solid transparent !important; border-radius: 0 8px 8px 0 !important;
    padding: 8px 12px; color: var(--text); font-size: var(--fs-12-5); font-weight: 500;
}
.ccvc-claimpage .ccvc-rail-nav .nav-link i { color: var(--text-muted); width: 17px; text-align: center; font-size: var(--fs-14); }
.ccvc-claimpage .ccvc-rail-nav .nav-link:hover { background: var(--surface-2); color: var(--primary); }
.ccvc-claimpage .ccvc-rail-nav .nav-link.active {
    background: var(--accentbg) !important; color: var(--primary) !important; font-weight: 700;
    border-left-color: var(--accent) !important; border-bottom: 0 !important;
}
.ccvc-claimpage .ccvc-rail-nav .nav-link.active i { color: var(--accentfg); }
[data-theme="dark"] .ccvc-claimpage .ccvc-rail-nav .nav-link.active { color: var(--accentfg) !important; }

/* ---- claim read-mode (View by default; "Edit claim" reveals the form) ------ */
.ccvc-editbtn { display: none; background: var(--accent) !important; border-color: var(--accent) !important; color: #16213d !important; font-weight: 700 !important; }
.ccvc-readmode .ccvc-editbtn { display: inline-flex !important; align-items: center; }
.ccvc-editbtn:hover { filter: brightness(1.06); color: #16213d !important; }
.ccvc-readmode .appButton { display: none !important; }

/* Flatten the claim's main data fields into a readable record. Scoped to the tab
   content, so modals, action buttons and DataTables controls stay interactive.
   Values sit on a thin baseline so they read distinctly from their (muted) labels. */
.ccvc-readmode .tab-content label,
.ccvc-readmode .tab-content .col-form-label {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: var(--fs-11) !important;
    margin-bottom: 1px !important;
}
/* Read values render as soft filled CHIPS (user pick over the earlier underline style): the
   grey pill separates DATA from labels at a glance, an empty chip is visibly an empty slot,
   and edit mode's white bordered boxes keep the read/edit distinction obvious. */
.ccvc-readmode .tab-content input:not([type=button]):not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]),
.ccvc-readmode .tab-content select,
.ccvc-readmode .tab-content textarea {
    border: 0 !important;
    border-radius: 7px !important;
    background: var(--surf-2) !important;
    box-shadow: none !important;
    pointer-events: none;
    padding: 5px 9px !important;
    min-height: 30px;
    color: var(--heading) !important;
    font-weight: 600;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    resize: none;
}
.ccvc-readmode .tab-content select { background-image: none !important; }
.ccvc-readmode .tab-content input[type=checkbox],
.ccvc-readmode .tab-content input[type=radio] { pointer-events: none; }
/* fancy-checkbox hides its input — the LABEL forwards clicks to it, so freezing only the
   input leaves the control toggleable in read mode. Freeze the whole label. View controls
   that don't carry form data (e.g. the Files tab's correspondence toggle) opt out with
   .ccvc-viewctl and stay interactive. */
.ccvc-readmode .tab-content .fancy-checkbox,
.ccvc-readmode .tab-content .fancy-radio { pointer-events: none; }
.ccvc-readmode .tab-content .fancy-checkbox.ccvc-viewctl { pointer-events: auto; }
/* select pickers opt out the same way — a selector that only changes what is DISPLAYED
   (e.g. the offender Payment Plans / Restitution "for claim" pickers) must stay usable
   without Edit; it reads data, it doesn't write it. */
.ccvc-readmode .tab-content select.ccvc-viewctl {
    pointer-events: auto;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: var(--input-bg) !important;
    padding: 4px 8px !important;
    -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
}
.ccvc-readmode .tab-content select.ccvc-viewctl { background-image: revert !important; }
/* select2 reads as a filled chip too */
.ccvc-readmode .tab-content .select2-container { pointer-events: none; }
.ccvc-readmode .tab-content .select2-selection { border: 0 !important; border-radius: 7px !important; background: var(--surf-2) !important; }
.ccvc-readmode .tab-content .select2-selection__arrow { display: none !important; }
/* …while a live view-picker keeps the INPUT look (border + input background) so it still reads
   as a control, clearly distinct from the grey data chips around it. */
.ccvc-readmode .tab-content select.ccvc-viewctl + .select2-container { pointer-events: auto; }
.ccvc-readmode .tab-content select.ccvc-viewctl + .select2-container .select2-selection { border: 1px solid var(--border) !important; border-radius: 6px !important; background: var(--input-bg) !important; }
.ccvc-readmode .tab-content select.ccvc-viewctl + .select2-container .select2-selection__arrow { display: block !important; }

/* ---- FLAT read-style variant (System Administration → Options → "Record read style") ----------
   No chips: tiny caps labels + larger darker values, the minimal-chrome convention. Chips stay
   the default; _Layout stamps body.ccvc-readstyle-flat from the cached GlobalSetting. The
   DataTables search/length controls, the Send-a-Form-Letter panel, and .ccvc-viewctl pickers
   keep their INPUT look in both styles (re-asserted below because the flat value rules
   otherwise out-rank them by source order). */
.ccvc-readstyle-flat .ccvc-readmode .tab-content label,
.ccvc-readstyle-flat .ccvc-readmode .tab-content .col-form-label {
    color: var(--muted) !important; font-size: var(--fs-10) !important; text-transform: uppercase; letter-spacing: .05em;
}
.ccvc-readstyle-flat .ccvc-readmode .tab-content input:not([type=button]):not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]),
.ccvc-readstyle-flat .ccvc-readmode .tab-content select:not(.ccvc-viewctl),
.ccvc-readstyle-flat .ccvc-readmode .tab-content textarea {
    background: transparent !important; border-radius: 0 !important; padding: 3px 0 7px !important; font-size: var(--fs-13-5);
}
.ccvc-readstyle-flat .ccvc-readmode .tab-content .select2-selection { background: transparent !important; border-radius: 0 !important; }
.ccvc-readstyle-flat .ccvc-roval { background: transparent; border-radius: 0; padding: 3px 0 7px; font-size: var(--fs-13-5); }
/* re-asserts: these stay usable INPUTS whichever read style is on */
.ccvc-readstyle-flat .ccvc-readmode .tab-content .dataTables_wrapper input,
.ccvc-readstyle-flat .ccvc-readmode .tab-content .dataTables_wrapper select {
    background: var(--input-bg) !important; border: 1px solid var(--border) !important; border-radius: 6px !important;
    padding: 5px 9px 5px 11px !important; font-size: inherit;
}
.ccvc-readstyle-flat .ccvc-readmode .tab-content #formLetterPanel input:not([type=hidden]),
.ccvc-readstyle-flat .ccvc-readmode .tab-content #formLetterPanel select,
.ccvc-readstyle-flat .ccvc-readmode .tab-content #formLetterPanel textarea {
    background: var(--input-bg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
    padding: 5px 9px !important; font-size: inherit;
}
.ccvc-readstyle-flat .ccvc-readmode .tab-content #formLetterPanel .select2-selection { background: var(--input-bg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; }
.ccvc-readstyle-flat .ccvc-readmode .tab-content select.ccvc-viewctl + .select2-container .select2-selection { background: var(--input-bg) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; }
/* …but keep DataTables search/length controls usable while reading */
.ccvc-readmode .tab-content .dataTables_wrapper input,
.ccvc-readmode .tab-content .dataTables_wrapper select {
    border: 1px solid var(--border) !important; background: var(--input-bg) !important;
    pointer-events: auto; padding-left: 11px !important; -webkit-appearance: auto; appearance: auto;
    color: var(--text) !important; font-weight: 400;
}
/* Send-a-Form-Letter is correspondence, not claim-data editing — its controls stay fully usable
   even while the claim is in read mode (the rules above otherwise flatten + disable them). */
.ccvc-readmode .tab-content #formLetterPanel input:not([type=hidden]),
.ccvc-readmode .tab-content #formLetterPanel select,
.ccvc-readmode .tab-content #formLetterPanel textarea {
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
    background: var(--input-bg) !important; pointer-events: auto !important;
    -webkit-appearance: auto; appearance: auto; color: var(--text) !important; font-weight: 400;
}
.ccvc-readmode .tab-content #formLetterPanel .select2-container { pointer-events: auto !important; }
.ccvc-readmode .tab-content #formLetterPanel .select2-selection {
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; background: var(--input-bg) !important;
}
.ccvc-readmode .tab-content #formLetterPanel .select2-selection__arrow { display: block !important; }
/* The Quill editor + its toolbar (incl. the Insert Fields dropdown) stay fully usable in read mode. */
.ccvc-readmode .tab-content #formLetterPanel .ql-editor,
.ccvc-readmode .tab-content #formLetterPanel .ql-toolbar,
.ccvc-readmode .tab-content #formLetterPanel .ql-toolbar button,
.ccvc-readmode .tab-content #formLetterPanel .ql-toolbar .ql-picker,
.ccvc-readmode .tab-content #formLetterPanel .ccvc-insertfields { pointer-events: auto !important; }
.ccvc-readmode .tab-content #formLetterPanel .ccvc-insertfields {
    -webkit-appearance: auto !important; appearance: auto !important; background-image: none;
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
    background: var(--input-bg) !important; color: var(--text) !important; min-height: 0 !important; padding: 1px 4px !important;
}
.ccvc-readmode .tab-content #formLetterPanel .ql-editor { color: #1d1b20 !important; }

/* Insert Fields dropdown that we graft into the Quill toolbar. Make the toolbar a flex row ONLY when
   our dropdown is present, tighten Quill's roomy 15px inter-group spacing to free horizontal room, and
   push the dropdown to the far right (margin-left:auto) so it rides the same row as the other tools
   instead of wrapping to a second row. Scoped via :has() so no other Quill toolbar is affected. */
.ql-toolbar.ql-snow:has(.ccvc-insertfields-group) { display: flex; flex-wrap: wrap; align-items: center; }
.ql-toolbar.ql-snow:has(.ccvc-insertfields-group) .ql-formats { margin-right: 7px; }
.ccvc-insertfields-group { display: inline-flex !important; align-items: center; margin-left: auto !important; margin-right: 0 !important; }
.ccvc-insertfields {
    height: 24px; max-width: 150px; border: 1px solid #ccc; border-radius: 4px; background: #fff;
    font-size: var(--fs-12); color: #16213d; padding: 0 4px; cursor: pointer;
}

/* Full-screen host for the shared branded Report Viewer. The form-letter Print, Correspondence
   "View", and every list's Print button open here — the same in-place viewer as the Reports module
   (instead of a browser popup or a new tab). */
.ccvc-pdfviewer-overlay {
    position: fixed; inset: 0; z-index: 1080; display: none; flex-direction: column;
    background: var(--surface, #fff); padding: 14px 18px 18px;
}
/* Blocking dialogs (ccvcConfirm/ccvcPrompt/ccvcAlert) must sit ABOVE the in-place PDF
   viewer overlay (z-index 1080) so a Split prompt — or any dialog — opened from the
   viewer isn't hidden behind it. SweetAlert's default container z-index is 1060. */
.swal2-container { z-index: 1090 !important; }
.ccvc-pdfviewer-overlay-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex: 0 0 auto;
}
.ccvc-pdfviewer-overlay .ccvc-pdfviewer { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ccvc-pdfviewer-overlay .ccvc-pdf-stage { flex: 1 1 auto; height: auto !important; min-height: 0 !important; }
body.ccvc-pdfviewer-open { overflow: hidden; }

/* ---- payments workbench (redesign): stage queues + grid + record drawer ----- */
.ccvc-card:has(.ccvc-pw) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ccvc-card:has(.ccvc-pw) > .header { border: 0 !important; padding: 0 0 4px !important; }
.ccvc-card:has(.ccvc-pw) > .body.mainBody { padding: 0 !important; }

/* Grey-canvas page framework — generalizes the .ccvc-dash / .ccvc-pw / .ccvc-claimpage dissolve above.
   A page whose root carries .ccvc-page sits directly on the grey app canvas (the wrapping white
   .ccvc-card dissolves) and supplies its own floating white cards: .ccvc-listcard wraps the grid, a
   .ccvc-dash-head block carries the on-canvas title + description. Pilot screen: Reminders. */
.ccvc-card:has(.ccvc-page) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ccvc-card:has(.ccvc-page) > .header { border: 0 !important; padding: 0 0 4px !important; }
.ccvc-card:has(.ccvc-page) > .body.mainBody { padding: 0 !important; }
/* Grid card: the outer shell owns the border/radius/shadow; the DataTables wrapper inside opts out of its
   own "subtle card" (see the never-double-card list below) so there's a single clean border, not two.
   Only a small top pad here — the wrapper supplies the side/bottom inset (keeps the Reminders overlay aligned). */
.ccvc-listcard { background: var(--surf); border: 1px solid var(--bd); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 6px 0 0; overflow: hidden; }

/* Payment workbench stage cards share the .pw-stages / .ccvc-wbstage rules defined with the Adjudication rail above. */

.pw-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
/* Payment action bar — same standalone rounded/bordered/shadowed chrome as the
   Adjudication sub-bar (.ccvc-cd-subbar), pulled out of the grid card so the two
   workbenches read the same. */
.pw-bar { display: flex; align-items: center; gap: 9px 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 9px 13px; margin: 14px 0 8px; flex-wrap: wrap; }
/* Typography + buttons match the Adjudication sub-bar (.ccvc-cd-bktitle / .ccvc-cd-act):
   same title/label sizing, and outline (not filled) action buttons that fill on hover. */
.pw-bar .seln { font-size: var(--fs-14); font-weight: 700; color: var(--head); }
.pw-bar .stagelbl { font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.pw-bar .sp { flex: 1; }
.pw-btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12-5); padding: 6px 14px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; font-weight: 600; white-space: nowrap; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.pw-btn.primary { color: var(--primary); border-color: var(--primary); }
.pw-btn.primary:hover:not(:disabled) { background: var(--primary); color: #fff; }
.pw-btn.ghost { color: var(--head); border-color: var(--bd); }
.pw-btn.ghost:hover:not(:disabled) { background: var(--head); color: var(--surf); }
[data-theme="dark"] .pw-btn.ghost { color: #cdd8ec; }
.pw-btn.danger { color: var(--danger); border-color: var(--danger); }
.pw-btn.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.pw-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Select page / Clear selection helpers in the action bar — slightly smaller than the workflow actions. */
.pw-btn.pw-selbtn { font-size: var(--fs-11-5); padding: 5px 11px; }

.pw-tools { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.pw-tools .sp { flex: 1; }
.pw-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; background: var(--surface); color: var(--text-muted); font-size: var(--fs-12); min-width: 220px; }
.pw-search input { border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; width: 100%; }
.pw-pager { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); color: var(--text-muted); }
.pw-pgbtn { font-size: var(--fs-12); padding: 5px 11px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--primary); cursor: pointer; }
.pw-pgbtn:disabled { opacity: .4; cursor: not-allowed; }

.pw-gridwrap { overflow-x: auto; }
table.pw-grid { width: 100%; border-collapse: collapse; font-size: var(--fs-12-5); }
.pw-grid th { text-align: left; color: var(--text-muted); font-size: var(--fs-12); letter-spacing: normal; text-transform: none; font-weight: 600; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.pw-grid td { padding: 10px 14px; border-bottom: 1px solid var(--surface-3); color: var(--text); }
.pw-grid tbody tr { cursor: pointer; }
.pw-grid tbody tr:hover td { background: var(--surface-2); }
.pw-grid tr.sel td { background: var(--accentbg); }
.pw-grid .cb { width: 34px; }
.pw-grid .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--heading); white-space: nowrap; }
.pw-cn { font-weight: 700; color: var(--primary); white-space: nowrap; }
[data-theme="dark"] .pw-cn { color: #9fc0ff; }
.pw-muted { color: var(--text-muted); }
.pw-type { display: inline-block; font-size: var(--fs-10-5); padding: 1px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); }
.pw-emer { display: inline-block; font-size: var(--fs-9); font-weight: 700; letter-spacing: .4px; padding: 1px 6px; border-radius: 4px; background: rgba(220,38,38,.12); color: var(--danger); vertical-align: middle; }
.pw-lpill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-10-5); font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pw-lpill.sent { background: rgba(22,163,74,.13); color: var(--success); }
.pw-lpill.await { background: rgba(217,119,6,.14); color: var(--warning); }
.pw-empty { text-align: center; color: var(--text-muted); padding: 26px; font-size: var(--fs-12-5); }
/* payment letter runs list (view / re-print / undo) */
.pw-runs { display: flex; flex-direction: column; margin-top: 6px; max-height: 52vh; overflow: auto; }
.pw-run { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--bd); flex-wrap: wrap; }
.pw-run:first-child { border-top: 0; }
.pw-run-m { min-width: 148px; }
.pw-run-when { font-size: var(--fs-13); font-weight: 600; }
.pw-run-by { font-size: var(--fs-11-5); color: var(--text-muted); }
/* --text-secondary is defined in no stylesheet, so this line has been inheriting its colour
   since it was written - an undefined custom property fails silently, no warning, no fallback.
   Using --muted, which shell.css actually defines. Same bug as .pw-menu-item had. */
.pw-run-s { flex: 1; min-width: 200px; font-size: var(--fs-12); color: var(--muted); }
.pw-run-em { color: var(--success); font-weight: 600; }
.pw-run-a { display: flex; gap: 6px; }
.pw-run-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 2px; }
/* filter-chip group divider + count badges (Paid-stage worklist chips) */
.pw-chipdiv { display: inline-block; width: 1px; height: 20px; background: var(--bd); margin: 0 7px; vertical-align: middle; }
.pw-chipn { display: inline-block; margin-left: 6px; padding: 0 6px; min-width: 18px; text-align: center; border-radius: 999px; background: rgba(120,120,120,.2); color: inherit; font-size: var(--fs-11); font-weight: 600; }
/* Payments header: title grows but never shrinks below its content, so the one-line description stays
   on one line (was wrapping to 2 lines once the chip counts widened the cluster); filters + Letters menu
   stay together right-aligned and wrap as a unit only when there's genuinely no room. */
.pw-headtitle { flex: 1 1 auto; }
.pw-headtitle .ccvc-dash-sub { white-space: nowrap; }
/* ⚠ THE FILTERS SIT BESIDE THE TITLE, NOT ON A ROW OF THEIR OWN. Giving them their own full-width
   row fixed the wrapping but cost 46px of vertical space on every visit - the owner was trying to
   remove a line, not add one. flex: 0 1 auto lets them share the title's row and drop below only
   when they genuinely cannot fit. Measured on the live page: header height 98px -> 52px at 1613px
   wide, one row from about 1600px up, two rows below that.
   What stopped it going lower was the subtitle: 565px of it against ~945px of chips. Trimming the
   sentence to 435px bought a breakpoint; folding the Letters dropdown into the bar as a single
   "Letter runs" chip removed a whole separate block from the row. */
.pw-headactions { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* Tighten the Paid-stage chip cluster (scoped to the payments header) so it packs closer without
   crowding — buys back the width the count badges cost, keeping the row on one line longer. */
.pw-scopebox { gap: 3px; }
/* 8px rather than 10px, and a 3px gap: 8 chips x 4px plus the gaps is ~39px, which is exactly what
   was missing to keep the filters on the title row at 1613px. Scoped to .pw-scopebox, which only the
   Payments filter bar uses. */
.pw-scopebox .btnFilter, .pw-scopebox .pw-mine { padding: 6px 8px !important; }
.pw-scopebox .pw-chipn { margin-left: 5px; padding: 0 5px; }
.pw-scopebox .pw-chipdiv { margin: 0 5px; }
/* ⚠ THE HARD DIVIDER EARNS ITS WEIGHT. The thin .pw-chipdiv separates worklists that are all
   filters; this one separates the filters from an ACTION (Letter runs), so it is taller, darker and
   more generously spaced. Without that difference the button reads as one more chip and people click
   it expecting the grid to narrow. */
.pw-chipdiv-hard { height: 26px; background: var(--bd-strong); }
.pw-scopebox .pw-chipdiv-hard { margin: 0 9px; }
/* Letter runs: chip HEIGHT so it lines up with the pills, but bordered and muted so it reads as a
   control rather than a filter. It replaced a two-item "Letters" dropdown - a lone outline button
   beside the pills had no container and looked like debris, and a taller btn-sm broke the row's
   baseline (owner, 2026-09-28). */
.pw-runsbtn { font-size: var(--fs-11-5); padding: 6px 13px !important; border-radius: 999px !important; color: var(--muted) !important; background: var(--surf-2) !important; border: 1px solid var(--bd) !important; cursor: pointer; font-weight: 600; font-style: normal !important; white-space: nowrap; }
.pw-runsbtn:hover { background: var(--surf-3) !important; color: var(--head) !important; border-color: var(--bd-strong) !important; }
/* The Letters dropdown now lives INSIDE .pw-scopebox, behind the hard divider, with .pw-runsbtn as
   its trigger so it matches the pills' height. .pw-scopebox sets no overflow, so the absolutely
   positioned list is free to escape the box - check that first if it ever renders clipped. */
.pw-lettersmenu { position: relative; display: inline-block; }
.pw-lettersmenu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 192px; background: var(--surf); border: 1px solid var(--bd); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 5px; display: none; z-index: 60; }
.pw-lettersmenu.open .pw-lettersmenu-list { display: block; }
/* ⚠ --text-secondary / --text-primary DO NOT EXIST. They were here from the day the menu was
   written and resolve to nothing, so these items have been inheriting their colour all along -
   an undefined custom property fails silently, with no warning and no fallback. Using the
   tokens shell.css actually defines. (.pw-run-s above has the same bug; left alone here.) */
.pw-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 8px 11px; font-size: var(--fs-13); color: var(--muted); cursor: pointer; white-space: nowrap; }
.pw-menu-item:hover { background: var(--surf-3); color: var(--head); }

.pw-ov { position: fixed; inset: 0; background: rgba(16,22,40,.45); display: none; z-index: 1100; }
.pw-ov.show { display: block; }
.pw-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 460px; max-width: 94vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .22s ease; z-index: 1101; display: flex; flex-direction: column; }
.pw-drawer.show { transform: translateX(0); }
.pw-dh { display: flex; align-items: flex-start; gap: 10px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.pw-dh h3 { margin: 0; font-size: var(--fs-15); color: var(--heading); }
.pw-dh .s { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }
.pw-dh .amt { margin-left: auto; font-size: var(--fs-18); font-weight: 700; color: var(--accentfg); font-variant-numeric: tabular-nums; }
.pw-x { background: none; border: 0; color: var(--text-muted); font-size: var(--fs-22); cursor: pointer; line-height: 1; }
.pw-dbody { padding: 18px 20px; overflow: auto; }
.pw-sech { font-size: var(--fs-10); letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 2px 0 10px; }
/* vertical timeline — never overflows the drawer regardless of stage-label length */
.pw-life { display: flex; flex-direction: column; margin: 6px 0 20px; }
.pw-lstep { display: flex; align-items: center; gap: 11px; font-size: var(--fs-12); color: var(--text-muted); }
.pw-ldot { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: var(--fs-10); font-weight: 700; color: var(--text-muted); }
.pw-lstep.done .pw-ldot { background: var(--success); border-color: var(--success); color: #fff; }
.pw-lstep.cur .pw-ldot { background: var(--accent); border-color: var(--accent); color: #16213d; }
.pw-lstep.cur { color: var(--accentfg); font-weight: 700; }
.pw-lstep.done { color: var(--heading); }
.pw-lconn { width: 2px; height: 13px; background: var(--border-strong); margin: 2px 0 2px 11px; }
.pw-lconn.done { background: var(--success); }
.pw-lvoid { display: flex; align-items: center; gap: 8px; color: var(--danger); font-weight: 700; font-size: var(--fs-13); background: rgba(220,38,38,.10); border-radius: 9px; padding: 11px 14px; margin: 6px 0 18px; }
.pw-dr { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--surface-3); font-size: var(--fs-12-5); }
.pw-dr span { color: var(--text-muted); }
.pw-dr b { color: var(--heading); font-weight: 600; text-align: right; }
.pw-dadv { margin-top: 18px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--primary); font-weight: 700; font-size: var(--fs-13); cursor: pointer; }

.pw-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(18px); background: var(--primary); color: #fff; padding: 11px 20px; border-radius: 10px; font-size: var(--fs-12-5); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .2s, transform .2s; z-index: 1200; pointer-events: none; }
.pw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* workbench modals (commission review / warrant entry) */
.pw-modal-ov { position: fixed; inset: 0; background: rgba(16,22,40,.5); display: none; align-items: flex-start; justify-content: center; z-index: 1300; }
.pw-modal-ov.show { display: flex; }
.pw-modal { width: 440px; max-width: 94vw; margin-top: 10vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.pw-modal.pw-modal-lg { width: 720px; }
.pw-modal.pw-modal-xl { width: 850px; }   /* letter-runs modal: wide enough to fit all 3 letter links on one row */
.pw-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-14); font-weight: 700; color: var(--heading); }
.pw-modal-b { padding: 18px; max-height: 60vh; overflow: auto; }
.pw-modal-f { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--border); }
.pw-fld { display: block; margin-bottom: 14px; }
.pw-fld > span { display: block; font-size: var(--fs-11); color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.pw-fld input, .pw-fld select { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); padding: 0 11px; font: inherit; }
.pw-fld input:focus, .pw-fld select:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: 0; }
.pw-modal-info { font-size: var(--fs-11-5); color: var(--text-muted); margin-top: 4px; }
.pw-chk { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; font-size: var(--fs-13); color: var(--text); cursor: pointer; line-height: 1.35; }
.pw-chk input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--primary); flex: 0 0 auto; }
.pw-modal-warn { display: none; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--danger-soft, rgba(200,60,60,.1)); border: 1px solid var(--danger, #c0392b); color: var(--danger, #c0392b); font-size: var(--fs-12); line-height: 1.4; }
.pw-modal-warn.show { display: block; }
/* Advisory, not a refusal: the run is allowed, this only says what the letter will be missing.
   Red said "you cannot continue" for something the user legitimately does every day. */
.pw-modal-warn.pw-warn-advisory { background: var(--warn-soft, rgba(191, 138, 32, .10)); border-color: var(--warn, #8a6d1f); color: var(--warn, #8a6d1f); }
.pw-letterlinks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pw-letterlink { display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); color: var(--primary); font-weight: 600; font-size: var(--fs-13); text-decoration: none; transition: background .12s, color .12s, border-color .12s; }
.pw-letterlink:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pw-letterlink i { font-size: var(--fs-15); }

/* clickable list rows (whole-row opens the record) + consistent Open button */
table.ccvc-rowopen tbody tr { cursor: pointer; }
table.ccvc-rowopen tbody tr:hover > td { background: var(--surface-2); }
.ccvc-openbtn { white-space: nowrap; }
.ccvc-openbtn i { margin-right: 3px; }

/* compact DataTables chrome: exports + search on one top row, length+info+pagination on one bottom row */
.dt-top { margin: 0 0 8px; }
.dt-bot { margin: 10px 0 0; }
/* search box on the LEFT, export buttons on the RIGHT */
.dt-tools { display: flex; justify-content: flex-end; align-items: center; }
.dt-tools .dt-buttons { margin: 0; }
/* flex-pin the search to the far left (beats DataTables bootstrap4's .dataTables_filter text-align:right) */
.dt-filter { display: flex; justify-content: flex-start; align-items: center; }
/* the same search box also renders inside .dt-tools on screens that pin it to the RIGHT of the
   toolbar (Explorer: f sits just left of the Columns picker so SearchBuilder can take the top row) */
.dt-filter .dataTables_filter, .dt-tools .dataTables_filter { text-align: left !important; margin: 0; }
.dt-filter .dataTables_filter label, .dt-tools .dataTables_filter label { margin: 0; font-weight: 600; position: relative; display: inline-block; }
/* search text lives inside the box (placeholder), with a robust in-field magnifier.
   The icon is an inline-SVG background on the input itself — NOT an icon-font ::before —
   so it can't collide with the placeholder if FontAwesome fails to load, or if the user
   has a large browser "minimum font size" set (an icon-font glyph grows with font-size and
   bleeds into the text; a fixed-size SVG background never does). */
.dt-filter .dataTables_filter label::before, .dt-tools .dataTables_filter label::before { content: none; }
.dt-filter .dataTables_filter input, .dt-tools .dataTables_filter input { width: 260px; max-width: 100%; height: 32px; margin: 0; padding: 0 12px 0 34px; border: 1px solid var(--border-strong); border-radius: 9px; background-color: var(--surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.8,10.8 14,14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; background-size: 14px 14px; color: var(--text); font-size: var(--fs-13); transition: border-color .12s, background-color .12s, box-shadow .12s; }
.dt-filter .dataTables_filter input::placeholder, .dt-tools .dataTables_filter input::placeholder { color: var(--text-muted); }
.dt-filter .dataTables_filter input:focus, .dt-tools .dataTables_filter input:focus { outline: none; border-color: var(--primary); background-color: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
/* in the tools cluster the search keeps the same 8px separation the Columns picker keeps from Export */
.dt-tools > .dataTables_filter { margin: 0 8px 0 0; }
/* Explorer: the Advanced Search (SearchBuilder) panel rides the toolbar row's left column —
   flush to the top so its title lines up with the search/Columns/Export controls */
.ccvc-exp-q .dtsb-searchBuilder { margin: 0; }
/* The builder's cell stretches the row taller as conditions are added, and .dt-tools centers its
   content vertically — which sank the search/Columns/Export cluster to mid-cell. Pin it to the
   TOP of the row (level with the "Custom Search Builder" title) whenever it shares a row with
   the builder. */
.ccvc-explorer-wrap .dt-top .dt-tools { align-items: flex-start; }
.dt-infolength { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; line-height: 1.4; }
.dt-infolength .dataTables_info { padding: 0 !important; margin: 0; color: var(--text-muted); font-size: var(--fs-12-5); line-height: 1.4; white-space: nowrap; }
.dt-infolength .dataTables_length { margin: 0; padding: 0; }
.dt-infolength .dataTables_length label { margin: 0; font-weight: 400; font-size: var(--fs-12-5); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.4; }
.dt-infolength .dataTables_length select { height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0 8px; font-size: var(--fs-12-5); line-height: 1.4; }
.dt-paging .dataTables_paginate { float: right; margin: 0; }
table.pw-wtable { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.pw-wtable th { text-align: left; color: var(--text-muted); font-size: var(--fs-11-5); text-transform: none; letter-spacing: normal; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pw-wtable td { padding: 7px 8px; border-bottom: 1px solid var(--surface-3); }
.pw-wtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-win { width: 100%; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); padding: 0 8px; font: inherit; font-size: var(--fs-12); }
.pw-win:focus { border-color: var(--primary); box-shadow: var(--focus-ring); outline: 0; }

/* workbench DataTables grid + filters + drawer actions */
.pw-views { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-mine { font-size: var(--fs-11-5); padding: 6px 13px !important; border-radius: 999px !important; color: var(--text-muted) !important; background: transparent !important; border: 1px solid var(--border) !important; cursor: pointer; font-weight: 600; font-style: normal !important; }
.pw-mine:hover { background: var(--surface-3) !important; color: var(--heading) !important; }
.pw-mine.on { background: var(--accentbg) !important; border-color: var(--accent) !important; color: var(--accentfg) !important; }
.pw-stagetotal { text-align: right; font-size: var(--fs-11-5); color: var(--text-muted); padding: 8px 14px 0; }
.pw-stagetotal b { color: var(--heading); font-size: var(--fs-13); font-variant-numeric: tabular-nums; margin-left: 4px; }
.pw-link { color: var(--primary); font-weight: 700; cursor: pointer; }
.pw-link:hover { text-decoration: underline; }
[data-theme="dark"] .pw-link { color: #9fc0ff; }
.pw-recactions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pw-recactions:empty { display: none; }
/* Drawer inline edit (source / account / notes). Collapsed behind a toggle so the drawer still reads
   as a summary at a glance - the fields appear only when someone means to change something. */
.pw-editToggle { margin-top: 14px; width: 100%; justify-content: center; }
.pw-editbox { margin-top: 10px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-2); }
.pw-el { display: block; margin-bottom: 10px; font-size: var(--fs-11-5); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.pw-ein { display: block; width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--heading); font-size: var(--fs-12-5); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: inherit; }
.pw-ein:focus { outline: none; border-color: var(--primary); }
textarea.pw-ein { resize: vertical; min-height: 68px; }
.pw-editfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.pw-card .dataTables_wrapper { padding: 10px 14px 14px; }
.pw-dtbtn.btn { font-size: var(--fs-11-5) !important; padding: 5px 11px !important; border-radius: 8px !important; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--primary) !important; margin: 0 4px 6px 0; font-weight: 600; }
.pw-dtbtn.btn:hover { background: var(--surface-3) !important; }
[data-theme="dark"] .pw-dtbtn.btn { color: #cdd8ec !important; }
.pw-card table.dataTable td.select-checkbox { padding-left: 14px; vertical-align: middle; }
/* claim # is a clean inline link (.ccvc-reclink) that opens the claim in a new tab; the row-click opens the payment drawer */
.pw-claimcol { white-space: nowrap; }
/* normalize the DataTables toolbar control heights (length select + buttons all equal) */
.pw-card .dataTables_length, .pw-card .dataTables_length label { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 0 6px; }
.pw-card .dataTables_length select { height: 32px; padding: 2px 26px 2px 9px; border-radius: 8px; border: 1px solid var(--border-strong); background-color: var(--surface); color: var(--text); font-size: var(--fs-12); }
/* normalize every toolbar control (page-length + CSV/Excel/PDF/Print + Select page/Clear) to one height */
.pw-card .dt-buttons .btn, .pw-card .pw-dtbtn.btn { height: 32px !important; min-height: 32px !important; display: inline-flex !important; align-items: center; line-height: 1; box-sizing: border-box !important; }
.pw-card .dt-buttons .btn { font-size: var(--fs-11-5) !important; padding: 0 12px !important; border-radius: 8px !important; background: var(--surface); border: 1px solid var(--border-strong); color: var(--primary); margin: 0 4px 6px 0; font-weight: 600; }
.pw-card .dt-buttons .btn:hover { background: var(--surface-3); }
[data-theme="dark"] .pw-card .dt-buttons .btn { color: #cdd8ec; }

/* ---- Compact segmented Export control (CSV / Excel / PDF / Print) — every grid ---- */
/* Placed after the .pw-card rules so it wins on equal specificity in the workbench too. */
.dt-buttons .ccvc-xlabel.btn,
.dt-buttons .ccvc-xbtn.btn {
    height: 32px !important; min-height: 32px !important; box-sizing: border-box !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--surface) !important; vertical-align: middle;
    line-height: 1 !important; font-weight: 600 !important;
}
.dt-buttons .ccvc-xlabel.btn { /* leftmost = non-interactive label */
    padding: 0 11px 0 12px !important; gap: 6px; cursor: default; pointer-events: none;
    font-size: var(--fs-12) !important; color: var(--text-muted) !important; background: var(--surface-2) !important;
    border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important;
}
.dt-buttons .ccvc-xlabel.btn .fa { font-size: var(--fs-12); }
.dt-buttons .ccvc-xbtn.btn { /* the four one-click icon buttons */
    width: 38px !important; padding: 0 !important; border-left: 0 !important;
    font-size: var(--fs-14) !important; color: var(--text) !important; cursor: pointer;
}
.dt-buttons .ccvc-xbtn.btn:hover { background: var(--surface-3) !important; }
.dt-buttons .ccvc-xbtn.btn:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-soft) inset !important; }
.dt-buttons .ccvc-xbtn-prn.btn { /* rightmost = Print: close the group + gap before any custom buttons */
    border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; margin-right: 8px !important;
}
.dt-buttons .ccvc-xbtn-csv .fa { color: #5f6b7a; }
.dt-buttons .ccvc-xbtn-xls .fa { color: #1d7244; }
.dt-buttons .ccvc-xbtn-pdf .fa { color: #c0392b; }
.dt-buttons .ccvc-xbtn-prn .fa { color: var(--primary); }
[data-theme="dark"] .dt-buttons .ccvc-xbtn-csv .fa { color: #9aa6b5; }
[data-theme="dark"] .dt-buttons .ccvc-xbtn-xls .fa { color: #4cc38a; }
[data-theme="dark"] .dt-buttons .ccvc-xbtn-pdf .fa { color: #e06b5e; }

/* ============================================================================
   MODERN DATA GRID — applies to every DataTables list, system-wide.
   Flat uppercase header · horizontal row separators only (no vertical gridlines) ·
   roomy rows · clean hover · no zebra · subtle card around the grid area.
   Lives in shell.css (loads after theme.css) so it wins on equal specificity.
   ============================================================================ */
/* Soft filled header band: Title Case labels on a light navy tint (--surf-2, the same tone
   as the read-mode chips) so headers read as one calm unit; the sorted column darkens and
   carries a gold underline. Replaced the small light-grey uppercase headers, which nearly
   disappeared next to the data. */
.table.dataTable thead th {
    background: var(--surf-2) !important;
    color: #33415c !important;
    text-transform: none; letter-spacing: 0;
    font-size: var(--fs-12) !important; font-weight: 700;
    border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 9px 12px !important; white-space: nowrap;
}
.table.dataTable thead tr > th:first-child { border-radius: 8px 0 0 8px; }
.table.dataTable thead tr > th:last-child { border-radius: 0 8px 8px 0; }
[data-theme="dark"] .table.dataTable thead th { color: #b7c2d4 !important; }
/* One sort glyph instead of DataTables' stacked caret pair: unsorted columns stay clean,
   the active column shows a single arrow beside the label plus the gold underline. */
.table.dataTable thead th.sorting:before, .table.dataTable thead th.sorting:after,
.table.dataTable thead th.sorting_asc:before, .table.dataTable thead th.sorting_desc:before,
.table.dataTable thead th.sorting_asc_disabled:before, .table.dataTable thead th.sorting_asc_disabled:after,
.table.dataTable thead th.sorting_desc_disabled:before, .table.dataTable thead th.sorting_desc_disabled:after { display: none !important; }
.table.dataTable thead th.sorting_asc, .table.dataTable thead th.sorting_desc { color: var(--head) !important; box-shadow: inset 0 -2px 0 var(--accent); }
.table.dataTable thead th.sorting_asc:after, .table.dataTable thead th.sorting_desc:after {
    display: inline-block !important; position: static !important; opacity: .9 !important;
    content: "\25B2" !important; font-size: var(--fs-8); line-height: 1; margin-left: 5px; vertical-align: 1px;
}
.table.dataTable thead th.sorting_desc:after { content: "\25BC" !important; }

/* Scroll-mode grids (Explorer) split into a header table + a body table; the body keeps a
   HIDDEN sizing header whose bottom border painted a second line under the real header.
   Collapse it entirely — column sizing still works, the ghost line does not. */
.dataTables_scrollBody thead tr { visibility: collapse; }
.dataTables_scrollBody thead th { border-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* horizontal separators + compact cells; kill .table-bordered vertical gridlines.
   8px, not 11px: the tallest thing that ever sits in a cell is a 26px action button (Work Queue),
   so 8px still leaves 8px of clearance above and below it - more than the 24px toggles or the 22px
   status pills need - while giving back 6px on EVERY row of EVERY grid. At 20 rows a page that is
   two to three more rows on screen. Do not go below 8 without re-measuring: at 6 the pills start
   crowding the row divider. */
.table.dataTable tbody td {
    border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 12px !important; vertical-align: middle;
}

/* Bootstrap gives every <label> margin-bottom: .5rem. That is meant for stacked form fields, and
   because the app's blanket rule sets the ROOT font to 12px, .5rem lands at exactly 6px - which
   then applies to any label that ends up inside a grid cell.
   The visible symptom: Claim Decisions' select-row checkbox is a <label class="fancy-checkbox">,
   so that grid stood ~3px TALLER than every other one despite carrying the SHORTEST control in the
   app (a 21.5px checkbox against Providers' 24px toggle and Work Queue's 26px buttons). Nobody
   would find that by looking - the margin is on a label nobody thinks of as a label.
   Zeroed for cells only; .fancy-checkbox already gets margin:0 in the three form contexts that
   hit the same problem earlier (.ccvc-vchecks, .ccvc-bcard, .ccvc-pmt-flags). */
.table.dataTable tbody td label { margin-bottom: 0; }

/* ONE row height for every grid in the app.
   Without a floor, a row is as tall as whatever it happens to contain, so a grid whose badge
   columns are sparsely populated comes out ragged - the Claims list measured 37.5 / 39 / 41 down
   a single page, depending on whether that claim had an avatar, a resolution pill, or neither.
   The floor is the tallest control that ever appears in a cell: a .ccvc-gbtn action button, which
   is calc(--fs-base * 2). Declared as that same expression rather than the 26px it currently
   computes to, because --fs-base moves with the per-user text size (Alt+T) - a hardcoded floor
   would be correct at Normal and wrong at Larger, where the buttons grow to 32.5px and the raggedness
   would quietly come back on exactly the grids this fixes.
   `height` on a table cell is a MINIMUM and applies to the CONTENT box, so the row lands at
   floor + 8 + 8 + 1px border = 43px at Normal, and short text rows are padded up to it rather than
   anything being clipped.
   Net effect against what shipped before: text grids 41 -> 43, but Providers 47 -> 43, Work Queue
   51 -> 43, Claim Decisions 50.5 -> 43. Uniform everywhere, shorter everywhere it mattered. */
.table.dataTable tbody td { height: calc(var(--fs-base) * 2); }
.table.dataTable.table-bordered { border: 0 !important; }
.table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }
/* no zebra — force clean rows on EVERY DataTables grid regardless of source (DataTables odd/even,
   Bootstrap .table-striped, AdminBSB theme-color). Excludes selected + hovered rows and status-
   coloured cells (OVC bg-*) so those keep their colours. */
.table.dataTable > tbody > tr:not(.selected):not(:hover) > td:not([class*="bg-"]) { background-color: var(--surface) !important; }

/* subtle card around the whole grid (toolbar + table + footer) */
.dataTables_wrapper {
    position: relative; /* anchor the absolute .dataTables_processing overlay to this grid card */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(16,24,40,.05);
    padding: 4px 14px 10px;
}
/* Loading overlay: centered floating chip over the grid (was mis-anchored, landing off in a corner). */
/* Themed navy processing spinner. The fa-spinner otherwise inherited Bootstrap `text-primary` (blue)
   — outside the claim header text-primary isn't remapped — so it read as a competing blue "dots"
   loader that flashed while a grid's ajax load was in flight (the "only sometimes" blue loader). */
.dataTables_wrapper .dataTables_processing .fa-spinner,
.dataTables_wrapper .dataTables_processing i { color: var(--primary) !important; }
/* DataTables 1.12 unconditionally appends its own 4-dot ellipsis animation after our spinner+text
   (_fnFeatureHtmlProcessing .append; painted hardcoded bootstrap-blue by the vendored css) — hide
   it so the chip is one clean themed loader instead of two competing ones. */
div.dataTables_processing > div:last-child { display: none; }
.dataTables_wrapper .dataTables_processing {
    /* max(50%, 96px): on a zero-row grid (first server-side load) the card is only
       toolbar-tall, so a plain 50% parked the chip ON TOP of the search box / buttons
       (the claims-list "misplaced loader"). 96px keeps it below the toolbar row. */
    top: max(50%, 96px); left: 50%;
    transform: translate(-50%, -50%);
    width: auto; height: auto; margin: 0;
    padding: 9px 16px;
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(16,24,40,.14);
    color: var(--text) !important;
    font-weight: 600; font-size: var(--fs-13); white-space: nowrap;
    z-index: 20;
}
/* While the chip is visible, guarantee the card is tall enough to float it in clear
   space (DataTables toggles the chip with an inline display style). */
.dataTables_wrapper:has(> div.dataTables_processing[style*="block"]) { min-height: 190px; }
.dataTables_wrapper .dt-top { border-bottom: 1px solid var(--surface-2); padding-bottom: 8px; margin-bottom: 4px; }
/* NOT a lever for page height, in case a future pass is tempted: the vendor's `margin: 6px 0
   !important` on table.dataTable looks like slack stacked on .dt-top's 8+4 above and .dt-bot's 10
   below, but overriding it buys nothing. #copyright is pinned to the bottom of .ccvc-content, so
   shrinking the grid only grows the gap above the footer line - measured both ways on the Providers
   list, document height did not move a pixel. The page-height fix lives on .ccvc-content padding. */
/* containers that own their chrome opt out — never double-card */
.pw-card .dataTables_wrapper,
.ccvc-listcard .dataTables_wrapper,
.ccvc-ovc-tablewrap .dataTables_wrapper,
.ccvc-readmode .dataTables_wrapper,
.tab-content .dataTables_wrapper,
.modal .dataTables_wrapper {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.ccvc-ovc-tablewrap .dataTables_wrapper,
.ccvc-readmode .dataTables_wrapper,
.tab-content .dataTables_wrapper,
.modal .dataTables_wrapper { padding: 0 !important; }

/* Opt a tab's grid BACK IN to a panel of its own.
   On tabs that put metric cards above the grid (advocate Services Log, Correspondence) the cards,
   the toolbar and the table ran together on one unbroken white field, with nothing to say the four
   boxes summarise the table rather than being part of it. On the Offenders list that reading is free
   — the cards sit on the grey page canvas and the grid floats in a white .ccvc-listcard — but inside
   a record tab everything is already white, so the contrast has to be built rather than inherited.
   A faint tint plus a border gives the grid the same "its own container" reading without a second
   card around the cards. Opt-in per tab, so grids with no summary above them stay flat. */
.tab-content .ccvc-gridpanel { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px;
                               background: var(--surface-2); padding: 4px 12px 10px; }
.tab-content .ccvc-gridpanel .dataTables_wrapper { background: transparent !important; }
/* The header row would otherwise be the same tint as the panel and lose its edge against it. */
.tab-content .ccvc-gridpanel table.dataTable thead th { background: var(--surface); }
/* The search box and the page-length select are tinted pills DESIGNED TO SIT ON WHITE — surface-2
   fill, no border. Dropped straight onto a surface-2 panel they became the same colour as their own
   background and vanished; the search box read as bare placeholder text floating in the toolbar.
   Inside the panel they invert: white fill with a real border, so they are still obviously inputs.
   Scoped to .ccvc-gridpanel so the tinted-on-white pill stays untouched everywhere else.

   The :not() chain is copied verbatim from the read-mode flattening rule above (the one that gives
   these controls `border: 0`), because that rule is what has to be beaten and CSS decides by
   specificity: two classes plus five attribute selectors. A shorter selector here loses and the
   border silently never appears — which is exactly what happened on the first attempt, where the
   page-length SELECT picked up the fix and the search INPUT did not. */
.tab-content .ccvc-gridpanel .dataTables_wrapper input:not([type=button]):not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]),
.tab-content .ccvc-gridpanel .dataTables_wrapper select {
    background-color: var(--surface) !important; border: 1px solid var(--border-strong) !important;
    pointer-events: auto !important;
}
.tab-content .ccvc-gridpanel .dataTables_wrapper input:not([type=button]):not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]):focus,
.tab-content .ccvc-gridpanel .dataTables_wrapper select:focus {
    border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft);
}
.pw-card .dataTables_wrapper .dt-top,
.ccvc-listcard .dataTables_wrapper .dt-top,
.ccvc-ovc-tablewrap .dataTables_wrapper .dt-top,
.ccvc-readmode .dataTables_wrapper .dt-top,
.tab-content .dataTables_wrapper .dt-top,
.modal .dataTables_wrapper .dt-top { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* ---- modern grid cell atoms (GetInitialsAvatar / GetTagColumn / GetOutcomeColumn / primary-muted) ---- */
/* Grid initials chip (the Inv column on Claims). Sized against the text line rather than picked:
   at 28px it stood 8.5px taller than the ~19.5px line beside it and therefore SET the row height -
   Claims rows measured 51px against Offenders' 42.5px, an 8.5px gap that matched exactly. 24px is
   the smallest that still holds three characters at --fs-10-5 without crowding the circle.
   calc() against the token so it tracks the text-size setting instead of drifting at 110%/125% -
   same treatment as .ccvc-acct-id strong, .smx-list and --side-w in phase 4. */
.ccvc-av { display:inline-flex; align-items:center; justify-content:center; width:calc(var(--fs-base) * 1.85); height:calc(var(--fs-base) * 1.85); border-radius:50%; background:var(--surface-3); color:var(--text-muted); font-size: var(--fs-10-5); font-weight:800; letter-spacing:.3px; }
.ccvc-tag { display:inline-block; font-size: var(--fs-10-5); font-weight:700; letter-spacing:.3px; padding:2px 9px; border-radius:999px; background:var(--surface-3); color:var(--text-muted); white-space:nowrap; }
.ccvc-res { display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-11); font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap; }
.ccvc-res .d { width:7px; height:7px; border-radius:50%; flex:none; }
.ccvc-res-ap { background:#e7f4ec; color:#1d7244; } .ccvc-res-ap .d { background:#2e9e4f; }
.ccvc-res-dn { background:#fdeceb; color:#b0322a; } .ccvc-res-dn .d { background:#c0392b; }
.ccvc-res-neutral { background:var(--surface-3); color:var(--text-muted); } .ccvc-res-neutral .d { background:var(--text-muted); }
[data-theme="dark"] .ccvc-res-ap { background:#16361f; color:#7fd29a; } [data-theme="dark"] .ccvc-res-ap .d { background:#3ea862; }
[data-theme="dark"] .ccvc-res-dn { background:#3a1a1a; color:#f0a39b; } [data-theme="dark"] .ccvc-res-dn .d { background:#d6594c; }
.ccvc-cellprimary { font-weight:600; color:var(--text); }
.ccvc-cellmuted { color:var(--text-muted); }
.ccvc-cell-date { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ccvc-reclink-b { font-weight:700; }

/* Conflict-restricted rows (per-user claim walls, Depth A): present in the list but visibly
   out of reach — dimmed, lock on the claim number, and no row-open affordance. */
.ccvc-celllocked { color:var(--text-muted); font-weight:600; white-space:nowrap; }
.ccvc-celllocked .fa-lock { font-size: var(--fs-11); opacity:.85; }
table.dataTable tbody tr.ccvc-row-locked td { opacity:.55; }
table.dataTable.ccvc-rowopen tbody tr.ccvc-row-locked { cursor:not-allowed; }

/* ============================================================================
   TOGGLES — flat brand switch (A) for form/setting switches; status chip (C) for
   the grid "Active?" column. Overrides the AdminBSB purple switch in style.min.css
   (plain .switch selectors there, so !important + later source order wins).
   ============================================================================ */
/* A — flat brand switch (every <label class="switch"> that isn't a grid status cell) */
.switch { position: relative; display: inline-block; width: 40px !important; height: 22px !important; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; margin: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border-strong) !important; border-radius: 999px !important; transition: background .18s ease, box-shadow .18s ease; }
.switch .slider:before { position: absolute; content: ""; height: 18px !important; width: 18px !important; left: 2px !important; bottom: 2px !important; top: auto !important; right: auto !important; margin: 0 !important; background: #fff !important; border-radius: 50% !important; box-shadow: 0 1px 2px rgba(16,24,40,.28); transition: transform .18s ease; }
.switch input:checked + .slider { background: var(--primary) !important; }
.switch input:checked + .slider:before { transform: translateX(18px) !important; }
.switch input:focus + .slider { box-shadow: 0 0 0 2px var(--primary-soft); }

/* C — status chip for grid "Active?" columns (GetStatusColumn / GetStatusColumnEx) */
/* Sized against the grid text line, like .ccvc-av and .ccvc-gbtn. At 4px padding and an inherited
   1.5 line-height this pill stood 30px tall - the tallest thing in a Providers row, so it set the
   row height at 53px against Offenders' 42.5px. The row's actual pills (.ccvc-pill, .ccvc-res,
   .ccvc-tag) were never the problem: all are 2px padding at 10.5-11px and sit UNDER the line.
   3px padding + a 1.25 line-height brings it to ~24px, matching .ccvc-av. */
.ccvc-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-12); font-weight: 700; line-height: 1.25; padding: 3px 11px 3px 9px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; user-select: none; white-space: nowrap; transition: filter .12s ease; }
.ccvc-toggle .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ccvc-toggle:hover { filter: brightness(.97); }
.ccvc-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-soft); }
.ccvc-toggle-ro { cursor: default; } .ccvc-toggle-ro:hover { filter: none; }
.ccvc-toggle-on { color: #1d7244; background: #e7f4ec; border-color: #bfe3cd; }
.ccvc-toggle-on .d { background: #2e9e4f; box-shadow: 0 0 0 3px rgba(46,158,79,.16); }
.ccvc-toggle-off { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.ccvc-toggle-off .d { background: #94a3b8; }
[data-theme="dark"] .ccvc-toggle-on { color: #7fd29a; background: #16361f; border-color: #1f4a2c; }
[data-theme="dark"] .ccvc-toggle-on .d { background: #3ea862; }
[data-theme="dark"] .ccvc-toggle-off { color: #94a3b8; background: #222c41; border-color: #3a455c; }
[data-theme="dark"] .ccvc-toggle-off .d { background: #6b7689; }

/* ============================================================================
   METRIC / FILTER CARDS — Option A (refined): uppercase label + accent dot,
   big tabular number, quiet monochrome icon, filled-navy active, hover-lift.
   Overrides the base .ccvc-metric rules above (later source order wins).
   ============================================================================ */
.ccvc-metric { padding: 15px 16px 14px; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; overflow: hidden; }
.ccvc-metric .lbl { display: flex; align-items: center; gap: 7px; font-size: var(--fs-11); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ccvc-metric .lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.ccvc-metric:has(.ic.gold) .lbl::before { background: var(--accentfg); }
.ccvc-metric:has(.ic.alert) .lbl::before { background: var(--danger); }
.ccvc-metric .val { font-size: var(--fs-27); font-weight: 800; margin-top: 9px; }
.ccvc-metric .sub { font-size: var(--fs-11); color: var(--muted); font-weight: 600; margin-top: 3px; }
.ccvc-metric .ic { background: transparent !important; width: auto; height: auto; top: 12px; right: 13px; color: var(--bd2); opacity: .9; }
.ccvc-metric .ic.gold { color: var(--accentfg); opacity: .5; }
.ccvc-metric .ic.alert { color: var(--danger); opacity: .55; }
/* active filter = filled navy (replaces the gold outline) */
.ccvc-mfilter:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.08); }
.ccvc-mfilter.active { background: var(--primary); border-color: var(--primary); box-shadow: 0 6px 16px rgba(16,24,40,.14); }
.ccvc-mfilter.active .lbl { color: #c7d2e6; }
.ccvc-mfilter.active .lbl::before { background: #fff; }
.ccvc-mfilter.active .val { color: #fff; }
.ccvc-mfilter.active .ic { color: rgba(255,255,255,.55); }

/* Dashboard deep-link filter chip (Claims list): carries the status/milestone constraint the user arrived
   with, sitting beside the metric cards. ACTIVE = it's the applied filter (no card is lit) — filled navy to
   match .ccvc-mfilter.active; inactive = dimmed but still clickable to re-apply. See wwwroot/js/Pages/claims.js. */
.ccvc-fchip { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 5px 12px 5px 13px; border-radius: 16px; background: var(--surf-2); border: 1px solid var(--bd); font-size: var(--fs-13); font-weight: 600; color: var(--head); cursor: pointer; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.ccvc-fchip:hover { border-color: var(--primary); }
.ccvc-fchip > .fa-filter { font-size: var(--fs-11); color: var(--muted); }
.ccvc-fchip > b { font-weight: 700; }
.ccvc-fchip .ccvc-fchip-x { margin-left: 3px; font-size: var(--fs-17); line-height: 1; color: var(--muted); text-decoration: none; }
.ccvc-fchip .ccvc-fchip-x:hover { color: var(--danger); }
.ccvc-fchip.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(16,24,40,.14); cursor: default; }
.ccvc-fchip.active:hover { border-color: var(--primary); }
.ccvc-fchip.active > .fa-filter { color: rgba(255,255,255,.7); }
.ccvc-fchip.active .ccvc-fchip-x { color: rgba(255,255,255,.75); }
.ccvc-fchip.active .ccvc-fchip-x:hover { color: #fff; }

/* Compact list-page metric strip, CONVERGED on the workbench stage card (.ccvc-wbstage, used by
   Payments and Claim Decisions) — owner preference, 2026-08-12. That card reads better: the icon sits
   inline on the left, the number is the first thing the eye lands on, and the label beneath it is
   sentence case rather than shouted. Before this the same kind of data appeared in THREE different
   treatments across the app: the stacked dashboard card, this horizontal pill, and the stage card.

   Grid, not flex, and NO markup changed anywhere. The DOM order is .ic, .lbl, .val — flex can only
   reorder along one axis, which is why this block previously had to shove the value right with
   margin-left:auto to get the icon first. Named grid areas put the icon in its own column spanning
   the rows, with value stacked above label, so visual order no longer depends on DOM order. The
   third row carries the optional .sub and collapses to nothing when absent (row-gap 0).

   Covers the .ccvc-metrics-fit strips + the Offenders list (#offenderMetrics, which keeps its custom
   1fr 1fr auto 1fr divider grid). The dashboard keeps its taller stacked cards. */
.ccvc-metrics-fit, #offenderMetrics { gap: 10px; margin-bottom: 14px; }
.ccvc-metrics-fit .ccvc-metric, #offenderMetrics .ccvc-metric { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic val" "ic lbl" "ic sub"; align-items: center; column-gap: 10px; row-gap: 0; padding: 9px 12px; box-shadow: none; }
.ccvc-metrics-fit .ccvc-metric .ic, #offenderMetrics .ccvc-metric .ic { grid-area: ic; position: static; width: 30px; height: 30px; border-radius: 8px; font-size: var(--fs-15); flex: none; opacity: 1; background: rgba(27,42,74,.08) !important; color: var(--primary); }
.ccvc-metrics-fit .ccvc-metric .ic.gold, #offenderMetrics .ccvc-metric .ic.gold { background: var(--accentbg) !important; color: var(--accentfg); opacity: 1; }
.ccvc-metrics-fit .ccvc-metric .ic.alert, #offenderMetrics .ccvc-metric .ic.alert { background: rgba(200,55,42,.12) !important; color: var(--danger); opacity: 1; }
.ccvc-metrics-fit .ccvc-metric .val, #offenderMetrics .ccvc-metric .val { grid-area: val; margin: 0; font-size: var(--fs-19); font-weight: 800; line-height: 1.12; color: var(--head); }
/* Sentence case, no tracking, and no accent dot — the dot belonged to the uppercase treatment and
   reads as clutter once a real icon sits inline beside the text. */
.ccvc-metrics-fit .ccvc-metric .lbl, #offenderMetrics .ccvc-metric .lbl { grid-area: lbl; display: block; margin: 0; font-size: var(--fs-11); font-weight: 600; letter-spacing: normal; text-transform: none; line-height: 1.22; color: var(--muted); }
.ccvc-metrics-fit .ccvc-metric .lbl::before, #offenderMetrics .ccvc-metric .lbl::before { display: none; }
.ccvc-metrics-fit .ccvc-metric .sub, #offenderMetrics .ccvc-metric .sub { grid-area: sub; margin: 0; text-align: left; }
/* Selected state, restated at this specificity. The .ccvc-mfilter.active rules further up set the
   number white for the navy fill, but the converged block above is both later in source order AND
   more specific, so it won the cascade and repainted the count in --head — dark on dark, unreadable.
   Same shape as .ccvc-wbstage.sel, which is the card this is converging on. */
.ccvc-metrics-fit .ccvc-mfilter.active .val, #offenderMetrics .ccvc-mfilter.active .val { color: #fff; }
.ccvc-metrics-fit .ccvc-mfilter.active .lbl, #offenderMetrics .ccvc-mfilter.active .lbl { color: #c7d2e6; }
.ccvc-metrics-fit .ccvc-mfilter.active .sub, #offenderMetrics .ccvc-mfilter.active .sub { color: #c7d2e6; }
.ccvc-metrics-fit .ccvc-mfilter.active .ic, #offenderMetrics .ccvc-mfilter.active .ic { background: rgba(255,255,255,.16) !important; color: #fff !important; }
#offenderMetrics .ccvc-mdivider { min-height: 0; height: 24px; }

/* Editable metric card (e.g. the claim's J&S "Restitution ordered"): the input renders exactly like the
   other card values — same size/weight/color, right-aligned — with only a light outline hinting that
   it's editable. */
.ccvc-metric .val input.ccvc-metric-edit { font-family: inherit !important; font-size: var(--fs-21) !important; font-weight: 800 !important; line-height: 26px !important; color: var(--head) !important; text-align: right !important; background: transparent !important; border: 1px solid var(--bd2) !important; border-radius: 7px !important; width: 132px !important; max-width: 100% !important; height: 28px !important; padding: 0 8px !important; margin: 0 !important; display: inline-block !important; vertical-align: middle !important; position: relative; top: -2px; box-shadow: none !important; font-variant-numeric: tabular-nums; }
.ccvc-metric .val input.ccvc-metric-edit:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(27,42,74,.12) !important; }

/* Reminders' two-cluster strip: adopt the same compact single-row card (icon | label | value) as the other
   list strips, but keep the lifecycle | due-date grouping + divider. Was previously excluded as taller
   stacked cards. nowrap keeps long labels ("Due in 30 Days") + value on one line; the card grows to fit.
   align-items:center on the strip + clusters stops the flex stretch that was inflating the 42px card to 67px. */
   Converged on the stage card with the list strips (2026-08-12) — Work Queue was still showing the
   old horizontal pill because it has its OWN strip class and the .ccvc-metrics-fit rule never
   reached it. Same grid treatment, but the strip keeps its lifecycle | due-date clustering, its
   dividers and its min-width, which the list strips do not have. */
.ccvc-rem-metrics, .ccvc-rem-metrics .ccvc-rem-cluster { align-items: center; }
.ccvc-rem-metrics .ccvc-metric { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic val" "ic lbl" "ic sub"; align-items: center; column-gap: 10px; row-gap: 0; padding: 9px 12px; width: auto; min-width: 132px; box-shadow: none; }
/* padding/margin/border:0 neutralizes Bootstrap's .alert component, which the "ic alert" red icon
   accidentally matches (harmless when the icon was position:absolute; inline it inflated the card to 67px). */
.ccvc-rem-metrics .ccvc-metric .ic { grid-area: ic; position: static; width: 30px; height: 30px; border-radius: 8px; font-size: var(--fs-15); flex: none; opacity: 1; margin: 0; border: 0; background: rgba(27,42,74,.08) !important; color: var(--primary); }
.ccvc-rem-metrics .ccvc-metric .ic.gold { background: var(--accentbg) !important; color: var(--accentfg); opacity: 1; }
.ccvc-rem-metrics .ccvc-metric .ic.alert { background: rgba(200,55,42,.12) !important; color: var(--danger); opacity: 1; }
.ccvc-rem-metrics .ccvc-metric .val { grid-area: val; margin: 0; font-size: var(--fs-19); font-weight: 800; line-height: 1.12; color: var(--head); }
.ccvc-rem-metrics .ccvc-metric .lbl { grid-area: lbl; display: block; margin: 0; white-space: nowrap; font-size: var(--fs-11); font-weight: 600; letter-spacing: normal; text-transform: none; line-height: 1.22; color: var(--muted); }
.ccvc-rem-metrics .ccvc-metric .lbl::before { display: none; }
.ccvc-rem-metrics .ccvc-metric .sub { grid-area: sub; margin: 0; text-align: left; }
/* Selected state, restated here for the same cascade reason as the list strips. */
.ccvc-rem-metrics .ccvc-mfilter.active .val { color: #fff; }
.ccvc-rem-metrics .ccvc-mfilter.active .lbl, .ccvc-rem-metrics .ccvc-mfilter.active .sub { color: #c7d2e6; }
.ccvc-rem-metrics .ccvc-mfilter.active .ic { background: rgba(255,255,255,.16) !important; color: #fff !important; }

/* Reminders: dock "View reminders for / My reminders" centered on the DataTables search toolbar row
   (search sits left, export buttons right — this floats in the clear middle). Pure CSS overlay so it
   survives the table's frequent re-inits: the node stays in markup and never moves into the DT wrapper. */
.ccvc-remtoolbar { position: relative; }
.ccvc-remtoolbar #reminderViews { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 2; margin: 0; }

/* Payments: group the All/CVC/SAFE/My scope pills into a boxed segmented control, pushed to the far
   right of the header by a .ccvc-dash-headspacer in the markup. */
.pw-scopebox { border: 1px solid var(--bd); border-radius: 8px; padding: 3px 5px; background: var(--surf); }

/* System Logs: initials shown as a muted secondary after the email actor. */
.ccvc-log-init { color: var(--muted); font-size: var(--fs-11); margin-left: 4px; }

/* Appeal Types editor — Global Settings → Claims & Crime (managed by AppealTypes.js). */
.ccvc-atypes { margin-top: 8px; border-top: 1px dashed var(--bd); padding-top: 14px; }
.ccvc-atypes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.ccvc-atypes-list { display: flex; flex-direction: column; gap: 6px; }
.ccvc-atypes-msg { color: var(--muted); font-size: var(--fs-12-5); padding: 6px 0; }
.ccvc-atype-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--bd); border-radius: 8px; background: var(--surf); }
.ccvc-atype-move { display: inline-flex; flex-direction: column; gap: 1px; }
.ccvc-atype-move button { border: 0; background: transparent; color: var(--muted); cursor: pointer; line-height: 1; padding: 1px 4px; font-size: var(--fs-11); border-radius: 4px; }
.ccvc-atype-move button:hover:not(:disabled) { color: var(--primary); background: rgba(0,0,0,.05); }
.ccvc-atype-move button:disabled { opacity: .3; cursor: default; }
.ccvc-atype-nomove { color: var(--bd2); width: 22px; text-align: center; }
.ccvc-atype-ord { width: 22px; text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ccvc-atype-name { flex: 1 1 auto; min-width: 130px; max-width: 320px; }
.ccvc-atype-flag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); color: var(--muted); margin: 0; white-space: nowrap; cursor: pointer; }
.ccvc-atype-del { border: 0; background: transparent; color: var(--danger); cursor: pointer; padding: 4px 7px; border-radius: 6px; opacity: .75; }
.ccvc-atype-del:hover { opacity: 1; background: rgba(200,55,42,.1); }

/* explorer "Columns" (colvis) button — clean bordered button before the segmented Export group */
.dt-buttons .ccvc-colvis-btn.btn { height: 32px !important; display: inline-flex !important; align-items: center; gap: 6px; padding: 0 12px !important; margin: 0 8px 0 0 !important; border: 1px solid var(--border-strong) !important; border-radius: 8px !important; background: var(--surface) !important; color: var(--primary) !important; font-size: var(--fs-12) !important; font-weight: 600 !important; }
.dt-buttons .ccvc-colvis-btn.btn:hover { background: var(--surface-3) !important; }

/* ===================== Reports launcher (ccvc-rpt-*) ===================== */
.ccvc-rpt-head { margin-bottom: 14px; }
.ccvc-rpt-title { margin: 0 0 2px; font-size: var(--fs-18); font-weight: 700; color: var(--head); }
.ccvc-rpt-sub { font-size: var(--fs-12-5); max-width: 660px; line-height: 1.5; }

/* OVC / Federal Reporting — deliberately set apart (specialized, complex) */
.ccvc-rpt-ovc { display: flex; align-items: center; gap: 16px; padding: 15px 18px; margin-bottom: 18px; border-radius: 14px;
  background: linear-gradient(100deg, rgba(212,175,55,.16), rgba(15,41,66,.05)); border: 1px solid var(--accent);
  text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.ccvc-rpt-ovc:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-1px); text-decoration: none; }
.ccvc-rpt-ovc-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: #16213d;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-22); }
.ccvc-rpt-ovc-body { flex: 1 1 auto; min-width: 0; }
.ccvc-rpt-ovc-title { font-size: var(--fs-15); font-weight: 800; color: var(--head); }
.ccvc-rpt-ovc-desc { font-size: var(--fs-12-5); color: var(--muted); line-height: 1.45; }
.ccvc-rpt-ovc-go { flex: 0 0 auto; color: var(--accent); font-size: var(--fs-18); }

/* Program print banner — slim sibling of the OVC banner for the month-digest PDFs (a print, not a
   live view): a LIGHTER gold wash than OVC's (.16 → .11) + gold-tinted border + gold spine +
   Branded-PDF chip, so it reads as the second "special band" rather than one of the white
   live-view tiles. rgba-only backgrounds tint whatever the theme canvas is — dark mode needs no
   override. Negative top margin tucks it under the OVC banner's 18px gap. */
.ccvc-rpt-prog { display: flex; align-items: center; gap: 14px; padding: 10px 16px; margin: -8px 0 18px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(212,175,55,.11), rgba(212,175,55,.02)); border: 1px solid rgba(212,175,55,.55); border-left: 4px solid var(--accent);
  text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.ccvc-rpt-prog:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-1px); text-decoration: none; }
.ccvc-rpt-prog-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: rgba(212,175,55,.18); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-17); }
.ccvc-rpt-prog-body { flex: 1 1 auto; min-width: 0; }
.ccvc-rpt-prog-title { font-size: var(--fs-14); font-weight: 800; color: var(--head); }
.ccvc-rpt-prog-desc { font-size: var(--fs-12); color: var(--muted); line-height: 1.4; }
.ccvc-rpt-prog-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); font-size: var(--fs-10-5); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ccvc-rpt-prog-go { flex: 0 0 auto; color: var(--accent); font-size: var(--fs-16); }

/* two-pane: report list + run panel */
.ccvc-rpt-grid { display: grid; grid-template-columns: minmax(320px, 38%) 1fr; gap: 16px; align-items: start; }
.ccvc-rpt-listwrap { border: 1px solid var(--bd); border-radius: 14px; background: var(--surf); overflow: hidden; }
.ccvc-rpt-listtools { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--bd); }
.ccvc-rpt-listtools .form-control { flex: 1 1 auto; min-width: 0; }
.ccvc-rpt-list { max-height: 62vh; overflow-y: auto; padding: 6px; }
.ccvc-rpt-grouphdr { font-size: var(--fs-11); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 6px; }
.ccvc-rpt-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: var(--fs-13); color: var(--head); }
.ccvc-rpt-item:hover { background: rgba(0,0,0,.045); }
.ccvc-rpt-item.active { background: var(--accent); color: #16213d; font-weight: 700; }
.ccvc-rpt-item .fa { color: var(--muted); width: 15px; text-align: center; }
.ccvc-rpt-item.active .fa { color: #16213d; }
.ccvc-rpt-none { padding: 16px; color: var(--muted); font-size: var(--fs-12-5); }

.ccvc-rpt-runwrap { border: 1px solid var(--bd); border-radius: 14px; background: var(--surf); padding: 18px; min-height: 240px; }
.ccvc-rpt-runempty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; min-height: 200px; }
.ccvc-rpt-runempty .fa { font-size: var(--fs-30); opacity: .5; }
.ccvc-rpt-runtitle { font-size: var(--fs-16); font-weight: 800; color: var(--head); }
.ccvc-rpt-runcat { font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.ccvc-rpt-daterange { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ccvc-rpt-field { display: flex; flex-direction: column; gap: 4px; }
.ccvc-rpt-field label { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0; }
.ccvc-rpt-field .form-control { min-width: 180px; }
.ccvc-rpt-req { color: #c0392b; }
.ccvc-rpt-noparams { font-size: var(--fs-12-5); color: var(--muted); margin-bottom: 16px; padding: 12px 14px; border: 1px dashed var(--bd); border-radius: 10px; }
@media (max-width: 900px) { .ccvc-rpt-grid { grid-template-columns: 1fr; } }

/* ---- Insights-first live report views (ccvc-iv-*) ---- */
.ccvc-iv-head { margin-bottom: 4px; }
.ccvc-iv-title { font-size: var(--fs-20); font-weight: 800; color: var(--head); margin: 0; }
.ccvc-iv-sub { font-size: var(--fs-12-5); max-width: 780px; margin-top: 2px; }
.ccvc-iv-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 14px 0 16px; }
.ccvc-iv-toolbar .ccvc-iv-spacer { flex: 1 1 auto; }
.ccvc-iv-field { display: flex; flex-direction: column; gap: 4px; }
.ccvc-iv-field label { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0; }
.ccvc-iv-field .form-control { min-width: 150px; }
.ccvc-iv-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.ccvc-iv-card { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; }
.ccvc-iv-card-lbl { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ccvc-iv-card-val { font-size: var(--fs-24); font-weight: 800; color: var(--head); margin-top: 4px; line-height: 1.1; }
.ccvc-iv-chart { padding: 14px 16px 6px; margin-bottom: 16px; }
.ccvc-iv-chart-head { font-size: var(--fs-13); font-weight: 700; color: var(--head); margin-bottom: 6px; }
.ccvc-iv-chart-head .fa { color: var(--accent); }
.ccvc-iv-tablewrap { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; }
@media (max-width: 900px) { .ccvc-iv-cards { grid-template-columns: repeat(2, 1fr); } }
.ccvc-iv-galhead { font-size: var(--fs-13); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 20px 0 10px; }
.ccvc-iv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ccvc-iv-tile { display: flex; align-items: flex-start; gap: 14px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.ccvc-iv-tile:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.06); text-decoration: none; color: inherit; }
.ccvc-iv-tile-ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; background: var(--accent); color: #16213d; display: flex; align-items: center; justify-content: center; font-size: var(--fs-19); }
.ccvc-iv-tile-body { flex: 1; }
.ccvc-iv-tile-title { font-size: var(--fs-15); font-weight: 800; color: var(--head); }
.ccvc-iv-tile-desc { font-size: var(--fs-12); color: var(--muted); margin-top: 3px; line-height: 1.5; }
.ccvc-iv-tile-go { color: var(--accent); margin-top: 4px; }
.ccvc-iv-tile.is-soon { opacity: .65; }
.ccvc-iv-tile.is-soon .ccvc-iv-tile-ic { background: var(--bd); color: var(--muted); }
/* A gallery tile for a module the agency has not bought. The padlock REPLACES the go-arrow —
   showing both would say "open this" and "you cannot" in the same corner. Hover is flattened so the
   tile does not promise the report; the click still does something (it opens the explanation), which
   is why .ccvc-locked keeps cursor:pointer rather than not-allowed. */
.ccvc-iv-tile.ccvc-locked .ccvc-iv-tile-go { display: none; }
.ccvc-iv-tile.ccvc-locked::after { color: var(--muted); margin-top: 4px; }
a.ccvc-iv-tile.ccvc-locked:hover { border-color: var(--bd); box-shadow: none; }

/* ===================== OVC / Federal Reporting workspace (ccvc-ovc-*) ===================== */
.ccvc-ovc-periodbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.ccvc-ovc-periodbar select.form-control { width: auto; min-width: 250px; }
.ccvc-ovc-brand { display: flex; align-items: center; gap: 10px; }
.ccvc-ovc-brand-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: var(--accent); color: #16213d; display: flex; align-items: center; justify-content: center; font-size: var(--fs-18); }
.ccvc-ovc-brand-t { font-size: var(--fs-15); font-weight: 800; color: var(--head); line-height: 1.12; }
.ccvc-ovc-brand-s { font-size: var(--fs-11-5); color: var(--muted); }
.ccvc-ovc-spacer { flex: 1 1 auto; }
.ccvc-ovc-pill { font-size: var(--fs-11); font-weight: 800; letter-spacing: .03em; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; }
.ccvc-ovc-pill.open { background: rgba(39,128,86,.15); color: #1e7a52; }
.ccvc-ovc-pill.closed { background: rgba(192,57,43,.15); color: #b3392c; }
.ccvc-ovc-daterange { font-size: var(--fs-12-5); font-weight: 700; color: var(--head); }

.ccvc-ovc-status { display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 13px 16px; margin-bottom: 14px; border: 1px solid var(--bd); background: var(--surf-3); }
.ccvc-ovc-status .ic { font-size: var(--fs-22); flex: 0 0 auto; color: var(--head); }
.ccvc-ovc-status .body { flex: 1 1 auto; min-width: 0; }
.ccvc-ovc-status .t { font-size: var(--fs-14); font-weight: 700; color: var(--head); }
.ccvc-ovc-status .d { font-size: var(--fs-12-5); color: var(--muted); margin-top: 1px; }
.ccvc-ovc-status.is-stop { background: rgba(192,57,43,.09); border-color: rgba(192,57,43,.35); }
.ccvc-ovc-status.is-stop .ic, .ccvc-ovc-status.is-stop .t { color: #b3392c; }
.ccvc-ovc-status.is-warn { background: rgba(184,138,46,.12); border-color: rgba(184,138,46,.42); }
.ccvc-ovc-status.is-warn .ic, .ccvc-ovc-status.is-warn .t { color: #946f24; }
.ccvc-ovc-status.is-ok { background: rgba(39,128,86,.10); border-color: rgba(39,128,86,.35); }
.ccvc-ovc-status.is-ok .ic, .ccvc-ovc-status.is-ok .t { color: #1e7a52; }

.ccvc-ovc-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--bd); margin-bottom: 16px; flex-wrap: wrap; }
.ccvc-ovc-tab { font-size: var(--fs-13); font-weight: 700; color: var(--muted); padding: 9px 2px; cursor: pointer; border: 0; border-bottom: 2px solid transparent; background: none; display: flex; align-items: center; gap: 6px; }
.ccvc-ovc-tab:hover { color: var(--head); }
.ccvc-ovc-tab.active { color: var(--head); border-bottom-color: var(--accent); }
.ccvc-ovc-tab.locked { opacity: .5; cursor: not-allowed; }
.ccvc-ovc-panel { display: none; }
.ccvc-ovc-panel.active { display: block; }

.ccvc-ovc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.ccvc-ovc-card { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.ccvc-ovc-card-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ccvc-ovc-card-ic { color: var(--accent); font-size: var(--fs-18); width: 20px; text-align: center; flex: 0 0 20px; }
.ccvc-ovc-card-t { font-size: var(--fs-13-5); font-weight: 700; color: var(--head); }
.ccvc-ovc-card-acts { display: flex; gap: 8px; margin-top: auto; }
.ccvc-ovc-card-acts .btn { flex: 1; }
.ccvc-ovc-snaphead { font-size: var(--fs-13); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 22px 0 10px; }
.ccvc-ovc-setup { font-size: var(--fs-12); color: var(--muted); margin: -4px 2px 14px; }
.ccvc-ovc-setup a { color: var(--muted); text-decoration: underline; cursor: pointer; }
.ccvc-ovc-setup a:hover { color: var(--head); }
.ccvc-ovc-reviewtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.ccvc-ovc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ovc-issues { display: flex; flex-wrap: wrap; gap: 4px; }
.ovc-flag { display: inline-block; font-size: var(--fs-11); font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.ovc-flag.ovc-warn { background: #fff3bf; color: #7a5c00; }
.ovc-flag.ovc-err { background: #fbe0db; color: #9a2a18; }
.ovc-sev { display: inline-block; font-size: var(--fs-11); font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ovc-sev.ovc-err { background: #fbe0db; color: #9a2a18; }
.ovc-sev.ovc-warn { background: #fff3bf; color: #7a5c00; }
.ovc-sev.ovc-ok { background: rgba(39,128,86,.14); color: #1e7a52; }
/* compact "period at a glance": PMT stats + missing-data cards in a single row */
.ovc-glance { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; }
.ovc-glance-stats { display: flex; gap: 8px; flex: 0 0 auto; }
.ovc-stat { border: 1px solid var(--bd); border-radius: 10px; padding: 6px 12px; background: var(--surf); min-width: 74px; }
.ovc-stat-val { font-size: var(--fs-20); font-weight: 800; line-height: 1.05; color: var(--head); }
.ovc-stat-lbl { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ovc-glance-sep { width: 1px; background: var(--bd); align-self: stretch; flex: 0 0 auto; }
.ovc-glance .ovc-miss-cards { display: flex; flex-wrap: wrap; flex: 1 1 280px; gap: 8px; margin: 0; align-content: flex-start; }
.ccvc-ovc-chips .ovc-filter-chip b { background: var(--accentbg); color: var(--accentfg); border-radius: 999px; padding: 1px 7px; font-size: var(--fs-11); font-weight: 700; margin-left: 4px; }

.ovc-miss-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.ovc-miss-card { border: 1px solid var(--bd); border-left-width: 3px; border-radius: 10px; padding: 9px 12px; background: var(--surf); cursor: pointer; }
.ovc-miss-card:hover { border-color: var(--accent-2); }
.ovc-miss-card.active { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.ovc-miss-card .n { font-size: var(--fs-20); font-weight: 800; line-height: 1.05; }
.ovc-miss-card .l { font-size: var(--fs-12); font-weight: 600; color: var(--head); margin-top: 1px; }
.ovc-miss-card .s { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ovc-miss-card.ovc-req { border-left-color: #d3503a; }
.ovc-miss-card.ovc-req .n { color: #b3392c; }
.ovc-miss-card.ovc-warn { border-left-color: #d6a829; }
.ovc-miss-card.ovc-warn .n { color: #946f24; }
.ovc-miss-none { font-size: var(--fs-13); color: #1e7a52; display: flex; align-items: center; gap: 8px; margin: 10px 0; }

/* ===== OVC Audit workbench ===== */
.ccvc-ovc-audtitle { font-size: var(--fs-18); font-weight: 800; color: var(--head); margin: 0; display: flex; align-items: center; gap: 8px; }
.ccvc-ovc-audtitle .fa { color: var(--accent-2); }
.ovc-aud-live { color: #b3392c; font-weight: 600; margin-left: 10px; }
#audFilterPills .btnFilter { display: inline-flex; align-items: center; gap: 6px; }
#audFilterPills .btnFilter b { font-weight: 700; background: var(--accentbg); color: var(--accentfg); border-radius: 999px; padding: 1px 8px; font-size: var(--fs-11); }
#audFilterPills .btnFilter.on { color: var(--head); font-weight: 700; }

/* wide edit drawer + sticky save footer */
.pw-drawer-wide { width: 640px; }
.pw-drawer-wide .pw-dbody { flex: 1 1 auto; }
.pw-dfoot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--bd); background: var(--surf); }
.ovc-aud-footsp { flex: 1 1 auto; }
.ovc-aud-dhstatus { margin-left: auto; align-self: center; }

/* flagged-cell highlighting in the audit grid — must beat the modern table surface color.
   Scoped to either workbench container (.pw-card standalone, .ccvc-ovc-tablewrap on the hub). */
.pw-card table.dataTable tbody td.bg-warningovc, .ccvc-ovc-tablewrap table.dataTable tbody td.bg-warningovc,
.pw-card table.dataTable tbody td.bg-warning, .ccvc-ovc-tablewrap table.dataTable tbody td.bg-warning { background-color: #ffe49b !important; color: #5a4500 !important; }
.pw-card table.dataTable tbody td.bg-danger, .ccvc-ovc-tablewrap table.dataTable tbody td.bg-danger { background-color: #f4b9c1 !important; color: #6e131f !important; }
[data-theme="dark"] .pw-card table.dataTable tbody td.bg-warningovc, [data-theme="dark"] .ccvc-ovc-tablewrap table.dataTable tbody td.bg-warningovc,
[data-theme="dark"] .pw-card table.dataTable tbody td.bg-warning, [data-theme="dark"] .ccvc-ovc-tablewrap table.dataTable tbody td.bg-warning { background-color: #6a5410 !important; color: #ffe9a8 !important; }
[data-theme="dark"] .pw-card table.dataTable tbody td.bg-danger, [data-theme="dark"] .ccvc-ovc-tablewrap table.dataTable tbody td.bg-danger { background-color: #6e2330 !important; color: #ffc9d1 !important; }

/* drawer edit form */
.ovc-aud-form .ovc-aud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.ovc-aud-f { display: flex; flex-direction: column; min-width: 0; }
.ovc-aud-f.full { margin-top: 10px; }
.ovc-aud-f > label { font-size: var(--fs-11); font-weight: 600; color: var(--muted); margin: 0 0 3px; }
.ovc-aud-f .form-control { font-size: var(--fs-13); }
/* needs-attention field highlighting (wrapper-level: works for inputs AND select2).
   #audDrawer prefix raises specificity above the theme's !important .form-control rule. */
#audDrawer .ovc-aud-f.need-warn > label { color: #7a5c00; font-weight: 700; }
#audDrawer .ovc-aud-f.need-req > label { color: #9a2a18; font-weight: 700; }
#audDrawer .ovc-aud-f.need-warn .form-control, #audDrawer .ovc-aud-f.need-warn .select2-selection { background: #fff7da !important; border-color: #e6c34a !important; }
#audDrawer .ovc-aud-f.need-req .form-control, #audDrawer .ovc-aud-f.need-req .select2-selection { background: #fdece9 !important; border-color: #e0a99f !important; }
[data-theme="dark"] #audDrawer .ovc-aud-f.need-warn > label { color: #e6c860; }
[data-theme="dark"] #audDrawer .ovc-aud-f.need-req > label { color: #e8a99f; }
[data-theme="dark"] #audDrawer .ovc-aud-f.need-warn .form-control, [data-theme="dark"] #audDrawer .ovc-aud-f.need-warn .select2-selection { background: #463810 !important; border-color: #7a5c00 !important; }
[data-theme="dark"] #audDrawer .ovc-aud-f.need-req .form-control, [data-theme="dark"] #audDrawer .ovc-aud-f.need-req .select2-selection { background: #461d16 !important; border-color: #9a2a18 !important; }

/* ===== combined OVC workspace: condensed toolbar + single filter strip ===== */
.ccvc-ovc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 12px; }
.ccvc-ovc-bar-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accentbg); color: var(--accentfg); display: flex; align-items: center; justify-content: center; font-size: var(--fs-15); flex: 0 0 auto; }
.ccvc-ovc-bar-period { width: auto; min-width: 270px; max-width: 360px; height: 34px; }
.ccvc-ovc-statpill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.ccvc-ovc-statpill.is-stop { background: #fbe0db; color: #9a2a18; }
.ccvc-ovc-statpill.is-warn { background: #fff3bf; color: #7a5c00; }
.ccvc-ovc-statpill.is-ok { background: rgba(39,128,86,.14); color: #1e7a52; }
.ccvc-ovc-menu { position: relative; }
.ccvc-ovc-menu > summary { list-style: none; cursor: pointer; }
.ccvc-ovc-menu > summary::-webkit-details-marker { display: none; }
.ccvc-ovc-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; background: var(--surf); border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 6px; }
.ccvc-ovc-menu-pop a { display: block; padding: 6px 10px; font-size: var(--fs-13); color: var(--text); border-radius: 7px; cursor: pointer; text-decoration: none; }
.ccvc-ovc-menu-pop a:hover { background: var(--accentbg); }
.ccvc-ovc-menu-h { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 10px 2px; }
.ccvc-ovc-menu-sep { height: 1px; background: var(--bd); margin: 5px 0; }

/* tab row as a step flow with arrows + a conditional Narrative step */
.ccvc-ovc-tabs.ccvc-ovc-flow { gap: 8px; }
.ccvc-ovc-flowsep { color: var(--muted); opacity: .5; font-size: var(--fs-15); align-self: center; margin-bottom: 2px; }
.ccvc-ovc-tab-narr { color: #7a5c00; }
.ccvc-ovc-tab-narr:hover { color: #5a4500; }
.ccvc-ovc-tab-narr .fa { color: #c79a1e; }
#narrativeBadge { cursor: pointer; }
#narrativeBadge:hover { filter: brightness(.97); }

.ovc-fbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ovc-fbar-stats { display: flex; gap: 12px; flex: 0 0 auto; }
.ovc-fstat { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.ovc-fstat b { font-size: var(--fs-15); font-weight: 800; color: var(--head); margin-right: 3px; }
.ovc-fbar-sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--bd); }
.ovc-gap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ovc-gap-chip { font-size: var(--fs-12); font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; cursor: pointer; border: 1px solid transparent; }
.ovc-gap-chip b { font-weight: 800; margin-right: 2px; }
.ovc-gap-chip.ovc-warn { background: #fff3bf; color: #7a5c00; border-color: #f2dd8c; }
.ovc-gap-chip.ovc-req { background: #fbe0db; color: #9a2a18; border-color: #f0c3bb; }
.ovc-gap-chip.active { outline: 2px solid currentColor; outline-offset: 1px; }
.ovc-gap-none { font-size: var(--fs-12); color: #1e7a52; display: inline-flex; align-items: center; gap: 6px; }

/* ===== OVC Narrative — modern sectioned form + autosave ===== */
.ccvc-narr { max-width: 1100px; }
.ccvc-narr-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 16px; background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 14px; }
.ccvc-narr-title { font-size: var(--fs-17); font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 8px; line-height: 1.1; }
.ccvc-narr-title .fa { color: var(--accent-2); }
.ccvc-narr-sub { font-size: var(--fs-12); color: var(--muted); margin-top: 1px; }
.ccvc-narr-progress { font-size: var(--fs-12); font-weight: 700; color: var(--accentfg); background: var(--accentbg); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.ccvc-narr-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.ccvc-narr-status.is-saved { background: rgba(39,128,86,.14); color: #1e7a52; }
.ccvc-narr-status.is-saving { background: var(--accentbg); color: var(--accentfg); }
.ccvc-narr-status.is-dirty { background: #fff3bf; color: #7a5c00; }
.ccvc-narr-status.is-error { background: #fbe0db; color: #9a2a18; }

.ccvc-narr-body { display: flex; gap: 18px; align-items: flex-start; }
.ccvc-narr-rail { position: sticky; top: 64px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
.ccvc-narr-railitem { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; font-size: var(--fs-12); font-weight: 700; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.ccvc-narr-railitem:hover { background: var(--accentbg); color: var(--head); }
.ccvc-narr-railitem.active { border-color: var(--bd); background: var(--surf); color: var(--head); }
.ccvc-narr-railitem .n { min-width: 16px; text-align: center; }
.ccvc-narr-raildot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bd); flex: 0 0 auto; }
.ccvc-narr-railitem.done .ccvc-narr-raildot { background: #1e7a52; border-color: #1e7a52; }
.ccvc-narr-railitem.auto .ccvc-narr-raildot { background: var(--accent-2); border-color: var(--accent-2); }

.ccvc-narr-main { flex: 1 1 auto; min-width: 0; }
.ccvc-narr-q { background: var(--surf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; scroll-margin-top: 70px; }
.ccvc-narr-q-auto { background: var(--accentbg); }
.ccvc-narr-qh { display: flex; gap: 10px; margin-bottom: 8px; }
.ccvc-narr-qn { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: var(--accentbg); color: var(--accentfg); font-size: var(--fs-12); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ccvc-narr-q-auto .ccvc-narr-qn { background: var(--surf); }
.ccvc-narr-qt { font-size: var(--fs-13); font-weight: 600; color: var(--head); line-height: 1.45; }
.ccvc-narr-ta { width: 100%; font-size: var(--fs-13); min-height: 92px; resize: vertical; }
.ccvc-narr-auto { font-size: var(--fs-13); color: var(--head); }
.ccvc-narr-auto .fa { color: var(--accent-2); margin-right: 4px; }
.ccvc-narr-auto b { font-size: var(--fs-16); }

/* ============================================================================
   Send-email modal (#sendFileModal) — modernized compose dialog
   ========================================================================== */
.ccvc-email-modal .modal-content { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 28px 70px rgba(13, 27, 62, .32); }
.ccvc-email-head {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(110deg, #1d2d4f 0%, #1b2a4a 55%, #16243f 100%);
    color: #fff; border: 0; padding: 18px 22px;
}
.ccvc-email-head-ic {
    flex: none; width: 46px; height: 46px; border-radius: 13px;
    background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-20); color: var(--accent-2);
}
.ccvc-email-head-txt { flex: 1 1 auto; min-width: 0; }
.ccvc-email-head .title { margin: 0; color: #fff; font-size: var(--fs-18); font-weight: 700; line-height: 1.2; }
.ccvc-email-sub { margin: 2px 0 0; font-size: var(--fs-12-5); color: rgba(255, 255, 255, .72); }
.ccvc-email-x { flex: none; background: transparent; border: 0; color: #fff; opacity: .8; font-size: var(--fs-19); text-shadow: none; line-height: 1; padding: 4px 6px; cursor: pointer; }
.ccvc-email-x:hover { opacity: 1; }

.ccvc-email-body { padding: 22px 22px 6px; background: var(--surf); }
.ccvc-email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 680px) { .ccvc-email-grid { grid-template-columns: 1fr; gap: 0; } }
.ccvc-field { margin-bottom: 16px; }
.ccvc-field > label { display: flex; align-items: center; font-weight: 600; font-size: var(--fs-13); color: var(--head); margin-bottom: 6px; }
.ccvc-field > label .fa { color: var(--accent); width: 15px; text-align: center; }
.ccvc-field-req > label::after { content: "Required"; margin-left: 8px; font-size: var(--fs-9-5); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); background: rgba(182, 138, 78, .12); padding: 1px 7px; border-radius: 999px; }
.ccvc-email-modal .form-control { border-radius: 9px; border: 1px solid var(--bd); padding: 9px 12px; font-size: var(--fs-13-5); background: var(--input-bg, var(--surf)); color: var(--text); transition: border-color .12s ease, box-shadow .12s ease; }
.ccvc-email-modal .form-control:focus { border-color: var(--accent); box-shadow: var(--focus-ring, 0 0 0 3px rgba(182, 138, 78, .25)); outline: 0; }
.ccvc-email-modal textarea.form-control { resize: vertical; min-height: 120px; line-height: 1.5; }
.ccvc-field-hint { display: block; margin-top: 5px; font-size: var(--fs-11-5); color: var(--muted); }
.ccvc-email-attach { margin: 2px 0 4px; padding: 10px 13px; background: var(--surf-2); border: 1px dashed var(--bd); border-radius: 9px; font-size: var(--fs-12-5); color: var(--muted); }
.ccvc-email-attach .fa { color: var(--accent); }

.ccvc-email-foot { border: 0; padding: 8px 22px 20px; background: var(--surf); display: flex; justify-content: flex-end; gap: 10px; }
.ccvc-email-send { background: var(--accent); border: 0; color: #1a1300; font-weight: 700; padding: 9px 20px; border-radius: 9px; box-shadow: 0 6px 16px rgba(182, 138, 78, .3); }
.ccvc-email-send:hover, .ccvc-email-send:focus { filter: brightness(1.06); color: #1a1300; }
.ccvc-email-cancel { background: var(--surf-3); border: 0; color: var(--head); font-weight: 600; padding: 9px 18px; border-radius: 9px; }
.ccvc-email-cancel:hover, .ccvc-email-cancel:focus { background: var(--bd); color: var(--head); }

/* ============================================================================
   Compact claim header strip (.card > .header.ccvc-claimhdr) — single row:
   identity + stat chips + Investigator/Date, same vertical footprint as before.
   ========================================================================== */
.ccvc-claimhdr { position: relative; }
.ccvc-chstrip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-right: 54px; }
.ccvc-ch-id { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ccvc-ch-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: 700; flex: none; text-transform: uppercase; }
.ccvc-ch-idtxt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ccvc-ch-nameline { display: flex; align-items: center; gap: 8px; }
.ccvc-ch-name { font-size: var(--fs-15-5); font-weight: 700; color: var(--head); white-space: nowrap; }
.ccvc-ch-status { font-size: var(--fs-10); vertical-align: middle; }
.ccvc-ch-sub { display: flex; align-items: center; gap: 10px; font-size: var(--fs-12); color: var(--muted); margin-top: 2px; }
.ccvc-ch-sub .ccvc-ch-cno { font-weight: 600; color: var(--head); }
.ccvc-ch-sub i { opacity: .6; }
.ccvc-ch-web { background: var(--surf-3); border: 1px solid var(--bd); border-radius: 6px; padding: 0 8px; font-weight: 600; color: var(--head); white-space: nowrap; }
.ccvc-ch-web i { opacity: .7; color: var(--accent); }

/* ============================================================================
   Compact grouped claim person-tab form (.ccvc-vform) — Victim / Claimant.
   Sections (Identity / Demographics / Address / Contact / Circumstances) on a
   12-col grid, two columns wide, so the whole tab fits without scrolling.
   ========================================================================== */
.ccvc-vform { padding: 2px 2px 4px; }
.ccvc-vform-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ccvc-vform-head > b { font-size: var(--fs-15); color: var(--head); }
.ccvc-vform-actions { display: flex; gap: 8px; }
.ccvc-vform-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .ccvc-vform-cols { grid-template-columns: 1fr; } }
.ccvc-vgrp { border: 0; box-shadow: inset 0 0 0 1px var(--bd); border-radius: 11px; padding: 0 0 12px; margin: 0 0 14px; min-width: 0; }
/* The <legend> band is clamped to the fieldset content-box (it can't overhang the padding), so to make the
   header strip span flush to the group outline we zero the group's side padding and re-inset the content. */
.ccvc-vgrp > :not(legend) { padding-left: 14px; padding-right: 14px; }
.ccvc-vform-col > .ccvc-vgrp:last-child { margin-bottom: 0; }
/* Section header BAND (Option B): a tinted full-width header strip with a gold dot + navy label,
   replacing the faint outline-with-overlapping-legend so sections read at a glance. */
.ccvc-vgrp > legend { display: block; box-sizing: border-box; width: 100%; float: none; margin: 0 0 12px; padding: 8px 15px; background: var(--surf-2); border: 1px solid var(--bd); border-radius: 11px 11px 0 0; font-size: var(--fs-13); font-weight: 700; letter-spacing: .2px; color: var(--head); }
.ccvc-vgrp > legend::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; position: relative; top: -1px; }
.ccvc-vgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px 12px; }
.ccvc-vf { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.ccvc-vf > label { font-size: var(--fs-10-5); color: var(--muted); font-weight: 600; margin: 0; }
.ccvc-vform .form-control { height: 31px; font-size: var(--fs-13); padding: 3px 9px; }
.ccvc-vform select.form-control { height: 31px; }
.ccvc-vform .ccvc-vf .select2-container { width: 100% !important; }
.ccvc-vchecks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 4px 0 2px; }
.ccvc-vchecks .fancy-checkbox { margin: 0; }
.ccvc-vform .v2 { grid-column: span 2; }
.ccvc-vform .v3 { grid-column: span 3; }
.ccvc-vform .v4 { grid-column: span 4; }
.ccvc-vform .v5 { grid-column: span 5; }
.ccvc-vform .v6 { grid-column: span 6; }
.ccvc-vform .v12 { grid-column: span 12; }
/* Email field with inline send button (Claimant tab) */
.ccvc-vemail { display: flex; gap: 6px; align-items: center; }
.ccvc-vemail .form-control { flex: 1 1 auto; }
.ccvc-vemail-send { flex: none; width: 34px; height: 31px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bd); border-radius: 7px; background: var(--surf-2); color: var(--primary); }
.ccvc-vemail-send:hover { background: var(--surf-3); color: var(--primary); }
/* span-8 cell + textareas + full-width sections (Crime tab) */
.ccvc-vform .v8 { grid-column: span 8; }
.ccvc-vform textarea.form-control { height: auto; min-height: 52px; padding: 6px 9px; resize: vertical; line-height: 1.4; }
.ccvc-vform > .ccvc-vgrp:last-child { margin-bottom: 0; }
.ccvc-voff-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Offender record header band (.ccvc-ohead) — identity + reference stat chips */
.ccvc-ohead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ccvc-ohead-av { width: 50px; height: 50px; border-radius: 13px; flex: none; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-20); }
.ccvc-ohead-id { min-width: 0; }
.ccvc-ohead-id .nm { font-size: var(--fs-19); font-weight: 800; color: var(--head); line-height: 1.12; }
.ccvc-ohead-id .sub { font-size: var(--fs-12-5); color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccvc-ohead-tag { font-size: var(--fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; background: #fdeceb; color: #b0322a; }
.ccvc-ohead-stats { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.ccvc-ohead-st { min-width: 116px; background: var(--surf-2); border: 1px solid var(--bd); border-radius: 11px; padding: 7px 12px; }
.ccvc-ohead-st .k { font-size: var(--fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ccvc-ohead-st .v { font-size: var(--fs-15); font-weight: 800; color: var(--head); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ccvc-ohead-st.bal { background: #fdeceb; border-color: #f3c9c4; }
.ccvc-ohead-st.bal .v { color: #b0322a; }
[data-theme="dark"] .ccvc-ohead-tag, [data-theme="dark"] .ccvc-ohead-st.bal { background: #3a1a1a; border-color: #5a2a2a; }
[data-theme="dark"] .ccvc-ohead-tag, [data-theme="dark"] .ccvc-ohead-st.bal .v { color: #f0a39b; }

/* Restitution computed values (Balance Due / Min Due, JS-populated) + Claim Reference read-only display */
.ccvc-restval { font-size: var(--fs-15); font-weight: 800; color: var(--head); font-variant-numeric: tabular-nums; margin: 0; min-height: 28px; display: flex; align-items: center; }
.ccvc-restval-red { color: var(--danger); }
/* Server-rendered read values match the read-mode chip style (same rationale). */
.ccvc-roval { font-size: var(--fs-13); font-weight: 600; color: var(--head); padding: 4px 9px 5px; background: var(--surf-2); border-radius: 7px; min-height: 27px; }
.ccvc-roval:empty::after { content: "—"; color: var(--muted); opacity: .5; }
.ccvc-ronote { font-size: var(--fs-12); color: var(--muted); margin: -4px 0 12px; }
/* highlighted claim-status banner on the read-only Claim Reference */
.ccvc-rostatus { display: flex; align-items: center; gap: 12px; background: var(--accentbg); border: 1px solid var(--accent); border-radius: 10px; padding: 11px 15px; margin: 0 0 16px; }
.ccvc-rostatus-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-16); flex: none; }
.ccvc-rostatus .k { font-size: var(--fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accentfg); }
.ccvc-rostatus .v { font-size: var(--fs-16); font-weight: 800; color: var(--head); margin-top: 1px; }
/* Payment-plan installment status chips */
.ccvc-pstat { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-11); font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.ccvc-pstat-paid { background: #e4f5ec; color: #1c7a4a; }
.ccvc-pstat-past { background: #fdeceb; color: #b0322a; }
.ccvc-pstat-next { background: var(--accentbg); color: var(--accentfg); }
.ccvc-pstat-unpaid { background: var(--surf-2); color: var(--muted); }
[data-theme="dark"] .ccvc-pstat-paid { background: #14331f; color: #6ed79b; }
[data-theme="dark"] .ccvc-pstat-past { background: #3a1a1a; color: #f0a39b; }
.ccvc-gbtn-paid { color: #1c7a4a !important; }
.ccvc-gbtn-paid:hover { background: #e4f5ec !important; color: #145c37 !important; }
/* Source tag (Payments ledger): distinguishes ad-hoc payments from satisfied plan installments (Option B). */
.ccvc-src { display: inline-block; font-size: var(--fs-11); font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; line-height: 1.5; }
.ccvc-src-plan { background: var(--accentbg); color: var(--accentfg); }
.ccvc-src-adhoc { background: var(--surf-2); color: var(--muted); }
.ccvc-applink { font-size: var(--fs-12); color: var(--accentfg); white-space: nowrap; }
.ccvc-muted { color: var(--muted); }
/* Claim J&S restitution note under the cap cards. */
.ccvc-jsnote { font-size: var(--fs-12); color: var(--muted); margin: 2px 0 12px; display: flex; align-items: flex-start; gap: 6px; line-height: 1.5; }
.ccvc-jsnote .fa { margin-top: 2px; color: var(--accentfg); }
.ccvc-jsnote b { color: var(--text); font-weight: 600; }
/* Offender restitution cards: per-card mini progress bar, % chip, J&S tag. */
.ccvc-cardbar { height: 6px; background: var(--surf-2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.ccvc-cardbar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.ccvc-cardbar-warn { background: #c8922b; }
.ccvc-cardbar-ok { background: #1c7a4a; }
.ccvc-pct { display: inline-block; font-size: var(--fs-11); font-weight: 700; color: #1c7a4a; background: #e4f5ec; border-radius: 999px; padding: 1px 7px; margin-right: 4px; }
.ccvc-pct-alt { color: var(--accentfg); background: var(--accentbg); }
.ccvc-jstag { display: inline-block; font-size: var(--fs-10); font-weight: 700; letter-spacing: normal; color: var(--accentfg); background: var(--accentbg); border-radius: 999px; padding: 0 6px; margin-left: 5px; vertical-align: 1px; }
[data-theme="dark"] .ccvc-cardbar-ok { background: #6ed79b; }
[data-theme="dark"] .ccvc-cardbar-warn { background: #e3b54a; }
[data-theme="dark"] .ccvc-pct { background: #14331f; color: #6ed79b; }
/* Eligibility & Status: QC line, denial/appeal blocks, 3-up settings grid */
.ccvc-vqc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); padding-top: 2px; }
.ccvc-veligset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .ccvc-veligset { grid-template-columns: 1fr; } }
.ccvc-veligset > div { border-right: 1px solid var(--bd); padding-right: 14px; }
.ccvc-veligset > div:last-child { border-right: 0; padding-right: 0; }
.ccvc-veligset-h { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--head); margin: 0 0 8px; }
/* Column-count variants for the Reductions / Restrictions / Award row. Four across when Claim
   Reductions is on, two when it is off - the grid closes up rather than leaving gaps where the two
   hidden columns were. Both collapse to a single column on narrow screens; four go to two first, so
   the reduction lists stay readable on a laptop before stacking entirely. */
.ccvc-veligset-2 { grid-template-columns: repeat(2, 1fr); }
/* Four columns across. They are not equally wide: the award column carries a ledger, and the two
   reduction columns need room for a reason and its percentage on one line. */
.ccvc-veligset-4 { grid-template-columns: 1.15fr 1.15fr 0.85fr 1.25fr; }
/* ⚠ A PICKER, NOT A CHECKLIST. Every reason is rendered as a row; only the picked ones are shown, so
   the height follows what the claim carries rather than the size of the lookup table. The hidden
   checkbox inside each row remains the source of truth - see the remarks in Claim.cshtml.

   ⚠ .ccvc-redpick is NOT .ccvc-vchecks. The previous attempt reused it and added CSS `columns` to
   flow twelve reasons into two sub-columns; `columns` has no effect on a flex container, and
   .ccvc-vchecks is display:flex, so the rule was silently inert and the list stayed twelve rows
   tall. */
/* An inset box, not loose text on the page: the reductions are a contained list you add to and
   remove from, and the border is what says so. It is also how the Access screen presents them. */
.ccvc-redpick { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; padding: 7px 9px;
                border: 1px solid var(--bd); border-radius: 6px; background: var(--surf);
                max-height: 300px; overflow-y: auto; }
.ccvc-redrow { display: none; align-items: flex-start; gap: 6px; }
.ccvc-redrow.is-picked { display: flex; }
.ccvc-redlabel { min-width: 0; }
.ccvc-redpct { margin-left: auto; flex: 0 0 auto; padding-left: 10px; white-space: nowrap; font-weight: 600; }
.ccvc-redrm { border: 0; background: none; color: var(--muted); cursor: pointer; flex: 0 0 auto;
              padding: 0 1px; line-height: 1; font-size: var(--fs-14); }
.ccvc-redrm:hover { color: #b4232a; }
.ccvc-redadd { margin-top: 3px; height: 30px; padding: 2px 8px; font-size: var(--fs-12); color: var(--muted); }
.ccvc-rednone { color: var(--muted); font-style: italic; font-size: var(--fs-12); }
/* A list's total: one line, label left, figure right - pinned to the same edge as the percentages in
   the rows above, so the column of numbers reads straight down into it. It replaces a readonly text
   box, which cost three times the height to say the same thing and offered an edit that does not
   exist: the figure is derived from the rows and no screen can type into it. */
.ccvc-redtotal { display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
                 font-size: var(--fs-12); color: var(--muted); }
.ccvc-redtotal b { margin-left: auto; color: var(--text); font-weight: 700; }
/* Marks a reduction the system owns, where Edit and Delete would be refused. */
.ccvc-adjauto { font-size: var(--fs-10-5); color: var(--muted); text-transform: uppercase;
                letter-spacing: .4px; align-self: center; }
@media (max-width: 1500px) { .ccvc-veligset-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .ccvc-veligset-2, .ccvc-veligset-4 { grid-template-columns: 1fr; } }
/* Row borders when four columns wrap to two, so the second pair does not read as a continuation. */
@media (max-width: 1500px) { .ccvc-veligset-4 > div:nth-child(2) { border-right: 0; padding-right: 0; } }
/* The maximum-award ledger: statute, less reductions, less what is committed, leaves available.
   A definition list rather than form fields, because none of it is editable - it is arithmetic. */
.ccvc-awledger { margin-top: 10px; font-size: var(--fs-12); }
.ccvc-awledger dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; }
.ccvc-awledger dt { color: var(--muted); font-weight: 500; margin: 0; }
.ccvc-awledger dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ccvc-awledger .ccvc-awl-rule { grid-column: 1 / -1; border-top: 1px solid var(--bd); margin: 4px 0 2px; }
.ccvc-awledger .ccvc-awl-total dt, .ccvc-awledger .ccvc-awl-total dd { font-weight: 700; color: var(--head); }
.ccvc-awledger .ccvc-awl-neg { color: var(--danger, #b4232a); }
.ccvc-awl-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ccvc-vchecks-col { flex-direction: column; align-items: flex-start; gap: 8px; }
/* Long one-per-line checklists (advocate Victimizations, 28 of them). CSS multi-column rather than a
   wrapping flex row: columns flow DOWN then across, so an alphabetical list still reads alphabetically,
   and the browser balances the column heights itself at any width. break-inside stops a checkbox being
   split from its own label at a column edge. */
.ccvc-vchecks-cols { columns: 3 250px; column-gap: 26px; padding: 6px 0 2px; }
.ccvc-vchecks-cols .fancy-checkbox { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 7px;
                                     break-inside: avoid; page-break-inside: avoid; }
.ccvc-vchecks-desc { margin-top: 8px; }
/* Taller Crime description */
.ccvc-vform textarea.ccvc-ta-tall.form-control { min-height: 120px; }
/* Space full-width sections (Attorney/Offenders/Reductions) away from the 2-col block above */
.ccvc-vform-cols { margin-bottom: 14px; }
/* Benefit Notes toggle-cards */
.ccvc-bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .ccvc-bgrid { grid-template-columns: 1fr; } }
.ccvc-bcard { border: 1px solid var(--bd); border-radius: 10px; padding: 9px 12px; background: var(--surf); }
.ccvc-bcard > .fancy-checkbox { margin: 0; font-weight: 600; }
.ccvc-bcard .ccvc-vgrid { margin-top: 9px; }
.ccvc-bcard:has(> .fancy-checkbox input:checked) { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
/* Offenders table: keep the row action buttons (incl. the full-width "Go To") inline on one line */
#offendersdataTablePlaceHolder td:last-child { white-space: nowrap; }
#offendersdataTablePlaceHolder td:last-child .btn { display: inline-block; width: auto; margin: 1px 2px; vertical-align: middle; }
/* Attorney fields locked (checkbox unchecked) — subtle greyed look in edit mode */
#currentClaimForm:not(.ccvc-readmode) #attorneyFields input[readonly] { background: var(--surf-2); }

/* Modernized claim list tab (Lost Wages, etc.): header + summary chips + clean table */
.ccvc-list { padding: 2px 2px 4px; }
.ccvc-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ccvc-list-head > b { font-size: var(--fs-16); color: var(--head); }
.ccvc-list-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 700px) { .ccvc-list-stats { grid-template-columns: 1fr; } }
.ccvc-lstat { background: var(--surf-2); border-radius: 10px; padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; }
.ccvc-lstat-l { font-size: var(--fs-11); color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.ccvc-lstat-v { font-size: var(--fs-19); font-weight: 800; color: var(--head); }
.ccvc-lstat-award .ccvc-lstat-v { color: #2e9e4f; }
table.ccvc-ltable thead th { background: var(--surf-2); color: var(--muted); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--bd); }
.ccvc-lw-nm { font-weight: 600; color: var(--head); }
.ccvc-lw-sub { font-size: var(--fs-12); color: var(--muted); }
table.ccvc-ltable td.ccvc-lw-emp { font-weight: 600; color: var(--head); }
.ccvc-list-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ccvc-btn-ghost { background: var(--surf-2); color: var(--head); border: 1px solid var(--bd); }
.ccvc-btn-ghost:hover { background: var(--surf-3); color: var(--head); }

/* Compact density — claim Payments tab, so all 10 rows fit at 1920x1080 without scrolling: slimmer
   stat cards + a thin single-row stepper + tighter grid rows. Scoped to the payments-tab elements
   (#paymentsTab / #ccvcPayStepper / #paymentsTable) so every other grid keeps its roomy spacing. */
#paymentsTab .ccvc-list-head { margin-bottom: 8px; }
#paymentsTab .ccvc-list-stats { margin-bottom: 10px; }
#paymentsTab .ccvc-lstat { padding: 5px 12px; }
#paymentsTab .ccvc-lstat-l { font-size: var(--fs-9-5); }
#paymentsTab .ccvc-lstat-v { font-size: var(--fs-14); }
#ccvcPayStepper.ccvc-paystepper { align-items: center; padding: 6px 14px; margin-bottom: 10px; }
#ccvcPayStepper .ccvc-pstep { flex-direction: row; gap: 6px; min-width: 0; }
#ccvcPayStepper .ccvc-pstep-n { width: 20px; height: 20px; font-size: var(--fs-11); }
#ccvcPayStepper .ccvc-pstep-l { font-size: var(--fs-11); }
#ccvcPayStepper .ccvc-pstep-bar { margin: 0 6px; min-width: 16px; }
#paymentsTable thead th { padding: 7px 12px !important; }
#paymentsTable tbody td { padding: 6px 12px !important; }
.ccvc-list-stats-4 { grid-template-columns: repeat(4, 1fr); }
.ccvc-list-stats-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .ccvc-list-stats-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .ccvc-list-stats-4, .ccvc-list-stats-6 { grid-template-columns: repeat(2, 1fr); } }

/* Pay Code Group Balances — compact per-claim utilization bars, stacked vertically in the Overview
   "Claim summary" slot (left column of the ov-grid). */
.ccvc-ovh .ccvc-ovh-note { font-weight: 400; color: var(--muted); font-size: var(--fs-11); margin-left: 6px; }
.ccvc-paygrp-bars { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; }
.ccvc-pgbar { display: flex; flex-direction: column; gap: 2px; }
.ccvc-pgbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ccvc-pgbar-name { font-size: var(--fs-12); font-weight: 600; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-pgbar-val { font-size: var(--fs-12); font-weight: 700; color: var(--head); white-space: nowrap; }
.ccvc-pgbar-max { color: var(--muted); font-weight: 500; }
.ccvc-pgbar-track { position: relative; height: 7px; background: var(--surf-2); border-radius: 5px; overflow: hidden; }
.ccvc-pgbar-stack { position: absolute; left: 0; top: 0; bottom: 0; display: flex; border-radius: 5px; overflow: hidden; min-width: 2px; transition: width .4s ease; }
.ccvc-pgseg { height: 100%; }
.ccvc-pgseg-open { background: var(--warn); }
.ccvc-pgseg-appr { background: var(--head); }
.ccvc-pgseg-paid { background: var(--ok); }
.ccvc-pgbar-foot { font-size: var(--fs-10); color: var(--muted); }
.ccvc-pgbar-near .ccvc-pgbar-foot { color: var(--warn); font-weight: 600; }
.ccvc-pgbar-over .ccvc-pgbar-foot { color: var(--bad); font-weight: 600; }
.ccvc-pgbar-over .ccvc-pgbar-track { box-shadow: inset 0 0 0 1px var(--bad); }
.ccvc-pgbar-legend { display: flex; gap: 12px; margin-bottom: 2px; }
.ccvc-pgleg { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-10); color: var(--muted); }
.ccvc-pgleg-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ccvc-pgbar-empty { font-size: var(--fs-12); color: var(--muted); padding: 6px 0; }
.ccvc-pbadge { display: inline-block; font-size: var(--fs-11); font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.ccvc-pbadge-paid { background: #eaf3de; color: #27500a; }
.ccvc-pbadge-appr { background: #e6f1fb; color: #0c447c; }
.ccvc-pbadge-open { background: var(--surf-3); color: var(--muted); }
.ccvc-pbadge-deny { background: #fcebeb; color: #791f1f; }
[data-theme="dark"] .ccvc-pbadge-paid { background: #27500a; color: #c0dd97; }
[data-theme="dark"] .ccvc-pbadge-appr { background: #0c447c; color: #b5d4f4; }
[data-theme="dark"] .ccvc-pbadge-deny { background: #791f1f; color: #f7c1c1; }
.ccvc-pbadge-out { background: #faeeda; color: #854f0b; }
[data-theme="dark"] .ccvc-pbadge-out { background: #633806; color: #fac775; }
/* Correspondence type tag + Document-checklist progress bar */
.ccvc-cortag { display: inline-block; font-size: var(--fs-10-5); font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surf-3); color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .2px; }
.ccvc-docprog { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ccvc-docprog-track { flex: 1 1 auto; height: 8px; background: var(--surf-3); border-radius: 999px; overflow: hidden; }
.ccvc-docprog-fill { height: 100%; width: 0; background: #2e9e4f; border-radius: 999px; transition: width .3s ease; }
.ccvc-docprog-label { font-size: var(--fs-12-5); color: var(--muted); white-space: nowrap; }
/* Files tab: upload zone + inline head toggle */
.ccvc-files-drop { background: var(--surf-2); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.ccvc-files-note { font-size: var(--fs-12-5); color: var(--muted); margin-bottom: 8px; }
.ccvc-files-toggle { margin: 0; font-size: var(--fs-13); display: inline-flex; align-items: center; white-space: nowrap; }
.ccvc-files-toggle span { color: var(--muted); }
/* Grid/list row action icon buttons (tinted) — replace the text Edit/View/Send/Copy/Delete buttons */
/* Grid action buttons (edit/delete, 13 grids). Same story as .ccvc-av: at 30px they stood 10.5px
   above the text line and set the row height wherever a grid has an actions column - Receipts
   measured 53px against Payments' 43.5px. 26px still clears a comfortable pointer target for a
   desktop back-office grid while bringing those rows back in line. Tied to the token so it tracks
   the text-size setting. */
.ccvc-gbtn { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--fs-base) * 2); height: calc(var(--fs-base) * 2); padding: 0; margin: 0 3px 0 0; border: 0; border-radius: 8px; font-size: var(--fs-13-5); line-height: 1; cursor: pointer; transition: filter .12s ease, background .12s ease; vertical-align: middle; text-decoration: none; }
.ccvc-gbtn:hover { filter: brightness(.93); text-decoration: none; }
.ccvc-gbtn:focus { outline: 0; box-shadow: 0 0 0 2px rgba(27,42,74,.25); }
.ccvc-gbtn i { pointer-events: none; }
.ccvc-gbtn-edit { background: #eef1f6; color: #34404f; }
.ccvc-gbtn-view, .ccvc-gbtn-go { background: #e9eefb; color: #1b2a4a; }
.ccvc-gbtn-send { background: #e8f1fd; color: #0c6cd0; }
.ccvc-gbtn-copy, .ccvc-gbtn-split { background: #fbf3e3; color: #9a7320; }
.ccvc-gbtn-del { background: #fdecea; color: #c0392b; }
[data-theme="dark"] .ccvc-gbtn-edit { background: #2a3340; color: #cbd5e1; }
[data-theme="dark"] .ccvc-gbtn-view, [data-theme="dark"] .ccvc-gbtn-go { background: #22304a; color: #b5d4f4; }
[data-theme="dark"] .ccvc-gbtn-send { background: #0c2a4a; color: #85b7eb; }
[data-theme="dark"] .ccvc-gbtn-copy, [data-theme="dark"] .ccvc-gbtn-split { background: #3a2f12; color: #f0c674; }
[data-theme="dark"] .ccvc-gbtn-del { background: #3a1a18; color: #f09595; }
/* Inline "linked record value" (e.g. a claim # that navigates to the claim) — replaces the dated pill button */
.ccvc-reclink { color: #1b2a4a; font-weight: 600; text-decoration: none; border-bottom: 1px dotted rgba(27,42,74,.45); }
.ccvc-reclink:hover { color: #0c6cd0; border-bottom-color: #0c6cd0; text-decoration: none; }
[data-theme="dark"] .ccvc-reclink { color: #85b7eb; border-bottom-color: rgba(133,183,235,.45); }

/* Offender Claims tab, list-first master-detail: the highlighted Linked Claims row drives the
   Claim Snapshot panel. Gold wash matches the Board Prep .is-await treatment (works both themes). */
#linkedClaimsTable tbody tr.linkedClaimRow { cursor: pointer; }
#linkedClaimsTable tbody tr.is-selected > td { background: rgba(212,175,55,.10); }
#linkedClaimsTable tbody tr.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
[data-theme="dark"] .ccvc-reclink:hover { color: #b5d4f4; border-bottom-color: #b5d4f4; }
/* Encumbrances placeholder (future feature) */
.ccvc-encum-ph { display: flex; align-items: flex-start; gap: 14px; padding: 22px; background: var(--surf-2); border: 1px dashed var(--bd2); border-radius: 12px; }
.ccvc-encum-ph-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surf); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; font-size: var(--fs-20); color: var(--muted); }
.ccvc-encum-ph-t { font-size: var(--fs-15); font-weight: 700; color: var(--head); }
.ccvc-encum-ph-d { font-size: var(--fs-13); color: var(--muted); margin-top: 4px; max-width: 760px; line-height: 1.5; }
.ccvc-encum-ph-d code { background: var(--surf-3); padding: 1px 5px; border-radius: 4px; font-size: var(--fs-12); color: var(--head); }

.ccvc-ch-stats { display: flex; align-items: stretch; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.ccvc-ch-chip { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; background: var(--surf-2); border: 1px solid var(--bd); border-radius: 9px; padding: 4px 12px; min-width: 88px; }
/* Reserve a uniform two-line height for the label so a title that wraps (e.g. "Master total paid")
   doesn't push its value below the others — every chip's value now starts at the same height. */
.ccvc-ch-chip > small { font-size: var(--fs-9-5); color: var(--muted); text-transform: uppercase; letter-spacing: .3px; line-height: 1.3; min-height: 2.6em; }
.ccvc-ch-chip > b { font-size: var(--fs-14); color: var(--head); line-height: 1.25; white-space: nowrap; }
.ccvc-ch-input { width: 104px; height: 23px; font-size: var(--fs-13); padding: 1px 6px; border-radius: 5px; margin-top: 1px; }

/* Past-due reminder strip — a slim amber attention banner across the top of the claim body, so a
   due reminder is visible on every tab (not just buried in one section). claim.js shows it only when
   the viewer opted into due-reminder surfacing and the claim actually has a past-due reminder. */
.ccvc-claimremwarn { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 14px; border-radius: 8px; background: rgba(217,119,6,.13); border: 1px solid rgba(217,119,6,.34); color: var(--warning); font-weight: 600; font-size: var(--fs-13); text-decoration: none; }
/* Own hide rule: the generic .hide (display:none, no !important) loses to the display:flex above at
   equal specificity, so the strip needs this two-class rule to actually collapse when JS hides it. */
.ccvc-claimremwarn.hide { display: none; }
.ccvc-claimremwarn:hover { background: rgba(217,119,6,.2); color: var(--warning); text-decoration: none; }
.ccvc-claimremwarn > .fa-bell { font-size: var(--fs-14); }
.ccvc-claimremwarn .ccvc-claimremwarn-go { margin-left: auto; font-weight: 600; opacity: .9; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* Master / Legacy claim no. chips read as plain text until "Edit claim". The header sits outside
   .tab-content, so the form's read-mode input rules never reached it — this opts the two identity
   inputs into the same lock. !important because the theme layer styles .form-control borders and
   background with !important, which would otherwise keep the read-mode chip looking like a box. */
.ccvc-readmode .ccvc-ch-lockable { pointer-events: none; border-color: transparent !important; background: transparent !important; padding-left: 0; font-weight: 700; color: var(--head); }
a.ccvc-ch-rel { text-decoration: none; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
a.ccvc-ch-rel:hover { border-color: var(--accent); background: var(--accentbg); }
a.ccvc-ch-rel > b { color: var(--primary); }
a.ccvc-ch-rel > b .fa { color: var(--accent); margin-right: 2px; }
/* Overview ATTENTION tiles — clickable doors (Payments tab / claim work queue / Document checklist)
   with a small breakdown line. Tones: warn = something to look at (on-hold payment, outstanding
   docs); alert = act now (overdue work-queue item). The header chips keep the money-identity stats
   these replaced. */
a.ccvc-ovt-link { display: block; text-decoration: none; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
a.ccvc-ovt-link:hover { border-color: var(--accent); background: var(--accentbg); }
.ccvc-ovt em { display: block; font-style: normal; font-size: var(--fs-11); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-ovt-warn { border-color: var(--accent); }
.ccvc-ovt-warn > div { color: var(--accentfg); }
.ccvc-ovt-alert { border-color: var(--danger); }
.ccvc-ovt-alert > div { color: var(--danger); }
.ccvc-ovt-alert em { color: var(--danger); font-weight: 600; }
/* Claim-age line tucked under the Overview milestone pipeline: age + days-in-stage on the left,
   the claim's most recent touch (payment / correspondence / receipt) right-justified. */
.ccvc-cpipe-age { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); margin: -8px 4px 16px 4px; }
.ccvc-cpipe-age b { color: var(--head); font-weight: 700; }
/* Upcoming (not yet reached) Key-milestones row — the scheduled board date. */
.ccvc-mrow-up b { color: var(--accentfg); }

/* Maximum Award hero chip — the overall claim ceiling (supersedes the pay-code group caps) with a
   utilization bar (amber >=85% used, red over cap). Sits inline as the first, wider cell of the
   Overview metric-tiles row (.ccvc-ov-tiles-award), left of Total paid. */
.ccvc-ov-tiles-award { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 760px) { .ccvc-ov-tiles-award { grid-template-columns: 1fr; } }
.ccvc-award-hero { display: flex; flex-direction: column; justify-content: center; background: var(--accentbg); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 16px; }
.ccvc-award-hero-lbl { font-size: var(--fs-10-5); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--head); }
.ccvc-award-hero-pct { color: var(--muted); font-weight: 700; }
.ccvc-award-hero-val { font-size: var(--fs-20); font-weight: 800; color: var(--head); margin-top: 2px; line-height: 1.2; }
.ccvc-award-hero-sub { font-size: var(--fs-12); font-weight: 500; color: var(--muted); }
.ccvc-award-hero-track { height: 6px; background: var(--surf); border: 1px solid var(--bd); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.ccvc-award-hero-fill { height: 100%; background: var(--primary); border-radius: 4px; min-width: 2px; }
.ccvc-award-hero.ccvc-award-near .ccvc-award-hero-fill { background: var(--warn); }
.ccvc-award-hero.ccvc-award-over .ccvc-award-hero-fill { background: var(--bad); }
.ccvc-award-hero.ccvc-award-near .ccvc-award-hero-pct { color: var(--warn); }
.ccvc-award-hero.ccvc-award-over .ccvc-award-hero-pct { color: var(--bad); }

.ccvc-ch-ctrls { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.ccvc-ch-field { display: flex; flex-direction: column; gap: 2px; }
.ccvc-ch-field > label { font-size: var(--fs-9-5); color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font-weight: 700; margin: 0; }
.ccvc-ch-date { width: 122px; height: 30px; font-size: var(--fs-13); }
.ccvc-ch-select { min-width: 150px; height: 30px; font-size: var(--fs-13); }
/* size the Investigator select2 widget to the field */
/* 12.46 x 13px = 162px, unchanged at scale 1. Must be calc() against the token, NOT em: select2
   builds .select2-container as a SIBLING of the <select>, so it inherits font-size from the strip
   (16px from Bootstrap's body) rather than the 13px its own text renders at. An em here would be
   both the wrong size and immune to --ccvc-fs-scale. */
.ccvc-chstrip .select2-container { width: calc(var(--fs-13) * 12.46) !important; }


/* ============ Explorer "Summarize by" bar ============ */
/* Idle: one quiet strip under the Explorer header. Active: a measure toggle + wrapping group
   tiles; the tile bar is proportional to the largest group for at-a-glance comparison. */
.ccvc-szbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; background: var(--surf); border: 1px solid var(--bd); border-radius: 10px; }
.ccvc-szlab { font-size: var(--fs-11); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; }
.ccvc-szdim { width: auto; min-width: 150px; height: 30px; font-size: var(--fs-13); }
.ccvc-szmeasure .btn { font-size: var(--fs-11-5); padding: 3px 9px; border: 1px solid var(--bd); background: var(--surf); color: var(--muted); }
.ccvc-szmeasure .btn.active { background: var(--surf-2); color: var(--head); font-weight: 700; }
.ccvc-szhint { font-size: var(--fs-12-5); color: var(--muted); }
.ccvc-szactions { margin-left: auto; display: inline-flex; gap: 14px; font-size: var(--fs-12-5); white-space: nowrap; }
.ccvc-szactions a { color: var(--primary); text-decoration: none; }
.ccvc-szactions a:hover { text-decoration: underline; }

.ccvc-sztiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.ccvc-szt { background: var(--surf); border: 1px solid var(--bd); border-radius: 11px; padding: 9px 11px 8px; min-width: 0; }
.ccvc-szt .k { font-size: var(--fs-10-5); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-szt .n { font-size: var(--fs-18); font-weight: 800; color: var(--head); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-szt .m { font-size: var(--fs-11); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccvc-szt .bar { height: 4px; border-radius: 3px; background: var(--surf-2); margin-top: 7px; overflow: hidden; }
.ccvc-szt .bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.ccvc-szt-drill { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.ccvc-szt-drill:hover { transform: translateY(-2px); border-color: var(--bd2, var(--bd)); box-shadow: 0 6px 16px rgba(16, 24, 40, .08); }
.ccvc-szt.sel { background: var(--primary); border-color: var(--primary); position: relative; }
/* The drill's escape hatch, made visible. The tile toggle already cleared the drill; only a tooltip
   said so, so the × states it. Deliberately NOT its own button - it inherits the tile's delegated
   click, so there is exactly one code path to clear a drill and no chance of the two diverging.
   Sits over the .k eyebrow, which is why that line has its own padding-right below. */
.ccvc-szt-x { position: absolute; top: 5px; right: 7px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: var(--fs-15); line-height: 1; color: rgba(255,255,255,.66); background: rgba(255,255,255,.10); }
.ccvc-szt.sel:hover .ccvc-szt-x { color: #fff; background: rgba(255,255,255,.22); }
.ccvc-szt.sel .k { padding-right: 22px; }
.ccvc-szt.sel .k, .ccvc-szt.sel .m { color: rgba(255, 255, 255, .72); }
.ccvc-szt.sel .n { color: #fff; }
.ccvc-szt.sel .bar { background: rgba(255, 255, 255, .18); }
.ccvc-szt-more { cursor: pointer; border-style: dashed; }
.ccvc-szt-more .n { color: var(--muted); }

/* ==========================================================================
   Claim file versioning + Pages panel (page ops on PDFs)
   ========================================================================== */
/* vN pill on the Files grid: this row is a revision; click opens version history */
.ccvc-vpill { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--accent, #b68a4e); color: #fff; font-size: var(--fs-10-5); font-weight: 800; line-height: 17px; cursor: pointer; vertical-align: 1px; }
.ccvc-vpill:hover { filter: brightness(1.08); }

/* "No file": the recorded path did not resolve. Deliberately neutral — grey, not red — because on a
   converted or pre-migration system this is the ordinary state of most rows and nothing is broken.
   The row is intact; only the file is absent. */
.ccvc-nofile { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--surface-2, #eef0f4); color: var(--text-muted, #667085); border: 1px solid var(--border, #e4e7ec); font-size: var(--fs-10-5); font-weight: 700; line-height: 16px; vertical-align: 1px; cursor: default; }
[data-theme="dark"] .ccvc-nofile { background: #2a3244; color: #9aa6bd; border-color: #3a4459; }

/* An action that cannot do its job. Kept visible and clickable — it explains why rather than
   disappearing, because a button that vanishes teaches nobody anything. */
.ccvc-gbtn-off { background: var(--surface-2, #eef0f4); color: var(--text-muted, #98a2b3); }
[data-theme="dark"] .ccvc-gbtn-off { background: #2a3244; color: #8d97ab; }

/* The count chip only colours itself when there is something to count. */
.ccvc-lstat-warn .ccvc-lstat-v { color: #b7791f; }

/* File Verification status icons. Deliberately NOT the generic .text-green / .text-red utilities:
   .text-green resolves to the brand accent (so a "found" tick rendered gold, not green) and
   .text-red is not defined anywhere at all, so a "missing" cross rendered in body colour. On the
   one screen whose entire job is telling you which files are missing, the colour is the message. */
.ccvc-fv-ok      { color: var(--success) !important; }
.ccvc-fv-bad     { color: var(--danger) !important; }
.ccvc-fv-unknown { color: var(--text-muted, #98a2b3) !important; }

/* version-history popover */
.ccvc-vpop { position: absolute; z-index: 2100; min-width: 300px; max-width: 380px; background: var(--surf, #fff); border: 1px solid var(--bd2, #cbd5e1); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 8px 10px; }
.ccvc-vpop-title { font-size: var(--fs-10-5); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted, #64748b); padding: 2px 4px 6px; border-bottom: 1px solid var(--bd, #e2e8f0); margin-bottom: 4px; }
.ccvc-vpop-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px dashed var(--bd, #e2e8f0); font-size: var(--fs-12); }
.ccvc-vpop-row:last-child { border-bottom: 0; }
.ccvc-vpop-v { font-weight: 800; color: var(--head, #1e293b); flex: none; }
.ccvc-vpop-row.latest .ccvc-vpop-v { color: var(--accent, #b68a4e); }
.ccvc-vpop-meta { color: var(--muted, #64748b); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccvc-vpop-open { flex: none; font-weight: 700; color: var(--primary, #1b2a4a); cursor: pointer; }
.ccvc-vpop-open:hover { text-decoration: underline; }

/* Pages modal — z-index above the branded-viewer overlay (1080) so it can open ON TOP of the
   viewer's Pages button; same for the signature capture modal in Edit mode. */
#ppModal, #sigModal { z-index: 1090; }
.ccvc-pp-dialog { max-width: 1040px; }
.ccvc-pp-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; border-bottom: 1px solid var(--bd, #e2e8f0); margin-bottom: 12px; }
.ccvc-pp-sep { width: 1px; height: 20px; background: var(--bd2, #cbd5e1); margin: 0 4px; }
.ccvc-pp-hint { margin-left: auto; font-size: var(--fs-11-5); color: var(--muted, #64748b); }
.ccvc-pp-grid { display: flex; flex-wrap: wrap; gap: 14px; max-height: 56vh; overflow-y: auto; padding: 4px 2px 8px; }
.ccvc-pp-card { position: relative; border: 1px solid var(--bd2, #cbd5e1); border-radius: 8px; background: var(--surf, #fff); padding: 8px 8px 22px; cursor: grab; box-shadow: 0 2px 6px rgba(16, 24, 40, .08); transition: outline-color .1s; }
.ccvc-pp-card.sel { outline: 2.5px solid var(--accent, #b68a4e); outline-offset: 1px; }
.ccvc-pp-card.dragging { opacity: .45; }
.ccvc-pp-card.ccvc-pp-new { border-style: dashed; border-color: var(--accent, #b68a4e); }
.ccvc-pp-canvaswrap { display: block; transition: transform .15s ease; }
.ccvc-pp-canvaswrap.rot90 { transform: rotate(90deg) scale(.72); }
.ccvc-pp-canvaswrap.rot180 { transform: rotate(180deg); }
.ccvc-pp-canvaswrap.rot270 { transform: rotate(270deg) scale(.72); }
.ccvc-pp-badge { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: var(--fs-10-5); color: var(--muted, #64748b); font-weight: 600; }
.ccvc-pp-card.ccvc-pp-new .ccvc-pp-badge { color: var(--accent, #b68a4e); }
.ccvc-pp-rot { position: absolute; bottom: 4px; right: 7px; font-size: var(--fs-9-5); color: var(--warn, #b3760f); font-weight: 700; }
.ccvc-pp-removed { display: none; position: absolute; inset: 0; border-radius: 8px; background: rgba(192, 57, 43, .12); color: #c0392b; font-size: var(--fs-11-5); font-weight: 800; align-items: center; justify-content: center; gap: 5px; }
.ccvc-pp-card.removed .ccvc-pp-removed { display: flex; }
.ccvc-pp-card.removed canvas { opacity: .35; filter: grayscale(1); }
.ccvc-pp-footer { align-items: center; }
.ccvc-pp-note { margin-right: auto; font-size: var(--fs-11-5); color: var(--muted, #64748b); }
[data-theme="dark"] .ccvc-pp-removed { background: rgba(240, 149, 149, .14); color: #f09595; }

/* ---- annotate mode (Edit in the branded viewer) ---- */
.ccvc-pdf-editbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 12px; background: var(--surf2, #f6f8fb); border-bottom: 1px solid var(--bd, #e2e8f0); }
.ccvc-pae-tool { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-11-5); font-weight: 600; color: #334155; border: 1px solid var(--bd2, #cbd5e1); background: var(--surf, #fff); border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.ccvc-pae-tool.on { background: var(--primary, #1b2a4a); color: #fff; border-color: var(--primary, #1b2a4a); }
.ccvc-pae-sep { width: 1px; height: 18px; background: var(--bd2, #cbd5e1); margin: 0 3px; }
.ccvc-pae-hint { margin-left: auto; font-size: var(--fs-11); color: var(--muted, #64748b); }
.ccvc-pae-cancel { font-size: var(--fs-11-5); font-weight: 600; border: 1px solid var(--bd2, #cbd5e1); background: var(--surf, #fff); color: #334155; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.ccvc-pae-save { font-size: var(--fs-11-5); font-weight: 700; border: 1px solid var(--accent, #b68a4e); background: var(--accent, #b68a4e); color: #fff; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.ccvc-pae-save:disabled { opacity: .6; cursor: default; }
/* Redact: red-tinted so the destructive tool reads differently from the annotate tools,
   and the Save button goes red while any redaction is pending. */
.ccvc-pae-tool.pae-redact { color: #b02a2a; border-color: #e3b4b4; }
.ccvc-pae-tool.pae-redact.on { background: #b02a2a; color: #fff; border-color: #b02a2a; }
.ccvc-pae-save.pae-danger { background: #b02a2a; border-color: #b02a2a; }
/* Live "will save" chips beside the Save button (one per pending edit type; redactions red)
   and the itemized lines inside the save-summary confirm. */
.ccvc-pae-chips { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ccvc-pae-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-10-5); font-weight: 600; color: var(--primary, #1b2a4a); background: var(--surf, #fff); border: 1px solid var(--bd2, #cbd5e1); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ccvc-pae-chip.red { color: #b02a2a; background: #fdf0f0; border-color: #e3b4b4; }
.ccvc-pae-sumline { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-13); text-align: left; margin: 3px 0; }
.ccvc-pae-sumline i { margin-top: 3px; color: var(--ok, #2e7d32); }
.ccvc-pae-sumline.red { color: #b02a2a; font-weight: 600; }
.ccvc-pae-sumline.red i { color: #b02a2a; }
.ccvc-pae-sumnote { font-size: var(--fs-11-5); color: var(--muted, #64748b); text-align: left; margin-top: 9px; }
[data-theme="dark"] .ccvc-pae-chip.red { background: rgba(240, 149, 149, .12); }
.ccvc-pae-stampwrap { position: relative; display: inline-flex; }
.ccvc-pae-stampmenu { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 140px; background: var(--surf, #fff); border: 1px solid var(--bd2, #cbd5e1); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .16); padding: 4px; flex-direction: column; }
.ccvc-pae-stampmenu.open { display: flex; }
.ccvc-pae-stampmenu button { text-align: left; font-size: var(--fs-11-5); font-weight: 600; color: #334155; background: transparent; border: 0; border-radius: 6px; padding: 6px 9px; cursor: pointer; }
.ccvc-pae-stampmenu button:hover { background: var(--surf2, #f6f8fb); }
.ccvc-ann-layer { position: absolute; inset: 0; z-index: 5; }
.ccvc-ann-input { position: absolute; z-index: 6; border: 1.5px solid var(--accent, #b68a4e); border-radius: 3px; background: rgba(255, 255, 255, .92); color: #1b2a4a; font-family: Arial, sans-serif; padding: 0 3px; min-width: 120px; outline: 0; }
.ccvc-ann-note-input { position: absolute; z-index: 6; border: 1.5px solid #e3cd7b; border-radius: 4px; background: #fff8dc; color: #6b5b1e; font-family: Arial, sans-serif; padding: 3px 5px; outline: 0; resize: none; }
.ccvc-sig-dialog { max-width: 470px; }
.ccvc-sig-canvas { display: block; width: 100%; height: auto; border: 1.5px dashed var(--bd2, #cbd5e1); border-radius: 8px; background: #fff; cursor: crosshair; touch-action: none; }
.ccvc-sig-hintline { font-size: var(--fs-11); color: var(--muted, #64748b); margin-top: 6px; }

/* ==========================================================================
   Canonical busy/progress primitives (loaders cleanup part 4)
   - .ccvc-loading: THE inline "Loading…" line for panels/hubs/modals
     (the branded viewer keeps its own white-on-dark .ccvc-pdf-loading).
   - .ccvc-progress: THE determinate bar — a track whose child is the fill;
     callers set the fill's width. Used by the portal-sync modal, the Finance
     demo bars, and the file-upload preview.
   Full-page overlay = ccvcBusy(); grid loads = the DataTables chip.
   ========================================================================== */
.ccvc-loading { width: 100%; padding: 28px 12px; color: var(--muted, #64748b); font-size: var(--fs-13); text-align: center; }
.ccvc-progress { height: 6px; border-radius: 999px; background: var(--surf-3, #eef2f7); overflow: hidden; }
.ccvc-progress > * { display: block; height: 100%; width: 0; background: var(--primary, #1b2a4a); border-radius: 999px; transition: width .4s ease; }
.dz-progress.ccvc-progress { display: inline-block; width: 130px; vertical-align: middle; }


/* ============================================================================
   FORM GROUP STYLE — "outline" variant (System Administration → Options →
   Appearance → Form section style). Default is the tinted header band defined
   with .ccvc-vgrp above; body.ccvc-groupstyle-outline switches every group
   fieldset to the classic outlined box with the title sitting ON the border
   (native fieldset/legend rendering carves the border around the label).
   ============================================================================ */
body.ccvc-groupstyle-outline .ccvc-vgrp { box-shadow: none; border: 1.5px solid var(--bd); border-radius: 10px; padding-bottom: 10px; }
body.ccvc-groupstyle-outline .ccvc-vgrp > legend {
    width: auto; margin: 0 0 4px 8px; padding: 0 7px;
    background: transparent; border: 0; border-radius: 0;
    text-transform: none; letter-spacing: .2px; font-size: var(--fs-12-5); color: var(--head);
}
body.ccvc-groupstyle-outline .ccvc-vgrp > legend::before { display: none; }


/* ============================================================================
   USER STATUS — signed-in board over the roster. The board strip answers
   "who is on right now?" before the grid; the presence pill replaces the old
   check/cross icons in the Status column.
   ============================================================================ */
/* inset matches the grid wrapper's 14px side padding so the board lines up with the
   Search box instead of touching the listcard outline */
.ccvc-us-boardh { font-size: var(--fs-11); letter-spacing: .06em; color: var(--muted); font-weight: 700; text-transform: uppercase; margin: 8px 14px 8px; }
.ccvc-us-boardh b { color: #1e7c3d; }
.ccvc-us-board { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 14px 12px; }
.ccvc-us-board .ccvc-us-empty { font-size: var(--fs-12-5); color: var(--muted); padding: 2px; }
/* Owner pick D from the card mockups: the signed-in card takes the soft navy tint with a
   firmer border and a whisper of shadow, so it sits "above" the white listcard. */
.ccvc-us-person { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 14px 8px 9px; background: var(--surf-2); box-shadow: 0 2px 6px rgba(22,33,61,.10); }
.ccvc-us-av { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-size: var(--fs-12); font-weight: 700; display: flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; }
.ccvc-us-av i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #2e9e4f; border: 2px solid var(--surf-2); }
.ccvc-us-nm { font-size: var(--fs-13); font-weight: 700; color: var(--head); line-height: 1.2; }
.ccvc-us-sub { font-size: var(--fs-11); color: var(--muted); }

/* presence pill (User Status grid + reusable) */
.ccvc-pres { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: var(--fs-11-5); font-weight: 700; white-space: nowrap; }
.ccvc-pres .dot { width: 8px; height: 8px; border-radius: 50%; }
.ccvc-pres.on { background: #e7f6ec; color: #1e7c3d; }
.ccvc-pres.on .dot { background: #2e9e4f; box-shadow: 0 0 0 3px rgba(46,158,79,.18); }
.ccvc-pres.off { background: var(--surf-2); color: var(--muted); }
.ccvc-pres.off .dot { background: #b6c0cd; }
[data-theme="dark"] .ccvc-pres.on { background: rgba(46,158,79,.16); color: #6fd394; }


/* Companion to GetClippedColumn in DataTablesHelper.js — one-line grid cell, full value in the
   tooltip. ch rather than px so the clip point follows the type: 24ch is about 24 characters at
   whatever size --fs-base currently resolves to, which keeps the same words visible at 110% and
   125% instead of clipping progressively harder as the text grows.
   A width cap is needed at all because these grids run table-layout: auto — the browser will happily
   widen a column to fit its longest value and then wrap it, and a column `width` hint alone does not
   stop that. Capping the inner span sidesteps the table layout entirely. */
.ccvc-clip { display: inline-block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* One-sentence grid footer: the page-length select is embedded in the info line
   ("Showing 1 to [10] of 18,335 entries") — the emptied Show-entries control hides.

   Keyed on .ccvc-lenslot, NOT on an ancestor .dt-infolength. CcvcMountLengthSlot creates that span
   for any grid that wires the callbacks, but only grids using the app-wide `dom` string end up
   inside .dt-infolength. Reports (Insights) builds its own DataTable and can't use that dom — it
   loads neither Buttons nor SearchBuilder — so under the old scope its select matched nothing and
   fell back to the unstyled Bootstrap control, which renders heavier and narrower than every other
   grid's. Scoping to the slot is what actually makes the footer un-forkable: wire the callbacks and
   you get the chrome, wherever the info line happens to live. */
.ccvc-lenslot select { height: 26px; width: auto; display: inline-block; margin: 0 3px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--text); font-size: var(--fs-12-5); font-weight: 400; line-height: 1.4; }
/* Same reason: the sentence around the select has to match too, or Reports' info line sits at the
   Bootstrap default while every other grid uses the muted 12.5px. */
.ccvc-len-integrated .dataTables_info { color: var(--text-muted); font-size: var(--fs-12-5); line-height: 1.4; }
/* !important: .pw-card forces the length control inline-flex !important, and the emptied
   control must stay hidden on the workbench too once the select lives in the sentence. */
.ccvc-len-integrated .dataTables_length { display: none !important; }


/* Payment workbench money-story columns: muted negative reductions; Requested/Paid bold. */
.pw-redamt { color: var(--muted); }
.pw-amtmain { font-weight: 700; }


/* ---- Preload State Data: page-level state hero (Genoa-only) ---------------
   The selected state drives all four preload cards, so the selector lives in a
   navy strip above them (reuses the sidebar --side-* tokens, so it matches the
   app chrome in both light and dark mode). Chips = what WOULD load right now. */
.ccvc-pdhero {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    background: var(--side-bg); color: var(--side-fg);
    border-radius: 14px; padding: 16px 22px; margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(18, 29, 52, .18);
}
.ccvc-pdhero-name { font-size: var(--fs-24); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #fff; line-height: 1.1; min-width: 150px; }
.ccvc-pdhero-sub { font-size: var(--fs-12); color: var(--side-muted); margin-top: 2px; }
.ccvc-pdhero-lbl { display: block; font-size: var(--fs-10-5); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--side-muted); margin-bottom: 4px; }
.ccvc-pdhero select.form-control {
    background: rgba(255, 255, 255, .1); color: #fff;
    border: 1px solid rgba(255, 255, 255, .35); min-width: 230px;
}
.ccvc-pdhero select.form-control:focus { background: rgba(255, 255, 255, .16); color: #fff; border-color: var(--side-active-fg); box-shadow: none; }
.ccvc-pdhero select.form-control option { color: #1f2937; background: #fff; }
.ccvc-pdhero-chips { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.ccvc-pdhero-chip {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(182, 138, 78, .55);
    border-radius: 9px; padding: 7px 14px; text-align: center; min-width: 76px;
}
.ccvc-pdhero-chip b { display: block; font-size: var(--fs-16); line-height: 1.2; color: var(--side-active-fg); }
.ccvc-pdhero-chip span { font-size: var(--fs-10-5); color: var(--side-muted); }
@media (max-width: 900px) { .ccvc-pdhero-chips { margin-left: 0; } }


/* ---- FixedHeader floating clone (grid headers pinned while scrolling) ------
   The DataTables FixedHeader extension clones the thead into a position:fixed
   table, which is immune to the .ccvc-listcard overflow:hidden that would
   defeat plain CSS position:sticky on the real thead. It floats at
   headerOffset = the sticky topbar height, so its z-index sits just under the
   topbar (25) and the fill matches the card surface in both themes. */
table.dataTable.fixedHeader-floating {
    background: var(--surf, #fff);
    z-index: 24 !important;
    box-shadow: 0 4px 10px rgba(16, 24, 40, .10);
    margin: 0 !important;
}
table.dataTable.fixedHeader-floating thead tr > th:first-child,
table.dataTable.fixedHeader-floating thead tr > th:last-child { border-radius: 0; }

/* ---- Claims list: "By master claim" grouped view (family rows + injected children). ---- */
.ccvc-fam-chev { display:inline-flex; width:18px; justify-content:center; margin-right:4px; color:var(--muted, #6b7280); transition: transform .15s; }
tr.ccvc-fam-parent { cursor: pointer; }
tr.ccvc-fam-parent.open .ccvc-fam-chev { transform: rotate(90deg); }
.ccvc-fam-chip { display:inline-block; background: var(--navy, #1b2c4f); color:#fff; border-radius:20px; font-size: var(--fs-10); font-weight:700; padding:1px 8px; margin-left:8px; vertical-align:1px; }
tr.ccvc-fam-child td { background: rgba(27, 44, 79, 0.035); }
.ccvc-fam-indent { display:inline-block; width:22px; border-left:2px solid rgba(27,44,79,.18); margin-right:6px; height:1em; vertical-align:-2px; }
.ccvc-vsflag { display:inline-block; border-radius:4px; font-size: var(--fs-9); font-weight:800; letter-spacing:.05em; padding:1px 6px; margin-left:6px; vertical-align:1px; }
.ccvc-vsflag.p { background: var(--navy, #1b2c4f); color:#fff; }
.ccvc-vsflag.s { background: rgba(107,114,128,.14); color:#6b7280; border:1px solid rgba(107,114,128,.3); }

/* ---- Claims list: declared-incident filter, docked in the grid toolbar left of Export. ---- */
.ccvc-incf { display:inline-flex; align-items:center; gap:0; margin-right:10px; vertical-align:middle; }
.ccvc-incf-lbl { font-size: var(--fs-11); font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    background: rgba(27,44,79,.06); border:1px solid rgba(27,44,79,.15); border-right:none;
    border-radius:6px 0 0 6px; padding:5px 9px; color:#4b5563; white-space:nowrap; }
.ccvc-incf .select2-container, .ccvc-incf select { min-width:200px; max-width:280px; }
.ccvc-incf .select2-container .select2-selection--single { border-radius:0 6px 6px 0 !important; }

/* ---------------------------------------------------------------------------------------------
   PAYMENT MODAL — form left, read-only status rail right.
   The modal has far more width available than height (it opens on a 1920x1080 desktop but must fit
   inside ~906px of viewport), so everything read-only moved sideways into a rail instead of costing
   rows: status, the lifecycle stamps, warrant/voucher/Fin V/O and the pay-code group balance. That
   is what lets the Adjustments table sit in the same modal without scrolling.
   --------------------------------------------------------------------------------------------- */
.ccvc-pmt-dialog { max-width: min(1500px, 96vw); }
.ccvc-pmt-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .ccvc-pmt-body { grid-template-columns: minmax(0, 1fr); } }
.ccvc-pmt-main { min-width: 0; }

/* Grouped field sets. A plain <hr> said "something changes here" without saying what; a legend
   names the group, which is the actual complaint being fixed. */
.ccvc-pmt-grp { border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px 0; margin: 0 0 12px; min-width: 0; }
.ccvc-pmt-grp:last-child { margin-bottom: 0; }
.ccvc-pmt-leg { width: auto; float: none; padding: 0 6px; margin: 0; font-size: var(--fs-11);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ccvc-pmt-grp .form-group { margin-bottom: 10px; }
/* Ledger left, Add button immediately to its right, both aligned to the top. The button used to sit
   on a line of its own above the list, which spent a whole row of modal height on one control while
   the ledger - three short columns - left most of the width empty. Capping the ledger at 640px keeps
   the amount column near its labels instead of stranding it against the far edge. */
.ccvc-adjwrap { display: grid; grid-template-columns: minmax(0, 640px) auto; gap: 0 16px; align-items: start; }
.ccvc-pmt-adjhead { display: flex; justify-content: flex-start; margin: 0; }
/* Adjustments ledger. Three columns - type, amount, actions - with the amount right-aligned and
   tabular so the figures stack into a readable column and the total lines up under them. No header
   row: with two labelled columns and a total, one would be pure overhead on a 2-4 row list. */
/* Reserve room for about three adjustments plus the total. Two reasons, and the second is the real
   one: the modal stops RESIZING as adjustments are added and removed - add one on a single-row
   payment today and the dialog grows under the pointer, moving the buttons you were aiming at.
   Expressed against --fs-base rather than a flat pixel count so the reservation grows with the
   per-user text size instead of clipping at 125%: a row is its 10px of padding plus a line box, and
   8.6 base-units covers three of those plus the heavier total line. */
.ccvc-adjledger { font-size: var(--fs-12-5); min-height: calc(var(--fs-base) * 8.6); }
.ccvc-adjrow { display: grid; grid-template-columns: 1fr auto 62px; align-items: center; gap: 0 14px;
    padding: 5px 2px; border-bottom: 1px solid var(--border); }
.ccvc-adjrow:last-child { border-bottom: 0; }
.ccvc-adjtype { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccvc-adjamt { text-align: right; font-variant-numeric: tabular-nums; color: var(--head); }
.ccvc-adjacts { display: flex; gap: 4px; justify-content: flex-end; }
/* The total reconciles against Reduction Amt above, so it reads as a conclusion, not another row. */
.ccvc-adjtot { border-top: 2px solid var(--border); border-bottom: 0; margin-top: 2px; padding-top: 7px; font-weight: 700; }
.ccvc-adjtot .ccvc-adjtype, .ccvc-adjtot .ccvc-adjamt { color: var(--head); }
.ccvc-adjempty { color: var(--text-muted); padding: 8px 2px; }

/* Emergency / Supplemental side by side. .fancy-checkbox is a block-level label, so without this
   the two flags stack and cost a second line for no content. */
.ccvc-pmt-flags { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ccvc-pmt-flags .fancy-checkbox { margin: 0; }

/* The rail itself. */
.ccvc-pmt-rail { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; position: sticky; top: 0; }
.ccvc-pmt-statwrap { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.ccvc-pmt-statlbl { font-size: var(--fs-10); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ccvc-pmt-stat { font-size: var(--fs-15); font-weight: 700; color: var(--head); }

/* Lifecycle progression. Each step is lit by its OWN stamp arriving - :has() on a non-empty value -
   so the rail reads as "how far has this got" rather than four unrelated labels. The connector is a
   single ::before rule on the list so steps can be added without redrawing anything. */
.ccvc-pmt-steps { list-style: none; margin: 0 0 12px; padding: 0 0 0 18px; position: relative; }
.ccvc-pmt-steps::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.ccvc-pmt-step { position: relative; padding: 0 0 11px; display: flex; flex-direction: column; gap: 1px; }
.ccvc-pmt-step:last-child { padding-bottom: 0; }
.ccvc-pmt-step::before { content: ""; position: absolute; left: -18px; top: 4px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); }
.ccvc-pmt-step:has(.ccvc-pmt-stepval:not(:empty))::before { background: var(--accentfg); border-color: var(--accentfg); }
.ccvc-pmt-stepname { font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); }
.ccvc-pmt-step:has(.ccvc-pmt-stepval:not(:empty)) .ccvc-pmt-stepname { color: var(--head); }
.ccvc-pmt-stepval { font-size: var(--fs-12); color: var(--text); font-variant-numeric: tabular-nums; }
.ccvc-pmt-stepval:empty::before { content: "\2014"; color: var(--text-muted); }
.ccvc-pmt-stepwho { font-size: var(--fs-11); color: var(--text-muted); }
.ccvc-pmt-stepwho:empty { display: none; }
.ccvc-pmt-qcbtn { align-self: flex-start; margin-top: 4px; }

/* Reference numbers - present but rarely acted on, so quietest thing in the rail. */
.ccvc-pmt-facts { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-11-5); }
.ccvc-pmt-facts dt { font-weight: 600; color: var(--text-muted); margin-top: 6px; }
.ccvc-pmt-facts dt:first-child { margin-top: 0; }
.ccvc-pmt-facts dd { margin: 0; color: var(--head); font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; }
.ccvc-pmt-facts dd:empty::before { content: "\2014"; color: var(--text-muted); font-weight: 400; }

/* select2 inside a Bootstrap input-group (e.g. the payment modal's Receipt File + View button).
   Bootstrap 4 makes .input-group a flex row and expects its controls to be flex items, but select2
   replaces the <select> with a container carrying an inline width:100%, which claims the whole row
   and wraps the append button onto the next line. width:1% + flex-grow is the documented way to hand
   sizing back to flex - the 1% is a seed the flex algorithm grows, not a real width. Square off the
   inner join so the select and the button read as one control. */
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }
.input-group > .select2-container .select2-selection--single { height: 100%; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .select2-container + .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Work-as: picker in the account menu, warning chip in the topbar. The chip is amber because it is
   a warning, not a name badge — it only appears while you are acting as somebody else, and your
   permissions are narrowed while it is up. */
.ccvc-acct-workas { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.ccvc-acct-workas label { font-size: var(--fs-11); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--head); margin: 0; }
.ccvc-acct-workas small { font-size: var(--fs-11); color: var(--muted); line-height: 1.45; }
.ccvc-workas-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #E0A93B; background: #FBF0DC; color: #8A5D0C; border-radius: 999px; padding: 3px 10px; font-size: var(--fs-12-5); font-weight: 600; cursor: pointer; }
.ccvc-workas-chip:hover { background: #F6E4C4; }
.ccvc-workas-exit { font-weight: 700; text-decoration: underline; margin-left: 6px; }

/* Names what a Save button reaches, for a form that spans a two-column layout. */
.ccvc-save-scope { flex: 1 1 auto; font-size: var(--fs-12); color: var(--muted); }

/* ---- System Administration -> Build History (Genoa only) -------------------------------------
   The "running now" strip is the one thing somebody opening this page under pressure needs first,
   so it gets the brand gradient and the largest type on the screen; the table below is reference. */
/* Reuses the sidebar's own gradient token rather than restating a navy, so State Branding
   re-themes this strip along with the rest of the shell. */
.ccvc-bh-now { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding: 16px 20px; margin-bottom: 14px; border-radius: 8px; background: var(--side-bg); color: var(--side-fg, #fff); }
.ccvc-bh-lab { font-size: var(--fs-10-5); text-transform: uppercase; letter-spacing: .09em; opacity: .72; }
.ccvc-bh-val { font-size: var(--fs-17); font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ccvc-bh-val small { font-size: var(--fs-12); font-weight: 400; opacity: .75; }
.ccvc-bh-val.ccvc-bh-sm { font-size: var(--fs-13-5); font-weight: 600; }
.ccvc-bh-mono { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.ccvc-bh-table td, .ccvc-bh-table th { vertical-align: top; }
.ccvc-bh-num { font-variant-numeric: tabular-nums; font-weight: 650; }
.ccvc-bh-sm { font-size: var(--fs-12-5); }
/* A milestone reads at a glance from the row, not just from the star. */
.ccvc-bh-ms > td { background: linear-gradient(90deg, rgba(224, 169, 59, .10), transparent 55%); }
.ccvc-bh-star { color: #E0A93B; margin-left: 4px; }
.ccvc-bh-cur > td { background: #E8F5EE; }
.ccvc-bh-pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: var(--fs-11); font-weight: 650; background: #D6EEE0; color: #1F7A4D; margin-right: 6px; }
.ccvc-bh-warn { font-size: var(--fs-11-5); color: #8A5D0C; margin-top: 3px; }

/* ------------------------------------------------------------------------------------------------
   Locked features — an upgrade module this agency has not purchased.
   ------------------------------------------------------------------------------------------------
   Applied by the server wherever a module gate says "off"; site.js turns any click into an
   explanation instead of a navigation. Generic on purpose: nav links, buttons, tabs and cards all
   take the same class, so a new gated surface needs no new CSS.

   Dimmed but still legible, and NOT hidden. A customer who cannot see a feature at all cannot ask to
   buy it, and staff who used it at another agency would report it missing as a bug. The padlock is
   what carries the meaning; the dimming just keeps it from competing with live controls.

   cursor stays `pointer` because the element genuinely does something when clicked. `not-allowed`
   would promise a dead click and then contradict itself by opening a dialog.
   ---------------------------------------------------------------------------------------------- */
.ccvc-locked { opacity: .5; cursor: pointer; }
.ccvc-locked:hover { opacity: .72; }

.ccvc-locked::after {
    content: "\f023"; /* fa-lock, FontAwesome 4 */
    font-family: FontAwesome;
    font-size: .85em;
    margin-left: 6px;
    flex-shrink: 0;
}

/* In the sidebar the label and the padlock sit at opposite ends, so the locks line up in a column
   and read as one group rather than as ragged punctuation after each label. */
.ccvc-nav.ccvc-locked::after { margin-left: auto; }

/* The nav's own hover brightens the background; a locked row must not look like it is about to open,
   so it keeps the resting treatment and only lifts its opacity (rule above). */
.ccvc-nav.ccvc-locked:hover { background: transparent; color: var(--side-fg); }