/* VenHIMS Exchange — VENHIMS brand on Carbon Design System bones. IBM Plex
   type, the Carbon gray scale and 8px grid, square corners; the interactive
   and chrome colors come from the VENHIMS logo system (navy #0A2540, blue
   #1E6FB8, accent #2E86E0, grey #5A6B73) so the exchange reads as the same
   product family as the EHR. No gradients, no decoration without a job.

   Contrast (measured, WCAG 2.1): navy/white 15.54:1, blue on white 5.22:1,
   blue on g10 4.75:1, white on blue 5.22:1. The logo accent #2E86E0 reaches
   only 4.15:1 on navy, so text on navy uses --accent-on-dark (#4D9BE8,
   5.30:1) and #2E86E0 is reserved for graphic, non-text use. */

:root {
  /* VENHIMS brand */
  --navy: #0A2540; --navy-600: #123a63; --navy-900: #061a2e;
  --accent: #2E86E0;          /* graphic use only */
  --accent-on-dark: #4D9BE8;  /* text on navy — AA */
  --brand-grey: #5A6B73;

  --g100: #161616; --g90: #262626; --g80: #393939; --g70: #525252;
  --g60: #6f6f6f; --g50: #8d8d8d; --g40: #a8a8a8; --g30: #c6c6c6;
  --g20: #e0e0e0; --g10: #f4f4f4; --white: #ffffff;
  --blue: #1E6FB8; --blue-hover: #1A5F9E; --blue-dark: #0A2540;
  --red: #da1e28; --red-bg: #fff1f1;
  --green: #198038; --green-bg: #defbe6;
  --amber: #b28600; --amber-bg: #fcf4d6; --amber-text: #684e00;
  --teal-bg: #d9fbfb; --teal-text: #004144;
  --purple-bg: #e8daff; --purple-text: #491d8b;
  --cyan-bg: #e5f6ff; --cyan-text: #003a6d;
  --text: #161616; --text-secondary: #525252; --text-helper: #6f6f6f;
  --border: #e0e0e0; --border-strong: #8d8d8d;
  --focus: #1E6FB8;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --header-h: 48px; --sidenav-w: 256px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; font: 400 .875rem/1.45 var(--sans); color: var(--text);
  background: var(--g10); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: 0; }
h1 { font-size: 1.75rem; line-height: 1.25; font-weight: 300; }
h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 400; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-size: .8125rem; }
.muted { color: var(--text-helper); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ex-icon { flex: none; vertical-align: -2px; }

/* ---- Header (g100) --------------------------------------------------------- */
.ex-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 50;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; border-bottom: 1px solid var(--navy-600);
}
.ex-header a { color: var(--white); }
.ex-header a:hover { text-decoration: none; }
/* The VENHIMS mark is the pulse trace, as on the EHR — not a medical cross.
   VEN sits in white, HIMS in the on-dark accent; "Exchange" names the product
   within the family. */
.ex-header__brand {
  display: flex; align-items: center; gap: .5rem; padding: 0 1rem;
  font-size: .875rem; letter-spacing: .01em; white-space: nowrap;
}
.ex-header__brand .ex-icon { color: var(--accent-on-dark); }
.ex-header__brand .wordmark { font-weight: 700; letter-spacing: .02em; }
.ex-header__brand .wordmark em { font-style: normal; color: var(--accent-on-dark); }
.ex-header__brand .product {
  font-weight: 400; color: var(--g30); padding-left: .5rem; margin-left: .125rem;
  border-left: 1px solid var(--navy-600);
}
.ex-header__divider { width: 1px; height: 24px; background: var(--navy-600); }
.ex-header__facility {
  display: flex; align-items: center; gap: .5rem; padding: 0 1rem;
  color: var(--g30); font-size: .8125rem; min-width: 0;
}
.ex-header__facility select {
  background: var(--navy-600); color: var(--white); border: 1px solid var(--navy-600);
  font: inherit; padding: .25rem .5rem; max-width: 280px;
}
.ex-header__spacer { flex: 1; }
.ex-header__action {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  min-width: var(--header-h); height: var(--header-h); padding: 0 .75rem;
  background: none; border: 0; color: var(--white); cursor: pointer; font: inherit;
  position: relative;
}
.ex-header__action:hover { background: var(--navy-600); }
.ex-header__badge {
  position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff;
  font-size: .6875rem; line-height: 16px; text-align: center; font-weight: 600;
}
.ex-header__user { padding: 0 1rem; text-align: right; line-height: 1.25; }
.ex-header__user .n { font-size: .8125rem; }
.ex-header__user .r { font-size: .6875rem; color: var(--g40); }

/* ---- Side navigation -------------------------------------------------------- */
.ex-sidenav {
  position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidenav-w);
  background: var(--white); border-right: 1px solid var(--border); z-index: 40;
  overflow-y: auto; padding: .5rem 0 1rem; display: flex; flex-direction: column;
}
.ex-sidenav__group { padding: .75rem 0 .25rem; }
.ex-sidenav__label {
  padding: .25rem 1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-helper);
}
.ex-sidenav__item {
  display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem;
  color: var(--text-secondary); font-size: .875rem; border-left: 3px solid transparent;
}
.ex-sidenav__item:hover { background: var(--g10); color: var(--text); text-decoration: none; }
.ex-sidenav__item.active {
  border-left-color: var(--blue); background: var(--g10); color: var(--text); font-weight: 600;
}
.ex-sidenav__item .count {
  margin-left: auto; background: var(--g20); color: var(--text-secondary);
  font-size: .6875rem; font-weight: 600; padding: 0 .5rem; border-radius: 8px; line-height: 1.5;
}
.ex-sidenav__item.active .count { background: var(--blue); color: #fff; }
.ex-sidenav__foot { margin-top: auto; padding: 1rem; font-size: .75rem; color: var(--text-helper); }

/* ---- Content --------------------------------------------------------------- */
.ex-main {
  margin: var(--header-h) 0 0 var(--sidenav-w); padding: 2rem;
  min-height: calc(100vh - var(--header-h)); max-width: 1400px;
}
.ex-page-head { margin-bottom: 1.5rem; }
.ex-page-head .crumb { font-size: .75rem; margin-bottom: .25rem; }
.ex-page-head .sub { color: var(--text-secondary); margin-top: .25rem; }
.ex-page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- Tiles / cards ----------------------------------------------------------- */
.ex-grid { display: grid; gap: 1rem; }
.ex-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ex-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ex-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ex-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.ex-tile { background: var(--white); border: 1px solid var(--border); padding: 1rem 1rem 1.125rem; }
.ex-tile--clickable:hover { outline: 2px solid var(--blue); outline-offset: -2px; text-decoration: none; }
.ex-stat .v { font-size: 2rem; font-weight: 300; line-height: 1.15; }
.ex-stat .k { font-size: .75rem; color: var(--text-secondary); margin-top: .125rem; }
.ex-stat.warn .v { color: var(--red); }
.ex-card { background: var(--white); border: 1px solid var(--border); }
.ex-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 1rem; border-bottom: 1px solid var(--border);
}
.ex-card__body { padding: 1rem; }
.ex-section { margin-bottom: 1.5rem; }

/* ---- Tables ------------------------------------------------------------------ */
.ex-table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--border); }
table.ex-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ex-table th {
  text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text); background: var(--g20); padding: .625rem 1rem; white-space: nowrap;
}
.ex-table td { padding: .625rem 1rem; border-top: 1px solid var(--border); vertical-align: top; }
.ex-table tbody tr:hover { background: #f6f9ff; }
.ex-table .num { text-align: right; font-family: var(--mono); font-size: .8125rem; }
.ex-table .nowrap { white-space: nowrap; }
.ex-empty { padding: 2.25rem 1rem; text-align: center; color: var(--text-helper); }
.ex-empty .t { font-size: 1rem; color: var(--text-secondary); margin-bottom: .25rem; }

/* ---- Tags -------------------------------------------------------------------- */
.ex-tag {
  display: inline-block; padding: .0625rem .625rem; border-radius: 1rem;
  font-size: .75rem; font-weight: 400; white-space: nowrap;
  background: var(--g20); color: var(--g80);
}
.ex-tag--blue   { background: #d0e2ff; color: var(--blue-dark); }
.ex-tag--green  { background: var(--green-bg); color: #0e6027; }
.ex-tag--red    { background: var(--red-bg); color: #a2191f; }
.ex-tag--amber  { background: var(--amber-bg); color: var(--amber-text); }
.ex-tag--teal   { background: var(--teal-bg); color: var(--teal-text); }
.ex-tag--purple { background: var(--purple-bg); color: var(--purple-text); }
.ex-tag--cyan   { background: var(--cyan-bg); color: var(--cyan-text); }
.ex-tag--outline { background: none; border: 1px solid var(--border-strong); color: var(--text-secondary); }

/* ---- Buttons ------------------------------------------------------------------ */
.ex-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: 400 .875rem var(--sans); padding: .5rem 1rem; min-height: 2.5rem;
  border: 1px solid transparent; text-decoration: none;
}
.ex-btn:hover { text-decoration: none; }
.ex-btn--primary { background: var(--blue); color: #fff; }
.ex-btn--primary:hover { background: var(--blue-hover); }
.ex-btn--secondary { background: var(--g80); color: #fff; }
.ex-btn--secondary:hover { background: var(--g70); }
.ex-btn--tertiary { background: none; color: var(--blue); border-color: var(--blue); }
.ex-btn--tertiary:hover { background: var(--blue); color: #fff; }
.ex-btn--ghost { background: none; color: var(--blue); }
.ex-btn--ghost:hover { background: var(--g10); }
.ex-btn--danger { background: var(--red); color: #fff; }
.ex-btn--danger:hover { background: #ba1b23; }
.ex-btn--sm { min-height: 2rem; padding: .25rem .75rem; font-size: .8125rem; }
.ex-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Forms -------------------------------------------------------------------- */
.ex-field { margin-bottom: 1rem; }
.ex-field label {
  display: block; font-size: .75rem; color: var(--text-secondary); margin-bottom: .375rem;
}
.ex-field .helper { font-size: .75rem; color: var(--text-helper); margin-top: .25rem; }
.ex-field .invalid { font-size: .75rem; color: var(--red); margin-top: .25rem; }
.ex-input, .ex-select, .ex-textarea {
  width: 100%; font: 400 .875rem var(--sans); color: var(--text);
  background: var(--white); border: none; border-bottom: 1px solid var(--border-strong);
  padding: .6875rem 1rem; outline-offset: -2px;
}
.ex-card__body .ex-input, .ex-card__body .ex-select, .ex-card__body .ex-textarea { background: var(--g10); }
.ex-textarea { min-height: 7rem; resize: vertical; }
.ex-input:focus, .ex-select:focus, .ex-textarea:focus { outline: 2px solid var(--focus); }
.ex-input[aria-invalid="true"], .ex-textarea[aria-invalid="true"] { outline: 2px solid var(--red); }
.ex-form-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.ex-form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
fieldset.ex-fieldset { border: 0; padding: 0; margin: 0 0 .5rem; }
fieldset.ex-fieldset legend {
  font-size: .875rem; font-weight: 600; padding: 0; margin-bottom: .75rem;
}
.ex-radio-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.ex-radio-row label {
  display: flex; align-items: center; gap: .5rem; font-size: .875rem;
  color: var(--text); cursor: pointer; margin: 0;
}

/* ---- Notifications (inline) ----------------------------------------------------- */
.ex-note {
  display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem;
  border-left: 3px solid var(--g70); background: var(--white);
  border-top: 1px solid var(--border); border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); margin-bottom: 1rem;
}
.ex-note .t { font-weight: 600; }
.ex-note--success { border-left-color: var(--green); }
.ex-note--success .ex-icon { color: var(--green); }
.ex-note--error { border-left-color: var(--red); }
.ex-note--error .ex-icon { color: var(--red); }
.ex-note--info { border-left-color: var(--blue); }
.ex-note--info .ex-icon { color: var(--blue); }
.ex-note--warning { border-left-color: var(--amber); background: var(--amber-bg); }

/* ---- Referral timeline ------------------------------------------------------------ */
.ex-timeline { list-style: none; margin: 0; padding: 0; }
.ex-timeline li { position: relative; padding: 0 0 1.125rem 1.75rem; }
.ex-timeline li:before {
  content: ''; position: absolute; left: .4375rem; top: .375rem; bottom: -.375rem;
  width: 1px; background: var(--border-strong);
}
.ex-timeline li:last-child:before { display: none; }
.ex-timeline li:after {
  content: ''; position: absolute; left: .125rem; top: .3125rem;
  width: .6875rem; height: .6875rem; border-radius: 50%;
  background: var(--white); border: 2px solid var(--g70);
}
.ex-timeline li.current:after { background: var(--blue); border-color: var(--blue); }
.ex-timeline .when { font-size: .75rem; color: var(--text-helper); font-family: var(--mono); }
.ex-timeline .what { font-weight: 600; }
.ex-timeline .who { font-size: .8125rem; color: var(--text-secondary); }
.ex-timeline .note {
  margin-top: .25rem; font-size: .8125rem; background: var(--g10);
  border-left: 2px solid var(--g30); padding: .375rem .625rem; white-space: pre-wrap;
}

/* ---- Definition grids --------------------------------------------------------------- */
.ex-dl { display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1.25rem; margin: 0; }
.ex-dl dt { font-size: .75rem; color: var(--text-secondary); padding-top: .125rem; }
.ex-dl dd { margin: 0; font-size: .875rem; }

/* ---- Login ---------------------------------------------------------------------------- */
.ex-login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.ex-login__brand {
  background: var(--navy); color: var(--white); padding: 4rem 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 3px solid var(--accent);
}
.ex-login__mark { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.ex-login__mark .ex-icon { color: var(--accent-on-dark); }
.ex-login__mark span {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g40);
}
.ex-login__brand h1 { font-size: 2.5rem; font-weight: 300; margin: 0 0 .25rem; letter-spacing: -.01em; }
.ex-login__brand h1 b { font-weight: 700; }
.ex-login__brand h1 em { font-style: normal; font-weight: 700; color: var(--accent-on-dark); }
.ex-login__brand h2 {
  font-size: 1.125rem; font-weight: 400; color: var(--g30); margin: 0 0 1.25rem;
  letter-spacing: .02em;
}
.ex-login__brand p { color: var(--g30); max-width: 30rem; font-size: 1rem; }
.ex-login__eyebrow { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g50); }
.ex-login__points { margin-top: 2rem; display: grid; gap: .75rem; font-size: .875rem; color: var(--g30); }
.ex-login__points div { display: flex; gap: .625rem; align-items: center; }
.ex-login__points .ex-icon { color: var(--accent-on-dark); }
.ex-login__form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--g10); }
.ex-login__card { width: 100%; max-width: 400px; background: var(--white); border: 1px solid var(--border); padding: 2rem; }
.ex-login__card h2 { margin-bottom: 1.5rem; }

/* ---- Utility ------------------------------------------------------------------------------ */
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.w-100 { width: 100%; }
.text-right { text-align: right; }

/* ---- Responsive ------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .ex-grid.cols-4, .ex-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .ex-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ex-sidenav { transform: translateX(-100%); transition: transform .15s; }
  body.nav-open .ex-sidenav { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
  .ex-main { margin-left: 0; padding: 1rem; }
  .ex-header__user, .ex-header__facility .label { display: none; }
  .ex-login { grid-template-columns: 1fr; }
  .ex-login__brand { padding: 2.5rem 1.5rem; }
  .ex-grid.cols-2, .ex-grid.cols-3, .ex-grid.cols-4, .ex-grid.cols-5 { grid-template-columns: 1fr; }
  .ex-form-row, .ex-form-row.cols-3 { grid-template-columns: 1fr; }
  #navToggle { display: flex; }
}
#navToggle { display: none; }
@media (min-width: 821px) { #navToggle { display: none !important; } }