/* ╔════════════════════════════════════════════════════════════╗
   ║  CareNiva — UI DESIGN SYSTEM v1                            ║
   ║                                                            ║
   ║  ONE source of truth for every polished page (Practice     ║
   ║  Providers · Practice Patients · future practice-admin     ║
   ║  pages). Reach for these tokens / primitives BEFORE        ║
   ║  writing a new style block. Per-page selectors should      ║
   ║  only override when the design system genuinely needs      ║
   ║  a local tweak — otherwise inherit.                        ║
   ║                                                            ║
   ║  ── TYPOGRAPHY ────────────────────────────────────────    ║
   ║    Family   var(--cn-font)                                 ║
   ║    H1       26px / 700 / -.02em  → .cn-title               ║
   ║    Sub      14px / 400 / 1.5     → .cn-subtitle            ║
   ║    Body     14px / 400           → grid cells              ║
   ║    Label    11px / 700 / .06em uppercase → headers         ║
   ║    Meta     12px / 400 → identity sub-line                 ║
   ║    Mono     ui-monospace, SFMono-Regular …                 ║
   ║                                                            ║
   ║  ── SPACING ───────────────────────────────────────────    ║
   ║    4 · 6 · 8 · 10 · 12 · 14 · 16 · 20 · 24 (px)            ║
   ║    Page padding 24 · Card padding 16 · Cell padding 14×16  ║
   ║                                                            ║
   ║  ── RADII ─────────────────────────────────────────────    ║
   ║    --cn-radius     6  → buttons, inputs, badges            ║
   ║    --cn-radius-lg  10 → cards, stat tiles, menus           ║
   ║    999             → pills, chips, user dropdown           ║
   ║                                                            ║
   ║  ── BUTTONS ───────────────────────────────────────────    ║
   ║    Primary    height 42 · radius 6 · navy bg · white text  ║
   ║               12-14px font · ≥168px min-width              ║
   ║               selectors: .dx-button-default, #New*button   ║
   ║    Secondary  height 32 · radius 6 · white bg · navy text  ║
   ║               1px navy-tinted border · 12px font           ║
   ║               selectors: .custom-edit-btn                  ║
   ║    Ghost icon 32×32 · radius 6 · transparent → navy-50     ║
   ║               selectors: .cn-row-icon-btn, td > #click     ║
   ║    Chip       height 32 · radius 999 · 12px / 600          ║
   ║               selectors: .cn-chip                          ║
   ║                                                            ║
   ║  ── INPUTS ────────────────────────────────────────────    ║
   ║    Search/Text  height 38 · radius 6 · 13px                ║
   ║                 border var(--cn-border-2) · focus = navy   ║
   ║                 ring (3px rgba(12,84,148,.12))             ║
   ║                 selector: .cn-search input,                ║
   ║                           .cn-status-select                ║
   ║                                                            ║
   ║  ── CARDS ─────────────────────────────────────────────    ║
   ║    Surface    var(--cn-elev) · 1px var(--cn-border)        ║
   ║               radius var(--cn-radius-lg) · shadow-sm       ║
   ║               selector: .cn-grid-card · .cn-stat-card      ║
   ║                                                            ║
   ║  ── PILLS / STATUS ────────────────────────────────────    ║
   ║    .cn-pill base + variant: --active --inactive            ║
   ║             --disabled --deceased --pending                ║
   ║                                                            ║
   ║  ── COLORS (semantic) ─────────────────────────────────    ║
   ║    Brand     navy · navy-2 · navy-50 · gold                ║
   ║    Text      text · text-2 · text-3                        ║
   ║    Surface   bg · elev · border · border-2                 ║
   ║    Signal    success · warn · danger · muted (with -bg)    ║
   ╚════════════════════════════════════════════════════════════╝ */

:root {
    /* ----- Brand ----- */
    --cn-navy: #0C5494;
    --cn-navy-2: #0A4778;
    --cn-navy-50: #E8F0F9;
    --cn-navy-100: #D6E4F2;
    --cn-gold: #D19C46;
    /* ----- Neutrals: text ----- */
    --cn-text: #0F172A; /* primary body */
    --cn-text-2: #475569; /* secondary / labels */
    --cn-text-3: #94A3B8; /* tertiary / placeholders */
    /* ----- Neutrals: surface ----- */
    --cn-bg: #FAFBFC; /* page canvas */
    --cn-elev: #FFFFFF; /* card / input surface */
    --cn-border: #E5E7EB; /* hairline */
    --cn-border-2: #D1D5DB; /* stronger border (inputs, user pill) */
    /* ----- Signal ----- */
    --cn-success: #047857;
    --cn-success-bg: #ECFDF5;
    --cn-warn: #B45309;
    --cn-warn-bg: #FEF3C7;
    --cn-danger: #DC2626;
    --cn-danger-bg: #FEF2F2;
    --cn-muted: #64748B;
    --cn-muted-bg: #F1F5F9;
    /* ----- Radii ----- */
    --cn-radius: 6px; /* default — buttons, inputs, badges */
    --cn-radius-lg: 10px; /* cards, stat tiles, menus */
    --cn-radius-xl: 16px; /* large surfaces — e.g. the sign-in card */
    /* ----- Shadows ----- */
    --cn-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --cn-shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .04);
    --cn-shadow-lg: 0 10px 28px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
    --cn-focus-ring: 0 0 0 3px rgba(12, 84, 148, .12);
    /* ----- Typography ----- */
    --cn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    /* ----- Heights ----- */
    --cn-h-btn-primary: 42px;
    --cn-h-btn-secondary: 32px;
    --cn-h-input: 38px;
    --cn-h-chip: 32px;
    --cn-h-avatar: 38px;
    --cn-h-avatar-sm: 28px;
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  DESIGN-SYSTEM PRIMITIVES — generic selectors that         ║
   ║  ANY polished page picks up automatically as long as it    ║
   ║  uses the same class/widget structure (.cn-grid-card,      ║
   ║  .cn-stat-card, .cn-chip, .cn-search, .dx-button-default,  ║
   ║  .custom-edit-btn). Adding a new admin page only needs     ║
   ║  the markup — the styling comes from this block.           ║
   ║                                                            ║
   ║  These primitives sit BEFORE any page-specific rules so    ║
   ║  page rules can still override when needed. Page rules     ║
   ║  for Practice Providers and Practice Patients further      ║
   ║  down the file currently mirror these — they're kept       ║
   ║  for backward compatibility but the primitives below       ║
   ║  are the authoritative source going forward.               ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ----- 1. Page typography base ----- */
.cn-page,
.cn-grid-card,
.cn-stat-card,
.cn-providers-titlebar,
.cn-grid-toolbar {
    font-family: var(--cn-font);
    color: var(--cn-text);
}

/* ----- 2. Cards: grid card + stat card share one surface ----- */
.cn-grid-card,
.cn-stat-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
}

.cn-grid-card {
    overflow: hidden; /* clips DX chrome that escapes the rounded corners */
    margin-bottom: 16px; /* breathing room beneath the grid card */
}

/* ----- 3. Primary button — DX default-type pulls navy + 42px ----- */
.dx-button.dx-button-default,
.dx-button.dx-button-mode-contained.dx-button-default {
    background-color: var(--cn-navy) !important;
    border-color: var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: var(--cn-shadow-sm) !important;
    height: var(--cn-h-btn-primary) !important;
    min-height: var(--cn-h-btn-primary) !important;
}

    .dx-button.dx-button-default:hover,
    .dx-button.dx-button-mode-contained.dx-button-default:hover {
        background-color: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
    }

    .dx-button.dx-button-default .dx-button-text,
    .dx-button.dx-button-mode-contained.dx-button-default .dx-button-text {
        color: #FFFFFF !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

/* ----- 4. Secondary / Row Edit button — 32px outlined.
   Used for the compact "Edit" button inside dxDataGrid rows. ----- */
.custom-edit-btn,
.dx-button.custom-edit-btn {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    height: var(--cn-h-btn-secondary) !important;
    min-height: var(--cn-h-btn-secondary) !important;
    max-height: var(--cn-h-btn-secondary) !important;
    min-width: 80px !important;
    overflow: hidden !important;
}

    .custom-edit-btn:hover,
    .dx-button.custom-edit-btn:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

    .custom-edit-btn .dx-button-text,
    .dx-button.custom-edit-btn .dx-button-text {
        color: var(--cn-navy) !important;
        font-family: var(--cn-font) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

/* ----- 4a. Form action buttons — Save / Cancel / Skip / etc.
   sit in a horizontal row at the bottom of each dxForm.
   • Save (type:"default")  → navy primary, primitive #3 above.
   • Cancel / Skip / Save & Add Insurance (type:"normal")
                            → outlined secondary, same height,
                              same radius, same font, same padding.
   These rules guarantee every action button in any dxForm matches
   the Save button's proportions so the action bar reads cleanly. ----- */
:is(.dx-form, #paymentinfo) .dx-button.dx-button-default,
:is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-default,
:is(.dx-form, #paymentinfo) .dx-button.dx-button-normal,
:is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-normal {
    height: var(--cn-h-btn-primary) !important;
    min-height: var(--cn-h-btn-primary) !important;
    min-width: 110px !important;
    border-radius: var(--cn-radius) !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important; /* horizontal spacing between buttons */
    vertical-align: middle !important;
}

    :is(.dx-form, #paymentinfo) .dx-button.dx-button-default .dx-button-content,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-default .dx-button-content,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-normal .dx-button-content,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-normal .dx-button-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 22px !important;
        height: var(--cn-h-btn-primary) !important;
        line-height: 1 !important;
    }

    :is(.dx-form, #paymentinfo) .dx-button.dx-button-default .dx-button-text,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-default .dx-button-text,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-normal .dx-button-text,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-normal .dx-button-text {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }

/* Secondary (type:"normal") — outlined treatment */
:is(.dx-form, #paymentinfo) .dx-button.dx-button-normal,
:is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-normal {
    background: var(--cn-elev) !important;
    background-color: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    box-shadow: none !important;
}

    :is(.dx-form, #paymentinfo) .dx-button.dx-button-normal:hover,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-normal:hover {
        background: var(--cn-navy-50) !important;
        background-color: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

    :is(.dx-form, #paymentinfo) .dx-button.dx-button-normal .dx-button-text,
    :is(.dx-form, #paymentinfo) .dx-button.dx-button-mode-contained.dx-button-normal .dx-button-text {
        color: var(--cn-text) !important;
    }

    :is(.dx-form, #paymentinfo) .dx-button.dx-button-normal:hover .dx-button-text {
        color: var(--cn-navy) !important;
    }

/* Action-row container — the dxForm group that holds the buttons
   uses `colCount: 12` + `horizontalAlignment: "left"`. Make the
   wrapping td-grid layout flex so buttons sit on one row with
   consistent gaps. */
.dx-form .dx-field-button-item {
    text-align: left !important;
    padding: 6px 4px !important;
}

    .dx-form .dx-field-button-item:last-child .dx-button {
        margin-right: 0 !important;
    }

/* Responsive — buttons stack with full width on narrow screens
   so they remain tappable. */
@media (max-width: 600px) {
    .dx-form .dx-button.dx-button-default,
    .dx-form .dx-button.dx-button-mode-contained.dx-button-default,
    .dx-form .dx-button.dx-button-normal,
    .dx-form .dx-button.dx-button-mode-contained.dx-button-normal {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px 0 !important;
    }
}

/* ----- 5. Chips & filter pills — height 32, radius 999 ----- */
.cn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: var(--cn-h-chip);
    border: 1px solid var(--cn-border-2);
    border-radius: 999px;
    background: var(--cn-elev);
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-text-2);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

    .cn-chip:hover {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        border-color: var(--cn-navy);
    }

    .cn-chip.is-active {
        background: var(--cn-navy);
        color: white;
        border-color: var(--cn-navy);
    }

/* ----- 5b. Tab pill-group — pill-style horizontal tab triggers
   above a `tab-content` pane area. Used by any page that needs a
   small set of mutually-exclusive section switches (e.g. the
   document hub — My Documents / Shared By Patients / Upload).
   Supports BOTH `.active` (legacy JS that overwrites className via
   string assignment) and `.is-active` (mockup / newer convention)
   so both markup patterns render identically. On phones each tab
   becomes a full-width stacked tap target so the row stays
   tappable; on tablet+ they share the row equally with a 140-px
   minimum per tab. The whole group sits inside a soft rounded
   surface that matches the cn-grid-card / cn-form-card chrome,
   giving the hub a single coherent surface vocabulary. ----- */
.cn-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    padding: 6px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    flex-wrap: wrap;
}

.cn-tab {
    flex: 1 1 0;
    min-width: 140px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 0;
    border-radius: var(--cn-radius);
    cursor: pointer;
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text-2);
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
    padding: 6px 12px;
    line-height: 1.2;
    text-decoration: none;
}

    .cn-tab:hover {
        background: var(--cn-bg);
        color: var(--cn-text);
    }

    .cn-tab.active,
    .cn-tab.is-active {
        background: var(--cn-navy);
        color: white;
        box-shadow: 0 1px 3px rgba(12, 84, 148, .22);
    }

    .cn-tab svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* Optional count badge inside a tab — e.g. `My Documents (4)`. */
.cn-tab__count {
    display: inline-flex;
    align-items: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    font-size: 11px;
    font-weight: 700;
}

.cn-tab.active .cn-tab__count,
.cn-tab.is-active .cn-tab__count {
    background: rgba(255, 255, 255, .22);
    color: white;
}

@media (max-width: 540px) {
    .cn-tabs {
        gap: 4px;
        padding: 4px;
    }

    .cn-tab {
        flex: 1 1 100%;
        min-width: 0;
        font-size: 13px;
    }
}


.dx-state-disabled .dx-widget, .dx-state-disabled.dx-widget {
    opacity: unset !important;
}
/* ----- 6. Search input — height 38, focus = navy ring ----- */
.cn-search input {
    height: var(--cn-h-input);
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    background: var(--cn-elev);
    color: var(--cn-text);
    font-family: var(--cn-font);
    font-size: 13px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .cn-search input:focus {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
        outline: none;
    }

/* ----- 6a. Search-input WRAPPER — relative-positioned shell that
   overlays a magnifying-glass SVG inside the input on the left
   side. Used by any page that wants the polished cn-search input
   with the icon embedded (mockup pattern). The input inside still
   uses the rules above; this block adds the wrapper + icon
   positioning + focus tint. ----- */
.cn-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

    .cn-search input {
        width: 100%;
        padding: 0 14px 0 38px; /* 38 px left clears the icon */
        background: #F8FAFC;
        font-size: 14px;
        box-sizing: border-box;
        outline: none;
    }

        .cn-search input::placeholder {
            color: var(--cn-text-3);
        }

        .cn-search input:focus {
            background: white;
        }

    .cn-search > svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: var(--cn-text-3);
        pointer-events: none;
    }

    .cn-search:has(input:focus) > svg {
        color: var(--cn-navy);
    }

/* ----- 6b. Search ROW — flex container that lays out a cn-search
   input + an adjacent action button (`.cn-btn.cn-btn--primary`)
   side-by-side with a 10 px gap, wrapping cleanly on phones. ----- */
.cn-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .cn-search-row .cn-search {
        flex: 1 1 280px;
        min-width: 0;
    }

        .cn-search-row .cn-search input {
            width: 100%;
        }

    .cn-search-row .cn-btn {
        min-width: 110px;
        height: var(--cn-h-input);
    }

/* ╔════════════════════════════════════════════════════════════╗
   ║  7. dxDataGrid — CANONICAL TYPOGRAPHY SYSTEM               ║
   ║                                                            ║
   ║  ONE source of truth for grid text on every polished page  ║
   ║  (Questionnaires, Visit Reasons, CPT Master, Locations,    ║
   ║  Practice Providers / Patients, Sign Packages, …).         ║
   ║                                                            ║
   ║  Any dxDataGrid wrapped in `.cn-grid-card` inherits the    ║
   ║  full system — page-specific overrides should NOT redefine ║
   ║  these properties; if something is missing here it belongs ║
   ║  in this block, not in a per-page rule. New pages get the  ║
   ║  polish for free just by wrapping the grid in the card.    ║
   ║                                                            ║
   ║  ── HEADER ROW ────────────────────────────────────────    ║
   ║    Background  #F8FAFC                                     ║
   ║    Border      1px var(--cn-border) on the bottom edge     ║
   ║    Text        11 px / 700 / .06 em / uppercase            ║
   ║                color var(--cn-text-2)                      ║
   ║    Padding     14 × 16 px · vertical-align: middle         ║
   ║                                                            ║
   ║  ── BODY ROW ──────────────────────────────────────────    ║
   ║    Background  transparent (card supplies surface)         ║
   ║    Text        14 px / 400 / -.005 em · line-height 1.45   ║
   ║                color var(--cn-text)                        ║
   ║    Numbers     tabular-nums (digits align in money/date)   ║
   ║    Padding     14 × 16 px · vertical-align: middle         ║
   ║    Hover       background var(--cn-navy-50)                ║
   ║    Selection   background rgba(12, 84, 148, .08)           ║
   ║    Empty cell  → "—" placeholder (text-3 muted)            ║
   ║                                                            ║
   ║  ── PAGER · GROUP PANEL · SEARCH · NO-DATA ───────────     ║
   ║    All inherit the same font-family + text colors so the   ║
   ║    page reads as one typographic family. The surrounding-  ║
   ║    chrome blocks (group panel ~line 2458, search panel     ║
   ║    ~line 2520, filter row ~line 2591, no-data ~line 2603,  ║
   ║    pager section 7a below) only override font-size / weight║
   ║    where the design intentionally differs. Update them at  ║
   ║    source — do not re-declare typography here.             ║
   ║                                                            ║
   ║  ── RESPONSIVE DENSITY ────────────────────────────────    ║
   ║    Tablet ≤ 1024 px → body cells 13 px, cell pad 12 × 12   ║
   ║    Mobile ≤ 600 px  → body cells 12.5 px, header 11.5 px,  ║
   ║                       cell pad 10 × 10, white-space nowrap ║
   ║                       (block ~line 793). Pure density step.║
   ║                                                            ║
   ║  Text rendering hint (-webkit-font-smoothing antialiased   ║
   ║  + text-rendering optimizeLegibility) is set so the grid   ║
   ║  reads crisply on every density (Retina + standard).       ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ───────── Global `.dx-datagrid .dx-link` reset ─────────
   Drops the legacy underline on every cellTemplate-rendered DX link
   across every dxDataGrid in the app (irrespective of cn-grid-card
   wrapping). Consolidates the per-page `text-decoration: none` rules
   that previously had to be repeated on cn-page-modifiers,
   cn-page-cptmaster, cn-page-visitreason, cn-page-restore-reasons,
   cn-page-visitsymptoms, etc. Page-specific rules can still layer
   their own color / hover treatment on top of this baseline. */
.dx-datagrid .dx-link {
    text-decoration: none;
}

/* Grid container — kills the DX border, transparentises the
   background so the .cn-grid-card surface shows through, and
   anchors the font-family + smoothing for every descendant. */
.cn-grid-card .dx-datagrid {
    border: 0 !important;
    background: transparent !important;
    font-family: var(--cn-font) !important;
    color: var(--cn-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headers — tinted band, uppercase 11 px / 700 / wide tracking. */
.cn-grid-card .dx-datagrid-headers {
    background: #F8FAFC !important;
    border-bottom: 1px solid var(--cn-border) !important;
    border-top: 0 !important;
}

    .cn-grid-card .dx-datagrid-headers .dx-header-row > td,
    .cn-grid-card .dx-datagrid-headers .dx-header-row > td .dx-datagrid-text-content {
        font-family: var(--cn-font) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        color: var(--cn-text-2) !important;
        text-transform: uppercase !important;
        letter-spacing: .06em !important;
    }

    .cn-grid-card .dx-datagrid-headers .dx-header-row > td {
        padding: 14px 16px !important;
        border-color: transparent !important;
        background: transparent !important;
        vertical-align: middle !important;
    }

/* Body rows — 14 px body text, tabular-nums so numeric columns
   line up cleanly, line-height 1.45 for readable wrap. font-weight
   is explicit 400 so the DX-Material 500 default doesn't bleed in. */
.cn-grid-card .dx-datagrid-rowsview .dx-row > td {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: -.005em !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--cn-text) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--cn-border) !important;
    border-top: 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
}
    /* Any DX text-content span inside a cell — make sure inline DX
   overrides don't reintroduce the Material font/size. */
    .cn-grid-card .dx-datagrid-rowsview .dx-row > td .dx-datagrid-text-content,
    .cn-grid-card .dx-datagrid-rowsview .dx-row > td .dx-link {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        color: inherit;
    }

.cn-grid-card .dx-datagrid-rowsview .dx-row:last-of-type > td {
    border-bottom: 0 !important;
}

.cn-grid-card .dx-datagrid-rowsview .dx-data-row:hover > td,
.cn-grid-card .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td {
    background: var(--cn-navy-50) !important;
}
/* Selected-row tint — slightly stronger than hover. */
.cn-grid-card .dx-datagrid-rowsview .dx-data-row.dx-selection > td {
    background: rgba(12, 84, 148, .08) !important;
}
/* Empty-cell placeholder — muted dash. */
.cn-grid-card .dx-datagrid-rowsview .dx-data-row > td:empty::after {
    content: '—';
    color: var(--cn-text-3);
    font-weight: 500;
}
/* Sort indicator — brand navy. */
.cn-grid-card .dx-datagrid-headers .dx-sort {
    color: var(--cn-navy) !important;
}

/* SURROUNDING-CHROME TYPOGRAPHY — group panel, DX search panel,
   filter row, no-data placeholder — is NOT duplicated here. Those
   surfaces wrap typography together with full chrome (background,
   border, hover/focus states) and live in their own consolidated
   blocks further down the file (search for `dx-datagrid-group-panel`
   ~line 2458, `dx-datagrid-search-panel` ~line 2520, `dx-datagrid-
   filter-row` ~line 2591, `dx-datagrid-nodata` ~line 2603). They
   pick up the canonical font-family from the `.cn-grid-card
   .dx-datagrid` parent rule (top of this block) and only override
   font-size / weight / color where the design intentionally differs
   from the body-row defaults. If a typography value drifts there,
   update the source block — don't re-declare it here. */

/* ----- 7a. dxDataGrid pagination — applies to ANY grid in
   .cn-grid-card. Page-size chip group on the left, info +
   navigation on the right. ----- */
.cn-grid-card .dx-datagrid-pager {
    border-top: 1px solid var(--cn-border) !important;
    background: var(--cn-elev) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

    .cn-grid-card .dx-datagrid-pager .dx-page-sizes {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        border: 1px solid var(--cn-border) !important;
        border-radius: var(--cn-radius) !important;
        padding: 3px !important;
        background: var(--cn-elev) !important;
    }

    .cn-grid-card .dx-datagrid-pager .dx-page-size,
    .cn-grid-card .dx-datagrid-pager .dx-page {
        border-radius: 4px !important;
        padding: 4px 10px !important;
        min-width: 28px !important;
        text-align: center !important;
        cursor: pointer !important;
        font-family: var(--cn-font) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: var(--cn-text-2) !important;
    }

        .cn-grid-card .dx-datagrid-pager .dx-page-size:hover,
        .cn-grid-card .dx-datagrid-pager .dx-page:hover {
            background: var(--cn-navy-50) !important;
            color: var(--cn-navy) !important;
        }

        .cn-grid-card .dx-datagrid-pager .dx-page-size.dx-selection,
        .cn-grid-card .dx-datagrid-pager .dx-page.dx-selection {
            background: var(--cn-navy) !important;
            color: #FFFFFF !important;
        }

    .cn-grid-card .dx-datagrid-pager .dx-pages .dx-info {
        color: var(--cn-text-2) !important;
        font-size: 12px !important;
        margin-right: 6px !important;
        font-family: var(--cn-font) !important;
    }

    .cn-grid-card .dx-datagrid-pager .dx-navigate-button {
        width: 28px !important;
        height: 28px !important;
        border-radius: 4px !important;
        color: var(--cn-text-2) !important;
    }

        .cn-grid-card .dx-datagrid-pager .dx-navigate-button:hover {
            background: var(--cn-navy-50) !important;
            color: var(--cn-navy) !important;
        }

        .cn-grid-card .dx-datagrid-pager .dx-navigate-button.dx-state-disabled {
            opacity: .35 !important;
            cursor: default !important;
        }

    /* ----- Adaptive pager mode (narrow widths) — DX swaps the inline
   chip-group for a compact SelectBox dropdown and a single page-
   number input. Style both so they share the same 32 px height,
   6 px radius, and outlined-card look as the navigation buttons. */
    .cn-grid-card .dx-datagrid-pager .dx-page-sizes.dx-light-pages,
    .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-selectbox,
    .cn-grid-card .dx-datagrid-pager .dx-light-pages,
    .cn-grid-card .dx-datagrid-pager .dx-pages .dx-pages-count-container .dx-texteditor {
        height: 32px !important;
        min-height: 32px !important;
        border-radius: var(--cn-radius) !important;
        border: 1px solid var(--cn-border) !important;
        background: var(--cn-elev) !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
        /* The dropdown's input cell + the page-number input — match
   the navigation button's font size and centering. */
        .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-selectbox .dx-texteditor-input,
        .cn-grid-card .dx-datagrid-pager .dx-light-pages .dx-page-index,
        .cn-grid-card .dx-datagrid-pager .dx-pages .dx-pages-count-container .dx-texteditor-input {
            font-family: var(--cn-font) !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            color: var(--cn-text) !important;
            padding: 0 10px !important;
            min-width: 28px !important;
            text-align: center !important;
            height: 30px !important;
            line-height: 30px !important;
        }
        /* Kill DX material underline pseudo-elements on these editors so
   they don't render the animated underline that fights the
   outlined-card look. */
        .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-selectbox::before,
        .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-selectbox::after,
        .cn-grid-card .dx-datagrid-pager .dx-light-pages::before,
        .cn-grid-card .dx-datagrid-pager .dx-light-pages::after,
        .cn-grid-card .dx-datagrid-pager .dx-pages .dx-pages-count-container .dx-texteditor::before,
        .cn-grid-card .dx-datagrid-pager .dx-pages .dx-pages-count-container .dx-texteditor::after {
            display: none !important;
            content: none !important;
        }
    /* Dropdown chevron in the page-size SelectBox */
    .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-dropdowneditor-icon::before {
        color: var(--cn-text-2) !important;
        font-size: 13px !important;
    }

    .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-state-focused .dx-dropdowneditor-icon::before {
        color: var(--cn-navy) !important;
    }
    /* Page navigation in adaptive mode — `dx-light-pages` wraps the
   page input + "of N" text. Align them nicely. */
    .cn-grid-card .dx-datagrid-pager .dx-light-pages {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }

        .cn-grid-card .dx-datagrid-pager .dx-light-pages .dx-info-text {
            color: var(--cn-text-2) !important;
            font-size: 12px !important;
            font-family: var(--cn-font) !important;
        }

/* ----- Mobile pager — tighten vertical padding + stack rows
   cleanly so the page-size selector and navigation don't
   overflow the card width at narrow viewports. ----- */
@media (max-width: 600px) {
    .cn-grid-card .dx-datagrid-pager {
        padding: 10px 12px !important;
        justify-content: space-between !important;
        gap: 8px !important;
        row-gap: 8px !important;
    }
        /* When the row really can't fit, wrap to a second row with
       page-size on top and navigation below; both keep their
       compact heights. */
        .cn-grid-card .dx-datagrid-pager .dx-page-sizes,
        .cn-grid-card .dx-datagrid-pager .dx-pages,
        .cn-grid-card .dx-datagrid-pager .dx-light-pages {
            flex-wrap: nowrap !important;
        }
        /* Compact the navigation buttons + page-number input to 28px
       so they sit cleanly next to the dropdown selector. */
        .cn-grid-card .dx-datagrid-pager .dx-navigate-button {
            width: 28px !important;
            height: 28px !important;
        }

        .cn-grid-card .dx-datagrid-pager .dx-light-pages .dx-page-index,
        .cn-grid-card .dx-datagrid-pager .dx-pages .dx-pages-count-container .dx-texteditor {
            height: 28px !important;
            min-height: 28px !important;
        }

        .cn-grid-card .dx-datagrid-pager .dx-light-pages .dx-page-index,
        .cn-grid-card .dx-datagrid-pager .dx-pages .dx-pages-count-container .dx-texteditor-input {
            height: 26px !important;
            line-height: 26px !important;
        }

        .cn-grid-card .dx-datagrid-pager .dx-page-sizes,
        .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-selectbox {
            height: 28px !important;
            min-height: 28px !important;
        }

            .cn-grid-card .dx-datagrid-pager .dx-page-sizes .dx-selectbox .dx-texteditor-input {
                height: 26px !important;
                line-height: 26px !important;
            }
        /* Info text — wrap to its own line below if there's no room. */
        .cn-grid-card .dx-datagrid-pager .dx-pages .dx-info {
            margin-right: 4px !important;
            font-size: 11.5px !important;
        }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  ICON-FONT PRESERVATION                                    ║
   ║                                                            ║
   ║  Restores the DX / FontAwesome icon fonts on icon-bearing  ║
   ║  elements inside grid cells. Without these rules the       ║
   ║  CANONICAL TYPOGRAPHY block above (which applies           ║
   ║  `font-family: var(--cn-font) !important` to every cell    ║
   ║  td + descendant text spans) cascades into icon glyphs,    ║
   ║  replacing the icon font with our system stack and         ║
   ║  rendering glyphs (private-area Unicode codepoints) as     ║
   ║  blank rectangles. Affected surfaces include:              ║
   ║                                                            ║
   ║    • Practice Providers / Patients 3-dot trigger:          ║
   ║        <div id="click" class="fa fa-ellipsis-v">           ║
   ║          <span class="dx-link dx-icon-overflow ...">       ║
   ║    • Edit-row dxButton icons (.dx-icon-edit, save, close)  ║
   ║    • Sort indicator in headers (.dx-sort)                  ║
   ║    • dxLoadIndicator / loadpanel icons                     ║
   ║                                                            ║
   ║  These selectors match the canonical specificity (0,3,1)   ║
   ║  but sit later in source order, so they win for icon       ║
   ║  elements only — text in the same cell still uses          ║
   ║  --cn-font. Pseudo-elements (::before / ::after) get an    ║
   ║  explicit rule too because some DX builds set the icon     ║
   ║  glyph via the pseudo, which doesn't always inherit our    ║
   ║  override cleanly across browsers.                         ║
   ╚════════════════════════════════════════════════════════════╝ */

/* DX icon font — `.dx-icon`, `.dx-icon-overflow`, `.dx-icon-edit`,
   `.dx-icon-save`, `.dx-icon-close`, `.dx-sort`, `.dx-link-icon`,
   `.dx-loadindicator-icon`. Any class with the `dx-icon-` prefix
   uses the "DXIcons" private-use font shipped with DevExtreme.
   Specificity 0,4,1+ — exceeds the canonical body-row rule (0,3,1)
   so these win on icon descendants while text descendants in the
   same cell still pick up the canonical `--cn-font`. */
.cn-grid-card .dx-datagrid-rowsview .dx-row > td .dx-icon,
.cn-grid-card .dx-datagrid-rowsview .dx-row > td .dx-icon-overflow,
.cn-grid-card .dx-datagrid-rowsview .dx-row > td .dx-link-icon,
.cn-grid-card .dx-datagrid-rowsview .dx-row > td [class*="dx-icon-"],
.cn-grid-card .dx-datagrid-headers .dx-row > td .dx-icon,
.cn-grid-card .dx-datagrid-headers .dx-row > td [class*="dx-icon-"],
.cn-grid-card .dx-datagrid-headers .dx-row > td .dx-sort,
.cn-grid-card .dx-datagrid-pager .dx-icon,
.cn-grid-card .dx-datagrid-pager [class*="dx-icon-"] {
    font-family: "DXIcons" !important;
    font-variant-numeric: normal !important; /* defeat canonical tabular-nums */
    letter-spacing: 0 !important; /* defeat canonical -.005em      */
}

    .cn-grid-card .dx-datagrid-rowsview .dx-row > td .dx-icon::before,
    .cn-grid-card .dx-datagrid-rowsview .dx-row > td .dx-icon-overflow::before,
    .cn-grid-card .dx-datagrid-rowsview .dx-row > td [class*="dx-icon-"]::before,
    .cn-grid-card .dx-datagrid-headers .dx-row > td .dx-icon::before,
    .cn-grid-card .dx-datagrid-headers .dx-row > td [class*="dx-icon-"]::before,
    .cn-grid-card .dx-datagrid-headers .dx-row > td .dx-sort::before,
    .cn-grid-card .dx-datagrid-pager .dx-icon::before,
    .cn-grid-card .dx-datagrid-pager [class*="dx-icon-"]::before {
        font-family: "DXIcons" !important;
    }

/* FontAwesome 4.7 — the legacy 3-dot trigger uses
   `<div class="fa fa-ellipsis-v">`; a handful of grids still
   render legacy FA glyphs inline (envelope, gear, etc.). The
   `td` step bumps specificity to 0,4,1 so it beats the canonical
   cell rule. Cover both element and ::before pseudo because some
   browsers' inheritance into pseudos is not consistent under
   `font-family !important` from an ancestor. */
.cn-grid-card .dx-datagrid-rowsview .dx-row > td .fa,
.cn-grid-card .dx-datagrid-rowsview .dx-row > td [class^="fa-"],
.cn-grid-card .dx-datagrid-rowsview .dx-row > td [class*=" fa-"],
.cn-grid-card .dx-datagrid-headers .dx-row > td .fa,
.cn-grid-card .dx-datagrid-headers .dx-row > td [class^="fa-"],
.cn-grid-card .dx-datagrid-headers .dx-row > td [class*=" fa-"] {
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome !important;
    font-variant-numeric: normal !important;
    letter-spacing: 0 !important;
}

    .cn-grid-card .dx-datagrid-rowsview .dx-row > td .fa::before,
    .cn-grid-card .dx-datagrid-rowsview .dx-row > td [class^="fa-"]::before,
    .cn-grid-card .dx-datagrid-rowsview .dx-row > td [class*=" fa-"]::before,
    .cn-grid-card .dx-datagrid-headers .dx-row > td .fa::before,
    .cn-grid-card .dx-datagrid-headers .dx-row > td [class^="fa-"]::before,
    .cn-grid-card .dx-datagrid-headers .dx-row > td [class*=" fa-"]::before {
        font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome !important;
    }

/* ----- 7b. dxDataGrid 3-dot row trigger — applies to any grid.
   Production cellTemplates render a <div id="click"> ellipsis;
   Visit/Index uses a second ID `#clicks` for Online rows. We
   polish both into a 32×32 button-like hit area. ----- */
.cn-grid-card .dx-data-row td > #click,
.cn-grid-card .dx-data-row td > #clicks,
.cn-grid-card .dx-data-row td > div[onclick^="boxopen"],
.cn-grid-card .dx-data-row td > div[onclick^="visitadd"],
.cn-grid-card .dx-data-row td > div[onclick^="canceldata"] {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--cn-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cn-text-2) !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    transition: background-color 120ms ease, color 120ms ease !important;
}

    .cn-grid-card .dx-data-row td > #click:hover,
    .cn-grid-card .dx-data-row td > #clicks:hover,
    .cn-grid-card .dx-data-row td > div[onclick^="boxopen"]:hover,
    .cn-grid-card .dx-data-row td > div[onclick^="visitadd"]:hover,
    .cn-grid-card .dx-data-row td > div[onclick^="canceldata"]:hover {
        background: var(--cn-navy-50) !important;
        color: var(--cn-navy) !important;
    }

    .cn-grid-card .dx-data-row td > #click > .dx-icon-overflow,
    .cn-grid-card .dx-data-row td > #clicks > .dx-icon-overflow,
    .cn-grid-card .dx-data-row td > #click span[style],
    .cn-grid-card .dx-data-row td > #clicks span[style],
    .cn-grid-card .dx-data-row td > div[onclick^="boxopen"] > .dx-icon-overflow,
    .cn-grid-card .dx-data-row td > div[onclick^="visitadd"] > .dx-icon-overflow,
    .cn-grid-card .dx-data-row td > div[onclick^="canceldata"] > .dx-icon-overflow,
    .cn-grid-card .dx-data-row td > div[onclick^="canceldata"] span[style] {
        color: inherit !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* The trigger div carries a legacy `fa fa-ellipsis-v` class whose
       FontAwesome ::before glyph renders a SECOND ellipsis next to the
       inner .dx-icon-overflow icon wherever font-awesome.min.css is loaded
       — making the kebab look doubled / off-centre. Suppress the trigger's
       own pseudo so only the single, sized .dx-icon-overflow shows. The
       icon comes from the inner span (styled above); the div is just the
       32x32 click target. */
    .cn-grid-card .dx-data-row td > #click.fa::before,
    .cn-grid-card .dx-data-row td > #clicks.fa::before,
    .cn-grid-card .dx-data-row td > div[onclick^="boxopen"].fa::before,
    .cn-grid-card .dx-data-row td > div[onclick^="visitadd"].fa::before,
    .cn-grid-card .dx-data-row td > div[onclick^="canceldata"].fa::before {
        content: none !important;
    }

/* ----- 7c. Responsive density — generic across every grid wrapped
   in a .cn-grid-card. Tablet steps font down one notch and tightens
   cell padding; mobile tightens further and turns on horizontal
   scroll; very-narrow phones step density once more. Identity-cell
   avatars + status pills also shrink at mobile widths so the table
   stays readable without truncation.
   These rules used to be duplicated per-id (#provider-list and
   #practiceuser-grid had byte-identical copies); consolidated here
   so every future grid inherits the same responsive behavior. ----- */
@media (max-width: 1024px) {
    .cn-grid-card .dx-datagrid {
        font-size: 13px !important;
    }

    .cn-grid-card .dx-datagrid-headers .dx-header-row > td,
    .cn-grid-card .dx-datagrid-rowsview .dx-data-row > td {
        padding: 12px 12px !important;
    }
    /* Allow DX's own horizontal scroller to engage when the
       table is wider than the card. */
    .cn-grid-card .dx-datagrid,
    .cn-grid-card .dx-datagrid-rowsview,
    .cn-grid-card .dx-scrollable,
    .cn-grid-card .dx-scrollable-wrapper,
    .cn-grid-card .dx-scrollable-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    .cn-grid-card {
        overflow: hidden;
    }

        .cn-grid-card .dx-datagrid {
            font-size: 12.5px !important;
        }

        .cn-grid-card .dx-datagrid-headers .dx-header-row > td,
        .cn-grid-card .dx-datagrid-rowsview .dx-data-row > td {
            padding: 10px 10px !important;
            white-space: nowrap !important;
        }

        .cn-grid-card .dx-datagrid-headers .dx-datagrid-text-content {
            font-size: 11.5px !important;
            letter-spacing: .04em !important;
        }

        .cn-grid-card .dx-scrollable-wrapper,
        .cn-grid-card .dx-scrollable-container {
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch;
        }
        /* Identity cell — shrink avatar + name so the row breathes. */
        .cn-grid-card .cn-avatar {
            width: 30px !important;
            height: 30px !important;
            font-size: 11px !important;
            flex: 0 0 30px !important;
        }

        .cn-grid-card .cn-provider__avatar {
            width: 24px !important;
            height: 24px !important;
            font-size: 10px !important;
            flex: 0 0 24px !important;
        }

        .cn-grid-card .cn-identity {
            gap: 10px;
        }

        .cn-grid-card .cn-identity__name {
            font-size: 12.5px !important;
            white-space: nowrap;
        }

        .cn-grid-card .cn-pill {
            font-size: 11px !important;
            padding: 2px 8px !important;
        }
        /* 3-dot trigger — match the tighter row height. */
        .cn-grid-card .dx-data-row td > #click,
        .cn-grid-card .dx-data-row td > div[onclick^="boxopen"] {
            width: 28px !important;
            height: 28px !important;
        }
        /* Edit button — narrower on mobile so the Actions column
       doesn't dominate. */
        .cn-grid-card .custom-edit-btn {
            min-width: 64px !important;
        }

            .cn-grid-card .custom-edit-btn .dx-button-content {
                padding: 6px 10px !important;
            }
}

@media (max-width: 380px) {
    .cn-grid-card .dx-datagrid {
        font-size: 12px !important;
    }

    .cn-grid-card .dx-datagrid-headers .dx-header-row > td,
    .cn-grid-card .dx-datagrid-rowsview .dx-data-row > td {
        padding: 9px 8px !important;
    }

    .cn-grid-card .cn-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 10.5px !important;
        flex: 0 0 28px !important;
    }
}

/* ----- 8. Status pills — single base, color-coded variants ----- */
.cn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .cn-pill::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.cn-pill--active {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

.cn-pill--inactive {
    background: var(--cn-danger-bg);
    color: var(--cn-danger);
}

.cn-pill--disabled {
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
}
/* Visit-status variants (used by Visit/Index Status column) — pair
   the seven Visit.Status values to design-system signal colors. */
.cn-pill--scheduled {
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

.cn-pill--inprogress {
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
}

.cn-pill--completed {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

.cn-pill--noshow {
    background: var(--cn-danger-bg);
    color: var(--cn-danger);
}

.cn-pill--cancelled {
    background: var(--cn-muted-bg);
    color: var(--cn-muted);
    text-decoration: line-through;
}

    .cn-pill--cancelled::before {
        text-decoration: none;
    }

.cn-pill--tobescheduled {
    background: var(--cn-muted-bg);
    color: var(--cn-muted);
}

.cn-pill--closed {
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
}

.cn-pill--deceased {
    background: var(--cn-muted-bg);
    color: var(--cn-muted);
}

.cn-pill--pending {
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
}

.cn-pill--draft {
    background: var(--cn-muted-bg);
    color: var(--cn-muted);
}

.cn-pill--signed {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

/* ----- 9. Title row — page H1 + subtitle + primary action.
   Sub-element rules (.cn-providers-titlebar__text /__action)
   live further down where the full container styling sits. ----- */
.cn-providers-titlebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 22px;
    flex-wrap: wrap;
}

h1.cn-title {
    font-family: var(--cn-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cn-text);
    margin: 4px 0 20px;
}

@media (max-width: 600px) {
    h1.cn-title {
        font-size: 22px;
    }
}

.cn-subtitle {
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--cn-text-2);
    margin: 0px 0 22px;
    max-width: 720px;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .cn-subtitle {
        font-size: 13px;
    }
}

/* ----- 10. Back link + area label (crumb row) ----- */
.cn-back {
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--cn-navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

    .cn-back:hover {
        color: var(--cn-navy-2);
        text-decoration: none;
    }

    .cn-back svg {
        width: 14px;
        height: 14px;
    }

.cn-area {
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.4;
    float: inline-end;
}

/* ----- 11. Stat card — used by stats strip across pages ----- */
.cn-stat-card {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.cn-stat-value {
    font-family: var(--cn-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.cn-stat-label {
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ----- 12. Identity cell — round avatar + name on one row.
   Used wherever a grid cell needs to identify a person
   (provider, patient, user). Flex row anchors the avatar to
   the left and lets the name (and optional sub-line) fill
   the remaining width. ----- */
.cn-identity {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
}

.cn-identity__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.cn-identity__name {
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Opt-in navy text link for clickable values inside a grid cell
   (e.g. a completed questionnaire name or a visit date that navigates).
   No shared equivalent existed; kept minimal + reusable across grids. */
.cn-cell-link {
    color: var(--cn-navy);
    font-weight: 600;
    cursor: pointer;
}

    .cn-cell-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline;
    }

.cn-identity__sub {
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-3);
    line-height: 1.3;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- 13. Avatar primitive (used in identity cells) ----- */
.cn-avatar {
    width: var(--cn-h-avatar);
    height: var(--cn-h-avatar);
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    border: 1px solid rgba(12, 84, 148, .12);
}

.cn-avatar--gold {
    background: rgba(209,156,70,.16);
    color: var(--cn-gold);
    border-color: rgba(209,156,70,.25);
}

.cn-avatar--mint {
    background: var(--cn-success-bg);
    color: var(--cn-success);
    border-color: rgba(4,120,87,.18);
}

.cn-avatar--slate {
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
    border-color: var(--cn-border);
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  14. FORM CARD — CANONICAL HEAD TYPOGRAPHY                 ║
   ║                                                            ║
   ║  ONE source of truth for the "About this <thing>" card     ║
   ║  head pattern used on every polished form page:            ║
   ║  Locations, Scheduling Preferences, Questionnaire Editor,  ║
   ║  and any future page that surfaces a metadata card with    ║
   ║  a bold title (h2) and a muted helper paragraph (p).       ║
   ║                                                            ║
   ║  Wrapping the form in `.cn-form-card` + `.cn-form-card__   ║
   ║  head` + `.cn-form-card__body` gets the full polish for    ║
   ║  free. New pages should NOT re-declare these properties    ║
   ║  in their page scope — if a value drifts, update this      ║
   ║  block so every consumer benefits.                         ║
   ║                                                            ║
   ║  ── WRAPPER ────────────────────────────────────────       ║
   ║  .cn-form-card        elev surface · 1 px border           ║
   ║                       radius lg · shadow sm · overflow hidden║
   ║                       margin-bottom 16                     ║
   ║                                                            ║
   ║  ── HEAD ───────────────────────────────────────────       ║
   ║  .cn-form-card__head  flex (items flex-start, space-between)║
   ║                       padding 16 × 20 (14 × 14 on mobile)  ║
   ║                       bottom hairline                      ║
   ║  .cn-form-card__head h2   15 px / 700 / -.005 em · --cn-text║
   ║                           1.3 line-height · margin 0       ║
   ║  .cn-form-card__head p    12.5 px / 400 · --cn-text-2      ║
   ║                           1.45 line-height · margin 2 0 0  ║
   ║                                                            ║
   ║  ── BODY ───────────────────────────────────────────       ║
   ║  .cn-form-card__body  padding 18 × 20 × 8                  ║
   ║                       (14 × 14 × 4 on mobile)              ║
   ║                                                            ║
   ║  ── VARIANT (Sign Packages icon-tile head) ─────────       ║
   ║  Sign Packages keeps its own page-scoped head wrapper      ║
   ║  (no inner head padding, icon-flex layout) AND uses        ║
   ║  .cn-form-card__title / .cn-form-card__sub spans instead   ║
   ║  of h2/p, so its rules don't conflict with this primitive  ║
   ║  — they sit at a higher specificity and only override the  ║
   ║  layout deltas they actually need.                         ║
   ╚════════════════════════════════════════════════════════════╝ */
.cn-form-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.cn-form-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cn-border);
}

    .cn-form-card__head h2 {
        margin: 0;
        font-family: var(--cn-font);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--cn-text);
        letter-spacing: -.005em;
    }

    .cn-form-card__head p {
        margin: 2px 0 0;
        font-family: var(--cn-font);
        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.45;
        color: var(--cn-text-2);
    }

.cn-form-card__body {
    padding: 18px 20px 8px;
}

@media (max-width: 540px) {
    .cn-form-card__head {
        padding: 14px;
    }

    .cn-form-card__body {
        padding: 14px 14px 4px;
    }
}

/* End of Design System primitives. Brand tokens above are
   still referenced by every page rule below this point. */


/* ----- Mockup banner ----- */
.mockup-banner {
    background: linear-gradient(135deg, var(--cn-navy-2), var(--cn-navy));
    color: white;
    font-family: var(--cn-font);
    font-size: 12px;
    text-align: center;
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ----- Page canvas ----- */
body {
    margin: 0;
    background: var(--cn-bg);
    font-family: var(--cn-font);
    color: var(--cn-text);
}

/* ============================================================
   Header chrome (logo + user dropdown) lives in
   _PracticeAdmin-layout.cshtml as inline styles on .navbar /
   .practiceimg-con / .navbar .dropdown / .navbar .dropdown
   .dropdown-toggle (the legacy production header). The earlier
   .cn-topheader / .cn-topheader__brand / .cn-user /
   .cn-user__avatar primitives here were a polish-mockup
   alternative that no production page ever wired up — only
   the standalone /mockups/*-v2.html files used them, and they
   inline their own copies. Removed to keep ONE source of truth
   for the header and prevent silent conflicts.
   ============================================================ */

/* Centered content column */
.cn-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 24px 96px;
}

@media (max-width: 600px) {
    .cn-page {
        padding: 16px 16px 96px;
    }
}

/* ----- Crumb ----- */
.cn-crumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-family: var(--cn-font);
    font-size: 13px;
}

/* `.cn-back`, `.cn-back svg`, `.cn-area`, and `h1.cn-title` live
   in the design-system primitive at the top of this file
   (sections 9 + 10). Removed the duplicate block that repeated
   the same selectors with equivalent values. */

/* ============================================================
           SECTION CARDS — top-level dxForm groups via cssClass
           ============================================================ */
.cn-section-card,
.cn-section-card.dx-form-group {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius-lg) !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 600px) {
    .cn-section-card, .cn-section-card.dx-form-group {
        padding: 16px !important;
    }
}

/* Group caption → section heading with hairline.
   Single canonical rule used by every `cssClass: "cn-section-card"`
   group across CreateProvider AND PracticePatients. */
.cn-section-card > .dx-form-group-content > .dx-form-group-caption,
.cn-section-card > .dx-form-group-caption {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    letter-spacing: -.005em !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--cn-border) !important;
    margin: 0 0 18px !important;
    text-transform: none !important;
    display: block !important;
}
/* Sub-group caption inside Notification Preferences.
   Scoped to NOT match section-card captions (those get the
   stronger styling below). */
.dx-form-group .dx-form-group:not(.cn-section-card) > .dx-form-group-content > .dx-form-group-caption,
.dx-form-group .dx-form-group:not(.cn-section-card) > .dx-form-group-caption {
    font-family: var(--cn-font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--cn-text-2) !important;
    border-bottom: 0 !important;
    padding: 0 0 4px !important;
}

/* ----- Section-card caption — wins over the sub-group rule
   regardless of how DX nests the form. Used by every
   `cssClass: "cn-section-card"` group on CreateProvider AND
   PracticePatients (Personal Information · Address · Contact &
   Location · Insurance Details · Member Demographics · etc.). ----- */
.dx-form-group .cn-section-card.dx-form-group > .dx-form-group-caption,
.dx-form-group .cn-section-card.dx-form-group > .dx-form-group-content > .dx-form-group-caption,
.cn-section-card.dx-form-group > .dx-form-group-caption,
.cn-section-card.dx-form-group > .dx-form-group-content > .dx-form-group-caption,
.cn-section-card > .dx-form-group-caption,
.cn-section-card > .dx-form-group-content > .dx-form-group-caption {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    padding: 0 0 12px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid var(--cn-border) !important;
    display: block !important;
}

/* ============================================================
           SECTION DESCRIPTIONS — small gray helper line under each
           section heading. Injected via JS after form renders.
           ============================================================ */
.cn-section-desc {
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-2);
    line-height: 1.5;
    margin: 0 0 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--cn-border);
}
/* When a description follows the caption, the description's
           own border-bottom serves as the section divider. The caption
           gets the .cn-has-desc class (added by JS) so we can strip
           its border + padding-bottom reliably regardless of nesting. */
.cn-section-card .dx-form-group-caption.cn-has-desc {
    border-bottom: 0 !important;
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}
/* Kill any other DX wrapper borders inside a section card so
           the description's hairline is the only divider visible. */
.cn-section-card .dx-form-group-with-caption,
.cn-section-card .dx-form-group-content,
.cn-section-card > .dx-form-group {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* DX helpText (under field) — small gray hint */
.dx-form .dx-field-item-help-text {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    color: var(--cn-text-3) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* Inline note — full-width helper block at the end of a section,
           used where DX's built-in helpText doesn't lay out cleanly
           (e.g., switches with right-side labels). */
.cn-inline-note {
    font-family: var(--cn-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--cn-text-2);
    background: var(--cn-bg);
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 14px;
    border-left: 3px solid var(--cn-navy);
}

    .cn-inline-note strong {
        color: var(--cn-text);
        font-weight: 600;
    }

/* ============================================================
           TOGGLE CARDS — bordered card with switch + title + subtitle.
           Used in Visit features, Patient Intake, Card Images so each
           toggle reads with its own one-line description (cuts training
           time — no need to remember what each toggle does).
           ============================================================ */
.cn-section-card .dx-field-item.cn-toggle-card {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    padding: 14px 14px !important;
    margin: 0 !important;
    transition: border-color 150ms ease, background-color 150ms ease !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

    .cn-section-card .dx-field-item.cn-toggle-card:hover {
        border-color: var(--cn-text-3) !important;
    }

    .cn-section-card .dx-field-item.cn-toggle-card:has(.dx-switch.dx-switch-on-value) {
        border-color: var(--cn-navy) !important;
        background: var(--cn-navy-50) !important;
    }
    /* Switch sits top-aligned, slightly nudged to align with title */
    .cn-section-card .dx-field-item.cn-toggle-card .dx-switch {
        margin-top: 1px !important;
    }

.cn-toggle-title {
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.3;
}

.cn-toggle-subtitle {
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-2);
    margin-top: 2px;
    line-height: 1.4;
}

/* `.cn-subtitle` lives in the design-system primitive at the
   top of this file. Removed the duplicate rule. */

/* User Roles card (outside dxForm) */
.cn-roles-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    padding: 20px 24px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .cn-roles-card {
        padding: 16px;
    }
}

.cn-roles-card > h3 {
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    letter-spacing: -.005em;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--cn-border);
    margin: 0 0 12px;
}


/* ============================================================
           FIELD LABELS — consistent
           ============================================================ */
.dx-form .dx-field-item-label-text {
    font-family: var(--cn-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--cn-text-2) !important;
}

.dx-form .dx-field-item-required-mark {
    color: var(--cn-danger) !important;
    margin-left: 2px !important;
}

/* ============================================================
           INPUTS — true outlined, Stripe-style.
           Material Blue Light renders even "outlined" inputs with a
           gray background and bottom-underline animation. We force a
           clean white-bg, full-border input by overriding every mode
           and killing the ::after/::before underline pseudo-elements.
           ============================================================ */
.dx-form .dx-texteditor-input,
.dx-form .dx-texteditor input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    background: transparent !important;
}

.dx-form .dx-texteditor.dx-editor-outlined,
.dx-form .dx-texteditor.dx-editor-filled,
.dx-form .dx-texteditor.dx-editor-underlined {
    background: #F8FAFC !important; /* subtle off-white */
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important; /* larger radius — more rounded */
    box-shadow: none !important;
    min-height: 42px !important; /* taller, more comfortable */
}

.dx-form .dx-texteditor-input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* Kill the Material underline animation pseudo-elements */
.dx-form .dx-texteditor.dx-editor-outlined::before,
.dx-form .dx-texteditor.dx-editor-outlined::after,
.dx-form .dx-texteditor.dx-editor-filled::before,
.dx-form .dx-texteditor.dx-editor-filled::after,
.dx-form .dx-texteditor.dx-editor-underlined::before,
.dx-form .dx-texteditor.dx-editor-underlined::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: transparent !important;
}
/* Hover — slightly darker border, no fill change */
.dx-form .dx-texteditor:hover {
    border-color: var(--cn-text-3) !important;
}
/* Focus — brand navy 2px-effective border (using inset shadow
           so the layout doesn't shift), background lifts to white */
.dx-form .dx-texteditor.dx-state-focused {
    background: #FFFFFF !important;
    border-color: var(--cn-navy) !important;
    box-shadow: inset 0 0 0 1px var(--cn-navy) !important;
}
/* Read-only fields — quieter still */
.dx-form .dx-texteditor.dx-state-readonly {
    background: #F1F5F9 !important;
    color: var(--cn-text-2) !important;
}
/* Invalid state — danger border + danger focus ring. */
.dx-form .dx-texteditor.dx-invalid {
    border-color: var(--cn-danger) !important;
}

    .dx-form .dx-texteditor.dx-invalid.dx-state-focused {
        box-shadow: inset 0 0 0 1px var(--cn-danger) !important;
    }

/* ----- dxLookup — visually identical to dxSelectBox.
   dxLookup uses .dx-lookup (no .dx-texteditor on the root) and an
   inner .dx-lookup-field span, so the .dx-form .dx-texteditor
   rules above don't reach it. These rules force the same outlined
   card look across every dxForm. Used wherever a Lookup widget
   appears (Default Provider, Time Zone, etc.). ----- */
.dx-form .dx-lookup {
    background: #F8FAFC !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    min-height: 42px !important;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease !important;
    overflow: hidden;
}

    .dx-form .dx-lookup::before,
    .dx-form .dx-lookup::after,
    .dx-form .dx-lookup .dx-texteditor-container::before,
    .dx-form .dx-lookup .dx-texteditor-container::after,
    .dx-form .dx-lookup .dx-texteditor-input-container::before,
    .dx-form .dx-lookup .dx-texteditor-input-container::after {
        display: none !important;
        content: none !important;
    }

    .dx-form .dx-lookup:hover {
        border-color: var(--cn-text-3) !important;
    }

    .dx-form .dx-lookup.dx-state-focused,
    .dx-form .dx-lookup.dx-state-active {
        background: #FFFFFF !important;
        border-color: var(--cn-navy) !important;
        box-shadow: inset 0 0 0 1px var(--cn-navy) !important;
    }

    .dx-form .dx-lookup.dx-invalid {
        border-color: var(--cn-danger) !important;
    }

    .dx-form .dx-lookup.dx-state-readonly {
        background: #F1F5F9 !important;
    }
/* The .dx-lookup-field span holds the selected display text
   + space for the chevron. */
.dx-form .dx-lookup-field {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    padding: 10px 36px 10px 12px !important;
    background: transparent !important;
    line-height: 1.4 !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

.dx-form .dx-lookup-empty .dx-lookup-field,
.dx-form .dx-lookup .dx-placeholder,
.dx-form .dx-lookup .dx-placeholder::before {
    color: var(--cn-text-3) !important;
    font-style: normal !important;
    font-size: 14px !important;
}
/* Chevron button — match the SelectBox dropdown arrow position
   + color. */
.dx-form .dx-lookup .dx-dropdowneditor-icon,
.dx-form .dx-lookup .dx-dropdowneditor-button {
    background: transparent !important;
    border: 0 !important;
    width: 34px !important;
    min-width: 34px !important;
    box-shadow: none !important;
}

    .dx-form .dx-lookup .dx-dropdowneditor-icon::before,
    .dx-form .dx-lookup .dx-dropdowneditor-button .dx-dropdowneditor-icon::before {
        color: var(--cn-text-2) !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

.dx-form .dx-lookup.dx-state-focused .dx-dropdowneditor-icon::before {
    color: var(--cn-navy) !important;
}

.dx-form .dx-lookup .dx-dropdowneditor-button.dx-state-hover,
.dx-form .dx-lookup:hover .dx-dropdowneditor-button {
    background: transparent !important;
}

.dx-form .dx-lookup-arrow::before {
    color: var(--cn-text-2) !important;
    font-size: 14px !important;
}

/* ============================================================
   VALIDATION MESSAGES — solid red tooltip below invalid fields.
   DevExpress renders validation messages two ways:
     1. As a body-appended overlay (`validationMessageMode: 'auto'`,
        the default) — `.dx-invalid-message.dx-overlay > .dx-overlay-wrapper
        > .dx-overlay-content > .dx-invalid-message-content`.
     2. As an inline element next to the input
        (`validationMessageMode: 'always'`).
   These rules need GLOBAL scope (not `.dx-form` descendant) because
   the body-appended overlay sits outside the form in the DOM.
   ============================================================ */

/* The wrapper element DX positions near the field. We boost
   specificity with `html body` so these rules beat DX's theme
   (dx.material.blue.light.css) on equal-!important footing. */
html body .dx-invalid-message,
html body .dx-overlay-wrapper.dx-invalid-message {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    color: var(--cn-danger) !important;
    background: transparent !important;
    background-color: transparent !important;
    z-index: 1500;
}

    /* Red filled bubble with white text — works for BOTH render variants:
         · auto mode  → .dx-overlay-wrapper.dx-invalid-message > .dx-overlay-content > .dx-invalid-message-content
         · always mode → .dx-invalid-message.dx-invalid-message-always > .dx-overlay-content > .dx-invalid-message-content
       The `html body` prefix wins against DX's theme defaults; the
       repeated `.dx-invalid-message.dx-invalid-message` doubles up
       class specificity for the deeply-nested selector DX uses. */
    html body .dx-invalid-message .dx-overlay-content,
    html body .dx-invalid-message .dx-invalid-message-content,
    html body .dx-overlay-wrapper.dx-invalid-message .dx-overlay-content,
    html body .dx-overlay-wrapper.dx-invalid-message .dx-invalid-message-content,
    html body .dx-invalid-message.dx-invalid-message .dx-overlay-content,
    html body .dx-invalid-message.dx-invalid-message .dx-invalid-message-content {
        background: var(--cn-danger) !important;
        background-color: var(--cn-danger) !important;
        color: #FFFFFF !important;
        border: 0 !important;
        border-radius: var(--cn-radius) !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, .25) !important;
        padding: 6px 12px !important;
        font-family: var(--cn-font) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

        /* No bubble arrow — the message is plain text now, not a filled bubble. */
        html body .dx-invalid-message > .dx-overlay-content::before,
        html body .dx-invalid-message .dx-overlay-content::before {
            content: none !important;
            display: none !important;
            border: 0 !important;
            background: transparent !important;
        }

    /* Inline / always-visible mode — the shared layout flips DX's default
   `validationMessageMode` to `"always"` so the message renders
   directly under every invalid field (no hover/focus needed).
   Make the wrapper flow inline so the text sits below the field;
   DO NOT force `position: static` on `.dx-overlay-content` (DX
   measures it absolutely first; forcing static can collapse the box
   and hide the text). */
    html body .dx-invalid-message.dx-invalid-message-always {
        margin-top: 4px !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        pointer-events: auto !important;
    }

        html body .dx-invalid-message.dx-invalid-message-always .dx-overlay-content {
            position: relative !important;
            inset: auto !important;
            left: auto !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important;
            display: block !important;
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            box-shadow: none !important;
        }

/* DATAGRID EDIT-ROW EXCEPTION — hide DX's default full-width
   `.dx-error-row` banner (the red bar that DX inserts as a separate
   `<tr>` spanning every column when validation fails); it always
   reads as a full-width strip and doesn't match the rest of the
   design system. The cell-level invalid bubble below replaces it. */
html body .dx-datagrid .dx-error-row,
html body .dx-datagrid .dx-error-row > td,
html body .dx-datagrid-rowsview .dx-error-row,
html body .dx-datagrid-rowsview .dx-error-row > td {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Inside a datagrid row, an inline `always`-mode message visually
   pushes the row layout around. Float it absolutely just below the
   cell as a compact red bubble — width sized to its content, anchored
   to the invalid cell, so the row stays compact and the user still
   sees the error tied to the invalid input. */
html body .dx-datagrid-rowsview .dx-row > td .dx-invalid-message.dx-invalid-message-always,
html body .dx-datagrid-rowsview .dx-edit-row > td .dx-invalid-message.dx-invalid-message-always {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 4px !important;
    z-index: 5 !important;
    width: auto !important;
    max-width: 280px !important;
    height: auto !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transform: none !important;
}

    /* The bubble itself — small, red filled, white text, rounded.
       `display: inline-block` + `width: auto` sizes it to text. */
    html body .dx-datagrid-rowsview .dx-row > td .dx-invalid-message.dx-invalid-message-always .dx-overlay-content,
    html body .dx-datagrid-rowsview .dx-edit-row > td .dx-invalid-message.dx-invalid-message-always .dx-overlay-content,
    html body .dx-datagrid-rowsview .dx-row > td .dx-invalid-message.dx-invalid-message-always .dx-invalid-message-content,
    html body .dx-datagrid-rowsview .dx-edit-row > td .dx-invalid-message.dx-invalid-message-always .dx-invalid-message-content {
        position: relative !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 280px !important;
        background: var(--cn-danger) !important;
        background-color: var(--cn-danger) !important;
        color: #FFFFFF !important;
        border: 0 !important;
        border-radius: var(--cn-radius) !important;
        padding: 4px 10px !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, .25) !important;
        white-space: nowrap !important;
    }

/* Ensure the cell anchors the absolute message — DX adds the
   .dx-invalid class on the cell when its editor is invalid. */
html body .dx-datagrid-rowsview .dx-row > td.dx-invalid,
html body .dx-datagrid-rowsview .dx-edit-row > td.dx-invalid,
html body .dx-datagrid-rowsview .dx-row > td:has(.dx-texteditor.dx-invalid),
html body .dx-datagrid-rowsview .dx-edit-row > td:has(.dx-texteditor.dx-invalid) {
    position: relative !important;
}

/* The red ⓘ badge that DX overlays inside the invalid input ---
   keep it visible but tighten the size so it doesn't crowd the
   field's right edge. */
.dx-invalid .dx-show-invalid-badge .dx-texteditor-input-container::after,
.dx-show-invalid-badge.dx-invalid .dx-texteditor-input-container::after {
    background-color: var(--cn-danger) !important;
}

/* ============================================================
           SWITCHES — full visual replacement on .dx-switch
           Hide every DX child; draw track on .dx-switch and circle
           handle on .dx-switch::before. Click handling stays intact.
           ============================================================ */
.dx-switch {
    width: 38px !important;
    min-width: 38px !important;
    height: 22px !important;
    padding: 0 !important;
    background: #CBD5E1 !important;
    border: 0 !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: visible !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background-color 180ms ease !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

    .dx-switch.dx-switch-on-value {
        background: var(--cn-navy) !important;
    }

    .dx-switch > *,
    .dx-switch .dx-switch-wrapper,
    .dx-switch .dx-switch-container,
    .dx-switch .dx-switch-inner,
    .dx-switch .dx-switch-on,
    .dx-switch .dx-switch-off,
    .dx-switch .dx-switch-handle {
        display: none !important;
        visibility: hidden !important;
    }

    .dx-switch::before {
        content: '' !important;
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 2px !important;
        left: 2px !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
        transition: transform 180ms ease !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .dx-switch.dx-switch-on-value::before {
        transform: translateX(16px) !important;
    }

    .dx-switch.dx-state-disabled {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
    }

    .dx-switch.dx-state-focused {
        box-shadow: 0 0 0 3px rgba(12,84,148,0.18) !important;
    }

/* ============================================================
           TIGHT TOGGLE-LABEL LAYOUT
           Any field-item that contains a switch becomes a flex-row:
           switch first, label tight against it.
           EXCEPTION: .cn-table-switch field-items (used inside the
           List Consents / List Questionnaire tables) — those keep
           their natural column alignment and are centered in cell.
           ============================================================ */
/* Flex-row toggle layout: applies to every section EXCEPT
           .cn-table-section (List Consents / List Questionnaire),
           where the colspan-12 grid layout must be preserved so
           switches sit under SHOW / REQUIRED / ADD TO INTAKE columns. */
.cn-section-card:not(.cn-table-section) .dx-field-item:not(.dx-field-item-group):has(.dx-switch) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    width: 100% !important;
}

    .cn-section-card:not(.cn-table-section) .dx-field-item:not(.dx-field-item-group):has(.dx-switch) > .dx-field-item-label {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Use display: contents on the content wrapper so the switch
           and any helpText inside it become direct children of the
           field-item flex container. Lets us order them explicitly:
           switch → label → helpText (full-width below). */
    .cn-section-card:not(.cn-table-section) .dx-field-item:not(.dx-field-item-group):has(.dx-switch) > .dx-field-item-content {
        display: contents !important;
    }

    .cn-section-card:not(.cn-table-section) .dx-field-item:not(.dx-field-item-group):has(.dx-switch) .dx-switch {
        order: 1 !important;
        flex: 0 0 auto !important;
    }
    /* helpText (anywhere inside the field-item) → full-width row below switch+label */
    .cn-section-card:not(.cn-table-section) .dx-field-item:not(.dx-field-item-group):has(.dx-switch) .dx-field-item-help-text {
        order: 99 !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        margin-top: 6px !important;
    }
/* Label-on-right case (also scoped to non-table sections only) */
.cn-section-card:not(.cn-table-section) .dx-field-item-content:has(> .dx-field-item-content-content):has(> .dx-field-item-label) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.cn-section-card:not(.cn-table-section) .dx-field-item-content:has(> .dx-field-item-content-content) > .dx-field-item-content-content,
.cn-section-card:not(.cn-table-section) .dx-field-item-content:has(> .dx-field-item-label) > .dx-field-item-label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
           TABLE-STYLE SWITCHES (List Consents / List Questionnaire)
           Center the switch in its column cell so it aligns under
           the SHOW / REQUIRED / ADD TO INTAKE column headers.
           ============================================================ */
.cn-section-card .cn-table-switch {
    text-align: center !important;
}

    .cn-section-card .cn-table-switch > .dx-field-item-content {
        text-align: center !important;
        display: block !important;
    }

    .cn-section-card .cn-table-switch .dx-switch {
        margin: 8px auto !important;
        display: inline-block !important;
    }

/* ============================================================
           CHECKBOXES — brand navy
           ============================================================ */
.dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--cn-navy) !important;
    border-color: var(--cn-navy) !important;
    color: #FFFFFF !important;
}

.dx-checkbox-text {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
}

/* ============================================================
           BUTTONS — every contained "default" button uses brand navy.
           Covers Save, Copy URL (inline), and any future primary
           buttons in the form.
           ============================================================ */
/* Primary button styling lives in the design-system primitive
   at the top of this file (section 3). Removed the duplicate
   rule that repeated background / border / hover / text color. */

/* Sticky-bar Save button: bigger, fixed min-width */
#Save .dx-button.dx-button-default {
    height: 40px !important;
    min-width: 120px !important;
}

#Save .dx-button-text {
    font-size: 14px !important;
}

/* Inline trailing button inside the URL textbox (Copy URL) —
           reduce inner padding so it fits cleanly in the field */
.cn-section-card .dx-texteditor-buttons-container .dx-button {
    border-radius: var(--cn-radius) !important;
    height: 32px !important;
    margin: 0 6px 0 0 !important;
}

.cn-section-card .dx-texteditor-buttons-container .dx-button-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
}

/* ============================================================
           STICKY SAVE BAR
           ============================================================ */
.cn-savebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--cn-elev);
    border-top: 1px solid var(--cn-border);
    box-shadow: 0 -2px 8px rgba(15,23,42,.04);
    z-index: 50;
}

.cn-savebar__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-family: var(--cn-font);
}

@media (max-width: 600px) {
    .cn-savebar__inner {
        padding: 10px 16px;
    }
}

.cn-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 120px;
    padding: 0 18px;
    border-radius: var(--cn-radius);
    border: 1px solid var(--cn-border-2);
    background: transparent;
    color: var(--cn-navy);
    font-family: var(--cn-font);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

    .cn-cancel-btn:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy-2);
    }

/* ----- dxList (User Roles) ----- */
#practice-role .dx-list-item.dx-state-focused,
#practice-role .dx-list-item.dx-state-hover {
    background-color: var(--cn-navy-50) !important;
}

#practice-role .dx-list-item-content {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
}


/* ============================================================
   STICKY SAVE BAR — align right edge with the form container.
   The page form is rendered inside a Bootstrap `.container` which
   has responsive max-widths (540 / 720 / 960 / 1140). The mockup's
   sticky-bar inner was hard-locked to 800px, which left a visible
   gap between the form's right edge and the Save button's right
   edge at every breakpoint above 800px. Replicating Bootstrap's
   container max-widths + 15px gutter on the sticky-bar inner makes
   the buttons sit flush with the form column.
   These rules come AFTER the original .cn-savebar__inner rule on
   purpose so they win without needing !important on every prop.
   ============================================================ */
.cn-savebar__inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
}

@media (min-width: 576px) {
    .cn-savebar__inner {
        max-width: 540px !important;
    }
}

@media (min-width: 768px) {
    .cn-savebar__inner {
        max-width: 720px !important;
    }
}

@media (min-width: 992px) {
    .cn-savebar__inner {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {
    .cn-savebar__inner {
        max-width: 1140px !important;
    }
}

/* Save bar button: bigger, fixed min-width — matches Cancel for
   visual symmetry. */
#Save .dx-button.dx-button-default {
    height: 40px !important;
    min-width: 120px !important;
}

.cn-savebar .cn-cancel-btn {
    height: 40px !important;
    min-width: 120px !important;
}

/* Add bottom padding to the page so the last card isn't hidden by
   the sticky bar (the bar's effective height is ~64px). */
#main-content #section-content,
.cn-page {
    padding-bottom: 96px !important;
}

/* Mobile: keep buttons at the right but allow them to shrink so
   they don't push off the screen on narrow widths. */
@media (max-width: 480px) {
    .cn-savebar__inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px !important;
    }

    #Save .dx-button.dx-button-default,
    .cn-savebar .cn-cancel-btn {
        min-width: 96px !important;
        height: 38px !important;
    }
}


@media (min-width: 768px) {

    .cn-table-section .cn-table-switch .dx-field-item-label {
        display: none;
    }
}

@media (max-width: 767px) {

    .cn-table-section .cn-table-switch .dx-field-item-label {
        display: block;
        margin-bottom: 4px;
    }

    .cn-table-section .cn-table-switch .dx-field-item-label-text {
        font-size: 12px;
        font-weight: 600;
        color: var(--cn-text-3);
    }

    .cn-table-section .cn-table-switch {
        padding-top: 0px !important;
    }

    .cn-table-switch {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}

/* ============================================================
   STICKY SAVE BAR — Cancel + Save button equalization.

   The dxButton config sets `height: "50"` and `width: 100` on
   the Save widget, which DX applies via inline styles. The
   Cancel anchor is a plain CSS-styled <a>. Without explicit
   rules these can render at different widths. We force both
   to identical box dimensions using width / min-width / max-width
   all set to the same value with !important, so inline DX
   styles and content-based sizing both lose to our spec.
   ============================================================ */
.cn-savebar__inner #Save,
.cn-savebar__inner #Save .dx-button,
.cn-savebar__inner #Save .dx-button.dx-button-default,
.cn-savebar__inner #Save .dx-button.dx-button-mode-contained,
.cn-savebar #Save .dx-button {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    flex: 0 0 120px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cn-savebar__inner .cn-cancel-btn,
.cn-savebar .cn-cancel-btn {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    flex: 0 0 120px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid var(--cn-border-2, #D1D5DB) !important;
    background: transparent !important;
    color: var(--cn-navy, #0C5494) !important;
    font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
/* Center the dxButton's internal content so text/icon sit
   centered regardless of the inline style DX applied. */
.cn-savebar__inner #Save .dx-button .dx-button-content {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cn-savebar__inner #Save .dx-button .dx-button-text {
    font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Sticky bar row: clean flex with consistent gap. */
.cn-savebar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* Mobile — buttons flex 50/50 so any save-button label fits
   (e.g. "Save" on CreateProvider, "Create Visit" on ScheduleaVisit).
   We override the hard 104px lock above with auto width + min-width:0
   + flex:1 1 0, then justify-content: stretch on the bar so both
   buttons consume equal halves of the available row. */
@media (max-width: 480px) {
    .cn-savebar__inner {
        gap: 8px !important;
        justify-content: stretch !important;
    }

        .cn-savebar__inner #Save,
        .cn-savebar__inner #Save .dx-button,
        .cn-savebar__inner #Save .dx-button.dx-button-default,
        .cn-savebar #Save .dx-button,
        .cn-savebar__inner .cn-cancel-btn,
        .cn-savebar .cn-cancel-btn {
            flex: 1 1 0 !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            height: 40px !important;
        }
            /* Keep the inner button text from being clipped by overflow:hidden
       wrappers — let the DX button-content fill the parent and center. */
            .cn-savebar__inner #Save .dx-button .dx-button-content {
                width: 100% !important;
                padding: 0 8px !important;
            }

            .cn-savebar__inner #Save .dx-button .dx-button-text,
            .cn-savebar__inner .cn-cancel-btn {
                white-space: nowrap !important;
                overflow: visible !important;
                text-overflow: clip !important;
            }
}

/* ============================================================
   FIX — rogue switch handles floating in the page header.

   The mockup's `.dx-switch` rules earlier in this file are
   unscoped — they target EVERY `.dx-switch` element on the
   page. The handle is drawn via `::before` with
   `position: absolute`, anchored against the switch's
   `position: relative`.

   If any DX widget elsewhere (a popup template, a hidden
   dialog, an offscreen instance left over from initialization)
   renders a `.dx-switch`, the host element gets visual-replaced
   styling but the rendering context can drift, causing the
   white handle circle to escape its container and appear in
   the page header area as a stray floating circle.

   Fix:
   1. Hide the ::before handle when the switch is NOT inside
      a known polish container (#provider-form, .cn-savebar,
      .cn-roles-card, .cn-table-section).
   2. Also visually reset rogue switches outside those
      containers so they don't render with partial styling.
   ============================================================ */
/* Reset any .dx-switch outside our polish containers to DX
   defaults so the global rules earlier in this file don't
   leak iOS-style handles into the page header. */
body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) {
    /* Restore DX default rendering — undo the visual replacement */
    background: transparent !important;
    border: initial !important;
    border-radius: initial !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    position: static !important;
    overflow: hidden !important;
}

    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch)::before {
        /* Critical: suppress the floating white handle for any
       switch outside our containers. */
        content: none !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* Also restore visibility of DX's own internal switch children
   for rogue switches, so they render with the default look. */
    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) > *,
    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) .dx-switch-wrapper,
    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) .dx-switch-container,
    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) .dx-switch-inner,
    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) .dx-switch-on,
    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) .dx-switch-off,
    body .dx-switch:not(#provider-form .dx-switch):not(#Patients-form .dx-switch):not(#Insurance-form .dx-switch):not(#Member-form .dx-switch):not(#paymentinfo .dx-switch):not(.cn-savebar .dx-switch):not(.cn-roles-card .dx-switch):not(.cn-table-section .dx-switch):not(.cn-form-card .dx-switch):not(.cn-form-pane .dx-switch):not(.cn-accordion .dx-switch):not(.cn-pl-blur .dx-switch):not(.cn-vv-blurrow .dx-switch) .dx-switch-handle {
        display: revert !important;
        visibility: revert !important;
    }

/* Belt-and-suspenders: if the rogue switch is at the very top
   of the page (e.g. detached from a popup template), make
   absolutely sure it's clipped from the header area by hiding
   any direct child of body that's a stray dx-switch popup. */
body > .dx-switch,
body > .dx-overlay-wrapper .dx-switch:not(:has(*)),
body > .dx-popup-wrapper .dx-switch:not(:has(*)) {
    display: none !important;
}
/* Container the polished switches: ensure each switch creates
   its own positioning context so the absolutely-positioned
   ::before handle CANNOT escape, even if some other rule
   accidentally clears `position: relative`. */
#provider-form .dx-switch,
#Patients-form .dx-switch,
#Insurance-form .dx-switch,
#Member-form .dx-switch,
#paymentinfo .dx-switch,
.cn-savebar .dx-switch,
.cn-roles-card .dx-switch,
.cn-table-section .dx-switch,
.cn-form-card .dx-switch,
.cn-form-pane .dx-switch,
.cn-accordion .dx-switch,
.cn-pl-blur .dx-switch,
.cn-vv-blurrow .dx-switch {
    position: relative !important;
    contain: layout !important;
    isolation: isolate !important;
}

/* ============================================================
   PRACTICE PROVIDERS PAGE — polish for the dxDataGrid listing.

   Scope: every selector below is anchored to `#provider-list`
   (the dxDataGrid root on PracticeProviders.cshtml) OR to the
   .cn-providers-titlebar / .cn-grid-card wrappers added on
   that page. No global rules — other dxDataGrids on the rest
   of the app are untouched.

   This is PRESENTATION ONLY:
     • zero dxDataGrid config changes (columns, dataSource,
       stateStoring, getDxGridOptions, etc. all untouched)
     • zero dxButton / dxContextMenu config changes
     • zero JS handler / navigation changes
   ============================================================ */

/* --- TITLE BAR — title + subtitle on the left, primary action
   on the right. Replaces the old bootstrap-grid title row that
   wrapped awkwardly on narrow screens. --- */
/* `.cn-providers-titlebar` itself is defined in the primitive
   section at the top of this file. The sub-element rules below
   (`__text`, `__action`, etc.) are kept because they're not in
   the primitive. */
.cn-providers-titlebar__text {
    min-width: 0;
    flex: 1 1 auto;
}

    .cn-providers-titlebar__text .cn-title {
        margin: 0 0 4px;
    }

    .cn-providers-titlebar__text .cn-subtitle {
        margin: 0;
        max-width: 720px;
    }

.cn-providers-titlebar__action {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

    .cn-providers-titlebar__action #NewProviderbutton {
        display: inline-block;
    }

        .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default {
            height: 42px !important;
            min-width: 168px !important;
            padding: 0 18px !important;
            border-radius: var(--cn-radius, 6px) !important;
        }

        .cn-providers-titlebar__action #NewProviderbutton .dx-button-text {
            font-size: 14px !important;
            font-weight: 600 !important;
        }

        .cn-providers-titlebar__action #NewProviderbutton .dx-icon-plus::before {
            font-weight: 700 !important;
        }

@media (max-width: 600px) {
    .cn-providers-titlebar {
        margin-bottom: 16px;
    }

    .cn-providers-titlebar__action {
        width: 100%;
    }

        .cn-providers-titlebar__action #NewProviderbutton,
        .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default {
            width: 100% !important;
            display: block !important;
        }
}

/* --- Grid chrome (card surface, header row, body row, hover,
   sort indicator, 3-dot trigger, pagination) is now defined as
   a generic primitive at the top of this file
   ( "DESIGN-SYSTEM PRIMITIVES" → sections 2, 7, 7a, 7b ).
   Removed duplicate per-id rules that said the same thing. The
   blocks that remain below are provider-specific extras DX's
   header-panel chrome only the providers grid uses, custom edit
   button overrides, checkbox color, etc. --- */

/* --- TOP TOOLBAR row inside DX (search + grouping panel) ---
   Generic so any `.cn-grid-card` whose grid uses the shared
   `getDxGridOptions(...)` helper picks up the polish. Pages
   that render their own external toolbar (e.g. Practice
   Patients) typically hide this panel, so the rules below
   only kick in where DX's built-in panel is visible. */
.cn-grid-card .dx-datagrid-header-panel {
    padding: 14px 18px !important;
    background: var(--cn-elev) !important;
    border-bottom: 1px solid var(--cn-border) !important;
}
/* ============================================================
   GROUP PANEL — shared design across every dxDataGrid inside a
   .cn-grid-card. Polished drop-zone with dashed border, muted
   surface, and design-system typography:
       "Drag a column header here to group by that column"

   • Default state: muted #FAFBFC surface with dashed border-2
     stroke, design-system 12.5px / 500 / text-3 message — reads
     as a discoverable drop zone, never as clinical chrome.
   • Active state (one or more columns dragged into the panel):
     surface promotes to navy-50 with a solid navy-100 border so
     the user can see grouping is in effect.
   • Hidden automatically on mobile (≤540 px) — drag-to-group is
     a desktop-only interaction (touch users have no natural
     gesture) and the empty panel would push the toolbar down.

   Production sets `groupPanel.visible` via getDxGridOptions; this
   block only styles the panel when DX renders it (no JS change).
   ============================================================ */
.cn-grid-card .dx-datagrid-group-panel {
    background: #FAFBFC !important;
    border: 1px dashed var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    padding: 0 12px !important;
    margin: 0 !important;
    min-height: var(--cn-h-input) !important;
    display: flex !important;
    align-items: center !important;
}

.cn-grid-card .dx-datagrid-group-panel-message,
.cn-grid-card .dx-group-panel-message {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--cn-text-3) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Active state — at least one column is being grouped on. */
.cn-grid-card .dx-datagrid-group-panel:has(.dx-group-panel-item) {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy-100, #D6E4F2) !important;
    border-style: solid !important;
}
/* The chips DX renders inside the panel when grouping is active. */
.cn-grid-card .dx-datagrid-group-panel .dx-group-panel-item {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    color: var(--cn-navy) !important;
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    margin-right: 6px !important;
    box-shadow: var(--cn-shadow-sm) !important;
}

/* Mobile hide — applies to every `.cn-grid-card` grid in the
   application. Hides the panel itself, the toolbar-item wrapper
   DX uses when "groupPanel" is listed in toolbar.items, AND the
   parent .dx-toolbar-before when its only content was the group
   panel (kept narrow so it doesn't catch real toolbar items). */
@media (max-width: 540px) {
    .cn-grid-card .dx-datagrid-group-panel {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .cn-grid-card .dx-toolbar-item:has(.dx-datagrid-group-panel) {
        display: none !important;
    }
}

/* DX search box — modern outlined look */
.cn-grid-card .dx-datagrid-search-panel.dx-texteditor {
    background: #F8FAFC !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    min-height: var(--cn-h-input) !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
}

    .cn-grid-card .dx-datagrid-search-panel.dx-texteditor::before,
    .cn-grid-card .dx-datagrid-search-panel.dx-texteditor::after {
        display: none !important;
        content: none !important;
    }

.cn-grid-card .dx-datagrid-search-panel:hover {
    border-color: var(--cn-text-3) !important;
}

.cn-grid-card .dx-datagrid-search-panel.dx-state-focused {
    background: var(--cn-elev) !important;
    border-color: var(--cn-navy) !important;
    box-shadow: var(--cn-focus-ring) !important;
}

.cn-grid-card .dx-datagrid-search-panel .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    padding: 8px 12px !important;
}

.cn-grid-card .dx-datagrid-search-panel .dx-placeholder,
.cn-grid-card .dx-datagrid-search-panel .dx-placeholder::before {
    color: var(--cn-text-3) !important;
    font-style: normal !important;
    font-size: 14px !important;
}

/* DX header `.dx-datagrid-text-content` typography removed —
   the canonical typography block at the top of this file
   (search "dxDataGrid — CANONICAL TYPOGRAPHY SYSTEM") sets every
   font property on this selector directly, so the previous
   "inherit" trampoline is redundant. Kept the comment so anyone
   git-blaming this block sees why there's no longer a rule. */

/* --- Edit button (.custom-edit-btn) styling now comes from the
   design-system secondary-button primitive at the top of this
   file. Removed the duplicate per-id block. --- */

/* --- COLUMN: Active boolean checkbox — brand navy when checked.
   Provider-only (the patients grid has no boolean checkbox column;
   it uses a status pill instead). --- */
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--cn-navy, #0C5494) !important;
    border-color: var(--cn-navy, #0C5494) !important;
    color: #FFFFFF !important;
}

.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-checkbox-icon {
    border-radius: 4px !important;
    border-color: var(--cn-border-2, #D1D5DB) !important;
    width: 18px !important;
    height: 18px !important;
}

/* --- Pagination chrome now lives in the design-system primitive
   (section 7a above). Removed duplicate per-id block. --- */

/* --- DX filter row + filter-builder popups: tidy fonts. Generic
   so any grid in a .cn-grid-card picks it up. --- */
.cn-grid-card .dx-datagrid-filter-row > td {
    background: #F8FAFC !important;
    border-bottom: 1px solid var(--cn-border) !important;
}

.cn-grid-card .dx-datagrid-filter-row .dx-texteditor {
    background: transparent !important;
    border: 0 !important;
}

/* --- NO DATA state (when the grid has zero rows). Generic so it
   applies to every polished grid. --- */
.cn-grid-card .dx-datagrid-nodata {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text-2) !important;
    padding: 48px 24px !important;
}

/* --- Context menu (3-dot per row) polish — applies to the
   provider grid's #context-menu and any other dxContextMenu
   tagged with .cn-action-menu. Uses an itemTemplate from the
   page (renders icon + label + chevron) so we only need to
   style the shell and the rows here. --- */
.dx-context-menu.cn-action-menu .dx-menu-items-container,
#context-menu .dx-context-menu .dx-menu-items-container,
.dx-overlay-wrapper:has(#context-menu) .dx-overlay-content,
.dx-context-menu .dx-menu-items-container {
    border-radius: var(--cn-radius-lg, 10px) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06) !important;
    border: 1px solid var(--cn-border, #E5E7EB) !important;
    background: #FFFFFF !important;
    padding: 6px !important;
    overflow: hidden;
}

/* Subtle pop-in when the menu opens. */
.dx-overlay-wrapper:has(#context-menu) .dx-overlay-content,
.dx-context-menu.cn-action-menu .dx-overlay-content {
    animation: cnMenuPop 140ms cubic-bezier(.16, 1, .3, 1);
    transform-origin: top right;
}

@keyframes cnMenuPop {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* DX wraps each item in .dx-menu-item with an inner
   .dx-menu-item-content. We reset DX's default icon column
   (it'd reserve space for an icon prop we don't use anymore
   now that we render via itemTemplate) and let our flex row
   own the layout. */
.dx-context-menu .dx-menu-item {
    border-radius: var(--cn-radius, 6px) !important;
    font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    color: var(--cn-text, #0F172A) !important;
    padding: 0 !important;
    margin: 1px 0 !important;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

    .dx-context-menu .dx-menu-item .dx-menu-item-content {
        padding: 0 !important;
    }
/* Hide DX's built-in icon/text spans — our itemTemplate replaces them. */
.dx-context-menu.cn-action-menu .dx-menu-item .dx-icon,
.dx-context-menu.cn-action-menu .dx-menu-item .dx-menu-item-text,
.dx-context-menu.cn-action-menu .dx-menu-item .dx-menu-item-popout-container {
    display: none !important;
}

/* The row we render in itemTemplate. */
.cn-action-menu__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.cn-action-menu__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: var(--cn-navy-50, #E8F0F9);
    color: var(--cn-navy, #0C5494);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, color 120ms ease;
}

    .cn-action-menu__icon .cn-menu-icon {
        width: 16px;
        height: 16px;
        display: block;
    }

.cn-action-menu__label {
    flex: 1 1 auto;
    font-weight: 500;
    color: var(--cn-text, #0F172A);
    font-size: 13.5px;
    letter-spacing: -.005em;
}

.cn-action-menu__chev {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--cn-text-3, #94A3B8);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
}

/* Hover / focus / active states — apply to the wrapper li.dx-menu-item
   so the entire row (icon tile included) shifts together. */
.dx-context-menu .dx-menu-item.dx-state-hover,
.dx-context-menu .dx-menu-item.dx-state-focused {
    background: var(--cn-navy-50, #E8F0F9) !important;
    color: var(--cn-navy, #0C5494) !important;
}

    .dx-context-menu .dx-menu-item.dx-state-hover .cn-action-menu__icon,
    .dx-context-menu .dx-menu-item.dx-state-focused .cn-action-menu__icon {
        background: var(--cn-navy, #0C5494);
        color: #FFFFFF;
    }

    .dx-context-menu .dx-menu-item.dx-state-hover .cn-action-menu__label,
    .dx-context-menu .dx-menu-item.dx-state-focused .cn-action-menu__label {
        color: var(--cn-navy, #0C5494);
    }

    .dx-context-menu .dx-menu-item.dx-state-hover .cn-action-menu__chev,
    .dx-context-menu .dx-menu-item.dx-state-focused .cn-action-menu__chev {
        opacity: 1;
        transform: translateX(0);
        color: var(--cn-navy, #0C5494);
    }

.dx-context-menu .dx-menu-item.dx-state-active {
    background: #DCE9F6 !important;
}

/* ============================================================
   SHARED HEADER USER MENU — used by the three shell layouts
   (_provider-layout, _PracticeAdmin-layout, _patient-layout).
   A single source of truth so all three headers look and behave
   identically. Two pieces:
     1. .cn-user — the dropdown TOGGLE styled as a pill
        (avatar + name + chevron). Restyles only the toggle; the
        Bootstrap dropdown menu/behaviour is unchanged.
     2. .navbar .dropdown .dropdown-menu — the popup, mirroring the
        .cn-action-menu three-dot popup (medallion icon + label +
        chevron). The rows reuse the .cn-action-menu__* base classes
        above; only the container + the Bootstrap-keyed hover states
        live here (the DX popup's hovers key off .dx-state-hover,
        which this Bootstrap menu never gets).
   ============================================================ */
.navbar .dropdown .cn-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px 0 6px;
    background: var(--cn-elev, #fff);
    border: 1px solid var(--cn-border-2, #CBD5E1);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text, #0F172A);
    cursor: pointer;
    max-width: 260px;
    transition: background 120ms ease, border-color 120ms ease;
}

    .navbar .dropdown .cn-user:hover,
    .navbar .dropdown .cn-user:focus,
    .navbar .dropdown .cn-user[aria-expanded="true"] {
        background: var(--cn-navy-50, #E8F0F9);
        border-color: var(--cn-navy, #0C5494);
        outline: none;
    }

    .navbar .dropdown .cn-user.dropdown-toggle::after {
        display: none;
    }
    /* hide Bootstrap caret */

.cn-user__avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--cn-navy-50, #E8F0F9);
    color: var(--cn-navy, #0C5494);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
}

.cn-user__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-user__chev {
    width: 12px;
    height: 12px;
    color: var(--cn-text-3, #94A3B8);
    flex: 0 0 12px;
    transition: transform 140ms ease;
}

.cn-user[aria-expanded="true"] .cn-user__chev {
    transform: rotate(180deg);
}

@media (max-width: 480px) {
    .cn-user__label {
        display: none;
    }

    .navbar .dropdown .cn-user {
        padding: 0 10px 0 4px;
        height: 36px;
        gap: 6px;
    }

    .cn-user__avatar {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }
}

.navbar .dropdown .dropdown-menu {
    min-width: 244px;
    padding: 6px;
    margin-top: 8px !important;
    border: 1px solid var(--cn-border, #E5E7EB);
    border-radius: var(--cn-radius-lg, 10px);
    box-shadow: 0 10px 28px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
}

    .navbar .dropdown .dropdown-menu.show {
        animation: cnMenuPop 140ms cubic-bezier(.16, 1, .3, 1);
        transform-origin: top right;
    }

.navbar .dropdown .dropdown-menu .dropdown-item {
    padding: 0;
    margin: 1px 0;
    border-radius: var(--cn-radius, 6px);
    font-family: var(--cn-font);
    font-size: 13.5px;
    line-height: 1.2;
    color: var(--cn-text, #0F172A);
    background: transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

    .navbar .dropdown .dropdown-menu .dropdown-item:hover,
    .navbar .dropdown .dropdown-menu .dropdown-item:focus {
        background: var(--cn-navy-50, #E8F0F9);
        color: var(--cn-navy, #0C5494);
    }

    .navbar .dropdown .dropdown-menu .dropdown-item:active {
        background: #DCE9F6;
    }
    /* icon medallion fills + chevron reveals on hover (the DX popup keys
       these off .dx-state-hover; here off the Bootstrap item hover/focus) */
    .navbar .dropdown .dropdown-item:hover .cn-action-menu__icon,
    .navbar .dropdown .dropdown-item:focus .cn-action-menu__icon {
        background: var(--cn-navy, #0C5494);
        color: #fff;
    }

    .navbar .dropdown .dropdown-item:hover .cn-action-menu__label,
    .navbar .dropdown .dropdown-item:focus .cn-action-menu__label {
        color: var(--cn-navy, #0C5494);
    }

    .navbar .dropdown .dropdown-item:hover .cn-action-menu__chev,
    .navbar .dropdown .dropdown-item:focus .cn-action-menu__chev {
        opacity: 1;
        transform: translateX(0);
        color: var(--cn-navy, #0C5494);
    }

.navbar .dropdown .dropdown-divider {
    margin: 6px 4px;
    border-color: var(--cn-border, #E5E7EB);
}

/* Mobile: the profile menu is right-aligned (dropdown-menu-right) so it
   stays under the toggle within the viewport; cap its width so it can
   never exceed the screen on the smallest phones. Desktop unchanged. */
@media (max-width: 767.98px) {
    .navbar .dropdown .dropdown-menu {
        max-width: calc(100vw - 24px);
    }
}

/* --- 3-dot trigger inside grid rows is now defined as a generic
   primitive (section 7b above). Removed duplicate per-id block. --- */

/* --- Provider-grid mobile padding + edit-button width now come
   from the generic responsive primitive at the top of this file
   (`.cn-grid-card .dx-datagrid-headers .dx-header-row > td` etc.).
   Removed the duplicate per-id rule. --- */

/* ============================================================
   PRACTICE PROVIDERS PAGE — refinements after first review.

   Two issues fixed:
     1. The "Add New Provider" dxButton was rendering the `+`
        icon outside its navy bounding box (escaped via the
        outer button's padding interaction with DX's inner
        .dx-button-content). Solution: move all padding to
        the inner .dx-button-content and clip the outer with
        overflow:hidden so nothing escapes the rounded corners.
     2. The page-size selector ("5 / 10 / 15 / 20" at the
        bottom-left of the grid) was rendering as plain text.
        Group them as a single rounded toolbar with hover +
        selected states.
   ============================================================ */

/* --- "Add New Provider" button — icon positioning fix --- */
.cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default,
.cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-mode-contained {
    height: 42px !important;
    min-width: 168px !important;
    padding: 0 !important;
    border-radius: var(--cn-radius, 6px) !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: stretch !important;
    line-height: 1 !important;
}

    .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default .dx-button-content,
    .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-mode-contained .dx-button-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 20px !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }

    .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default .dx-icon,
    .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-mode-contained .dx-icon {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #FFFFFF !important;
        font-size: 16px !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
    }

        .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default .dx-icon::before,
        .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-mode-contained .dx-icon::before {
            color: #FFFFFF !important;
            font-size: 16px !important;
            line-height: 1 !important;
            font-weight: 700 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

    .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default .dx-button-text,
    .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-mode-contained .dx-button-text {
        margin: 0 !important;
        padding: 0 !important;
        color: #FFFFFF !important;
        font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: .01em !important;
        line-height: 1 !important;
    }

/* --- Pager and page-size selector chrome now live in the
   design-system primitive (section 7a above). Removed duplicate
   per-id blocks. --- */

/* --- Search panel: tighter width + leading magnifier icon ---
   Generic so any grid using `getDxGridOptions(...)` picks it up.
   DX renders the placeholder inside a position:absolute element
   that takes the full container; we shift BOTH the placeholder
   box AND the underlying input by 38px from the left so the
   text aligns just past the magnifier icon. Vertical centering
   comes from DX's own .dx-placeholder rule (top/bottom 0 +
   display:flex; align-items:center). */
.cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after .dx-datagrid-search-panel,
.cn-grid-card .dx-datagrid-search-panel {
    width: 260px !important;
    max-width: 100% !important;
}

    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-input,
    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-input-container input {
        padding-left: 38px !important;
        padding-right: 12px !important;
        height: var(--cn-h-input) !important;
        line-height: var(--cn-h-input) !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        color: var(--cn-text) !important;
    }
    /* Placeholder styling — applies only when the editor is empty
   (DX adds .dx-texteditor-empty to the wrapper while there's no
   text, then removes it the moment the user types). The display
   rule MUST be scoped to .dx-texteditor-empty so DX's own
   `.dx-placeholder { display: none }` reasserts itself the
   instant text is entered — otherwise the placeholder hangs
   on screen next to the typed value. */
    .cn-grid-card .dx-datagrid-search-panel.dx-texteditor-empty .dx-placeholder {
        left: 0 !important;
        right: 0 !important;
        padding-left: 38px !important;
        padding-right: 12px !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        line-height: 1 !important;
        pointer-events: none;
    }
    /* Typography for the placeholder text — safe to apply unconditionally,
   it only renders when the placeholder is visible. */
    .cn-grid-card .dx-datagrid-search-panel .dx-placeholder,
    .cn-grid-card .dx-datagrid-search-panel .dx-placeholder::before {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-style: normal !important;
        color: var(--cn-text-3) !important;
        line-height: 1 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Belt + suspenders: explicitly hide the placeholder once the user
   has typed anything — defends against future DX themes that no
   longer ship a `.dx-placeholder { display: none }` baseline. */
    .cn-grid-card .dx-datagrid-search-panel:not(.dx-texteditor-empty) .dx-placeholder {
        display: none !important;
    }

    .cn-grid-card .dx-datagrid-search-panel::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
    }

    .cn-grid-card .dx-datagrid-search-panel.dx-state-focused::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5494' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    }

/* --- Header-panel toolbar: flex layout (group panel left, search +
   export right) + breathing room between siblings on the right. --- */
.cn-grid-card .dx-datagrid-header-panel .dx-toolbar {
    background: transparent !important;
    padding: 0 !important;
    min-height: 38px !important;
}

.cn-grid-card .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: auto !important;
    min-height: 38px !important;
}

.cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

    .cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- Export-to-Excel toolbar button: turn DX's naked icon into a
   38×38 outlined ghost button so it visually pairs with the search
   input next to it. `export: { enabled: true }` on the grid emits a
   .dx-datagrid-export-button containing a .dx-button. --- */
    .cn-grid-card .dx-datagrid-header-panel .dx-datagrid-export-button,
    .cn-grid-card .dx-datagrid-header-panel .dx-datagrid-export-button.dx-button,
    .cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after .dx-button:not(.cn-grid-card .dx-datagrid-search-panel .dx-button) {
        background: var(--cn-elev) !important;
        background-color: var(--cn-elev) !important;
        border: 1px solid var(--cn-border-2) !important;
        border-radius: var(--cn-radius) !important;
        box-shadow: none !important;
        width: 38px !important;
        height: var(--cn-h-input) !important;
        min-width: 38px !important;
        min-height: var(--cn-h-input) !important;
        padding: 0 !important;
        color: var(--cn-text-2) !important;
        transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
    }

        .cn-grid-card .dx-datagrid-header-panel .dx-datagrid-export-button:hover,
        .cn-grid-card .dx-datagrid-header-panel .dx-datagrid-export-button.dx-button:hover,
        .cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after .dx-button:hover {
            background: var(--cn-navy-50) !important;
            background-color: var(--cn-navy-50) !important;
            border-color: var(--cn-navy) !important;
            color: var(--cn-navy) !important;
        }

        .cn-grid-card .dx-datagrid-header-panel .dx-datagrid-export-button .dx-button-content,
        .cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after .dx-button .dx-button-content {
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
        }

        .cn-grid-card .dx-datagrid-header-panel .dx-datagrid-export-button .dx-icon,
        .cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after .dx-button .dx-icon {
            color: inherit !important;
            font-size: 16px !important;
            line-height: 1 !important;
            margin: 0 !important;
        }

/* Exemption — Provider Questionnaires "Send Questionnaire" button.
   It's a LABELLED dxButton (type:'default') in the grid toolbar-after,
   so the icon-only ghost-pill rule above squashed it to a 38px white
   box with white text/icon (i.e. invisible). Scoped to this grid's id
   so it doesn't touch other grids' ghost buttons, it restores the
   design-system filled-navy primary (label + icon visible). */
#patientquestionnairelist-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text {
    width: auto !important;
    min-width: 168px !important;
    height: var(--cn-h-input) !important;
    min-height: var(--cn-h-input) !important;
    padding: 0 18px !important;
    background: var(--cn-navy) !important;
    background-color: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: var(--cn-shadow-sm) !important;
    color: #fff !important;
}

    #patientquestionnairelist-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text:hover {
        background: var(--cn-navy-2) !important;
        background-color: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
        color: #fff !important;
    }

    #patientquestionnairelist-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-content {
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: auto !important;
    }

    #patientquestionnairelist-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    #patientquestionnairelist-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-icon {
        color: #fff !important;
    }

/* On phones the labelled button keeps its label (it's the page's
   primary action) but may wrap to its own toolbar row — allow it to
   shrink gracefully rather than force the 168px min-width. */
@media (max-width: 575.98px) {
    #patientquestionnairelist-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text {
        min-width: 0 !important;
    }
}

/* ============================================================
   MY PATIENTS — mobile DX toolbar. On phones the JS-set search
   width (280) + status select don't fit a 375px viewport, so DX
   clips them / collapses into an overflow menu. Let the grid
   toolbar WRAP onto stacked rows and let the search + status use
   the full available width (responsive, no hardcoded widths).
   Same approach as the cn-page-modifiers / cptmaster grids; scoped
   to this page's card so other grids are untouched. The group
   panel itself is already hidden ≤540px by the shared rule above.
   ============================================================ */
@media (max-width: 600px) {
    #cn-mypatients-card .dx-datagrid-header-panel {
        padding: 10px 12px !important;
    }
        /* Wrap toolbar rows instead of overflowing the viewport. */
        #cn-mypatients-card .dx-datagrid-header-panel .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            height: auto !important;
            gap: 8px !important;
        }

        #cn-mypatients-card .dx-datagrid-header-panel .dx-toolbar-before,
        #cn-mypatients-card .dx-datagrid-header-panel .dx-toolbar-center,
        #cn-mypatients-card .dx-datagrid-header-panel .dx-toolbar-after {
            width: 100% !important;
            max-width: 100% !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
        }
            /* Search + status each take a full-width row (override the JS
       width:280 / width:180 that overflow a phone). */
            #cn-mypatients-card .dx-datagrid-header-panel .dx-toolbar-before > .dx-toolbar-item {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
            }

    #cn-mypatients-card .dx-datagrid-search-panel.dx-texteditor,
    #cn-mypatients-card .cn-status-select.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    /* Export sits on its own row, right-aligned at its natural width. */
    #cn-mypatients-card .dx-datagrid-header-panel .dx-toolbar-after {
        justify-content: flex-end !important;
    }
}

/* --- Mobile pager: stack page-size selector + info on top of
   page numbers so nothing overflows the card. Generic — applies
   to every grid in a .cn-grid-card. --- */
@media (max-width: 600px) {
    .cn-grid-card .dx-datagrid-pager {
        justify-content: center !important;
    }

        .cn-grid-card .dx-datagrid-pager .dx-page-sizes,
        .cn-grid-card .dx-datagrid-pager .dx-pages {
            flex-wrap: wrap !important;
            justify-content: center !important;
        }

    .cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default .dx-button-content {
        padding: 0 16px !important;
    }
}

/* ============================================================
   FINAL FIX — "Add New Provider" icon-row + search-box height.

   Symptoms from screenshot:
     • The `+` icon is rendering on a separate line ABOVE the
       text → flex direction has collapsed to column or the
       icon has `display: block` from a global rule.
     • The dx-datagrid search panel is ~50px tall, taller than
       the rest of the toolbar.

   Strategy: force the inner .dx-button-content to a strict
   single-row flex layout with nowrap, force both icon AND text
   to inline-block, and pin the search panel + its inner input
   to a fixed 38px height with no wrapping.
   ============================================================ */

/* --- Force the dxButton's inner content to a single horizontal row --- */
.cn-providers-titlebar__action #NewProviderbutton .dx-button .dx-button-content,
.cn-providers-titlebar__action #NewProviderbutton .dx-button-mode-contained .dx-button-content,
.cn-providers-titlebar__action #NewProviderbutton .dx-button-default .dx-button-content {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 20px !important;
    width: 100% !important;
    height: 42px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
/* The icon and text both must be inline-flex children of the row.
   Some global rule was forcing one (or both) to display:block. */
.cn-providers-titlebar__action #NewProviderbutton .dx-button .dx-icon,
.cn-providers-titlebar__action #NewProviderbutton .dx-button-mode-contained .dx-icon,
.cn-providers-titlebar__action #NewProviderbutton .dx-button-default .dx-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    float: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

    .cn-providers-titlebar__action #NewProviderbutton .dx-button .dx-icon::before,
    .cn-providers-titlebar__action #NewProviderbutton .dx-button-mode-contained .dx-icon::before,
    .cn-providers-titlebar__action #NewProviderbutton .dx-button-default .dx-icon::before {
        display: inline-block !important;
        color: #FFFFFF !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 16px !important;
        height: 16px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

.cn-providers-titlebar__action #NewProviderbutton .dx-button .dx-button-text,
.cn-providers-titlebar__action #NewProviderbutton .dx-button-mode-contained .dx-button-text,
.cn-providers-titlebar__action #NewProviderbutton .dx-button-default .dx-button-text {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    text-overflow: clip !important;
}
/* The button itself: pinned size, nothing escapes the rounded corner. */
.cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-default,
.cn-providers-titlebar__action #NewProviderbutton .dx-button.dx-button-mode-contained {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    min-width: 168px !important;
    width: auto !important;
    padding: 0 !important;
    border-radius: var(--cn-radius, 6px) !important;
    overflow: hidden !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.cn-providers-titlebar__action #NewProviderbutton {
    display: inline-block !important;
    height: 42px !important;
    line-height: 42px !important;
}

/* ============================================================
   SEARCH BOX — pin to 38px so it lines up with the toolbar
   ============================================================ */
.cn-grid-card #provider-list .dx-datagrid-search-panel,
.cn-grid-card #provider-list .dx-datagrid-search-panel.dx-texteditor {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    width: 280px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #F8FAFC !important;
    border: 1px solid var(--cn-border-2, #D1D5DB) !important;
    border-radius: var(--cn-radius, 6px) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
}
    /* Inner texteditor wrappers — also clamped to 38px so DX's
   default 38–50px height variation can't expand the box. */
    .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-texteditor-container,
    .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-texteditor-input-container,
    .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-texteditor-input {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 36px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-texteditor-input {
        padding: 0 12px 0 36px !important;
        font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
        font-size: 14px !important;
        color: var(--cn-text, #0F172A) !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-placeholder {
        line-height: 36px !important;
        height: 36px !important;
    }

        .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-placeholder::before {
            padding-left: 36px !important;
            line-height: 36px !important;
            color: var(--cn-text-3, #94A3B8) !important;
            font-size: 14px !important;
            font-style: normal !important;
        }
    /* Kill the Material underline pseudo elements that DX's
   material-blue-light theme draws across the bottom. */
    .cn-grid-card #provider-list .dx-datagrid-search-panel.dx-texteditor::before,
    .cn-grid-card #provider-list .dx-datagrid-search-panel.dx-texteditor::after,
    .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-texteditor-container::before,
    .cn-grid-card #provider-list .dx-datagrid-search-panel .dx-texteditor-container::after {
        display: none !important;
        content: none !important;
        border: 0 !important;
        background: transparent !important;
    }
    /* Re-add the leading magnifier icon (a pseudo-element on the
   search-panel root). Coordinates calculated for the 38px box. */
    .cn-grid-card #provider-list .dx-datagrid-search-panel::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 14px !important;
        height: 14px !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        pointer-events: none !important;
        z-index: 2 !important;
        border: 0 !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-search-panel.dx-state-focused {
        background: #FFFFFF !important;
        border-color: var(--cn-navy, #0C5494) !important;
        box-shadow: 0 0 0 3px rgba(12, 84, 148, .15) !important;
    }

        .cn-grid-card #provider-list .dx-datagrid-search-panel.dx-state-focused::before {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5494' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
        }

/* Toolbar row — vertically center the group panel message
   so it sits on the same baseline as the search box. */
.cn-grid-card #provider-list .dx-datagrid-header-panel,
.cn-grid-card #provider-list .dx-datagrid-header-panel .dx-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 56px !important;
}

    .cn-grid-card #provider-list .dx-datagrid-header-panel .dx-toolbar-items-container {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-header-panel .dx-toolbar-before {
        align-self: center !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-header-panel .dx-toolbar-after {
        align-self: center !important;
        margin-left: auto !important;
    }

/* ============================================================
   CRITICAL SELECTOR FIX

   Earlier rules used `#NewProviderbutton .dx-button` and
   `#NewProviderbutton .dx-button.dx-button-default` (descendant
   combinator). That requires .dx-button.dx-button-default to
   be a DESCENDANT of #NewProviderbutton — which never matches,
   because DX applies those classes to #NewProviderbutton ITSELF
   (it doesn't wrap it). So every rule scoped that way had been
   silently doing nothing.

   Below: re-apply the same styling using the correct
   SAME-ELEMENT selector (no space between #NewProviderbutton
   and the DX classes). These rules WILL match.

   Same situation for `.dx-datagrid-search-panel` — that class
   is on the texteditor itself, not a child.
   ============================================================ */

/* --- Outer button (same element as #NewProviderbutton) --- */
.cn-providers-titlebar__action #NewProviderbutton,
.cn-providers-titlebar__action #NewProviderbutton.dx-button,
.cn-providers-titlebar__action #NewProviderbutton.dx-button-default,
.cn-providers-titlebar__action #NewProviderbutton.dx-button-mode-contained {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    min-width: 168px !important;
    width: auto !important;
    padding: 0 !important;
    border-radius: var(--cn-radius, 6px) !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

    /* --- Inner button-content (direct child of #NewProviderbutton) --- */
    .cn-providers-titlebar__action #NewProviderbutton > .dx-button-content,
    .cn-providers-titlebar__action #NewProviderbutton .dx-button-content {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 20px !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* --- Icon (the "+" element) — force inline, never block --- */
    .cn-providers-titlebar__action #NewProviderbutton .dx-icon,
    .cn-providers-titlebar__action #NewProviderbutton i.dx-icon,
    .cn-providers-titlebar__action #NewProviderbutton .dx-icon-plus {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        float: none !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: #FFFFFF !important;
        font-size: 16px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
    }

        .cn-providers-titlebar__action #NewProviderbutton .dx-icon::before,
        .cn-providers-titlebar__action #NewProviderbutton .dx-icon-plus::before {
            color: #FFFFFF !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 16px !important;
            height: 16px !important;
            display: inline-block !important;
            text-align: center !important;
            vertical-align: middle !important;
        }

    /* --- Text label --- */
    .cn-providers-titlebar__action #NewProviderbutton .dx-button-text {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #FFFFFF !important;
        font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: .01em !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

/* ============================================================
   SEARCH BOX — same selector fix.
   The .dx-datagrid-search-panel class is on the texteditor
   element itself, not a child of #provider-list.
   ============================================================ */
.cn-grid-card .dx-datagrid-search-panel,
.cn-grid-card .dx-datagrid-search-panel.dx-texteditor,
.cn-grid-card .dx-datagrid .dx-datagrid-search-panel,
.cn-grid-card .dx-datagrid .dx-datagrid-search-panel.dx-texteditor {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    width: 280px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #F8FAFC !important;
    border: 1px solid var(--cn-border-2, #D1D5DB) !important;
    border-radius: var(--cn-radius, 6px) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
    /* All inner wrappers clamped */
    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-container,
    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-input-container,
    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-input {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 36px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: 0 !important;
    }

    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-input {
        padding: 0 12px 0 36px !important;
        font-family: var(--cn-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
        font-size: 14px !important;
        color: var(--cn-text, #0F172A) !important;
    }

    .cn-grid-card .dx-datagrid-search-panel .dx-placeholder {
        line-height: 36px !important;
        height: 36px !important;
    }

        .cn-grid-card .dx-datagrid-search-panel .dx-placeholder::before {
            padding-left: 36px !important;
            line-height: 36px !important;
            color: var(--cn-text-3, #94A3B8) !important;
            font-size: 14px !important;
            font-style: normal !important;
        }
    /* Kill the Material underline pseudo elements */
    .cn-grid-card .dx-datagrid-search-panel::after,
    .cn-grid-card .dx-datagrid-search-panel.dx-texteditor::after,
    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-container::before,
    .cn-grid-card .dx-datagrid-search-panel .dx-texteditor-container::after {
        display: none !important;
        content: none !important;
        border: 0 !important;
        background: transparent !important;
    }
    /* Leading magnifier icon */
    .cn-grid-card .dx-datagrid-search-panel::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 14px !important;
        height: 14px !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        pointer-events: none !important;
        z-index: 2 !important;
        border: 0 !important;
    }

    .cn-grid-card .dx-datagrid-search-panel.dx-state-focused {
        background: #FFFFFF !important;
        border-color: var(--cn-navy, #0C5494) !important;
        box-shadow: 0 0 0 3px rgba(12, 84, 148, .15) !important;
    }

        .cn-grid-card .dx-datagrid-search-panel.dx-state-focused::before {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5494' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
        }

/* ============================================================
   PRACTICE PROVIDERS — v2 mockup migration
   Stats strip · custom search input · filter chips ·
   identity cell (avatar + name) · status pill
   ============================================================ */

/* ----- Stats strip ----- */
.cn-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 20px;
}

@media (max-width: 768px) {
    .cn-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cn-stats {
        grid-template-columns: 1fr;
    }
}
/* `.cn-stat-card`, `.cn-stat-value`, `.cn-stat-label` live in the
   design-system primitive (sections 2 + 11). Removed the duplicate
   declarations and kept only the icon-tile rules that are unique
   to the providers-v2 stats strip. */
.cn-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cn-stat-icon svg {
        width: 20px;
        height: 20px;
    }

    .cn-stat-icon.cn-stat-icon--success {
        background: var(--cn-success-bg);
        color: var(--cn-success);
    }

    .cn-stat-icon.cn-stat-icon--gold {
        background: rgba(209,156,70,.14);
        color: var(--cn-gold);
    }

    .cn-stat-icon.cn-stat-icon--muted {
        background: var(--cn-muted-bg);
        color: var(--cn-text-2);
    }

.cn-stat-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ----- Grid toolbar (search + filter chips) ----- */
.cn-grid-card .cn-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cn-border, #E2E5EA);
    flex-wrap: wrap;
}

.cn-grid-card .cn-toolbar-left,
.cn-grid-card .cn-toolbar-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Search input — controlled by us, not by DX, so no height surprises */
.cn-grid-card .cn-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

    .cn-grid-card .cn-search input {
        width: 280px;
        max-width: 100%;
        height: 38px;
        padding: 0 14px 0 38px;
        border: 1px solid var(--cn-border-2, #D1D5DB);
        border-radius: var(--cn-radius, 6px);
        background: #F8FAFC;
        font-family: var(--cn-font);
        font-size: 14px;
        color: var(--cn-text, #0F172A);
        box-sizing: border-box;
        outline: none;
        transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    }

        .cn-grid-card .cn-search input::placeholder {
            color: var(--cn-text-3, #94A3B8);
        }

        .cn-grid-card .cn-search input:focus {
            background: #FFFFFF;
            border-color: var(--cn-navy, #0C5494);
            box-shadow: 0 0 0 3px rgba(12, 84, 148, .15);
        }

    .cn-grid-card .cn-search svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: var(--cn-text-3, #94A3B8);
        pointer-events: none;
    }

    .cn-grid-card .cn-search:has(input:focus) svg {
        color: var(--cn-navy, #0C5494);
    }

/* Filter chips */
.cn-grid-card .cn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--cn-border-2, #D1D5DB);
    background: var(--cn-elev, #FFFFFF);
    color: var(--cn-text-2, #475569);
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

    .cn-grid-card .cn-chip:hover {
        border-color: var(--cn-navy, #0C5494);
        color: var(--cn-navy, #0C5494);
        background: var(--cn-navy-50, #E8F0F9);
    }

    .cn-grid-card .cn-chip.is-active {
        border-color: var(--cn-navy, #0C5494);
        color: var(--cn-navy, #0C5494);
        background: var(--cn-navy-50, #E8F0F9);
        font-weight: 600;
    }

/* Status filter dropdown — a DX dxSelectBox tagged with
   cssClass="cn-status-select". Matched 1:1 to the toolbar search box
   (.cn-grid-card .dx-datagrid-search-panel) so the two controls share the
   same height (--cn-h-input), surface (#F8FAFC), border, radius, padding,
   font size and focus ring — they read as one toolbar control family. */
.cn-status-select.dx-selectbox,
.cn-status-select .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
}

.cn-status-select.dx-texteditor.dx-editor-outlined {
    min-height: var(--cn-h-input) !important;
    background: #F8FAFC !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
}

.cn-status-select .dx-texteditor-input {
    padding: 8px 12px !important;
}

.cn-status-select.dx-state-hover.dx-texteditor.dx-editor-outlined {
    border-color: var(--cn-text-3) !important;
}

.cn-status-select.dx-state-focused.dx-texteditor.dx-editor-outlined {
    background: var(--cn-elev) !important;
    border-color: var(--cn-navy) !important;
    box-shadow: var(--cn-focus-ring) !important;
}

.cn-status-select .dx-dropdowneditor-icon::before {
    color: var(--cn-text-2) !important;
}

/* When the toolbar is present, the dxDataGrid's own header-panel
   (search + group-panel) is hidden (since we use our own toolbar). */
.cn-grid-card .cn-grid-toolbar + #provider-list .dx-datagrid-header-panel {
    display: none !important;
}

/* `.cn-identity`, `.cn-avatar` (+ variants), `.cn-identity__text`,
   `.cn-identity__name`, `.cn-pill` (+ variants) are defined as
   design-system primitives at the top of this file. Removed the
   `#provider-list`-scoped duplicates so both grids render with
   the same identity cells, avatars, and status pills. */

/* Responsive — small screens stack things gracefully */
@media (max-width: 600px) {
    .cn-grid-card .cn-grid-toolbar {
        padding: 12px;
    }

    .cn-grid-card .cn-search {
        width: 100%;
        flex: 1 1 100%;
    }

        .cn-grid-card .cn-search input {
            width: 100%;
        }

    .cn-stat-card {
        padding: 12px 14px;
    }

    .cn-stat-icon {
        width: 36px;
        height: 36px;
    }

    .cn-stat-value {
        font-size: 18px;
    }
}

/* ============================================================
   REMAINING POLISH REFINEMENTS — Practice Providers
   ============================================================ */

/* --- 1. 3-dot ellipsis icon — override the cellTemplate's
       inline `color: #3f51b5` on the inner span. Generic now so
       both providers and patients grids share the same override
       (both pages render the same legacy inline-style markup). --- */
.cn-grid-card .dx-data-row #click .dx-link,
.cn-grid-card .dx-data-row #click .dx-icon-overflow,
.cn-grid-card .dx-data-row #click [style*="color:"],
.cn-grid-card .dx-data-row #click span[style] {
    color: inherit !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.cn-grid-card .dx-data-row #click {
    margin: 0 auto !important;
}

/* --- 2. Column-alignment backstop — DX's column.alignment
       (set in JS) is sometimes overridden by inline cellTemplate
       wrappers. Re-assert the intended alignment for every
       column so headers + cells stay in lockstep:
         col 1 = 3-dot      → center
         col 2 = Actions    → center
         col 3 = Name       → left
         col 4 = Email      → left
         col 5 = Phone      → left
         col 6 = Degree     → center
         col 7 = Active     → center  */
/* Centered columns — headers + cells */
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(1),
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(1) .dx-datagrid-text-content,
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(2),
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(2) .dx-datagrid-text-content,
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(6),
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(6) .dx-datagrid-text-content,
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(7),
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(7) .dx-datagrid-text-content,
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(1),
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(2),
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(6),
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(7) {
    text-align: center !important;
}
/* Left-aligned text columns — headers + cells */
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(3),
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(3) .dx-datagrid-text-content,
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(4),
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(4) .dx-datagrid-text-content,
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(5),
.cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(5) .dx-datagrid-text-content,
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(3),
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(4),
.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(5) {
    text-align: left !important;
}
/* Pill in the Active column — keep horizontally centered. */
.cn-grid-card #provider-list .dx-data-row > td:nth-child(7) .cn-pill {
    margin: 0 auto;
}
/* Name identity cell — the inline-flex wrapper would inherit
   the cell's text-align, but it sets its own flex layout. Force
   the wrapper to align to the start (left edge) so the avatar
   anchors to the left consistently. */
.cn-grid-card #provider-list .dx-data-row > td:nth-child(3) .cn-identity {
    justify-content: flex-start;
}
/* Vertical centering + empty-cell `—` placeholder removed —
   both now inherited from the CANONICAL TYPOGRAPHY SYSTEM block
   (publish.css ~lines 347–470). The previous `#provider-list`-
   scoped rules were exact duplicates of the canonical and would
   only ever drift out of sync over time. New per-grid rules
   should ONLY set provider-specific layout (column widths,
   alignment, cell-content positioning) — typography belongs to
   the canonical. */

/* --- 4. Edit button — defeat the cellTemplate's inline
       `display: flex; gap: 8px; justify-content: center` on
       its surrounding <div>. Our cn-row-actions / custom-edit-btn
       chrome handles layout, the inline-flex wrapper is
       redundant. Force the wrapper to inline-flex with the
       same alignment so the button still centers in the cell. --- */
.cn-grid-card #provider-list .dx-data-row > td:nth-child(2) > div {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* --- 5. Identity cell email overflow — long emails should
       not break the name column's width; let them ellipsize. --- */
.cn-grid-card #provider-list .cn-identity__text {
    flex: 1 1 auto;
    min-width: 0;
}

.cn-grid-card #provider-list .cn-identity__name {
    width: 100%;
}

/* --- 6. Stats strip values — fixed font-tabular so digits align
       when counts update from the AJAX. --- */
.cn-stats .cn-stat-value {
    font-variant-numeric: tabular-nums;
}

/* --- 7. Loading state — DX renders a load-indicator inside the
       grid when data is being fetched. Recolour it to brand navy. --- */
.cn-grid-card #provider-list .dx-loadindicator-segment-inner,
.cn-grid-card #provider-list .dx-loadindicator-segment3-inner {
    border-color: var(--cn-navy, #0C5494) var(--cn-navy, #0C5494) transparent !important;
}

.cn-grid-card #provider-list .dx-datagrid-rowsview .dx-loadpanel-content {
    background: var(--cn-elev, #FFFFFF) !important;
    border-radius: var(--cn-radius, 6px) !important;
    box-shadow: var(--cn-shadow-sm, 0 1px 2px rgba(15, 23, 42, .04)) !important;
}

/* --- 8. Keyboard focus ring on data rows — accessibility polish.
       Visible when navigating with arrow keys / tab. --- */
.cn-grid-card #provider-list .dx-data-row.dx-state-focused > td {
    box-shadow: inset 0 0 0 2px rgba(12, 84, 148, .25) !important;
    background: var(--cn-navy-50, #E8F0F9) !important;
}

/* --- 9. Mobile-as-desktop strategy — preserve the SAME 7-column
       table on phones (3-dot / Actions / Name / Email / Phone /
       Degree / Active). Rather than hiding columns or stacking
       rows into cards, we let DX's horizontal scroller carry
       the full table inside the card chrome, and tighten cell
       padding + typography so the desktop polish reads cleanly
       at smaller widths. --- */

/* --- Provider-grid PAGE-SPECIFIC responsive: per-column min-widths
   force the table to ~786 px wide on mobile so the native
   horizontal scroller engages with all 7 columns visible. The
   generic density rules (font-size, padding, avatar size,
   white-space, overflow) are inherited from the primitive
   responsive block above. --- */
@media (max-width: 600px) {
    /* Per-column minimum widths — provider grid only (7 columns):
         1=3-dot 44 · 2=Actions 96 · 3=Name 160 · 4=Email 184
         5=Phone 130 · 6=Degree 84 · 7=Active 88 → total 786 px. */
    .cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(1),
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(1) {
        min-width: 44px !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(2),
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(2) {
        min-width: 96px !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(3),
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(3) {
        min-width: 160px !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(4),
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(4) {
        min-width: 184px !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(5),
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(5) {
        min-width: 130px !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(6),
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(6) {
        min-width: 84px !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-headers .dx-header-row > td:nth-child(7),
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-data-row > td:nth-child(7) {
        min-width: 88px !important;
    }

    .cn-grid-card #provider-list .dx-datagrid-headers .dx-datagrid-table,
    .cn-grid-card #provider-list .dx-datagrid-rowsview .dx-datagrid-table {
        min-width: 786px !important;
        width: 786px !important;
    }
}

/* Scrollbar appearance is left to DevExpress defaults. The
   previous mobile rule that forced `.dx-scrollable-scrollbar`
   visibility was removed so DX's hover-reveal behavior renders
   naturally. */

/* --- 10. Title-bar action wraps cleanly on narrow screens --- */
@media (max-width: 600px) {
    .cn-providers-titlebar {
        gap: 12px;
    }

    .cn-providers-titlebar__action {
        width: 100% !important;
    }

        .cn-providers-titlebar__action #NewProviderbutton {
            width: 100% !important;
            display: block !important;
        }
}

/* --- 10a. Mobile alignment refinements — addresses the
       cramped header strip + over-tall stats stack the live
       page showed at 375 px (iPhone SE). Goals:
         • Stats stay 3-up (compact) instead of stacking
           vertically; the strip takes ~80 px of height
           rather than ~240 px, so the grid is visible
           without long-scroll.
         • "Back to Dashboard" stays on a single line; the
           PRACTICE ADMIN label remains right-aligned but
           shrinks so the col-6 / col-6 split doesn't force
           wrapping.
         • Page container padding tightens so the cards have
           more horizontal room. --- */
@media (max-width: 600px) {
    /* Tighten container side-padding so the cards aren't
       boxed in by Bootstrap's 12 px gutters + the parent's
       padding. */
    #main-content .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Back link — single line, slight nudge down so it
       baselines with the area label. */
    .cn-back {
        white-space: nowrap;
        font-size: 13px;
    }

    .cn-area {
        font-size: 10px;
        white-space: nowrap;
    }

    /* Page title — slightly tighter top/bottom margin. */
    h1.cn-title {
        margin: 0 0 6px !important;
    }

    /* Titlebar — drop the bottom margin a touch on mobile. */
    .cn-providers-titlebar {
        margin-bottom: 14px !important;
    }
}

/* --- 10b. Stats strip on mobile — KEEP 3 columns (compact)
       rather than stacking. Overrides the default ≤480 px rule
       that collapses to a single column. --- */
@media (max-width: 600px) {
    .cn-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin: 0 0 14px !important;
    }

    .cn-stat-card {
        padding: 10px 10px !important;
        gap: 8px !important;
        border-radius: 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .cn-stat-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }

        .cn-stat-icon svg {
            width: 14px !important;
            height: 14px !important;
        }

    .cn-stat-meta {
        gap: 1px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .cn-stat-value {
        font-size: 17px !important;
    }

    .cn-stat-label {
        font-size: 9.5px !important;
        letter-spacing: .06em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
}

/* --- 10c. Extra-narrow phones (≤380 px) — keep the 3-up
       stats but drop the icon so labels + values have full
       width. The icon's color signal is redundant with the
       value's size. --- */
@media (max-width: 380px) {
    .cn-stat-icon {
        display: none !important;
    }

    .cn-stat-card {
        padding: 9px 10px !important;
    }

    .cn-stat-value {
        font-size: 16px !important;
    }

    .cn-stat-label {
        font-size: 9px !important;
        letter-spacing: .04em !important;
    }
}

/* --- 11. Sticky data-grid header on long lists — keeps column
       labels visible when the user scrolls the page. Only kicks
       in on viewports tall enough to benefit. --- */
@media (min-height: 700px) {
    .cn-grid-card #provider-list .dx-datagrid-headers {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
    }
}

/* --- 12. Grid horizontal overflow safety — if a column overflows
       the card width, scroll inside the card rather than breaking
       the page layout. Generic across every grid in .cn-grid-card. --- */
.cn-grid-card .dx-datagrid-rowsview,
.cn-grid-card .dx-scrollable-container {
    max-width: 100% !important;
}

/* ============================================================
   PRACTICE PATIENTS PAGE — page-specific extras only.
   Most of the chrome the patients grid uses is inherited from
   the design-system primitives at the top of this file:
     • .cn-grid-card (card surface, overflow, margin)
     • Section 7  — generic dxDataGrid chrome
     • Section 7a — generic pagination
     • Section 7b — generic 3-dot trigger
     • Section 8  — .cn-pill base + variants
     • Section 12 — .cn-identity, __text, __name, __sub
   Helper classes used only by the patients cellTemplates
   (cn-provider, cn-mrn, cn-date, cn-mono, cn-email) live below.
   ============================================================ */

/* ----- Provider cell — smaller avatar + name ----- */
.cn-provider {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cn-provider__avatar {
    width: var(--cn-h-avatar-sm);
    height: var(--cn-h-avatar-sm);
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.cn-provider__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--cn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- MRN badge ----- */
.cn-mrn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--cn-radius);
    background: var(--cn-muted-bg);
    color: var(--cn-text);
    font-family: var(--cn-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ----- Date double-line (primary + relative) ----- */
.cn-date {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.cn-date__primary {
    font-size: 13px;
    font-weight: 500;
    color: var(--cn-text);
    white-space: nowrap;
}

.cn-date__rel {
    font-size: 11px;
    color: var(--cn-text-3);
    margin-top: 1px;
    white-space: nowrap;
}

/* ----- Mono / email helpers ----- */
.cn-mono {
    font-variant-numeric: tabular-nums;
    color: var(--cn-text);
}

.cn-email {
    color: var(--cn-text);
    text-decoration: none;
}

    .cn-email:hover {
        color: var(--cn-navy);
        text-decoration: underline;
    }

/* DX-rendered toolbar inside the patients card — suppress it
   because the patients page renders search + status chips
   externally (provider-specific behavior). */
.cn-grid-card #practiceuser-grid .dx-datagrid-header-panel {
    display: none !important;
}

/* First-cell centering (3-dot column) is generic now —
   `.cn-grid-card .dx-data-row > td:first-child` covers both grids
   automatically. Removed duplicate patients-scoped block. */

/* Patients grid responsive density (font-size, padding, avatar
   size, scroll behavior, cn-provider avatar) is now inherited from
   the primitive responsive block at the top of this file. Removed
   the duplicate per-id rules — both grids stay byte-identical. */

/* ============================================================
   PRACTICE PATIENTS — FORM VIEW (Add/Edit Patient)
   ============================================================
   Applies to #tabdisplay (the dxTabs strip + the four form
   containers — #Patients-form · #Insurance-form · #paymentinfo
   · #Member-form). Pure visual polish: matches the
   practice-patients-v2-add.html mockup, no HTML / JS changes.

   Production toggles each form container's `display` per the
   active dxTabs item; we just polish the surface those forms
   render into and the chrome around them.
   ============================================================ */

/* ----- 1. Form-view page chrome ----- */
#tabdisplay {
    margin-top: 8px;
}

    /* ----- 2. DX dxTabs — flat strip with navy underline indicator
   (replaces the default material-blue-light pill tabs) ----- */
    #tabdisplay #tabs > .tabs-container .dx-tabs {
        background: var(--cn-elev) !important;
        border: 1px solid var(--cn-border) !important;
        border-radius: var(--cn-radius-lg) var(--cn-radius-lg) 0 0 !important;
        border-bottom: 0 !important;
        box-shadow: var(--cn-shadow-sm) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #tabdisplay .dx-tabs-wrapper {
        display: flex !important;
    }

    #tabdisplay .dx-tab {
        flex: 1 1 0 !important;
        min-height: 60px !important;
        padding: 14px 18px !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
        color: var(--cn-text-3) !important;
        cursor: pointer !important;
        transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease !important;
    }

        #tabdisplay .dx-tab:hover {
            color: var(--cn-navy) !important;
            background: var(--cn-navy-50) !important;
        }

        #tabdisplay .dx-tab.dx-tab-selected {
            color: var(--cn-navy) !important;
            background: transparent !important;
            border-bottom-color: var(--cn-navy) !important;
        }

            #tabdisplay .dx-tab.dx-tab-selected::before {
                display: none !important;
                content: none !important;
            }

        #tabdisplay .dx-tab .dx-icon,
        #tabdisplay .dx-tab .dx-tab-text {
            color: inherit !important;
            font: inherit !important;
            letter-spacing: inherit !important;
            text-transform: inherit !important;
        }

    #tabdisplay .dx-tab-text {
        margin: 0 !important;
    }

    /* ----- 3. Empty dvContent placeholder — production renders an
   empty div as DX's tab content area; the actual form containers
   are siblings below. Keep dvContent invisible so it doesn't
   inject extra space between the tab strip and the form. ----- */
    #tabdisplay #dvContent {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

/* ----- 4. Form containers — kept TRANSPARENT now that each
   dxForm group inside carries its own `.cn-section-card` chrome
   (caption + white surface + hairline + radius). The form
   container only provides spacing between the tab strip above
   and the stack of section cards below. ----- */
#Patients-form,
#Insurance-form,
#Member-form,
#paymentinfo {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 16px 0 0;
    margin: 0 0 8px;
}

@media (max-width: 600px) {
    #Patients-form,
    #Insurance-form,
    #Member-form,
    #paymentinfo {
        padding: 12px 0 0;
    }
}

/* ----- 5. dxForm field surface (text inputs, dropdowns, labels,
   buttons, switches, dxLookup, validation messages) is handled
   centrally by the .dx-form-scoped rules near the top of this
   file (~line 926+). Both CreateProvider and PracticePatients
   inherit those identical rules — no per-page overrides needed.

   Removed ~280 lines of duplicate :is(#Patients-form, ...) rules
   that fought the canonical .dx-form rules with conflicting
   values (different bg / radius / min-height / button padding /
   switch DOM targeting). The dxSwitch protection list above
   was extended to cover the four patient form containers.
   ----- */

/* ----- 7. Production-template "Address" span — the patient
   form renders a section title via an inline <span> template
   rather than a proper group caption. Style it to match the
   canonical .cn-section-card caption look. UNIQUE to
   PracticePatients (CreateProvider uses real captions). ----- */
#Patients-form .dx-field-item-content > span[class*="mt-5"][class*="mb-5"] {
    display: block !important;
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    letter-spacing: -.005em !important;
    margin: 16px 0 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--cn-border) !important;
    height: auto !important;
}

/* ----- 10. Patient Status display (top-right of header on form
   view) — give it the same outlined SelectBox look as the
   status filter on the list view. ----- */
#PatientStatusdisplay #dvPatientStatus {
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-elev) !important;
    box-shadow: none !important;
}

    #PatientStatusdisplay #dvPatientStatus.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

/* ----- 11. Payment section — credit-card form. The Stripe
   Element (#card-element) and the custom inputs already use the
   .StripeElement / .paymentcharge_input classes; we polish those
   to match the form-view design system. Scoped to #paymentinfo
   (sibling of #tabdisplay in production markup). ----- */
#paymentinfo .StripeElement,
#paymentinfo .paymentcharge_input {
    height: 40px !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    background: var(--cn-elev) !important;
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}

    #paymentinfo .StripeElement--focus,
    #paymentinfo .paymentcharge_input:focus {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
        outline: none !important;
    }

#paymentinfo .StripeElement--invalid {
    border-color: var(--cn-danger) !important;
}

#paymentinfo .paymentcharge_button,
#paymentinfo .settinginsurance_button,
#Payment-information .settinginsurance_button {
    background-color: var(--cn-navy) !important;
    background: var(--cn-navy) !important;
    border: 0 !important;
    border-radius: var(--cn-radius) !important;
    padding: 0 22px !important;
    height: 42px !important;
    line-height: 1 !important;
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    box-shadow: var(--cn-shadow-sm) !important;
    transition: background-color 120ms ease !important;
}

    #paymentinfo .paymentcharge_button:hover,
    #paymentinfo .settinginsurance_button:hover,
    #Payment-information .settinginsurance_button:hover {
        background: var(--cn-navy-2) !important;
        background-color: var(--cn-navy-2) !important;
    }
/* The "Edit" + "Cancel" inline payment buttons sit alongside the
   card details — keep them compact. (Shared by PracticePatients'
   #paymentinfo and Provider Patient Profile's #Payment-information.) */
#paymentinfo #EditPayment .settinginsurance_button,
#paymentinfo #cancelPayment .settinginsurance_button,
#Payment-information #EditPayment .settinginsurance_button,
#Payment-information #cancelPayment .settinginsurance_button {
    width: auto !important;
    min-width: 100px !important;
    margin: 22px 0 0 !important;
}

/* ----- 12. Labels above payment fields ----- */
#paymentinfo label,
#Payment-information label {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .02em !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

/* ----- 13. Payment Stripe footer image — let it shrink nicely
   instead of stretching to full width. ----- */
#paymentinfo img[src*="stripe_payment"] {
    width: auto !important;
    max-width: 220px !important;
    margin-top: 8px !important;
    opacity: .8 !important;
}

/* ----- 14. Card error message (Stripe validation) ----- */
#paymentinfo #card-errors,
#card-errors {
    font-family: var(--cn-font) !important;
    font-size: 12.5px !important;
    color: var(--cn-danger) !important;
    padding: 6px 10px !important;
    background: var(--cn-danger-bg) !important;
    border: 1px solid rgba(220, 38, 38, .25) !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    min-height: 26px !important;
}

    #paymentinfo #card-errors:empty,
    #card-errors:empty {
        display: none !important;
    }

/* ----- 15. Responsive — collapse 4-column groups gracefully ----- */
@media (max-width: 900px) {
    #tabdisplay .dx-tab {
        font-size: 11px !important;
        padding: 12px 10px !important;
        letter-spacing: .08em !important;
    }

        #tabdisplay .dx-tab .dx-tab-text {
            font-size: 11px !important;
        }
}

@media (max-width: 600px) {
    #tabdisplay .dx-tab {
        flex: 1 1 50% !important;
        min-height: 52px !important;
    }

    #tabdisplay #tabs > .tabs-container .dx-tabs {
        flex-wrap: wrap !important;
    }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  SCHEDULE A VISIT — page polish v1                         ║
   ║                                                            ║
   ║  All rules originally lived in <style> at the top of       ║
   ║  ScheduleaVisit.cshtml; they were lifted here so the       ║
   ║  page carries no inline CSS and so the patterns below      ║
   ║  can be reused.                                            ║
   ║                                                            ║
   ║  Reusable primitives (any page can adopt):                 ║
   ║    .hidden, .cn-req, .cn-section + BEM children,           ║
   ║    .cn-tz, .cn-action-row, .cn-segmented(+__label),        ║
   ║    .cn-calendar-wrap (scopes dxScheduler chrome),          ║
   ║    .cn-timeslot-wrap (scopes .date-title + .radio-toolbar) ║
   ║                                                            ║
   ║  Page-scoped (Schedule a Visit only — by element ID):      ║
   ║    #save / #savetop bigger 44px height,                    ║
   ║    #cancel / #canceltop secondary 44px button,             ║
   ║    #error-msg                                              ║
   ║                                                            ║
   ║  Tokens come from :root above — DO NOT redefine here.      ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ---------- Generic helpers ---------- */
.hidden {
    visibility: hidden;
}

.cn-req {
    color: var(--cn-danger);
    font-weight: 700;
    margin-left: 2px;
}

/* ---------- Section card (plain wrapper, distinct from
   `.cn-section-card` which is dxForm-group specific) ---------- */
.cn-section {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 20px;
    margin-bottom: 16px;
    font-family: var(--cn-font);
}

.cn-section__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cn-border);
    flex-wrap: wrap;
}

.cn-section__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .cn-section__icon svg {
        width: 18px;
        height: 18px;
    }

.cn-section__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cn-section__title {
    font-family: var(--cn-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
    line-height: 1.3;
}

.cn-section__sub {
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    margin-top: 2px;
    line-height: 1.4;
}

/* ---------- Read-only patient pill — sits inside .cn-section__head
   (margin-left: auto pushes it to the right of the title block) so
   the user knows whose visit they're rescheduling / editing without
   taking a full-width row. Adopted by Re-schedule Visit; other
   visit pages can opt in by adding this pill to their section
   header next to .cn-section__text. ---------- */
.cn-section__patient {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    background: var(--cn-muted-bg);
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    max-width: 100%;
}

.cn-section__patient-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font);
    font-weight: 700;
    font-size: 11px;
    border: 1px solid rgba(12, 84, 148, .14);
    text-transform: uppercase;
}

.cn-section__patient-text {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.cn-section__patient-name {
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-section__patient-mrn {
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cn-text-2);
    white-space: nowrap;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    /* Section header is in column flow on phones — drop right-align
       so the patient pill sits naturally below the title block. */
    .cn-section__patient {
        margin-left: 0;
    }
}

@media (max-width: 540px) {
    /* Drop the MRN on very narrow screens so the name stays
       readable inside the pill. */
    .cn-section__patient-mrn {
        display: none;
    }
}

/* ---------- Section header modifiers — used alongside
   .cn-section__icon / .cn-section__title to add a "Beta" tag on
   the title, or an actions slot on the right of the header.
   Pair with .cn-section__patient if both are needed. ---------- */
.cn-section__icon--ai {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: var(--cn-warn);
}

.cn-section__beta {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
    font-family: var(--cn-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: 6px;
}

.cn-section__head-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---------- .cn-chip — generic meta chip (datetime, gender, age,
   status, etc.) used inside .cn-meta-row or anywhere a small
   read-only data badge is needed. Modifiers add semantic color. ---------- */
.cn-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.cn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cn-muted-bg);
    border: 1px solid var(--cn-border);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cn-text-2);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

    .cn-chip svg {
        width: 13px;
        height: 13px;
        color: var(--cn-navy);
        flex: 0 0 13px;
    }

    .cn-chip strong {
        color: var(--cn-text);
        font-weight: 700;
    }

a.cn-chip:hover {
    background: var(--cn-navy-50);
    border-color: var(--cn-navy);
    color: var(--cn-navy);
}

.cn-chip--success {
    background: var(--cn-success-bg);
    border-color: rgba(4, 120, 87, .25);
    color: var(--cn-success);
}

    .cn-chip--success svg {
        color: var(--cn-success);
    }

.cn-chip--warn {
    background: var(--cn-warn-bg);
    border-color: rgba(180, 83, 9, .25);
    color: var(--cn-warn);
}

    .cn-chip--warn svg {
        color: var(--cn-warn);
    }

.cn-chip--danger {
    background: var(--cn-danger-bg);
    border-color: rgba(220, 38, 38, .25);
    color: var(--cn-danger);
}

    .cn-chip--danger svg {
        color: var(--cn-danger);
    }

/* ============================================================
   AI INSIGHT — shared chrome for /Visit/AiInsight/<visitId>.
   Promoted from page-scoped <style> so other "AI output" pages
   (e.g. provider/encounter/AiInsight) can adopt the same panel
   without re-declaring CSS.

   - .cn-ai-accordion        — wraps the existing dxAccordion so
                               its single item renders as a card.
   - .cn-ai-head*            — card header row (icon + title + sub)
                               emitted inside dxAccordion's item
                               title template.
   - .cn-ai-output(-wrap)    — styled textarea panel that production
                               fills via /Visit/GetChatGpt ajax;
                               #messagedisplay id preserved.
   - .cn-ai-loading*         — overlay (spinner + label + hint)
                               that sits on top of the textarea
                               while the ajax is in flight.
                               #loading id preserved.
   - .cn-ai-disclaimer       — warn-amber safety footer below the
                               output ("AI may produce inaccurate
                               information — verify before billing").
   ============================================================ */

/* --- dxAccordion presented as a card (single item: ICD & CPT
   Code Recommendations). Title strip is the card header, body
   is the card body. --- */
.cn-ai-accordion .dx-accordion-wrapper {
    background: transparent;
}

.cn-ai-accordion .dx-accordion-item {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius-lg) !important;
    box-shadow: var(--cn-shadow-sm) !important;
    margin-bottom: 16px !important;
    overflow: hidden;
}

.cn-ai-accordion .dx-accordion-item-title {
    padding: 16px 20px !important;
    background: var(--cn-elev) !important;
    border-bottom: 1px solid var(--cn-border) !important;
    cursor: pointer;
    font-family: var(--cn-font) !important;
    min-height: 0 !important;
}

    .cn-ai-accordion .dx-accordion-item-title.dx-state-hover {
        background: #FAFBFD !important;
    }

.cn-ai-accordion .dx-accordion-item-body {
    padding: 18px 20px 20px !important;
    background: var(--cn-elev) !important;
    font-family: var(--cn-font) !important;
}

.cn-ai-accordion .dx-accordion-item-opened .dx-accordion-item-title::before,
.cn-ai-accordion .dx-accordion-item-title::before {
    color: var(--cn-navy) !important;
}

/* Card header row — icon + title block + (Beta pill inside title) */
.cn-ai-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.cn-ai-head__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.cn-ai-head__title {
    font-family: var(--cn-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cn-ai-head__sub {
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    margin-top: 2px;
    line-height: 1.4;
}

/* AI output panel — styled <textarea id="messagedisplay">. */
.cn-ai-output-wrap {
    position: relative;
}

#messagedisplay.cn-ai-output {
    display: block;
    width: 100%;
    min-height: 360px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    background: #FCFCFD;
    padding: 18px 20px;
    font-family: 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--cn-text);
    white-space: pre-wrap;
    resize: vertical;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    #messagedisplay.cn-ai-output:focus {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }

/* Loading overlay (CSS-only spinner + caption) — replaces the
   legacy dxLoadIndicator GIF. Production toggles #loading via
   inline style.display so the existing show/hide JS still works. */
#loading.cn-ai-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(252, 252, 253, .9);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 13px;
    color: var(--cn-text-2);
    font-weight: 500;
}

.cn-ai-loading__spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--cn-navy-100);
    border-top-color: var(--cn-navy);
    animation: cn-ai-spin 800ms linear infinite;
}

@keyframes cn-ai-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.cn-ai-loading__label {
    color: var(--cn-text);
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
}

.cn-ai-loading__hint {
    font-size: 11.5px;
    color: var(--cn-text-3);
}

/* AI safety disclaimer — warn-amber chip below the output panel */
.cn-ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--cn-warn-bg);
    border: 1px solid rgba(180, 83, 9, .25);
    border-radius: var(--cn-radius);
    color: var(--cn-warn);
    font-family: var(--cn-font);
    font-size: 12.5px;
    line-height: 1.5;
}

    .cn-ai-disclaimer svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        color: var(--cn-warn);
        margin-top: 1px;
    }

    .cn-ai-disclaimer strong {
        font-weight: 700;
    }

/* AI Insight — mobile responsive (most CareNiva customers are on phones) */
@media (max-width: 720px) {
    .cn-ai-accordion .dx-accordion-item-title {
        padding: 14px 16px !important;
    }

    .cn-ai-accordion .dx-accordion-item-body {
        padding: 14px 16px 16px !important;
    }

    #messagedisplay.cn-ai-output {
        padding: 14px 16px;
        font-size: 13px;
        min-height: 320px;
    }
}

@media (max-width: 540px) {
    .cn-ai-disclaimer {
        font-size: 12px;
        padding: 10px 12px;
        gap: 8px;
    }
}

@media (max-width: 380px) {
    #messagedisplay.cn-ai-output {
        padding: 12px 14px;
        font-size: 12.5px;
        min-height: 280px;
    }

    .cn-ai-head {
        gap: 10px;
    }
}

/* Field label inside a cn-section — overrides DX's default 40%-width label */
.cn-section .dx-field-label {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .02em !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
}

/* Inputs inside a cn-section (dxSelectBox / dxTextBox / dxDateBox) */
.cn-section .dx-texteditor.dx-editor-filled,
.cn-section .dx-texteditor.dx-editor-outlined,
.cn-section .dx-texteditor {
    background: var(--cn-elev) !important;
    background-color: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 40px !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}

    .cn-section .dx-texteditor::before,
    .cn-section .dx-texteditor::after,
    .cn-section .dx-texteditor-input-container::before,
    .cn-section .dx-texteditor-input-container::after {
        display: none !important;
        content: none !important;
    }

    .cn-section .dx-texteditor:hover {
        border-color: var(--cn-text-3) !important;
    }

    .cn-section .dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

    .cn-section .dx-texteditor.dx-invalid {
        border-color: var(--cn-danger) !important;
    }

.cn-section .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    padding: 9px 12px !important;
    min-height: 38px !important;
}

.cn-section .dx-placeholder,
.cn-section .dx-placeholder::before {
    color: var(--cn-text-3) !important;
    font-style: normal !important;
    font-size: 14px !important;
}

.cn-section .dx-dropdowneditor-icon::before {
    color: var(--cn-text-2) !important;
}

.cn-section .dx-state-focused .dx-dropdowneditor-icon::before {
    color: var(--cn-navy) !important;
}

/* (Removed) `.cn-section .dx-invalid-message-content` — replaced by the
   site-wide rules under VALIDATION MESSAGES (around line 1928). Those
   rules now style every form validation message as plain red text on a
   transparent background, so section cards no longer need a separate
   pink-callout variant. Keeping a single source of truth prevents
   specificity wars and "blank box" rendering bugs. */

/* ---------- Time-zone pill (small reusable info chip) ---------- */
.cn-tz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cn-muted-bg);
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    font-weight: 500;
    margin: 0;
}

    .cn-tz svg {
        width: 13px;
        height: 13px;
        color: var(--cn-navy);
        flex: 0 0 13px;
    }

    .cn-tz strong {
        color: var(--cn-text);
        font-weight: 700;
    }

/* Calendar timezone footer — separates the reused .cn-tz chip (time-zone
   name) and the live clock line from the calendar above. Used by the
   provider Upcoming Visits page. */
.cn-cal-foot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cn-border);
}

.cn-cal-foot__now {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--cn-text-2);
    font-variant-numeric: tabular-nums;
}

/* ---------- Action row (right-aligned button stack) ---------- */
.cn-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Segmented toggle — wrap a dxButtonGroup with
   class="cn-segmented" to get the iOS-style segmented look ---------- */
.cn-segmented-label {
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-text-2);
    letter-spacing: .02em;
    margin-bottom: 6px;
    display: block;
}

.cn-segmented.dx-buttongroup,
.cn-segmented .dx-buttongroup-wrapper {
    border: 1px solid #D1D5DB !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-muted-bg) !important;
    box-shadow: none !important;
}

.cn-segmented .dx-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    height: 38px !important;
    color: var(--cn-text-2) !important;
    font-family: var(--cn-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease !important;
}

    .cn-segmented .dx-button:hover {
        background: var(--cn-navy-50) !important;
        background-color: var(--cn-navy-50) !important;
        color: var(--cn-navy) !important;
    }

    .cn-segmented .dx-button.dx-item-selected,
    .cn-segmented .dx-button.dx-item-selected:hover {
        background: var(--cn-elev) !important;
        background-color: var(--cn-elev) !important;
        color: var(--cn-navy) !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08) !important;
    }

/* ---------- Calendar surface — wrap a dxScheduler container with
   class="cn-calendar-wrap" to get the polished month-view chrome ---------- */
.cn-calendar-wrap {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    overflow: hidden;
}

    .cn-calendar-wrap .dx-scheduler {
        border: 0 !important;
        border-radius: 0 !important;
        font-family: var(--cn-font) !important;
    }

    .cn-calendar-wrap .dx-scheduler-header,
    .cn-calendar-wrap .dx-scheduler-header.dx-widget {
        border: 0 !important;
        background: var(--cn-elev) !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid var(--cn-border) !important;
        border-radius: 0 !important;
        width: 100% !important;
        padding-left: 12px !important;
    }

        .cn-calendar-wrap .dx-scheduler-header .dx-toolbar .dx-toolbar-item-content,
        .cn-calendar-wrap .dx-scheduler-header .dx-toolbar .dx-toolbar-menu-container {
            padding: 0px 6px !important;
        }

    .cn-calendar-wrap .dx-scheduler-navigator {
        padding: 8px 0 !important;
    }

        .cn-calendar-wrap .dx-scheduler-navigator .dx-button {
            background: transparent !important;
            border: 0 !important;
            color: var(--cn-navy) !important;
        }

    .cn-calendar-wrap .dx-scheduler-navigator-caption {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--cn-text) !important;
    }

    .cn-calendar-wrap i.dx-icon.dx-icon-chevronprev,
    .cn-calendar-wrap i.dx-icon.dx-icon-chevronnext {
        color: var(--cn-navy) !important;
    }

    .cn-calendar-wrap .dx-scheduler-header .dx-toolbar .dx-button,
    .cn-calendar-wrap .dx-scheduler-header .dx-toolbar .dx-button .dx-icon,
    .cn-calendar-wrap .dx-scheduler-header .dx-toolbar .dx-scheduler-navigator .dx-buttongroup .dx-button.dx-item-selected,
    .cn-calendar-wrap .dx-scheduler-header .dx-toolbar .dx-scheduler-navigator .dx-buttongroup .dx-button.dx-item-selected .dx-icon {
        color: var(--cn-navy) !important;
    }

    .cn-calendar-wrap .dx-scheduler-navigator-caption.dx-button.dx-button-normal.dx-button-mode-contained {
        pointer-events: none;
    }

    .cn-calendar-wrap .dx-button-has-text .dx-button-content {
        overflow: visible;
    }

    .cn-calendar-wrap .dx-popover-wrapper .dx-overlay-content {
        display: none;
    }

    .cn-calendar-wrap .dx-widget.dx-button.dx-button-mode-text.dx-button-normal.dx-button-has-text.dx-item.dx-buttongroup-item.dx-item-content.dx-buttongroup-item-content.dx-buttongroup-first-item.dx-buttongroup-last-item.dx-shape-standard.dx-dropdownbutton-action.dx-buttongroup-item-has-width {
        display: none;
    }

    .cn-calendar-wrap .dx-scheduler-work-space.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
        background: var(--cn-elev) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-align: center !important;
        color: var(--cn-text) !important;
        border-color: var(--cn-border) !important;
        height: 64px !important;
        transition: background 120ms ease !important;
    }

        .cn-calendar-wrap .dx-scheduler-work-space.dx-scheduler-work-space-month .dx-scheduler-date-table-cell:hover {
            background: var(--cn-navy-50) !important;
            cursor: pointer !important;
        }

    .cn-calendar-wrap .dx-scheduler-work-space.dx-scheduler-work-space-month .dx-scheduler-date-table-current-date {
        color: var(--cn-navy) !important;
        font-weight: 800 !important;
    }

    .cn-calendar-wrap .dx-scheduler-header-panel-cell {
        background: var(--cn-muted-bg) !important;
        color: var(--cn-text-2) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .06em !important;
        text-transform: uppercase !important;
        border-color: var(--cn-border) !important;
        padding: 8px 0 !important;
    }

        .cn-calendar-wrap .dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell {
            color: var(--cn-navy) !important;
            font-weight: 700 !important;
        }

    .cn-calendar-wrap .dx-scheduler-appointment {
        background-color: var(--cn-navy-50) !important;
        color: var(--cn-navy) !important;
        box-shadow: none !important;
    }

    .cn-calendar-wrap .dx-item.dx-scheduler-appointment.dx-scheduler-appointment-horizontal {
        height: 22px !important;
        border-radius: 6px !important;
    }

    .cn-calendar-wrap .dx-scheduler-appointment-title {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-align: center;
    }

    .cn-calendar-wrap .dx-scheduler-work-space-odd-cells.dx-scheduler-work-space.dx-scheduler-work-space-month {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

/* ---------- Time-slot picker — wrap a date header + radio chip grid
   with class="cn-timeslot-wrap"; child .radio-toolbar > input + label
   markup is what the dxScheduler page builds at runtime ---------- */
.cn-timeslot-wrap {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    overflow: hidden;
    min-height: 360px;
}

    .cn-timeslot-wrap .date-title {
        text-align: left !important;
        border-bottom: 1px solid var(--cn-border) !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--cn-text) !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .cn-timeslot-wrap .date-title:not(:empty)::before {
            content: '';
            width: 16px;
            height: 16px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
            background-repeat: no-repeat;
            background-size: contain;
            flex: 0 0 16px;
        }

    .cn-timeslot-wrap #time-slot {
        padding: 0;
    }

    .cn-timeslot-wrap #time-slot-details {
        padding: 14px 16px 18px;
    }

    .cn-timeslot-wrap #newslot {
        margin: 0;
        row-gap: 8px;
    }

        .cn-timeslot-wrap #newslot.row > [class*="col-"] {
            padding: 0 4px;
        }

    .cn-timeslot-wrap .radio-toolbar {
        margin-bottom: 0;
    }

        .cn-timeslot-wrap .radio-toolbar input[type="radio"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            width: 0;
            height: 0;
        }

        .cn-timeslot-wrap .radio-toolbar label.box-shadow {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 100% !important;
            height: 40px !important;
            padding: 0 8px !important;
            margin: 0 !important;
            background: var(--cn-elev) !important;
            border: 1px solid var(--cn-border-2) !important;
            border-radius: var(--cn-radius) !important;
            color: var(--cn-text) !important;
            font-family: var(--cn-font) !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            cursor: pointer !important;
            box-shadow: none !important;
            transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
        }

            .cn-timeslot-wrap .radio-toolbar label.box-shadow:hover {
                background: var(--cn-navy-50) !important;
                border-color: var(--cn-navy) !important;
                color: var(--cn-navy) !important;
            }

        .cn-timeslot-wrap .radio-toolbar input[type="radio"]:checked + label.box-shadow {
            background: var(--cn-navy) !important;
            border-color: var(--cn-navy) !important;
            color: #FFFFFF !important;
            box-shadow: var(--cn-focus-ring) !important;
        }

/* ---------- Time-slot head + count pill + legend + empty state
   Modern v2-pattern primitives that pair with the existing
   .cn-timeslot-wrap / .cn-calendar-wrap to give the calendar +
   time-slot panel its full polish. Adopted by ScheduleaVisit;
   other scheduling pages can opt in later by wrapping their
   .date-title <h2> in .cn-timeslot__head and swapping the inline
   "no appointments" red <p> for .cn-timeslot__empty. ---------- */
.cn-timeslot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cn-border);
}
    /* Hide the whole head row until JS sets a date — keeps the panel
   chrome clean while the user hasn't clicked a day yet. Uses
   :has() (modern browsers) on #current-date so this works whether
   the existing JS keeps or removes the .date-title class. */
    .cn-timeslot__head:has(#current-date:empty) {
        display: none;
    }
    /* Inside .cn-timeslot__head the existing .date-title h2 becomes the
   date label — drop its standalone border + padding (the parent
   .cn-timeslot__head owns both now). */
    .cn-timeslot__head .date-title {
        border-bottom: 0 !important;
        padding: 0 !important;
    }

.cn-timeslot__count {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .cn-timeslot__count:empty {
        display: none;
    }

/* Empty state — shown inside #newslot when the day has no openings.
   Centers the icon + heading + caption block; full-width so it
   reads correctly whether the parent is grid (v2) or Bootstrap row
   (legacy slot markup). */
.cn-timeslot__empty {
    width: 100%;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 16px;
    text-align: center;
    color: var(--cn-text-2);
    font-size: 13px;
}

    .cn-timeslot__empty svg {
        width: 32px;
        height: 32px;
        color: var(--cn-text-3);
    }

    .cn-timeslot__empty strong {
        color: var(--cn-text);
        font-weight: 600;
    }

/* ---------- Modern v2 slot grid + .cn-slot tile
   Parallel to the legacy .radio-toolbar > input + label.box-shadow
   chrome (kept in publish.css for other scheduling pages that still
   use the Bootstrap row markup). New pages use this 2-col grid +
   button-style .cn-slot tile, matching schedule-a-visit-v2 mockup.
   .cn-timeslot__body intentionally has NO padding — when nested
   inside the existing .cn-timeslot-wrap > #time-slot-details, the
   wrapper supplies padding (so the two don't stack). ---------- */
.cn-timeslot__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    /* Cap the visible slot column at ~10 tiles tall, then scroll —
       prevents a long day's openings from stretching the panel past
       the calendar height. On phones the cap lifts (see mobile
       override below) so the user can flick-scroll the whole page
       naturally. */
    max-height: 460px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .cn-timeslot__body {
        max-height: none;
    }
}

.cn-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

    .cn-slot:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy);
    }

    .cn-slot.is-selected {
        background: var(--cn-navy);
        border-color: var(--cn-navy);
        color: #FFFFFF;
        box-shadow: var(--cn-focus-ring);
    }

    .cn-slot.is-disabled {
        background: var(--cn-muted-bg);
        color: var(--cn-text-3);
        border-color: var(--cn-border);
        cursor: not-allowed;
        text-decoration: line-through;
    }

        .cn-slot.is-disabled:hover {
            background: var(--cn-muted-bg);
            color: var(--cn-text-3);
            border-color: var(--cn-border);
        }

/* Legend strip under the calendar inside .cn-calendar-wrap.
   Three swatches: Today / Has openings / Selected. */
.cn-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--cn-border);
    background: var(--cn-muted-bg);
    font-size: 12px;
    color: var(--cn-text-2);
}

.cn-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cn-legend__sw {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--cn-border-2);
    background: var(--cn-elev);
}

.cn-legend__sw--avail {
    background: var(--cn-navy-50);
    border-color: var(--cn-navy-100);
}

.cn-legend__sw--selected {
    background: var(--cn-navy);
    border-color: var(--cn-navy);
}

.cn-legend__sw--today {
    background: #FFFFFF;
    border: 1px solid var(--cn-navy);
}

/* Semantic status swatches (e.g. appointment status legend) */
.cn-legend__sw--success {
    background: var(--cn-success);
    border-color: var(--cn-success);
}

.cn-legend__sw--warn {
    background: var(--cn-warn);
    border-color: var(--cn-warn);
}

.cn-legend__sw--muted {
    background: var(--cn-muted);
    border-color: var(--cn-muted);
}

/* ---------- Schedule a Visit — page-scoped (ID selectors) ---------- */
/* Save / Cancel use the shared `.cn-savebar` + `.cn-cancel-btn` +
   `#Save` pattern (see the STICKY SAVE BAR block above) — same as
   CreateProvider. No per-page button overrides needed. */
/* Inline date/time error message */
#error-msg {
    color: var(--cn-danger) !important;
    font-size: 13px;
    font-weight: 500;
    margin: 8px 0 0 !important;
}

/* ---------- Mobile — Schedule a Visit + cn-* primitives ---------- */
@media (max-width: 992px) {
    .cn-calendar-wrap .dx-scheduler-appointment-title {
        font-size: 10px;
        margin: 2px -2px;
    }
}

@media (max-width: 768px) {
    .cn-section {
        padding: 16px;
    }

    .cn-section__head {
        padding-bottom: 12px;
        margin-bottom: 12px;
        gap: 10px;
    }

    .cn-section__sub {
        font-size: 12px;
    }

    .cn-action-row {
        justify-content: stretch;
    }

        .cn-action-row > div {
            flex: 1 1 calc(50% - 5px);
        }

    .cn-segmented {
        max-width: 100%;
        width: 100%;
    }
    /* Time-zone pill — the inline `margin-left:auto` keeps it on the
       same flex row as the icon + title, which crushes .cn-section__text
       (flex:1, min-width:0) and forces the title to word-wrap vertically
       on narrow phones. Wrap the pill to its own full-width row instead. */
    .cn-section__head .cn-tz {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Day cells — taller so date number + a 2-line slot-count pill
       both fit cleanly. Date anchors to the top. */
    .cn-calendar-wrap .dx-scheduler-work-space.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
        height: 72px !important;
        font-size: 12px !important;
        padding-top: 4px !important;
        vertical-align: top !important;
    }

    .cn-calendar-wrap .dx-scheduler-navigator-caption {
        font-size: 14px !important;
    }
    /* Slot-count pill — 2 lines tall so values like "34 Times" render
       FULLY (line 1: "34", line 2: "Times"). Tabular nums + tight
       letter-spacing keeps the digits crisp; word-break wraps after
       the number rather than mid-word. */
    .cn-calendar-wrap .dx-item.dx-scheduler-appointment.dx-scheduler-appointment-horizontal {
        height: 28px !important;
        border-radius: 5px !important;
        margin-top: 2px !important;
        padding: 2px 3px !important;
        background-color: var(--cn-navy-50) !important;
        color: var(--cn-navy) !important;
    }

    .cn-calendar-wrap .dx-scheduler-appointment-title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        overflow: hidden !important;
        color: var(--cn-navy) !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: -.02em !important;
    }
    /* Time-zone pill stays full-width on phones (768px rule already
       applies, but reaffirmed here so any descendant tweak wins). */
    .cn-section__head .cn-tz {
        font-size: 12px;
        padding: 4px 10px;
    }

        .cn-section__head .cn-tz svg {
            width: 12px;
            height: 12px;
        }
}

@media (max-width: 325px) {
    /* Extreme narrow screens (< 325px) — even a 2-line pill is too
       cramped; drop to a thin indicator bar so days with availability
       stay distinguishable. */
    .cn-calendar-wrap .dx-item.dx-scheduler-appointment.dx-scheduler-appointment-horizontal {
        height: 6px !important;
        border-radius: 3px !important;
        padding: 0 !important;
    }

    .cn-calendar-wrap .dx-scheduler-appointment-title {
        display: none !important;
    }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  VISITS (Index) — page polish v1                           ║
   ║                                                            ║
   ║  All rules originally lived in <style> at the top of       ║
   ║  features/visit/Index.cshtml; they were lifted here so     ║
   ║  the page carries no inline CSS and so the patterns        ║
   ║  below can be reused.                                      ║
   ║                                                            ║
   ║  Reusable primitives (any page can adopt):                 ║
   ║    .cn-filter-grid — responsive CSS-grid filter row        ║
   ║    .cn-filter-grid .dx-form / .dx-texteditor — input reskin║
   ║    (no toolbar primitives added — Visit/Index uses DX's    ║
   ║     built-in .dx-datagrid-header-panel for search + group) ║
   ║                                                            ║
   ║  Page-scoped (Visits only — by element ID):                ║
   ║    #default-contained-Reset (outlined secondary override)  ║
   ║    #VisitList cell content polish (3-dot, status, type)    ║
   ║                                                            ║
   ║  Tokens come from :root above — DO NOT redefine here.      ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ---------- Filter grid (responsive 5-col → 1-col) ---------- */
.cn-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px 14px;
    align-items: end;
}

.cn-filter-grid__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 1px;
    flex-wrap: wrap;
}

@media (max-width: 1000px) {
    .cn-filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cn-filter-grid__actions {
        grid-column: span 2;
        justify-content: flex-end;
    }
}

@media (max-width: 540px) {
    .cn-filter-grid {
        grid-template-columns: 1fr;
    }

    .cn-filter-grid__actions {
        grid-column: span 1;
    }

        .cn-filter-grid__actions > div {
            flex: 1 1 calc(50% - 4px);
        }
}

/* Reskin every dxForm inside the filter grid (each filter is its own
   dxForm in production: #visits-from, #visits-to, #status, #patientform) */
.cn-filter-grid .dx-form {
    font-family: var(--cn-font);
}

.cn-filter-grid .dx-field-item {
    padding: 0 !important;
}

/* dxForm box-item layout guard — each filter (#visits-from, #visits-to,
   #status, #patientform) is its own single-field dxForm; DX gives box
   items a default min-width that would stop them shrinking inside the
   responsive minmax(0,1fr) grid cells. Migrated from the page's inline
   <style> (was global there); scoped to the filter grid so it can't leak. */
.cn-filter-grid .dx-item.dx-box-item {
    min-width: unset !important;
}

.cn-filter-grid .dx-field-item-label-text {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .02em !important;
}

.cn-filter-grid .dx-texteditor.dx-editor-filled,
.cn-filter-grid .dx-texteditor.dx-editor-outlined,
.cn-filter-grid .dx-texteditor {
    background: var(--cn-elev) !important;
    background-color: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 40px !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}

    .cn-filter-grid .dx-texteditor::before,
    .cn-filter-grid .dx-texteditor::after,
    .cn-filter-grid .dx-texteditor-input-container::before,
    .cn-filter-grid .dx-texteditor-input-container::after {
        display: none !important;
        content: none !important;
    }

    .cn-filter-grid .dx-texteditor:hover {
        border-color: var(--cn-text-3) !important;
    }

    .cn-filter-grid .dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

.cn-filter-grid .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    padding: 9px 12px !important;
    min-height: 38px !important;
}

.cn-filter-grid .dx-placeholder,
.cn-filter-grid .dx-placeholder::before {
    color: var(--cn-text-3) !important;
    font-style: normal !important;
    font-size: 14px !important;
}

.cn-filter-grid .dx-dropdowneditor-icon::before {
    color: var(--cn-text-2) !important;
}

.cn-filter-grid .dx-state-focused .dx-dropdowneditor-icon::before {
    color: var(--cn-navy) !important;
}

/* (Toolbar title/count add-ons removed — Visit/Index now relies on
   DX's built-in `.dx-datagrid-header-panel` which contains the
   search box + group panel and gets polished by the generic rules
   in the dxDataGrid chrome section above.) */

/* ---------- Visits — page-scoped (#default-contained-Reset, #VisitList) ---------- */
/* Search button uses the design-system primary; Reset is dxButton type="default"
   in production JS but visually should be a secondary outline so the two read as
   primary + secondary. Override Reset only. */
#default-contained-Reset .dx-button.dx-button-default,
#default-contained-Reset .dx-button {
    background: var(--cn-elev) !important;
    background-color: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 96px !important;
    box-shadow: none !important;
}

    #default-contained-Reset .dx-button:hover {
        background: var(--cn-muted-bg) !important;
        background-color: var(--cn-muted-bg) !important;
        border-color: var(--cn-text-3) !important;
    }

    #default-contained-Reset .dx-button .dx-button-text {
        color: var(--cn-text) !important;
        font-weight: 600 !important;
    }
/* Match Search to the same 40px height as Reset for visual symmetry */
#default-contained-search .dx-button.dx-button-default {
    height: 40px !important;
    min-height: 40px !important;
    min-width: 96px !important;
}

/* ---------- VisitList grid — cell content polish ---------- */
/* (3-dot row trigger is handled by the generic `.cn-grid-card .dx-data-row td > #click | #clicks`
   primitive in section 7b above — same look used by Practice Patients + Providers.) */

/* Status cell — now rendered via cellTemplate as `.cn-pill cn-pill--<variant>`;
   no extra page CSS needed. (Pill variants live in section 8 above.) */

/* Visit Type cell — rendered via cellTemplate as `.cn-vtype` + `.cn-vtype__icon`.
   Primitive lives below so any future page can reuse the icon-tile look. */
.cn-vtype {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
}

.cn-vtype__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

    .cn-vtype__icon svg {
        width: 14px;
        height: 14px;
    }

.cn-vtype__icon--inperson {
    background: rgba(209, 156, 70, .16);
    color: var(--cn-gold);
}

/* ---- Visit-list grid shared cells (Upcoming Visits / visit family) ----
   Reusable primitives mirrored from the providerupcomingvisit-v2 mockup.
   No page scope — any visit grid can reuse them. */

/* Date / Time cell — stacked day (bold) + time (mono) */
.cn-when {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.3;
}

.cn-when__d {
    font-weight: 600;
    color: var(--cn-text);
}

.cn-when__t {
    font-family: var(--cn-mono);
    font-size: 12px;
    color: var(--cn-text-2);
    font-variant-numeric: tabular-nums;
}

/* Join button (telehealth) + disabled / in-person variant */
.cn-join {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: var(--cn-navy);
    color: #fff;
    border: 1px solid var(--cn-navy);
    border-radius: var(--cn-radius);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

    .cn-join:hover {
        background: var(--cn-navy-2);
        color: #fff;
    }

    .cn-join svg {
        width: 14px;
        height: 14px;
    }

.cn-join--off {
    background: var(--cn-muted-bg);
    color: var(--cn-text-3);
    border-color: var(--cn-border);
    cursor: default;
}

    .cn-join--off:hover {
        background: var(--cn-muted-bg);
        color: var(--cn-text-3);
    }

/* Ghost row-action icon button (e.g. open encounter) */
.cn-act {
    width: 32px;
    height: 32px;
    border-radius: var(--cn-radius);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cn-navy);
    cursor: pointer;
    background: transparent;
    text-decoration: none;
}

    .cn-act:hover {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        border-color: var(--cn-border);
    }

    .cn-act svg {
        width: 18px;
        height: 18px;
    }

    .cn-act.is-disabled {
        color: var(--cn-text-3);
        opacity: .5;
        cursor: default;
    }

        .cn-act.is-disabled:hover {
            background: transparent;
            border-color: transparent;
        }

/* Date/Time cell — keep tabular numerics so dates align in a stack */
#VisitList .dx-data-row > td[aria-describedby*="Scheduled"],
#VisitList .dx-data-row > td:nth-child(5) {
    font-variant-numeric: tabular-nums;
}

/* dxPopover (hover preview of the truncated Reason column) */
#popup.dx-popover-wrapper .dx-overlay-content,
.dx-popover .dx-overlay-content {
    border-radius: var(--cn-radius) !important;
    box-shadow: var(--cn-shadow-md) !important;
    border: 1px solid var(--cn-border) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    /* Tighter filter grid on phones */
    .cn-filter-grid {
        gap: 10px;
    }
    /* Let the grid scroll horizontally instead of squishing on narrow screens */
    .cn-grid-card #VisitList .dx-datagrid-rowsview {
        overflow-x: auto !important;
    }
    /* Group panel mobile hide is now handled by the shared design-
       system rule at publish.css line ~2386 (`.cn-grid-card
       .dx-datagrid-group-panel` @media max-width:540px) — no
       per-page rule needed here. */
}

/* ════════════════════════════════════════════════════════════
   SIGN PACKAGES   (/signpackage/signpackages)
   Practice-admin Sign Packages list + Create New Sign Package
   form. Reuses the shared design-system primitives — .cn-back,
   .cn-area, .cn-title, .cn-grid-card, plus :root tokens — so the
   grid chrome, crumb row, and H1 all match Visit/Index and the
   rest of the family. Page-specific bits below are scoped via
   :has(#signpackageslist) so nothing leaks to other views.

   Section layout (top → bottom):
     1. Legacy functional helpers (preserved from inline style)
     2. Master-detail panel inset (SignPackages-only)
     3. Title row + IP chip
     4. Segmented tab pills (.pharmacy-tabs)
     5. List card extras (.cn-grid-toolbar, .cn-grid-foot)
     6. Create form card (.cn-form-card and children)
     7. dxEditor polish (#provider, #patientname, #duedate)
     8. dxButton polish (#btnsave, #btnsaveandsend)
     9. Mobile overrides (single @media block at end)
   ════════════════════════════════════════════════════════════ */

/* ----- 1. Legacy functional helpers (preserved from original
   inline <style> block; ported here so the .cshtml stays clean) ----- */
#main-content:has(#signpackageslist) .iconcolor {
    color: var(--cn-navy) !important;
}

#main-content:has(#signpackageslist) .pointer {
    cursor: pointer;
}

#main-content:has(#signpackageslist) .readonly {
    -webkit-user-modify: read-only;
    pointer-events: none;
    opacity: .55;
}

#main-content:has(#signpackageslist) .dx-select-checkbox.dx-datagrid-checkbox-size.dx-show-invalid-badge.dx-checkbox.dx-widget.dx-state-disabled.dx-checkbox-checked,
#main-content:has(#signpackageslist) .dx-checkbox.dx-state-disabled,
#main-content:has(#signpackageslist) .dx-checkbox.dx-state-readonly {
    display: none;
}

#main-content:has(#signpackageslist) i.dx-icon.dx-icon-edit {
    color: var(--cn-navy);
    font-size: 18px;
}

#main-content:has(#signpackageslist) i.dx-icon.fa.fa-envelope-o {
    color: var(--cn-navy);
    font-size: 18px;
}

/* Group panel mobile hide is now handled by the shared design-
   system rule at publish.css line ~2386 (`.cn-grid-card
   .dx-datagrid-group-panel` @media max-width:540px) — no
   SignPackages-specific rule needed here. */

/* ----- 2. Master-detail panel inset (SignPackages-only — the main
   list grid expands inline to show signed documents). Visit/Index
   doesn't use this, so it isn't in the shared .cn-grid-card rules. ----- */
.cn-grid-card #signpackageslist .dx-master-detail-row > .dx-master-detail-cell {
    background: #FAFBFC !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--cn-border) !important;
}

/* ----- 3. Title row — H1 on the left, IP chip on the right.
   Mirrors the signpackages-v2 mockup's hero. ----- */
#main-content:has(#signpackageslist) .cn-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

#main-content:has(#signpackageslist) .cn-title-row__text {
    min-width: 0;
    flex: 1;
}
/* Reset bare .cn-title / .cn-subtitle margins inside the row so they
   sit cleanly against each other instead of relying on the stock
   -14px tie-in margin .cn-subtitle uses on solo pages. */
#main-content:has(#signpackageslist) .cn-title-row .cn-title {
    margin: 4px 0 4px;
}

#main-content:has(#signpackageslist) .cn-title-row .cn-subtitle {
    margin: 2px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* IP chip — sits on the right of the title row. */
#main-content:has(#signpackageslist) .cn-ip-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cn-text-2);
    flex: 0 0 auto;
    align-self: center;
}

#main-content:has(#signpackageslist) .cn-ip-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cn-success);
    box-shadow: 0 0 0 3px rgba(4, 120, 87, .15);
    flex: 0 0 6px;
}

#main-content:has(#signpackageslist) .cn-ip-chip__label {
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cn-text-2);
}

#main-content:has(#signpackageslist) .cn-ip-chip__value {
    font-family: var(--cn-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--cn-text);
    font-variant-numeric: tabular-nums;
}

/* ----- 4. Segmented tab pills (.pharmacy-tabs .nav-link) -----
   The original HTML wraps each tab in its own .col-lg-4. We override
   Bootstrap row/col widths via CSS to pack them into a single
   rounded segmented control without touching markup. */
#main-content:has(#signpackageslist) .row:has(> div > .pharmacy-tabs),
#main-content.cn-page-locations .row:has(> div > .pharmacy-tabs) {
    display: inline-flex;
    flex-wrap: nowrap;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px;
    padding: 4px;
    gap: 4px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    max-width: 100%;
}

    #main-content:has(#signpackageslist) .row:has(> div > .pharmacy-tabs) > [class*="col-"],
    #main-content.cn-page-locations .row:has(> div > .pharmacy-tabs) > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
    }

#main-content:has(#signpackageslist) .pharmacy-tabs,
#main-content.cn-page-locations .pharmacy-tabs {
    border-bottom: 0;
    margin: 0;
}

    #main-content:has(#signpackageslist) .pharmacy-tabs .nav-item,
    #main-content.cn-page-locations .pharmacy-tabs .nav-item {
        width: 100%;
    }

    #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link,
    #main-content.cn-page-locations .pharmacy-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 44px;
        min-height: 44px;
        padding: 0 18px;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: var(--cn-radius) !important;
        box-shadow: none !important;
        color: var(--cn-text-2) !important;
        cursor: pointer;
        white-space: nowrap;
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }

        #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link h3,
        #main-content.cn-page-locations .pharmacy-tabs .nav-link h3 {
            margin: 0;
            font-size: 13.5px;
            font-weight: 600;
            letter-spacing: 0;
            color: inherit;
            text-transform: none;
            line-height: 1.2;
        }

        /* Icon glyph before each label via inline SVG mask (no images). */
        #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link::before,
        #main-content.cn-page-locations .pharmacy-tabs .nav-link::before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            background: currentColor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
        }

/* Per-tab icon mask. SignPackages uses #btn_signpackageslist /
   #btn_createnewsignpackage; Locations uses #list-tab / #add-tab.
   Both share the same list + plus icons. */
#main-content:has(#signpackageslist) #btn_signpackageslist::before,
#main-content.cn-page-locations #list-tab::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
}

#main-content:has(#signpackageslist) #btn_createnewsignpackage::before,
#main-content.cn-page-locations #add-tab::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

#main-content:has(#signpackageslist) .pharmacy-tabs .nav-link:hover,
#main-content.cn-page-locations .pharmacy-tabs .nav-link:hover {
    background: var(--cn-navy-50) !important;
    color: var(--cn-navy) !important;
}

#main-content:has(#signpackageslist) .pharmacy-tabs .nav-link.active,
#main-content.cn-page-locations .pharmacy-tabs .nav-link.active {
    background: var(--cn-navy) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(12, 84, 148, .18) !important;
}

    #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link.active h3,
    #main-content.cn-page-locations .pharmacy-tabs .nav-link.active h3 {
        color: #fff !important;
    }

/* The legacy .box-shadow Bootstrap utility class would double-shadow
   the pill; suppress here, restore the soft glow only on active. */
#main-content:has(#signpackageslist) .pharmacy-tabs .nav-link.box-shadow,
#main-content.cn-page-locations .pharmacy-tabs .nav-link.box-shadow {
    box-shadow: none !important;
}

    #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link.box-shadow.active,
    #main-content.cn-page-locations .pharmacy-tabs .nav-link.box-shadow.active {
        box-shadow: 0 1px 2px rgba(12, 84, 148, .18) !important;
    }

/* ----- 5. List card extras — empty spacer hide, toolbar, footer ----- */
#main-content:has(#signpackageslist) #div_signpackageslist > h3.strong {
    display: none;
}

#main-content:has(#signpackageslist) .tab-content {
    margin-top: 8px;
}

#main-content:has(#signpackageslist) .cn-grid-card .cn-grid-toolbar {
    padding: 14px 16px;
}

@media (min-width: 640px) {
    #main-content:has(#signpackageslist) .cn-grid-card .cn-grid-toolbar {
        padding: 16px 20px;
    }
}

#main-content:has(#signpackageslist) .cn-grid-toolbar__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

    #main-content:has(#signpackageslist) .cn-grid-toolbar__title h2 {
        margin: 0;
        font-family: var(--cn-font);
        font-size: 15px;
        font-weight: 700;
        color: var(--cn-text);
        letter-spacing: -.005em;
        line-height: 1.3;
    }

    #main-content:has(#signpackageslist) .cn-grid-toolbar__title p {
        margin: 2px 0 0;
        font-family: var(--cn-font);
        font-size: 12.5px;
        color: var(--cn-text-2);
        line-height: 1.45;
    }

#main-content:has(#signpackageslist) .cn-grid-card .cn-grid-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--cn-border);
    background: #FAFBFC;
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.4;
}

@media (min-width: 640px) {
    #main-content:has(#signpackageslist) .cn-grid-card .cn-grid-foot {
        padding: 12px 20px;
    }
}

#main-content:has(#signpackageslist) .cn-grid-foot svg {
    width: 14px;
    height: 14px;
    color: var(--cn-text-3);
    flex: 0 0 14px;
}

#main-content:has(#signpackageslist) .cn-grid-foot strong {
    font-family: var(--cn-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-weight: 600;
    color: var(--cn-text);
    margin: 0 2px;
}

/* ----- 6. Create form card (.cn-form-card and children) -----
   The <form> itself carries .cn-form-card (the visible card); the
   .tab-pane is just a Bootstrap layout wrapper. */
#main-content:has(#signpackageslist) #div_createnewsignpackage .cn-form-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 18px;
}

@media (min-width: 640px) {
    #main-content:has(#signpackageslist) #div_createnewsignpackage .cn-form-card {
        padding: 22px;
    }
}

/* Form-card head: icon tile + title + subtitle. */
#main-content:has(#signpackageslist) .cn-form-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cn-border);
    flex-wrap: wrap;
}

#main-content:has(#signpackageslist) .cn-form-card__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content:has(#signpackageslist) .cn-form-card__icon svg {
        width: 18px;
        height: 18px;
    }

#main-content:has(#signpackageslist) .cn-form-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

#main-content:has(#signpackageslist) .cn-form-card__title {
    font-family: var(--cn-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
    line-height: 1.25;
}

#main-content:has(#signpackageslist) .cn-form-card__sub {
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cn-text-2);
    margin-top: 2px;
    line-height: 1.45;
}

/* Field grid (Provider | Patient | Due Date). */
#main-content:has(#signpackageslist) .cn-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 720px) {
    #main-content:has(#signpackageslist) .cn-form-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 200px);
        gap: 14px 16px;
    }
}

#main-content:has(#signpackageslist) .cn-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#main-content:has(#signpackageslist) .cn-field__label {
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-text-2);
    letter-spacing: .02em;
    margin: 0 0 6px;
    padding: 0;
}

#main-content:has(#signpackageslist) .cn-req {
    color: var(--cn-danger);
    font-weight: 700;
    margin-left: 2px;
}

/* Section divider (single rule for the stock <hr> + .cn-divider). */
#main-content:has(#signpackageslist) #div_createnewsignpackage hr,
#main-content:has(#signpackageslist) .cn-form-card .cn-divider {
    border: 0;
    border-top: 1px solid var(--cn-border);
    margin: 18px 0 16px;
}

/* Documents picker — labeled inner card. */
#main-content:has(#signpackageslist) .cn-docs {
    margin-top: 4px;
}

#main-content:has(#signpackageslist) .cn-docs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

    #main-content:has(#signpackageslist) .cn-docs__head h3 {
        margin: 0;
        font-family: var(--cn-font);
        font-size: 13.5px;
        font-weight: 700;
        color: var(--cn-text);
        letter-spacing: -.005em;
        line-height: 1.3;
    }

#main-content:has(#signpackageslist) .cn-docs__hint {
    font-family: var(--cn-font);
    font-size: 11.5px;
    color: var(--cn-text-2);
}

/* Validation chip (#diviagree) — markup includes real <svg>, no
   pseudo-glyph hacks needed. */
#main-content:has(#signpackageslist) #diviagree.cn-form-error {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 8px 12px;
    background: var(--cn-danger-bg);
    border: 1px solid rgba(220, 38, 38, .2);
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-danger);
    line-height: 1.4;
}

    #main-content:has(#signpackageslist) #diviagree.cn-form-error svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

/* Form actions footer (lock-icon hint + Save/Save&Send buttons). */
#main-content:has(#signpackageslist) .cn-form-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cn-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#main-content:has(#signpackageslist) .cn-form-actions__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cn-text-2);
    line-height: 1.4;
    min-width: 0;
    flex: 1;
}

    #main-content:has(#signpackageslist) .cn-form-actions__hint svg {
        width: 14px;
        height: 14px;
        color: var(--cn-text-3);
        flex: 0 0 14px;
    }

#main-content:has(#signpackageslist) .cn-form-actions__buttons {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ----- 7. dxEditor polish — Provider / Patient / Due Date ----- */
#main-content:has(#signpackageslist) #provider.dx-texteditor,
#main-content:has(#signpackageslist) #patientname.dx-texteditor,
#main-content:has(#signpackageslist) #duedate.dx-texteditor,
#main-content:has(#signpackageslist) #provider .dx-texteditor,
#main-content:has(#signpackageslist) #patientname .dx-texteditor,
#main-content:has(#signpackageslist) #duedate .dx-texteditor {
    background: #F8FAFC !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    min-height: 42px !important;
}

    #main-content:has(#signpackageslist) #provider.dx-texteditor::before,
    #main-content:has(#signpackageslist) #provider.dx-texteditor::after,
    #main-content:has(#signpackageslist) #patientname.dx-texteditor::before,
    #main-content:has(#signpackageslist) #patientname.dx-texteditor::after,
    #main-content:has(#signpackageslist) #duedate.dx-texteditor::before,
    #main-content:has(#signpackageslist) #duedate.dx-texteditor::after {
        display: none !important;
        content: none !important;
    }

    #main-content:has(#signpackageslist) #provider.dx-texteditor.dx-state-focused,
    #main-content:has(#signpackageslist) #patientname.dx-texteditor.dx-state-focused,
    #main-content:has(#signpackageslist) #duedate.dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

#main-content:has(#signpackageslist) #provider .dx-texteditor-input,
#main-content:has(#signpackageslist) #patientname .dx-texteditor-input,
#main-content:has(#signpackageslist) #duedate .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    padding: 9px 12px !important;
    min-height: 38px !important;
}

/* ----- 8. Save / Save & Send buttons ----- */
#main-content:has(#signpackageslist) .cn-form-actions__buttons > #btnsave,
#main-content:has(#signpackageslist) .cn-form-actions__buttons > #btnsaveandsend {
    display: inline-flex;
    vertical-align: middle;
    margin: 0;
}

/* Shared dxButton chrome so the two pills visually balance. */
#main-content:has(#signpackageslist) #btnsave.dx-button,
#main-content:has(#signpackageslist) #btnsaveandsend.dx-button {
    height: 44px !important;
    min-height: 44px !important;
    min-width: 140px !important;
    padding: 0 18px !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: var(--cn-shadow-sm) !important;
    line-height: 1;
}

    #main-content:has(#signpackageslist) #btnsave.dx-button .dx-button-content,
    #main-content:has(#signpackageslist) #btnsaveandsend.dx-button .dx-button-content {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 !important;
        width: 100%;
    }

    #main-content:has(#signpackageslist) #btnsave.dx-button .dx-button-text,
    #main-content:has(#signpackageslist) #btnsaveandsend.dx-button .dx-button-text {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0;
    }

    #main-content:has(#signpackageslist) #btnsave.dx-button .dx-icon,
    #main-content:has(#signpackageslist) #btnsaveandsend.dx-button .dx-icon {
        font-size: 14px !important;
        line-height: 1;
        margin: 0 !important;
    }

/* Save (outlined secondary) */
#main-content:has(#signpackageslist) #btnsave.dx-button {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    box-shadow: none !important;
}

    #main-content:has(#signpackageslist) #btnsave.dx-button:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

    #main-content:has(#signpackageslist) #btnsave .dx-button-text,
    #main-content:has(#signpackageslist) #btnsave.dx-button .dx-icon {
        color: var(--cn-navy) !important;
    }

/* Save & Send (filled navy primary) */
#main-content:has(#signpackageslist) #btnsaveandsend.dx-button {
    background: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
}

    #main-content:has(#signpackageslist) #btnsaveandsend.dx-button:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
    }

    #main-content:has(#signpackageslist) #btnsaveandsend .dx-button-text,
    #main-content:has(#signpackageslist) #btnsaveandsend.dx-button .dx-icon {
        color: #fff !important;
    }

/* ════════════════════════════════════════════════════════════
   9. Mobile overrides — single @media block covering every
      mobile-specific tweak for this page (no scattered MQs).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {

    /* Bootstrap .row negative margins can poke past the container's
       padding on phones — clamp them so nothing horizontally overflows. */
    #main-content:has(#signpackageslist) #section-content > .container,
    #main-content:has(#signpackageslist) #section-content > .container-fluid {
        overflow-x: hidden;
    }

    /* Title row stays one line: H1 fills, IP chip compacts. */
    #main-content:has(#signpackageslist) .cn-title-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    #main-content:has(#signpackageslist) .cn-title-row__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    #main-content:has(#signpackageslist) .cn-title-row .cn-title {
        font-size: 19px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }

    #main-content:has(#signpackageslist) .cn-ip-chip {
        padding: 4px 8px;
        font-size: 10.5px;
        gap: 5px;
    }

    #main-content:has(#signpackageslist) .cn-ip-chip__label {
        font-size: 10px;
    }

    #main-content:has(#signpackageslist) .cn-ip-chip__value {
        font-size: 11px;
    }

    /* Segmented tab control: tabs STACK VERTICALLY on phones — each
       pill takes the full container width on its own row. This matches
       the v2 mockup screenshot and avoids the "Create New Sign Package"
       label getting cramped into a 50%-wide column. */
    #main-content:has(#signpackageslist) .row:has(> div > .pharmacy-tabs),
    #main-content.cn-page-locations .row:has(> div > .pharmacy-tabs) {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 4px;
    }

        #main-content:has(#signpackageslist) .row:has(> div > .pharmacy-tabs) > [class*="col-"],
        #main-content.cn-page-locations .row:has(> div > .pharmacy-tabs) > [class*="col-"] {
            display: block;
            width: 100%;
            max-width: 100%;
            flex: 0 0 auto;
            min-width: 0;
            margin: 0 !important;
        }

    #main-content:has(#signpackageslist) .pharmacy-tabs,
    #main-content.cn-page-locations .pharmacy-tabs {
        display: block;
        width: 100%;
    }

        #main-content:has(#signpackageslist) .pharmacy-tabs .nav-item,
        #main-content.cn-page-locations .pharmacy-tabs .nav-item {
            display: block;
            width: 100%;
        }

        #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link,
        #main-content.cn-page-locations .pharmacy-tabs .nav-link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 44px;
            min-height: 44px;
            padding: 0 14px;
            width: 100%;
            white-space: nowrap;
            gap: 10px;
            line-height: 1.2;
        }

            #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link h3,
            #main-content.cn-page-locations .pharmacy-tabs .nav-link h3 {
                font-size: 13.5px;
                font-weight: 600;
                text-align: left;
                white-space: nowrap;
                line-height: 1.2;
                flex: 1;
            }

            #main-content:has(#signpackageslist) .pharmacy-tabs .nav-link::before,
            #main-content.cn-page-locations .pharmacy-tabs .nav-link::before {
                width: 16px;
                height: 16px;
                flex: 0 0 16px;
                -webkit-mask-size: 16px 16px;
                mask-size: 16px 16px;
            }

    /* Grid toolbar + foot: tighter typography on phones. */
    #main-content:has(#signpackageslist) .cn-grid-toolbar__title h2 {
        font-size: 14px;
    }

    #main-content:has(#signpackageslist) .cn-grid-toolbar__title p {
        font-size: 12px;
    }

    #main-content:has(#signpackageslist) .cn-grid-card .cn-grid-foot {
        padding: 10px 14px;
        font-size: 12px;
    }

    /* Form-card: tighter internal padding + smaller head. */
    #main-content:has(#signpackageslist) #div_createnewsignpackage .cn-form-card {
        padding: 14px;
    }

    #main-content:has(#signpackageslist) .cn-form-card__icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

        #main-content:has(#signpackageslist) .cn-form-card__icon svg {
            width: 16px;
            height: 16px;
        }

    #main-content:has(#signpackageslist) .cn-form-card__title {
        font-size: 15px;
    }

    #main-content:has(#signpackageslist) .cn-form-card__sub {
        font-size: 12px;
    }

    /* Documents picker: stack head vertically. */
    #main-content:has(#signpackageslist) .cn-docs__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Form-actions footer: hint above, buttons full-width below. */
    #main-content:has(#signpackageslist) .cn-form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #main-content:has(#signpackageslist) .cn-form-actions__buttons {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

        #main-content:has(#signpackageslist) .cn-form-actions__buttons > #btnsave,
        #main-content:has(#signpackageslist) .cn-form-actions__buttons > #btnsaveandsend,
        #main-content:has(#signpackageslist) #btnsave.dx-button,
        #main-content:has(#signpackageslist) #btnsaveandsend.dx-button {
            width: 100% !important;
        }
}

/* ════════════════════════════════════════════════════════════
   PRACTICE MODIFIERS   (/practicemanagement/practicemodifiers)
   Practice-admin dxDataGrid for managing custom billing modifiers
   (Code · Description) with row-mode inline editing. Reuses the
   shared design-system primitives — .cn-back, .cn-area, .cn-title,
   .cn-grid-card, .cn-grid-toolbar — so the chrome matches Visit/
   Index and SignPackages. Scoped via #main-content.cn-page-modifiers
   so nothing leaks to other pages that also use #demo-grid.
   ════════════════════════════════════════════════════════════ */

/* ----- Page subtitle override — tighten the global -14px margin
   when subtitle sits right under the H1 with no other elements. ----- */
#main-content.cn-page-modifiers .cn-subtitle {
    margin: -6px 0 18px;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Toolbar inside the .cn-grid-card head -----
   Uses the same .cn-toolbar-left + .cn-search pattern as
   PracticePatients (publish.css line ~3072+) — those rules are
   already global, so we just inherit them and don't redefine. ----- */

/* ----- Code column badge — reuses the shared .cn-mrn primitive
   (publish.css line ~3530) via cellTemplate in the dxDataGrid JS.
   No per-page rule needed here. ----- */

/* ----- dxDataGrid edit-row highlight — when a row enters edit mode
   the row gets .dx-edit-row. Tint it navy-50 so the user clearly
   sees which row they're editing. The :not(.dx-invalid) exception
   lets the invalid-cell danger styling below win when validation
   fails — pending cells keep the navy-50 background and signal via
   the editor's warn-gold border instead. ----- */
#main-content.cn-page-modifiers #demo-grid .dx-edit-row > td:not(.dx-invalid) {
    background: var(--cn-navy-50) !important;
    border-color: rgba(12, 84, 148, .18) !important;
}

#main-content.cn-page-modifiers #demo-grid .dx-edit-row > td.dx-editor-cell {
    padding: 8px 14px !important;
}

/* ----- Validation state — DX adds .dx-invalid in multiple places
   depending on the editing mode. We cover all of them: cell-level
   (.dx-edit-row > td.dx-invalid), editor-level (.dx-texteditor.dx-invalid),
   and the cell wrapping an invalid editor. Highest specificity wins
   over the edit-row navy-50 highlight above. ----- */

/* Cell with .dx-invalid — danger background + danger border. */
#main-content.cn-page-modifiers #demo-grid .dx-datagrid-rowsview .dx-edit-row > td.dx-invalid,
#main-content.cn-page-modifiers #demo-grid .dx-datagrid-rowsview .dx-row > td.dx-invalid,
#main-content.cn-page-modifiers #demo-grid .dx-datagrid-rowsview .dx-edit-row > td.dx-cell-modified.dx-invalid,
#main-content.cn-page-modifiers #demo-grid .dx-datagrid-rowsview .dx-edit-row > td:has(> .dx-texteditor.dx-invalid),
#main-content.cn-page-modifiers #demo-grid .dx-datagrid-rowsview .dx-edit-row > td:has(.dx-invalid) {
    background: var(--cn-danger-bg) !important;
    border-color: var(--cn-danger) !important;
    box-shadow: inset 0 -2px 0 0 var(--cn-danger);
}

/* Editor with .dx-invalid (DX can put the invalid state on the
   editor itself, not just the cell). */
#main-content.cn-page-modifiers #demo-grid .dx-texteditor.dx-invalid,
#main-content.cn-page-modifiers #demo-grid .dx-invalid .dx-texteditor,
#main-content.cn-page-modifiers #demo-grid .dx-texteditor.dx-invalid.dx-state-focused,
#main-content.cn-page-modifiers #demo-grid .dx-invalid .dx-texteditor.dx-state-focused {
    border-color: var(--cn-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

/* Pending async validation — warn-gold border so the user sees
   "we're checking" before the danger-red verdict. */
#main-content.cn-page-modifiers #demo-grid .dx-validation-pending .dx-texteditor,
#main-content.cn-page-modifiers #demo-grid .dx-texteditor.dx-validation-pending {
    border-color: var(--cn-warn) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .15) !important;
}

/* Invalid badge (small icon DX places in the corner of failed cells)
   — make it prominent so the user can't miss the error indicator. */
#main-content.cn-page-modifiers #demo-grid .dx-invalid-badge,
#main-content.cn-page-modifiers #demo-grid .dx-overlay-wrapper.dx-invalid-message .dx-icon-info {
    background: var(--cn-danger) !important;
    color: #fff !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, .3) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-modifiers #demo-grid .dx-invalid-badge .dx-icon,
    #main-content.cn-page-modifiers #demo-grid .dx-invalid-badge::before {
        color: #fff !important;
        font-size: 12px !important;
    }

/* DX error-row — when validation fails in row-mode editing, DX may
   render an inline error row below the edited row with the message.
   Style it as a polished danger callout. */
/* (Removed) `#main-content.cn-page-modifiers #demo-grid .dx-error-row`
   and `.dx-error-message` styling — the global hide rule for
   `.dx-error-row` above now suppresses DX's default full-width error
   banner site-wide. The cell-level inline bubble replaces it, so the
   modifiers-specific banner styling is no longer needed. */

/* Revert button (X) DX shows next to invalid cells — polished. */
#main-content.cn-page-modifiers #demo-grid .dx-revert-button {
    background: var(--cn-danger-bg) !important;
    border: 1px solid var(--cn-danger) !important;
    border-radius: var(--cn-radius) !important;
    color: var(--cn-danger) !important;
}

/* Validation message tooltip — DATAGRID ONLY. DX renders a popover
   with the error text at <body> level for grid-cell validation; style
   as a polished dark toast. These selectors are intentionally scoped
   to the datagrid variants so they do NOT leak into form-field
   validation messages (which use the plain red-text style defined in
   the VALIDATION MESSAGES block above, around line 1928). */
.dx-datagrid-invalid-message.dx-overlay .dx-overlay-content,
.dx-overlay-wrapper.dx-datagrid-invalid-message .dx-overlay-content {
    background: var(--cn-text) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: var(--cn-shadow-md) !important;
}

    .dx-datagrid-invalid-message.dx-overlay .dx-overlay-content .dx-invalid-message-content,
    .dx-overlay-wrapper.dx-datagrid-invalid-message .dx-invalid-message-content {
        padding: 8px 12px !important;
        font-family: var(--cn-font) !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: #fff !important;
        background: transparent !important;
        border: 0 !important;
    }

/* DevExpress.ui.notify() toast — fired by onRowValidating when
   validation fails. Polish to match the design system. */
.dx-toast.dx-toast-error {
    background: var(--cn-danger) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--cn-radius-lg) !important;
    box-shadow: var(--cn-shadow-md) !important;
}

    .dx-toast.dx-toast-error .dx-toast-content {
        background: transparent !important;
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 12px 16px !important;
    }

    .dx-toast.dx-toast-error .dx-toast-icon {
        color: #fff !important;
    }

/* DX renders validation tooltips at <body> level via dx-overlay,
   so .cn-grid-card { overflow: hidden } doesn't clip them. We let
   the rowsview itself allow overflow so any inline invalid badge
   positioned outside the cell padding stays visible. */
#main-content.cn-page-modifiers #cn-modifiers-card .dx-datagrid-rowsview {
    overflow: visible !important;
}

/* ----- Row-action buttons (.custom-edit-btn) — Edit / Delete /
   Save / Cancel are rendered as dxButtons with explicit per-variant
   classes (.custom-edit-btn--edit / --delete / --save / --cancel)
   so each variant has a clean CSS hook without relying on :has().
   Base pill shape is 36px so it lines up with the 38px inputs in
   the edit row and reads as a balanced row of pills. ----- */
#main-content.cn-page-modifiers .custom-edit-btn.dx-button {
    height: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--cn-radius) !important;
    border: 1px solid var(--cn-border-2) !important;
    background: var(--cn-elev) !important;
    box-shadow: none !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #main-content.cn-page-modifiers .custom-edit-btn.dx-button .dx-button-content {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 !important;
        width: 100%;
        height: 100%;
    }

    #main-content.cn-page-modifiers .custom-edit-btn.dx-button .dx-button-text {
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0;
        line-height: 1;
    }

    #main-content.cn-page-modifiers .custom-edit-btn.dx-button .dx-icon {
        font-size: 14px !important;
        line-height: 1;
        margin: 0 !important;
    }

/* Edit (secondary outline navy) — default look. */
#main-content.cn-page-modifiers .custom-edit-btn--edit.dx-button .dx-button-text,
#main-content.cn-page-modifiers .custom-edit-btn--edit.dx-button .dx-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-modifiers .custom-edit-btn--edit.dx-button:hover {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* Delete (secondary outline danger). */
#main-content.cn-page-modifiers .custom-edit-btn--delete.dx-button .dx-button-text,
#main-content.cn-page-modifiers .custom-edit-btn--delete.dx-button .dx-icon {
    color: var(--cn-danger) !important;
}

#main-content.cn-page-modifiers .custom-edit-btn--delete.dx-button:hover {
    background: var(--cn-danger-bg) !important;
    border-color: var(--cn-danger) !important;
}

/* Save + Cancel — match the Edit button's outlined-navy style so all
   four row actions read as a consistent set of pills (Edit / Delete
   / Save / Cancel). Save keeps a slightly heavier visual presence
   via a min-width and a soft shadow so it still reads as the primary
   action without breaking the visual family. */
#main-content.cn-page-modifiers .custom-edit-btn--save.dx-button,
#main-content.cn-page-modifiers .custom-edit-btn--cancel.dx-button {
    background: var(--cn-elev) !important;
    border-color: var(--cn-border-2) !important;
}

    #main-content.cn-page-modifiers .custom-edit-btn--save.dx-button .dx-button-text,
    #main-content.cn-page-modifiers .custom-edit-btn--save.dx-button .dx-icon,
    #main-content.cn-page-modifiers .custom-edit-btn--cancel.dx-button .dx-button-text,
    #main-content.cn-page-modifiers .custom-edit-btn--cancel.dx-button .dx-icon {
        color: var(--cn-navy) !important;
    }

    #main-content.cn-page-modifiers .custom-edit-btn--save.dx-button:hover,
    #main-content.cn-page-modifiers .custom-edit-btn--cancel.dx-button:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

/* ----- Header + body cell alignment for Code and Description columns -----
   The JS sets `alignment: "center"` on each column which centers the
   header text + data cell text via the dxDataGrid column property.
   The Code column uses .cn-mrn (badge), so it's already an inline-
   flex element — no extra text-align needed. The Description column
   keeps DX's column-level center alignment from the JS config. */

/* Override the legacy inline rules that previously lived in the
   page's <style> block — keep the link color on-brand. */
#main-content.cn-page-modifiers .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-modifiers .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in search panel is set to width: 280 in JS, which
       overflows a 375px viewport once the header-panel padding is
       added. Force it to stretch to the available width on phones
       so the input + magnifier never get clipped. The DX toolbar
       wraps when needed so the search lands on its own row. */
    #main-content.cn-page-modifiers #demo-grid .dx-datagrid-header-panel {
        padding: 10px 12px !important;
    }

        #main-content.cn-page-modifiers #demo-grid .dx-datagrid-header-panel .dx-toolbar-after,
        #main-content.cn-page-modifiers #demo-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item {
            width: 100% !important;
            max-width: 100% !important;
        }

    #main-content.cn-page-modifiers #demo-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    /* Allow toolbar items to wrap onto separate rows on small screens. */
    #main-content.cn-page-modifiers #demo-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #main-content.cn-page-modifiers #demo-grid .dx-datagrid-header-panel .dx-toolbar-before,
    #main-content.cn-page-modifiers #demo-grid .dx-datagrid-header-panel .dx-toolbar-center {
        max-width: 100% !important;
    }

    /* Row action buttons compress to icon-only on phones — hide the
       button text so all action pills fit comfortably in the column. */
    #main-content.cn-page-modifiers .custom-edit-btn.dx-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

    #main-content.cn-page-modifiers .custom-edit-btn--save.dx-button {
        min-width: 36px !important;
    }

    #main-content.cn-page-modifiers .custom-edit-btn.dx-button .dx-button-text {
        display: none !important;
    }

    #main-content.cn-page-modifiers .custom-edit-btn.dx-button .dx-icon {
        margin: 0 !important;
    }

    /* Bootstrap .row negative margins guard. */
    #main-content.cn-page-modifiers #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   CPT MASTER   (/practicemanagement/cptmaster)
   Practice-admin dxDataGrid for managing CPT procedure codes
   (Code · Description · Default Charge Amt · M1..M4 · Actions)
   with CELL-MODE inline editing (tap a cell → edit → blur to
   save). Reuses the shared design-system primitives — .cn-back,
   .cn-area, .cn-title, .cn-subtitle, .cn-stats, .cn-grid-card,
   .cn-mrn (badge for Code + Modifier cells), .custom-edit-btn
   — so the chrome matches PracticeModifiers / PracticePatients
   / Visit-Index. Scoped via #main-content.cn-page-cptmaster so
   nothing leaks to other practice-admin views.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle sits inside the .cn-providers-titlebar block,
   not directly under the H1 — restore normal top margin so it
   doesn't collide with the title's bottom margin. ----- */
#main-content.cn-page-cptmaster .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Horizontal scroll inside the grid card on narrow screens
   so the eight columns can preserve their natural widths instead
   of squashing. DX renders its own scroller, but we make sure the
   card itself clips correctly. ----- */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-rowsview,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-headers {
    overflow-x: auto;
}

/* ----- Charge column — right-aligned currency rendered in tabular
   numerics so amounts stack cleanly under each other. Reuses the
   shared --cn-font-mono token, no new colors introduced. ----- */
#main-content.cn-page-cptmaster #cptmaster-grid .cn-cpt-charge-cell {
    font-family: var(--cn-font-mono);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cn-text);
    white-space: nowrap;
}

/* ----- Empty modifier cell auto-dash. cellTemplate leaves the cell
   empty when there's no modifier; the shared .cn-grid-card td:empty
   rule already paints an em-dash, but we promote it to a centered
   subtle dash here for the M1..M4 columns specifically. ----- */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-rowsview .dx-data-row > td:empty {
    text-align: center;
}

/* ----- Modifier dropdown editor — when the user clicks an M1..M4
   cell, DX renders a dxSelectBox inside the cell. Make sure it
   sits flush inside the 110px-wide column without overflow. ----- */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-editor-cell .dx-selectbox {
    min-width: 0 !important;
    width: 100% !important;
}

/* ----- Cell-mode edit highlight. When the user starts editing a
   cell, DX adds .dx-editor-cell. Tint it navy-50 (matches the
   row-edit highlight in modifiers) so the user clearly sees which
   cell is active. :not(.dx-invalid) keeps the danger styling
   below winning when validation fails. ----- */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-editor-cell:not(.dx-invalid) {
    background: var(--cn-navy-50) !important;
    border-color: rgba(12, 84, 148, .18) !important;
    padding: 8px 12px !important;
}

/* ----- Validation state — DX adds .dx-invalid in multiple places
   depending on the editing mode. Cover all of them: cell-level
   (.dx-row > td.dx-invalid), editor-level (.dx-texteditor.dx-invalid),
   and the cell wrapping an invalid editor. Same selectors as the
   modifiers section so the danger styling stays consistent. ----- */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-rowsview .dx-row > td.dx-invalid,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-rowsview .dx-editor-cell.dx-invalid,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-rowsview .dx-row > td:has(> .dx-texteditor.dx-invalid),
#main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-rowsview .dx-row > td:has(.dx-invalid) {
    background: var(--cn-danger-bg) !important;
    border-color: var(--cn-danger) !important;
    box-shadow: inset 0 -2px 0 0 var(--cn-danger);
}

/* Editor with .dx-invalid (DX can put the invalid state on the
   editor itself, not just the cell). */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-texteditor.dx-invalid,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-invalid .dx-texteditor,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-texteditor.dx-invalid.dx-state-focused,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-invalid .dx-texteditor.dx-state-focused {
    border-color: var(--cn-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

/* Pending async validation — warn-gold border so the user sees
   "we're checking" before the danger-red verdict. CPT uses async
   validation on the Code column (server-side duplicate check). */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-validation-pending .dx-texteditor,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-texteditor.dx-validation-pending {
    border-color: var(--cn-warn) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .15) !important;
}

/* Invalid badge (small icon DX places in the corner of failed cells)
   — make it prominent so the user can't miss the error indicator. */
#main-content.cn-page-cptmaster #cptmaster-grid .dx-invalid-badge,
#main-content.cn-page-cptmaster #cptmaster-grid .dx-overlay-wrapper.dx-invalid-message .dx-icon-info {
    background: var(--cn-danger) !important;
    color: #fff !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, .3) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-cptmaster #cptmaster-grid .dx-invalid-badge .dx-icon,
    #main-content.cn-page-cptmaster #cptmaster-grid .dx-invalid-badge::before {
        color: #fff !important;
        font-size: 12px !important;
    }

/* (Removed) `#main-content.cn-page-cptmaster #cptmaster-grid
   .dx-overlay-wrapper.dx-invalid-message .dx-overlay-content` —
   dead code. DX appends `.dx-overlay-wrapper.dx-invalid-message` to
   `<body>`, not inside `#cptmaster-grid`, so this descendant selector
   never matched. Datagrid cell validation already gets its dark-toast
   look from the global `.dx-datagrid-invalid-message` rule earlier in
   this file. Form-field validation messages on this page get the plain
   red text from the VALIDATION MESSAGES block (around line 1928). */

/* Delete-only row action — variant for the trash button so it
   reads as a destructive action even before hover. */
#main-content.cn-page-cptmaster .custom-edit-btn--delete.dx-button,
#main-content.cn-page-cptmaster .custom-edit-btn--delete.dx-button .dx-button-text,
#main-content.cn-page-cptmaster .custom-edit-btn--delete.dx-button .dx-icon {
    color: var(--cn-danger) !important;
}

    #main-content.cn-page-cptmaster .custom-edit-btn--delete.dx-button:hover {
        background: var(--cn-danger-bg) !important;
        border-color: var(--cn-danger) !important;
    }

/* Override the legacy inline rules that previously lived in the
   page's <style> block — keep the link color on-brand. */
#main-content.cn-page-cptmaster .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-cptmaster .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in search panel is set to width: 280 in JS, which
       overflows a 375px viewport once the header-panel padding is
       added. Force it to stretch to the available width on phones
       so the input + magnifier never get clipped. Same pattern as
       PracticeModifiers. */
    #main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-header-panel {
        padding: 10px 12px !important;
    }

        #main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-header-panel .dx-toolbar-after,
        #main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item {
            width: 100% !important;
            max-width: 100% !important;
        }

    #main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    /* Allow toolbar items to wrap onto separate rows on small screens. */
    #main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-header-panel .dx-toolbar-before,
    #main-content.cn-page-cptmaster #cptmaster-grid .dx-datagrid-header-panel .dx-toolbar-center {
        max-width: 100% !important;
    }

    /* Row action button compresses to icon-only on phones so the
       Delete pill stays within the column. */
    #main-content.cn-page-cptmaster .custom-edit-btn.dx-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

        #main-content.cn-page-cptmaster .custom-edit-btn.dx-button .dx-button-text {
            display: none !important;
        }

        #main-content.cn-page-cptmaster .custom-edit-btn.dx-button .dx-icon {
            margin: 0 !important;
        }

    /* Stat strip uses the global breakpoints already (2-col at 768,
       1-col at 480). Tighten the card padding a touch on phones so
       three stat values still fit comfortably above the grid. */
    #main-content.cn-page-cptmaster .cn-stat-card {
        padding: 12px 14px;
    }

    #main-content.cn-page-cptmaster .cn-stat-value {
        font-size: 18px;
    }

    /* Bootstrap .row negative margins guard — also clip any wide
       grid content so the page itself never scrolls sideways. */
    #main-content.cn-page-cptmaster #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   VISIT REASONS   (/practicemanagement/visitreason)
   Practice-admin dxDataGrid for the reasons patients pick when
   requesting a visit (Visit Reason Name · Enabled · Actions ·
   Price). Uses FORM-mode editing (popup with Name + Price + an
   Enabled checkbox) and row-dragging for displayOrder. Reuses the
   shared design-system primitives — .cn-back, .cn-area, .cn-title,
   .cn-grid-card, .cn-pill (status), .custom-edit-btn (row actions)
   — so the chrome matches PracticeModifiers / CPTMaster / Visit-
   Index. Scoped via #main-content.cn-page-visitreason so nothing
   leaks to other practice-admin views.
   ════════════════════════════════════════════════════════════ */

/* ----- Visit reason name cell — heavier weight than body so the
   reason reads as the row's primary identity. Reused from the
   approved visitreason-v2 mockup. ----- */
#main-content.cn-page-visitreason .cn-reason-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.35;
    white-space: normal;
}

/* ----- Price cell — right-aligned tabular numerics so amounts
   stack cleanly. The cellTemplate appends `.cn-amount` for the
   formatted currency value (and a "$0.00" fallback when empty). */
#main-content.cn-page-visitreason .cn-amount {
    display: inline-block;
    font-family: var(--cn-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ----- Drag handle column — DX renders a small grip in the
   command-drag column. Tint it muted-by-default, navy on hover so
   the affordance becomes discoverable. ----- */
#main-content.cn-page-visitreason #visitreason-grid .dx-command-drag .dx-datagrid-drag-icon {
    color: var(--cn-text-3) !important;
    cursor: grab;
}

#main-content.cn-page-visitreason #visitreason-grid .dx-data-row:hover .dx-command-drag .dx-datagrid-drag-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-visitreason #visitreason-grid .dx-data-row.dx-sortable-source-hidden + .dx-sortable-placeholder,
#main-content.cn-page-visitreason #visitreason-grid .dx-sortable-placeholder {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* ----- Toolbar (built-in DX header-panel hosting groupPanel,
   Restore, +, searchPanel). Reuses shared .cn-grid-card chrome
   styling but we tune the Restore button to read as a clear
   secondary action and the "+" button as a primary CTA.

   These rules are shared between VisitReason and Questionnaires
   (both pages use the same Restore + Add + searchPanel toolbar
   pattern). Each selector carries a parallel page scope so both
   pages get the identical look from a single rule block. ----- */

/* ----- Group panel — the polished "Drag a column header here…"
   drop zone design + automatic mobile hide is now provided by
   the shared design-system rule at publish.css line ~2336
   (`.cn-grid-card .dx-datagrid-group-panel` + the matching
   @media max-width:540px block). Both VisitReason and
   Questionnaires inherit that behavior automatically — no page-
   scoped overrides needed.

   `.dx-toolbar-before` (which contains the group-panel toolbar
   item) is hidden on mobile here as a belt-and-suspenders so the
   .cn-toolbar-before wrapper itself fully collapses alongside its
   now-hidden child — needed because the mobile flex layout for
   `.dx-toolbar-center / .dx-toolbar-after` lives further down in
   this same media query. ----- */
@media (max-width: 540px) {
    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-before,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-before {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

#main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel,
#main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel {
    padding: 14px 16px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--cn-border) !important;
}

@media (min-width: 640px) {
    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel {
        padding: 16px 20px !important;
    }
}

/* The "+" Add button uses NO custom class — it inherits the shared
   .cn-grid-card .dx-datagrid-header-panel .dx-toolbar-after .dx-button
   rule from publish.css line ~2552 (38×38 outlined ghost pill, navy
   on hover). Exactly the same plus-button UI as CPTMaster.

   The Restore button (text "Restore") is a sibling toolbar item and
   would also be squashed to width:38px by that same shared rule.
   The override below exempts ONLY text-bearing toolbar buttons so
   the "Restore" label stays readable while the styling family stays
   visually consistent with the "+" Add button. */
#main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text,
#main-content.cn-page-visitreason .custom-edit-btn--ghost.dx-button,
#main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text,
#main-content.cn-page-questionnaires .custom-edit-btn--ghost.dx-button {
    width: auto !important;
    min-width: 96px !important;
    padding: 0 14px !important;
}

    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-content,
    #main-content.cn-page-visitreason .custom-edit-btn--ghost.dx-button .dx-button-content,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-content,
    #main-content.cn-page-questionnaires .custom-edit-btn--ghost.dx-button .dx-button-content {
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-text,
    #main-content.cn-page-visitreason .custom-edit-btn--ghost .dx-button-text,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-text,
    #main-content.cn-page-questionnaires .custom-edit-btn--ghost .dx-button-text {
        color: var(--cn-navy) !important;
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

/* ----- Action buttons (Edit / Delete) — pick up the existing
   .custom-edit-btn primitive. Delete variant gets the danger
   color so destructive intent reads even before hover.
   Shared between VisitReason + Questionnaires. ----- */
#main-content.cn-page-visitreason .custom-edit-btn--delete.dx-button .dx-button-text,
#main-content.cn-page-visitreason .custom-edit-btn--delete.dx-button .dx-icon,
#main-content.cn-page-questionnaires .custom-edit-btn--delete.dx-button .dx-button-text,
#main-content.cn-page-questionnaires .custom-edit-btn--delete.dx-button .dx-icon {
    color: var(--cn-danger) !important;
}

#main-content.cn-page-visitreason .custom-edit-btn--delete.dx-button:hover,
#main-content.cn-page-questionnaires .custom-edit-btn--delete.dx-button:hover {
    background: var(--cn-danger-bg) !important;
    border-color: var(--cn-danger) !important;
}
/* Edit / Save / Cancel variants — keep on-brand navy text. */
#main-content.cn-page-visitreason .custom-edit-btn--edit.dx-button .dx-button-text,
#main-content.cn-page-visitreason .custom-edit-btn--edit.dx-button .dx-icon,
#main-content.cn-page-visitreason .custom-edit-btn--save.dx-button .dx-button-text,
#main-content.cn-page-visitreason .custom-edit-btn--save.dx-button .dx-icon,
#main-content.cn-page-visitreason .custom-edit-btn--cancel.dx-button .dx-button-text,
#main-content.cn-page-visitreason .custom-edit-btn--cancel.dx-button .dx-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-visitreason .custom-edit-btn--edit.dx-button:hover,
#main-content.cn-page-visitreason .custom-edit-btn--save.dx-button:hover,
#main-content.cn-page-visitreason .custom-edit-btn--cancel.dx-button:hover {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* ----- Form-mode popup polish — DX opens a popup for add/edit.
   Round the corners, lift with the design-system shadow, polish
   the title/footer to read as a coherent sheet. Scoped to the
   visit-reason grid via :has() so it doesn't leak to other
   popups in the app. ----- */
.dx-overlay-wrapper:has(#visitreason-grid) .dx-popup-normal,
.dx-popup-wrapper:has(.dx-popup-content [aria-label="Visit Reason Name"]) .dx-popup-normal {
    border-radius: var(--cn-radius-lg) !important;
    box-shadow: var(--cn-shadow-lg, 0 16px 48px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08)) !important;
    overflow: hidden;
}

.dx-overlay-wrapper:has(#visitreason-grid) .dx-popup-title {
    background: var(--cn-elev) !important;
    border-bottom: 1px solid var(--cn-border) !important;
    padding: 14px 20px !important;
}

    .dx-overlay-wrapper:has(#visitreason-grid) .dx-popup-title .dx-toolbar-label > div {
        font-family: var(--cn-font) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--cn-text) !important;
        letter-spacing: -.005em !important;
    }

.dx-overlay-wrapper:has(#visitreason-grid) .dx-popup-content {
    padding: 18px 20px 8px !important;
    background: var(--cn-elev) !important;
}

.dx-overlay-wrapper:has(#visitreason-grid) .dx-popup-bottom {
    background: #FAFBFC !important;
    border-top: 1px solid var(--cn-border) !important;
    padding: 12px 20px !important;
}

/* Form field editors inside the popup — navy focus ring, polished
   borders, design-system typography. */
.dx-overlay-wrapper:has(#visitreason-grid) .dx-texteditor.dx-editor-outlined {
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-elev) !important;
    box-shadow: none !important;
}

    .dx-overlay-wrapper:has(#visitreason-grid) .dx-texteditor.dx-editor-outlined.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

.dx-overlay-wrapper:has(#visitreason-grid) .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
}

.dx-overlay-wrapper:has(#visitreason-grid) .dx-field-item-label-text {
    font-family: var(--cn-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .02em;
}

/* Async validation states inside the popup — pending = warn gold,
   invalid = danger red (matches the modifiers + cpt pattern). */
#main-content.cn-page-visitreason .dx-texteditor.dx-invalid,
.dx-overlay-wrapper:has(#visitreason-grid) .dx-texteditor.dx-invalid {
    border-color: var(--cn-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

#main-content.cn-page-visitreason .dx-texteditor.dx-validation-pending,
.dx-overlay-wrapper:has(#visitreason-grid) .dx-texteditor.dx-validation-pending {
    border-color: var(--cn-warn) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .15) !important;
}

/* ----- Override the legacy inline rules that previously lived in
   the page's <style> block — keep the link color on-brand. ----- */
#main-content.cn-page-visitreason .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-visitreason .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar is laid out with absolutely-positioned
       before/center/after sections — on phones we need to flatten
       that into a normal flow so the four toolbar items (groupPanel
       · Restore · + · searchPanel) can wrap cleanly into a
       predictable two-row layout:

         Row 1:  [ Restore (flex-grow text) ]  [ + (38×38 icon) ]
         Row 2:  [ Search input (full-width)                    ]

       Anything that was hidden (groupPanel when empty) collapses. */
    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        /* Container — vertical stack of before/center/after sections. */
        #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar,
        #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar {
            height: auto !important;
            min-height: 0 !important;
        }

        #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-items-container,
        #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            height: auto !important;
            min-height: 0 !important;
            gap: 8px !important;
        }

        /* before / center / after — kill DX's absolute positioning so the
       items lay out in normal flow, full-width, allowed to wrap.
       NOTE: .dx-toolbar-before is intentionally NOT listed here.
       It only ever contains the group-panel toolbar item on these
       pages (the actionable items — Restore / Add / searchPanel —
       all live in .dx-toolbar-after), and the group panel is
       hidden globally at line ~6620+, so the .dx-toolbar-before
       section is kept fully collapsed (display:none) to avoid the
       ~80px of empty white space the user reported. */
        #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-center,
        #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after,
        #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-center,
        #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after {
            position: static !important;
            transform: none !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            min-height: 0 !important;
            height: auto !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 8px !important;
        }
            /* Empty .dx-toolbar-center collapses so it doesn't add gap.
               .dx-toolbar-before is already hidden globally above. */
            #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-center:empty,
            #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-center:empty {
                display: none !important;
            }

            /* Reset DX's default padding/margin on each item. */
            #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item,
            #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item {
                padding: 0 !important;
                margin: 0 !important;
                height: auto !important;
                min-height: 0 !important;
                max-width: 100% !important;
            }

                /* Restore (text button) — grows to fill the row alongside +.
       Drops min-width:96px so it can shrink if needed. The button
       itself stretches to fill its toolbar-item container. */
                #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item:has(.dx-button.dx-button-has-text),
                #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item:has(.dx-button.dx-button-has-text) {
                    flex: 1 1 0 !important;
                    min-width: 0 !important;
                }

            #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text,
            #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text {
                width: 100% !important;
                min-width: 0 !important;
                padding: 0 12px !important;
            }

                #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-text,
                #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-text {
                    white-space: nowrap !important;
                    overflow: hidden !important;
                    text-overflow: ellipsis !important;
                }

            /* "+" Add (icon-only) — stays 38×38 next to Restore, no grow. */
            #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item:has(.dx-button:not(.dx-button-has-text)),
            #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item:has(.dx-button:not(.dx-button-has-text)) {
                flex: 0 0 auto !important;
            }

            /* Search panel — own row at full width. flex-basis:100% with
       flex-wrap:wrap forces the search onto a new line below
       Restore + +. */
            #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item:has(.dx-datagrid-search-panel),
            #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item:has(.dx-datagrid-search-panel) {
                flex: 1 1 100% !important;
                width: 100% !important;
                max-width: 100% !important;
                order: 99 !important; /* always last → second row */
            }

    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-search-panel.dx-texteditor,
    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-search-panel,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-search-panel.dx-texteditor,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-search-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }
        /* The DX search input grows to fill the panel. */
        #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-search-panel .dx-texteditor-input,
        #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-search-panel .dx-texteditor-input {
            width: 100% !important;
        }

    /* Row action buttons compress to icon-only on phones so Edit +
       Delete stay within the column. Scoped to the rowsview ONLY
       so the toolbar Restore button (which also carries the shared
       .custom-edit-btn class via .custom-edit-btn--ghost) is NOT
       caught and squashed to 36×36 / hidden text. */
    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

        #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-button-text,
        #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-button-text {
            display: none !important;
        }

        #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-icon,
        #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-icon {
            margin: 0 !important;
        }

    /* Toolbar Restore button — explicitly re-assert that its text
       stays visible at mobile (defense-in-depth in case another
       .custom-edit-btn rule sneaks in later). VisitReason +
       Questionnaires share this rule. */
    #main-content.cn-page-visitreason #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-text,
    #main-content.cn-page-questionnaires #questionnaires-grid .dx-datagrid-header-panel .dx-toolbar-after .dx-button.dx-button-has-text .dx-button-text {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--cn-navy) !important;
    }

    /* The Save / Cancel buttons inside the form popup keep their
       text on phones — those are bigger primary actions and the
       popup gives them room. */
    .dx-overlay-wrapper:has(#visitreason-grid) .custom-edit-btn--save.dx-button,
    .dx-overlay-wrapper:has(#visitreason-grid) .custom-edit-btn--cancel.dx-button {
        width: auto !important;
        min-width: 80px !important;
        padding: 0 14px !important;
    }

        .dx-overlay-wrapper:has(#visitreason-grid) .custom-edit-btn--save.dx-button .dx-button-text,
        .dx-overlay-wrapper:has(#visitreason-grid) .custom-edit-btn--cancel.dx-button .dx-button-text {
            display: inline-block !important;
        }

    /* Popup adapts to the viewport — DX sizes it to 80% by default,
       but on small phones we want a near-full-width sheet so form
       fields breathe. */
    .dx-overlay-wrapper:has(#visitreason-grid) .dx-popup-normal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* Stat strip would live here if present — none on this page. */

    /* Bootstrap .row negative margins guard — also clip any wide
       grid content so the page itself never scrolls sideways. */
    #main-content.cn-page-visitreason #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   RESTORE REASONS   (/practicemanagement/restorevisitreasons)
   Read-only sister page to VisitReason — lists disabled visit
   reasons (Visit Reason Name · Enabled · Price · Restore) and
   surfaces a per-row Restore button that fires a confirmation
   dialog and POSTs to /PracticeManagement/RestoreVisitReason.
   No editing, no add, no row-dragging. Reuses the shared
   design-system primitives — .cn-back, .cn-area, .cn-title,
   .cn-subtitle, .cn-grid-card, .cn-pill — and re-states the
   page-scoped .cn-reason-name / .cn-amount cell primitives for
   this view. Scoped via #main-content.cn-page-restore-reasons.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the active VisitReason page. ----- */
#main-content.cn-page-restore-reasons .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Inline info banner — sits under the title, explains the
   Restore action. Navy-tinted with a circular info icon. ----- */
#main-content.cn-page-restore-reasons .cn-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100, #D6E4F2);
    border-radius: var(--cn-radius);
    margin: 6px 0 16px;
    color: var(--cn-text);
    font-family: var(--cn-font);
    font-size: 13px;
    line-height: 1.5;
}

    #main-content.cn-page-restore-reasons .cn-info-banner svg {
        width: 18px;
        height: 18px;
        color: var(--cn-navy);
        flex: 0 0 18px;
        margin-top: 1px;
    }

    #main-content.cn-page-restore-reasons .cn-info-banner b {
        color: var(--cn-navy);
        font-weight: 700;
    }

/* ----- Reason name cell — primary identity (re-stated for this
   page; identical to the VisitReason page). ----- */
#main-content.cn-page-restore-reasons .cn-reason-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.35;
    white-space: normal;
}

/* ----- Price cell — right-aligned tabular numerics. ----- */
#main-content.cn-page-restore-reasons .cn-amount {
    display: inline-block;
    font-family: var(--cn-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ----- Restore row button — outlined navy ghost pill. Hover
   shifts to success-green so the restorative intent reads even
   before the user commits. Same shape/height as the design-
   system .cn-row-btn family used in the v2 mockups. ----- */
#main-content.cn-page-restore-reasons .cn-row-actions {
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

#main-content.cn-page-restore-reasons .cn-restore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--cn-radius);
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    color: var(--cn-navy);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
}

    #main-content.cn-page-restore-reasons .cn-restore-btn:hover {
        background: var(--cn-success-bg);
        border-color: var(--cn-success);
        color: var(--cn-success);
    }

    #main-content.cn-page-restore-reasons .cn-restore-btn:focus-visible {
        outline: none;
        box-shadow: var(--cn-focus-ring);
        border-color: var(--cn-navy);
    }

    #main-content.cn-page-restore-reasons .cn-restore-btn svg {
        width: 13px;
        height: 13px;
    }

/* ----- Confirmation dialog polish — DX renders a confirm()
   popup when the user clicks Restore. Round the corners, lift
   with the design-system shadow, re-theme the title/footer so
   the dialog reads as a compact polished sheet. Scoped via
   :has(.cn-confirm-body) so it only catches the dialog we open
   from this page (the body wrapper is the design-system
   anchor), keeping every other confirm/popup in the app
   untouched. ----- */

/* Outer overlay — center, no scroll bleed. */
.dx-overlay-wrapper.dx-dialog-wrapper:has(.cn-confirm-body) {
    align-items: center !important;
}

/* Popup shell — compact width, content-sized height, lifted
   with the design-system shadow. The width:auto / max-width
   pair stops DX from letting the dialog grow to its natural
   one-line message width (~600px) so the dialog stays compact
   regardless of message length. */
.dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) {
    width: 100% !important;
    max-width: 440px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: var(--cn-radius-lg) !important;
    box-shadow: var(--cn-shadow-lg, 0 16px 48px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08)) !important;
    overflow: hidden;
    background: var(--cn-elev) !important;
}

    /* Title — bumped from 15→17 px so the headline reads
   confidently against the body text. */
    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-title {
        background: var(--cn-elev) !important;
        border-bottom: 1px solid var(--cn-border) !important;
        padding: 14px 20px !important;
        min-height: 0 !important;
        height: auto !important;
    }

        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-title .dx-toolbar-label,
        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-title .dx-toolbar-label > div {
            font-family: var(--cn-font) !important;
            font-size: 17px !important;
            font-weight: 700 !important;
            color: var(--cn-text) !important;
            letter-spacing: -.01em !important;
            line-height: 1.3 !important;
            max-width: none !important;
        }

    /* Body — tighter padding, min-height:0 so the popup doesn't
   stretch when the message is short. */
    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-content {
        padding: 16px 20px 14px !important;
        background: var(--cn-elev) !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Footer — tighter padding, right-align the action buttons. */
    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom {
        background: #FAFBFC !important;
        border-top: 1px solid var(--cn-border) !important;
        padding: 10px 16px !important;
        min-height: 0 !important;
        height: auto !important;
    }
        /* Footer toolbar — DX renders dialog.confirm() buttons inside
   .dx-toolbar-before (the toolbar's leading section). Right-
   align the entire toolbar content via flex so the buttons end
   up on the right regardless of which section DX puts them in.
   IMPORTANT: never hide before/center — they actually contain
   the Confirm/Cancel buttons for DX dialogs. */
        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar,
        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-items-container {
            height: auto !important;
            min-height: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important; /* push button cluster right */
            flex-wrap: wrap !important;
            gap: 8px !important;
            width: 100% !important;
        }
        /* Neutralise DX's absolute positioning on every toolbar
   section so flex layout above can position them. */
        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-before,
        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-center,
        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-after {
            position: static !important;
            transform: none !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            width: auto !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
            /* Hide ONLY empty toolbar sections (so they don't add stray
   gap) — never hide ones that actually contain buttons. */
            .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-before:empty,
            .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-center:empty,
            .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-after:empty {
                display: none !important;
            }

        .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-popup-bottom .dx-toolbar-item {
            padding: 0 !important;
            margin: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
        }

/* Body text — design-system typography, comfortable line
   length capped against the 440 px popup. */
.cn-confirm-body {
    font-family: var(--cn-font);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cn-text-2);
    margin: 0;
}

    .cn-confirm-body b {
        color: var(--cn-text);
        font-weight: 700;
    }

/* Confirm-dialog button polish — primary "Confirm" navy filled,
   secondary "Cancel" outlined. */
.dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-button.dx-button-default {
    background: var(--cn-navy) !important;
    border-color: var(--cn-navy) !important;
    color: #fff !important;
    border-radius: var(--cn-radius) !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
}

    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-button.dx-button-default .dx-button-text {
        color: #fff !important;
        font-weight: 600 !important;
    }

    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-button.dx-button-default:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
    }

.dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-button.dx-button-normal:not(.dx-button-default) {
    background: var(--cn-elev) !important;
    border-color: var(--cn-border-2) !important;
    color: var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
}

    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-button.dx-button-normal:not(.dx-button-default) .dx-button-text {
        color: var(--cn-navy) !important;
        font-weight: 600 !important;
    }

    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) .dx-button.dx-button-normal:not(.dx-button-default):hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

/* ----- Override the legacy inline rules that previously lived
   in the page's <style> block — keep the link color on-brand
   in case anything still renders as .dx-link. ----- */
#main-content.cn-page-restore-reasons .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-restore-reasons .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar (just contains the searchPanel here)
       can overflow on phones. Force the search input to stretch
       to the available width. Same pattern as VisitReason /
       CPTMaster / PracticeModifiers. */
    #main-content.cn-page-restore-reasons #visitreason-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-restore-reasons #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

        #main-content.cn-page-restore-reasons #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after,
        #main-content.cn-page-restore-reasons #visitreason-grid .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item {
            width: 100% !important;
            max-width: 100% !important;
        }

    #main-content.cn-page-restore-reasons #visitreason-grid .dx-datagrid-search-panel.dx-texteditor,
    #main-content.cn-page-restore-reasons #visitreason-grid .dx-datagrid-search-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

        #main-content.cn-page-restore-reasons #visitreason-grid .dx-datagrid-search-panel .dx-texteditor-input {
            width: 100% !important;
        }

    /* Restore row button compresses to icon-only on phones so it
       stays within the column. Touch target stays ≥ 36 px. */
    #main-content.cn-page-restore-reasons .cn-restore-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
    }

    #main-content.cn-page-restore-reasons .cn-restore-btn__label {
        display: none !important;
    }

    #main-content.cn-page-restore-reasons .cn-restore-btn svg {
        margin: 0 !important;
    }

    /* Confirmation dialog adapts to near-full-width sheet on phones
       so the body copy and buttons breathe. */
    .dx-overlay-wrapper.dx-dialog-wrapper .dx-popup-normal:has(.cn-confirm-body) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* Bootstrap .row negative margins guard — also clip any wide
       grid content so the page itself never scrolls sideways. */
    #main-content.cn-page-restore-reasons #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   VISIT SYMPTOMS   (/practicemanagement/visitsymptomgroup)
   Practice-admin master-detail dxDataGrid. The master grid lists
   symptom groups (Group Name · Visible · Actions); expanding a
   row reveals a nested dxDataGrid of that group's symptoms
   (Symptom Name · Visible · Actions). Both grids use ROW-MODE
   inline editing; the master grid supports drag-reorder for
   displayOrder. Reuses the shared design-system primitives —
   .cn-back, .cn-area, .cn-title, .cn-subtitle, .cn-grid-card,
   .cn-pill (Visible / Hidden via --active / --disabled),
   .custom-edit-btn (row actions) — plus a small scoped
   .cn-detail-host card primitive for the expanded detail panel.
   Scoped via #main-content.cn-page-visitsymptoms.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-visitsymptoms .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Inline info banner — explains drag/expand/Hidden semantics. ----- */
#main-content.cn-page-visitsymptoms .cn-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100, #D6E4F2);
    border-radius: var(--cn-radius);
    margin: 6px 0 16px;
    color: var(--cn-text);
    font-family: var(--cn-font);
    font-size: 13px;
    line-height: 1.5;
}

    #main-content.cn-page-visitsymptoms .cn-info-banner svg {
        width: 18px;
        height: 18px;
        color: var(--cn-navy);
        flex: 0 0 18px;
        margin-top: 1px;
    }

    #main-content.cn-page-visitsymptoms .cn-info-banner b {
        color: var(--cn-navy);
        font-weight: 700;
    }

/* ----- Group name cell — primary identity in the master row. ----- */
#main-content.cn-page-visitsymptoms .cn-group-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.35;
    white-space: normal;
}

/* ----- Symptom name cell — same family, slightly lighter weight
   because it lives inside the inset detail card. ----- */
#main-content.cn-page-visitsymptoms .cn-symptom-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--cn-text);
    line-height: 1.35;
    white-space: normal;
}

/* ----- Drag-handle column on the master grid. ----- */
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-command-drag .dx-datagrid-drag-icon {
    color: var(--cn-text-3) !important;
    cursor: grab;
}

#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-data-row:hover .dx-command-drag .dx-datagrid-drag-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-sortable-placeholder {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* ----- Expand chevron — muted by default, navy when the row is
   expanded so the affordance reads clearly. ----- */
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-command-expand .dx-datagrid-group-closed::before,
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-command-expand .dx-datagrid-group-opened::before {
    color: var(--cn-text-3) !important;
    transition: color 120ms ease;
}

#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-data-row:hover .dx-command-expand .dx-datagrid-group-closed::before,
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-command-expand .dx-datagrid-group-opened::before {
    color: var(--cn-navy) !important;
}

/* ----- Group panel — now inherits the shared design-system
   polish (publish.css line ~2336): polished dashed-border drop
   zone on desktop, automatically hidden on mobile. No per-page
   rule needed. */

/* ----- Master-detail expand panel — DX renders the nested detail
   inside a .dx-master-detail-row > td. Tint that tray so it reads
   as "inside the parent" and surface a polished card around the
   nested grid. ----- */
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-master-detail-row > td {
    background: #F8FAFC !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--cn-border) !important;
}

#main-content.cn-page-visitsymptoms .cn-detail-host {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    overflow: hidden;
}

#main-content.cn-page-visitsymptoms .cn-detail-host__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cn-border);
    background: var(--cn-elev);
}

#main-content.cn-page-visitsymptoms .cn-detail-host__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#main-content.cn-page-visitsymptoms .cn-detail-host__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ----- Detail dxDataGrid chrome — inherit the master grid look
   so both grids feel like one family. ----- */
#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid {
    border: 0 !important;
    background: transparent !important;
    font-family: var(--cn-font) !important;
}

#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-headers {
    background: #F8FAFC !important;
    border-bottom: 1px solid var(--cn-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--cn-text-2) !important;
}

    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-headers .dx-row > td {
        padding: 10px 12px !important;
        border-bottom: 0 !important;
        vertical-align: middle !important;
    }

#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .dx-row > td {
    padding: 12px !important;
    border-bottom: 1px solid var(--cn-border) !important;
    vertical-align: middle !important;
}

#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .dx-row:last-child > td {
    border-bottom: 0 !important;
}

#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td {
    background: var(--cn-navy-50) !important;
}

/* ----- Detail grid's DX search panel — polish to match the
   shared .cn-grid-card search styling. ----- */
#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-header-panel {
    padding: 10px 12px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--cn-border) !important;
}

#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-search-panel.dx-texteditor {
    height: 36px !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-elev) !important;
    box-shadow: none !important;
}

    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-search-panel.dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

/* ----- Row-mode edit highlight — both master + detail. ----- */
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-rowsview .dx-edit-row > td:not(.dx-invalid),
#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .dx-edit-row > td:not(.dx-invalid) {
    background: var(--cn-navy-50) !important;
    border-color: rgba(12, 84, 148, .18) !important;
}

/* ----- Editor polish inside edit-row cells — design-system
   borders + focus ring. ----- */
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-texteditor,
#main-content.cn-page-visitsymptoms .cn-detail-host .dx-texteditor {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 36px !important;
}

    #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-texteditor::before,
    #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-texteditor::after,
    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-texteditor::before,
    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-texteditor::after {
        display: none !important;
        content: none !important;
    }

    #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-texteditor.dx-state-focused,
    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-texteditor-input,
#main-content.cn-page-visitsymptoms .cn-detail-host .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 13.5px !important;
    color: var(--cn-text) !important;
    padding: 8px 12px !important;
    min-height: 34px !important;
}

/* ----- Async validation states — pending (warn gold), invalid
   (danger red). Matches the modifiers / CPT / visit-reason
   pattern. Applies to BOTH master + detail. ----- */
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-rowsview .dx-row > td.dx-invalid,
#main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-rowsview .dx-edit-row > td.dx-invalid,
#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .dx-row > td.dx-invalid,
#main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .dx-edit-row > td.dx-invalid {
    background: var(--cn-danger-bg) !important;
    border-color: var(--cn-danger) !important;
    box-shadow: inset 0 -2px 0 0 var(--cn-danger);
}

#main-content.cn-page-visitsymptoms .dx-texteditor.dx-invalid {
    border-color: var(--cn-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

#main-content.cn-page-visitsymptoms .dx-texteditor.dx-validation-pending {
    border-color: var(--cn-warn) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .15) !important;
}

/* ----- Row action button variants — keep Edit/Save/Cancel on-brand
   navy via the shared .custom-edit-btn primitive. ----- */
#main-content.cn-page-visitsymptoms .custom-edit-btn--edit.dx-button .dx-button-text,
#main-content.cn-page-visitsymptoms .custom-edit-btn--edit.dx-button .dx-icon,
#main-content.cn-page-visitsymptoms .custom-edit-btn--save.dx-button .dx-button-text,
#main-content.cn-page-visitsymptoms .custom-edit-btn--save.dx-button .dx-icon,
#main-content.cn-page-visitsymptoms .custom-edit-btn--cancel.dx-button .dx-button-text,
#main-content.cn-page-visitsymptoms .custom-edit-btn--cancel.dx-button .dx-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-visitsymptoms .custom-edit-btn--edit.dx-button:hover,
#main-content.cn-page-visitsymptoms .custom-edit-btn--save.dx-button:hover,
#main-content.cn-page-visitsymptoms .custom-edit-btn--cancel.dx-button:hover {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* ----- Override the legacy inline rules that previously lived in
   the page's <style> block — keep the link color on-brand. ----- */
#main-content.cn-page-visitsymptoms .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-visitsymptoms .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar (Add button + searchPanel) on the master
       grid can overflow on phones — flatten the absolute layout and
       let items wrap. Same pattern as VisitReason / CPTMaster. */
    #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-header-panel .dx-toolbar-items-container {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 8px !important;
            height: auto !important;
            min-height: 0 !important;
        }

        #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-header-panel .dx-toolbar-before,
        #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-header-panel .dx-toolbar-center,
        #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-header-panel .dx-toolbar-after {
            position: static !important;
            transform: none !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 8px !important;
        }

            #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-header-panel .dx-toolbar-before:empty,
            #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-header-panel .dx-toolbar-center:empty {
                display: none !important;
            }

    #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Same treatment for the detail grid's toolbar (search panel). */
    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-header-panel .dx-toolbar-items-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Detail panel padding tightens on phones so the inset doesn't
       eat the row. */
    #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-master-detail-row > td {
        padding: 8px !important;
    }

    #main-content.cn-page-visitsymptoms .cn-detail-host__head {
        padding: 10px 12px;
    }

    /* Row action buttons compress to icon-only — scoped to the
       rowsview ONLY so the toolbar Add button is not affected. */
    #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-rowsview .custom-edit-btn.dx-button,
    #main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .custom-edit-btn.dx-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

        #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-button-text,
        #main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-button-text {
            display: none !important;
        }

        #main-content.cn-page-visitsymptoms #visit-symptom-group-list .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-icon,
        #main-content.cn-page-visitsymptoms .cn-detail-host .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-icon {
            margin: 0 !important;
        }

    /* Bootstrap .row negative margins guard — also clip any wide
       grid content so the page itself never scrolls sideways. */
    #main-content.cn-page-visitsymptoms #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   PRACTICE LOCATIONS   (/PracticeLocation/Locations)
   Two-tab practice-admin page: a dxDataGrid list of locations
   (Code · Street · City · State · Zip · Actions) + a dxForm for
   creating / editing a location (Code with async uniqueness,
   Appointments Enabled switch, Street / Street 2 / City / State /
   Zip). Reuses the shared design-system primitives — .cn-back,
   .cn-area, .cn-title, .cn-subtitle, .cn-grid-card, .cn-form-card
   — plus the shared .pharmacy-tabs segmented-pill control
   originally built for SignPackages (publish.css line ~5249) by
   adding .cn-page-locations as a parallel scope on each tab rule.
   Scoped via #main-content.cn-page-locations.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-locations .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Tab control — the polished segmented .pharmacy-tabs
   design is shared with SignPackages and lives at publish.css
   line ~5249+. Each rule there carries a parallel
   `.cn-page-locations .pharmacy-tabs ...` selector so this
   page picks up the identical look + behavior automatically,
   including per-tab icon glyphs for #list-tab (list icon) and
   #add-tab (plus icon). No page-scoped tab CSS needed here. */

/* ----- Grid card toolbar tweak — the locations grid has only a
   title block (no chips, no external search). Push the toolbar's
   bottom border so the grid body has a clean seam. ----- */
#main-content.cn-page-locations .cn-grid-card .cn-grid-toolbar {
    border-bottom: 1px solid var(--cn-border);
}

/* ============================================================
   LOCATION CELL PRIMITIVES — street two-line + state chip.

   • Location Code cell uses the shared `.cn-mrn` primitive
     (publish.css line ~3887) so no `.cn-loc-code` rule is
     declared here — the cellTemplate just emits `<span class="cn-mrn">`.
   • Zip cell uses the shared `.cn-mono` tabular-num primitive
     (line ~3924) as a base; `.cn-loc-zip` below adds only the
     monospace font-family + size/weight delta on top.
   ============================================================ */
#main-content.cn-page-locations .cn-loc-addr {
    font-size: 13px;
    color: var(--cn-text);
    line-height: 1.35;
}

#main-content.cn-page-locations .cn-loc-addr--muted {
    color: var(--cn-text-3);
    font-size: 12px;
    margin-top: 2px;
}

#main-content.cn-page-locations .cn-loc-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 8px;
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    font-family: var(--cn-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* `.cn-loc-zip` extends shared `.cn-mono` with mono font-family
   + size/weight. Tabular-nums + text color are inherited. */
#main-content.cn-page-locations .cn-loc-zip {
    font-family: var(--cn-font-mono);
    font-size: 13px;
    font-weight: 600;
}

/* ----- Row action button (Edit) — keep on-brand navy via the
   shared .custom-edit-btn primitive. ----- */
#main-content.cn-page-locations .custom-edit-btn--edit.dx-button .dx-button-text,
#main-content.cn-page-locations .custom-edit-btn--edit.dx-button .dx-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-locations .custom-edit-btn--edit.dx-button:hover {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* ============================================================
   CREATE / EDIT FORM CARD
   Shared form-card chrome + dxForm polish — used by Locations
   (Create/Edit tab) and SchedulingPreferences. Each rule below
   carries TWO parallel page scopes so both pages inherit the
   identical styling from a single block. Add a new
   `.cn-page-<name>` parallel scope to every selector below to
   opt a new page into this design language.
   ============================================================ */
/* .cn-form-card wrapper + __head / __head h2 / __head p / __body /
   mobile padding rules removed — all moved into the CANONICAL FORM
   CARD primitive at the top of this file (search "14. FORM CARD —
   CANONICAL HEAD TYPOGRAPHY"). Locations, Scheduling Preferences
   and Questionnaire Editor now pick up identical chrome and
   typography for free, with zero per-page declarations. New form
   pages get the same polish just by using the markup pattern —
   they no longer need a `.cn-page-<name>` parallel scope on these
   selectors. */

/* Async-validation states inside the form. */
#main-content.cn-page-locations .cn-form-card .dx-texteditor.dx-invalid,
#main-content.cn-page-schedulingpreferences .cn-form-card .dx-texteditor.dx-invalid,
#main-content.cn-page-schedule .cn-form-card .dx-texteditor.dx-invalid,
#main-content.cn-page-questionnaireeditor .cn-form-card .dx-texteditor.dx-invalid {
    border-color: var(--cn-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

#main-content.cn-page-locations .cn-form-card .dx-texteditor.dx-validation-pending,
#main-content.cn-page-schedulingpreferences .cn-form-card .dx-texteditor.dx-validation-pending,
#main-content.cn-page-schedule .cn-form-card .dx-texteditor.dx-validation-pending,
#main-content.cn-page-questionnaireeditor .cn-form-card .dx-texteditor.dx-validation-pending {
    border-color: var(--cn-warn) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .15) !important;
}

/* dxSwitch — the polished switch design is inherited from the
   shared `.dx-switch` premium primitive (publish.css line ~1637):
   38×22 navy pill, custom white circular handle via ::before
   pseudo-element, gray track when OFF, navy track when ON. This
   is the same switch UI used on CreateProvider and across the
   provider/patient/billing forms. .cn-form-card is whitelisted at
   the reset cascade (line ~2155) so switches inside Locations'
   form card pick up the premium design automatically — no page-
   scoped overrides needed here. */

/* ----- dxForm box-item layout guard — the legacy production <style>
   block carried `.dx-item.dx-box-item { min-width: unset !important; }`
   which kept the form's grouped items (and the colCount:12 button
   group at the bottom) from being forced wider than their column
   allotment. Restored here scoped to .cn-page-locations so it
   doesn't leak. Without this, the Save/Cancel button items overflow
   their narrow columns and squash the button content. ----- */
#main-content.cn-page-locations .cn-form-card .dx-item.dx-box-item,
#main-content.cn-page-schedulingpreferences .cn-form-card .dx-item.dx-box-item {
    min-width: unset !important;
}

/* Same dxForm box-item guard for the "Add New Dependent" form.
   Scoped to the shared #dependents-form id (the dxForm container is
   identical across the practiceadmin / provider / patient
   dependent-create pages), so this one rule replaces the per-page
   inline copies they each carried. */
#dependents-form .dx-item.dx-box-item {
    min-width: unset !important;
}

/* ----- Form action button group (.cn-form-actions cssClass on the
   final dxForm group, colCount:12) — polished Save (primary navy
   filled) + Cancel (outlined navy). We do NOT override dxForm's
   internal layout (no display:flex, no gap, no padding override) —
   instead we let dxForm's box layout run normally and just promote
   the two .dx-field-button-item children to auto-width so the
   buttons can render at their natural production-defined width.
   ----- */
#main-content.cn-page-locations .cn-form-actions,
#main-content.cn-page-schedulingpreferences .cn-form-actions {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--cn-border);
}
    /* Promote button items inside the form-actions group to auto-width
   so the colCount:12 column allocation doesn't compress them. Also
   add a right margin so the Save / Cancel pair sits as a cluster. */
    #main-content.cn-page-locations .cn-form-actions .dx-item.dx-box-item.dx-field-button-item,
    #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-item.dx-box-item.dx-field-button-item {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-right: 10px !important;
    }
    /* Style the buttons themselves — no width / padding override so
   production's `buttonOptions.width: 100` is respected. */
    #main-content.cn-page-locations .cn-form-actions .dx-button,
    #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button {
        border-radius: var(--cn-radius) !important;
        box-shadow: none !important;
        font-family: var(--cn-font) !important;
    }

        #main-content.cn-page-locations .cn-form-actions .dx-button.dx-button-default,
        #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button.dx-button-default {
            background: var(--cn-navy) !important;
            border: 1px solid var(--cn-navy) !important;
            box-shadow: var(--cn-shadow-sm) !important;
        }

            #main-content.cn-page-locations .cn-form-actions .dx-button.dx-button-default .dx-button-text,
            #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button.dx-button-default .dx-button-text {
                color: #fff !important;
                font-weight: 600 !important;
                font-size: 14px !important;
            }

            #main-content.cn-page-locations .cn-form-actions .dx-button.dx-button-default:hover,
            #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button.dx-button-default:hover {
                background: var(--cn-navy-2) !important;
                border-color: var(--cn-navy-2) !important;
            }

        #main-content.cn-page-locations .cn-form-actions .dx-button.dx-button-normal,
        #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button.dx-button-normal {
            background: var(--cn-elev) !important;
            border: 1px solid var(--cn-border-2) !important;
        }

            #main-content.cn-page-locations .cn-form-actions .dx-button.dx-button-normal .dx-button-text,
            #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button.dx-button-normal .dx-button-text {
                color: var(--cn-navy) !important;
                font-weight: 600 !important;
                font-size: 14px !important;
            }

            #main-content.cn-page-locations .cn-form-actions .dx-button.dx-button-normal:hover,
            #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button.dx-button-normal:hover {
                background: var(--cn-navy-50) !important;
                border-color: var(--cn-navy) !important;
            }

/* ----- Override the legacy inline rules that previously lived
   in the page's <style> block — keep the link color on-brand. ----- */
#main-content.cn-page-locations .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-locations .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar on the locations grid — flatten the
       absolute layout so items wrap cleanly. Same pattern as
       VisitReason / VisitSymptoms / CPTMaster. */
    #main-content.cn-page-locations #location-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-locations #location-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

        #main-content.cn-page-locations #location-grid .dx-datagrid-header-panel .dx-toolbar-before,
        #main-content.cn-page-locations #location-grid .dx-datagrid-header-panel .dx-toolbar-center,
        #main-content.cn-page-locations #location-grid .dx-datagrid-header-panel .dx-toolbar-after {
            position: static !important;
            transform: none !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 8px !important;
        }

            #main-content.cn-page-locations #location-grid .dx-datagrid-header-panel .dx-toolbar-before:empty,
            #main-content.cn-page-locations #location-grid .dx-datagrid-header-panel .dx-toolbar-center:empty {
                display: none !important;
            }

    #main-content.cn-page-locations #location-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Row action buttons compress to icon-only — scoped to the
       rowsview ONLY so anything in the toolbar is not affected. */
    #main-content.cn-page-locations #location-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

        #main-content.cn-page-locations #location-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-button-text {
            display: none !important;
        }

        #main-content.cn-page-locations #location-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-icon {
            margin: 0 !important;
        }

    /* Form action buttons stretch full-width below 540px so they
       remain comfortable touch targets. The .dx-field-button-item
       column wrapper is also stretched so the button fills its row. */
    #main-content.cn-page-locations .cn-form-actions .dx-item.dx-box-item.dx-field-button-item,
    #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-item.dx-box-item.dx-field-button-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    #main-content.cn-page-locations .cn-form-actions .dx-button,
    #main-content.cn-page-schedulingpreferences .cn-form-actions .dx-button {
        width: 100% !important;
    }

    /* Bootstrap .row negative margins guard — also clip any wide
       grid content so the page itself never scrolls sideways. */
    #main-content.cn-page-locations #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   ANALYTICS REPORTS — Visits + Patients
     /practiceuser/analyticsreports/visits   (#VisitList)
     /practiceuser/analyticsreports/patients (#PatientList)
   Both pages are practice-admin DevExpress dxPivotGrids backed by
   ODataContext(/api/odata) filtered by Practice.Id. Visits pivot:
   Provider Name (row), Visit Date (column, year/quarter/month/day),
   Visit Type, Patient Name, MRN, Visit Number (data). Patients
   pivot: Patient Name (row), Created date (column groupings), MRN
   Number (data), Provider, Phone, Notifications, DOB, Status,
   Referral. Excel export via ExcelJS + FileSaver. Polish-only — the
   widgets, ODataContexts, dataSources, dxPivotGrid configs and
   onExporting handlers are all preserved verbatim in the cshtml
   files. The two reports share one DRY selector group below so they
   look identical. The legacy inline DX-override rules from each
   page's old <style> block are migrated here (page-scoped, navy-
   recoloured from the old indigo #3f51b5). The dead .dx-datagrid
   .dx-link rule was dropped — neither page has a datagrid.
   Scoped via #main-content.cn-page-visitsreport AND
   #main-content.cn-page-patientsreport.
   ════════════════════════════════════════════════════════════ */

/* ----- Report card — outer wrapper around the pivot grid. The card
   head (.cn-report-card__head + __icon / __text / __title / __sub /
   __actions) was removed; the page-level .cn-providers-titlebar above
   already carries the page title + subtitle, and the dxPivotGrid's
   built-in toolbar handles Excel export via `export: { enabled: true }`
   in the widget config. ----- */
#main-content.cn-page-visitsreport .cn-report-card,
#main-content.cn-page-patientsreport .cn-report-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
}

/* ----- Pivot hint — drag-to-pivot help banner ----- */
#main-content.cn-page-visitsreport .cn-pivot-hint,
#main-content.cn-page-patientsreport .cn-pivot-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin: 14px 20px 0;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100, #D6E4F2);
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.5;
}

    #main-content.cn-page-visitsreport .cn-pivot-hint svg,
    #main-content.cn-page-patientsreport .cn-pivot-hint svg {
        width: 16px;
        height: 16px;
        color: var(--cn-navy);
        flex: 0 0 16px;
        margin-top: 1px;
    }

    #main-content.cn-page-visitsreport .cn-pivot-hint b,
    #main-content.cn-page-patientsreport .cn-pivot-hint b {
        color: var(--cn-navy);
        font-weight: 700;
    }

@media (max-width: 540px) {
    #main-content.cn-page-visitsreport .cn-pivot-hint,
    #main-content.cn-page-patientsreport .cn-pivot-hint {
        margin: 12px 14px 0;
    }
}

/* ----- Pivot grid wrap — horizontal scroll on narrow viewports
   (pivot grids are inherently wide; this is the safe enclosure). ----- */
#main-content.cn-page-visitsreport .cn-pivot-wrap,
#main-content.cn-page-patientsreport .cn-pivot-wrap {
    padding: 14px 20px 18px;
}

@media (max-width: 540px) {
    #main-content.cn-page-visitsreport .cn-pivot-wrap,
    #main-content.cn-page-patientsreport .cn-pivot-wrap {
        padding: 12px 14px 14px;
    }
}

#main-content.cn-page-visitsreport .cn-pivot-scroll,
#main-content.cn-page-patientsreport .cn-pivot-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--cn-radius);
}

/* ----- dxPivotGrid widget chrome ----- */
#main-content.cn-page-visitsreport #VisitList.dx-pivotgrid,
#main-content.cn-page-patientsreport #PatientList.dx-pivotgrid {
    font-family: var(--cn-font) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    overflow: hidden;
    color: var(--cn-text) !important;
    min-width: 720px; /* keep readable when scrolled on small screens */
}

#main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-area td,
#main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-area td {
    border-color: var(--cn-border) !important;
}

/* Field panel — the row of "drop here" zones at the top */
#main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-fields-container,
#main-content.cn-page-visitsreport #VisitList .dx-area-fields,
#main-content.cn-page-visitsreport #VisitList .dx-filter-header,
#main-content.cn-page-visitsreport #VisitList .dx-data-header,
#main-content.cn-page-visitsreport #VisitList .dx-column-header,
#main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-fields-container,
#main-content.cn-page-patientsreport #PatientList .dx-area-fields,
#main-content.cn-page-patientsreport #PatientList .dx-filter-header,
#main-content.cn-page-patientsreport #PatientList .dx-data-header,
#main-content.cn-page-patientsreport #PatientList .dx-column-header {
    background: #F8FAFC !important;
    border-color: var(--cn-border) !important;
}

#main-content.cn-page-visitsreport #VisitList .dx-area-field,
#main-content.cn-page-patientsreport #PatientList .dx-area-field {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-family: var(--cn-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--cn-text) !important;
    margin: 2px 4px !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #main-content.cn-page-visitsreport #VisitList .dx-area-field:hover,
    #main-content.cn-page-patientsreport #PatientList .dx-area-field:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
        color: var(--cn-navy) !important;
    }

/* Row and column header cells */
#main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-vertical-headers,
#main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-horizontal-headers,
#main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-vertical-headers,
#main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-horizontal-headers {
    background: #F8FAFC !important;
}

    #main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-vertical-headers td,
    #main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-horizontal-headers td,
    #main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-vertical-headers td,
    #main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-horizontal-headers td {
        font-family: var(--cn-font) !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: var(--cn-text-2) !important;
        letter-spacing: .02em;
        padding: 8px 12px !important;
    }

    #main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-vertical-headers .dx-row-total,
    #main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-horizontal-headers .dx-column-total,
    #main-content.cn-page-visitsreport #VisitList .dx-grandtotal,
    #main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-vertical-headers .dx-row-total,
    #main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-horizontal-headers .dx-column-total,
    #main-content.cn-page-patientsreport #PatientList .dx-grandtotal {
        background: var(--cn-navy-50) !important;
        color: var(--cn-navy) !important;
        font-weight: 700 !important;
    }

/* Data cells — tabular nums */
#main-content.cn-page-visitsreport #VisitList .dx-area-data-cell td,
#main-content.cn-page-patientsreport #PatientList .dx-area-data-cell td {
    font-family: var(--cn-font) !important;
    font-size: 13px !important;
    color: var(--cn-text) !important;
    padding: 8px 12px !important;
    font-variant-numeric: tabular-nums;
}

#main-content.cn-page-visitsreport #VisitList .dx-area-data-cell tr:hover td,
#main-content.cn-page-patientsreport #PatientList .dx-area-data-cell tr:hover td {
    background: var(--cn-navy-50) !important;
}

/* PivotGrid built-in toolbar (export, field chooser) */
#main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-toolbar .dx-button,
#main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-toolbar .dx-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--cn-radius) !important;
    min-width: 36px !important;
    height: 36px !important;
}

    #main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-toolbar .dx-button:hover,
    #main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-toolbar .dx-button:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy-100, #D6E4F2) !important;
    }

    #main-content.cn-page-visitsreport #VisitList .dx-pivotgrid-toolbar .dx-button .dx-icon,
    #main-content.cn-page-patientsreport #PatientList .dx-pivotgrid-toolbar .dx-button .dx-icon {
        color: var(--cn-navy) !important;
    }

#main-content.cn-page-visitsreport #VisitList .dx-loadindicator-icon,
#main-content.cn-page-patientsreport #PatientList .dx-loadindicator-icon {
    color: var(--cn-navy) !important;
}

/* ----- Migrated legacy inline rules from both pages' old <style>
   blocks. They were globally-scoped before (each inline block only
   loaded on its page) — re-scoping here keeps identical reach.
   Recoloured from #3f51b5 to --cn-navy. ----- */
#main-content.cn-page-visitsreport .dx-icon-overflow,
#main-content.cn-page-patientsreport .dx-icon-overflow {
    color: var(--cn-navy);
}

#main-content.cn-page-visitsreport .dx-item.dx-box-item,
#main-content.cn-page-patientsreport .dx-item.dx-box-item {
    min-width: unset !important;
}

#main-content.cn-page-visitsreport span.dx-menu-item-text,
#main-content.cn-page-patientsreport span.dx-menu-item-text {
    position: relative;
    top: 2px;
}

#main-content.cn-page-visitsreport .dx-button .dx-button-content,
#main-content.cn-page-patientsreport .dx-button .dx-button-content {
    padding: 6px;
}

/* ════════════════════════════════════════════════════════════
   PRACTICE SETUP + ANALYTICS REPORTS — landing-page tile grids
     /practicemanagement/practicesetup       (cn-page-practicesetup)
     /practiceuser/analyticsreports          (cn-page-analyticsreports)
   Both are landing pages of access tiles for the practice-admin
   workspace. Polish-only — same flat order, same destinations,
   same Razor conditional flags (Admin*Access / PaymentGateway /
   Questionnaire) as production. No tiles regrouped, no sections
   added. The legacy .box-shadow / .box-shadow-link / .with-left-
   icons / .with-arrow / .box-link / .box-icons inline classes are
   gone on both pages — replaced by the tile primitives below +
   design-system tokens. The two pages share one DRY block via
   multi-selector lists so they look identical (only the tile
   inventory differs).
   Scoped via #main-content.cn-page-practicesetup AND
   #main-content.cn-page-analyticsreports.
   ════════════════════════════════════════════════════════════ */

/* Responsive card grid — same breakpoints as production's
   col-lg-4 col-md-6 col-12: 1 col mobile, 2 col ≥600, 3 col ≥960. */
#main-content.cn-page-practicesetup .cn-setup-grid,
#main-content.cn-page-analyticsreports .cn-setup-grid,
#main-content.cn-page-practiceadminlibrary .cn-setup-grid,
#main-content.cn-page-practiceadmindashboard .cn-setup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 600px) {
    #main-content.cn-page-practicesetup .cn-setup-grid,
    #main-content.cn-page-analyticsreports .cn-setup-grid,
    #main-content.cn-page-practiceadminlibrary .cn-setup-grid,
    #main-content.cn-page-practiceadmindashboard .cn-setup-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (min-width: 960px) {
    #main-content.cn-page-practicesetup .cn-setup-grid,
    #main-content.cn-page-analyticsreports .cn-setup-grid,
    #main-content.cn-page-practiceadminlibrary .cn-setup-grid,
    #main-content.cn-page-practiceadmindashboard .cn-setup-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 18px;
    }
}

/* Tile — full-bleed clickable card. */
#main-content.cn-page-practicesetup .cn-setup-card,
#main-content.cn-page-analyticsreports .cn-setup-card,
#main-content.cn-page-practiceadminlibrary .cn-setup-card,
#main-content.cn-page-practiceadmindashboard .cn-setup-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    text-decoration: none;
    color: inherit;
    min-height: 88px;
    transition: transform 140ms ease, box-shadow 160ms ease, border-color 140ms ease, background 140ms ease;
    position: relative;
    overflow: hidden;
}

    #main-content.cn-page-practicesetup .cn-setup-card::before,
    #main-content.cn-page-analyticsreports .cn-setup-card::before,
    #main-content.cn-page-practiceadminlibrary .cn-setup-card::before,
    #main-content.cn-page-practiceadmindashboard .cn-setup-card::before {
        content: "";
        position: absolute;
        right: -32px;
        top: -32px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(12, 84, 148, .035) 0%, rgba(12, 84, 148, 0) 70%);
        pointer-events: none;
        transition: background 200ms ease;
    }

    #main-content.cn-page-practicesetup .cn-setup-card:hover,
    #main-content.cn-page-analyticsreports .cn-setup-card:hover,
    #main-content.cn-page-practiceadminlibrary .cn-setup-card:hover,
    #main-content.cn-page-practiceadmindashboard .cn-setup-card:hover {
        transform: translateY(-2px);
        border-color: var(--cn-navy);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
        text-decoration: none;
        color: inherit;
    }

        #main-content.cn-page-practicesetup .cn-setup-card:hover::before,
        #main-content.cn-page-analyticsreports .cn-setup-card:hover::before,
        #main-content.cn-page-practiceadminlibrary .cn-setup-card:hover::before,
        #main-content.cn-page-practiceadmindashboard .cn-setup-card:hover::before {
            background: radial-gradient(circle, rgba(12, 84, 148, .08) 0%, rgba(12, 84, 148, 0) 70%);
        }

    #main-content.cn-page-practicesetup .cn-setup-card:focus-visible,
    #main-content.cn-page-analyticsreports .cn-setup-card:focus-visible,
    #main-content.cn-page-practiceadminlibrary .cn-setup-card:focus-visible,
    #main-content.cn-page-practiceadmindashboard .cn-setup-card:focus-visible {
        outline: 0;
        box-shadow: var(--cn-focus-ring), var(--cn-shadow-sm);
        border-color: var(--cn-navy);
    }

/* Icon tile — navy gradient by default, gold variant for the
   "Global codes" tiles (Modifier Master, CPT Master on the Practice
   Setup page) so they keep their original gold visual cue from the
   legacy .box-icons color (#d19c46) while joining the design system.
   The Analytics Reports tiles don't use the gold variant. */
#main-content.cn-page-practicesetup .cn-setup-card__icon,
#main-content.cn-page-analyticsreports .cn-setup-card__icon,
#main-content.cn-page-practiceadminlibrary .cn-setup-card__icon,
#main-content.cn-page-practiceadmindashboard .cn-setup-card__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(12, 84, 148, .12);
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

    #main-content.cn-page-practicesetup .cn-setup-card__icon svg,
    #main-content.cn-page-analyticsreports .cn-setup-card__icon svg,
    #main-content.cn-page-practiceadminlibrary .cn-setup-card__icon svg,
    #main-content.cn-page-practiceadmindashboard .cn-setup-card__icon svg {
        width: 22px;
        height: 22px;
    }

#main-content.cn-page-practicesetup .cn-setup-card:hover .cn-setup-card__icon,
#main-content.cn-page-analyticsreports .cn-setup-card:hover .cn-setup-card__icon,
#main-content.cn-page-practiceadminlibrary .cn-setup-card:hover .cn-setup-card__icon,
#main-content.cn-page-practiceadmindashboard .cn-setup-card:hover .cn-setup-card__icon {
    background: linear-gradient(135deg, var(--cn-navy), var(--cn-navy-2));
    color: #fff;
    transform: scale(1.04);
}
/* The --gold variant (Modifier Master / CPT Master tiles) was the
   only exception to the navy icon system. User wants every tile
   icon to read as navy — override the gold variant to match the
   default navy treatment so the Practice Setup page presents a
   single, consistent icon color across all tiles. */
#main-content.cn-page-practicesetup .cn-setup-card--gold .cn-setup-card__icon {
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    border-color: rgba(12, 84, 148, .12);
}

#main-content.cn-page-practicesetup .cn-setup-card--gold:hover .cn-setup-card__icon {
    background: linear-gradient(135deg, var(--cn-navy), var(--cn-navy-2));
    color: #fff;
}

/* Title + tiny uppercase meta hint. */
#main-content.cn-page-practicesetup .cn-setup-card__text,
#main-content.cn-page-analyticsreports .cn-setup-card__text,
#main-content.cn-page-practiceadminlibrary .cn-setup-card__text,
#main-content.cn-page-practiceadmindashboard .cn-setup-card__text {
    min-width: 0;
    flex: 1;
}

#main-content.cn-page-practicesetup .cn-setup-card__title,
#main-content.cn-page-analyticsreports .cn-setup-card__title,
#main-content.cn-page-practiceadminlibrary .cn-setup-card__title,
#main-content.cn-page-practiceadmindashboard .cn-setup-card__title {
    display: block;
    font-family: var(--cn-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1.3;
    letter-spacing: -.005em;
}

@media (min-width: 960px) {
    #main-content.cn-page-practicesetup .cn-setup-card__title,
    #main-content.cn-page-analyticsreports .cn-setup-card__title,
    #main-content.cn-page-practiceadminlibrary .cn-setup-card__title,
    #main-content.cn-page-practiceadmindashboard .cn-setup-card__title {
        font-size: 15.5px;
    }
}

#main-content.cn-page-practicesetup .cn-setup-card__meta,
#main-content.cn-page-analyticsreports .cn-setup-card__meta,
#main-content.cn-page-practiceadminlibrary .cn-setup-card__meta,
#main-content.cn-page-practiceadmindashboard .cn-setup-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cn-text-3);
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Chevron — quiet arrow that slides right on hover. */
#main-content.cn-page-practicesetup .cn-setup-card__chev,
#main-content.cn-page-analyticsreports .cn-setup-card__chev,
#main-content.cn-page-practiceadminlibrary .cn-setup-card__chev,
#main-content.cn-page-practiceadmindashboard .cn-setup-card__chev {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cn-text-3);
    transition: color 140ms ease, right 160ms ease;
    flex: 0 0 16px;
}

    #main-content.cn-page-practicesetup .cn-setup-card__chev svg,
    #main-content.cn-page-analyticsreports .cn-setup-card__chev svg,
    #main-content.cn-page-practiceadminlibrary .cn-setup-card__chev svg,
    #main-content.cn-page-practiceadmindashboard .cn-setup-card__chev svg {
        width: 16px;
        height: 16px;
        display: block;
    }

#main-content.cn-page-practicesetup .cn-setup-card:hover .cn-setup-card__chev,
#main-content.cn-page-analyticsreports .cn-setup-card:hover .cn-setup-card__chev,
#main-content.cn-page-practiceadminlibrary .cn-setup-card:hover .cn-setup-card__chev,
#main-content.cn-page-practiceadmindashboard .cn-setup-card:hover .cn-setup-card__chev {
    color: var(--cn-navy);
    right: 12px;
}

/* Bootstrap .row negative-margin guard (other pages set this
   for the same reason — prevents wide content from causing
   horizontal scroll on narrow viewports). */
@media (max-width: 540px) {
    #main-content.cn-page-practicesetup #section-content > .container,
    #main-content.cn-page-analyticsreports #section-content > .container,
    #main-content.cn-page-practiceadmindashboard #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   ELIGIBILITY RESPONSE — shared by two sibling pages
     /practiceuser/eligibility/{patientId}/eligibilityhistory
        (cn-page-eligibilityhistory) — viewer with a filter dxForm
        (#EligibilityEnquiry → dxSelectBox of prior checks loaded
        via /PracticeAdminEligibility/GetEligibilityHistory) whose
        onValueChanged auto-submits the outer #myForm.
     /practiceuser/eligibility/insuranceeligibilitycheck
        (cn-page-insuranceeligibilitycheck) — POST-result page for
        the InsuranceEligibility form; same body, NO filter dxForm,
        a Previous() JS link, and a Model.error.error_mesg fallback.
   Both pages render identical Razor data: insured-info kv grid,
   "Jump to Benefit Category" pill nav (paired with the hidden
   production <select id="category"> for the categorychange() JS
   hook), and one .cn-cat section per Model.elig.categorydetails
   with the same per-category sub-card pattern. The dense gray
   dotted boxes (production's `<div style="border:1px dotted
   #CCCCCC;background:#EEEEEE">`) are now polished .cn-bcard tiles
   — all the Razor conditionals and data shape are preserved
   verbatim on both pages. Every selector below uses
   `#main-content:is(.cn-page-eligibilityhistory,
   .cn-page-insuranceeligibilitycheck)` so the two pages share one
   DRY block (no duplicated rules).
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle tightening (matches the other polished form pages) ----- */
#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Error banner (ViewBag.errormessage) ----- */
#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-elig-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--cn-danger-bg);
    border: 1px solid rgba(220, 38, 38, .22);
    border-left: 4px solid var(--cn-danger);
    border-radius: var(--cn-radius);
    margin-bottom: 14px;
    font-family: var(--cn-font);
    font-size: 13px;
    color: #8a1d1d;
    line-height: 1.5;
}

    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-elig-error svg {
        width: 18px;
        height: 18px;
        color: var(--cn-danger);
        flex: 0 0 18px;
        margin-top: 1px;
    }

/* ----- Insured info key/value grid ----- */
#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-insured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 28px;
}

@media (min-width: 600px) {
    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-insured-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 960px) {
    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-insured-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-kv__label {
    display: block;
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-kv__value {
    display: block;
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--cn-text);
    line-height: 1.4;
    word-break: break-word;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-kv__value--mono {
    font-family: var(--cn-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
    font-variant-numeric: tabular-nums;
}

/* ----- Category jump strip — horizontal-scroll pill nav.
   Paired with production's <select id="category"> hidden via
   inline style="display:none" so the categorychange() JS hook
   still works for any legacy callers.

   NOT sticky — scrolls naturally with the page so it never
   overlaps the shared layout header. Sticky behavior was
   removed after attempts to layer it below the header proved
   too invasive (touching the shared #header broke dropdown
   positioning + banner chrome on every practice-admin page). */
#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 18px;
    scroll-snap-type: x proximity;
    position: sticky;
    top: 82px;
    z-index: 10;
}
    /* Mobile / touch: invisible scrollbar (swipe handles the scroll). */
    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump::-webkit-scrollbar {
        height: 0;
        display: none;
    }

/* Desktop (≥768px): show a thin polished horizontal scrollbar so
   mouse users get a clear affordance that more categories exist
   beyond the visible edge of the pill nav. The thumb fades to navy
   on hover for a premium feel. */
@media (min-width: 768px) {
    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump {
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: var(--cn-border-2) transparent; /* Firefox */
        padding-bottom: 4px; /* room for the bar */
    }

        #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump:hover {
            scrollbar-color: var(--cn-navy) transparent; /* Firefox hover */
        }

        #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump::-webkit-scrollbar {
            height: 8px;
            display: block;
        }

        #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump::-webkit-scrollbar-track {
            background: transparent;
        }

        #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump::-webkit-scrollbar-thumb {
            background: var(--cn-border-2);
            border-radius: 999px;
            border: 2px solid transparent;
            background-clip: padding-box;
            transition: background-color 140ms ease;
        }

            #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump::-webkit-scrollbar-thumb:hover {
                background: var(--cn-navy);
                background-clip: padding-box;
            }
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump__label {
    display: inline-flex;
    align-items: center;
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cn-text-3);
    padding: 0 10px 0 6px;
    flex: 0 0 auto;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump a {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text-2);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump a:hover,
    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat-jump a:focus-visible {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        border-color: var(--cn-navy-100, #D6E4F2);
        outline: 0;
    }

/* ----- Per-category section card ----- */
#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 18px;
    scroll-margin-top: 16px;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    border-bottom: 1px solid var(--cn-border);
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: var(--cn-elev);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(12, 84, 148, .15);
}

    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat__icon svg {
        width: 18px;
        height: 18px;
    }

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat__title {
    font-family: var(--cn-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
    line-height: 1.3;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-cat__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ----- Benefit sub-card — replaces production's gray dotted boxes
   with a clean surface; structured inner content uses the BEM
   .cn-bcard__title / __badge / __notes / __rows / __row / __rk /
   __rv / __entity primitives defined below. ----- */
#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard {
    background: #FAFBFC;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    padding: 14px 16px;
    font-family: var(--cn-font);
    color: var(--cn-text);
    line-height: 1.5;
}

/* ----- BEM benefit-card structure (v2 polish).
   Replaces the legacy <h4>/<p>/<b>/<u>/<br>/&nbsp; pattern with a
   structured title row, optional in/out/both badge, mono notes block,
   and a responsive two-column key/value rows grid. .cn-bcard--coverage
   tints the very first "Active Coverage" tile in success-green. ----- */
#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard--coverage {
    background: var(--cn-success-bg);
    border-color: rgba(4, 120, 87, .18);
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--cn-text);
    margin-bottom: 8px;
    letter-spacing: -.005em;
    line-height: 1.3;
}

    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__title svg {
        width: 14px;
        height: 14px;
        color: var(--cn-navy);
        flex-shrink: 0;
    }

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard--coverage .cn-bcard__title svg {
    color: var(--cn-success);
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__badge--in {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__badge--out {
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__badge--both {
    background: var(--cn-muted-bg);
    color: var(--cn-muted);
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__notes {
    font-family: var(--cn-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--cn-text-2);
    line-height: 1.55;
    margin: 6px 0;
    white-space: pre-wrap;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 18px;
    margin-top: 4px;
}

@media (min-width: 600px) {
    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__rows {
        grid-template-columns: 1fr 1fr;
    }
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--cn-border);
}

    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__row:last-child {
        border-bottom: 0;
    }

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__rk {
    font-size: 12.5px;
    color: var(--cn-text-2);
    font-weight: 500;
}

    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__rk em {
        color: var(--cn-text-3);
        font-style: normal;
    }

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__rv {
    font-family: var(--cn-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cn-text);
    white-space: nowrap;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__rv--muted {
    color: var(--cn-text-2);
    font-weight: 600;
}

#main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__entity {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cn-border);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.55;
}

    #main-content:is(.cn-page-eligibilityhistory, .cn-page-insuranceeligibilitycheck) .cn-bcard__entity strong {
        color: var(--cn-text);
        font-weight: 600;
    }

/* ════════════════════════════════════════════════════════════
   INSURANCE ELIGIBILITY   (/practiceuser/eligibility/{patientId}/insuranceEligibility)
   Practice-admin live coverage check — an outer <form> posting to
   /PracticeAdminEligibility/InsuranceEligibilityCheck wraps two
   side-by-side dxForms: #EligibilityForm (Insurance with live AJAX
   search → /GetInsuranceCompanySearch, Policy Number, Provider, Service
   Type, Date Of Service + Check Eligibility submit) and
   #PatientDetailsForm (First Name, Last Name, DOB — disabled, read-
   only context). Both AJAX dropdown sources (/GetProviderList,
   /GetServiceTypeList) plus the DOB mask + custom validation are
   preserved verbatim. Optional banners render conditionally:
   PatientEligibilityFirstdata → previous-result card with Eligibility
   History link; ErrorMessage → danger alert. The cn-form-grid--2
   primitive stacks the two cards on phones. Input polish is inherited
   from the shared dxForm groups above (cn-page-insuranceeligibility
   is opted in). Only this page's banners, head-row chip and the navy
   Check Eligibility button are page-scoped here.
   Scoped via #main-content.cn-page-insuranceeligibility.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing used
   on every other polished form page (cptmaster / restore-reasons /
   visitsymptoms et al). Trims the canonical 22px subtitle margin so
   the subtitle hugs the title and matches the approved mockup. ----- */
#main-content.cn-page-insuranceeligibility .cn-providers-titlebar .cn-subtitle,
#main-content.cn-page-eligibility .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Previous-result banner — Model.PatientEligibilityFirstdata ----- */
#main-content.cn-page-insuranceeligibility .cn-elig-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

#main-content.cn-page-insuranceeligibility .cn-elig-result__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: var(--cn-success-bg);
    color: var(--cn-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(4, 120, 87, .15);
}

    #main-content.cn-page-insuranceeligibility .cn-elig-result__icon svg {
        width: 18px;
        height: 18px;
    }

#main-content.cn-page-insuranceeligibility .cn-elig-result__text {
    min-width: 0;
    flex: 1 1 220px;
}

#main-content.cn-page-insuranceeligibility .cn-elig-result__label {
    display: block;
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}

#main-content.cn-page-insuranceeligibility .cn-elig-result__value {
    display: block;
    font-family: var(--cn-font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1.35;
}

#main-content.cn-page-insuranceeligibility .cn-elig-result__history {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--cn-radius);
    border: 1px solid var(--cn-border-2);
    background: var(--cn-elev);
    color: var(--cn-text);
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #main-content.cn-page-insuranceeligibility .cn-elig-result__history:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy);
    }

    #main-content.cn-page-insuranceeligibility .cn-elig-result__history svg {
        width: 14px;
        height: 14px;
    }

@media (max-width: 540px) {
    #main-content.cn-page-insuranceeligibility .cn-elig-result__history {
        flex: 1 1 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

/* ----- Error banner — Model.ErrorMessage. Same copy as production. ----- */
#main-content.cn-page-insuranceeligibility .cn-elig-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--cn-danger-bg);
    border: 1px solid rgba(220, 38, 38, .22);
    border-left: 4px solid var(--cn-danger);
    border-radius: var(--cn-radius);
    margin-bottom: 14px;
    font-family: var(--cn-font);
    font-size: 13px;
    color: #8a1d1d;
    line-height: 1.5;
}

    #main-content.cn-page-insuranceeligibility .cn-elig-error svg {
        width: 18px;
        height: 18px;
        color: var(--cn-danger);
        flex: 0 0 18px;
        margin-top: 1px;
    }

    #main-content.cn-page-insuranceeligibility .cn-elig-error b {
        color: var(--cn-danger);
        font-weight: 700;
    }

/* ----- Patient details card head — "Read-only" chip sits as a
   direct child of the canonical .cn-form-card__head (which is
   already flex space-between), so no inner wrapper is needed. The
   chip just needs to stay aligned at the top-right corner. ----- */
#main-content.cn-page-insuranceeligibility .cn-form-card__head > .cn-readonly-chip {
    align-self: flex-start;
    margin-top: 2px;
}

#main-content.cn-page-insuranceeligibility .cn-readonly-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: var(--cn-bg);
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}

    #main-content.cn-page-insuranceeligibility .cn-readonly-chip svg {
        width: 12px;
        height: 12px;
    }

/* ----- Disabled (read-only) field tone for Patient details ----- */
#main-content.cn-page-insuranceeligibility .cn-form-card .dx-state-disabled .dx-texteditor {
    background: var(--cn-bg) !important;
    opacity: 1 !important;
}

#main-content.cn-page-insuranceeligibility .cn-form-card .dx-state-disabled .dx-texteditor-input {
    color: var(--cn-text-2) !important;
    -webkit-text-fill-color: var(--cn-text-2);
}

/* ----- Check Eligibility submit button → navy primary ----- */
#main-content.cn-page-insuranceeligibility .cn-form-card .dx-button.dx-button-default {
    background: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    height: 44px !important;
    min-width: 160px !important;
    padding: 0 18px !important;
    box-shadow: var(--cn-shadow-sm) !important;
    margin-top: 8px !important;
}

    #main-content.cn-page-insuranceeligibility .cn-form-card .dx-button.dx-button-default:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
        box-shadow: 0 2px 6px rgba(12, 84, 148, .18) !important;
    }

    #main-content.cn-page-insuranceeligibility .cn-form-card .dx-button.dx-button-default .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: .01em;
    }

    #main-content.cn-page-insuranceeligibility .cn-form-card .dx-button.dx-button-default .dx-icon {
        color: #fff !important;
        margin-right: 6px !important;
    }

@media (max-width: 540px) {
    #main-content.cn-page-insuranceeligibility .cn-form-card .dx-button.dx-button-default {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════
   ELIGIBILITY   (/practiceuser/eligibility/index)
   Practice-admin patient-eligibility lookup — a single dxForm
   (#Eligibility) with a Patient Name dxSelectBox (loaded via
   AJAX from /PracticeAdminEligibility/GetPatientList) + Search
   button that navigates to
   /practiceuser/eligibility/{insuranceCompanyId}/insuranceEligibility.
   Polish-only — the dxForm, AJAX, validation rule, hidden inputs
   (InsuranceCompanys, PolicyNumbers) and navigation URL are all
   preserved verbatim. The dxSelectBox input polish is inherited
   from the shared groups above (cn-page-eligibility was opted in).
   Only the focused-task page width, the Search-button navy theme,
   and the eligibility hint banner are page-scoped here.
   Scoped via #main-content.cn-page-eligibility.
   ════════════════════════════════════════════════════════════ */

/* Full-width layout — matches /practicemanagement/practicemodifiers:
   the page uses the default Bootstrap .container with NO page max-
   width override, so the content expands to the same responsive
   widths as the rest of the practice-admin app. The lookup card
   spans the full container width as a banner-style surface. */

/* ----- Search button (dxForm itemType: "button", type: "default")
   → navy primary with comfortable touch target. ----- */
#main-content.cn-page-eligibility .cn-form-card .dx-button.dx-button-default {
    background: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    height: 44px !important;
    min-width: 140px !important;
    padding: 0 18px !important;
    box-shadow: var(--cn-shadow-sm) !important;
    margin-top: 8px !important;
}

    #main-content.cn-page-eligibility .cn-form-card .dx-button.dx-button-default:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
        box-shadow: 0 2px 6px rgba(12, 84, 148, .18) !important;
    }

    #main-content.cn-page-eligibility .cn-form-card .dx-button.dx-button-default .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: .01em;
    }

    #main-content.cn-page-eligibility .cn-form-card .dx-button.dx-button-default .dx-icon {
        color: #fff !important;
        margin-right: 6px !important;
    }

@media (max-width: 540px) {
    #main-content.cn-page-eligibility .cn-form-card .dx-button.dx-button-default {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ----- Eligibility hint banner — sits under the dxForm and
   explains what the carrier returns after Search. ----- */
#main-content.cn-page-eligibility .cn-eligibility-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100, #D6E4F2);
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.5;
}

    #main-content.cn-page-eligibility .cn-eligibility-hint svg {
        width: 16px;
        height: 16px;
        color: var(--cn-navy);
        flex: 0 0 16px;
        margin-top: 1px;
    }

    #main-content.cn-page-eligibility .cn-eligibility-hint b {
        color: var(--cn-navy);
        font-weight: 700;
    }

/* ════════════════════════════════════════════════════════════
   STRIPE / PAYMENT GATEWAY   (/Stripe/Index)
   Practice-admin Stripe Connect page. Polish-only: same Razor
   states (Stripeconnect / Statusdisplay / Practicecharge), same
   per-provider charge dxForm (#<index>) + form POST to
   /Stripe/PracticeChargeadd, same Connect (/Stripe/Create) anchor
   and disconnectaccount() flow. Reuses .cn-form-card, .cn-btn
   (--primary / --ghost / --danger-ghost), .cn-pill (--active /
   --disabled / --deceased) and the shared dxForm input polish
   above. Full-width (same .container behavior as /visit/Index).
   Only the gateway layout, status alert, section labels, charge
   identity strip, charge grid and detail rows are page-scoped
   here. Scoped via #main-content.cn-page-stripe.
   ════════════════════════════════════════════════════════════ */

/* Full-width layout — matches /visit/Index: the page uses the
   default Bootstrap .container with NO page max-width override, so
   the content expands to the same responsive widths as the rest of
   the practice-admin app. The per-provider charge cards flow in a
   shared .cn-form-grid (1 → 2 → 3 col) to fill the wider canvas. */

/* Balanced card body (canonical __body trims bottom padding to 8px
   for stacked dxForm groups; these cards want an even box). */
#main-content.cn-page-stripe .cn-form-card .cn-form-card__body {
    padding: 18px 20px;
}

/* Inside the responsive grid, drop the card's own bottom margin so
   the grid gap controls rhythm evenly across rows. */
#main-content.cn-page-stripe .cn-form-grid .cn-form-card {
    margin-bottom: 0;
}

@media (max-width: 540px) {
    #main-content.cn-page-stripe .cn-form-card .cn-form-card__body {
        padding: 16px 14px;
    }
}

/* ----- Payment Gateway card — icon + text + Stripe logo + action ----- */
#main-content.cn-page-stripe .cn-gateway {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

#main-content.cn-page-stripe .cn-gateway__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(12, 84, 148, .12);
}

    #main-content.cn-page-stripe .cn-gateway__icon svg {
        width: 22px;
        height: 22px;
    }

#main-content.cn-page-stripe .cn-gateway__text {
    min-width: 0;
    flex: 1 1 220px;
}

#main-content.cn-page-stripe .cn-gateway__title {
    font-family: var(--cn-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
}

#main-content.cn-page-stripe .cn-gateway__sub {
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    margin-top: 2px;
    line-height: 1.45;
}

#main-content.cn-page-stripe .cn-gateway__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

#main-content.cn-page-stripe .cn-gateway__stripe {
    display: inline-flex;
    align-items: center;
}

#main-content.cn-page-stripe .cn-stripe-logo {
    height: 26px;
    display: block;
}

@media (max-width: 600px) {
    #main-content.cn-page-stripe .cn-gateway__actions {
        flex: 1 1 100%;
        justify-content: space-between;
    }

        #main-content.cn-page-stripe .cn-gateway__actions .cn-btn {
            flex: 1 1 auto;
        }
}

/* ----- Account-status alert (warn) ----- */
#main-content.cn-page-stripe .cn-stripe-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cn-warn-bg);
    border: 1px solid rgba(180, 83, 9, .25);
    border-left: 4px solid var(--cn-warn);
    border-radius: var(--cn-radius);
    margin-bottom: 18px;
}

    #main-content.cn-page-stripe .cn-stripe-alert svg {
        width: 18px;
        height: 18px;
        color: var(--cn-warn);
        flex: 0 0 18px;
        margin-top: 1px;
    }

#main-content.cn-page-stripe .cn-stripe-alert__text {
    font-family: var(--cn-font);
    font-size: 13px;
    color: #7c3d06;
    line-height: 1.5;
}

    #main-content.cn-page-stripe .cn-stripe-alert__text strong {
        color: var(--cn-warn);
        font-weight: 700;
    }

    #main-content.cn-page-stripe .cn-stripe-alert__text a {
        color: var(--cn-navy);
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

        #main-content.cn-page-stripe .cn-stripe-alert__text a:hover {
            text-decoration: underline;
        }

/* ----- Section label between card groups ----- */
#main-content.cn-page-stripe .cn-section-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px 2px 12px;
}

    #main-content.cn-page-stripe .cn-section-label h2 {
        font-family: var(--cn-font);
        font-size: 14px;
        font-weight: 700;
        color: var(--cn-text);
        margin: 0;
        letter-spacing: -.005em;
    }

    #main-content.cn-page-stripe .cn-section-label span {
        font-size: 12.5px;
        color: var(--cn-text-3);
    }

/* ----- Per-provider charge identity strip ----- */
#main-content.cn-page-stripe .cn-charge-card__name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--cn-border);
}

#main-content.cn-page-stripe .cn-charge-card__avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font);
    font-weight: 700;
    font-size: 12px;
}

#main-content.cn-page-stripe .cn-charge-card__name strong {
    font-family: var(--cn-font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cn-text);
}

/* ----- Charge dxForm Save button → navy primary ----- */
#main-content.cn-page-stripe .cn-form-card .dx-button.dx-button-default {
    background: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: var(--cn-shadow-sm) !important;
}

    #main-content.cn-page-stripe .cn-form-card .dx-button.dx-button-default:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
    }

    #main-content.cn-page-stripe .cn-form-card .dx-button.dx-button-default .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

/* ----- Account details rows ----- */
#main-content.cn-page-stripe .cn-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

    #main-content.cn-page-stripe .cn-detail-row svg {
        width: 16px;
        height: 16px;
        color: var(--cn-text-3);
        flex: 0 0 16px;
        margin-top: 2px;
    }

#main-content.cn-page-stripe .cn-detail-row__label {
    display: block;
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}

#main-content.cn-page-stripe .cn-detail-row__value {
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--cn-text);
    font-weight: 500;
    word-break: break-all;
}

/* ----- Mobile ----- */
@media (max-width: 540px) {
    #main-content.cn-page-stripe .cn-form-card .dx-button.dx-button-default {
        width: 100% !important;
    }

    #main-content.cn-page-stripe #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   PROVIDER SCHEDULE   (/Availability/Schedule/<providerId>)
   Per-provider weekly availability editor. A DevExpress dxTreeView
   "section rail" (Global · Time off · 7 weekdays) drives three
   dynamically-built dxForms (#form / #forma / #formSchedule). This
   page is UI-polish only — the treeview, forms, save flow, validation
   and every element ID are untouched. We wrap the existing markup in
   the shared .cn-form-card chrome and reuse the dxForm input polish
   (label / texteditor / focus) and the premium .dx-switch declared
   above (whitelisted inside .cn-form-card). Only the provider-pick
   field, the treeview "rail" reskin, and the legacy inline <style>
   rules (migrated off the global namespace) are page-scoped here.
   Scoped via #main-content.cn-page-schedule.
   ════════════════════════════════════════════════════════════ */

/* ----- Provider picker — sits in the titlebar action slot ----- */
#main-content.cn-page-schedule .cn-provider-pick {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#main-content.cn-page-schedule .cn-provider-pick__label {
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-text-2);
    letter-spacing: .02em;
    margin-bottom: 6px;
}

#main-content.cn-page-schedule .cn-providers-titlebar__action {
    min-width: 260px;
}

#main-content.cn-page-schedule #providerlist {
    min-width: 240px;
}
    /* #providerlist lives outside .cn-form-card, so it needs its own
   (token-identical) outlined-input polish. */
    #main-content.cn-page-schedule #providerlist.dx-texteditor {
        background: var(--cn-elev) !important;
        border: 1px solid var(--cn-border-2) !important;
        border-radius: var(--cn-radius) !important;
        box-shadow: none !important;
        min-height: 38px !important;
    }

        #main-content.cn-page-schedule #providerlist.dx-texteditor::before,
        #main-content.cn-page-schedule #providerlist.dx-texteditor::after {
            display: none !important;
            content: none !important;
        }

        #main-content.cn-page-schedule #providerlist.dx-texteditor.dx-state-focused {
            border-color: var(--cn-navy) !important;
            box-shadow: var(--cn-focus-ring) !important;
        }

    #main-content.cn-page-schedule #providerlist .dx-texteditor-input {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        color: var(--cn-text) !important;
        min-height: 36px !important;
    }

/* ----- Workspace grid — sidebar (#menu dxTreeView) on the left,
   form card on the right. Stacks to 1-col below 900px so phones
   show the sidebar above the form. Matches schedule-v2 mockup. ----- */
#main-content.cn-page-schedule .cn-schedule-workspace {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    #main-content.cn-page-schedule .cn-schedule-workspace {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ----- Section rail (#menu dxTreeView) —
   renders the 9 items (Global · Time off · Sunday … Saturday) as
   a stacked vertical sidebar. DOM is dxTreeView, so items render
   as .dx-treeview-item inside .dx-treeview-node. The active item
   gets .dx-state-selected + .is-active via the page onItemClick.

   Visual model: vertical sidebar card with stacked tabs (icon +
   label). Active tab → navy-50 fill + bold navy text + navy icon
   tile (white glyph). Hover → navy text + slightly deeper icon
   tile. On phones (≤900px) the sidebar collapses to a horizontal
   scroll strip above the form. ----- */
#main-content.cn-page-schedule .cn-schedule-rail {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 10px;
    position: sticky;
    top: 16px;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    #main-content.cn-page-schedule .cn-schedule-rail {
        position: static;
        padding: 8px;
    }
}

/* Kill DX dxTreeView defaults that would render the rail with extra
   chrome — we want a clean stacked sidebar on a white card. */
#main-content.cn-page-schedule .cn-schedule-rail.dx-treeview,
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-node-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-node-container {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 900px) {
    /* Mobile: horizontal scroll strip — tabs in a row, scroll to reach */
    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-node-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-node {
        flex: 0 0 auto;
    }
}

/* Each .dx-treeview-item is the click target; the inner .cn-menu-tab
   (from itemTemplate) holds the icon + label. The item is a clean
   rounded row — no DX caret, no DX checkbox, no DX expand chevron. */
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-node {
    padding: 0 !important;
    margin: 0 !important;
}

#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-toggle-item-visibility,
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-node-loadindicator {
    display: none !important;
}

#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item {
    padding: 0 !important;
    border-radius: var(--cn-radius) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    min-height: 0 !important;
    white-space: nowrap;
}

    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item .dx-treeview-item-content {
        padding: 0 !important;
    }

/* itemTemplate body — icon tile + label, 10 px gap, comfortable
   click target. Color cascades via currentColor so SVG strokes
   and letter pills both pick up hover/active states. */
#main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-family: var(--cn-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cn-text-2);
    white-space: nowrap;
    line-height: 1.2;
    transition: color 120ms ease;
    width: 100%;
}
/* Icon tile — same physical size for both SVG and letter variants
   so all 9 tabs line up vertically. */
#main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
    transition: background 120ms ease, color 120ms ease;
}

    #main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab__icon svg {
        width: 14px;
        height: 14px;
    }
/* Letter pill (Su / Mo / Tu / We / Th / Fr / Sa) — 2-letter day
   code, tabular-nums alignment so all 7 day pills size identically. */
#main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab__letter {
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: inherit;
    line-height: 1;
}

#main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab__label {
    font-family: var(--cn-font);
    font-size: 13.5px;
    font-weight: inherit;
    color: inherit;
    flex: 1;
    min-width: 0;
}
/* Suppress DX's default `.dx-treeview-item-content > span` since
   itemTemplate replaces the inner render. */
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item > span:not(.cn-menu-tab):not(.dx-treeview-item-content) {
    display: none !important;
}

/* Hover — label + icon shift to navy; icon tile lifts to navy-50. */
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-hover .cn-menu-tab,
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item:hover .cn-menu-tab {
    color: var(--cn-navy);
}

#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-hover .cn-menu-tab__icon,
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item:hover .cn-menu-tab__icon {
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

/* Active — navy-50 fill, bold navy label, navy-filled icon tile
   with white glyph. The strongest visual cue on the sidebar so a
   single glance shows which section is being edited. Matches both
   DX's dx-state-selected AND the page's .is-active marker. */
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-selected,
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.is-active,
#main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-focused {
    background: var(--cn-navy-50) !important;
    border-color: rgba(12, 84, 148, .15) !important;
}

    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-selected .cn-menu-tab,
    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.is-active .cn-menu-tab,
    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-focused .cn-menu-tab {
        color: var(--cn-navy);
        font-weight: 700;
    }

    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-selected .cn-menu-tab__icon,
    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.is-active .cn-menu-tab__icon,
    #main-content.cn-page-schedule .cn-schedule-rail .dx-treeview-item.dx-state-focused .cn-menu-tab__icon {
        background: var(--cn-navy);
        color: #fff;
    }

/* ----- Form panes wrapper — sits below the tab strip, gives a
   consistent gap above the dxForm content so the active tab's
   underline has breathing room before the form fields start. ----- */
#main-content.cn-page-schedule .cn-schedule-forms {
    padding-top: 4px;
}

/* ----- Day form caption — dxForm renders `caption: "Monday"` (the
   active day name) as `.dx-form-group-caption`. Promote it to the
   bold heading the mockup shows so the user instantly sees which
   day they're editing without re-reading the active tab. ----- */
#main-content.cn-page-schedule .cn-form-card .dx-form-group-caption {
    font-family: var(--cn-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    letter-spacing: -.01em !important;
    margin: 4px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1.2 !important;
}

#main-content.cn-page-schedule .cn-form-card .dx-form-group .dx-form-group-caption {
    margin-top: 10px !important;
}
/* The very first group's caption (the day name) sits flush against
   the bottom of the tab strip — remove its top margin so the strip
   underline and the heading stay visually adjacent. */
#main-content.cn-page-schedule .cn-form-card .dx-form > .dx-form-group:first-child > .dx-form-group-with-caption > .dx-form-group-caption,
#main-content.cn-page-schedule .cn-form-card .dx-form > .dx-form-group:first-child .dx-form-group-caption {
    margin-top: 2px !important;
}

/* ----- Per-row "Add" button (dxForm itemType: 'button' with
   icon: 'add' and text: 'Add'). Style as the dashed outlined "Add
   another window" CTA from the mockup — outlined ghost with the
   dashed border to signal "extra row" rather than a primary save. ----- */
#main-content.cn-page-schedule .cn-form-card .dx-form .dx-button.dx-button-mode-contained.dx-button-normal {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    margin-top: 8px !important;
    background: var(--cn-elev) !important;
    border: 1px dashed var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    color: var(--cn-text-2) !important;
    box-shadow: none !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
}

    #main-content.cn-page-schedule .cn-form-card .dx-form .dx-button.dx-button-mode-contained.dx-button-normal:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
        color: var(--cn-navy) !important;
    }

    #main-content.cn-page-schedule .cn-form-card .dx-form .dx-button.dx-button-mode-contained.dx-button-normal .dx-button-text {
        color: inherit !important;
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }

    #main-content.cn-page-schedule .cn-form-card .dx-form .dx-button.dx-button-mode-contained.dx-button-normal .dx-icon {
        color: inherit !important;
        font-size: 14px !important;
        margin-right: 6px !important;
    }

/* ----- Per-form "Save" button (dxForm itemType: 'button' with
   type: 'default', text: 'Save', height: '50' set inline). Already
   styled by the global `.dx-button.dx-button-default` navy rule;
   just tighten the typography + add the savebar-style top divider
   so the Save sits visually distinct from the row fields above. ----- */
#main-content.cn-page-schedule .cn-form-card .dx-form .dx-button.dx-button-default {
    border-radius: var(--cn-radius) !important;
    min-width: 120px !important;
}

    #main-content.cn-page-schedule .cn-form-card .dx-form .dx-button.dx-button-default .dx-button-text {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: .005em !important;
        color: #fff !important;
    }

/* ----- Tighten the dashed "between-row" separators that the dxForm
   draws between repeated time-window groups — the production code
   uses `colCount: 12` inner groups; give those a hairline divider
   so visually distinct windows read as separate "rows". ----- */
#main-content.cn-page-schedule .cn-form-card .dx-form-group + .dx-form-group {
    border-top: 1px dashed var(--cn-border) !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
}

/* ----- Group caption "Time Off" inside the time-off pane — same
   bold heading treatment as the day captions, just with no top
   margin (it sits right after the tab strip). ----- */
#main-content.cn-page-schedule #formSchedule .dx-form-group-caption {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
}

/* ----- Migrated legacy inline rules — these shipped in the page's
   inline <style> block and applied GLOBALLY. Re-scoped to the page so
   they no longer leak: box-item sizing for the forms, the read-only
   field lockdown, and the add-button offset. ----- */
#main-content.cn-page-schedule .dx-item.dx-box-item {
    flex: none !important;
}

#main-content.cn-page-schedule .readonly {
    -webkit-user-modify: read-only;
    pointer-events: none;
    background-color: #fff !important;
    color: var(--cn-text) !important;
}

#main-content.cn-page-schedule .add-Schedule-button {
    margin-top: 30px;
}

/* ----- Mobile: the rail's nowrap + horizontal-scroll behavior is
   already in the desktop rules above (single source of truth). Mobile
   only needs to tighten tab padding/font so more tabs fit per-swipe,
   and make the provider picker full-width below the title. ----- */
@media (max-width: 767px) {
    #main-content.cn-page-schedule .cn-schedule-rail {
        margin-bottom: 14px;
    }
        /* Tighten the inner-tab padding + font on phones so more tabs
       fit per swipe. The icon tile shrinks one notch too. */
        #main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab {
            padding: 10px 14px;
            gap: 8px;
            font-size: 13px;
        }

        #main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab__icon {
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            border-radius: 6px;
        }

            #main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab__icon svg {
                width: 12px;
                height: 12px;
            }

        #main-content.cn-page-schedule .cn-schedule-rail .cn-menu-tab__letter {
            font-size: 10.5px;
        }

    #main-content.cn-page-schedule .cn-providers-titlebar__action {
        min-width: 0;
        width: 100%;
    }

    #main-content.cn-page-schedule #providerlist {
        min-width: 0;
        width: 100% !important;
    }
}

/* ════════════════════════════════════════════════════════════
   REFERRAL SOURCE   (/PracticeReferralSource/ReferralSource)
   The simplest practice-admin dxDataGrid in the family — single
   column (Referral Source code) with row-mode inline editing,
   async name-uniqueness validation, Add / Edit / Save / Cancel
   actions, no delete, no row-dragging. Reuses the shared design-
   system primitives — .cn-back, .cn-area, .cn-title, .cn-subtitle,
   .cn-grid-card, .custom-edit-btn — and adds only one tiny page-
   scoped cell primitive (.cn-source-badge). Scoped via
   #main-content.cn-page-referralsource.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-referralsource .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Referral source name cell — primary identity. Wider muted
   badge (vs the mono `.cn-mrn` code badge family) because referral
   sources are typically phrases like "Friend / family referral"
   rather than short codes. Sits left-aligned with the cell. ----- */
#main-content.cn-page-referralsource .cn-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--cn-muted-bg);
    color: var(--cn-text);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* ----- Row-mode edit highlight — when the user clicks Edit, DX
   adds .dx-edit-row to the row. Tint it navy-50 (with subtle navy
   border) so the active row is obvious; lets the danger validation
   styling below win when async-uniqueness fails. ----- */
#main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-rowsview .dx-edit-row > td:not(.dx-invalid) {
    background: var(--cn-navy-50) !important;
    border-color: rgba(12, 84, 148, .18) !important;
}

/* ----- Editor polish — DX Material Blue Light renders dxTextBox as
   a pill-shaped editor with a blue underline animation. We force a
   clean rectangular outlined input with the design-system border
   radius (6px, NOT pill), kill the ::before / ::after underline
   pseudo-elements, and apply the navy focus ring. ----- */
#main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor,
#main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor.dx-editor-outlined,
#main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor.dx-editor-filled,
#main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor.dx-editor-underlined {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 36px !important;
}
    /* Kill DX Material's underline + ripple pseudo-elements. */
    #main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor::before,
    #main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor::after,
    #main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor-container::before,
    #main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor-container::after {
        display: none !important;
        content: none !important;
    }
    /* Navy focus ring matching the design system. */
    #main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }
/* Input itself — design-system typography + comfortable padding. */
#main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 13.5px !important;
    color: var(--cn-text) !important;
    padding: 8px 12px !important;
    min-height: 34px !important;
    background: transparent !important;
}
/* The edit-row td that wraps the editor gets slightly tighter
   padding so the editor sits flush with the row chrome. */
#main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-rowsview .dx-edit-row > td.dx-editor-cell {
    padding: 8px 14px !important;
}

/* ----- Async validation states — pending = warn gold, invalid =
   danger red. Matches the modifiers / CPT / visit-reason pattern. ----- */
#main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-rowsview .dx-row > td.dx-invalid,
#main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-rowsview .dx-edit-row > td.dx-invalid {
    background: var(--cn-danger-bg) !important;
    border-color: var(--cn-danger) !important;
    box-shadow: inset 0 -2px 0 0 var(--cn-danger);
}

#main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor.dx-invalid,
#main-content.cn-page-referralsource #ReferralSource-grid .dx-invalid .dx-texteditor {
    border-color: var(--cn-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

#main-content.cn-page-referralsource #ReferralSource-grid .dx-texteditor.dx-validation-pending,
#main-content.cn-page-referralsource #ReferralSource-grid .dx-validation-pending .dx-texteditor {
    border-color: var(--cn-warn) !important;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .15) !important;
}

/* Invalid badge (small icon DX places in the corner of failed cells)
   — make it prominent so the user can't miss the error indicator. */
#main-content.cn-page-referralsource #ReferralSource-grid .dx-invalid-badge,
#main-content.cn-page-referralsource #ReferralSource-grid .dx-overlay-wrapper.dx-invalid-message .dx-icon-info {
    background: var(--cn-danger) !important;
    color: #fff !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, .3) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ----- Row action button variants — keep Edit / Save / Cancel
   on-brand navy via the shared .custom-edit-btn primitive. ----- */
#main-content.cn-page-referralsource .custom-edit-btn--edit.dx-button .dx-button-text,
#main-content.cn-page-referralsource .custom-edit-btn--edit.dx-button .dx-icon,
#main-content.cn-page-referralsource .custom-edit-btn--save.dx-button .dx-button-text,
#main-content.cn-page-referralsource .custom-edit-btn--save.dx-button .dx-icon,
#main-content.cn-page-referralsource .custom-edit-btn--cancel.dx-button .dx-button-text,
#main-content.cn-page-referralsource .custom-edit-btn--cancel.dx-button .dx-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-referralsource .custom-edit-btn--edit.dx-button:hover,
#main-content.cn-page-referralsource .custom-edit-btn--save.dx-button:hover,
#main-content.cn-page-referralsource .custom-edit-btn--cancel.dx-button:hover {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* ----- Override the legacy inline rule that previously lived in
   the page's <style> block — keep the link color on-brand. ----- */
#main-content.cn-page-referralsource .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-referralsource .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar (Add button + searchPanel) — flatten
       the absolute layout so items wrap cleanly. Same pattern as
       VisitReason / CPTMaster / VisitSymptoms / Locations. */
    #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 8px !important;
            height: auto !important;
            min-height: 0 !important;
        }

        #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-header-panel .dx-toolbar-before,
        #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-header-panel .dx-toolbar-center,
        #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-header-panel .dx-toolbar-after {
            position: static !important;
            transform: none !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 8px !important;
        }

            #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-header-panel .dx-toolbar-before:empty,
            #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-header-panel .dx-toolbar-center:empty {
                display: none !important;
            }

    #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Row action buttons compress to icon-only on phones — SCOPED
       to the rowsview ONLY so the toolbar Add button is not
       affected (lesson learned from the VisitReason fix). */
    #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

        #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-button-text {
            display: none !important;
        }

        #main-content.cn-page-referralsource #ReferralSource-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-icon {
            margin: 0 !important;
        }

    /* Bootstrap .row negative margins guard — also clip any wide
       grid content so the page itself never scrolls sideways. */
    #main-content.cn-page-referralsource #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   SCHEDULING PREFERENCES   (/PracticeSchedulingPreferences/SchedulingPreferences)
   Practice-admin settings form (no grid). dxForm with three field
   groups: defaultDuration + granularity (dxSelectBox row),
   schedulingVisibility toggle + schedulingVisibilityDay numberBox
   (the Day field is conditionally shown via onValueChanged), and a
   Save / Cancel button group. Form-card chrome, dxForm input
   polish, premium .dx-switch, and Save/Cancel button styling are
   all inherited from the shared `.cn-form-card` + `.cn-form-actions`
   blocks (above, line ~7774 / line ~7892) by including
   `.cn-page-schedulingpreferences` as a parallel scope on each
   rule. This section adds only the page-unique extras (subtitle
   margin, info banner, dxForm group-caption polish, SelectBox
   chevron tint). Scoped via #main-content.cn-page-schedulingpreferences.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-schedulingpreferences .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Inline info banner — explains that per-provider overrides
   still exist on Practice Providers → Schedule. ----- */
#main-content.cn-page-schedulingpreferences .cn-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100, #D6E4F2);
    border-radius: var(--cn-radius);
    margin: 6px 0 16px;
    color: var(--cn-text);
    font-family: var(--cn-font);
    font-size: 13px;
    line-height: 1.5;
}

    #main-content.cn-page-schedulingpreferences .cn-info-banner svg {
        width: 18px;
        height: 18px;
        color: var(--cn-navy);
        flex: 0 0 18px;
        margin-top: 1px;
    }

    #main-content.cn-page-schedulingpreferences .cn-info-banner b {
        color: var(--cn-navy);
        font-weight: 700;
    }

/* ----- dxForm group caption — production uses dxForm's built-in
   `caption` on the second group ("Patient Scheduling Visibility
   (Days)"). DX renders this as `.dx-form-group-caption` with
   Material's underlined sub-header style. Polish it to a clean
   uppercase section sub-header with a hairline divider, matching
   the design system. ----- */
#main-content.cn-page-schedulingpreferences .cn-form-card .dx-form-group-caption {
    font-family: var(--cn-font) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin: 14px 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--cn-border) !important;
}
/* The group with name="scheduling" gets a top margin so it visually
   separates from the duration/frequency row above. */
#main-content.cn-page-schedulingpreferences .cn-form-card .dx-form-group {
    margin-top: 0 !important;
}

/* ----- SelectBox dropdown chevron — keep muted by default, navy
   on focus so the affordance is clear without being loud. ----- */
#main-content.cn-page-schedulingpreferences .cn-form-card .dx-selectbox .dx-dropdowneditor-icon {
    color: var(--cn-text-3) !important;
}

#main-content.cn-page-schedulingpreferences .cn-form-card .dx-selectbox.dx-state-focused .dx-dropdowneditor-icon {
    color: var(--cn-navy) !important;
}

/* ----- dxForm field-item help text (if production adds helpText
   to any field in the future) — small muted line under the input. ----- */
#main-content.cn-page-schedulingpreferences .cn-form-card .dx-field-item-help-text {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    color: var(--cn-text-3) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* ----- Override the legacy inline rules that previously lived in
   the page's <style> block — keep the link color on-brand. ----- */
#main-content.cn-page-schedulingpreferences .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-schedulingpreferences .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* dxForm group caption tightens up on phones. */
    #main-content.cn-page-schedulingpreferences .cn-form-card .dx-form-group-caption {
        margin: 10px 0 6px !important;
        padding-bottom: 6px !important;
    }

    /* Bootstrap .row negative margins guard. */
    #main-content.cn-page-schedulingpreferences #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   QUESTIONNAIRES   (/PracticeQuestionnaires/Questionnaires)
   Practice-admin list page for reusable patient intake forms.
   Single Name column rendered as a clickable link that navigates
   to /PracticeQuestionnaires/QuestionnaireEditor/{id}. Delete
   row action is a soft-delete (POSTs isActive:false to
   /RestoreQuestionnairesUpdate). Toolbar carries Restore + Add
   (+) + searchPanel — same DOM/pattern as VisitReason, so the
   toolbar polish at publish.css line ~6605+ extends to this page
   via a parallel `.cn-page-questionnaires` scope on every rule.
   This section adds only the page-unique extras (subtitle, Name
   link cell). Scoped via #main-content.cn-page-questionnaires.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-questionnaires .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Name column — clickable link cell with a right-chevron
   glyph. Mirrors the questionnaires-v2.html mockup: tap-target
   reads as a link, the chevron hints "open the editor", and the
   slight translateX on hover gives the cell a tactile feel.
   Scoped to .cn-page-questionnaires so the rules don't bleed
   into other practice-admin grids. ----- */
#main-content.cn-page-questionnaires .cn-q-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cn-navy);
    text-decoration: none;
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: color 120ms ease;
}

    #main-content.cn-page-questionnaires .cn-q-link:hover,
    #main-content.cn-page-questionnaires .cn-q-link:focus {
        color: var(--cn-navy-2);
        text-decoration: underline;
    }

#main-content.cn-page-questionnaires .cn-q-link__chev {
    width: 12px;
    height: 12px;
    color: var(--cn-text-3);
    flex: 0 0 12px;
    transition: transform 120ms ease, color 120ms ease;
}

#main-content.cn-page-questionnaires .cn-q-link:hover .cn-q-link__chev,
#main-content.cn-page-questionnaires .cn-q-link:focus .cn-q-link__chev {
    color: var(--cn-navy);
    transform: translateX(2px);
}

/* ----- Override the legacy inline rule that previously lived in
   the page's <style> block — keep the link color on-brand. ----- */
#main-content.cn-page-questionnaires .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-questionnaires .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* Toolbar flattening + row-action button compression + search
       full-width on phones is all inherited from the shared
       VisitReason + Questionnaires mobile block at publish.css line
       ~6788+ (the `.cn-page-questionnaires #questionnaires-grid`
       parallel scope added during this rollout). Nothing extra
       needed here. */

    /* Bootstrap .row negative margins guard — clip any wide grid
       content so the page itself never scrolls sideways. */
    #main-content.cn-page-questionnaires #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   QUESTIONNAIRE EDITOR   (/PracticeQuestionnaires/QuestionnaireEditor/{id})
   Two-section practice-admin page:
     1) Metadata dxForm card (Name + Title with async uniqueness)
     2) Questions dxDataGrid card (row-dragging, form-mode popup
        editor with conditional fields per questionType 0/1/2)
   plus a global Save button in a sticky bottom save-bar that POSTs
   the whole payload to /QuestionnaireQuestionAddUpdate.

   Form-card chrome + dxForm input polish are inherited from the
   shared `.cn-form-card` block (this page added as a parallel
   scope at publish.css line ~7915+). This section adds only the
   page-unique extras (title chip, toolbar Preview link, grid
   cells: Type badge / question name / Required pill, sticky
   save bar). Scoped via #main-content.cn-page-questionnaireeditor.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-questionnaireeditor .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- "Editing" status chip in the title row ----- */
#main-content.cn-page-questionnaireeditor .cn-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

#main-content.cn-page-questionnaireeditor .cn-step-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cn-navy);
}

/* ============================================================
   QUESTIONS GRID CARD
   ============================================================ */
#main-content.cn-page-questionnaireeditor .cn-grid-card {
    margin-bottom: 16px;
}

/* ----- Toolbar (built-in DX header-panel hosting Preview link,
   Add (+), searchPanel). Reuses shared .cn-grid-card chrome
   styling. Preview link is a text-only navy hyperlink, "+" is
   the 38×38 outlined ghost pill (same as CPTMaster / VisitReason),
   searchPanel inherits the shared search polish. ----- */
#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-header-panel {
    padding: 14px 16px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--cn-border) !important;
}

@media (min-width: 640px) {
    #main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-header-panel {
        padding: 16px 20px !important;
    }
}

/* Preview Questionnaire toolbar link — text + eye icon, navy color,
   navy-50 hover bg. Renders via toolbar item template. */
#main-content.cn-page-questionnaireeditor .cn-preview-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 12px !important;
    color: var(--cn-navy) !important;
    font-family: var(--cn-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border-radius: var(--cn-radius) !important;
    transition: background 120ms ease !important;
    line-height: 1 !important;
}

    #main-content.cn-page-questionnaireeditor .cn-preview-link:hover {
        background: var(--cn-navy-50) !important;
        text-decoration: none !important;
        color: var(--cn-navy) !important;
    }

    #main-content.cn-page-questionnaireeditor .cn-preview-link svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

/* ----- Drag-handle column on the questions grid ----- */
#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-command-drag .dx-datagrid-drag-icon {
    color: var(--cn-text-3) !important;
    cursor: grab;
}

#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-data-row:hover .dx-command-drag .dx-datagrid-drag-icon {
    color: var(--cn-navy) !important;
}

/* ----- Type badge — color-coded by question type:
   Freeform = navy, Standard = gold, Choices = success green. ----- */
#main-content.cn-page-questionnaireeditor .cn-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

    #main-content.cn-page-questionnaireeditor .cn-type-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

#main-content.cn-page-questionnaireeditor .cn-type-badge--freeform {
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

#main-content.cn-page-questionnaireeditor .cn-type-badge--standard {
    background: rgba(209,156,70,.14);
    color: var(--cn-gold);
}

#main-content.cn-page-questionnaireeditor .cn-type-badge--choices {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

/* DX renders cells with `white-space: nowrap` + `text-overflow: ellipsis`
   by default. Even with the column width pinned to 160 px, a parent cell
   with `overflow: hidden` would clip the badge if the column ever gets
   measured slightly tight. Make the Type cell let its badge child render
   in full — the badge has its own `white-space: nowrap` so it'll never
   wrap; we just need the cell to stop clipping it. */
#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-data-row > td:has(> .cn-type-badge),
#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-data-row > td:has(> span.cn-type-badge) {
    overflow: visible !important;
    text-overflow: clip !important;
}

#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-data-row .cn-type-badge {
    max-width: 100%;
}

/* Make sure the Actions column cell allows the dxButton's 90 px width
   plus the cell's 14 px L/R padding to render without DX's auto-flex
   compressing it. The column's `width: 130` config gives us the room;
   this rule prevents accidental flex-shrink inside the cell. */
#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-data-row > td:has(> .custom-edit-btn--edit),
#main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-data-row > td:has(> div > .custom-edit-btn--edit) {
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ----- Question name cell — primary identity (currently the
   .dx-datagrid renders the textField as plain text; this rule
   styles any future polished name cell if added). ----- */
#main-content.cn-page-questionnaireeditor .cn-q-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.35;
}

#main-content.cn-page-questionnaireeditor .cn-q-instr {
    display: block;
    font-size: 12px;
    color: var(--cn-text-3);
    margin-top: 2px;
    line-height: 1.4;
}

/* ----- Required indicator cell ----- */
#main-content.cn-page-questionnaireeditor .cn-req-yes {
    color: var(--cn-success);
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#main-content.cn-page-questionnaireeditor .cn-req-no {
    color: var(--cn-text-3);
    font-weight: 500;
    font-size: 12px;
}

/* ----- Row action variants — keep Edit on-brand navy via the
   shared .custom-edit-btn primitive. Save / Cancel inside the
   popup form get the same treatment. ----- */
#main-content.cn-page-questionnaireeditor .custom-edit-btn--edit.dx-button .dx-button-text,
#main-content.cn-page-questionnaireeditor .custom-edit-btn--edit.dx-button .dx-icon,
#main-content.cn-page-questionnaireeditor .custom-edit-btn--save.dx-button .dx-button-text,
#main-content.cn-page-questionnaireeditor .custom-edit-btn--save.dx-button .dx-icon,
#main-content.cn-page-questionnaireeditor .custom-edit-btn--cancel.dx-button .dx-button-text,
#main-content.cn-page-questionnaireeditor .custom-edit-btn--cancel.dx-button .dx-icon {
    color: var(--cn-navy) !important;
}

#main-content.cn-page-questionnaireeditor .custom-edit-btn--edit.dx-button:hover,
#main-content.cn-page-questionnaireeditor .custom-edit-btn--save.dx-button:hover,
#main-content.cn-page-questionnaireeditor .custom-edit-btn--cancel.dx-button:hover {
    background: var(--cn-navy-50) !important;
    border-color: var(--cn-navy) !important;
}

/* ============================================================
   STICKY SAVE BAR (.cn-savebar)
   Replaces the bare #Save button at the bottom with a polished
   sticky bar containing helper text + the primary navy CTA.
   The #Save dxButton renders inside it with the .cn-save-cta
   class so we can style it as a primary navy filled pill.
   ============================================================ */
#main-content.cn-page-questionnaireeditor .cn-savebar {
    position: sticky;
    /* Neutralize the global `.cn-savebar { left: 0; right: 0; box-shadow: 0 -2px 8px ... }`
       designed for `position: fixed`. The editor's sticky bar lives inside
       the Bootstrap `.container` and should take that column's width — not
       stretch viewport-edge-to-edge. */
    left: auto;
    right: auto;
    /* Flush against the viewport bottom while sticky-pinned, and flush
       against the page bottom at natural position — matches the
       questionnaireeditor-v2.html mockup (bottom: 0, no gap). */
    bottom: 0;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-md);
    padding: 14px 20px;
    margin-top: 16px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 20;
}

#main-content.cn-page-questionnaireeditor .cn-savebar__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cn-text-2);
    font-size: 13px;
    line-height: 1.4;
    min-width: 0;
    flex: 1 1 240px;
}

    #main-content.cn-page-questionnaireeditor .cn-savebar__hint svg {
        width: 16px;
        height: 16px;
        color: var(--cn-text-3);
        flex: 0 0 16px;
    }

    #main-content.cn-page-questionnaireeditor .cn-savebar__hint b {
        color: var(--cn-text);
        font-weight: 700;
    }

#main-content.cn-page-questionnaireeditor .cn-savebar__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* The #Save dxButton inside the save bar — primary navy filled CTA. */
#main-content.cn-page-questionnaireeditor .cn-savebar #Save {
    display: inline-block;
}

#main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button {
    background: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    box-shadow: var(--cn-shadow-sm) !important;
}

    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button .dx-icon {
        color: #fff !important;
    }

    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
    }

/* Override the global `.cn-savebar #Save .dx-button { width: 120px !important }`
   so the long "Save questionnaire" label fits without clipping. Min-width
   keeps the CTA visually weighty; padding gives the icon + label room
   to breathe (matches the questionnaireeditor-v2.html mockup). */
#main-content.cn-page-questionnaireeditor .cn-savebar #Save,
#main-content.cn-page-questionnaireeditor .cn-savebar #Save .dx-button,
#main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button {
    width: auto !important;
    min-width: 180px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 20px !important;
}

    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button .dx-button-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

/* ----- Cancel button (mockup's `.cn-btn-secondary`) — outlined ghost,
   42 px to match the Save CTA so the two read as a balanced pair.
   Overrides the global `.cn-savebar .cn-cancel-btn` 120-px / 40-px lock
   from publish.css lines 2040+ with the editor-scoped specificity. */
#main-content.cn-page-questionnaireeditor .cn-savebar .cn-cancel-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 42px !important;
    min-height: 42px !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    padding: 0 16px !important;
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    color: var(--cn-navy) !important;
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-cancel-btn:hover,
    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-cancel-btn:focus {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
        color: var(--cn-navy-2) !important;
        text-decoration: none !important;
    }

/* Bottom padding for the section — zero, so the sticky savebar sits
   flush against the bottom of the page with no visible gap when the
   user scrolls to the absolute bottom. The global `padding-bottom: 96px`
   at line ~1962 was for a fixed-position footer that floated above the
   page; with sticky positioning the bar lives in flow and the global
   rule would leave an empty band beneath it. The editor scope
   specificity (2,1,0 vs the global's 2,0,0) wins over the !important.
   Also strip Bootstrap's `.container` bottom padding for the same reason. */
#main-content.cn-page-questionnaireeditor #section-content,
#main-content.cn-page-questionnaireeditor #section-content > .container {
    padding-bottom: 0 !important;
}
/* Ensure no margin escapes between the savebar and the page bottom —
   `.account-pages` (the wrapping section) historically gets `margin-bottom`
   from the legacy bootstrap section styling, which would show as a band
   below the bar. */
#main-content.cn-page-questionnaireeditor .section.account-pages {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ----- Loader (during save POST) — center inside its row. ----- */
#main-content.cn-page-questionnaireeditor #loading {
    margin-inline: auto;
}

/* ----- Override the legacy inline rules that previously lived in
   the page's <style> block — keep the link color on-brand. ----- */
#main-content.cn-page-questionnaireeditor .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-questionnaireeditor .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar wraps cleanly on phones. */
    #main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

    #main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    /* Row action button compresses to icon-only on phones —
       scoped to the rowsview ONLY so the toolbar Add button is
       not affected. */
    #main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

        #main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-button-text {
            display: none !important;
        }

        #main-content.cn-page-questionnaireeditor #questionnaireEditor-grid .dx-datagrid-rowsview .custom-edit-btn.dx-button .dx-icon {
            margin: 0 !important;
        }

    /* Mobile save bar — compact fixed-bottom action bar that mirrors
       the questionnaireeditor-v2.html mockup's mobile intent: hint
       text on a tight single line above + Cancel / Save side-by-side
       below. Earlier versions either bloated to ~180 px (hint + two
       stacked 42 px buttons) or dropped the hint entirely (lost the
       polish framing). This split-the-difference layout keeps the
       mockup's vertical-stack hint-above-actions structure but
       compresses the hint to 1 line with ellipsis and trims the
       buttons to 40 px each. Total height ≈ 92 px. */
    #main-content.cn-page-questionnaireeditor .cn-savebar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .08) !important;
        margin: 0 !important;
        padding: 8px 14px 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        z-index: 40;
    }
    /* Helper hint — single line, ellipsis if it overflows. Keeps the
       polish framing without claiming 3 lines of vertical space. */
    #main-content.cn-page-questionnaireeditor .cn-savebar__hint {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        gap: 6px !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        flex: 0 0 auto !important;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        #main-content.cn-page-questionnaireeditor .cn-savebar__hint svg {
            width: 13px !important;
            height: 13px !important;
            flex: 0 0 13px !important;
        }

        #main-content.cn-page-questionnaireeditor .cn-savebar__hint > span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    /* Actions — full-width stacked column on phones. Save sits ON TOP
       (column-reverse) because it's the primary CTA and the bottom of
       the screen is closest to the thumb on a one-handed grip; Cancel
       drops below as the secondary action. Each button stretches edge-
       to-edge of the bar for a clear, touch-friendly tap target —
       deliberately larger than the mockup's `flex: 1 1 0` side-by-side
       split because real phone use favours a confident full-width hit
       area over the desktop-style adjacent pair. */
    #main-content.cn-page-questionnaireeditor .cn-savebar__actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #main-content.cn-page-questionnaireeditor .cn-savebar #Save,
    #main-content.cn-page-questionnaireeditor .cn-savebar #Save .dx-button,
    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button,
    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-cancel-btn {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 14px !important;
    }
        /* Save button label — keep on one line; with full width there's
       plenty of room but ellipsis is a safety net for very narrow
       phones (≤ ~320 px legacy iPhone SE 1st-gen). */
        #main-content.cn-page-questionnaireeditor .cn-savebar .cn-save-cta.dx-button .dx-button-text {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            font-size: 14px !important;
        }

    #main-content.cn-page-questionnaireeditor .cn-savebar .cn-cancel-btn {
        font-size: 14px !important;
    }

    /* Reserve space below the page content so the last grid card row
       is never hidden under the fixed savebar. Stacked layout total:
       padding 18 + hint 22 + gap 6 + Save 44 + gap 8 + Cancel 44 + extra
       ≈ 142 px → 160 px reserve gives a comfortable margin. Overrides
       the desktop `padding-bottom: 0` rule above. */
    #main-content.cn-page-questionnaireeditor #section-content,
    #main-content.cn-page-questionnaireeditor #section-content > .container {
        padding-bottom: 160px !important;
    }

    /* Step chip moves below the title cleanly on phones. */
    #main-content.cn-page-questionnaireeditor .cn-providers-titlebar__action {
        margin-top: 4px;
    }

    /* Bootstrap .row negative margins guard. */
    #main-content.cn-page-questionnaireeditor #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   QUESTIONNAIRE PREVIEW   (/PracticeQuestionnaires/PreviewQuestionnaire/{id})
   Practice-admin page that renders the questionnaire exactly as
   a patient sees it before their visit. dxForm driven by a single
   `QuestionnaireList` AJAX fetch, with three render branches:
     • questionType 0 (Freeform) → dxTextArea (or dxNumberBox when
       textType = "INT", with format/min/max/keyDown for fieldId 7/8/17)
     • questionType 1 (Standard) → same dxTextArea/dxNumberBox split
     • questionType 2 (Choices)  → dxRadioGroup vertical (isMultiple = false)
                                   or stacked dxCheckBox with hidden-validator
                                   pattern (isMultiple = true)
   This section adds the polish for the patient-facing card chrome,
   question typography, radio + checkbox pill chrome, and mobile-first
   stacking. Scoped via #main-content.cn-page-questionnairepreview.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — tightened spacing
   consistent with the other practice-admin pages. ----- */
#main-content.cn-page-questionnairepreview .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- "PREVIEW" chip — gold variant of the Editor's navy chip,
   so the staff member instantly knows this is the patient-facing
   render, not the editor. ----- */
#main-content.cn-page-questionnairepreview .cn-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(209, 156, 70, .14);
    color: var(--cn-gold);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

#main-content.cn-page-questionnairepreview .cn-preview-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cn-gold);
}

/* ----- Patient-facing form card — same chrome family as
   .cn-form-card / .cn-grid-card so the Preview reads as part of
   the polished admin app. Tinted head (#F8FAFC) carries the
   questionnaire title (set via JS into #Title) + the
   "required = *" legend, then the divider, then the body. ----- */
#main-content.cn-page-questionnairepreview .cn-preview-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

#main-content.cn-page-questionnairepreview .cn-preview-card__head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: #F8FAFC;
}

    #main-content.cn-page-questionnairepreview .cn-preview-card__head h2 {
        margin: 0;
        font-family: var(--cn-font);
        font-size: 17px;
        font-weight: 700;
        color: var(--cn-text);
        letter-spacing: -.01em;
        line-height: 1.3;
    }

    #main-content.cn-page-questionnairepreview .cn-preview-card__head p {
        margin: 4px 0 0;
        font-family: var(--cn-font);
        font-size: 13px;
        color: var(--cn-text-2);
        line-height: 1.5;
    }

#main-content.cn-page-questionnairepreview .cn-preview-req-legend {
    color: var(--cn-danger);
    font-weight: 700;
}

#main-content.cn-page-questionnairepreview .cn-preview-card__body {
    padding: 8px 20px 24px;
}

@media (max-width: 540px) {
    #main-content.cn-page-questionnairepreview .cn-preview-card__head {
        padding: 14px;
    }

    #main-content.cn-page-questionnairepreview .cn-preview-card__body {
        padding: 4px 14px 16px;
    }
}

/* ----- Each question — vertical stack with breathing room, dashed
   bottom divider, red asterisk for required. Replaces the previous
   inline `.css({fontSize, color, marginBottom, fontWeight})` calls
   in PreviewQuestionnaire.cshtml. ----- */
#main-content.cn-page-questionnairepreview .cn-question {
    padding: 16px 0 4px;
    border-bottom: 1px dashed var(--cn-border);
}

    #main-content.cn-page-questionnairepreview .cn-question:last-child {
        border-bottom: 0;
    }

#main-content.cn-page-questionnairepreview .cn-question__label {
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1.4;
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

#main-content.cn-page-questionnairepreview .cn-question__req {
    color: var(--cn-danger);
    font-weight: 700;
}

#main-content.cn-page-questionnairepreview .cn-question__instr {
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-3);
    line-height: 1.45;
    margin: 0 0 10px;
}

#main-content.cn-page-questionnairepreview .cn-question__error {
    margin-top: 6px;
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-danger);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    #main-content.cn-page-questionnairepreview .cn-question__error svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

/* ----- dxTextArea / dxTextBox polish inside the preview card. DX's
   Material underline pseudo-elements are killed; outlined treatment
   with 6 px radius + navy focus ring + danger-red invalid state. ----- */
#main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor,
#main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor.dx-editor-outlined,
#main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor.dx-editor-filled,
#main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor.dx-editor-underlined {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 42px !important;
}

    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor::before,
    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor::after,
    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor-container::before,
    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor-container::after {
        display: none !important;
        content: none !important;
    }

    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor.dx-invalid {
        border-color: var(--cn-danger) !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
    }

#main-content.cn-page-questionnairepreview .cn-preview-card .dx-texteditor-input,
#main-content.cn-page-questionnairepreview .cn-preview-card textarea.dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    padding: 10px 12px !important;
    min-height: 22px !important;
    background: transparent !important;
    line-height: 1.45 !important;
}

#main-content.cn-page-questionnairepreview .cn-preview-card textarea.dx-texteditor-input {
    min-height: 44px !important;
}

/* ----- Number box — caps at 200 px on desktop (matches the
   `options.width = "200"` set in the cellTemplate for INT fields)
   and grows to 100% on phones so the digits stay readable. ----- */
#main-content.cn-page-questionnairepreview .cn-preview-card .dx-numberbox {
    max-width: 200px;
}

@media (max-width: 540px) {
    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-numberbox {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ----- Radio group (Choices, isMultiple = false) — vertical stack
   of pill-style options with navy-50 hover + checked state. The
   `layout: "vertical"` set in the cellTemplate gives us the column
   layout; the pill chrome is layered on the DX radiobutton. ----- */
#main-content.cn-page-questionnairepreview .cn-preview-card .dx-radiogroup .dx-collection {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#main-content.cn-page-questionnairepreview .cn-preview-card .dx-radiobutton {
    min-height: 42px;
    padding: 10px 12px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-radiobutton:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
    }

    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-radiobutton.dx-state-selected,
    #main-content.cn-page-questionnairepreview .cn-preview-card .dx-radiobutton.dx-radiobutton-checked {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
    }

#main-content.cn-page-questionnairepreview .cn-preview-card .dx-radio-value-container {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

#main-content.cn-page-questionnairepreview .cn-preview-card .dx-radiobutton-icon {
    width: 18px;
    height: 18px;
}

#main-content.cn-page-questionnairepreview .cn-preview-card .dx-radiobutton-text,
#main-content.cn-page-questionnairepreview .cn-preview-card .dx-item-content {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    line-height: 1.4 !important;
}

/* ----- Checkbox group (Choices, isMultiple = true) — same outlined
   pill chrome as the radio group for visual consistency. The
   `.cn-check-stack` wrapper replaces the previous inline
   `display: flex; flexDirection: column; gap: 8px` container. ----- */
#main-content.cn-page-questionnairepreview .cn-preview-card .cn-check-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    #main-content.cn-page-questionnairepreview .cn-preview-card .cn-check-stack .dx-checkbox {
        min-height: 42px;
        padding: 10px 12px;
        background: var(--cn-elev);
        border: 1px solid var(--cn-border-2);
        border-radius: var(--cn-radius);
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
    }

        #main-content.cn-page-questionnairepreview .cn-preview-card .cn-check-stack .dx-checkbox:hover {
            background: var(--cn-navy-50);
            border-color: var(--cn-navy);
        }

        #main-content.cn-page-questionnairepreview .cn-preview-card .cn-check-stack .dx-checkbox.dx-checkbox-checked {
            background: var(--cn-navy-50);
            border-color: var(--cn-navy);
        }

    #main-content.cn-page-questionnairepreview .cn-preview-card .cn-check-stack .dx-checkbox-text {
        font-family: var(--cn-font);
        font-size: 14px;
        color: var(--cn-text);
        line-height: 1.4;
    }

/* ----- Override the global `padding-bottom: 96px !important` from
   line ~1962 — the Preview page has no sticky footer, so the
   reserved 96 px would just show as dead whitespace below the card.
   The editor-scope specificity (2,1,0) beats the global (2,0,0)
   even with !important. ----- */
#main-content.cn-page-questionnairepreview #section-content {
    padding-bottom: 24px !important;
}

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* Step chip moves below the title cleanly on phones. */
    #main-content.cn-page-questionnairepreview .cn-providers-titlebar__action {
        margin-top: 4px;
    }
    /* Bootstrap .row negative margins guard — clip any wide widget
       so the page itself never scrolls sideways. */
    #main-content.cn-page-questionnairepreview #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   RESTORE QUESTIONNAIRES   (/PracticeQuestionnaires/RestoreQuestionnaires)
   Recycle-bin view for soft-deleted questionnaires. dxDataGrid
   backed by /RestoreQuestionnairesGet CustomStore, two columns
   (Name + Restore). Per-row Restore opens a DX dialog.confirm()
   and on Confirm POSTs `{ id, isActive: true }` to
   /RestoreQuestionnairesUpdate. This section adds polish only —
   muted recycle-bin chip in the titlebar, .cn-q-name cell, an
   outlined .cn-restore-btn that turns success-green on hover,
   confirm-dialog chrome, footer count + retention hint, mobile
   icon-only Restore button. Scoped via
   #main-content.cn-page-restorequestionnaires.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-restorequestionnaires .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- "RECYCLE BIN" chip — muted/slate variant of the .cn-step-chip
   used on Questionnaire Editor (navy "EDITING") and the gold
   "PREVIEW" chip on Preview Questionnaire. Tells staff at a glance
   that this view shows soft-deleted items, not the active list. ----- */
#main-content.cn-page-restorequestionnaires .cn-bin-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--cn-muted-bg);
    color: var(--cn-muted);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

    #main-content.cn-page-restorequestionnaires .cn-bin-chip svg {
        width: 13px;
        height: 13px;
    }

/* ----- Name cell — primary identity. Same primitive as the
   .cn-q-name used on the Questionnaire Editor question grid. ----- */
#main-content.cn-page-restorequestionnaires .cn-q-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.4;
    white-space: normal;
}

/* ----- Restore row button — outlined navy ghost pill, 32 px height,
   matches the .cn-restore-btn pattern already used on the
   RestoreVisitReasons recycle-bin page. Hover shifts to success
   green so the restorative intent reads before the user commits. */
#main-content.cn-page-restorequestionnaires .cn-row-actions {
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

#main-content.cn-page-restorequestionnaires .cn-restore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--cn-radius);
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    color: var(--cn-navy);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
}

    #main-content.cn-page-restorequestionnaires .cn-restore-btn:hover {
        background: var(--cn-success-bg);
        border-color: var(--cn-success);
        color: var(--cn-success);
    }

    #main-content.cn-page-restorequestionnaires .cn-restore-btn:focus-visible {
        outline: none;
        box-shadow: var(--cn-focus-ring);
        border-color: var(--cn-navy);
    }

    #main-content.cn-page-restorequestionnaires .cn-restore-btn svg {
        width: 13px;
        height: 13px;
    }

/* ----- Footer (count chip + retention hint). Sits as a sibling of
   the dxDataGrid inside .cn-grid-card. ----- */
#main-content.cn-page-restorequestionnaires .cn-grid-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--cn-border);
    background: #FAFBFC;
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.4;
}

@media (min-width: 640px) {
    #main-content.cn-page-restorequestionnaires .cn-grid-foot {
        padding: 12px 20px;
    }
}

#main-content.cn-page-restorequestionnaires .cn-grid-foot svg {
    width: 14px;
    height: 14px;
    color: var(--cn-text-3);
    flex: 0 0 14px;
}

#main-content.cn-page-restorequestionnaires .cn-grid-foot__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--cn-text);
}

    #main-content.cn-page-restorequestionnaires .cn-grid-foot__count .cn-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        background: var(--cn-muted-bg);
        color: var(--cn-muted);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

#main-content.cn-page-restorequestionnaires .cn-grid-foot__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ----- Override the legacy inline `.dx-link` color from the page's
   previous <style> block — keep links on-brand. ----- */
#main-content.cn-page-restorequestionnaires .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-restorequestionnaires .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline !important;
    }

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar wraps cleanly on phones. */
    #main-content.cn-page-restorequestionnaires #restorequestionnaires-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-restorequestionnaires #restorequestionnaires-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

    #main-content.cn-page-restorequestionnaires #restorequestionnaires-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    /* Restore button compresses to icon-only on phones — scoped to
       the rowsview ONLY so any future toolbar Restore button (none
       today) wouldn't be affected. */
    #main-content.cn-page-restorequestionnaires #restorequestionnaires-grid .dx-datagrid-rowsview .cn-restore-btn {
        height: 36px;
        padding: 0 9px;
    }

    #main-content.cn-page-restorequestionnaires #restorequestionnaires-grid .dx-datagrid-rowsview .cn-restore-btn__label {
        display: none;
    }

    #main-content.cn-page-restorequestionnaires #restorequestionnaires-grid .dx-datagrid-rowsview .cn-restore-btn svg {
        margin: 0;
    }

    /* Step chip drops below the title cleanly on phones. */
    #main-content.cn-page-restorequestionnaires .cn-providers-titlebar__action {
        margin-top: 4px;
    }

    /* Bootstrap .row negative margins guard — clip any wide widget
       so the page itself never scrolls sideways. */
    #main-content.cn-page-restorequestionnaires #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   USER ROLES   (/practiceuser/userroles/index)
   Practice-admin page for the per-practice Role catalog
   (Owner / Provider / Front Desk / Nurse / Billing / Viewer / …).
   dxDataGrid backed by /UserRoles/GetPracticeRoleList, three
   columns (3-dot trigger + Role displayName + Description). Each
   row's 3-dot trigger calls boxopen(id) which stashes the id in
   a hidden input that the dxContextMenu (Edit / Copy) reads on
   item click to build the createrole route:
     Edit  → /practiceuser/userroles/createrole/{id}/<empty>
     Copy  → /practiceuser/userroles/createrole/<empty>/{id}
   This section adds polish only — polished Role / Description
   cells, footer count + safety hint, mobile responsiveness.
   The 3-dot trigger chrome (32 × 32 button + navy hover) and the
   .cn-action-menu context-menu polish (icon tile + label +
   chev row) come from the design-system primitives at the top
   of this file — User Roles inherits them automatically by
   using the same `<div id="click">` markup + `cssClass:
   "cn-action-menu"` config. Scoped via
   #main-content.cn-page-userroles.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-userroles .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Role identity cell — primary line. Same primitive
   typography as the .cn-q-name pattern used on Questionnaire
   Editor / Restore Questionnaires so every grid identity cell
   reads identically across the app. ----- */
#main-content.cn-page-userroles .cn-role-name {
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.4;
    white-space: normal;
}

/* ----- Description cell — muted secondary copy. Limits to a
   readable max-width so a verbose description doesn't push the
   Role column off-screen on narrow viewports. ----- */
#main-content.cn-page-userroles .cn-role-desc {
    display: inline-block;
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cn-text-3);
    line-height: 1.45;
    max-width: 56ch;
    white-space: normal;
}

/* ----- Footer (count chip + safety hint). Sits as a sibling of
   the dxDataGrid inside .cn-grid-card. ----- */
#main-content.cn-page-userroles .cn-grid-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--cn-border);
    background: #FAFBFC;
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.4;
}

@media (min-width: 640px) {
    #main-content.cn-page-userroles .cn-grid-foot {
        padding: 12px 20px;
    }
}

#main-content.cn-page-userroles .cn-grid-foot svg {
    width: 14px;
    height: 14px;
    color: var(--cn-text-3);
    flex: 0 0 14px;
}

#main-content.cn-page-userroles .cn-grid-foot__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--cn-text);
}

    #main-content.cn-page-userroles .cn-grid-foot__count .cn-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

#main-content.cn-page-userroles .cn-grid-foot__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ----- Override the legacy inline `.dx-link` color from the
   page's previous <style> block — keep links on-brand. ----- */
#main-content.cn-page-userroles .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-userroles .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
    }

/* ----- The 3-dot trigger's inner span carries inline-style
   `color: #3f51b5` from production. Override on-brand. The DX
   icon-overflow glyph itself is still rendered via the icon-
   font preservation block at the top of this file. ----- */
#main-content.cn-page-userroles .dx-data-row td > #click span.dx-icon-overflow {
    color: inherit !important;
}

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* DX's built-in toolbar wraps cleanly on phones. */
    #main-content.cn-page-userroles #role-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-userroles #role-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

    #main-content.cn-page-userroles #role-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    /* Title bar — Add CTA drops below the title and stretches
       full-width so it's tappable. */
    #main-content.cn-page-userroles .cn-providers-titlebar {
        flex-direction: column;
        align-items: stretch;
    }

    #main-content.cn-page-userroles .cn-providers-titlebar__action {
        width: 100%;
        margin-top: 4px;
    }

        #main-content.cn-page-userroles .cn-providers-titlebar__action #NewRole,
        #main-content.cn-page-userroles .cn-providers-titlebar__action #NewRole .dx-button {
            width: 100% !important;
        }

    /* Description column truncates rather than wrapping to many
       lines so each row stays compact. */
    #main-content.cn-page-userroles .cn-role-desc {
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Bootstrap .row negative margins guard — clip any wide widget
       so the page itself never scrolls sideways. */
    #main-content.cn-page-userroles #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   CREATE / EDIT ROLE   (/practiceuser/userroles/createrole/{id}/{copyId})
   Two-section page:
     1) Metadata dxForm card — Role Name + Role Description with
        `required` + async name-uniqueness validation against
        /UserRoles/CheckRoleName.
     2) Access-to card — master "Select all" dxCheckBox in the head,
        legend strip (Not granted / Granted / Explicitly denied),
        then one `.cn-perm-group` per PermissionGroup containing
        the group dxCheckBox (toggles every permission in its group)
        and a responsive `.cn-perm-grid` of per-permission
        dxCheckBoxes with `enableThreeStateBehavior: true`.
   This section adds polish only — visual chrome for the cards,
   permission-group icon tiles, responsive 4 / 3 / 2 / 1-column
   permission grid, three-state checkbox theme (navy granted /
   danger denied), sticky save bar, mobile responsiveness.
   Scoped via #main-content.cn-page-createrole.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on the other practice-admin pages. ----- */
#main-content.cn-page-createrole .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- "NEW ROLE" / "EDITING" chip — navy variant of the
   .cn-step-chip used on Questionnaire Editor. ----- */
#main-content.cn-page-createrole .cn-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

#main-content.cn-page-createrole .cn-step-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cn-navy);
}

/* ----- dxForm input polish (Role Name + Description) — outlined
   look, navy focus ring, danger-red invalid state, warn-amber
   validation-pending state for the async name check. The shared
   .cn-form-card primitive at the top of the file already covers
   the wrapper chrome + .cn-form-card__head h2 / p typography. ----- */
#main-content.cn-page-createrole .cn-form-card .dx-field-item-label-text {
    font-family: var(--cn-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .02em;
}

#main-content.cn-page-createrole .cn-form-card .dx-texteditor,
#main-content.cn-page-createrole .cn-form-card .dx-texteditor.dx-editor-outlined,
#main-content.cn-page-createrole .cn-form-card .dx-texteditor.dx-editor-filled,
#main-content.cn-page-createrole .cn-form-card .dx-texteditor.dx-editor-underlined {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 38px !important;
}

    #main-content.cn-page-createrole .cn-form-card .dx-texteditor::before,
    #main-content.cn-page-createrole .cn-form-card .dx-texteditor::after,
    #main-content.cn-page-createrole .cn-form-card .dx-texteditor-container::before,
    #main-content.cn-page-createrole .cn-form-card .dx-texteditor-container::after {
        display: none !important;
        content: none !important;
    }

    #main-content.cn-page-createrole .cn-form-card .dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

    #main-content.cn-page-createrole .cn-form-card .dx-texteditor.dx-invalid {
        border-color: var(--cn-danger) !important;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
    }

    #main-content.cn-page-createrole .cn-form-card .dx-texteditor.dx-validation-pending {
        border-color: var(--cn-warn) !important;
        box-shadow: 0 0 0 3px rgba(180, 83, 9, .15) !important;
    }

#main-content.cn-page-createrole .cn-form-card .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    background: transparent !important;
}

/* ----- Access-to card — same chrome family as .cn-form-card +
   .cn-grid-card but with a slightly tinted head for a clear
   "this is a permissions block" affordance. ----- */
#main-content.cn-page-createrole .cn-access-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

#main-content.cn-page-createrole .cn-access-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: #F8FAFC;
}

    #main-content.cn-page-createrole .cn-access-card__head h2 {
        margin: 0;
        font-family: var(--cn-font);
        font-size: 15px;
        font-weight: 700;
        color: var(--cn-text);
        letter-spacing: -.005em;
        line-height: 1.3;
    }

    #main-content.cn-page-createrole .cn-access-card__head p {
        margin: 2px 0 0;
        font-family: var(--cn-font);
        font-size: 12.5px;
        color: var(--cn-text-2);
        line-height: 1.45;
    }

#main-content.cn-page-createrole .cn-access-card__head__text {
    flex: 1;
    min-width: 0;
}

#main-content.cn-page-createrole .cn-access-card__head__action {
    flex: 0 0 auto;
}

@media (max-width: 540px) {
    #main-content.cn-page-createrole .cn-access-card__head {
        padding: 14px;
    }
}

/* ----- Master Select-all dxCheckBox in the access-card head —
   pulls the production-rendered dxCheckBox into an outlined pill
   so it reads as a discrete action affordance. ----- */
#main-content.cn-page-createrole .cn-access-card__head .cn-select-all-check.dx-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    transition: background 120ms ease, border-color 120ms ease;
}

    #main-content.cn-page-createrole .cn-access-card__head .cn-select-all-check.dx-checkbox:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

    #main-content.cn-page-createrole .cn-access-card__head .cn-select-all-check.dx-checkbox .dx-checkbox-text {
        margin-left: 8px !important;
        font-family: var(--cn-font);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--cn-text);
    }

/* ----- Legend strip — explains the three checkbox states. ----- */
#main-content.cn-page-createrole .cn-perm-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: #FAFBFC;
    border-bottom: 1px solid var(--cn-border);
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-2);
}

#main-content.cn-page-createrole .cn-perm-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#main-content.cn-page-createrole .cn-perm-legend__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--cn-elev);
    border: 1.5px solid var(--cn-border-2);
}

#main-content.cn-page-createrole .cn-perm-legend__swatch--on {
    background: var(--cn-navy);
    border-color: var(--cn-navy);
}

#main-content.cn-page-createrole .cn-perm-legend__swatch--denied {
    background: var(--cn-danger);
    border-color: var(--cn-danger);
}

@media (max-width: 540px) {
    #main-content.cn-page-createrole .cn-perm-legend {
        padding: 10px 14px;
    }
}

/* ----- Permission group — one row per PermissionGroup. Header
   line (icon tile + group dxCheckBox label) above the responsive
   grid of per-permission dxCheckBoxes. ----- */
#main-content.cn-page-createrole .cn-perm-group {
    border-top: 1px solid var(--cn-border);
    padding: 14px 20px;
}

    #main-content.cn-page-createrole .cn-perm-group:first-of-type {
        border-top: 0;
    }

@media (max-width: 540px) {
    #main-content.cn-page-createrole .cn-perm-group {
        padding: 14px;
    }
}

#main-content.cn-page-createrole .cn-perm-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

#main-content.cn-page-createrole .cn-perm-group__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--cn-radius);
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-createrole .cn-perm-group__icon svg {
        width: 16px;
        height: 16px;
    }

#main-content.cn-page-createrole .cn-perm-group__toggle-host {
    flex: 1;
    min-width: 0;
}
    /* The dxCheckBox that production hydrates into the group slot —
   bump its label to read as a section heading. */
    #main-content.cn-page-createrole .cn-perm-group__toggle-host .dx-checkbox .dx-checkbox-text {
        margin-left: 8px !important;
        font-family: var(--cn-font);
        font-size: 13.5px;
        font-weight: 700;
        color: var(--cn-text);
        line-height: 1.3;
    }

/* ----- Responsive permission grid — 4 / 3 / 2 / 1 columns. ----- */
#main-content.cn-page-createrole .cn-perm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding-left: 44px;
}

@media (min-width: 480px) {
    #main-content.cn-page-createrole .cn-perm-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 760px) {
    #main-content.cn-page-createrole .cn-perm-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    #main-content.cn-page-createrole .cn-perm-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width: 540px) {
    #main-content.cn-page-createrole .cn-perm-grid {
        padding-left: 0;
    }
}

/* Per-permission row wrapper — gives each dxCheckBox a polished
   hover row chrome. */
#main-content.cn-page-createrole .cn-perm-item {
    border-radius: var(--cn-radius);
    padding: 4px 8px;
    min-height: 38px;
    display: flex;
    align-items: center;
    transition: background 120ms ease;
}

    #main-content.cn-page-createrole .cn-perm-item:hover {
        background: var(--cn-navy-50);
    }

    #main-content.cn-page-createrole .cn-perm-item .dx-checkbox-text {
        margin-left: 8px !important;
        font-family: var(--cn-font);
        font-size: 13px;
        color: var(--cn-text);
        line-height: 1.35;
    }

/* ----- Three-state dxCheckBox theme — navy granted, danger
   denied. Defeats the page's previous inline `<style>` block that
   used an unbordered red 1em square for indeterminate; replaces
   it with a proper danger-tinted box matching the design system. */
#main-content.cn-page-createrole .dx-checkbox-icon {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 1.5px solid var(--cn-border-2) !important;
    background: var(--cn-elev) !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

#main-content.cn-page-createrole .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
    background: var(--cn-navy) !important;
    border-color: var(--cn-navy) !important;
    color: #fff !important;
}

#main-content.cn-page-createrole .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon {
    background: var(--cn-danger) !important;
    border-color: var(--cn-danger) !important;
    color: #fff !important;
    font: inherit !important;
}
    /* Override the legacy `::before { background: red; … }` red-square
   pseudo from the page's old inline <style> block — replace with a
   small white dash to read as "explicitly denied". */
    #main-content.cn-page-createrole .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon::before {
        content: '' !important;
        background: #fff !important;
        width: 10px !important;
        height: 2px !important;
        border-radius: 1px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin: -1px 0 0 -5px !important;
        display: block !important;
    }

/* ----- Save bar — Cancel + Save side-by-side at desktop, fixed
   full-bleed bottom on phones. Same pattern as the Questionnaire
   Editor mobile polish. ----- */
#main-content.cn-page-createrole .cn-savebar {
    position: sticky;
    left: auto;
    right: auto;
    bottom: 0;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-md);
    padding: 14px 20px;
    margin-top: 16px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 20;
}

#main-content.cn-page-createrole .cn-savebar__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cn-text-2);
    font-size: 13px;
    line-height: 1.4;
    min-width: 0;
    flex: 1 1 240px;
}

    #main-content.cn-page-createrole .cn-savebar__hint svg {
        width: 16px;
        height: 16px;
        color: var(--cn-text-3);
        flex: 0 0 16px;
    }

    #main-content.cn-page-createrole .cn-savebar__hint b {
        color: var(--cn-text);
        font-weight: 700;
    }

#main-content.cn-page-createrole .cn-savebar__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Save button (#Save .dx-button) — navy filled primary; override
   the global `width: 120px !important` lock from line ~2029 so
   "Save role" doesn't get clipped. */
#main-content.cn-page-createrole .cn-savebar #Save,
#main-content.cn-page-createrole .cn-savebar #Save .dx-button,
#main-content.cn-page-createrole .cn-savebar .cn-save-cta.dx-button {
    background: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    box-shadow: var(--cn-shadow-sm) !important;
    flex: 0 0 auto !important;
}
    /* Save label — brand font. */
    #main-content.cn-page-createrole .cn-savebar .cn-save-cta.dx-button .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }
    /* Save icon — KEEP the DXIcons font intact so the `icon: "save"`
   glyph (a private-area Unicode codepoint shipped with DX) renders.
   The earlier combined rule applied `font-family: var(--cn-font)` to
   `.dx-icon` too, replacing DXIcons with the system stack and rendering
   the codepoint as a missing-glyph rectangle. Only color + size are
   safe to override here. */
    #main-content.cn-page-createrole .cn-savebar .cn-save-cta.dx-button .dx-icon {
        color: #fff !important;
        font-size: 16px !important;
    }

        #main-content.cn-page-createrole .cn-savebar .cn-save-cta.dx-button .dx-icon::before {
            font-family: "DXIcons" !important;
            color: #fff !important;
        }

    #main-content.cn-page-createrole .cn-savebar .cn-save-cta.dx-button:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
    }

/* Cancel anchor — outlined ghost matching Save's 42 px height. */
#main-content.cn-page-createrole .cn-savebar .cn-cancel-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 42px !important;
    min-height: 42px !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: none !important;
    padding: 0 16px !important;
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    color: var(--cn-navy) !important;
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #main-content.cn-page-createrole .cn-savebar .cn-cancel-btn:hover,
    #main-content.cn-page-createrole .cn-savebar .cn-cancel-btn:focus {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
        color: var(--cn-navy-2) !important;
        text-decoration: none !important;
    }

/* Page bottom padding — zero on desktop (sticky bar sits in flow);
   reserved on mobile for the fixed bar. */
#main-content.cn-page-createrole #section-content {
    padding-bottom: 24px !important;
}

/* ----- Mobile ----- */
@media (max-width: 540px) {
    /* Step chip drops below the title cleanly. */
    #main-content.cn-page-createrole .cn-providers-titlebar__action {
        margin-top: 4px;
    }

    /* Sticky save bar → fixed full-bleed bottom action bar.
       Compact: hint single line + Save / Cancel stacked full-width
       with Save on top (closest to thumb). */
    #main-content.cn-page-createrole .cn-savebar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .08) !important;
        margin: 0 !important;
        padding: 8px 14px 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        z-index: 40;
    }
    /* Hint text on phones — let it wrap naturally to as many lines
       as the sentence needs. The earlier `white-space: nowrap +
       text-overflow: ellipsis` combo forced a single line and
       truncated mid-word ("…the practice. Yo") at 375 px viewports.
       Two-to-three short lines of 11.5 px copy is acceptable on
       phones — the bar's bottom-padding reserve accounts for it. */
    #main-content.cn-page-createrole .cn-savebar__hint {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: center;
        gap: 6px !important;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        flex: 0 0 auto !important;
        min-width: 0;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 2px 4px;
    }

        #main-content.cn-page-createrole .cn-savebar__hint > span {
            flex: 1 1 auto;
            min-width: 0;
        }

        #main-content.cn-page-createrole .cn-savebar__hint svg {
            width: 13px !important;
            height: 13px !important;
            flex: 0 0 13px !important;
            margin-top: 2px;
        }

    #main-content.cn-page-createrole .cn-savebar__actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #main-content.cn-page-createrole .cn-savebar #Save,
    #main-content.cn-page-createrole .cn-savebar #Save .dx-button,
    #main-content.cn-page-createrole .cn-savebar .cn-save-cta.dx-button,
    #main-content.cn-page-createrole .cn-savebar .cn-cancel-btn {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 14px !important;
    }

    /* Reserve space below the page so the last permission group
       isn't hidden under the fixed savebar. With the hint now
       wrapping to up to 3 lines on narrow phones (~52 px) + 6 px
       gap + Save 44 + 8 + Cancel 44 + 18 px padding ≈ 172 px →
       200 px gives a safe margin including the deepest wrap case. */
    #main-content.cn-page-createrole #section-content,
    #main-content.cn-page-createrole #section-content > .container {
        padding-bottom: 200px !important;
    }

        /* Bootstrap .row negative margins guard. */
        #main-content.cn-page-createrole #section-content > .container {
            overflow-x: hidden;
        }
}

/* ════════════════════════════════════════════════════════════
   USERS   (/practiceuser/users)
   Practice-admin page for the per-practice user directory
   (providers + staff). dxDataGrid backed by /practiceuser/users/
   GetUserList, four columns (Name + Email + Phone Number + Role).
   Name-link → /practiceuser/users/edit/{id} via the global
   `edit(id)` handler. Title-bar carries two CTAs:
     • Provider → /practiceuser/users/provider/<empty-GUID>
                  (navy filled primary — clinical user)
     • Staff    → /practiceuser/users/staff/<empty-GUID>
                  (outlined ghost secondary — non-clinical user)
   This section adds polish only — identity cell with avatar in the
   Name column, mono Email + Phone cells, color-coded Role pill,
   grid card chrome, footer count + hint, mobile responsiveness.
   Scoped via #main-content.cn-page-users.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar ----- */
#main-content.cn-page-users .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----- Title-bar action — Provider + Staff CTAs sit side by side
   on desktop, stack full-width on phones. The default 42 px
   .dx-button-default primitive at the top of this file already
   styles the Provider button as navy primary; the Staff button
   gets the outlined-secondary treatment below. ----- */
#main-content.cn-page-users .cn-providers-titlebar__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* ----- Staff CTA — outlined ghost. Production renders it as a
   `type: 'normal'` dxButton with `elementAttr.class: "cn-staff-cta"`
   and `stylingMode: 'outlined'`. Bump it to match the 42 px
   Provider primary in the title row (default .custom-edit-btn
   primitive is 32 px). ----- */
#main-content.cn-page-users .cn-staff-cta.dx-button,
#main-content.cn-page-users .cn-staff-cta.dx-button.dx-button-mode-outlined {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    min-width: 110px !important;
}

    #main-content.cn-page-users .cn-staff-cta.dx-button:hover,
    #main-content.cn-page-users .cn-staff-cta.dx-button.dx-button-mode-outlined:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

    #main-content.cn-page-users .cn-staff-cta.dx-button .dx-button-text {
        color: var(--cn-navy) !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    #main-content.cn-page-users .cn-staff-cta.dx-button .dx-icon {
        color: var(--cn-navy) !important;
    }

        #main-content.cn-page-users .cn-staff-cta.dx-button .dx-icon::before {
            font-family: "DXIcons" !important;
            color: var(--cn-navy) !important;
        }

/* ----- Force left alignment on every data cell so identity / mono /
   pill cells hug the left edge of their column. DX's column-level
   `alignment: "left"` is now set in the cshtml; this is the
   belt-and-suspenders CSS guard against any DX-Material default
   centering that would otherwise indent the row content past the
   column header label. ----- */
#main-content.cn-page-users .dx-datagrid-rowsview .dx-data-row > td,
#main-content.cn-page-users .dx-datagrid-rowsview .dx-data-row > td > * {
    text-align: left !important;
}

/* ----- Identity cell (avatar + name link) — same primitive as
   Practice Providers / Patients. Production renders a bare `<a>`;
   polish wraps with `.cn-identity` + `.cn-avatar` + right-chevron
   for a consistent admin-grid identity affordance. `display: flex`
   (not `inline-flex`) + `width: 100%` ensures the container fills
   the cell from the left edge — `inline-flex` was making DX center
   the block at certain column widths because it was treated as
   inline content. ----- */
#main-content.cn-page-users .cn-identity {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

#main-content.cn-page-users .cn-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font);
    font-weight: 700;
    font-size: 12.5px;
    border: 1px solid rgba(12, 84, 148, .12);
    text-transform: uppercase;
    letter-spacing: 0;
}

#main-content.cn-page-users .cn-avatar--gold {
    background: rgba(209,156,70,.16);
    color: var(--cn-gold);
    border-color: rgba(209,156,70,.25);
}

#main-content.cn-page-users .cn-avatar--mint {
    background: var(--cn-success-bg);
    color: var(--cn-success);
    border-color: rgba(4,120,87,.18);
}

#main-content.cn-page-users .cn-avatar--slate {
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
    border-color: var(--cn-border);
}

#main-content.cn-page-users .cn-identity__text {
    min-width: 0;
    flex: 1;
}

#main-content.cn-page-users .cn-identity__name {
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-navy);
    text-decoration: none;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 120ms ease;
}

    #main-content.cn-page-users .cn-identity__name:hover {
        color: var(--cn-navy-2);
        text-decoration: underline;
    }

    #main-content.cn-page-users .cn-identity__name svg {
        width: 12px;
        height: 12px;
        color: var(--cn-text-3);
        transition: transform 120ms ease, color 120ms ease;
    }

    #main-content.cn-page-users .cn-identity__name:hover svg {
        color: var(--cn-navy);
        transform: translateX(2px);
    }

/* ----- Email + Phone cells — monospaced, scannable, ellipsis on
   overflow. ----- */
#main-content.cn-page-users .cn-mono {
    font-family: var(--cn-font-mono);
    font-size: 13px;
    color: var(--cn-text-2);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

/* ----- Role pills container — production stores a user's roles
   as a single comma-separated string. The cellTemplate splits on
   commas and renders each role as its own compact pill, wrapped
   in this flex container so multiple roles wrap to multiple lines
   cleanly without stretching the row vertically more than needed. */
#main-content.cn-page-users .cn-role-pills {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    max-width: 100%;
}

/* Role pill — color-coded chip per role. Provider tints
   success-green (clinical), Practice Owner tints gold (admin),
   Read-only Viewer tints muted slate (default fallback), every
   other role uses the navy-50 default. */
#main-content.cn-page-users .cn-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 100%;
}

    #main-content.cn-page-users .cn-role-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex: 0 0 6px;
    }

#main-content.cn-page-users .cn-role-pill--provider {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

#main-content.cn-page-users .cn-role-pill--owner {
    background: rgba(209, 156, 70, .14);
    color: var(--cn-gold);
}

#main-content.cn-page-users .cn-role-pill--muted {
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
}

/* ----- Footer (count chip + hint) ----- */
#main-content.cn-page-users .cn-grid-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--cn-border);
    background: #FAFBFC;
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.4;
}

@media (min-width: 640px) {
    #main-content.cn-page-users .cn-grid-foot {
        padding: 12px 20px;
    }
}

#main-content.cn-page-users .cn-grid-foot svg {
    width: 14px;
    height: 14px;
    color: var(--cn-text-3);
    flex: 0 0 14px;
}

#main-content.cn-page-users .cn-grid-foot__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--cn-text);
}

    #main-content.cn-page-users .cn-grid-foot__count .cn-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

#main-content.cn-page-users .cn-grid-foot__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ----- Override the legacy inline `.dx-link` indigo color from the
   page's previous <style> block — keep links on-brand. ----- */
#main-content.cn-page-users .dx-datagrid .dx-link {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--cn-navy);
}

    #main-content.cn-page-users .dx-datagrid .dx-link:hover {
        color: var(--cn-navy-2);
    }

/* ----- Mobile ----- */
@media (max-width: 600px) {
    /* Identity cell tightens: avatar shrinks, mono cells use a
       smaller font so the Email column doesn't dominate the row. */
    #main-content.cn-page-users .cn-avatar {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        font-size: 11.5px;
    }

    #main-content.cn-page-users .cn-identity {
        gap: 8px;
    }

    #main-content.cn-page-users .cn-mono {
        font-size: 12.5px;
    }
}

@media (max-width: 540px) {
    /* DX's built-in toolbar wraps cleanly on phones. */
    #main-content.cn-page-users #user-grid .dx-datagrid-header-panel {
        padding: 12px !important;
    }

        #main-content.cn-page-users #user-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

    #main-content.cn-page-users #user-grid .dx-datagrid-search-panel.dx-texteditor {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    /* Title bar — CTAs drop below the title and stretch to share
       the full width. Each becomes a 50% slice via `flex: 1 1 0`. */
    #main-content.cn-page-users .cn-providers-titlebar {
        flex-direction: column;
        align-items: stretch;
    }

    #main-content.cn-page-users .cn-providers-titlebar__action {
        width: 100%;
        margin-top: 4px;
        display: flex;
    }

        #main-content.cn-page-users .cn-providers-titlebar__action > div {
            flex: 1 1 0;
        }

        #main-content.cn-page-users .cn-providers-titlebar__action #Provider .dx-button,
        #main-content.cn-page-users .cn-providers-titlebar__action #Staff .dx-button,
        #main-content.cn-page-users .cn-providers-titlebar__action #Provider,
        #main-content.cn-page-users .cn-providers-titlebar__action #Staff {
            width: 100% !important;
        }

    /* Bootstrap .row negative margins guard. */
    #main-content.cn-page-users #section-content > .container {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════
   CREATE PROVIDER   (/ProviderManagement/CreateProvider/{id})
   The existing page already uses the design-system primitives
   (.cn-back, .cn-area, .cn-title, .cn-section-card group captions,
   .cn-roles-card, .cn-savebar / .cn-savebar__inner / .cn-cancel-btn
   + #Save dxButton). This section adds the polish pieces from the
   provider-v2.html mockup that weren't yet present: a subtitle
   under the title, a mode chip (New provider / Editing provider)
   in the title-row action slot, and defensive spacing so the chip
   wraps cleanly on mobile. Scoped via
   #main-content.cn-page-createprovider so nothing leaks to the
   Practice Providers list or the practiceuser/users/provider page.
   ════════════════════════════════════════════════════════════ */

/* ----- Subtitle inside the titlebar — same tightened spacing
   used on every other polished form page. ----- */
#main-content.cn-page-createprovider .cn-providers-titlebar .cn-subtitle {
    margin: 4px 0 0;
    max-width: 64ch;
    font-family: var(--cn-font);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cn-text-2);
}

/* ----- Mode chip — green "NEW PROVIDER" by default (clinical user
   adds to the practice for the first time), switches to navy
   "EDITING PROVIDER" when the page is rendering an existing
   provider's profile. JS toggles the `.cn-step-chip--editing`
   modifier based on Model.Id. ----- */
#main-content.cn-page-createprovider .cn-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--cn-success-bg);
    color: var(--cn-success);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

#main-content.cn-page-createprovider .cn-step-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cn-success);
}

#main-content.cn-page-createprovider .cn-step-chip--editing {
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

    #main-content.cn-page-createprovider .cn-step-chip--editing .cn-step-chip__dot {
        background: var(--cn-navy);
    }

/* ----- Tighten the titlebar gap so the H1 + subtitle pair reads
   as one block + the chip sits aligned to the top of the H1 (not
   centered against the full text height). ----- */
#main-content.cn-page-createprovider .cn-providers-titlebar {
    align-items: flex-start;
}

#main-content.cn-page-createprovider .cn-providers-titlebar__action {
    margin-top: 6px;
    flex: 0 0 auto;
}

/* ----- Mobile — chip drops below the title cleanly and stays
   left-aligned with the H1. ----- */
@media (max-width: 540px) {
    #main-content.cn-page-createprovider .cn-providers-titlebar {
        flex-direction: column;
        align-items: stretch;
    }

    #main-content.cn-page-createprovider .cn-providers-titlebar__action {
        margin-top: 4px;
        align-self: flex-start;
    }
    /* Bootstrap .row negative margins guard. */
    #main-content.cn-page-createprovider #section-content > .container {
        overflow-x: hidden;
    }
}


/* ╔════════════════════════════════════════════════════════════╗
   ║                                                            ║
   ║   DESIGN-SYSTEM PRIMITIVES — NATIVE FORM PATTERN           ║
   ║                                                            ║
   ║   Shared classes used by pages built on native HTML        ║
   ║   inputs instead of the dxForm widget chrome (e.g.         ║
   ║   PracticeDetails/modifypractice). Authored as globals     ║
   ║   so any future page can reuse them without forking the    ║
   ║   stylesheet.                                              ║
   ║                                                            ║
   ║   Sections:                                                ║
   ║     1. .cn-btn — primary / ghost / danger-ghost button     ║
   ║     2. .cn-form-grid — responsive 1 → 2 → 3 column grid    ║
   ║     3. .cn-field / .cn-input / .cn-select — native fields  ║
   ║     4. .cn-brand-tile pattern — logo upload preview + UI   ║
   ║     5. .cn-savebar--card — sticky-card savebar variant     ║
   ║                                                            ║
   ╚════════════════════════════════════════════════════════════╝ */


/* ============================================================
   1. .cn-btn — primary / ghost / danger-ghost
   ============================================================ */
.cn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--cn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

    .cn-btn:focus-visible {
        outline: 0;
        box-shadow: var(--cn-focus-ring);
    }

    .cn-btn svg {
        width: 14px;
        height: 14px;
    }

.cn-btn--primary {
    background: var(--cn-navy);
    color: #fff;
    border-color: var(--cn-navy);
}

    .cn-btn--primary:hover {
        background: var(--cn-navy-2);
        border-color: var(--cn-navy-2);
        color: #fff;
        text-decoration: none;
    }

.cn-btn--ghost {
    background: var(--cn-elev);
    color: var(--cn-text);
    border-color: var(--cn-border-2);
}

    .cn-btn--ghost:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy);
        text-decoration: none;
    }

.cn-btn--danger-ghost {
    background: var(--cn-elev);
    color: var(--cn-danger);
    border-color: var(--cn-border-2);
}

    .cn-btn--danger-ghost:hover {
        background: var(--cn-danger-bg);
        border-color: var(--cn-danger);
        color: var(--cn-danger);
        text-decoration: none;
    }


/* ============================================================
   2. .cn-form-grid — responsive 1 → 2 → 3 column grid
   Default: 1 col mobile, 2 col tablet (≥600 px), 3 col
   desktop (≥960 px). Modifier `.cn-form-grid--2` caps at 2.
   ============================================================ */
.cn-form-grid {
    display: grid;
    gap: 14px 18px;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .cn-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 960px) {
    .cn-form-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.cn-form-grid--2 {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .cn-form-grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   3. .cn-field / .cn-field__label / .cn-input / .cn-select
   Native field primitives. Same visual contract as the
   dxForm outlined editors so pages can mix native + DX
   without the chrome looking inconsistent.
   ============================================================ */
.cn-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cn-field__label {
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-text-2);
    letter-spacing: .02em;
    line-height: 1.3;
}

    .cn-field__label .req {
        color: var(--cn-danger);
        margin-left: 2px;
    }

.cn-input {
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--cn-text);
    height: 38px;
    padding: 8px 12px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    width: 100%;
}

    .cn-input::placeholder {
        color: var(--cn-text-3);
    }

    .cn-input:focus {
        outline: 0;
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }

    .cn-input:invalid:not(:placeholder-shown) {
        border-color: var(--cn-danger);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
    }

.cn-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--cn-text-2) 50%), linear-gradient(135deg, var(--cn-text-2) 50%, transparent 50%);
    background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
    cursor: pointer;
}


/* ============================================================
   4. .cn-brand-tile pattern — logo upload preview + actions
   Reusable by any page that uploads a logo/avatar/image.
   Tile is 180×180 desktop, full-width up to 320 px on mobile.
   Empty state: 2 px dashed border + placeholder SVG.
   Filled state: 1 px solid border (toggle via `.has-logo`).
   ============================================================ */
.cn-brand-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.cn-brand-tile {
    width: 180px;
    height: 180px;
    flex: 0 0 180px;
    border: 2px dashed var(--cn-border-2);
    border-radius: var(--cn-radius-lg);
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cn-text-3);
    overflow: hidden;
    position: relative;
}

    .cn-brand-tile.has-logo {
        border-style: solid;
        border-width: 1px;
        border-color: var(--cn-border);
        background: #fff;
    }

.cn-brand-tile__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}

.cn-brand-tile__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .cn-brand-tile__placeholder svg {
        width: 36px;
        height: 36px;
        color: var(--cn-text-3);
    }

.cn-brand-actions {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.cn-brand-actions__hint {
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    line-height: 1.5;
    margin: 0;
}

    .cn-brand-actions__hint b {
        color: var(--cn-text);
        font-weight: 700;
    }

.cn-brand-actions__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /* 10 px gap — matches the mockup's .cn-brand-actions__buttons spec.
       Tight enough that the two pills read as a single action group,
       loose enough that each button has a clear hit area. */
    gap: 10px;
    margin-top: 4px;
}

/* Mobile fallback: very narrow viewports (≤400 px) allow the row
   to wrap so the buttons don't overflow horizontally. By that
   point the whole branding section has already stacked logo +
   actions vertically, so there's adequate room. */
@media (max-width: 400px) {
    .cn-brand-actions__buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 540px) {
    .cn-brand-tile {
        width: 100%;
        max-width: 320px;
        height: 200px;
        flex: 0 0 auto;
    }

    .cn-brand-row {
        gap: 14px;
    }
}


/* ============================================================
   5. .cn-savebar--card — sticky-card savebar variant
   The default .cn-savebar above is `position: fixed` and
   expects a `.cn-savebar__inner` wrapper + DevExtreme #Save
   button. This card variant is `position: sticky` inside its
   parent, rendered as a rounded card, and accepts `.cn-btn`
   children directly. Use this on pages that are built from
   native HTML buttons rather than DX widgets (e.g.
   PracticeDetails/modifypractice).

   Higher specificity (.cn-savebar.cn-savebar--card) so it
   overrides the default `position: fixed` cleanly.
   ============================================================ */
.cn-savebar.cn-savebar--card {
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-md);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    z-index: 5;
}

    .cn-savebar.cn-savebar--card .cn-btn {
        min-width: 120px;
        height: 44px;
    }

@media (max-width: 480px) {
    .cn-savebar.cn-savebar--card {
        padding: 12px;
    }

        .cn-savebar.cn-savebar--card .cn-btn {
            flex: 1 1 0;
            min-width: 0;
        }
}


/* ╔════════════════════════════════════════════════════════════╗
   ║                                                            ║
   ║   .cn-brand-actions — dxFileUploader + dxButton chrome     ║
   ║                                                            ║
   ║   The dxFileUploader widget wraps its select button in     ║
   ║   several layout containers that default to display:block  ║
   ║   and width: 100%, which pushes any sibling action button  ║
   ║   to the next row. These rules collapse those wrappers     ║
   ║   so the file-picker button + Remove button sit inline as  ║
   ║   pill buttons matching .cn-btn--primary / --danger-ghost. ║
   ║                                                            ║
   ╚════════════════════════════════════════════════════════════╝ */

/* Each child host shrinks to its content so the buttons sit
   inline with the 10 px gap from .cn-brand-actions__buttons. */
.cn-brand-actions__buttons > div {
    flex: 0 0 auto;
}

/* ============================================================
   #brand-uploader — dxFileUploader chrome
   The dxFileUploader is the DevExpress widget that handles file
   selection + multipart submit under name="files". On the
   branding card we want only its select button visible, styled
   as a primary pill matching .cn-btn--primary.

   IMPORTANT: do NOT apply `display: none` to .dx-fileuploader-
   input-container or .dx-fileuploader-input-wrapper — in DX 25.x
   the select button (.dx-fileuploader-button) is rendered inside
   one of those wrappers, so hiding them hides the button itself.
   Instead we make the widget chrome transparent (no border / no
   background / no padding) and hide ONLY the drag-and-drop
   instruction label, which is the one visible-but-empty region
   that doesn't belong on this surface.
   ============================================================ */

/* Widget outer chrome — transparent, no border, shrink to button
   width. ONLY the outermost .dx-fileuploader gets the 38 px
   height + inline-flex centering; inner wrappers stay neutral
   pass-through containers so they don't double-constrain the
   button's natural layout. */
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 38px;
    min-height: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
}

/* Intermediate wrappers — strip padding/border/background and
   collapse them out of layout via `display: contents`. The
   browser still parses them in the DOM (DX needs them for its
   own event wiring) but they don't add their own box, so the
   styled `.dx-fileuploader-button` inside becomes a direct
   layout child of the outer .dx-fileuploader flex container. */
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-wrapper,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-container,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-input-wrapper,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-input-container {
    display: contents;
}

/* Hide ONLY the empty drag-drop label — its enclosing container
   (.dx-fileuploader-input-container) stays visible because it
   holds the select button in DX 25.x. */
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-input-label {
    display: none !important;
}

/* dxFileUploader select button — primary pill matching .cn-btn--primary.
   Targets the widget's own `.dx-fileuploader-button` class (which is
   also a `.dx-button`) so the styling wins over DX's button-mode-*
   theme rules. Font props are set on the button itself so they
   cascade to every text node inside (DX wraps button text in
   .dx-button-content > .dx-button-text — declaring fonts here means
   the cascade applies regardless of which wrapper holds the text). */
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button.dx-button,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader .dx-fileuploader-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cn-navy) !important;
    color: #fff !important;
    border: 1px solid var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    height: 38px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}

    .cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button.dx-button:hover,
    .cn-brand-actions__buttons #brand-uploader .dx-fileuploader .dx-fileuploader-button:hover {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
    }

.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button .dx-button-content {
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 100% !important;
}

.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button .dx-button-text {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline !important;
    visibility: visible !important;
}

/* Defensive font-size lock — catches every nested element DX
   renders inside the select button so the text always reads at
   14 px regardless of which DX theme mode (.dx-button-mode-text /
   -outlined / -contained) or wrapper class (.dx-button-content,
   .dx-button-text, generic <span>) holds the text node. Matches
   the Remove button's font-size for visual parity. */
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button *,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button .dx-button-content,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button .dx-button-content *,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button span,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button > span,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader .dx-button-text,
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader [class*="button-text"] {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

    /* Cloud-upload icon prepended to "Add / Replace" — inline SVG
   data URI (no extra HTTP request, no per-page markup). Matches
   the icon shown in .cn-btn--primary on the mockup. */
    .cn-brand-actions__buttons #brand-uploader .dx-fileuploader-button .dx-button-content::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

/* The native <input type="file"> inside the widget — take it
   out of flow with absolute positioning + zero size so it
   doesn't consume horizontal layout space alongside the styled
   select button. DX's click handler still triggers it
   programmatically; this is the standard "visually hidden file
   input" pattern. Without this rule the browser-default file
   input UI renders at ~200 px width, pushing #brand-remove
   far to the right of #brand-uploader. */
.cn-brand-actions__buttons #brand-uploader .dx-fileuploader-input {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Lock #brand-uploader to shrink-to-button-content. Combined
   with the absolutely-positioned native input above, the host
   div now sizes to exactly the styled select-button width so
   #brand-remove sits immediately to its right with the 2 px gap. */
.cn-brand-actions__buttons #brand-uploader {
    width: max-content;
    max-width: 100%;
}

/* dxButton (Remove) — danger-ghost pill matching .cn-btn--danger-ghost. */
.cn-brand-actions__buttons #brand-remove .dx-button {
    background: var(--cn-elev) !important;
    color: var(--cn-danger) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}

    .cn-brand-actions__buttons #brand-remove .dx-button:hover {
        background: var(--cn-danger-bg) !important;
        border-color: var(--cn-danger) !important;
    }

    .cn-brand-actions__buttons #brand-remove .dx-button .dx-button-content {
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 100% !important;
    }

    .cn-brand-actions__buttons #brand-remove .dx-button .dx-button-text {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--cn-danger) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .cn-brand-actions__buttons #brand-remove .dx-button .dx-icon {
        color: var(--cn-danger) !important;
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        margin: 0 !important;
    }

/* ============================================================
   PRACTICE SETTINGS — polished dxAccordion + per-provider form.
   Used on /PracticeSetting/PracticeSettings. Re-skins the
   default dxAccordion gray-border + alice-blue chrome to match
   the cn-section-card family, and adds the provider identity
   strip, section headings, and the conditional helper note.
   ============================================================ */
.cn-accordion {
    margin-bottom: 8px;
}

    .cn-accordion .dx-accordion {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

        .cn-accordion .dx-accordion .dx-accordion-item {
            background: var(--cn-elev) !important;
            border: 1px solid var(--cn-border) !important;
            border-radius: var(--cn-radius-lg) !important;
            box-shadow: var(--cn-shadow-sm) !important;
            margin-bottom: 12px !important;
            overflow: hidden !important;
        }

            .cn-accordion .dx-accordion .dx-accordion-item:last-child {
                margin-bottom: 0 !important;
            }

        .cn-accordion .dx-accordion .dx-accordion-item-opened {
            border-color: var(--cn-navy) !important;
            box-shadow: var(--cn-shadow-md) !important;
        }

        .cn-accordion .dx-accordion .dx-accordion-item-title {
            background: var(--cn-elev) !important;
            border: 0 !important;
            padding: 14px 18px !important;
            min-height: 56px !important;
            height: auto !important;
            font-family: var(--cn-font) !important;
            cursor: pointer;
            transition: background-color 120ms ease;
        }

            .cn-accordion .dx-accordion .dx-accordion-item-title:hover {
                background: var(--cn-bg) !important;
            }

        .cn-accordion .dx-accordion .dx-accordion-item-opened > .dx-accordion-item-title {
            background: var(--cn-navy-50) !important;
            border-bottom: 1px solid var(--cn-border) !important;
        }

        /* Disclosure caret — navy when open, centered vertically */
        .cn-accordion .dx-accordion .dx-accordion-item-title::before {
            color: var(--cn-text-2) !important;
            right: 18px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            font-size: 14px !important;
            transition: transform 200ms ease, color 120ms ease;
        }

        .cn-accordion .dx-accordion .dx-accordion-item-opened > .dx-accordion-item-title::before {
            color: var(--cn-navy) !important;
            transform: translateY(-50%) rotate(180deg) !important;
        }

        .cn-accordion .dx-accordion .dx-accordion-item-body {
            background: var(--cn-elev) !important;
            border: 0 !important;
            padding: 20px 22px 22px !important;
        }

@media (max-width: 540px) {
    .cn-accordion .dx-accordion .dx-accordion-item-title {
        padding: 12px 14px !important;
    }

    .cn-accordion .dx-accordion .dx-accordion-item-body {
        padding: 16px 14px 18px !important;
    }
}

/* Provider identity strip used as the accordion-item title */
.cn-acc-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 28px; /* leave room for the disclosure caret */
    min-width: 0;
}

.cn-acc-title__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font);
    font-weight: 700;
    font-size: 13px;
}

.cn-acc-title__avatar--gold {
    background: rgba(209, 156, 70, .16);
    color: var(--cn-gold);
}

.cn-acc-title__avatar--slate {
    background: var(--cn-muted-bg, #F1F5F9);
    color: var(--cn-text-2);
}

.cn-acc-title__avatar--mint {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

.cn-acc-title__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.cn-acc-title__name {
    font-family: var(--cn-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1.2;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-acc-title__meta {
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .cn-acc-title__avatar {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        font-size: 12px;
    }

    .cn-acc-title__name {
        font-size: 14px;
    }

    .cn-acc-title__meta {
        font-size: 11.5px;
    }
}

/* Toggle cards inside an accordion body (mirrors the
   `.cn-section-card .dx-field-item.cn-toggle-card` rule set
   so the same `cssClass: "cn-toggle-card"` on dxForm switch
   items renders identically here). */
.cn-accordion .dx-field-item.cn-toggle-card {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    padding: 14px 14px !important;
    margin: 0 !important;
    transition: border-color 150ms ease, background-color 150ms ease !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

    .cn-accordion .dx-field-item.cn-toggle-card:hover {
        border-color: var(--cn-text-3) !important;
    }

    .cn-accordion .dx-field-item.cn-toggle-card:has(.dx-switch.dx-switch-on-value) {
        border-color: var(--cn-navy) !important;
        background: var(--cn-navy-50) !important;
    }

    .cn-accordion .dx-field-item.cn-toggle-card .dx-switch {
        margin-top: 1px !important;
    }

/* ============================================================
   PRACTICE SETTINGS — toggle card atom primitives.
   Used by the dxForm `toggleCardLabel(title, sub, icon)` template
   on /PracticeSetting/PracticeSettings. The card chrome itself
   (border, padding, on-state) lives in the .dx-field-item.cn-toggle-card
   rules above; these style the icon tile and text inside the label.
   ============================================================ */
.cn-toggle-card__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: var(--cn-bg);
    color: var(--cn-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease;
}

    .cn-toggle-card__icon svg {
        width: 18px;
        height: 18px;
    }

.cn-toggle-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cn-toggle-card__title {
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.3;
}

.cn-toggle-card__sub {
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    margin-top: 3px;
    line-height: 1.5;
}

/* ============================================================
   TITLE ROW + "Per-provider" CHIP
   (matches practice-settings-v2.html mockup)
   ============================================================ */
.cn-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cn-title-row__text {
    min-width: 0;
    flex: 1 1 320px;
}

    .cn-title-row__text > h1.cn-title {
        margin: 4px 0 4px;
    }

    .cn-title-row__text > .cn-subtitle {
        margin: 2px 0 0;
    }

.cn-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.cn-step-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cn-navy);
}

/* Accordion body mobile padding — exact mockup match (14 14 18) */
@media (max-width: 540px) {
    .cn-accordion .dx-accordion .dx-accordion-item-body {
        padding: 14px 14px 18px !important;
    }
}

/* ============================================================
   PRACTICE SETTINGS — dxForm-rendered toggle card with icon.
   Used on /PracticeSetting/PracticeSettings, where each of the
   5 dxSwitch items has `cssClass: "cn-toggle-card"` and a label
   template that renders an icon + title + subtitle block. The
   dxForm structure (items, hierarchy, handlers) is untouched —
   only the label template content + cssClass cause the visual.
   ============================================================ */

/* Label template wrapper — flex row with icon on the left,
   title/subtitle stacked on the right, fills available width. */
.cn-toggle-card__label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

    .cn-toggle-card__label .cn-toggle-card__body {
        flex: 1 1 auto;
        min-width: 0;
    }

/* When rendered inside a dxForm field item, force the
   .dx-field-item-label to expand so the icon+body block can
   grow, and pin the .dx-field-item-content (the dxSwitch) to
   the right with its natural width. */
.cn-accordion .dx-field-item.cn-toggle-card > .dx-field-item-label,
.cn-section-card .dx-field-item.cn-toggle-card > .dx-field-item-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
}

    .cn-accordion .dx-field-item.cn-toggle-card > .dx-field-item-label .dx-field-item-label-content,
    .cn-section-card .dx-field-item.cn-toggle-card > .dx-field-item-label .dx-field-item-label-content {
        width: 100% !important;
        min-width: 0 !important;
    }

.cn-accordion .dx-field-item.cn-toggle-card > .dx-field-item-content,
.cn-section-card .dx-field-item.cn-toggle-card > .dx-field-item-content {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

/* On-state — when the dxSwitch inside the card is ON, swap the
   icon tile to the white-on-navy variant (mirrors the mockup). */
.cn-accordion .dx-field-item.cn-toggle-card:has(.dx-switch.dx-switch-on-value) .cn-toggle-card__icon,
.cn-section-card .dx-field-item.cn-toggle-card:has(.dx-switch.dx-switch-on-value) .cn-toggle-card__icon {
    background: #fff !important;
    color: var(--cn-navy) !important;
}

/* In-dxForm Save action — sits at the bottom of each provider's
   dxForm panel inside the accordion. Hairline divider above, then a
   navy primary Save button (save icon + white "Save" text) left-
   aligned within its column. Matches the screenshot reference and
   the design-system `.cn-btn--primary` look. The button has cssClass
   "cn-acc-save-action" + buttonOptions { type: "default", icon:
   "save", useSubmitBehavior: true } so it submits the outer
   <form id="form"> natively — same POST contract as production. */
.cn-accordion .dx-field-item.cn-acc-save-action {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--cn-border) !important;
}

    .cn-accordion .dx-field-item.cn-acc-save-action .dx-field-button-item {
        text-align: left !important;
    }

    .cn-accordion .dx-field-item.cn-acc-save-action .dx-button.dx-button-default {
        background: var(--cn-navy) !important;
        border: 1px solid var(--cn-navy) !important;
        border-radius: var(--cn-radius) !important;
        height: 44px !important;
        min-width: 120px !important;
        padding: 0 18px !important;
        box-shadow: var(--cn-shadow-sm) !important;
    }

        .cn-accordion .dx-field-item.cn-acc-save-action .dx-button.dx-button-default:hover {
            background: var(--cn-navy-2) !important;
            border-color: var(--cn-navy-2) !important;
            box-shadow: 0 2px 6px rgba(12, 84, 148, .18) !important;
        }

        .cn-accordion .dx-field-item.cn-acc-save-action .dx-button.dx-button-default .dx-button-text {
            color: #fff !important;
            font-family: var(--cn-font) !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            letter-spacing: .01em;
        }

        .cn-accordion .dx-field-item.cn-acc-save-action .dx-button.dx-button-default .dx-icon {
            color: #fff !important;
            margin-right: 6px !important;
        }

/* ----- LOCK SAVE TO BOTTOM OF PANEL -----
   When the Insurance toggle flips on/off the dxForm shows/hides
   the Co-pay row (`itemOption("copayScreen", "visible", …)`),
   which adds/removes a grid row and would otherwise push the Save
   button up or down. To keep the Save action visually FIXED at the
   bottom of the accordion body (per the screenshot), we:

     1. give the dxForm container a `min-height` that fits its
        tallest state (Insurance ON → 3 toggle rows + Save), so the
        panel doesn't shrink when Co-pay is hidden, and
     2. take the Save row out of normal flow (position:absolute,
        bottom:0) so it anchors to the form's bottom edge.

   The toggle rows still flow naturally at the top — only their
   internal arrangement changes. The Save action stays put. */
.cn-accordion .dx-accordion .dx-accordion-item-body .dx-form {
    position: relative !important;
    min-height: 380px; /* 3 toggle rows (~85px each) + Save area */
}

.cn-accordion .dx-field-item.cn-acc-save-action {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
}

/* Mobile / narrow tablet: the dxForm's colCountByScreen drops to
   a single column, so up to 5 toggle rows stack vertically and the
   form needs more vertical room before Save is still at the bottom. */
@media (max-width: 767px) {
    .cn-accordion .dx-accordion .dx-accordion-item-body .dx-form {
        min-height: 560px;
    }
}

/* ============================================================
   PRACTICE SETTINGS — mobile responsive tuning.
   The dxForm uses colCountByScreen { lg:2, md:2, sm:1 } so on
   phones each toggle card occupies the full accordion body
   width. These rules reclaim the inner gutters DX still draws
   between rows, tighten paddings so the cards breathe in the
   reduced canvas, and keep the [icon][body][switch] layout
   readable down to ~320px viewports.
   ============================================================ */
@media (max-width: 767px) {
    /* dxForm internal row gap — DX defaults to ~20px which feels
       too airy on phones; pull it in for tighter card rhythm. */
    .cn-accordion .dx-form > .dx-box.dx-widget,
    .cn-accordion .dx-form .dx-box-flex > .dx-item.dx-box-item > .dx-item-content {
        padding-block: 0 !important;
    }

    .cn-accordion .dx-form .dx-layout-manager .dx-field-item:not(.cn-toggle-card):not(.cn-acc-save-action) {
        padding: 0 !important;
    }
    /* Add vertical breathing room between stacked toggle cards
       (replaces the horizontal column gap that disappears at sm). */
    .cn-accordion .dx-field-item.cn-toggle-card + .dx-field-item.cn-toggle-card {
        margin-top: 10px !important;
    }
    /* Save action: tighter top spacing + full-width touch target. */
    .cn-accordion .dx-field-item.cn-acc-save-action {
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

        .cn-accordion .dx-field-item.cn-acc-save-action .dx-button.dx-button-default {
            width: 100% !important;
            min-width: 0 !important;
        }
}

@media (max-width: 540px) {
    /* Slightly tighter card padding so more room goes to text */
    .cn-accordion .dx-field-item.cn-toggle-card {
        padding: 12px 12px !important;
        gap: 10px !important;
    }
        /* Pull the dxSwitch flush to the right edge of the card */
        .cn-accordion .dx-field-item.cn-toggle-card > .dx-field-item-content {
            min-width: 0;
            flex: 0 0 auto !important;
        }
    /* Title/sub typography tightening for narrow viewports */
    .cn-accordion .cn-toggle-card__title {
        font-size: 13.5px;
        line-height: 1.3;
    }

    .cn-accordion .cn-toggle-card__sub {
        font-size: 12px;
        line-height: 1.45;
    }
    /* Tighten the page H1 + accordion margin on phones */
    #main-content h1.cn-title {
        font-size: 22px;
        margin: 4px 0 12px;
    }

    .cn-accordion .dx-accordion .dx-accordion-item {
        margin-bottom: 10px !important;
    }
}

@media (max-width: 380px) {
    /* Shrink the icon tile on the smallest devices so the body
       text has room — keeps the card from looking icon-heavy. */
    .cn-accordion .cn-toggle-card__icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 7px;
    }

        .cn-accordion .cn-toggle-card__icon svg {
            width: 16px;
            height: 16px;
        }

    .cn-accordion .dx-field-item.cn-toggle-card {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
}

/* Bootstrap container squeeze fix — on mobile the layout's
   .container default 15px gutter + accordion-item-body 14px
   + cn-toggle-card 12px stacked together leaves the text body
   ~40px tighter than necessary. Trim the container gutters
   on phones, but ONLY inside the accordion shell so other
   pages keep their existing inset. */
@media (max-width: 540px) {
    #main-content .container .cn-accordion {
        margin-inline: -8px;
    }

        #main-content .container .cn-accordion .dx-accordion .dx-accordion-item {
            margin-inline: 0 !important;
        }
}

/* ============================================================
   PRACTICE SETTINGS — toggle-card subtitle wrapping fix.
   DX wraps our label template inside .dx-field-item-label-text
   which defaults to `white-space: nowrap` + `text-overflow:
   ellipsis` for inline form labels. That forces the
   .cn-toggle-card__sub onto a single line and clips it on
   narrow viewports. Force normal wrapping inside the toggle
   card label so multi-line subtitles reflow correctly.
   ============================================================ */
.cn-accordion .dx-field-item.cn-toggle-card .dx-field-item-label,
.cn-section-card .dx-field-item.cn-toggle-card .dx-field-item-label,
.cn-accordion .dx-field-item.cn-toggle-card .dx-field-item-label-content,
.cn-section-card .dx-field-item.cn-toggle-card .dx-field-item-label-content,
.cn-accordion .dx-field-item.cn-toggle-card .dx-field-item-label-text,
.cn-section-card .dx-field-item.cn-toggle-card .dx-field-item-label-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    line-height: 1.45 !important;
}

/* The wrapping container our label template returns — make sure
   it owns the full available width so the icon stays fixed and
   the body block reflows. */
.cn-accordion .cn-toggle-card__label,
.cn-section-card .cn-toggle-card__label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}

    .cn-accordion .cn-toggle-card__label .cn-toggle-card__icon,
    .cn-section-card .cn-toggle-card__label .cn-toggle-card__icon {
        flex: 0 0 36px !important;
    }

    .cn-accordion .cn-toggle-card__label .cn-toggle-card__body,
    .cn-section-card .cn-toggle-card__label .cn-toggle-card__body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

/* Title + subtitle — allow long text to wrap + break cleanly */
.cn-toggle-card__title,
.cn-toggle-card__sub {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto;
    width: 100%;
    max-width: 100%;
    text-overflow: clip !important;
}

.cn-toggle-card__title {
    /* Tight line-height on the title since it's a single line in
       most cases, but allow wrapping on the longest field names. */
    line-height: 1.3;
}

.cn-toggle-card__sub {
    /* Slightly tighter line-height than desktop (1.5) to fit
       2-3 line subtitles inside the card without ballooning the
       card height on small screens. */
    line-height: 1.45;
    color: var(--cn-text-2);
    display: block;
}

/* Belt-and-suspenders: DX may add inline `display: inline` or
   width style to .dx-field-item-label-text in certain layouts.
   Force block-level so the wrapping container fills the row. */
.cn-accordion .dx-field-item.cn-toggle-card .dx-field-item-label > *,
.cn-section-card .dx-field-item.cn-toggle-card .dx-field-item-label > * {
    display: block !important;
    width: 100% !important;
}

/* On phones — make sure the field-item content (switch) doesn't
   take any horizontal slack from the label block. */
@media (max-width: 540px) {
    .cn-accordion .dx-field-item.cn-toggle-card > .dx-field-item-content {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
    }

    .cn-toggle-card__sub {
        font-size: 12px;
        line-height: 1.45;
    }
}

/* ============================================================
   PRACTICE SETTINGS — equal-height toggle cards.

   Cause of inconsistency: each toggle card grows to its content
   height. With variable-length subtitles (Insurance copy is
   longer than Cash Payment copy) the cards in the same 2-col
   row end up different heights, and on the single-col mobile
   stack the rhythm gets visibly uneven.

   Fix:
     1. Force the dxForm row box to stretch cells (`align-items:
        stretch`) so paired desktop cards equalize.
     2. Propagate that stretched height all the way down to the
        .cn-toggle-card via .dx-item-content + .dx-field-item.
     3. Set a min-height baseline so single-column mobile cards
        share a visual floor even without row pairing.
     4. Top-align the body content so short and tall cards both
        read with the title at the same vertical position.
   ============================================================ */
.cn-accordion .dx-form .dx-box.dx-box-flex,
.cn-accordion .dx-form .dx-layout-manager .dx-box.dx-box-flex {
    align-items: stretch !important;
}

.cn-accordion .dx-form .dx-item.dx-box-item {
    align-self: stretch !important;
}

    .cn-accordion .dx-form .dx-item.dx-box-item > .dx-item-content {
        height: 100% !important;
    }

.cn-accordion .dx-field-item.cn-toggle-card {
    height: 100% !important;
    min-height: 92px !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
}
/* Pin the icon + body top-aligned inside the (now potentially
   taller) card so visual baseline matches across siblings. */
.cn-accordion .cn-toggle-card__label {
    align-self: flex-start !important;
}

.cn-accordion .dx-field-item.cn-toggle-card > .dx-field-item-content {
    align-self: center !important;
}

/* Phones — slightly taller floor since subtitles wrap to 2+ lines
   in single-column mode and the body needs the extra room. */
@media (max-width: 767px) {
    .cn-accordion .dx-field-item.cn-toggle-card {
        min-height: 96px !important;
    }
}

@media (max-width: 380px) {
    .cn-accordion .dx-field-item.cn-toggle-card {
        min-height: 100px !important;
    }
}

/* ============================================================
   DOCUMENT IDENTITY ROW — reusable primitive for any document /
   file list cell that needs "icon tile + title + sub-line".
   Used by /library/Document (PracticeAdminLibrary) and reusable
   on other document/file list pages.

   Layout notes:
     • `display: flex` (not inline-flex) so the row takes the full
       cell width and the content left-aligns inside DX cells
       regardless of the cell's intrinsic text-align.
     • `align-items: flex-start` so the icon top-aligns with the
       title's first line — the sub-line tucks underneath the
       title rather than the icon floating between them.
   ============================================================ */
.cn-doc-identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-align: left;
}

.cn-doc-identity__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px;
    background: rgba(220, 38, 38, .12); /* PDF red by default */
    color: var(--cn-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .cn-doc-identity__icon svg {
        width: 20px;
        height: 20px;
    }

.cn-doc-identity__icon--navy {
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

.cn-doc-identity__icon--gold {
    background: rgba(209, 156, 70, .14);
    color: var(--cn-gold);
}

.cn-doc-identity__icon--green {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

.cn-doc-identity__icon--slate {
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
}

.cn-doc-identity__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
    flex: 1 1 auto;
    padding-top: 2px; /* visually align text top with the icon-tile cap */
}

/* When a cn-doc-identity sits inside a dxDataGrid cell, force the
   cell to top-align vertically so the icon + title start at the
   top of the row (rather than centered in a tall cell). Scoped via
   :has() so only the identity column is affected — View / Add
   cells in the same row keep vertical-align: middle for their
   button-centric layout. */
.cn-grid-card .dx-datagrid-rowsview .dx-data-row > td:has(.cn-doc-identity) {
    vertical-align: top !important;
}

.cn-doc-identity__name {
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1.3;
    letter-spacing: -.005em;
    white-space: normal;
    overflow-wrap: break-word;
}

.cn-doc-identity__sub {
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-3);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .cn-doc-identity {
        gap: 12px;
    }

    .cn-doc-identity__icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

        .cn-doc-identity__icon svg {
            width: 18px;
            height: 18px;
        }

    .cn-doc-identity__name {
        font-size: 13.5px;
    }

    .cn-doc-identity__sub {
        font-size: 11.5px;
    }
}

/* ============================================================
   ROW ACTION — quiet ghost icon button used in grid row cells
   (View, Download, etc.). 38×38 default with navy-50 hover.
   ============================================================ */
.cn-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--cn-radius);
    border: 1px solid var(--cn-border-2);
    background: var(--cn-elev);
    color: var(--cn-text-2);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

    .cn-row-action:hover {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        border-color: var(--cn-navy);
    }

    .cn-row-action:focus-visible {
        outline: 0;
        box-shadow: var(--cn-focus-ring);
    }

    .cn-row-action svg {
        width: 16px;
        height: 16px;
    }

.cn-row-action--danger:hover {
    background: var(--cn-danger-bg);
    color: var(--cn-danger);
    border-color: var(--cn-danger);
}

/* ============================================================
   QUESTIONNAIRE PREVIEW — question cards.
   Used by /library/QuestionnaireQuestion/<id>/ (preview view).
   The page title uses the shared h1.cn-title; the dxForm
   structure is preserved and these styles polish the template
   content (cssClass: "cn-q-card" on each item + inner
   head/title/editor markup rendered from the template).
   ============================================================ */

/* ----- Question cards (one per dxForm item via cssClass) ----- */
.cn-q-list {
    display: block;
}

    .cn-q-list .dx-form,
    .cn-q-list .dx-layout-manager,
    .cn-q-list .dx-form > .dx-box {
        background: transparent !important;
    }

    /* Each dxForm item with cssClass:"cn-q-card" becomes a card */
    .cn-q-list .dx-field-item.cn-q-card {
        background: var(--cn-elev) !important;
        border: 1px solid var(--cn-border) !important;
        border-radius: var(--cn-radius-lg) !important;
        box-shadow: var(--cn-shadow-sm) !important;
        padding: 20px 22px !important;
        margin: 0 0 14px 0 !important;
        transition: border-color 150ms ease, box-shadow 150ms ease !important;
    }

        .cn-q-list .dx-field-item.cn-q-card:hover {
            border-color: var(--cn-border-2) !important;
        }

@media (max-width: 540px) {
    .cn-q-list .dx-field-item.cn-q-card {
        padding: 16px 14px !important;
    }
}

/* Card head: numbered badge + title + description */
.cn-q-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}

.cn-q-card__num {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 2px;
}

.cn-q-card__title-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

/* Question Name typography — matched 1:1 to the mockup
   (library-questionnaire-question-v2.html). The title renders as an
   <h2> inside #main-content, so global heading rules from
   style.min.css + the Poppins/Roboto Google Fonts would otherwise
   override the design-system font. Scoped under .cn-q-list +
   !important so the system-font stack, size, weight, spacing and
   margins win the cascade and stay identical to the mockup. */
.cn-q-list .cn-q-card .cn-q-card__title,
.cn-q-card__title {
    font-family: var(--cn-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
}

    .cn-q-card__title .req {
        color: var(--cn-danger) !important;
        margin-left: 4px !important;
        font-weight: 700 !important;
    }

.cn-q-list .cn-q-card .cn-q-card__desc,
.cn-q-card__desc {
    font-family: var(--cn-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--cn-text-2) !important;
    line-height: 1.5 !important;
    margin: 4px 0 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Editor wrapper — lives inside .cn-q-card__title-wrap, so it shares
   the question name's exact left edge automatically (the editor and
   the question name align on the same margin). Just add top spacing. */
.cn-q-card__editor {
    margin-top: 10px;
    width: 100%;
}

/* ----- Polished radio group (vertical list of clickable rows) ----- */
.cn-q-list .cn-q-card .dx-radiogroup .dx-radiobutton {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    min-height: 44px;
    background: var(--cn-elev) !important;
    margin: 0 0 8px 0 !important;
}

    .cn-q-list .cn-q-card .dx-radiogroup .dx-radiobutton:hover {
        background: var(--cn-bg) !important;
        border-color: var(--cn-border-2) !important;
    }

    .cn-q-list .cn-q-card .dx-radiogroup .dx-radiobutton.dx-radiobutton-checked {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

.cn-q-list .cn-q-card .dx-radiogroup .dx-radiobutton-text {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
}

/* ----- Polished checkbox stack (multi-select) ----- */
.cn-q-list .cn-q-card .dx-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    min-height: 44px;
    background: var(--cn-elev) !important;
    margin: 0 !important;
    width: 100%;
}

    .cn-q-list .cn-q-card .dx-checkbox.dx-state-hover {
        background: var(--cn-bg) !important;
        border-color: var(--cn-border-2) !important;
    }

    .cn-q-list .cn-q-card .dx-checkbox.dx-checkbox-checked {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

    .cn-q-list .cn-q-card .dx-checkbox .dx-checkbox-text {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        color: var(--cn-text) !important;
        padding-left: 6px;
    }

/* ----- Number / text editor max-width inside cards ----- */
.cn-q-list .cn-q-card .dx-numberbox {
    max-width: 220px;
}

.cn-q-list .cn-q-card .dx-textarea,
.cn-q-list .cn-q-card .dx-textbox {
    max-width: 640px;
}

/* ----- Polished inline loader card
   (preserves production's #loaderdisplay row pattern; just
   restyles it as a centered card with a CSS spinner). ----- */
.cn-q-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 32px 16px;
}

.cn-q-loader__card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    max-width: 360px;
}

.cn-q-loader__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--cn-navy-50);
    border-top-color: var(--cn-navy);
    border-radius: 50%;
    animation: cn-q-spin 800ms linear infinite;
}

@keyframes cn-q-spin {
    to {
        transform: rotate(360deg);
    }
}

.cn-q-loader__text {
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text-2);
}

.cn-q-loader__sub {
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-3);
}

/* ════════════════════════════════════════════════════════════
   PRACTICE-ADMIN · DOCUMENTS HUB
     /practiceadmin/practiceadmindocument  (practice-admin)
   Three-tab document hub: My Documents (dxDataGrid), Shared By
   Patients (search + dxDataGrid), Upload Documents (dxForm +
   dxFileUploader). Adds Provider Name field/column and
   Share-With-Patient checkbox vs the legacy provider page (which
   was reverted to its original design and no longer uses these
   primitives).

   This section is intentionally THIN — the practice-admin hub
   reuses the canonical design-system primitives shared with
   PracticeProviders / PracticePatients / Locations / etc.:
     • `.cn-grid-card`                  (line ~143)  — card surface
     • `.cn-grid-card .dx-datagrid…`    (line ~400)  — grid chrome
     • `.cn-grid-card` mobile rules     (line ~824)  — responsive
       grid font / padding / horizontal scroll (no per-page repeat)
     • `.cn-providers-titlebar`         (line ~1034) — H1 + chip row
     • `.cn-back` / `.cn-area`          (line ~1074) — crumb pair
     • `.cn-identity` / `.cn-avatar`    (line ~1139) — Patient /
       Provider name cell rendered via cellTemplate
     • `.cn-form-card` + __head + __body (line ~1255) — upload form
     • `.cn-action-menu` + __row/__icon/__label/__chev
                                        (line ~2748) — 3-dot menu
       polish (cssClass + itemTemplate pattern)
     • `.cn-tabs` + `.cn-tab` + `.cn-tab__count`
                                        (line ~328)  — pill-tab
       navigation primitive (My Documents / Shared By Patients /
       Upload). Supports both `.active` (legacy JS) and `.is-active`
       (mockup) so production className-string assignment still works.
     • Multi-page dxForm polish         (line ~8126) — labels,
       inputs, focus ring — the hub is opted into this rule
       list (selector includes cn-page-practiceadmindocumentindex)
     • `.dx-button.dx-button-default`   (line ~149)  — primary CTA
       (modal Save buttons rendered via dxForm pick this up)
     • `:is(.dx-form, …) .dx-button…`   (line ~211)  — dxForm buttons
   ONLY page-specific deltas live here: MRN search row dxForm hooks
   (input icon, height alignment), row-action icon hit-areas
   (description bubble / cn-row-eye / cn-row-download), the
   dxFileUploader drop zone, the Shared By Patients toolbar +
   empty state, the two document modals, and the practice-admin
   read-only modifier.
   ════════════════════════════════════════════════════════════ */

/* ----- TABS — the .cn-tabs / .cn-tab / .cn-tab__count primitive
   was promoted to a GLOBAL design-system rule (see "5b. Tab
   pill-group" near the top of this file, line ~328). The doc hub
   now inherits the canonical pill-group chrome with zero per-page
   declarations. No page-scoped tab rules needed here anymore. ----- */

/* ----- MRN search row — two DevExpress widgets (dxTextBox +
   dxButton) sit side-by-side inside the global .cn-search-row
   flex primitive. The dxTextBox provides the input + native DX
   clear-button + placeholder management; the dxButton provides
   the navy primary CTA with a "search" font icon. The .dx-button
   .dx-button-default global (line ~149) already styles the button
   to 42 px navy. The page-scoped rules below give the dxTextBox a
   matching surface (F8FAFC bg, 1 px border-2, 42 px height, navy
   focus ring) and inject the magnifying-glass icon on the left
   side of the input — same look as the v2 mockup, with the dxText-
   Box's nested .dx-texteditor DOM. ----- */

/* Make the dxTextBox container fill the row's flex-grow space. */
/* Center-align the input and button on the row's cross-axis so
   the search button can't accidentally stretch (or get stretched)
   to a different height than the input next to it. */
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row {
    align-items: center !important;
}

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-btn {
        flex: 0 0 auto;
    }

    /* dxTextBox surface — match the mockup .cn-search input baseline.
   Use an EXPLICIT height (not just min-height) so the dxTextBox
   chrome can't render shorter than the dxButton next to it. The
   button uses `height: var(--cn-h-btn-primary)` = 42 px from the
   global design-system rule; pin the textbox to the same 42 px so
   both sides of the search row line up exactly. */
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor {
        background: #F8FAFC !important;
        border: 1px solid var(--cn-border-2) !important;
        border-radius: var(--cn-radius) !important;
        height: var(--cn-h-btn-primary) !important;
        min-height: var(--cn-h-btn-primary) !important;
        box-shadow: none !important;
    }
    /* Force the dxButton to the exact same height too — DX's
   .dx-button-has-icon.dx-button-has-text chrome can render with
   extra internal padding that nudges the rendered height past the
   declared 42 px from the global rule. Pinning min-height + height
   here guarantees the button cell matches the input. */
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-btn,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-btn .dx-widget,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-btn .dx-button.dx-button-default {
        height: var(--cn-h-btn-primary) !important;
        min-height: var(--cn-h-btn-primary) !important;
        max-height: var(--cn-h-btn-primary) !important;
        line-height: 1 !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor::before,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor::after {
        display: none !important;
        content: none !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        background: white !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor-input {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        color: var(--cn-text) !important;
        /* Pin the inner input to exactly 40 px so the .dx-texteditor
       container can sit at exactly 42 px (40 px input + 1 px border
       top + 1 px border bottom) — matches the dxButton next to it.
       DX Material theme adds ~7 px top/bottom padding to .dx-texteditor-input
       by default; stripping that here is what actually stops the
       textbox from growing past the button height. */
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 38px !important; /* clears the magnifying-glass icon */
        line-height: 40px !important; /* vertically center the typed text */
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
        background-position: 12px center !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
    }
    /* DX wraps the input in `.dx-texteditor-input-container` and
   `.dx-texteditor-container` — both can introduce vertical padding
   in some Material variants. Zero them out so the input + 1 px
   border = the exact 42 px container height. */
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor-container,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor-input-container {
        height: 40px !important;
        min-height: 40px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-texteditor.dx-state-focused .dx-texteditor-input {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
    }
    /* DX renders the placeholder as an absolutely-positioned sibling
   of the input. Vertically center against the 40 px input via
   line-height (NOT display: flex — that would override DX's own
   `display: none` rule that hides the placeholder when the input
   has a typed value, causing the placeholder text to bleed through
   over real user input). The padding-left clears the magnifying-
   glass icon at 12 px. */
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-placeholder {
        top: 0 !important;
        bottom: 0 !important;
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        color: var(--cn-text-3) !important;
    }

        #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-input .dx-placeholder::before {
            font-family: var(--cn-font) !important;
            font-size: 14px !important;
            color: var(--cn-text-3) !important;
            line-height: 40px !important;
            padding: 0 0 0 38px !important;
            margin: 0 !important;
        }

    /* dxButton — pick up the global .dx-button.dx-button-default
   navy + 42 px treatment automatically. Just anchor a minimum
   width so the button doesn't shrink below the "Search" label. */
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-search-row .cn-mrn-btn .dx-button.dx-button-default {
        min-width: 120px;
        box-shadow: none !important;
    }

/* ----- Grid toolbar header inside the Shared By Patients
   .cn-grid-card. Matches the mockup pattern: padded band above
   the grid with an h2 section title. ----- */
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cn-border);
    flex-wrap: wrap;
}

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-grid-toolbar h2 {
        margin: 0;
        font-family: var(--cn-font);
        font-size: 15px;
        font-weight: 700;
        color: var(--cn-text);
        letter-spacing: -.005em;
        line-height: 1.3;
    }

@media (max-width: 540px) {
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-grid-toolbar {
        padding: 12px 14px;
    }
}

/* ----- Row-action icon buttons inside the dxDataGrid `buttons`
   columns. Three flavors:
     • `.dx-link.dx-icon-comment` — Description bubble (DX-rendered
        font icon, read-only tooltip trigger). Tinted resting state
        so it reads as a hint, not an action.
     • `.cn-row-eye` / `.cn-row-download` — Stand-alone <a> tags
        emitted by the View / Download cellTemplates with inline
        Feather-style SVGs. Transparent at rest, navy-50 on hover.
     • Shared-By column — freeform `<a><svg></svg></a>` without a
        class hook; selected via `:has(> svg)`.
   All three share the same 32×32 hit area + 6 px radius + hover
   transition so they read as a consistent row-action family. ----- */

/* Description bubble — DX font icon, navy-50 tinted resting state. */
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .dx-link.dx-icon-comment {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cn-radius);
    color: var(--cn-navy) !important;
    background: var(--cn-navy-50);
    text-decoration: none !important;
}

/* View / Download — custom SVG buttons (cn-row-eye + cn-row-download).
   Action affordance: transparent at rest, navy-50 tile on hover so
   the row icon family lights up under the cursor. The stroke SVG
   inherits `currentColor`, so the text-color rule below colors the
   icon together with the focus ring. */
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-eye,
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-download,
#main-content.cn-page-patientprofile .cn-grid-card .cn-row-eye,
#main-content:has(#signpackageslist) .cn-grid-card .cn-row-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cn-radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--cn-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-eye:hover,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-download:hover,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-eye:focus-visible,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-download:focus-visible,
    #main-content.cn-page-patientprofile .cn-grid-card .cn-row-eye:hover,
    #main-content.cn-page-patientprofile .cn-grid-card .cn-row-eye:focus-visible,
    #main-content:has(#signpackageslist) .cn-grid-card .cn-row-eye:hover,
    #main-content:has(#signpackageslist) .cn-grid-card .cn-row-eye:focus-visible {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        border-color: var(--cn-navy-50);
        outline: 0;
    }
    /* Patient Documents — the standalone Delete row icon reads as destructive
       (the provider page keeps delete in its 3-dot menu; the patient page has a
       direct delete, so give it a danger hover to set it apart from view/download). */
    #main-content.cn-page-patientdocumentindex .cn-grid-card .cn-row-delete:hover,
    #main-content.cn-page-patientdocumentindex .cn-grid-card .cn-row-delete:focus-visible {
        background: var(--cn-danger-bg);
        color: var(--cn-danger);
        border-color: var(--cn-danger-bg);
    }

/* ───────── Patient Documents (patient/document/index) — migrated from the
   page's inline <style>. In-page rules scoped to the page; the share-modal
   tagbox rules to #viewSharedocument. Dropped during the move (no UI change):
   the dead `a.dx-link.dx-icon-{share,box,message,download,trash}` colours
   (those columns now render `.cn-row-*` SVG icons, not dx-link icons), the
   dxPopover title-hide (the `#popup` dxPopover has no title — showTitle is
   false by default, so the rule never matched), and `.dx-datagrid .dx-link
   {text-decoration:none}` (the global reset at ~line 577 already covers it). */

/* upload tab — file uploader (navy "Choose File" + position) + fields */
#main-content.cn-page-patientdocumentindex .dx-fileuploader-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-text {
    padding: 6px 15px;
    background-color: #0c5494;
    color: white;
}
#main-content.cn-page-patientdocumentindex .dx-widget.dx-button.dx-button-mode-contained.dx-button-normal.dx-button-has-text.dx-fileuploader-button {
    position: relative;
    bottom: 18px;
}
#main-content.cn-page-patientdocumentindex .dx-button {
    height: 50px;
}
#main-content.cn-page-patientdocumentindex .userfiles {
    color: #0c5494;
}
#main-content.cn-page-patientdocumentindex .dx-first-col.dx-last-col.dx-last-row.dx-field-empty-item {
    display: none;
}

/* grid — Description "comment" command icon (navy) */
#main-content.cn-page-patientdocumentindex a.dx-link.dx-icon-comment.dx-link-icon {
    color: #0c5494;
}

/* Share-document modal — provider dxTagBox chrome */
#viewSharedocument .dx-texteditor-input-container.dx-tag-container.dx-native-click {
    border-bottom: 1px solid;
}
#viewSharedocument .dx-tag-content {
    padding: 8px 32px 7px 12px !important;
    font-size: 1rem !important;
}
#viewSharedocument .dx-tagbox .dx-tag-container {
    padding: 0px 0 0px !important;
}

/* Delete-confirm dialog action buttons — DevExpress renders the confirm
   dialog in a body-portal overlay (outside #main-content), so this can't be
   page-scoped; kept as the page's original specific 6-class selector. */
.dx-button.dx-button-default.dx-button-mode-text.dx-widget.dx-button-has-text.dx-dialog-button {
    height: 37px;
}

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-eye svg,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-grid-card .cn-row-download svg,
    #main-content.cn-page-patientprofile .cn-grid-card .cn-row-eye svg,
    #main-content:has(#signpackageslist) .cn-grid-card .cn-row-eye svg {
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

/* ----- 3-dot menu trigger — uses the exact same markup as
   PracticeProviders: `<div id="click" class="fa fa-ellipsis-v">
   <span class="dx-link dx-icon-overflow" Title="More actions"
   style="font-size:20px; color:#3f51b5;"></span></div>`.
   The inline `style` attribute is intentionally preserved to match
   PracticeProviders byte-for-byte (legacy indigo trigger color).
   The global `#click` hit-area + hover at publish.css:780 + the
   `[class*="dx-icon-"]` font-family rule at 726+ do the rest —
   no page-scoped override needed. ----- */

/* ----- dxFileUploader drop-zone. The cssClass `userfiles` is
   set in JS (`editorType: "dxFileUploader", cssClass: "userfiles"`)
   so we re-skin the resulting wrapper into a dashed drop zone.
   The button inside picks up the design-system outlined treatment
   so it sits cleanly on the dashed background. ----- */
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles {
    border: 2px dashed var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-bg) !important;
    padding: 18px 16px !important;
    transition: border-color 150ms ease, background-color 150ms ease !important;
}

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-wrapper,
    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-input-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-button.dx-button {
        position: static !important;
        bottom: auto !important;
        background: var(--cn-elev) !important;
        color: var(--cn-navy) !important;
        border: 1px solid var(--cn-border-2) !important;
        border-radius: var(--cn-radius) !important;
        height: var(--cn-h-input) !important;
        padding: 0 18px !important;
        margin-top: 12px !important;
        box-shadow: none !important;
    }

        #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-button.dx-button:hover {
            background: var(--cn-navy-50) !important;
            border-color: var(--cn-navy) !important;
        }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-button .dx-button-text {
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--cn-navy) !important;
        text-transform: none !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-files-container {
        padding-top: 10px !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-file {
        padding: 8px 10px !important;
        background: var(--cn-elev) !important;
        border: 1px solid var(--cn-border) !important;
        border-radius: var(--cn-radius) !important;
        margin-bottom: 4px !important;
    }

    #main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card .userfiles .dx-fileuploader-file-name {
        font-family: var(--cn-font) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: var(--cn-text) !important;
    }

/* ----- Document modals (Share / Access). The modal-content
   skin is identical for both, so a single selector pair handles
   both — these classes don't appear on other pages, so no
   `cn-page-…` scope is needed for them to be safe. ----- */
#viewSharedocument .modal-content,
#viewdoctordocumentlist .modal-content,
#viewQuestionnairePatientlist .modal-content,
#viewprofileone .modal-content,
#viewprofile .modal-content {
    border-radius: var(--cn-radius-lg);
    border: 1px solid var(--cn-border);
    box-shadow: var(--cn-shadow-md);
}

#viewSharedocument .modal-header,
#viewdoctordocumentlist .modal-header,
#viewQuestionnairePatientlist .modal-header,
#viewprofileone .modal-header,
#viewprofile .modal-header {
    border-bottom: 1px solid var(--cn-border);
    padding: 16px 20px;
    align-items: center;
}

#viewSharedocument .modal-title,
#viewdoctordocumentlist .modal-title,
#viewQuestionnairePatientlist .modal-title,
#viewprofileone .modal-title,
#viewprofile .modal-title {
    font-family: var(--cn-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
    margin: 0;
}

#viewSharedocument .modal-body,
#viewdoctordocumentlist .modal-body,
#viewQuestionnairePatientlist .modal-body,
#viewprofileone .modal-body,
#viewprofile .modal-body {
    padding: 18px 20px;
}

#viewSharedocument .modal-footer,
#viewdoctordocumentlist .modal-footer,
#viewQuestionnairePatientlist .modal-footer,
#viewprofileone .modal-footer,
#viewprofile .modal-footer {
    border-top: 1px solid var(--cn-border);
    padding: 14px 20px;
    gap: 8px;
}

/* Reopen-Encounter modal (#viewprofileone) — the Details (reopen reason)
   form fills the body; the Save dxButton sits in the footer. */
#viewprofileone .modal-body #EncounterAudit {
    margin: 0;
}

#viewprofileone .modal-footer .dx-button.dx-button-default {
    height: var(--cn-h-btn-primary) !important;
    min-height: var(--cn-h-btn-primary) !important;
    min-width: 120px !important;
}

/* Header icon tile + subtitle — the questionnaires "Send Questionnaire"
   modal adds the mockup's leading send-icon and a one-line subtitle next
   to the title. Scoped to this modal id; reuses design-system tokens. */
#viewQuestionnairePatientlist .cn-qmodal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#viewQuestionnairePatientlist .cn-qmodal-head__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--cn-radius);
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #viewQuestionnairePatientlist .cn-qmodal-head__icon svg {
        width: 20px;
        height: 20px;
    }

#viewQuestionnairePatientlist .cn-qmodal-head__sub {
    margin: 2px 0 0;
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-3);
}

/* Footer Send button is rendered inside a dxForm (#submit); DX's form
   layout padding made its wrapper taller than the plain Close button, so
   the two sat at different baselines. Collapse the wrapper to the button
   so both buttons are the same 42px height and align in the flex footer. */
#viewQuestionnairePatientlist .modal-footer #submit,
#viewQuestionnairePatientlist .modal-footer #submit .dx-form,
#viewQuestionnairePatientlist .modal-footer #submit .dx-layout-manager,
#viewQuestionnairePatientlist .modal-footer #submit .dx-field-item,
#viewQuestionnairePatientlist .modal-footer #submit .dx-field-item-content,
#viewQuestionnairePatientlist .modal-footer #submit .dx-box-item {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

    #viewQuestionnairePatientlist .modal-footer #submit .dx-button.dx-button-default {
        height: var(--cn-h-btn-primary) !important;
        min-height: var(--cn-h-btn-primary) !important;
        min-width: 120px !important;
    }

#viewSharedocument .modal-body h6 strong,
#viewdoctordocumentlist .modal-body h6 strong {
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--cn-text-2);
    text-transform: uppercase;
    letter-spacing: .06em;
}

#viewSharedocument .modal-body p {
    margin: 4px 0 14px;
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--cn-text);
}

#viewSharedocument .modal-footer .btn-outline-secondary,
#viewdoctordocumentlist .modal-footer .btn-outline-secondary,
#viewQuestionnairePatientlist .modal-footer .btn-outline-secondary,
#viewprofileone .modal-footer .btn-outline-secondary,
#viewprofile .modal-footer .btn-outline-secondary {
    height: var(--cn-h-btn-primary);
    padding: 0 18px;
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    background: var(--cn-elev);
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #viewSharedocument .modal-footer .btn-outline-secondary:hover,
    #viewdoctordocumentlist .modal-footer .btn-outline-secondary:hover,
    #viewQuestionnairePatientlist .modal-footer .btn-outline-secondary:hover,
    #viewprofileone .modal-footer .btn-outline-secondary:hover,
    #viewprofile .modal-footer .btn-outline-secondary:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy);
    }

/* ===== Patient-profile modal content (#viewprofile #msd, built by the
   provider-video-visit profile() JS) — typography polish over the legacy
   <h5>/<hr>/<dl> markup so it matches the design system. CSS only; the
   profile() radioHTML string is untouched. The modal renders in a body
   portal outside #main-content, so it's keyed by its own id (like the
   document modals above). ===== */
#viewprofile #msd h5 {
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--cn-navy);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
    #viewprofile #msd h5 strong { font-weight: 700; }
#viewprofile #msd p {
    font-family: var(--cn-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cn-text);
    margin: 0 0 4px;
}
#viewprofile #msd hr {
    border: 0;
    border-top: 1px solid var(--cn-border);
    margin: 16px 0;
}
#viewprofile #msd dt {
    display: block;
    margin: 0;
}
#viewprofile #msd dd {
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--cn-text);
    margin: 0 0 4px;
}
/* Vitals — two-column definition grid (label / value) */
#viewprofile #msd dl.definition-sm {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 0;
}
    #viewprofile #msd dl.definition-sm dt {
        font-size: 13px;
        font-weight: 600;
        color: var(--cn-text-3);
    }
    #viewprofile #msd dl.definition-sm dd {
        font-size: 13px;
        color: var(--cn-text);
        margin: 0;
    }

/* ----- Read-only modifier — practice-admin-only. When the
   Razor `Model.DocumentEditAccess == false` branch runs, the
   form card gets `.cn-form-card--readonly` and the dxFileUploader
   becomes non-interactive (replaces the legacy inline
   `.userfiles { pointer-events: none; -webkit-user-modify: read-only; }`
   block that lived inside the .cshtml). ----- */
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card--readonly .userfiles,
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card--readonly .userfiles .dx-fileuploader,
#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card--readonly .userfiles .dx-fileuploader-button {
    pointer-events: none !important;
    -webkit-user-modify: read-only !important;
    opacity: .6;
}

#main-content:is(.cn-page-practiceadmindocumentindex, .cn-page-providerdocumentindex, .cn-page-patientdocumentindex) .cn-form-card--readonly::after {
    content: "Read-only — you don't have permission to upload documents.";
    display: block;
    padding: 10px 20px;
    border-top: 1px solid var(--cn-border);
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
}

/* ============================================================
   SHARED CELL PRIMITIVES — used by VisitPayments and any
   future billing/transaction listing. Generic on purpose
   (no page-scoping) so a row anywhere in the app can render
   a display-number link, date/time stack, phone, or balance
   the same way.
   ============================================================ */

/* ----- Stat icon — additional signal variants (success/gold/muted
   already exist above; add warn + danger so payment summaries can
   communicate "past due" and "outstanding"). ----- */
.cn-stat-icon.cn-stat-icon--warn {
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
}

.cn-stat-icon.cn-stat-icon--danger {
    background: var(--cn-danger-bg);
    color: var(--cn-danger);
}

/* ----- Display-number link cell (icon tile + mono number).
   Replaces the inline 25x25 SVG + link pattern in VisitPayments. ----- */
.cn-displaynum {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cn-navy);
    text-decoration: none;
    font-family: var(--cn-font);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
}

    .cn-displaynum:hover {
        color: var(--cn-navy-2);
        text-decoration: none;
    }

        .cn-displaynum:hover .cn-displaynum__num {
            text-decoration: underline;
        }

.cn-displaynum__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    flex: 0 0 32px;
}

    .cn-displaynum__icon svg {
        width: 16px;
        height: 16px;
    }

.cn-displaynum__num {
    font-family: var(--cn-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ----- Date/time split cell — date primary, time secondary.
   Use for any grid cell that shows a full timestamp; replaces
   the default DX single-line "MM/dd/yyyy hh:mm a". ----- */
.cn-datetime {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cn-datetime__date {
    font-family: var(--cn-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cn-text);
    font-variant-numeric: tabular-nums;
}

.cn-datetime__time {
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-2);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* ----- Phone cell — mini icon tile + tabular digits ----- */
.cn-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cn-font);
    font-size: 13.5px;
    color: var(--cn-text);
    font-variant-numeric: tabular-nums;
}

.cn-phone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
    flex: 0 0 24px;
}

    .cn-phone__icon svg {
        width: 12px;
        height: 12px;
    }

/* ----- Balance cell — right-aligned amount + status chip.
   `.cn-balance--owed | --pastdue | --paid` modifies both the
   amount color and the chip background/foreground. ----- */
.cn-balance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
    font-family: var(--cn-font);
}

.cn-balance__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--cn-muted-bg);
    color: var(--cn-muted, #64748B);
}

.cn-balance__amt {
    font-family: var(--cn-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    color: var(--cn-text);
}

.cn-balance--owed .cn-balance__amt {
    color: var(--cn-danger);
}

.cn-balance--paid .cn-balance__amt {
    color: var(--cn-success);
}

.cn-balance--owed .cn-balance__chip {
    background: var(--cn-danger-bg);
    color: var(--cn-danger);
}

.cn-balance--pastdue .cn-balance__chip {
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
}

.cn-balance--paid .cn-balance__chip {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

/* ----- Quick filter chip strip — sits between the grid toolbar
   and the dxDataGrid. Visual sugar that scopes the search panel;
   the chips are wired up per-page. ----- */
.cn-chip-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--cn-border);
    background: #FAFBFC;
}

.cn-chip-strip__label {
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 4px 6px 0;
}

.cn-chip-strip .cn-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
    font-size: 10px;
    font-weight: 700;
}

.cn-chip-strip .cn-chip.is-active .cn-chip__count,
.cn-chip-strip .cn-chip.dx-state-active .cn-chip__count {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* ============================================================
   VISIT PAYMENTS / PROVIDER PAYMENT — page-scoped polish.
   Shared by the Practice-Admin Visit Payments page
   (.cn-page-visitpayments, features/practiceadmindashboard/
   VisitPayments.cshtml) and the Provider Payment page
   (.cn-page-providerpayment, features/provider/payment/Index.cshtml)
   — the two are the same payment-list grid behind different
   routes, so they reuse one scope via :is(). Wires the
   dxDataGrid into the .cn-grid-card chrome and uses the shared
   cell primitives above. No layout, controller, or dxDataGrid
   column-config changes — only visual mapping.
   ============================================================ */

/* Right-align balance header to match the right-aligned cell content */
#main-content:is(.cn-page-visitpayments, .cn-page-providerpayment) .cn-grid-card .dx-datagrid-headers .dx-header-row > td[aria-label="Balance"],
#main-content:is(.cn-page-visitpayments, .cn-page-providerpayment) .cn-grid-card .dx-datagrid-headers .dx-header-row > td[aria-label="Balance column"] {
    text-align: right !important;
}

/* Tighten the chip-strip + grid spacing on small phones */
@media (max-width: 480px) {
    #main-content:is(.cn-page-visitpayments, .cn-page-providerpayment) .cn-chip-strip {
        padding: 10px 12px;
    }

    #main-content:is(.cn-page-visitpayments, .cn-page-providerpayment) .cn-displaynum__icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    #main-content:is(.cn-page-visitpayments, .cn-page-providerpayment) .cn-phone__icon {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }
}

/* Bootstrap .row negative-margin guard — matches the same rule used
   by every other v2 grid-listing page (createprovider, modifiers,
   cptmaster, practicesetup, …) so the dxDataGrid can't trigger a
   horizontal scroll on narrow phones. */
@media (max-width: 540px) {
    #main-content:is(.cn-page-visitpayments, .cn-page-providerpayment) #section-content > .container {
        overflow-x: hidden;
    }
}


/* ============================================================
   PAYMENT-DETAIL PRIMITIVES — shared by ViewHistoryPatient and
   any future "payment workspace" page that needs an action
   toolbar + visit/patient/balance summary + transaction grid.
   Generic on purpose (no page-scoping) so it composes anywhere.
   ============================================================ */

/* ----- Action toolbar card — wraps a dxToolbar so its dxButtons
   sit like a row of polished action chips. ----- */
.cn-action-bar {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.cn-action-bar__title {
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 4px 8px;
}

/* Reskin every dxButton inside a `.cn-action-bar > #toolbars` so
   they line up as filled navy action chips. Scoped to the nested
   combo so other dxToolbars in the app are unaffected.

   IMPORTANT: only style the BUTTONS — do NOT override
   `.dx-toolbar-before` / `.dx-toolbar-items-container` layout
   props. dxToolbar relies on those internally to measure widths
   and decide which `locateInMenu: 'auto'` items can stay inline
   vs. collapse into the overflow menu. Overriding float / display
   / position breaks that measurement and pushes every button into
   the menu even when there's plenty of room. */
.cn-action-bar #toolbars {
    font-family: var(--cn-font);
}

    .cn-action-bar #toolbars .dx-button {
        height: 40px !important;
        min-height: 40px !important;
        border-radius: var(--cn-radius) !important;
        padding: 0 14px !important;
        border: 1px solid var(--cn-navy) !important;
        background: var(--cn-navy) !important;
        box-shadow: var(--cn-shadow-sm) !important;
        margin-right: 6px !important;
    }

        .cn-action-bar #toolbars .dx-button:hover {
            background: var(--cn-navy-2) !important;
            border-color: var(--cn-navy-2) !important;
        }

        .cn-action-bar #toolbars .dx-button .dx-button-content {
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
        }

        .cn-action-bar #toolbars .dx-button .dx-button-text {
            color: #fff !important;
            font-family: var(--cn-font) !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            letter-spacing: .005em !important;
            overflow: visible !important;
        }

        .cn-action-bar #toolbars .dx-button .dx-icon {
            color: #fff !important;
            margin-right: 8px !important;
            font-size: 16px !important;
        }
        /* Image icons (production passes /img/money-check-light.png) need
   a white tint so they read on the navy button. */
        .cn-action-bar #toolbars .dx-button img.dx-icon {
            width: 16px !important;
            height: 16px !important;
            filter: brightness(0) invert(1);
            opacity: .95;
        }
    /* Style the overflow menu trigger (the 3-dot button that appears
   on narrow screens when items collapse) to match the action chips. */
    .cn-action-bar #toolbars .dx-toolbar-menu-section .dx-button,
    .cn-action-bar #toolbars .dx-dropdownmenu-button .dx-button {
        margin-right: 0 !important;
    }

/* ----- Mobile: separate the overflow (3-dot) menu from the inline
   action button(s) so the toolbar doesn't feel cramped. At ≤640px (the
   same breakpoint where .cn-summary collapses to one column) dxToolbar
   starts folding its `location:'before'` buttons into the overflow menu.
   Unlike the grid header panel, this toolbar has no right-alignment on
   its after/menu container, so the 3-dot ends up only ~6px from the last
   inline chip. `margin-left:auto` in the flex items-container pushes the
   menu to the right edge — clean separation + better visual balance,
   everything still on one row. We touch ONLY the after/menu container
   (never .dx-toolbar-before / .dx-toolbar-items-container) so dxToolbar's
   collapse width-measurement is unaffected. Desktop/tablet (>640px) are
   untouched. ----- */
@media (max-width: 640px) {
    .cn-action-bar #toolbars .dx-toolbar-after,
    .cn-action-bar #toolbars .dx-toolbar-menu-container {
        margin-left: auto !important;
    }

    /* Drop the trailing 6px margin on the last inline chip so the gap to
       the right-aligned menu reads as deliberate spacing, not overflow. */
    .cn-action-bar #toolbars .dx-toolbar-before .dx-button {
        margin-right: 0 !important;
    }

    /* Touch-friendly square tap target for the 3-dot trigger. */
    .cn-action-bar #toolbars .dx-toolbar-menu-section .dx-button,
    .cn-action-bar #toolbars .dx-dropdownmenu-button .dx-button {
        min-width: 44px !important;
    }
}

/* ----- Summary card — three sections (Visit · Patient · Balance)
   separated by hairlines, with a gradient navy panel for the money
   column. Collapses 3 → 2 → 1 columns at 980 / 640 px. ----- */
.cn-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    gap: 0;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
    font-family: var(--cn-font);
}

.cn-summary__section {
    padding: 18px 20px;
    border-right: 1px solid var(--cn-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .cn-summary__section:last-child {
        border-right: 0;
    }

.cn-summary__section--balance {
    background: linear-gradient(135deg, #F8FAFC 0%, var(--cn-navy-50) 100%);
}

.cn-summary__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cn-summary__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

    .cn-summary__icon svg {
        width: 16px;
        height: 16px;
    }

.cn-summary__icon--success {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

.cn-summary__icon--gold {
    background: rgba(209,156,70,.16);
    color: var(--cn-gold);
}

.cn-summary__icon--muted {
    background: var(--cn-muted-bg);
    color: var(--cn-text-2);
}

.cn-summary__title {
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cn-summary__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cn-summary__label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cn-text-3);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cn-summary__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.35;
}

    .cn-summary__value a {
        color: var(--cn-navy);
        text-decoration: none;
    }

        .cn-summary__value a:hover {
            text-decoration: underline;
        }

.cn-summary__value--phone {
    color: var(--cn-success);
    font-variant-numeric: tabular-nums;
}

.cn-summary__sub {
    font-size: 12px;
    color: var(--cn-text-3);
    margin-left: 6px;
}

@media (max-width: 980px) {
    .cn-summary {
        grid-template-columns: 1fr 1fr;
    }

    .cn-summary__section--balance {
        grid-column: span 2;
        border-top: 1px solid var(--cn-border);
        border-right: 0;
    }

    .cn-summary__section:nth-child(2) {
        border-right: 0;
    }
}

@media (max-width: 640px) {
    .cn-summary {
        grid-template-columns: 1fr;
    }

    .cn-summary__section {
        border-right: 0;
        border-bottom: 1px solid var(--cn-border);
    }

        .cn-summary__section:last-child {
            border-bottom: 0;
        }

    .cn-summary__section--balance {
        grid-column: span 1;
    }
}

/* ----- Money block — large mono amount + uppercase label.
   Used inside the balance summary section. ----- */
.cn-money {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cn-money__label {
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cn-money__amt {
    font-family: var(--cn-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--cn-navy);
}

.cn-money__amt--paid {
    color: var(--cn-success);
    font-size: 20px;
}

.cn-money__divider {
    height: 1px;
    background: rgba(12, 84, 148, .12);
    margin: 4px 0;
}

/* ----- Transaction-type pill variants — extend the existing .cn-pill
   primitive with payment-specific semantic colors. ----- */
.cn-pill--credit-card {
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

.cn-pill--cash {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

.cn-pill--refund {
    background: var(--cn-danger-bg);
    color: var(--cn-danger);
}

.cn-pill--charge {
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
}

.cn-pill--adjustment {
    background: rgba(209,156,70,.14);
    color: var(--cn-gold);
}

/* ----- Currency amount cell — mono digits, semantic color.
   Use inside a dxDataGrid cellTemplate for debit/credit/balance. ----- */
.cn-amt {
    font-family: var(--cn-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
}

.cn-amt--debit {
    color: var(--cn-danger);
}

.cn-amt--credit {
    color: var(--cn-success);
}

.cn-amt--zero {
    color: var(--cn-text-3);
}

/* ----- Comment cell — multi-line clamp with ellipsis, hover for
   the full text via the cell's `title` attribute. ----- */
.cn-comment {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--cn-font);
    font-size: 13.5px;
    color: var(--cn-text-2);
    line-height: 1.4;
    max-width: 240px;
}

/* ============================================================
   VIEW HISTORY PATIENT / PROVIDER PAYMENT HISTORY — page-scoped polish.
   Shared by the Practice-Admin payment-history page
   (.cn-page-viewhistorypatient, features/practiceadmindashboard/
   ViewHistoryPatient.cshtml) and the Provider payment-history page
   (.cn-page-providerpaymenthistory, features/provider/payment/
   History.cshtml) — same payment-history grid + modals behind
   different routes, so they reuse one scope via :is(). Wires the
   production dxDataGrid into the .cn-grid-card chrome and applies the
   .cn-action-bar / .cn-summary primitives. No layout / column-config /
   controller changes.
   ============================================================ */

/* Total-footer (Closing Balance row) styling — production page
   uses the dxDataGrid `summary.totalItems` feature. */
#main-content:is(.cn-page-viewhistorypatient, .cn-page-providerpaymenthistory) #visitpayments .dx-datagrid-total-footer > .dx-datagrid-content > .dx-datagrid-table > tbody > tr > td {
    font-family: var(--cn-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    background: #FAFBFC !important;
    border-top: 1px solid var(--cn-border) !important;
    padding: 12px 16px !important;
}

/* Bootstrap .row negative-margin guard — same as every other v2
   grid-listing page. */
@media (max-width: 540px) {
    #main-content:is(.cn-page-viewhistorypatient, .cn-page-providerpaymenthistory) #section-content > .container {
        overflow-x: hidden;
    }
}

/* ============================================================
   VIEW HISTORY PATIENT — modal action button standardization.

   The ViewHistoryPatient page renders 7 modals as siblings of
   #main-content (Bootstrap modals are appended to <body>, so
   they sit OUTSIDE the page-scope wrapper). Selectors below are
   therefore scoped by each modal's unique ID (#payments,
   #cashpayments, #cashrefund, #refund, #adjustments, #NewCharge,
   #AddEditcard) — that's narrow enough to avoid leaking onto
   other pages while still being able to attach to the modal DOM.

   All action buttons on this page (Save / Submit / Apply / Edit /
   Cancel / Close + the Stripe pay button) are normalized to the
   SAME design-system primary: filled navy, 50 px tall, 6 px
   radius, white 14 px / 600 / `--cn-font` text. They form one
   visually consistent action family.

   Styled element inventory:
     • dxButton type='default'  → Save / Submit Payment /
                                  Apply to account balance
     • .paymenteditcancel_button → Edit / Cancel inputs in
                                  #AddEditcard
     • .paymentcharge_button     → Stripe Pay button in #AddEditcard
     • .btn-outline-secondary    → Close button in every modal footer
   ============================================================ */

/* ----- Modal IDs covered (one comma-separated list reused below). ----- */

/* ----- Close button — Bootstrap .btn-outline-secondary in every
   modal footer. Promoted from Bootstrap gray to the navy primary
   so it visually pairs with Save at the SAME height. ----- */
#payments .modal-footer .btn.btn-outline-secondary,
#cashpayments .modal-footer .btn.btn-outline-secondary,
#cashrefund .modal-footer .btn.btn-outline-secondary,
#refund .modal-footer .btn.btn-outline-secondary,
#adjustments .modal-footer .btn.btn-outline-secondary,
#NewCharge .modal-footer .btn.btn-outline-secondary,
#AddEditcard .modal-footer .btn.btn-outline-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    min-width: 100px !important;
    padding: 0 18px !important;
    border-radius: var(--cn-radius) !important;
    border: 1px solid var(--cn-navy) !important;
    background: var(--cn-navy) !important;
    color: #fff !important;
    font-family: var(--cn-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .005em !important;
    text-shadow: none !important;
    box-shadow: var(--cn-shadow-sm) !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}

    #payments .modal-footer .btn.btn-outline-secondary:hover,
    #cashpayments .modal-footer .btn.btn-outline-secondary:hover,
    #cashrefund .modal-footer .btn.btn-outline-secondary:hover,
    #refund .modal-footer .btn.btn-outline-secondary:hover,
    #adjustments .modal-footer .btn.btn-outline-secondary:hover,
    #NewCharge .modal-footer .btn.btn-outline-secondary:hover,
    #AddEditcard .modal-footer .btn.btn-outline-secondary:hover,
    #payments .modal-footer .btn.btn-outline-secondary:focus,
    #cashpayments .modal-footer .btn.btn-outline-secondary:focus,
    #cashrefund .modal-footer .btn.btn-outline-secondary:focus,
    #refund .modal-footer .btn.btn-outline-secondary:focus,
    #adjustments .modal-footer .btn.btn-outline-secondary:focus,
    #NewCharge .modal-footer .btn.btn-outline-secondary:focus,
    #AddEditcard .modal-footer .btn.btn-outline-secondary:focus {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
        color: #fff !important;
        outline: none !important;
    }

/* ----- Edit + Cancel buttons (Add/Edit Card modal) — `.paymenteditcancel_button`
   is unique to this page so a class selector is safe (no page scope
   needed). Both Edit and Cancel render with the SAME primary navy
   color so they match Save. ----- */
.paymenteditcancel_button,
input.paymenteditcancel_button,
input[type="button"].paymenteditcancel_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    width: 100px !important;
    padding: 0 18px !important;
    /* Keep the original 21 px top offset — aligns the button vertically
       with the input next to it (input sits below a label). */
    margin: 21px 0 0 !important;
    border-radius: var(--cn-radius) !important;
    border: 1px solid var(--cn-navy) !important;
    background: var(--cn-navy) !important;
    color: #fff !important;
    font-family: var(--cn-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .005em !important;
    text-decoration: none !important;
    box-shadow: var(--cn-shadow-sm) !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}

    .paymenteditcancel_button:hover,
    .paymenteditcancel_button:focus,
    input.paymenteditcancel_button:hover,
    input.paymenteditcancel_button:focus {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
        color: #fff !important;
        outline: none !important;
    }

/* ----- Stripe `.paymentcharge_button` (the "Pay" button rendered
   when the Stripe Elements form is shown in #AddEditcard) — same
   primary system so the entire Stripe checkout flow shares the
   button language. Class is unique to this page; no scope needed. ----- */
.paymentcharge_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    padding: 0 22px !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-navy) !important;
    color: #fff !important;
    font-family: var(--cn-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: .005em !important;
    border: 1px solid var(--cn-navy) !important;
    box-shadow: var(--cn-shadow-sm) !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}

    .paymentcharge_button:hover,
    .paymentcharge_button:focus {
        background: var(--cn-navy-2) !important;
        border-color: var(--cn-navy-2) !important;
        outline: none !important;
    }

/* ----- Save / Submit / Apply dxButtons in modal footers — already
   styled by the global `.dx-button.dx-button-default` design-system
   rule (navy filled). The page's JS pins `height: "50"` so they sit
   at the same 50 px height as Close above. Reinforce a few details
   so legacy modal CSS can't accidentally win the cascade. ----- */
#payments .modal-footer .dx-button.dx-button-default,
#cashpayments .modal-footer .dx-button.dx-button-default,
#cashrefund .modal-footer .dx-button.dx-button-default,
#refund .modal-footer .dx-button.dx-button-default,
#adjustments .modal-footer .dx-button.dx-button-default,
#NewCharge .modal-footer .dx-button.dx-button-default,
#AddEditcard .modal-footer .dx-button.dx-button-default {
    height: 50px !important;
    min-height: 50px !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-navy) !important;
    border: 1px solid var(--cn-navy) !important;
    box-shadow: var(--cn-shadow-sm) !important;
    /* Size to the label, not to DX's stale width. Some of these buttons
       (e.g. "Apply to account balance" in #NewCharge / #adjustments) carry
       NO explicit JS width, so DX auto-sizes them — but they're built while
       the modal is display:none, so DX can't measure the text and the label
       gets clipped once shown. Let CSS size them to content with a 100 px
       floor (no hardcoded fixed width), and stop them shrinking in the
       flex footer so the full text always fits. */
    width: auto !important;
    min-width: 100px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

    /* DX renders .dx-button > .dx-button-content > .dx-button-text. Its base
       theme clips the text span (overflow:hidden + text-overflow:ellipsis);
       override so the full label is always visible and the content box keeps
       comfortable horizontal padding. */
    #payments .modal-footer .dx-button.dx-button-default .dx-button-content,
    #cashpayments .modal-footer .dx-button.dx-button-default .dx-button-content,
    #cashrefund .modal-footer .dx-button.dx-button-default .dx-button-content,
    #refund .modal-footer .dx-button.dx-button-default .dx-button-content,
    #adjustments .modal-footer .dx-button.dx-button-default .dx-button-content,
    #NewCharge .modal-footer .dx-button.dx-button-default .dx-button-content,
    #AddEditcard .modal-footer .dx-button.dx-button-default .dx-button-content {
        padding: 0 18px !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    #payments .modal-footer .dx-button.dx-button-default .dx-button-text,
    #cashpayments .modal-footer .dx-button.dx-button-default .dx-button-text,
    #cashrefund .modal-footer .dx-button.dx-button-default .dx-button-text,
    #refund .modal-footer .dx-button.dx-button-default .dx-button-text,
    #adjustments .modal-footer .dx-button.dx-button-default .dx-button-text,
    #NewCharge .modal-footer .dx-button.dx-button-default .dx-button-text,
    #AddEditcard .modal-footer .dx-button.dx-button-default .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        letter-spacing: .005em !important;
        text-transform: none !important;
        /* Defeat DX's default ellipsis/clip on the label span so the full
           "Apply to account balance" text shows on one line. */
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

/* ----- Modal footer layout — give the action pair breathing room
   and align right (Bootstrap default) with consistent 12 px gap. ----- */
#payments .modal-footer,
#cashpayments .modal-footer,
#cashrefund .modal-footer,
#refund .modal-footer,
#adjustments .modal-footer,
#NewCharge .modal-footer,
#AddEditcard .modal-footer {
    border-top: 1px solid var(--cn-border);
    padding: 14px 20px;
    gap: 12px;
}

@media (max-width: 480px) {
    /* On small phones, stack the buttons full-width so neither gets
       cut off. They keep the same 50 px height so the rhythm holds. */
    #payments .modal-footer,
    #cashpayments .modal-footer,
    #cashrefund .modal-footer,
    #refund .modal-footer,
    #adjustments .modal-footer,
    #NewCharge .modal-footer,
    #AddEditcard .modal-footer {
        flex-direction: column-reverse;
    }

        #payments .modal-footer > *,
        #cashpayments .modal-footer > *,
        #cashrefund .modal-footer > *,
        #refund .modal-footer > *,
        #adjustments .modal-footer > *,
        #NewCharge .modal-footer > *,
        #AddEditcard .modal-footer > * {
            width: 100% !important;
            margin-right: 0 !important;
        }

        #payments .modal-footer .btn.btn-outline-secondary,
        #cashpayments .modal-footer .btn.btn-outline-secondary,
        #cashrefund .modal-footer .btn.btn-outline-secondary,
        #refund .modal-footer .btn.btn-outline-secondary,
        #adjustments .modal-footer .btn.btn-outline-secondary,
        #NewCharge .modal-footer .btn.btn-outline-secondary,
        #AddEditcard .modal-footer .btn.btn-outline-secondary,
        .paymenteditcancel_button {
            width: 100% !important;
            min-width: 0 !important;
        }

        /* Match specificity of the desktop auto-width rule above so the
           dxButtons (incl. "Apply to account balance") also stack
           full-width on phones instead of staying content-width. */
        #payments .modal-footer .dx-button.dx-button-default,
        #cashpayments .modal-footer .dx-button.dx-button-default,
        #cashrefund .modal-footer .dx-button.dx-button-default,
        #refund .modal-footer .dx-button.dx-button-default,
        #adjustments .modal-footer .dx-button.dx-button-default,
        #NewCharge .modal-footer .dx-button.dx-button-default,
        #AddEditcard .modal-footer .dx-button.dx-button-default {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            flex: 1 1 auto !important;
        }
}

/* ============================================================
   VIEW HISTORY PATIENT — page-local utilities lifted out of the
   in-page <style> block. Each one was previously declared inline
   in features/practiceadmindashboard/ViewHistoryPatient.cshtml;
   centralizing here so the cshtml carries only Stripe Elements
   (which Stripe's iframe contract requires to live next to the
   form markup).
   ============================================================ */

/* ----- Modal save-button spacing — the legacy `margin-left: 9px` on
   #savePayment / #saveadjustment is no longer needed: the modal-footer
   flex `gap: 12px` (set above) now spaces every Save/Apply button from
   the Close button uniformly across all modals. Keeping the old margin
   would double-space these two footers (21 px vs 12 px elsewhere) and,
   on phones where the buttons stack full-width, push them off-flush. ----- */

/* ----- 3-dot trigger icon color + cursor — applied to the
   `<span class="dx-link dx-icon-overflow dx-link-icon iconcolor pointer">`
   inside the dxDataGrid cellTemplate at the action column. Page-
   scoped so other pages that re-declare these utilities aren't
   disturbed. ----- */
#main-content:is(.cn-page-viewhistorypatient, .cn-page-providerpaymenthistory) .iconcolor {
    color: #3f51b5 !important;
}

#main-content:is(.cn-page-viewhistorypatient, .cn-page-providerpaymenthistory) .pointer {
    cursor: pointer;
}

/* ----- `.dvline` vertical divider — used inside the modals
   (#payments, #cashpayments, #cashrefund, #refund, #adjustments,
   #NewCharge) to separate the Current/New balance columns. Uses
   --cn-border so the divider color tracks the design system
   instead of the raw #dee2e6 Bootstrap gray. ----- */
#payments .dvline,
#cashpayments .dvline,
#cashrefund .dvline,
#refund .dvline,
#adjustments .dvline,
#NewCharge .dvline {
    border-left: 1px solid var(--cn-border);
    height: 65px;
}

@media only screen and (max-width: 767px) {
    /* Collapse the divider on phones so it doesn't dominate the
       stacked layout — same behavior as the original in-page rule. */
    #payments .dvline,
    #cashpayments .dvline,
    #cashrefund .dvline,
    #refund .dvline,
    #adjustments .dvline,
    #NewCharge .dvline {
        height: 20px;
    }
}

/* ----- Read-only state — toggled at runtime by JS when
   `model.paymentEditAccess == false`:
       document.getElementById("toolbars").classList.add("readonly")
   Disables interactions on the action toolbar so users without
   edit access cannot trigger any of the Accept/Refund/Charge/
   Adjust modals. ----- */
#main-content:is(.cn-page-viewhistorypatient, .cn-page-providerpaymenthistory) .readonly {
    -webkit-user-modify: read-only;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   PRACTICE ADMIN DASHBOARD   (/practiceadmindashboard)
   The 11 access tiles inherit the same `.cn-setup-card` chrome
   as PracticeSetup / AnalyticsReports (extended above to include
   the dashboard scope). What lives below is dashboard-only:
     • .cn-util-row    Subscribe banner + role-switch link wrapper
     • .cn-upsell      Premium upsell banner (Normallimited only)
     • .cn-roleswitch  "Go to Provider Dashboard" link (PROVIDER role)
     • .cn-eyebrow     Small uppercase "Welcome back" label
     • .cn-title__name Gradient practice-name span inside the H1
     • .cn-lock        Premium-feature lock pill (inside tile titles)
     • flex override   .cn-setup-card__title becomes a flex container
                       so the lock pill can sit next to the title text
   Scoped via #main-content.cn-page-practiceadmindashboard.
   ════════════════════════════════════════════════════════════ */

/* ----- Utility row — Subscribe banner (left) + role-switch
   link (right). Both are conditional in the cshtml; the row's
   flex layout handles either rendering on its own. ----- */
#main-content.cn-page-practiceadmindashboard .cn-util-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Subscribe banner */
#main-content.cn-page-practiceadmindashboard .cn-upsell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    border: 1px solid var(--cn-navy-100, #D6E4F2);
    border-radius: var(--cn-radius-lg);
    min-width: 0;
    flex: 1 1 auto;
}

#main-content.cn-page-practiceadmindashboard .cn-upsell__star {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--cn-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-practiceadmindashboard .cn-upsell__star svg {
        width: 14px;
        height: 14px;
    }

#main-content.cn-page-practiceadmindashboard .cn-upsell__msg {
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.4;
    min-width: 0;
    flex: 1 1 auto;
}

#main-content.cn-page-practiceadmindashboard .cn-upsell__sub {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cn-text-2);
    margin-top: 1px;
}

#main-content.cn-page-practiceadmindashboard .cn-upsell__btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    background: var(--cn-navy);
    color: #fff !important;
    border: 1px solid var(--cn-navy);
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--cn-shadow-sm);
    transition: background 120ms ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

    #main-content.cn-page-practiceadmindashboard .cn-upsell__btn:hover {
        background: var(--cn-navy-2);
    }

/* "Go to Provider Dashboard" role-switch link — sits to the
   right of the upsell banner. Pill-shaped, ghost styling, navy
   on hover. */
#main-content.cn-page-practiceadmindashboard .cn-roleswitch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-navy);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
    flex: 0 0 auto;
    /* Always push to the right of .cn-util-row, even when the
       Upsell banner is hidden (non-Normallimited accounts). With
       only one flex child, margin-left:auto consumes all the free
       space and forces the link flush right. */
    margin-left: auto;
}

    #main-content.cn-page-practiceadmindashboard .cn-roleswitch:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
    }

    #main-content.cn-page-practiceadmindashboard .cn-roleswitch svg {
        width: 14px;
        height: 14px;
    }

/* ----- Welcome eyebrow + gradient practice-name. The H1 reads:
   <span class="cn-eyebrow">Welcome back</span>
   <h1 class="cn-title">Welcome to <span class="cn-title__name">@PracticeName</span></h1>
   The practice-name span gets the navy gradient via
   background-clip: text so the name stays on-brand. ----- */
#main-content.cn-page-practiceadmindashboard .cn-eyebrow {
    display: block;
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

#main-content.cn-page-practiceadmindashboard h1.cn-title .cn-title__name {
    background: linear-gradient(135deg, var(--cn-navy), var(--cn-navy-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ----- Tile title gets flex layout so the premium-lock pill
   can sit next to the title text on the same line (wraps cleanly
   if the title is long). Overrides the `display: block` baseline
   set in the shared title rule above. ----- */
#main-content.cn-page-practiceadminlibrary .cn-setup-card__title,
#main-content.cn-page-practiceadmindashboard .cn-setup-card__title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ----- Premium-lock pill — appears next to titles for tiles
   that are gated for Normallimited accounts. Inline, small,
   warm color so it reads as "upgrade" rather than "error". ----- */
#main-content.cn-page-practiceadmindashboard .cn-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
    border-radius: 999px;
    font-family: var(--cn-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
}

    #main-content.cn-page-practiceadmindashboard .cn-lock svg {
        width: 9px;
        height: 9px;
    }

@media (max-width: 480px) {
    #main-content.cn-page-practiceadmindashboard .cn-lock {
        padding: 1px 6px;
        font-size: 9.5px;
    }
}

/* ----- Mobile: stack the utility row cleanly so the upsell
   banner takes full width above the role-switch link. ----- */
@media (max-width: 540px) {
    #main-content.cn-page-practiceadmindashboard .cn-util-row {
        flex-direction: column;
        align-items: stretch;
    }

    #main-content.cn-page-practiceadmindashboard .cn-roleswitch {
        align-self: flex-start;
    }
}

/* ----- Title row alignment override — the shared .cn-title-row
   primitive at publish.css:13562 defaults to align-items: flex-start
   so the title block top-aligns with the right-side element. The
   mockup uses flex-end so the .cn-area label bottom-aligns with
   the subtitle's baseline, which reads more polished. Apply the
   override only on the dashboard scope; other consumers of
   .cn-title-row keep their existing alignment. ----- */
#main-content.cn-page-practiceadmindashboard .cn-title-row {
    align-items: flex-end;
    margin-bottom: 22px;
}

/* ============================================================
   20. INVITE GUEST PAGE
   /inviteguest/<visitId>/<guestId> · features/guest/InviteGuest.cshtml

   This page is mounted under all three layouts (Provider /
   PracticeAdmin / Patient) and links publish.css directly, so the
   shared design system (.cn-grid-card, .cn-search, .cn-identity,
   .cn-pill, .cn-section, .cn-back, .cn-title, .cn-area) drives most
   of the visual treatment.

   The rules in this block ONLY cover what's unique to Invite Guest:
     · Info banner above the guest grid (.cn-info / .cn-info__*)
     · Role badge pill rendered inside grid cells (.cn-role-pill)
     · Send Invite button + dxForm field-label override
     · Error message banner above the title (#errormessage)
     · Narrow-phone (≤ 600 / 389 px) responsive tweaks

   The "Invite Guest" primary button uses the shared
   `.cn-providers-titlebar` markup so it inherits the same DX-default
   styling that "Add New Patient" gets on PracticePatients — no
   page-scoped overrides needed for it.

   Everything is scoped to `#main-content.cn-page-inviteguest` so no
   rule leaks to other pages.
   ============================================================ */

/* ----- Title bar — uses the shared `.cn-providers-titlebar`
   primitive (same markup as patientmanagement/practicepatients).
   No page-scoped overrides needed: the "Invite Guest" button
   inherits the same DX-default styling that "Add New Patient"
   gets on PracticePatients (icon + text + height: 42 via the
   dxButton config). Removed the previous custom #NewInviteGuestbutton
   block so the two buttons render identically. ----- */

/* ----- Info banner above the guest list ----- */
#main-content.cn-page-inviteguest .cn-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100);
    border-radius: var(--cn-radius-lg);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: var(--cn-font);
}

#main-content.cn-page-inviteguest .cn-info__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--cn-elev);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-inviteguest .cn-info__icon svg {
        width: 14px;
        height: 14px;
    }

#main-content.cn-page-inviteguest .cn-info__text {
    font-size: 13px;
    color: var(--cn-text);
    line-height: 1.45;
}

    #main-content.cn-page-inviteguest .cn-info__text strong {
        color: var(--cn-navy);
        font-weight: 700;
    }

/* ----- "Role" badge inside grid cells ----- */
#main-content.cn-page-inviteguest .cn-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cn-muted-bg);
    border: 1px solid var(--cn-border);
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-text-2);
}

/* ----- dxForm field polish — Send Invite button + labels.
   (Most input chrome already comes from `.cn-section .dx-texteditor`
   rules earlier in this file; these rules add the page-specific
   bits.) ----- */
#main-content.cn-page-inviteguest #inviteguest-form .dx-field-item-label-text {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .02em !important;
}

#main-content.cn-page-inviteguest #inviteguest-form .dx-button.dx-button-default {
    /* margin-top adds breathing room above the Send Invite button so
       it doesn't sit flush against the Relationship/Guest field. The
       button stays centered (horizontalAlignment: "center" in dxForm)
       and the 20-px gap separates the action from the form fields. */
    margin-top: 35px !important;
    background: var(--cn-navy) !important;
    background-color: var(--cn-navy) !important;
    border-color: var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
    height: 44px !important;
    box-shadow: var(--cn-shadow-sm) !important;
}

    #main-content.cn-page-inviteguest #inviteguest-form .dx-button.dx-button-default:hover {
        background: var(--cn-navy-2) !important;
        background-color: var(--cn-navy-2) !important;
    }

    #main-content.cn-page-inviteguest #inviteguest-form .dx-button.dx-button-default .dx-button-content {
        padding: 0 22px !important;
    }

    #main-content.cn-page-inviteguest #inviteguest-form .dx-button.dx-button-default .dx-button-text {
        color: #fff !important;
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

/* ----- Error message banner above the title ----- */
#main-content.cn-page-inviteguest #errormessage {
    background: var(--cn-danger-bg);
    color: var(--cn-danger) !important;
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: var(--cn-radius);
    padding: 10px 14px;
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 14px;
}

/* ----- Mobile — most CareNiva customers are on phones.
   The shared `.cn-providers-titlebar` rules at the top of this file
   already collapse the titlebar to a column and stretch the action
   container; this rule just extends the full-width #NewProviderbutton
   mobile rule to also cover #NewInviteGuestbutton so the action
   button reaches edge-to-edge on small screens. ----- */
@media (max-width: 600px) {
    #main-content.cn-page-inviteguest .cn-providers-titlebar__action #NewInviteGuestbutton,
    #main-content.cn-page-inviteguest .cn-providers-titlebar__action #NewInviteGuestbutton .dx-button.dx-button-default {
        width: 100% !important;
        display: block !important;
    }
}

/* ----- Super-narrow phones (≤ 389 px) — tighten button text and
   page title so they still fit on very old / very small devices.
   The shared `.cn-title` rule already scales to 22 px at 720 px;
   this further reduces to ~18 px below 389 px. ----- */
@media only screen and (min-device-width: 150px) and (max-device-width: 389px) {
    #main-content.cn-page-inviteguest span.dx-button-text {
        font-size: 13px;
    }

    #main-content.cn-page-inviteguest h1#headertextid {
        font-size: 1.125rem;
        margin-top: 9px;
    }
}

/* ============================================================
   ENCOUNTER ACCORDION — SECTION ICON TILE
   Prepended to each dxAccordion title by sectionIcon() in
   features/visit/PatientHistory.cshtml. Mirrors the mockup
   wwwroot/mockups/patienthistory-v2.html ( .cn-accordion__icon ).
   ============================================================ */
.cn-accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: var(--cn-navy-50, #E8F0F9);
    color: var(--cn-navy, #0C5494);
    margin-right: 10px;
    vertical-align: middle;
}

    .cn-accordion-icon svg {
        width: 16px;
        height: 16px;
    }
/* Hover row — icon tile picks up a slightly deeper navy background */
.cn-encounter-accordion .dx-accordion-item-title:hover .cn-accordion-icon,
.cn-encounter-accordion .dx-accordion-item:hover .cn-accordion-icon {
    background: rgba(12, 84, 148, .14);
}

@media (max-width: 720px) {
    .cn-accordion-icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        margin-right: 8px;
    }

        .cn-accordion-icon svg {
            width: 14px;
            height: 14px;
        }
}

/* ============================================================
   VISIT FAMILY — SHARED CHROME
   Reusable primitives for Reschedule Visit, Patient History,
   Visit Index. Companion mockups in wwwroot/mockups/.
   ============================================================ */

/* ---------- Title pill — small status hint next to an H1
   (used on Reschedule Visit, can be reused on any in-flight page) ---------- */
.cn-title-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    margin-left: 10px;
    border-radius: 999px;
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.cn-title-pill--info {
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

.cn-title-pill--success {
    background: var(--cn-success-bg);
    color: var(--cn-success);
}

/* ---------- Locked identity row — surfaces a fixed patient/provider
   the user cannot change (e.g. Reschedule Visit keeps the patient) ---------- */
.cn-locked-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--cn-muted-bg);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    margin-bottom: 18px;
}

.cn-locked-row__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(12, 84, 148, .14);
    text-transform: uppercase;
}

.cn-locked-row__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 auto;
}

.cn-locked-row__label {
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cn-locked-row__name {
    font-family: var(--cn-font);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.005em;
}

/* ---------- Encounter "approved & locked" banner — the provider Encounter
   page shows this above the hero when VisitStatus == Closed, alongside a
   Reopen action. Amber/warn callout + lock icon tile + the #Reopen
   dxButton in the right-hand action slot. ---------- */
.cn-lock-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 4px 0 16px;
    background: var(--cn-warn-bg);
    border: 1px solid rgba(180, 83, 9, .22);
    border-radius: var(--cn-radius-lg);
    font-family: var(--cn-font);
}

.cn-lock-banner__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(180, 83, 9, .12);
    color: var(--cn-warn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .cn-lock-banner__icon svg {
        width: 20px;
        height: 20px;
    }

.cn-lock-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.cn-lock-banner__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-warn);
    letter-spacing: -.005em;
    line-height: 1.25;
}

.cn-lock-banner__sub {
    font-size: 13px;
    color: var(--cn-text-2);
    line-height: 1.4;
}

.cn-lock-banner__action {
    flex: 0 0 auto;
    margin-left: auto;
}
    /* #Reopen is a dxButton type="default" (navy) — normalise to the
       design-system primary height so it sits cleanly in the banner. */
    .cn-lock-banner__action .dx-button.dx-button-default {
        height: var(--cn-h-btn-primary) !important;
        min-height: var(--cn-h-btn-primary) !important;
        min-width: 120px !important;
    }

@media (max-width: 640px) {
    .cn-lock-banner {
        flex-wrap: wrap;
    }

    .cn-lock-banner__action {
        margin-left: 54px;
        width: 100%;
    }

        .cn-lock-banner__action .dx-button.dx-button-default {
            width: 100% !important;
        }
}

/* ---------- Encounter footer action bar — the provider Encounter page's
   e-Prescribe + Approve & Lock actions, right-aligned under the content
   with a hairline top divider. e-Prescribe is a secondary outline; the
   Approve & Lock (#default-contained-search lockbutton) is the navy
   primary. ---------- */
.cn-encounter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cn-border);
}

    /* Collapse the dxForm wrapper around the Approve & Lock button (it's the
   form's only field) so it sits inline in the flex bar. */
    .cn-encounter-actions #e-Prescribe,
    .cn-encounter-actions #default-contained-search,
    .cn-encounter-actions #default-contained-search .dx-form,
    .cn-encounter-actions #default-contained-search .dx-layout-manager,
    .cn-encounter-actions #default-contained-search .dx-field-item,
    .cn-encounter-actions #default-contained-search .dx-field-item-content,
    .cn-encounter-actions #default-contained-search .dx-box-item {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        width: auto !important;
    }

        /* e-Prescribe is gated by Model.EPrescribe — drop the empty mount div so it
   doesn't leave a gap in the flex bar when the button isn't rendered. */
        .cn-encounter-actions #e-Prescribe:empty {
            display: none;
        }

        /* Approve & Lock — primary navy, design-system height. */
        .cn-encounter-actions #default-contained-search .dx-button.dx-button-default {
            height: var(--cn-h-btn-primary) !important;
            min-height: var(--cn-h-btn-primary) !important;
            min-width: 160px !important;
            border-radius: var(--cn-radius) !important;
        }

    /* e-Prescribe — secondary outline (sits left of the primary; the page's
   legacy `.Prescribe{color:danger}` text rule is overridden here). */
    .cn-encounter-actions .dx-button.Prescribe.dx-button-default {
        background: var(--cn-elev) !important;
        background-color: var(--cn-elev) !important;
        border: 1px solid var(--cn-border-2) !important;
        border-radius: var(--cn-radius) !important;
        height: var(--cn-h-btn-primary) !important;
        min-height: var(--cn-h-btn-primary) !important;
        min-width: 120px !important;
        box-shadow: none !important;
    }

        .cn-encounter-actions .dx-button.Prescribe.dx-button-default .dx-button-text {
            color: var(--cn-navy) !important;
            font-weight: 600 !important;
        }

        .cn-encounter-actions .dx-button.Prescribe.dx-button-default:hover {
            background: var(--cn-navy-50) !important;
            background-color: var(--cn-navy-50) !important;
            border-color: var(--cn-navy) !important;
        }

@media (max-width: 540px) {
    .cn-encounter-actions {
        justify-content: stretch;
    }

        .cn-encounter-actions #e-Prescribe,
        .cn-encounter-actions #default-contained-search {
            flex: 1 1 100%;
        }

        .cn-encounter-actions .dx-button.dx-button-default {
            width: 100% !important;
        }
}

/* ---------- Questionnaire completed-answer review (provider Encounter,
   accordion section ID 0). The answer list is hand-built read-only HTML
   carrying legacy 17px/Poppins inline styles + position / negative-margin
   hacks; retypographied to the design system here (scoped !important
   overrides the inline styles) WITHOUT touching the data-bound loop or the
   copy-to-vitals JS. The attribute selectors target the known legacy inline
   markup (answer-indent divs, copy-to-vitals icon). ---------- */
.cn-encounter-accordion .cn-q-review {
    font-family: var(--cn-font);
    margin: 4px 0 0;
}

    .cn-encounter-accordion .cn-q-review hr {
        margin: 10px 0 14px !important;
        border: 0 !important;
        border-top: 1px solid var(--cn-border) !important;
    }
    /* Question / field labels */
    .cn-encounter-accordion .cn-q-review p {
        font-family: var(--cn-font) !important;
        position: static !important;
        top: auto !important;
        margin: 0 0 4px !important;
        padding-left: 0 !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--cn-text) !important;
        line-height: 1.45 !important;
    }
        /* Inline answer value (INT fields render the answer in a <span>) */
        .cn-encounter-accordion .cn-q-review p span {
            font-weight: 400 !important;
            font-size: 14px !important;
            color: var(--cn-text-2) !important;
        }
    /* Answer block (string + custom answers sit in a padding-left:50px div) */
    .cn-encounter-accordion .cn-q-review div[style*="padding-left"] {
        padding-left: 0 !important;
        margin: 2px 0 12px !important;
    }

        .cn-encounter-accordion .cn-q-review div[style*="padding-left"] p {
            font-weight: 400 !important;
            color: var(--cn-text-2) !important;
            margin: 0 !important;
        }
    /* Copy-to-vitals icon — drop the float hack; sit it inline after the label */
    .cn-encounter-accordion .cn-q-review a[title="Copy to vitals"] {
        float: none !important;
        padding-right: 0 !important;
        margin-left: 6px !important;
        vertical-align: middle;
    }

        .cn-encounter-accordion .cn-q-review a[title="Copy to vitals"] svg {
            width: 16px !important;
            height: 16px !important;
        }
    /* Row item spacing */
    .cn-encounter-accordion .cn-q-review .col-md-4,
    .cn-encounter-accordion .cn-q-review .col-md-12 {
        margin-bottom: 8px;
    }

/* ============================================================
   ENCOUNTER / PATIENT-HISTORY POLISH
   Applies to /Visit/PatientHistory/<id> via _History.cshtml.
   Wraps the existing #toolbars dxToolbar + #accordion-container
   dxAccordion in card chrome; adds a patient hero strip.
   Mockup: wwwroot/mockups/patienthistory-v2.html.
   ============================================================ */

/* ---------- Patient hero strip ---------- */
.cn-hero {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 14px 16px;
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px 16px;
    align-items: center;
    font-family: var(--cn-font);
}

@media (max-width: 720px) {
    .cn-hero {
        grid-template-columns: auto 1fr;
        padding: 14px;
        gap: 10px 14px;
    }

    .cn-hero__meta {
        grid-column: 1 / -1;
        align-items: flex-start !important;
    }
}

.cn-hero__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    border: 1px solid rgba(12, 84, 148, .14);
    text-transform: uppercase;
}

.cn-hero__id {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cn-hero__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
    line-height: 1.2;
}

.cn-hero__sub {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--cn-text-2);
    line-height: 1.3;
}

    .cn-hero__sub strong {
        color: var(--cn-text);
        font-weight: 600;
    }

.cn-hero__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 12px;
}

.cn-hero__visit-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: var(--cn-navy);
    color: #fff;
    border-radius: var(--cn-radius);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

    .cn-hero__visit-time svg {
        width: 14px;
        height: 14px;
    }

.cn-hero__provider {
    color: var(--cn-text-2);
    font-weight: 500;
    font-size: 12.5px;
    white-space: nowrap;
}

    .cn-hero__provider strong {
        color: var(--cn-text);
        font-weight: 700;
    }

/* ---------- Small status tag (smaller than .cn-chip; used on hero) ---------- */
.cn-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cn-muted-bg);
    border: 1px solid var(--cn-border);
    font-family: var(--cn-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cn-text-2);
    white-space: nowrap;
}

    .cn-tag svg {
        width: 11px;
        height: 11px;
        color: var(--cn-text-3);
    }

.cn-tag--success {
    background: var(--cn-success-bg);
    border-color: rgba(4, 120, 87, .2);
    color: var(--cn-success);
}

    .cn-tag--success svg {
        color: var(--cn-success);
    }

.cn-tag--warn {
    background: var(--cn-warn-bg);
    border-color: rgba(180, 83, 9, .2);
    color: var(--cn-warn);
}

    .cn-tag--warn svg {
        color: var(--cn-warn);
    }

.cn-tag--danger {
    background: var(--cn-danger-bg);
    border-color: rgba(220, 38, 38, .2);
    color: var(--cn-danger);
}

    .cn-tag--danger svg {
        color: var(--cn-danger);
    }

.cn-tag--navy {
    background: var(--cn-navy-50);
    border-color: rgba(12, 84, 148, .18);
    color: var(--cn-navy);
}

    .cn-tag--navy svg {
        color: var(--cn-navy);
    }

/* ---------- Generic icon-only button (28-36 px tap target) ---------- */
.cn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--cn-radius);
    background: transparent;
    border: 1px solid transparent;
    color: var(--cn-text-2);
    cursor: pointer;
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

    .cn-icon-btn:hover {
        background: var(--cn-navy-50);
        border-color: rgba(12, 84, 148, .15);
        color: var(--cn-navy);
        text-decoration: none;
    }

    .cn-icon-btn svg {
        width: 14px;
        height: 14px;
    }

/* ---------- Encounter toolbar (wraps the existing #toolbars dxToolbar) ---------- */
.cn-encounter-toolbar {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 6px 10px;
    margin-bottom: 10px;
    font-family: var(--cn-font);
    /* overflow: visible — let DX's dxToolbar handle overflow via
       locateInMenu: "auto" (items that don't fit collapse into the
       built-in ⋮ menu on narrow screens). If we set overflow-x: auto
       here, the items become horizontally scrollable instead and DX
       never moves them to the overflow menu — so on phones Video AI
       Scribe Sync / Past Visit / Actions disappear off-screen.
       overflow: visible also keeps the .cn-tool-btn tooltip from
       being clipped below the toolbar edge. */
    overflow: visible;
}

    .cn-encounter-toolbar > #toolbars,
    .cn-encounter-toolbar > #toolbars.dx-widget,
    .cn-encounter-toolbar .dx-toolbar {
        background: transparent !important;
        padding: 0 !important;
    }

        .cn-encounter-toolbar .dx-toolbar .dx-toolbar-items-container {
            height: 48px !important;
        }

    .cn-encounter-toolbar .dx-toolbar-item {
        padding: 0 2px !important;
    }
        /* "Encounter" title item (the only item with cssClass: "cn-toolbar-title").
   Scoped to that class so the bold + divider styling does NOT bleed onto
   sibling toolbar items (which use templates with their own .cn-tool-btn). */
        .cn-encounter-toolbar .dx-toolbar-item.cn-toolbar-title .dx-toolbar-item-content {
            font-family: var(--cn-font);
            font-size: 13px;
            font-weight: 700;
            color: var(--cn-text);
            letter-spacing: -.005em;
            padding: 0 10px 0 4px;
            margin-right: 4px;
            border-right: 1px solid var(--cn-border);
            line-height: 1;
        }

    .cn-encounter-toolbar .dx-toolbar .dx-button.dx-button-default {
        background: var(--cn-navy) !important;
        border-color: var(--cn-navy) !important;
        border-radius: var(--cn-radius) !important;
        box-shadow: var(--cn-shadow-sm) !important;
        height: 36px !important;
        padding: 0 14px !important;
        margin-left: 4px;
    }

        .cn-encounter-toolbar .dx-toolbar .dx-button.dx-button-default:hover {
            background: var(--cn-navy-2) !important;
            border-color: var(--cn-navy-2) !important;
        }

        .cn-encounter-toolbar .dx-toolbar .dx-button.dx-button-default .dx-button-text {
            color: #fff !important;
            font-weight: 600 !important;
            font-size: 13px !important;
            text-transform: none !important;
        }

        .cn-encounter-toolbar .dx-toolbar .dx-button.dx-button-default .dx-icon {
            width: 16px !important;
            height: 16px !important;
            margin: 0 6px 0 0 !important;
        }

            .cn-encounter-toolbar .dx-toolbar .dx-button.dx-button-default .dx-icon svg {
                fill: #fff !important;
                color: #fff !important;
                width: 16px !important;
                height: 16px !important;
            }

    .cn-encounter-toolbar .dx-menu .dx-menu-item-content {
        padding: 8px 12px !important;
        border-radius: var(--cn-radius) !important;
        transition: background-color 120ms ease, color 120ms ease;
    }

    .cn-encounter-toolbar .dx-menu .dx-menu-item:hover .dx-menu-item-content {
        background: var(--cn-navy-50) !important;
    }

    .cn-encounter-toolbar .dx-menu .dx-menu-item-text {
        color: var(--cn-text-2) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    .cn-encounter-toolbar .dx-menu .dx-menu-item:hover .dx-menu-item-text {
        color: var(--cn-navy) !important;
    }

/* ---------- Actions dxMenu — submenu popup polish ----------
   dxMenu renders its submenu items in a separate .dx-context-menu
   overlay outside the toolbar DOM. The cssClass: "cn-encounter-actions-menu"
   on the dxMenu propagates to that popup, giving us a scoping hook. */
.dx-context-menu.cn-encounter-actions-menu .dx-menu-items-container {
    border-radius: var(--cn-radius-lg) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06) !important;
    border: 1px solid var(--cn-border) !important;
    background: #fff !important;
    padding: 6px !important;
    min-width: 220px;
    overflow: hidden;
    font-family: var(--cn-font);
}
/* Subtle pop-in when the menu opens */
.dx-context-menu.cn-encounter-actions-menu .dx-overlay-content {
    animation: cn-encounter-menu-pop 140ms cubic-bezier(.16, 1, .3, 1);
    transform-origin: top center;
}

@keyframes cn-encounter-menu-pop {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Each submenu item — clean row */
.dx-context-menu.cn-encounter-actions-menu .dx-menu-item {
    border-radius: var(--cn-radius) !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    transition: background-color 120ms ease, color 120ms ease;
}

    .dx-context-menu.cn-encounter-actions-menu .dx-menu-item .dx-menu-item-content {
        display: flex !important;
        align-items: center;
        padding: 8px 12px !important;
        font-family: var(--cn-font) !important;
    }
    /* Icon column — small navy-tinted tile around DX-rendered icon */
    .dx-context-menu.cn-encounter-actions-menu .dx-menu-item .dx-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        margin-right: 10px !important;
        border-radius: 6px;
        background: var(--cn-navy-50);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        transition: background-color 120ms ease;
    }

        .dx-context-menu.cn-encounter-actions-menu .dx-menu-item .dx-icon svg {
            width: 14px !important;
            height: 14px !important;
        }
    /* Label */
    .dx-context-menu.cn-encounter-actions-menu .dx-menu-item .dx-menu-item-text {
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: var(--cn-text) !important;
        line-height: 1.2 !important;
        padding: 0 !important;
    }
    /* Hover / focus — full row picks up navy-50 bg, icon tile deepens to navy */
    .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-hover,
    .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-focused {
        background: var(--cn-navy-50) !important;
    }

        .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-hover .dx-icon,
        .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-focused .dx-icon {
            background: var(--cn-navy);
        }

            .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-hover .dx-icon svg path,
            .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-focused .dx-icon svg path {
                fill: #fff !important;
                color: #fff !important;
            }

        .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-hover .dx-menu-item-text,
        .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-focused .dx-menu-item-text {
            color: var(--cn-navy) !important;
            font-weight: 600 !important;
        }
    /* Active / clicked state — slightly deeper */
    .dx-context-menu.cn-encounter-actions-menu .dx-menu-item.dx-state-active {
        background: #DCE9F6 !important;
    }

@media (max-width: 720px) {
    /* Hide ONLY the "Encounter" title text on phones — the toolbar buttons
       (AI Scribe / Video Sync / Past Visit / Actions / Schedule Follow-Up)
       must stay visible (or collapse into DX's ⋮ overflow menu). */
    .cn-encounter-toolbar .dx-toolbar-item.cn-toolbar-title {
        display: none !important;
    }
}

/* DX's overflow ⋮ button — appears on narrow screens when items with
   locateInMenu: "auto" collapse into a dropdown. Style the trigger
   so it matches the cn-tool-btn pill chrome. */
.cn-encounter-toolbar .dx-dropdownmenu-button,
.cn-encounter-toolbar .dx-toolbar-menu-section > .dx-toolbar-item {
    background: transparent !important;
}

    .cn-encounter-toolbar .dx-dropdownmenu-button .dx-button {
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: var(--cn-radius) !important;
        box-shadow: none !important;
        height: 36px !important;
        width: 36px !important;
        padding: 0 !important;
        color: var(--cn-text-2) !important;
    }

        .cn-encounter-toolbar .dx-dropdownmenu-button .dx-button:hover {
            background: var(--cn-navy-50) !important;
            color: var(--cn-navy) !important;
        }

        .cn-encounter-toolbar .dx-dropdownmenu-button .dx-button .dx-icon {
            color: inherit !important;
            fill: currentColor !important;
        }

/* Overflow popup that DX creates — the items inside should look like
   the cn-encounter-actions-menu submenu (same rounded card chrome). */
.dx-overlay-content .dx-toolbar-menu-section {
    background: #fff !important;
    border-radius: var(--cn-radius-lg) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06) !important;
    border: 1px solid var(--cn-border) !important;
    padding: 6px !important;
    min-width: 220px;
    font-family: var(--cn-font);
}

    .dx-overlay-content .dx-toolbar-menu-section .dx-toolbar-item {
        padding: 4px 6px !important;
    }

    .dx-overlay-content .dx-toolbar-menu-section .cn-tool-btn {
        width: 100%;
        justify-content: flex-start;
        height: 36px !important;
    }

        .dx-overlay-content .dx-toolbar-menu-section .cn-tool-btn[data-cn-tip]::after,
        .dx-overlay-content .dx-toolbar-menu-section .cn-tool-btn[data-cn-tip]::before {
            /* Don't show CSS tooltip inside the dropdown — would overlap popup */
            display: none !important;
        }

/* ----- Payment action-toolbar overflow items — the .cn-action-bar
   #toolbars on ViewHistoryPatient + provider/payment/history collapse
   their `widget:'dxButton', type:'default'` actions (Accept Cash, Cash
   Refund, New Charge, Adjust Balance, …) into this overflow popup on
   narrow screens. DevExtreme renders those collapsed buttons as a dxLIST
   — each row carries .dx-toolbar-menu-action.dx-toolbar-hidden-button
   (a .dx-list-item, NOT a .dx-toolbar-item). Without a gap the navy
   buttons stack flush and read as one merged block. Give each row clear
   vertical separation and size the button as a full-width, touch-friendly
   rounded action. Targeting the list-item classes scopes this to the
   widget-button overflow (payment); the encounter toolbar's overflow
   uses template .dx-toolbar-item rows, so it is unaffected. Only the
   collapsed popup is touched, so the desktop inline toolbar is unchanged. ----- */
.dx-overlay-content .dx-toolbar-menu-action.dx-toolbar-hidden-button {
    margin-bottom: 8px !important;
}

    .dx-overlay-content .dx-toolbar-menu-action.dx-toolbar-hidden-button:last-child {
        margin-bottom: 0 !important;
    }

    .dx-overlay-content .dx-toolbar-menu-action.dx-toolbar-hidden-button .dx-button.dx-button-default {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: var(--cn-radius) !important;
    }

/* ---------- .cn-tool-btn — chip-style item used in dxToolbar templates
   (AI Scribe, Video AI Scribe Sync, Past Visit) ---------- */
.cn-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--cn-text-2);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

    .cn-tool-btn:hover,
    .cn-tool-btn:focus-visible {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
        text-decoration: none;
    }

    .cn-tool-btn:focus {
        outline: 0;
    }

    .cn-tool-btn:focus-visible {
        box-shadow: var(--cn-focus-ring);
    }

    .cn-tool-btn svg {
        width: 16px;
        height: 16px;
        fill: var(--cn-navy);
        color: var(--cn-navy);
        flex: 0 0 16px;
    }

    .cn-tool-btn:hover svg {
        fill: var(--cn-navy-2);
        color: var(--cn-navy-2);
    }

    .cn-tool-btn span {
        color: inherit;
    }

.cn-tool-btn--mic.is-recording {
    color: var(--cn-danger);
}

    .cn-tool-btn--mic.is-recording svg {
        fill: var(--cn-danger);
        color: var(--cn-danger);
        animation: cn-pulse 1.2s ease-in-out infinite;
    }

@keyframes cn-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }
}

.cn-tool-btn.readonly,
.cn-tool-btn.readonly:hover {
    opacity: .6;
    cursor: progress;
}

/* CSS-only tooltip for .cn-tool-btn[data-cn-tip].
   IMPORTANT: we read from data-cn-tip (a custom attribute), NOT title.
   The page loads Bootstrap globally, and Bootstrap's tooltip JS — even
   when not explicitly initialized — has document-level mouseover
   handlers on [data-toggle="tooltip"][title] and on plain [title]
   elements that swap `title` ↔ `data-original-title` mid-hover.
   That swap is what caused the rapid show/hide flicker: every time
   Bootstrap moved the title away, `content: attr(title)` resolved to
   empty → tooltip vanished. Using a non-standard data-cn-tip
   attribute makes Bootstrap completely ignore it. */
.cn-tool-btn[data-cn-tip]:not([data-cn-tip=""]) {
    position: relative;
}

    .cn-tool-btn[data-cn-tip]:not([data-cn-tip=""])::after {
        content: attr(data-cn-tip);
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        padding: 6px 10px;
        background: var(--cn-text);
        color: #fff;
        border-radius: var(--cn-radius);
        box-shadow: var(--cn-shadow-md);
        font-family: var(--cn-font);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        white-space: nowrap;
        max-width: 280px;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 120ms ease, visibility 120ms ease;
        transition-delay: 0ms; /* hide immediately when hover leaves */
    }

    .cn-tool-btn[data-cn-tip]:not([data-cn-tip=""])::before {
        content: "";
        position: absolute;
        top: calc(100% + 1px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--cn-text);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 120ms ease, visibility 120ms ease;
        transition-delay: 0ms;
    }

    .cn-tool-btn[data-cn-tip]:not([data-cn-tip=""]):hover::after,
    .cn-tool-btn[data-cn-tip]:not([data-cn-tip=""]):hover::before {
        opacity: 1;
        visibility: visible;
        transition-delay: 400ms; /* hover-intent delay before showing */
    }

/* ---------- Encounter accordion (wraps #accordion-container dxAccordion) ---------- */
.cn-encounter-accordion {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 10px;
    font-family: var(--cn-font);
}

    .cn-encounter-accordion #accordion-container,
    .cn-encounter-accordion .dx-accordion {
        background: transparent !important;
    }
    /* Every accordion row gets a hairline top border; first child has no border. */
    .cn-encounter-accordion .dx-accordion-item {
        border: 0 !important;
        border-top: 1px solid var(--cn-border) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

        .cn-encounter-accordion .dx-accordion-item:first-child {
            border-top: 0 !important;
        }

    .cn-encounter-accordion .dx-accordion-item-title {
        padding: 12px 18px 12px 46px !important;
        background: transparent !important;
        color: var(--cn-text) !important;
        font-family: var(--cn-font) !important;
        transition: background-color 120ms ease;
        position: relative;
        min-height: 0 !important;
    }
        /* Hide DevExpress's default Material-icon chevron — we draw our own */
        .cn-encounter-accordion .dx-accordion-item-title::before {
            display: none !important;
        }
        /* Custom expand/collapse chevron — pinned to the left, animates rotation */
        .cn-encounter-accordion .dx-accordion-item-title::after {
            content: "";
            position: absolute;
            left: 18px;
            top: 50%;
            width: 16px;
            height: 16px;
            margin-top: -8px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
            background-repeat: no-repeat;
            background-size: 16px 16px;
            transition: transform 200ms ease;
            transform-origin: center;
            pointer-events: none;
        }

    .cn-encounter-accordion .dx-item.dx-accordion-item.dx-accordion-item-closed .dx-accordion-item-title::after {
        transform: rotate(-90deg);
    }

    .cn-encounter-accordion .dx-accordion-item-title:hover::after,
    .cn-encounter-accordion .dx-accordion-item:hover .dx-accordion-item-title::after,
    .cn-encounter-accordion .dx-accordion-item-opened > .dx-accordion-item-title::after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C5494' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    }

    .cn-encounter-accordion .dx-accordion-item-title:hover {
        background: var(--cn-navy-50) !important;
    }

    .cn-encounter-accordion .dx-accordion-item-opened > .dx-accordion-item-title {
        background: var(--cn-navy-50) !important;
    }
    /* Markup is always <h3 class="strong alt-header"> — h3 alone covers it,
   .alt-header included for defensive matching on any sibling label. */
    .cn-encounter-accordion .dx-accordion-item-title h3,
    .cn-encounter-accordion .dx-accordion-item-title .alt-header {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--cn-text) !important;
        letter-spacing: -.005em !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        display: inline-block;
        vertical-align: middle;
        font-family: var(--cn-font) !important;
    }
    /* In-title edit / save / cancel anchors — restyle the legacy <a> + svg + span
   combo into a pill button WITHOUT flex.
   inline-block + line-height: 30px gives the anchor a real 32 px box that
   honours height/padding/borders; SVG + span align via vertical-align:middle
   on each child (no flex/gap properties used). */
    .cn-encounter-accordion .dx-accordion-item-title a {
        display: inline-block;
        height: 35px;
        line-height: 30px;
        padding: 0 10px !important;
        border-radius: var(--cn-radius) !important;
        background: var(--cn-elev);
        border: 1px solid var(--cn-border-2);
        text-decoration: none !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: var(--cn-navy) !important;
        vertical-align: middle;
        margin: 0 0 0 4px !important;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }

        .cn-encounter-accordion .dx-accordion-item-title a:hover {
            background: var(--cn-navy-50);
            border-color: var(--cn-navy);
            color: var(--cn-navy-2) !important;
        }
        /* SVG sits centred against the line-height; small right gap before the label */
        .cn-encounter-accordion .dx-accordion-item-title a svg {
            width: 14px !important;
            height: 14px !important;
            fill: currentColor;
            color: inherit !important;
            vertical-align: middle;
            margin-right: 5px;
            margin-top: -2px;
        }

        .cn-encounter-accordion .dx-accordion-item-title a span {
            color: inherit !important;
            padding-left: 0 !important;
            font-size: 12.5px !important;
            font-weight: 600 !important;
            vertical-align: middle;
        }
/* Mobile — drop the label, keep an icon-only square so the title row
   stays single-line on narrow viewports. */
@media (max-width: 540px) {
    .cn-encounter-accordion .dx-accordion-item-title a {
        padding: 0 !important;
        width: 32px;
        text-align: center;
        margin-left: 2px !important;
    }

        .cn-encounter-accordion .dx-accordion-item-title a svg {
            margin-right: 0;
        }

        .cn-encounter-accordion .dx-accordion-item-title a span {
            display: none;
        }
}

.cn-encounter-accordion .dx-accordion-item-body {
    padding: 14px 18px !important;
    background: #FAFBFD !important;
    border-top: 1px solid var(--cn-border) !important;
    font-family: var(--cn-font) !important;
}

@media (max-width: 720px) {
    .cn-encounter-accordion .dx-accordion-item-title {
        padding: 12px 14px 12px 40px !important;
    }

        .cn-encounter-accordion .dx-accordion-item-title::after {
            left: 14px;
        }

    .cn-encounter-accordion .dx-accordion-item-body {
        padding: 4px 14px 14px !important;
    }
}

/* ---------- "Reason For Visit" section — clean grid layout ----------
   Replaces the legacy .definition-md flex with a proper CSS grid:
   one fixed-width label column + a fluid value column. Tames the
   dxSelectBox + dxNumberBox + dxHtmlEditor mounted inside it. */
.cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px 18px;
    margin: 4px 0 0;
    font-family: var(--cn-font);
    font-size: 13.5px;
}
    /* Both columns share a small top padding so plain-text values ("ved",
   "Other" reason text) sit at the same baseline as the dt label. dxForm
   inputs inside dd have their own internal padding — the rules above zero
   out the dxForm group/field padding so the input top still lines up. */
    .cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid > dt,
    .cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid > dd {
        margin: 0;
        padding: 8px 0;
        line-height: 1.4;
        align-self: start;
        flex-basis: auto !important;
        min-width: 0;
    }

    .cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid > dt {
        font-weight: 600;
        color: var(--cn-text-2);
        letter-spacing: .01em;
    }

    .cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid > dd {
        color: var(--cn-text);
    }
/* dxSelectBox mount — capped width so it doesn't stretch */
.cn-encounter-accordion .cn-reason-select {
    max-width: 280px;
    margin: 0;
}

    .cn-encounter-accordion .cn-reason-select .dx-selectbox,
    .cn-encounter-accordion .cn-reason-select .dx-texteditor {
        width: 100% !important;
    }
/* dxNumberBox mount — narrow, since days is a 1–3 digit number */
.cn-encounter-accordion .cn-reason-days {
    max-width: 120px;
    margin: 0;
}

    .cn-encounter-accordion .cn-reason-days .dx-numberbox,
    .cn-encounter-accordion .cn-reason-days .dx-texteditor {
        width: 100% !important;
    }
/* dxForm wrapper for #ReasonDetails (dxTextBox) and #day (dxNumberBox) —
   zero out the .dx-form-group / .dx-field-item padding so the input sits
   FLUSH against the dl grid cell. Without this, dxForm adds its default
   ~16 px group padding + 4/10 field padding, making the TextBox surface
   ~70 px tall and pushing the input off-axis from the "Reason Details"
   label in the dt to the left. */
.cn-encounter-accordion #ReasonDetails .dx-form,
.cn-encounter-accordion #day .dx-form,
.cn-encounter-accordion #VisitReason .dx-form {
    background: transparent !important;
}

.cn-encounter-accordion #ReasonDetails .dx-form-group,
.cn-encounter-accordion #ReasonDetails .dx-form-group-content,
.cn-encounter-accordion #day .dx-form-group,
.cn-encounter-accordion #day .dx-form-group-content,
.cn-encounter-accordion #VisitReason .dx-form-group,
.cn-encounter-accordion #VisitReason .dx-form-group-content {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.cn-encounter-accordion #ReasonDetails .dx-field-item,
.cn-encounter-accordion #day .dx-field-item,
.cn-encounter-accordion #VisitReason .dx-field-item {
    padding: 0 !important;
    margin: 0 !important;
}

.cn-encounter-accordion #ReasonDetails .dx-field-item-content,
.cn-encounter-accordion #day .dx-field-item-content,
.cn-encounter-accordion #VisitReason .dx-field-item-content {
    padding: 0 !important;
}
/* Read-only Reason Details surface — same chrome as a disabled editor */
.cn-encounter-accordion .cn-reason-view {
    min-height: 36px;
    padding: 8px 12px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cn-text);
}

    .cn-encounter-accordion .cn-reason-view:empty::before {
        content: "—";
        color: var(--cn-text-3);
    }

    .cn-encounter-accordion .cn-reason-view p {
        margin: 0 0 6px;
    }

        .cn-encounter-accordion .cn-reason-view p:last-child {
            margin-bottom: 0;
        }
/* Mobile — stack label above value, kill the fixed label column */
@media (max-width: 540px) {
    .cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

        .cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid > dt {
            padding: 10px 0 2px;
        }

            .cn-encounter-accordion .dx-accordion-item-body .cn-reason-grid > dt:first-of-type {
                padding-top: 0;
            }

    .cn-encounter-accordion .cn-reason-select,
    .cn-encounter-accordion .cn-reason-days {
        max-width: none;
    }
}

/* ---------- "Encounter Audit Details" section — read-only audit dl ----------
   Reuses the shared .cn-dl grid (200 px label · 1 fr value) from the
   primitives block. .cn-audit-dl adds section-specific tweaks: tabular
   dates, muted em-dash placeholder for blank fields, mono font for the
   timestamp values. */
.cn-encounter-accordion .cn-audit-dl {
    grid-template-columns: 200px 1fr;
    margin: 4px 0 0;
    gap: 8px 18px;
}

    .cn-encounter-accordion .cn-audit-dl dd {
        font-variant-numeric: tabular-nums;
    }

.cn-encounter-accordion .cn-audit-empty {
    color: var(--cn-text-3);
    font-size: 13.5px;
}

/* ---------- "Patient Instructions" section — single editor card ----------
   View mode (#PatientInstructionsList): read-only bordered surface
   showing the raw HTML instructions.
   Edit mode (#Instructions): dxHtmlEditor mount — gets matching borders
   so the swap-in doesn't visually jump. */
.cn-encounter-accordion .cn-pinstructions-view,
.cn-encounter-accordion .cn-pinstructions-edit {
    margin: 4px 0 0;
    font-family: var(--cn-font);
}

.cn-encounter-accordion .cn-pinstructions-body {
    padding: 12px 14px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cn-text);
    min-height: 80px;
}

    .cn-encounter-accordion .cn-pinstructions-body:empty::before {
        content: "No patient instructions recorded.";
        color: var(--cn-text-3);
        font-style: italic;
    }

    .cn-encounter-accordion .cn-pinstructions-body p {
        margin: 0 0 8px;
    }

        .cn-encounter-accordion .cn-pinstructions-body p:last-child {
            margin-bottom: 0;
        }

    .cn-encounter-accordion .cn-pinstructions-body ul,
    .cn-encounter-accordion .cn-pinstructions-body ol {
        margin: 0 0 8px 20px;
        padding: 0;
    }

    .cn-encounter-accordion .cn-pinstructions-body li {
        margin-bottom: 2px;
    }
/* Edit mode dxHtmlEditor inherits the existing encounter htmleditor rules */
.cn-encounter-accordion .cn-pinstructions-edit.dx-htmleditor {
    border-radius: var(--cn-radius);
    border: 1px solid var(--cn-border-2);
}

/* ---------- "Procedure and diagnosis" section — dxDataGrid polish ----------
   The #demo-grid dxDataGrid renders the procedure / diagnosis / modifier /
   amount columns + an inline form-edit mode. Base styling (border, header
   bg, row padding) already comes from the generic encounter-datagrid rules
   above; these rules add the toolbar button + edit form polish. */
.cn-encounter-accordion #demo-grid {
    margin: 4px 0 0;
    font-family: var(--cn-font);
}
    /* Header panel (DX renders an "Add a row" button up here) */
    .cn-encounter-accordion #demo-grid .dx-datagrid-header-panel {
        background: transparent;
        border-bottom: 1px solid var(--cn-border);
        padding: 6px 8px;
    }

        .cn-encounter-accordion #demo-grid .dx-datagrid-header-panel .dx-toolbar {
            background: transparent !important;
            padding: 0 !important;
        }

        .cn-encounter-accordion #demo-grid .dx-datagrid-header-panel .dx-toolbar-items-container {
            height: 36px !important;
        }
        /* Toolbar buttons (Add row, Save, Cancel — DX defaults) — outlined navy pill */
        .cn-encounter-accordion #demo-grid .dx-datagrid-header-panel .dx-button {
            height: 32px !important;
            border-radius: var(--cn-radius) !important;
            box-shadow: none !important;
            background: var(--cn-elev) !important;
            border: 1px solid var(--cn-navy) !important;
            color: var(--cn-navy) !important;
            padding: 0 12px !important;
            transition: background-color 120ms ease, color 120ms ease;
        }

            .cn-encounter-accordion #demo-grid .dx-datagrid-header-panel .dx-button:hover {
                background: var(--cn-navy-50) !important;
            }

            .cn-encounter-accordion #demo-grid .dx-datagrid-header-panel .dx-button .dx-button-text {
                color: inherit !important;
                font-size: 12.5px !important;
                font-weight: 600 !important;
                text-transform: none !important;
            }

            .cn-encounter-accordion #demo-grid .dx-datagrid-header-panel .dx-button .dx-icon {
                color: var(--cn-navy) !important;
                width: 14px !important;
                height: 14px !important;
            }

    /* Row action cell (Edit / Delete icon buttons) */
    .cn-encounter-accordion #demo-grid .dx-command-edit .dx-link {
        color: var(--cn-navy) !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 12.5px !important;
        padding: 4px 8px;
        border-radius: var(--cn-radius);
        transition: background-color 120ms ease, color 120ms ease;
    }

        .cn-encounter-accordion #demo-grid .dx-command-edit .dx-link:hover {
            background: var(--cn-navy-50) !important;
        }

    .cn-encounter-accordion #demo-grid .dx-command-edit .dx-link-delete:hover {
        background: var(--cn-danger-bg) !important;
        color: var(--cn-danger) !important;
    }

    /* Empty-state */
    .cn-encounter-accordion #demo-grid .dx-datagrid-nodata {
        color: var(--cn-text-3);
        font-style: italic;
        font-size: 13px;
    }

    /* Inline edit FORM (when allowAdding/allowUpdating row is being edited) —
   dxDataGrid renders this as a dxForm with form.colCount: 2. Make it
   visually consistent with other dxForms inside the encounter accordion. */
    .cn-encounter-accordion #demo-grid .dx-datagrid-edit-form {
        padding: 14px 16px;
        background: #FAFBFD;
        border-top: 1px solid var(--cn-border);
    }

        .cn-encounter-accordion #demo-grid .dx-datagrid-edit-form .dx-field-item-label-content,
        .cn-encounter-accordion #demo-grid .dx-datagrid-edit-form .dx-field-item-label-text {
            font-family: var(--cn-font) !important;
            font-size: 11.5px !important;
            font-weight: 700 !important;
            color: var(--cn-text-2) !important;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .cn-encounter-accordion #demo-grid .dx-datagrid-edit-form .dx-field-item:not(.dx-field-item-group) {
            padding: 6px 8px !important;
        }

        .cn-encounter-accordion #demo-grid .dx-datagrid-edit-form .dx-texteditor-input {
            padding: 6px 10px !important;
            font-size: 13.5px !important;
            min-height: 34px !important;
        }
    /* dxLookup uses .dx-lookup-field <div> instead of <input>. Field-wrapper
   + dropdown icon are kept fixed-height so the value text sits on the
   same baseline as sibling text editors. */
    .cn-encounter-accordion #demo-grid .dx-lookup .dx-lookup-field-wrapper,
    .cn-encounter-accordion #demo-grid .dx-lookup .dx-lookup-field {
        min-height: 34px !important;
        height: 34px !important;
        padding: 6px 4px !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .cn-encounter-accordion #demo-grid .dx-lookup .dx-dropdowneditor-icon {
        line-height: 32px !important;
        height: 32px !important;
    }

    .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container {
        padding: 10px 16px;
        background: #FAFBFD;
        border-top: 1px solid var(--cn-border);
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }

        .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container .dx-button {
            height: 34px !important;
            border-radius: var(--cn-radius) !important;
            box-shadow: none !important;
            padding: 0 14px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
        }

            .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container .dx-button.dx-button-default,
            .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container .dx-button.dx-button-success {
                background: var(--cn-navy) !important;
                border-color: var(--cn-navy) !important;
                color: #fff !important;
            }

                .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container .dx-button.dx-button-default:hover,
                .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container .dx-button.dx-button-success:hover {
                    background: var(--cn-navy-2) !important;
                    border-color: var(--cn-navy-2) !important;
                }

            .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container .dx-button:not(.dx-button-default):not(.dx-button-success) {
                background: var(--cn-elev) !important;
                border: 1px solid var(--cn-border-2) !important;
                color: var(--cn-text-2) !important;
            }

            .cn-encounter-accordion #demo-grid .dx-datagrid-form-buttons-container .dx-button .dx-button-text {
                color: inherit !important;
                text-transform: none !important;
            }

/* ---------- "Provider Notes" section — SOAP sub-section cards ----------
   9 SOAP fields (History of Presenting / Past History / Personal History /
   Family and Social History / Review of System / Physical Exam / Assessment
   / Treatments / Final Treatment). Each gets a small uppercase navy label
   above a bordered body (read mode) or dxHtmlEditor (edit mode). Replaces
   the legacy <h3 class="strong mt-4 mb-2 alt-header"> + <hr/> pattern. */
.cn-encounter-accordion .cn-soap-view,
.cn-encounter-accordion .cn-soap-edit {
    margin: 4px 0 0;
    font-family: var(--cn-font);
}

.cn-encounter-accordion .cn-soap-section {
    margin-bottom: 12px;
}

    .cn-encounter-accordion .cn-soap-section:last-child {
        margin-bottom: 0;
    }

.cn-encounter-accordion .cn-soap-section__label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cn-navy);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
    line-height: 1.2;
}

.cn-encounter-accordion .cn-soap-section__body {
    padding: 10px 12px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cn-text);
    min-height: 36px;
}

    .cn-encounter-accordion .cn-soap-section__body:empty::before {
        content: "—";
        color: var(--cn-text-3);
    }

    .cn-encounter-accordion .cn-soap-section__body p {
        margin: 0 0 6px;
    }

        .cn-encounter-accordion .cn-soap-section__body p:last-child {
            margin-bottom: 0;
        }
/* Edit mode — dxHtmlEditor inside .cn-soap-section__editor */
.cn-encounter-accordion .cn-soap-section__editor.dx-htmleditor {
    border-radius: var(--cn-radius);
    border: 1px solid var(--cn-border-2);
}

/* ---------- "Allergies" section — view-mode chip pills only ----------
   View mode (#AllergeNamelist): each allergy is a danger-tinted chip.
   Edit mode (#allergies dxForm): UNCHANGED — no CSS overrides on the
   form so DX renders its native layout (avoids the alignment headaches
   from prior attempts). */
.cn-encounter-accordion .cn-allergy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-family: var(--cn-font);
}

    .cn-encounter-accordion .cn-allergy-chips:empty::before {
        content: "No allergies recorded.";
        color: var(--cn-text-3);
        font-size: 13px;
        font-style: italic;
    }

.cn-encounter-accordion .cn-allergy-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--cn-danger-bg);
    border: 1px solid rgba(220, 38, 38, .2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-danger);
    line-height: 1.3;
    white-space: normal;
}

/* ---------- "Past medical conditions" section — chip pills ----------
   View mode (#pastmedicalconditionlist): each condition is a slate chip.
   Edit mode (#medical-conditions): production dxList stays as-is. */
.cn-encounter-accordion .cn-pastmed-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-family: var(--cn-font);
}

    .cn-encounter-accordion .cn-pastmed-chips:empty::before {
        content: "No past medical conditions recorded.";
        color: var(--cn-text-3);
        font-size: 13px;
        font-style: italic;
    }

.cn-encounter-accordion .cn-pastmed-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--cn-muted-bg);
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-text);
    line-height: 1.3;
    white-space: normal;
}

/* ---------- "Medication" section — clean list of card rows ----------
   View mode (#MedicationListDisplay): one .cn-medication-item per medication,
   each with a pill icon + name + duration tag. Save handler reuses the
   same item markup via renderMedicationView() in PatientHistory.cshtml. */
:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-view {
    margin: 4px 0 0;
    font-family: var(--cn-font);
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

    :is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-list:empty::before {
        content: "No medications recorded.";
        color: var(--cn-text-3);
        font-size: 13px;
        font-style: italic;
    }

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    font-size: 13.5px;
    line-height: 1.3;
    min-width: 0;
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-item__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    :is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-item__icon svg {
        width: 14px;
        height: 14px;
    }

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-item__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cn-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery, #main-content.cn-page-myhealthprofile) .cn-medication-item__duration {
    flex: 0 0 auto;
    padding: 2px 10px;
    background: var(--cn-muted-bg);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cn-text-2);
    white-space: nowrap;
}

/* ---------- "Symptoms" section — grouped chips (view) + check grid (edit) ----
   View mode (#symptomslistdisplay): each symptom group is a small card —
     group name on top, selected symptoms as muted-bg chips below.
   Edit mode (#Symptomslist > #onetable): same group cards, but each row is
     a checkbox + symptom name (.cn-symptom-check). Same input IDs + the
     existing systemclick() onclick handler preserved. */
:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 0;
    font-family: var(--cn-font);
}

@media (max-width: 720px) {
    :is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-groups {
        grid-template-columns: 1fr;
    }
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-group {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    padding: 10px 12px 12px;
    min-width: 0;
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-group__name {
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.2;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cn-border);
}
/* View-mode chips — comma-replacement, comma-free */
:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-group__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--cn-navy-50);
    border: 1px solid rgba(12, 84, 148, .15);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-navy);
    line-height: 1.3;
    white-space: normal;
}
/* Edit-mode checkbox rows */
:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-group__checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--cn-radius);
    cursor: pointer;
    margin: 0;
    transition: background-color 120ms ease;
    user-select: none;
}

    :is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-check:hover {
        background: var(--cn-navy-50);
    }

    :is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-check input[type="checkbox"] {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--cn-navy);
        cursor: pointer;
    }

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-check__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cn-text);
    line-height: 1.3;
}

:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-check input[type="checkbox"]:checked + .cn-symptom-check__name {
    color: var(--cn-navy);
    font-weight: 600;
}
/* Empty-state for view mode (no symptoms recorded) */
:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptoms-view:empty::before,
:is(.cn-encounter-accordion, #main-content.cn-page-patientvisitsummery) .cn-symptom-groups:empty::before {
    content: "No symptoms recorded.";
    color: var(--cn-text-3);
    font-size: 13px;
    font-style: italic;
}

/* ---------- "Vitals" section — 4-col card grid ----------
   Matches the mockup's .cn-vitals (patienthistory-v2.html lines 393-417).
   Each metric is a small card with an uppercase micro-label, the dxNumberBox
   mount, and the unit. Height + Blood Pressure span two columns (each has
   two side-by-side NumberBoxes). All widget IDs (Temp, Puls, PulsOxi,
   BloodGlucose, Weight, Height, Bllodpressure, bmi, weightkglb, Meters)
   preserved — JS bindings untouched. */
.cn-encounter-accordion .cn-vitals-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 0;
    font-family: var(--cn-font);
}

@media (max-width: 900px) {
    .cn-encounter-accordion .cn-vitals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .cn-encounter-accordion .cn-vitals-grid {
        grid-template-columns: 1fr;
    }
}

.cn-encounter-accordion .cn-vital {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    padding: 10px 12px;
    min-width: 0;
}

.cn-encounter-accordion .cn-vital--span2 {
    grid-column: span 2;
}

@media (max-width: 540px) {
    .cn-encounter-accordion .cn-vital--span2 {
        grid-column: span 1;
    }
}

.cn-encounter-accordion .cn-vital__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
    line-height: 1.2;
}

.cn-encounter-accordion .cn-vital__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cn-encounter-accordion .cn-vital__field {
    flex: 1 1 auto;
    min-width: 0;
}
/* Static numeric value (BMI) — large + tabular-nums for alignment with neighbours */
.cn-encounter-accordion .cn-vital__static {
    font-size: 17px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    padding: 5px 0;
}

.cn-encounter-accordion .cn-vital__unit {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cn-text-3);
    white-space: nowrap;
}

/* dxForm chrome zeroed inside each Vitals mount — same pattern as Reason */
.cn-encounter-accordion .cn-vital__field .dx-form,
.cn-encounter-accordion #Temp .dx-form,
.cn-encounter-accordion #Puls .dx-form,
.cn-encounter-accordion #PulsOxi .dx-form,
.cn-encounter-accordion #BloodGlucose .dx-form,
.cn-encounter-accordion #Weight .dx-form,
.cn-encounter-accordion #Height .dx-form,
.cn-encounter-accordion #Bllodpressure .dx-form {
    background: transparent !important;
}

.cn-encounter-accordion .cn-vital__field .dx-form-group,
.cn-encounter-accordion .cn-vital__field .dx-form-group-content,
.cn-encounter-accordion .cn-vital__field .dx-field-item,
.cn-encounter-accordion .cn-vital__field .dx-field-item-content {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
/* Height (ft + in) and Blood Pressure (Systolic + Diastolic) — two
   side-by-side NumberBoxes inside one .cn-vital__field--split. Use the
   dxForm's built-in grid columns; just tame the inline labels. */
.cn-encounter-accordion .cn-vital__field--split .dx-field-item-label {
    padding: 0 0 0 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--cn-text-3) !important;
    text-transform: lowercase;
}

.cn-encounter-accordion .cn-vital__field--split .dx-field-item-label-content {
    font-family: var(--cn-font) !important;
    font-size: 11px !important;
    text-transform: lowercase !important;
    letter-spacing: 0;
    color: var(--cn-text-3) !important;
    font-weight: 600 !important;
}

/* ---------- Encounter audit definition list ---------- */
.cn-dl {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 14px;
    margin: 12px 0 0;
    font-size: 13.5px;
    font-family: var(--cn-font);
}

    .cn-dl dt {
        font-weight: 600;
        color: var(--cn-text-2);
        letter-spacing: .01em;
        margin: 0;
    }

    .cn-dl dd {
        margin: 0;
        color: var(--cn-text);
    }

@media (max-width: 540px) {
    .cn-dl {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

        .cn-dl dt {
            margin-top: 8px;
        }

            .cn-dl dt:first-child {
                margin-top: 0;
            }
}

/* ---------- Encounter page density pass ----------
   Use the same .container width budget as PracticeProviders (Bootstrap
   default — no max-width override here). Just drop the savebar-allowance
   padding-bottom since the encounter page has no sticky save bar.
   Scoped via .cn-page-patienthistory (works in all browsers; older
   :has() rule replaced for parity). */
#main-content.cn-page-patienthistory #section-content {
    padding-bottom: 24px !important;
}

/* (d) Drop legacy <hr> dividers inside accordion bodies */
.cn-encounter-accordion .dx-accordion-item-body > hr,
.cn-encounter-accordion .dx-accordion-item-body .hrs {
    display: none;
}

.cn-encounter-accordion .dx-form .dx-field-item-label {
    padding-bottom: 4px !important;
}

.cn-encounter-accordion .dx-form .dx-field-item-label-content {
    font-family: var(--cn-font) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cn-encounter-accordion .dx-form .dx-field-item-label-text {
    color: var(--cn-text-2) !important;
}

.cn-encounter-accordion .dx-form .dx-texteditor.dx-editor-filled .dx-texteditor-input,
.cn-encounter-accordion .dx-form .dx-texteditor.dx-editor-outlined .dx-texteditor-input,
.cn-encounter-accordion .dx-form .dx-texteditor.dx-editor-underlined .dx-texteditor-input {
    padding: 6px 10px !important;
    font-size: 13.5px !important;
    min-height: 34px !important;
}

.cn-encounter-accordion .dx-form .dx-texteditor .dx-placeholder::before {
    padding: 6px 10px !important;
}

.cn-encounter-accordion .dx-accordion-item-body .dx-button {
    border-radius: var(--cn-radius) !important;
    height: 34px !important;
    box-shadow: none;
}

    .cn-encounter-accordion .dx-accordion-item-body .dx-button .dx-button-text {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

.cn-encounter-accordion .dx-accordion-item-body .row {
    margin-left: -8px;
    margin-right: -8px;
}

    .cn-encounter-accordion .dx-accordion-item-body .row > [class^="col-"],
    .cn-encounter-accordion .dx-accordion-item-body .row > [class*=" col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .cn-encounter-accordion .dx-accordion-item-body .row + .row {
        margin-top: 4px;
    }

.cn-encounter-accordion .dx-accordion-item-body .mb-3 {
    margin-bottom: 8px !important;
}

.cn-encounter-accordion .dx-accordion-item-body .mb-4 {
    margin-bottom: 12px !important;
}

.cn-encounter-accordion .dx-accordion-item-body .mt-3 {
    margin-top: 8px !important;
}

.cn-encounter-accordion .dx-accordion-item-body .mt-4 {
    margin-top: 12px !important;
}

.cn-encounter-accordion .dx-accordion-item-body .definition-sm,
.cn-encounter-accordion .dx-accordion-item-body .definition-md {
    font-size: 13.5px !important;
    line-height: 1.45;
    margin: 0 0 6px;
}

    .cn-encounter-accordion .dx-accordion-item-body .definition-sm dt,
    .cn-encounter-accordion .dx-accordion-item-body .definition-md dt {
        padding: 1px 8px 1px 0;
        font-weight: 600;
        color: var(--cn-text-2);
        flex-basis: 30%;
    }

    .cn-encounter-accordion .dx-accordion-item-body .definition-sm dd,
    .cn-encounter-accordion .dx-accordion-item-body .definition-md dd {
        padding: 1px 0;
        color: var(--cn-text);
        flex-basis: 70%;
    }

.cn-encounter-accordion .dx-accordion-item-body table {
    margin: 0 0 6px;
}

    .cn-encounter-accordion .dx-accordion-item-body table th,
    .cn-encounter-accordion .dx-accordion-item-body table td {
        padding: 6px 8px;
        font-size: 13px;
        border-color: var(--cn-border);
    }

    .cn-encounter-accordion .dx-accordion-item-body table th {
        background: var(--cn-muted-bg);
        color: var(--cn-text-2);
        font-weight: 700;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

.cn-encounter-accordion .dx-htmleditor {
    border-radius: var(--cn-radius);
    border: 1px solid var(--cn-border-2);
}

.cn-encounter-accordion .dx-htmleditor-toolbar {
    background: var(--cn-muted-bg) !important;
    border-bottom: 1px solid var(--cn-border) !important;
    padding: 4px 6px !important;
}

    .cn-encounter-accordion .dx-htmleditor-toolbar .dx-toolbar-items-container {
        height: 36px !important;
    }

.cn-encounter-accordion .dx-htmleditor-content {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

    .cn-encounter-accordion .dx-htmleditor-content h3,
    .cn-encounter-accordion .dx-htmleditor-content h4 {
        margin: 10px 0 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--cn-navy);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

        .cn-encounter-accordion .dx-htmleditor-content h3:first-child,
        .cn-encounter-accordion .dx-htmleditor-content h4:first-child {
            margin-top: 0;
        }

    .cn-encounter-accordion .dx-htmleditor-content p {
        margin: 0 0 6px;
    }

.cn-encounter-accordion .dx-accordion-item-body .dx-datagrid {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    overflow: hidden;
}

.cn-encounter-accordion .dx-accordion-item-body .dx-datagrid-headers {
    background: var(--cn-muted-bg);
}

    .cn-encounter-accordion .dx-accordion-item-body .dx-datagrid-headers td {
        color: var(--cn-text-2);
        font-weight: 700;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

.cn-encounter-accordion .dx-accordion-item-body .dx-datagrid .dx-row > td {
    padding: 8px 10px;
    font-size: 13px;
}

/* ---------- Expand/collapse strip + pill buttons ---------- */
.cn-encounter-expand-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: -2px 0 10px;
}

@media (max-width: 720px) {
    .cn-encounter-expand-row {
        margin: 0 0 8px;
    }
}

.cn-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    color: var(--cn-navy);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

    .cn-expand-toggle:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        text-decoration: none;
        color: var(--cn-navy-2);
    }

    .cn-expand-toggle svg {
        width: 14px;
        height: 14px;
    }

/* ════════════════════════════════════════════════════════════
   PROVIDER SCHEDULE — page-scoped polish
   (matches the approved schedule-new-v2.html mockup, 1140 px shell).
   Scoped via #provider-schedule-page (the inner .container in
   features/practiceadmindashboard/Schedule.cshtml). UI-polish only —
   every DevExpress widget ID, dxMenu / dxForm config and onItemClick
   branch is untouched.
   ════════════════════════════════════════════════════════════ */

/* Title row + Provider picker — mirrors mockup */
#provider-schedule-page .cn-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

#provider-schedule-page .cn-title-row__text {
    flex: 1 1 320px;
    min-width: 0;
}

#provider-schedule-page .cn-provider-pick {
    display: flex;
    flex-direction: column;
    min-width: 260px;
}

#provider-schedule-page .cn-provider-pick__label {
    font-family: var(--cn-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cn-text-2);
    letter-spacing: .02em;
    margin-bottom: 6px;
}

@media (max-width: 720px) {
    #provider-schedule-page .cn-provider-pick {
        width: 100%;
        min-width: 0;
    }

    #provider-schedule-page .cn-title-row {
        gap: 12px;
    }
}

/* Provider dxSelectBox */
#provider-schedule-page #providerlist.dx-texteditor {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 38px !important;
}

    #provider-schedule-page #providerlist.dx-texteditor::before,
    #provider-schedule-page #providerlist.dx-texteditor::after {
        display: none !important;
        content: none !important;
    }

    #provider-schedule-page #providerlist.dx-texteditor.dx-state-focused {
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring) !important;
    }

#provider-schedule-page #providerlist .dx-texteditor-input {
    font-family: var(--cn-font) !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    min-height: 36px !important;
    padding: 0 12px !important;
}

/* Form card chrome */
#provider-schedule-page .cn-form-card__head {
    display: block;
    padding: 18px 20px 14px;
}

    #provider-schedule-page .cn-form-card__head h2 {
        font-family: var(--cn-font);
        font-size: 15px;
        font-weight: 700;
        color: var(--cn-text);
        margin: 0 0 4px;
        letter-spacing: -.005em;
    }

    #provider-schedule-page .cn-form-card__head p {
        font-family: var(--cn-font);
        font-size: 12.5px;
        color: var(--cn-text-2);
        margin: 0;
        line-height: 1.5;
    }

#provider-schedule-page .cn-form-card__body {
    padding: 0 20px 18px;
}

@media (max-width: 720px) {
    #provider-schedule-page .cn-form-card__head {
        padding: 14px 16px 12px;
    }

    #provider-schedule-page .cn-form-card__body {
        padding: 0 16px 16px;
    }
}

/* Horizontal dxMenu rail */
#provider-schedule-page .cn-schedule-rail {
    border-bottom: 1px solid var(--cn-border);
    margin: 0 -20px 18px;
    padding: 0 12px;
}

    #provider-schedule-page .cn-schedule-rail.dx-menu-base,
    #provider-schedule-page .cn-schedule-rail .dx-menu-horizontal {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #provider-schedule-page .cn-schedule-rail .dx-menu-items-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        width: 100%;
        align-items: flex-end;
        scrollbar-width: thin;
        scrollbar-color: var(--cn-border-2) transparent;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

        #provider-schedule-page .cn-schedule-rail .dx-menu-items-container::-webkit-scrollbar {
            height: 5px;
        }

        #provider-schedule-page .cn-schedule-rail .dx-menu-items-container::-webkit-scrollbar-track {
            background: transparent;
        }

        #provider-schedule-page .cn-schedule-rail .dx-menu-items-container::-webkit-scrollbar-thumb {
            background: var(--cn-border-2);
            border-radius: 999px;
        }

            #provider-schedule-page .cn-schedule-rail .dx-menu-items-container::-webkit-scrollbar-thumb:hover {
                background: var(--cn-text-3);
            }

    #provider-schedule-page .cn-schedule-rail .dx-menu-item-wrapper {
        flex: 0 0 auto;
    }

    #provider-schedule-page .cn-schedule-rail .dx-menu-item {
        padding: 8px 16px !important;
        border-radius: 0 !important;
        border-bottom: 2px solid transparent !important;
        margin: 0 !important;
        font-family: var(--cn-font) !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: var(--cn-text-2) !important;
        background: transparent !important;
        transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
        cursor: pointer;
        white-space: nowrap;
        flex: 0 0 auto !important;
        line-height: 1.2 !important;
    }

        #provider-schedule-page .cn-schedule-rail .dx-menu-item .dx-menu-item-text {
            font-family: var(--cn-font) !important;
            font-size: 13.5px !important;
            font-weight: inherit !important;
            color: inherit !important;
        }

        #provider-schedule-page .cn-schedule-rail .dx-menu-item.dx-state-hover {
            color: var(--cn-navy) !important;
            background: var(--cn-navy-50) !important;
        }

        #provider-schedule-page .cn-schedule-rail .dx-menu-item.dx-state-focused,
        #provider-schedule-page .cn-schedule-rail .dx-menu-item.dx-state-selected {
            color: var(--cn-navy) !important;
            background: transparent !important;
            font-weight: 700 !important;
            border-bottom-color: var(--cn-navy) !important;
        }

    #provider-schedule-page .cn-schedule-rail .dx-menu-item-popout-container {
        display: none !important;
    }

@media (max-width: 720px) {
    #provider-schedule-page .cn-schedule-rail {
        margin: 0 -16px 12px;
        padding: 0 8px;
    }

        #provider-schedule-page .cn-schedule-rail .dx-menu-item {
            padding: 7px 12px !important;
            font-size: 13px !important;
        }
}

/* dxForm caption — styled as the mockup's .cn-day-heading.
   Same 18 px bold name + pill via ::after, but no card divider
   border (the dashed rows already provide separation). */
#provider-schedule-page .cn-form-card .dx-form-group-caption {
    font-family: var(--cn-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    letter-spacing: -.01em !important;
    margin: 4px 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}

#provider-schedule-page .cn-form-card .dx-field-item-label-text,
#provider-schedule-page .cn-form-card .dx-field-item-label-content {
    font-family: var(--cn-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--cn-text-2) !important;
    letter-spacing: .02em !important;
}
/* Force labels onto a single line, full-cell width */
#provider-schedule-page .cn-form-card .cn-fld .dx-field-item-label,
#provider-schedule-page .cn-form-card .cn-fld .dx-field-item-label-content {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

#provider-schedule-page .cn-form-card .cn-fld .dx-field-item-label-text {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block !important;
    max-width: 100%;
}

#provider-schedule-page .cn-form-card .cn-fld .dx-field-item-content {
    width: auto !important;
    max-width: 100% !important;
}

/* dxForm editor chrome (texteditor border/focus/input + placeholder)
   removed — the canonical .cn-form-card primitive in publish.css
   already supplies identical styling. */

/* Primary Save / secondary buttons */

#provider-schedule-page .cn-form-card .dx-button.dx-button-normal {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    height: 38px !important;
    box-shadow: none !important;
}

    #provider-schedule-page .cn-form-card .dx-button.dx-button-normal:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

    #provider-schedule-page .cn-form-card .dx-button.dx-button-normal .dx-button-text {
        color: var(--cn-navy) !important;
        font-family: var(--cn-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

/* Save row — top divider + right align */
#provider-schedule-page .cn-form-card .cn-form-save {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--cn-border);
    text-align: right !important;
}

    #provider-schedule-page .cn-form-card .cn-form-save .dx-button {
        margin-left: auto !important;
    }

    #provider-schedule-page .cn-form-card .cn-form-save > .dx-field-item-content {
        text-align: right !important;
    }

/* Add button — small inline dashed (matches mockup .cn-add-row).
   Sits on its own row above the Save divider, takes its natural
   text width, hovers to navy. */
#provider-schedule-page .cn-form-card .dx-field-item.cn-add-cta {
    margin: 14px 0 0 !important;
    display: inline-block !important;
    width: auto !important;
}

#provider-schedule-page .cn-form-card .cn-add-cta .dx-button.dx-button-normal {
    width: auto !important;
    height: 38px !important;
    padding: 0 14px !important;
    background: var(--cn-elev) !important;
    border: 1px dashed var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    color: var(--cn-text-2) !important;
    box-shadow: none !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #provider-schedule-page .cn-form-card .cn-add-cta .dx-button.dx-button-normal:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
        color: var(--cn-navy) !important;
    }

#provider-schedule-page .cn-form-card .cn-add-cta .dx-button .dx-button-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
}

#provider-schedule-page .cn-form-card .cn-add-cta .dx-button .dx-button-text {
    color: inherit !important;
    font-family: var(--cn-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#provider-schedule-page .cn-form-card .cn-add-cta .dx-button .dx-icon {
    color: inherit !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
}

/* Delete — icon-only 40×40 trash button. 40 px matches the
   editor height so the row reads as a clean baseline: every
   cell's bottom edge lands on the same horizontal line. */
#provider-schedule-page .cn-form-card .dx-field-item.cn-row-delete .dx-button,
#provider-schedule-page .cn-form-card .cn-row-delete .dx-button.dx-button-normal {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    color: var(--cn-danger) !important;
    box-shadow: none !important;
    transition: background 120ms ease, border-color 120ms ease;
}

#provider-schedule-page .cn-form-card .cn-row-delete .dx-button:hover {
    background: var(--cn-danger-bg) !important;
    border-color: var(--cn-danger) !important;
}
/* Centre the trash icon horizontally + vertically inside the button. */
#provider-schedule-page .cn-form-card .cn-row-delete .dx-button .dx-button-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

#provider-schedule-page .cn-form-card .cn-row-delete .dx-button .dx-icon {
    color: var(--cn-danger) !important;
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1 !important;
}
/* Hide the empty .dx-button-text span — `text: ""` leaves an
   empty node that would otherwise add width to the button. */
#provider-schedule-page .cn-form-card .cn-row-delete .dx-button .dx-button-text {
    display: none !important;
}

/* Delete cell — the Delete is an itemType:"button" with no label,
   so dxForm places it at the row's TOP (level with adjacent
   labels). Push it down by ~20 px (label height + gap) so its
   bottom edge aligns with the editor bottoms. */
#provider-schedule-page .cn-form-card .cn-row-delete {
    margin-top: 29px !important;
}

#provider-schedule-page .readonly {
    -webkit-user-modify: read-only;
    pointer-events: none;
    opacity: .55;
}

/* .cn-edit-row — repeating slot row. Applied via
   cssClass: "cn-edit-row" on the dxForm inner group. The row's
   column layout is driven entirely by dxForm's native
   colCount / colSpan (weekday: colCount 20 with 4+4+1+4+6+1;
   time-off: colCount 12 with 3+3+5+1). No CSS Grid override.
   This block just adds the dashed bottom divider between rows
   and collapses dxForm's inline calculated heights. */
#provider-schedule-page .cn-edit-row {
    padding: 14px 0;
    border-bottom: 1px dashed var(--cn-border);
}

    #provider-schedule-page .cn-edit-row:last-of-type {
        border-bottom: 0;
    }

    #provider-schedule-page .cn-edit-row,
    #provider-schedule-page .cn-edit-row > .dx-form-group-content,
    #provider-schedule-page .cn-edit-row .dx-field-item,
    #provider-schedule-page .cn-edit-row .dx-field-item-content {
        height: auto !important;
        min-height: 0 !important;
    }
        /* Hidden field-items (visible: false) — collapse them out so they
   don't leave a phantom gap inside dxForm's absolute layout. */
        #provider-schedule-page .cn-edit-row .dx-field-item[style*="display: none"],
        #provider-schedule-page .cn-edit-row .dx-field-item.dx-state-invisible {
            display: none !important;
        }

/* Mobile — stack each field-item full width below 720 px since
   dxForm's absolute layout doesn't reflow on its own at narrow
   widths. This is the only place we override dxForm's column
   positions — and only on phone-sized viewports. */
@media (max-width: 720px) {
    #provider-schedule-page .cn-edit-row .dx-field-item {
        position: relative !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
    }

    #provider-schedule-page .cn-form-card .cn-row-delete .dx-button {
        width: 100% !important;
        max-width: none !important;
    }

    #provider-schedule-page .cn-form-card .cn-form-save .dx-button {
        width: 100% !important;
    }

    #provider-schedule-page .cn-form-card .cn-add-cta .dx-button.dx-button-normal {
        width: 100% !important;
    }
}

/* dxForm toggle (switch) field — strip DX's default leading inline
   padding so the switch aligns flush with the rest of the form.
   Migrated from the page's inline <style> block. */
#provider-schedule-page .dx-field-item .dx-toggle-controls-paddings {
    padding-inline-start: 0 !important;
}

/* ============================================================
   RAW SCRIBE — AI-scribe draft page polish
   Applies to /Visit/Scribe/<id> (.cn-page-scribe) and
   /provider/encounter/Scribe/<id> (.cn-page-providerscribe).
   Reuses the shared encounter chrome from the ENCOUNTER section
   above (.cn-hero, .cn-tag, .cn-encounter-toolbar, .cn-back,
   .cn-area). Only the SOAP note card + its editable section
   fields are page-local, so they live here.
   ============================================================ */
#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 4px 20px 20px;
    font-family: var(--cn-font);
}

/* Clickable patient name inside the shared .cn-hero — keep the dark
   bold hero-name treatment, navigate on click (legacy linked the name
   to the patient profile; preserve that without recolouring). */
#main-content:is(.cn-page-scribe, .cn-page-providerscribe, .cn-page-providerencounter) .cn-hero__name-link {
    color: inherit;
    text-decoration: none;
}

    #main-content:is(.cn-page-scribe, .cn-page-providerscribe, .cn-page-providerencounter) .cn-hero__name-link:hover {
        color: var(--cn-navy);
        text-decoration: none;
    }

/* Each SOAP section — hairline-separated stack inside the card */
#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-block {
    padding: 16px 0;
    border-top: 1px solid var(--cn-border);
}

    #main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-block:first-child {
        border-top: 0;
    }

#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-block__label {
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cn-text-2);
    margin-bottom: 8px;
}

/* dxTextArea (outlined) note field — mirrors the dxForm editor chrome
   (subtle off-white surface, 8px radius, navy inset focus border). These
   are standalone dxTextArea widgets, NOT inside a .dx-form, so the global
   ".dx-form .dx-texteditor" rules (publish.css ~1829) don't reach them —
   restated here scoped to the page. */
#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-field.dx-texteditor.dx-editor-outlined {
    background: #F8FAFC;
    border: 1px solid var(--cn-border);
    border-radius: 8px;
    box-shadow: none;
}

    /* Kill DX's Material underline/notch pseudo-elements */
    #main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-field.dx-texteditor.dx-editor-outlined::before,
    #main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-field.dx-texteditor.dx-editor-outlined::after {
        display: none;
        content: none;
        border: 0;
    }

#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-field.dx-texteditor.dx-state-hover {
    border-color: var(--cn-text-3);
}

#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-field.dx-texteditor.dx-state-focused {
    background: #fff;
    border-color: var(--cn-navy);
    box-shadow: inset 0 0 0 1px var(--cn-navy);
}

#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-field .dx-texteditor-input {
    padding: 10px 14px !important;
    font-family: var(--cn-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--cn-text);
    background: transparent;
}

/* "Please verify…" footnote — quiet navy info bar at the card foot */
#main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-verify {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 16px;
    background: var(--cn-navy-50);
    border: 1px solid rgba(12, 84, 148, .18);
    border-radius: var(--cn-radius);
    color: var(--cn-navy);
    font-family: var(--cn-font);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}

    #main-content:is(.cn-page-scribe, .cn-page-providerscribe) .cn-scribe-verify svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

/* ============================================================
   PRACTICE PATIENTS — page-local utilities lifted out of the
   in-page <style> block in
   features/practiceadmindashboard/PracticePatients.cshtml.
   The page's Stripe Elements rules (.StripeElement*,
   .paymentcharge_input) stay inline next to the form markup
   (Stripe's iframe contract). The .paymentcharge_button and
   .settinginsurance_button rules were dropped — both are already
   styled navy by the global `.paymentcharge_button` rule and the
   `#paymentinfo .settinginsurance_button` rule above. The
   .dx-tab.dx-tab-selected rules were dropped as dead (this page
   renders no dxTabs). Legacy indigo #3f51b5 recoloured to
   --cn-navy.
   ============================================================ */

/* ----- Patient-status dropdown item — the colour dot SVG floats
   left of the status label in the dxSelectBox itemTemplate. Kept
   GLOBAL (not page-scoped) because the SelectBox dropdown renders
   in a body-portaled overlay outside #main-content, and because
   provider/patientprofile reuses the identical template — so one
   global rule de-duplicates both. ----- */
.custom-item svg {
    float: left;
}

/* ----- dxDataGrid action links — `text-decoration: none` is
   already supplied by the global `.dx-datagrid .dx-link` reset;
   layer the design-system navy colour + pointer cursor on top
   (per that reset's "page-specific colour" contract). ----- */
#main-content.cn-page-practicepatients .dx-datagrid .dx-link {
    color: var(--cn-navy);
    cursor: pointer;
}

/* ----- dxForm box-item layout guard — keeps the grouped form
   items (#Patients-form / #Insurance-form, both mounted inline in
   #main-content) from being forced wider than their column
   allotment. Page-scoped so it doesn't leak (same pattern as
   cn-page-locations). ----- */
#main-content.cn-page-practicepatients .dx-item.dx-box-item {
    min-width: unset !important;
}

/* ----- DX load indicator — recolour the grid's spinner ring from
   the legacy indigo to the design-system navy. ----- */
#main-content.cn-page-practicepatients .dx-loadindicator-segment-inner {
    border-color: var(--cn-navy) var(--cn-navy) transparent;
}

/* ----- Read-only patient-status display — when the status box is
   rendered in read mode (`.patientstatusread` added/removed by the
   page JS) it must not accept pointer interaction. ----- */
#main-content.cn-page-practicepatients .patientstatusread {
    -webkit-user-modify: read-only;
    pointer-events: none;
}

/* ============================================================
   PROVIDER · PATIENT PROFILE (/provider/patientprofile/{id}/index)
   features/provider/patientprofile/Index.cshtml

   Page-local utilities lifted out of the in-page <style> block and
   recoloured from the legacy indigo #3f51b5 to --cn-navy. The page's
   Stripe Elements rules (.StripeElement*, .paymentcharge_input) and the
   dxPopover title-hide stay inline (Stripe's iframe contract; the popover
   renders in a body portal outside #main-content so it can't be scoped
   here). .paymentcharge_button was dropped — already styled navy by the
   global .paymentcharge_button rule; .custom-item svg is global (above).
   The dxForm section cards, field skin and Save/Cancel buttons come from
   the shared .cn-section-card + .dx-form primitives — no duplication.
   ============================================================ */

/* The Payment Method Edit / Cancel buttons (#Payment-information
   .settinginsurance_button) and the payment field labels now reuse the
   shared PracticePatients `#paymentinfo` payment rules — that selector
   list was extended to also match #Payment-information, so the buttons
   (42px navy, min-width 100px) and labels render identically with no
   duplicated declarations here. */

/* dxForm box-item layout guard (same pattern as cn-page-practicepatients). */
#main-content.cn-page-patientprofile .dx-item.dx-box-item {
    min-width: unset !important;
}

/* The dxTabs are wrapped in #tabdisplay (see the .cshtml), so they reuse
   the shared polished tab strip styling above — no page-scoped tab rules
   needed here (a page-scoped ::before override would actually conflict
   with the shared `#tabdisplay .dx-tab-selected::before { display:none }`). */

/* dxDataGrid action-link icons in the Documents tab (share / box /
   message / download / comment) — navy instead of indigo. */
#main-content.cn-page-patientprofile a.dx-link.dx-icon-share.dx-link-icon,
#main-content.cn-page-patientprofile a.dx-link.dx-icon-box.dx-link-icon,
#main-content.cn-page-patientprofile a.dx-link.dx-icon-message.dx-link-icon,
#main-content.cn-page-patientprofile a.dx-link.dx-icon-download.dx-link-icon,
#main-content.cn-page-patientprofile a.dx-link.dx-icon-comment.dx-link-icon {
    color: var(--cn-navy);
}

/* ============================================================
   PROVIDER DASHBOARD (/provider/dashboard/index)
   features/provider/dashboard/Index.cshtml
   + PATIENT DASHBOARD (/patient/dashboard/index)
   features/patient/patientdashboard/Index.cshtml

   Both pages share this block via
   :is(.cn-page-providerdashboard, .cn-page-patientdashboard) — they
   are the same dashboard shell (welcome title + Upcoming Appointment
   sidebar + 2-up quick-action tile grid). Each wrapper ALSO carries
   .cn-page-practiceadmindashboard, so it reuses the shared
   .cn-util-row / .cn-upsell / .cn-roleswitch / .cn-title-row /
   .cn-eyebrow / .cn-title__name / .cn-subtitle / .cn-area /
   .cn-setup-grid / .cn-setup-card / .cn-lock chrome defined above.
   No duplication of the shared card/title family — only the tiles'
   2-up layout override, the Upcoming Appointment card, the
   header-links group (provider-only), and the appointment-body
   styling live here. The appointment body is filled by JS on the
   provider page (#UpcomingAppointmentdisplay via
   upcomingappointmentrefresh) and server-rendered into the same
   #UpcomingAppointmentdisplay container on the patient page — the
   inner <p> / .definition-sm rules style both identically.
   ============================================================ */

/* Section eyebrow above the appointment card + the tiles grid. */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

/* Tiles sit 2-up beside the appointment sidebar (override the shared
   3-up admin grid for this page only). 1 col on phones. */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-setup-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-setup-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* Tile icon glyphs inherit the medallion color (navy → white on hover). */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-setup-card__icon svg {
    fill: currentColor;
}
/* Premium lock is rendered as an upgrade link. */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-lock {
    text-decoration: none;
}

/* Dashboard grid — tiles LEFT, Upcoming Appointment RIGHT on desktop.
   Appointment is first in the DOM so it stacks first on phones/tablets
   (mirrors the production order-1 / order-md-2 behaviour). */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 992px) {
    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-dash-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 22px;
        align-items: start;
    }

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt-col {
        grid-column: 2;
        grid-row: 1;
    }

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-tiles-col {
        grid-column: 1;
        grid-row: 1;
    }
}

/* Header links group (Go to Admin Dashboard / Visits Calendar). Pinned to
   the right of the utility row — margin-left:auto keeps them right-aligned
   even when the Subscribe banner is absent (non-Normallimited accounts). */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-headlinks {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ----- Upcoming Appointment card (navy accent rail + icon medallion) ----- */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt {
    position: relative;
    overflow: hidden;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
}

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--cn-border);
}

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__head-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    border: 1px solid rgba(12, 84, 148, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__head-icon svg {
        width: 22px;
        height: 22px;
        fill: var(--cn-navy);
    }

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__head-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
}

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__body {
    padding: 18px;
}

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__foot {
    padding: 14px 18px;
    border-top: 1px solid var(--cn-border);
    text-align: center;
}

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-navy);
    text-decoration: none;
}

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__viewall:hover {
        text-decoration: underline;
    }

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) .cn-appt__viewall svg {
        width: 14px;
        height: 14px;
    }

/* ----- JS-rendered appointment body (filled by upcomingappointmentrefresh) ----- */
#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay > p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    margin: 0 0 12px;
}

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay > p a {
        color: var(--cn-navy);
        text-decoration: none;
    }

        #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay > p a:hover {
            text-decoration: underline;
        }

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay svg {
    fill: var(--cn-navy) !important;
}

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay .definition-sm {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0 0 8px;
}

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay .definition-sm dt {
        font-size: 11px;
        font-weight: 700;
        color: var(--cn-text-3);
        text-transform: uppercase;
        letter-spacing: .04em;
        align-self: center;
    }

    #main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay .definition-sm dd {
        margin: 0;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--cn-text);
        align-self: center;
    }

#main-content:is(.cn-page-providerdashboard, .cn-page-patientdashboard) #UpcomingAppointmentdisplay .text-success {
    color: var(--cn-success) !important;
    font-weight: 600;
}

/* ----- Pre-visit questionnaire notice (#Answerview, patient dashboard) -----
   The patient dashboard JS injects pending pre-visit questionnaires into
   #Answerview (same AJAX + per-questionnaire link target — presentation only).
   ONE pending → a single full-width gold .cn-notice; MORE THAN ONE → a
   responsive grid (.cn-notice-grid, 1 → 2 → 3-up, mirroring the legacy
   col-md-4 layout) of compact .cn-notice--card cells. Gold-accent design from
   C:\mockups\patientdashboard-v2.html. Patient-only (provider has no
   #Answerview), so scoped to .cn-page-patientdashboard. */
#main-content.cn-page-patientdashboard .cn-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #FBF3E3, #FEF9EF);
    border: 1px solid #EBD9B4;
    border-radius: var(--cn-radius-lg);
}

#main-content.cn-page-patientdashboard .cn-notice__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: var(--cn-gold);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-patientdashboard .cn-notice__icon svg {
        width: 17px;
        height: 17px;
    }

/* Body holds the message + CTA. As a row the CTA is pushed right (single
   full-width banner); it wraps to its own line when the space is tight. */
#main-content.cn-page-patientdashboard .cn-notice__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 14px;
}

#main-content.cn-page-patientdashboard .cn-notice__msg {
    font-size: 13.5px;
    font-weight: 600;
    color: #6B4E16;
    line-height: 1.4;
    min-width: 0;
    flex: 1 1 180px;
}

#main-content.cn-page-patientdashboard .cn-notice__link {
    color: var(--cn-navy);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}

    #main-content.cn-page-patientdashboard .cn-notice__link:hover {
        text-decoration: underline;
    }

/* MORE THAN ONE pending questionnaire → grid of compact cards (1 col on
   phones → 2 → 3-up on desktop, mirroring the legacy col-md-4 layout). The
   grid carries the bottom margin; its cells don't. */
#main-content.cn-page-patientdashboard .cn-notice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

@media (min-width: 600px) {
    #main-content.cn-page-patientdashboard .cn-notice-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    #main-content.cn-page-patientdashboard .cn-notice-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

#main-content.cn-page-patientdashboard .cn-notice-grid .cn-notice {
    margin-bottom: 0;
    align-items: flex-start;
}

/* In a narrow grid cell the message + CTA stack vertically. The message's
   `flex: 1 1 180px` is for the horizontal banner — reset it here so the
   180px basis isn't reinterpreted as a HEIGHT in the column layout. */
#main-content.cn-page-patientdashboard .cn-notice--card .cn-notice__body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}

    #main-content.cn-page-patientdashboard .cn-notice--card .cn-notice__msg {
        flex: 0 0 auto;
    }

/* ----- Upcoming Appointment action buttons (patient dashboard) -----
   Server-rendered inside #UpcomingAppointmentdisplay. Polished button family
   from C:\mockups\patientdashboard-v2.html: Join now (primary navy), Invite
   Guest (navy outline), Cancel Visit (ghost → red on hover). Full-width,
   stacked. The videos()/inviteguest()/Cancel() onclick handlers + VisitId are
   unchanged — presentation only (replaced the legacy default-btn /
   btn-outline-secondary classes). */
#main-content.cn-page-patientdashboard .cn-appt__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

/* Join now + Invite Guest sit side by side (equal width) inside a pair row;
   the pair and the Cancel button below it each span the card's full width. */
#main-content.cn-page-patientdashboard .cn-appt__pair {
    display: flex;
    gap: 12px;
}

    #main-content.cn-page-patientdashboard .cn-appt__pair .cn-btn-primary,
    #main-content.cn-page-patientdashboard .cn-appt__pair .cn-btn-outline {
        flex: 1 1 0;
        min-width: 0;
    }

/* Cancel Visit (when it follows the Join/Invite pair) matches a pair button:
   same width as "Join now" [(100% − 12px gap) / 2 = 50% − 6px] and centered
   under them. The in-person-only Cancel (no pair) keeps its full width. */
#main-content.cn-page-patientdashboard .cn-appt__pair + .cn-btn-ghost {
    align-self: center;
    width: calc(50% - 6px);
}

/* The button glyphs are stroke-based outlines — override the shared
   `#UpcomingAppointmentdisplay svg { fill: navy !important }` (2-id specificity)
   so they don't fill in as solid navy blobs. */
#main-content.cn-page-patientdashboard #UpcomingAppointmentdisplay .cn-appt__actions svg {
    fill: none !important;
    width: 16px;
    height: 16px;
}

#main-content.cn-page-patientdashboard .cn-btn-primary,
#main-content.cn-page-patientdashboard .cn-btn-outline,
#main-content.cn-page-patientdashboard .cn-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

#main-content.cn-page-patientdashboard .cn-btn-primary {
    background: var(--cn-navy);
    color: #fff;
    border: 1px solid var(--cn-navy);
    box-shadow: var(--cn-shadow-sm);
}

    #main-content.cn-page-patientdashboard .cn-btn-primary:hover {
        background: var(--cn-navy-2);
        color: #fff;
    }

#main-content.cn-page-patientdashboard .cn-btn-outline {
    background: var(--cn-elev);
    color: var(--cn-navy);
    border: 1px solid var(--cn-border-2);
}

    #main-content.cn-page-patientdashboard .cn-btn-outline:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy);
    }

#main-content.cn-page-patientdashboard .cn-btn-ghost {
    background: transparent;
    color: var(--cn-text-2);
    border: 1px solid var(--cn-border-2);
}

    #main-content.cn-page-patientdashboard .cn-btn-ghost:hover {
        background: #FCEDED;
        color: var(--cn-danger);
        border-color: #F3C9C9;
    }

/* ════════════════════════════════════════════════════════════
   PROFILE PAGES  (/provider/profile/index + practiceadmin profile
   + /patient/setupprofile/editprofile)
   Shared via :is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) —
   all are the same account-form layout (DevExpress dxForm), so they reuse
   ONE block (no per-page duplication).
   PRESENTATION ONLY — the dxForm config, field set/order, validations,
   async email check, input masks, notifications toggle, and the
   UpdateProfile submit are all unchanged. Reuses the design-system
   tokens + the GLOBAL .dx-form editor polish (off-white inputs, navy
   focus, label font) — only the page shell, card, identity strip,
   centering, and mobile spacing are added here.

   NOTE: the card is intentionally a page-scoped .cn-profile-card (NOT the
   shared .cn-form-card) so the Notifications dxSwitch keeps the GLOBAL
   navy switch styling — .cn-form-card .dx-switch is excluded from it.
   ════════════════════════════════════════════════════════════ */
#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) #section-content .container {
    max-width: 760px;
}

/* Card surface */
#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-profile-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

/* Identity strip (provider name + initials) */
#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: linear-gradient(180deg, var(--cn-navy-50), transparent);
}

#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip__avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    background: var(--cn-navy);
    color: #fff;
    letter-spacing: .5px;
}

#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip__meta {
    min-width: 0;
}

#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--cn-text);
}

#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip__sub {
    margin: 2px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--cn-text-2);
}

    #main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip__sub svg {
        width: 14px;
        height: 14px;
        color: var(--cn-text-3);
    }

/* Form body — standardized padding */
#main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-profile-card__body {
    padding: 20px 20px 12px;
}

    /* Full-width primary Update button (matches the dxForm width:100%) */
    #main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-profile-card__body .dx-button.dx-button-default {
        width: 100% !important;
        margin-top: 4px;
    }

/* Mobile — most of our providers are on phones */
@media (max-width: 540px) {
    #main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip {
        padding: 16px;
    }

    #main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-idstrip__avatar {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }

    #main-content:is(.cn-page-providerprofile, .cn-page-practiceadminprofile, .cn-page-patienteditprofile) .cn-profile-card__body {
        padding: 16px 16px 8px;
    }
}

/* ════════════════════════════════════════════════════════════
   CHANGE PASSWORD  (/changepassword/index)
   Role-shared page (patient / provider / practice-admin layouts) —
   three standalone dxTextBox widgets (#Password / #newpassword /
   #retypenewpassword) with eye-toggle buttons, an #errormessage line,
   and a #reset-password dxButton.
   PRESENTATION ONLY — widgets, eye-toggles, dxValidator rules, and the
   UpdateChangePassword AJAX are unchanged. These editors are NOT inside a
   .dx-form, so the global form-editor polish doesn't reach them; the rules
   below mirror that look, scoped to this page (same pattern as cn-scribe).
   ════════════════════════════════════════════════════════════ */
#main-content.cn-page-changepassword #section-content .container,
#main-content.cn-page-changepassword .section-content .container {
    max-width: 760px;
}

/* Crumb row */
#main-content.cn-page-changepassword .cn-cp-crumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

/* Card */
#main-content.cn-page-changepassword .cn-cp-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

#main-content.cn-page-changepassword .cn-cp-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: linear-gradient(180deg, var(--cn-navy-50), transparent);
}

#main-content.cn-page-changepassword .cn-cp-card__head-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cn-navy);
    color: #fff;
}

    #main-content.cn-page-changepassword .cn-cp-card__head-ico svg {
        width: 20px;
        height: 20px;
    }

#main-content.cn-page-changepassword .cn-cp-card__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
}

#main-content.cn-page-changepassword .cn-cp-card__head p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--cn-text-2);
}

#main-content.cn-page-changepassword .cn-cp-card__body {
    padding: 20px;
}

/* Field grid — Current Password + New Password two-up (colSpan 6) on
   desktop, Re-Type full width; collapses to a single column on phones. */
#main-content.cn-page-changepassword .cn-cp-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 18px;
    align-items: start;
}

    #main-content.cn-page-changepassword .cn-cp-grid > .cn-cp-fld {
        grid-column: span 12;
        margin-bottom: 0;
    }

    #main-content.cn-page-changepassword .cn-cp-grid > .cn-cp-fld--half {
        grid-column: span 6;
    }

    /* Full-width requirements band (sits below the Current/New row) */
    #main-content.cn-page-changepassword .cn-cp-grid > .cn-cp-newhint {
        grid-column: 1 / -1;
    }

#main-content.cn-page-changepassword .cn-cp-newhint .cn-cp-help {
    margin-top: 0;
}

@media (max-width: 540px) {
    #main-content.cn-page-changepassword .cn-cp-grid {
        grid-template-columns: 1fr;
    }

        #main-content.cn-page-changepassword .cn-cp-grid > .cn-cp-fld,
        #main-content.cn-page-changepassword .cn-cp-grid > .cn-cp-fld--half {
            grid-column: 1 / -1;
        }
}

/* Field + label + help */
#main-content.cn-page-changepassword .cn-cp-fld {
    margin-bottom: 16px;
}

#main-content.cn-page-changepassword .cn-cp-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-text-2);
}

#main-content.cn-page-changepassword .cn-cp-help {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cn-text-3);
}

/* Standalone dxTextBox — mirror the design-system .dx-form editor look
   (off-white fill, navy focus, no Material underline) since these widgets
   aren't inside a .dx-form. Covers all styling modes for layout parity. */
#main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-outlined,
#main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-filled,
#main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-underlined {
    background: #F8FAFC !important;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
    min-height: 44px !important;
}

    #main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-outlined::before,
    #main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-outlined::after,
    #main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-filled::before,
    #main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-filled::after,
    #main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-underlined::before,
    #main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-editor-underlined::after {
        display: none !important;
        content: none !important;
        border: 0 !important;
        background: transparent !important;
    }

#main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor-input {
    padding: 11px 12px !important;
    font-size: 14px !important;
    color: var(--cn-text) !important;
    background: transparent !important;
}

#main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor:hover {
    border-color: var(--cn-text-3) !important;
}

#main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor.dx-state-focused {
    background: #FFFFFF !important;
    border-color: var(--cn-navy) !important;
    box-shadow: inset 0 0 0 1px var(--cn-navy) !important;
}

/* Eye-toggle button (dxTextBox 'password' button) — flat, navy on hover */
#main-content.cn-page-changepassword .cn-cp-fld .dx-texteditor-buttons-container {
    height: auto !important;
}

#main-content.cn-page-changepassword .cn-cp-fld .dx-button.dx-button-has-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-right: 2px !important;
}

    #main-content.cn-page-changepassword .cn-cp-fld .dx-button.dx-button-has-icon .dx-icon {
        color: var(--cn-text-3) !important;
    }

    #main-content.cn-page-changepassword .cn-cp-fld .dx-button.dx-button-has-icon:hover .dx-icon {
        color: var(--cn-navy) !important;
    }

/* Requirement checklist (visual aid for the existing rule) */
#main-content.cn-page-changepassword .cn-cp-reqs {
    margin: 8px 0 0;
    padding: 12px 14px;
    border: 1px dashed var(--cn-border-2);
    border-radius: var(--cn-radius);
    background: var(--cn-bg);
    display: grid;
    gap: 7px;
}

#main-content.cn-page-changepassword .cn-cp-reqs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--cn-text-2);
}

#main-content.cn-page-changepassword .cn-cp-reqs__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cn-muted-bg);
    color: var(--cn-text-3);
}

    #main-content.cn-page-changepassword .cn-cp-reqs__dot svg {
        width: 11px;
        height: 11px;
    }

#main-content.cn-page-changepassword .cn-cp-reqs__item.ok {
    color: var(--cn-text);
}

    #main-content.cn-page-changepassword .cn-cp-reqs__item.ok .cn-cp-reqs__dot {
        background: var(--cn-success-bg);
        color: var(--cn-success);
    }

/* Error line (#errormessage) — danger text; hidden until it has content */
#main-content.cn-page-changepassword .cn-cp-error {
    margin: 4px 0 0;
    color: var(--cn-danger);
    font-size: 12.5px;
    font-weight: 600;
}

    #main-content.cn-page-changepassword .cn-cp-error:empty {
        display: none;
    }

/* Action button — full width primary (dxButton type:default → navy 42px) */
#main-content.cn-page-changepassword .cn-cp-actions {
    margin-top: 18px;
}

    #main-content.cn-page-changepassword .cn-cp-actions #reset-password .dx-button.dx-button-default {
        width: 100% !important;
    }

/* Mobile — most of our users are on phones */
@media (max-width: 540px) {
    #main-content.cn-page-changepassword .cn-cp-card__head,
    #main-content.cn-page-changepassword .cn-cp-card__body {
        padding: 16px;
    }
}

/* ════════════════════════════════════════════════════════════
   NEW UPCOMING VISITS — CALENDAR  (/provider/NewUpcomingVisit/index)
   dxScheduler appointment calendar + Encounter nav toolbar + appointment
   context menu. PRESENTATION ONLY — the dxScheduler / dxToolbar /
   dxContextMenu config, ODataContext datasource, context-menu logic,
   Join/Encounter navigation, and 30s auto-refresh are unchanged. Legacy
   inline <style> migrated here, recoloured indigo (#3f51b5) → navy, +
   card / toolbar / appointment polish. Dropped dead rules: `.dx-datagrid
   .dx-link` (no grid here), `.holiday` (no dxCalendar here), `.readonly`
   (unused), `span.dx-menu-item-text{top:2px}` (global leak).
   ════════════════════════════════════════════════════════════ */

/* ----- Toolbar: Encounter nav menu (left) + timezone (right) -----
   #toolbars IS the dxToolbar root and sits at the TOP of the cn-grid-card —
   mirror the My Patient grid toolbar chrome (.cn-grid-card
   .dx-datagrid-header-panel): white surface, 14×18 padding, bottom hairline,
   flush (no margin/radius — the card clips the corners). */
#main-content.cn-page-newupcomingvisit #toolbars.dx-toolbar,
#main-content.cn-page-newupcomingvisit #toolbars {
    background: var(--cn-elev) !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cn-border) !important;
    padding: 14px 18px !important;
    margin: 0 !important;
}

    /* items row — centered, 10px gap (same as My Patient .dx-toolbar-after) */
    #main-content.cn-page-newupcomingvisit #toolbars .dx-toolbar-items-container {
        background: transparent !important;
        height: auto !important;
        min-height: var(--cn-h-input) !important;
    }

    #main-content.cn-page-newupcomingvisit #toolbars .dx-toolbar-before,
    #main-content.cn-page-newupcomingvisit #toolbars .dx-toolbar-after {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Encounter nav dxMenu → a bordered 38px control ("Encounter ▾"), matching
       the My Patient toolbar controls. Reset DX menu chrome first, then style
       the root horizontal item as the button (incl. hover / focus / opened). */
    #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal,
    #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-items-container {
        background: transparent !important;
        border: 0 !important;
    }

        #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item {
            border: 1px solid var(--cn-border-2) !important;
            border-radius: var(--cn-radius) !important;
            background: var(--cn-elev) !important;
        }

            #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item .dx-menu-item-content {
                padding: 0 12px 0 14px !important;
                min-height: var(--cn-h-input) !important;
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
                background: transparent !important;
            }

            /* hover / keyboard-focus / opened (submenu showing) → navy-50 + navy border */
            #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item.dx-state-hover,
            #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item.dx-state-focused,
            #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item.dx-menu-item-expanded {
                background: var(--cn-navy-50) !important;
                border-color: var(--cn-navy) !important;
            }

                #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item.dx-state-hover .dx-menu-item-content,
                #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item.dx-state-focused .dx-menu-item-content,
                #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item.dx-menu-item-expanded .dx-menu-item-content {
                    background: transparent !important;
                }

    #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-item .dx-menu-item-text {
        color: var(--cn-navy) !important;
        font-weight: 600 !important;
        font-size: 13.5px !important;
    }

    /* popout chevron (▾) → navy, snug to the label */
    #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-item .dx-menu-item-popout {
        color: var(--cn-navy) !important;
        margin-left: 0 !important;
    }

/* (timezone uses the shared .cn-tz pill primitive — no page CSS needed) */

/* mobile — wrap the toolbar onto stacked full-width rows (matches the
   My Patient @600 toolbar wrap; tighter card padding). */
@media (max-width: 600px) {
    #main-content.cn-page-newupcomingvisit #toolbars.dx-toolbar,
    #main-content.cn-page-newupcomingvisit #toolbars {
        padding: 10px 12px !important;
        height: auto !important;
    }

        /* The dxToolbar positions before/after sections ABSOLUTELY (left/right) —
       on mobile flip the container to a normal stacked flex column so the
       Encounter menu and the timezone don't overlap (which blocked taps). */
        #main-content.cn-page-newupcomingvisit #toolbars .dx-toolbar-items-container {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            height: auto !important;
            gap: 8px !important;
        }

        #main-content.cn-page-newupcomingvisit #toolbars .dx-toolbar-before,
        #main-content.cn-page-newupcomingvisit #toolbars .dx-toolbar-center,
        #main-content.cn-page-newupcomingvisit #toolbars .dx-toolbar-after {
            position: static !important;
            transform: none !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            display: flex !important;
            justify-content: flex-start !important;
        }

        #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal,
        #main-content.cn-page-newupcomingvisit #toolbars .dx-menu-horizontal .dx-menu-item {
            width: 100% !important;
        }
}

/* ----- Scheduler chrome ----- */
#main-content.cn-page-newupcomingvisit .dx-scheduler {
    font-family: var(--cn-font);
    border: 0;
}

#main-content.cn-page-newupcomingvisit .dx-scheduler-header {
    z-index: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--cn-border);
    background: transparent;
}

    /* scheduler header toolbar bar — comfortable padding, transparent surface */
    #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-toolbar {
        background: transparent !important;
        padding: 10px 14px !important;
    }

        #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-toolbar .dx-toolbar-item-content,
        #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-toolbar .dx-toolbar-menu-container {
            padding: 0 4px !important;
        }

        /* all header buttons → navy text / icons (was indigo) */
        #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-toolbar .dx-button,
        #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
            color: var(--cn-navy) !important;
        }

/* navigator prev / next → 32px ghost icon buttons (border + navy-50 hover) */
#main-content.cn-page-newupcomingvisit .dx-scheduler-navigator .dx-scheduler-navigator-previous,
#main-content.cn-page-newupcomingvisit .dx-scheduler-navigator .dx-scheduler-navigator-next {
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-elev) !important;
    min-width: 32px !important;
    height: 32px !important;
    box-shadow: none !important;
}

    #main-content.cn-page-newupcomingvisit .dx-scheduler-navigator .dx-scheduler-navigator-previous:hover,
    #main-content.cn-page-newupcomingvisit .dx-scheduler-navigator .dx-scheduler-navigator-next:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

/* navigator caption (date range) — bold borderless text, NOT a boxed button
   (kept clickable so DX's date-picker still opens) */
#main-content.cn-page-newupcomingvisit .dx-scheduler-navigator .dx-scheduler-navigator-caption {
    min-width: 0 !important;
    margin: 0 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cn-text) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* view switcher ("Month ▾" dropdown) → bordered design-system control */
#main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-toolbar-after .dx-button {
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-elev) !important;
    height: 34px !important;
    box-shadow: none !important;
}

    #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-toolbar-after .dx-button:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }

/* selected view (inline tabs, when shown) → navy fill */
#main-content.cn-page-newupcomingvisit .dx-scheduler-view-switcher .dx-tab.dx-tab-selected,
#main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-button.dx-item-selected {
    background: var(--cn-navy) !important;
    border-radius: var(--cn-radius) !important;
}

    #main-content.cn-page-newupcomingvisit .dx-scheduler-view-switcher .dx-tab.dx-tab-selected,
    #main-content.cn-page-newupcomingvisit .dx-scheduler-view-switcher .dx-tab.dx-tab-selected .dx-icon,
    #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-button.dx-item-selected,
    #main-content.cn-page-newupcomingvisit .dx-scheduler-header .dx-button.dx-item-selected .dx-icon {
        color: #fff !important;
    }

/* header date-cell typography (migrated) */
#main-content.cn-page-newupcomingvisit .dx-scheduler-header-panel-cell {
    height: 35px !important;
}

    #main-content.cn-page-newupcomingvisit .dx-scheduler-header-panel-cell .dx-scheduler-header-panel-cell-date:first-child {
        font-size: 12px !important;
        line-height: 23px !important;
    }

    #main-content.cn-page-newupcomingvisit .dx-scheduler-header-panel-cell .dx-scheduler-header-panel-cell-date:last-child {
        font-size: 15px !important;
        line-height: 22px !important;
    }

/* header / time panel font + current-time → navy (was indigo) */
#main-content.cn-page-newupcomingvisit .dx-scheduler-header-panel,
#main-content.cn-page-newupcomingvisit .dx-scheduler-time-panel {
    font-size: 13px;
}

#main-content.cn-page-newupcomingvisit .dx-scheduler-header-panel-cell.dx-scheduler-header-panel-current-time-cell,
#main-content.cn-page-newupcomingvisit .dx-scheduler-time-panel-cell.dx-scheduler-time-panel-current-time-cell {
    color: var(--cn-navy) !important;
    font-weight: 600;
}

/* in-scheduler button / list font (migrated, scoped — was a global leak) */
#main-content.cn-page-newupcomingvisit .dx-scheduler span.dx-button-text {
    font-size: 12px;
}

#main-content.cn-page-newupcomingvisit .dx-list-item-content {
    font-size: 12px;
}

/* appointments — rounded + soft shadow + accent edge (colours set in JS:
   success / warn / muted). Matches the v2 mockup chip. */
#main-content.cn-page-newupcomingvisit .dx-scheduler-appointment {
    border-radius: 7px !important;
    box-shadow: var(--cn-shadow-sm);
    border-left: 3px solid rgba(255, 255, 255, .55) !important;
}

    #main-content.cn-page-newupcomingvisit .dx-scheduler-appointment .dx-scheduler-appointment-title {
        font-weight: 700;
    }

/* Month-view "N more" collector → compact bar so it lines up with the
   appointment chips instead of overflowing taller than them. */
#main-content.cn-page-newupcomingvisit .dx-scheduler-appointment-collector {
    height: 22px !important;
    min-height: 22px !important;
    border-radius: var(--cn-radius) !important;
    box-shadow: none !important;
}

    #main-content.cn-page-newupcomingvisit .dx-scheduler-appointment-collector .dx-button-content {
        padding: 0 8px !important;
    }

    #main-content.cn-page-newupcomingvisit .dx-scheduler-appointment-collector .dx-button-text {
        font-size: 11px !important;
        line-height: 1 !important;
    }

/* (Status legend now reuses the shared `.cn-legend` / `.cn-legend__item` /
   `.cn-legend__sw` primitives + the new generic `--success/--warn/--muted`
   swatch variants — no page-specific legend CSS needed.) */

/* (Appointment context menu now reuses the shared `.cn-action-menu`
   design — cssClass + itemTemplate set on the dxContextMenu in the page
   JS — so the page-specific `.cn-appt-menu` block was removed.) */

/* ════════════════════════════════════════════════════════════
   SUPPORT  (/provider/support)
   Static info page — 3 cards (Knowledge base · Contact Us · Follow Us).
   PRESENTATION ONLY — same content / links / email / phone / social
   accounts; the legacy inline <style> was migrated here. Reuses the shared
   crumb (cn-back / cn-area) + cn-title / cn-subtitle; only the support-card
   components below are new (no existing shared "info card" primitive).
   ════════════════════════════════════════════════════════════ */
#main-content.cn-page-providersupport #section-content .container {
    max-width: 1180px;
}

#main-content.cn-page-providersupport .cn-support {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

#main-content.cn-page-providersupport .cn-scard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 28px 22px;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

    #main-content.cn-page-providersupport .cn-scard:hover {
        box-shadow: var(--cn-shadow-md);
        border-color: var(--cn-border-2);
        transform: translateY(-2px);
    }

#main-content.cn-page-providersupport .cn-scard__icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(209, 156, 70, .12);
    color: var(--cn-gold);
    margin-bottom: 16px;
}

    #main-content.cn-page-providersupport .cn-scard__icon svg {
        width: 28px;
        height: 28px;
    }

#main-content.cn-page-providersupport .cn-scard__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--cn-text);
    margin: 0 0 12px;
}

#main-content.cn-page-providersupport .cn-scard__body {
    font-size: 14px;
    color: var(--cn-text-2);
    width: 100%;
}

/* knowledge-base link */
#main-content.cn-page-providersupport .cn-kb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cn-navy);
    font-weight: 600;
    word-break: break-all;
}

    #main-content.cn-page-providersupport .cn-kb-link:hover {
        color: var(--cn-navy-2);
        text-decoration: underline;
    }

    #main-content.cn-page-providersupport .cn-kb-link svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
    }

/* contact rows */
#main-content.cn-page-providersupport .cn-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    margin-top: 2px;
}

#main-content.cn-page-providersupport .cn-contact__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#main-content.cn-page-providersupport .cn-contact__ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
}

    #main-content.cn-page-providersupport .cn-contact__ico svg {
        width: 16px;
        height: 16px;
    }

#main-content.cn-page-providersupport .cn-contact__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cn-text-3);
    line-height: 1.2;
}

#main-content.cn-page-providersupport .cn-contact__val {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
}

    #main-content.cn-page-providersupport .cn-contact__val a {
        color: var(--cn-navy);
    }

        #main-content.cn-page-providersupport .cn-contact__val a:hover {
            text-decoration: underline;
        }

/* social */
#main-content.cn-page-providersupport .cn-social {
    display: inline-flex;
    gap: 12px;
    margin-top: 2px;
}

    #main-content.cn-page-providersupport .cn-social a {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--cn-border);
        background: var(--cn-elev);
        transition: transform .12s, box-shadow .12s, border-color .12s;
    }

        #main-content.cn-page-providersupport .cn-social a:hover {
            transform: translateY(-2px);
            box-shadow: var(--cn-shadow-sm);
            border-color: var(--cn-border-2);
        }

    #main-content.cn-page-providersupport .cn-social svg {
        width: 24px;
        height: 24px;
    }

/* responsive — most of our users are on phones */
@media (max-width: 900px) {
    #main-content.cn-page-providersupport .cn-support {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    #main-content.cn-page-providersupport .cn-support {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #main-content.cn-page-providersupport .cn-scard {
        padding: 22px 18px;
    }
}

/* ============================================================
   AI INSIGHT (BETA) — provider/encounter/AiInsight.cshtml
   ICD/CPT-code recommendation output. Page chrome reuses the
   shared encounter primitives (.cn-back / .cn-area / .cn-title /
   .cn-hero / .cn-encounter-accordion); only the AI-output card +
   disclaimer below are page-local (migrated from the inline
   <style>, which styled a plain <textarea> not a DX widget).
   ============================================================ */
#main-content.cn-page-aiinsight .cn-ai-output {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 6px;
}

/* dxLoadIndicator mounts here while the recommendation is fetched */
#main-content.cn-page-aiinsight #loading {
    min-height: 0;
}

#main-content.cn-page-aiinsight .cn-ai-field {
    width: 100%;
    min-height: 240px;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--cn-border);
    border-radius: 8px;
    background: #F8FAFC;
    color: var(--cn-text);
    font-family: var(--cn-font);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    #main-content.cn-page-aiinsight .cn-ai-field:focus {
        outline: none;
        background: #fff;
        border-color: var(--cn-navy);
        box-shadow: inset 0 0 0 1px var(--cn-navy);
    }

#main-content.cn-page-aiinsight .cn-ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--cn-warn);
    font-family: var(--cn-font);
    font-size: 12.5px;
    line-height: 1.45;
}

    #main-content.cn-page-aiinsight .cn-ai-disclaimer svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        color: var(--cn-warn);
    }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PROVIDER LANDING — video pre-join (device check) page polish ║
   ║  Reskin only. The dxSelectBox device pickers, the #joinvisit  ║
   ║  dxButton, the #Blur-dxSwitch dxForm, the self-view video/    ║
   ║  canvas, and the #m-video-btn/#m-audio-btn/#end-call-btn      ║
   ║  controls keep their ids + JS — this only styles them.        ║
   ╚══════════════════════════════════════════════════════════════╝ */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) #section-content > .container {
    max-width: 1140px;
    margin-top: 0 !important;
}

/* ----- scheduled-visit bar (holds #ScheduleDate) ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-visitbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
}
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-visitbar__ico {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-visitbar__ico svg {
        width: 20px;
        height: 20px;
    }
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-visitbar__label {
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cn-text-3);
}
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-visitbar__time {
    font-family: var(--cn-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cn-text);
    margin: 2px 0 0;
    line-height: 1.3;
}

/* ----- two-column layout (video 7 / setup 5), stacks on mobile ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 24px;
    align-items: start;
}

#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-stage {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 16px;
}
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-setup {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-md);
    padding: 22px;
}

/* ----- self-view video region (#local-media holds video + canvas) ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) #local-media {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0b1320;
}
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) #local-media video,
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) #local-media canvas {
        width: 100%;
        height: 100%;
        display: block;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 12px;
        background: #000;
    }
    /* "You" label chip over the self-view (decorative) */
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-video__name {
        position: absolute;
        left: 14px;
        bottom: 14px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(15, 23, 42, .55);
        color: #fff;
        font-family: var(--cn-font);
        font-size: 13px;
        font-weight: 600;
        backdrop-filter: blur(4px);
    }
        #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-video__name svg {
            width: 14px;
            height: 14px;
        }

/* ----- blur-background toggle — overlay pill on the self-view (matches mockup).
   #local-media is position:relative, so this anchors top-right over the video. ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur {
    position: absolute;
    top: 14px;
    right: 14px;
    /* z-index:0 (NOT higher) so the pill scrolls UNDER the fixed site header
       (header is position:fixed; z-index:1). It still paints above the video
       because absolutely-positioned elements sit above static siblings. */
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur__ico {
        width: 16px;
        height: 16px;
        /* force the legacy icon white so it reads on the dark pill */
        filter: brightness(0) invert(1);
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur__label {
        font-family: var(--cn-font);
        font-size: 12.5px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur__switch {
        display: inline-flex;
        align-items: center;
    }
    /* The #Blur-dxSwitch dxForm has showValidationSummary:true, which renders an
       empty .dx-form-validation-summary with margin-top:20px below the switch —
       that padded the form to 44px and pushed the switch above the pill's centre.
       The switch has no validation rules, so collapse the summary to re-centre. */
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur .dx-form-validation-summary {
        display: none !important;
    }
    /* Explicit toggle geometry so the handle tracks correctly on the dark pill
       (overrides the global switch metrics; DX's own children stay hidden by the
       global .dx-switch > * { display:none } rule). Track 44x24, 18px handle. */
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur .dx-switch {
        width: 44px !important;
        min-width: 44px !important;
        height: 24px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .4) !important;
    }
        #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur .dx-switch.dx-switch-on-value {
            background: var(--cn-navy) !important;
        }
        #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur .dx-switch::before {
            width: 18px !important;
            height: 18px !important;
            top: 3px !important;
            left: 3px !important;
            transform: none !important;
        }
        #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur .dx-switch.dx-switch-on-value::before {
            transform: translateX(20px) !important;
        }
        /* collapse the lone-switch dxForm wrapper so it sits inline */
        #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur__switch .dx-field-item,
        #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur__switch .dx-box-item,
        #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-blur__switch .dx-field-item-content {
            padding: 0 !important;
            min-height: 0 !important;
        }

/* ----- video / audio / leave controls (keep .videoaudiobutton ids) ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
/* Shared call-control button (ProviderLanding pre-join + the in-call /join
   page). One definition, both pages — the in-call page only adds small
   inline-style neutralisers in its own block (legacy inline sizes/margins). */
#main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobutton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 70px;
    height: 52px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--cn-border);
    background: var(--cn-elev);
    box-shadow: none;
    cursor: pointer;
    transition: background .14s, border-color .14s, box-shadow .14s;
}
    #main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobutton:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        box-shadow: var(--cn-shadow-sm);
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobutton img,
    #main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobutton svg {
        width: 18px;
        height: 18px;
    }
#main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobuttontitle {
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cn-text);
}
#main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobutton--leave {
    background: var(--cn-danger);
    border-color: var(--cn-danger);
}
    #main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobutton--leave:hover {
        background: #b91c1c;
        border-color: #b91c1c;
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-providervideovisit, .cn-page-patientlanding, .cn-page-patientvideovisit, .cn-page-guestlanding) .videoaudiobutton--leave .videoaudiobuttontitle {
        color: #fff;
    }

/* ----- setup card text ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-setup__welcome {
    font-family: var(--cn-font);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cn-text);
    margin: 0;
}
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-setup__hint {
    font-family: var(--cn-font);
    font-size: 13.5px;
    color: var(--cn-text-2);
    line-height: 1.55;
    margin: 6px 0 18px;
}
/* reassurance footer (matches mockup .cn-setup__foot) */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-setup__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-family: var(--cn-font);
    font-size: 12px;
    color: var(--cn-text-3);
}
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-setup__foot svg {
        width: 14px;
        height: 14px;
    }

/* ----- device fields (wrap #CameraList / #SpeakerList / #MicrophoneList) ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field {
    margin-bottom: 14px;
}
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--cn-text);
    margin-bottom: 7px;
}
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field__ico {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        color: var(--cn-navy);
    }
/* standalone dxSelectBox pickers — these are NOT in a .dx-form, so mirror
   the design-system editor look explicitly (off-white fill, navy focus). */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field .dx-selectbox.dx-texteditor.dx-editor-outlined {
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    background: var(--cn-elev);
    box-shadow: none;
}
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field .dx-selectbox.dx-texteditor.dx-editor-outlined::before,
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field .dx-selectbox.dx-texteditor.dx-editor-outlined::after {
        display: none !important;
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field .dx-selectbox.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
        min-height: 40px;
        font-family: var(--cn-font);
        font-size: 14px;
        color: var(--cn-text);
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field .dx-selectbox.dx-state-hover {
        border-color: var(--cn-navy);
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-field .dx-selectbox.dx-state-focused {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }

/* ----- join button — $("#joinvisit").dxButton() initialises the widget ON
   #joinvisit, so #joinvisit IS the .dx-button root (NOT a parent of it). Target
   it directly with !important to beat the widget's inline width:200 (set in the
   JS config) so the CTA spans the card full-width, matching the mockup. ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) #joinvisitdisplay {
    margin-top: 8px;
}

/* ----- "time is over" message (JS fills + shows it; hide while empty) ----- */
#main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .pastmessage {
    color: var(--cn-danger);
    font-family: var(--cn-font);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-top: 16px;
}
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .pastmessage:empty {
        display: none;
    }

/* ----- responsive: mobile is the majority ----- */
@media (max-width: 860px) {
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
@media (max-width: 560px) {
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-stage,
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-setup {
        padding: 14px;
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .cn-pl-controls {
        gap: 10px;
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .videoaudiobutton {
        width: 31%;
    }
    /* preserve the page's existing mobile order (join above device list) */
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .divcontainer {
        display: flex;
        flex-direction: column;
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .first-div {
        order: 1;
    }
    #main-content:is(.cn-page-providerlanding, .cn-page-patientlanding, .cn-page-guestlanding) .second-div {
        order: 0;
        margin-bottom: 14px;
    }
}

/* ----- guest landing only: standalone page (Layout = null) so it has no shared
   layout section padding; everything else reuses the shared landing block above. ----- */
#main-content.cn-page-guestlanding #section-content {
    padding: 24px 0 40px;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PROVIDER VIDEO VISIT (in-call /join) — page polish           ║
   ║  Reskin only — matches C:\mockups\providerjoin-v2.html.       ║
   ║  Scope #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit). Migrated the ║
   ║  page's inline <style> here (recoloured to tokens) + added    ║
   ║  the mockup chrome. NO layout/DOM restructure: the Zoom Web   ║
   ║  SDK (visit.es5.min.js) render targets (#self-view,           ║
   ║  #<PatientName>, guest divs), the dxAccordion/dxHtmlEditor/   ║
   ║  dxChat/dxSwitch mounts, every element id, the desktop/mobile ║
   ║  display-toggle back-button flow, and the duplicate footer    ║
   ║  controls are all preserved. Functional sizing rules kept     ║
   ║  verbatim; only presentation (space/font/colour) changed.     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ===== two-panel split — match the mockup .cn-call-grid (7fr / 5fr,
   22px gap, stacks ≤900px). Replaces the Bootstrap .row/.col gutters so
   the gap between the video panel and the info panel matches exactly. */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-chat {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 22px;
    align-items: start;
    margin: 0;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #videocall,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #profiledata {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}
@media (max-width: 900px) {
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-chat {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ===== patient-context call bar (additive, top of #firstcontainer) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-callbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 12px 16px;
    margin: 10px 0 18px;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-callbar__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--cn-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 700;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-callbar__name {
    font-family: var(--cn-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cn-text);
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-callbar__meta {
    font-family: var(--cn-font);
    font-size: 12.5px;
    color: var(--cn-text-2);
    margin-top: 1px;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-callbar__meta b {
        color: var(--cn-text);
        font-weight: 600;
    }
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--cn-danger-bg);
    color: var(--cn-danger);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 700;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-live__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cn-danger);
    animation: cnVvPulse 1.6s ease-in-out infinite;
}
@keyframes cnVvPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ===== two cards (video stage + side panel) — neutralise the legacy
   outer .box-shadow wrapper so each column reads as its own card ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-cardrow {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #videocall {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 16px;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #profiledata .video-chat-info {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-md);
    padding: 16px;
}

/* ===== self-view (Zoom renders local video into #self-view) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-selfview {
    position: relative;
    display: inline-block;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #self-view {
    padding-top: 0;
    padding-left: 0;
    width: 208px;
    height: 128px;
    border-radius: 12px;
    overflow: hidden;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #self-view video {
        width: 100%;
        height: 100%;
        background-color: #000;
        border-radius: 12px !important;
        object-fit: cover;
        aspect-ratio: 16/9;
    }
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-selfview__tag {
    position: absolute;
    left: 8px;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    font-family: var(--cn-font);
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(3px);
    pointer-events: none;
}

/* ===== remote (patient) + guest video frames ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .backimagedoctorpatient {
    position: relative;
    background-image: url('/style-v01/img/CareNiva_wait3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    border: 1px solid var(--cn-border);
    margin-top: 14px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
    aspect-ratio: 16/9;
    overflow: hidden;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .backimageguest {
    position: relative;
    background-image: url('/style-v01/img/CareNiva_wait3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    border: 1px solid var(--cn-border);
    border-radius: 12px;
    aspect-ratio: 16/9;
    overflow: hidden;
}
/* participant name plate → bottom-left corner pill overlay, matching the
   mockup exactly (.cn-patientvideo__name and .cn-guest__name). The pill sits
   in the corner so it never covers the centered placeholder/video content. */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-vidname {
    position: absolute !important;
    left: 14px;
    bottom: 14px;
    width: auto !important;
    max-width: calc(100% - 28px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .55) !important;
    color: #fff;
    font-family: var(--cn-font);
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-guestname {
    position: absolute !important;
    left: 6px;
    bottom: 6px;
    width: auto !important;
    max-width: calc(100% - 12px);
    display: inline-flex;
    align-items: center;
    padding: 1px 8px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .55) !important;
    color: #fff;
    font-family: var(--cn-font);
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(3px);
}

/* ===== patient video canvas / fullscreen / overlay controls (functional) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .videocanvas {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .videocanvas video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: unset !important;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-fullscreen video-player,
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-fullscreen video-player video {
        object-fit: contain !important;
    }
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
    transition: .3s;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-btn {
    background: rgba(0, 0, 0, .6);
    border: none;
    color: #fff;
    padding: 0px 6px;
    border-radius: 6px;
    cursor: pointer;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .video-btn:hover {
        background: rgba(0, 0, 0, .9);
    }

/* ===== call control buttons (video / audio / leave / scribe) ===== */
/* in-call control buttons reuse the SHARED .videoaudiobutton rules above
   (identical to ProviderLanding). The only page-specific bits are
   neutralisers for the legacy inline styles this page's markup still carries
   (inline icon sizes, per-button margins, the Leave glyph's red chip) so the
   buttons render byte-identically to ProviderLanding. */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .btn-group {
    margin-top: 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
    /* beat the inline width:24px / height:24px on the control imgs + the
       Transcription svg so the icon size matches ProviderLanding (18px) */
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .videoaudiobutton img,
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .videoaudiobutton svg {
        width: 18px !important;
        height: 18px !important;
    }
    /* beat the inline margin-left:10px on some buttons — spacing comes from
       the .btn-group gap, matching ProviderLanding */
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .videoaudiobutton {
        margin: 0 !important;
    }
    /* the Leave glyph carries its own red chip inline — neutralise it on the
       now-red button (ProviderLanding's leave icon has no chip) */
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .videoaudiobutton--leave img {
        background: transparent !important;
        padding: 0 !important;
    }

/* ===== blur-background row (icon + label + dxForm dxSwitch) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-blurrow {
    display: flex;
    align-items: center;
    gap: 10px;
    float: none !important;
    height: auto !important;
    margin-top: 14px;
    padding: 9px 13px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    background: var(--cn-bg);
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-blurrow__ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--cn-navy);
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-blurrow__label {
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    margin-right: auto;
}
/* collapse the lone-switch dxForm so the toggle centres in the row
   (empty validation summary adds margin; field-item adds padding) */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-blurrow .dx-form-validation-summary {
    display: none !important;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-blurrow .dx-field-item,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-blurrow .dx-field-item-content {
    padding: 0 !important;
}

/* ===== mobile control footer + mobile back bars ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .footer {
    background: var(--cn-elev);
    border-top: 1px solid var(--cn-border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .06);
}
/* mobile view-toggle bars (Go To Provider Comment / Back To Video) — clean
   single flex row, NO leftover .box-shadow border; the toggle link renders as
   a navy outline pill instead of a bare floated text link. */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-top: 0 !important;
    margin-bottom: 12px;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton .row,
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton .row {
        margin: 0;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton .col-md-12,
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton .col-md-12 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
    }
    /* blur toggle row sits on the left and takes the remaining width */
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton .cn-vv-blurrow {
        float: none !important;
        flex: 1 1 auto;
        margin-top: 0;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton p,
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton p {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* the toggle links → clean navy outline pill buttons */
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton p a,
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 38px;
        padding: 0 14px;
        border: 1px solid var(--cn-border-2);
        border-radius: 999px;
        background: var(--cn-elev);
        color: var(--cn-navy);
        font-family: var(--cn-font);
        font-size: 13px !important;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }
        #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton p a:hover,
        #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton a:hover {
            background: var(--cn-navy-50);
            border-color: var(--cn-navy);
            text-decoration: none;
        }

/* ===== side-panel action buttons (Schedule follow up / View profile) —
   two equal side-by-side CTAs in a flex row (matches the mockup's
   .cn-panel__actions / .cn-act; replaces the legacy float layout) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .custom-dx-btn.default-btn {
    flex: 1 1 0;
    min-width: 130px;
    background: var(--cn-navy);
    border: 1px solid var(--cn-navy);
    border-radius: var(--cn-radius);
    transition: background .14s;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .custom-dx-btn.default-btn:hover {
        background: var(--cn-navy-2);
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .custom-dx-btn.default-btn .dx-button-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .custom-dx-btn.default-btn a {
        color: #fff;
        font-family: var(--cn-font);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 3px !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .custom-dx-btn.default-btn svg {
        margin: 0 !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .custom-dx-btn.default-btn svg path {
        fill: #fff;
    }

/* ===== Patient Info definition list (accordion body) — clean two-column
   grid (matches the mockup .cn-dl); replaces the legacy inner card +
   offset box-shadow + .definition-sm. ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 4px 0 0;
    font-family: var(--cn-font);
    font-size: 13px;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-dl dt {
        color: var(--cn-text-3);
        font-weight: 600;
        white-space: nowrap;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-dl dd {
        margin: 0;
        color: var(--cn-text);
        font-weight: 500;
    }

/* Provider-Notes SAVE button (#default-contained-search) — sits inline in the
   accordion title, so make it a compact 32px instead of the global 40px (which
   is shared with the VisitList Search button; page-scoped override keeps that
   page's 40px intact). */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #default-contained-search.dx-button.dx-button-default {
    height: 32px !important;
    min-height: 32px !important;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #default-contained-search.dx-button.dx-button-default .dx-button-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

/* ===== accordion (Patient Info / Provider Notes / Chat) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-item.dx-accordion-item.dx-accordion-item-closed {
    height: 48px !important;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-accordion-item-title {
    font-family: var(--cn-font);
    font-weight: 700;
    color: var(--cn-text);
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) span.dx-button-text {
    font-size: .8rem !important;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-texteditor {
    padding: 18px !important;
}
/* Provider-Notes section labels (History of Presenting / Past History / …) —
   the legacy <h3> renders oversized; set a clean, consistent label size. */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .alt-header {
    font-family: var(--cn-font);
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cn-navy);
    margin: 16px 0 6px !important;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .alt-header:first-child {
        margin-top: 0 !important;
    }
/* dxHtmlEditor note fields — readable, consistent body font. The DX 25.2.4
   editor renders the editable area as `.dx-htmleditor-content.ql-editor`
   inside `.dx-quill-container`, so target both class names. */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-htmleditor .dx-htmleditor-content,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-htmleditor .ql-editor,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-htmleditor .dx-htmleditor-content p,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-htmleditor .ql-editor p {
    font-family: var(--cn-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cn-text);
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .html-editorone h3 {
    -webkit-user-modify: read-only;
    pointer-events: none;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) i.dx-icon.dx-svg-icon {
    padding-right: 205px;
    margin-bottom: -21px;
}

/* ===== DX tabs / drawer (recoloured indigo→navy) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-tab.dx-tab-selected,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-tab.dx-tab-selected .dx-icon {
    color: var(--cn-navy);
    background-color: #F1F4F9;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) span.dx-tab-text-span {
    color: var(--cn-navy);
    font-size: 14px;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-drawer-wrapper {
    display: block !important;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-drawer-panel-content {
    width: 100% !important;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .panel-list.dx-tabs.dx-widget.dx-visibility-change-handler.dx-collection.dx-tabs-expanded {
    width: 100% !important;
}

/* ===== chat ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .demo-container {
    display: flex;
    gap: 20px;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .chat-container {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .options {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    background-color: rgba(191, 191, 191, .15);
    gap: 16px;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-chat {
    max-width: 480px;
    min-width: 15em !important;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .caption {
    font-size: var(--dx-font-size-sm);
    font-weight: 500;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-widget.dx-button.dx-button-mode-text.dx-button-default.dx-button-has-icon.dx-chat-messagebox-button,
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .dx-widget.dx-button.dx-button-mode-text.dx-button-default.dx-button-has-icon.dx-chat-messagebox-button.dx-state-disabled {
    background-color: transparent !important;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #emoji-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-top: 5px;
}
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #emoji-list {
    display: none;
    margin-top: 8px;
    font-size: 22px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 8px;
    width: fit-content;
    background-color: #fafafa;
}
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #emoji-list span {
        cursor: pointer;
        margin: 4px;
        transition: transform .2s;
    }
        #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #emoji-list span:hover {
            transform: scale(1.2);
        }

/* ===== page top padding (layout adds .section-content-full) ===== */
#main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .section-content-full {
    padding: 110px 0 0 !important;
}

/* ════ responsive — desktop/mobile display-toggles drive the back-button
   flow; kept verbatim (scoped). visit.es5.min.js + videobackbutton()/
   patientdetailbackbutton() rely on these display values. ════ */
@media (min-width: 768px) {
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #audiovideobutton {
        display: block;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .footer {
        display: none;
        overflow-y: scroll;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton {
        display: none !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton {
        display: none !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #profiledata {
        display: block !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #videocall {
        display: block !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #firstcontainer {
        margin-bottom: 0 !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .section-content-full {
        padding: 110px 0 0 !important;
    }
}
@media only screen and (min-device-width: 150px) and (max-device-width: 767px) {
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #audiovideobutton {
        display: none;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        border-radius: 14px 14px 0 0;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showvideobackbutton {
        display: block;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #showpatientdetailbackbutton {
        display: none;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #profiledata {
        display: none;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #firstcontainer {
        margin-bottom: 5rem !important;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .section-content-full {
        padding: 100px 0 0 !important;
    }
}

/* ===== responsive polish (callbar/cards) ===== */
@media (max-width: 575px) {
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-live {
        margin-left: 0;
    }
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #videocall,
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) #profiledata .video-chat-info {
        padding: 12px;
    }
    /* keep the two action CTAs as equal halves on mobile (shrink, never overflow) */
    #main-content:is(.cn-page-providervideovisit, .cn-page-patientvideovisit) .cn-vv-actions .custom-dx-btn.default-btn {
        min-width: 0;
    }
}

/* ----- patient in-call only: the patient layout doesn't add
   .section-content-full, so give #section-content the header-clearing top
   padding here (mirrors the page's original inline value); plus a small
   welcome heading in the side panel. ----- */
#main-content.cn-page-patientvideovisit #section-content {
    padding: 110px 0 0 !important;
    margin-bottom: 0;
}
#main-content.cn-page-patientvideovisit .cn-vv-welcome {
    margin: 0 0 12px;
    font-family: var(--cn-font);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cn-text);
}
@media only screen and (max-width: 767px) {
    #main-content.cn-page-patientvideovisit #section-content {
        padding: 100px 0 0 !important;
        margin-bottom: 5rem !important;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MY DEPENDENTS (patient/mydependents) — page polish           ║
   ║  Reskin only — matches C:\mockups\mydependents-v2.html. Scope ║
   ║  #main-content.cn-page-mydependents. The radio inputs +       ║
   ║  Start() onclick/AJAX and the #NewDependentsbutton dxButton   ║
   ║  are preserved; this only restyles. Header chrome reuses the  ║
   ║  shared cn-back / cn-providers-titlebar / cn-title /           ║
   ║  cn-subtitle primitives. ╚══════════════════════════════════ */

/* instruction hint banner */
#main-content.cn-page-mydependents .cn-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 6px;
    padding: 11px 14px;
    border-radius: var(--cn-radius);
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100, #D6E4F2);
    color: var(--cn-navy-2, #0A4778);
    font-family: var(--cn-font);
    font-size: 13.5px;
    font-weight: 500;
}
    #main-content.cn-page-mydependents .cn-hint svg {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        margin-top: 1px;
        color: var(--cn-navy);
    }

/* Add New Dependents dxButton — keep the + icon and label inline (the shared
   #NewProviderbutton rules are id-specific, so mirror them for this button). */
#main-content.cn-page-mydependents .cn-providers-titlebar__action #NewDependentsbutton {
    display: inline-block;
}
    #main-content.cn-page-mydependents .cn-providers-titlebar__action #NewDependentsbutton .dx-button {
        height: 42px !important;
        min-width: 168px !important;
        padding: 0 !important;
        border-radius: var(--cn-radius) !important;
    }
    #main-content.cn-page-mydependents .cn-providers-titlebar__action #NewDependentsbutton .dx-button-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 20px !important;
        height: 100% !important;
        line-height: 1 !important;
    }
    #main-content.cn-page-mydependents .cn-providers-titlebar__action #NewDependentsbutton .dx-button-text {
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    #main-content.cn-page-mydependents .cn-providers-titlebar__action #NewDependentsbutton .dx-icon {
        margin: 0 !important;
    }

/* ===== dependents grid ===== */
#main-content.cn-page-mydependents .cn-deps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
/* card wrapper holds the (visually hidden) radio + the label card */
#main-content.cn-page-mydependents .cn-dep-item {
    position: relative;
}
    #main-content.cn-page-mydependents .cn-dep-item input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
        margin: 0;
    }
/* the label IS the clickable card */
#main-content.cn-page-mydependents .cn-dep {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    text-align: left;
    padding: 16px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    cursor: pointer;
    font-family: var(--cn-font);
    transition: border-color .14s, box-shadow .14s, transform .12s;
}
    #main-content.cn-page-mydependents .cn-dep:hover {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-shadow-md);
        transform: translateY(-1px);
    }
    #main-content.cn-page-mydependents .cn-dep-item input[type="radio"]:focus-visible + .cn-dep {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }
    #main-content.cn-page-mydependents .cn-dep:active {
        transform: translateY(0);
    }
#main-content.cn-page-mydependents .cn-dep__avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--cn-navy);
}
    #main-content.cn-page-mydependents .cn-dep__avatar.is-gold { background: var(--cn-gold); }
    #main-content.cn-page-mydependents .cn-dep__avatar.is-mint { background: var(--cn-mint, #0E7C66); }
    #main-content.cn-page-mydependents .cn-dep__avatar.is-slate { background: var(--cn-slate, #5B6B7B); }
#main-content.cn-page-mydependents .cn-dep__text {
    flex: 1;
    min-width: 0;
}
#main-content.cn-page-mydependents .cn-dep__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main-content.cn-page-mydependents .cn-dep__chev {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--cn-text-3);
    transition: color .14s, transform .14s;
}
    #main-content.cn-page-mydependents .cn-dep:hover .cn-dep__chev {
        color: var(--cn-navy);
        transform: translateX(2px);
    }

/* ===== responsive — mobile-first (most customers are mobile) ===== */
@media (max-width: 640px) {
    #main-content.cn-page-mydependents .cn-deps {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    #main-content.cn-page-mydependents .cn-dep {
        padding: 14px;
    }
    /* full-width Add button tap target */
    #main-content.cn-page-mydependents .cn-providers-titlebar__action,
    #main-content.cn-page-mydependents .cn-providers-titlebar__action #NewDependentsbutton,
    #main-content.cn-page-mydependents .cn-providers-titlebar__action .dx-button {
        display: block;
        width: 100%;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MY DEPENDENTS — CREATE (patient/MyDependents/Create)         ║
   ║  Reskin only — matches C:\mockups\mydependentscreate-v2.html. ║
   ║  Scope #main-content.cn-page-mydependentscreate. The          ║
   ║  #dependents-form dxForm + its fields/validations/AJAX        ║
   ║  (relationship/practice/provider) and Save/Cancel are         ║
   ║  preserved. Header reuses cn-back / cn-title / cn-subtitle /   ║
   ║  cn-form-card; the .dx-form editor polish + the shared        ║
   ║  #dependents-form box-item rule do the field styling.         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MY PROVIDERS (patient/MyDoctor/index)                         ║
   ║  Scope #main-content.cn-page-mydoctor. Presentation reskin —   ║
   ║  matches C:\mockups\mydoctor-v2.html. Providers stay per-      ║
   ║  provider dxDataGrids grouped by practice, each wrapped in the ║
   ║  shared .cn-grid-card (grid chrome REUSED — no new DX CSS).    ║
   ║  The masterDetail (Practice/Provider details) + the 3-dot     ║
   ║  "Request an appointment" context menu are UNCHANGED. Header   ║
   ║  reuses cn-back / cn-title / cn-subtitle; the provider name    ║
   ║  cell reuses the global cn-identity / cn-avatar. Only the      ║
   ║  practice group header + master-detail deflist live here.     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Practice group (replaces the legacy <h5> + <hr>). */
#main-content.cn-page-mydoctor .cn-group {
    margin-bottom: 24px;
}

#main-content.cn-page-mydoctor .cn-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

#main-content.cn-page-mydoctor .cn-group__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    color: var(--cn-navy);
    border: 1px solid rgba(12, 84, 148, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-mydoctor .cn-group__icon svg {
        width: 20px;
        height: 20px;
    }

#main-content.cn-page-mydoctor .cn-group__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
}

/* Each provider grid is wrapped in .cn-grid-card (chrome reused). Cards size
   to their own content so only an EXPANDED card grows (siblings stay short —
   no forced equal height). The provider grid has no column headers — trim the
   empty header strip. */
#main-content.cn-page-mydoctor .cn-provider-card .dx-datagrid-headers {
    display: none;
}

/* 3-dot "More actions" trigger — navy, centered in its cell. */
#main-content.cn-page-mydoctor .cn-provider-card .fa-ellipsis-v {
    cursor: pointer;
    text-align: center;
}

/* master-detail — Practice / Provider details panel. */
#main-content.cn-page-mydoctor #visitsymptom h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cn-navy);
    margin: 0 0 8px;
}

#main-content.cn-page-mydoctor #visitsymptom hr {
    border: 0;
    border-top: 1px solid var(--cn-border);
    margin: 14px 0;
}

#main-content.cn-page-mydoctor #visitsymptom .definition-sm {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
}

#main-content.cn-page-mydoctor #visitsymptom .definition-sm dt {
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    align-self: start;
}

#main-content.cn-page-mydoctor #visitsymptom .definition-sm dd {
    margin: 0;
    font-size: 13px;
    color: var(--cn-text);
    align-self: start;
    word-break: break-word;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MY HEALTH PROFILE  +  PATIENT VISIT SUMMARY                   ║
   ║  patient/MyHealthProfile/index  &  patient/appointments/       ║
   ║  patientvisitsummery/<id> — SHARED via                         ║
   ║  #main-content:is(.cn-page-myhealthprofile,                    ║
   ║  .cn-page-patientvisitsummery). Same design family (identity   ║
   ║  strip + vitals tiles + labelled sections). Presentation       ║
   ║  reskin — matches myhealthprofile-v2.html / patientvisitsummery║
   ║  -v2.html. 100% server-rendered; SAME model fields/values.     ║
   ║  Header reuses cn-back / cn-title / cn-subtitle; chips reuse    ║
   ║  the GLOBAL .cn-chip (+ --danger allergies / --warn            ║
   ║  conditions); MRN badge reuses .cn-mrn. Visit-summary-only     ║
   ║  bits (cn-reason / cn-prose / cn-text / __sub svg) are in the  ║
   ║  next block, scoped to .cn-page-patientvisitsummery.          ║
   ╚══════════════════════════════════════════════════════════════╝ */

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
}

/* Identity strip */
#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: linear-gradient(180deg, var(--cn-navy-50), transparent);
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record__avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    background: var(--cn-navy);
    color: #fff;
    letter-spacing: .5px;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record__idmeta {
    min-width: 0;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--cn-text);
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record__sub {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--cn-text-2);
}

    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record__sub .cn-dot {
        color: var(--cn-text-3);
    }

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-record__body {
    padding: 20px;
}

/* Vitals stat grid (one tile per existing vital) */
#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vitals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 560px) {
    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vitals {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 860px) {
    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vitals {
        grid-template-columns: repeat(4, 1fr);
    }
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vital {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vital__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vital__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vital__icon svg {
        width: 16px;
        height: 16px;
    }

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vital__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cn-text-3);
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vital__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-vital__value small {
        font-size: 12px;
        font-weight: 600;
        color: var(--cn-text-3);
    }

/* Sections */
#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-hsection {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--cn-border);
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-hsection__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-hsection__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-hsection__icon svg {
        width: 16px;
        height: 16px;
    }

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-hsection__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cn-text);
}

/* Symptom groups */
#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-symgroup {
    margin-bottom: 10px;
}

    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-symgroup:last-child {
        margin-bottom: 0;
    }

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-symgroup__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cn-text-3);
    margin: 0 0 6px;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Medication — Symptoms & Medication now reuse the shared grouped-chip /
   card-list families (`.cn-symptom-*` / `.cn-medication-*`) from the encounter
   block, extended to these pages via :is(). No page-specific med row CSS. */

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-muted {
    font-size: 13px;
    color: var(--cn-text-3);
}

/* Empty state ("No prior health record exists") */
#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-empty {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 48px 24px;
    text-align: center;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

    #main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-empty__icon svg {
        width: 26px;
        height: 26px;
    }

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-empty__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    margin: 0 0 4px;
}

#main-content:is(.cn-page-myhealthprofile, .cn-page-patientvisitsummery) .cn-empty__text {
    font-size: 13px;
    color: var(--cn-text-2);
    margin: 0;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MY APPOINTMENTS (patient/Appointments/Index)                 ║
   ║  Scope #main-content.cn-page-appointments. Presentation        ║
   ║  reskin — matches C:\mockups\patientappointments-v2.html. 100% ║
   ║  server-rendered; SAME two lists (upcoming/past), fields,      ║
   ║  actions + videos()/inviteguest()/Cancel()/profile() JS. Each  ║
   ║  visit → a .cn-visit card (navy rail; --past slate rail).      ║
   ║  Header reuses cn-back / cn-title / cn-subtitle. Chips/pills/   ║
   ║  buttons are page-scoped here (mockup look; do NOT collide     ║
   ║  with the global .cn-chip/.cn-pill primitives).                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Section spacing (labels intentionally omitted). */
#main-content.cn-page-appointments .cn-sec {
    margin-bottom: 26px;
}

/* Visit list + card */
#main-content.cn-page-appointments .cn-visits {
    display: grid;
    gap: 14px;
}

#main-content.cn-page-appointments .cn-visit {
    position: relative;
    overflow: hidden;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    transition: box-shadow 160ms ease, border-color 140ms ease;
}

    #main-content.cn-page-appointments .cn-visit:hover {
        box-shadow: var(--cn-shadow-md);
        border-color: var(--cn-border-2);
    }

    #main-content.cn-page-appointments .cn-visit::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--cn-navy), var(--cn-navy-2));
    }

    #main-content.cn-page-appointments .cn-visit--past::before {
        background: var(--cn-border-2);
    }

#main-content.cn-page-appointments .cn-visit__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 10px;
    flex-wrap: wrap;
}

#main-content.cn-page-appointments .cn-visit__idwrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

#main-content.cn-page-appointments .cn-visit__avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(12, 84, 148, .14);
}

    #main-content.cn-page-appointments .cn-visit--past .cn-visit__avatar {
        background: var(--cn-muted-bg);
        color: var(--cn-text-2);
        border-color: var(--cn-border);
    }

#main-content.cn-page-appointments .cn-visit__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1.3;
}

#main-content.cn-page-appointments .cn-visit__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-navy);
    text-decoration: none;
    margin-top: 2px;
}

    #main-content.cn-page-appointments .cn-visit__link:hover {
        text-decoration: underline;
    }

    #main-content.cn-page-appointments .cn-visit__link svg {
        width: 13px;
        height: 13px;
    }

#main-content.cn-page-appointments .cn-visit__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

/* Visit-type chip + status pill (page-scoped — mockup look) */
#main-content.cn-page-appointments .cn-vchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

    #main-content.cn-page-appointments .cn-vchip svg {
        width: 12px;
        height: 12px;
    }

    #main-content.cn-page-appointments .cn-vchip--tele {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
    }

    #main-content.cn-page-appointments .cn-vchip--inperson {
        background: var(--cn-muted-bg);
        color: var(--cn-text-2);
    }

#main-content.cn-page-appointments .cn-vpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

    #main-content.cn-page-appointments .cn-vpill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        opacity: .9;
    }

    #main-content.cn-page-appointments .cn-vpill--ok {
        background: var(--cn-success-bg);
        color: var(--cn-success);
    }

    #main-content.cn-page-appointments .cn-vpill--cancelled {
        background: var(--cn-muted-bg);
        color: var(--cn-text-2);
    }

        #main-content.cn-page-appointments .cn-vpill--cancelled del {
            text-decoration: line-through;
        }

/* Body deflist */
#main-content.cn-page-appointments .cn-visit__body {
    padding: 6px 18px 4px;
}

#main-content.cn-page-appointments .cn-visit__body .definition-sm {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 14px;
    margin: 0;
}

#main-content.cn-page-appointments .cn-visit__body .definition-sm dt {
    font-size: 11px;
    font-weight: 700;
    color: var(--cn-text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    align-self: start;
}

#main-content.cn-page-appointments .cn-visit__body .definition-sm dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--cn-text);
    align-self: start;
}

    #main-content.cn-page-appointments .cn-visit__body .definition-sm dd.cn-mono {
        font-family: var(--cn-font-mono);
        font-size: 12.5px;
    }

/* strike-through cancelled status inside the deflist (production uses <del>) */
#main-content.cn-page-appointments .cn-visit__body .definition-sm dd del {
    color: var(--cn-text-2);
    text-decoration: line-through;
}

/* the address is a second definition-sm — add a dashed divider above it */
#main-content.cn-page-appointments .cn-visit__body .definition-sm + .definition-sm {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--cn-border);
}

/* Actions foot */
#main-content.cn-page-appointments .cn-visit__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px 16px;
}

#main-content.cn-page-appointments .cn-btn-primary,
#main-content.cn-page-appointments .cn-btn-outline,
#main-content.cn-page-appointments .cn-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--cn-radius);
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    #main-content.cn-page-appointments .cn-btn-primary svg,
    #main-content.cn-page-appointments .cn-btn-outline svg,
    #main-content.cn-page-appointments .cn-btn-ghost svg {
        width: 15px;
        height: 15px;
    }

#main-content.cn-page-appointments .cn-btn-primary {
    background: var(--cn-navy);
    color: #fff;
    border: 1px solid var(--cn-navy);
    box-shadow: var(--cn-shadow-sm);
}

    #main-content.cn-page-appointments .cn-btn-primary:hover {
        background: var(--cn-navy-2);
        color: #fff;
    }

#main-content.cn-page-appointments .cn-btn-outline {
    background: var(--cn-elev);
    color: var(--cn-navy);
    border: 1px solid var(--cn-border-2);
}

    #main-content.cn-page-appointments .cn-btn-outline:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy);
    }

#main-content.cn-page-appointments .cn-btn-ghost {
    background: transparent;
    color: var(--cn-text-2);
    border: 1px solid var(--cn-border-2);
}

    #main-content.cn-page-appointments .cn-btn-ghost:hover {
        background: #FCEDED;
        color: var(--cn-danger);
        border-color: #F3C9C9;
    }

/* Mobile — action buttons stack full-width */
@media (max-width: 520px) {
    #main-content.cn-page-appointments .cn-visit__foot {
        flex-direction: column;
        align-items: stretch;
    }

        #main-content.cn-page-appointments .cn-visit__foot .cn-btn-primary,
        #main-content.cn-page-appointments .cn-visit__foot .cn-btn-outline,
        #main-content.cn-page-appointments .cn-visit__foot .cn-btn-ghost {
            width: 100%;
        }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  PATIENT VISIT SUMMARY — page-only extras                     ║
   ║  patient/appointments/patientvisitsummery/<id>. Reuses the    ║
   ║  shared record/vitals/section family above (:is with          ║
   ║  cn-page-myhealthprofile). These are the bits unique to the   ║
   ║  visit summary: the visit-reason line, the raw-HTML prose     ║
   ║  blocks (Symptoms / Patient Instructions keep @Html.Raw), a   ║
   ║  plain text line (Medication), and the reason icon in the     ║
   ║  identity sub. Presentation only. Scoped to the page.         ║
   ╚══════════════════════════════════════════════════════════════╝ */

#main-content.cn-page-patientvisitsummery .cn-record__sub svg {
    width: 14px;
    height: 14px;
    color: var(--cn-navy);
}

#main-content.cn-page-patientvisitsummery .cn-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--cn-text);
}

#main-content.cn-page-patientvisitsummery .cn-reason__days {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    font-size: 11.5px;
    font-weight: 700;
}

#main-content.cn-page-patientvisitsummery .cn-prose {
    font-size: 13.5px;
    color: var(--cn-text);
    line-height: 1.6;
}

    #main-content.cn-page-patientvisitsummery .cn-prose p {
        margin: 0 0 8px;
    }

    #main-content.cn-page-patientvisitsummery .cn-prose ul,
    #main-content.cn-page-patientvisitsummery .cn-prose ol {
        margin: 0 0 8px;
        padding-left: 20px;
    }

    #main-content.cn-page-patientvisitsummery .cn-prose li {
        margin: 2px 0;
    }

    #main-content.cn-page-patientvisitsummery .cn-prose > :last-child {
        margin-bottom: 0;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  SIGN PACKAGE / SIGN DOCUMENT — page-only polish              ║
   ║  patient/signdocument/index/<id>. Pixel-faithful reskin of    ║
   ║  Index.cshtml to C:\mockups\signdocument-v2.html — same       ║
   ║  workflow, same #treeview dxMenu (data/click/loading), same   ║
   ║  checkbox / Agree / download actions & IDs. Reuses the shared ║
   ║  cn-back / cn-title / cn-subtitle / cn-title-row / cn-area     ║
   ║  primitives; the bits below are unique to this page:          ║
   ║  numbered steps card, patient/sign-on meta strip, the         ║
   ║  document-list + viewer two-column grid (doc list left /      ║
   ║  viewer right, stacks < 900px), the dxMenu rendered as a      ║
   ║  vertical document selector with status pills + navy active   ║
   ║  row, and the viewer's head / pdf / agree / signed rows.      ║
   ║  Also carries the class hooks the page JS toggles: .hidden    ║
   ║  (show/hide #document-details), .redcolor (#bname required     ║
   ║  hint) and .is-active (active dxMenu row). Scoped to page.    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* JS hooks preserved from the old inline block */
#main-content.cn-page-signdocument .hidden {
    visibility: hidden;
}

#main-content.cn-page-signdocument .redcolor {
    color: var(--cn-danger);
}

/* ---- Steps to complete (was .instruction-panel) ---- */
#main-content.cn-page-signdocument .cn-steps {
    display: flex;
    gap: 12px;
    background: linear-gradient(135deg, var(--cn-navy-50), #F4F8FD);
    border: 1px solid var(--cn-navy-100);
    border-left: 4px solid var(--cn-navy);
    border-radius: var(--cn-radius-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
}

#main-content.cn-page-signdocument .cn-steps__icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--cn-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-signdocument .cn-steps__icon svg {
        width: 17px;
        height: 17px;
    }

#main-content.cn-page-signdocument .cn-steps__body {
    min-width: 0;
}

#main-content.cn-page-signdocument .cn-steps__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--cn-navy);
    margin: 0 0 6px;
}

#main-content.cn-page-signdocument .cn-steps__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: 5px;
}

    #main-content.cn-page-signdocument .cn-steps__list li {
        position: relative;
        padding-left: 26px;
        font-size: 13px;
        color: var(--cn-text-2);
        line-height: 1.45;
        counter-increment: step;
    }

        #main-content.cn-page-signdocument .cn-steps__list li::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: 1px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--cn-elev);
            border: 1px solid var(--cn-navy-100);
            color: var(--cn-navy);
            font-size: 10.5px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

/* ---- Meta strip: patient + sign-on (was .info-bar) ---- */
#main-content.cn-page-signdocument .cn-metabar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    padding: 12px 16px;
    margin-bottom: 18px;
    box-shadow: var(--cn-shadow-sm);
}

#main-content.cn-page-signdocument .cn-metabar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cn-text);
}

    #main-content.cn-page-signdocument .cn-metabar__item svg {
        width: 15px;
        height: 15px;
        color: var(--cn-navy);
        flex: 0 0 15px;
    }

#main-content.cn-page-signdocument .cn-metabar__label {
    color: var(--cn-text-3);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- Two-column layout: doc list (left) + viewer (right) ---- */
#main-content.cn-page-signdocument .cn-sign-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 992px) {
    #main-content.cn-page-signdocument .cn-sign-grid {
        grid-template-columns: 300px minmax(0, 1fr);
        align-items: start;
    }
}

/* ---- Document selector card (wraps the #treeview dxMenu) ---- */
#main-content.cn-page-signdocument .cn-doclist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    padding: 10px;
    /* let the card shrink to the grid track so the menu's overflow-x
       scrolls inside it instead of pushing the page wider than the phone */
    min-width: 0;
}

#main-content.cn-page-signdocument .cn-doclist__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cn-text-3);
    padding: 4px 6px 6px;
}

/* neutralise the old inset-gray box — dxMenu now sits in the clean card */
#main-content.cn-page-signdocument .left-content,
#main-content.cn-page-signdocument #treeview {
    margin: 0;
    width: 100%;
    min-width: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
}

/* dxMenu layout follows its orientation option (set from the page JS by
   viewport width) — #treeview also carries sd-menu--vertical / --horizontal
   so the layout is deterministic across DevExpress versions. Common bits: */
#main-content.cn-page-signdocument #treeview .dx-menu-items-container {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-content.cn-page-signdocument #treeview .dx-menu-item-wrapper {
    padding: 0 !important;
}

/* each dxMenu leaf = a document row (the mockup's .cn-doc) */
#main-content.cn-page-signdocument #treeview .dx-menu-item {
    background: var(--cn-elev) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    padding: 0 !important;
    transition: background 120ms ease, border-color 120ms ease;
}

/* Vertical (desktop >= 992px): full-width stacked rows */
#main-content.cn-page-signdocument #treeview.sd-menu--vertical .dx-menu-items-container {
    flex-direction: column !important;
    width: 100% !important;
}

#main-content.cn-page-signdocument #treeview.sd-menu--vertical .dx-menu-item-wrapper,
#main-content.cn-page-signdocument #treeview.sd-menu--vertical .dx-menu-item {
    display: block !important;
    width: 100% !important;
}

/* Horizontal (mobile < 992px): single-row scroller, no wrap */
#main-content.cn-page-signdocument #treeview.sd-menu--horizontal .dx-menu-items-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

#main-content.cn-page-signdocument #treeview.sd-menu--horizontal .dx-menu-item-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
}

#main-content.cn-page-signdocument #treeview.sd-menu--horizontal .dx-menu-item {
    width: auto !important;
}

#main-content.cn-page-signdocument #treeview.sd-menu--horizontal .custom-menu-item {
    flex-wrap: nowrap;
    white-space: nowrap;
}

#main-content.cn-page-signdocument #treeview.sd-menu--horizontal .cn-doc__text {
    flex: 0 0 auto;
}

#main-content.cn-page-signdocument #treeview.sd-menu--horizontal .cn-doc__name {
    overflow: visible;
    text-overflow: clip;
}

    #main-content.cn-page-signdocument #treeview .dx-menu-item.dx-state-hover,
    #main-content.cn-page-signdocument #treeview .dx-menu-item:hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy-100) !important;
    }

#main-content.cn-page-signdocument #treeview .dx-menu-item-content {
    padding: 0 !important;
}

#main-content.cn-page-signdocument .custom-menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
}

#main-content.cn-page-signdocument .cn-doc__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-signdocument .cn-doc__icon svg {
        width: 15px;
        height: 15px;
    }

#main-content.cn-page-signdocument .cn-doc__text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#main-content.cn-page-signdocument .cn-doc__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--cn-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main-content.cn-page-signdocument .cn-doc__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

    #main-content.cn-page-signdocument .cn-doc__status svg {
        width: 11px;
        height: 11px;
    }

#main-content.cn-page-signdocument .cn-doc__status--signed {
    color: var(--cn-success);
}

#main-content.cn-page-signdocument .cn-doc__status--pending {
    color: var(--cn-warn);
}

/* active row — JS toggles .is-active (was an inline background-color) */
#main-content.cn-page-signdocument #treeview .dx-menu-item.is-active,
#main-content.cn-page-signdocument #treeview .dx-menu-item.is-active.dx-state-hover,
#main-content.cn-page-signdocument #treeview .dx-menu-item.is-active:hover {
    background: var(--cn-navy) !important;
    border-color: var(--cn-navy) !important;
}

    #main-content.cn-page-signdocument #treeview .dx-menu-item.is-active .cn-doc__name {
        color: #fff;
    }

    #main-content.cn-page-signdocument #treeview .dx-menu-item.is-active .cn-doc__icon {
        background: rgba(255, 255, 255, .18);
        color: #fff;
    }

    #main-content.cn-page-signdocument #treeview .dx-menu-item.is-active .cn-doc__status--pending {
        color: #FCE7B5;
    }

    #main-content.cn-page-signdocument #treeview .dx-menu-item.is-active .cn-doc__status--signed {
        color: #B7F0D8;
    }

/* ---- Viewer card (#document-details) ---- */
#main-content.cn-page-signdocument .cn-viewer {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    min-width: 0;
}

#main-content.cn-page-signdocument .cn-viewer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cn-border);
}

#main-content.cn-page-signdocument .cn-viewer__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cn-navy);
    min-width: 0;
}

    #main-content.cn-page-signdocument .cn-viewer__name svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

    #main-content.cn-page-signdocument .cn-viewer__name #viewerDocName {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

#main-content.cn-page-signdocument .cn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-navy);
    text-decoration: none;
    white-space: nowrap;
}

    #main-content.cn-page-signdocument .cn-download:hover {
        text-decoration: underline;
    }

    #main-content.cn-page-signdocument .cn-download svg {
        width: 14px;
        height: 14px;
    }

/* PDF preview (#viewpdf iframe) — mockup .cn-pdf spacing */
#main-content.cn-page-signdocument .cn-viewer .content {
    padding: 16px;
}

#main-content.cn-page-signdocument .css_viewpdf {
    height: 520px;
    width: 100%;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius);
    background: var(--cn-muted-bg);
    display: block;
}

@media (max-width: 640px) {
    #main-content.cn-page-signdocument .css_viewpdf {
        height: 400px;
    }
}

/* ---- Agree / signed rows (#diviagree, #signedpackagedetail) ----
   NB: the page JS toggles these via inline style.display = "block",
   which beats a flex container — so centre with text-align + auto
   margins rather than flex, so it holds when JS shows the row. */
#main-content.cn-page-signdocument .cn-agree {
    border-top: 1px solid var(--cn-border);
    padding: 16px;
    text-align: center;
}

#main-content.cn-page-signdocument .cn-agree__check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
}

    #main-content.cn-page-signdocument .cn-agree__check input {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        margin: 0;
        accent-color: var(--cn-navy);
        cursor: pointer;
    }

#main-content.cn-page-signdocument .cn-agree__label {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cn-text);
    cursor: pointer;
}

/* SignedOn text rendered into #signdate by the page JS — green pill.
   !important beats the inline color:black the JS writes on the <p>. */
#main-content.cn-page-signdocument #signdate p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-success) !important;
    background: var(--cn-success-bg);
    border: 1px solid rgba(4, 120, 87, .2);
    border-radius: 999px;
    padding: 6px 14px;
}

    #main-content.cn-page-signdocument #signdate p::before {
        content: "";
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        background: currentColor;
        -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    }

/* ---- Agree button (#btniagree) — reuses the shared .cn-btn/.cn-btn--primary
   primitive; this page only adds a min-width, a greyed disabled state (the
   primitive has none) and full-width on phones. Centres via the parent's
   text-align:center (the button is inline-flex). ---- */
#main-content.cn-page-signdocument #btniagree {
    min-width: 180px;
}

    #main-content.cn-page-signdocument #btniagree:disabled {
        background: var(--cn-border-2);
        border-color: var(--cn-border-2);
        color: #fff;
        cursor: not-allowed;
    }

@media (max-width: 640px) {
    #main-content.cn-page-signdocument #btniagree {
        width: 100%;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  INSURANCE INFORMATION — page-only polish                     ║
   ║  patient/insuranceinformation/index. Presentation reskin of   ║
   ║  Index.cshtml (matches C:\mockups\insuranceinformation-v2).   ║
   ║  Same dx widgets (#InsuranceCompany / #PolicyNumber /         ║
   ║  #GroupNumber / #FirstName / #LastName / #date), same         ║
   ║  Edit/Cancel/Delete (#Add/#cancel/#Delete) + Save             ║
   ║  (#default-contained-continueinsurance), same hidden inputs   ║
   ║  and JS. Reuses shared cn-back / cn-title / cn-subtitle /     ║
   ║  cn-area / .cn-btn(.--primary/.--ghost/.--danger-ghost). The  ║
   ║  bits below are unique to this page: the card + header +      ║
   ║  action row, the labelled field grid, the error line and the ║
   ║  full-width Save row. Also re-homes the two rules that used   ║
   ║  to live in the page's inline <style>: .margin_top_policy_    ║
   ║  number and the dx popup-title hide. Scoped to the page.      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Match the Edit Profile page width — cap the Bootstrap container at 760px
   (same value as the shared PROFILE PAGES scope) so this page occupies the
   same horizontal space and alignment. Bootstrap's auto side-margins keep it
   centred; the gutter/side padding is Bootstrap's own, same as Edit Profile. */
#main-content.cn-page-insuranceinformation .container {
    max-width: 760px;
}

/* Card */
#main-content.cn-page-insuranceinformation .cn-ins-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

/* Card header — icon + title + actions */
#main-content.cn-page-insuranceinformation .cn-ins-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: linear-gradient(180deg, var(--cn-navy-50), transparent);
}

#main-content.cn-page-insuranceinformation .cn-ins-card__ico {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: var(--cn-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-insuranceinformation .cn-ins-card__ico svg {
        width: 20px;
        height: 20px;
    }

#main-content.cn-page-insuranceinformation .cn-ins-card__htext {
    min-width: 0;
    flex: 1 1 auto;
}

#main-content.cn-page-insuranceinformation .cn-ins-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
}

/* Action row (Edit / Cancel / Delete keep their #Add/#cancel/#Delete wrappers) */
#main-content.cn-page-insuranceinformation .cn-ins-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

    /* the JS toggles wrapper display none/block — keep them inline in the row */
    #main-content.cn-page-insuranceinformation .cn-ins-actions > div {
        display: inline-flex;
    }

/* Card body — matches .cn-profile-card__body padding on Edit Profile */
#main-content.cn-page-insuranceinformation .cn-ins-card__body {
    padding: 20px 20px 12px;
}

/* Error line (@Model.ErrorMessage) — hidden when empty */
#main-content.cn-page-insuranceinformation .cn-ins-error {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cn-danger-bg);
    border: 1px solid rgba(220, 38, 38, .2);
    color: var(--cn-danger);
    border-radius: var(--cn-radius);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
}

    #main-content.cn-page-insuranceinformation .cn-ins-error:empty {
        display: none;
    }

/* Field grid — two-up on desktop, single column on phones */
#main-content.cn-page-insuranceinformation .cn-ins-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    align-items: start;
}

@media (max-width: 640px) {
    #main-content.cn-page-insuranceinformation .cn-ins-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Mobile card padding — mirrors the Edit Profile card (≤540px tightens to 16px) */
@media (max-width: 540px) {
    #main-content.cn-page-insuranceinformation .cn-ins-card__head {
        padding: 16px;
    }

    #main-content.cn-page-insuranceinformation .cn-ins-card__body {
        padding: 16px 16px 8px;
    }
}

#main-content.cn-page-insuranceinformation .cn-ins-field {
    min-width: 0;
}

#main-content.cn-page-insuranceinformation .cn-ins-field__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cn-text-3);
    margin: 0 0 6px;
}

/* the DevExpress editors (underlined) sit full-width under each label */
#main-content.cn-page-insuranceinformation .cn-ins-field .dx-texteditor,
#main-content.cn-page-insuranceinformation .cn-ins-field .dx-selectbox {
    width: 100%;
}

/* the old top-margin nudge on the Policy Number label (kept for parity) */
@media only screen and (max-width: 768px) {
    #main-content.cn-page-insuranceinformation .margin_top_policy_number {
        margin-top: 24px;
    }
}

/* Save row — full-width primary (the dxButton sets width:100%) */
#main-content.cn-page-insuranceinformation .cn-ins-save {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cn-border);
}
/* NB: the dx popup-title hide stays as a tiny page-level inline <style> in
   Index.cshtml — that popup renders appended to <body>, outside #main-content,
   so it can't be scoped here. */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PAYMENT METHOD — page-only polish                            ║
   ║  patient/paymentmethod/index. Presentation reskin of          ║
   ║  Index.cshtml (matches C:\mockups\paymentmethod-v2.html).     ║
   ║  Same dx/Stripe widgets + IDs (#Practicelist, #card-element,  ║
   ║  #cardholdername/#cardholdernames/#oldcard, #card-errors,     ║
   ║  #EditPayment/#cancelPayment, #default-contained-continue-    ║
   ║  payment/#SubmitOldcard) and the Stripe token flow — all      ║
   ║  unchanged. Reuses shared cn-back / cn-title / cn-subtitle /   ║
   ║  cn-area / .cn-btn(.--primary/.--ghost). Kept class hooks:    ║
   ║  .StripeElement* (Stripe.js applies these to #card-element)   ║
   ║  and .paymentcharge_input — restyled below. Scoped to page.   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Match the patient page width family (760px, centred) */
#main-content.cn-page-paymentmethod .container {
    max-width: 760px;
}

/* Card */
#main-content.cn-page-paymentmethod .cn-pay-card {
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

/* Card header — icon + title + actions */
#main-content.cn-page-paymentmethod .cn-pay-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: linear-gradient(180deg, var(--cn-navy-50), transparent);
}

#main-content.cn-page-paymentmethod .cn-pay-card__ico {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: var(--cn-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #main-content.cn-page-paymentmethod .cn-pay-card__ico svg {
        width: 20px;
        height: 20px;
    }

#main-content.cn-page-paymentmethod .cn-pay-card__htext {
    min-width: 0;
    flex: 1 1 auto;
}

#main-content.cn-page-paymentmethod .cn-pay-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
}

/* Action row (Edit / Cancel keep their #EditPayment/#cancelPayment wrappers) */
#main-content.cn-page-paymentmethod .cn-pay-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

    #main-content.cn-page-paymentmethod .cn-pay-actions > div {
        display: inline-flex;
    }

/* Body + fields */
#main-content.cn-page-paymentmethod .cn-pay-card__body {
    padding: 20px 20px 22px;
}

#main-content.cn-page-paymentmethod .cn-field {
    margin-bottom: 18px;
}

    #main-content.cn-page-paymentmethod .cn-field:last-child {
        margin-bottom: 0;
    }

#main-content.cn-page-paymentmethod .cn-field__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cn-text-3);
    margin: 0 0 6px;
}

/* Text inputs — restyle the kept .paymentcharge_input to the design system */
#main-content.cn-page-paymentmethod .paymentcharge_input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--cn-text);
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    #main-content.cn-page-paymentmethod .paymentcharge_input::placeholder {
        color: var(--cn-text-3);
    }

    #main-content.cn-page-paymentmethod .paymentcharge_input:focus {
        outline: 0;
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }

    #main-content.cn-page-paymentmethod .paymentcharge_input[readonly] {
        background: var(--cn-muted-bg);
        color: var(--cn-text);
    }

/* Stripe card element — Stripe.js mounts an iframe here and adds
   .StripeElement / --focus / --invalid classes. Frame it like an input. */
#main-content.cn-page-paymentmethod #card-element {
    height: 44px;
    padding: 12px;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    #main-content.cn-page-paymentmethod #card-element.StripeElement--focus {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }

    #main-content.cn-page-paymentmethod #card-element.StripeElement--invalid {
        border-color: var(--cn-danger);
    }

/* Card error line (#card-errors — Stripe writes messages here) */
#main-content.cn-page-paymentmethod .cn-pay-error {
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-danger);
}

    #main-content.cn-page-paymentmethod .cn-pay-error:empty {
        margin: 0;
    }

/* Stripe / accepted-cards badge image — no longer stretched full width */
#main-content.cn-page-paymentmethod .cn-pay-badge {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    margin: 12px 0 0;
}

/* Save row — full-width primary (the dxButton sets width:100%) */
#main-content.cn-page-paymentmethod .cn-save {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cn-border);
}

/* Mobile card padding — mirrors the patient page family (≤540px) */
@media (max-width: 540px) {
    #main-content.cn-page-paymentmethod .cn-pay-card__head {
        padding: 16px;
    }

    #main-content.cn-page-paymentmethod .cn-pay-card__body {
        padding: 16px 16px 8px;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — DOCTOR / SELECT A PROVIDER                   ║
   ║  (patient/visitrequest/doctor → Practice.cshtml). Reskin only ║
   ║  — matches C:\mockups\visitrequestdoctor-v2.html. Layout uses  ║
   ║  the reference Bootstrap grid (.container + .row + col-md-4);  ║
   ║  this section adds ONLY visual polish (no width/grid CSS).     ║
   ║  Scope #main-content.cn-page-visitrequestdoctor. The           ║
   ║  #selectbox-provider dxSelectBox, the accordion (expandcollapse║
   ║  + #expand/#collapse/#list ids), the provider radios           ║
   ║  (onclick=selected(this)) and the Continue/Previous dxButtons  ║
   ║  are preserved.                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* title block */
#main-content.cn-page-visitrequestdoctor .cn-head {
    margin: 0 0 8px;
}
    #main-content.cn-page-visitrequestdoctor .cn-head .cn-title {
        margin: 0;
    }
    #main-content.cn-page-visitrequestdoctor .cn-head .cn-subtitle {
        margin: 6px 0 0;
        max-width: 56ch;
    }

/* provider search field label + editor */
#main-content.cn-page-visitrequestdoctor .cn-field .cn-field__label {
    display: block;
    float: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cn-text-2);
    margin: 0 0 7px;
}
#main-content.cn-page-visitrequestdoctor #selectbox-provider .dx-texteditor.dx-editor-outlined {
    border-radius: var(--cn-radius);
}

/* ===== practice accordion card (inside the reference col-md-4 column) ===== */
#main-content.cn-page-visitrequestdoctor .cn-practice {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
}
#main-content.cn-page-visitrequestdoctor .cn-practice__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 15px 16px;
    cursor: pointer;
    background: var(--cn-elev);
    transition: background .14s;
}
    #main-content.cn-page-visitrequestdoctor .cn-practice__head:hover {
        background: var(--cn-navy-50);
    }
#main-content.cn-page-visitrequestdoctor .cn-practice__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--cn-radius-lg);
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content.cn-page-visitrequestdoctor .cn-practice__icon svg {
        width: 20px;
        height: 20px;
    }
#main-content.cn-page-visitrequestdoctor .cn-practice__text {
    flex: 1;
    min-width: 0;
}
#main-content.cn-page-visitrequestdoctor .cn-practice__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
#main-content.cn-page-visitrequestdoctor .cn-practice__meta {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--cn-text-2);
}
/* chevron toggles — #expand (down, when collapsed) / #collapse (up, when open) */
#main-content.cn-page-visitrequestdoctor .cn-practice__chev {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--cn-text-3);
    cursor: pointer;
}
    #main-content.cn-page-visitrequestdoctor .cn-practice__chev svg {
        width: 22px;
        height: 22px;
        display: block;
    }
    #main-content.cn-page-visitrequestdoctor .cn-practice__chev--up {
        transform: rotate(180deg);
        color: var(--cn-navy);
    }
    #main-content.cn-page-visitrequestdoctor .cn-practice__head:hover .cn-practice__chev {
        color: var(--cn-navy);
    }
/* accordion body (default open — production toggles display inline).
   Long provider lists scroll inside the card (mirrors the reference's
   fixed-height scroll area) so the card height stays bounded. */
#main-content.cn-page-visitrequestdoctor .cn-practice__body {
    padding: 6px;
    border-top: 1px solid var(--cn-border);
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
    /* slim, on-brand scrollbar for the provider list */
    #main-content.cn-page-visitrequestdoctor .cn-practice__body {
        scrollbar-width: thin;
        scrollbar-color: var(--cn-border-2) transparent;
    }
    #main-content.cn-page-visitrequestdoctor .cn-practice__body::-webkit-scrollbar {
        width: 8px;
    }
    #main-content.cn-page-visitrequestdoctor .cn-practice__body::-webkit-scrollbar-thumb {
        background: var(--cn-border-2);
        border-radius: 999px;
        border: 2px solid var(--cn-elev);
    }
    #main-content.cn-page-visitrequestdoctor .cn-practice__body::-webkit-scrollbar-thumb:hover {
        background: var(--cn-text-3);
    }

/* ===== provider option rows (radio + label) ===== */
#main-content.cn-page-visitrequestdoctor .cn-provider-item {
    position: relative;
}
    #main-content.cn-page-visitrequestdoctor .cn-provider-item input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
        margin: 0;
    }
#main-content.cn-page-visitrequestdoctor .cn-provider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    text-align: left;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: var(--cn-radius);
    cursor: pointer;
    font-family: var(--cn-font);
    transition: background .14s, border-color .14s;
}
    #main-content.cn-page-visitrequestdoctor .cn-provider:hover {
        background: var(--cn-navy-50);
    }
#main-content.cn-page-visitrequestdoctor .cn-provider__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--cn-navy);
}
    #main-content.cn-page-visitrequestdoctor .cn-provider__avatar.is-gold { background: var(--cn-gold); }
    #main-content.cn-page-visitrequestdoctor .cn-provider__avatar.is-mint { background: var(--cn-mint, #0E7C66); }
    #main-content.cn-page-visitrequestdoctor .cn-provider__avatar.is-slate { background: var(--cn-slate, #5B6B7B); }
#main-content.cn-page-visitrequestdoctor .cn-provider__text {
    flex: 1;
    min-width: 0;
}
#main-content.cn-page-visitrequestdoctor .cn-provider__name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cn-text);
}
#main-content.cn-page-visitrequestdoctor .cn-provider__radio {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--cn-border-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .14s;
}
    #main-content.cn-page-visitrequestdoctor .cn-provider__radio::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--cn-navy);
        transform: scale(0);
        transition: transform .14s;
    }
/* selected state driven by the (visually hidden) radio */
#main-content.cn-page-visitrequestdoctor .cn-provider-item input[type="radio"]:checked + .cn-provider {
    background: var(--cn-navy-50);
    border-color: var(--cn-navy);
}
    #main-content.cn-page-visitrequestdoctor .cn-provider-item input[type="radio"]:checked + .cn-provider .cn-provider__radio {
        border-color: var(--cn-navy);
    }
    #main-content.cn-page-visitrequestdoctor .cn-provider-item input[type="radio"]:checked + .cn-provider .cn-provider__radio::after {
        transform: scale(1);
    }
#main-content.cn-page-visitrequestdoctor .cn-provider-item input[type="radio"]:focus-visible + .cn-provider {
    border-color: var(--cn-navy);
    box-shadow: var(--cn-focus-ring);
}

/* ===== footer nav — restyle the existing .appointments-steps buttons ===== */
#main-content.cn-page-visitrequestdoctor .appointments-steps .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
/* Shared wizard-footer button class (added via dxButton elementAttr on the
   Previous/Continue buttons of the visit-request steps — doctor, reason, …).
   Every dimension lives here, so Continue and Previous are identical in size,
   padding, radius, font and alignment — only the fill colour differs, keyed off
   the DevExpress type class (.dx-button-default vs .dx-button-normal). Scoped to
   the .cn-wizard-btn class (only present on opted-in buttons), so it is safe to
   share across pages. No inline height/width is set, so no !important is needed. */
#main-content .cn-wizard-btn.dx-button {
    height: 50px !important;
    min-width: 130px;
    width: auto;              /* override the base .btn-wrap .dx-button { width: 48% } */
    padding: 0;
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    box-shadow: none;
}
#main-content .cn-wizard-btn .dx-button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 22px;
    line-height: 1;
    top: 0;
}
#main-content .cn-wizard-btn .dx-button-text {
    font-size: 14px;
    font-weight: 600;
}
/* Continue (type="default") — primary navy fill */
#main-content .cn-wizard-btn.dx-button-default {
    background: var(--cn-navy);
    border-color: var(--cn-navy);
}
    #main-content .cn-wizard-btn.dx-button-default.dx-state-hover,
    #main-content .cn-wizard-btn.dx-button-default.dx-state-focused {
        background: var(--cn-navy-2);
        border-color: var(--cn-navy-2);
    }
    #main-content .cn-wizard-btn.dx-button-default .dx-button-text {
        color: #fff;
    }
/* Previous (type="normal") — outlined secondary */
#main-content .cn-wizard-btn.dx-button-normal {
    background: var(--cn-elev);
    border-color: var(--cn-border-2);
}
    #main-content .cn-wizard-btn.dx-button-normal.dx-state-hover,
    #main-content .cn-wizard-btn.dx-button-normal.dx-state-focused {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
    }
    #main-content .cn-wizard-btn.dx-button-normal .dx-button-text {
        color: var(--cn-text);
    }
    #main-content .cn-wizard-btn.dx-button-normal.dx-state-hover .dx-button-text {
        color: var(--cn-navy);
    }

/* mobile — full-width footer buttons */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestdoctor .appointments-steps .btn-wrap {
        justify-content: space-between;
        gap: 10px;
    }
    #main-content .cn-wizard-btn.dx-button {
        flex: 1;
        width: 100%;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — REASONS FOR VISITS                           ║
   ║  (patient/visitrequest/visitreason → reasonforvisit.cshtml).  ║
   ║  Reskin only — matches C:\mockups\visitrequestreason-v2.html. ║
   ║  Scope #main-content.cn-page-visitrequestreason. The reason    ║
   ║  radios (class Rb + onclick=selectedone) and the dxForm /      ║
   ║  dxSelectBox / dxNumberBox / dxHtmlEditor widgets are          ║
   ║  preserved; footer buttons reuse the shared .cn-wizard-btn.    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* provider context line ("Appointment with …") */
#main-content.cn-page-visitrequestreason .doctornamedisplay {
    color: var(--cn-text-2);
    font-weight: 600;
}

/* ===== top-reason selectable cards (radio + label; Bootstrap col-6 col-lg-4
   supplies the 2-up mobile / 3-up desktop grid) ===== */
#main-content.cn-page-visitrequestreason .cn-reason-item {
    position: relative;
}
    #main-content.cn-page-visitrequestreason .cn-reason-item input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
        margin: 0;
    }
#main-content.cn-page-visitrequestreason label.cn-reason {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 0;
    cursor: pointer;
    padding: 13px 14px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    transition: border-color .14s, box-shadow .14s, background .14s;
}
    #main-content.cn-page-visitrequestreason label.cn-reason::before {
        content: "";
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid var(--cn-border-2);
        box-sizing: border-box;
        transition: border-color .14s, background .14s;
    }
#main-content.cn-page-visitrequestreason .cn-reason__name {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cn-text);
}
    #main-content.cn-page-visitrequestreason label.cn-reason:hover {
        border-color: var(--cn-navy);
        background: var(--cn-navy-50);
    }
/* selected state driven by the (visually hidden) radio */
#main-content.cn-page-visitrequestreason .cn-reason-item input[type="radio"]:checked + label.cn-reason {
    border-color: var(--cn-navy);
    background: var(--cn-navy-50);
    box-shadow: var(--cn-focus-ring);
}
    #main-content.cn-page-visitrequestreason .cn-reason-item input[type="radio"]:checked + label.cn-reason::before {
        border-color: var(--cn-navy);
        background: radial-gradient(circle at center, var(--cn-navy) 0 5px, transparent 6px);
    }
#main-content.cn-page-visitrequestreason .cn-reason-item input[type="radio"]:focus-visible + label.cn-reason {
    border-color: var(--cn-navy);
    box-shadow: var(--cn-focus-ring);
}

/* ===== DevExpress form editors — align to the design-system radius + focus ===== */
#main-content.cn-page-visitrequestreason .dx-texteditor.dx-editor-outlined {
    border-radius: var(--cn-radius);
}
#main-content.cn-page-visitrequestreason .dx-texteditor.dx-editor-outlined.dx-state-focused {
    border-color: var(--cn-navy);
    box-shadow: var(--cn-focus-ring);
}
#main-content.cn-page-visitrequestreason .dx-htmleditor {
    border-radius: var(--cn-radius);
}

/* ===== footer nav — the shared wizard footer (step indicator, a display:table
   with up to 11 cells, + the Previous/Continue buttons). Center the row, let the
   steps take the free space, align the buttons right. The attribute selector
   covers every polished visit-request step (reason / form / symptoms / …) that
   wraps the shared footer partial — one rule set, no per-page duplication. ===== */
#main-content[class*="cn-page-visitrequest"] .appointments-steps > .container {
    align-items: center;
}
#main-content[class*="cn-page-visitrequest"] .appointments-steps .step-indicator {
    flex: 1 1 auto;
    min-width: 0;
}
#main-content[class*="cn-page-visitrequest"] .appointments-steps .btn-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
@media (max-width: 640px) {
    /* Stack the stepper above a full-width button row. The 11 steps can't fit a
       phone, so the indicator becomes a horizontal scroll strip (scrolls inside
       itself — the page never scrolls sideways). Switch the <ol> off display:table
       so it can overflow, and lay the <li> steps out inline with a min-width. */
    #main-content[class*="cn-page-visitrequest"] .appointments-steps > .container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    #main-content[class*="cn-page-visitrequest"] .appointments-steps .step-indicator {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    #main-content[class*="cn-page-visitrequest"] .appointments-steps .step-indicator li {
        display: inline-block;
        width: auto;
        min-width: 84px;
        vertical-align: top;
    }
    #main-content[class*="cn-page-visitrequest"] .appointments-steps .btn-wrap {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — SYMPTOMS (patient/visitrequest/symptoms)     ║
   ║  "Select all that apply." Reskin only — matches               ║
   ║  C:\mockups\visitrequestsymptoms-v2.html. Scope               ║
   ║  #main-content.cn-page-visitrequestsymptoms. The symptom-group ║
   ║  loop, placeholder div IDs, dxCheckBox widgets and the         ║
   ║  CreateVisitRequestToSymptoms submit are preserved.            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* symptom groups — 4-up desktop / 2-up tablet / 1-up mobile (mirrors col-md-6 col-lg-3) */
#main-content.cn-page-visitrequestsymptoms .cn-groups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
    align-items: start;
}
#main-content.cn-page-visitrequestsymptoms .cn-group {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    padding: 16px;
}
#main-content.cn-page-visitrequestsymptoms .cn-group__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
}
#main-content.cn-page-visitrequestsymptoms .cn-group__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* neutralize the per-symptom dxForm chrome so each checkbox is a clean row */
#main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-form,
#main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-layout-manager,
#main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-box {
    background: transparent !important;
}
#main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-field-item {
    padding: 0 !important;
}

/* checkbox row (mirrors the questionnaire card checkbox) */
#main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
    padding: 9px 11px !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: var(--cn-radius) !important;
    background: var(--cn-elev) !important;
    cursor: pointer !important;
    min-height: 42px;
    margin: 0 !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}
    #main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-checkbox.dx-state-hover {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy-100) !important;
    }
    #main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-checkbox.dx-checkbox-checked {
        background: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }
    #main-content.cn-page-visitrequestsymptoms .cn-group__list .dx-checkbox .dx-checkbox-text {
        font-family: var(--cn-font) !important;
        font-size: 14px !important;
        color: var(--cn-text) !important;
        padding-left: 6px;
    }

/* responsive — mobile-first */
@media (max-width: 992px) {
    #main-content.cn-page-visitrequestsymptoms .cn-groups {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestsymptoms .cn-groups {
        grid-template-columns: 1fr;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — HEALTH PROFILE (patient/visitrequest/         ║
   ║  healthprofile). Reskin only — matches                        ║
   ║  C:\mockups\visitrequesthealthprofile-v2.html. Scope          ║
   ║  #main-content.cn-page-visitrequesthealthprofile. Every        ║
   ║  DevExpress widget (temperature / radios / measurements /      ║
   ║  vitals / medications + allergies lists / medical-conditions   ║
   ║  dxList) is preserved; this only wraps sections in cards and   ║
   ║  restyles labels/editors. Footer + Prev/Continue buttons reuse ║
   ║  the shared [class*=cn-page-visitrequest] + .cn-wizard-btn.     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* section cards */
#main-content.cn-page-visitrequesthealthprofile .cn-card {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    padding: 20px;
    margin-top: 16px;
}
#main-content.cn-page-visitrequesthealthprofile .cn-card__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
}
#main-content.cn-page-visitrequesthealthprofile .cn-card__desc {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--cn-text-3);
}

/* field grids */
#main-content.cn-page-visitrequesthealthprofile .cn-grid {
    display: grid;
    gap: 16px;
}
#main-content.cn-page-visitrequesthealthprofile .cn-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 560px;
}
#main-content.cn-page-visitrequesthealthprofile .cn-grid--vitals {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#main-content.cn-page-visitrequesthealthprofile .cn-field--num {
    max-width: 200px;
}

/* labels + help text — allow full label to wrap (DevExpress truncates by default) */
#main-content.cn-page-visitrequesthealthprofile .cn-field .dx-field-label {
    float: none;
    display: block;
    font-family: var(--cn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text) !important;
    margin: 0 0 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
}
/* vitals labels are long — reserve two lines so the inputs stay aligned across the
   row. Only needed on multi-column layouts; on mobile (single column) it would just
   add a gap between the label and its input, so scope it to ≥641px. */
@media (min-width: 641px) {
    #main-content.cn-page-visitrequesthealthprofile .cn-grid--vitals .cn-field .dx-field-label {
        min-height: 36px;
    }
}
#main-content.cn-page-visitrequesthealthprofile .dx-field-item-help-text {
    font-size: 12px;
    color: var(--cn-text-3);
    padding-top: 5px;
}

/* editor radius (both outlined temperature/vitals and filled medication/allergy) */
#main-content.cn-page-visitrequesthealthprofile .dx-texteditor.dx-editor-outlined,
#main-content.cn-page-visitrequesthealthprofile .dx-texteditor.dx-editor-filled {
    border-radius: var(--cn-radius);
}
#main-content.cn-page-visitrequesthealthprofile .dx-texteditor.dx-state-focused.dx-editor-outlined {
    border-color: var(--cn-navy);
    box-shadow: var(--cn-focus-ring);
}

/* conditional reveal region (medications / allergies lists) */
#main-content.cn-page-visitrequesthealthprofile .cn-reveal {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--cn-border);
}
#main-content.cn-page-visitrequesthealthprofile .cn-reveal__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text);
    margin: 0 0 10px;
}

/* Yes / No radio group — comfortable spaced rows */
#main-content.cn-page-visitrequesthealthprofile .dx-radiogroup .dx-radiobutton {
    margin: 0 0 6px 0;
}

/* medical-conditions dxList — bordered card of selectable rows */
#main-content.cn-page-visitrequesthealthprofile #medical-conditions.dx-list {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
}
#main-content.cn-page-visitrequesthealthprofile #medical-conditions .dx-list-item {
    border-bottom: 1px solid var(--cn-border);
}
    #main-content.cn-page-visitrequesthealthprofile #medical-conditions .dx-list-item.dx-state-hover {
        background: var(--cn-navy-50);
    }
    #main-content.cn-page-visitrequesthealthprofile #medical-conditions .dx-list-item.dx-list-item-selected {
        background: var(--cn-navy-50);
    }
#main-content.cn-page-visitrequesthealthprofile #medical-conditions .dx-list-item-content {
    font-size: 14px;
    color: var(--cn-text);
}

/* responsive */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequesthealthprofile .cn-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — DOCUMENTS (patient/visitrequest/Document)    ║
   ║  Reskin only — matches C:\mockups\visitrequestdocument-v2.html.║
   ║  Scope #main-content.cn-page-visitrequestdocument. The         ║
   ║  dropzone ids + dxFileUploader wiring, preview imgs, message   ║
   ║  <h5>s and the CreateDocument submit are preserved; this only  ║
   ║  wraps the sections in cards and restyles the dropzones.       ║
   ║  Footer + Prev/Continue reuse [class*=cn-page-visitrequest] +  ║
   ║  .cn-wizard-btn.                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* section cards */
#main-content.cn-page-visitrequestdocument .cn-card {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    padding: 20px;
    margin-top: 16px;
}
#main-content.cn-page-visitrequestdocument .cn-card__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
}

/* upload tiles — Front / Back, 2-up (mirrors the col-6 pairing) */
#main-content.cn-page-visitrequestdocument .cn-uploads {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 600px;
}
#main-content.cn-page-visitrequestdocument .cn-upload {
    display: flex;
    flex-direction: column;
}

/* restyle the existing .dropzone-external into the polished dashed drop area
   (overrides the page's inline groove/height rules; higher specificity wins) */
#main-content.cn-page-visitrequestdocument .dropzone-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 160px;            /* fixed — same size whether empty or a file is uploaded */
    padding: 16px;
    border: 2px dashed var(--cn-border-2);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-bg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .14s, background .14s;
}
    #main-content.cn-page-visitrequestdocument .dropzone-external:hover {
        border: 2px dashed var(--cn-navy);
        background: var(--cn-navy-50);
    }
/* empty-state block inside the dropzone: icon circle + hint (matches the mockup) */
#main-content.cn-page-visitrequestdocument .cn-drop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
#main-content.cn-page-visitrequestdocument .cn-drop__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cn-navy-50);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content.cn-page-visitrequestdocument .cn-drop__icon svg {
        fill: var(--cn-navy) !important;
        margin: 0 !important;
        width: 22px !important;
        height: 22px !important;
    }
#main-content.cn-page-visitrequestdocument .cn-drop__hint {
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-navy);
}
#main-content.cn-page-visitrequestdocument .cn-drop__sub {
    font-size: 11.5px;
    color: var(--cn-text-3);
}

/* preview image: hidden until it actually has a src; shown scaled when uploaded.
   When a real src is present, the empty-state block is hidden. */
#main-content.cn-page-visitrequestdocument .dropzone-image {
    max-width: 100%;
    max-height: 126px;       /* fits inside the fixed 160px tile (minus padding) */
    height: auto;
    margin: 0;
    object-fit: contain;
}
    #main-content.cn-page-visitrequestdocument .dropzone-image:not([src]),
    #main-content.cn-page-visitrequestdocument .dropzone-image[src=""] {
        display: none;
    }
    #main-content.cn-page-visitrequestdocument .dropzone-image[src]:not([src=""]) ~ .cn-drop-empty {
        display: none;
    }

/* caption under each tile */
#main-content.cn-page-visitrequestdocument .cn-upload__cap {
    margin-top: 9px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
}
    #main-content.cn-page-visitrequestdocument .cn-upload__cap .req {
        color: var(--cn-danger);
        margin-left: 2px;
    }

/* responsive — keep Front/Back 2-up, trim tile height on phones */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestdocument .dropzone-external {
        height: 140px;
    }
    #main-content.cn-page-visitrequestdocument .dropzone-image {
        max-height: 106px;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — CONSENTS (patient/visitrequest/               ║
   ║  consentsandagreements). Reskin only — matches                ║
   ║  C:\mockups\visitrequestconsents-v2.html. Scope                ║
   ║  #main-content.cn-page-visitrequestconsents. Skins the         ║
   ║  existing #packages dxDataGrid (selection + select-all + View) ║
   ║  into a clean checklist card; grid, #SelectedDocumentId,       ║
   ║  required-doc validation and submit are preserved. Footer +    ║
   ║  Prev/Continue reuse [class*=cn-page-visitrequest] +           ║
   ║  .cn-wizard-btn.                                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* card wrapper around the grid — full content width (matches the reference page) */
#main-content.cn-page-visitrequestconsents .cn-doclist-wrap {
    margin-top: 18px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
}

/* strip the grid's own chrome — the card supplies the frame */
#main-content.cn-page-visitrequestconsents #packages .dx-datagrid {
    background: transparent;
    color: var(--cn-text);
    font-family: var(--cn-font);
}
#main-content.cn-page-visitrequestconsents #packages.dx-datagrid-borders > .dx-datagrid-headers,
#main-content.cn-page-visitrequestconsents #packages.dx-datagrid-borders > .dx-datagrid-rowsview,
#main-content.cn-page-visitrequestconsents #packages.dx-datagrid-borders > .dx-datagrid-total-footer {
    border-left: 0;
    border-right: 0;
}
#main-content.cn-page-visitrequestconsents #packages .dx-datagrid-rowsview {
    border-bottom: 0;
}

/* header row — light, clean */
#main-content.cn-page-visitrequestconsents #packages .dx-datagrid-headers {
    background: #F8FAFC;
    color: var(--cn-text-2);
    border-bottom: 1px solid var(--cn-border);
}
    #main-content.cn-page-visitrequestconsents #packages .dx-datagrid-headers td {
        padding: 12px 16px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: .02em;
        text-transform: none;
        vertical-align: middle !important;
    }

/* body rows — comfortable padding, hairline dividers, navy hover/selection */
#main-content.cn-page-visitrequestconsents #packages .dx-datagrid-rowsview .dx-row > td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--cn-border);
    font-size: 14.5px;
    color: var(--cn-text);
}
    #main-content.cn-page-visitrequestconsents #packages .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td {
        background: var(--cn-navy-50) !important;
    }
    #main-content.cn-page-visitrequestconsents #packages .dx-datagrid-rowsview .dx-selection.dx-row > td,
    #main-content.cn-page-visitrequestconsents #packages .dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
        background: var(--cn-navy-50) !important;
    }
    #main-content.cn-page-visitrequestconsents #packages .dx-datagrid-rowsview .dx-row:last-child > td {
        border-bottom: 0;
    }

/* checkbox → navy when checked (select-all + per-row) */
#main-content.cn-page-visitrequestconsents #packages .dx-checkbox-checked .dx-checkbox-icon,
#main-content.cn-page-visitrequestconsents #packages .dx-checkbox-indeterminate .dx-checkbox-icon {
    background: var(--cn-navy) !important;
    border-color: var(--cn-navy) !important;
    color: #fff !important;
}

/* View action icon → navy */
#main-content.cn-page-visitrequestconsents #packages .iconcolor,
#main-content.cn-page-visitrequestconsents #packages .dx-link {
    color: var(--cn-navy) !important;
}

/* ===== polished cell content (rendered by the column cellTemplates) ===== */
#main-content.cn-page-visitrequestconsents .cn-doc-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
#main-content.cn-page-visitrequestconsents .cn-doc__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: var(--cn-radius);
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content.cn-page-visitrequestconsents .cn-doc__icon svg {
        width: 19px;
        height: 19px;
    }
#main-content.cn-page-visitrequestconsents .cn-doc__text {
    min-width: 0;
}
#main-content.cn-page-visitrequestconsents .cn-doc__title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cn-text);
}
#main-content.cn-page-visitrequestconsents .cn-doc__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
#main-content.cn-page-visitrequestconsents .cn-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
    #main-content.cn-page-visitrequestconsents .cn-pill--req {
        color: var(--cn-warn, #B45309);
        background: var(--cn-warn-bg, #FEF3C7);
    }
    #main-content.cn-page-visitrequestconsents .cn-pill--opt {
        color: var(--cn-text-2);
        background: #F1F5F9;
    }
/* View button (cellTemplate) */
#main-content.cn-page-visitrequestconsents .cn-doc__view {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    background: var(--cn-elev);
    color: var(--cn-navy);
    font-family: var(--cn-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}
    #main-content.cn-page-visitrequestconsents .cn-doc__view:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
    }
    #main-content.cn-page-visitrequestconsents .cn-doc__view svg {
        width: 15px;
        height: 15px;
    }

/* mobile — drop the file icon + the View label to save width */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestconsents .cn-doc__icon {
        display: none;
    }
    #main-content.cn-page-visitrequestconsents .cn-doc__view span {
        display: none;
    }
    #main-content.cn-page-visitrequestconsents .cn-doc__view {
        padding: 0;
        width: 34px;
        justify-content: center;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — DEPENDENT (patient/visitrequest/dependent)   ║
   ║  "Who is this visit for?" chooser. Reskin only — matches      ║
   ║  C:\mockups\visitrequestdependent-v2.html. Scope              ║
   ║  #main-content.cn-page-visitrequestdependent. The radio       ║
   ║  inputs + Start() onclick/AJAX and the AddChild() onclick are ║
   ║  preserved; this only restyles. Header reuses shared cn-back  ║
   ║  / cn-title / cn-subtitle primitives.                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* centered chooser column (mirrors the page's narrow centered col-md-4) */
#main-content.cn-page-visitrequestdependent .cn-chooser {
    max-width: 480px;
    margin: 0 auto;
}

/* title block — centered question */
#main-content.cn-page-visitrequestdependent .cn-head {
    text-align: center;
    margin: 26px 0 4px;
}
    #main-content.cn-page-visitrequestdependent .cn-head .cn-title {
        margin: 0;
    }
    #main-content.cn-page-visitrequestdependent .cn-head .cn-subtitle {
        margin: 8px auto 0;
        max-width: 40ch;
    }

/* ===== selection list ===== */
#main-content.cn-page-visitrequestdependent .cn-picks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
}
/* wrapper holds the (visually hidden) radio + the label card */
#main-content.cn-page-visitrequestdependent .cn-pick-item {
    position: relative;
}
    #main-content.cn-page-visitrequestdependent .cn-pick-item input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
        margin: 0;
    }
/* the label IS the clickable card */
#main-content.cn-page-visitrequestdependent .cn-pick {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    text-align: left;
    padding: 15px 16px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    cursor: pointer;
    font-family: var(--cn-font);
    transition: border-color .14s, box-shadow .14s, transform .12s;
}
    #main-content.cn-page-visitrequestdependent .cn-pick:hover {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-shadow-md);
        transform: translateY(-1px);
    }
    #main-content.cn-page-visitrequestdependent .cn-pick-item input[type="radio"]:focus-visible + .cn-pick {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }
    #main-content.cn-page-visitrequestdependent .cn-pick:active {
        transform: translateY(0);
    }

#main-content.cn-page-visitrequestdependent .cn-pick__avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--cn-navy);
}
    #main-content.cn-page-visitrequestdependent .cn-pick__avatar.is-gold { background: var(--cn-gold); }
    #main-content.cn-page-visitrequestdependent .cn-pick__avatar.is-mint { background: var(--cn-mint, #0E7C66); }
    #main-content.cn-page-visitrequestdependent .cn-pick__avatar.is-slate { background: var(--cn-slate, #5B6B7B); }

#main-content.cn-page-visitrequestdependent .cn-pick__text {
    flex: 1;
    min-width: 0;
}
#main-content.cn-page-visitrequestdependent .cn-pick__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main-content.cn-page-visitrequestdependent .cn-pick__meta {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--cn-text-2);
}
#main-content.cn-page-visitrequestdependent .cn-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
    color: var(--cn-success, #047857);
    background: var(--cn-success-bg, #ECFDF5);
}
#main-content.cn-page-visitrequestdependent .cn-pick__chev {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--cn-text-3);
    transition: color .14s, transform .14s;
}
    #main-content.cn-page-visitrequestdependent .cn-pick:hover .cn-pick__chev {
        color: var(--cn-navy);
        transform: translateX(2px);
    }

/* "Add Child" — dashed add tile */
#main-content.cn-page-visitrequestdependent .cn-pick--add {
    border-style: dashed;
    border-color: var(--cn-border-2);
    background: transparent;
    box-shadow: none;
}
    #main-content.cn-page-visitrequestdependent .cn-pick--add:hover {
        border-color: var(--cn-navy);
        background: var(--cn-navy-50);
        box-shadow: none;
        transform: translateY(-1px);
    }
    #main-content.cn-page-visitrequestdependent .cn-pick--add .cn-pick__avatar {
        background: var(--cn-navy-50);
        color: var(--cn-navy);
    }
    #main-content.cn-page-visitrequestdependent .cn-pick--add:hover .cn-pick__avatar {
        background: var(--cn-navy);
        color: #fff;
    }
    #main-content.cn-page-visitrequestdependent .cn-pick--add .cn-pick__name {
        color: var(--cn-navy);
    }
    #main-content.cn-page-visitrequestdependent .cn-pick--add .cn-pick__avatar svg {
        width: 22px;
        height: 22px;
    }

/* ===== responsive — mobile-first (most customers are mobile) ===== */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestdependent .cn-head {
        margin-top: 18px;
    }
    #main-content.cn-page-visitrequestdependent .cn-picks {
        margin-top: 20px;
    }
    #main-content.cn-page-visitrequestdependent .cn-pick {
        padding: 14px;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — CONFIRM PHARMACY (patient/visitrequest/       ║
   ║  confirmpharmacy → ConfirmPharmacy.cshtml). Reskin only —     ║
   ║  matches C:\mockups\visitrequestconfirmpharmacy-v2.html.      ║
   ║  Scope #main-content.cn-page-visitrequestconfirmpharmacy. The  ║
   ║  Google map (#dvMap), every ViewBag binding, the TempData      ║
   ║  branches and all four dxButtons are preserved; this only lays ║
   ║  the pharmacy details out as a horizontal info card above a    ║
   ║  full-width map and restyles the buttons. Footer + Prev/       ║
   ║  Continue reuse the shared [class*=cn-page-visitrequest] +     ║
   ║  .cn-wizard-btn rules defined above.                           ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* provider context line (reuses .cn-subtitle; drop the layout's right-align) */
#main-content.cn-page-visitrequestconfirmpharmacy .doctornamedisplay {
    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 600;
    color: var(--cn-text-2);
    margin: 0 0 2px;
}

/* back link wrapper (SetDefaultPharmacy branch) */
#main-content.cn-page-visitrequestconfirmpharmacy .cn-back-wrap {
    margin: 0 0 10px;
}

/* stack: details card on top, full-width map below */
#main-content.cn-page-visitrequestconfirmpharmacy .cn-pharm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

/* ===== pharmacy details — horizontal info bar ===== */
#main-content.cn-page-visitrequestconfirmpharmacy .cn-card {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
}
#main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    flex-wrap: wrap;
}
#main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__icon svg {
        width: 25px;
        height: 25px;
    }
#main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__id {
    min-width: 0;
}
#main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cn-success);
}
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__kicker svg {
        width: 13px;
        height: 13px;
    }
#main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cn-text);
    margin: 3px 0 0;
}
#main-content.cn-page-visitrequestconfirmpharmacy .cn-detail {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding-left: 20px;
    border-left: 1px solid var(--cn-border);
}
#main-content.cn-page-visitrequestconfirmpharmacy .cn-detail__ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--cn-navy);
    margin-top: 1px;
}
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-detail__ico svg {
        width: 20px;
        height: 20px;
    }
#main-content.cn-page-visitrequestconfirmpharmacy .cn-detail__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cn-text-3);
}
#main-content.cn-page-visitrequestconfirmpharmacy .cn-detail__value {
    font-size: 14px;
    color: var(--cn-text);
    margin-top: 2px;
    line-height: 1.35;
}

/* body action buttons — push right, override base .btn-wrap 48% width so the
   dxButtons size to the shared .cn-wizard-btn rules */
#main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__actions > div {
        width: auto;
    }

/* ===== map — full-width rounded card (Google renders tiles into #dvMap) ===== */
#main-content.cn-page-visitrequestconfirmpharmacy #form {
    width: 100%;
}
#main-content.cn-page-visitrequestconfirmpharmacy #dvMap {
    width: 100%;
    height: 440px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    background: #E8EEF3;
}

/* ===== responsive — mobile-first (most customers are mobile) ===== */
@media (max-width: 820px) {
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__body {
        align-items: flex-start;
        gap: 16px;
    }
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__id,
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-detail {
        flex-basis: 100%;
    }
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-detail {
        padding-left: 0;
        border-left: 0;
    }
    /* stack the two action buttons full-width so the long
       "Choose another pharmacy" label never truncates, with an
       even gap and matching heights */
    #main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__actions {
        margin: 4px 0 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
        #main-content.cn-page-visitrequestconfirmpharmacy .cn-pcard__actions > div {
            width: 100%;
            margin: 0;
            flex: 0 0 auto;    /* don't let the shared flex:1 stretch the buttons unevenly */
        }
}
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestconfirmpharmacy #dvMap {
        height: 320px;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — CHOOSE PHARMACY (patient/visitrequest/        ║
   ║  pharmacy → pharmacy.cshtml). Reskin only — matches           ║
   ║  C:\mockups\visitrequestpharmacy-v2.html. Scope                ║
   ║  #main-content.cn-page-visitrequestpharmacy. The bootstrap     ║
   ║  nav-tabs (#nearby / #search-criteria), the Google map         ║
   ║  (#dvMap), the search dxForm + dxCheckBoxes + #Search-button,  ║
   ║  the JS-built #lists .pharmacy-box results, #items /           ║
   ║  #pagination and every hidden input are preserved; this only   ║
   ║  restyles the tabs into a segmented control, cards the search  ║
   ║  panel and reskins the result/pagination chrome. Footer +      ║
   ║  Prev/Continue reuse the shared [class*=cn-page-visitrequest]  ║
   ║  + .cn-wizard-btn rules defined above.                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* provider context line (reuses .cn-subtitle; drop the layout's right-align) */
#main-content.cn-page-visitrequestpharmacy .doctornamedisplay {
    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 600;
    color: var(--cn-text-2);
    margin: 0 0 2px;
}
#main-content.cn-page-visitrequestpharmacy .cn-back-wrap {
    margin: 0 0 10px;
}

/* ===== tabs — restyle the existing bootstrap nav-tabs into a segmented pill ===== */
#main-content.cn-page-visitrequestpharmacy .pharmacy-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 20px 0 0;
    padding: 4px;
    background: #EEF2F6;
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    list-style: none;
}
#main-content.cn-page-visitrequestpharmacy .pharmacy-tabs .nav-item {
    margin: 0;
}
#main-content.cn-page-visitrequestpharmacy .pharmacy-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cn-text-2);
    font-family: var(--cn-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, color .14s, box-shadow .14s;
}
    #main-content.cn-page-visitrequestpharmacy .pharmacy-tabs .nav-link svg {
        width: 16px;
        height: 16px;
    }
    #main-content.cn-page-visitrequestpharmacy .pharmacy-tabs .nav-link:hover {
        color: var(--cn-navy);
        background: transparent;
    }
    #main-content.cn-page-visitrequestpharmacy .pharmacy-tabs .nav-link.active {
        background: var(--cn-elev);
        color: var(--cn-navy);
        box-shadow: var(--cn-shadow-sm);
    }

/* ===== nearby tab — hint banner + full-width map ===== */
#main-content.cn-page-visitrequestpharmacy .cn-hint {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-navy-2);
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100);
    border-radius: var(--cn-radius);
    padding: 10px 14px;
    margin: 18px 0 16px;
}
    #main-content.cn-page-visitrequestpharmacy .cn-hint svg {
        width: 17px;
        height: 17px;
        color: var(--cn-navy);
        flex: 0 0 17px;
    }
#main-content.cn-page-visitrequestpharmacy #form {
    width: 100%;
}
#main-content.cn-page-visitrequestpharmacy #dvMap {
    width: 100%;
    height: 460px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    background: #E8EEF3;
}

/* ===== search tab — form card ===== */
#main-content.cn-page-visitrequestpharmacy #search-criteria {
    padding-top: 18px;
}
#main-content.cn-page-visitrequestpharmacy .cn-card {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    padding: 20px;
}
#main-content.cn-page-visitrequestpharmacy .cn-card__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
}
#main-content.cn-page-visitrequestpharmacy .cn-card__desc {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--cn-text-2);
}
/* dxForm editors — align to the design-system radius + focus ring */
#main-content.cn-page-visitrequestpharmacy #search-criteria-form .dx-texteditor.dx-editor-outlined {
    border-radius: var(--cn-radius);
}
    #main-content.cn-page-visitrequestpharmacy #search-criteria-form .dx-texteditor.dx-editor-outlined.dx-state-focused {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }
/* the two 24hr / mail-order dxCheckBox forms — lay them in one row */
#main-content.cn-page-visitrequestpharmacy .cn-checks-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 28px;
    margin-top: 6px;
}
#main-content.cn-page-visitrequestpharmacy .cn-search-actions {
    margin-top: 18px;
}
#main-content.cn-page-visitrequestpharmacy .cn-loading-wrap {
    display: flex;
    justify-content: center;
}

/* ===== search results — reskin the JS-built .pharmacy-box cards ===== */
#main-content.cn-page-visitrequestpharmacy #lists {
    margin-top: 20px;
}
#main-content.cn-page-visitrequestpharmacy .pharmacy-box {
    border: 1px solid var(--cn-border);
    padding: 16px;
    margin: 0 0 16px;
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
    #main-content.cn-page-visitrequestpharmacy .pharmacy-box:hover {
        transform: none;
        border-color: var(--cn-navy);
        box-shadow: var(--cn-shadow-md);
    }
    #main-content.cn-page-visitrequestpharmacy .pharmacy-box.selected {
        border-color: var(--cn-navy);
        background: var(--cn-navy-50);
        box-shadow: var(--cn-focus-ring);
    }
#main-content.cn-page-visitrequestpharmacy .pharmacy-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--cn-text);
    margin-bottom: 6px;
}
#main-content.cn-page-visitrequestpharmacy #lists p {
    margin: 0 0 3px !important;
    font-size: 13px;
    color: var(--cn-text-2);
    line-height: 1.4;
}
/* result rows with a leading icon (address pin / phone) */
#main-content.cn-page-visitrequestpharmacy .pharmacy-box .pharmacy-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0 !important;
}
#main-content.cn-page-visitrequestpharmacy .pharmacy-box .pharmacy-ico {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 2px;
    color: var(--cn-text-3);
}

/* ===== items count + pagination ===== */
#main-content.cn-page-visitrequestpharmacy #items {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cn-text-3);
}
#main-content.cn-page-visitrequestpharmacy .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    padding-top: 0;
}
#main-content.cn-page-visitrequestpharmacy .pagination a {
    min-width: 38px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    background: var(--cn-elev);
    color: var(--cn-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
}
    #main-content.cn-page-visitrequestpharmacy .pagination a:hover {
        background: var(--cn-navy-50);
        border-color: var(--cn-navy);
        color: var(--cn-navy);
    }
    #main-content.cn-page-visitrequestpharmacy .pagination a.active {
        background: var(--cn-navy);
        border-color: var(--cn-navy);
        color: #fff;
    }

/* ===== responsive — mobile-first (most customers are mobile) ===== */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestpharmacy .pharmacy-tabs {
        display: flex;
        width: 100%;
    }
    #main-content.cn-page-visitrequestpharmacy .pharmacy-tabs .nav-item {
        flex: 1;
    }
    #main-content.cn-page-visitrequestpharmacy .pharmacy-tabs .nav-link {
        width: 100%;
        justify-content: center;
        padding: 0 12px;
    }
    #main-content.cn-page-visitrequestpharmacy #dvMap {
        height: 340px;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — LOCATION (patient/visitrequest/location →     ║
   ║  Location.cshtml). Reskin only — matches                      ║
   ║  C:\mockups\visitrequestlocation-v2.html. Scope                ║
   ║  #main-content.cn-page-visitrequestlocation. The visit-type    ║
   ║  dxRadioGroup (#radioGroupAllergies), the #addresslist         ║
   ║  show/hide, the per-location radio cards (selectone) and every ║
   ║  hidden input are preserved; this restyles the radio group     ║
   ║  into option chips and the location cards into clean address   ║
   ║  cards. Footer + Prev/Continue reuse the shared                ║
   ║  [class*=cn-page-visitrequest] + .cn-wizard-btn rules.         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* provider context line (reuses .cn-subtitle; drop the layout's right-align) */
#main-content.cn-page-visitrequestlocation .doctornamedisplay {
    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 600;
    color: var(--cn-text-2);
    margin: 0 0 2px;
}
#main-content.cn-page-visitrequestlocation .cn-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
    letter-spacing: -.01em;
    margin: 26px 0 12px;
}

/* ===== visit type — restyle the dxRadioGroup into option chips ===== */
#main-content.cn-page-visitrequestlocation #radioGroupAllergies .dx-form,
#main-content.cn-page-visitrequestlocation #radioGroupAllergies .dx-layout-manager,
#main-content.cn-page-visitrequestlocation #radioGroupAllergies .dx-field-item {
    background: transparent !important;
}
#main-content.cn-page-visitrequestlocation #radioGroupAllergies .dx-field-item {
    padding: 0 !important;
}
#main-content.cn-page-visitrequestlocation .dx-radiogroup-horizontal .dx-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
#main-content.cn-page-visitrequestlocation .dx-radiogroup .dx-radiobutton {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 16px 18px;
    min-width: 300px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    cursor: pointer;
    transition: border-color .14s, background .14s, box-shadow .14s;
}
    #main-content.cn-page-visitrequestlocation .dx-radiogroup .dx-radiobutton.dx-state-hover {
        border-color: var(--cn-navy);
        background: var(--cn-navy-50);
    }
    #main-content.cn-page-visitrequestlocation .dx-radiogroup .dx-radiobutton.dx-radiobutton-checked {
        border-color: var(--cn-navy);
        background: var(--cn-navy-50);
        box-shadow: var(--cn-focus-ring);
    }
    #main-content.cn-page-visitrequestlocation .dx-radiobutton .dx-radiobutton-content,
    #main-content.cn-page-visitrequestlocation .dx-radiobutton .dx-item-content {
        font-family: var(--cn-font);
        font-size: 14.5px;
        font-weight: 600;
        color: var(--cn-text);
    }
/* option content — icon tile + title + description, rendered by the
   dxRadioGroup itemTemplate (value / valueExpr / onValueChanged unchanged) */
#main-content.cn-page-visitrequestlocation .cn-vt {
    display: flex;
    align-items: center;
    gap: 12px;
}
#main-content.cn-page-visitrequestlocation .cn-vt__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, color .14s;
}
    #main-content.cn-page-visitrequestlocation .cn-vt__icon svg {
        width: 22px;
        height: 22px;
    }
#main-content.cn-page-visitrequestlocation .cn-vt__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#main-content.cn-page-visitrequestlocation .cn-vt__t {
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
    line-height: 1.2;
}
#main-content.cn-page-visitrequestlocation .cn-vt__d {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cn-text-2);
    margin-top: 2px;
    white-space: normal;
}
/* icon tile turns navy when that option is selected */
#main-content.cn-page-visitrequestlocation .dx-radiobutton.dx-radiobutton-checked .cn-vt__icon {
    background: var(--cn-navy);
    color: #fff;
}
/* radio dot → navy when checked */
#main-content.cn-page-visitrequestlocation .dx-radiobutton .dx-radiobutton-icon.dx-radiobutton-icon-checked {
    border-color: var(--cn-navy);
}
    #main-content.cn-page-visitrequestlocation .dx-radiobutton .dx-radiobutton-icon.dx-radiobutton-icon-checked::before {
        background-color: var(--cn-navy);
    }

/* ===== location cards ===== */
#main-content.cn-page-visitrequestlocation .cn-locs {
    margin-top: 4px;
}
#main-content.cn-page-visitrequestlocation .cn-loc {
    position: relative;
}
/* the radio input is visually hidden but still drives selection + selectone() */
#main-content.cn-page-visitrequestlocation .cn-loc > input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
#main-content.cn-page-visitrequestlocation .cn-loc__card {
    position: relative;
    height: 100%;
    padding: 16px 16px 16px 44px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    cursor: pointer;
    transition: border-color .14s, background .14s, box-shadow .14s;
}
    #main-content.cn-page-visitrequestlocation .cn-loc__card:hover {
        border-color: var(--cn-navy);
        background: var(--cn-navy-50);
    }
#main-content.cn-page-visitrequestlocation .cn-loc__pin {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--cn-navy);
}
    #main-content.cn-page-visitrequestlocation .cn-loc__pin svg {
        width: 20px;
        height: 20px;
    }
#main-content.cn-page-visitrequestlocation .cn-loc__radio {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--cn-border-2);
    transition: border-color .14s, background .14s;
}
/* selected state — driven by the (hidden) radio */
#main-content.cn-page-visitrequestlocation .cn-loc > input[type="radio"]:checked + .cn-loc__card {
    border: 1px solid var(--cn-navy);
    background: var(--cn-navy-50);
    box-shadow: var(--cn-focus-ring);
}
    #main-content.cn-page-visitrequestlocation .cn-loc > input[type="radio"]:checked + .cn-loc__card .cn-loc__radio {
        border-color: var(--cn-navy);
        background: radial-gradient(circle at center, #fff 0 3px, var(--cn-navy) 4px);
    }
/* address definition list — clean label / value pairs */
#main-content.cn-page-visitrequestlocation .cn-loc__card dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    align-items: baseline;
}
#main-content.cn-page-visitrequestlocation .cn-loc__card dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cn-text-3);
    white-space: nowrap;
}
#main-content.cn-page-visitrequestlocation .cn-loc__card dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--cn-text);
}

/* ===== responsive — mobile-first (most customers are mobile) ===== */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestlocation .dx-radiogroup-horizontal .dx-collection {
        flex-direction: column;
    }
    #main-content.cn-page-visitrequestlocation .dx-radiogroup .dx-radiobutton {
        width: 100%;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — TIME PREFERENCE (patient/visitrequest/        ║
   ║  timepreference). Compact the dxScheduler month rows.          ║
   ║  The shared .cn-calendar-wrap chrome doesn't constrain the     ║
   ║  month scroll area, so the date rows stretch tall (and a       ║
   ║  fixed scheduler height leaves blank space). These two rules   ║
   ║  restore the page's original compact month sizing. Scoped to   ║
   ║  #main-content.cn-page-visitrequesttimepreference so the       ║
   ║  provider Schedule-a-Visit calendar is unaffected.             ║
   ╚══════════════════════════════════════════════════════════════╝ */
#main-content.cn-page-visitrequesttimepreference .cn-calendar-wrap .dx-scrollview-content {
    display: none;
}
#main-content.cn-page-visitrequesttimepreference .cn-calendar-wrap .dx-scheduler-work-space-month .dx-scheduler-date-table-scrollable .dx-scrollable-content {
    min-height: 300px !important;
}
/* keep the dxScheduler (and its internal sticky header row) in its own
   stacking context BELOW the fixed app header, so it can't bleed up over
   the logo/header when the page scrolls */
#main-content.cn-page-visitrequesttimepreference .cn-calendar-wrap {
    position: relative;
    z-index: 0;
}
    #main-content.cn-page-visitrequesttimepreference .cn-calendar-wrap .dx-scheduler,
    #main-content.cn-page-visitrequesttimepreference .cn-calendar-wrap .dx-scheduler-header,
    #main-content.cn-page-visitrequesttimepreference .cn-calendar-wrap .dx-scheduler-work-space {
        z-index: 0 !important;
    }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — INSURANCE INFORMATION (patient/visitrequest/  ║
   ║  insuranceinfo → InsuranceInfo.cshtml). Reskin only —         ║
   ║  matches C:\mockups\visitrequestinsuranceinfo-v2.html. Scope   ║
   ║  #main-content.cn-page-visitrequestinsuranceinfo. The form,    ║
   ║  hidden inputs, InsuranceCompany dxSelectBox, Policy / Group / ║
   ║  First / Last dxTextBox, the DOB dxForm and all validation are ║
   ║  preserved; this only lays the fields out in a card + grid and ║
   ║  aligns the editors to the design system. Footer +            ║
   ║  Prev/Continue/Skip reuse the shared [class*=cn-page-          ║
   ║  visitrequest] + .cn-wizard-btn rules.                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* hide the DOB dxForm's top label (was a page-level inline style) */
#main-content.cn-page-visitrequestinsuranceinfo label.dx-field-item-label.dx-field-item-label-location-top {
    display: none;
}

#main-content.cn-page-visitrequestinsuranceinfo .cn-error {
    color: var(--cn-danger);
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0 0;
}

/* appointment chip (provider name) — matches the mockup pill */
#main-content.cn-page-visitrequestinsuranceinfo .cn-appt {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 4px;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-appt__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100);
    color: var(--cn-navy-2);
    font-size: 13px;
    font-weight: 600;
}
    #main-content.cn-page-visitrequestinsuranceinfo .cn-appt__chip svg {
        width: 15px;
        height: 15px;
        color: var(--cn-navy);
        flex: 0 0 15px;
    }
@media (max-width: 992px) {
    #main-content.cn-page-visitrequestinsuranceinfo .cn-appt {
        justify-content: flex-start;
    }
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-req {
    color: var(--cn-danger);
}

/* form card */
#main-content.cn-page-visitrequestinsuranceinfo .cn-card {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    margin-top: 20px;
    overflow: hidden;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: #F8FAFC;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-card__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content.cn-page-visitrequestinsuranceinfo .cn-card__icon svg {
        width: 21px;
        height: 21px;
    }
#main-content.cn-page-visitrequestinsuranceinfo .cn-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-card__sub {
    font-size: 12.5px;
    color: var(--cn-text-2);
    margin-top: 1px;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-card__body {
    padding: 20px;
}

/* field grid — 2-up desktop / 1-up mobile */
#main-content.cn-page-visitrequestinsuranceinfo .cn-formgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 18px;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-field {
    min-width: 0;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-field--full {
    grid-column: auto;
}

/* section divider (Policyholder) */
#main-content.cn-page-visitrequestinsuranceinfo .cn-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-divider__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cn-text-3);
    white-space: nowrap;
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-divider__line {
    height: 1px;
    background: var(--cn-border);
    flex: 1;
}

/* labels + DevExpress editors — align to the design system */
#main-content.cn-page-visitrequestinsuranceinfo .cn-field .dx-field-label {
    float: none;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-text-2);
}
#main-content.cn-page-visitrequestinsuranceinfo .cn-field .dx-texteditor.dx-editor-outlined {
    border-radius: var(--cn-radius);
}
    #main-content.cn-page-visitrequestinsuranceinfo .cn-field .dx-texteditor.dx-editor-outlined.dx-state-focused {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }

/* ===== Skip Insurance — its own row below the field grid, separated by a
   hairline, with a compact centered secondary button. ===== */
#main-content.cn-page-visitrequestinsuranceinfo .cn-skip-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cn-border);
}
    #main-content.cn-page-visitrequestinsuranceinfo .cn-skip-row #Skip.cn-wizard-btn.dx-button {
        width: auto;
        min-width: 160px;
    }

/* ===== responsive — mobile-first (most customers are mobile) ===== */
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestinsuranceinfo .cn-formgrid {
        grid-template-columns: 1fr;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISIT REQUEST — PAYMENT (patient/visitrequest/paymentcharge   ║
   ║  → PaymentCharge.cshtml). Reskin only — matches               ║
   ║  C:\mockups\visitrequestpaymentcharge-v2.html. Scope           ║
   ║  #main-content.cn-page-visitrequestpaymentcharge. The Stripe   ║
   ║  card element (#newcard), NewPayment / oldPayment submit, the  ║
   ║  saved-card vs new-card toggle, the coupon move-by-width JS,    ║
   ║  every hidden input and validation are preserved; this only    ║
   ║  wraps the fields in a card and aligns the inputs / Stripe     ║
   ║  element / buttons to the design system. Footer + Prev/Submit  ║
   ║  reuse the shared [class*=cn-page-visitrequest] + .cn-wizard-  ║
   ║  btn rules.                                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* provider context line (reuses .cn-subtitle; drop the layout's right-align) */
#main-content.cn-page-visitrequestpaymentcharge .doctornamedisplay {
    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 600;
    color: var(--cn-text-2);
    margin: 0 0 2px;
}
#main-content.cn-page-visitrequestpaymentcharge .cn-error {
    color: var(--cn-danger);
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0 0;
}

/* appointment chip (provider name) — matches the mockup pill */
#main-content.cn-page-visitrequestpaymentcharge .cn-appt {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 4px;
}
#main-content.cn-page-visitrequestpaymentcharge .cn-appt__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100);
    color: var(--cn-navy-2);
    font-size: 13px;
    font-weight: 600;
}
    #main-content.cn-page-visitrequestpaymentcharge .cn-appt__chip svg {
        width: 15px;
        height: 15px;
        color: var(--cn-navy);
        flex: 0 0 15px;
    }
@media (max-width: 992px) {
    #main-content.cn-page-visitrequestpaymentcharge .cn-appt {
        justify-content: flex-start;
    }
}

/* two-column checkout: Payment Method card + Order Summary card */
#main-content.cn-page-visitrequestpaymentcharge .cn-pay {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}
#main-content.cn-page-visitrequestpaymentcharge .cn-paycard {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
}
#main-content.cn-page-visitrequestpaymentcharge .cn-paycard__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cn-border);
    background: #F8FAFC;
}
#main-content.cn-page-visitrequestpaymentcharge .cn-paycard__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content.cn-page-visitrequestpaymentcharge .cn-paycard__icon svg {
        width: 21px;
        height: 21px;
    }
#main-content.cn-page-visitrequestpaymentcharge .cn-paycard__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cn-text);
}
#main-content.cn-page-visitrequestpaymentcharge .cn-paycard__sub {
    font-size: 12.5px;
    color: var(--cn-text-2);
    margin-top: 1px;
}
#main-content.cn-page-visitrequestpaymentcharge .cn-paycard__body {
    padding: 20px;
}

/* payment-method selectable row */
#main-content.cn-page-visitrequestpaymentcharge .cn-pay-method {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--cn-navy);
    border-radius: var(--cn-radius);
    background: var(--cn-navy-50);
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-text);
    cursor: pointer;
}
    #main-content.cn-page-visitrequestpaymentcharge .cn-pay-method input[type="radio"] {
        accent-color: var(--cn-navy);
        width: 16px;
        height: 16px;
    }
#main-content.cn-page-visitrequestpaymentcharge #card-errors {
    font-size: 13px;
    margin-top: 8px;
}

/* fields */
#main-content.cn-page-visitrequestpaymentcharge .cn-field2 {
    margin-top: 18px;
}
#main-content.cn-page-visitrequestpaymentcharge label[for="name"],
#main-content.cn-page-visitrequestpaymentcharge label[for="card-element"] {
    font-family: var(--cn-font) !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cn-text-2);
    margin-bottom: 6px;
    display: block;
}

/* text inputs (card holder / old card) */
#main-content.cn-page-visitrequestpaymentcharge .paymentcharge_input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--cn-border-2) !important;
    border-radius: var(--cn-radius);
    box-shadow: none;
    font-family: var(--cn-font);
    font-size: 14px;
    color: var(--cn-text);
    transition: border-color .14s, box-shadow .14s;
}
    #main-content.cn-page-visitrequestpaymentcharge .paymentcharge_input:focus {
        outline: 0;
        border-color: var(--cn-navy) !important;
        box-shadow: var(--cn-focus-ring);
    }

/* Stripe card element (#newcard) */
#main-content.cn-page-visitrequestpaymentcharge .StripeElement,
#main-content.cn-page-visitrequestpaymentcharge #newcard {
    height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--cn-border-2);
    border-radius: var(--cn-radius);
    box-shadow: none;
    background: var(--cn-elev);
    transition: border-color .14s, box-shadow .14s;
}
    #main-content.cn-page-visitrequestpaymentcharge .StripeElement--focus {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }
    #main-content.cn-page-visitrequestpaymentcharge .StripeElement--invalid {
        border-color: var(--cn-danger);
    }

/* secured note */
#main-content.cn-page-visitrequestpaymentcharge .cn-secure2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--cn-text-3);
}
    #main-content.cn-page-visitrequestpaymentcharge .cn-secure2 svg {
        width: 14px;
        height: 14px;
    }
    #main-content.cn-page-visitrequestpaymentcharge .cn-secure2 b {
        color: var(--cn-text-2);
        font-weight: 700;
    }

/* edit button → design-system navy */
#main-content.cn-page-visitrequestpaymentcharge .cn-edit-wrap {
    margin-top: 16px;
}
#main-content.cn-page-visitrequestpaymentcharge .paymentcharge_button {
    height: 44px;
    padding: 0 20px;
    background-color: var(--cn-navy);
    border-radius: var(--cn-radius);
}
    #main-content.cn-page-visitrequestpaymentcharge .paymentcharge_button:hover {
        background-color: var(--cn-navy-2);
    }

/* order summary rows */
#main-content.cn-page-visitrequestpaymentcharge .cn-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}
#main-content.cn-page-visitrequestpaymentcharge .cn-sum-row__label {
    font-size: 14px;
    color: var(--cn-text-2);
}
#main-content.cn-page-visitrequestpaymentcharge .cn-sum-row__amount {
    width: auto;
    max-width: 120px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    text-align: right;
    font-family: var(--cn-font);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cn-text);
}
    #main-content.cn-page-visitrequestpaymentcharge .cn-sum-row__amount:focus {
        outline: 0;
    }
#main-content.cn-page-visitrequestpaymentcharge .cn-yousave:not(:empty) {
    display: flex;
    align-items: center;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: var(--cn-radius);
    background: var(--cn-success-bg);
    color: var(--cn-success) !important;
    font-size: 13px;
    font-weight: 600;
}

/* coupon slot + widgets (JS moves #couponCodeDiv into a slot here) */
#main-content.cn-page-visitrequestpaymentcharge .cn-coupon-slot:not(:empty) {
    margin-top: 14px;
}
#main-content.cn-page-visitrequestpaymentcharge #couponCodeDiv {
    width: 100%;
}
/* "Add Promotion code" button → clean full-width secondary */
#main-content.cn-page-visitrequestpaymentcharge #btnaddcouponcode.dx-button {
    width: 100% !important;
    height: 42px !important;
    border-radius: var(--cn-radius) !important;
    border: 1px solid var(--cn-border-2) !important;
    background-color: var(--cn-elev) !important;
}
    #main-content.cn-page-visitrequestpaymentcharge #btnaddcouponcode.dx-button .dx-button-text {
        color: var(--cn-navy) !important;
        font-weight: 600 !important;
    }
    #main-content.cn-page-visitrequestpaymentcharge #btnaddcouponcode.dx-button.dx-state-hover,
    #main-content.cn-page-visitrequestpaymentcharge #btnaddcouponcode.dx-button.dx-state-focused {
        background-color: var(--cn-navy-50) !important;
        border-color: var(--cn-navy) !important;
    }
/* coupon text field → design radius + focus */
#main-content.cn-page-visitrequestpaymentcharge #txtcouponCode.dx-texteditor.dx-editor-outlined {
    border-radius: var(--cn-radius);
    border-color: var(--cn-border-2);
}
    #main-content.cn-page-visitrequestpaymentcharge #txtcouponCode.dx-texteditor.dx-editor-outlined.dx-state-focused {
        border-color: var(--cn-navy);
        box-shadow: var(--cn-focus-ring);
    }
#main-content.cn-page-visitrequestpaymentcharge #couponerror {
    color: var(--cn-danger);
    font-size: 12.5px;
    margin: 6px 0 0;
}

/* disclaimer note */
#main-content.cn-page-visitrequestpaymentcharge .cn-disclaimer2 {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: var(--cn-radius);
    background: var(--cn-warn-bg);
    color: var(--cn-warn);
    font-size: 12.5px;
    line-height: 1.45;
}
    #main-content.cn-page-visitrequestpaymentcharge .cn-disclaimer2 svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        margin-top: 1px;
    }

/* ===== responsive — mobile-first (most customers are mobile) ===== */
@media (max-width: 860px) {
    #main-content.cn-page-visitrequestpaymentcharge .cn-pay {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    #main-content.cn-page-visitrequestpaymentcharge .cn-paycard__body {
        padding: 16px;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  Shared appointment chip (provider name pill) for the visit-  ║
   ║  request wizard pages — timepreference / location / consents  ║
   ║  (payment + insurance keep their own scoped copies). Matches   ║
   ║  the mockup pill: navy-50 rounded chip, person icon, right-    ║
   ║  aligned on desktop, left on tablet/mobile.                    ║
   ╚══════════════════════════════════════════════════════════════╝ */
#main-content:is(.cn-page-visitrequesttimepreference, .cn-page-visitrequestlocation, .cn-page-visitrequestconsents, .cn-page-visitrequestreason, .cn-page-visitrequestform, .cn-page-visitrequestsymptoms, .cn-page-visitrequesthealthprofile, .cn-page-visitrequestdocument, .cn-page-visitrequestconfirmpharmacy, .cn-page-visitrequestpharmacy) .cn-appt {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 4px;
}
#main-content:is(.cn-page-visitrequesttimepreference, .cn-page-visitrequestlocation, .cn-page-visitrequestconsents, .cn-page-visitrequestreason, .cn-page-visitrequestform, .cn-page-visitrequestsymptoms, .cn-page-visitrequesthealthprofile, .cn-page-visitrequestdocument, .cn-page-visitrequestconfirmpharmacy, .cn-page-visitrequestpharmacy) .cn-appt__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy-100);
    color: var(--cn-navy-2);
    font-size: 13px;
    font-weight: 600;
}
    #main-content:is(.cn-page-visitrequesttimepreference, .cn-page-visitrequestlocation, .cn-page-visitrequestconsents, .cn-page-visitrequestreason, .cn-page-visitrequestform, .cn-page-visitrequestsymptoms, .cn-page-visitrequesthealthprofile, .cn-page-visitrequestdocument, .cn-page-visitrequestconfirmpharmacy, .cn-page-visitrequestpharmacy) .cn-appt__chip svg {
        width: 15px;
        height: 15px;
        color: var(--cn-navy);
        flex: 0 0 15px;
    }
@media (max-width: 992px) {
    #main-content:is(.cn-page-visitrequesttimepreference, .cn-page-visitrequestlocation, .cn-page-visitrequestconsents, .cn-page-visitrequestreason, .cn-page-visitrequestform, .cn-page-visitrequestsymptoms, .cn-page-visitrequesthealthprofile, .cn-page-visitrequestdocument, .cn-page-visitrequestconfirmpharmacy, .cn-page-visitrequestpharmacy) .cn-appt {
        justify-content: flex-start;
    }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MY PHARMACY (patient/pharmacy/index → pharmacy/Index.cshtml). ║
   ║  Reskin only — matches C:\mockups\pharmacyindex-v2.html. Scope ║
   ║  #main-content.cn-page-pharmacyindex. The Google map (#dvMap), ║
   ║  the #confirm-pharmacy dxButton and every ViewBag binding are  ║
   ║  preserved; this only lays the saved pharmacy out as a         ║
   ║  horizontal info card above a full-width map. Reuses the       ║
   ║  shared cn-title / cn-subtitle / cn-back primitives.           ║
   ╚══════════════════════════════════════════════════════════════╝ */
#main-content.cn-page-pharmacyindex .cn-back-wrap {
    margin: 2px 0 10px;
}

/* stack: details card on top, full-width map below */
#main-content.cn-page-pharmacyindex .cn-pharm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

/* pharmacy details — horizontal info bar */
#main-content.cn-page-pharmacyindex .cn-card {
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-elev);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
}
#main-content.cn-page-pharmacyindex .cn-pcard__body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    flex-wrap: wrap;
}
#main-content.cn-page-pharmacyindex .cn-pcard__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--cn-navy-50);
    color: var(--cn-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
    #main-content.cn-page-pharmacyindex .cn-pcard__icon svg {
        width: 25px;
        height: 25px;
    }
#main-content.cn-page-pharmacyindex .cn-pcard__id {
    min-width: 0;
}
#main-content.cn-page-pharmacyindex .cn-pcard__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cn-success);
}
    #main-content.cn-page-pharmacyindex .cn-pcard__kicker svg {
        width: 13px;
        height: 13px;
    }
#main-content.cn-page-pharmacyindex .cn-pcard__name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cn-text);
    margin: 3px 0 0;
}
#main-content.cn-page-pharmacyindex .cn-detail {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding-left: 20px;
    border-left: 1px solid var(--cn-border);
}
#main-content.cn-page-pharmacyindex .cn-detail__ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--cn-navy);
    margin-top: 1px;
}
    #main-content.cn-page-pharmacyindex .cn-detail__ico svg {
        width: 20px;
        height: 20px;
    }
#main-content.cn-page-pharmacyindex .cn-detail__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cn-text-3);
}
#main-content.cn-page-pharmacyindex .cn-detail__value {
    font-size: 14px;
    color: var(--cn-text);
    margin-top: 2px;
    line-height: 1.35;
}

/* action button — push right, size to the design system */
#main-content.cn-page-pharmacyindex .cn-pcard__actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}
#main-content.cn-page-pharmacyindex .cn-choose-btn.dx-button {
    height: 44px !important;
    width: auto;
    border-radius: var(--cn-radius);
    box-shadow: none;
}
    #main-content.cn-page-pharmacyindex .cn-choose-btn .dx-button-content {
        padding: 0 18px;
    }

/* map — full-width rounded card (Google renders tiles into #dvMap) */
#main-content.cn-page-pharmacyindex #form {
    width: 100%;
}
#main-content.cn-page-pharmacyindex #dvMap {
    width: 100%;
    height: 440px;
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-sm);
    overflow: hidden;
    background: #E8EEF3;
}

/* responsive — mobile-first (most customers are mobile) */
@media (max-width: 820px) {
    #main-content.cn-page-pharmacyindex .cn-pcard__body {
        align-items: flex-start;
        gap: 16px;
    }
    #main-content.cn-page-pharmacyindex .cn-pcard__id,
    #main-content.cn-page-pharmacyindex .cn-detail {
        flex-basis: 100%;
    }
    #main-content.cn-page-pharmacyindex .cn-detail {
        padding-left: 0;
        border-left: 0;
    }
    #main-content.cn-page-pharmacyindex .cn-pcard__actions {
        margin-left: 0;
        width: 100%;
    }
        #main-content.cn-page-pharmacyindex .cn-choose-btn.dx-button {
            width: 100%;
        }
}
@media (max-width: 640px) {
    #main-content.cn-page-pharmacyindex #dvMap {
        height: 320px;
    }
}

/* ============================================================
   UPCOMING VISITS PAGE (provider/upcomingvisit/Index.cshtml).

   Scope: #main-content.cn-page-upcomingvisit. Only the page-specific
   dxCalendar bits live here — the selected-day fill, the "has visits"
   .holiday marker, and the .readonly lock. Everything else on the page
   reuses shared primitives (cn-back, cn-title, cn-grid-card, cn-join,
   cn-legend, …). Scoped so no other dxCalendar in the app is affected.
   ============================================================ */

/* Selected day — paint the cell brand navy so it matches the Join button
   (var(--cn-navy)) instead of the DevExtreme theme's default blue accent. */
#main-content.cn-page-upcomingvisit .dx-calendar-cell.dx-calendar-selected-date span,
#main-content.cn-page-upcomingvisit .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today span {
    color: #fff !important;
    box-shadow: inset 0 0 0 1000px var(--cn-navy) !important;
}

/* "Has visits" day marker — navy-50 filled badge with a navy border + navy
   bold text so the day clearly stands out. Matches the cn-legend "Has
   visits" swatch. */
#main-content.cn-page-upcomingvisit .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
    text-shadow: none;
    font-weight: 700;
    color: var(--cn-navy);
    background: var(--cn-navy-50);
    border: 1px solid var(--cn-navy);
    border-radius: var(--cn-radius);
    padding: 2px 7px;
}

/* On the selected day flip the marker to white so the number stays readable
   when a day is both selected and has visits. */
#main-content.cn-page-upcomingvisit .dx-calendar-cell.dx-calendar-selected-date .holiday {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
}

#main-content.cn-page-upcomingvisit .readonly {
    -webkit-user-modify: read-only;
    pointer-events: none;
}

/* The column-resize grip handle for dxDataGrid headers is defined globally
   at the end of this file (applies to every grid, not just this page). */

/* ============================================================
   GLOBAL — dxDataGrid column-resize handle.

   Column resizing is enabled app-wide (getDxGridOptions sets
   allowColumnResizing + columnResizingMode: "widget"), but DevExtreme only
   shows a resize cursor on hover of the header edge — there is no visible
   handle. Paint a small dotted grip icon centred on each header cell's
   right edge (the line the drag-resize happens on) so it's discoverable on
   every grid. The icon is pointer-events:none, so the drag still lands on
   DevExtreme's real resize handle underneath. Command columns (select /
   edit / adaptive / expand) and the last column are skipped.
   ============================================================ */
.dx-datagrid-headers .dx-header-row > td {
    position: relative;
    overflow: visible;
}
    .dx-datagrid-headers .dx-header-row > td:not(.dx-command-select):not(.dx-command-edit):not(.dx-command-adaptive):not(.dx-command-expand):not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        width: 8px;
        height: 18px;
        z-index: 2;
        opacity: .55;
        pointer-events: none;
        transition: opacity .12s;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='16' viewBox='0 0 6 16' fill='%2394A3B8'%3E%3Ccircle cx='1.5' cy='3' r='1'/%3E%3Ccircle cx='4.5' cy='3' r='1'/%3E%3Ccircle cx='1.5' cy='8' r='1'/%3E%3Ccircle cx='4.5' cy='8' r='1'/%3E%3Ccircle cx='1.5' cy='13' r='1'/%3E%3Ccircle cx='4.5' cy='13' r='1'/%3E%3C/svg%3E") no-repeat center;
    }
    /* darken the grip on header hover so it reads as interactive */
    .dx-datagrid-headers .dx-header-row > td:hover::after {
        opacity: 1;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='16' viewBox='0 0 6 16' fill='%230C5494'%3E%3Ccircle cx='1.5' cy='3' r='1'/%3E%3Ccircle cx='4.5' cy='3' r='1'/%3E%3Ccircle cx='1.5' cy='8' r='1'/%3E%3Ccircle cx='4.5' cy='8' r='1'/%3E%3Ccircle cx='1.5' cy='13' r='1'/%3E%3Ccircle cx='4.5' cy='13' r='1'/%3E%3C/svg%3E") no-repeat center;
    }

/* ============================================================
   SIGN-IN (AUTH) PAGE — features/auth/login.cshtml.

   Migrated out of that page's inline <style>. Presentation only; matches
   C:\mockups\login-v2.html. Scoped to .cn-auth (the login card wrapper). The
   page-canvas rule is scoped to .cn-auth .section (NOT body.logged-in, which is
   app-wide) so no other page's .section is touched. The field-button overrides
   are scoped with #email / #password so they beat the ID-weighted
   :is(.dx-form, #paymentinfo) .dx-button rules earlier in this file. Tokens
   come from the :root block at the top of this file.
   ============================================================ */

/* page canvas: mockup gradient + vertical centering */
.cn-auth .section {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(12,84,148,.06), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(12,84,148,.05), transparent 55%),
        var(--cn-bg) !important;
    min-height: calc(100vh - 64px);
    display: flex; align-items: center; justify-content: center;
}
.cn-auth .section-content { width: 100%; padding: clamp(24px,6vw,56px) 0 !important; }

/* sign-in card */
.cn-auth .box-shadow {
    max-width: 440px;
    margin: 0 auto;
    background: var(--cn-elev);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-xl);
    box-shadow: var(--cn-shadow-lg);
    padding: clamp(24px,5vw,36px) !important;
}
/* let the centered card control its own width */
.cn-auth .col-md-8.col-lg-6 { flex: 0 0 100%; max-width: 100%; }

.cn-auth__mark {
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
    .cn-auth__mark img { height: 40px; width: auto; max-width: 100%; }

.cn-auth h1 {
    font-family: var(--cn-font);
    font-size: 24px; font-weight: 700; letter-spacing: -.02em;
    color: var(--cn-text); text-align: center; margin: 0;
}
.cn-auth__sub {
    text-align: center; color: var(--cn-text-2);
    font-family: var(--cn-font); font-size: 14.5px; margin: 6px 0 26px;
}

/* email/password field layout only. The editor look (border, focus, leading
   icon, show/hide button) is driven by DevExpress editor properties in the
   page script — stylingMode:"outlined" + buttons — not CSS. */
.cn-auth .dx-field { margin: 0 0 18px !important; display: block; }
.cn-auth .dx-field-value { width: 100% !important; float: none !important; }
.cn-auth .dx-field-label {
    font-family: var(--cn-font); font-size: 13px !important; font-weight: 600;
    color: var(--cn-text); margin-bottom: 7px; width: auto; float: none;
}
/* Vertically centre the typed text AND the placeholder in the outlined field
   (DevExtreme leaves them sitting slightly high). #email/#password scope so
   these beat publish.css's .dx-form .dx-texteditor rules above. */
.cn-auth #email .dx-texteditor-input,
.cn-auth #password .dx-texteditor-input {
    min-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 46px !important;
}
.cn-auth #email .dx-placeholder,
.cn-auth #password .dx-placeholder { top: 0 !important; }
.cn-auth #email .dx-placeholder::before,
.cn-auth #password .dx-placeholder::before {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 46px !important;
}
/* Seamless field: leading icon (before-button) + eye (after-button) sit INSIDE
   one bordered field, no inner chip/divider. Scoped with #email / #password so
   these beat the ID-weighted :is(.dx-form, #paymentinfo) .dx-button-normal rules
   above (which otherwise force border/background/min-width:110px/height:42px). */
.cn-auth #email .dx-texteditor-buttons-container .dx-button,
.cn-auth #password .dx-texteditor-buttons-container .dx-button,
.cn-auth #create-account-form .dx-texteditor-buttons-container .dx-button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    height: auto !important;
}
    .cn-auth #email .dx-texteditor-buttons-container .dx-button .dx-button-content,
    .cn-auth #password .dx-texteditor-buttons-container .dx-button .dx-button-content,
    .cn-auth #create-account-form .dx-texteditor-buttons-container .dx-button .dx-button-content {
        padding: 0 !important;
        min-width: 0 !important;
        height: auto !important;
    }
.cn-auth #email .dx-texteditor-buttons-container,
.cn-auth #password .dx-texteditor-buttons-container,
.cn-auth #create-account-form .dx-texteditor-buttons-container { border: 0 !important;padding-left: 11px; }
.cn-auth #email .dx-texteditor-buttons-container .dx-icon,
.cn-auth #password .dx-texteditor-buttons-container .dx-icon,
.cn-auth #create-account-form .dx-texteditor-buttons-container .dx-icon {
    color: var(--cn-text-3) !important;
    font-size: 18px !important;
}
/* Keep the dark text colour on browser-autofilled fields. */
.cn-auth .dx-texteditor-input:-webkit-autofill,
.cn-auth .dx-texteditor-input:-webkit-autofill:hover,
.cn-auth .dx-texteditor-input:-webkit-autofill:focus,
.cn-auth .dx-texteditor-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--cn-text) !important;
    caret-color: var(--cn-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* forgot password row (right-aligned) */
.cn-auth .cn-row-between {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin: 2px 0 20px;
}
.cn-auth .cn-row-between a { color: var(--cn-navy); font-size: 13.5px; font-weight: 600; text-decoration: none; }
    .cn-auth .cn-row-between a:hover { text-decoration: underline; }

/* primary submit button (dxButton). dxButton turns the mount DIV itself into
   the button, so the element is #login.dx-button (login) / #new-password.dx-button
   (forgot-password) / #signup.dx-button (join-now Continue) — id specificity beats
   the global .dx-button-default rules earlier in this file. The auth pages share
   this styling. */
.cn-auth :is(#login, #new-password, #signup).dx-button {
    width: 100%; height: 50px; padding: 0; margin-top: 6px;
    border-radius: var(--cn-radius-lg) !important;
    background-color: var(--cn-navy) !important; border-color: var(--cn-navy) !important;
    box-shadow: 0 1px 3px rgba(12,84,148,.28) !important;
}
    .cn-auth :is(#login, #new-password, #signup).dx-button.dx-state-hover,
    .cn-auth :is(#login, #new-password, #signup).dx-button.dx-state-focused,
    .cn-auth :is(#login, #new-password, #signup).dx-button.dx-state-active {
        background-color: var(--cn-navy-2) !important; border-color: var(--cn-navy-2) !important;
    }
.cn-auth :is(#login, #new-password, #signup) .dx-button-text {
    font-family: var(--cn-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: none;
}
    /* trailing arrow to match the mockup */
    .cn-auth :is(#login, #new-password, #signup).dx-button .dx-button-content {
        display: flex; align-items: center; justify-content: center; gap: 9px;
    }
    .cn-auth :is(#login, #new-password, #signup).dx-button .dx-button-content::after {
        content: ""; width: 18px; height: 18px; flex: 0 0 18px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    }

/* error message */
.cn-auth .noauth {
    display: flex; align-items: flex-start; gap: 9px;
    background: var(--cn-danger-bg); border: 1px solid rgba(220,38,38,.25);
    color: #991B1B !important; border-radius: var(--cn-radius-lg);
    padding: 11px 13px; font-size: 13.5px; margin: 18px 0 0;
}

/* trust line */
.cn-auth__trust {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    color: var(--cn-text-3); font-family: var(--cn-font); font-size: 12.5px; margin-top: 22px;
}
    .cn-auth__trust svg { width: 14px; height: 14px; color: var(--cn-success); }

/* secondary "Already a member? / Don't have an account?" line */
.cn-auth__alt {
    text-align: center; color: var(--cn-text-2);
    font-family: var(--cn-font); font-size: 14px; margin-top: 20px;
}
    .cn-auth__alt strong { color: var(--cn-text); }
    .cn-auth__alt a { color: var(--cn-navy); font-weight: 600; text-decoration: none; }
    .cn-auth__alt a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .cn-auth .section-content { padding-top: 20px !important; }
    .cn-auth .box-shadow { border-radius: 14px; box-shadow: var(--cn-shadow-md); }
}

/* Set-up-profile (features/patient/setupprofile/setup-profile.cshtml) reuses the
   shared .cn-auth card, but it's a WIDE 2-column dxForm — widen the card so the
   two columns breathe (the shared 440px cap suits the single-column sign-in). */
.cn-page-setupprofile.cn-auth .box-shadow { max-width: 760px; }