@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ==========================================================================
   My Dashboard - new developer experience
   Scoped under .vd-dash. Proportions follow the Canva comp:
   1156px content column, ~68px setup rows, 20px card gaps, 13px card radius.
   ========================================================================== */

.vd-dash {
    --blackberry: #2E2155;
    /* ds/veradigm-overrides.css --ty-primary-light */
    --primary-light: #EAE7F1;
    --midnight: #1D173C;
    --indigo: #403C7E;
    --plum: #7A3578;
    --grape: #665998;
    --coral: #E6594C;
    --blueberry: #6282C1;
    --gold: #FAB554;
    --green: #3E9E62;

    --page: #FBF8FC;
    --card: #FFFFFF;
    --line: #DDD9E5;
    --line-soft: #F0EDF6;
    --ink: #1F1A2E;
    --body: #3D3654;   /* VCO-1345: was #5B5570 */
    --muted: #4A4460;  /* VCO-1345: was #8F8A9C */

    --radius: 13px;
    --shadow: 0 1px 2px rgba(46,33,85,.05), 0 4px 14px rgba(46,33,85,.06);

    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background: var(--page);
    color: var(--body);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.vd-dash *,
.vd-dash *::before,
.vd-dash *::after { box-sizing: border-box; }

/* The dashboard is an app shell, not a marketing page: the comp runs it full
   width beside the rail with a flat 32px gutter, so it deliberately opts out
   of the centred --vd-shell-max used by the public pages. */
.vd-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 32px;
}

.vd-dash p { margin: 0; }

/* Fix (2026-09, code review): was ".vd-dash a" (a class+tag selector,
   specificity 0,1,1) - broad enough to beat any single-class link style
   defined anywhere under .vd-dash (0,1,0), which is why .vd-topbar-signup's
   "Sign Up" button rendered invisible (VCO-1009 audit) and needed a
   ".vd-dash"-prefixed workaround to fix, and why .vd-apidoc-rowlink/
   doc-guide.css needed the same workaround before that. :where() always
   contributes zero specificity, so this reset now loses to ANY single-class
   link style automatically - no more prefix-workarounds needed for new
   components, and the two added by this session's own work (below) were
   simplified back to their plain form. */
:where(.vd-dash) a { color: var(--indigo); text-decoration: none; }
:where(.vd-dash) a:hover { text-decoration: underline; }

/* ==========================================================================
   Page chrome
   This stylesheet only loads on the dashboard, so hiding the global header
   and footer here is scoped to this page. The comp has its own top bar and
   icon rail, built below.
   ========================================================================== */

#nav-header,
.menu-trigger,
.footer { display: none !important; }

html, body { background: #F6F5F9; }

/* Fix (per user request, 2026-09): .vd-legalbar (the footer) used to live
   inside .vd-main, pushed to the bottom of THAT column only via
   margin-top:auto - so it only ever spanned the main content's width,
   with the rail's own separate white column sitting beside it doing
   nothing, which read as an unfinished seam. It's now a sibling of
   .vd-shell (see _DashboardShell.cshtml) so it spans the full page width
   below both rail and main. That moves the "pin to the true bottom of a
   short page" job up a level: .vd-dash is the flex column now (min-height
   100vh, so it's always at least one viewport tall), .vd-shell takes
   flex:1 0 auto to fill whatever space the footer doesn't need, and the
   footer just follows it - no margin-top:auto needed on the footer
   itself. On a page taller than one viewport, .vd-dash grows to fit and
   the footer still lands directly after the content, not stranded below
   it. */
.vd-dash { display: flex; flex-direction: column; min-height: 100vh; }

.vd-shell { display: flex; flex: 1 0 auto; align-items: stretch; }

/* ---------- Left icon rail ---------- */

/* Collapsed 60px -> expanded 224px, matching the comp's
   `width 160ms cubic-bezier(.2,.7,.3,1)`.

   Fix (per user request, 2026-09): .vd-rail used to be the sticky element
   itself (position:sticky, height:100vh, align-self:flex-start - all three
   removed below). That fixed its OWN box to exactly one viewport, so on a
   page taller than 100vh the white background/border simply ended there
   and .vd-shell's page background showed through underneath - the "menu
   abruptly ends" report. .vd-rail is now a plain flex item with no
   align-self override, so .vd-shell's default align-items:stretch sizes it
   to match .vd-main's full height, however tall that is. The sticky/100vh
   behavior moved to .vd-rail-inner below, so the nav content still pins to
   the viewport while scrolling - only the background/border now spans the
   whole page. */
.vd-rail {
    flex: 0 0 60px;
    width: 60px;
    background: #fff;
    border-right: 1px solid var(--line);
    transition: width 160ms cubic-bezier(.2,.7,.3,1), flex-basis 160ms cubic-bezier(.2,.7,.3,1);
}

.vd-rail--open { flex-basis: 224px; width: 224px; }

/* Carries the sticky/one-viewport behavior .vd-rail itself used to have -
   see the comment on .vd-rail above. */
.vd-rail-inner {
    display: flex;
    flex-direction: column;
    padding: 0 0 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* ---- header row: MENU + pin + toggle ---- */

/* 56px tall (not 36px) so it lines up exactly with .vd-topbar's height -
   otherwise the rail's items start noticeably higher than the page header
   next to them and the seam between rail and topbar looks cut off. */
.vd-rail-head {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
    flex: 0 0 auto;
}

.vd-rail-heading {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #4A4460;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease;
}
.vd-rail--open .vd-rail-heading { opacity: 1; }

.vd-rail-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.vd-rail-tool {
    appearance: none;
    border: 0;
    background: transparent;
    width: 26px; height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4A4460; /* VCO-1345: was #8F89A6 */
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}
.vd-rail-tool:hover { background: #F2EFF9; color: var(--indigo); }
.vd-rail-tool:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.vd-rail-tool svg { width: 15px; height: 15px; stroke: currentColor; display: block; }

/* the pin only makes sense once labels are visible */
.vd-rail-pin { opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.vd-rail--open .vd-rail-pin { opacity: 1; pointer-events: auto; }
.vd-rail-pin.is-pinned { background: #EFEAFA; color: var(--indigo); }

/* collapsed: centre the toggle in the 60px gutter */
.vd-rail:not(.vd-rail--open) .vd-rail-head { padding: 0; justify-content: center; }
.vd-rail:not(.vd-rail--open) .vd-rail-tools { margin-left: 0; }

/* ---- scroll area ---- */

.vd-rail-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
}
.vd-rail-scroll::-webkit-scrollbar { width: 6px; }
.vd-rail-scroll::-webkit-scrollbar-thumb { background: #E2DEEC; border-radius: 99px; }

/* ---- group label ---- */

/* Fix (per user request, 2026-09): matched against a screenshot of the
   actual design comp - the top-level group captions (Administration /
   Getting started / Integrate / Account) are plain, static, bold labels,
   NOT collapsible buttons. An earlier pass on this file (before a real
   screenshot was available) had made these themselves into collapsible
   .vd-rail-btn--grouptoggle buttons with their own chevrons; that's been
   dropped in favor of the comp's real pattern - collapsibility lives one
   level deeper, in .vd-rail-subaccordion below. */
.vd-rail-group {
    font-size: 13px;
    font-weight: 700;
    color: #2E2155;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease;
    padding: 0 18px;
    margin: 18px 0 6px;
}
.vd-rail-group:first-child { margin-top: 4px; }
.vd-rail--open .vd-rail-group { opacity: 1; }

/* collapsed: groups become a hairline instead of text */
.vd-rail:not(.vd-rail--open) .vd-rail-group {
    height: 1px;
    padding: 0;
    margin: 8px auto;
    width: 24px;
    background: var(--line);
    overflow: hidden;
    color: transparent;
}

/* ---- nested sub-accordion (Explore / Process Overview / Create your app /
   Test / Reference) ----
   Smaller and lighter-weight than a full .vd-rail-btn row (no icon, caption
   type) but reuses the exact [data-rail-toggle]/.vd-rail-sub/is-open JS
   already driving the Admin Module flyout - no new script needed. */
.vd-rail-subaccordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 16px);
    height: 30px;
    margin: 2px 8px;
    padding: 0 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4A4460; /* VCO-1345: was #8B84A3 */
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}
.vd-rail-subaccordion:hover { background: #F2EFF9; color: #2E2155; }
.vd-rail-subaccordion .vd-rail-chev { width: 12px; height: 12px; flex: 0 0 12px; stroke: currentColor; opacity: .7; }
.vd-rail-subaccordion:hover .vd-rail-chev { opacity: 1; }
/* VCO-1310: these caption rows have no icon, so in the collapsed (unpinned)
   60px rail their uppercase labels wrapped into squished words. Hide them
   until the rail opens (hover or pin) - icons only, like the rest. */
.vd-rail:not(.vd-rail--open) .vd-rail-subaccordion { display: none; }

/* ---- nav item ---- */

.vd-rail-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
    margin: 1px 8px;
    padding: 0 10px;
    border-radius: 8px;
    color: #57516E;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .14s ease, color .14s ease;
}
.vd-rail-btn:hover { background: #F2EFF9; color: var(--indigo); text-decoration: none; }
.vd-rail-btn.is-active { background: #EFEAFA; color: var(--indigo); font-weight: 600; }

.vd-rail-btn svg.vd-rail-ico,
.vd-rail-btn-link svg.vd-rail-ico {
    width: 17px; height: 17px;
    flex: 0 0 17px;
    display: block;
    stroke: currentColor;
}

.vd-rail-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 120ms ease;
}
.vd-rail--open .vd-rail-label { opacity: 1; }

.vd-rail-chev {
    width: 13px; height: 13px;
    flex: 0 0 13px;
    stroke: #B3ADC4;
    opacity: 0;
    transition: opacity 120ms ease;
}
.vd-rail--open .vd-rail-chev { opacity: 1; }

/* collapsed: icon centred, everything else out of the way */
.vd-rail:not(.vd-rail--open) .vd-rail-btn { justify-content: center; padding: 0; gap: 0; }

/* ---- expandable group: single-button toggle (Veradigm Products) ----
   Unlike the Admin Module row below, this is ONE <button> - icon, label and
   chevron all inside it - so it keeps .vd-rail-btn's own padding/gap/height
   and only needs the native <button> chrome reset that an <a> never had. */
.vd-rail-btn--grouptoggle {
    width: 100%;
    border: none;
    background: transparent;
    /* Fix (per user request, 2026-09): "font: inherit" also resets
       font-weight/size, which silently overrode .vd-rail-group's own bold
       13px label styling below (same 0,1,0 specificity, later in source) -
       every collapsible header rendered at normal weight instead of bold.
       font-family alone is enough to stop this <button> using the OS's
       default button font. */
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.vd-rail-btn--grouptoggle .vd-rail-chev { transition: opacity 120ms ease, transform 120ms ease; }
.vd-rail-btn--grouptoggle .vd-rail-chev.is-open { transform: rotate(90deg); }

/* ---- expandable group (VCO-1034: Admin Module) ---- */

/* Admin Module row: a real <a> (navigates to Admin/Index) plus a separate
   chevron <button> (expands the flyout) - not one combined button, so
   clicking the label doesn't just toggle the sub-list anymore. */
.vd-rail-btn--toggle {
    display: flex;
    align-items: center;
    width: calc(100% - 16px);
    height: auto;
    margin: 1px 8px;
    padding: 0;
    gap: 0;
}

.vd-rail-btn-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    color: inherit;
    border-radius: 8px;
    white-space: nowrap;
}
.vd-rail-btn-link:hover { background: #F2EFF9; color: var(--indigo); text-decoration: none; }
/* Fix (per user request, 2026-09): Explore (the only .vd-rail-btn-link that
   navigates, vs. Admin Module's toggle-only one) never got an active-state
   rule, so landing on Program Overview - "Getting Started"'s first item -
   left the whole rail with nothing highlighted, unlike every other page. */
.vd-rail-btn-link.is-active { background: #EFEAFA; color: var(--indigo); font-weight: 600; }

/* Fix (per user request, 2026-09): Admin Module's label is a <button> that
   only opens the flyout below it (see _DashboardRail.cshtml) - it never
   navigates anywhere, so unlike every other rail link, it shouldn't hover
   grey like a clickable destination. Reset the button defaults the other
   rail links don't need (border/background/font/text-align), then cancel
   just the hover highlight. */
.vd-rail-btn-link--toggle-only {
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.vd-rail-btn-link--toggle-only:hover { background: none; color: inherit; }

.vd-rail-chev-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
}
.vd-rail-chev-btn:hover { background: #F2EFF9; }
.vd-rail-chev-btn:hover .vd-rail-chev { stroke: var(--indigo); }

.vd-rail-btn--toggle .vd-rail-chev { transition: opacity 120ms ease, transform 120ms ease; }
.vd-rail-btn--toggle .vd-rail-chev.is-open { transform: rotate(90deg); }

/* collapsed rail: hide the chevron button entirely, centre the icon like every other item */
.vd-rail:not(.vd-rail--open) .vd-rail-chev-btn { display: none; }
.vd-rail:not(.vd-rail--open) .vd-rail-btn-link { justify-content: center; padding: 0; gap: 0; }

.vd-rail-sub {
    display: none;
    padding: 2px 0 6px;
}
.vd-rail-sub.is-open { display: block; }
.vd-rail:not(.vd-rail--open) .vd-rail-sub { display: none; }
/* Cursor review (PR #967): VCO-1034 asked for hover, not click-to-expand -
   keep the click toggle for keyboard/touch users but also open on hover.
   Fix (2026-09): `:hover + .vd-rail-sub` only stayed true while the pointer
   was directly over .vd-rail-btn--toggle - moving down into .vd-rail-sub to
   click a link left that element's box first, so the hover match dropped
   and the flyout closed mid-travel, before the pointer ever reached it.
   Hovering .vd-rail-group-wrap instead keeps it open for the whole
   button+sub area, since the two sit flush with no gap between them. */
.vd-rail--open .vd-rail-group-wrap:hover .vd-rail-sub { display: block; }

.vd-rail-subgroup {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4A4460;
    padding: 10px 24px 3px;
    white-space: nowrap;
}
.vd-rail-subgroup:first-child { padding-top: 4px; }

.vd-rail-subitem {
    display: block;
    margin: 0 8px 1px 20px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    color: #3D3654;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .14s ease, color .14s ease;
}
.vd-rail-subitem:hover { background: #F2EFF9; color: var(--indigo); text-decoration: none; }
.vd-rail-subitem.is-active { background: #EFEAFA; color: var(--indigo); font-weight: 600; }

/* ---------- Top bar ---------- */

.vd-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Cursor review (PR #967): the only place Terms of Use/Privacy Policy/Contact
   Us are reachable on a redesigned page while signed in - #nav-header and
   .footer (where they live in _Layout) are hidden shell-wide below.
   VCO-1104: expanded to the full legacy footer link set, briefly two rows
   (site links, then copyright + legal links).
   Fix (per user request, 2026-09): margin-top:auto used to be what pinned
   this to the true bottom of a short page, back when .vd-legalbar lived
   inside .vd-main next to the rail. Now a sibling of .vd-shell spanning
   the full page width (see .vd-dash/.vd-shell above) - .vd-dash's own
   flex-column + .vd-shell's flex:1 0 auto does that job instead, so this
   rule isn't needed here anymore.
   Fix (per user request, 2026-09): back to a single line (site links +
   legal links + copyright, all in the one .vd-legalbar-row now) instead
   of two stacked rows - .vd-legalbar itself no longer needs to be a
   flex-column with its own gap, since it only ever wraps that one row.
   Padding trimmed back down too, since a one-line footer doesn't need as
   much vertical room as the two-row version did. */
/* Fix (per user request, 2026-10): tinted to the same off-white the rail/
   cards already use (#FAF9FD, e.g. .vd-apps-list/.vd-app:hover above) instead
   of flat white-on-white, which read as a leftover utility bar rather than
   part of the shell. Restructured from one flex row into a 3-zone grid -
   site links / centered copyright / legal links - so the copyright reads as
   genuinely centered instead of pushed to the far right past the legal
   links (.vd-legalbar-sep's divider is gone with it; the two link groups
   are no longer adjacent). */
.vd-legalbar {
    padding: 10px 28px;
    font-size: 12px;
    color: var(--muted);
    background: #FAF9FD;
    border-top: 1px solid var(--line);
}
/* Fix (per user request, 2026-10): absolute-centering against the row
   guaranteed the copyright sat at the row's exact midpoint, but since the
   site-links group is wider than the legal-links group, that left unequal
   gaps on either side of it (173px vs 534px, measured). Plain flexbox
   space-between on the three items guarantees the two "between" gaps are
   equal instead - matching requested feedback over strict full-row
   centering. */
.vd-legalbar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.vd-legalbar-links { display: flex; flex-wrap: wrap; gap: 18px; }
.vd-legalbar-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.vd-legalbar-copyright { white-space: nowrap; }
.vd-legalbar a { color: var(--muted); text-decoration: none; }
.vd-legalbar a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 760px) {
    .vd-legalbar-row { flex-direction: column; justify-content: center; }
    .vd-legalbar-links, .vd-legalbar-legal { justify-content: center; }
    .vd-legalbar-copyright { position: static; transform: none; white-space: normal; order: -1; }
}

.vd-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 56px;
    min-height: 56px;
    flex-shrink: 0;
    padding: 0 24px;
    background: #fff;
    border-bottom: 1px solid #DDD9E5;
    position: sticky;
    top: 0;
    z-index: 40;
}

/* VCO-1206: re-added (see removal comment this replaced, above). Height-capped
   rather than width-capped since the SVG lockup is wide (~5.4:1) - a width cap
   would make it taller than the 56px bar allows. */
.vd-topbar-logo { display: flex; align-items: center; flex: 0 0 auto; }
.vd-topbar-logo img { display: block; height: 28px; width: auto; }

/* shell.jsx TopBar: active page pill - primary-light fill, primary border */
.vd-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 15px;
    border-radius: 99px;
    background: var(--primary-light, #EAE7F1);
    border: 1px solid var(--blackberry);
    color: var(--blackberry);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.vd-tab:hover { text-decoration: none; color: var(--blackberry); background: #E1DDEC; }
.vd-tab svg { width: 15px; height: 15px; stroke: currentColor; }

/* VCO-1071 gap fix: nav for signed-out visitors on the redesigned inner
   pages, replacing the #nav-header nav dashboard.css hides everywhere else. */
.vd-topbar-nav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.vd-topbar-navlink {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.vd-topbar-navlink:hover { background: var(--primary-light, #EAE7F1); color: var(--indigo); text-decoration: none; }

/* Fix (2026-09, VCO-1071 review): FHIR/Unity/Practice Fusion are dropdowns
   per the ticket, not flat links - same open/close visual language as
   .vd-usermenu's account dropdown, just anchored under a topbar link
   instead of the account chip. */
.vd-topbar-navmenu { position: relative; }

.vd-topbar-navmenu-toggle {
    appearance: none;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    gap: 4px;
}

.vd-topbar-navmenu-caret { width: 12px; height: 12px; color: #3D3654; flex: 0 0 auto; transition: transform .14s ease; }
.vd-topbar-navmenu.is-open .vd-topbar-navmenu-toggle { background: var(--primary-light, #EAE7F1); color: var(--indigo); }
.vd-topbar-navmenu.is-open .vd-topbar-navmenu-caret { transform: rotate(180deg); color: var(--indigo); }

.vd-topbar-navmenu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    min-width: 200px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(46, 33, 85, .16);
}

.vd-topbar-navmenu.is-open .vd-topbar-navmenu-panel { display: block; }

.vd-topbar-navmenu-item {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.vd-topbar-navmenu-item:hover { background: #F2EFF9; color: var(--indigo); text-decoration: none; }

/* VCO-1234: the signed-out "Integrate" menu is a 4-column mega menu, same
   groups as _Layout's ul.headerdropDown.vh-mega (site-header.css), so the
   top panel reads the same on the home page and on the shell pages. */
.vd-topbar-navmenu-panel--mega {
    grid-template-columns: repeat(4, minmax(170px, auto));
    width: max-content; /* absolutely positioned under a narrow toggle - size to the columns, not the parent */
    gap: 4px 12px;
    padding: 14px;
}
.vd-topbar-navmenu.is-open .vd-topbar-navmenu-panel--mega { display: grid; }
/* The panel opens from the Integrate toggle (~400px in from the left), and
   the topbar nav stays visible down to 780px - four columns (~890px) would run
   past the right edge below ~1300px. Fold to two columns, then one. */
@media (max-width: 1320px) {
    .vd-topbar-navmenu-panel--mega { grid-template-columns: repeat(2, minmax(170px, auto)); }
}
@media (max-width: 960px) {
    .vd-topbar-navmenu-panel--mega { grid-template-columns: minmax(200px, auto); max-height: calc(100vh - 80px); overflow-y: auto; }
}
.vd-topbar-mega-col { display: flex; flex-direction: column; min-width: 0; }
.vd-topbar-mega-label {
    padding: 4px 12px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3D3654;
}

.vd-search {
    flex: 1 1 auto;
    max-width: 420px;
    position: relative;
    display: flex;
    align-items: center;
}
.vd-search svg {
    position: absolute;
    left: 11px;
    width: 14px; height: 14px;
    stroke: #6D6680;
    pointer-events: none;
}
.vd-search input {
    width: 100%;
    height: 36px;
    border: 1px solid #DDD9E5;
    border-radius: 4px;
    background: #FBF8FC;
    padding: 0 12px 0 33px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
}
.vd-search input::placeholder { color: #8B8399; }
.vd-search input:focus {
    outline: none;
    border-color: var(--grape);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(102,89,152,.12);
}

.vd-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Fix (per user request, 2026-10): bell icon removed from the topbar - no
   .vd-bell/.vd-bell-count markup left to style. */

/* shell.jsx TopBar: the account chip is a bordered pill */
.vd-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 99px;
    flex-shrink: 0;
}
.vd-user:hover { text-decoration: none; background: #FBF8FC; }
.vd-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--grape), var(--indigo));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}
.vd-user-name { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.15; display: block; }
.vd-user-org { font-size: 10px; color: #3D3654; line-height: 1.15; display: block; }
.vd-user-caret { width: 14px; height: 14px; color: #3D3654; flex: 0 0 auto; transition: transform .14s ease; }

/* ---------- Account menu ----------
   The chip became a <button> so it can own a dropdown. This is where sign-out
   and Stop Impersonating live now that #nav-header is hidden. */

.vd-usermenu { position: relative; flex-shrink: 0; }

.vd-usermenu .vd-user {
    appearance: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.vd-usermenu.is-open .vd-user { background: #FBF8FC; }
.vd-usermenu.is-open .vd-user-caret { transform: rotate(180deg); }

.vd-usermenu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 232px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(46, 33, 85, .16);
}

.vd-usermenu.is-open .vd-usermenu-panel { display: block; }

.vd-usermenu-item {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.vd-usermenu-item:hover { background: #F2EFF9; color: var(--indigo); text-decoration: none; }
.vd-usermenu-item--warn { color: #B4231B; font-weight: 600; }
.vd-usermenu-item--warn:hover { background: #FDECEA; color: #8E1B15; }
.vd-usermenu-item--muted { font-size: 12px; color: #3D3654; }

.vd-usermenu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------- Signed-out topbar ----------
   The public docs pages render this shell for anonymous visitors, so the
   account chip/search/bell are replaced by sign-in CTAs (PR #965 review). */

.vd-topbar-spacer { flex: 1 1 auto; }

.vd-topbar-signin,
.vd-topbar-signup {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Bug found auditing INT: plain .vd-topbar-signin/.vd-topbar-signup (one
   class) lost to the global ".vd-dash a" reset above, which silently put
   indigo text back onto .vd-topbar-signup's indigo background, making
   "Sign Up" invisible. Fixed at the root instead (see ":where(.vd-dash) a"
   above) rather than qualifying every button - these are back to plain
   single-class rules. */
.vd-topbar-signin { color: var(--ink); }
.vd-topbar-signin:hover { background: #F2EFF9; color: var(--indigo); text-decoration: none; }

.vd-topbar-signup { background: var(--indigo); color: #fff; border: 1px solid var(--indigo); }
.vd-topbar-signup:hover { background: var(--blackberry); border-color: var(--blackberry); color: #fff; text-decoration: none; }

/* ---------- Environment badge (topbar copy) ----------
   _Layout's badge is inside the hidden #nav-header, so non-PROD environments
   need this one to stay visible on the redesigned pages. */

.vd-topbar-env {
    flex: 0 0 auto;
    padding: 3px 11px;
    background: #FFF6C2;
    color: #6B5A00;
    border: 1px solid #F2DE7A;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    white-space: nowrap;
}

/* rail count badge (comp: Support carries an unread count) */
.vd-rail-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--primary-light, #EAE7F1);
    color: var(--blackberry);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex: 0 0 auto;
}
.vd-rail:not(.vd-rail--open) .vd-rail-badge { display: none; }

/* ---------- Mobile nav (2026-09) ----------
   Fix: below 780px the rail used to be display:none with no replacement at
   all - Admin Module, Program Overview, the FHIR/Unity guides, Sandboxes,
   Support were all unreachable on a phone (the account-avatar dropdown only
   covers Manage Account/My Apps/Log out, nowhere near a substitute). This
   turns the SAME rail into a slide-in drawer instead of hiding it: opened
   via .vd-rail-hamburger (topbar) toggling .vd-rail--mobile-open, with a
   backdrop to dismiss. It piggybacks on .vd-rail--open (already used by the
   desktop hover/pin state) for label visibility, so no separate mobile-only
   label styling was needed. */
.vd-rail-hamburger {
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
}
.vd-rail-hamburger svg { width: 20px; height: 20px; stroke: currentColor; }
.vd-rail-hamburger:hover { background: #F2EFF9; }

.vd-rail-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 40, .45);
    z-index: 205;
}
.vd-rail-backdrop.is-open { display: block; }

/* Keeps the page from scrolling behind the open mobile drawer/backdrop. */
html.vd-rail-locked { overflow: hidden; }

@media (max-width: 780px) {
    .vd-rail-hamburger { display: flex; }

    .vd-rail {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 240px;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        z-index: 210;
        box-shadow: 0 12px 32px rgba(0,0,0,.25);
    }
    .vd-rail.vd-rail--mobile-open { transform: translateX(0); }

    .vd-search { display: none; }
    .vd-user-meta { display: none; }
    .vd-topbar-nav { display: none; }
    /* The wordmark + env badge + "My Dashboard" text together ran to ~440px,
       more than a 375px phone has before even reaching the avatar - the
       whole topbar scrolled horizontally with the avatar clipped off the
       edge. Trims to hamburger + avatar (logo and bell since removed).
       Fix (VCO-1206): logo re-added above 760px, but stays hidden here -
       re-including it would reopen the exact overflow this comment describes. */
    .vd-topbar-logo { display: none; }
    .vd-topbar-env { display: none; }
    .vd-tab { display: none; }
    .vd-topbar { padding: 0 14px; gap: 10px; }

    /* Fix (2026-09, mobile audit): found while verifying the topbar fix above -
       the My Apps card header packs a 3-way segmented filter plus two buttons
       in one unwrapping flex row, pushing .vd-wrap (and the whole page) wider
       than the viewport. Same fix as the topbar: let it wrap instead of
       forcing everything onto one line. Also trims .vd-wrap's fixed 32px
       side padding, which was eating 64px of a 375px screen for no reason
       once nothing inside needs that much breathing room. */
    .vd-wrap { padding: 0 16px; }
    .vd-card-head { flex-wrap: wrap; }
    .vd-card-actions { flex-wrap: wrap; margin-left: 0; width: 100%; }

    /* Fix (2026-09, mobile audit): Admin Module's flyout alone runs 15+ items
       (BuildSections is role-driven and can list every FhirPoint/Unity admin
       tool at once) - opened inline in the drawer's normal page flow, it (or
       Veradigm Products stacked on top of it) pushed FHIR/Unity/Practice
       Fusion/Account far enough down that reaching them meant scrolling
       several screens, which read as the menu "going off the screen" rather
       than just being long. Capping each flyout to its own scrollable panel
       keeps the rest of the drawer's groups within reach without losing any
       items - nothing dropped, just contained. */
    .vd-rail-sub.is-open {
        max-height: 45vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Hero ---------- */

.vd-hero {
    background: linear-gradient(135deg, #2E2155 0%, #3D2F6B 55%, #403C7E 130%);
    color: #fff;
    /* comp: 28px top and bottom, even. The greeting sat high before because
       this was 30/22 and the row was top-aligned against the taller stats. */
    padding: 28px 0;
}

.vd-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.vd-hello {
    font-size: 40px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
    margin: 0;
    white-space: nowrap;
}

.vd-stats { display: flex; gap: 14px; flex: 0 0 auto; }

.vd-stat {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 110px;
}

.vd-stat-value {
    display: block;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
}

.vd-stat-label {
    display: block;
    font-size: 10px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-top: 2px;
}

/* welcome strip sits inside the hero */
.vd-welcome {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.13);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.9);
}

.vd-welcome b { color: #fff; font-weight: 600; }
.vd-welcome a { color: var(--gold); text-decoration: underline; }
.vd-welcome a:hover { color: #ffd9a0; }
/* Per user request (2026-11): the announcement's X sets [hidden], but
   .vd-welcome { display: flex } overrode the browser's [hidden] rule, so
   clicking it did nothing (and a dismissed announcement kept showing). */
.vd-welcome[hidden] { display: none; }

/* Code review (2026-11): one shared row of inline radios / checkboxes and their
   labels (with an optional text box), used by the redesigned legacy forms -
   replaces four near-identical per-view copies. */
.vd-inline-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink); }
.vd-inline-opts + .vd-inline-opts { margin-top: 6px; }
.vd-inline-opts label { margin: 0 8px 0 0; font-weight: 400; }
.vd-inline-opts input[type="checkbox"], .vd-inline-opts input[type="radio"] { margin: 0 2px 0 0; }
.vd-inline-opts input[type="text"] { margin: 0; }

.vd-badge-icon {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.vd-badge-icon svg { width: 12px; height: 12px; display: block; }

/* VCO-1130: dismiss control for the announcements .vd-welcome pill only -
   the "Welcome to Veradigm Connect" first-run pill above it has no hide
   button and isn't affected. */
.vd-welcome-hide {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    cursor: pointer;
}
.vd-welcome-hide:hover { background: rgba(255,255,255,.14); color: #fff; }
.vd-welcome-hide svg { width: 12px; height: 12px; display: block; }

/* ---------- Body stack ---------- */

.vd-body { padding-top: 20px; }
.vd-stack > * + * { margin-top: 20px; }

/* ---------- Flash / user messages ----------
   StatusMessage (redirect confirmations like "Your password was updated"),
   UserProfileMessageList, and DevPortalMessageList used to render only in
   the legacy dashboard layout - every licence type routes through here now,
   so this card carries them forward. */
.vd-flash {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
}
.vd-flash svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }

.vd-flash--success { background: #EAF5EC; border: 1px solid #C3E2CB; color: #2F7A4B; }
.vd-flash--error   { background: #FDECEA; border: 1px solid #F3C7C1; color: var(--coral); }

.vd-flash-body { flex: 1 1 auto; }
.vd-flash-body h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.vd-flash-body p { margin: 0; color: var(--body); }
.vd-flash-date { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.vd-flash-hide { margin-left: auto; flex: 0 0 auto; font-weight: 600; font-size: 12.5px; color: var(--indigo); white-space: nowrap; }
.vd-flash-hide:hover { color: var(--blackberry); }

.vd-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ---------- Resume strip ----------
   Sits as the top band of the setup card in the comp, not a card of its own. */

.vd-resume {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FDF6E5;
    border-bottom: 1px solid #F2E6C8;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 12px 22px;
    font-size: 13px;
    color: #6B5626;
}

.vd-resume b { color: #3F3414; font-weight: 600; }
.vd-resume svg { width: 15px; height: 15px; flex: 0 0 auto; }

.vd-resume-link {
    margin-left: auto;
    font-weight: 600;
    font-size: 13px;
    color: #8A6A1E;
    white-space: nowrap;
}
.vd-resume-link:hover { color: #6B5115; text-decoration: none; }

/* ---------- Setup guide ---------- */

/* Fix (VCO-1018, per user request 2026-09): min-height keeps the card tall
   enough for the absolutely-positioned .vd-setup-minmax button to stay
   visible once #vdSetupBody collapses - without it, the card (whose only
   remaining child is out of the normal flow) shrinks to 0 height and
   overflow:hidden clips the button away entirely, despite the comment above
   .vd-setup-minmax saying it should stay visible. */
.vd-setup { overflow: hidden; position: relative; min-height: 64px; }
.vd-setup[hidden] { display: none; }

/* Fix (per user request, 2026-09): the collapsed strip used to stretch the
   full column width with nothing in it but the Expand button, floating in
   the top-right corner - shrink it to a compact left-aligned pill instead,
   with the message below filling the rest of the row. */
.vd-setup--minimized { max-width: 420px; min-height: 0; }

.vd-setup-minimized-msg {
    display: none;
    align-items: center;
    height: 64px;
    padding: 0 100px 0 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.vd-setup--minimized .vd-setup-minimized-msg { display: flex; }

/* VCO-1018: Minimize/Expand toggle (dashboard-tiles.jsx's BuildJourney) -
   collapses #vdSetupBody (resume banner + progress + checklist) but leaves
   the card itself, so the "Setup guide" heading stays visible to expand
   again from. */
.vd-setup-minmax {
    position: absolute;
    top: 20px;
    right: 22px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.vd-setup-minmax:hover { color: var(--indigo); border-color: var(--indigo); }
.vd-setup-minmax svg { transition: transform 120ms ease; }
.vd-setup-minmax[aria-expanded="false"] svg { transform: rotate(180deg); }
#vdSetupBody[hidden] { display: none; }

.vd-setup-reopen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 26px;
    border-radius: 16px;
    background: var(--primary-light);
    border: 1px solid var(--line-soft);
    margin-bottom: 20px;
}
.vd-setup-reopen[hidden] { display: none; }
.vd-setup-reopen-text { font-size: 13.5px; color: var(--body); }
.vd-setup-reopen-text b { color: var(--ink); }

/* VCO-1003: "how to" popups for the Get Production Access / Activate with
   clients steps. */
.vd-setup-popup {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 23, 60, .45);
    padding: 20px;
}
.vd-setup-popup[hidden] { display: none; }

.vd-setup-popup-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 16px;
    padding: 28px 26px 22px;
    box-shadow: 0 24px 60px rgba(29, 23, 60, .28);
    text-align: center;
}

.vd-setup-popup-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--indigo);
    margin-bottom: 14px;
}
.vd-setup-popup-ico svg { width: 22px; height: 22px; }

.vd-setup-popup-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
}

.vd-setup-popup-card p {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--body);
}

.vd-setup-popup-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.vd-setup-head {
    position: relative;
    padding: 24px 26px 22px;
    /* rose wash fading left-to-right, as in the comp */
    background: linear-gradient(100deg, #FBEAF0 0%, #FBEDF2 34%, #FDF6F8 66%, #FFFFFF 100%);
    border-bottom: 1px solid var(--line-soft);
}

.vd-setup-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--grape);
    margin-bottom: 9px;
}

.vd-setup-eyebrow span.vd-spark {
    width: 18px; height: 18px;
    border-radius: 5px;
    background: linear-gradient(140deg, var(--gold), #F2915C);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vd-setup-eyebrow svg { width: 11px; height: 11px; display: block; }

.vd-setup-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 5px;
    line-height: 1.2;
}

.vd-setup-sub { font-size: 13px; color: var(--body); margin: 0; }

.vd-setup-cta { position: absolute; top: 26px; right: 26px; }

/* progress */
.vd-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.vd-progress-track {
    flex: 0 0 300px;
    height: 5px;
    border-radius: 99px;
    background: #EDE9F4;
    overflow: hidden;
}

.vd-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--coral), #F0785F);
}

.vd-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}

/* ---------- Steps ---------- */

.vd-step {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 68px;
    padding: 12px 26px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
}

.vd-step:last-child { border-bottom: 0; }

.vd-step--active {
    background: #F5F2FB;
    border-left-color: var(--indigo);
}

/* Was a plain <span> number; now a real checkbox button so a step with no
   automatic completion signal can still be marked done by the developer. */
.vd-step-check {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    border: 1.5px solid #DDD8EA;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    transition: border-color .12s ease, background .12s ease;
}

.vd-step-check:not([disabled]):hover {
    border-color: var(--indigo);
    color: var(--indigo);
}

.vd-step-check[disabled] { cursor: default; }

.vd-step-check-icon { display: none; }

/* "Done" pill next to a completed step title */
.vd-done-pill {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 9px;
    margin-left: 8px;
    border-radius: 99px;
    background: #EAF5EC;
    border: 1px solid #BFE0C8;
    color: #2F7A4B;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    vertical-align: 2px;
}

.vd-step--done .vd-step-check {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.vd-step--done .vd-step-num-txt { display: none; }
.vd-step--done .vd-step-check-icon { display: block; }

.vd-step--active .vd-step-check {
    background: var(--indigo);
    border-color: var(--indigo);
    color: #fff;
}

.vd-step-check-icon { width: 12px; height: 12px; }

.vd-step-icon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: #EFECF8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vd-step-icon svg { width: 16px; height: 16px; display: block; stroke: var(--grape); }

.vd-step-text { flex: 1 1 auto; min-width: 0; }

.vd-step-title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.vd-step-desc {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.vd-step-action { flex: 0 0 auto; }

/* ---------- Steps (grid variant, blueprint match 2026-10) ----------
   The blueprint's "Steps to publish an app" card is 5 columns side by side,
   each a plain bulleted list under a numbered circle + title - no per-step
   icon or action button like the row layout above. Scoped to --grid
   modifiers so nothing else using .vd-step/.vd-step-check is affected. */
.vd-checklist--grid {
    display: flex;
    align-items: stretch;
}

.vd-step--grid {
    flex: 1 1 0;
    display: block;
    min-height: 0;
    padding: 18px 20px;
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
}

.vd-step--grid:last-child { border-right: 0; }

.vd-step-grid-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.vd-step-bullets {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}

.vd-step-bullets > li { margin-bottom: 8px; }
.vd-step-bullets > li:last-child { margin-bottom: 0; }

.vd-step-subbullets {
    margin: 6px 0 0;
    padding-left: 18px;
    list-style: circle;
    color: var(--muted);
}

.vd-step-subbullets > li { margin-bottom: 4px; }

@media (max-width: 991px) {
    .vd-checklist--grid { flex-direction: column; }
    .vd-step--grid { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .vd-step--grid:last-child { border-bottom: 0; }
}

/* ---------- Buttons ---------- */

.vd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;   /* comp uses full pills */
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.vd-btn:hover { text-decoration: none; }
.vd-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* .vd-dash a sets a link colour, so these need equal-or-higher specificity
   to win - hence the .vd-dash prefix rather than a bare class. */
.vd-dash .vd-btn--dark,
.vd-dash a.vd-btn--dark {
    background: var(--blackberry);
    color: #fff;
}
.vd-dash .vd-btn--dark:hover,
.vd-dash a.vd-btn--dark:hover {
    background: var(--indigo);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46,33,85,.22);
}

.vd-dash .vd-btn--outline,
.vd-dash a.vd-btn--outline {
    background: #fff;
    border-color: #DFD9EE;
    color: var(--blackberry);
}
.vd-dash .vd-btn--outline:hover,
.vd-dash a.vd-btn--outline:hover {
    border-color: var(--grape);
    color: var(--blackberry);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.vd-btn--lg { height: 40px; padding: 0 22px; font-size: 13px; border-radius: 999px; }
.vd-btn--block { width: 100%; }

.vd-btn[aria-disabled="true"],
.vd-btn--muted {
    background: #F7F5FB;
    border-color: var(--line);
    color: #A9A3BC;
    cursor: default;
    pointer-events: none;
}

/* Fix (John's PR #970 review, low, round 2): the "Create app" popout
   (.vd-createapp-menu/-panel/-item) that used to live here is dead -
   both call sites now link straight to the CreateApp interstitial (see
   _DashboardNew.cshtml) and its JS handler ([data-createapp-menu] in
   _DashboardTopbar.cshtml) was removed with them. Rules deleted rather
   than left orphaned. */

/* ---------- Card head ---------- */

.vd-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--line-soft);
}

.vd-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    margin: 0;
}

.vd-card-note {
    font-size: 12px;
    color: var(--muted);
    margin-left: auto;
}

.vd-card-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* segmented tabs */
.vd-segment {
    display: inline-flex;
    background: #F4F2F9;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2px;
}

.vd-segment button {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--body);
    padding: 5px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.vd-segment button[aria-selected="true"] {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(46,33,85,.10);
}

.vd-segment button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

/* ---------- Empty states ---------- */

.vd-empty {
    text-align: center;
    padding: 34px 22px 30px;
}

.vd-empty-icon {
    width: 30px; height: 30px;
    margin: 0 auto 11px;
    display: block;
    stroke: #C6BFDC;
}

.vd-empty-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
}

.vd-empty-sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 15px;
}

/* ---------- Two-up row ---------- */

.vd-row {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 20px;
}

.vd-panel-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 22px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
}
.vd-panel-foot svg { width: 13px; height: 13px; stroke: var(--grape); flex: 0 0 auto; }

.vd-btn-pair {
    display: flex;
    flex-wrap: wrap; /* VCO-1272: wrap instead of overflowing a narrow card */
    gap: 10px;
    padding: 0 22px 20px;
}
/* VCO-1272: buttons never shrink below their nowrap label, so without wrap a
   laptop-width card's pair overflowed and "Submit a ticket" hung off its right
   edge. With flex-wrap above, each drops to its own full row when both labels
   don't fit; basis 0 keeps the pair equal-width when they do. */
.vd-btn-pair .vd-btn { flex: 1 1 0; }

.vd-panel-body { padding: 0 22px 20px; }

/* ==========================================================================
   Established-developer view (comp: "User B · step 6 · full data")
   ========================================================================== */

/* ---------- App grid ---------- */

.vd-apps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line-soft);
}

/* Fix (per user request, 2026-10): border moved from .vd-app itself onto any
   direct child of .vd-apps (ManageApps.cshtml now wraps each app tile in a
   .vd-app-cell alongside its production-actions disclosure, so .vd-app is no
   longer always the direct grid child there - this keeps the alternating
   right-border and every other .vd-apps consumer, like _DashboardNew.cshtml's
   unwrapped tiles, working exactly as before). */
.vd-apps > * {
    border-bottom: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
}
.vd-apps > *:nth-child(even) { border-right: 0; }

.vd-app {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    color: inherit;
    transition: background-color .14s ease;
}
.vd-app:hover { background: #FAF9FC; text-decoration: none; }

.vd-app-avatar {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.vd-app-body { flex: 1 1 auto; min-width: 0; }

.vd-app-name {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vd-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.vd-tag {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 9px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
}
.vd-tag--api  { background: #F1EDFA; border-color: #E2DAF5; color: var(--indigo); }
/* VCO-1283: same colours as My Apps' family / status pills (my-apps.css
   .vd-fam--* and .vd-status-pill) - Unity purple, FHIR blue, Test yellow,
   Production green - instead of near-white tags. Scoped to the dashboard's
   app tiles: ManageApps/FhirApps reuse the prod/test classes for other tags
   ("Certified", "N actions"). */
.vd-tag--prod { background: #EAF5EC; border-color: #C3E2CB; color: #2F7A4B; }
.vd-tag--test { background: #F2F1F5; border-color: #E2DFE9; color: #3D3654; }
.vd-app .vd-tag--unity { background: rgba(122, 53, 120, .13); border-color: transparent; color: #7A3578; }
.vd-app .vd-tag--fhir  { background: rgba(98, 130, 193, .14); border-color: transparent; color: #6282C1; }
.vd-app .vd-tag--prod  { background: #3E9E62; border-color: #3E9E62; color: #fff; }
.vd-app .vd-tag--test  { background: #FCF9EC; border-color: #F59D11; color: #8A6100; }

.vd-app-chev { flex: 0 0 auto; width: 15px; height: 15px; stroke: #B6B0C6; }

/* Fix (per user request, 2026-10): wraps a .vd-app tile plus its own
   .vd-app-prodactions disclosure so they stay one grid cell (see the
   .vd-apps > * border rule above) - .vd-app itself carries no border now,
   so this cell needs no extra styling beyond being a plain block. */
.vd-app-cell { display: block; }

/* Real expandable list of the production app's licensed Unity calls
   (ManageApps.cshtml) - a disclosure sibling of the row's own <a>, not
   nested inside it, so toggling it never also triggers the row's
   navigation. */
.vd-app-prodactions { padding: 0 20px 14px 73px; }
.vd-app-prodactions summary {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--grape, #6E2E6B);
    cursor: pointer;
    list-style: none;
}
.vd-app-prodactions summary::-webkit-details-marker { display: none; }
.vd-app-prodactions summary::before { content: "▸ "; }
.vd-app-prodactions[open] summary::before { content: "▾ "; }
.vd-app-prodactions-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vd-app-prodactions-list li {
    font-size: 11px;
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    background: #F2F1F5;
    border: 1px solid #E2DFE9;
    color: #4B4560;
    padding: 3px 8px;
    border-radius: 6px;
}
.vd-app-prodactions-empty { margin: 8px 0 0; font-size: 11.5px; color: #4A4460; }

/* Fix (per user request, 2026-09): "Build another app" moved out of the
   2-col .vd-apps grid (see _DashboardNew.cshtml's comment on this row) into
   its own full-width row directly below it, so it's never subject to the
   grid's 2-column balancing - and never left alone on a dangling row when
   the All/FHIR/Unity tabs filter the grid down to an odd visible count. */
.vd-app-addrow {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-top: 1px solid var(--line-soft);
    color: inherit;
    transition: background-color .14s ease;
}
.vd-app-addrow:hover { background: #FAF9FC; text-decoration: none; }
.vd-app-addrow .vd-app-avatar {
    background: transparent;
    border: 1.5px dashed #C9C2DD;
    color: var(--grape);
}

/* ---------- Three-panel row ---------- */

.vd-row3 {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.vd-panel { display: flex; flex-direction: column; }
.vd-panel-fill { flex: 1 1 auto; }

/* ---------- Activation list ---------- */

.vd-list-rows { padding: 4px 20px 0; }

.vd-lrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.vd-lrow:last-child { border-bottom: 0; }

.vd-lrow-name { flex: 1 1 auto; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-lrow-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }

.vd-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 10px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid transparent;
}
.vd-status--active  { background: #EAF5EC; border-color: #BFE0C8; color: #2F7A4B; }
.vd-status--pending { background: #FDF4E3; border-color: #EBD4A6; color: #96701C; }
.vd-status--closed  { background: #F2F1F5; border-color: #E2DFE9; color: #3D3654; }
/* Added for Client Activation Requests (Invalid status) - same palette as
   .vd-flash--error, so a red/coral status reads consistently site-wide. */
.vd-status--error   { background: #FDECEA; border-color: #F3C7C1; color: var(--coral); }

/* ---------- Support list ---------- */

.vd-badge-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    border-radius: 99px;
    background: #FCEBE9;
    border: 1px solid #F3C7C1;
    color: var(--coral);
    font-size: 10.5px;
    font-weight: 700;
}

.vd-tickets { padding: 14px 20px 0; }

.vd-ticket { display: flex; gap: 9px; margin-bottom: 14px; }
.vd-ticket:last-child { margin-bottom: 0; }

.vd-dot {
    flex: 0 0 auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-top: 6px;
    background: #B6B0C6;
}
.vd-dot--new { background: var(--coral); }

.vd-ticket-title { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.vd-ticket-sub { display: block; font-size: 11px; margin-top: 1px; color: var(--muted); }
.vd-ticket-sub--new { color: var(--coral); font-weight: 600; }
/* VCO-1316: ticket rows are links to the ticket now. */
a.vd-ticket--link, a.vd-ticket--link:hover, a.vd-ticket--link:focus { text-decoration: none; color: inherit; }
a.vd-ticket--link:hover .vd-ticket-title, a.vd-ticket--link:focus-visible .vd-ticket-title { color: var(--plum); text-decoration: underline; }

/* ---------- Usage tile ---------- */

.vd-usage { padding: 16px 20px 0; }
.vd-usage-value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.vd-usage-label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.vd-usage-delta { font-size: 12px; font-weight: 600; color: #2F7A4B; margin-top: 7px; }
.vd-usage-delta--down { color: var(--coral); }
.vd-spark { display: block; width: 100%; height: 54px; margin-top: 12px; }

.vd-usage-none {
    padding: 22px 20px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
}

/* ---------- Team callout variant ---------- */

.vd-team--tinted {
    background: linear-gradient(100deg, #F3F6FD 0%, #F8F6FC 60%, #FFFFFF 100%);
    border-color: #E1E7F5;
}

@media (max-width: 1080px) {
    .vd-row3 { grid-template-columns: 1fr; }
    .vd-apps { grid-template-columns: 1fr; }
    .vd-apps > * { border-right: 0; }
}

/* ---------- Team callout ---------- */

.vd-team {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
}

.vd-team-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: #F0ECF9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vd-team-icon svg { width: 21px; height: 21px; stroke: var(--grape); }

.vd-team-text { flex: 1 1 auto; min-width: 0; }
.vd-team-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.vd-team-sub { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.vd-team-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
}
.vd-team-or { font-size: 12px; color: var(--muted); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .vd-row { grid-template-columns: 1fr; }
    .vd-hero-top { flex-direction: column; }
    .vd-stats { width: 100%; }
    .vd-stat { flex: 1 1 0; min-width: 0; }
    .vd-hello { font-size: 32px; }
    .vd-setup-cta { position: static; margin-top: 16px; }
    .vd-team { flex-wrap: wrap; }
    .vd-team-actions { width: 100%; }
}

@media (max-width: 640px) {
    .vd-step { flex-wrap: wrap; }
    .vd-step-action { width: 100%; padding-left: 64px; }
    .vd-btn-pair { flex-direction: column; }
    .vd-progress-track { flex: 1 1 auto; }
    .vd-team-actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .vd-dash * { transition: none !important; }
}

/* VCO-1357: Assigned to Me minimize toggle - same pill as the setup guide's
   .vd-setup-minmax, but in the card head's normal flow. */
.vd-panel-head-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.vd-panel-minmax {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff;
    color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
.vd-panel-minmax:hover { background: #F7F5FA; }
#vdAssignedBody[hidden] { display: none; }