/*
 * ProPakit RPMpro - Component library · 3a "Ledger Signal"
 * Quy uoc: tien to c-, BEM (__element, --modifier). Khong inline style, khong ID de style.
 * Chi dung bien trong tokens.css.
 *
 * Loi (13): severity-badge, patient-card, alert-row, action-row, consent-step, chart-container,
 *           break-glass-modal, appointment-row, booking-form, onboarding-funnel, burden-table,
 *           threshold-whatif, notice (moi, v1.9)
 * Nen tang (5, [CR-3]): btn, field, chip, nav, wordmark
 * v2 (CR-5): + c-icon (nen tang) -> 25
 * Mo rong (6, [CR-4]): table, dialog (modal+slideover), popover (menu+tooltip), tabs, timeline, thread
 *   + gop vao c-field: __toggle, __upload, __color · skeleton -> l-skeleton (layout)
 *   -> tong 24 (vuot nhe nguong canh bao 20, xem CR-4)
 *
 * State chung: :hover · :active · :focus-visible (ring o layout.css) · [aria-disabled="true"] · --error / [aria-invalid="true"]
 */

/* ======================================================================
   NEN TANG
   ====================================================================== */

/* ---------- c-btn: 3a "Ledger Signal" giu dau an bottom press-shadow (tu 1c), v2 lam mem: khong vien den.
   primary = fill brand + day brand-700; secondary = trang + vien slate-200 + day slate-300; nhan = lun xuong --press-depth; --icon = nut vuong chi icon ---------- */
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-4); border: var(--border-width-1) solid transparent; border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard); }
.c-btn .c-icon { flex-shrink: 0; }
.c-btn--primary { background: var(--brand-primary); color: var(--brand-on-primary); box-shadow: 0 var(--press-depth) 0 var(--brand-700); }
.c-btn--primary:hover { background: var(--brand-hover); color: var(--brand-on-primary); }
.c-btn--primary:active { background: var(--brand-hover); }
.c-btn--secondary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); box-shadow: 0 var(--press-depth) 0 var(--color-control-shadow); }
.c-btn--secondary:hover { background: var(--color-control-bg-hover); border-color: var(--slate-300); color: var(--color-text); }
.c-btn--primary:active, .c-btn--secondary:active { transform: translateY(var(--press-depth)); box-shadow: none; }
.c-btn--tertiary { background: transparent; color: var(--brand-text); padding-inline: 0; min-height: auto; box-shadow: none; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.c-btn--tertiary:hover { color: var(--brand-hover); text-decoration-color: currentColor; }
.c-btn--ghost { background: transparent; color: var(--color-text-muted); }
.c-btn--ghost:hover { background: var(--color-control-bg-hover); color: var(--color-text); }
.c-btn--icon { padding: 0; width: var(--control-height); }
.c-btn--icon.c-btn--sm { width: var(--control-height-sm); }
.c-btn--sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); font-size: var(--font-size-xs); border-radius: var(--radius-sm); }
.c-btn--lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); font-size: var(--font-size-base); }
.c-btn--block { display: flex; width: 100%; }
.c-btn[aria-disabled="true"], .c-btn[aria-disabled="true"]:hover, .c-btn[aria-disabled="true"]:active { background: var(--color-disabled-bg); color: var(--color-disabled-text); border-color: transparent; box-shadow: none; transform: none; cursor: not-allowed; }
.l-shell-patient .c-btn { font-size: var(--font-size-base); padding-inline: var(--space-5); }
.l-shell-patient .c-btn--sm { font-size: var(--font-size-sm); }
.l-shell-patient .c-btn--tertiary, .c-btn--tertiary.c-btn--sm { padding-inline: 0; min-height: auto; }

/* ---------- c-icon: 1 nguon (Lucide-style, ISC), stroke 1.75, khong fill. Sprite: assets/img/icons.svg ---------- */
.c-icon { width: var(--size-icon); height: var(--size-icon); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.c-icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* tertiary: hanh dong phu trong dong/bang, khong bottom shadow */

/* disabled: van focus duoc (aria-disabled), khong dung thuoc tinh disabled */

/* ---------- c-field: label tren, loi giua label va o (patient + staff) ---------- */
.c-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.c-field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.c-field__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-field__error {
  display: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
}
.c-field__input,
.c-field__select,
.c-field__textarea {
  font-family: var(--font-family-base);
  width: 100%;
  min-height: var(--input-height);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-1) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base);
  font-variant-numeric: normal;
}
.c-field__textarea { min-height: calc(var(--input-height) * 2.5); resize: vertical; line-height: var(--line-height-base); }
.c-field__input::placeholder,
.c-field__textarea::placeholder { color: var(--color-text-muted); }
.c-field__input:hover,
.c-field__select:hover,
.c-field__textarea:hover { border-color: var(--color-text-muted); }
.c-field__input:focus-visible,
.c-field__select:focus-visible,
.c-field__textarea:focus-visible { border-color: var(--brand-focus); outline-offset: 0; }
.c-field--error .c-field__error { display: block; }
.c-field--error .c-field__input,
.c-field--error .c-field__select,
.c-field--error .c-field__textarea,
.c-field__input[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: var(--border-width-2);
}
.c-field__input[aria-disabled="true"],
.c-field__input:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: var(--color-border);
}
/* o tach ky tu: ma moi, ngay sinh */
.c-field__group { display: flex; gap: var(--space-2); }
.c-field__group .c-field__input { flex: 0 0 calc(var(--control-height) * 0.7); min-width: 0; padding-inline: 0; }
.c-field__group .c-field__input { text-align: center; font-weight: var(--font-weight-bold); }
.c-field__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-min);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.c-field__check input {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brand-control);
}

/* ---------- c-chip: tag ly do + filter ---------- */
.c-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--size-icon-lg); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--slate-100); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.c-chip--complex { background: var(--slate-200); color: var(--color-text); }
.c-chip--inactive { background: transparent; border: var(--border-width-1) dashed var(--slate-300); }
button.c-chip { font-family: inherit; cursor: pointer; border: var(--border-width-1) solid var(--color-border); background: var(--color-bg); min-height: var(--control-height-sm); padding-inline: var(--space-3); border-radius: var(--radius-full); }
button.c-chip:hover { border-color: var(--slate-300); }
button.c-chip[aria-pressed="true"] { background: var(--brand-tint); border-color: transparent; color: var(--brand-text); }

/* chip chon duoc (filter) */

/* ---------- c-nav: sidebar staff. Active = nen tint + chu brand, khong rail ---------- */
.c-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.c-nav__group-label { padding: var(--space-4) var(--space-3) var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.c-nav__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; }
.c-nav__item .c-icon { color: var(--color-text-muted); }
.c-nav__item:hover { background: var(--slate-50); color: var(--color-text); }
.c-nav__item[aria-current="page"] { background: var(--brand-tint); color: var(--brand-text); font-weight: var(--font-weight-semibold); }
.c-nav__item[aria-current="page"] .c-icon { color: var(--brand-text); }
.c-nav__count { margin-left: auto; min-width: var(--size-icon-lg); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--slate-100); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-align: center; font-variant-numeric: tabular-nums; line-height: var(--size-icon-lg); }
.c-nav__count--urgent { background: var(--color-severity-urgent-bg); color: var(--color-severity-urgent-text); }

/* DO DAC #1: so urgent tren nav Worklist */

/* ---------- c-wordmark: 3 version ----------
   (1) --mark      : chi icon box (favicon, app icon, sidebar thu gon, header patient)
   (2) mac dinh    : icon box + RPMpro (sidebar, header, email)
   (3) --endorsed  : "by ProPakit" TREN, RPMpro DUOI; dinh chu = dinh box, chan chu = chan box.
                     Chi o vi tri quan trong (login, signup, public, tai lieu), vung trong >= 1x canh box. */
.c-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  --wm-mark: var(--control-height-sm);
}
.c-wordmark:hover { color: var(--color-text); }
.c-wordmark__mark { width: var(--wm-mark); height: var(--wm-mark); flex-shrink: 0; color: var(--brand-primary); }
.c-wordmark__text { display: flex; flex-direction: column; justify-content: space-between; }
.c-wordmark__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: 1; }
.c-wordmark__name b { font-weight: var(--font-weight-regular); }
.c-wordmark__by { display: none; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: 0.02em; line-height: 1; }
.c-wordmark__name, .c-wordmark__by { text-box: trim-both cap alphabetic; }
.c-wordmark--lg { --wm-mark: var(--control-height-lg); gap: var(--space-3); }
.c-wordmark--lg .c-wordmark__name { font-size: var(--font-size-2xl); }
.c-wordmark--endorsed { gap: var(--space-3); }
.c-wordmark--endorsed .c-wordmark__text { height: var(--wm-mark); }
.c-wordmark--endorsed .c-wordmark__name { line-height: 0.78; margin-top: auto; }
.c-wordmark--endorsed .c-wordmark__by { line-height: 0.78; margin-top: auto; }
.c-wordmark--endorsed .c-wordmark__by { display: block; }
.c-wordmark--mark .c-wordmark__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-wordmark--reversed { color: var(--brand-on-primary); }
.c-wordmark--reversed .c-wordmark__mark { color: var(--brand-on-primary); --wm-glyph: var(--brand-primary); }
.c-wordmark--reversed .c-wordmark__by { color: var(--brand-on-primary); }
/* tenant co logo: an mark + ten, hien logo */
.c-wordmark__tenant-logo { max-height: var(--wm-mark); width: auto; }

/* ======================================================================
   LOI
   ====================================================================== */

/* ---------- c-severity-badge: v2 nen nhat theo nghia + cham + nhan. --solid chi o Alert triage ---------- */
.c-severity-badge { width: fit-content; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-icon-lg); padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1; white-space: nowrap; background: var(--slate-100); color: var(--color-text-muted); }
.c-severity-badge::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-full); flex-shrink: 0; background: currentColor; }
.c-severity-badge--urgent { background: var(--color-severity-urgent-bg); color: var(--color-severity-urgent-text); }
.c-severity-badge--attention { background: var(--color-severity-attention-bg); color: var(--color-severity-attention-text); }
.c-severity-badge--stable { background: var(--slate-100); color: var(--color-text-muted); }
.c-severity-badge--solid.c-severity-badge--urgent { background: var(--color-severity-urgent-text); color: var(--white); }
.c-severity-badge--tinted { /* v2: mac dinh da la tinted, giu ten cho tuong thich */ }

/* DO DAC #2: chi urgent, chi o header Alert triage (A10) */

.c-severity-badge--solid.c-severity-badge--urgent::before { background: var(--white); }
/* nen nhat theo nghia - dung trong bang day khi can quet nhanh */
.c-severity-badge--tinted.c-severity-badge--urgent { background: var(--color-severity-urgent-bg); color: var(--color-severity-urgent-text); border-color: transparent; }
.c-severity-badge--tinted.c-severity-badge--attention { background: var(--color-severity-attention-bg); color: var(--color-severity-attention-text); border-color: transparent; }
.c-severity-badge--tinted.c-severity-badge--stable { background: var(--color-severity-stable-bg); color: var(--color-severity-stable-text); border-color: transparent; }

/* ---------- c-patient-card ---------- */
.c-patient-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-bg); border: var(--border-width-1) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.c-patient-card__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.c-patient-card__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.c-patient-card__avatar { display: grid; place-items: center; width: var(--size-avatar); height: var(--size-avatar); flex-shrink: 0; border-radius: var(--radius-full); background: var(--slate-100); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.c-patient-card__avatar--lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); font-size: var(--font-size-sm); }
.c-patient-card__name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); color: var(--color-text); }
.c-patient-card__meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.c-patient-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.c-patient-card__vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min-sm), 100%), 1fr)); gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width-1) solid var(--color-border-subtle); }
.c-patient-card__label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-patient-card__value { white-space: nowrap; display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.c-patient-card__unit { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.c-patient-card__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.c-patient-card__demo { font-size: var(--font-size-xs); color: var(--color-text-muted); }
a.c-patient-card { color: inherit; text-decoration: none; }
a.c-patient-card:hover .c-patient-card__name { color: var(--brand-text); }
.c-patient-card--compact { padding: 0; border: 0; background: transparent; box-shadow: none; gap: 0; flex-direction: row; align-items: center; gap: var(--space-3); min-width: 0; }
.c-patient-card--compact > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.c-patient-card--hero { gap: var(--space-4); }
.l-shell-patient .c-patient-card { padding: var(--space-5); gap: var(--space-4); }
.l-shell-patient .c-patient-card__name, .l-shell-patient .c-patient-card__title { font-size: var(--font-size-lg); }

/* compact: trong action-row */

/* patient app: khong vitals severity, chu to */

.l-shell-patient .c-patient-card__name { font-size: var(--font-size-lg); }

/* ---------- c-alert-row: cot co dinh, khong xuong dong ---------- */
.c-alert-row { display: grid; grid-template-columns: var(--col-time) minmax(0, 1fr) var(--col-badge) var(--col-action); align-items: center; gap: var(--space-4); min-height: var(--control-height-lg); padding: var(--space-2) var(--space-5); border-top: var(--border-width-1) solid var(--color-border-subtle); color: var(--color-text); text-decoration: none; font-size: var(--font-size-sm); }
.c-alert-row__time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-alert-row__reading { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-alert-row__reading small { font-weight: var(--font-weight-regular); color: var(--color-text-muted); font-size: var(--font-size-xs); margin-left: var(--space-2); }
.c-alert-row__status { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; text-align: right; }
a.c-alert-row:hover { background: var(--slate-50); }
.c-alert-row--resolved .c-alert-row__reading { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }

/* ---------- c-action-row: 1 dong trong danh sach (dat trong .l-list). Cot co dinh -> thang hang giua cac dong ---------- */
.c-action-row { display: grid; grid-template-columns: minmax(0, 1.3fr) var(--col-badge) minmax(0, 2fr) var(--col-action); align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--color-bg); border-top: var(--border-width-1) solid var(--color-border-subtle); }
.c-action-row:hover { background: var(--slate-50); }
.c-action-row--urgent, .c-action-row--attention { /* v2: badge mang tin hieu, khong rail */ }
.c-action-row__main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.c-action-row__chips { display: flex; gap: var(--space-1); flex-shrink: 0; }
.c-action-row__chip { }
.c-action-row__why { font-size: var(--font-size-sm); color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-action-row__why-label { display: none; }
.c-action-row__quick-close { justify-self: end; }
.c-action-row__confirm { grid-column: 1 / -1; }
.c-action-row--closing { opacity: 0.5; transition: opacity var(--duration-base) var(--easing-standard); }
@container (max-width: 40em) {
  .c-action-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); }
  .c-action-row__main { grid-column: 1 / -1; justify-self: stretch; }
  .c-action-row__quick-close { grid-column: 1 / -1; justify-self: start; }
}

/* DO DAC #3: rail trai cho dong urgent */
.c-action-row--urgent { border-left-color: var(--color-severity-urgent-text); }
.c-action-row--attention { border-left-color: var(--color-severity-attention-text); }


/* da resolve: an khoi danh sach (JS). Dang dong nhanh: */
/* Main hep (< 45em, vd. man 1024 co sidebar): 2 hang - card + badge / why + action.
   Container = .l-shell-main (layout.css). Query dung em vi khong dung duoc var(). */

/* ---------- c-consent-step: patient B1 ---------- */
.c-consent-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.c-consent-step__progress { display: flex; gap: var(--space-1); }
.c-consent-step__progress-item { flex: 1; height: var(--space-1); border-radius: var(--radius-full); background: var(--color-border); }
.c-consent-step__progress-item--done,
.c-consent-step__progress-item--current { background: var(--brand-primary); }
.c-consent-step__count { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.c-consent-step__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-display); }
.c-consent-step__body { font-size: var(--font-size-base); line-height: var(--line-height-base); }
.c-consent-step__choice {
  padding: var(--space-4);
  border: var(--border-width-1) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.c-consent-step__choice:has(input:checked) { border-color: var(--brand-control); background: var(--brand-tint); }
.c-consent-step__actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- c-chart-container: duong = brand, nhan nguong o dau phai tren duong ---------- */
.c-chart-container { display: flex; flex-direction: column; gap: var(--space-3); border: var(--border-width-1) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.c-chart-container__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.c-chart-container__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.c-chart-container__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-chart-container__range { display: inline-flex; padding: var(--border-width-2); gap: var(--border-width-2); border-radius: var(--radius-md); background: var(--slate-100); }
.c-chart-container__range button { min-height: calc(var(--control-height-sm) - var(--space-1)); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; }
.c-chart-container__range button:hover { color: var(--color-text); }
.c-chart-container__range button[aria-pressed="true"] { background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-sm); }
.c-chart-container__canvas { min-height: var(--chart-min-height); color: var(--color-text-muted); }
.c-chart-container__canvas svg { display: block; width: 100%; height: var(--chart-min-height); overflow: visible; }
.c-chart-container__grid { stroke: var(--color-border-subtle); }
.c-chart-container__line { fill: none; stroke: var(--brand-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.c-chart-container__line--secondary { stroke: var(--slate-400); stroke-width: 2; }
.c-chart-container__point { fill: var(--color-bg); stroke: var(--brand-primary); stroke-width: 2; }
.c-chart-container__threshold { stroke: var(--slate-400); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.c-chart-container__label { fill: var(--color-text-muted); font-size: var(--font-size-xs); font-family: var(--font-family-base); }
.c-chart-container__legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-chart-container__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-chart-container__key::before { content: ""; width: var(--space-4); height: var(--border-width-2); border-radius: var(--radius-full); background: var(--brand-primary); }
.c-chart-container__key--secondary::before { background: var(--slate-400); }
.c-chart-container__key--threshold::before { background: none; border-top: var(--border-width-2) dashed var(--slate-400); height: 0; }
.c-chart-container--loading .c-chart-container__canvas { background: var(--slate-50); border-radius: var(--radius-md); }
.c-chart-container--empty .c-chart-container__canvas { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--slate-50); border-radius: var(--radius-md); }

/* ---------- c-break-glass-modal ---------- */
.c-break-glass-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-overlay);
}
.c-break-glass-modal--inline { position: relative; inset: auto; z-index: auto; padding: var(--space-6); }
.c-break-glass-modal__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--modal-max);
  background: var(--color-bg);
  border: var(--border-width-1) solid var(--color-border-strong);
  border-top: var(--border-width-rail) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.c-break-glass-modal__eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.c-break-glass-modal__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.c-break-glass-modal__body { font-size: var(--font-size-sm); color: var(--color-text); }
.c-break-glass-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- c-appointment-row (sau S5) ---------- */
.c-appointment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--control-height-lg);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}
.c-appointment-row__who { font-weight: var(--font-weight-bold); }
.c-appointment-row__type { color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.c-appointment-row__when { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-appointment-row--cancelled .c-appointment-row__when { text-decoration: line-through; color: var(--color-text-muted); }

/* ---------- c-booking-form (sau S5) ---------- */
.c-booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.c-booking-form__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.c-booking-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr)); gap: var(--space-4); }

/* ---------- c-onboarding-funnel (A6) ---------- */
.c-onboarding-funnel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
}
.c-onboarding-funnel__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-width-1) solid var(--color-border-subtle);
}
.c-onboarding-funnel__stage:first-child { border-left: 0; }
.c-onboarding-funnel__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.c-onboarding-funnel__count { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; }
.c-onboarding-funnel__rate { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.c-onboarding-funnel__bar { height: var(--space-1); background: var(--color-surface); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-2); }
.c-onboarding-funnel__bar > span { display: block; height: 100%; background: var(--color-text-muted); }
.c-onboarding-funnel__stage--current { background: var(--brand-tint); }
.c-onboarding-funnel__stage--current .c-onboarding-funnel__bar > span { background: var(--brand-primary); }

/* ---------- c-burden-table (A11, chi doc) ---------- */
.c-burden-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.c-burden-table th,
.c-burden-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border-subtle);
}
.c-burden-table th {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  border-bottom: var(--border-width-1) solid var(--color-border-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.c-burden-table td { font-weight: var(--font-weight-medium); }
.c-burden-table__num { text-align: right !important; }
.c-burden-table tbody tr:hover { background: var(--color-surface); }
.c-burden-table__bar { display: block; height: var(--size-dot); background: var(--color-surface); border-radius: var(--radius-full); min-width: var(--space-8); overflow: hidden; }
.c-burden-table__bar > span { display: block; height: 100%; background: var(--color-text-muted); }

/* ---------- c-threshold-whatif (A11, CHI DOC, khong nut ap dung, khong goi y gia tri) ---------- */
.c-threshold-whatif {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width-1) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.c-threshold-whatif__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.c-threshold-whatif__compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.c-threshold-whatif__cell { display: flex; flex-direction: column; gap: var(--space-1); }
.c-threshold-whatif__key { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.c-threshold-whatif__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.c-threshold-whatif__note { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---------- c-notice: v2 nen mem, khong rail den. neutral | attention | empty ---------- */
.c-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: var(--border-width-1) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-sm); }
.c-notice__icon { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; grid-row: span 2; margin-top: var(--border-width-2); color: var(--brand-text); }
.c-notice__title { font-weight: var(--font-weight-semibold); }
.c-notice__body { grid-column: 2; color: var(--color-text-muted); }
.c-notice__actions { grid-column: 2; display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.c-notice--neutral { background: var(--slate-50); border-color: var(--color-border-subtle); }
.c-notice--attention { background: var(--color-severity-attention-bg); border-color: transparent; }
.c-notice--attention .c-notice__icon { color: var(--color-severity-attention-text); }
.c-notice--attention .c-notice__body { color: var(--color-text); }
.c-notice--empty { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: start; text-align: left; padding: var(--space-5); background: var(--color-bg); border-color: var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.c-notice--empty .c-notice__icon { grid-row: span 3; width: var(--size-avatar-lg); height: var(--size-avatar-lg); padding: var(--space-3); margin: 0; border-radius: var(--radius-full); background: var(--brand-tint); color: var(--brand-text); }
.c-notice--empty .c-notice__body, .c-notice--empty .c-notice__actions { grid-column: 2; }
.c-notice--empty .c-notice__title { font-size: var(--font-size-lg); padding-top: var(--space-1); }
.l-shell-patient .c-notice { font-size: var(--font-size-base); padding: var(--space-4); border-radius: var(--radius-md); }
.l-shell-patient .c-notice--attention { background: var(--slate-100); }
.l-shell-patient .c-notice--attention .c-notice__icon { color: var(--color-text); }

/* All clear / empty state: can giua, khong rail */

/* Patient: KHONG mau severity. attention (offline, auto-lock) = nen surface + vien dam, chi khac neutral o icon va vien */

/* ======================================================================
   MO RONG [CR-4]
   ====================================================================== */

/* ---------- c-table: bang du lieu chung (A1 tenant, A3 user, A5 threshold, A12 audit) ---------- */
.c-table-wrap { overflow-x: auto; border: var(--border-width-1) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background: var(--color-bg); }
.c-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.c-table th, .c-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-1) solid var(--color-border-subtle); vertical-align: middle; }
.c-table th { position: sticky; top: 0; background: var(--color-bg); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-muted); white-space: nowrap; border-bottom-color: var(--color-border); background: var(--slate-50); }
.c-table th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; gap: var(--space-1); align-items: center; }
.c-table th[aria-sort="ascending"], .c-table th[aria-sort="descending"] { color: var(--color-text); }
.c-table td { font-weight: var(--font-weight-medium); }
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table__num { text-align: right !important; }
.c-table__primary { font-weight: var(--font-weight-bold); color: var(--color-text); }
.c-table__muted { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.c-table--interactive tbody tr { cursor: pointer; }
.c-table--interactive tbody tr:hover { background: var(--color-surface); }
.c-table tbody tr[aria-selected="true"] { background: var(--brand-tint); }
.c-table__status { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); }
.c-table__status::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-full); background: var(--color-text-muted); }
.c-table__status--active::before { background: var(--brand-primary); }
.c-table__status--off { color: var(--color-text-muted); }
.c-table__status--off::before { background: transparent; border: var(--border-width-1) solid var(--color-text-muted); }
.c-table__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: var(--border-width-1) solid var(--color-border-subtle); font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---------- c-dialog: modal giua man (Owner: khong dung side panel). --wide cho noi dung nhieu ----------
   Break-glass giu component rieng (hop dong). */
.c-dialog { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-overlay); }
.c-dialog__panel { display: flex; flex-direction: column; width: 100%; max-width: var(--modal-max); max-height: calc(100vh - var(--space-7)); background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.c-dialog--inline { position: relative; inset: auto; z-index: auto; }
.c-dialog__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); }
.c-dialog__eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.c-dialog__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.c-dialog__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); overflow-y: auto; }
.c-dialog__section { display: flex; flex-direction: column; gap: var(--space-3); }
.c-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: var(--border-width-1) solid var(--color-border-subtle); }
.c-dialog__close { margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0 0; } /* dung kem c-btn c-btn--ghost c-btn--icon c-btn--sm */

/* ---------- c-popover: gop menu + tooltip. Mac dinh = menu hanh dong | --tip = chu giai ngan (khong chua thong tin bat buoc) ---------- */
.c-popover { position: relative; display: inline-flex; }
.c-popover__panel { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 80; min-width: var(--col-min); padding: var(--space-1); margin: 0; list-style: none; background: var(--color-bg); border: var(--border-width-1) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.c-popover__panel[hidden] { display: none; }
.c-popover--static .c-popover__panel { position: static; }
.c-popover__item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-height-sm); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); cursor: pointer; }
.c-popover__item:hover, .c-popover__item:focus-visible { background: var(--color-surface); }
.c-popover__item svg, .c-popover__item img { width: var(--size-icon); height: var(--size-icon); }
.c-popover__divider { height: var(--border-width-1); margin: var(--space-1) 0; background: var(--color-border-subtle); }
.c-popover--tip .c-popover__panel { top: auto; right: auto; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%); min-width: 0; width: max-content; max-width: var(--col-min-xl); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--color-text); color: var(--color-bg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); box-shadow: none; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--easing-standard); }
.c-popover--tip:hover .c-popover__panel, .c-popover--tip:focus-within .c-popover__panel { opacity: 1; }

/* ---------- c-field__toggle (gop vao c-field): bat/tat (feature A1, away mode A8, cai dat patient) ---------- */
.c-field__toggle { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.c-field__toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-field__toggle-track { position: relative; flex-shrink: 0; width: calc(var(--size-icon-lg) * 1.75); height: var(--size-icon-lg); border-radius: var(--radius-full); background: var(--color-control-bg-hover); border: var(--border-width-1) solid var(--color-border-strong); transition: background-color var(--duration-fast) var(--easing-standard); }
.c-field__toggle-track::after { content: ""; position: absolute; top: var(--border-width-2); left: var(--border-width-2); width: calc(var(--size-icon-lg) - var(--space-2)); height: calc(var(--size-icon-lg) - var(--space-2)); border-radius: var(--radius-full); background: var(--color-bg); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--easing-standard); }
.c-field__toggle-input:checked + .c-field__toggle-track { background: var(--brand-control); border-color: var(--brand-700); }
.c-field__toggle-input:checked + .c-field__toggle-track::after { transform: translateX(calc(var(--size-icon-lg) * 0.75)); }
.c-field__toggle-input:focus-visible + .c-field__toggle-track { outline: var(--focus-ring-width) solid var(--brand-focus); outline-offset: var(--focus-ring-offset); }
.c-field__toggle-input:disabled + .c-field__toggle-track { opacity: 0.5; }
.c-field__toggle-state { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---------- c-tabs ---------- */
.c-tabs { display: flex; gap: var(--space-4); border-bottom: var(--border-width-1) solid var(--color-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.c-tabs__tab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); margin-bottom: calc(var(--border-width-1) * -1); border-bottom: var(--border-width-2) solid transparent; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); white-space: nowrap; }
.c-tabs__tab:hover { color: var(--color-text); }
.c-tabs__tab[aria-selected="true"] { color: var(--brand-text); font-weight: var(--font-weight-semibold); border-bottom-color: var(--brand-primary); }
.c-tabs__tab:focus-visible { outline-offset: calc(var(--focus-ring-offset) * -1); }
.c-tabs__count { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--slate-100); font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.c-tabs__tab[aria-selected="true"] .c-tabs__count { background: var(--brand-tint); color: var(--brand-text); }

/* ---------- c-field__upload (gop vao c-field): keo tha file (A13 ECG/imaging, A4 logo) ---------- */
.c-field__upload { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); border: var(--border-width-2) dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; font-size: var(--font-size-sm); cursor: pointer; }
.c-field__upload:hover, .c-field__upload--dragover { border-color: var(--brand-control); background: var(--brand-tint); }
.c-field__upload svg { width: var(--size-icon-lg); height: var(--size-icon-lg); color: var(--color-text-muted); }
.c-field__upload-title { font-weight: var(--font-weight-bold); }
.c-field__upload-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-field__upload-file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width-1) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); font-size: var(--font-size-sm); }
.c-field__upload--error { border-color: var(--color-error); }

/* ---------- c-timeline: timeline hop nhat (A13 staff, B5 patient) ---------- */
.c-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c-timeline__day { padding: var(--space-4) 0 var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.c-timeline__item { position: relative; display: grid; grid-template-columns: var(--size-icon-lg) minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) 0; }
.c-timeline__item::before { content: ""; position: absolute; left: calc(var(--size-icon-lg) / 2); top: calc(var(--space-3) + var(--size-icon-lg)); bottom: calc(var(--space-3) * -1); width: var(--border-width-1); background: var(--color-border); }
.c-timeline__item:last-child::before { display: none; }
.c-timeline__icon { width: var(--size-icon-lg); height: var(--size-icon-lg); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-surface); border: var(--border-width-1) solid var(--color-border); color: var(--color-text-muted); }
.c-timeline__icon svg, .c-timeline__icon img { width: var(--size-icon); height: var(--size-icon); }
.c-timeline__title { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.c-timeline__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.c-timeline__value { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-timeline__source { display: inline-flex; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.l-shell-patient .c-timeline__title { font-size: var(--font-size-base); }

/* ---------- c-thread: tin nhan (A14 staff, B4 patient), khong realtime ---------- */
.c-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.c-thread__msg { display: flex; flex-direction: column; gap: var(--space-1); max-width: 80%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg); border: var(--border-width-1) solid var(--color-border); font-size: var(--font-size-sm); }
.c-thread__msg--own { align-self: flex-end; background: var(--brand-tint); border-color: transparent; }
.c-thread__msg--note { max-width: 100%; background: var(--color-surface); border-style: dashed; }
.c-thread__author { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.c-thread__time { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-thread__compose { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width-1) solid var(--color-border-subtle); }
.l-shell-patient .c-thread__msg { font-size: var(--font-size-base); max-width: 90%; }

/* ---------- c-field__color (gop vao c-field): chon mau goc + bao cao tuong phan (A4 Branding) ---------- */
.c-field__color { display: flex; flex-direction: column; gap: var(--space-3); }
.c-field__color-row { display: flex; align-items: center; gap: var(--space-3); }
.c-field__color-swatch { width: var(--control-height); height: var(--control-height); padding: 0; border: var(--border-width-1) solid var(--color-border-strong); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.c-field__color-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.c-field__color-step { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--control-height-lg); padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.c-field__color-report { display: flex; flex-direction: column; border: var(--border-width-1) solid var(--color-border); border-radius: var(--radius-sm); }
.c-field__color-check { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-1) solid var(--color-border-subtle); font-size: var(--font-size-sm); }
.c-field__color-check:last-child { border-bottom: 0; }
.c-field__color-result { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.c-field__color-result--fail { color: var(--color-error); }

/* ---------- CR-6: so do lon ---------- */
.c-field__input--metric { min-height: calc(var(--input-height) * 1.25); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-display); font-variant-numeric: proportional-nums; }
.c-field__input--metric::placeholder { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); letter-spacing: 0; }
.c-field__metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.c-field__unit { font-size: var(--font-size-sm); color: var(--color-text-muted); min-width: var(--size-avatar-lg); }
.c-patient-card__value { font-size: var(--font-size-xl); font-variant-numeric: proportional-nums; }
.l-shell-patient .c-patient-card__value { font-size: var(--font-size-2xl); }
/* CR-6: khong dung side panel - c-dialog--wide thay the */
.c-dialog--wide .c-dialog__panel { max-width: calc(var(--modal-max) * 1.35); }

/* ---------- CR-7: 1a + so do lon (1c) + nen Mist + avatar mau ---------- */
.c-patient-card__value { font-size: var(--font-size-2xl); letter-spacing: -0.02em; line-height: var(--line-height-tight); }
.c-patient-card__vitals .c-patient-card__value { font-size: var(--font-size-xl); }
.c-patient-card--hero .c-patient-card__value, .l-shell-patient .c-patient-card__value { font-size: calc(var(--font-size-2xl) * 1.15); }
/* avatar: mau theo ten (server tinh hash ten % 3 -> --a1|--a2|--a3), chi trang tri, khong mang nghia */
.c-patient-card__avatar { background: var(--mist-100); color: var(--petrol-700); }
.c-patient-card__avatar--a2 { background: var(--sand-100); color: var(--sand-700); }
.c-patient-card__avatar--a3 { background: var(--iris-100); color: var(--iris-700); }
/* patient app: card khong vien, noi tren mist */
.l-shell-patient .c-patient-card, .l-shell-patient .c-notice--empty { border-color: transparent; }

/* ---------- CR-8 ---------- */
/* chart: nhan + diem bang HTML de khong bi keo gian */
.c-chart-container__plot { position: relative; height: var(--chart-min-height); margin-inline: var(--space-7); }
.c-chart-container__area { position: absolute; inset: 0; }
.c-chart-container__area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c-chart-container__ylabel, .c-chart-container__tlabel { position: absolute; transform: translateY(-50%); font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; line-height: 1; }
.c-chart-container__ylabel { right: calc(100% + var(--space-3)); }
.c-chart-container__tlabel { left: calc(100% + var(--space-2)); font-weight: var(--font-weight-semibold); }
.c-chart-container__dot { position: absolute; width: calc(var(--size-dot) + var(--space-1)); height: calc(var(--size-dot) + var(--space-1)); transform: translate(-50%, -50%); border-radius: var(--radius-full); background: var(--color-bg); border: var(--border-width-2) solid var(--brand-primary); }
.c-chart-container__dot--over { background: var(--brand-primary); }
.c-chart-container__xaxis { position: relative; height: var(--space-5); margin: var(--space-2) var(--space-7) 0; }
.c-chart-container__xaxis span { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.c-chart-container__key--over::before { width: calc(var(--size-dot) + var(--space-1)); height: calc(var(--size-dot) + var(--space-1)); border-radius: var(--radius-full); }
.l-shell-patient .c-chart-container__plot { margin-inline: var(--space-6); }
/* list: divider ro giua cac patient */
.c-action-row, .c-alert-row { border-top-color: var(--color-border); }
/* hero: so do nam ngang */
.c-patient-card__figures { display: flex; gap: var(--space-6); text-align: right; flex-wrap: wrap; justify-content: flex-end; }
.c-patient-card__figures .c-patient-card__label { text-align: right; }
.c-patient-card__quote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--slate-50); font-size: var(--font-size-sm); }
.c-patient-card__quote .c-icon { grid-row: span 2; margin-top: var(--border-width-2); color: var(--color-text-muted); }
.c-patient-card__quote b { font-weight: var(--font-weight-semibold); }
/* notice success: xac nhan da luu/da gui - noi bat hon neutral */
.c-notice--success { background: var(--color-bg); border-color: var(--color-border); box-shadow: var(--shadow-sm); padding-block: var(--space-4); align-items: center; }
.c-notice--success .c-notice__icon { color: var(--brand-on-primary); background: var(--brand-primary); border-radius: var(--radius-full); width: var(--size-avatar); height: var(--size-avatar); padding: var(--space-2); box-sizing: border-box; margin-top: 0; }
.c-notice--success .c-notice__title { font-size: var(--font-size-base); }
.c-notice--success .c-notice__body { color: var(--color-text); }
/* timeline: gia tri dat gan noi dung, khong day sang mep phai */
.c-timeline__item { grid-template-columns: var(--size-icon-lg) minmax(0, calc(var(--col-min-xl) * 1.5)) auto; justify-content: start; column-gap: var(--space-5); padding-inline: var(--space-2); border-radius: var(--radius-sm); }
.c-timeline__item:hover { background: var(--slate-50); }
.c-timeline__value { font-size: var(--font-size-base); }
.c-patient-card--hero > .c-patient-card__header { flex-wrap: wrap; row-gap: var(--space-3); }
.c-patient-card__figures { flex-wrap: nowrap; }
.c-patient-card__figures .c-patient-card__value { font-size: var(--font-size-2xl); }
/* Owner: so "1" tabular cua Public Sans trong giong mono -> dung so thuong, can phai van giu */
.c-table, .c-burden-table, .c-nav__count, .c-tabs__count, .c-alert-row__time, .c-alert-row__reading, .c-timeline__value, .c-threshold-whatif__value, .c-onboarding-funnel__count, .c-chart-container__ylabel, .c-chart-container__tlabel { font-variant-numeric: normal; }
/* divider: chi bo vien o dong dau tien THAT cua list (rpm-* wrapper la display:contents) */
.l-list > .c-action-row:first-child, .l-list > :first-child > .c-action-row, .l-list__header + .c-action-row, .l-list__header + * > .c-action-row { border-top: 0; }
.l-list__header + .c-alert-row, .l-list__header + * > .c-alert-row { border-top-color: var(--color-border); }
.c-patient-card__figures { margin-left: auto; }

/* ---------- CR-10: messenger (patient) ---------- */
.c-thread--chat { gap: var(--space-1); }
.c-thread__day { display: flex; justify-content: center; margin: var(--space-4) 0 var(--space-2); }
.c-thread__day span { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-bg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.c-thread__bubble { align-self: flex-start; display: flex; flex-direction: column; gap: var(--space-1); max-width: 82%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm); background: var(--color-bg); box-shadow: var(--shadow-sm); color: var(--color-text); font-size: var(--font-size-base); line-height: var(--line-height-snug); overflow-wrap: anywhere; }
.c-thread__bubble--own { align-self: flex-end; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); background: var(--brand-primary); color: var(--brand-on-primary); box-shadow: none; }
.c-thread__bubble--failed { background: var(--color-bg); color: var(--color-text); border: var(--border-width-1) solid var(--color-severity-attention-text); }
.c-thread__meta { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0 var(--space-2) var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-thread__meta--own { align-self: flex-end; }
.c-thread__meta .c-icon { width: var(--space-4); height: var(--space-4); }
.c-thread__bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg); border-top: var(--border-width-1) solid var(--color-border); }
.c-thread__input { flex: 1; min-height: var(--control-height); max-height: calc(var(--control-height) * 3); padding-block: var(--space-3); border-radius: var(--radius-lg); resize: none; field-sizing: content; }
.c-thread__send { flex-shrink: 0; border-radius: var(--radius-full); width: var(--control-height); min-height: var(--control-height); }
.c-thread__input[data-focused], .c-field__input[data-focused] { border-color: var(--brand-primary); box-shadow: 0 0 0 var(--border-width-2) var(--brand-tint); }

/* ---------- CR-10: c-status - trang thai nho, khong phai thong bao ---------- */
.c-status { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; min-height: var(--size-icon-lg); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.c-status .c-icon { width: var(--size-icon); height: var(--size-icon); }
.c-status--seen { background: var(--brand-tint); color: var(--brand-text); }
.c-status--pending { background: var(--slate-100); color: var(--color-text-muted); }
.c-status--offline { background: var(--color-severity-attention-bg); color: var(--color-severity-attention-text); }

/* ---------- CR-10: c-dose - thuoc trong ngay (patient tu ghi nhan) ---------- */
.c-dose-group { display: flex; flex-direction: column; background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.c-dose-group__title { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.c-dose-group__meta { margin-left: auto; font-weight: var(--font-weight-regular); }
.c-dose { display: grid; grid-template-columns: var(--size-avatar-lg) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-5); border-top: var(--border-width-1) solid var(--color-border-subtle); }
.c-dose-group__title + .c-dose { border-top: 0; }
.c-dose__icon { display: grid; place-items: center; width: var(--size-avatar-lg); height: var(--size-avatar-lg); border-radius: var(--radius-full); background: var(--brand-tint); color: var(--brand-text); }
.c-dose--taken .c-dose__icon, .c-dose--skipped .c-dose__icon { background: var(--slate-100); color: var(--color-text-muted); }
.c-dose__main { display: flex; flex-direction: column; min-width: 0; }
.c-dose__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.c-dose__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.c-dose__by { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.c-dose__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.c-dose--taken .c-dose__name { color: var(--color-text-muted); }

/* ---------- CR-10: action bar dinh tren ban phim ---------- */
.l-shell-actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg); border-top: var(--border-width-1) solid var(--color-border); }
/* CR-10 fix: ten thuoc la 1 khoi, pill trang thai nam duoi ten; trong card khong double padding */
.c-dose { grid-template-columns: var(--size-avatar-lg) minmax(0, 1fr); }
.c-dose__state { grid-column: 2; justify-self: start; }
.c-patient-card .c-dose { padding-inline: 0; }
/* CR-11 */
.c-btn--badge { position: relative; }
.c-btn__badge { position: absolute; top: 0; right: 0; min-width: calc(var(--space-4) + var(--space-1)); height: calc(var(--space-4) + var(--space-1)); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--color-severity-urgent-text); color: var(--white); font-size: calc(var(--font-size-xs) * 0.85); font-weight: var(--font-weight-bold); line-height: calc(var(--space-4) + var(--space-1)); text-align: center; box-shadow: 0 0 0 var(--border-width-2) var(--color-surface); pointer-events: none; }
.l-shell-patient .c-btn--badge { width: var(--touch-min); min-height: var(--touch-min); color: var(--color-text); }
.c-btn--badge[aria-current="page"] { background: var(--brand-tint); color: var(--brand-text); }
.c-dose__action { grid-column: 2; justify-self: start; min-width: calc(var(--control-height) * 2.5); }
.c-dose--missed .c-dose__icon { background: var(--slate-100); color: var(--color-text-muted); }
.c-dose--missed .c-dose__name { color: var(--color-text-muted); }
/* checklist Today: 1 dong/viec, pill ben phai */
.c-dose--compact { grid-template-columns: var(--size-avatar) minmax(0, 1fr) auto; padding-block: var(--space-3); }
.c-dose--compact .c-dose__icon { width: var(--size-avatar); height: var(--size-avatar); }
.c-dose--compact .c-dose__icon .c-icon { width: var(--size-icon); height: var(--size-icon); }
.c-dose--compact .c-dose__name { font-size: var(--font-size-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-dose--compact .c-dose__state { grid-column: 3; justify-self: end; }
/* CR-12: header patient = Messages + avatar (Settings); lien he khan */
.l-shell-header__actions { display: flex; align-items: center; gap: var(--space-1); }
.c-btn--badge .c-icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.c-btn--avatar { padding: 0; width: var(--touch-min); min-height: var(--touch-min); border-radius: var(--radius-full); }
.c-btn--avatar .c-patient-card__avatar { width: var(--size-avatar); height: var(--size-avatar); background: var(--brand-tint); color: var(--brand-text); }
.c-btn--avatar[aria-current="page"] .c-patient-card__avatar { box-shadow: 0 0 0 var(--border-width-2) var(--brand-primary); }
.c-contact__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.c-contact__emergency { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-severity-urgent-bg); color: var(--color-severity-urgent-text); font-size: var(--font-size-sm); text-decoration: none; }
.c-contact__emergency b { font-size: var(--font-size-base); }
.c-contact__emergency:hover { color: var(--color-severity-urgent-text); text-decoration: underline; }
/* CR-13: header patient to hon (de bam cho nguoi lon tuoi) */
.l-shell-patient .c-btn--badge, .l-shell-patient .c-btn--avatar { width: calc(var(--touch-min) + var(--space-1)); min-height: calc(var(--touch-min) + var(--space-1)); }
.l-shell-patient .c-btn--badge .c-icon--lg { width: calc(var(--size-icon-lg) + var(--space-1)); height: calc(var(--size-icon-lg) + var(--space-1)); stroke-width: 2; }
.l-shell-patient .c-btn--avatar .c-patient-card__avatar { width: calc(var(--size-avatar) + var(--space-2)); height: calc(var(--size-avatar) + var(--space-2)); font-size: var(--font-size-sm); }
.l-shell-patient .c-btn__badge { top: var(--border-width-2); right: var(--border-width-2); }
.l-shell-header__actions { gap: var(--space-2); }

/* CR-13: c-intro - welcome / intro / splash (patient) */
.c-intro { flex: 1; display: flex; flex-direction: column; gap: var(--space-5); justify-content: space-between; }
.c-intro__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding-top: var(--space-6); }
.c-intro__art { display: grid; place-items: center; width: calc(var(--size-avatar-lg) * 2.5); height: calc(var(--size-avatar-lg) * 2.5); border-radius: var(--radius-full); background: var(--brand-tint); color: var(--brand-text); }
.c-intro__art .c-icon { width: calc(var(--size-icon-lg) * 2.25); height: calc(var(--size-icon-lg) * 2.25); stroke-width: 1.5; }
.c-intro__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-display); line-height: var(--line-height-tight); max-width: 16ch; text-wrap: balance; }
.c-intro__body { font-size: var(--font-size-base); color: var(--color-text-muted); max-width: 30ch; text-wrap: pretty; }
.c-intro__dots { display: flex; justify-content: center; gap: var(--space-2); }
.c-intro__dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--slate-300); }
.c-intro__dot--on { width: var(--space-5); background: var(--brand-primary); }
.c-intro__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.c-intro__skip { align-self: flex-end; }
.c-splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); background: var(--brand-primary); color: var(--brand-on-primary); min-height: 100%; text-align: center; padding: var(--space-6); }
.c-splash__tag { font-size: var(--font-size-sm); opacity: 0.9; }
.c-splash__tenant { display: grid; place-items: center; width: calc(var(--control-height-lg) * 1.5); height: calc(var(--control-height-lg) * 1.5); border-radius: var(--radius-lg); background: var(--brand-on-primary); color: var(--brand-primary); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.c-splash__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.c-splash__powered { position: absolute; bottom: var(--space-6); font-size: var(--font-size-xs); opacity: 0.85; }
.l-shell-patient[data-flow="splash"] { position: relative; }
.l-shell-patient[data-flow="splash"] .l-shell-header, .l-shell-patient[data-flow="splash"] .l-shell-nav { display: none; }
.l-shell-patient[data-flow="onboarding"] .l-shell-header__actions { display: none; }
/* CR-13 fix: splash phu kin man, wordmark giu can trai (ProPakit thang mep chu RPMpro) */
.l-shell-patient { position: relative; width: 100%; }
.c-splash { position: absolute; inset: 0; z-index: 5; min-height: 0; gap: var(--space-5); }
.c-splash .c-wordmark, .c-splash .c-wordmark__text { text-align: left; align-items: flex-start; }
.c-splash .c-wordmark--lg { --wm-mark: calc(var(--control-height-lg) * 1.25); }
.c-splash__tag { max-width: 24ch; text-wrap: balance; }