:root{
  --navy:#1A2D3F; --ink:#0E2841; --teal-deep:#305A6C; --teal-mid:#376A79; --teal-light:#5A9A91;
  --cream:#F4F1E8; --cream-warm:#F0E9D9; --gray:#C9CDCF; --red:#B23A3A; --amber:#C8862B; --green:#4E8C5B;
  --font:"Inter","Segoe UI",Arial,sans-serif; --mono:"JetBrains Mono",Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--navy);background:var(--cream)}
.loading{padding:80px;text-align:center;color:var(--teal-deep)}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:url('./fan_header.jpg') center/cover no-repeat,linear-gradient(135deg,var(--teal-deep),var(--teal-light))}
.login-card{background:#fff;border-radius:16px;padding:34px 34px 38px;width:380px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-brand{background:linear-gradient(120deg,#376A79,#305A6C);border-radius:11px;padding:14px 16px;margin:-4px -4px 14px;text-align:center}
.login-brand img{height:30px}
.login-card>img{display:none}
.login-card h1{font-size:20px;margin:6px 0 2px}
.login-card .sub{color:#6b7984;font-size:13px;margin-bottom:22px}
.login-card label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--teal-deep);margin:14px 0 5px}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--gray);border-radius:9px;font-size:14px}
.login-card button{width:100%;margin-top:20px;padding:12px;background:var(--teal-deep);color:#fff;border:0;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer}
.login-card button:hover{background:var(--ink)}
.login-err{margin-top:14px;color:var(--red);font-size:13px;background:#f8ecec;border-left:3px solid var(--red);padding:9px 11px;border-radius:6px}
.phi-banner{background:var(--amber);color:#fff;text-align:center;font-size:12.5px;font-weight:700;padding:7px}

/* ---- shell: branded teal-fan header ---- */
.topbar{position:relative;color:#fff;padding:22px 30px;display:flex;align-items:center;gap:16px;
  background:linear-gradient(120deg,#5A9A91 0%,#376A79 42%,#305A6C 70%,#274d5d 100%);
  background-size:cover;overflow:hidden;min-height:74px}
.topbar::before{content:"";position:absolute;inset:0;
  background:url('./fan_header.jpg') no-repeat right center;background-size:cover;
  opacity:.55;mix-blend-mode:screen;pointer-events:none}
.topbar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(39,77,93,.55) 0%,rgba(39,77,93,.05) 45%,transparent 70%);pointer-events:none}
.topbar>*{position:relative;z-index:2}
.topbar .brandmark{height:30px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.topbar h1{font-size:18px;margin:0;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.topbar .who{margin-left:auto;font-size:13px;color:#eaf3f4;display:flex;align-items:center;gap:16px}
.topbar .who a{color:#fff;cursor:pointer;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.topbar .who a:hover{border-bottom-color:#fff}
.topbar .who span{opacity:.92}
.topbar .wordmark{height:30px;width:auto;margin-left:4px}
.wrap{max-width:1180px;margin:0 auto;padding:24px 26px 60px}
.section-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin:24px 0 10px}
.card{background:#fff;border:1px solid var(--gray);border-radius:13px;padding:18px 20px;margin-bottom:14px}
.card h3{margin:0 0 4px;font-size:15px}
.csub{color:#6b7984;font-size:12.5px;margin-bottom:10px}

/* ---- kpis ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:10px 0}
.kpi{background:#fff;border:1px solid var(--gray);border-top:3px solid var(--teal-deep);border-radius:11px;padding:14px 16px}
.kpi .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7984}
.kpi .v{font-size:26px;font-weight:800;margin-top:4px}
.tiny{font-size:11px}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--teal-deep);color:#fff;text-align:left;padding:9px 11px;font-size:12px;position:sticky;top:0}
thead th.num{text-align:right}
tbody td{padding:8px 11px;border-bottom:1px solid #eee}
tbody td.num{text-align:right;font-family:var(--mono)}
tbody tr:nth-child(even){background:var(--cream)}
.tbl-scroll{max-height:560px;overflow:auto;border:1px solid var(--gray);border-radius:10px}
.tbl-scroll table{min-width:max-content}
thead th{white-space:nowrap}
tbody td{white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
tbody td:first-child{position:sticky;left:0;background:#fff;z-index:1}
tbody tr:nth-child(even) td:first-child{background:var(--cream)}
thead th:first-child{position:sticky;left:0;z-index:3}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.pill.active{background:#e7f1ea;color:var(--green)}
.pill.termed{background:#f4e7e7;color:var(--red)}
.search{width:100%;padding:11px 13px;border:1px solid var(--gray);border-radius:9px;font-size:14px;margin-bottom:10px}

/* ---- buttons / forms ---- */
.btn{padding:9px 15px;border:0;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;background:var(--teal-deep);color:#fff}
.btn:hover{background:var(--ink)}
.btn.ghost{background:#fff;border:1px solid var(--gray);color:var(--navy)}
.btn.danger{background:var(--red)}
.btn.sm{padding:5px 10px;font-size:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--teal-deep)}
.field input,.field select{padding:9px 11px;border:1px solid var(--gray);border-radius:8px;font-size:13px}
.note{font-size:12.5px;background:var(--cream-warm);border-left:3px solid var(--teal-deep);padding:9px 12px;border-radius:6px;margin-top:8px}
.note.ok{background:#eef6f0;border-left-color:var(--green)}
.note.err{background:#f8ecec;border-left-color:var(--red)}
.tabs{display:flex;gap:8px;margin:6px 0 16px}
.tabs button{padding:9px 16px;border:1px solid var(--gray);background:#fff;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;color:var(--navy)}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
footer{border-top:1px solid var(--gray);padding:16px 26px;color:#6b7984;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.vfee-big{font-size:22px;font-weight:800;color:var(--teal-deep)}
.muted{color:#9aa3a8}

/* ---- v2 patient-journey ---- */
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:6px}
@media(max-width:780px){.grid2{grid-template-columns:1fr}}
.stagewrap{display:flex;flex-wrap:wrap;gap:8px}
.stagechip{cursor:pointer;border:1px solid var(--gray);background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--navy);transition:all .12s}
.stagechip b{margin-left:5px}
.stagechip:hover{border-color:var(--teal-deep)}
.stagechip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.stagepill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.st-outreach{background:#fbf0dd;color:var(--amber)}
.st-welcome{background:#e7eef1;color:var(--teal-deep)}
.st-sched{background:#e3edf0;color:var(--teal-mid)}
.st-active{background:#e7f1ea;color:var(--green)}
.st-done{background:#eef1f3;color:var(--navy)}
.st-declined{background:#f4e7e7;color:var(--red)}
.st-closed{background:#f0eef0;color:#8a8f93}
.st-un{background:#f3f1ec;color:#9aa3a8}
.tcount{font-size:12px;color:#6b7984;margin-bottom:6px;font-weight:600}
.plink{color:var(--teal-deep);font-weight:600;text-decoration:none}
.plink:hover{text-decoration:underline}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px;margin-top:6px}
.colrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer}
.colrow input{width:16px;height:16px;cursor:pointer}
.colrow.blocked{color:#9aa3a8;cursor:not-allowed}
.colrow.blocked em{font-size:11px;color:var(--red);font-style:normal;font-weight:700}

/* ---- v2.1: GAP 5 download bar ---- */
.dl-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 14px;padding:10px 14px;background:var(--shell,#f5f8fa);border:1px solid var(--gray);border-radius:8px}
.dl-label{font-size:12px;font-weight:700;color:var(--navy);margin-right:4px}
.btn-dl{display:inline-block;padding:5px 12px;background:#fff;border:1px solid var(--teal-deep);color:var(--teal-deep);border-radius:6px;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .12s}
.btn-dl:hover{background:var(--teal-deep);color:#fff}

/* ---- v2.1: GAP 3 stage_v1 chips (reuses existing st-* classes) ---- */
.stagechip[data-stage="In Progress"]{color:var(--amber)}
.stagechip[data-stage="Active"]{color:var(--green)}
.stagechip[data-stage="UTR"]{color:#8a8f93}
.stagechip[data-stage="Declined"]{color:var(--red)}
.stagechip[data-stage="Need Info"]{color:var(--teal-deep)}
.stagechip.on[data-stage="In Progress"]{background:var(--amber);color:#fff;border-color:var(--amber)}
.stagechip.on[data-stage="Active"]{background:var(--green);color:#fff;border-color:var(--green)}
.stagechip.on[data-stage="UTR"]{background:#8a8f93;color:#fff;border-color:#8a8f93}
.stagechip.on[data-stage="Declined"]{background:var(--red);color:#fff;border-color:var(--red)}
.stagechip.on[data-stage="Need Info"]{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep)}

/* ---- v2.1: Admin Partner Config tab ---- */
.tc{text-align:center}

/* ---- v2.2: Active-filter chips ---- */
.filter-chips-bar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px;min-height:0}
.filter-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--teal-deep);color:#fff;
  padding:4px 10px 4px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.01em;
  animation:chip-in .12s ease;
}
@keyframes chip-in{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.chip-x{
  background:rgba(255,255,255,.25);border:0;color:#fff;border-radius:50%;
  width:17px;height:17px;padding:0;cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;font-weight:900;
  transition:background .1s;
}
.chip-x:hover{background:rgba(255,255,255,.5)}
