/* "Explain this metric/table/chart/list" AI-analysis buttons (Dashboard widgets,
   Executive Summary) -- the icon needs to read as a distinct AI affordance, not
   blend in as plain muted text at the small size it inherits from the
   surrounding .btn-sm/heading context. */
.explain-metric-btn .ti-brain,
.explain-metric-btn-stub .ti-brain {
    font-size: 1.15rem;
    color: var(--bs-primary);
    vertical-align: -0.15em;
}

/* OngoingIssues ("Known Issues") page: date pair layout for each issue card, and a
   height cap on the modal body so long issue descriptions scroll instead of growing
   the modal past the viewport. */
.issue-dates {
    display: inline-grid;
    grid-template-columns: auto auto;
    column-gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.25;
}

.issue-dates > span:nth-child(odd) {
    text-align: left;
}

.issue-dates > span:nth-child(even) {
    text-align: right;
}

.ongoing-issues-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Fixed help button + offcanvas sidebar, Views/Shared/_Layout.cshtml. Every property
   these 3 elements need is set explicitly rather than relying on Bootstrap's btn /
   btn-outline / rounded-circle classes, so nothing later in the cascade can override it. */
.help-fab-wrapper {
    position: fixed !important;
    right: 1.5rem !important;
    left: auto !important;
    bottom: 6rem !important;
    top: auto !important;
    z-index: 1035;
}

.help-fab {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    border: 2px solid #172b4d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #172b4d;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
    transition:
        background-color 0.15s ease-in-out,
        color 0.15s ease-in-out;
}

.help-fab:hover {
    background-color: #172b4d;
    color: #fff;
}

.help-fab-mark {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Small "x" badge on the FAB's corner -- click to hide the button (remembered per-browser via
   localStorage, see the script in _Layout.cshtml). Positioned to sit right on the FAB's edge,
   not floating off away from it. */
.help-fab-dismiss {
    position: absolute;
    top: -2px;
    right: -2px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #6c757d;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.help-fab-dismiss:hover {
    background-color: #495057;
}

/* Small circle that replaces the FAB once dismissed, so hiding it is never a dead end. */
.help-fab-restore {
    position: fixed !important;
    right: 1.5rem !important;
    left: auto !important;
    bottom: 6rem !important;
    top: auto !important;
    z-index: 1035;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 2px solid #172b4d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    background-color: #fff;
    color: #172b4d;
    cursor: pointer;
    opacity: 0.6;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}

.help-fab-restore:hover {
    opacity: 1;
    background-color: #172b4d;
    color: #fff;
}

#helpSidebar {
    width: 400px;
}

#helpSidebar .accordion-button:not(.collapsed) {
    color: #172b4d;
    background-color: #f6f9fc;
}

/* AI "Explain this metric" feature is server-gated to 404 in Production (see
   HideInProductionFilter), but the buttons/modals themselves still render by default --
   this hides them client-side too whenever _Layout.cshtml stamps the Production-only
   ai-features-hidden class onto <body>, so nothing AI-related is visible there while
   staying fully visible in Development/Demo. */
body.ai-features-hidden .explain-metric-btn,
body.ai-features-hidden #explainMetricModal {
    display: none !important;
}

/* Select2 ships its own hardcoded light-only colors that Paces' theme
   variables don't reach. These key off the same --theme-* custom properties
   Paces itself uses, so a single rule set resolves correctly in both
   light and dark (--theme-* already flips value per data-bs-theme).
   select2.min.css loads after this file, so at equal specificity it wins
   every tie - every property below needs !important to actually apply. */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--theme-tertiary-bg) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-search--inline .select2-search__field,
.select2-search--dropdown .select2-search__field {
    color: var(--theme-body-color) !important;
    background-color: transparent !important;
}

.select2-selection__choice {
    background-color: var(--theme-tertiary-bg) !important;
    border-color: var(--theme-border-color) !important;
    color: var(--theme-body-color) !important;
}

/* --theme-dropdown-* variables only exist inside .dropdown-menu's own scope
   (Bootstrap components each define their own local custom properties) -
   they resolve to nothing on .select2-dropdown, which isn't a .dropdown-menu.
   Use the same globally-available --theme-* tokens .dropdown-menu itself
   points those variables back to. */
.select2-dropdown {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.select2-results__option {
    color: var(--theme-body-color) !important;
}

/* Same issue for the DataTables Buttons collection (e.g. Claims' Export menu):
   buttons.bootstrap5.min.css paints its wrapper with --bs-body-bg/--bs-border-color,
   which Paces doesn't define, leaving the panel transparent. That file loads after
   this one (page Styles section), so !important is needed to win the tie. */
div.dt-button-collection {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: var(--theme-border-color) !important;
}

/* Select2's own CSS hardcodes a 28px single-selection height and leaves
   multi-selection height unset (grows to fit chips) - neither matches the
   44px row height _TableHeader.cshtml gives every other control in the
   same toolbar, so selects looked shorter/misaligned next to date inputs
   and buttons. select2.min.css loads after this file, so it wins any tie
   at equal specificity - !important is needed here, not just for color. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 44px !important;
    display: flex !important;
    align-items: center;
}

/* Select2 also hardcodes the multi-selection's rendered list to a fixed
   27px with a forced (not auto) scrollbar - once a chip is added, that
   clips the chip behind a tiny native scrollbar instead of growing the
   row. Let it size to content; row height only grows once chips genuinely
   don't fit on one line. */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    max-height: none !important;
    overflow-y: visible !important;
}

/* The chip "x" remove button and the custom "Search by ..." label span
   (injected by DatatableGlobal.js's GetMemberFilter/GetClinicAndPcpFilter/
   etc.) had no theming at all - remove button kept Select2's flat gray
   default and the label span inherited whatever color happened to cascade. */
.select2-selection__choice__remove {
    color: var(--theme-body-color) !important;
    opacity: 0.6;
}

.select2-selection__choice__remove:hover {
    opacity: 1;
    color: var(--bs-danger);
}

.plc.search-placeholder {
    color: var(--theme-body-color);
    opacity: 0.65;
    white-space: nowrap;
    /* .plc is just a label sitting next to the real select2-search__field (which
       already carries its own native placeholder from the select's data-placeholder
       attribute) - let clicks fall through to the field/container underneath instead
       of landing on this text. */
    pointer-events: none;
}

/* GetMemberFilter/GetClinicAndPcpFilter/etc. (DatatableGlobal.js) only ever
   toggle the "search-placeholder" class on .plc - they never hide the label
   itself, so once a chip is selected the label kept sitting on its own line
   above the chip, taking the box to two lines for even a single selection. */
.plc:not(.search-placeholder) {
    display: none;
}

/* Table toolbars (_TableHeader.cshtml) are Bootstrap .input-group rows that
   rely on flex + align-items:stretch on their direct children to make every
   control the same height. Two controls sit behind an extra wrapper div and
   so never join that flex chain: the DataTables Buttons export button, which
   the Buttons plugin renders as <div class="dt-buttons"> and JS relocates
   into #tableheader; and the "Advanced Filters" toggle, which is wrapped in
   a div (class="input-group-btn-wrap") so its tooltip still fires when the
   button is disabled. Both end up shorter than their siblings and out of
   line. Re-establish the stretch chain through the wrapper(s) here. */
.input-group > [id^='tableheader'],
.input-group-btn-wrap {
    display: flex;
    align-items: stretch;
}

.input-group .dt-buttons {
    display: flex;
    align-items: stretch;
}

.input-group-btn-wrap > .btn-search,
.input-group [id^='tableheader'] .dt-buttons > .btn,
.input-group [id^='tableheader'] .dt-buttons > button {
    height: 100%;
}

/* Health-plan brand colors (scripts.js GetPlanColor() builds "btn-" + color /
   "btn-outline-" + color for plan badges across most DataTables render functions,
   PremiumReport.js derives the same class from the raw plan name, and
   CompareRows.js builds "btn-" + planName directly). These carry only the plan's
   color, bold weight, and no underline/cursor - no .dt-value-link here and no
   hover behavior of any kind, since none of these badges are real, functioning
   hyperlinks (several are literally href="#" disabled). */
.btn-freedom,
.btn-outline-freedom,
.btn-optimum,
.btn-outline-optimum,
.btn-united,
.btn-outline-united,
.btn-careplus,
.btn-outline-careplus,
.btn-wellcare,
.btn-outline-wellcare,
.btn-devoted,
.btn-outline-devoted,
.btn-humana,
.btn-outline-humana,
.btn-freedomercensus,
.btn-optimumercensus,
.btn-mpgcensus {
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}

.btn-freedom,
.btn-outline-freedom,
.btn-freedomercensus {
    color: var(--plan-freedom) !important;
}

/* Optimum's logo (OPT_logo-2343975944.png) is genuinely two-tone - a blue
   logotype (#0054a4) and a pale seafoam-green diamond accent (#9ac9bd), both
   sampled directly from the source file. The blue is a dead ringer for
   Freedom's own logo blue (Freedom+Health+Logo-1318985661.png samples to the
   literal same #0054a4), so using it here made the two plan badges
   indistinguishable in light mode - instead, light mode uses a darkened
   version of Optimum's OWN pale green (#9ac9bd HSL lightness 69.6% -> 32%,
   same hue/saturation) for real contrast as text on white, while dark mode
   still uses the pale green exactly as it appears in the logo, unmodified.
   Humana's raw brand color (#72c924) is too light to read as text on a
   white/light background - swap in a darkened version for light mode and
   keep the original vivid brand color for dark mode, where it has good
   contrast against the dark background. Freedom's raw logo blue (#0b4da3),
   the other direction - only 2.2:1 contrast against the dark background,
   same hue/saturation lightened from 34.1% to 60% for ~5.3:1 in dark mode.
   United's raw navy (#002677) is even worse - fully saturated and only 23.3%
   lightness gives just 1.3:1 in dark mode. Lightening alone wasn't enough:
   Freedom and United's raw brand hues are only ~7 degrees apart, so a same-hue
   lightened United still read as "the same blue as Freedom, just paler." In
   dark mode only (light mode keeps United's literal brand navy), United's hue
   is shifted from 220.8 to 235 - still reads as a deep blue, not a hue swap
   into another plan's territory (46 degrees clear of Devoted's purple at
   281.3) - at 70% saturation/68% lightness for ~4.9:1 contrast, clearly its
   own color next to Freedom's dark-mode blue rather than a lighter twin.
   Devoted's raw purple (#530178) has the same problem as United did - only
   1.4:1 in dark mode - but keeping Devoted's OWN hue (281.3, same as light
   mode) rather than reusing United's already ends up 46 degrees from United
   once lightened for contrast, so it reads as its own color without needing
   to reshuffle United's fix above: 80% saturation/65% lightness for ~5.1:1. */
:root {
    --plan-optimum: #396a5e;
    --plan-humana: #3d7a15;
    --plan-freedom: #0b4da3;
    --plan-united: #002677;
    --plan-careplus: #e2373f;
    --plan-wellcare: #1aa0a1;
    --plan-devoted: #530178;
}

[data-bs-theme='dark'] {
    --plan-optimum: #9ac9bd;
    --plan-freedom: #408df2;
    --plan-united: #747ee7;
    --plan-devoted: #c15eed;
    --plan-humana: #72c924;
}

.btn-optimum,
.btn-outline-optimum,
.btn-optimumercensus {
    color: var(--plan-optimum) !important;
}

.btn-mpgcensus {
    color: #6c757d !important;
}

.btn-united,
.btn-outline-united {
    color: var(--plan-united) !important;
}

.btn-careplus,
.btn-outline-careplus {
    color: var(--plan-careplus) !important;
}

.btn-wellcare,
.btn-outline-wellcare {
    color: var(--plan-wellcare) !important;
}

.btn-devoted,
.btn-outline-devoted {
    color: var(--plan-devoted) !important;
}

.btn-humana,
.btn-outline-humana {
    color: var(--plan-humana) !important;
}

/* Brand color standardization: Primary/Secondary rebuilt from the two logo
   colors (navy #1b2b55, cyan #9ccfdd) instead of the old blue-purple/brownish
   pair. The two logo colors sit at opposite ends of the lightness scale, so
   which one leads swaps per theme for contrast - same treatment already used
   above for --plan-optimum/--plan-humana. Secondary in dark mode and all of
   Success/Warning/Danger are the modern skin's own hues pulled down to the
   logo colors' ~50% saturation instead of the vendor's neon defaults, so the
   whole palette reads as one system; the semantic meaning (green/amber/red)
   is unchanged. -text-emphasis doubles as both hover/active shade (see
   .btn-primary's use of it above, from paces.min.css) and emphasized text on
   the matching -bg-subtle chip background.
   Scoped to html[data-skin="modern"] (not :root) to match - and outrank -
   paces.min.css's own [data-skin=modern] selector, which carries an element
   type + attribute (0,1,1) vs :root's bare pseudo-class (0,1,0); a plain
   :root override here would lose the specificity fight and never apply. */
html[data-skin="modern"] {
    --theme-primary: #1b2b55;
    --theme-primary-rgb: 27, 43, 85;
    --theme-primary-bg-subtle: rgba(27, 43, 85, .15);
    --theme-primary-border-subtle: rgba(27, 43, 85, .3);
    --theme-primary-text-emphasis: #111b36;

    --theme-secondary: #9ccfdd;
    --theme-secondary-rgb: 156, 207, 221;
    --theme-secondary-bg-subtle: rgba(156, 207, 221, .15);
    --theme-secondary-border-subtle: rgba(156, 207, 221, .3);
    --theme-secondary-text-emphasis: #60b2c8;

    --theme-success: #2b8256;
    --theme-success-rgb: 43, 130, 86;
    --theme-success-bg-subtle: rgba(43, 130, 86, .15);
    --theme-success-border-subtle: rgba(43, 130, 86, .3);
    --theme-success-text-emphasis: #1f6142;

    --theme-warning: #96731f;
    --theme-warning-rgb: 150, 115, 31;
    --theme-warning-bg-subtle: rgba(150, 115, 31, .26);
    --theme-warning-border-subtle: rgba(150, 115, 31, .3);
    --theme-warning-text-emphasis: #7a5c18;

    --theme-danger: #b93138;
    --theme-danger-rgb: 185, 49, 56;
    --theme-danger-bg-subtle: rgba(185, 49, 56, .15);
    --theme-danger-border-subtle: rgba(185, 49, 56, .3);
    --theme-danger-text-emphasis: #95262c;
}

html[data-skin="modern"][data-bs-theme='dark'] {
    --theme-primary: #9ccfdd;
    --theme-primary-rgb: 156, 207, 221;
    --theme-primary-bg-subtle: rgba(156, 207, 221, .15);
    --theme-primary-border-subtle: rgba(156, 207, 221, .3);
    --theme-primary-text-emphasis: #60b2c8;

    --theme-secondary: #3b5eba;
    --theme-secondary-rgb: 59, 94, 186;
    --theme-secondary-bg-subtle: rgba(59, 94, 186, .18);
    --theme-secondary-border-subtle: rgba(59, 94, 186, .35);
    --theme-secondary-text-emphasis: #314e9b;

    --theme-success: #75d1a2;
    --theme-success-rgb: 117, 209, 162;
    --theme-success-bg-subtle: rgba(117, 209, 162, .15);
    --theme-success-border-subtle: rgba(117, 209, 162, .3);
    --theme-success-text-emphasis: #59c088;

    --theme-warning: #debc73;
    --theme-warning-rgb: 222, 188, 115;
    --theme-warning-bg-subtle: rgba(222, 188, 115, .26);
    --theme-warning-border-subtle: rgba(222, 188, 115, .3);
    --theme-warning-text-emphasis: #d1a74f;

    --theme-danger: #dd7e83;
    --theme-danger-rgb: 221, 126, 131;
    --theme-danger-bg-subtle: rgba(221, 126, 131, .15);
    --theme-danger-border-subtle: rgba(221, 126, 131, .3);
    --theme-danger-text-emphasis: #d15960;
}

/* Admissions grid row status tints (RowCallBack(), DataTables/Admissions.js):
   Today/Discharged/Negative-LOS reuse the Success/Warning/Danger -bg-subtle
   tokens above instead of the old hardcoded, mode-blind rgba() values, so
   dark mode now tints correctly for free. !important on background-color for
   the same reason as the .btn-{plan} colors above - guaranteed to win
   regardless of DataTables' own striping/hover rules. Declaration order
   matters here: a row can be both "Discharged" and "Negative LOS" at once,
   and .admission-row-los-issue must win, same as the old code's LOS check
   always running last - equal specificity (single class each), so whichever
   is declared later wins.
   Text color has to be set on the > td children directly, not just the row -
   paces.min.css's own .table > :not(caption) > * > * rule sets an explicit
   color on every td already (via --theme-table-color), and an explicit
   same-or-higher-specificity match on the td itself always wins over
   whatever the row would otherwise inherit down to it, !important or not.
   !important here still doesn't bleed onto real links: .dt-value-link (and
   every other real link, the purple treatment below) sets its own explicit
   color on the <a> itself, and a rule matching the <a> directly always beats
   whatever its <td> parent resolved to, regardless of importance on either
   side - so links inside these rows correctly keep their own color instead
   of picking up the row's status color. Deliberately uses the softer
   -text-emphasis shade (not the base hue) so it stays readable sitting on
   its own -bg-subtle background. */
.admission-row-today {
    background-color: var(--theme-success-bg-subtle) !important;
}

.admission-row-today > td {
    color: var(--theme-success-text-emphasis) !important;
}

.admission-row-discharged {
    background-color: var(--theme-danger-bg-subtle) !important;
}

.admission-row-discharged > td {
    color: var(--theme-danger-text-emphasis) !important;
}

.admission-row-los-issue {
    background-color: var(--theme-warning-bg-subtle) !important;
}

.admission-row-los-issue > td {
    color: var(--theme-warning-text-emphasis) !important;
}

/* Shared underline-draw hyperlink treatment: no border/box or hover-fill - a
   left-to-right underline draws in and the text brightens/emboldens on hover
   instead. Applies to:
     - .dt-value-link - explicitly marked report/DataTable values and links (see
       DataTables/*.js, Widgets/*.js). Plan-name badges (.btn-{plan}/
       .btn-outline-{plan}, above) deliberately do NOT carry this class - none of
       them are real, functioning hyperlinks, so they get no hover behavior at all,
       just their static bold brand color.
     - every other in-page content hyperlink site-wide, by default - anything
       carrying a Bootstrap/Paces UI-component class (buttons, nav/topbar/sidenav
       links, dropdown items, pagination, badges, breadcrumbs, footer links, etc.)
       is excluded here and keeps its own established look.
   Matches this skin's own --theme-purple value (#6070cc), tuned separately
   per theme so links read as clearly "clickable" against both a light and a
   dark page background without colliding with any plan-badge brand color (Freedom blue,
   Wellcare teal, Devoted purple, etc., above) or with general body text -
   except member id status links (New/Termed) and claim # links, below, which keep their own color
   instead. */
:root {
    --dt-value-color: #6070cc;
}

[data-bs-theme='dark'] {
    --dt-value-color: #939edc;
}

.dt-value-link,
a:not(
    [class*='btn'],
    .dropdown-item,
    .dropdown-toggle,
    .nav-link,
    .side-nav-link,
    .topbar-link,
    .logo-light,
    .page-link,
    .navbar-brand,
    .accordion-button,
    .badge,
    .link-reset
) {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--dt-value-color);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease-in-out;
}

.dt-value-link::after,
a:not(
    [class*='btn'],
    .dropdown-item,
    .dropdown-toggle,
    .nav-link,
    .side-nav-link,
    .topbar-link,
    .logo-light,
    .page-link,
    .navbar-brand,
    .accordion-button,
    .badge,
    .link-reset
)::after {
    content: '';
    position: absolute;
    left: 0;
    /* 0, not a negative offset - clinic-name (and other) cells often wrap this
       link in an ellipsis-truncating ancestor (overflow: hidden) or put
       .text-truncate directly on the link itself, both of which would clip an
       underline sitting outside the box. */
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease-in-out;
}

.dt-value-link:hover,
.dt-value-link:focus-visible,
a:not(
    [class*='btn'],
    .dropdown-item,
    .dropdown-toggle,
    .nav-link,
    .side-nav-link,
    .topbar-link,
    .logo-light,
    .page-link,
    .navbar-brand,
    .accordion-button,
    .badge,
    .link-reset
):hover,
a:not(
    [class*='btn'],
    .dropdown-item,
    .dropdown-toggle,
    .nav-link,
    .side-nav-link,
    .topbar-link,
    .logo-light,
    .page-link,
    .navbar-brand,
    .accordion-button,
    .badge,
    .link-reset
):focus-visible {
    filter: brightness(1.5);
    /* Faux-bold via text-shadow instead of font-weight - a real weight change
       would reflow/truncate the many fixed-width and text-truncate table cells
       these sit in. */
    text-shadow: 0 0 0.4px currentColor, 0 0 0.4px currentColor;
}

.dt-value-link:hover::after,
.dt-value-link:focus-visible::after,
a:not(
    [class*='btn'],
    .dropdown-item,
    .dropdown-toggle,
    .nav-link,
    .side-nav-link,
    .topbar-link,
    .logo-light,
    .page-link,
    .navbar-brand,
    .accordion-button,
    .badge,
    .link-reset
):hover::after,
a:not(
    [class*='btn'],
    .dropdown-item,
    .dropdown-toggle,
    .nav-link,
    .side-nav-link,
    .topbar-link,
    .logo-light,
    .page-link,
    .navbar-brand,
    .accordion-button,
    .badge,
    .link-reset
):focus-visible::after {
    width: 100%;
}

/* Member status color on the member id copy link only (the name link keeps the
   default color), always shown (not only on hover).
     - .status-new/.status-termed: MemberRosters/ServiceCode DataTables, which know
       the member's real status (Current/New/Termed/Inactive).
     - .status-termed only: Claims/Pharmacy/ErReport/Cost (GetMemberColumnCell in
       DatatableGlobal.js, and Cost.js's own inlined copy), which only know
       active/inactive - inactive reuses the same red as Termed. */
.dt-value-link.status-new {
    color: #198754;
}

.dt-value-link.status-termed {
    color: #dc3545;
}

/* Claim # color by claim type (GetClaimAndPlanColumnCell): professional red, every other type blue, as on master. */
.dt-value-link.claim-primary {
    color: var(--theme-primary);
}

.dt-value-link.claim-professional {
    color: #dc3545;
}

/* Paces doesn't ship a .table-centered utility (unlike .table-custom/
   .table-nowrap/.table-select, which it does) - vertically center cell
   content to match the Paces demo table look. */
.table-centered td,
.table-centered th {
    vertical-align: middle;
}

/* DataTables 2.x's legacy "dom" string (still used everywhere here, e.g. "Bfrtip")
   renders .dt-info and .dt-paging as plain stacked block-level siblings under
   "{id}_wrapper" - it's only the newer object-based "layout" option that gets
   DT2's flex row/cell classes. Float them into a classic clearfix instead so
   info sits left and paging sits right on the same line. */
[id$='_wrapper'] .dt-info {
    float: left;
}

[id$='_wrapper'] .dt-paging {
    float: right;
}

[id$='_wrapper']::after {
    content: '';
    display: block;
    clear: both;
}
.scrollable-filters {
    top: 5em;
}
.switch-label {
    position: relative;
    right: 3em;
    top: 1em;
}
.date-range-picker .dropdown-toggle::after {
    margin-left: .25rem;
}

.date-range-menu {
    width: 620px;
    border-radius: .5rem;
    overflow: hidden;
}

.date-range-presets {
    width: 180px;
    padding: .75rem;
    flex-shrink: 0;
}

.preset-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: .375rem;
    font-size: .875rem;
    color: var(--bs-body-color);
    transition: background-color .15s ease, color .15s ease;
}

    .preset-item:hover {
        background-color: var(--bs-light);
    }

    .preset-item.active {
        color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), .08);
        font-weight: 500;
    }

    .preset-item i {
        width: 18px;
        text-align: center;
    }

.date-range-calendars {
    flex: 1;
    padding: 1.25rem;
}

.calendar-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .5rem;
}

.date-range-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background-color: var(--bs-tertiary-bg);
}


/* Smaller screen fallback */
@media (max-width: 767.98px) {

    .date-range-menu {
        width: 340px;
    }

        .date-range-menu > .d-flex {
            flex-direction: column;
        }

    .date-range-presets {
        width: 100%;
        border-right: 0 !important;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .date-range-calendars .row {
        display: block;
    }

    .date-range-calendars .col {
        margin-bottom: 1rem;
    }
}

/* Loading dots follow the theme primary; the vendor navy is invisible in dark mode. */
html[data-skin='modern'] div.dt-processing > div:last-child > div {
    background: var(--theme-primary);
}

/* Member search select2 results (DatatableGlobal.js) show the member's id in muted
   text alongside their name - lighter shade on hover/highlight so it stays readable
   against the highlighted row's background. */
.member-option-id {
    color: var(--bs-gray);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] .member-option-id {
    color: var(--bs-gray-300);
}

/* Admissions High Risk severity tiers (styles.css is no longer loaded). */
.text-risk-critical {
    --bs-text-opacity: 1;
    color: #b71c1c !important;
}

.text-risk-moderate {
    --bs-text-opacity: 1;
    color: #e65100 !important;
}

.text-risk-emerging {
    --bs-text-opacity: 1;
    color: #d49a0d !important;
}

[data-bs-theme='dark'] .text-risk-critical {
    color: #ff3b30 !important;
}

[data-bs-theme='dark'] .text-risk-moderate {
    color: #ff9800 !important;
}

[data-bs-theme='dark'] .text-risk-emerging {
    color: #ffd54f !important;
}

/* Admissions row actions menu: the default dropdown-item gray reads as disabled in light mode. */
html:not([data-bs-theme='dark']) .admissions-row-actions .dropdown-item:not(.text-danger) {
    color: var(--theme-dark);
}

/* jQuery UI menus (autocomplete) otherwise render behind open modals; was in argon.css, which is no longer loaded. */
.ui-menu {
    z-index: 9999 !important;
}

/* jQuery UI's base theme hardcodes light colors; match the dropdown menu theming in dark mode. */
[data-bs-theme='dark'] .ui-menu {
    background-color: var(--theme-secondary-bg) !important;
    border-color: var(--theme-border-color) !important;
    color: var(--theme-body-color) !important;
}

[data-bs-theme='dark'] .ui-menu .ui-menu-item-wrapper {
    color: var(--theme-body-color);
}

[data-bs-theme='dark'] .ui-menu .ui-state-active {
    background-color: var(--theme-tertiary-bg) !important;
    border-color: var(--theme-border-color) !important;
    color: var(--theme-body-color) !important;
}