/* =============================================================================
 * NLVP — Concept A stylesheet (v2 palette)
 * Drop into: wwwroot/css/nlvp.css
 * Layered on top of Bootstrap 5. All selectors are namespaced under .nlvp so
 * we never collide with Bootstrap utility classes.
 *
 * Palette v2 (May 2026):
 *   Core greens:    Primary #6FA86E · Deep Forest #467050 · Soft Sage #8EC48A
 *   Supporting:     Clean Medical Blue #2C7BE5 · Light Blue Tint #E3F2FD
 *   Neutrals:       White #FFFFFF · Light Grey #F5F7F9 · Text Dark Grey #2D3430
 *   Accent:         Fresh Lime #8BC34A  (sparingly — icons, micro-interactions)
 *   Validation:     Carry-over red #B3261E
 * ============================================================================= */

:root {
  /* Core brand greens */
  --nlvp-primary:    #6FA86E;   /* Primary Green — growth/renewal */
  --nlvp-deep:       #467050;   /* Deep Forest Green — trust/stability */
  --nlvp-sage:       #8EC48A;   /* Soft Sage — background accent */
  --nlvp-sage-tint:  #E5F2E3;   /* derived light sage wash for callouts */

  /* Supporting blue */
  --nlvp-blue:       #2C7BE5;   /* Clean Medical Blue — links / secondary */
  --nlvp-blue-hover: #1F60C2;
  --nlvp-blue-tint:  #E3F2FD;   /* Light Blue Tint — subtle backgrounds */

  /* Neutrals */
  --nlvp-white:      #FFFFFF;   /* Background White */
  --nlvp-grey:       #F5F7F9;   /* Light Grey — page sections */
  --nlvp-line:       #E5E9EE;   /* derived from grey for borders/dividers */
  --nlvp-ink:        #2D3430;   /* Text Dark Grey — body/headings */
  --nlvp-muted:      rgba(47, 58, 63, 0.62);
  --nlvp-muted-soft: rgba(47, 58, 63, 0.38);

  /* Accent */
  --nlvp-lime:       #8BC34A;   /* Fresh Lime — energy / vitality pop */

  /* Validation (carry-over) */
  --nlvp-danger:      #B3261E;
  --nlvp-danger-tint: #FBEDEB;
  --nlvp-danger-line: #F1C6C1;

  /* Dashboard status badges */
  --nlvp-amber:      #E6950A;   /* warm amber — urgency without alarm */
  --nlvp-amber-tint: #FFF6E0;

  /* Font Type (default: Sans) */
  --nlvp-serif:      "Lora", Georgia, "Times New Roman", serif;
  --nlvp-sans:       "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type weight — the only two weights used anywhere in this file */
  --nlvp-fw-regular: 400;
  --nlvp-fw-bold:    600;

  /* Type scale — even px sizes only, odd ones round up (16px root = 1rem) */
  --nlvp-fs-10: 0.625rem;  /* 10px */
  --nlvp-fs-12: 0.75rem;   /* 12px */
  --nlvp-fs-14: 0.875rem;  /* 14px */
  /* no --nlvp-fs-16 — 1rem is the inherited default, don't redeclare it */
  --nlvp-fs-18: 1.125rem;  /* 18px */
  --nlvp-fs-20: 1.25rem;   /* 20px */
  --nlvp-fs-30: 1.875rem;  /* 30px */

  /* Heading-scale aliases — only h1/h2 are real heading levels anywhere in
     this portal (both have real <hN class="nlvp-hN"> usages). Same values
     as the prescriber-portal nlvp.css ladder (h1=30/h2=20px). */
  --nlvp-fs-h1: var(--nlvp-fs-30);
  --nlvp-fs-h2: var(--nlvp-fs-20);

  /* Size-tier aliases — no real <h3>-<h6> tag anywhere uses these; every
     consumer is unrelated UI chrome (labels, badges, chips, hints) that
     happens to borrow one of these steps, so they're named by size instead
     of implying a heading level. Same values on both portals. */
  --nlvp-fs-md:  var(--nlvp-fs-18);
  --nlvp-fs-sm:  var(--nlvp-fs-14);
  --nlvp-fs-xs:  var(--nlvp-fs-12);
  --nlvp-fs-xxs: var(--nlvp-fs-10);

  /* Layout */
  --nlvp-radius:       12px;
  --nlvp-radius-sm:    8px;
  --nlvp-radius-pill:  999px;
  --nlvp-shadow:       0 1px 2px rgba(47,58,63,0.04), 0 8px 24px rgba(47,58,63,0.06);
  --nlvp-focus:        0 0 0 3px rgba(76, 175, 80, 0.25);
  --nlvp-focus-blue:   0 0 0 3px rgba(44, 123, 229, 0.22);
  --nlvp-focus-danger: 0 0 0 3px rgba(179, 38, 30, 0.12);

  /* Motion */
  --nlvp-transition: 0.15s ease;

  /* Legacy alias — keep so anything that referenced --nlvp-cream still works */
  --nlvp-cream:      var(--nlvp-grey);
}

/* --- Base ------------------------------------------------------------------ */
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--nlvp-sans);
  color: var(--nlvp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Page chrome ----------------------------------------------------------- */
.nlvp-page {
  background: var(--nlvp-grey);
  min-height: 100vh;
  font-family: var(--nlvp-sans);
  color: var(--nlvp-ink);
  position: relative;
  overflow: hidden;
}
.nlvp-page__watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.10;
  width: 520px; height: 520px;
  right: -120px;
  top: 80px;
  z-index: 0;
}

/* Diagonal "non-production" ribbon pinned to the top-left corner of the page */
.nlvp-env-ribbon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  z-index: 20;
  pointer-events: none;
}
.nlvp-env-ribbon {
  position: absolute;
  top: 16px;
  left: -32px;
  width: 140px;
  transform: rotate(-45deg);
  background: var(--nlvp-danger);
  color: var(--nlvp-white);
  text-align: center;
  text-transform: uppercase;
  font-size: var(--nlvp-fs-xxs);
  font-weight: var(--nlvp-fw-bold);
  letter-spacing: 0.06em;
  text-indent: -1.5em;
  padding: 4px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.nlvp-page__inner {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 15px 20px 40px;
}

/* --- Header --------------------------------------------------------------- */
.nlvp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}
.nlvp-header__logo { height: 36px; display: block; }
.nlvp-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Progress ------------------------------------------------------------- */
.nlvp-progress {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--nlvp-fs-xs);
  color: var(--nlvp-muted); margin-top: 8px; margin-bottom: 8px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.nlvp-progress__track {
  height: 4px; background: var(--nlvp-line); border-radius: var(--nlvp-radius-pill); overflow: hidden;
}
.nlvp-progress__bar {
  height: 100%; background: var(--nlvp-deep); border-radius: var(--nlvp-radius-pill);
  transition: width 0.3s ease;
}

/* --- Typography ----------------------------------------------------------- */
/* Heading type scale — h1/h2 are the only two real heading levels anywhere
   in this portal, so they're the only ones with a class. Everything else
   that used to be here (h3-h6) had zero real <hN> usage and is gone; those
   sizes live on as --nlvp-fs-md/sm/xs/xxs for the UI chrome that actually
   consumes them (see elsewhere in this file). */
.nlvp-h1,
.nlvp-h2 {
  font-family: var(--nlvp-serif);
}
.nlvp-h1 {
  font-size: var(--nlvp-fs-h1);
  font-weight: var(--nlvp-fw-regular);
  line-height: 1.15;
  color: var(--nlvp-primary);
  margin: 14px 0 8px;
  text-wrap: pretty;
}
.nlvp-h2 {
  font-size: var(--nlvp-fs-h2);
  font-weight: var(--nlvp-fw-bold);
  line-height: 1.25;
  color: var(--nlvp-deep);
  margin: 24px 0 8px;
}
.nlvp-lede {
  line-height: 1.4;
  color: var(--nlvp-ink);
  margin: 0 0 16px;
}
.nlvp-section-label {
  font-size: var(--nlvp-fs-xs);
  font-weight: var(--nlvp-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nlvp-muted);
  margin: 0 0 8px;
}

/* --- Type weight — a pure utility, always composed onto markup, never baked
   into a component's own rule (e.g. class="nlvp-card-title nlvp-bold").
   No nlvp-regular counterpart: 400 is the browser/Bootstrap default weight
   everywhere except headings, and h1's own rule above already covers that
   one exception directly since it's the only class that ever needed it. */
.nlvp-bold {
  font-weight: var(--nlvp-fw-bold);
}

/* --- Card ---------------------------------------------------------------- */
.nlvp-card {
  background: var(--nlvp-white);
  border: 1px solid var(--nlvp-line);
  border-radius: var(--nlvp-radius);
  padding: 22px;
  box-shadow: var(--nlvp-shadow);
}
.nlvp-card + .nlvp-card { margin-top: 14px; }

/* --- Missing pharmacy report panel ---------------------------------------- */
.nlvp-missing-pharmacy-panel {
  background: var(--nlvp-sage-tint);
  border-radius: var(--nlvp-radius);
  padding: 16px;
}
.nlvp-card-title {
  display: block;
  font-weight: var(--nlvp-fw-bold);
  color: var(--nlvp-ink);
  margin: 0 0 4px;
}

/* --- "Why we ask" callout ------------------------------------------------ */
.nlvp-why {
  font-size: var(--nlvp-fs-sm);
  line-height: 1.6;
  color: var(--nlvp-muted);
  margin: 16px 0 24px;
}
.nlvp-why strong {
  color: var(--nlvp-ink);
}

/* Info callout — blue counterpart to "why we ask", for clinical notes */
.nlvp-info {
  background: var(--nlvp-blue-tint);
  border-radius: var(--nlvp-radius-sm);
  padding: 12px 14px;
  font-size: var(--nlvp-fs-sm);
  line-height: 1.5;
  color: var(--nlvp-blue-hover);
  margin: 16px 0;
}

/* --- Inline links -------------------------------------------------------- */
.nlvp-link,
.nlvp-page a:not(.nlvp-btn):not(.nlvp-dashboard-card-item--link) {
  color: var(--nlvp-blue);
  text-decoration: none;
  transition: color var(--nlvp-transition), border-color var(--nlvp-transition);
}
.nlvp-link:hover,
.nlvp-page a:not(.nlvp-btn):not(.nlvp-dashboard-card-item--link):hover {
  color: var(--nlvp-blue-hover);
  border-bottom-color: var(--nlvp-blue-hover);
}

/* =============================================================================
 * FORM CONTROLS  —  override Bootstrap defaults to match the brand
 * ============================================================================= */

.nlvp-label {
  display: block;
  font-size: var(--nlvp-fs-sm);
  font-weight: var(--nlvp-fw-bold);
  color: var(--nlvp-ink);
  margin-bottom: 6px;
}
.nlvp-help {
  font-size: var(--nlvp-fs-xs);
  color: var(--nlvp-muted);
  margin-top: 4px;
}

/* Text input, textarea, select — applied as .nlvp-input on top of .form-control */
.nlvp-input,
.nlvp-input.form-control,
.nlvp-input.form-select {
  color: var(--nlvp-ink);
  background: var(--nlvp-white);
  border: 1px solid var(--nlvp-line);
  border-radius: var(--nlvp-radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--nlvp-transition), box-shadow var(--nlvp-transition);
}
.nlvp-input:focus,
.nlvp-input.form-control:focus,
.nlvp-input.form-select:focus {
  outline: none;
  border-color: var(--nlvp-primary);
  box-shadow: var(--nlvp-focus);
}
.nlvp-input::placeholder { color: var(--nlvp-muted-soft); }
.nlvp-input[disabled] { background: var(--nlvp-grey); color: var(--nlvp-muted); cursor: not-allowed; }
textarea.nlvp-input { min-height: 96px; resize: vertical; }

/* Select arrow */
select.nlvp-input,
.nlvp-input.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232E7D32' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Input groups (e.g. ft/in, kg) */
.nlvp-input-group { display: flex; gap: 10px; }
.nlvp-input-group .nlvp-input-wrap { position: relative; flex: 1; }
.nlvp-input-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: var(--nlvp-fs-sm); color: var(--nlvp-muted); pointer-events: none;
}

/* Input with attached right-side unit label */
.nlvp-input-with-addon {
  display: flex;
  align-items: stretch;
  border-radius: var(--nlvp-radius-sm);
}
.nlvp-input-with-addon .nlvp-input {
  border-radius: var(--nlvp-radius-sm) 0 0 var(--nlvp-radius-sm);
  flex: 1;
  width: auto;
  min-width: 0;
}
.nlvp-input-addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: var(--nlvp-fs-sm);
  color: var(--nlvp-muted);
  background: var(--nlvp-grey);
  border: 1px solid var(--nlvp-line);
  border-left: none;
  border-radius: 0 var(--nlvp-radius-sm) var(--nlvp-radius-sm) 0;
  white-space: nowrap;
}
.nlvp-input-with-addon:focus-within .nlvp-input-addon {
  border-color: var(--nlvp-primary);
  box-shadow: var(--nlvp-focus);
}
.nlvp-input-with-addon:focus-within .nlvp-input {
  clip-path: inset(-3px 0px -3px -3px round 10px 0 0 10px);
}

/* --- Radio + Checkbox cards ---------------------------------------------- */
.nlvp-choice-list {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.nlvp-sub-options {
  margin-top: 8px;
  margin-left: 8px;
  padding: 14px 16px;
  border-left: 3px solid var(--nlvp-sage);
  border-radius: 0 var(--nlvp-radius-sm) var(--nlvp-radius-sm) 0;
  background: var(--nlvp-sage-tint);
}
.nlvp-choice {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--nlvp-white);
  border: 1px solid var(--nlvp-line);
  border-radius: var(--nlvp-radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--nlvp-transition), background var(--nlvp-transition);
  position: relative;
}
.nlvp-choice:hover { border-color: var(--nlvp-sage); }
.nlvp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.nlvp-choice__indicator {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--nlvp-line);
  background: var(--nlvp-white);
  display: grid; place-items: center;
  margin-top: 1px;
  transition: border-color var(--nlvp-transition), background var(--nlvp-transition);
}
.nlvp-choice--radio .nlvp-choice__indicator { border-radius: var(--nlvp-radius-pill); }
.nlvp-choice--checkbox .nlvp-choice__indicator { border-radius: 5px; }
/* Radio dot */
.nlvp-choice--radio .nlvp-choice__indicator::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: var(--nlvp-radius-pill);
  background: var(--nlvp-deep);
  transform: scale(0);
  transition: transform var(--nlvp-transition);
}
/* Check tick (SVG via mask, scales) */
.nlvp-choice--checkbox .nlvp-choice__indicator::after {
  content: "";
  width: 12px; height: 12px;
  background-color: var(--nlvp-white);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 6L5 9L10 3' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 6L5 9L10 3' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transform: scale(0);
  transition: transform var(--nlvp-transition);
}
.nlvp-choice input:checked ~ .nlvp-choice__indicator {
  border-color: var(--nlvp-deep);
  background: var(--nlvp-deep);
}
.nlvp-choice--radio input:checked ~ .nlvp-choice__indicator { background: var(--nlvp-white); }
.nlvp-choice input:checked ~ .nlvp-choice__indicator::after { transform: scale(1); }
.nlvp-choice input:focus-visible ~ .nlvp-choice__indicator { box-shadow: var(--nlvp-focus); }
.nlvp-choice:has(input:checked) { border-color: var(--nlvp-deep); background: var(--nlvp-sage-tint); }
.nlvp-choice__body { flex: 1; line-height: 1.4; }
.nlvp-choice__title { color: var(--nlvp-ink); }
.nlvp-choice__desc  { font-size: var(--nlvp-fs-sm); color: var(--nlvp-muted); margin-top: 2px; }

/* Compact toggle (used for unit imperial/metric) ------------------------- */
.nlvp-toggle {
  display: inline-flex;
  font-size: var(--nlvp-fs-sm);
  background: var(--nlvp-grey);
  border: 1px solid var(--nlvp-line);
  border-radius: var(--nlvp-radius-pill);
  padding: 3px;
}
.nlvp-toggle__btn {
  background: transparent; border: 0; padding: 7px 14px;
  border-radius: var(--nlvp-radius-pill); color: var(--nlvp-muted); cursor: pointer;
}
.nlvp-toggle__btn--active { background: var(--nlvp-white); color: var(--nlvp-deep); box-shadow: 0 1px 2px rgba(47,58,63,0.08); }

/* --- Buttons ------------------------------------------------------------- */
.nlvp-btn {
  font-weight: var(--nlvp-fw-bold);
  border-radius: var(--nlvp-radius-sm);
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--nlvp-transition), border-color var(--nlvp-transition), color var(--nlvp-transition);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  line-height: 1;
}
/* Primary — Primary Green for key CTAs */
.nlvp-btn--primary  { background: var(--nlvp-primary); color: var(--nlvp-white); }
.nlvp-btn--primary:hover  { background: var(--nlvp-deep); }
.nlvp-btn--primary:focus,
.nlvp-btn--add:focus { outline: none; box-shadow: var(--nlvp-focus); }
/* Secondary — outlined, deep green text (default neutral action) */
.nlvp-btn--secondary { background: var(--nlvp-white); color: var(--nlvp-deep); border-color: var(--nlvp-line); }
.nlvp-btn--secondary:hover { border-color: var(--nlvp-deep); }
/* Link-style button — Clean Medical Blue for "secondary actions" per palette guide */
.nlvp-btn--link { background: transparent; color: var(--nlvp-blue); padding-left: 6px; padding-right: 6px; }
.nlvp-btn--link:hover { color: var(--nlvp-blue-hover); }
.nlvp-btn--link:focus { outline: none; box-shadow: var(--nlvp-focus-blue); border-radius: var(--nlvp-radius-sm); }
.nlvp-btn--ghost { background: transparent; color: var(--nlvp-muted); padding-inline: 5px; }
.nlvp-btn--ghost:hover { color: var(--nlvp-deep); }
.nlvp-btn--add  { background: transparent; color: var(--nlvp-primary); border-color: var(--nlvp-primary); border-style: dashed; }
.nlvp-btn--add:hover  { color: var(--nlvp-deep); border-color: var(--nlvp-deep); border-style: solid; }
.nlvp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.nlvp-btn--block { width: 100%; }
/* Fixed width so the Show/Hide label swap doesn't shift the button's size */
.nlvp-healthcard-toggle { min-width: 115px; }

/* --- Step footer (Back / Next) ------------------------------------------ */
.nlvp-step-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 28px;
}
.nlvp-step-footer .nlvp-btn--primary, 
.nlvp-step-footer .nlvp-btn--secondary { min-width: 140px; }
.nlvp-step-footer .nlvp-btn--primary:only-child { width: 100%; }

/* --- Step list (Welcome screen) ----------------------------------------- */
.nlvp-step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 28px;
}
.nlvp-step-item {
  padding: 14px 16px;
  background: var(--nlvp-white);
  border: 1px solid var(--nlvp-line);
  border-radius: var(--nlvp-radius-sm);
}
/* --- Validation --------------------------------------------------------- */
.nlvp-input.input-validation-error,
.nlvp-choice.input-validation-error,
.nlvp-input[aria-invalid="true"],
.nlvp-input.input-validation-error:focus,
.nlvp-input[aria-invalid="true"]:focus {
  border-color: var(--nlvp-danger);
  box-shadow: var(--nlvp-focus-danger);
}
.field-validation-error,
.text-danger,
.nlvp-error {
  display: block;
  color: var(--nlvp-danger);
  margin-top: 6px;
}
.validation-summary-errors {
  font-size: var(--nlvp-fs-sm);
  background: var(--nlvp-danger-tint);
  border: 1px solid var(--nlvp-danger-line);
  border-radius: var(--nlvp-radius);
  padding: 12px 14px;
  color: var(--nlvp-danger);
  margin-bottom: 16px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* --- Trust footer ------------------------------------------------------- */
.nlvp-trust {
  border-top: 1px solid var(--nlvp-line);
  margin-top: 36px;
  padding: 18px 0 8px;
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  font-size: var(--nlvp-fs-xs);
  color: var(--nlvp-muted);
  letter-spacing: 0.02em;
}
.nlvp-trust__item { display: inline-flex; align-items: center; gap: 6px; }
.nlvp-trust__dot { width: 5px; height: 5px; border-radius: var(--nlvp-radius-pill); background: var(--nlvp-primary); }

/* --- Utility ------------------------------------------------------------ */
.nlvp-stack-sm > * + * { margin-top: 8px; }
.nlvp-stack-md > * + * { margin-top: 14px; }
.nlvp-stack-lg > * + * { margin-top: 22px; }
.nlvp-row-gap-sm { display: flex; gap: 8px; }
.nlvp-row-gap-md { display: flex; gap: 14px; }
.nlvp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Component overrides ------------------------------------------------- */
#medication-search-results {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- Upload dropzone ------------------------------------------------------ */
.nlvp-upload__input { display: none; }
.nlvp-upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--nlvp-line);
  border-radius: var(--nlvp-radius);
  padding: 24px 16px;
  cursor: pointer;
  text-align: center;
  background: var(--nlvp-white);
  transition: border-color var(--nlvp-transition), background var(--nlvp-transition);
}
.nlvp-upload__zone:hover,
.nlvp-upload__zone--active { border-color: var(--nlvp-primary); background: var(--nlvp-sage-tint); }
.nlvp-upload__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nlvp-upload__icon { color: var(--nlvp-primary); font-size: var(--nlvp-fs-h1); margin-bottom: 4px; }
.nlvp-upload__link { color: var(--nlvp-primary); font-weight: var(--nlvp-fw-bold); }
.nlvp-upload__hint { font-size: var(--nlvp-fs-xs); color: var(--nlvp-muted); margin-top: 2px; }
.nlvp-upload__filename { display: block; font-size: var(--nlvp-fs-sm); color: var(--nlvp-deep); }

.nlvp-upload__preview { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; text-align: left; }
.nlvp-upload__thumb {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--nlvp-radius-sm);
  background: var(--nlvp-grey);
}
.nlvp-upload__preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.nlvp-upload__preview-info,
.nlvp-dashboard-card-item__body { flex: 1; min-width: 0; }
.nlvp-upload__status { display: block; font-size: var(--nlvp-fs-xs); color: var(--nlvp-muted); margin-top: 2px; }
.nlvp-upload__status-ready { color: var(--nlvp-primary); }
.nlvp-upload__replace { color: var(--nlvp-primary); font-size: var(--nlvp-fs-sm); font-weight: var(--nlvp-fw-bold); text-decoration: underline; flex-shrink: 0; }

/* Section label — primary (green) variant */
.nlvp-section-label--primary { color: var(--nlvp-deep); }

/* Review / summary field layout */
.nlvp-review-field {
    padding: 14px 0;
    border-bottom: 1px solid var(--nlvp-line);
}
.nlvp-review-field:first-child { padding-top: 0; }
.nlvp-review-field:last-child { border-bottom: none; padding-bottom: 0; }
.nlvp-review-label {
    display: block;
    font-size: var(--nlvp-fs-xs);
    font-weight: var(--nlvp-fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nlvp-muted);
    margin-bottom: 3px;
}
.nlvp-review-value {
    display: block;
    color: var(--nlvp-ink);
    line-height: 1.4;
}

/* --- Dashboard card items (Registration summary, Questionnaire, Messages) -- */
.nlvp-dashboard-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nlvp-dashboard-card-item__action {
  flex-shrink: 0;
}
/* --- Questionnaire card: badge/title stacked, description+button vertically centered together -- */
.nlvp-questionnaire-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "badge  action"
    "title  action"
    "desc   action";
  column-gap: 20px;
  row-gap: 4px;
}
.nlvp-questionnaire-card .nlvp-todo-badge { grid-area: badge; }
.nlvp-questionnaire-card .nlvp-card-title { grid-area: title; }
.nlvp-questionnaire-card__desc { grid-area: desc; }
.nlvp-questionnaire-card__action {
  margin-top: 16px;
  grid-area: action;
  align-self: center;
  justify-self: end;
}
@media (max-width: 500px) {
  .nlvp-questionnaire-card {
    grid-template-areas:
      "badge badge"
      "title title"
      "desc  action";
  }
}
.nlvp-dashboard-card-item__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--nlvp-radius-pill);
  background: var(--nlvp-sage-tint);
  border: 1.5px solid var(--nlvp-sage);
  color: var(--nlvp-deep);
  font-weight: var(--nlvp-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nlvp-dashboard-card-item__icon--blue {
  background: var(--nlvp-blue-tint);
  border-color: var(--nlvp-blue);
  color: var(--nlvp-blue);
}
.nlvp-dashboard-card-item--link {
  display: flex;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--nlvp-transition), border-color var(--nlvp-transition);
}
.nlvp-dashboard-card-item--link:hover {
  border-color: var(--nlvp-primary);
  box-shadow: 0 2px 12px rgba(47, 58, 63, 0.10);
  color: inherit;
}
.nlvp-dashboard-card-item--top {
  align-items: flex-start;
}
.nlvp-todo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.nlvp-todo-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--nlvp-radius-pill);
  flex-shrink: 0;
}
.nlvp-todo-badge__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--nlvp-radius-pill);
  font-size: var(--nlvp-fs-xs);
  font-weight: var(--nlvp-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* ACTION NEEDED — amber */
.nlvp-todo-badge--action .nlvp-todo-badge__dot   { background: var(--nlvp-amber); }
.nlvp-todo-badge--action .nlvp-todo-badge__label { background: var(--nlvp-amber-tint); color: var(--nlvp-amber); }
/* IN PROGRESS / IN REVIEW — blue (same colour, label text differs) */
.nlvp-todo-badge--blue .nlvp-todo-badge__dot   { background: var(--nlvp-blue); }
.nlvp-todo-badge--blue .nlvp-todo-badge__label { background: var(--nlvp-blue-tint); color: var(--nlvp-blue); }

.nlvp-text-muted {
  font-size: var(--nlvp-fs-sm);
  color: var(--nlvp-muted);
  line-height: 1.5;
  margin: 0;
}

/* --- Messages from care team section ------------------------------------- */
.nlvp-msg-section {
  margin-top: 28px;
}
.nlvp-msg-section__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.nlvp-msg-section__title {
  font-size: var(--nlvp-fs-xs);
  font-weight: var(--nlvp-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlvp-muted);
}
.nlvp-msg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.nlvp-msg-type {
  font-size: var(--nlvp-fs-xs);
  font-weight: var(--nlvp-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nlvp-deep);
}
.nlvp-msg-type--blue {
  color: var(--nlvp-blue);
}
.nlvp-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--nlvp-radius-pill);
  font-size: var(--nlvp-fs-xs);
  background: var(--nlvp-grey);
  color: var(--nlvp-ink);
  border: 1px solid var(--nlvp-line);
}
.nlvp-msg-unread-pill {
  font-size: var(--nlvp-fs-xs);
  font-weight: var(--nlvp-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: var(--nlvp-radius-pill);
  background: var(--nlvp-blue-tint);
  color: var(--nlvp-blue);
  margin-left: auto;
}
.nlvp-msg-chevron {
  font-size: var(--nlvp-fs-h2);
  color: var(--nlvp-muted-soft);
  flex-shrink: 0;
  line-height: 1;
}