#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}



body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}


:root {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base-50: #fafafa;
    --rz-base-100: #f5f5f5;
    --rz-base-200: #eeeeee;
    --rz-base-300: #e0e0e0;
    --rz-base-400: #bdbdbd;
    --rz-base-500: #9e9e9e;
    --rz-base-600: #757575;
    --rz-base-700: #616161;
    --rz-base-800: #424242;
    --rz-base-900: #212121;
    --rz-primary: #003399;
    --rz-primary-light: rgba(0, 51, 153, 0.8);
    --rz-primary-lighter: rgba(0, 51, 153, 0.12);
    --rz-primary-dark: #3633a8;
    --rz-primary-darker: #2e2c8f;
    --rz-secondary: #9f0202;
    --rz-secondary-light: rgba(159, 2, 2, 0.5);
    --rz-secondary-lighter: rgba(159, 2, 2, 0.12);
    --rz-secondary-dark: #9f0202;
    --rz-secondary-darker: #9f0202;
    --rz-info: #2196f3;
    --rz-info-light: #4dabf5;
    --rz-info-lighter: rgba(33, 150, 243, 0.2);
    --rz-info-dark: #1a78c2;
    --rz-info-darker: #1666a5;
    --rz-success: #4caf50;
    --rz-success-light: #70bf73;
    --rz-success-lighter: rgba(76, 175, 80, 0.16);
    --rz-success-dark: #3d8c40;
    --rz-success-darker: #347736;
    --rz-warning: #ff9800;
    --rz-warning-light: #ffad33;
    --rz-warning-lighter: rgba(255, 152, 0, 0.2);
    --rz-warning-dark: #cc7a00;
    --rz-warning-darker: #ad6700;
    --rz-danger: #f44336;
    --rz-danger-light: #f6695e;
    --rz-danger-lighter: rgba(244, 67, 54, 0.2);
    --rz-danger-dark: #c3362b;
    --rz-danger-darker: #a62e25;
    --rz-link-color: var(--rz-primary);
    --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --rz-header-background-color: var(--rz-primary-lighter);
    --rz-on-secondary-lighter: var(--rz-primary);
    --rz-menu-top-item-background-color: transparent;
    --rz-menu-top-item-icon-color: var(--rz-primary);
    --rz-menu-top-item-icon-hover-color: var(--rz-secondary);
    --rz-menu-top-item-selected-color: var(--rz-secondary);
    --rz-menu-item-icon-color: var(--rz-primary);
    --rz-menu-item-icon-hover-color: var(--rz-secondary);
    --rz-menu-item-selected-color: var(--rz-secondary);
    --rz-selectbar-selected-color: #fff;
    --rz-selectbar-selected-background-color: var(--rz-primary-light);
    --rz-header-background-color: var(--rz-primary-lighter);
    --rz-dialog-background-color: var(--rz-base-50);
    --rz-dialog-title-background-color: var(--rz-primary-lighter);
    --rz-dialog-content-padding: 0.5rem;
    /*
    --rz-layout-body-margin: 0 0.25rem 0.25rem;
    --rz-layout-body-padding: 0.25rem;
    --rz-gap: 0.5rem;
    --rz-row-gap: 0.5rem;
    --rz-grid-header-font-weight: bold;
    --rz-footer-padding: 3px !important;
    --rz-header-background-color: var(--rz-primary-lighter);

    --rz-dialog-background-color: var(--rz-base-50);
    --rz-dialog-title-background-color: var(--rz-primary-lighter);
    --rz-grid-header-filter-icon-active-color: var(--rz-success);
    
    --rz-tabs-tab-padding: 0.7rem 0.7rem;
    
    --bs-primary-rgb: 0, 51, 153;
    --rz-text-h2-margin-block-end: 1px;
    --rz-card-flat-background-color: var(--rz-primary-lighter) !important;*/
}

.rz-link .rz-card {
    transition: var(--rz-transition-all);
}

.rz-link:hover .rz-card {
    box-shadow: var(--rz-shadow-4);
}
/* Inter (self-hosted variable font, all weights 100–900 in one file).
   Referenced first in --rz-text-font-family; without these @font-face rules
   the app silently fell back to Segoe UI / San Francisco / Roboto per-OS.
   font-display: swap — text renders immediately in the fallback, then swaps. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
    font-family: 'MeditalkFaSolid';
    font-display: block;
    font-weight: 400;
    src: url("../fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("../fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
    font-family: 'MeditalkFaDuo';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fontawesome/webfonts/fa-duotone-900.woff2") format("woff2"), url("../fontawesome/webfonts/fa-duotone-900.ttf") format("truetype");
    /*src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.woff2') format('woff2');*/
}
.fa {
    --rz-icon-font-family: "MeditalkFaSolid";
}

.fa-small {
    --rz-icon-font-family: "MeditalkFaSolid";
    font-size: 0.875em;
}

.fad {
    --rz-icon-font-family: "MeditalkFaDuo";
}
    /* Radzen's busy/loading spinner is a Material Symbols LIGATURE (e.g. "refresh"),
   rendered on a `.rzi` element that inherits --rz-icon-font-family from its button.
   Where one of the FA helper classes above is in scope, that resolves to a Font
   Awesome family, which can't shape the ligature — it paints the raw letters on top
   of each other (the same failure the split-button rule below fixes).

   Our own button components drop the FA class while IsBusy, which covers a button's
   own class — but the FA variable also arrives from ANCESTOR elements (a panel or
   stack with fa/fa-small), which no component can strip. These rules are the real
   fix: every spinner shape Radzen has shipped is forced back to Material Symbols.
   Radzen 8.7.x renders the button's busy icon as
   `<i class="notranslate rz-button-icon-left rzi" style="animation: rotation ...">refresh</i>`
   — no dedicated class, so it's matched by its inline rotation animation. */
    .rzi-circle-o-notch,
    [style*="button-icon-spin"],
    .rz-button .rzi[style*="rotation"] {
        --rz-icon-font-family: "Material Symbols" !important;
        font-family: "Material Symbols" !important;
    }

    /* Same problem on RadzenSplitButton: its dropdown-toggle half renders a
   Material Symbols ligature (arrow) icon internally. When the split button
   carries one of the FA helper classes, the toggle icon inherits the FA
   font, which can't shape the ligature and renders it as raw letters
   ("DRC..."). Force just the toggle icon back to Material Symbols — the
   main button's FA icon is unaffected. */
    .fa .rz-splitbutton-menubutton .rzi,
    .fa-small .rz-splitbutton-menubutton .rzi,
    .fad .rz-splitbutton-menubutton .rzi {
        --rz-icon-font-family: "Material Symbols";
        font-family: "Material Symbols";
    }

/* ================================================================
   Global header search — RadzenAutoComplete custom row template
   ================================================================
   Lives in site.css (global) instead of MainLayout because Radzen
   renders the autocomplete popup at document.body, outside the
   Blazor component scope, so component-scoped styles wouldn't
   apply to the dropdown rows.
*/
.global-search-input .rz-autocomplete {
    width: 100% !important;
}

/* Radzen anchors the dropdown panel to document.body, not inside the
   input wrapper — so width has to be forced from a global rule, not a
   scoped one. We tag the panel via a sibling-of-input class that
   Radzen carries through (`rz-autocomplete-panel`). 560px gives the
   row template comfortable room for: icon chip + title + subtitle +
   badges, without a horizontal scrollbar. */
.rz-autocomplete-panel:has(.global-search-row) {
    min-width: 560px !important;
    max-width: 90vw;
}

.rz-autocomplete-panel .rz-autocomplete-list-item:has(.global-search-row) {
    padding: 0;
}

.global-search-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    min-width: 320px;
}

.global-search-typechip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
}

    .global-search-typechip.type-patient {
        background: var(--rz-info-lighter);
        color: var(--rz-info-darker);
    }

    .global-search-typechip.type-device {
        background: var(--rz-warning-lighter);
        color: var(--rz-warning-darker);
    }

    .global-search-typechip.type-auth {
        background: var(--rz-success-lighter);
        color: var(--rz-success-darker);
    }
    /* Google-style recent-search row — subtler chip, italic subtitle, sits
   above entity results in the dropdown to act as a quick re-run shortcut. */
    .global-search-typechip.type-recent {
        background: var(--rz-base-200);
        color: var(--rz-text-secondary-color);
    }

.global-search-row.is-recent {
    background: var(--rz-base-50);
}

    .global-search-row.is-recent .global-search-title {
        font-weight: 500;
        color: var(--rz-text-secondary-color);
    }

    .global-search-row.is-recent .global-search-subtitle {
        font-style: italic;
        opacity: 0.7;
    }

.global-search-body {
    min-width: 0;
    overflow: hidden;
}

.global-search-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search-subtitle {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search-chart {
    font-family: var(--rz-font-family-monospace);
}

.global-search-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ================================================================
   Panel-scoped loading overlay
   ================================================================
   Reusable overlay for cards/panels whose content is being re-fetched
   in response to a filter, dropdown, or chart-click change. Sits on
   top of the existing content (white-tinted) so users keep visual
   continuity instead of seeing the panel flash empty.

   Usage:
     <div class="panel-loading-overlay-host">  (gets position: relative)
       @if (IsPanelLoading) {
         <div class="panel-loading-overlay">
           <RadzenProgressBarCircular ... />
           <RadzenText>Loading…</RadzenText>
         </div>
       }
       ... actual content ...
     </div>
*/
.panel-loading-overlay-host {
    position: relative;
}

.panel-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: inherit;
}
.rz-selectbar {
    --rz-icon-font-family: "MeditalkFaSolid";
}
.rz-navigation-item-icon {
    --rz-icon-font-family: "MeditalkFaSolid";
}

.rz-tabview-nav {
    --rz-icon-font-family: "MeditalkFaSolid";
}
.material-symbols {
    --rz-icon-font-family: 'Material Symbols Outlined';
}
/* ================================================================
   Card-view cards (rc-card)
   ================================================================
   Shared styling for the RadzenDataList "Card View" tabs (Patient
   Insurances, Relationships, etc.). Replaces the old solid-navy
   header bar (negative-margin bleed inside RadzenCard) and the
   all-bold-blue values with a white card, hairline border, and a
   label/value grid where only the value carries weight.

   Usage:
     <div class="rc-card">
       <div class="rc-card-head">
         <span class="rc-chip rc-chip-primary">Primary</span>
         <span class="rc-card-title">Texas Medicare</span>
         <div class="rc-card-actions"> edit/delete buttons </div>
       </div>
       <div class="rc-card-body">
         <div class="rc-card-row">
           <span class="rc-card-label">Type</span>
           <span class="rc-card-value">Texas Medicare</span>
         </div>
       </div>
     </div>
*/
.rc-card {
    background: #fff;
    border: 1px solid #dfe5f0;
    border-radius: 12px;
    padding: 12px 16px;
    width: 355px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--rz-text-font-family);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    .rc-card:hover {
        border-color: #c4ccdb;
        box-shadow: 0 4px 14px rgba(23, 35, 63, 0.08);
    }

.rc-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eef1f7;
    padding-bottom: 8px;
}

.rc-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #17233f;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-card-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.rc-card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rc-card-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 0.82rem;
}

.rc-card-label {
    flex: 0 0 110px;
    color: #8b97ad;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rc-card-value {
    color: #17233f;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

    .rc-card-value.rc-muted {
        color: #8b97ad;
        font-weight: 500;
    }

.rc-chip {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2.5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rc-chip-primary { background: #003399; color: #fff; }
.rc-chip-neutral { background: #e9eefa; color: #003399; }
.rc-chip-good { background: #e6f4ea; color: #15803d; }
.rc-chip-warn { background: #fdf0e0; color: #b45309; }
.rc-chip-danger { background: #fbe9e9; color: #c02626; }

.rc-card-note {
    font-size: 0.78rem;
    color: #5e6c88;
    font-style: italic;
    border-top: 1px solid #eef1f7;
    padding-top: 7px;
    overflow-wrap: anywhere;
}

/* Media row: thumbnail (e.g. device photo) beside the fact rows. */
.rc-card-media {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .rc-card-media .rc-card-body { flex: 1; min-width: 0; }

.rc-card-photo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 10px !important;
    object-fit: cover;
    border: 1px solid #dfe5f0;
    flex-shrink: 0;
}

/* --- rc-card polish: accent edge, icon medallion, ghost actions --- */
.rc-card {
    --rc-accent: #003399;
    border-left: 3px solid var(--rc-accent);
    box-shadow: 0 1px 2px rgba(23, 35, 63, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .rc-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(23, 35, 63, 0.10);
        border-color: #dfe5f0;
        border-left-color: var(--rc-accent);
    }

.rc-accent-primary { --rc-accent: #003399; }
.rc-accent-neutral { --rc-accent: #5e6c88; }
.rc-accent-good { --rc-accent: #15803d; }
.rc-accent-warn { --rc-accent: #d97706; }
.rc-accent-danger { --rc-accent: #dc2626; }

/* Entity icon medallion, tinted from the card accent. */
.rc-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--rc-accent) 11%, #fff);
}

    .rc-card-icon .rzi {
        color: var(--rc-accent) !important;
        font-size: 0.95rem !important;
    }

/* Visual order: icon · title · chips · actions. Flex `order` handles it so
   templates keep their chip-first DOM order. */
.rc-card-head > .rc-card-title { order: 1; flex: 1; }
.rc-card-head > .rc-chip { order: 2; }
.rc-card-head > .rc-card-actions { order: 3; margin-left: 0; }

.rc-card-value { font-variant-numeric: tabular-nums; }

/* Action buttons read as quiet ghosts until hovered. */
.rc-card-actions .rz-button {
    background: var(--rc-primary-lighter) !important;
    /*background: #e9eefa !important;*/
    color: var(--rc-accent) !important;
    border: none !important;
    box-shadow: none !important;
}

    .rc-card-actions .rz-button .rz-button-icon,
    .rc-card-actions .rz-button .rz-button-icon-only { color: #8b97ad !important; }

    .rc-card-actions .rz-button:hover { background: #eef1f7 !important; }

        .rc-card-actions .rz-button:hover .rz-button-icon,
        .rc-card-actions .rz-button:hover .rz-button-icon-only { color: #003399 !important; }

    .rc-card-actions .rz-button.rz-danger:hover { background: #fbe9e9 !important; }

        .rc-card-actions .rz-button.rz-danger:hover .rz-button-icon,
        .rc-card-actions .rz-button.rz-danger:hover .rz-button-icon-only { color: #c02626 !important; }

/* rc-card refinements: RadzenDataList's item wrapper forces width:100% (which
   stretched a lone card across the whole row) — cap with max-width instead.
   Surface uses the theme header tint rather than plain white. */
.rc-card {
    max-width: 355px;
    background: var(--rz-header-background-color, #fff) !important;
}

.rc-card-icon {
    background: color-mix(in srgb, var(--rc-accent) 11%, transparent);
}

/* Chips move to a second header row so the title keeps the full first line:
   row 1 = icon · title · actions, row 2 = status chips. The ::after element
   is a zero-height flex line-break, inserted only when chips exist. */
.rc-card-head {
    flex-wrap: wrap;
    row-gap: 6px;
}

    .rc-card-head > .rc-card-actions { order: 2; }

    .rc-card-head:has(.rc-chip)::after {
        content: '';
        flex-basis: 100%;
        height: 0;
        order: 3;
    }

    .rc-card-head > .rc-chip { order: 4; }


.rz-form-field-label {
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
.rz-fieldset-legend-text {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
.rz-dialog-title {
    font-size: 1.2rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
.rz-column-title {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}
/* ---------------------------------------------------------------------------
   Applied-filter summary (MeditalkDataGrid.FilterSummaryTemplate).
   Renders in the grid's HeaderTemplate whenever any column filter is active,
   so a filter restored from localStorage cannot silently hide rows.
   --------------------------------------------------------------------------- */
.rc-filter-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.25rem;
    background: var(--rz-info-lighter, #eef4fd);
    border: 1px solid var(--rz-info-light, #cfe0f7);
    border-radius: 4px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.rc-filter-summary-label {
    font-weight: 600;
    margin-right: 0.15rem;
    white-space: nowrap;
}

.rc-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-info-light, #cfe0f7);
    border-radius: 12px;
    max-width: 22rem;
}

.rc-filter-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-filter-chip-clear,
.rc-filter-clear-all,
.rc-filter-query-toggle {
    background: none;
    border: none;
    padding: 0 0.15rem;
    cursor: pointer;
    color: var(--rz-text-secondary-color, #52525b);
    font: inherit;
}

.rc-filter-chip-clear {
    font-size: 1rem;
    line-height: 1;
}

.rc-filter-chip-clear:hover,
.rc-filter-clear-all:hover,
.rc-filter-query-toggle:hover {
    color: var(--rz-danger, #c2185b);
    text-decoration: underline;
}

.rc-filter-clear-all {
    margin-left: auto;
    white-space: nowrap;
}

.rc-filter-query-toggle {
    font-family: monospace;
}

/* The raw OData sits on its own row and scrolls rather than stretching the bar. */
.rc-filter-query {
    flex-basis: 100%;
    display: block;
    margin-top: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: var(--rz-base-200, #f4f4f5);
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.75rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Multi-line cell text inside a Radzen grid.
   .rz-cell-data is `white-space: nowrap; overflow: hidden; text-overflow: ellipsis`, so a long
   chart note rendered as one clipped line with no way to read the rest. The class was already
   applied in PatientNotes.razor but had never been DEFINED anywhere, which is why it did nothing.
   -webkit-line-clamp keeps a very long note from turning one row into a page: it shows the first
   few lines and the row action opens the whole thing. */
.wrap-text {
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* EditMedication opens as a two-step wizard: pick a drug from RxTerms, then fill the form.
   Editing an existing medication starts on step 2 with the drug already chosen, so the step
   header and the Previous/Next pair are chrome around the only panel there is. The markup is
   one form shared by both modes, so the chrome is hidden rather than the form duplicated.
   .rz-steps is the RadzenSteps root (display:flex, column); its direct <ul> is the header. */
.rc-steps-headless > .rz-steps > ul,
.rc-steps-headless .rz-steps-buttons {
    display: none;
}