/* ===========================================================================
   Provider portal
   Auth screens + the authenticated app shell (sidebar, tables, timeline).
   =========================================================================== */

/* ---- Demo banner -------------------------------------------------------
   Loud and permanent while the portal runs on synthetic data. Nobody should
   ever mistake these records for real patients.                             */
.demo-banner {
  position: sticky; top: 0; z-index: calc(var(--c1-z-header) + 1);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: center; justify-content: center;
  padding: 9px var(--sp-4);
  background: repeating-linear-gradient(45deg,
    var(--c1-warn-bg), var(--c1-warn-bg) 12px,
    color-mix(in srgb, var(--c1-warn) 12%, var(--c1-warn-bg)) 12px,
    color-mix(in srgb, var(--c1-warn) 12%, var(--c1-warn-bg)) 24px);
  border-bottom: 1px solid color-mix(in srgb, var(--c1-warn) 40%, transparent);
  color: var(--c1-warn);
  font-size: var(--c1-fs-xs); font-weight: 650; text-align: center;
}

/* ---- Auth screens ------------------------------------------------------ */
.auth-wrap {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; min-height: 0; } }

.auth-aside {
  position: relative;
  background: var(--c1-ink-900);
  color: #fff;
  padding: var(--sp-8) var(--sp-7);
  display: grid; align-content: center; gap: var(--sp-5);
  overflow: hidden; isolation: isolate;
}
.auth-aside::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 80% 15%, color-mix(in srgb, var(--c1-teal-500) 36%, transparent), transparent 68%),
    radial-gradient(50% 45% at 10% 90%, color-mix(in srgb, var(--c1-teal-800) 45%, transparent), transparent 72%);
}
.auth-aside img.logo { height: 40px; width: auto; }
.auth-aside h2 { color: #fff; font-size: var(--c1-fs-2xl); max-width: 18ch; }
.auth-aside p { color: rgba(255,255,255,.78); max-width: 44ch; }
.auth-aside ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.auth-aside li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; margin: 0; font-size: var(--c1-fs-sm); color: rgba(255,255,255,.85); }
.auth-aside li .ico { color: var(--c1-teal-300); margin-top: 2px; }
@media (max-width: 900px) { .auth-aside { padding: var(--sp-6) var(--c1-gutter); } }

.auth-main {
  display: grid; align-content: center;
  padding: var(--sp-8) var(--sp-7);
  background: var(--c1-bg);
}
@media (max-width: 900px) { .auth-main { padding: var(--sp-7) var(--c1-gutter); } }
.auth-card { width: 100%; max-width: 460px; margin-inline: auto; }
.auth-card h1 { font-size: var(--c1-fs-2xl); }
.auth-card .field + .field { margin-top: var(--sp-4); }

.auth-foot {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--c1-border);
  font-size: var(--c1-fs-sm); color: var(--c1-text-muted);
}

/* ---- App shell --------------------------------------------------------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }

.app-side {
  background: var(--c1-ink-900);
  color: rgba(255,255,255,.75);
  padding: var(--sp-5) var(--sp-4);
  display: grid; align-content: start; gap: var(--sp-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
@media (max-width: 900px) {
  .app-side { position: static; height: auto; }
}
.app-side .logo { height: 32px; width: auto; }
.app-nav { display: grid; gap: 2px; }
.app-nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-3);
  border-radius: var(--c1-r-sm);
  color: rgba(255,255,255,.75);
  font-size: var(--c1-fs-sm); font-weight: 550;
  text-decoration: none;
  transition: background var(--c1-dur-1) var(--c1-ease), color var(--c1-dur-1) var(--c1-ease);
}
.app-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-nav a[aria-current="page"] { background: var(--c1-teal-700); color: #fff; }
.app-nav a .ico { flex: none; }
.app-nav .pill {
  margin-left: auto;
  /* white, not near-black: --c1-warn was darkened to clear AA on light
     backgrounds, which makes dark-on-warn unreadable. */
  background: var(--c1-warn); color: #fff;
  border-radius: var(--c1-r-pill);
  padding: 1px 8px; font-size: 11px; font-weight: 700;
}
.app-nav a[aria-current="page"] .pill { background: #fff; color: var(--c1-teal-800); }

.app-side .side-label {
  font-size: var(--c1-fs-xs); font-weight: 650; letter-spacing: var(--c1-tracking-wide);
  text-transform: uppercase; color: rgba(255,255,255,.4); padding: 0 var(--sp-3);
}
.app-user {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3); border-radius: var(--c1-r); background: rgba(255,255,255,.07);
  font-size: var(--c1-fs-xs);
}
.app-user b { display: block; color: #fff; font-size: var(--c1-fs-sm); }
.app-user span { color: rgba(255,255,255,.6); }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, var(--c1-teal-400), var(--c1-teal-700));
  color: #fff; font-weight: 700; font-size: var(--c1-fs-xs);
}

.app-main { background: var(--c1-bg-subtle); min-width: 0; }
.app-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  background: var(--c1-bg);
  border-bottom: 1px solid var(--c1-border);
}
.app-head h1 { font-size: var(--c1-fs-xl); }
.app-head p { font-size: var(--c1-fs-sm); color: var(--c1-text-muted); margin-top: 2px; }
.app-body { padding: var(--sp-6); }
@media (max-width: 620px) { .app-head, .app-body { padding: var(--sp-5) var(--c1-gutter); } }

/* ---- KPI tiles --------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.kpi {
  padding: var(--sp-5);
  background: var(--c1-surface);
  border: 1px solid var(--c1-border);
  border-radius: var(--c1-r-md);
  box-shadow: var(--c1-shadow-0);
  display: grid; gap: var(--sp-1);
  transition: transform var(--c1-dur-2) var(--c1-ease), box-shadow var(--c1-dur-2) var(--c1-ease);
}
.kpi:hover { transform: var(--c1-lift); box-shadow: var(--c1-shadow-2); }
.kpi .n {
  font-family: var(--c1-font-display); font-size: var(--c1-fs-2xl); font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--c1-text);
}
.kpi .l { font-size: var(--c1-fs-xs); color: var(--c1-text-muted); }
.kpi.is-alert { border-color: color-mix(in srgb, var(--c1-warn) 45%, transparent); background: var(--c1-warn-bg); }
.kpi.is-alert .n { color: var(--c1-warn); }

/* ---- Action list ------------------------------------------------------- */
.action-list { display: grid; gap: var(--sp-3); }
.action-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c1-surface);
  border: 1px solid var(--c1-border);
  border-left: 3px solid var(--c1-warn);
  border-radius: var(--c1-r);
  box-shadow: var(--c1-shadow-0);
  transition: transform var(--c1-dur-2) var(--c1-ease), box-shadow var(--c1-dur-2) var(--c1-ease);
}
.action-item:hover { transform: translateX(3px); box-shadow: var(--c1-shadow-2); }
.action-item .who b { display: block; font-size: var(--c1-fs-sm); }
.action-item .who span { display: block; font-size: var(--c1-fs-xs); color: var(--c1-text-muted); }
.action-item .why { font-size: var(--c1-fs-sm); color: var(--c1-text-muted); }
@media (max-width: 720px) {
  .action-item { grid-template-columns: auto 1fr; }
  .action-item > :last-child { grid-column: 1 / -1; }
}

/* ---- Patient table ----------------------------------------------------- */
.pt-name { display: flex; align-items: center; gap: var(--sp-3); }
.pt-name b { font-weight: 650; }
.pt-name small { display: block; color: var(--c1-text-muted); font-weight: 400; }
.table a { color: inherit; text-decoration: none; }
.table tbody tr.is-flag { background: color-mix(in srgb, var(--c1-warn) 7%, transparent); }
.table tbody tr.is-flag:hover { background: color-mix(in srgb, var(--c1-warn) 12%, transparent); }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.filter-bar .fx-search { flex: 1 1 260px; }

/* ---- Timeline ---------------------------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--c1-border);
}
.timeline li {
  position: relative; margin: 0;
  padding: 0 0 var(--sp-5) var(--sp-6);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline .tl-dot {
  position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--dot, var(--c1-status-received));
  box-shadow: 0 0 0 3px var(--c1-surface);
}
.timeline b { display: block; font-size: var(--c1-fs-sm); }
.timeline .tl-when { font-size: var(--c1-fs-xs); color: var(--c1-text-subtle); font-variant-numeric: tabular-nums; }
.timeline .tl-what { font-size: var(--c1-fs-sm); color: var(--c1-text-muted); margin-top: 2px; }

/* ---- Detail layout ----------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 940px) { .detail-grid { grid-template-columns: 1fr; } }

.kv { display: grid; gap: 0; }
.kv > div {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3);
  padding: 9px 0; border-bottom: 1px solid var(--c1-border);
  font-size: var(--c1-fs-sm);
}
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--c1-text-muted); }
.kv dd { margin: 0; font-weight: 550; }
@media (max-width: 480px) { .kv > div { grid-template-columns: 1fr; gap: 0; } }

/* ---- Modal ------------------------------------------------------------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: var(--c1-z-modal);
  background: var(--c1-overlay);
  display: grid; place-items: center;
  padding: var(--c1-gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--c1-dur-2) var(--c1-ease), visibility var(--c1-dur-2);
}
.modal-scrim[data-open="true"] { opacity: 1; visibility: visible; }
.modal {
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  background: var(--c1-surface);
  border-radius: var(--c1-r-lg);
  box-shadow: var(--c1-shadow-4);
  padding: var(--sp-6);
  transform: translateY(10px) scale(.98);
  transition: transform var(--c1-dur-3) var(--c1-ease-out);
}
.modal-scrim[data-open="true"] .modal { transform: none; }
.modal h2 { font-size: var(--c1-fs-xl); }
.modal .attest {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--c1-bg-subtle);
  border: 1px solid var(--c1-border);
  border-radius: var(--c1-r);
  font-size: var(--c1-fs-sm); line-height: 1.6;
}

/* ---- NPI verify row ---------------------------------------------------- */
.npi-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }

/* ---- Signup progress --------------------------------------------------- */
.signup-steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.signup-steps div {
  flex: 1; height: 4px; border-radius: 2px; background: var(--c1-border);
  transition: background var(--c1-dur-3) var(--c1-ease);
}
.signup-steps div.is-done { background: var(--c1-teal-500); }

/* ---- Staff pipeline, grouped by referring practice ---------------------- */
.pipeline-summary {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-bottom: var(--sp-6); color: var(--c1-text-muted); font-size: var(--c1-fs-sm);
}
.pipeline-summary b { color: var(--c1-text); font-size: var(--c1-fs-lg); margin-right: 6px; }
.pipeline-summary .is-warn b { color: var(--c1-warn); }
.pipeline-group { margin-bottom: var(--sp-7); }
.group-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.group-head h2 { font-size: var(--c1-fs-lg); line-height: 1.2; }
.group-head .who { margin-top: 4px; color: var(--c1-text-muted); font-size: var(--c1-fs-sm); }
.group-head .sep { opacity: .5; padding-inline: 2px; }
@media (max-width: 700px) {
  .group-head { flex-direction: column; align-items: flex-start; }
}

/* Section label inside the staff patient card */
.modal-sec {
  margin: var(--sp-5) 0 var(--sp-2);
  font: 600 11px/1 var(--c1-font-ui, inherit);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c1-text-muted);
}