/* itracHEALTH Enrollment Console: the only stylesheet. */

:root {
  --navy: #0b2a4a;
  --navy-2: #143f66;
  --navy-soft: #e8eef5;
  --gold: #ffd98a;
  --gold-soft: #fff4dc;
  --ink: #12202f;
  --ink-muted: #4a5b6c;
  --line: #d3dce5;
  --bg: #f4f6f9;
  --card: #ffffff;

  --done: #1d6b45;
  --done-bg: #e3f3ea;
  --waiting: #8a5a00;
  --waiting-bg: #fff1d6;
  --failed: #b3261e;
  --failed-bg: #fde7e5;
  --not-needed: #5c6b7a;
  --not-needed-bg: #eceff2;
  --not-started-line: #9aa8b6;

  /* CMG's owner colour code (all AA on white) */
  --own-staff: #1f5fa8;      /* blue: itracHEALTH personnel */
  --own-staff-bg: #e6eef8;
  --own-patient: #b3261e;    /* red: patient */
  --own-patient-bg: #fbe9e7;
  --own-other: #1d6b45;      /* green: other party */
  --own-other-bg: #e3f3ea;

  --focus: #1a5fb4;
  --radius: 12px;
  --space: 1.5rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { font-size: 17.5px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 { line-height: 1.25; color: var(--navy); margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
a { color: var(--navy-2); }
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--gold); color: var(--navy); padding: .6rem 1rem; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }

.muted { color: var(--ink-muted); }
.small { font-size: .88rem; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: .01em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- banner, header, footer ---------- */

.demo-banner {
  background: var(--gold);
  color: var(--navy);
  text-align: center;
  font-weight: 700;
  padding: .45rem 1rem;
  font-size: .95rem;
}

.site-header { background: var(--navy); color: #fff; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.25rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem;
}
.wordmark { color: #fff; text-decoration: none; display: flex; align-items: baseline; gap: 0; font-size: 1.45rem; }
.wordmark:hover { color: #fff; }
.wm-itrac { font-weight: 600; }
.wm-health { font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.wm-product {
  margin-left: .85rem; padding-left: .85rem; border-left: 1px solid rgba(255,255,255,.35);
  font-size: 1rem; font-weight: 500; color: #dfe7ef;
}
.site-header :focus-visible { outline-color: var(--gold); }

.nav { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a {
  display: block; color: #fff; text-decoration: none; padding: .55rem .9rem; border-radius: 8px; font-weight: 600;
}
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav a[aria-current="page"] { background: var(--gold); color: var(--navy); }

main.wrap { padding-top: 2rem; padding-bottom: 3rem; }

.site-footer { border-top: 1px solid var(--line); padding: 1.25rem 0 2rem; color: var(--ink-muted); font-size: .88rem; }

/* ---------- common blocks ---------- */

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin-bottom: var(--space);
}
.lead-text { color: var(--ink-muted); font-size: 1.05rem; margin: 0; }
.breadcrumb { margin-bottom: 1rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space);
  margin-bottom: var(--space);
  box-shadow: 0 1px 2px rgba(11, 42, 74, .05);
}
.section-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.section-head h2, .section-head p { margin: 0; }
.empty-state { padding: 1.5rem; text-align: center; color: var(--ink-muted); background: var(--bg); border-radius: 8px; margin: 0; }

.notice { padding: .85rem 1.1rem; border-radius: 10px; margin-bottom: 1.25rem; font-weight: 600; border: 1px solid; }
.notice-ok { background: var(--done-bg); color: var(--done); border-color: #b6dcc6; }
.notice-error { background: var(--failed-bg); color: var(--failed); border-color: #f1b8b3; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .55rem 1.15rem;
  font: inherit; font-weight: 700; line-height: 1.2;
  border-radius: 10px; border: 2px solid var(--navy);
  background: #fff; color: var(--navy); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--navy-soft); color: var(--navy); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn-secondary { background: #fff; }
.btn-link { border-color: transparent; background: transparent; text-decoration: underline; }
.btn-link:hover { background: var(--navy-soft); }
.btn-small { min-height: 2.4rem; padding: .35rem .85rem; font-size: .92rem; }

/* ---------- tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-bottom: var(--space); }
.tile {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--navy);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; text-decoration: none; color: var(--ink);
}
.tile:hover { border-color: var(--navy-2); color: var(--ink); }
.tile-num { font-size: 2.2rem; font-weight: 800; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-label { font-weight: 600; color: var(--ink-muted); }
.tile-warn { border-left-color: #d99400; background: var(--gold-soft); }
.tile-warn .tile-num { color: var(--waiting); }
.tile-alert { border-left-color: var(--failed); background: var(--failed-bg); }
.tile-alert .tile-num { color: var(--failed); }

/* ---------- funnel ---------- */

.funnel {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .5rem;
}
.funnel-step {
  display: flex; flex-direction: column; align-items: stretch; gap: .35rem; height: 100%;
  padding: .6rem .3rem .7rem; border-radius: 10px; border: 2px solid transparent;
  text-decoration: none; color: var(--ink); background: var(--bg);
}
.funnel-step:hover { border-color: var(--line); color: var(--ink); }
.funnel-step.selected { border-color: var(--navy); background: var(--navy-soft); }
.funnel-bar-track { height: 72px; display: flex; align-items: flex-end; justify-content: center; }
.funnel-bar { display: block; width: 70%; max-width: 44px; background: var(--navy); border-radius: 6px 6px 2px 2px; height: 3px; }
.funnel-step.empty .funnel-bar { background: var(--line); }
.funnel-bar.h-1 { height: 10%; } .funnel-bar.h-2 { height: 20%; } .funnel-bar.h-3 { height: 30%; }
.funnel-bar.h-4 { height: 40%; } .funnel-bar.h-5 { height: 50%; } .funnel-bar.h-6 { height: 60%; }
.funnel-bar.h-7 { height: 70%; } .funnel-bar.h-8 { height: 80%; } .funnel-bar.h-9 { height: 90%; }
.funnel-bar.h-10 { height: 100%; }
.funnel-count { text-align: center; font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.funnel-step.empty .funnel-count { color: var(--ink-muted); font-weight: 600; }
.funnel-name { text-align: center; font-size: .78rem; line-height: 1.25; color: var(--ink); hyphens: manual; overflow-wrap: normal; word-break: normal; }
.funnel-num {
  display: inline-block; min-width: 1.4rem; padding: 0 .25rem; margin-bottom: .15rem;
  border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: .75rem;
}

/* ---------- filters ---------- */

.filters { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; }
.field-inline { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.field-inline select { max-width: 16rem; }
select, input[type="text"], input[type="tel"], input[type="email"], input:not([type]), textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 2px solid #8696a7; border-radius: 8px; padding: .5rem .7rem; min-height: 2.75rem;
}
select:hover, input:hover, textarea:hover { border-color: var(--navy-2); }
.toggle { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; min-height: 2.75rem; }
.toggle input, .radio input { width: 1.3rem; height: 1.3rem; accent-color: var(--navy); margin: 0; }

/* ---------- case table ---------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table.cases { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cases th, .cases td { padding: .75rem .8rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.cases th { background: var(--navy-soft); color: var(--navy); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.cases th:nth-child(5) { text-align: right; }
.cases tbody tr:last-child td { border-bottom: 0; }
.cases tbody tr:hover { background: #fafbfd; }
.row-attention td:first-child { box-shadow: inset 5px 0 0 var(--failed); }
.cases td.mono { white-space: nowrap; }
.case-link { font-weight: 700; white-space: nowrap; }
.step-pill { display: inline-flex; align-items: baseline; gap: .4rem; }
.step-pill-num {
  display: inline-block; min-width: 1.5rem; text-align: center; border-radius: 999px;
  background: var(--navy-soft); color: var(--navy); font-weight: 700; font-size: .82rem; padding: 0 .3rem;
}
.cases td:last-child { min-width: 10rem; }

/* progress dots: colour = owner, symbol/fill = status */
.dots { list-style: none; display: grid; grid-template-columns: repeat(10, 16px); gap: 4px 3px; margin: 0; padding: 0; }
.dot {
  --c: var(--own-staff); --cbg: var(--own-staff-bg);
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--c); background: #fff; color: #fff; flex: none;
  font-size: 10px; font-weight: 900; line-height: 1;
}
.dot.own-patient { --c: var(--own-patient); --cbg: var(--own-patient-bg); }
.dot.own-other { --c: var(--own-other); --cbg: var(--own-other-bg); }
.dot.st-done { background: var(--c); }
.dot.st-failed { background: var(--c); border-radius: 3px; }
.dot.st-waiting { background: var(--gold); color: var(--navy); }
.dot.st-not-needed { border-style: dashed; background: var(--cbg); color: var(--c); }
.dot.st-not-started { border-width: 1.5px; opacity: .55; }
.dot.current { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }

.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .75rem; color: var(--ink); font-size: .86rem; }
.legend-title { font-weight: 700; color: var(--ink-muted); }
.legend > span { display: inline-flex; align-items: center; gap: .4rem; }

/* flags */
.flags { display: flex; flex-wrap: wrap; gap: .35rem; }
.flag {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; white-space: nowrap; border: 1px solid;
}
.flag-icon { font-weight: 900; }
.flag-alert { background: var(--failed-bg); color: var(--failed); border-color: #f1b8b3; }
.flag-warn { background: var(--waiting-bg); color: var(--waiting); border-color: #f0cf8c; }
.flag-closed { background: var(--done-bg); color: var(--done); border-color: #b6dcc6; }

/* ---------- case page ---------- */

.case-head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.case-head-main { flex: 1 1 26rem; }
.case-head-side {
  flex: 1 1 18rem; max-width: 24rem; background: var(--bg); border-radius: 10px; padding: 1rem 1.25rem;
}
.case-head-side p { margin-bottom: .35rem; }
.case-id { color: var(--ink-muted); margin-bottom: .2rem; font-weight: 700; }
.current-step { font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.reminder-form { margin-top: 1rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; margin: 1rem 0 0; }
.facts dt { font-size: .85rem; color: var(--ink-muted); font-weight: 600; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.case-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space); align-items: start; }

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; display: flex; gap: 1rem; padding-bottom: 1.25rem; }
.tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: .2rem; width: 2px; background: var(--line);
}
.tl-marker {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
  border: 2px solid var(--not-started-line); background: #fff; color: var(--ink-muted); position: relative; z-index: 1;
}
.tl-item { --c: var(--own-staff); --cbg: var(--own-staff-bg); }
.tl-item.own-patient { --c: var(--own-patient); --cbg: var(--own-patient-bg); }
.tl-item.own-other { --c: var(--own-other); --cbg: var(--own-other-bg); }
.tl-marker { border-color: var(--c); color: var(--c); }
.tl-done .tl-marker { background: var(--c); color: #fff; }
.tl-waiting .tl-marker { background: var(--gold); color: var(--navy); border-width: 3px; }
.tl-failed .tl-marker { background: var(--c); color: #fff; border-radius: 6px; }
.tl-not-needed .tl-marker { background: var(--cbg); border-style: dashed; }
.tl-not-started .tl-marker { opacity: .6; }
.tl-body { flex: 1; min-width: 0; padding-top: .2rem; }
.tl-current .tl-body {
  background: var(--gold-soft); border: 1px solid #f0d9a5; border-radius: 10px; padding: .75rem 1rem; margin-top: -.3rem;
}
.tl-failed.tl-current .tl-body { background: var(--failed-bg); border-color: #f1b8b3; }
.tl-title-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tl-title { margin: 0; font-size: 1.02rem; }
.tl-desc { color: var(--ink-muted); margin: .25rem 0 .25rem; font-size: .95rem; }
.tl-result { font-weight: 700; margin: .25rem 0; }
.tl-when { margin: 0; }
.tl-not-started .tl-title { color: var(--ink-muted); }
.tl-actions { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-top: .75rem; }
.tl-actions form { margin: 0; }
.tl-actions p { margin: 0; }

.status { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 1px solid transparent; }
.status-done { background: var(--done-bg); color: var(--done); }
.status-waiting { background: var(--waiting-bg); color: var(--waiting); border-color: #f0cf8c; }
.status-failed { background: var(--failed-bg); color: var(--failed); }
.status-not-needed { background: var(--not-needed-bg); color: var(--not-needed); }
.status-not-started { background: #fff; color: var(--ink-muted); border-color: var(--line); }
.who { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--navy-soft); color: var(--navy); }
.who-automatic { background: #fff; border: 1px solid var(--line); color: var(--ink-muted); }

.note-form { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; }
.note-form label { font-weight: 700; }
.note-form textarea { resize: vertical; width: 100%; }
.note-form .btn { align-self: flex-start; }
.note-form p { margin: 0; }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-list li { border-top: 1px solid var(--line); padding: .8rem 0; }
.note-meta { margin: 0 0 .2rem; }
.note-text { margin: 0; }

/* owner badges */
.owner-badge {
  display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: #fff; background: var(--own-staff);
}
.owner-badge.own-patient { background: var(--own-patient); }
.owner-badge.own-other { background: var(--own-other); }
.tl-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .1rem; }
.entry { font-weight: 700; color: var(--ink); }
.tl-when { font-size: .9rem; color: var(--ink-muted); }
.step-pill-num.own-staff, .funnel-num.own-staff { background: var(--own-staff); color: #fff; }
.step-pill-num.own-patient, .funnel-num.own-patient { background: var(--own-patient); color: #fff; }
.step-pill-num.own-other, .funnel-num.own-other { background: var(--own-other); color: #fff; }
.funnel-owner { text-align: center; font-size: .72rem; color: var(--ink-muted); line-height: 1.2; }
.sub { display: block; font-size: .82rem; font-weight: 500; }
.h-small { font-size: 1.05rem; margin: 0 0 .25rem; }
.agency-box { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.agency-box .facts { margin-top: .5rem; }
.side-gap { margin-top: 1rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.inline-form label { font-weight: 700; }

/* tickets */
.ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ticket {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 6px solid var(--own-patient); border-radius: 10px; padding: .8rem 1rem;
}
.ticket p { margin: 0 0 .15rem; }
.ticket-title { font-weight: 800; color: var(--own-patient); }
.ticket-closed { border-left-color: var(--not-needed); background: var(--bg); }
.ticket-closed .ticket-title { color: var(--ink-muted); }

/* supervisor */
.card-flat { background: #fff; margin-bottom: var(--space); }
table.report { width: 100%; border-collapse: collapse; }
.report th, .report td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; }
.report thead th { background: var(--navy-soft); color: var(--navy); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.report .num { text-align: right; }
.report tbody tr:last-child > * { border-bottom: 0; }
.num-alert { color: var(--failed); font-weight: 800; }
.count-pill { display: inline-block; margin-left: .4rem; padding: .05rem .6rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: .85rem; vertical-align: middle; }
.sv-list { list-style: none; margin: 0; padding: 0; }
.sv-item { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr) minmax(8rem, 1.2fr); gap: .5rem 1rem; align-items: center; padding: .75rem .5rem; border-top: 1px solid var(--line); }
.sv-main { display: flex; flex-direction: column; }
.row-attention-card { box-shadow: inset 5px 0 0 var(--failed); padding-left: 1rem; }

/* step grid */
.grid-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 1rem; }
table.step-grid { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.step-grid th, .step-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: .45rem .5rem; vertical-align: top; }
.step-grid thead th { background: #fff; min-width: 8.6rem; max-width: 9rem; text-align: left; border-top: 5px solid var(--own-staff); }
.step-grid thead th.own-patient { border-top-color: var(--own-patient); }
.step-grid thead th.own-other { border-top-color: var(--own-other); }
.gh-num { display: block; font-weight: 800; font-size: .95rem; color: var(--navy); }
.gh-name { display: block; font-weight: 700; color: var(--ink); line-height: 1.2; }
.gh-owner { display: block; color: var(--ink-muted); font-weight: 500; margin-top: .2rem; }
.step-grid .sticky { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 10.5rem; text-align: left; box-shadow: 2px 0 0 var(--line); }
.step-grid tbody th { font-weight: 700; font-size: .9rem; }
.gc { white-space: nowrap; color: var(--ink-muted); position: relative; }
.gc.st-done { color: #fff; background: var(--own-staff); font-weight: 700; }
.gc.own-patient.st-done { background: var(--own-patient); }
.gc.own-other.st-done { background: var(--own-other); }
.gc.st-not-needed { background: var(--bg); font-style: italic; }
.gc.st-failed { background: var(--failed-bg); color: var(--failed); font-weight: 800; outline: 2px solid var(--failed); outline-offset: -2px; }
.gc.st-waiting { background: var(--gold-soft); color: var(--waiting); font-weight: 800; outline: 2px solid var(--gold); outline-offset: -2px; }
.gc-icon { font-weight: 900; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.agency-fields { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1rem 0; }
.agency-fields legend { padding: 0 .4rem; }

/* ---------- forms ---------- */

.form-card { max-width: 42rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.25rem; border: 0; padding: 0; }
.field > label, legend { font-weight: 700; }
legend { padding: 0; margin-bottom: .4rem; }
.field input:not([type="radio"]):not([type="checkbox"]) { width: 100%; }
.radio { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; font-weight: 500; }
.field-error { color: var(--failed); font-weight: 700; font-size: .92rem; }
.field-error:empty { display: none; }
[aria-invalid="true"] { border-color: var(--failed) !important; }
.form-actions { display: flex; gap: 1rem; align-items: center; }

/* ---------- notifications ---------- */

.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tab {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; min-height: 2.75rem;
  border-radius: 10px; border: 2px solid var(--line); background: #fff; color: var(--navy); font-weight: 700; text-decoration: none;
}
.tab:hover { border-color: var(--navy-2); color: var(--navy); }
.tab-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab-on:hover { color: #fff; }
.tab-count { background: var(--gold); color: var(--navy); border-radius: 999px; padding: 0 .5rem; font-size: .85rem; min-width: 1.6rem; text-align: center; }

.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.notif {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line);
  border-left: 6px solid var(--navy-2); border-radius: 10px; background: #fff;
}
.notif-alert { border-left-color: var(--failed); }
.notif-action { border-left-color: #d99400; }
.notif-level {
  flex: none; width: 4.6rem; text-align: center; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .3rem; border-radius: 6px; background: var(--navy-soft); color: var(--navy);
}
.notif-alert .notif-level { background: var(--failed-bg); color: var(--failed); }
.notif-action .notif-level { background: var(--waiting-bg); color: var(--waiting); }
.notif-body { flex: 1; min-width: 0; }
.notif-body p { margin: 0 0 .15rem; }
.notif-title { font-weight: 800; color: var(--navy); }

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
  .funnel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  html { font-size: 17px; }
  .wrap { padding: 0 1rem; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-item { grid-template-columns: 1fr 1fr; }
  .sv-item .flags { grid-column: 1 / -1; }
  .wm-product { display: none; }
  .header-inner { justify-content: space-between; }
  /* Table becomes stacked cards so nothing hides off-screen on a tablet. */
  .table-scroll { border: 0; overflow: visible; }
  table.cases, .cases tbody, .cases tr, .cases td { display: block; }
  .cases thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cases tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; margin-bottom: .75rem;
  }
  .cases td { border: 0; padding: 0; }
  .cases td:nth-child(1) { order: 2; text-align: right; }
  .cases td:nth-child(2) { order: 1; font-size: 1.05rem; }
  .cases td:nth-child(3) { order: 3; }
  .cases td:nth-child(4) { order: 4; text-align: right; }
  .cases td:nth-child(5) { order: 6; text-align: right; }
  .cases td:nth-child(5)::before { content: "At step: "; color: var(--ink-muted); }
  .cases td:nth-child(3)::before { content: "Tech Support: "; color: var(--ink-muted); }
  .cases td:nth-child(6) { order: 5; }
  .cases td:nth-child(7) { order: 7; grid-column: 1 / -1; }
  .cases td:nth-child(7):not(:has(.flag)) { display: none; }
  .row-attention { border-left: 6px solid var(--failed) !important; }
  .row-attention td:first-child { box-shadow: none; }
  .notif { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: 1fr; }
  .field-row, .sv-item { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases tr { grid-template-columns: 1fr; }
  .cases td:nth-child(n) { text-align: left; }
}

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

@media (max-width: 900px) {
  .case-head-side { max-width: none; }
}

/* ---------- ID review ---------- */

.big-status { font-size: .95rem; padding: .35rem .9rem; }
.privacy-note {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--navy-soft); border: 1px solid #c3d2e3; border-left: 6px solid var(--navy);
  border-radius: 10px; padding: .85rem 1.1rem; margin-bottom: var(--space); color: var(--navy);
}
.privacy-note p { margin: 0; font-weight: 600; }
.privacy-icon { flex: none; display: inline-flex; margin-top: .1rem; }
.idr-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--space); align-items: start; }
.id-pair { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: end; margin-bottom: 1rem; }
.id-pair-even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.id-fig { margin: 0; }
.id-fig figcaption { font-weight: 700; margin-top: .35rem; font-size: .95rem; }
.id-svg { display: block; width: 100%; height: auto; }
.id-fig-selfie .id-svg { max-height: 15rem; width: auto; max-width: 100%; }
.facts-one { grid-template-columns: 1fr 1fr; margin: 0 0 1rem; }
.decide-form .field { margin-bottom: 1rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; min-height: 2.5rem; padding: .3rem 0; cursor: pointer; font-weight: 500; }
.check input { width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; accent-color: var(--navy); flex: none; }
.check-video { font-weight: 700; }
.decide-form textarea { width: 100%; resize: vertical; }
.decide-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .5rem; }
.btn-retake { grid-column: 1 / -1; }
@media (max-width: 1100px) and (min-width: 561px) {
  .decide-buttons { grid-template-columns: auto auto 1fr; justify-content: start; }
  .btn-retake { grid-column: auto; justify-self: start; }
}
.btn-pass { background: var(--done); border-color: var(--done); color: #fff; }
.btn-pass:hover { background: #155536; border-color: #155536; color: #fff; }
.btn-fail { background: #fff; border-color: var(--failed); color: var(--failed); }
.btn-fail:hover { background: var(--failed-bg); color: var(--failed); }
.history-h { margin-top: 1.25rem; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { border-top: 1px solid var(--line); padding: .6rem 0; }
.nowrap { white-space: nowrap; }
.tl-link { margin: .3rem 0 0; font-weight: 600; }
.idr-queue { list-style: none; margin: 0; padding: 0; }
.idr-queue li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); }
.idr-queue li:first-child { border-top: 0; }
.idr-queue .flags { align-items: center; }

@media (max-width: 1100px) {
  .idr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .id-pair, .id-pair-even, .facts-one { grid-template-columns: 1fr; }
}

/* ---------- CMG questions 1-5 and Persona (Oct 24) ---------- */
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* tickets: close with a note */
.ticket-note { font-size: .9rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .35rem .6rem; margin-top: .35rem !important; }
.ticket-close-form { display: flex; flex-direction: column; gap: .35rem; min-width: min(100%, 18rem); }
.ticket-close-form label { font-weight: 700; font-size: .9rem; }
.ticket-close-form textarea { width: 100%; font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; }
.ticket-close-form .btn { align-self: flex-start; }

/* who gets what */
.links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.link-box { border: 1px solid var(--line); border-left: 6px solid var(--own-patient); border-radius: 10px; padding: .8rem 1rem; }
.link-box p { margin: .2rem 0; }
.link-patient { background: var(--own-patient-bg); }
.link-other { border-left-color: var(--own-other); background: var(--own-other-bg); }
.status-notice-list { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .2rem; }
.sn-sent span[aria-hidden] { color: var(--done); font-weight: 800; }
.sn-wait { color: var(--ink-muted); }

/* edit inputs */
.inputs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space); align-items: start; }
.inputs-form { max-width: 46rem; }
.input-group { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem .2rem; margin-bottom: .9rem; }
.input-group legend { font-weight: 800; padding: 0 .3rem; }
.inputs-form input, .inputs-form select, .inputs-form textarea { width: 100%; }
.change-log del { color: var(--failed); }
.change-log ins { color: var(--done); text-decoration: none; font-weight: 700; }

/* staff */
.row-inactive { color: var(--ink-muted); background: var(--bg); }
.role-badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--navy-soft); color: var(--navy); white-space: nowrap; }
.role-admin { background: var(--navy); color: #fff; }
.role-supervisor { background: var(--gold-soft); color: var(--waiting); }
.role-sales { background: var(--not-needed-bg); color: var(--ink); }

/* open cases report */
.open-cases tr.group-start td { border-top: 2px solid var(--navy-2); }
.open-cases td:first-child { font-weight: 700; }

/* Persona */
.persona-card { border-top: 4px solid var(--navy-2); }
.persona-card .decide-buttons { margin-top: .5rem; }
.fallback-h { margin: 1.5rem 0 .25rem; font-size: 1.15rem; }

@media (max-width: 900px) {
  .table-scroll.scroll-x { overflow-x: auto; border: 1px solid var(--line); position: relative; }
  .open-cases .col-hide-sm { display: none; }
}