/* CardioBoyo Health Monitoring — Shared Stylesheet v1.0
   Mengikuti design system CardioBoyo Education */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --navy-deep:#1a2035;
  --navy-mid:#1e2642;
  --navy-card:#252d45;
  --navy-border:#2a3350;
  --coral:#e8441a;
  --coral-light:rgba(232,68,26,0.15);
  --coral-text:#f87d5a;
  --green:#2a9d5c;
  --green-light:rgba(42,157,92,0.15);
  --body-bg:#f0f2f7;
  --card-bg:#ffffff;
  --text-primary:#1a1a2e;
  --text-secondary:#4a5568;
  --text-muted:#8892a4;
  --border-light:#e8eaf0;
  --red-bg:rgba(192,57,43,0.12);
  --red-border:rgba(192,57,43,0.25);
  --red-text:#e74c3c;
  --red-dark:#c0392b;
  --amber-bg:#fef9e7;
  --amber-icon:#c07c1a;
  --blue-bg:#e8f0fe;
  --blue-icon:#3b5bdb;
}

html,body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:16px;color:var(--text-primary)}
body{background:var(--body-bg);min-height:100vh;display:flex;flex-direction:column}
body.dark-bg{background:var(--navy-deep)}

a{color:var(--coral);text-decoration:none}
a:hover{text-decoration:underline}

/* HEADER (sticky di halaman dark/landing) */
.header{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;max-width:600px;margin:0 auto;width:100%}
.header.sticky-light{background:var(--navy-deep);padding:12px 16px;position:sticky;top:0;z-index:100;max-width:none}
.header.sticky-light .header-inner{display:flex;align-items:center;justify-content:space-between;max-width:600px;margin:0 auto;width:100%}
.logo-row{display:flex;align-items:center;gap:10px}
.logo-icon{width:38px;height:38px;border-radius:11px;background:var(--coral);display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none}
.logo-icon svg{width:20px;height:20px;fill:#fff}
.logo-text{color:#fff;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none}
.logo-sub{color:var(--text-muted);font-size:10px;margin-top:1px}
.header-right{display:flex;align-items:center;gap:8px}
.version-badge{border:1px solid var(--green);color:var(--green);font-size:10px;padding:3px 9px;border-radius:20px;font-weight:500}

/* BREADCRUMB */
.breadcrumb-wrap{background:var(--navy-mid)}
.breadcrumb{padding:8px 16px;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px;max-width:600px;margin:0 auto}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--coral-text)}
.breadcrumb span.current{color:var(--coral-text)}

/* PAGE BAND (hero kecil di atas konten light) */
.page-band{background:var(--navy-mid);padding:18px 16px;max-width:600px;margin:0 auto;width:100%}
.page-band-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.3}
.page-band-sub{font-size:13px;color:#c8d0e0;line-height:1.55}

/* HERO (landing) */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px 16px;text-align:center;max-width:600px;margin:0 auto;width:100%}
.hero-tagline{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--coral-text);margin-bottom:14px}
.hero-title{font-size:28px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:10px}
.hero-sub{font-size:14px;color:#8892a4;line-height:1.6;max-width:340px;margin:0 auto 32px}

/* CONTENT (light bg) */
.content{max-width:600px;margin:0 auto;padding:14px 14px 32px;width:100%;flex:1}

/* CARD */
.card{background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;padding:16px;margin-bottom:12px}
.card-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.card-sub{font-size:12px;color:var(--text-muted);line-height:1.5}

/* SECTION LABEL */
.section-label{font-size:9px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.9px;margin:14px 2px 8px}

/* FORM */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.form-label .req{color:var(--coral)}
.form-help{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.5}
.input{
  width:100%;display:block;
  background:#fff;border:1px solid var(--border-light);
  border-radius:12px;padding:12px 14px;
  font-size:15px;color:var(--text-primary);
  font-family:inherit;outline:none;transition:border-color .15s
}
.input:focus{border-color:var(--coral)}
.input::placeholder{color:var(--text-muted)}
.input.invalid{border-color:var(--red-text)}
.input.code-pin{font-family:'JetBrains Mono','Menlo','Consolas',monospace;font-size:22px;letter-spacing:8px;text-align:center;font-weight:700}
.input.code-cb{font-family:'JetBrains Mono','Menlo','Consolas',monospace;font-size:20px;letter-spacing:3px;text-align:center;font-weight:700;text-transform:uppercase}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.input-row.three{grid-template-columns:1fr 1fr 1fr}

/* BUTTON */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  background:var(--coral);color:#fff;
  border:none;border-radius:12px;
  padding:14px 16px;
  font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:opacity .15s,transform .1s;
  text-decoration:none;
}
.btn:hover{opacity:0.92}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-secondary{background:#fff;color:var(--text-primary);border:1px solid var(--border-light)}
.btn-secondary:hover{border-color:var(--text-muted)}
.btn-ghost{background:transparent;color:var(--coral);border:1px solid var(--coral)}
.btn-ghost:hover{background:var(--coral-light);opacity:1}
.btn-green{background:var(--green)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.btn-row{display:flex;gap:10px;margin-top:8px}
.btn-row .btn{flex:1}

/* BANNERS */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.5;margin-bottom:12px}
.banner svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;fill:none;stroke-width:2}
.banner-danger{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red-dark)}
.banner-danger svg{stroke:var(--red-text)}
.banner-warn{background:var(--amber-bg);color:#7a5c10;border:1px solid #f0d896}
.banner-warn svg{stroke:var(--amber-icon)}
.banner-info{background:var(--blue-bg);color:#26418d;border:1px solid #c4d3f7}
.banner-info svg{stroke:var(--blue-icon)}
.banner-ok{background:#e8f5ee;color:#1e6b3e;border:1px solid #b8dcc4}
.banner-ok svg{stroke:var(--green)}

/* INLINE ERROR */
.field-error{font-size:11px;color:var(--red-text);margin-top:5px;display:none}
.field-error.show{display:block}

/* CODE DISPLAY (kode pasien yg dihasilkan) */
.code-display{
  background:linear-gradient(135deg, var(--navy-mid), var(--navy-card));
  color:#fff;
  border-radius:14px;
  padding:22px 16px;
  text-align:center;
  margin:8px 0 12px;
}
.code-display-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;margin-bottom:8px}
.code-display-value{font-family:'JetBrains Mono','Menlo','Consolas',monospace;font-size:34px;font-weight:700;letter-spacing:4px;color:#fff;margin-bottom:4px}
.code-display-sub{font-size:11px;color:var(--text-muted)}

/* PATIENT LIST (admin dashboard) */
.list-item{
  background:#fff;border:1px solid var(--border-light);border-radius:12px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;margin-bottom:6px;
  transition:border-color .15s;
}
.list-item:hover{border-color:#c8d0e0;text-decoration:none}
.list-item-avatar{width:38px;height:38px;border-radius:11px;background:var(--coral-light);color:var(--coral);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.list-item-body{flex:1;min-width:0}
.list-item-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.list-item-arrow{flex-shrink:0}
.list-item-arrow svg{width:14px;height:14px;fill:none;stroke:var(--text-muted);stroke-width:2}

/* STAT ROW (admin dashboard) */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--border-light);border-radius:12px;padding:12px 14px}
.stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600;margin-bottom:4px}
.stat-value{font-size:22px;font-weight:700;color:var(--text-primary);line-height:1.1}
.stat-sub{font-size:11px;color:var(--text-muted);margin-top:3px}

/* DISCLAIMER BOX (onboarding) */
.disclaimer-box{
  background:#fff;border:1px solid var(--border-light);border-radius:14px;
  padding:16px;max-height:46vh;overflow-y:auto;margin-bottom:12px;
  font-size:13px;line-height:1.65;color:var(--text-secondary);
}
.disclaimer-box ol{padding-left:18px}
.disclaimer-box ol li{margin-bottom:10px}
.disclaimer-box strong{color:var(--text-primary)}
.disclaimer-check{display:flex;gap:10px;align-items:flex-start;background:var(--amber-bg);border-radius:10px;padding:12px;margin-bottom:14px;cursor:pointer;border:1px solid #f0d896}
.disclaimer-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--coral);flex-shrink:0}
.disclaimer-check>span{font-size:13px;color:#7a5c10;line-height:1.5;cursor:pointer;flex:1}

/* CONFIRM IDENTITY BOX */
.identity-box{
  background:linear-gradient(135deg,#fff,#f7f9fc);
  border:1.5px solid var(--border-light);
  border-radius:14px;padding:18px;margin-bottom:14px;
}
.identity-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.identity-row:last-child{margin-bottom:0}
.identity-icon{width:22px;height:22px;color:var(--text-muted);display:flex;align-items:center;justify-content:center}
.identity-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.identity-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.7px;font-weight:600;width:80px;flex-shrink:0}
.identity-value{font-size:14px;font-weight:600;color:var(--text-primary)}

/* EMPTY STATE */
.empty-state{text-align:center;padding:40px 16px;color:var(--text-muted)}
.empty-state svg{width:48px;height:48px;fill:none;stroke:var(--text-muted);stroke-width:1.5;margin-bottom:14px;opacity:0.6}
.empty-state-title{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.empty-state-sub{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:280px;margin:0 auto 16px}

/* TOAST */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  background:var(--navy-card);color:#fff;
  padding:12px 18px;border-radius:12px;
  font-size:13px;max-width:90%;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  transition:transform .25s ease;z-index:9999;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--red-dark)}
.toast.success{background:var(--green)}

/* LOADING SPINNER */
.spinner{
  display:inline-block;width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,0.3);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite
}
.btn-secondary .spinner,.btn-ghost .spinner{border-color:rgba(0,0,0,0.15);border-top-color:var(--text-primary)}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:24px;color:var(--text-muted);font-size:13px}
.loading-row .spinner{border-color:rgba(0,0,0,0.1);border-top-color:var(--coral)}

/* WA BUTTON */
.btn-whatsapp{background:#25d366;color:#fff}
.btn-whatsapp:hover{opacity:0.92}

/* FOOTER */
.app-footer{
  max-width:600px;margin:0 auto;padding:18px 14px 22px;
  font-size:11px;color:var(--text-muted);text-align:center;line-height:1.6;
  border-top:1px solid var(--border-light);
}
.app-footer.dark{border-top-color:var(--navy-border);color:#4a5568}
.app-footer a{color:var(--text-muted);text-decoration:none}

/* LANDING ROLE CARDS */
.role-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:480px;margin:0 auto}
.role-card{background:var(--navy-mid);border:1.5px solid var(--navy-border);border-radius:18px;padding:24px 16px 20px;text-align:center;text-decoration:none;cursor:pointer;transition:border-color .2s,transform .15s,background .2s;display:block;color:inherit}
.role-card:active{transform:scale(0.97)}
.role-card:hover{border-color:var(--coral);background:#232d50;text-decoration:none}
.role-card.admin:hover{border-color:#3b5bdb}
.role-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.role-icon svg{width:26px;height:26px;fill:none;stroke-width:1.8}
.role-icon.patient-icon{background:var(--coral-light)}
.role-icon.patient-icon svg{stroke:var(--coral-text)}
.role-icon.admin-icon{background:rgba(59,91,219,0.15)}
.role-icon.admin-icon svg{stroke:#6b8fef}
.role-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:5px}
.role-desc{font-size:12px;color:#8892a4;line-height:1.5}
.role-arrow{margin-top:14px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--coral-text)}
.role-card.admin .role-arrow{color:#6b8fef}
.role-arrow svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5}

.help-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-top:18px}
.help-link a{color:var(--coral-text)}

/* BACK LINK */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12px;margin-bottom:10px;text-decoration:none}
.back-link:hover{color:var(--coral);text-decoration:none}
.back-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* HELPER ROW (links di bawah form) */
.helper-row{display:flex;justify-content:space-between;font-size:12px;margin-top:10px}
.helper-row a{color:var(--coral)}

/* SAFE BOTTOM */
.safe-bottom{height:env(safe-area-inset-bottom,12px)}