/* ============================================================================
   THE DERM EDIT — LEAD PLATFORM
   Liquid-Glass UI  (single coherent stylesheet — replaces all prior layers)
   Light is default. Night theme via body.dark. Maroon = accent only.
   Red = urgent/overdue only. Calm pearl & blush surfaces throughout.
   ============================================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --ink:#2b1a1c;            /* warm near-black text            */
  --ink-soft:#544144;
  --muted:#8a787b;          /* warm grey captions              */
  --faint:#a99a9c;

  --brand:#8e2533;          /* refined wine — ACCENT only      */
  --brand-deep:#6a1422;
  --brand-tint:#fbeef0;     /* soft blush surface              */
  --brand-line:#efd9dd;

  --red:#c5312b;            /* urgent / overdue / hot ONLY     */
  --red-tint:#fff0ef;
  --red-line:#f6cfcc;

  --green:#1f7a55;          /* done / positive                 */
  --green-tint:#edf9f3;
  --green-line:#c5e8d8;

  --amber:#b9731a;          /* waiting / warm                  */
  --amber-tint:#fff5e9;
  --amber-line:#f3ddbb;

  --blue:#3a6ea5;           /* cold / neutral info             */
  --blue-tint:#eef4fb;
  --blue-line:#cfe0f1;

  --pink:#b4377e;           /* very hot repeat                 */
  --pink-tint:#fdeef6;

  /* glass surfaces */
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.82);
  --glass-hi:rgba(255,255,255,.94);
  --hair:rgba(255,255,255,.85);
  --edge:rgba(140,40,55,.12);

  --line:#ece0e1;
  --surface:#ffffff;        /* opaque base for tinted gradients   */
  --side-bg:linear-gradient(180deg,rgba(255,255,255,.82),rgba(252,244,243,.78));
  --radius:22px;
  --radius-lg:28px;
  --radius-sm:14px;

  --shadow-1:0 1px 2px rgba(58,24,30,.05);
  --shadow-2:0 10px 30px rgba(58,24,30,.08);
  --shadow-3:0 22px 60px rgba(58,24,30,.12);
  --ring:0 0 0 4px rgba(142,37,51,.14);

  --blur:22px;
  --sat:175%;
  --ease:cubic-bezier(.32,.72,.32,1);
  --font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
}

/* ---------- 2. RESET + AMBIENT BACKGROUND ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);font-weight:450;
  letter-spacing:-.01em;line-height:1.5;min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(1100px 700px at 12% -8%, #fdf3f1 0%, rgba(253,243,241,0) 55%),
    radial-gradient(900px 700px at 100% 0%, #f7ecf3 0%, rgba(247,236,243,0) 50%),
    radial-gradient(1000px 800px at 50% 120%, #f4ece9 0%, rgba(244,236,233,0) 55%),
    linear-gradient(160deg,#fbf6f3 0%,#f7f0ed 48%,#f9f1ef 100%);
  background-attachment:fixed;
}
/* faint floating colour orbs for depth — calm, never muddy */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(420px 420px at 86% 14%, rgba(180,55,126,.10), transparent 70%),
    radial-gradient(520px 520px at 6% 86%, rgba(142,37,51,.08), transparent 72%);
  filter:blur(2px);
}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--brand)}
.hidden{display:none!important}
::selection{background:rgba(142,37,51,.18)}

/* tidy scrollbars (kills the "ugly scroll") */
*{scrollbar-width:thin;scrollbar-color:rgba(142,37,51,.28) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(142,37,51,.26);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(142,37,51,.42);background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

h1,h2,h3,h4{margin:0;letter-spacing:-.025em;color:var(--ink);font-weight:760}
p{margin:0 0 6px}
b,strong{font-weight:680}
hr{border:0;border-top:1px solid var(--line)}

/* ---------- 3. TYPOGRAPHY HELPERS ---------- */
.muted{color:var(--muted);font-size:12.5px}
.help{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.danger{color:var(--red);font-weight:680}
.ok{color:var(--green);font-weight:680}
.warn{color:var(--amber);font-weight:680}
.statusLine{font-size:12px;color:var(--faint);margin-top:4px;display:inline-block}
label{display:block;font-size:11.5px;font-weight:680;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}

/* ---------- 4. BUTTONS ---------- */
.btn{
  -webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:13px;padding:10px 15px;font-weight:640;font-size:14px;letter-spacing:-.01em;
  color:var(--ink);background:var(--glass-2);border:1px solid var(--hair);
  box-shadow:var(--shadow-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),
    background .18s var(--ease),opacity .18s var(--ease);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.small{font-size:12.5px;padding:8px 11px;border-radius:11px}

.btn.primary,.btn.blue{background:linear-gradient(140deg,#a02c3b 0%,var(--brand) 42%,var(--brand-deep) 100%);
  color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(142,37,51,.26)}
.btn.primary:hover,.btn.blue:hover{box-shadow:0 16px 32px rgba(142,37,51,.32)}
.btn.green{background:linear-gradient(140deg,#27966a,var(--green));color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(31,122,85,.22)}
.btn.orange{background:linear-gradient(140deg,#d08526,var(--amber));color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(185,115,26,.20)}
.btn.red{background:linear-gradient(140deg,#d8473f,var(--red));color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(197,49,43,.24)}
.btn.gray{background:var(--glass-2);color:var(--ink-soft);border:1px solid var(--edge)}
.btn.gray:hover{background:var(--glass-hi)}

/* ---------- 5. FORM CONTROLS ---------- */
input,select,textarea{
  width:100%;border:1px solid var(--edge);border-radius:13px;padding:11px 13px;
  background:rgba(255,255,255,.78);color:var(--ink);box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:var(--ring)}
textarea{min-height:90px;resize:vertical;line-height:1.5}
select{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a787b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}

/* ---------- 6. LOGIN ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginShell{width:min(1080px,100%);display:grid;grid-template-columns:minmax(330px,440px) 1fr;gap:22px;align-items:stretch}
.loginCard,.liquid-card,.loginPreview{
  background:var(--glass-2);-webkit-backdrop-filter:blur(28px) saturate(var(--sat));
  backdrop-filter:blur(28px) saturate(var(--sat));border:1px solid var(--hair);
  box-shadow:var(--shadow-3);border-radius:var(--radius-lg);
}
.loginCard{padding:32px}
.brand,.liquidBrand{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.loginWordmark,.loginLogo{width:min(300px,86%);height:auto;filter:drop-shadow(0 14px 30px rgba(106,20,34,.16))}
.liquidBrand h1{font-size:26px;font-weight:800;letter-spacing:-.035em;margin-top:2px}
.sub{font-size:13.5px;color:var(--muted);line-height:1.55}
.mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:800;
  background:linear-gradient(140deg,var(--brand),var(--brand-deep));box-shadow:0 12px 26px rgba(142,37,51,.3)}
.passWrap{position:relative}
.passWrap input{padding-right:50px}
.eyeBtn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border-radius:11px;display:grid;place-items:center;font-size:16px;color:var(--ink-soft);
  background:var(--glass-hi);border:1px solid var(--edge)}
.eyeBtn:hover{background:#fff}
.liquidLoginBtn{width:100%;font-size:16px;padding:14px 18px;border-radius:16px}
.loginPreview{padding:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.loginPreview::before{content:"";position:absolute;inset:18px;border-radius:24px;pointer-events:none;
  border:1px solid var(--hair);background:linear-gradient(140deg,rgba(255,255,255,.4),rgba(255,255,255,.04))}
.heroSymbol{width:min(260px,68%);height:auto;filter:drop-shadow(0 26px 56px rgba(106,20,34,.2));position:relative}
.glassTag{position:relative;margin:18px 0 10px;padding:8px 16px;border-radius:999px;font-weight:680;font-size:13px;
  color:var(--brand);background:var(--glass-hi);border:1px solid var(--hair);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.loginPreview h2{position:relative;font-size:30px;font-weight:800;letter-spacing:-.04em;margin:6px 0 6px}
.loginPreview p{position:relative;color:var(--muted);max-width:360px}

/* ---------- 7. APP SHELL ---------- */
.app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}

/* Sidebar — light frosted, compact, NOT a dark block */
.side{
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
  padding:20px 14px 26px;display:flex;flex-direction:column;
  background:var(--side-bg);
  -webkit-backdrop-filter:blur(26px) saturate(var(--sat));backdrop-filter:blur(26px) saturate(var(--sat));
  border-right:1px solid var(--edge);box-shadow:14px 0 44px rgba(58,24,30,.06);
}
.sideLogo,.brandSide{display:flex;flex-direction:column;gap:7px;padding:4px 8px 16px;margin-bottom:10px;border-bottom:1px solid var(--brand-line)}
.sideLogo img,.brandSide img,.brandLogo img{max-width:184px;max-height:62px;height:auto;object-fit:contain;display:block}
.sideLogo span,.brandSide span{font-size:10.5px;font-weight:760;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.side>p{display:none}

.nav{display:flex;flex-direction:column;gap:5px}
.nav button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  padding:11px 13px;border-radius:13px;font-weight:600;font-size:14.5px;color:var(--ink-soft);
  background:transparent;border:1px solid transparent;transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}
.nav button>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button:hover{background:rgba(142,37,51,.06);color:var(--ink)}
.nav button.active{background:var(--glass-hi);color:var(--brand);font-weight:720;
  border-color:var(--brand-line);box-shadow:0 8px 20px rgba(142,37,51,.12),inset 3px 0 0 var(--brand)}
.nav .num{flex:0 0 auto;min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 6px;
  border-radius:999px;font-size:11px;font-weight:700;background:rgba(120,98,102,.12);color:var(--muted)}
.nav .num:empty{display:none}
.nav .num.nonzero,.nav button.hasAttention .num{background:var(--red);color:#fff}

/* "More / Admin" disclosure group */
.navMore{margin-top:6px;border-top:1px solid var(--brand-line);padding-top:8px}
.navMore>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:11px 13px;border-radius:13px;font-weight:660;font-size:14px;color:var(--ink-soft)}
.navMore>summary::-webkit-details-marker{display:none}
.navMore>summary:hover{background:rgba(142,37,51,.06);color:var(--ink)}
.navMore[open]>summary{color:var(--brand)}
.navSub{display:flex;flex-direction:column;gap:5px;margin-top:4px;padding-left:6px}
.navSub button{font-size:14px;padding:10px 12px}

.userBox{margin-top:auto;padding:13px 14px;border-radius:16px;font-size:12.5px;color:var(--ink-soft);
  background:var(--glass-hi);border:1px solid var(--hair);box-shadow:var(--shadow-1)}
.userBox b{display:block;font-size:14px;color:var(--ink);font-weight:720}
.roleBadge{display:inline-flex;margin-top:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:680;
  background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-line)}

/* Main column */
.main{min-width:0;padding:24px 28px 36px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;
  padding:20px 24px;border-radius:var(--radius-lg);background:var(--glass-2);border:1px solid var(--hair);
  box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
.top h1{font-size:27px;font-weight:800;letter-spacing:-.035em}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.top .actions{justify-content:flex-end}

.themeBtn,.notifBtn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:13px;
  font-weight:620;font-size:13.5px;color:var(--ink-soft);background:var(--glass-2);border:1px solid var(--hair);
  box-shadow:var(--shadow-1);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.themeBtn:hover,.notifBtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.notifBtn{position:relative}
.notifDot{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}

/* ---------- 8. PANELS, GRIDS, STATS ---------- */
.panel{background:var(--glass-2);border:1px solid var(--hair);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow-2);margin-bottom:16px;-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.head h3{font-size:16px;font-weight:740;display:flex;align-items:center;gap:8px}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g6{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}

.stat{position:relative;overflow:hidden;background:var(--glass-2);border:1px solid var(--hair);
  border-radius:var(--radius-sm);padding:15px 15px 15px 20px;box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.stat::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:5px;border-radius:99px;background:var(--faint)}
.stat b{display:block;font-size:25px;font-weight:780;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.stat span{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.stat.zero{background:rgba(255,255,255,.55)}
.stat.zero::before{background:#d8cdce}
.stat.zero b{color:var(--muted)}
.stat.neutral::before{background:var(--blue)}
.stat.red::before,.stat.attn::before,.stat.hot::before{background:var(--red)}
.stat.red:not(.zero),.stat.attn:not(.zero),.stat.hot:not(.zero){background:linear-gradient(140deg,var(--surface),var(--red-tint))}
.stat.red:not(.zero) b{color:var(--red)}
.stat.green::before{background:var(--green)}
.stat.green:not(.zero){background:linear-gradient(140deg,var(--surface),var(--green-tint))}
.stat.orange::before{background:var(--amber)}
.stat.orange:not(.zero){background:linear-gradient(140deg,var(--surface),var(--amber-tint))}
.stat.blue::before,.stat.purple::before{background:var(--brand)}

.alertBox,.adminAlert{border-radius:14px;padding:12px 14px;margin-bottom:10px;font-size:13px;
  background:var(--red-tint);border:1px solid var(--red-line);color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.storageWarn{background:var(--amber-tint);border:1px solid var(--amber-line);color:#8a5610;
  border-radius:14px;padding:11px 14px;margin-bottom:14px;font-size:13px}

/* ---------- 9. WORK QUEUE ---------- */
.workIntro{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:4px 0 14px}
.softHint{font-size:12px;color:var(--muted);background:var(--glass-2);border:1px solid var(--hair);
  border-radius:999px;padding:6px 12px;box-shadow:var(--shadow-1)}
.filters,.summaryBar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters button,.summaryBar button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  font-weight:620;font-size:13.5px;color:var(--ink-soft);background:var(--glass-2);border:1px solid var(--hair);
  box-shadow:var(--shadow-1);transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.filters button:hover,.summaryBar button:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.filters button.active{background:linear-gradient(140deg,#a02c3b,var(--brand-deep));color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(142,37,51,.24)}
.smallnum{min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px;border-radius:999px;
  font-size:11px;font-weight:700;background:rgba(120,98,102,.14);color:var(--muted)}
.smallnum.nonzero{background:var(--red);color:#fff}
.filters button.active .smallnum{background:rgba(255,255,255,.28);color:#fff}

.workColumns{display:block}
.workColumns .panel{margin-bottom:16px}
.primaryGroupTitle{margin:16px 0 8px;font-size:12px;font-weight:740;text-transform:uppercase;letter-spacing:.09em;color:var(--brand)}

/* ---------- 10. LEAD CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.card{position:relative;overflow:hidden;background:var(--glass-2);border:1px solid var(--hair);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-2);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);animation:cardIn .4s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),rgba(142,37,51,0))}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.card.attention,.card.hot,.card.veryhot{border-color:var(--red-line)}
.card.attention::before,.card.hot::before,.card.veryhot::before{background:linear-gradient(90deg,var(--red),rgba(197,49,43,0))}

.rowtop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.inq{font-size:11px;font-weight:740;letter-spacing:.06em;color:var(--faint);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.leadName{font-size:17px;font-weight:760;letter-spacing:-.02em;margin-top:3px}
.patientLink{cursor:pointer;color:var(--ink);border-bottom:1.5px dotted var(--brand);transition:color .15s var(--ease)}
.patientLink:hover{color:var(--brand)}

.priorityBadge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:720;
  color:#fff;background:linear-gradient(140deg,var(--brand),var(--brand-deep));box-shadow:0 6px 14px rgba(142,37,51,.22)}
.timerPill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:720;
  background:var(--red-tint);color:var(--red);border:1px solid var(--red-line)}
.scheduledPill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:720;
  background:var(--green-tint);color:var(--green);border:1px solid var(--green-line)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:660;
  background:var(--glass-hi);color:var(--ink-soft);border:1px solid var(--edge)}
.chip.hot,.chip.very,.chip.red{background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.chip.very{background:var(--pink-tint);color:var(--pink);border-color:#f3cbe2}
.chip.warm{background:var(--amber-tint);color:var(--amber);border-color:var(--amber-line)}
.chip.cold{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.chip.lost{background:rgba(120,98,102,.1);color:var(--muted)}
.chip.green{background:var(--green-tint);color:var(--green);border-color:var(--green-line)}
.chip.purple{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-line)}

/* the all-important NEXT ACTION line */
.next{margin:13px 0;padding:14px 15px;border-radius:16px;font-weight:680;font-size:14.5px;line-height:1.4;
  background:var(--glass-hi);border:1px solid var(--edge);color:var(--ink)}
.next::before{content:"NEXT ACTION";display:block;font-size:10px;font-weight:740;letter-spacing:.1em;color:var(--faint);margin-bottom:5px}
.next.red{background:var(--red-tint);border-color:var(--red-line);color:var(--red)}
.next.red::before{color:var(--red);opacity:.7}
.next.orange{background:var(--amber-tint);border-color:var(--amber-line);color:var(--amber)}
.next.orange::before{color:var(--amber);opacity:.7}
.next.green{background:var(--green-tint);border-color:var(--green-line);color:var(--green)}
.next.green::before{color:var(--green);opacity:.7}

.dueInfo{margin:10px 0;padding:9px 13px;border-radius:12px;font-size:12.5px;font-weight:660;
  background:var(--glass-hi);border:1px solid var(--edge);color:var(--ink-soft)}
.dueInfo.red{background:var(--red-tint);border-color:var(--red-line);color:var(--red)}
.dueInfo.orange{background:var(--amber-tint);border-color:var(--amber-line);color:var(--amber)}
.dueInfo.green{background:var(--green-tint);border-color:var(--green-line);color:var(--green)}

.meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12.5px;color:var(--muted);margin:10px 0}
.meta b{color:var(--ink-soft);font-weight:660}
.compactStatus{font-size:12.5px;color:var(--ink-soft);background:var(--glass-hi);border:1px solid var(--edge);
  border-radius:13px;padding:11px 13px;margin:10px 0;line-height:1.5}
.waStatus{font-size:12.5px;background:var(--glass-hi);border:1px solid var(--edge);border-radius:13px;padding:11px 13px;margin:10px 0;line-height:1.55}
.statusLine{font-size:11.5px}

/* action split — hero primary vs secondary tray */
.actionSplit{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:14px}
.mainAct{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.otherAct{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;flex:1;min-width:0}
.primaryWork{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:15px;font-weight:740;font-size:15px;color:#fff;
  background:linear-gradient(140deg,#a02c3b 0%,var(--brand) 45%,var(--brand-deep) 100%);
  box-shadow:0 14px 30px rgba(142,37,51,.28);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.primaryWork:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(142,37,51,.34)}
.primaryWork:active{transform:scale(.98)}

/* smart recommendation card */
.smartBox{margin-top:14px;padding:15px 16px;border-radius:18px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(140deg,#9a2a39 0%,var(--brand-deep) 100%);box-shadow:0 18px 40px rgba(106,20,34,.28)}
.smartBox::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.18),transparent 50%);pointer-events:none}
.smartBox .muted{color:rgba(255,255,255,.72);font-size:11px;font-weight:680;letter-spacing:.08em;text-transform:uppercase}
.smartBox .actions{margin-top:10px;position:relative}
.smartPrimary{padding:12px 18px;border-radius:14px;font-weight:740;font-size:14.5px;color:var(--brand-deep);
  background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.16)}
.smartPrimary:hover{transform:translateY(-1px)}
.smartSecondary{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.34)!important;color:#fff!important;backdrop-filter:blur(6px)}
.smartHero{display:flex;gap:14px;align-items:center;background:var(--glass-2);border:1px solid var(--hair);border-radius:18px;padding:16px}
.smartHero h2{font-size:18px;font-weight:760}
.smartHero p{margin:5px 0 0;color:var(--muted);font-size:12.5px}

.moreActions{margin-top:12px}
.moreActions>summary{cursor:pointer;font-weight:660;color:var(--brand);font-size:13.5px;list-style:none;padding:8px 0}
.moreActions>summary::-webkit-details-marker{display:none}
.moreActions>summary::before{content:"⋯  ";letter-spacing:2px}
.secondaryTray{background:var(--glass-hi);border:1px solid var(--edge);border-radius:16px;padding:13px;margin-top:12px}

/* lead focus / snapshot modal */
.leadFocus{display:grid;grid-template-columns:1.4fr .85fr;gap:18px}
.snapshotPanel,.snapshotSide{background:var(--glass-2);border:1px solid var(--hair);border-radius:20px;padding:18px}
.snapshotSide{background:linear-gradient(160deg,var(--surface),var(--brand-tint));position:sticky;top:0;align-self:start}
.bigNext{font-size:19px;font-weight:780;line-height:1.3;margin:12px 0;padding:16px;border-radius:16px;
  background:var(--brand-tint);border:1px solid var(--brand-line);color:var(--brand-deep)}
.scoreRing{flex:0 0 auto;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff;
  background:conic-gradient(var(--brand) 0,var(--brand) 70%,rgba(142,37,51,.18) 70%);box-shadow:0 12px 28px rgba(142,37,51,.24)}
.scoreRing::after{content:"";position:absolute;width:64px;height:64px;border-radius:50%;background:var(--glass-2)}
.smartHero .scoreRing{position:relative}
.smartHero .scoreRing span,.scoreRing>*{position:relative;z-index:1}
.snapshotGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.snapItem{background:var(--glass-hi);border:1px solid var(--edge);border-radius:13px;padding:11px;font-size:12.5px}
.snapItem b{display:block;color:var(--ink-soft);margin-bottom:3px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.snapshotTimeline{max-height:280px;overflow:auto}

/* ---------- 11. TABLES ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--glass-2);border:1px solid var(--hair);
  border-radius:16px;overflow:hidden;font-size:12.5px;box-shadow:var(--shadow-1)}
th,td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:rgba(255,255,255,.6);color:var(--ink-soft);font-weight:700;font-size:11.5px;letter-spacing:.02em;
  text-transform:uppercase;position:sticky;top:0}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover{background:rgba(142,37,51,.04)}
.empty{border:1.5px dashed var(--brand-line);border-radius:16px;padding:26px;text-align:center;color:var(--muted);
  background:var(--glass);font-size:13.5px}

/* ---------- 12. MODALS ---------- */
.modalBack{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;
  background:rgba(58,24,30,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .2s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:min(1100px,100%);max-height:92vh;overflow:auto;padding:22px;border-radius:var(--radius-lg);
  background:var(--glass-hi);border:1px solid var(--hair);box-shadow:var(--shadow-3);
  -webkit-backdrop-filter:blur(34px) saturate(var(--sat));backdrop-filter:blur(34px) saturate(var(--sat));
  animation:modalIn .32s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modalHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.modalHead h3{font-size:19px;font-weight:780}
.close{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:15px;color:var(--ink-soft);
  background:var(--glass-2);border:1px solid var(--edge);transition:background .15s var(--ease)}
.close:hover{background:#fff;color:var(--brand)}
.modal .grid{margin-bottom:14px}

/* ---------- 13. NOTIFICATIONS ---------- */
.notifPanelHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.notifActions{display:flex;gap:8px;flex-wrap:wrap}
.notifItem{border-radius:14px;padding:13px 14px;margin-bottom:10px;background:var(--red-tint);
  border:1px solid var(--red-line);box-shadow:inset 3px 0 0 var(--red);font-size:13.5px}
.notifItem.orange{background:var(--amber-tint);border-color:var(--amber-line);box-shadow:inset 3px 0 0 var(--amber)}
.notifItem.green{background:var(--green-tint);border-color:var(--green-line);box-shadow:inset 3px 0 0 var(--green)}
.notifMeta{font-size:12px;color:var(--muted);margin-top:5px}
.notifEmpty{border:1.5px dashed var(--brand-line);border-radius:16px;padding:26px;text-align:center;color:var(--muted);background:var(--glass)}

/* ---------- 14. PROCESS / TIMELINE / UNDO ---------- */
.processGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.processBox{background:var(--glass-2);border:1px solid var(--hair);border-radius:16px;padding:15px}
.processBox h4{font-size:14px;font-weight:740;margin-bottom:10px}
.processList{display:grid;gap:8px}
.processItem{display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px dashed var(--line);font-size:12.5px}
.processItem b{color:var(--ink-soft)}
.processLine{background:var(--amber-tint);border:1px solid var(--amber-line);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:12.5px;color:#7c4d12}
.timeline{border-left:2px solid var(--brand-line);padding-left:14px;margin-top:6px}
.timeline div{margin:10px 0;font-size:12.5px;position:relative}
.timeline div::before{content:"";position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.timeline b{display:block;color:var(--ink-soft);margin-bottom:2px}
.timelineFull,.snapshotTimeline{max-height:360px;overflow:auto}
.undoBox{background:var(--red-tint);border:1px solid var(--red-line);border-radius:14px;padding:13px}
.undoBtn{background:linear-gradient(140deg,#d8473f,var(--red));color:#fff;border-radius:11px;padding:9px 13px;font-weight:680;box-shadow:0 10px 22px rgba(197,49,43,.22)}
.readableLog{font-size:12.5px;line-height:1.55}

/* ---------- 15. MISC COMPONENTS ---------- */
.scopeTag{display:inline-flex;margin:2px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:660;
  background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-line)}
.scopeCheck{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:11px;background:var(--glass-hi);
  border:1px solid var(--edge);font-size:13px;margin:4px 0}
.scopeCheck input{width:auto}
.accBox,.accessBox,.autoStaff,.blockedInfo,.dnvFlowBox{background:var(--glass-hi);border:1px solid var(--edge);
  border-radius:14px;padding:13px;margin:10px 0;font-size:13px;line-height:1.55}
.blockedInfo{background:var(--red-tint);border-color:var(--red-line);color:var(--red)}
.dnvFlowBox{background:var(--amber-tint);border-color:var(--amber-line)}
.simpleWork{background:var(--amber-tint);border:1.5px solid var(--amber-line);border-radius:15px;padding:13px 15px;margin:12px 0;font-size:14px;line-height:1.45}
.simpleWork b{color:#7c4d12}
.simpleWork.red{background:var(--red-tint);border-color:var(--red-line)}
.simpleWork.red b{color:var(--red)}
.simpleWork.green{background:var(--green-tint);border-color:var(--green-line)}
.simpleWork.green b{color:var(--green)}
.simpleWork .clock{font-size:12px;color:var(--muted);margin-top:5px}
.simpleStep{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.simpleChecklist{background:var(--glass-hi);border:1px solid var(--edge);border-radius:13px;padding:12px;font-size:12.5px;line-height:1.55;margin:8px 0}
.oppScoreBox{display:flex;gap:14px;align-items:center;background:linear-gradient(160deg,var(--surface),var(--amber-tint));
  border:1px solid var(--amber-line);border-radius:16px;padding:14px;margin:12px 0}
.oppSimpleNote{background:var(--green-tint);border:1px solid var(--green-line);border-radius:13px;padding:12px;font-size:12.5px;margin:10px 0}
.scoreRingSmall{flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:780;font-size:18px}
.scoreRingSmall.green{background:linear-gradient(140deg,#27966a,var(--green));box-shadow:0 10px 22px rgba(31,122,85,.26)}
.scoreRingSmall.orange{background:linear-gradient(140deg,#d08526,var(--amber));box-shadow:0 10px 22px rgba(185,115,26,.24)}
.scoreRingSmall.red{background:linear-gradient(140deg,#d8473f,var(--red));box-shadow:0 10px 22px rgba(197,49,43,.26)}
.qaBadge{display:inline-flex;margin-left:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:680;
  background:var(--green-tint);color:var(--green);border:1px solid var(--green-line)}
.tmpl{background:var(--glass-hi);border:1px solid var(--edge);border-radius:13px;padding:13px;margin:8px 0;font-size:12.5px;line-height:1.55}
.processLine,.softHint{font-weight:500}

/* toast */
.toast{position:fixed;right:20px;bottom:20px;z-index:90;padding:13px 16px;border-radius:15px;color:#fff;font-weight:560;font-size:13.5px;
  background:rgba(43,26,28,.92);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-3);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast button{margin-left:12px;padding:4px 9px;border-radius:9px;background:rgba(255,255,255,.92);color:#2b1a1c;font-weight:680}

/* ============================================================================
   NIGHT THEME  (body.dark)
   ============================================================================ */
body.dark{
  --ink:#f6ecec;--ink-soft:#d8c7c9;--muted:#a9979a;--faint:#897a7d;
  --brand:#e0808d;--brand-deep:#c25f6d;--brand-tint:rgba(224,128,141,.12);--brand-line:rgba(224,128,141,.26);
  --red:#f1837c;--red-tint:rgba(241,131,124,.14);--red-line:rgba(241,131,124,.3);
  --green:#67c79b;--green-tint:rgba(103,199,155,.13);--green-line:rgba(103,199,155,.28);
  --amber:#e2a455;--amber-tint:rgba(226,164,85,.13);--amber-line:rgba(226,164,85,.3);
  --blue:#7fb0de;--blue-tint:rgba(127,176,222,.12);--blue-line:rgba(127,176,222,.28);
  --pink:#e58cc0;--pink-tint:rgba(229,140,192,.14);
  --glass:rgba(48,33,37,.66);--glass-2:rgba(52,36,40,.74);--glass-hi:rgba(60,42,46,.82);
  --hair:rgba(255,255,255,.1);--edge:rgba(255,255,255,.1);--line:rgba(255,255,255,.09);
  --surface:rgba(58,40,44,.55);
  --side-bg:linear-gradient(180deg,rgba(48,33,37,.86),rgba(38,26,30,.82));
  --shadow-1:0 1px 2px rgba(0,0,0,.3);--shadow-2:0 12px 30px rgba(0,0,0,.36);--shadow-3:0 24px 60px rgba(0,0,0,.46);
  --ring:0 0 0 4px rgba(224,128,141,.22);
}
body.dark{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(120,40,55,.32) 0%, transparent 55%),
    radial-gradient(900px 700px at 100% 0%, rgba(80,40,80,.28) 0%, transparent 50%),
    linear-gradient(160deg,#1d1417 0%,#251a1d 55%,#1f1518 100%);
}
body.dark::before{background:
  radial-gradient(420px 420px at 86% 14%, rgba(229,140,192,.1), transparent 70%),
  radial-gradient(520px 520px at 6% 86%, rgba(224,128,141,.1), transparent 72%)}
body.dark .btn.primary,body.dark .btn.blue,body.dark .primaryWork,
body.dark .filters button.active,body.dark .priorityBadge{
  background:linear-gradient(140deg,#b85563,#8e3543);color:#fff}
body.dark .smartBox{background:linear-gradient(140deg,#7a2f3c,#522029)}
body.dark .smartPrimary{color:#7a2f3c}
body.dark select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9979a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")}
body.dark th{background:rgba(255,255,255,.05)}
body.dark .toast{background:rgba(20,14,16,.94)}
body.dark .stat.zero{background:rgba(255,255,255,.04)}
body.dark input,body.dark textarea{background:rgba(255,255,255,.05)}
body.dark input:focus,body.dark select:focus,body.dark textarea:focus{background:rgba(255,255,255,.08)}
body.dark th{background:rgba(255,255,255,.05)}
body.dark .eyeBtn:hover,body.dark .close:hover{background:rgba(255,255,255,.12)}

/* ============================================================================
   FALLBACK (no backdrop-filter) + MOTION + RESPONSIVE + PRINT
   ============================================================================ */
@supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .loginCard,.loginPreview,.liquid-card,.panel,.card,.stat,.modal,.side,.top,.btn,.themeBtn,.notifBtn{background:#fff}
  body.dark .loginCard,body.dark .loginPreview,body.dark .liquid-card,body.dark .panel,body.dark .card,
  body.dark .stat,body.dark .modal,body.dark .side,body.dark .top{background:#2c2024}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.printOnly{display:none}
@media print{
  body::before,.side,.top .actions,.filters,.summaryBar,.btn,.themeBtn,.notifBtn,.modalBack,.moreActions{display:none!important}
  body{background:#fff}
  .app{display:block}
  .main{padding:0}
  .panel,.card,.stat,table{box-shadow:none;break-inside:avoid;border:1px solid #ddd;background:#fff}
  .printOnly{display:block}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .leadFocus{grid-template-columns:1fr}
  .snapshotSide{position:static}
  .processGrid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .app{display:block}
  .side{position:relative;height:auto;width:auto;margin:10px;border-radius:22px;border-right:0;border:1px solid var(--edge);
    box-shadow:var(--shadow-2);padding:16px 14px 18px}
  .nav{flex-direction:row;flex-wrap:wrap}
  .nav button{flex:1 1 calc(50% - 5px)}
  .navMore{width:100%}
  .userBox{margin-top:14px}
  .main{padding:14px}
  .top{flex-direction:column;align-items:stretch;padding:16px}
  .top .actions{justify-content:flex-start}
  .top h1{font-size:23px}
  .loginShell{grid-template-columns:1fr}
  .loginPreview{display:none}
  .cards{grid-template-columns:1fr}
  .snapshotGrid,.meta{grid-template-columns:1fr 1fr}
  .actionSplit{flex-direction:column}
  .otherAct{justify-content:flex-start}
  .workColumns{grid-template-columns:1fr}
}
@media (max-width:520px){
  .meta,.snapshotGrid{grid-template-columns:1fr}
  .nav button{flex:1 1 100%}
  .stat b{font-size:22px}
}


/* ---------- Appointment calendar ---------- */
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calDow{font-size:11px;font-weight:740;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.calCell{min-height:108px;background:var(--glass-hi);border:1px solid var(--edge);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.calEmpty{background:transparent;border:1px dashed var(--line)}
.calToday{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-line)}
.calNum{font-size:12.5px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between}
.calCount{background:var(--brand);color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px}
.calChip{font-size:11px;font-weight:620;padding:3px 7px;border-radius:8px;background:var(--green-tint);color:var(--green);border:1px solid var(--green-line);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .12s var(--ease)}
.calChip:hover{transform:translateY(-1px)}
.calChip.crossed{background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.calMore{font-size:10.5px;color:var(--muted);font-weight:600}
@media (max-width:760px){.calCell{min-height:78px}.calChip{font-size:10px}.calDow{font-size:9px}}


/* V9.5 nav badges + clean empty sections */
.num.neutral{background:var(--glass-hi);color:var(--muted);border:1px solid var(--edge);font-weight:640}
.emptySection{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;margin-bottom:10px;border:1px dashed var(--line);border-radius:12px;background:var(--glass-hi)}
.emptySection .esTitle{font-size:12.5px;font-weight:680;color:var(--muted)}
.emptySection .esNote{font-size:11.5px;font-weight:700;color:var(--green)}
.topSearch{width:300px;max-width:42vw;padding:11px 16px;font-size:14px;border-radius:14px}
.addLeadBig{font-size:15px;font-weight:760;padding:12px 20px}
.dayNightToggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--edge);background:var(--glass-hi);border-radius:999px;padding:5px;width:62px;justify-content:flex-start;transition:all .2s var(--ease)}
.dayNightToggle.night{justify-content:flex-end;background:var(--brand-tint)}
.dayNightToggle .knob{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px}



/* ============================================================================
   V9.16 — DARK MODE refinement ONLY (body.dark). Light/liquid-glass UI untouched.
   Frosted-glass dark surfaces + brighter, higher-contrast text (no grey wash).
   ============================================================================ */
body.dark{
  --ink:#fbf4f4; --ink-soft:#e8dcdd; --muted:#c5b4b7; --faint:#9c8c8f;
  --line:rgba(255,255,255,.10); --hair:rgba(255,255,255,.16); --edge:rgba(255,255,255,.10);
}
/* deeper, richer backdrop so frosted cards read with depth */
body.dark{
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(150,52,70,.30) 0%, transparent 55%),
    radial-gradient(900px 700px at 100% 0%, rgba(98,46,98,.26) 0%, transparent 50%),
    linear-gradient(160deg,#160f11 0%,#1c1316 55%,#180f12 100%) !important;
}
body.dark::before{background:
  radial-gradient(420px 420px at 86% 14%, rgba(229,140,192,.12), transparent 70%),
  radial-gradient(520px 520px at 6% 86%, rgba(224,128,141,.12), transparent 72%)}
/* frosted-glass surfaces instead of flat brown */
body.dark .loginCard, body.dark .loginPreview, body.dark .liquid-card,
body.dark .panel, body.dark .card, body.dark .stat, body.dark .side, body.dark .top,
body.dark .alertBox, body.dark .processBox, body.dark .snapshotPanel, body.dark .snapshotSide,
body.dark nav, body.dark header, body.dark .emptySection, body.dark .navMore, body.dark .notifItem{
  background:rgba(40,28,31,.62) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
}
body.dark .modal{ background:rgba(34,24,27,.88) !important; border:1px solid rgba(255,255,255,.10) !important; }
/* readable captions (kill the grey wash) */
body.dark .help, body.dark .muted, body.dark .statusLine, body.dark .notifMeta, body.dark .esNote{ color:var(--muted) !important; }
body.dark, body.dark .leadName, body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark b{ color:var(--ink); }
/* tables */
body.dark th{ background:rgba(255,255,255,.07) !important; color:var(--ink-soft) !important; }
body.dark td{ border-bottom-color:rgba(255,255,255,.08) !important; }
body.dark tbody tr:hover{ background:rgba(255,255,255,.045) !important; }
/* inputs */
body.dark input, body.dark textarea, body.dark select{ background:rgba(255,255,255,.06) !important; color:var(--ink) !important; border-color:rgba(255,255,255,.13) !important; }
body.dark input::placeholder, body.dark textarea::placeholder{ color:rgba(255,255,255,.40); }
/* chips/badges keep contrast */
body.dark .chip{ color:var(--ink-soft); }
body.dark .num, body.dark .smallnum{ color:var(--ink-soft); }

/* V10.9.7 — a lead awaiting a delete decision is frozen */
.pendingDeleteLock{ position:relative; opacity:.55; filter:grayscale(.55); }
.pendingDeleteLock button, .pendingDeleteLock a.btn, .pendingDeleteLock input, .pendingDeleteLock select, .pendingDeleteLock textarea{
  pointer-events:none !important; opacity:.5 !important; cursor:not-allowed !important;
}
.pendingDeleteBadge{
  display:inline-block; margin:4px 0 2px; padding:3px 10px; border-radius:999px;
  background:#7E3C3D; color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em;
  filter:none !important; opacity:1 !important;
}


/* ============ Lead Platform 2 — only what the original didn't already have ====
   .cards, .card, .stat, .panel, .processBox, .primaryWork, .dueInfo, .toast,
   .modal*, the sidebar, the nav and ALL responsive rules come from the original
   stylesheet above, untouched — so this build looks like the app the team
   already knows. Below: the handful of elements that are new here. ========== */
.hidden{display:none !important}

/* section heading above each queue */
.secHead{font-size:13px;font-weight:760;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin:22px 0 10px;display:flex;align-items:center;gap:9px}

/* per-card select tick (bulk assign) — must never stretch: the base rule
   makes every input 100% wide, which would crush the card layout */
.selRow{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700;font-size:12px;
  text-transform:none;letter-spacing:0;color:var(--muted)}
.selRow input{width:auto !important;margin:0;transform:scale(1.15)}

/* ladder-step tag + chip row */
.tdeDayTag{margin:9px 0;padding:7px 11px;border-radius:12px;background:var(--brand-tint);
  border:1px solid var(--brand-line);font-size:12.5px;color:var(--brand-deep)}
.dueNow{color:var(--red);font-weight:900}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}

/* card action stack */
.tfActs{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.tfRowA{display:flex}
.tfRowA .primaryWork{width:100%;justify-content:center}
.tfRowB{display:flex;flex-wrap:wrap;gap:8px}

/* who the work belongs to */
.whoLine{border-radius:14px;padding:11px 14px;font-weight:700;font-size:13px;margin:0 0 14px;border:1px solid}
.whoLine.assigned{background:#f3ecff;border-color:#ddd0f5;color:#5b2d91}
.whoLine.pool{background:var(--glass-hi);border-color:var(--edge);color:var(--ink-soft)}
body.dark .whoLine.assigned{background:rgba(120,80,180,.22);border-color:rgba(190,160,240,.28);color:#e6d8ff}

/* profile: stacked process boxes + history */
.modalBody .processBox{margin-bottom:13px}
.tlItem{border-left:3px solid var(--brand-line);padding:7px 12px;margin:7px 0;font-size:13px;
  background:var(--glass-2);border-radius:0 11px 11px 0}
.tlAt{font-size:11px;color:var(--faint);margin-top:2px}

/* toast: centred so it never sits under the action buttons on a phone */
.toast{left:50%;right:auto;transform:translateX(-50%);text-align:center;max-width:92vw;transition:opacity .3s}

/* empty state for a queue with nothing in it */
.emptySection{display:block;text-align:center;padding:30px 20px;border-radius:var(--radius);color:var(--muted)}

/* dialogs sit above the sidebar; bottom sheet on phones */
.modalBack{z-index:120}
.modalBack .modal{animation:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:#fffdfd}
body.dark .modalBack .modal{background:#241a1d}
@media (max-width:700px){
  .modalBack{place-items:end center;padding:0}
  .modalBack .modal{width:100% !important;max-height:94vh;border-radius:22px 22px 0 0}
}

/* ---------- performance ----------
   The original app showed one long list; this build shows a grid of many cards
   at once. A backdrop-filter per card means dozens of blurred compositing
   layers — fine on a desktop, choppy on the team's phones. The pearl look comes
   from the translucent fill, not the blur, so blur stays only on the sidebar
   and header, where there are just two large surfaces. */
.card,.stat,.panel,.processBox,.emptySection{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.card{background:rgba(255,255,255,.92)}
.panel,.processBox,.stat{background:rgba(255,255,255,.90)}
body.dark .card{background:rgba(40,28,31,.92) !important}
body.dark .panel,body.dark .processBox,body.dark .stat{background:rgba(40,28,31,.90) !important}

/* protocol-specific bits */
.tfWait{opacity:.55;cursor:not-allowed;border:2px dashed var(--brand-line) !important;
  background:var(--glass-hi) !important;color:var(--muted) !important;box-shadow:none !important}
.tfClosedTag{display:inline-block;width:100%;text-align:center;padding:11px;border-radius:14px;
  background:var(--green-tint);border:1px solid var(--green-line);color:var(--green);font-weight:740;font-size:13.5px}
.tfClosed{opacity:.78;filter:grayscale(.45)}
.tfDone,.tdeDone{opacity:.6}
.tfRowC{margin-top:2px}
.tfRowC.collapsed .tfMoreBox{display:none}
.tfMoreBox{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tfMore{align-self:flex-start}
.schedTag{color:var(--muted);font-weight:700}
.btn.orange{background:var(--amber-tint);border-color:var(--amber-line);color:var(--amber)}
.btn.blue{background:var(--blue-tint);border-color:var(--blue-line);color:var(--blue)}
.btn.gray{background:var(--glass-2)}
.btn.red{background:var(--red-tint);border-color:var(--red-line);color:var(--red)}
.btn.green{background:var(--green-tint);border-color:var(--green-line);color:var(--green)}
.chip.orange{background:var(--amber-tint);color:var(--amber);border-color:var(--amber-line)}
.chip.green{background:var(--green-tint);color:var(--green);border-color:var(--green-line)}

/* notifications */
.notifBtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:13px;font-size:17px;background:var(--glass-2);
  border:1px solid var(--edge);color:var(--ink-soft);cursor:pointer}
.notifBtn:hover{background:#fff}
.notifDot{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;
  display:inline-grid;place-items:center;box-shadow:0 2px 6px rgba(197,49,43,.4)}
.notifHead{font-size:11.5px;font-weight:760;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px}
.notifItem{padding:11px 13px;border-radius:13px;background:var(--glass-hi);border:1px solid var(--edge);
  margin-bottom:8px;font-size:13px}
.notifItem.unseen{border-color:var(--brand-line);background:var(--brand-tint)}
.notifItem.live{border-color:var(--red-line);background:var(--red-tint)}
.notifMeta{font-size:11px;color:var(--faint);margin-top:3px}
.teamrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 4px;border-bottom:1px dashed var(--line)}
.teamrow:last-child{border-bottom:0}

.tlItem.tlFlow{border-left-color:var(--blue-line);background:var(--blue-tint)}

}

/* ---------- Patient Process History — two columns, scrolls normally ---------- */
.procModal .modal{width:min(1180px,100%);max-height:92vh;overflow:auto}
.procGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.procCol{display:flex;flex-direction:column;gap:10px;
  background:var(--glass-hi);border:1px solid var(--edge);border-radius:16px;padding:14px 16px}
.procH{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:2px 0 2px}
.procCol .next{margin:4px 0}
.procCol .meta{grid-template-columns:1fr 1fr;margin:6px 0}
.recAction{padding:9px 12px;border-radius:12px;background:var(--amber-tint);
  border:1px solid var(--amber-line);color:var(--amber);font-size:12.5px;font-weight:640}
.intentBox{padding:11px 13px;border-radius:12px;background:var(--glass-2);
  border:1px solid var(--edge);font-size:13px;display:flex;flex-direction:column;gap:3px}
.intentBox .muted{font-size:12.5px}
/* key / value rows with dotted leaders, like the original */
.kvList{display:flex;flex-direction:column}
.kvRow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:7px 0;border-bottom:1px dotted var(--line);font-size:12.8px}
.kvRow:last-child{border-bottom:0}
.kvK{color:var(--ink-soft);font-weight:640}
.kvV{color:var(--muted);text-align:right;max-width:60%}
/* journey with the red entry markers */
.journeyList{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow-y:auto;padding-right:4px}
.jItem{position:relative;padding:8px 0 8px 16px;border-bottom:1px solid var(--line)}
.jItem:last-child{border-bottom:0}
.jItem::before{content:"";position:absolute;left:0;top:12px;width:7px;height:9px;
  background:var(--brand);border-radius:2px 0 0 2px}
.jItem.jFlow::before{background:var(--blue)}
.jHead{font-size:12.5px;font-weight:740;color:var(--ink)}
.jText{font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.jWho{font-size:11.5px;color:var(--faint);margin-top:1px}
.procBottom{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}
.procBox{background:var(--glass-hi);border:1px solid var(--edge);border-radius:16px;padding:14px 16px}
.procBox h4{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:6px;
  letter-spacing:normal;text-transform:none}
.undoBox{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:6px 8px;background:var(--glass-2)}
@media (max-width:900px){
  .procGrid{grid-template-columns:1fr}
  .procCol .meta{grid-template-columns:1fr}
  .procModal .modal{border-radius:22px 22px 0 0}
}

/* offline banner — a clinic must never wonder whether a press saved */
.offlineBar{position:fixed;left:0;right:0;top:0;z-index:200;display:none;
  align-items:center;justify-content:center;gap:8px;padding:10px 16px;
  background:var(--red);color:#fff;font-weight:740;font-size:13px;
  box-shadow:0 6px 18px rgba(197,49,43,.35)}
body.isOffline .app{padding-top:40px}
body.isOffline .primaryWork,body.isOffline .tfRowB .btn{opacity:.55}

.calTitle{font-weight:760;font-size:13.5px;color:var(--ink);margin-bottom:6px}
.calPre{white-space:pre-wrap;font-family:inherit;font-size:12.5px;color:var(--ink-soft);
  background:var(--glass-2);border:1px solid var(--edge);border-radius:11px;padding:10px 12px;margin:0}

/* ---- permission checklist on the profile screen ---- */
.permGroup{border:1.5px solid var(--brand-line);border-radius:14px;padding:12px 14px;margin-top:10px}
.permGroup>b{display:block;margin-bottom:8px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
.permRow{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.permRow input{width:auto !important;margin-top:3px;flex:0 0 auto}
.permRow span{font-size:.92rem;line-height:1.35}

/* ---- marketing funnel ---- */
.mkStep{margin:10px 0}
.mkBarWrap{background:var(--brand-soft);border-radius:8px;height:12px;overflow:hidden}
.mkBar{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2,var(--brand)));border-radius:8px}
.mkStepText{margin-top:5px;font-size:.93rem}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th,table.tbl td{padding:7px 9px;border-bottom:1px solid var(--brand-line);font-size:.9rem;white-space:nowrap}
table.tbl th{text-align:left;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
table.tbl td.num,table.tbl th.num{text-align:right}

/* ---- text wordmark (deployments without a logo image) ---- */
.txtWordmark{display:flex;flex-direction:column;line-height:1.1}
.txtWordmark b{font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:1.5rem;letter-spacing:.12em;color:var(--brand)}
.txtWordmark span{font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.sideLogo .txtWordmark b{font-size:1.18rem}
.txtWordmark.hero{align-items:center;padding:34px 8px}
.txtWordmark.hero b{font-size:2rem}

/* ---------- WhatsApp page: chat bubbles, ticks, reply bar ---------- */
.waChat{max-height:52vh;overflow-y:auto;padding:12px;border-radius:16px;
  background:var(--glass-hi);border:1px solid var(--edge);display:flex;flex-direction:column;gap:8px}
.waBubble{max-width:78%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45;
  box-shadow:var(--shadow-1);word-wrap:break-word}
.waBubble.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.waBubble.out{align-self:flex-end;background:var(--green-tint);border:1px solid var(--green-line);border-bottom-right-radius:4px}
.waBubble.out.ai{background:var(--brand-tint);border-color:var(--brand-line)}
.waBody{white-space:pre-wrap}
.waMeta{margin-top:3px;font-size:10.5px;color:var(--faint);text-align:right}
.waAiTag{display:inline-block;margin-bottom:3px;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:740;
  background:var(--glass-hi);color:var(--brand);border:1px solid var(--brand-line)}
.waTick{font-weight:800;color:var(--faint);letter-spacing:-2px}
.waTick.read{color:#34a1e2}
.waTick.fail{color:var(--red);letter-spacing:0}
.waTick.wait{color:var(--amber);letter-spacing:0}
.waReplyBar{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.waReplyBar textarea{flex:1;min-height:44px}
body.dark .waBubble.in{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}

/* ---------- WhatsApp split view: list | chat | patient ---------- */
.waSplit{display:grid;grid-template-columns:300px minmax(0,1fr) 330px;gap:14px;align-items:start}
.waListCol{background:var(--glass-2);border:1px solid var(--hair);border-radius:var(--radius);
  padding:12px;position:sticky;top:12px;max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.waListCol input{margin-bottom:10px}
.waList{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:6px}
.waConvItem{padding:10px 12px;border-radius:13px;cursor:pointer;border:1px solid transparent;
  background:var(--glass-hi);transition:background .15s var(--ease),border-color .15s var(--ease)}
.waConvItem:hover{background:#fff;border-color:var(--brand-line)}
.waConvItem.active{background:var(--brand-tint);border-color:var(--brand-line);box-shadow:inset 3px 0 0 var(--brand)}
.waConvItem.hasNew .waConvName{font-weight:800}
.waConvTop{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.waConvName{font-weight:660;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.waConvAt{flex:0 0 auto;font-size:10.5px;color:var(--faint)}
.waConvBottom{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:2px}
.waConvLast{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.waConvSvc{font-size:10.5px;color:var(--faint);margin-top:2px}
.waMiniAi{display:inline-block;padding:0 5px;border-radius:6px;font-size:9.5px;font-weight:760;
  background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-line)}
.waChatCol{background:var(--glass-2);border:1px solid var(--hair);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;min-height:60vh}
.waChatCol .waChat{flex:1;max-height:none;min-height:40vh}
.waChatHead{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.waEmptyChat{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;
  color:var(--muted);font-weight:640;text-align:center;padding:40px 16px}
.waLeadCol{position:sticky;top:12px}
.waLeadCard{background:var(--glass-2);border:1px solid var(--hair);border-radius:var(--radius);padding:16px}
.waLeadCard .actions{flex-wrap:wrap}
@media (max-width:1180px){
  .waSplit{grid-template-columns:270px minmax(0,1fr)}
  .waLeadCol{display:none}
}
@media (max-width:820px){
  .waSplit{display:flex;flex-direction:column}
  .waListCol{position:static;max-height:38vh;width:auto}
  .waChatCol{min-height:50vh}
  .waChatCol .waChat{min-height:30vh}
}
body.dark .waConvItem:hover{background:rgba(255,255,255,.08)}

/* ---------- WhatsApp dock: the chat that stays open beside every page ---------- */
#waDockTab{position:fixed;right:0;top:44%;z-index:70;width:48px;height:56px;
  border-radius:16px 0 0 16px;display:grid;place-items:center;font-size:21px;color:#fff;cursor:pointer;
  background:linear-gradient(140deg,#27966a,var(--green));box-shadow:0 12px 26px rgba(31,122,85,.35);
  border:0;transition:transform .18s var(--ease)}
#waDockTab:hover{transform:translateX(-3px)}
#waDockTab .notifDot{top:-7px;left:-7px;right:auto}
#waDock{position:fixed;top:0;right:0;bottom:0;z-index:65;width:min(374px,94vw);display:none;flex-direction:column;
  background:var(--glass-hi);-webkit-backdrop-filter:blur(26px) saturate(var(--sat));backdrop-filter:blur(26px) saturate(var(--sat));
  border-left:1px solid var(--edge);box-shadow:-18px 0 48px rgba(58,24,30,.16)}
.waDockHead{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.waDockHead b{font-size:15px}
.waDockBody{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px}
.waDockList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.waDockChatHead{display:flex;gap:8px;align-items:center;padding:2px 2px 9px;border-bottom:1px solid var(--line);
  margin-bottom:8px;flex:0 0 auto}
.waDockMsgs{flex:1;min-height:0;max-height:none}
.waDockReplyBar{flex:0 0 auto;margin-top:8px}
/* on a laptop the CRM makes room; on a phone the panel slides over the top */
@media (min-width:1101px){ body.waDockOpen .main{margin-right:388px} }
body.dark #waDock{background:rgba(34,24,27,.92)}

/* WhatsApp-Web style avatars in the chat lists */
.waConvItem{display:flex;gap:10px;align-items:flex-start}
.waConvMain{flex:1;min-width:0}
.waAvatar{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:740;font-size:13.5px;letter-spacing:.02em;box-shadow:var(--shadow-1);margin-top:2px}

/* ---------- workspace chips + status tags + detail view ---------- */
.wsChips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.wsChip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  font-weight:640;font-size:12px;color:var(--ink-soft);background:var(--glass-hi);
  border:1px solid var(--edge);cursor:pointer;transition:all .15s var(--ease)}
.wsChip:hover{border-color:var(--brand-line);color:var(--ink)}
.wsChip.active{background:linear-gradient(140deg,#a02c3b,var(--brand-deep));color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(142,37,51,.24)}
.wsChip .smallnum{min-width:17px;height:17px;font-size:10px}
.wsChip.active .smallnum{background:rgba(255,255,255,.28);color:#fff}
.wsTags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.wsTag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;
  background:var(--glass-hi);color:var(--ink-soft);border:1px solid var(--edge);white-space:nowrap}
.wsTag.green{background:var(--green-tint);color:var(--green);border-color:var(--green-line)}
.wsTag.red{background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.wsTag.warmc{background:var(--amber-tint);color:var(--amber);border-color:var(--amber-line)}
.wsTag.purple{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-line)}
.wsTag.cold{background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
.wsTag.lost{background:rgba(120,98,102,.1);color:var(--muted)}
.wsDetail{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;min-height:40vh}
.wsDetailBox{background:var(--glass-hi);border:1px solid var(--edge);border-radius:16px;padding:14px}
.wsDetailBox h4{font-size:13px;font-weight:800;margin-bottom:8px}
.wsDetailBox .journeyList{max-height:340px}

/* the AI's story-so-far, pinned above the chat */
.waSum{background:var(--amber-tint);border:1px solid var(--amber-line);border-radius:14px;
  padding:10px 13px;margin-bottom:8px;flex:0 0 auto}
.waSumHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.waSumHead b{font-size:10.5px;letter-spacing:.08em;color:var(--amber)}
.waSumHead .muted{font-size:10.5px}
.waSumBody{font-size:12.8px;line-height:1.5;color:var(--ink-soft)}
body.dark .waSum{background:rgba(226,164,85,.12)}

/* 24-hour reply window state */
.waWinLive{color:var(--green);font-weight:740}
.waWinDead{color:var(--muted);font-weight:640}

/* ===== bottom-right pop cards: a new message announces itself ===== */
#waPops{position:fixed;right:16px;bottom:16px;z-index:1200;display:flex;flex-direction:column;gap:10px;
  max-width:min(340px,calc(100vw - 32px))}
.waPop{display:flex;gap:10px;align-items:flex-start;background:var(--card,#fff);border:1px solid var(--edge);
  border-left:4px solid var(--green);border-radius:16px;padding:11px 12px;cursor:pointer;
  box-shadow:0 16px 40px rgba(43,26,28,.22);animation:waPopIn .28s ease}
.waPop b{font-size:13px;display:block}
.waPopMain{flex:1;min-width:0}
.waPopBody{font-size:12.4px;color:var(--ink-soft);margin-top:2px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.waPopHint{font-size:10.5px;color:var(--muted);margin-top:3px}
.waPop .close{flex:0 0 auto}
@keyframes waPopIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.dark .waPop{background:#241a1c}

/* ===== the Unread page's three bands ===== */
.wsSec{position:sticky;top:0;z-index:5;margin:6px 0 2px;padding:7px 12px;border-radius:12px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;display:flex;justify-content:space-between;align-items:center}
.wsSec span{font-size:11px;background:rgba(255,255,255,.5);border-radius:999px;padding:1px 8px}
.wsSec.secRed{background:var(--red-tint);color:var(--red);border:1px solid var(--red-line)}
.wsSec.secGreen{background:var(--green-tint);color:var(--green);border:1px solid var(--green-line)}
.wsSec.secGrey{background:var(--glass-hi);color:var(--muted);border:1px solid var(--edge)}
body.dark .wsSec span{background:rgba(0,0,0,.25)}

/* ===== monthly target bars on the dashboard ===== */
.tgtRow{margin-top:12px}
.tgtTop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.6px;margin-bottom:5px}
.tgtTop b{font-size:12.4px}
.tgtBar{height:12px;border-radius:999px;background:var(--glass-hi);border:1px solid var(--edge);overflow:hidden}
.tgtBar i{display:block;height:100%;border-radius:999px;transition:width .5s ease}
.tgtBar i.low{background:linear-gradient(90deg,#d98a4e,var(--amber,#b97324))}
.tgtBar i.good{background:linear-gradient(90deg,#4f9e7d,var(--green))}
.tgtBar i.full{background:linear-gradient(90deg,var(--green),#1c8f60)}

/* the reply you just typed, on screen before the network answers */
.waBubble.waEcho{opacity:.55}
.waBubble.waEcho .waMeta{font-style:italic}

/* the facts the assistant is carrying about this patient */
.waSumFacts{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line,#e6d9dd);
  font-size:12px;line-height:1.5;color:var(--muted,#7a6b70)}
.waSumFacts b{font-size:10px;letter-spacing:.08em;color:var(--brand,#8d1b3d);margin-right:6px}


/* Today's category chips — unread first, red means humans needed */
.todayCats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tCat{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line,#e6d9dd);background:var(--card,#fff);cursor:pointer;font:inherit}
.tCat b{font-size:15px}
.tCat span{font-size:12px;color:var(--muted,#7a6b70)}
.tCat.on{border-color:#c9a227;background:rgba(201,162,39,.08)}
.tCat.hot{border-color:var(--brand,#8d1b3d);background:rgba(141,27,61,.07)}
.tCat.hot b{color:var(--brand,#8d1b3d)}

/* AI oversight list */
.aiwList{display:flex;flex-direction:column;gap:10px}
.aiwRow{display:grid;grid-template-columns:210px 1fr auto;gap:14px;align-items:center;
  padding:12px 16px;border:1px solid var(--line,#e6d9dd);border-radius:14px;background:var(--card,#fff)}
.aiwRow.waiting{border-color:var(--brand,#8d1b3d)}
.aiwBody{font-size:13px;line-height:1.5;white-space:pre-wrap}
.aiwActs{display:flex;flex-direction:column;gap:6px}
@media(max-width:820px){.aiwRow{grid-template-columns:1fr}}

/* ---------- FIT MODE — chat-style pages fill exactly one screen ----------
   The page itself never scrolls. The sidebar, the patient list, the chat and
   the patient file each scroll inside their own column, like an app. The
   same rules carry the layout from phone to tab to desktop. */
body.wsFit .main{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:12px 20px}
body.wsFit .top{flex:0 0 auto;margin-bottom:10px;padding:10px 18px}
body.wsFit .top h1{font-size:20px}
body.wsFit #content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.wsFit #content>.panel{flex:0 0 auto}
body.wsFit #content>.filters{flex:0 0 auto;margin-bottom:8px}
body.wsFit .waSplit{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch;overflow:hidden}
body.wsFit .waListCol{position:static;max-height:none;min-height:0}
body.wsFit .waList{min-height:0}
body.wsFit .waChatCol{min-height:0;overflow:hidden}
body.wsFit .waChatCol .waChat{min-height:0}
body.wsFit .waSum{max-height:118px;overflow-y:auto}
body.wsFit .waLeadCol{position:static;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
@media (max-width:900px){
  /* the nav card sits above; one swipe past it and the work area is one screen */
  body.wsFit .main{height:100vh;height:100dvh}
  body.wsFit .top{padding:10px 14px;gap:8px}
}
@media (max-width:820px){
  /* stacked like a phone app: list on top (a third of the screen), chat below */
  body.wsFit .waListCol{flex:0 0 34%;max-height:none}
  body.wsFit .waChatCol{flex:1 1 auto;min-height:0}
}

/* ---------- Sidebar: logo on top and Logout at the bottom are ALWAYS on
   screen. Only the menu list in between scrolls — and with the compact
   spacing below it normally fits whole, so it only actually scrolls once
   More / Admin is opened. ---------- */
@media (min-width:901px){
  .side{overflow:hidden}
  .side .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;margin-right:-6px;padding-right:6px;gap:4px}
  .side .userBox{flex:0 0 auto;margin-top:10px}
  .nav button{padding:8.5px 12px;font-size:13.5px;border-radius:12px}
  .navMore>summary{padding:8.5px 12px;font-size:13.5px}
  .sideLogo{padding-bottom:12px;margin-bottom:8px}
}
/* shorter laptop screens: squeeze a little more so the list fits closed */
@media (min-width:901px) and (max-height:840px){
  .side{padding:14px 12px 16px}
  .sideLogo{padding-bottom:9px;margin-bottom:6px}
  .side .nav{gap:3px}
  .nav button{padding:5.5px 11px;font-size:12.8px;border-radius:10px}
  .navMore>summary{padding:6px 11px;font-size:12.8px}
  .navMore{margin-top:4px;padding-top:5px}
  .side .userBox{padding:9px 12px;margin-top:8px}
  .userBox b{font-size:13px}
}

/* ---------- FIT MODE: the right-hand patient box, condensed so the whole
   file sits on screen with no scrolling of its own ---------- */
body.wsFit .waLeadCard{padding:10px 12px}
body.wsFit .waLeadCard .inq{font-size:9.5px}
body.wsFit .waLeadCard .leadName{font-size:15.5px}
body.wsFit .waLeadCard .chips{gap:4px;margin:4px 0}
body.wsFit .waLeadCard .chip{padding:2px 8px;font-size:10.5px}
body.wsFit .waLeadCard .next{padding:6px 9px;font-size:11.5px;margin:6px 0}
body.wsFit .waLeadCard .tfRowA{margin:6px 0}
body.wsFit .waLeadCard .primaryWork{padding:8px 12px;font-size:12.5px;border-radius:12px;
  box-shadow:0 8px 18px rgba(142,37,51,.22)}
body.wsFit .waLeadCard .tdeDayTag{font-size:10.5px;padding:3px 8px}
body.wsFit .waLeadCard .kvList{margin-top:6px}
body.wsFit .waLeadCard .kvRow{padding:3.5px 0;font-size:11.6px;gap:10px}
body.wsFit .waLeadCard .actions{gap:5px;margin-top:8px}
body.wsFit .waLeadCard .actions .btn{font-size:11.3px;padding:5px 8px;border-radius:9px}
body.wsFit .waLeadCard .help{font-size:10.5px}

/* the photos and PDFs patients send — shown as themselves in the chat */
.waImg{max-width:230px;max-height:280px;border-radius:12px;display:block;border:1px solid var(--hair)}
.waDoc{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:11px;
  background:var(--glass-hi);border:1px solid var(--edge);font-weight:640;font-size:12.8px;color:var(--ink);text-decoration:none}
.waDoc:hover{border-color:var(--brand-line)}
.waDoc .muted{font-size:10.5px}

/* ---------- PHONE — it feels like WhatsApp ----------
   The sidebar becomes one dropdown, the category pills become one dropdown,
   the top bar shrinks to a single line, and the patient LIST fills the
   screen. Tapping a patient slides the chat over the whole screen; the
   arrow in the chat header brings the list back. */
.navSelect{display:none}
.pillsSelect{display:none}
.waBack{display:none}
@media (max-width:900px){
  .side{padding:10px 12px;margin:8px 8px 0}
  .sideLogo{padding:0 0 8px;margin-bottom:6px}
  .sideLogo .txtWordmark b{font-size:1rem}
  .nav button,.navMore{display:none}
  .navSelect{display:block;width:100%;padding:11px 12px;border-radius:12px;font-size:14.5px;font-weight:660;
    background:var(--glass-hi);border:1px solid var(--hair);color:var(--ink)}
  .userBox{margin-top:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
  .userBox b{font-size:12.5px;display:inline}
  .userBox .roleBadge{margin-top:0}
  /* on the phone, Log out lives inside the menu dropdown under Account */
  .userBox .actions{display:none}
}
@media (max-width:820px){
  body.wsFit .main{padding:8px 10px 10px}
  body.wsFit .top{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;margin-bottom:8px}
  body.wsFit .top h1{font-size:15.5px}
  body.wsFit .top #subtitle,body.wsFit .top .muted{display:none}
  body.wsFit .topSearch{display:none}
  body.wsFit .top .btn,body.wsFit .addLeadBig{padding:6px 10px;font-size:12px}
  body.wsFit #content>.panel{display:none}
  body.wsFit #content>.filters{display:none}
  body.wsFit .pillsSelect{display:block;width:100%;margin:0 0 8px;padding:11px 12px;border-radius:12px;
    font-size:14.5px;font-weight:660;background:var(--glass-2);border:1px solid var(--hair);color:var(--ink);flex:0 0 auto}
  /* ONE panel at a time: the list… */
  body.wsFit .waSplit{display:block;overflow:hidden}
  body.wsFit .waListCol{display:flex;height:100%;max-height:none;flex:none;position:static}
  body.wsFit .waChatCol{display:none}
  body.wsFit .waLeadCol{display:none}
  /* …or, once a patient is tapped, the chat IS the phone: the sidebar, the
     page header, the pills — everything else steps out of the way */
  body.waMobileChat.wsFit .waListCol{display:none}
  body.waMobileChat.wsFit .waChatCol{display:flex;height:100%;min-height:0;overflow:hidden;border-radius:0}
  body.waMobileChat.wsFit .side{display:none}
  body.waMobileChat.wsFit .top{display:none}
  body.waMobileChat.wsFit .main{padding:0;height:100vh;height:100dvh}
  body.waMobileChat.wsFit #content>*:not(.waSplit){display:none!important}
  body.waMobileChat.wsFit .waSplit{height:100%;border-radius:0;border-left:0;border-right:0}
  .waBack{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;
    border:1px solid var(--hair);background:var(--glass-hi);font-size:17px;margin-right:8px;flex:0 0 auto;color:var(--ink)}
  .waChatHead{flex-wrap:nowrap}
  .waChatHead .actions{flex-wrap:nowrap}
}

/* ---- the clinic calendar: seven columns, the AI's own board ---- */
.calWeek{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:start}
.calDayCol{background:rgba(255,255,255,.92);border:1px solid var(--brand-line);border-radius:14px;padding:8px;min-height:120px}
body.dark .calDayCol{background:rgba(40,28,31,.92)}
.calDayCol.isToday{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft) inset}
.calDayHead{font-size:.74rem;font-weight:760;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);margin:2px 2px 8px}
.calEv{border-radius:9px;padding:5px 7px;font-size:.78rem;line-height:1.3;margin-bottom:5px;border:1px solid transparent;word-break:break-word}
.calEv b{font-weight:740}
.calEv.bts{background:rgba(30,125,79,.12);border-color:rgba(30,125,79,.35);cursor:pointer}
.calEv.bts:hover{background:rgba(30,125,79,.2)}
.calEv.gcal{background:var(--glass-2);border-color:var(--brand-line);color:var(--ink-soft)}
.calFreeDay{font-size:.78rem;color:var(--muted);padding:6px 4px}
@media (max-width:1100px){.calWeek{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.calWeek{grid-template-columns:repeat(2,1fr)}}

/* template insert row above the reply box — active-window template picking */
.waTplRow{display:flex;align-items:center;gap:8px;margin:6px 0 4px}
.waTplRow select{flex:0 1 260px;max-width:60%}
.waTplRow .help{font-size:11px;margin:0}

/* ===== the AI Flow board — the reply pipeline as nodes ===== */
.flowWrap{padding:4px 2px 30px}
.flowWrap.fDrop{outline:3px dashed var(--wine,#8c2332);outline-offset:6px;border-radius:14px}
.fRow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.fnode{flex:1 1 240px;min-width:230px;background:#fff;border:1px solid #eadfdb;border-radius:12px;padding:12px 14px;box-shadow:0 1px 4px rgba(60,20,25,.05);position:relative}
.fnode h4{margin:2px 0 4px;font-size:.95rem}
.fnode p{margin:0 0 6px;font-size:.8rem;color:#8a6f6c;line-height:1.45}
.fnode.in{border-left:4px solid #14724a}
.fnode.out{border-left:4px solid #14724a;background:#f4fbf6}
.fnode.guard{border-left:4px solid #8c2332}
.fnode.book{border-left:4px solid #2b6cb0}
.fnode.call{border-left:4px solid #8a5a12}
.fnode.human{border-left:4px solid #8c2332}
.fnode.watch{border-left:4px solid #6b5a8e}
.fnode.tpls{border-left:4px solid #b3948f}
.fnTag{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.12em;background:#f4e9e6;color:#7d1f2e;border-radius:4px;padding:2px 7px;margin-bottom:4px}
.fnSet{border-top:1px dashed #eadfdb;padding-top:8px;margin-top:4px}
.fnRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;font-size:.78rem;color:#5c4340}
.fnRow input,.fnRow select{max-width:150px;font-size:.8rem;padding:5px 8px}
.fnRow input[type=number]{max-width:80px}
.fnRow.full{flex-direction:column;align-items:stretch}
.fnRow.full textarea{width:100%;font-size:.8rem}
.fnFixed{border-top:1px dashed #eadfdb;padding-top:8px;margin-top:4px;font-size:.72rem;color:#14724a;font-weight:700;letter-spacing:.04em}
.fLink{align-self:center;color:#c9a9a3;font-size:1.3rem;font-weight:700;padding:0 2px}
.fArrow{text-align:center;color:#c9a9a3;font-size:1.25rem;font-weight:700;padding:6px 0}
.fBranchBar{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8c2332;background:#f9edea;border:1px dashed #e6c8c2;border-radius:999px;padding:6px 14px;margin:2px auto 12px;width:fit-content}
.fSideBar{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.fSideBar .fnode{flex:1 1 300px}
@media(max-width:820px){.fLink{display:none}.fnode{min-width:100%}}