/* HF-IMP INA Registry — Stylesheet */
/* v1.2 — split architecture */

:root{
  --navy:#1a2340;--navy-mid:#24305a;
  --red:#c0392b;--red-light:#fff0ee;--red-border:#f0c8c8;--red-dark:#791F1F;
  --amber:#EF9F27;--amber-light:#faeeda;--amber-border:#f0c98c;--amber-dark:#633806;
  --green:#3B6D11;--green-light:#EAF3DE;--green-border:#b8d9a0;--green-dark:#27500A;
  --blue:#185FA5;--blue-light:#E6F1FB;--blue-border:#a8ccf0;--blue-dark:#0C447C;
  --bg:#f0f2f5;--white:#fff;
  --border:#e2e6ec;--border-light:#f4f6fa;
  --text-primary:#1a2340;--text-secondary:#5a6a8a;--text-muted:#9aa5b8;--text-faint:#c0c8d8;
  --font:'DM Sans',system-ui,sans-serif;--font-mono:'DM Mono',monospace;
  --shadow:0 2px 12px rgba(26,35,64,0.07);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);font-family:var(--font);color:var(--text-primary);-webkit-font-smoothing:antialiased}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg)}
@media(min-width:520px){.app{border-left:0.5px solid var(--border);border-right:0.5px solid var(--border);box-shadow:0 0 40px rgba(26,35,64,0.06)}}
/* TOPBAR */
.topbar{background:var(--navy);padding:13px 18px 11px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.tl{display:flex;align-items:center;gap:11px}
.logo{width:38px;height:38px;background:var(--red);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;flex-shrink:0;box-shadow:0 3px 10px rgba(192,57,43,0.3)}
.app-name{color:#fff;font-size:15px;font-weight:700}
.app-sub{color:rgba(255,255,255,0.38);font-size:11px;margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:8px}
.site-pill{background:rgba(192,57,43,0.2);color:#f09595;font-size:10px;font-weight:700;padding:3px 10px;border-radius:8px;border:0.5px solid rgba(192,57,43,0.3);font-family:var(--font-mono)}
.logout-btn{background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.12);border-radius:7px;color:rgba(255,255,255,0.6);font-size:11px;font-weight:500;padding:5px 10px;cursor:pointer;font-family:var(--font)}
/* SHARED */
.screen{display:none}.screen.active{display:block}
.content{padding:18px 16px 40px}
.page-title{color:var(--text-primary);font-size:22px;font-weight:700;margin-bottom:4px;letter-spacing:-.3px}
.page-sub{color:var(--text-muted);font-size:13px;margin-bottom:20px;line-height:1.6}
.card{background:var(--white);border:0.5px solid var(--border);border-radius:14px;padding:17px;margin-bottom:12px;box-shadow:var(--shadow)}
.card-label{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:13px}
.field-label{color:var(--text-primary);font-size:13px;font-weight:500;margin-bottom:7px}
.fw{position:relative;margin-bottom:12px}
.fw:last-child{margin-bottom:0}
.fw input,.fw select,.fw textarea{width:100%;background:#f4f6fa;border:0.5px solid var(--border);border-radius:9px;color:var(--text-primary);font-size:15px;padding:12px 48px 12px 13px;outline:none;transition:border-color .15s;-webkit-appearance:none;font-family:var(--font)}
.fw input:focus,.fw select:focus,.fw textarea:focus{border-color:var(--red);background:#fff}
.fw input::placeholder,.fw textarea::placeholder{color:var(--text-faint)}
.fw textarea{padding:12px 13px;resize:none;height:76px}
.fu{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:11px;pointer-events:none;font-family:var(--font-mono)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;margin-bottom:12px}
.row2:last-child,.row3:last-child{margin-bottom:0}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.seg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.seg4{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.seg6{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg-btn{background:#f4f6fa;border:0.5px solid var(--border);border-radius:7px;color:var(--text-secondary);font-size:12px;font-weight:500;padding:10px 5px;cursor:pointer;text-align:center;transition:all .15s;user-select:none;line-height:1.3;font-family:var(--font)}
.seg-btn.on{background:var(--red-light);border-color:var(--red);color:var(--red);font-weight:700}
.auto-row{background:#f4f6fa;border-radius:8px;padding:10px 13px;display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.ar-label{color:var(--text-muted);font-size:12px}
.ar-val{color:var(--text-primary);font-size:13px;font-weight:700;font-family:var(--font-mono)}
.btn{width:100%;border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;padding:15px;cursor:pointer;transition:all .15s;margin-bottom:10px;font-family:var(--font)}
.btn:hover{opacity:.9}.btn:active{transform:scale(.99)}
.btn-red{background:var(--red)}.btn-navy{background:var(--navy)}
.btn-outline{background:var(--white);color:var(--text-secondary);border:0.5px solid var(--border)}
.btn-sm{font-size:13px;padding:11px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:13px;font-weight:500;padding:10px 20px;border-radius:10px;z-index:999;display:none;white-space:nowrap;box-shadow:0 4px 20px rgba(26,35,64,0.25)}
.toast.show{display:block}
.error-box{background:var(--red-light);border:0.5px solid var(--red-border);border-radius:9px;padding:11px 13px;margin-bottom:12px;color:var(--red-dark);font-size:12px;line-height:1.5;display:none}
.error-box.show{display:block}
.info-box{background:var(--blue-light);border:0.5px solid var(--blue-border);border-radius:9px;padding:11px 13px;margin-bottom:12px;display:flex;gap:8px}
.ib-icon{color:var(--blue);font-size:14px;flex-shrink:0}
.ib-text{color:var(--blue-dark);font-size:11px;line-height:1.65}
.hidden{display:none!important}
/* LOADING */
.loading-overlay{position:fixed;inset:0;background:rgba(26,35,64,0.55);display:none;align-items:center;justify-content:center;z-index:200}
.loading-overlay.show{display:flex}
.loading-box{background:#fff;border-radius:14px;padding:24px 32px;text-align:center}
.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:var(--text-secondary);font-size:13px}
/* STEP DOTS */
.step-dots{display:flex;justify-content:center;gap:5px;margin-bottom:16px}
.sdot{width:5px;height:5px;border-radius:50%;background:var(--border);transition:all .2s}
.sdot.on{background:var(--red);width:18px;border-radius:3px}
/* LOGIN */
.login-hero{background:linear-gradient(155deg,var(--navy) 65%,var(--navy-mid));padding:40px 20px 32px;text-align:center}
.login-logo{width:64px;height:64px;background:var(--red);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:700;margin:0 auto 16px;box-shadow:0 4px 20px rgba(192,57,43,0.35)}
.login-title{color:#fff;font-size:22px;font-weight:700;margin-bottom:6px}
.login-sub{color:rgba(255,255,255,0.45);font-size:13px;line-height:1.6;margin-bottom:4px}
.login-coord{color:rgba(255,255,255,0.25);font-size:10px;font-family:var(--font-mono);letter-spacing:.3px}
.login-version{color:rgba(255,255,255,0.18);font-size:10px;font-family:var(--font-mono);margin-top:10px}
/* DASHBOARD */
.dash-hero{background:linear-gradient(155deg,var(--navy) 65%,var(--navy-mid));padding:20px 18px 22px}
.dash-greeting{color:rgba(255,255,255,0.45);font-size:12px;margin-bottom:2px}
.dash-name{color:#fff;font-size:18px;font-weight:700;margin-bottom:14px}
.dash-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.dash-stat{background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.12);border-radius:10px;padding:12px 8px;text-align:center}
.ds-num{color:#fff;font-size:22px;font-weight:700;font-family:var(--font-mono)}
.ds-label{color:rgba(255,255,255,0.38);font-size:10px;margin-top:2px;line-height:1.3}
/* PATIENT LIST */
.patient-row{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:14px;margin-bottom:8px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}
.patient-row:hover{border-color:var(--red);box-shadow:0 2px 12px rgba(192,57,43,0.1)}
.pr-id{color:var(--text-primary);font-size:13px;font-weight:700;font-family:var(--font-mono);margin-bottom:3px}
.pr-meta{color:var(--text-muted);font-size:11px}
.pr-right{display:flex;align-items:center;gap:6px}
.status-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px}
.sp-active{background:var(--green-light);color:var(--green-dark)}
.sp-due{background:var(--amber-light);color:var(--amber-dark)}
.sp-complete{background:#f4f6fa;color:var(--text-muted)}
.pr-arrow{color:var(--text-faint);font-size:16px}
.completeness-bar{height:3px;background:var(--border-light);border-radius:2px;overflow:hidden;margin-top:5px;width:72px}
.cb-fill{height:3px;border-radius:2px;background:var(--red)}
/* ALERT BANNER */
.alert-banner{border-radius:12px;padding:14px;margin-bottom:12px;display:flex;gap:11px;align-items:flex-start}
.ab-amber{background:var(--amber-light);border:0.5px solid var(--amber-border)}
.ab-red{background:var(--red-light);border:0.5px solid var(--red-border)}
.ab-blue{background:var(--blue-light);border:0.5px solid var(--blue-border)}
.ab-green{background:var(--green-light);border:0.5px solid var(--green-border)}
.ab-icon{font-size:18px;flex-shrink:0}
.ab-title{font-size:13px;font-weight:700;margin-bottom:3px}
.ab-amber .ab-title{color:var(--amber-dark)}.ab-red .ab-title{color:var(--red-dark)}
.ab-blue .ab-title{color:var(--blue-dark)}.ab-green .ab-title{color:var(--green-dark)}
.ab-sub{font-size:11px;line-height:1.55}
.ab-amber .ab-sub{color:#7a5020}.ab-red .ab-sub{color:#a05050}
.ab-blue .ab-sub{color:#2a5a8a}.ab-green .ab-sub{color:#2a6010}
/* PATIENT HEADER */
.patient-header{background:var(--navy);padding:14px 17px;display:flex;align-items:flex-start;justify-content:space-between}
.ph-id{color:#fff;font-size:15px;font-weight:700;font-family:var(--font-mono)}
.ph-meta{color:rgba(255,255,255,0.45);font-size:11px;margin-top:2px}
.ph-badge{background:rgba(192,57,43,0.25);color:#f09595;font-size:10px;font-weight:700;padding:3px 10px;border-radius:8px;border:0.5px solid rgba(192,57,43,0.3);flex-shrink:0;margin-left:8px}
/* RECORD TABS */
.rec-tabs{display:flex;background:var(--white);border-bottom:0.5px solid var(--border);overflow-x:auto;scrollbar-width:none}
.rec-tabs::-webkit-scrollbar{display:none}
.rec-tab{padding:11px 14px;font-size:11px;font-weight:700;color:var(--text-muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;flex-shrink:0;transition:all .15s}
.rec-tab.on{color:var(--red);border-bottom-color:var(--red)}
.rec-pane{display:none;padding:16px}.rec-pane.on{display:block}
/* DATA ROW */
.data-row{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:0.5px solid var(--border-light)}
.data-row:last-child{border-bottom:none}
.dr-key{color:var(--text-muted);font-size:12px;min-width:42%}
.dr-val{color:var(--text-primary);font-size:12px;font-weight:600;text-align:right;max-width:56%;line-height:1.4}
/* OUTCOME CELLS */
.outcome-cell{background:#f4f6fa;border:0.5px solid var(--border);border-radius:10px;padding:13px;margin-bottom:9px}
.oc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.oc-title{color:var(--text-primary);font-size:13px;font-weight:700}
.oc-badge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:8px}
.ocb-done{background:var(--green-light);color:var(--green-dark)}
.ocb-due{background:var(--amber-light);color:var(--amber-dark)}
.ocb-overdue{background:var(--red-light);color:var(--red-dark)}
.ocb-pending{background:#f4f6fa;color:var(--text-muted);border:0.5px solid var(--border)}
/* GDMT MINI */
.gdmt-mini-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:0.5px solid var(--border-light)}
.gdmt-mini-row:last-child{border-bottom:none}
.gmr-name{color:var(--text-primary);font-size:12px;font-weight:600}
.gmr-dose{color:var(--text-muted);font-size:10px;font-family:var(--font-mono);margin-top:1px}
.gmr-right{display:flex;align-items:center;gap:7px}
.pct-lbl{font-size:12px;font-weight:700;font-family:var(--font-mono)}
.mini-bar{width:44px;height:4px;background:var(--border-light);border-radius:2px;overflow:hidden}
.mini-fill{height:4px;border-radius:2px}
/* EXPORT */
.export-dark{background:var(--navy);border-radius:14px;padding:17px;margin-bottom:12px}
.ed-label{color:rgba(255,255,255,0.3);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
.ed-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.ed-stat{background:rgba(255,255,255,0.08);border-radius:8px;padding:10px;text-align:center}
.ed-num{color:#fff;font-size:20px;font-weight:700;font-family:var(--font-mono)}
.ed-lbl{color:rgba(255,255,255,0.35);font-size:10px;margin-top:2px}
.exp-row{display:flex;gap:8px}
.exp-btn{flex:1;border:none;border-radius:9px;font-size:12px;font-weight:700;padding:12px;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.exp-btn:hover{opacity:.85}
.exp-csv{background:rgba(255,255,255,0.12);color:#fff}
.exp-spss{background:var(--red);color:#fff}
/* SECTION DIVIDER */
.section-divider{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 0 10px;margin-top:4px}

/* ═══════════════════════════════════════════
   v1.2 ADDITIONS — CFS, Socioeconomic, Barrier
═══════════════════════════════════════════ */

/* Field note — small helper text under card label */
.field-note{
  font-size:11px;
  line-height:1.5;
  color:var(--text-muted);
  margin-bottom:12px;
  margin-top:-2px;
}

/* Clinical Frailty Scale grid */
.cfs-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}
.cfs-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:9px 5px;
  border:0.5px solid var(--border);
  border-radius:9px;
  background:var(--white);
  cursor:pointer;
  text-align:center;
  transition:all .12s;
  min-height:54px;
}
.cfs-btn:hover{border-color:var(--red-border);background:var(--red-light)}
.cfs-btn.on{
  background:var(--navy);
  border-color:var(--navy);
}
.cfs-btn.on .cfs-n{color:#fff}
.cfs-btn.on .cfs-t{color:rgba(255,255,255,0.7)}
.cfs-n{
  font-size:17px;
  font-weight:700;
  color:var(--navy);
  font-family:var(--font-mono);
  line-height:1;
}
.cfs-t{
  font-size:9.5px;
  font-weight:500;
  color:var(--text-secondary);
  line-height:1.2;
}

/* CFS category badge colours */
.cfs-cat-fit{color:var(--green-dark) !important}
.cfs-cat-vuln{color:var(--amber-dark) !important}
.cfs-cat-frail{color:var(--red-dark) !important}

/* Barrier block — BPJS / formulary / afford per pillar */
.barrier-block{
  background:var(--border-light);
  border:0.5px solid var(--border);
  border-radius:10px;
  padding:11px 12px;
  margin-top:8px;
  margin-bottom:4px;
}
.bb-title{
  font-size:11px;
  font-weight:700;
  color:var(--text-secondary);
  margin-bottom:4px;
  letter-spacing:0.2px;
}
.bb-note{
  font-size:10px;
  color:var(--amber-dark);
  background:var(--amber-light);
  border-radius:5px;
  padding:4px 7px;
  margin-bottom:8px;
  line-height:1.4;
}
.bb-grid{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.bb-lbl{
  font-size:10.5px;
  font-weight:500;
  color:var(--text-muted);
  margin-bottom:3px;
}

/* Mini segment buttons inside barrier block */
.seg-mini{
  margin-bottom:0 !important;
  gap:4px;
}
.seg-mini .seg-btn{
  padding:5px 4px;
  font-size:11px;
  border-radius:6px;
}

/* v1.2.3 — Training-mode visual cue */
.training-strip{background:var(--amber-light);color:var(--amber-dark);border-bottom:1px solid var(--amber-border);padding:9px 16px;font-size:12px;line-height:1.4;text-align:center}
body.is-training .topbar{background:var(--amber)}
body.is-training .topbar .app-name{color:#3a2106}
body.is-training .topbar .app-sub{color:rgba(58,33,6,0.6)}
body.is-training .logo{background:var(--amber-dark);box-shadow:0 3px 10px rgba(99,56,6,0.3)}
body.is-training .site-pill{background:rgba(99,56,6,0.18);color:#3a2106;border-color:rgba(99,56,6,0.3)}
body.is-training .logout-btn{background:rgba(255,255,255,0.4);color:#3a2106;border-color:rgba(99,56,6,0.25)}
body.is-training .dash-hero,body.is-training .patient-header{background:linear-gradient(155deg,var(--amber) 65%,#d18420)}