:root{
  --teal:#0f766e; --teal-d:#0b5a54; --teal-l:#e6f2f0;
  --ink:#111827; --ink-2:#374151; --muted:#6b7280;
  --line:#e5e7eb; --line-2:#eef1f0; --bg:#f4f7f6; --card:#fff;
  --red:#dc2626; --red-l:#fef2f2; --green:#059669; --amber:#b45309;
  --navy:#0f2233; --navy-2:#1b3a5b;
  --ring:0 0 0 3px rgba(15,118,110,.18);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 4px 16px rgba(16,24,40,.08);
  --shadow-lg:0 20px 50px rgba(16,24,40,.18);
  --r:10px; --r-lg:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 18px}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn,.btn-primary,.btn-ghost,.btn-danger,.rowbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  padding:10px 16px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:background .15s,box-shadow .15s,border-color .15s,color .15s,transform .04s;
}
.btn:active,.btn-primary:active,.btn-ghost:active,.btn-danger:active,.rowbtn:active{transform:translateY(1px)}
.btn:disabled,.btn-primary:disabled,.btn-ghost:disabled,.btn-danger:disabled,.rowbtn:disabled{opacity:.55;cursor:default;box-shadow:none}
.btn svg,.btn-primary svg,.btn-ghost svg{width:16px;height:16px}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--teal-d);box-shadow:0 6px 16px rgba(15,118,110,.28)}
.btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover:not(:disabled){background:#f6f8f7;border-color:#cfd8d6}
.btn-danger{background:#fff;color:var(--red);border-color:#f0c9c9}
.btn-danger:hover:not(:disabled){background:var(--red-l);border-color:#e6a9a9}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn-block{width:100%}

/* ---------- Login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(120% 120% at 50% 0%,#12897f 0%,#0b5a54 55%,#083f3a 100%);padding:20px}
.login-card{background:#fff;padding:36px 32px;border-radius:18px;width:min(392px,100%);box-shadow:var(--shadow-lg)}
.login-card .brand{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--teal);font-weight:700}
.login-logo{display:block;max-width:210px;max-height:76px;margin:0 auto 10px;object-fit:contain}
.login-card h1{margin:.4em 0 1.1em;font-size:22px;text-align:center;letter-spacing:-.01em}
.login-card label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:15px}
.login-card input{width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px}
.login-card input:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
.login-card button{width:100%;padding:13px;background:var(--teal);color:#fff;border:0;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}
.login-card button:hover{background:var(--teal-d)}
.login-card button:disabled{opacity:.6;cursor:default}
.login-card .err{color:var(--red);font-size:14px;margin:12px 0 0;text-align:center}
.login-card .foot{color:var(--muted);font-size:12px;text-align:center;margin:18px 0 0}

/* ---------- Shell / sidebar ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:246px;flex:0 0 246px;background:var(--navy);color:#c3d1e0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:45}
.logo{display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.08);padding:22px 20px}
.logo-img{display:block;width:100%;max-width:190px;object-fit:contain;filter:brightness(0) invert(1)}
.side-nav{padding:16px 12px 6px;display:flex;flex-direction:column;gap:3px}
.side-group{padding:6px 12px 8px;margin-top:8px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:3px}
.side-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#7f93aa;padding:10px 12px 6px}
.side-group-title.toggle{background:none;border:0;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:700}
.side-group-title.toggle:hover{color:#c3d1e0}
.side-group-title .caret{transition:transform .18s;font-size:11px}
.side-group-title[aria-expanded="false"] .caret{transform:rotate(-90deg)}
.side-link{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;color:#c3d1e0;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.side-link .ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:.85}
.side-link .ic svg{width:18px;height:18px}
.side-link:hover{background:rgba(255,255,255,.07);color:#fff}
.side-link.active{background:var(--teal);color:#fff;box-shadow:0 2px 10px rgba(15,118,110,.4)}
.side-foot{margin-top:auto;padding:14px 14px 18px;border-top:1px solid rgba(255,255,255,.08)}
.side-me{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.side-me .avatar{width:36px;height:36px;flex:0 0 36px;font-size:14px}
.side-me .who-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.side-me .who-sub{font-size:11px;color:#8ea3ba}
.side-signout{background:rgba(255,255,255,.08);border:0;color:#fff;padding:10px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:background .15s}
.side-signout:hover{background:rgba(255,255,255,.16)}

/* Topbar (mobile only) */
.topbar{display:none;align-items:center;gap:12px;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);padding:12px 16px}
.hamburger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;color:var(--ink);padding:0}
.hamburger svg{width:20px;height:20px}
.topbar-title{font-weight:800;font-size:15px;letter-spacing:-.01em}
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:44;border:0}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.main-inner{padding:30px 34px 64px;max-width:1000px;width:100%}
.view-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.view-head h2{margin:0}
.head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.field{padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;background:#fff;color:var(--ink)}
.field:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
#patientSearch{padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;min-width:220px;background:#fff}
#patientSearch:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
#stageFilter{padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;background:#fff;color:var(--ink);cursor:pointer}
#stageFilter:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}

/* Segmented tabs (Active / Deleted on the Patients page) */
.seg{display:inline-flex;gap:3px;padding:4px;margin-top:16px;background:#eef2f1;border:1px solid var(--line);border-radius:11px}
.seg-btn{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;padding:7px 16px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.seg-btn:hover{color:var(--ink-2)}
.seg-btn.active{background:#fff;color:var(--teal);box-shadow:var(--shadow-sm)}

/* Panels */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-top:18px;box-shadow:var(--shadow-sm)}
.panel-head{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:14px}
.panel .grid{margin-top:0;border:0;box-shadow:none}
.chart{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:8px}
.chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.chart .bar-stack{width:100%;max-width:26px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.chart .bar{width:100%;background:#cfe6e2;border-radius:5px 5px 0 0;min-height:2px;transition:height .3s}
.chart .bar.done{background:var(--teal)}
.chart .bar-day{font-size:10px;color:var(--muted);white-space:nowrap}
.chart .bar-val{font-size:11px;font-weight:700;color:var(--teal);height:14px}
.chart-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--muted)}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
.stat{position:relative;display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .15s,transform .08s,border-color .15s}
.stat:hover{box-shadow:var(--shadow);border-color:#d9e2e0;transform:translateY(-1px)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stat-accent,var(--teal))}
.stat .num{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.05}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:600}
.stat-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--stat-tint,var(--teal-l));color:var(--stat-accent,var(--teal))}
.stat-ic svg{width:22px;height:22px}
.stat-invites{--stat-accent:#0f766e;--stat-tint:#e6f2f0}
.stat-pending{--stat-accent:#b45309;--stat-tint:#fef3c7}
.stat-completed{--stat-accent:#059669;--stat-tint:#d1fae5}
.stat-submissions{--stat-accent:#4338ca;--stat-tint:#e0e7ff}

/* Completion progress bar */
.prog-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;margin-top:14px;box-shadow:var(--shadow-sm)}
.prog-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.prog-title{font-size:13px;font-weight:700;color:var(--ink-2)}
.prog-figure{font-size:13px;color:var(--muted)}
.prog-figure b{color:var(--ink);font-weight:800}
.prog-pct{display:inline-block;margin-left:8px;font-weight:800;color:var(--teal)}
.prog-track{height:10px;border-radius:999px;background:#eef2f1;overflow:hidden}
.prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#12897f,var(--teal));transition:width .5s ease}

/* Pipeline stepper (patient drawer) */
.stepper{--edge:10%;position:relative;margin:20px 0 8px;padding:0 4px}
.stepper-track{position:absolute;top:12px;left:var(--edge);right:var(--edge);height:6px;border-radius:999px;background:#e8edeb;box-shadow:inset 0 1px 2px rgba(16,24,40,.07);overflow:hidden}
.stepper-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#12897f,var(--teal));box-shadow:0 0 10px rgba(15,118,110,.45);transition:width .9s cubic-bezier(.22,1,.36,1)}
.stepper-steps{position:relative;display:flex;justify-content:space-between}
.stepper-steps .step{display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;min-width:0;opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
.stepper.reveal .step{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .09s)}
.step-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #d5dcda;color:var(--muted);font-size:12px;font-weight:800;box-shadow:0 1px 3px rgba(16,24,40,.1);transition:background .3s,border-color .3s,color .3s,transform .3s}
.step-dot svg{width:15px;height:15px}
.step-lbl{font-size:11.5px;font-weight:700;color:var(--muted);text-align:center;letter-spacing:.1px;line-height:1.2}
.step-done .step-dot{background:var(--teal);border-color:var(--teal);color:#fff}
.step-done .step-lbl{color:var(--ink-2)}
.step-current .step-dot{background:#fff;border-color:var(--teal);color:var(--teal);transform:scale(1.12);animation:stepPulse 1.9s ease-out infinite}
.step-current .step-lbl{color:var(--teal);font-weight:800}
@keyframes stepPulse{0%{box-shadow:0 0 0 0 rgba(15,118,110,.4)}70%{box-shadow:0 0 0 9px rgba(15,118,110,0)}100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}}
.stepper-lost{--edge:8.33%}
.stepper-lost .stepper-fill{background:linear-gradient(90deg,#ef4444,var(--red))}
.stepper-lost .step-lost .step-dot{background:var(--red);border-color:var(--red);color:#fff;font-size:16px;animation:none;transform:none}
.stepper-lost .step-lost .step-lbl{color:var(--red);font-weight:800}
.stepper-lost .muted-step .step-dot{opacity:.45}

/* Name cell avatar (patient tables) */
.name-cell{display:flex;align-items:center;gap:11px}
.avatar.sm{width:34px;height:34px;font-size:12.5px;flex:0 0 34px}

/* ---- Drawer: hero + grouped info cards ---- */
.drawer-hero{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.drawer-hero .avatar.lg{width:60px;height:60px;font-size:22px;flex:0 0 60px}
.drawer-hero-meta h2{margin:0 0 6px}
.hero-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:22px;box-shadow:var(--shadow-sm);overflow:hidden;--acc:var(--teal);--acc-l:var(--teal-l)}
.info-card>:not(.info-card-head){padding-left:20px;padding-right:20px}
.info-card>.info-card-head+*{margin-top:16px}
.info-card>:not(.info-card-head)+:not(.info-card-head){margin-top:13px}
.info-card>.info-card-body{padding:0 20px 20px;margin-top:16px}
.info-card>:last-child:not(.info-card-head){padding-bottom:20px}
.info-card>.info-card-body:last-child{padding-bottom:20px}
/* Header bar: big, bold, tinted, clickable to collapse */
.info-card-head{display:flex;align-items:center;gap:12px;margin:0;padding:15px 18px;background:var(--acc-l);border-bottom:1px solid var(--line);cursor:pointer;user-select:none;position:relative}
.info-card-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.info-card-head h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);flex:1}
.info-card-head::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);transform:rotate(45deg);transition:transform .2s;margin-right:4px;opacity:.75}
.info-card.collapsed .info-card-head{border-bottom-color:transparent}
.info-card.collapsed .info-card-head::after{transform:rotate(-45deg)}
.info-card.collapsed>:not(.info-card-head){display:none !important}
.ic-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--acc);box-shadow:var(--shadow-sm)}
.ic-badge svg{width:18px;height:18px}
/* Per-section accent colors */
.acc-blue{--acc:#1d4ed8;--acc-l:#eff4ff}
.acc-violet{--acc:#6d28d9;--acc-l:#f4f0fe}
.acc-amber{--acc:#b45309;--acc-l:#fef6e7}
.acc-green{--acc:#047857;--acc-l:#e7f6ef}
.acc-rose{--acc:#be1250;--acc-l:#fdeef3}
.acc-teal{--acc:var(--teal);--acc-l:var(--teal-l)}
/* Treatment plan = primary, extra emphasis */
.info-card.plan-card-emph{border-color:var(--teal);box-shadow:0 4px 18px rgba(15,118,110,.12)}
.stepper-card .info-card-head{margin:0}

/* Key/value rows inside cards */
.kv-grid{display:grid;grid-template-columns:1fr;gap:0}
.kv{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;padding:9px 0;border-top:1px solid var(--line-2)}
.kv:first-child{border-top:0;padding-top:2px}
.kv-k{font-size:13px;color:var(--muted);font-weight:600}
.kv-v{font-size:14px;color:var(--ink);font-weight:600;word-break:break-word}
.kv-empty{color:#c0c7c5;font-weight:500}
.kv-wide{grid-template-columns:150px 1fr}

/* Reason chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--teal-d);background:var(--teal-l);border:1px solid #cde5e1}

/* Priority meters */
.pri-list{display:flex;flex-direction:column;gap:14px}
.pri{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:12px}
.pri-label{font-size:13px;color:var(--ink-2);font-weight:600}
.pri-track{display:flex;gap:5px}
.pri-seg{flex:1;height:9px;border-radius:4px;background:#eaf0ee;transition:background .3s}
.pri-seg.on{background:linear-gradient(90deg,#12897f,var(--teal))}
.pri-num{font-size:12px;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
@media(max-width:640px){
  .kv{grid-template-columns:1fr;gap:2px}
  .pri{grid-template-columns:1fr auto;gap:8px}
  .pri-label{grid-column:1 / -1}
}

/* Table */
.grid{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:16px;box-shadow:var(--shadow-sm)}
.grid th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:13px 16px;background:linear-gradient(#fbfcfc,#f5f7f6);border-bottom:1px solid var(--line);font-weight:800}
.grid td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:14px;vertical-align:middle}
.grid tr:last-child td{border-bottom:0}
.grid tbody tr{transition:background .12s}
.grid tbody tr:hover td{background:#f6fbfa}
.grid .num-cell{font-variant-numeric:tabular-nums;color:var(--muted)}
.grid td[data-label="Invited"],.grid td[data-label="Added"]{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}

/* Pills */
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;text-transform:capitalize}
.pill.pending{background:#fef3c7;color:var(--amber)}
.pill.completed{background:#d1fae5;color:var(--green)}
.pill.stage-new{background:#e6edf4;color:var(--navy-2)}
.pill.stage-reviewed{background:#dbeafe;color:#1d4ed8}
.pill.stage-contacted{background:#fef3c7;color:var(--amber)}
.pill.stage-scheduled{background:#e0e7ff;color:#4338ca}
.pill.stage-won{background:#d1fae5;color:var(--green)}
.pill.stage-lost{background:#fee2e2;color:var(--red)}
.pill.src-walkup{background:#fef3c7;color:var(--amber);font-size:11px;padding:1px 7px;vertical-align:middle}
.pill.portal-unread{background:#ef4444;color:#fff;font-size:11px;font-weight:700;padding:1px 8px;vertical-align:middle;box-shadow:0 1px 3px rgba(239,68,68,.35)}
.pill.portal-active{background:#e6f4f1;color:#2f7772;font-size:11px;font-weight:600;padding:1px 7px;vertical-align:middle}
.case-id{display:inline-block;margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#0f766e;}
.pill.case-pill{background:#0f2545;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.05em}

/* Row action buttons */
.rowbtn{background:var(--teal);color:#fff;padding:7px 14px;font-size:13px;border-radius:8px}
.rowbtn:hover:not(:disabled){background:var(--teal-d)}
.rowbtn svg{width:15px;height:15px}
.rowbtn.ghost{background:#eef2f1;color:var(--teal);border-color:transparent}
.rowbtn.ghost:hover:not(:disabled){background:#e2eae8}
.row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--ink-2);transition:background .12s,border-color .12s,color .12s}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:#f6f8f7;border-color:#cfd8d6}
.icon-btn.danger:hover{background:var(--red-l);border-color:#e6a9a9;color:var(--red)}

/* Avatars */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--teal-l);color:var(--teal);font-weight:700;font-size:15px;overflow:hidden;flex:0 0 auto;text-transform:uppercase;border:1px solid rgba(15,118,110,.15)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.lg{width:84px;height:84px;font-size:30px}
.user-cell{display:flex;align-items:center;gap:12px}
.user-cell .u-name{font-weight:700}
.user-cell .u-sub{font-size:12px;color:var(--muted)}
.you-tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--teal);background:var(--teal-l);padding:2px 7px;border-radius:6px;vertical-align:middle}

/* Drawer stage + notes */
.stage-row{display:flex;align-items:center;gap:12px;margin:16px 0 4px;flex-wrap:wrap}
.stage-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);display:flex;align-items:center;gap:8px}
.stage-label select{margin-left:2px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-weight:600;color:var(--ink);background:#fff;text-transform:none;letter-spacing:0;cursor:pointer}
.stage-label select:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
.stage-saved{font-size:13px;font-weight:600;color:var(--green)}
.notes-box{width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;font-family:inherit;resize:vertical;min-height:80px}
.notes-box:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}

/* Discussion thread (patient drawer) */
.note-compose{margin-bottom:6px}
.note-feed{display:flex;flex-direction:column;gap:0;margin-top:8px}
.note-count{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:10px 0 6px;border-top:1px solid var(--line);margin-top:6px}
.note-empty{font-size:13.5px;color:var(--muted);padding:16px 0 4px;border-top:1px solid var(--line);margin-top:6px}
.note-item{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line-2)}
.note-item:first-of-type{border-top:0}
.note-avatar{margin-top:1px}
.note-main{flex:1;min-width:0}
.note-meta{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.note-author{font-size:13.5px;font-weight:800;color:var(--ink)}
.note-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.note-del{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:transparent;color:#b6bebc;border-radius:7px;cursor:pointer;transition:background .12s,color .12s}
.note-del svg{width:15px;height:15px}
.note-del:hover{background:var(--red-l);color:var(--red)}
.note-text{font-size:14px;color:var(--ink-2);line-height:1.55;word-break:break-word;white-space:normal}

/* Forms */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;max-width:580px;margin-top:8px;box-shadow:var(--shadow-sm)}
.form-card label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:15px}
.form-card label.check{display:flex;align-items:center;gap:8px;font-weight:600}
.form-card label.check input{width:auto;margin:0}
.form-card input,.form-card select{width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:15px;background:#fff}
.form-card input:focus,.form-card select:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn-row{display:flex;gap:10px;align-items:center;margin-top:4px;flex-wrap:wrap}
.form-card button{padding:11px 18px;background:var(--teal);color:#fff;border:0;border-radius:var(--r);font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,box-shadow .15s}
.form-card button:hover:not(:disabled){background:var(--teal-d);box-shadow:0 6px 16px rgba(15,118,110,.24)}
.form-card button.btn-ghost{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.form-card button.btn-ghost:hover:not(:disabled){background:#f6f8f7;box-shadow:none;border-color:#cfd8d6}
.form-card button:disabled{opacity:.55}
.hint{font-size:13px;color:var(--muted);margin:2px 0 0;line-height:1.5}
.result-ok{margin-top:16px;padding:14px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:var(--r);font-size:14px}
.result-warn{margin-top:16px;padding:14px;background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r);font-size:14px;color:var(--amber)}
.result-err{margin-top:16px;padding:14px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--r);font-size:14px;color:var(--red)}
.linkbox{margin-top:8px;font-family:ui-monospace,Menlo,monospace;font-size:13px;background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:9px 10px;word-break:break-all}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:22px 0 8px;border-top:1px solid var(--line);padding-top:16px}

/* Warning banner */
.warn{margin-top:16px;padding:12px 16px;background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r);font-size:14px;color:var(--amber)}

/* Drawer */
.drawer{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;justify-content:flex-end;z-index:50}
.drawer-panel{background:#fff;width:min(560px,100vw);height:100%;overflow-y:auto;padding:28px 28px 64px;position:relative;box-shadow:var(--shadow-lg);animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
#patRefresh.spinning .ic-refresh{animation:spin .7s linear infinite}
.drawer-close{position:absolute;top:16px;right:18px;background:#f3f4f6;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.drawer-close:hover{background:#e5e7eb;color:var(--ink)}
.drawer-panel h2{margin-bottom:10px}
.dl{display:grid;grid-template-columns:140px 1fr;gap:8px 12px;font-size:14px;margin:14px 0}
.dl dt{color:var(--muted)}
.dl dd{margin:0}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.thumb-fig{margin:0;display:flex;flex-direction:column;gap:6px}
.photos button.thumb{display:block;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:1;background:#f1f5f4;cursor:zoom-in;position:relative}
.photos button.thumb:hover{border-color:var(--teal);box-shadow:0 0 0 2px rgba(15,118,110,.2)}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-cap{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.2;text-align:center;justify-content:center}
.thumb-cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:55;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:#fff;width:min(468px,100%);border-radius:16px;padding:26px 26px 24px;box-shadow:var(--shadow-lg);max-height:92vh;overflow-y:auto;position:relative;animation:popIn .18s ease}
@keyframes popIn{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
.modal-card h3{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.modal-card .sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.modal-close{position:absolute;top:16px;right:16px;background:#f3f4f6;border:0;width:32px;height:32px;border-radius:50%;font-size:20px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:#e5e7eb;color:var(--ink)}
.modal-card label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.modal-card input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:15px}
.modal-card input:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.modal-err{color:var(--red);font-size:13px;margin-top:12px;min-height:1em}

/* Photo picker in the user modal */
.photo-picker{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.photo-picker .avatar.lg{cursor:pointer}
.photo-picker .pp-actions{display:flex;flex-direction:column;gap:6px}
.photo-picker .pp-hint{font-size:12px;color:var(--muted)}
.link-btn{background:none;border:0;color:var(--teal);font-weight:600;font-size:13px;cursor:pointer;padding:0;text-align:left}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--red)}

/* Password method chooser (create-user modal) */
.pw-method{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 6px;margin-bottom:14px}
.pw-method legend{font-size:13px;font-weight:600;color:var(--ink-2);padding:0 4px}
.pw-method .radio{display:flex;align-items:center;gap:9px;font-weight:500;font-size:14px;color:var(--ink);margin-bottom:8px;cursor:pointer}
.pw-method .radio input{width:auto;margin:0;accent-color:var(--teal)}

/* Alternate action under the change-password form */
.pw-alt{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.pw-alt .pw-alt-or{display:block;font-size:12px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.pw-alt .btn-ghost{width:100%}
.pw-alt-note{font-size:13px;color:var(--muted);margin:10px 0 0}
.pw-alt-note.err{color:var(--red)}

/* Toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;max-width:min(440px,92vw);padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;background:var(--ink);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-ok{background:var(--teal)}
.toast-err{background:var(--red)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(6,12,20,.93);z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.lb-stage{max-width:92vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:12px}
#lbImg{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 10px 60px rgba(0,0,0,.6);background:#000}
.lb-bar{display:flex;align-items:center;gap:16px;color:#e5e7eb;font-size:14px;flex-wrap:wrap;justify-content:center}
.lb-label{font-weight:700;color:#fff;background:rgba(255,255,255,.12);padding:4px 12px;border-radius:999px;letter-spacing:.2px}
.lb-count{font-weight:600;letter-spacing:.5px;color:#9fb4b0}
.lb-full{color:#7fd1c8;text-decoration:none;font-weight:600}
.lb-full:hover{text-decoration:underline}
.lb-close{position:absolute;top:16px;right:22px;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:30px;line-height:1;width:46px;height:46px;border-radius:50%;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:0;color:#fff;font-size:40px;line-height:1;width:56px;height:76px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:20px}
.lb-next{right:20px}
@media(max-width:640px){.lb-nav{width:44px;height:60px;font-size:30px}.lb-prev{left:6px}.lb-next{right:6px}}

/* ---------- Responsive: off-canvas sidebar ---------- */
@media(max-width:900px){
  .topbar{display:flex}
  .sidebar{position:fixed;top:0;left:0;height:100dvh;width:min(280px,82vw);flex:none;transform:translateX(-100%);transition:transform .24s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .main-inner{padding:20px 18px 56px}
  .row2{grid-template-columns:1fr}
  .dl{grid-template-columns:120px 1fr}
  .drawer-panel{padding:24px 20px 56px}
}
@media(min-width:901px){
  .scrim{display:none !important}
  /* Roomier patient detail drawer on desktop so answers don't wrap so tightly. */
  .drawer-panel{width:min(920px,80vw);padding:32px 40px 72px}
  .drawer-panel .dl{grid-template-columns:200px 1fr}
}
@media(max-width:640px){
  .head-actions{width:100%}
  .head-actions .btn-primary{flex:1 1 auto}
  #patientSearch,#stageFilter{flex:1 1 100%;min-width:0}
  /* Data tables reflow into stacked cards (no clipped columns) */
  .grid{border:0;background:transparent;box-shadow:none;border-radius:0;margin-top:14px}
  .grid thead{display:none}
  .grid tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden}
  .grid tbody tr:hover td{background:transparent}
  .grid td{display:flex;justify-content:space-between;align-items:center;gap:16px;border:0;border-bottom:1px solid var(--line-2);padding:12px 16px;text-align:right;font-size:14px}
  .grid td:last-child{border-bottom:0}
  .grid td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;text-align:left;white-space:nowrap}
  .grid td[data-label=""]::before,.grid td:not([data-label])::before{content:none}
  .grid td[data-label=""]{justify-content:flex-end}
  .grid td.user-td{justify-content:flex-start;text-align:left;background:#fafbfb;border-bottom:1px solid var(--line)}
  .grid td[colspan]{justify-content:center;text-align:center}
  .grid td[colspan]::before{content:none}
  .row-actions{justify-content:flex-end}
}

/* ---- System Status page ---- */
.status-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.status-refresh{display:inline-flex;align-items:center;gap:7px;}
.status-refresh svg{width:15px;height:15px;}

.status-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid #e1e8e7;border-radius:14px;padding:18px 22px;margin-bottom:18px;background:#fff;
  box-shadow:0 1px 2px rgba(15,37,69,.05),0 12px 30px rgba(15,37,69,.06);}
.status-banner--loading{color:#64748b;font-size:14px;justify-content:flex-start;}
.status-banner .sb-left{display:flex;align-items:center;gap:16px;min-width:0;}
.sb-ring{width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;}
.sb-ring svg{width:26px;height:26px;}
.status-banner--ok .sb-ring{background:#eaf7ef;color:#16a34a;}
.status-banner--warn .sb-ring{background:#fdf4e3;color:#c9820b;}
.status-banner--error .sb-ring{background:#fdeceb;color:#dc2626;}
.status-banner--ok{border-left:5px solid #16a34a;}
.status-banner--warn{border-left:5px solid #c9820b;}
.status-banner--error{border-left:5px solid #dc2626;}
.sb-title{font-size:19px;font-weight:800;color:#0f2545;letter-spacing:-.01em;}
.sb-sub{font-size:12.5px;color:#64748b;margin-top:3px;}
.sb-pills{display:flex;flex-wrap:wrap;gap:7px;}
.sb-pill{font-size:11.5px;font-weight:600;color:#475569;background:#f1f5f9;border-radius:20px;padding:5px 11px;white-space:nowrap;}

.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-bottom:26px;}
.status-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e6ebef;border-radius:13px;padding:16px 18px;
  transition:transform .16s ease,box-shadow .16s ease;box-shadow:0 1px 2px rgba(15,37,69,.04);}
.status-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,37,69,.10);}
.sc-ic{width:44px;height:44px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;}
.sc-ic svg{width:22px;height:22px;}
.sc-body{flex:1;min-width:0;}
.sc-name{font-weight:700;color:#0f2545;font-size:15px;}
.sc-detail{color:#64748b;font-size:12.5px;margin-top:2px;word-break:break-word;line-height:1.4;}
.sc-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:20px;padding:5px 11px;flex:0 0 auto;white-space:nowrap;}
.sc-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.6);}

.status-logs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.status-logs-title{font-size:14px;font-weight:800;color:#0f2545;text-transform:uppercase;letter-spacing:.06em;}
.status-log-filter{max-width:180px;}
.status-logs{background:#0d1420;border:1px solid #1c2836;border-radius:13px;padding:8px 4px;max-height:460px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;box-shadow:inset 0 2px 10px rgba(0,0,0,.25);}
.log-row{display:flex;gap:12px;padding:6px 14px;border-bottom:1px solid rgba(255,255,255,.05);}
.log-row:hover{background:rgba(255,255,255,.03);}
.log-time{color:#5b6b7d;flex:0 0 auto;}
.log-lvl{font-weight:800;flex:0 0 46px;letter-spacing:.03em;}
.log-tag{color:#4fd1c5;flex:0 0 auto;font-weight:600;}
.log-msg{color:#cdd6e0;word-break:break-word;flex:1;}
.log-extra{color:#6b7a8d;}
@media(max-width:560px){.status-banner{padding:16px;}.sb-title{font-size:17px;}.log-row{flex-wrap:wrap;gap:4px 10px;}}

/* ---- Patient chat + documents (drawer) ---- */
.pmsg-thread{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:2px;}
.pmsg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;word-break:break-word;}
.pmsg-who{display:block;font-size:10.5px;font-weight:700;opacity:.65;margin-bottom:2px;}
.pmsg-when{display:block;font-size:10px;opacity:.5;margin-top:4px;}
.pmsg-patient{align-self:flex-start;background:#f1f5f9;color:#1f2d3d;border-bottom-left-radius:4px;}
.pmsg-staff{align-self:flex-end;background:#0f766e;color:#fff;border-bottom-right-radius:4px;}
.pdoc-ul{list-style:none;margin:0;padding:0;}
.pdoc-ul li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e6ebef;border-radius:8px;margin-bottom:6px;font-size:13px;}
.pdoc-name{font-weight:600;color:#1f2d3d;}
.pdoc-by{font-size:11px;color:#8794a0;text-transform:capitalize;}
.pdoc-ul a{margin-left:auto;color:#0f766e;font-weight:600;text-decoration:none;font-size:12.5px;}
/* Inline document previews (image thumbnails + expandable PDF) */
.pdoc-card{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;padding:12px;border:1px solid #e6ebef;border-radius:10px;margin-bottom:10px;background:#fff;}
.pdoc-thumb{flex:0 0 auto;width:96px;height:96px;border-radius:8px;overflow:hidden;border:1px solid #e6ebef;background:#f6f9fa;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.pdoc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pdoc-thumb-file{font-size:12px;font-weight:800;letter-spacing:.08em;color:#0f766e;background:#e6f4f1;}
.pdoc-meta{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px;}
.pdoc-meta .pdoc-name{font-size:14px;word-break:break-word;}
.pdoc-actions{display:flex;align-items:center;gap:14px;margin-top:6px;}
.pdoc-drive{color:#0f766e;font-weight:600;text-decoration:none;font-size:12.5px;}
.pdoc-pdf{flex:1 1 100%;width:100%;height:480px;border:1px solid #e6ebef;border-radius:8px;margin-top:4px;background:#fff;}
/* ---- Document requests (drawer) ---- */
.docreq{margin:12px 0 4px;}
.docreq-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.docreq-select{flex:0 0 auto;padding:9px 12px;border:1px solid #d7dee4;border-radius:9px;background:#fff;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;}
.docreq-note{flex:1 1 220px;min-width:180px;padding:9px 12px;border:1px solid #d7dee4;border-radius:9px;font:inherit;font-size:13.5px;}
.docreq-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e6ebef;border-radius:10px;margin-top:8px;background:#fcfdfe;}
.docreq-item-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.docreq-type{font-size:14px;font-weight:700;color:var(--ink);}
.docreq-itemnote{font-size:13px;color:var(--muted);word-break:break-word;}
.docreq-when{font-size:12px;color:var(--muted);}
.docreq-item-side{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.pdoc-sep{margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
/* ---- Treatment plan link (drawer) ---- */
.planlink-current{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 13px;border:1px solid #cde7e0;background:#eefaf6;border-radius:10px;margin-bottom:14px;}
.planlink-open{font-weight:700;color:#0f766e;text-decoration:none;font-size:14px;}
.planlink-meta{font-size:12px;color:var(--muted);}
.planlink-form{display:flex;flex-direction:column;gap:6px;}
.planlink-lbl{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:4px;}
.planlink-input{padding:10px 12px;border:1px solid #d7dee4;border-radius:9px;font:inherit;font-size:13.5px;width:100%;}
.planlink-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin:8px 0 2px;cursor:pointer;}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;background:#dc2626;color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:1px 7px;min-width:20px;}

/* ---- Treatment plan editor (drawer) ---- */
.plan-none{padding:4px 0}
.plan-state{margin-bottom:10px}
.plan-badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.02em;vertical-align:middle}
.plan-badge.draft{background:#f3f4f6;color:#4b5563}
.plan-badge.published{background:#fef3c7;color:#92400e}
.plan-badge.accepted{background:#d1fae5;color:#065f46}
.plan-badge.superseded{background:#eef1f0;color:#9ca3af}
.plan-banner{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.plan-accepted{background:var(--teal-l);border:1px solid #a7f3d0;color:#065f46;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.plan-pending{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.plan-form{display:flex;flex-direction:column;gap:11px;margin:4px 0 14px}
.pf-group{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--line);padding-bottom:5px;margin-top:8px}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pf{display:flex;flex-direction:column;gap:4px}
.pf-wide{grid-column:1/-1}
.pf-k{font-size:12px;font-weight:600;color:var(--ink-2)}
.pf input,.pf select,.pf textarea,.plan-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13.5px;font-family:inherit;color:var(--ink);background:#fff}
.pf input:focus,.pf select:focus,.pf textarea:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
.plan-form>textarea,.plan-form .pf-wide textarea{resize:vertical}
.pf-money{position:relative;display:flex;align-items:center}
.pf-money::before{content:"$";position:absolute;left:10px;color:var(--muted);font-size:13.5px}
.pf-money input{padding-left:20px}
.pf-chks{display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:2px}
.pf-chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer}
.pf-chk input{width:15px;height:15px;accent-color:var(--teal)}
.pf-inc{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:2px}
.pf-portion{background:var(--teal-l);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--ink-2)}
.pf-portion b{color:var(--teal);font-size:15px}
.pf-portion-note{color:var(--muted);font-size:11.5px}
.pf-recon{font-size:12.5px;line-height:1.5;min-height:0}
.pf-recon .ok{color:#065f46}
.pf-recon .warn{color:var(--amber)}
.plan-actions{flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.plan-publish{background:var(--teal);color:#fff;border:none;padding:7px 14px;font-size:13px;border-radius:8px;font-weight:600;cursor:pointer}
.plan-publish:hover{background:var(--teal-d)}
.rowbtn.danger{background:var(--red-l);color:var(--red)}
.rowbtn.danger:hover:not(:disabled){background:#fde2e2}
.plan-sum{margin:2px 0 14px}
.plan-sum-note{margin-top:12px;font-size:13px;color:var(--ink-2);background:#f9fafb;border-left:3px solid var(--teal);border-radius:0 8px 8px 0;padding:10px 12px;line-height:1.55}
.plan-hist{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.plan-hist summary{font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.plan-hist-row{font-size:12.5px;padding:6px 0;color:var(--ink-2)}
.stage-saved.err{color:var(--red)}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr}}

/* ---- Access & Roles ---- */
.role-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:20px;vertical-align:middle;text-transform:uppercase}
.role-superadmin{background:#0f2545;color:#fff}
.role-admin{background:#e0e7ff;color:#4338ca}
.role-manager{background:#dbeafe;color:#1d4ed8}
.role-frontdesk{background:#fef6e7;color:#b45309}
.role-custom{background:#eef1f0;color:#4b5563}
/* permission grid (used in the user modal + access page) */
.perm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.perm-sec{border:1px solid var(--line);border-radius:12px;overflow:hidden;--acc:var(--teal);--acc-l:var(--teal-l)}
.perm-sec.acc-blue{--acc:#1d4ed8;--acc-l:#eff4ff}
.perm-sec.acc-amber{--acc:#b45309;--acc-l:#fef6e7}
.perm-sec.acc-teal{--acc:var(--teal);--acc-l:var(--teal-l)}
.perm-sec-h{background:var(--acc-l);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--line);border-left:4px solid var(--acc)}
.perm-row{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:13px;color:var(--ink-2);cursor:pointer;border-top:1px solid var(--line-2)}
.perm-row:first-of-type{border-top:0}
.perm-row input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--acc);cursor:pointer}
.perm-row input:disabled{cursor:not-allowed}
.perm-name{line-height:1.3}
/* user modal access block */
.u-access-block{border:1px solid var(--line);border-radius:12px;padding:14px;margin:4px 0 6px;background:var(--bg)}
.u-access-block.is-locked{opacity:.75}
.u-role-label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;margin-bottom:6px}
.u-role-label select,.ac-role-l select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff}
.u-access-hint{font-size:12px;color:var(--muted);margin-bottom:6px}
/* access page cards */
.access-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.access-card.locked{background:var(--bg)}
.access-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.access-who{flex:1;min-width:140px;display:flex;flex-direction:column;line-height:1.3}
.access-who b{font-size:15px}
.access-who span{font-size:12.5px;color:var(--muted)}
.ac-role-l{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.lock-note{font-size:12.5px;color:var(--muted);font-weight:600}
.stage-saved.err,.ac-saved.err{color:var(--red)}
@media (max-width:820px){.perm-grid{grid-template-columns:1fr}}

/* Role indicator: colour dot only (no word). Dark green = Superadmin. */
.role-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-left:6px;background:#9ca3af;box-shadow:0 0 0 2px rgba(0,0,0,.04)}
.role-dot.role-superadmin{background:#0b5a54}
.role-dot.role-admin{background:#4338ca}
.role-dot.role-manager{background:#1d4ed8}
.role-dot.role-frontdesk{background:#b45309}
.role-dot.role-custom{background:#6b7280}

/* User department + job title */
.u-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.u-two label{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.u-two select{width:100%;margin-top:6px;padding:10px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;background:#fff;font-family:inherit;color:var(--ink)}
.u-two select:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
.u-pos{font-weight:700;color:var(--ink-2)}
.u-dep{color:var(--muted)}
@media (max-width:560px){.u-two{grid-template-columns:1fr}}

/* ---- Team Chat ---- */
.tc-wrap{display:grid;grid-template-columns:290px 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:70vh;min-height:440px;background:#fff;box-shadow:var(--shadow-sm);margin-top:16px}
.tc-list{border-right:1px solid var(--line);overflow-y:auto;background:#fafbfb}
.tc-list-empty,.tc-thread-empty{padding:24px 18px;color:var(--muted);font-size:13.5px;text-align:center;line-height:1.6}
.tc-convo{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:11px 13px;cursor:pointer;transition:background .12s}
.tc-convo:hover{background:#f1f5f4}
.tc-convo.active{background:var(--teal-l)}
.tc-convo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tc-convo-title{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-convo-snip{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-unread{flex:0 0 auto;background:var(--teal);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.tc-group-av{background:var(--navy);color:#fff;font-weight:800}
.tc-group-av.channel{background:#4338ca;font-size:16px}
.tc-group-av svg{width:16px;height:16px}
.tc-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.tc-empty{margin:auto;color:var(--muted);font-size:14px;padding:24px;text-align:center}
.tc-head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.tc-head-meta{display:flex;flex-direction:column;line-height:1.3}
.tc-head-meta b{font-size:15px}
.tc-head-meta span{font-size:12px;color:var(--muted)}
.tc-thread{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;background:var(--bg)}
.tc-msg{display:flex;flex-direction:column;max-width:74%}
.tc-msg.mine{align-self:flex-end;align-items:flex-end}
.tc-msg.theirs{align-self:flex-start;align-items:flex-start}
.tc-msg-who{font-size:11px;font-weight:700;color:var(--teal);margin:0 4px 2px}
.tc-bubble{padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word;box-shadow:var(--shadow-sm)}
.tc-msg.theirs .tc-bubble{background:#fff;color:var(--ink);border-bottom-left-radius:5px}
.tc-msg.mine .tc-bubble{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;border-bottom-right-radius:5px}
.tc-when{font-size:10.5px;color:var(--ink-faint,#9aa6b2);margin:3px 6px 0}
.tc-composer{flex:0 0 auto;display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.tc-composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;max-height:120px}
.tc-composer textarea:focus{outline:none;border-color:var(--teal);box-shadow:var(--ring)}
/* New conversation modal */
.tc-type{margin:4px 0 14px;width:100%}
.tc-type .seg-btn{flex:1}
.tc-member-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;margin-top:6px}
.tc-members-h{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:4px}
.tc-pick{display:flex;align-items:center;gap:11px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .12s,background .12s}
.tc-pick:hover{background:#f6f8f7}
.tc-pick.on{border-color:var(--teal);background:var(--teal-l)}
.tc-pick-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.tc-pick-main b{font-size:13.5px}
.tc-pick-main small{font-size:11.5px;color:var(--muted)}
.tc-pick-check{opacity:0;color:var(--teal);font-weight:900}
.tc-pick.on .tc-pick-check{opacity:1}
@media (max-width:720px){.tc-wrap{grid-template-columns:1fr;height:auto}.tc-list{max-height:220px;border-right:0;border-bottom:1px solid var(--line)}.tc-thread{height:46vh}}

/* Team chat: composer buttons, emoji picker, attachments */
.tc-composer{position:relative;align-items:flex-end}
.tc-icon-btn{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.tc-icon-btn:hover{background:#f6f8f7;border-color:#cfd8d6}
.tc-emoji-panel{position:absolute;bottom:56px;left:10px;width:min(360px,86%);max-height:270px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px 10px;z-index:20}
.tc-emoji-cat{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:8px 2px 4px}
.tc-emoji-row{display:flex;flex-wrap:wrap;gap:2px}
.tc-emoji{border:0;background:none;font-size:21px;line-height:1;padding:5px;border-radius:8px;cursor:pointer}
.tc-emoji:hover{background:var(--teal-l)}
.tc-attach-img{display:block;margin-top:2px;max-width:230px}
.tc-attach-img img{width:100%;border-radius:12px;display:block;box-shadow:var(--shadow-sm)}
.tc-attach-file{display:flex;align-items:center;gap:9px;margin-top:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px;text-decoration:none;color:var(--ink);max-width:240px}
.tc-msg.mine .tc-attach-file{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.tc-attach-ic{font-size:20px}
.tc-attach-name{font-size:13px;font-weight:600;word-break:break-word}

/* Team chat: message actions, seen status, edit, deleted */
.tc-row{display:flex;align-items:center;gap:7px;max-width:100%}
.tc-msg.mine .tc-row{flex-direction:row}
.tc-msg-actions{display:flex;gap:3px;opacity:0;transition:opacity .12s;flex:0 0 auto}
.tc-msg:hover .tc-msg-actions{opacity:1}
.tc-msg-act{width:26px;height:26px;background:#fff;border:1px solid var(--line);border-radius:7px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.tc-msg-act svg{width:13px;height:13px}
.tc-msg-act:hover{color:var(--ink);background:#f6f8f7}
.tc-seen{color:var(--teal);font-weight:700;cursor:help}
.tc-bubble.tc-deleted{font-style:italic;background:#eef1f0 !important;color:var(--muted) !important;box-shadow:none}
.tc-edit{display:flex;flex-direction:column;gap:6px;min-width:min(260px,60vw)}
.tc-edit-input{border:1px solid var(--teal);border-radius:9px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical;min-height:46px;box-shadow:var(--ring)}
.tc-edit-input:focus{outline:none}
.tc-edit-actions{display:flex;gap:8px;justify-content:flex-end}