/* =============================================================================
   CCVC Online — navy/gold brand theme layer  (Phase 2 / P3a)
   -----------------------------------------------------------------------------
   A token-driven visual rebrand that sits ON TOP of Bootstrap 4.6 + the compiled
   admin theme (style.min.css) + site.css. It is the LAST stylesheet loaded, so
   equal-specificity rules win on source order, and !important is used only where
   the underlying theme/site rules are themselves !important or highly specific.

   Dark mode is driven entirely from here via  html[data-theme="dark"]  (the
   vendor theme ships NO dark mode). An inline script in _Header sets the
   attribute before first paint to avoid a flash; theme-toggle.js flips it.

   NO markup churn: this file restyles existing classes. The only template edits
   are the <link>/<script> tags and one theme-toggle <li> in the top nav.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1a. Typography scale  (phase 2b — collapsed, see docs/TYPOGRAPHY-TOKEN-MAP.md)
   -----------------------------------------------------------------------------
   THE SCALE. Eight steps. Every font-size in shell.css / theme.css / site.css —
   535 declarations — resolves to one of them. Before this the app used 26 distinct
   pixel values, with five of them (11 / 11.5 / 12 / 12.5 / 13) covering two thirds
   of all typography and no principle separating them. Twenty column-header
   declarations alone used twelve different sizes.

   PICK BY ROLE, not by eye. If you are about to write a new font-size, one of these
   is already right; if none fits, the honest move is to argue for a ninth step
   rather than to add a twenty-seventh literal.

   WHY calc(px * scale) AND NOT rem: rem would inherit the browser/OS font-size
   preference, a genuine accessibility win — but it would also change the app for
   anyone who has already set a non-default browser font size. That trade deserves
   its own decision. Root font-size is untouched; nothing sets html { font-size },
   so the browser default still governs anything measured in rem/em (Bootstrap's
   own components included).

   TO SCALE EVERYTHING: set --ccvc-fs-scale. Verified clean at 1.0, 1.1 and 1.25 —
   no clipping, no page scrolling sideways — after the two fixed-width text boxes
   were tied to the scale (.ccvc-acct-id strong, .ccvc-chstrip .select2-container).
   -------------------------------------------------------------------------- */
:root {
    --ccvc-fs-scale: 1;

    /* --- the scale ------------------------------------------------------------ */
    --fs-xs:   calc(11px   * var(--ccvc-fs-scale, 1));  /* badges, pills, status dots, dense chrome */
    --fs-sm:   calc(12px   * var(--ccvc-fs-scale, 1));  /* labels, column headers, secondary text   */
    --fs-base: calc(13px   * var(--ccvc-fs-scale, 1));  /* grid data, body copy, inputs, nav        */
    --fs-lg:   calc(15px   * var(--ccvc-fs-scale, 1));  /* sub-headings                             */
    --fs-xl:   calc(16.5px * var(--ccvc-fs-scale, 1));  /* card and panel titles                    */
    --fs-2xl:  calc(18px   * var(--ccvc-fs-scale, 1));  /* section headings                         */
    --fs-3xl:  calc(21px   * var(--ccvc-fs-scale, 1));  /* page titles                              */
    --fs-4xl:  calc(26px   * var(--ccvc-fs-scale, 1));  /* hero numbers, empty states               */

    /* --- display one-offs, deliberately outside the scale ---------------------- */
    /* One declaration each (a hero figure and an empty-state glyph). Folding them
       into --fs-4xl would drag the top of the scale around to serve two rules. */
    --fs-30:   calc(30px   * var(--ccvc-fs-scale, 1));
    --fs-40:   calc(40px   * var(--ccvc-fs-scale, 1));

    /* --- compatibility aliases (phase 2a names) -------------------------------- */
    /* The 535 call sites still say --fs-12, --fs-12-5 and so on. Repointing them
       HERE is what makes this a one-block change instead of a 535-site sweep, and
       it is why 2a was done separately.

       NOTE WHAT THIS DOES AND DOES NOT DO. It collapses by VALUE: every 12px
       declaration moves together, whether it was a label or grid data. The
       role-based assignment in the token map (§2, and the 26 conflicts in §5) is a
       per-selector judgement that these aliases cannot express — a label currently
       at 12px lands on --fs-base along with the grid, where by role it belongs on
       --fs-sm. That refinement is still open and is best done a screen at a time,
       replacing an alias with the semantic token as each area is touched.

       So: treat these as scaffolding, not as API. New code should use the eight
       names above. The aliases can be retired once no call site references them. */
    --fs-8:    var(--fs-xs);
    --fs-9:    var(--fs-xs);
    --fs-9-5:  var(--fs-xs);
    --fs-10:   var(--fs-xs);
    --fs-10-5: var(--fs-xs);

    --fs-11:   var(--fs-sm);
    --fs-11-5: var(--fs-sm);

    --fs-12:   var(--fs-base);
    --fs-12-5: var(--fs-base);
    --fs-13:   var(--fs-base);
    --fs-13-5: var(--fs-base);

    --fs-14:   var(--fs-lg);
    --fs-15:   var(--fs-lg);
    --fs-15-5: var(--fs-lg);

    --fs-16:   var(--fs-xl);
    --fs-16-5: var(--fs-xl);
    --fs-17:   var(--fs-xl);

    --fs-18:   var(--fs-2xl);
    --fs-19:   var(--fs-2xl);

    --fs-20:   var(--fs-3xl);
    --fs-21:   var(--fs-3xl);
    --fs-22:   var(--fs-3xl);

    --fs-24:   var(--fs-4xl);
    --fs-27:   var(--fs-4xl);
}

/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
    /* Brand ramp (CCVC navy → gold accent) */
    --brand-700: #13203a;
    --brand-600: #1b2a4a;
    --brand-500: #22335a;
    --brand-400: #3a4f7d;
    --brand-300: #b68a4e;

    --primary:        #1b2a4a;                    /* CCVC navy */
    --primary-hover:  #13203a;
    --primary-soft:   rgba(27, 42, 74, .09);      /* navy tint (selected rows, hovers) */
    --on-primary:     #ffffff;

    /* Legacy _TopNav gradient — that partial is retired (the shell uses .ccvc-topbar);
       kept on-brand (navy) in case the old top nav is ever rendered again. */
    --nav-bg: linear-gradient(110deg, #1d2d4f 0%, #1b2a4a 52%, #16243f 100%);
    --nav-fg: rgba(255, 255, 255, .95);
    --nav-fg-muted: rgba(255, 255, 255, .72);
    --nav-border: rgba(255, 255, 255, .14);
    --nav-hover-bg: rgba(255, 255, 255, .14);

    --accent: #b68a4e;   /* CCVC gold — links, active, highlights, focus */
    --accent-2: #c9a063; /* CCVC light gold/tan (3rd logo color) — decorative variety */
    --accent-2-soft: rgba(248, 216, 184, .5); /* pale peach from the logo figures — tints */

    /* Surfaces & text */
    --app-bg:       #eef1f6;
    --surface:      #ffffff;
    --surface-2:    #f6f8fb;   /* striped rows, table head, subtle fills */
    --surface-3:    #eef2f7;   /* hover rows, inset wells */
    --input-bg:     #ffffff;
    --input-disabled-bg: #eef1f5;

    --text:        #0f172a;
    --text-muted:  #64748b;
    --heading:     #1e293b;

    --border:        #e2e8f0;
    --border-strong: #cbd5e1;

    /* Semantic */
    --success: #16a34a;
    --danger:  #dc2626;
    --warning: #d97706;
    --info:    #2563eb;

    /* Effects */
    --focus-ring:  0 0 0 3px rgba(182, 138, 78, .35);
    --shadow-sm:   0 1px 2px rgba(16, 24, 40, .06);
    --shadow:      0 2px 10px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-lg:   0 14px 38px rgba(16, 24, 40, .14);
    --shadow-brand:0 8px 22px rgba(27, 42, 74, .22);

    --radius-sm:  8px;
    --radius:     12px;
    --radius-lg:  16px;
    --radius-pill: 999px;
}

html[data-theme="dark"] {
    --brand-700: #1b2a4a;
    --brand-600: #2e4675;
    --brand-500: #3a5da8;
    --brand-400: #6f8fce;
    --brand-300: #c9a063;

    --primary:       #3f63b0;                     /* lighter steel-navy so it reads on dark */
    --primary-hover: #5479c4;
    --primary-soft:  rgba(63, 99, 176, .20);
    --on-primary:    #ffffff;

    --nav-bg: linear-gradient(110deg, #22335a 0%, #1b2a4a 52%, #13203a 100%);
    --nav-fg: rgba(255, 255, 255, .95);
    --nav-fg-muted: rgba(255, 255, 255, .68);
    --nav-border: rgba(255, 255, 255, .10);
    --nav-hover-bg: rgba(255, 255, 255, .12);

    --accent: #c9a063;
    --accent-2: #dcc08a;
    --accent-2-soft: rgba(220, 192, 138, .22);

    --app-bg:    #0e1525;
    --surface:   #161d2e;
    --surface-2: #1b2335;
    --surface-3: #222c41;
    --input-bg:  #161d2e;
    --input-disabled-bg: #131a28;

    --text:       #e6eaf2;
    --text-muted: #94a3b8;
    --heading:    #f1f5f9;

    --border:        #283044;
    --border-strong: #3a455c;

    --success: #22c55e;
    --danger:  #ef4444;
    --warning: #f59e0b;
    --info:    #3b82f6;

    --focus-ring:  0 0 0 3px rgba(201, 160, 99, .35);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --shadow:      0 2px 12px rgba(0, 0, 0, .5);
    --shadow-lg:   0 18px 44px rgba(0, 0, 0, .6);
    --shadow-brand:0 10px 26px rgba(0, 0, 0, .55);
}

/* -----------------------------------------------------------------------------
   2. Base — page background, text, links, selection, scrollbars
   -------------------------------------------------------------------------- */
body,
body.light_version {
    background: var(--app-bg) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] ::selection { background: rgba(201, 160, 99, .40); color: #fff; }
html[data-theme="light"] ::selection,
:root ::selection { background: rgba(182, 138, 78, .22); color: var(--heading); }

a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-hover); }

/* Thin, themed scrollbars (WebKit) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* -----------------------------------------------------------------------------
   3. Top navbar — the signature gradient bar
   -------------------------------------------------------------------------- */
.top-navbar {
    background: var(--nav-bg) !important;
    border-bottom: 1px solid var(--nav-border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Brand */
.top-navbar .navbar-brand a,
.top-navbar .navbar-brand span,
.top-navbar .navbar-brand a span {
    color: var(--nav-fg) !important;
    font-weight: 600;
    letter-spacing: .2px;
}
.top-navbar .navbar-brand .logo { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }

/* Menu links */
.top-navbar .navbar-nav > li > a {
    color: var(--nav-fg-muted) !important;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    margin: 0 1px;
    transition: background-color .15s ease, color .15s ease;
}
.top-navbar .navbar-nav > li > a:hover,
.top-navbar .navbar-nav > li > a:focus {
    color: var(--nav-fg) !important;
    background: var(--nav-hover-bg) !important;
}
.top-navbar .navbar-nav > li.active > a,
.top-navbar .navbar-nav > li > a.active {
    color: var(--nav-fg) !important;
    background: var(--nav-hover-bg) !important;
}

/* Claim-search box living on the gradient */
.top-navbar .navbar-right .form-control,
.top-navbar #ClaimSearchForm .form-control {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
}
.top-navbar .navbar-right .form-control::placeholder { color: rgba(255, 255, 255, .75) !important; }
.top-navbar .navbar-right .form-control:focus {
    background: rgba(255, 255, 255, .26) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important;
}
.top-navbar #ClaimSearchForm .btn {
    background: rgba(255, 255, 255, .22) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
    margin-bottom: 0 !important;
}
.top-navbar #ClaimSearchForm .btn:hover { background: rgba(255, 255, 255, .34) !important; }

/* Right-side icon links (profile, sign-out, ticklers, theme toggle) */
.top-navbar .navbar-right .navbar-nav > li > a,
.top-navbar .navbar-right .navbar-nav > li > a i { color: var(--nav-fg) !important; }
#themeToggle { cursor: pointer; }
#themeToggle i { font-size: var(--fs-16); }

/* Scroll/route progress indicator */
.top-navbar .progress-bar,
#myBar { background: var(--accent) !important; }

/* -----------------------------------------------------------------------------
   4. Main content — cards, headers, breadcrumb
   -------------------------------------------------------------------------- */
.card,
.card.planned_task {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}

.card > .header,
.card .header {
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--heading);
}
.card .header h2,
.theme-indigo .card .header h2 {
    color: var(--heading) !important;
    font-weight: 600;
    font-size: var(--fs-16);
    line-height: 1.3;
    margin: 0;
}

.breadcrumb { background: transparent !important; }
/* The two crumbs you cannot click — the current page, and a sidebar group with no landing page —
   look the same as each other and different from the ones you can. Without this a plain <li>
   inherited rgb(30,41,59) while links are rgb(27,42,74): the same colour to any eye, so "Casework"
   invited a click and then ignored it. */
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.ccvc-crumb-label { color: var(--text-muted); }
.breadcrumb .breadcrumb-item a { color: var(--primary); }

/* Section / page headings keep the muted-purple link to the brand */
.theme-indigo .form-control:focus { color: var(--text) !important; }

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { box-shadow: var(--focus-ring) !important; }

.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: var(--shadow-brand) !important;
}

.btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-danger  { background: var(--danger)  !important; border-color: var(--danger)  !important; color: #fff !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-info    { background: var(--info)    !important; border-color: var(--info)    !important; color: #fff !important; }

.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--primary) !important; color: var(--on-primary) !important; }

.btn-secondary,
.btn-default,
.light_version .btn.btn-default {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
.btn-secondary:hover,
.btn-default:hover { background: var(--surface-3) !important; }

.btn-link { color: var(--primary) !important; }

/* Normalize the admin theme's DECORATIVE accent classes (used as launcher /
   section-header icon colors and <hr> dividers across ~37 views) to the CCVC
   brand palette: cool tones → navy, pinks → gold, decorative greens/teals →
   light tan (3rd logo color). Semantic colors (.text-success / -danger /
   -warning, badges, alerts, buttons) are themed elsewhere and keep meaning. */
.text-indigo, .text-azura, .text-blue, .text-cyan, .text-info,
.text-purple, .text-lightblue, .text-turquoise { color: var(--primary) !important; }
.text-blush, .text-pink { color: var(--accent) !important; }
.text-green, .text-teal, .text-lime { color: var(--accent-2) !important; }
html[data-theme="dark"] .text-indigo, html[data-theme="dark"] .text-azura,
html[data-theme="dark"] .text-blue, html[data-theme="dark"] .text-cyan,
html[data-theme="dark"] .text-info, html[data-theme="dark"] .text-purple,
html[data-theme="dark"] .text-turquoise { color: var(--accent) !important; }

.bg-indigo, .bg-azura, .bg-blush { background-color: var(--primary) !important; }
hr.bg-indigo, hr.bg-azura, hr.bg-blush { height: 0; border: 0; border-top: 2px solid var(--accent); background: transparent !important; opacity: .5; }
.new-indigo, .new-azura, .new-blue, .new-cyan { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.new-indigo:hover, .new-indigo:focus, .new-azura:hover, .new-blue:hover, .new-cyan:hover { background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

/* -----------------------------------------------------------------------------
   6. Forms — inputs, selects, select2, flatpickr
   -------------------------------------------------------------------------- */
.form-control,
.custom-select,
.input-group-text {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }
.form-control:focus,
.custom-select:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--input-disabled-bg) !important;
    color: var(--text-muted) !important;
}
label, .col-form-label { color: var(--text); }
.input-group-text { color: var(--text-muted) !important; }

/* select2 — single & multi, to match the form controls */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text) !important; }
/* Height/centering so a select2 single matches the form-control selects beside it. The default
   select2 single renders shorter, which reads as an un-themed "thin/underlined" dropdown. */
.select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    display: flex !important;
    align-items: center !important;
    padding: 2px 4px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4 !important; padding: 0 20px 0 6px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; }
.select2-container { max-width: 100%; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}
.select2-dropdown {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    /* select2 ships z-index:1051 and appends the dropdown to <body>, so inside any of our own overlays
       it renders BEHIND them — .pw-modal-ov (the payments modals) sits at 1300. Lift it above our
       highest layer. Safe to do globally: this element only exists while a dropdown is open, and an
       open dropdown should always be on top of whatever opened it. Don't solve this with
       dropdownParent — .pw-modal is overflow:hidden and would clip the list instead. */
    z-index: 1400 !important;
}
.select2-container--default .select2-results__option { color: var(--text) !important; }
/* Tabular type-ahead rows (provider/claim/DA pickers via FormatTabulatedView): keep each result on ONE
   line — no per-cell wrapping. Columns shrink and truncate with an ellipsis instead of stacking/wrapping. */
.select2-container--default .select2-results__option .row { flex-wrap: nowrap; align-items: center; }
.select2-container--default .select2-results__option .row > [class*="col-"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary) !important; color: var(--on-primary) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--primary-soft) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
}
.select2-container--default .select2-search--inline .select2-search__field { color: var(--text) !important; }

/* Self-hosted fancy-checkbox + fancy-radio (lifted from AdminBSB style.min.css so that file can be
   dropped). Native input hidden; a :before box / <i> circle renders the control, brand-coloured. */
.fancy-checkbox, .fancy-radio { margin-right: 10px; font-weight: normal; }
.fancy-checkbox label, .fancy-radio label { font-weight: normal; }

.fancy-checkbox input[type="checkbox"] { display: none; }
.fancy-checkbox input[type="checkbox"] + span { display: inline-block; vertical-align: middle; cursor: pointer; position: relative; }
.fancy-checkbox input[type="checkbox"] + span:before {
    content: ""; display: inline-block; vertical-align: middle; position: relative; bottom: 1px;
    width: 20px; height: 20px; margin-right: 10px; border-radius: 4px;
    border: 1px solid var(--border-strong); background: var(--input-bg);
}
.fancy-checkbox input[type="checkbox"]:checked + span:before {
    font-family: "FontAwesome"; content: "\f0c8"; font-size: var(--fs-17); line-height: 17px;
    color: var(--primary) !important; border-color: var(--primary) !important;
}

/* ⚠ THE RADIO USED TO DRAW ITSELF ON AN <i> INSIDE THE SPAN, AND NOTHING IN THE APPLICATION
   EVER WROTE ONE. The native input is display:none, so with no <i> there was nothing to replace
   it: every fancy-radio rendered as bare text. The three "Send to" choices in the provider mail
   run looked like a list of statements rather than something you pick from - which is exactly how
   it was reported. .fancy-checkbox above never had the problem because it draws on span:before,
   so the radio now does the same. */
.fancy-radio input[type="radio"] { display: none; }
.fancy-radio input[type="radio"] + span { display: block; cursor: pointer; position: relative; }
.fancy-radio input[type="radio"] + span:before {
    content: ""; display: inline-block; vertical-align: middle; position: relative; bottom: 1px;
    width: 18px; height: 18px; margin-right: 8px; border-radius: 50%;
    border: 1px solid var(--border-strong); background: var(--input-bg);
}
/* The dot is a gradient rather than a nested :after - :before cannot own a child, and this keeps
   the whole control in one rule. */
.fancy-radio input[type="radio"]:checked + span:before {
    border-color: var(--primary) !important;
    background: radial-gradient(var(--primary) 0 45%, var(--input-bg) 50%);
}

/* flatpickr calendar */
.flatpickr-calendar { background: var(--surface) !important; box-shadow: var(--shadow-lg) !important; color: var(--text); border: 1px solid var(--border); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--primary) !important; border-color: var(--primary) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { color: var(--text-muted) !important; fill: var(--text-muted) !important; }

/* -----------------------------------------------------------------------------
   7. Tables / DataTables
   -------------------------------------------------------------------------- */
.table { color: var(--text); }
.table thead th,
.table.dataTable thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border) !important;
    border-top: 0 !important;
    text-transform: none;
    font-size: var(--fs-12-5);
    letter-spacing: normal;
    font-weight: 600;
}
.table td, .table th { border-color: var(--border) !important; vertical-align: middle; }

/* Zebra striping + hover (overrides site.css equivalents, which are !important) */
.table.dataTable > tbody > tr > td { background-color: var(--surface); color: var(--text); }
.table.dataTable > tbody > tr.odd > td { background-color: var(--surface-2) !important; color: var(--text) !important; }
.table.dataTable > tbody > tr.even > td { background-color: var(--surface) !important; color: var(--text) !important; }
.table-hover tbody tr:hover td,
.table.dataTable > tbody > tr:hover > td { background-color: var(--surface-3) !important; }

/* Selected rows — brand tint (overrides site.css purple/whitesmoke) */
.table.dataTable > tbody > tr.selected,
.table.dataTable > tbody > tr.selected > td {
    background-color: var(--primary-soft) !important;
    color: var(--text) !important;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: var(--text-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text) !important;
    border-radius: var(--radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Bootstrap pagination */
.page-link { color: var(--primary); background: var(--surface); border-color: var(--border); }
.page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; }  /* !important beats the vendor AdminBSB #9367B4 (same selector + specificity, loads later) */
.page-item.disabled .page-link { background: var(--surface); border-color: var(--border); color: var(--text-muted); }

/* The AdminBSB "theme-indigo" skin was removed from <body>, killing all its #9367B4 purple at the source.
   These are the brand replacements for the interactive accents that skin used to colour (now unscoped so
   they apply without it): text selection, switch toggles, and DataTables row selection. */
::selection { background: var(--primary) !important; color: #fff !important; }
.switch input:checked + .slider { background-color: var(--primary) !important; }
.switch input:focus + .slider { box-shadow: 0 0 1px var(--primary) !important; }
table.dataTable > tbody > tr.selected,
table.dataTable > tbody > tr.selected > * { background-color: var(--accentbg) !important; color: var(--head) !important; box-shadow: none !important; }

/* -----------------------------------------------------------------------------
   8. Badges, alerts, list groups
   -------------------------------------------------------------------------- */
.badge { border-radius: var(--radius-pill); font-weight: 600; padding: .35em .7em; }
.badge-primary { background: var(--primary) !important; color: var(--on-primary) !important; }
.badge-success { background: var(--success) !important; color: #fff !important; }
.badge-danger  { background: var(--danger)  !important; color: #fff !important; }
.badge-warning { background: var(--warning) !important; color: #fff !important; }
.badge-info    { background: var(--info)    !important; color: #fff !important; }
.badge-secondary { background: var(--surface-3) !important; color: var(--text) !important; }

.alert { border-radius: var(--radius); border: 1px solid var(--border); }
.alert-primary { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); }

.list-group-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.list-group-item.active,
.light_version .list-group-item.active { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; }

/* -----------------------------------------------------------------------------
   9. Dropdowns & modals
   -------------------------------------------------------------------------- */
.dropdown-menu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text) !important;
}
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-3) !important; color: var(--text) !important; }
.dropdown-divider { border-color: var(--border) !important; }
.dropdown-menu h5 { color: var(--text-muted) !important; }

.modal-content,
.light_version .modal-dialog .modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text) !important;
}
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-title, .modal-header .title { color: var(--heading) !important; }
.modal .close { color: var(--text) !important; opacity: .6; text-shadow: none; }
.modal .close:hover { opacity: 1; }
/* Modern modal rhythm: tidy header/footer, comfortable body, right-aligned actions. */
.modal-header { padding: 1rem 1.25rem; align-items: center; }
.modal-header .modal-title, .modal-header .title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: .85rem 1.25rem; justify-content: flex-end; }
.modal-footer > .btn { margin: 0 0 0 .5rem; }
.modal-backdrop.show { opacity: .45; }

.nav-tabs,
.light_version .nav.nav-tabs { border-color: var(--border) !important; }
.nav-tabs .nav-link { color: var(--text-muted) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs .nav-link.active { color: var(--primary) !important; background: var(--surface) !important; border-color: var(--border) var(--border) var(--surface) !important; }

/* -----------------------------------------------------------------------------
   10. Footer & page loader
   -------------------------------------------------------------------------- */
#copyright { color: var(--text-muted) !important; }
#copyright a { color: var(--primary) !important; }

/* Loader LAYOUT — restored after the AdminBSB style.min.css retirement, which had defined the overlay
   positioning + spinner. Without these the wrapper sits in normal flow and pushes the page down every
   time it shows (the "main area drops half-way then pops back" symptom). theme.css previously re-added
   only the colors. */
.page-loader-wrapper {
    z-index: 99999999;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    text-align: center;
    background: var(--app-bg) !important;
}
.page-loader-wrapper .loader {
    text-align: center;
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* Unified with the DataTables grid spinner: one themed navy spinner everywhere, replacing the old
   AdminBSB bouncing-bars loader (which collapsed to "dots" and read as a competing second indicator
   next to the grid's fa-spinner). */
.page-loader-wrapper .loader > .fa-spinner { font-size: var(--fs-40); color: var(--primary); }
.page-loader-wrapper .loader .pl-text { margin-top: 14px; font-size: var(--fs-13); font-weight: 600; color: var(--text); }

/* -----------------------------------------------------------------------------
   11. Dark-mode text fix-ups
   The vendor theme hard-codes many light text/background colors; nudge the most
   common ones so content stays legible on dark surfaces. (Per-view inline colors
   are tracked as a follow-up in docs/UI-REFRESH-SCOPE.md.)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .card .header,
html[data-theme="dark"] .card .body,
html[data-theme="dark"] .card .header h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a { color: var(--text); }

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--text) !important; }
html[data-theme="dark"] .bg-white { background: var(--surface) !important; }
/* Vendor hard-codes .card .body / Bootstrap .card-body to #fff; in dark mode that
   leaves the record rail and inner content cards white with invisible light text.
   Make them transparent so they inherit the themed (dark) .card surface. */
html[data-theme="dark"] .card > .body,
html[data-theme="dark"] .card-body { background-color: transparent !important; }
/* Plain (non-DataTables) striped rows keep the vendor #e1e8ed light stripe in dark
   mode; repoint to the dark striping surface. */
html[data-theme="dark"] tr.odd,
html[data-theme="dark"] tr.odd > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* Keep functional error styling readable in dark mode without overriding the red */
html[data-theme="dark"] span.error,
html[data-theme="dark"] input.error,
html[data-theme="dark"] textarea.error,
html[data-theme="dark"] select.error { background-color: #3b1d22 !important; }

/* Smooth the mode switch on the big surfaces */
body, .card, .top-navbar, .form-control, .custom-select, .modal-content, .dropdown-menu {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* -----------------------------------------------------------------------------
   SweetAlert2 dialogs — brand the default blue/gray chrome to the navy/gold
   modal language. Token-driven, so dark mode flips automatically. The app's
   Swal calls don't set per-call button colors (they rely on inline defaults),
   so buttons use !important to win over those inline styles.
   ----------------------------------------------------------------------------- */
.swal2-popup {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: inherit;
    text-align: left;                 /* modern: left-aligned content, not centered */
}
.swal2-icon { margin: 1.1em 0 .4em; transform: scale(.85); transform-origin: left center; } /* raw-Swal hero icon: smaller + left */
.swal2-title { color: var(--heading); font-weight: 700; text-align: left; padding: 0; width: 100%; }
.swal2-html-container, .swal2-content { color: var(--text); text-align: left; margin: .5em 0 0; }
.swal2-actions { gap: .5rem; justify-content: flex-end; }          /* buttons right-aligned */
/* ccvc-dialogs: a small icon INLINE to the LEFT of the title (modern compact look). */
.ccvc-dlg-head { display: flex; align-items: center; gap: 10px; }
.ccvc-dlg-head > i { font-size: 1.15rem; line-height: 1; flex: none; }
.ccvc-dlg-head .ccvc-dlg-title { font-size: 1.05rem; font-weight: 700; color: var(--heading); }
.ccvc-dlg-success > i { color: var(--success); }
.ccvc-dlg-info > i { color: var(--info); }
.ccvc-dlg-question > i { color: var(--primary); }
.ccvc-dlg-warning > i { color: var(--warning); }
.ccvc-dlg-danger > i { color: var(--danger); }
.ccvc-dlg-error > i { color: var(--danger); }

/* Retire the vendor light-blue button class (l-blue) — render it as the brand primary. */
.btn.l-blue, a.l-blue { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; }
.btn.l-blue:hover, .btn.l-blue:focus, a.l-blue:hover, a.l-blue:focus { background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

.swal2-styled.swal2-confirm {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    font-weight: 600;
    padding: .55rem 1.4rem;
}
.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:focus {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: var(--focus-ring) !important;
}
/* Destructive/Stop confirm (ccvcConfirm type:'danger') — red primary action. */
.swal2-styled.swal2-confirm.is-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}
.swal2-styled.swal2-confirm.is-danger:hover,
.swal2-styled.swal2-confirm.is-danger:focus {
    filter: brightness(.93);
}
.swal2-styled.swal2-cancel {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    font-weight: 600;
    padding: .55rem 1.4rem;
}
.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-cancel:focus {
    background: var(--surface-3) !important;
    box-shadow: var(--focus-ring) !important;
}
.swal2-styled.swal2-deny {
    background: var(--danger) !important;
    color: #fff !important;
    border: 1px solid var(--danger) !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    font-weight: 600;
    padding: .55rem 1.4rem;
}
.swal2-styled:focus { outline: none; }

/* Icon rings → semantic tokens */
.swal2-icon.swal2-warning  { border-color: var(--warning); color: var(--warning); }
.swal2-icon.swal2-error    { border-color: var(--danger);  color: var(--danger); }
.swal2-icon.swal2-info     { border-color: var(--info);    color: var(--info); }
.swal2-icon.swal2-question { border-color: var(--accent);  color: var(--accent); }
.swal2-icon.swal2-success  { border-color: var(--success); color: var(--success); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--success) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--success) !important; }
.swal2-close { color: var(--text-muted); box-shadow: none; }
.swal2-close:hover { color: var(--danger); }
.swal2-loader { border-color: var(--primary) transparent var(--primary) transparent; }
.swal2-validation-message { background: var(--surface-3); color: var(--text); }

/* -----------------------------------------------------------------------------
   toastr notifications — soften the corners/shadow/typography and align the
   semantic backgrounds to the app palette (dark-mode aware).
   ----------------------------------------------------------------------------- */
/* Flat branded toast. !important + id-class specificity to beat AdminBSB's style.min.css
   (.toast-success{background:#5CB65F} etc.), which loads first but uses class specificity. */
#toast-container > div {
    position: relative;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: inherit;
    opacity: 1 !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--text-muted) !important;
    padding: 14px 38px 14px 54px !important;
    width: 360px;
}
/* Circular type-icon badge on the left (replaces toastr's bg-image + the old inline glyph). */
#toast-container > div::before {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "FontAwesome"; font-size: var(--fs-14); font-weight: 900;
    content: "\f129"; background: rgba(100,116,139,.16); color: var(--text-muted);
}
.toast-title { font-weight: 700; color: var(--heading); font-size: var(--fs-13-5); margin-bottom: 2px; }
.toast-title::before { content: none !important; }
.toast-message { font-size: var(--fs-13) !important; line-height: 1.45; color: var(--text-muted); }
#toast-container > .toast-success { border-left-color: var(--success) !important; }
#toast-container > .toast-success::before { content: "\f00c"; background: rgba(46,158,79,.16); color: var(--success); }
#toast-container > .toast-error   { border-left-color: var(--danger) !important; }
#toast-container > .toast-error::before { content: "\f00d"; background: rgba(192,57,43,.16); color: var(--danger); }
#toast-container > .toast-warning { border-left-color: var(--warning) !important; }
#toast-container > .toast-warning::before { content: "\f12a"; background: rgba(179,118,15,.18); color: var(--warning); }
#toast-container > .toast-info    { border-left-color: var(--info) !important; }
#toast-container > .toast-info::before { content: "\f129"; background: rgba(12,108,208,.16); color: var(--info); }
.toast-close-button { color: var(--text-muted); text-shadow: none; opacity: .7; font-weight: 400; font-size: var(--fs-16); }
.toast-close-button:hover { color: var(--text); opacity: 1; }
.toast-progress { opacity: .5 !important; height: 3px; }
#toast-container > .toast-success .toast-progress { background-color: var(--success); }
#toast-container > .toast-error .toast-progress { background-color: var(--danger); }
#toast-container > .toast-warning .toast-progress { background-color: var(--warning); }
#toast-container > .toast-info .toast-progress { background-color: var(--info); }

/* Header kebab / actions dropdown — restore the top-right placement the AdminBSB style.min.css gave it.
   Without that sheet the <ul class="header-dropdown"> fell into normal flow as a full-width block on the
   left, pushing the record body down (claim / offender / advocate headers + the layout full-screen toggle).
   Different properties than shell.css's .header-dropdown rules, so load order doesn't matter. */
.ccvc-card > .header { position: relative; }
.ccvc-card .header-dropdown { position: absolute; top: 12px; right: 14px; z-index: 20; margin: 0; padding: 0; }
/* Offender header: reserve space on the right so the stat chips don't slide under the kebab. */
.ccvc-ohead { padding-right: 44px; }

/* AdminBSB shims — the only classes the post-retirement sweep found still referenced in live markup
   and not covered by bootstrap/site/theme/shell (spacing/alignment only; the legacy _TopNav loading
   strip and its .progress-container shim were deleted with the partial). */
.m-t-25 { margin-top: 25px; }
.m-t-30 { margin-top: 30px; }
.align-right { text-align: right; }

/* Record-page Cancel button (the Edit/Cancel/Save trio lives in the crumb bar; see
   .ccvc-crumb-recact in shell.css). */
.ccvc-cancelbtn { background: var(--surf-2) !important; border: 1px solid var(--bd) !important; color: var(--text) !important; }
.ccvc-cancelbtn:hover { background: var(--surf-3) !important; color: var(--head) !important; }
.dropdown-menu .ccvc-kebab-danger { color: var(--danger) !important; }
.dropdown-menu .ccvc-kebab-danger:hover { background: var(--danger) !important; color: #fff !important; }

/* Kebab menu polish: its items are <li><a> (not .dropdown-item), so the .dropdown-item padding
   above never reaches them — give them real padding + hover, and pad the menu box off its border. */
.ccvc-card .header-dropdown .dropdown-menu { padding: 6px; min-width: 212px; }
.ccvc-card .header-dropdown .dropdown-menu > li > a { display: block; padding: 7px 12px; border-radius: 6px; color: var(--text); font-size: var(--fs-13); white-space: nowrap; text-decoration: none; }
.ccvc-card .header-dropdown .dropdown-menu > li > a:hover, .ccvc-card .header-dropdown .dropdown-menu > li > a:focus { background: var(--surf-3); color: var(--head); }
.ccvc-card .header-dropdown .dropdown-menu .dropdown-divider { margin: 5px 4px; }

/* Overview pipeline: the current (next-to-act) step links to the Eligibility & status tab. */
.ccvc-pstep-act { cursor: pointer; }
.ccvc-pstep-act:hover .ccvc-plabel { text-decoration: underline; color: var(--primary); }
.ccvc-pstep-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* Row-action cells: keep the .ccvc-gbtn buttons on one line. Narrow Actions columns (e.g. width:5% on
   the Correspondence / corr-history / files grids) were wrapping the 4 buttons into a vertical stack. */
td:has(.ccvc-gbtn) { white-space: nowrap; }

/* ------------------------------------------------------------------------------------------------
   Direct note-editing (ccvc-direct-edit.js) -- the gated "Edit directly" raw-edit mode on the claim
   Case/Board comments modal and the Offender / Advocate Notes tabs. Amber throughout = "you're
   editing the entire history with no stamp", so it can't be mistaken for the normal stamped
   Add-Note flow and the user stays aware they could overwrite existing entries. */
.ccvc-de-banner {
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .45);
    border-left: 4px solid #f59e0b;
    color: var(--text);
    padding: 9px 12px;
    border-radius: 7px;
    margin-bottom: 10px;
    font-size: var(--fs-13);
    line-height: 1.45;
}
.ccvc-de-banner .fa { color: #d97706; margin-right: 4px; }
.ccvc-de-banner strong { color: var(--head); }

/* Active direct-edit box. The selector is intentionally more specific than the read-mode rule
   (.ccvc-readmode .tab-content textarea) so it wins inside a read-mode record form (Offender /
   Advocate) — that rule sets pointer-events:none + flattens the field, which otherwise blocks the
   cursor and makes the box uneditable. */
.ccvc-readmode .tab-content textarea.ccvc-de-active,
textarea.ccvc-de-active {
    pointer-events: auto !important;
    border: 2px solid #f59e0b !important;
    border-radius: 8px !important;
    background: rgba(245, 158, 11, .05) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .15) !important;
    resize: vertical !important;
    color: var(--text) !important;
    font-weight: 400 !important;
    padding: 8px 10px !important;
    -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important;
}

.ccvc-de-bar { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ccvc-de-caption { margin-top: 8px; font-size: var(--fs-12); color: var(--muted); }
.ccvc-de-caption .fa { margin-right: 4px; opacity: .85; }
.ccvc-de-caption b { color: var(--text); font-weight: 700; }