/* =====================================================================
   OJSP Ayurved — Patient Support Program
   Theme layer on top of Bootstrap 5.
   Palette is drawn from the clinic, not the spa: neem green for the brand,
   turmeric only for attention, and a cool clinical paper for surfaces.
   ===================================================================== */

:root{
  --ink:#12211C;
  --ink-2:#41544C;
  --ink-3:#728179;
  --line:#DCE4E0;
  --paper:#F5F8F6;
  --card:#FFFFFF;

  --brand:#1B5E4A;
  --brand-dark:#123F32;
  --brand-soft:#E7F1ED;
  --haldi:#C98A0F;
  --haldi-soft:#FBF1DC;

  --good:#147D54;
  --good-soft:#E3F3EC;
  --watch:#B9690C;
  --watch-soft:#FCF0DF;
  --alert:#B3261E;
  --alert-soft:#FBE7E5;
  --low:#1D4ED8;
  --low-soft:#E6ECFC;

  --r-sm:8px; --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(18,33,28,.05), 0 8px 24px -12px rgba(18,33,28,.18);
  --shadow-lg:0 2px 4px rgba(18,33,28,.06), 0 24px 48px -20px rgba(18,33,28,.28);

  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --bs-primary:#1B5E4A;
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display-font{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; color:var(--ink); }
h1{ font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; }
h2{ font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.15; }
h3{ font-size:1.15rem; }
.lead{ font-size:1.075rem; color:var(--ink-2); }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-dark); text-decoration:underline; }

.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); font-family:var(--font-body);
}
.sec-title{ margin-bottom:.35rem; }
.sec-sub{ color:var(--ink-2); max-width:60ch; }

/* ---- Buttons -------------------------------------------------------- */
.btn{ border-radius:var(--r-sm); font-weight:600; padding:.62rem 1.15rem; }
.btn-lg{ padding:.85rem 1.6rem; font-size:1.02rem; }
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover,.btn-primary:focus{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-outline-primary{ color:var(--brand); border-color:var(--brand); }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand); }
.btn-haldi{ background:var(--haldi); border-color:var(--haldi); color:#fff; }
.btn-haldi:hover{ background:#A97207; color:#fff; }
:focus-visible{ outline:3px solid var(--haldi); outline-offset:2px; }

/* ---- Cards / surfaces ---------------------------------------------- */
.card{ border:1px solid var(--line); border-radius:var(--r); background:var(--card); box-shadow:var(--shadow); }
.card-header{ background:transparent; border-bottom:1px solid var(--line); font-weight:600; padding:.9rem 1.1rem; }
.card-body{ padding:1.1rem; }
.soft{ background:var(--brand-soft); }

/* ---- Forms ---------------------------------------------------------- */
.form-label{ font-weight:600; font-size:.875rem; color:var(--ink-2); margin-bottom:.3rem; }
.form-control,.form-select{
  border-radius:var(--r-sm); border-color:var(--line); padding:.62rem .8rem; font-size:1rem;
  min-height:46px;
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(27,94,74,.14); }
.form-text{ font-size:.82rem; color:var(--ink-3); }
.input-num{ font-family:var(--font-num); font-size:1.15rem; font-weight:600; letter-spacing:-.02em; }
.form-check-input:checked{ background-color:var(--brand); border-color:var(--brand); }
.req::after{ content:"*"; color:var(--alert); margin-left:2px; }

/* Big tap targets for older patients on phones */
.tap-check{
  display:flex; align-items:center; gap:.6rem; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.7rem .8rem; background:#fff; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.tap-check:has(input:checked){ border-color:var(--brand); background:var(--brand-soft); }
.tap-check input{ width:1.15rem; height:1.15rem; }

/* ---- Reading badges -------------------------------------------------- */
.rd{ display:inline-block; font-size:.72rem; font-weight:700; padding:.16rem .5rem; border-radius:999px; letter-spacing:.01em; }
.rd-good{ background:var(--good-soft); color:var(--good); }
.rd-watch{ background:var(--watch-soft); color:var(--watch); }
.rd-alert{ background:var(--alert-soft); color:var(--alert); }
.rd-low{ background:var(--low-soft); color:var(--low); }

/* ---- Stat tiles ------------------------------------------------------ */
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.05rem; height:100%; }
.stat .k{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.stat .v{ font-family:var(--font-num); font-size:1.9rem; font-weight:600; line-height:1.1; letter-spacing:-.03em; }
.stat .u{ font-size:.85rem; color:var(--ink-3); font-family:var(--font-body); font-weight:500; }
.stat .d{ font-size:.82rem; font-weight:600; }
.d-down{ color:var(--good); } .d-up{ color:var(--alert); } .d-flat{ color:var(--ink-3); }

/* =====================================================================
   SIGNATURE — the control ribbon.
   One cell per day. Colour = that day's worst reading. A patient sees
   thirty days of control in one glance, and so does the care team.
   ===================================================================== */
.ribbon{ display:flex; gap:3px; flex-wrap:nowrap; overflow-x:auto; padding:2px 0 6px; }
.ribbon .cell{
  flex:0 0 auto; width:16px; height:34px; border-radius:4px; background:#EAEFEC;
  position:relative; cursor:default; transition:transform .1s ease;
}
.ribbon .cell:hover{ transform:translateY(-2px); }
.ribbon .cell.good{ background:var(--good); }
.ribbon .cell.watch{ background:var(--haldi); }
.ribbon .cell.alert{ background:var(--alert); }
.ribbon .cell.low{ background:var(--low); }
.ribbon .cell.miss{ background:repeating-linear-gradient(45deg,#EAEFEC,#EAEFEC 3px,#DDE4E0 3px,#DDE4E0 6px); }
.ribbon-legend{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:var(--ink-3); }
.ribbon-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.3rem; vertical-align:-1px; }

/* ---- Landing -------------------------------------------------------- */
.nav-top{ background:#fff; border-bottom:1px solid var(--line); }
.brand-mark{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--brand); letter-spacing:-.02em; }
.brand-mark span{ color:var(--haldi); }

.hero{ background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%); padding:4.5rem 0 3.5rem; }
.hero h1 em{ font-style:normal; color:var(--brand); }
.hero-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:1.35rem;
}
.step-row{ display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px dashed var(--line); }
.step-row:last-child{ border-bottom:0; }
.step-n{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--brand-soft);
  color:var(--brand); font-family:var(--font-num); font-weight:700; display:grid; place-items:center; font-size:.9rem;
}
.feature{ padding:1.2rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; height:100%; }
.feature h3{ font-size:1.02rem; margin-bottom:.3rem; }
.feature p{ color:var(--ink-2); font-size:.94rem; margin:0; }

.faq-block{ padding:3rem 0; }
.faq-item{ border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; margin-bottom:.6rem; }
.faq-item summary{ list-style:none; cursor:pointer; padding:.95rem 1.1rem; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{ font-size:1rem; margin:0; }
.faq-item summary::after{ content:"+"; font-family:var(--font-num); color:var(--brand); font-size:1.3rem; }
.faq-item[open] summary::after{ content:"–"; }
.faq-answer{ padding:0 1.1rem 1.05rem; color:var(--ink-2); }
.faq-answer p:first-child{ font-weight:500; color:var(--ink); }

footer.site{ background:var(--ink); color:#C6D2CC; padding:3rem 0 1.5rem; margin-top:4rem; }
footer.site a{ color:#E6EEEA; }
footer.site h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.8rem; }

/* ---- App shell (patient + admin) ------------------------------------ */
.app-nav{ background:var(--brand); color:#fff; }
.app-nav a{ color:#DCE9E3; }
.app-nav a:hover,.app-nav a.active{ color:#fff; text-decoration:none; }
.app-nav .nav-link.active{ background:rgba(255,255,255,.14); border-radius:var(--r-sm); }
.sidebar{ background:#fff; border-right:1px solid var(--line); min-height:calc(100vh - 58px); }
.sidebar .nav-link{ color:var(--ink-2); border-radius:var(--r-sm); padding:.55rem .8rem; font-weight:500; font-size:.94rem; }
.sidebar .nav-link:hover{ background:var(--paper); }
.sidebar .nav-link.active{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
.sidebar .grp{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:1rem .8rem .3rem; font-weight:700; }

.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-head h1{ font-size:1.55rem; margin:0; }
.page-head .sub{ color:var(--ink-3); font-size:.92rem; }

table.tbl{ background:#fff; }
table.tbl thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap;
}
table.tbl td{ vertical-align:middle; border-color:var(--line); }
table.tbl td.num{ font-family:var(--font-num); font-weight:600; }
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:0 0 auto;
}
.empty{ text-align:center; padding:3rem 1rem; color:var(--ink-3); }
.empty h3{ font-size:1.05rem; color:var(--ink-2); }

/* ---- Utilities ------------------------------------------------------ */
.num{ font-family:var(--font-num); font-weight:600; }
.hr-soft{ border:0; border-top:1px solid var(--line); margin:1.5rem 0; }
.pill{ font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:var(--paper); color:var(--ink-2); border:1px solid var(--line); }
.pill-brand{ background:var(--brand-soft); color:var(--brand); border-color:transparent; }
.pill-haldi{ background:var(--haldi-soft); color:var(--haldi); border-color:transparent; }
.text-muted-2{ color:var(--ink-3) !important; }
.sticky-save{
  position:sticky; bottom:0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-top:1px solid var(--line); padding:.75rem 0; z-index:20;
}
.otp-input{ letter-spacing:.6em; text-align:center; font-family:var(--font-num); font-size:1.5rem; font-weight:700; }

@media (max-width:576px){
  body{ font-size:15px; }
  .hero{ padding:2.5rem 0 2rem; }
  .stat .v{ font-size:1.6rem; }
  .ribbon .cell{ width:13px; height:30px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media print{
  .no-print,.sidebar,.app-nav,footer.site{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; }
}