/* ── Theme Custom Properties ── */
:root {
    --appbar-bg: #1565c0;
    --appbar-bg-end: #1976d2;
    --appbar-text: #ffffff;
    --panel-bg: #fafafa;
    --panel-text: #424242;
    --btn-bg: #1976d2;
    --btn-text: #ffffff;
    --grid-header-bg: #fafafa;
    --grid-header-text: #212121;
}

/* ── Telerik design-token overrides (Telerik 13) ─────────────────────────────
   The Telerik "Default" theme ships a CORAL primary (#ff6358) + 14px base font,
   which clashes with this portal's Material-blue brand and reads as small. Map the
   theme's design tokens to the brand once, here, instead of per-class .k-* overrides
   (those were tuned to the v7 DOM and don't fully apply after the 7→13 upgrade).
   This is the version-resilient way to skin Telerik. app.css loads AFTER the theme,
   so these :root values win the cascade. */
:root {
    /* Primary → WLT BRAND ORANGE #EA611E (wltsoftware.com), adopted 2026-08-16 as the portal's default
       accent. It replaces Telerik's old "Default" theme coral #ff6358, which was a leftover, not a brand
       decision — and which sits at hue 4 (essentially red) rather than 20 (orange), with far more blue in
       it (B 88 vs 30). The brand colour is also the better button fill: against white label text it gives
       3.37:1 versus 2.93:1, so it clears the 3:1 large-text threshold where the coral did not. Neither
       reaches 4.5:1, so avoid small text on a primary fill.

       THE APP BAR STAYS BLUE (--appbar-bg #1565c0). An orange bar plus orange buttons would leave the
       primary action nothing to stand against; the brand spends orange on the call to action and keeps the
       chrome cool, which is what the site does with its dark footer.

       Hover/active use the same 0.92 / 0.83 per-channel ratios as ClientThemeDto.Shade(), so a client's
       custom colour and this default darken identically. The subtle/emphasis tints are the original
       palette's white-mix proportions (~37 / 88 / 79 / 65%) recomputed from the new base, so the whole
       ramp stays one colour family instead of leaving coral-pink tints under an orange primary. */
    --kendo-color-primary:               #EA611E;
    --kendo-color-primary-hover:         #D7591C;
    --kendo-color-primary-active:        #C25119;
    --kendo-color-primary-emphasis:      #F29C72;
    --kendo-color-primary-subtle:        #FDECE4;
    --kendo-color-primary-subtle-hover:  #FBDDCF;
    --kendo-color-primary-subtle-active: #F8C7B0;
    --kendo-color-primary-on-subtle:     #4D200A;
    --kendo-color-on-primary:            #ffffff;
    --kendo-color-primary-on-surface:    #EA611E;

    /* Component font-size: use the Material theme's NATIVE 0.875rem (14px) — that's the size
       Telerik used before the upgrade, and the theme's padding/heights are calibrated for it,
       so components (esp. dropdowns) scale correctly. Earlier 15/16px overrides made them too
       big and mis-scaled, so we DON'T override --kendo-font-size here. */
}

/* ── Client-themed primary buttons ──────────────────────────────────────────────
   Port of old CustomButtons(clrNav, clrText) (MasterEmployer.master:523-530), which set backgroundColor
   and color on every .btn-primary from wlt_CustomEmpPage.ButtonColor/ButtonText. Until now that column
   reached no button at all in this portal.

   SELECTOR NOTES, both learned the hard way from probe measurements on 2026-08-15:
     1. Telerik 14.1 renders `k-button k-button-primary`. There is no `k-button-solid-primary` — that came
        from a stale 10.0.0 folder in the nuget cache, and the whole block silently styled nothing.
     2. Telerik's own rule is `.k-button.k-button-primary` (0,2,0) and its states are `.k-hover`/`.k-active`
        (0,3,0), so a single-class `.k-button-primary` loses the cascade no matter the file order — the
        button stayed orange while the token was correctly set. Hence the compound selectors below.

   The :not() chain keeps this to FILLED primary buttons. Outline, flat, link and clear variants carry
   `.k-button-primary` too, and giving them a fill would invent a control the old portal never had.
   Error/secondary buttons keep their semantic colours.

   Every fallback is this file's own Kendo palette (--kendo-color-primary #ff6358 and friends), so a client
   with NO custom theme renders exactly as it does today. --client-btn-* is deliberately NOT defined at
   :root: --btn-bg is (#1976d2), so reusing it would have turned every unthemed client's buttons blue.
   The hover/active shades come from the theme itself (ClientThemeDto.Shade), since the table stores one
   button colour. MainLayout mirrors these onto <html> (portalApplyThemeVars) so popups inherit them. */
.k-button.k-button-primary:not(.k-button-outline):not(.k-button-flat):not(.k-button-link):not(.k-button-clear) {
    background-color: var(--client-btn-bg, var(--kendo-color-primary));
    border-color:     var(--client-btn-bg, var(--kendo-color-primary));
    color:            var(--client-btn-text, var(--kendo-color-on-primary));
}

.k-button.k-button-primary:not(.k-button-outline):not(.k-button-flat):not(.k-button-link):not(.k-button-clear):hover,
.k-button.k-button-primary:not(.k-button-outline):not(.k-button-flat):not(.k-button-link):not(.k-button-clear).k-hover {
    background-color: var(--client-btn-bg-hover, var(--kendo-color-primary-hover));
    border-color:     var(--client-btn-bg-hover, var(--kendo-color-primary-hover));
    color:            var(--client-btn-text, var(--kendo-color-on-primary));
}

.k-button.k-button-primary:not(.k-button-outline):not(.k-button-flat):not(.k-button-link):not(.k-button-clear):active,
.k-button.k-button-primary:not(.k-button-outline):not(.k-button-flat):not(.k-button-link):not(.k-button-clear).k-active,
.k-button.k-button-primary:not(.k-button-outline):not(.k-button-flat):not(.k-button-link):not(.k-button-clear).k-selected {
    background-color: var(--client-btn-bg-active, var(--kendo-color-primary-active));
    border-color:     var(--client-btn-bg-active, var(--kendo-color-primary-active));
    color:            var(--client-btn-text, var(--kendo-color-on-primary));
}

/* ── Base ── */
html, body {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #212121;
    background: #fafafa;
    -webkit-font-smoothing: antialiased;
}

h5 { font-size: 1.25rem; font-weight: 500; color: #212121; margin: 0; }
h6 { font-size: 1rem; font-weight: 500; color: #212121; margin: 0; }
hr { border: none; border-top: 1px solid #e0e0e0; margin: 0.5rem 0; }
a { color: var(--appbar-bg); }
a:hover { color: #0d47a1; }

/* ── Typography helpers ── */
.subtitle {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #424242;
    letter-spacing: 0.01em;
}

/* ── Portal Status page (Tpa/TpaSystem.razor) ── */
.ps-pad {
    padding: 14px 20px 18px;
}

.ps-body {
    font-size: 0.875rem;
    color: #424242;
    line-height: 1.5;
    margin: 0 0 4px;
}

.ps-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbe6;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: #5d4037;
    line-height: 1.45;
}

.ps-note code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.95em;
}

.ps-sub-header {
    margin: 14px 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ps-sub-header .caption {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.ps-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.82rem;
    padding: 6px 0;
}

.ps-client-list {
    border: 1px solid #eef0f3;
    border-radius: 6px;
}

.ps-client-list .ps-probe-row {
    padding-left: 10px;
    padding-right: 10px;
}

.ps-probe-row .db-info-value {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ps-latency {
    color: #9ca3af;
    font-size: 0.75rem;
}

.ps-error-text {
    color: #b91c1c;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.ps-sysparam-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 8px;
}

.ps-sysparam-table thead th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.ps-sysparam-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
}

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

.ps-sysparam-name code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    color: #1e293b;
}

.ps-sysparam-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.ps-sysparam-actions .k-button {
    margin-left: 4px;
}

/* ── Client Management dialog (Tpa/TpaClients.razor) ── */
.tpa-cli-section {
    margin: 20px 0 4px;
    font-weight: 600;
    color: #1e293b;
    border-top: 1px solid #eef0f3;
    padding-top: 16px;
}

.tpa-cli-help {
    margin: 0 0 12px;
    font-size: 0.78rem;
    color: #6b7280;
}

.tpa-cli-help code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.95em;
}

.tpa-cli-test {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.tpa-cli-test.ok {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.tpa-cli-test.err {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.ps-extras-clientpick {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef0f3;
}

.ps-extras-clientpick label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
}

.ps-extras-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 8px;
}

.ps-null {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.78rem;
}

.ps-extras-empty {
    text-align: center;
    padding: 18px 12px;
    color: #6b7280;
    font-size: 0.85rem;
    background: #fafafa;
}

/* ── System Options page (Tpa/AdminSysOpts.razor) ── */
.sys-opts-tabs {
    margin-top: 16px;
}

.sys-opts-tab {
    padding: 16px 4px 8px;
}

.sys-opts-pad {
    padding: 14px 20px 18px;
}

.sys-opts-checks {
    row-gap: 12px;
    column-gap: 24px;
}

.sys-opts-row {
    align-items: flex-start;
}

.sys-opts-check-label {
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212121;
    line-height: 1.35;
    padding-top: 1px;
}

.sys-opts-check-label .caption {
    margin-top: 2px;
    font-weight: 400;
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.4;
}

.caption {
    display: block;
    font-size: 0.75rem;
    color: #757575;
    letter-spacing: 0.02em;
}

.text-secondary { color: #757575 !important; }

/* ── Spacing (matches MudBlazor scale: 1 unit = 4px) ── */
.ma-0 { margin: 0 !important; }
.ma-1 { margin: 4px !important; }
.ma-2 { margin: 8px !important; }
.ma-3 { margin: 12px !important; }
.ma-4 { margin: 16px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-6 { margin-top: 24px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-6 { margin-bottom: 24px !important; }

.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 12px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }

.pa-0 { padding: 0 !important; }
.pa-2 { padding: 8px !important; }
.pa-3 { padding: 12px !important; }
.pa-4 { padding: 16px !important; }

.pt-2 { padding-top: 8px !important; }
.pb-2 { padding-bottom: 8px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }

/* ── Flex helpers (MudBlazor equivalents) ── */
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-start { align-items: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-space-between { justify-content: space-between !important; }

.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }

.w-100 { width: 100% !important; }
.flex-grow-1, .flex-1 { flex: 1 !important; }

/* ── Cards — Material Design elevation ── */
.k-card {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06),
                0 4px 6px -1px rgba(0,0,0,0.1) !important;
    background: #fff !important;
    overflow: hidden;
}

.k-card-header {
    padding: 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important;
}

.k-card-body {
    padding: 16px !important;
}

.k-card-actions {
    padding: 8px 16px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* ── Badges / Chips ── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 12px;
    letter-spacing: 0.02em;
}

.badge-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.badge-warning {
    background: #fff3e0;
    color: #e65100;
}

.badge-error {
    background: #ffebee;
    color: #c62828;
}

.badge-default {
    background: #f5f5f5;
    color: #616161;
}

.badge-info {
    background: #e3f2fd;
    color: var(--appbar-bg);
}

/* ── Form fields ── */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field > label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #424242;
}

/* Telerik input overrides for Material look */
.k-input,
.k-textbox,
.k-textarea,
.k-dropdownlist,
.k-numerictextbox,
.k-datepicker {
    border-radius: 4px !important;
}

.k-input:focus-within,
.k-textbox:focus-within {
    border-color: var(--appbar-bg) !important;
    box-shadow: 0 0 0 1px var(--appbar-bg) !important;
}

/* ── Layout shell ── */
.portal-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portal-header-image {
    width: 100%;
    line-height: 0;
    text-align: center;
    background: #fff;
    /* Reserve the band's height so the page does not reflow when the client header image finishes
       downloading. With line-height:0 and the img at height:auto this container collapsed to 0px and then
       jumped to max-height once the image painted, shifting everything below it — read as a "flash" at the
       top of the screen on first sign-in (the image is uncached then, e.g. 4321_84_HEADER.JPG at 118 KB).
       min-height matches the img max-height at every breakpoint below, and the image is centred in it. */
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-header-image img {
    height: auto;
    display: inline-block;
    max-height: 160px;
    max-width: 100%;
    object-fit: contain;
}

/* Shrink the client header logo on smaller screens so it doesn't dominate the viewport.
   min-height tracks max-height at each breakpoint — see the reflow note on .portal-header-image. */
@media (max-width: 960px) {
    .portal-header-image     { min-height: 90px; }
    .portal-header-image img { max-height: 90px; }
}
@media (max-width: 600px) {
    .portal-header-image     { min-height: 60px; }
    .portal-header-image img { max-height: 60px; }
}

/* Focus layout — slim chrome for single-task views opened in a new tab. */
.focus-layout .portal-main-full { margin-left: 0; padding: 0 24px 24px; }
.focus-appbar { height: 48px !important; }
.focus-appbar .appbar-title { font-size: 0.95rem; opacity: 0.9; }

.portal-appbar {
    display: flex;
    align-items: center;
    height: 56px;
    background: linear-gradient(135deg, var(--appbar-bg) 0%, var(--appbar-bg-end) 100%);
    color: var(--appbar-text);
    padding: 0 0.75rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    gap: 0.5rem;
}

/* Zones group related controls + add subtle vertical dividers between them */
.appbar-zone {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.appbar-zone + .appbar-zone:not(.appbar-zone-account) {
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: 0.6rem;
    margin-left: 0.2rem;
}
.appbar-zone-account {
    margin-left: 0.4rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255,255,255,0.18);
}

/* Chip pattern: pill with icon, optional label, and a control (dropdown / button) */
.appbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 0.6rem 0 0.7rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: var(--appbar-text);
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.appbar-chip:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.30); }
.appbar-chip .k-svg-icon { width: 16px; height: 16px; opacity: 0.9; }

.appbar-chip-label {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    opacity: 0.75;
    margin-right: 0.1rem;
}

/* Action chip — clickable pill (Switch Group). Plain HTML button, override defaults. */
button.appbar-chip-action {
    border: 1px solid rgba(255,255,255,0.18);
    font-family: inherit;
    font-weight: 500;
    line-height: 1;
}

/* Impersonation chip — amber accent when actively impersonating so it pops */
.appbar-chip-impersonate.active {
    background: rgba(255, 193, 7, 0.22);
    border-color: rgba(255, 193, 7, 0.55);
}
.appbar-chip-impersonate.active:hover {
    background: rgba(255, 193, 7, 0.32);
}

.appbar-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
    color: var(--appbar-text);
}

/* Buttons inside the appbar — flat white icons, no background */
.portal-appbar .k-button {
    color: var(--appbar-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.portal-appbar .k-button:hover {
    background: rgba(255,255,255,0.15) !important;
}

.portal-appbar .k-button:active,
.portal-appbar .k-button:focus {
    background: rgba(255,255,255,0.25) !important;
}

/* ── Drawer ── */
.portal-drawer {
    width: 280px;
    min-width: 280px;
    background: #fff;
    border-right: 1px solid #eee;
    overflow-y: auto;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.portal-drawer:not(.open) {
    margin-left: -280px;
}

.portal-main {
    flex: 1;
    padding: 0;
    min-width: 0;
    overflow-y: auto;
    min-height: calc(100vh - 56px);
    background: #fafafa;
}

.drawer-header {
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.drawer-username {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #424242;
}

.appbar-icon {
    color: #fff;
}

@media (max-width: 960px) {
    .portal-appbar {
        padding: 0 0.25rem;
    }

    .appbar-title {
        font-size: 1rem;
    }

    /* Reclaim width: drop the uppercase chip labels (icon + control convey it), shrink the
       fixed-width pickers, cap the viewing-context (its text truncates), tighten dividers. */
    .appbar-chip-label { display: none; }
    .appbar-chip .client-picker { width: 150px !important; }
    .appbar-chip .impersonation-picker { width: 130px !important; }
    .appbar-context { max-width: 400px; }
    .appbar-zone + .appbar-zone:not(.appbar-zone-account) { padding-left: 0.4rem; margin-left: 0.1rem; }

    .portal-drawer {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        z-index: 50;
    }

    .portal-drawer.open {
        box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    }

    .portal-drawer:not(.open) {
        margin-left: -280px;
    }
}

/* Phone — the app-bar must stay single-row and reachable. Brand text goes (the menu icon is the
   brand cue), Switch Group collapses to its icon, pickers shrink further, dividers drop, and the
   viewing-context caps tight (icon + truncated name + ✕ stay usable). */
@media (max-width: 600px) {
    .portal-appbar { gap: 0.2rem; padding: 0 0.2rem; }
    .appbar-title { display: none; }
    button.appbar-chip-action span { display: none; }
    .appbar-context { max-width: 140px; margin-right: 0.2rem; }
    .appbar-chip { padding: 0 0.4rem; gap: 0.3rem; }
    .appbar-chip .client-picker { width: 120px !important; }
    .appbar-chip .impersonation-picker { width: 108px !important; }
    .appbar-zone + .appbar-zone:not(.appbar-zone-account),
    .appbar-zone-account { border-left: none; padding-left: 0.2rem; margin-left: 0; }
}

.notification-badge-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
    color: #fff;
    text-decoration: none;
}

.badge-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    background: #f44336;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    padding: 0 4px;
    z-index: 1;
}

.badge-chat {
    background: #ff9800;
}

.chat-badge-pulse .appbar-icon {
    animation: chat-pulse 1.5s ease-in-out infinite;
}

@keyframes chat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Loader overlay ── */
.portal-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

/* ── Search dialog ── */
.search-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}

.search-results-area {
    max-height: 360px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.search-result-count {
    font-size: 0.75rem;
    color: #757575;
    padding: 0.25rem 0 0.5rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: #e3f2fd;
}

.search-result-item.selected {
    outline: 2px solid var(--btn-bg);
    outline-offset: -2px;
}

.search-result-icon {
    color: var(--btn-bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.search-result-label {
    flex: 1;
    font-size: 0.9rem;
    color: #212121;
}

.search-result-extra {
    font-size: 0.8rem;
    color: #757575;
    white-space: nowrap;
}

.search-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 0;
    color: #757575;
}

/* Quick Search dialog — the category dropdown is a real Telerik component but the search
   box is a raw <input> with Telerik classes; in the Material theme they render at different
   sizes/heights. Force both to the same 14px font + height so they line up (proportionate). */
.search-controls .k-picker,
.search-controls .k-dropdownlist,
.search-controls input[data-qs-input],
.search-controls .k-input-inner {
    font-size: 0.875rem !important;
}
.search-controls .k-picker,
.search-controls .k-dropdownlist,
.search-controls input[data-qs-input] {
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
}

/* Keep the FULL category label visible: the width:100% search box would otherwise
   squeeze this dropdown and truncate its text. Hold its width and let the box shrink. */
.search-controls .k-picker,
.search-controls .k-dropdownlist {
    flex-shrink: 0 !important;
}
.search-controls input[data-qs-input] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Collapsible panels (deductibles, etc.) ── */
.ded-panel {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    overflow: hidden;
}

.ded-panel > summary {
    padding: 14px 20px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    background: var(--panel-bg);
    color: var(--panel-text);
    list-style: none;
    user-select: none;
    transition: filter 0.15s;
}

/* Theme-agnostic hover: darken whatever the themed panel-bg is, so the themed
   panel-text stays readable on both light and dark client themes (a hardcoded
   light-grey hover made light text invisible on dark-themed panels). */
.ded-panel > summary:hover {
    filter: brightness(0.93);
}

.ded-panel > summary::-webkit-details-marker { display: none; }

.ded-panel > summary::before {
    content: '\25B8';
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.2s;
    color: #9e9e9e;
}

.ded-panel[open] > summary::before {
    transform: rotate(90deg);
}

.ded-panel[open] > summary {
    border-bottom: 1px solid #e8ecf0;
}

.ded-panel-body {
    padding: 20px;
}

.ded-section-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9e9e9e;
    margin-bottom: 8px;
}

.ded-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ded-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9e9e9e;
    padding: 8px 12px;
    border-bottom: 2px solid #e8ecf0;
}

.ded-table th:not(:first-child) {
    text-align: right;
}

.ded-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #212121;
}

.ded-table td:not(:first-child) {
    text-align: right;
    font-weight: 500;
}

.ded-table tr:last-child td {
    border-bottom: none;
}

/* ── Sidebar navigation ── */
.portal-nav {
    padding: 0.25rem 0;
}

.portal-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: #37474f;
    text-decoration: none;
    border-radius: 4px;
    margin: 1px 0.5rem;
    transition: background-color 0.15s, color 0.15s;
}

.portal-nav .nav-link:hover {
    background-color: #e3f2fd;
    color: var(--appbar-bg);
    text-decoration: none;
}

.portal-nav .nav-link.active {
    background-color: var(--appbar-bg);
    color: var(--appbar-text);
    font-weight: 500;
}

.portal-nav .nav-link .k-svg-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.appbar-context {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.6rem 0 0.7rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--appbar-text, #fff);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    white-space: nowrap;
    margin-right: 0.5rem;
    min-width: 0;          /* allow the chip to shrink so its text can truncate */
    max-width: 520px;
}
.appbar-context .k-svg-icon { width: 16px; height: 16px; opacity: 0.9; flex: none; }
/* Icon + ✕ stay pinned. The GROUP name ellipsizes when space is tight; the EMPLOYEE name is
   flex:none so it always shows in full (it's the selection the user cares about most). */
.appbar-context-text {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    flex: 0 1 auto;
}
.appbar-context-grp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}
.appbar-context-emp {
    flex: none;
    white-space: nowrap;
}

.appbar-context-sep {
    opacity: 0.5;
    margin: 0 0.15rem;
}

.appbar-context-clear {
    background: none;
    border: none;
    color: var(--appbar-text, #fff);
    opacity: 0.6;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.25rem;
    margin-left: 0.25rem;
    line-height: 1;
    flex: none;            /* never shrink — stays reachable as the text truncates */
}

.appbar-context-clear:hover {
    opacity: 1;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    /* Stays NEUTRAL. These headings briefly took var(--btn-bg) on 2026-08-15, to give a left-menu client's
       drawer some of its own colour. Reverted the same day once filled primary buttons started carrying
       ButtonColor: the headings then duplicated the buttons' colour in the same viewport, and — the real
       problem — a pale ButtonColor is fine as a button FILL but not as small 600-weight TEXT. On white,
       #37474f is 9.6:1 while a live client's #6AC3FF is 1.9:1, i.e. barely readable. */
    color: #37474f;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
    font-family: inherit;
}

.nav-section-header:hover {
    background-color: #f5f5f5;
}

/* Non-collapsible section heading (employee/employer flat menus, like old portal) */
.nav-section-static { cursor: default; }
.nav-section-static:hover { background: none; }

.nav-section-header .k-svg-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.nav-arrow {
    margin-left: auto;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #90a4ae;   /* neutral, matching its section heading — see .nav-section-header */
    transition: transform 0.2s ease;
}

.nav-section.open > .nav-section-header .nav-arrow {
    transform: rotate(90deg);
}

.nav-section-items {
    display: none;
    padding-bottom: 0.25rem;
}

.nav-section.open > .nav-section-items {
    display: block;
}

.nav-section-items .nav-link {
    padding-left: 2.5rem;
}

.nav-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0.5rem 1rem;
}

/* ── Top Navigation Bar ── */
.portal-topnav {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 0.5rem;
    min-height: 42px;
    gap: 2px;
    flex-wrap: wrap;
    position: sticky;
    top: 56px;
    z-index: 90;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.topnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #37474f;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    font-family: inherit;
    transition: background-color 0.15s, color 0.15s;
}

.topnav-link:hover {
    background: #e3f2fd;
    color: var(--appbar-bg);
    text-decoration: none;
}

.topnav-link.active {
    background: var(--appbar-bg);
    color: var(--appbar-text);
}

.topnav-link .k-svg-icon {
    width: 16px;
    height: 16px;
}

.topnav-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 2px;
}

.topnav-spacer {
    flex: 1;
}

.topnav-dropdown {
    position: relative;
}

.topnav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px 0;
    z-index: 200;
    margin-top: 2px;
}

.topnav-menu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: #37474f;
    text-decoration: none;
    transition: background-color 0.15s;
}

.topnav-menu-link:hover {
    background: #e3f2fd;
    color: var(--appbar-bg);
    text-decoration: none;
}

.topnav-menu-link.active {
    background: var(--appbar-bg);
    color: var(--appbar-text);
}

.topnav-menu-link .k-svg-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.topnav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 89;
}

.portal-main-full {
    flex: 1;
    min-height: calc(100vh - 98px);
}

@media (max-width: 960px) {
    .portal-topnav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .topnav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ── Button color utilities (Telerik buttons don't accept Style) ── */
.btn-success.k-button,
.btn-success .k-button {
    color: #2e7d32 !important;
}

.btn-danger.k-button,
.btn-danger .k-button {
    color: #c62828 !important;
}

.btn-warning.k-button,
.btn-warning .k-button {
    color: #e65100 !important;
}

.btn-info.k-button,
.btn-info .k-button {
    color: #0277bd !important;
}

/* ── Grid filter row (Telerik 13) ──
   Simple type-to-filter: hide the per-cell operator dropdown button (it crammed the
   narrow columns and cluttered the row) and let the text input fill the whole cell. */
.k-grid .k-filter-row td {
    background: #f5f8fc;
    border-bottom: 2px solid #d0dce8 !important;
    padding: 6px 10px !important;
}

/* Drop the operator picker + any leftover buttons; the input alone fills the cell. */
.k-filtercell .k-filtercell-operator,
.k-filtercell .k-filtercell-operator .k-dropdownlist,
.k-filtercell .k-filter-and { display: none !important; }

.k-filtercell .k-filtercell-wrapper {
    gap: 0 !important;
}

.k-filtercell .k-filtercell-wrapper > .k-input,
.k-filtercell .k-filtercell-wrapper > .k-textbox,
.k-filtercell .k-input,
.k-filtercell .k-picker {
    width: 100% !important;
}

.k-filtercell .k-input {
    background: #fff;
    border: 1px solid #cdd8e3;
    border-radius: 4px;
}

.k-filtercell .k-input-inner {
    font-size: 0.875rem;
    padding: 5px 8px;
}

.k-filtercell .k-input:focus-within {
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}

.k-filtercell input::placeholder {
    color: #a0b0c0;
    font-size: 0.8125rem;
    font-weight: 400;
    font-style: italic;
}

/* ── Dropdowns: keep the selected value AND the popup list items on ONE line
   (truncate with an ellipsis) instead of wrapping long group/client/payer names. ── */
/* Closed/selected value: one line; the … here only shows because the control width is
   fixed — opening the dropdown reveals the full text (popup grows to fit, below). */
.k-dropdownlist .k-input-value-text,
.k-combobox .k-input-value-text,
.k-picker .k-input-value-text,
.k-dropdownlist .k-input-inner {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Popup: keep each option on ONE line, but let the popup GROW to fit the full label
   instead of truncating to the (narrow) control width. Telerik sets the width as an
   INLINE style on the .k-animation-container wrapper, so the override has to land there
   (and on the popup) — overriding only the inner popup left the wrapper clipping it.
   Scoped with :has() to LIST popups only, so tooltips/windows/calendars are untouched.
   Capped so very long names still ellipsize rather than make a giant popup. */
.k-animation-container:has(.k-list-container) {
    width: auto !important;
    max-width: 560px !important;
}

.k-animation-container .k-popup.k-list-container,
.k-popup.k-list-container {
    width: auto !important;
    min-width: 100% !important;
    max-width: 560px !important;
}

.k-list .k-list-item,
.k-list .k-list-item .k-list-item-text {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Telerik Grid polish ── */
.k-grid {
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

.k-grid .k-grid-header {
    background: var(--grid-header-bg) !important;
    color: var(--grid-header-text) !important;
}

.k-grid th {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--grid-header-text) !important;
    border-bottom: 2px solid #e0e0e0 !important;
    padding: 10px 14px !important;
}

/* Sortability discoverability: Telerik only shows a sort arrow AFTER a column is sorted, so users get
   no cue that headers are clickable. Show a faint up/down hint on SORTABLE headers only. Telerik marks
   sortable columns with an aria-sort attribute (="none" when unsorted; ="ascending"/"descending" when
   sorted); non-sortable columns have NO aria-sort — so keying off aria-sort targets only sortable ones
   (.k-link wraps every header title, sortable or not, so it can't be used for this). We show the hint
   only while unsorted (aria-sort="none"); once sorted, Telerik's own arrow takes over. */
.k-grid th[aria-sort] .k-link { cursor: pointer; }
.k-grid th[aria-sort="none"] .k-link::after {
    content: "\21C5"; /* ⇅ */
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.4;
    font-weight: 400;
}

.k-grid td {
    font-size: 0.875rem !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 9px 14px !important;
    line-height: 1.4 !important;
}

/* Telerik 13's grid rows default tighter than v7 — restore comfortable row height. */
.k-grid .k-table-row,
.k-grid .k-master-row { height: auto !important; }

.k-grid .k-grid-norecords td {
    padding: 2rem !important;
    text-align: center;
    color: #9e9e9e;
}

/* Grids use the "native horizontal scroll" pattern: every column has an explicit Width, so Telerik's
   grid scrolls horizontally on its own (synced header/body, single-line, full values) whenever the
   columns don't fit — at any screen size. No wrapper/min-width CSS is needed. */

/* Narrow screens: forms across the portal set fixed pixel widths on inputs (Width="300px" etc.),
   which overflow a phone/tablet-width container. Rather than touch 300+ inline widths, cap every
   Telerik input at its container width so they shrink to fit. Desktop (>960px) keeps the exact
   fixed widths — this only constrains when the container is actually narrower. */
@media (max-width: 960px) {
    .k-input, .k-picker, .k-textbox, .k-dropdownlist, .k-combobox, .k-multiselect,
    .k-numerictextbox, .k-datepicker, .k-datetimepicker, .k-timepicker,
    .k-maskedtextbox, .k-textarea, .k-dateinput { max-width: 100%; }
}

/* Phone: labeled form fields read best as a full-width stack — force their input to fill the field
   (overrides the inline fixed Width) so nothing is left as an awkward narrow box. */
@media (max-width: 600px) {
    .form-field .k-input, .form-field .k-picker,
    .form-field .k-textbox, .form-field .k-dropdownlist, .form-field .k-datepicker,
    .form-field .k-numerictextbox, .form-field .k-combobox, .form-field .k-textarea,
    .form-field .k-multiselect, .form-field .k-maskedtextbox { width: 100% !important; }
}


/* ── Telerik TabStrip polish ── */
.k-tabstrip-items .k-item {
    font-size: 0.875rem !important;
}

.k-tabstrip-items .k-item.k-active {
    font-weight: 500 !important;
}

/* ── Telerik Window (dialog) polish ── */
.k-window {
    border-radius: 12px !important;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,0.1),
                0 24px 38px 3px rgba(0,0,0,0.07),
                0 9px 46px 8px rgba(0,0,0,0.06) !important;
    border: none !important;
}

.k-window-titlebar {
    border-radius: 12px 12px 0 0 !important;
}

/* ── Dialogs must never outgrow the viewport ──────────────────────────────────────────────
   Telerik centres a Window at its NATURAL height and we set no bound, so a tall form (the
   beneficiary editor is ~30 fields at Width="650px") runs past the top AND bottom edges on a
   short viewport — the title bar goes off the top, .dialog-actions off the bottom, and nothing
   scrolls, so the Save/Cancel buttons cannot be reached at all. Reported on a tablet 2026-08-14.

   Fixed once, here, rather than per dialog: 26 dialogs carry a hard-coded pixel Width and every
   one of them has the same failure mode on a short screen.
   - max-height/max-width clamp the window to the viewport (dvh so mobile browser chrome counts).
   - the content area scrolls instead of the window overflowing.
   - .dialog-actions sticks to the bottom of that scroll area, so the buttons are reachable no
     matter how long the form is — which is the actual complaint. */
.k-window {
    max-height: 92vh;
    max-height: 92dvh;
    max-width: 94vw;
}

.k-window-content {
    overflow: auto;
    overscroll-behavior: contain;
}

.k-window-content .dialog-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding-top: 0.6rem;
    margin-top: 0.6rem;
}

/* ── Telerik Notification polish ── */
.k-notification-group {
    z-index: 10000 !important;
}

.k-notification {
    border-radius: 8px !important;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.1),
                0 6px 10px rgba(0,0,0,0.07) !important;
}

/* ── Messages page ── */
.message-item {
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.message-item:hover {
    background: #f5f5f5;
}

.message-item.selected {
    background: #e3f2fd;
}

/* ── Telerik Table (used in deductibles, etc.) ── */
.k-table {
    border-radius: 4px;
}

.k-table th {
    background: #fafafa;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #424242;
}

.k-table td {
    font-size: 0.8125rem;
}

/* ── Telerik Button polish ── */
.k-button {
    border-radius: 4px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

/* ── Telerik Checkbox polish ──
   Telerik renders <input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
   so we need .k-checkbox.k-checkbox-md to override the framework's own size rules.
*/
input.k-checkbox,
input.k-checkbox.k-checkbox-md,
input.k-checkbox.k-checkbox-sm,
input.k-checkbox.k-checkbox-lg {
    appearance: none;
    -webkit-appearance: none;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 2px solid #757575 !important;
    border-radius: 3px !important;
    background-color: #ffffff !important;
    cursor: pointer;
    margin: 0;
    padding: 0;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
    flex: 0 0 auto;
    vertical-align: middle;
    position: relative;
}

input.k-checkbox:hover {
    border-color: #1565c0 !important;
    box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.10);
}

input.k-checkbox:focus,
input.k-checkbox.k-focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.30);
}

input.k-checkbox:checked,
input.k-checkbox.k-checked {
    background-color: #1565c0 !important;
    border-color: #1565c0 !important;
}

input.k-checkbox:checked::after,
input.k-checkbox.k-checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    display: block;
}

input.k-checkbox:indeterminate,
input.k-checkbox.k-indeterminate {
    background-color: #1565c0 !important;
    border-color: #1565c0 !important;
}

input.k-checkbox:indeterminate::after,
input.k-checkbox.k-indeterminate::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 6px;
    height: 2px;
    background: #ffffff;
    border: none;
    transform: none;
}

input.k-checkbox:disabled,
input.k-checkbox.k-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* PortalCheckBox — RDP-safe controlled checkbox (real svg child, NO transform so remote-desktop repaints
   it reliably; the k-checkbox ::after checkmark is a composited rotated pseudo that RDP renders stale). */
.pcb {
    width: 16px; height: 16px; flex: none;
    border: 2px solid #757575; border-radius: 3px; background: #fff;
    display: inline-grid; place-items: center; vertical-align: middle; cursor: pointer;
}
.pcb.on { background: #1565c0; border-color: #1565c0; }
.pcb:hover { border-color: #1565c0; }
.pcb:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.30); }
.pcb.pcb-dis { opacity: 0.5; cursor: not-allowed; }
.pcb svg {
    width: 11px; height: 11px; display: block;
    fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}

/* Hide Telerik's pseudo-element checkmark so it doesn't double up with ours */
input.k-checkbox::before {
    content: none !important;
}

/* ── Checkbox label alignment ── */
label.k-checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    font-size: 0.9375rem;
}

/* ── Custom utility: col-12 ── */
.col-12 { width: 100%; }

/* ── Dialog footer actions ── */
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f0f0f0;
}

/* ── Claim detail ── */
.cd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.cd-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #424242;
    transition: background 0.15s;
}

.cd-back:hover {
    background: #f0f0f0;
    color: #212121;
}

.cd-claim-number {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212121;
    margin: 0;
    line-height: 1.3;
}

.cd-header-sub {
    font-size: 0.8125rem;
    color: #757575;
}

.cd-finance-strip {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f8fafe 0%, #f0f4ff 100%);
    border: 1px solid #e3eaf6;
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cd-finance-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cd-finance-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cd-finance-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212121;
}

.cd-accent-blue { color: var(--appbar-bg); }
.cd-accent-orange { color: #e65100; }

.cd-finance-divider {
    width: 1px;
    height: 36px;
    background: #c5cfe0;
}

.cd-message {
    padding: 10px 16px;
    background: #e3f2fd;
    border-left: 3px solid var(--btn-bg);
    border-radius: 0 6px 6px 0;
    font-size: 0.8125rem;
    color: var(--appbar-bg);
    margin-bottom: 20px;
}

.cd-panel {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    padding: 20px;
}

.cd-panel-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9e9e9e;
    margin-bottom: 12px;
}

.cd-provider-name {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    margin-bottom: 2px;
}

.cd-provider-id {
    font-size: 0.75rem;
    color: #757575;
    margin-bottom: 8px;
}

.cd-provider-addr {
    font-size: 0.8125rem;
    color: #424242;
    line-height: 1.5;
}

.cd-ppo {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    font-size: 0.8125rem;
    color: #616161;
}

.cd-detail-rows {
    display: flex;
    flex-direction: column;
}

.cd-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.8125rem;
}

.cd-detail-row:last-child {
    border-bottom: none;
}

.cd-detail-row > span:first-child {
    color: #757575;
}

.cd-detail-row > span:last-child {
    font-weight: 500;
    color: #212121;
}

.cd-lines-section {
    margin-bottom: 20px;
}

.cd-lines-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cd-totals {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: #fafafa;
    border: 1px solid #e8ecf0;
    border-top: 2px solid #e0e0e0;
    border-radius: 0 0 10px 10px;
    flex-wrap: wrap;
}

.cd-totals-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #9e9e9e;
    letter-spacing: 0.06em;
    padding-top: 2px;
}

.cd-totals-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    flex: 1;
}

.cd-totals-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cd-totals-item > span:first-child {
    font-size: 0.6875rem;
    color: #9e9e9e;
}

.cd-totals-item > span:last-child {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #212121;
}

.cd-totals-highlight > span:last-child {
    color: var(--appbar-bg);
}

.cd-disclaimer {
    margin-top: 20px;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #757575;
    line-height: 1.6;
}

/* Explanation Code & Description legend (claim detail / EOB) */
.cd-expl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.cd-expl-table th {
    text-align: left;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #757575;
    padding: 6px 12px;
    border-bottom: 1px solid #e8ecf0;
}

.cd-expl-table td {
    padding: 6px 12px;
    border-bottom: 1px solid #f0f2f5;
    color: #212121;
    vertical-align: top;
}

.cd-expl-table td:first-child {
    width: 90px;
    font-weight: 600;
    white-space: nowrap;
}

.cd-expl-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 960px) {
    .cd-finance-strip {
        gap: 1rem;
        padding: 12px 16px;
    }
    .cd-finance-value {
        font-size: 1rem;
    }
    .cd-finance-divider {
        display: none;
    }
}

/* ── Claims list ── */
.cl-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cl-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212121;
    margin: 0;
    line-height: 1.3;
}

.cl-subtitle {
    font-size: 0.8125rem;
    color: #9e9e9e;
}

.cl-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cl-filter {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
}

/* ── DateBox (free-typing date input + calendar button) ──────────────────── */
.datebox {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    height: 32px;
    box-sizing: border-box;
}
.datebox:focus-within { border-color: var(--btn-bg, #1976d2); box-shadow: 0 0 0 2px rgba(25,118,210,0.15); }
.datebox-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 8px;
    font: inherit;
    color: inherit;
    height: 100%;
}
.datebox-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    border: none;
    border-left: 1px solid #eee;
    background: transparent;
    cursor: pointer;
    color: #666;
}
.datebox-btn:hover { background: #f0f0f0; }
/* Native date input is present (for showPicker) but visually hidden — typing happens in .datebox-input. */
.datebox-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
    margin: 0;
}
.datebox-disabled { background: #f5f5f5; opacity: 0.7; }
.datebox-disabled .datebox-input,
.datebox-disabled .datebox-btn { cursor: not-allowed; }

.cl-filter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9e9e9e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cl-filter-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    align-self: flex-end;
}

.cl-results-bar {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}

/* Grids whose rows navigate on click — show the affordance up front. */
.cl-clickable-rows .k-grid-table tr { cursor: pointer; }
.cl-clickable-rows .k-grid-table tr:hover { background: #f4f9ff; }

.cl-results-count {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--appbar-bg);
}

.cl-results-label {
    font-size: 0.8125rem;
    color: #9e9e9e;
}

.cl-clear-btn {
    margin-left: auto;
}

.cl-claim-link {
    font-weight: 500;
    text-decoration: none;
}

.cl-claim-link:hover {
    text-decoration: underline;
}

.cl-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #757575;
    transition: all 0.15s;
}

.cl-print-btn:hover {
    background: #f0f0f0;
    color: #424242;
}

/* Date-range filter bar above the claims grid */
.cl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-end;
    padding: 14px 18px;
    margin-bottom: 14px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.cl-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cl-filter-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #616161;
}
.cl-filter-range {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-filter-dash {
    color: #9e9e9e;
}

.cl-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 2rem;
    color: #bdbdbd;
}

.cl-no-data span {
    font-size: 0.875rem;
    color: #9e9e9e;
}

@media (max-width: 960px) {
    .cl-page-header {
        flex-direction: column;
        gap: 12px;
    }
    .cl-filters {
        padding: 12px;
    }
    .cl-filter {
        min-width: 100%;
    }
    .cl-filter-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ── ID Card page layout ───────────────────────────────────────────────── */
.idc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    align-items: start;
    margin-top: 16px;
}

@media (max-width: 900px) {
    .idc-layout { grid-template-columns: 1fr; }
}

.idc-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ── The card itself (front + optional back panel) ───────────────────────
   Aspect ratio: 540 × 340 ≈ 1.59:1, mid-way between a credit card (1.586)
   and the legible width needed for a clinic to read plan info. */
.idcard {
    width: 540px;
    max-width: 100%;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.idcard-stripe {
    background: linear-gradient(135deg, var(--appbar-bg, #1e88e5) 0%, #1565c0 100%);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
}

.idcard-logo {
    max-height: 44px;
    max-width: 140px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    padding: 4px 8px;
    object-fit: contain;
}

.idcard-brand-text {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    flex: 1;
    line-height: 1.2;
}

.idcard-temp-pill {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 999px;
}

.idcard-front {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.idcard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.idcard-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.idcard-right {
    text-align: right;
    align-items: flex-end;
}

.idcard-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
}

.idcard-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
}

.idcard-id {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.5px;
}

.idcard-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.idcard-sub {
    font-size: 0.78rem;
    color: #6b7280;
}

.idcard-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.idcard-plan-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.idcard-plan-row {
    display: grid;
    grid-template-columns: 150px 1fr;   /* wide label col = the print's gap between e.g. "Medical" and the address */
    align-items: start;
    gap: 8px;
    font-size: 0.85rem;
}

/* Freeform descr values can hold a multi-line, hand-aligned block (spaces + line breaks).
   pre-wrap PRESERVES those spaces (pre-line would collapse them and break the column
   alignment the group encoded), while still wrapping if the card is narrow. */
.idcard-plan-value {
    white-space: pre-wrap;
    line-height: 1.4;
    text-align: left;
    min-width: 0;
}

/* Title-less freeform row: the description is self-contained pre-formatted text
   (its own columns via spaces + newlines, e.g. a claims address). Render full-width
   with whitespace preserved so it lays out exactly as the group entered it. */
.idcard-plan-pre {
    white-space: pre-wrap;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #374151;
}

/* ── Back-of-card panel for accumulators ─────────────────────────────── */
.idcard-back {
    background: #f8fafc;
    border-top: 1px dashed #cbd5e1;
    padding: 14px 22px 18px;
}

.idcard-back-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
    margin-bottom: 6px;
}

.idcard-accum {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.idcard-accum th,
.idcard-accum td {
    padding: 5px 6px;
    border-bottom: 1px solid #e5e7eb;
    text-align: right;
}

.idcard-accum th:first-child,
.idcard-accum td:first-child {
    text-align: left;
}

.idcard-accum thead th {
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.idcard-accum tbody td {
    color: #111827;
}

/* Group sub-headers in the accumulator table — "Maximum Deductibles" / "Out of Pocket" */
.idcard-accum tbody tr.idcard-accum-group td {
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #374151;
    background: #f1f5f9;
    padding-top: 7px;
}

.idcard-disclaimer {
    max-width: 540px;
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.5;
}

/* ── Side action panel ───────────────────────────────────────────────── */
.idc-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.idc-action-help {
    margin: 0;
    font-size: 0.78rem;
    color: #6b7280;
}

.idc-action-sep {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 6px 0;
}

.idc-status {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 2px;
    margin: 6px 0 0;
    font-size: 0.85rem;
}

.idc-status dt {
    color: #6b7280;
}

.idc-status dd {
    margin: 0;
    font-weight: 600;
    color: #111827;
    text-align: right;
}

.idc-status-warn {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: #b45309;
}

/* ── Eligibility (el-*) ── */
.el-current-strip {
    background: #fff;
    border: 1px solid #c8e6c9;
    border-left: 4px solid #43a047;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.el-current-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.el-current-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #43a047;
    flex-shrink: 0;
}

.el-current-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #2e7d32;
}

.el-current-dates {
    font-size: 0.8125rem;
    color: #757575;
    margin-left: auto;
}

.el-coverage-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.el-coverage-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 12px;
    background: #e8f5e9;
    color: #2e7d32;
}

.el-detail-rows {
    display: flex;
    flex-direction: column;
}

.el-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #212121;
}

.el-detail-row:last-child {
    border-bottom: none;
}

.el-detail-label {
    color: #757575;
    min-width: 40px;
    font-weight: 400;
}

.el-current-plan {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e8f5e9;
    font-size: 0.8125rem;
    color: #424242;
}

.el-plan-separator {
    color: #c8e6c9;
}

tr.el-current-row td:first-child {
    box-shadow: inset 3px 0 0 #43a047;
}

tr.el-current-row:not(.k-selected) {
    background: #f1f8e9;
}

@media (max-width: 960px) {
    .el-current-header {
        flex-wrap: wrap;
    }
    .el-current-dates {
        margin-left: 0;
        width: 100%;
        padding-left: 16px;
    }
}

/* ── Chat (chat-*) ── */
.chat-container {
    max-width: 900px;
}

.chat-panel {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-messages {
    height: 480px;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fafafa;
}

.chat-row {
    display: flex;
    max-width: 70%;
}

.chat-row.mine {
    align-self: flex-end;
}

.chat-row.theirs {
    align-self: flex-start;
}

.chat-sender {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9e9e9e;
    margin-bottom: 2px;
}

.chat-bubble {
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
}

.chat-row.theirs .chat-bubble {
    background: #fff;
    border: 1px solid #e8ecf0;
    color: #212121;
    border-top-left-radius: 4px;
}

.chat-row.mine .chat-bubble {
    background: var(--appbar-bg);
    color: #fff;
    border-top-right-radius: 4px;
}

.chat-time {
    font-size: 0.625rem;
    color: #bdbdbd;
    margin-top: 2px;
    padding: 0 4px;
}

.chat-row.mine .chat-time {
    text-align: right;
}

.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e8ecf0;
    background: #fff;
}

.chat-input-bar .k-textbox {
    flex: 1;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e8ecf0;
    background: #f5f8fc;
    font-weight: 600;
    font-size: 0.875rem;
}

.chat-row.system {
    align-self: center;
    max-width: 100%;
}

.chat-system {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 4px 0;
}

.chat-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
    color: #555;
}

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: #999;
}

.chat-request-card {
    padding: 12px 14px;
    border: 1px solid #e8ecf0;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fafafa;
}

/* ── Chat widget (floating) ── */

.chat-widget-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--appbar-bg, #1565c0);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-widget-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.chat-widget-fab.active {
    background: #ff9800;
    animation: chat-pulse 1.5s ease-in-out infinite;
}

.chat-widget-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    width: 380px;
    max-height: 520px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--appbar-bg, #1565c0);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
}

.chat-widget-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.8;
}

.chat-widget-close:hover {
    opacity: 1;
}

.chat-widget-messages {
    flex: 1;
    height: 320px;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fafafa;
}

.chat-widget-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e8ecf0;
    background: #fff;
}

.chat-widget-input .k-textbox {
    flex: 1;
}

.chat-widget-footer {
    display: flex;
    justify-content: center;
    padding: 4px 12px 8px;
    border-top: 1px solid #f0f0f0;
}

.chat-widget-body-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
    color: #555;
    font-size: 0.875rem;
}

.chat-widget-panel.chat-widget-wide {
    width: 460px;
    max-height: 580px;
}

.chat-widget-panel.chat-widget-wide .chat-widget-messages {
    height: 400px;
}

@media (max-width: 480px) {
    .chat-widget-panel,
    .chat-widget-panel.chat-widget-wide {
        width: calc(100vw - 16px);
        right: 8px;
        bottom: 8px;
        max-height: 70vh;
    }
}

/* ── Messaging (msg-*) ── */
.msg-layout {
    display: flex;
    gap: 16px;
    min-height: 560px;
}

.msg-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.msg-sidebar-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e8ecf0;
    background: #fafafa;
    gap: 0;
}

.msg-tab {
    flex: 1;
    padding: 12px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #757575;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.15s, border-color 0.15s;
}

.msg-tab:hover {
    color: #424242;
}

.msg-tab.active {
    color: var(--appbar-bg);
    border-bottom-color: var(--appbar-bg);
}

.msg-sidebar-title {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #424242;
}

.msg-filters {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #e8ecf0;
    background: #fafafa;
}

.msg-filter-select {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    color: #424242;
}

.msg-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid #e8ecf0;
    background: #fff;
    font-size: 0.75rem;
}

.msg-bulk-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #616161;
    cursor: pointer;
}

.msg-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.7rem;
    color: #c62828;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}

.msg-bulk-btn:hover {
    background: #ffcdd2;
}

.msg-list {
    flex: 1;
    overflow-y: auto;
}

.msg-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 12px;
    border-top: 1px solid #e8ecf0;
    background: #fafafa;
    font-size: 0.75rem;
    color: #616161;
}

.msg-pager-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msg-pager-page {
    min-width: 44px;
    text-align: center;
}

.msg-pager-btn {
    padding: 2px 9px;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #424242;
    cursor: pointer;
}

.msg-pager-btn:hover:not(:disabled) {
    background: #eef2f6;
}

.msg-pager-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.msg-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}

.msg-item-check {
    margin-top: 4px;
    flex-shrink: 0;
}

.msg-item-body {
    flex: 1;
    min-width: 0;
}

.msg-item:hover {
    background: #f5f5f5;
}

.msg-item.selected {
    background: #e3f2fd;
    border-left: 3px solid var(--appbar-bg);
    padding-left: 9px;
}

.msg-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.msg-item-from {
    font-size: 0.8125rem;
    color: #212121;
}

.msg-item-from.unread {
    font-weight: 700;
}

.msg-item-date {
    font-size: 0.6875rem;
    color: #9e9e9e;
}

.msg-item-subject {
    font-size: 0.75rem;
    color: #757575;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-item-subject.unread {
    font-weight: 600;
    color: #424242;
}

.msg-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.msg-content-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e8ecf0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.msg-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.msg-attachments {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid #e8ecf0;
    background: #fafafa;
    flex-wrap: wrap;
}

.msg-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--appbar-bg);
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.msg-attach-btn:hover {
    background: #bbdefb;
}

.msg-attach-size {
    color: #9e9e9e;
    font-size: 0.6875rem;
}

.msg-action-bar {
    padding: 8px 20px;
    border-bottom: 1px solid #e8ecf0;
    background: #e8f5e9;
}

.msg-content-subject {
    font-size: 1rem;
    font-weight: 600;
    color: #212121;
    margin: 0;
}

.msg-content-meta {
    font-size: 0.75rem;
    color: #9e9e9e;
    margin-top: 4px;
}

.msg-content-body {
    padding: 20px;
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #424242;
    white-space: pre-wrap;
    overflow-y: auto;
}

.msg-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9e9e9e;
    font-size: 0.8125rem;
}

@media (max-width: 960px) {
    .msg-layout {
        flex-direction: column;
    }
    .msg-sidebar {
        width: 100%;
        max-height: 300px;
    }
}

/* ── Beneficiaries ── */
.ben-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

.ben-status-draft { background: #e3f2fd; border: 1px solid #90caf9; }
.ben-status-submitted { background: #fff3e0; border: 1px solid #ffcc80; }
.ben-status-approved { background: #e8f5e9; border: 1px solid #a5d6a7; }
.ben-status-denied { background: #ffebee; border: 1px solid #ef9a9a; }

.ben-usecore {
    padding: 12px 16px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
}

.ben-usecore input[type="checkbox"] {
    accent-color: #1565c0;
    width: 16px;
    height: 16px;
}

.ben-level-section {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.ben-level-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e8ecf0;
}

.ben-level-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #424242;
}

.ben-empty {
    padding: 20px 16px;
    text-align: center;
    color: #9e9e9e;
    font-size: 0.8125rem;
}

.ben-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}

.ben-card:last-child { border-bottom: none; }
.ben-card:hover { background: #fafafa; }

.ben-card-main {
    flex: 1;
    min-width: 0;
}

.ben-card-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212121;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ben-card-details {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: #757575;
    margin-top: 2px;
}

.ben-card-perc {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1565c0;
    min-width: 48px;
    text-align: right;
}

.ben-card-actions {
    display: flex;
    gap: 2px;
}

/* ── Message Admin ── */
.msg-admin-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    padding: 0 12px;
    gap: 0;
}

.msg-admin-tab {
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #757575;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.msg-admin-tab:hover {
    color: #1565c0;
}

.msg-admin-tab.active {
    color: #1565c0;
    border-bottom-color: #1565c0;
}

.msg-admin-tab.disabled {
    color: #c0c4c9;
    cursor: not-allowed;
}

.msg-admin-tab.disabled:hover {
    color: #c0c4c9;
}

.msg-admin-flow-hint {
    padding: 8px 12px 0;
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
}

.msg-compose-mode {
    display: flex;
    gap: 16px;
    padding: 6px 0 10px;
    margin-bottom: 4px;
}
.msg-compose-mode-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #424242;
    cursor: pointer;
    user-select: none;
}
.msg-compose-mode-opt input[type="radio"] {
    accent-color: #1565c0;
    cursor: pointer;
}

.msg-assign-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.msg-assign-row:last-child {
    border-bottom: none;
}

.msg-assign-name {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #212121;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-assign-email {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #757575;
    cursor: pointer;
    white-space: nowrap;
}

.msg-assign-email input[type="checkbox"] {
    accent-color: #1565c0;
}

/* ── Report Setup page (Admin/AdminReports.razor) ── */
.rpt-admin-tabs { margin-top: 4px; }

.rpt-admin-selected {
    padding: 8px 12px;
    background: #f3f4f6;
    border-left: 3px solid #1565c0;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.rpt-admin-selected .caption { margin-left: 8px; }

.rpt-admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.rpt-admin-dl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1565c0;
    text-decoration: none;
    font-size: 0.8125rem;
}

.rpt-admin-dl:hover { text-decoration: underline; }

.msg-admin-nudge {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    color: #1e3a8a;
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-bottom: 12px;
    border-radius: 4px;
}

.msg-admin-nudge .telerik-blazor.k-icon { color: #3b82f6; flex-shrink: 0; margin-top: 2px; }

.msg-assign-allbadge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #2e7d32;
}

/* ── Dashboard (db-*) ── */
.db-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.db-welcome h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212121;
    margin: 0;
}

.db-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.db-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    padding: 18px 20px;
    transition: box-shadow 0.15s;
}

.db-stat-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.db-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-stat-icon.green  { background: #e8f5e9; color: #2e7d32; }
.db-stat-icon.red    { background: #ffebee; color: #c62828; }
.db-stat-icon.blue   { background: #e3f2fd; color: var(--appbar-bg); }
.db-stat-icon.orange { background: #fff3e0; color: #e65100; }
.db-stat-icon.purple { background: #f3e5f5; color: #6a1b9a; }

.db-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9e9e9e;
}

.db-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #212121;
}

.db-stat-link {
    font-size: 0.75rem;
    font-weight: 500;
}

.db-section {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.db-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e8ecf0;
    background: var(--panel-bg);
}

.db-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--panel-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Footer note under a dashboard section's grid — e.g. "10 of 23 shown" when the list is capped.
   Horizontal padding matches .db-section-header (20px); colour matches .db-stat-label's muted grey. */
.db-section-note {
    padding: 10px 20px;
    border-top: 1px solid #e8ecf0;
    font-size: 0.75rem;
    color: #9e9e9e;
}

.db-info-rows {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
}

.db-info-row {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.8125rem;
}

.db-info-row:last-child {
    border-bottom: none;
}

.db-info-label {
    color: #757575;
    min-width: 120px;
    flex-shrink: 0;
}

.db-info-value {
    font-weight: 500;
    color: #212121;
}

/* ── Employer Home dashboard (Dashboards/EmployerHome.razor) ── */

/* Phase 2 — custom hero */
.emp-home-hero-video {
    position: relative;
    width: 100%;
    padding-top: 36%; /* ~16:9-ish, but bounded so it doesn't dominate */
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1px solid #e0e0e0;
    max-height: 320px;
}
.emp-home-hero-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.emp-home-hero-slider {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #fafafa;
}

.emp-home-slide {
    /* Flex, not grid: Telerik's carousel page is a content-sized flex item, so grid `fr`
       columns (and % widths) have no free space to resolve against and collapse to 0. */
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.emp-home-slide-img {
    flex: 0 0 auto;            /* keep the image's own size, don't let it collapse */
    display: flex;
    justify-content: center;
}
.emp-home-slide-img img {
    /* Definite px height + width:auto -> size comes from the image's intrinsic aspect ratio,
       never from the (indefinite) parent width, so it can never render 0x0. */
    height: 160px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    border-radius: 6px;
}
.emp-home-slide-text {
    flex: 1 1 auto;
    min-width: 0;             /* allow the text to wrap/shrink instead of forcing overflow */
}
.emp-home-slide-text h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    color: #212121;
}
.emp-home-slide-text div { font-size: 0.9rem; color: #424242; line-height: 1.45; }

/* Phase 3 — categorized resource links */
.emp-home-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.emp-home-links-col {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    padding: 14px 18px;
}
.emp-home-links-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
    color: #1565c0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.emp-home-links-col ul { list-style: none; padding: 0; margin: 0; }
.emp-home-links-col li { padding: 4px 0; font-size: 0.85rem; }
.emp-home-links-col a { color: #424242; text-decoration: none; }
.emp-home-links-col a:hover { color: #1565c0; text-decoration: underline; }

.emp-home-pad      { padding: 16px 20px; }
.emp-home-grpname  { font-size: 1.05rem; margin: 0 0 6px; color: #212121; }
.emp-home-grpaddr  { font-size: 0.85rem; color: #555; line-height: 1.45; }
.emp-home-grpaddr div { margin-bottom: 2px; }

.emp-home-ann {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.emp-home-ann:last-child       { border-bottom: none; }
.emp-home-ann-subject          { font-weight: 600; font-size: 0.875rem; color: #1565c0; margin-bottom: 2px; }
.emp-home-ann-body             { font-size: 0.8rem; color: #4a4a4a; line-height: 1.4; }

.emp-home-viewall {
    font-size: 0.78rem;
    color: #1565c0;
    text-decoration: none;
}
.emp-home-viewall:hover        { text-decoration: underline; }

.db-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* Provider dashboard — payer-selection cards (click a payer to work in it). */
.db-payer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 16px 20px;
}
.db-payer-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    width: 100%;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    padding: 16px 18px;
    cursor: pointer;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.db-payer-card:hover {
    border-color: var(--appbar-bg);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.db-payer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 8px;
    background: #e3f2fd;
    color: var(--appbar-bg);
    font-size: 1.1rem;
}
.db-payer-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.db-payer-name {
    font-weight: 600;
    color: #212121;
}
.db-payer-meta {
    font-size: 0.8rem;
    color: #757575;
}
.db-payer-unread { flex: none; }

.db-action-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.db-action-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #c0d0e0;
    text-decoration: none;
    color: inherit;
}

.db-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e3f2fd;
    color: var(--appbar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-action-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212121;
}

.db-action-desc {
    font-size: 0.75rem;
    color: #9e9e9e;
}

.db-announcement-list {
    max-height: 400px;
    overflow-y: auto;
}

.db-announcement {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.db-announcement:last-child {
    border-bottom: none;
}

.db-announcement-pinned {
    background: #fffde7;
    border-left: 3px solid #f9a825;
}

.db-announcement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.db-announcement-subject {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212121;
    flex: 1;
}

.db-announcement-date {
    font-size: 0.75rem;
    color: #9e9e9e;
    white-space: nowrap;
}

.db-announcement-body {
    font-size: 0.8125rem;
    color: #616161;
    line-height: 1.5;
    margin-top: 4px;
}

.db-announcement-toggle {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--appbar-bg);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
}

.db-announcement-toggle:hover {
    text-decoration: underline;
}

.db-health-category {
    margin-bottom: 16px;
}

.db-health-category:last-child {
    margin-bottom: 0;
}

.db-health-cat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--appbar-bg, #1565c0);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--appbar-bg, #1565c0);
    opacity: 0.8;
}

.db-health-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

/* Custom "picture" health links — clickable vendor logos (old portal GetPicLinks). */
.db-health-pics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.db-health-pic {
    display: inline-block;
}

.db-health-pic img {
    max-height: 70px;
    max-width: 200px;
    width: auto;
    height: auto;
}

.db-health-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    text-decoration: none;
    color: #212121;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.db-health-link:hover {
    background: #e3f2fd;
    border-color: #90caf9;
    text-decoration: none;
    color: var(--appbar-bg);
}

.db-health-link-text {
    flex: 1;
}

.db-health-link-ext {
    color: #bdbdbd;
    flex-shrink: 0;
    transition: color 0.15s;
}

.db-health-link:hover .db-health-link-ext {
    color: var(--appbar-bg);
}

.db-group-picker h5 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.db-group-picker p {
    font-size: 0.8125rem;
    color: #757575;
    margin-bottom: 16px;
}

@media (max-width: 960px) {
    .db-stats {
        grid-template-columns: 1fr 1fr;
    }
    .db-welcome {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .db-health-links {
        grid-template-columns: 1fr;
    }
    .db-action-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Print styles ── */
@media print {
    .portal-appbar, .k-drawer, .portal-drawer {
        display: none !important;
    }
    .portal-main {
        margin: 0 !important;
        padding: 0 !important;
    }
    .portal-main > .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    body {
        background: white !important;
    }
    .no-print {
        display: none !important;
    }
    .k-grid {
        font-size: 11px;
    }
    .db-section {
        page-break-inside: avoid;
        break-inside: avoid;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    .db-section + .db-section {
        margin-top: 12px;
    }
    .provider-context-banner, .impersonation-banner, .nav-top, .portal-drawer {
        display: none !important;
    }
    .ded-table {
        font-size: 11px;
    }
    .portal-grid.cols-2 {
        grid-template-columns: 1fr 1fr;
    }
    .print-break-before {
        page-break-before: always;
        break-before: page;
    }
}

/* ── Impersonation ── */
.impersonation-banner {
    background: #fff3cd;
    color: #664d03;
    text-align: center;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 100;
}
.provider-context-banner {
    background: #e3f2fd;
    color: #1565c0;
    text-align: center;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 500;
}
/* Subscriber viewing a dependent — prominent, unmissable amber bar with a Return button. */
.dependent-context-banner {
    background: #ffe0b2;
    color: #7a3e00;
    text-align: center;
    padding: 7px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 2px solid #e08800;
    z-index: 100;
}
.dependent-context-banner .k-svg-icon { width: 16px; height: 16px; }
.btn-stop-impersonation {
    background: #664d03;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    cursor: pointer;
}
.btn-stop-impersonation:hover {
    background: #4a3802;
}
/* Dropdowns nested in appbar chips — strip Telerik chrome so they feel like part of the pill */
.appbar-chip .client-picker,
.appbar-chip .impersonation-picker,
.appbar-chip .k-dropdownlist {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0;
}
.appbar-chip .k-input-inner {
    color: var(--appbar-text);
    font-size: 0.85rem;
    font-weight: 600;
    background: transparent !important;
    padding: 0 0.25rem 0 0 !important;
}
.appbar-chip .k-input-button {
    background: transparent !important;
    color: var(--appbar-text) !important;
    border: none !important;
}
.appbar-chip .k-input-button .k-icon,
.appbar-chip .k-input-button .k-svg-icon { opacity: 0.85; }

/* ── Nav Context Hints ── */
.nav-hint {
    padding: 6px 16px 6px 40px;
    font-size: 0.8rem;
    color: #9e9e9e;
    font-style: italic;
}
.topnav-hint {
    padding: 8px 16px;
    font-size: 0.8rem;
    color: #9e9e9e;
    font-style: italic;
    white-space: nowrap;
}