/* Mendvox console — indigo system. One family (Inter), teal-on-slate, data-forward. */
:root{
  
  
  --text:var(--txt); --text-2:var(--txt-2); --text-3:var(--txt-3);
  --teal:var(--peri); --teal-ink:var(--peri-700); --teal-soft:var(--peri-soft); --teal-soft-2:var(--peri-soft-2);
  --amber:#B5730A; --amber-soft:#FBF0DC; --clay:#C0392B; --clay-soft:#FBE9E7;
  --blue:var(--mint-2); --blue-soft:var(--mint-soft);
  --r:12px; --r-sm:8px; --r-lg:16px;
  --sh-sm:0 1px 2px rgba(15,30,46,.05);
  --sh:0 1px 3px rgba(15,30,46,.06),0 1px 2px rgba(15,30,46,.04);
  --sh-lg:0 4px 16px rgba(15,30,46,.08),0 2px 4px rgba(15,30,46,.04);
  --sh-xl:0 12px 32px rgba(15,30,46,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas); color:var(--text);
  font-family:var(--f);
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; letter-spacing:-.006em;
}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:5px}
h1,h2,h3,h4{margin:0;font-family:var(--f);font-weight:var(--w-head);letter-spacing:-.022em;line-height:1.28;color:var(--ink)}
h1{font-size:23px} h2{font-size:17px} h3{font-size:15px}
.num,time,td.n,.stat-v,.otp{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--text-2)} .sm{font-size:13px} .xs{font-size:11.5px}
.right{text-align:right} .center{text-align:center}
.row{display:flex;gap:10px;align-items:center} .wrap{flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grow{flex:1} .mt{margin-top:16px} .mt-lg{margin-top:26px} .mb{margin-bottom:16px}
.hide{display:none!important}

/* ── shell ─────────────────────────────────────── */
.shell{display:flex;min-height:100vh}
.side{
  width:250px;flex:none;background:var(--ink);color:#AFC0CC;
  padding:0;position:sticky;top:0;height:100vh;overflow:auto;
  display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06)
}
.brand{display:flex;gap:11px;align-items:center;color:#fff;padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand .logo{width:42px;height:42px;border-radius:12px;background:var(--teal);display:grid;place-items:center;flex:none;box-shadow:0 4px 14px rgba(75,92,240,.4);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.brand:hover .logo{transform:rotate(-8deg) scale(1.05)}
.brand b{font-size:19px;font-weight:500;letter-spacing:-.035em;display:block;line-height:1.1}
.brand small{display:block;font-size:10.5px;font-weight:500;color:#7B8F9C;letter-spacing:.03em;text-transform:uppercase;margin-top:2px}
.side nav{padding:14px 12px;flex:1}
.side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:#AFC0CC;font-size:13.5px;font-weight:500;margin-bottom:2px;position:relative;transition:background .12s,color .12s}
.side nav a svg{width:18px;height:18px;flex:none;opacity:.8}
.side nav a:hover{background:var(--ink-2);color:#fff}
.side nav a.on{background:var(--ink-2);color:#fff;font-weight:600}
.side nav a.on:before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--teal)}
.side nav a.on svg{opacity:1;color:var(--teal)}
.side .grp{font-size:10.5px;color:#61757F;padding:16px 12px 7px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.side-foot{padding:14px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:#61757F}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{
  background:var(--glass);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);padding:0 26px;height:60px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;position:sticky;top:0;z-index:20
}
.top h1{font-size:18px}
.top-sub{font-size:12px;color:var(--text-3);font-weight:500;margin-top:1px}
.content{padding:24px 26px 40px;max-width:1320px;width:100%}

.iconbtn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--text-2);cursor:pointer;position:relative;flex:none}
.iconbtn:hover{background:var(--canvas);color:var(--ink)}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--clay);border:1.5px solid var(--card)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:500;flex:none;box-shadow:var(--sh-sm)}

/* ── cards + grid ──────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);transition:box-shadow var(--t),transform var(--t)}
.card:hover{box-shadow:var(--sh-3)}
.card-p{padding:20px}
.card-h{padding:15px 20px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-h h2{font-size:15px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:1050px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g-2-1{grid-template-columns:1fr}}
@media(max-width:640px){.g2,.g4{grid-template-columns:1fr}}

/* stat cards with icon + hierarchy */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;animation:statIn .5s cubic-bezier(.16,1,.3,1) backwards}
.stat:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,30,46,.12)}
.stat:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal)}
.stat.amber:before{background:#F59E0B}
.stat.clay:before{background:#EF4444}
.stat.blue:before{background:#16A34A}
.grid .stat:nth-child(2){animation-delay:.06s}.grid .stat:nth-child(3){animation-delay:.12s}.grid .stat:nth-child(4){animation-delay:.18s}
@keyframes statIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stat{animation:none}}
.stat .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;background:var(--teal-soft);color:var(--teal)}
.stat .ico svg{width:19px;height:19px}
.stat-l{font-size:12.5px;color:var(--text-2);font-weight:500}
.stat-v{font-weight:500;letter-spacing:-.03em;font-size:30px;font-weight:500;letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin-top:4px}
.stat-s{font-size:11.5px;color:var(--text-3);margin-top:4px;font-weight:500}
.stat.amber .ico{background:linear-gradient(150deg,#FEF3C7,#FFFBEB);color:#B5730A}
.stat.clay .ico{background:linear-gradient(150deg,#FEE2E2,#FEF2F2);color:var(--clay)}
.stat.blue .ico{background:#E8F7EE;color:#16A34A}

/* ── tables ────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:500;font-size:11.5px;color:var(--text-3);padding:11px 20px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.03em;text-transform:uppercase}
td{padding:13px 20px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--teal-soft-2)}
.tw{overflow-x:auto}
td b,th+td b{font-weight:500;color:var(--ink)}

/* ── forms ─────────────────────────────────────── */
label{display:block;font-size:12.5px;font-weight:500;margin-bottom:6px;color:var(--text)}
input,select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;
  font-size:14px;background:#fff;color:var(--text);transition:border-color .12s,box-shadow .12s
}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(75,92,240,.13)}
input:disabled{background:var(--canvas);color:var(--text-3)}
textarea{min-height:82px;resize:vertical}
.field{margin-bottom:15px}
.fg{display:grid;gap:15px;grid-template-columns:repeat(2,1fr)}
.fg3{display:grid;gap:15px;grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.fg,.fg3{grid-template-columns:1fr}}
.hint{font-size:11.5px;color:var(--text-3);margin-top:5px}
.check{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:400;margin-bottom:0;color:var(--text)}
.check input{width:auto}

.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;border:1px solid transparent;
  background:var(--teal);color:#fff;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;box-shadow:0 2px 8px rgba(75,92,240,.28)
}
.btn:hover{color:#fff;background:var(--teal-ink);transform:translateY(-1px);box-shadow:0 8px 22px rgba(75,92,240,.36)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn svg{width:16px;height:16px}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--text);box-shadow:var(--sh-sm)}
.btn.ghost:hover{background:var(--canvas);color:var(--ink);border-color:var(--line)}
.btn.danger{background:var(--clay);box-shadow:0 1px 2px rgba(192,57,43,.25)} .btn.danger:hover{background:#A02D22}
.btn.sm{padding:7px 14px;font-size:12.5px}
.btn.block{width:100%;justify-content:center;padding:12px}

/* ── pills ─────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:500;background:var(--line-2);color:var(--text)}
.pill:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.pill.plain:before{display:none}
.pill.ok,.pill.taken,.pill.active,.pill.published,.pill.paid{background:#E8F7EE;color:#16A34A}
.pill.due,.pill.trial,.pill.snoozed,.pill.pending,.pill.payment_due,.pill.grace,.pill.draft{background:var(--amber-soft);color:var(--amber)}
.pill.missed,.pill.suspended,.pill.cancelled,.pill.failed,.pill.inactive{background:var(--clay-soft);color:var(--clay)}

.bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal);border-radius:99px;transition:width .3s}
.bar.warn i{background:var(--amber)} .bar.bad i{background:var(--clay)}

/* donut ring for headline adherence */
.ring{--p:0;--c:var(--teal);width:120px;height:120px;border-radius:50%;flex:none;
  background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line-2) 0);display:grid;place-items:center;position:relative}
.ring:before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--card)}
.ring span{position:relative;font-size:26px;font-weight:500;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}

.flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:16px;font-size:13.5px;font-weight:500;display:flex;gap:9px;align-items:center;border:1px solid transparent}
.flash:before{font-size:15px}
.flash.ok{background:var(--teal-soft);color:var(--teal-ink);border-color:#C5E3DD}
.flash.ok:before{content:"✓"}
.flash.err{background:var(--clay-soft);color:#8C2016;border-color:#F3CFC9}
.flash.err:before{content:"!"}
.flash.warn{background:var(--amber-soft);color:#7A4E06;border-color:#F0DCB4}
.empty{padding:52px 24px;text-align:center;color:var(--text-2)}
.empty .eico{width:48px;height:48px;border-radius:12px;background:var(--canvas);display:grid;place-items:center;margin:0 auto 14px;color:var(--text-3)}
.empty h3{color:var(--ink);margin-bottom:6px;font-size:15px}

/* ── auth ──────────────────────────────────────── */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,#1B3247,var(--ink))}
.auth-box{width:100%;max-width:400px;background:var(--card);border-radius:var(--r-lg);padding:34px;box-shadow:var(--sh-xl)}
.auth-box .brand{color:var(--ink);padding:0 0 20px;border:0}
.auth-box .brand small{color:var(--text-3)}
.tabs{display:flex;gap:4px;background:var(--canvas);padding:4px;border-radius:10px;margin-bottom:20px;border:1px solid var(--line-2)}
.tabs button{flex:1;padding:9px;border:0;background:transparent;border-radius:7px;font:inherit;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;transition:.12s}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.otp{letter-spacing:10px;text-align:center;font-size:24px;font-weight:550}

/* ── patient app ───────────────────────────────── */
.app{max-width:540px;margin:0 auto;padding:0 16px 100px;min-height:100vh}
.app-top{position:sticky;top:0;background:linear-gradient(var(--canvas) 82%,transparent);padding:20px 0 14px;z-index:10}
.app-top h1{font-size:23px}
.next{background:linear-gradient(150deg,var(--ink-2),var(--ink));color:#fff;border-radius:var(--r-lg);padding:20px 22px;margin-bottom:20px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.next:after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(14,124,107,.35),transparent 70%)}
.next .lbl{font-size:12px;color:#8FA6B4;font-weight:500;letter-spacing:.04em;text-transform:uppercase;position:relative}
.next .when{font-size:34px;font-weight:720;letter-spacing:-.03em;margin:4px 0 2px;position:relative}
.next .what{font-size:14px;color:#C9D6DF;position:relative}

.rail{position:relative;padding-left:66px}
.rail:before{content:"";position:absolute;left:49px;top:10px;bottom:10px;width:2px;background:var(--line)}
.dose{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;margin-bottom:11px;box-shadow:var(--sh-sm)}
.dose .clock{position:absolute;left:-66px;top:16px;width:46px;text-align:right;font-size:12.5px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums;line-height:1.15}
.dose .clock .xs{font-weight:500;color:var(--text-3)}
.dose:after{content:"";position:absolute;left:-19px;top:20px;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--line)}
.dose.is-due{border-color:var(--amber);background:#FFFCF6;box-shadow:0 2px 10px rgba(181,115,10,.12)}
.dose.is-due:after{background:var(--amber);border-color:var(--amber)}
.dose.is-taken{opacity:.66}
.dose.is-taken:after{background:var(--teal);border-color:var(--teal)}
.dose.is-missed:after{background:var(--clay);border-color:var(--clay)}
.dose h3{font-size:15px}
.dose .meta{font-size:12.5px;color:var(--text-2);margin-top:3px}
.acts{display:flex;gap:8px;margin-top:13px}
.acts .btn{flex:1;justify-content:center;padding:9px}

.tabbar{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -1px 12px rgba(15,30,46,.05)}
.tabbar a{flex:1;padding:10px 2px 11px;text-align:center;color:var(--text-3);font-size:10px;font-weight:600}
.tabbar a svg{display:block;margin:0 auto 3px;width:22px;height:22px}
.tabbar a.on{color:var(--teal)}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dow{text-align:center;font-size:10.5px;color:var(--text-3);font-weight:500;padding-bottom:5px;text-transform:uppercase}
.cal .day{aspect-ratio:1;border-radius:9px;background:var(--canvas);display:grid;place-items:center;font-size:13px;font-weight:500;position:relative;font-variant-numeric:tabular-nums;color:var(--text)}
.cal .day.none{background:transparent;color:var(--text-3);font-weight:400}
.cal .day.full{background:var(--teal);color:#fff}
.cal .day.part{background:var(--amber-soft);color:var(--amber)}
.cal .day.bad{background:var(--clay-soft);color:var(--clay)}
.cal .day.today{box-shadow:0 0 0 2px var(--ink)}

.sheet{position:fixed;inset:0;background:rgba(15,30,46,.55);display:none;z-index:60;align-items:flex-end}
.sheet.on{display:flex}
.sheet-in{background:#fff;width:100%;max-width:540px;margin:0 auto;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:22px 20px 30px}
@media(prefers-reduced-motion:no-preference){.sheet.on .sheet-in{animation:up .2s cubic-bezier(.16,1,.3,1)}}
@keyframes up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}

@media print{.side,.top,.tabbar,.btn{display:none}.content{padding:0}body{background:#fff}}

/* ── live medicine search ─────────────────────────────── */
.medsearch{position:relative}
.ms-box{position:relative}
.ms-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.ms-input{padding-left:36px!important}
.ms-results{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--glass);backdrop-filter:var(--glass-blur);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-4);z-index:40;max-height:330px;overflow:auto;display:none;padding:6px}
.ms-results.on{display:block}
.ms-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;
  padding:9px 10px;border-radius:10px;cursor:pointer;font:inherit;transition:background var(--t-fast)}
.ms-item:hover,.ms-item.on{background:var(--peri-soft)}
.ms-item img,.ms-item .ph{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none;
  background:var(--peri-soft);display:grid;place-items:center;color:var(--peri);font-weight:500;border:1px solid var(--line-2)}
.ms-txt{min-width:0}
.ms-txt b{display:block;font-size:13.5px;font-weight:500}
.ms-txt em{font-style:normal;font-size:11.5px;color:var(--text-3)}
.ms-empty{padding:14px;font-size:13px;color:var(--text-3);text-align:center}