/* ---------- Cerebri ---------- */
@font-face{font-family:'Cerebri';src:url('assets/fonts/CerebriSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cerebri';src:url('assets/fonts/CerebriSans-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cerebri';src:url('assets/fonts/CerebriSans-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cerebri';src:url('assets/fonts/CerebriSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --blue:#4a63ee; --blue-soft:#eef0fd; --blue-soft2:#f3f4fe;
  --ink:#1f2a44; --ink2:#3a4256; --muted:#98a2b3; --muted2:#aeb4c2;
  --line:#eef0f4; --line2:#e7eaf0;
  --bg:#f7f8fa; --card:#ffffff;
  --green:#12b76a; --green-soft:#e7f8ef;
  --amber:#f5b544; --amber-soft:#fdf3df;
  --red:#f04438;
  --shadow:0 12px 30px -18px rgba(31,42,68,.18);
  --shadow-lg:0 24px 50px -28px rgba(31,42,68,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100dvh}
body{
  font-family:'Cerebri',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#e2e5ec;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#d2d6df}

/* ---------- Shell ---------- */
.app{display:flex;min-height:100dvh}

/* ---------- Sidebar ---------- */
.sidebar{
  width:246px;flex:0 0 246px;background:#fff;
  padding:26px 18px 20px;display:flex;flex-direction:column;
  border-right:1px solid var(--line);position:sticky;top:0;height:100dvh;
}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 26px}
.brand .logo{width:34px;height:34px;object-fit:contain}
.brand .cross{width:32px;height:32px;position:relative;flex:0 0 32px}
.brand b{font-size:20px;font-weight:700;color:var(--blue);letter-spacing:-.02em}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:12px;
  color:#8a93a6;font-size:14.5px;font-weight:500;text-decoration:none;
  transition:background .18s,color .18s,transform .18s;position:relative;
}
.nav a svg{width:20px;height:20px;stroke-width:1.9;flex:0 0 20px}
.nav a:hover{background:#f6f7fb;color:var(--ink2);transform:translateX(2px)}
.nav a.active{background:var(--blue-soft);color:var(--blue);font-weight:600}
.nav a.active svg{color:var(--blue)}
.nav .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  min-width:20px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav a.active .badge{background:var(--red)}
.nav-sep{flex:1;min-height:14px}
.nav-lower{display:flex;flex-direction:column;gap:3px;margin-bottom:16px}
.doc{display:flex;align-items:center;gap:11px;padding:8px;border-top:1px solid var(--line);padding-top:16px}
.doc img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.doc .nm{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.doc .rl{font-size:11.5px;color:var(--muted)}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:16px;padding:18px 26px;
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.search{flex:0 0 340px;max-width:42%;position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted2)}
.search input{
  width:100%;background:#f4f5f8;border:1px solid transparent;border-radius:11px;
  padding:11px 14px 11px 40px;font-size:14px;color:var(--ink);outline:none;transition:.18s;
}
.search input:focus{background:#fff;border-color:var(--blue-soft);box-shadow:0 0 0 4px var(--blue-soft)}
.search input::placeholder{color:var(--muted2)}
.top-actions{margin-left:auto;display:flex;gap:12px}
.ico-btn{
  width:44px;height:44px;border-radius:13px;background:#f4f5f8;display:flex;align-items:center;justify-content:center;
  position:relative;transition:.18s;color:var(--ink2)
}
.ico-btn:hover{background:#eceef4;transform:translateY(-2px)}
.ico-btn svg{width:20px;height:20px}
.ico-btn .dot{position:absolute;top:11px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--red);border:2px solid #f4f5f8}

.content{padding:22px 26px 40px;flex:1}

/* section reveal */
.reveal{opacity:0;transform:translateY(14px);animation:up .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes up{to{opacity:1;transform:none}}
.d1{animation-delay:.04s}.d2{animation-delay:.10s}.d3{animation-delay:.16s}.d4{animation-delay:.22s}.d5{animation-delay:.28s}.d6{animation-delay:.34s}

/* ---------- Overview grid ---------- */
.overview{display:grid;grid-template-columns:1fr 336px;gap:22px;align-items:start}
.ov-left{display:flex;flex-direction:column;gap:20px;min-width:0}
.filter-pill{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink2);
  background:#fff;border:1px solid var(--line2);border-radius:10px;padding:8px 14px;width:max-content}
.filter-pill svg{width:15px;height:15px;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{
  background:#fff;border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s;
}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.stat .hd{display:flex;justify-content:space-between;align-items:center;color:var(--ink2);font-weight:600;font-size:14.5px}
.stat .hd .dots{color:var(--muted2);font-size:18px;letter-spacing:1px}
.stat .big{font-size:38px;font-weight:700;letter-spacing:-.03em;margin:14px 0 12px;color:var(--ink)}
.stat .delta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.stat .delta .chip{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.stat.g .chip{background:var(--green-soft);color:var(--green)}
.stat.a .chip{background:var(--amber-soft);color:#e79a1c}
.stat .chip svg{width:11px;height:11px;stroke-width:3}
.stat .art{position:absolute;right:14px;bottom:8px;width:70px;height:70px;opacity:.9}

/* ---------- Card / table ---------- */
.card{background:#fff;border-radius:18px;box-shadow:var(--shadow)}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px}
.card-hd h3{font-size:17px;font-weight:700;color:var(--ink)}
.link{color:var(--blue);font-size:13.5px;font-weight:600;text-decoration:none;transition:.15s}
.link:hover{opacity:.7}

.tbl-wrap{overflow-x:auto;padding:0 8px 10px}
table{width:100%;border-collapse:collapse;min-width:560px}
thead th{
  text-align:left;font-size:12.5px;font-weight:600;color:#7c8698;padding:10px 14px;white-space:nowrap;
}
thead th .sort{color:#c8cdd8;font-size:10px;margin-left:5px}
tbody td{padding:14px;font-size:13.5px;color:#69707f;border-top:1px solid var(--line);white-space:nowrap}
tbody tr{transition:background .15s}
tbody tr:hover{background:#fafbfe}
tbody td.pname{color:var(--ink2);font-weight:500}
.consult{
  border:1px solid var(--line2);border-radius:9px;padding:7px 18px;font-size:13px;font-weight:600;color:var(--ink2);
  background:#fff;transition:.16s
}
.consult:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px)}

/* ---------- Upcoming schedule ---------- */
.sched{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:20px 20px 8px;position:sticky;top:98px}
.sched .card-hd{padding:0 2px 6px}
.timeline{position:relative;padding:6px 0 12px}
.slot{display:grid;grid-template-columns:52px 1fr;gap:10px;position:relative}
.slot .time{font-size:12.5px;color:var(--muted);padding-top:2px;position:relative}
.slot .time::after{content:"";position:absolute;right:-6px;top:5px;width:7px;height:7px;border-radius:50%;background:#d7dbe4}
.slot .items{border-left:1px solid var(--line);padding:0 0 16px 14px;margin-left:-6px}
.ev{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7280;padding:5px 0;position:relative}
.ev .dot{width:6px;height:6px;border-radius:50%;background:#cfd4de;flex:0 0 6px}
.ev.done{color:#b6bcc7;text-decoration:line-through}
.ev .who{color:var(--ink2);font-weight:500}
.ev.blue .who{color:var(--blue);font-weight:600}
.ev.blue .dot{background:var(--blue)}

.appt-open{
  border:1px solid var(--blue-soft);background:#fff;border-radius:14px;padding:14px 16px;margin:8px 0 4px -4px;
  box-shadow:0 14px 30px -20px rgba(74,99,238,.5);
}
.appt-open .top{display:flex;justify-content:space-between;align-items:center;color:var(--blue);font-weight:600;font-size:13.5px}
.appt-open .top svg{width:15px;height:15px}
.appt-open .row{display:flex;gap:16px;font-size:13px;margin-top:9px}
.appt-open .row span{color:var(--muted);width:56px;flex:0 0 56px}
.appt-open .row b{color:var(--ink2);font-weight:500}
.appt-open .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:12px;padding-top:11px}
.appt-open .foot .trash{color:var(--red)}
.appt-open .begin{color:var(--blue);font-weight:600;font-size:13.5px;transition:.15s}
.appt-open .begin:hover{opacity:.7}

/* ---------- Appointment detail ---------- */
.detail{display:flex;flex-direction:column;gap:16px;max-width:1080px}
.pt-row{display:grid;grid-template-columns:340px 1fr;gap:16px}
.pt-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px}
.pt-head{display:flex;gap:14px}
.pt-head .ph{width:78px;height:78px;border-radius:12px;object-fit:cover;flex:0 0 78px}
.pt-head h2{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:4px}
.pt-meta{font-size:13px;color:var(--muted);display:flex;gap:10px;margin-bottom:6px}
.pt-contact{font-size:12.5px;color:var(--blue);line-height:1.5}
.pt-last{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0;margin:14px 0 12px}
.pt-last b{color:var(--ink2);font-weight:500}
.allerg-t{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-t{background:#fdf3df;color:#a9781f;font-size:11.5px;font-weight:500;padding:6px 12px;border-radius:8px}

.vitals{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px 20px}
.vitals .card-hd{padding:0 0 16px}
.vitals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 16px}
.vital .v{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.vital .l{font-size:13px;color:var(--ink2);margin-top:3px;font-weight:500}
.vital .s{font-size:11.5px;color:var(--muted);margin-top:1px}
.edit{display:inline-flex;align-items:center;gap:5px;color:var(--blue);font-weight:600;font-size:13px}
.edit svg{width:14px;height:14px}

.acc{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.acc h3{font-size:16px;font-weight:700;color:var(--ink)}
.acc svg{width:18px;height:18px;color:var(--muted)}

.block{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:20px}
.block h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px}
.mini-search{position:relative;margin-bottom:14px}
.mini-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted2)}
.mini-search input{width:100%;background:#f7f8fa;border:1px solid var(--line2);border-radius:9px;padding:11px 12px 11px 36px;font-size:13.5px;outline:none}
.mini-search input:focus{border-color:var(--blue-soft);background:#fff}

.drow{display:grid;grid-template-columns:150px 1fr 1fr 34px;gap:12px;align-items:center;margin-bottom:12px}
.drow .nm{font-size:14px;font-weight:600;color:var(--ink2)}
.med-row{display:grid;grid-template-columns:130px repeat(3,1fr) 1.1fr 1.1fr 34px;gap:10px;align-items:center}
.fld{position:relative}
.fld select,.fld input{
  width:100%;background:#f7f8fa;border:1px solid var(--line2);border-radius:9px;
  padding:11px 12px;font-size:13px;color:var(--ink2);outline:none;appearance:none;transition:.15s
}
.fld select:focus,.fld input:focus{border-color:var(--blue-soft);background:#fff}
.fld.sel::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.6px solid #98a2b3;border-bottom:1.6px solid #98a2b3;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.fld input::placeholder{color:var(--muted2)}
.trash-btn{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--red);transition:.15s}
.trash-btn:hover{background:#fef1f0}
.trash-btn svg{width:17px;height:17px}
.add-line{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;font-size:13px;margin-top:6px}
.add-line svg{width:15px;height:15px}
.follow-fld{max-width:320px}
.review-bar{display:flex;justify-content:flex-end;padding-top:4px}
.btn-primary{background:var(--blue);color:#fff;font-weight:600;font-size:14px;padding:13px 34px;border-radius:11px;
  box-shadow:0 16px 30px -14px rgba(74,99,238,.6);transition:.18s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(74,99,238,.7)}
.btn-primary:active{transform:translateY(0)}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(30px);opacity:0;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;padding:13px 22px;border-radius:12px;
  box-shadow:var(--shadow-lg);z-index:100;transition:.32s cubic-bezier(.22,1,.36,1);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* avatars (offline, no external requests) */
.ph-avatar{display:inline-block;border-radius:50%;background:
  radial-gradient(circle at 50% 32%, #cfd6ea 0 34%, transparent 35%),
  radial-gradient(circle at 50% 108%, #cfd6ea 0 46%, transparent 47%),
  linear-gradient(135deg,#eef1f8,#e2e7f3);background-size:cover;flex:0 0 auto}
.doc-ph{width:40px;height:40px}
.pt-head .ph{border-radius:12px;background:
  radial-gradient(circle at 50% 34%, #f3d6c4 0 30%, transparent 31%),
  radial-gradient(circle at 50% 110%, #f3d6c4 0 44%, transparent 45%),
  linear-gradient(135deg,#fbe9dd,#f6dccb)}

/* mobile menu */
.menu-btn{display:none}
.scrim{display:none}

/* ---------- Responsive ---------- */
@media(max-width:1160px){
  .overview{grid-template-columns:1fr}
  .sched{position:static}
}
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .28s;box-shadow:var(--shadow-lg)}
  .app.open .sidebar{transform:none}
  .app.open .scrim{display:block;position:fixed;inset:0;background:rgba(20,26,40,.4);z-index:55}
  .menu-btn{display:flex;width:42px;height:42px;border-radius:12px;background:#f4f5f8;align-items:center;justify-content:center}
  .menu-btn svg{width:22px;height:22px}
  .search{flex:1;max-width:none}
  .stats{grid-template-columns:1fr}
  .pt-row{grid-template-columns:1fr}
  .vitals-grid{grid-template-columns:repeat(2,1fr)}
  .med-row{grid-template-columns:1fr 1fr;gap:9px}
  .drow{grid-template-columns:1fr 1fr}
  .drow .nm{grid-column:1/-1}
  .content{padding:18px 16px 40px}
  .topbar{padding:14px 16px}
}
@media(max-width:520px){
  .vitals-grid{grid-template-columns:1fr}
  .stat .big{font-size:34px}
}