:root{
  --ink:#1b2733; --ink-2:#3d4d5c; --muted:#8496a6; --muted-2:#a7b6c2;
  --line:#e3e9ef; --line-2:#eef2f6;
  --bg:#f7f9fb; --card:#fff;
  --accent:#9fc9e4; --accent-deep:#5b9dc9; --accent-ink:#2c6b96; --accent-bg:#e7f1f9;
  --track:#eef3f7;
  --crit:#c0564d; --crit-bg:#fbeceb; --warn:#b4823a; --warn-bg:#fdf4e7;
  --ok:#3f7d5c; --ok-bg:#ecf5f0;
  --radius:10px;
  --shadow:0 1px 2px rgba(27,39,51,.04),0 1px 3px rgba(27,39,51,.03);
  --shadow-lg:0 8px 28px rgba(27,39,51,.12),0 2px 8px rgba(27,39,51,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:400 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

/* ============ LANDING / LOGIN ============ */
.auth{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.auth-brand{
  background:linear-gradient(160deg,#22506e 0%,#2c6b96 52%,#3d84ad 100%);
  color:#fff;display:flex;align-items:center;padding:56px 52px;
}
.auth-brand-inner{max-width:520px}
.auth-logo{font-size:30px;font-weight:700;letter-spacing:-.5px;margin-bottom:10px}
.auth-tag{font-size:14.5px;color:#cfe3f1;letter-spacing:.2px;margin:0 0 30px}
.auth-lede{font-size:16px;line-height:1.6;color:#e8f2f9;margin:0 0 34px;max-width:44ch}
.auth-list{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-direction:column;gap:15px}
.auth-list li{display:flex;flex-direction:column;gap:2px;padding-left:16px;position:relative}
.auth-list li::before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:99px;background:#9fc9e4;
}
.auth-list b{font-size:14.5px;font-weight:600}
.auth-list span{font-size:13px;color:#bcd7e8}
.auth-foot{font-size:12.5px;color:#a9c9de;margin:0;letter-spacing:.2px}

.auth-form{display:flex;align-items:center;justify-content:center;padding:48px 40px;background:var(--card)}
.auth-form-inner{width:100%;max-width:430px}
.auth-form h1{margin:0 0 8px;font-size:27px;font-weight:700;letter-spacing:-.4px}
.auth-sub{margin:0 0 26px;color:var(--muted);font-size:13.5px;line-height:1.55}
.role-label{
  font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 8px;
}
.roles{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.role{
  display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid var(--line);background:var(--card);border-radius:9px;padding:12px 14px;
  cursor:pointer;transition:border-color .12s,background .12s;
}
.role:hover{border-color:var(--muted-2)}
.role.on{border-color:var(--accent-deep);background:var(--accent-bg)}
.role-av{
  width:34px;height:34px;border-radius:99px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--line-2);color:var(--ink-2);font-size:12px;font-weight:700;
}
.role.on .role-av{background:var(--accent-deep);color:#fff}
.role-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.role-txt b{font-size:14.5px;font-weight:600}
.role-txt i{font-style:normal;font-size:12.5px;color:var(--muted)}
.role-txt em{font-style:normal;font-size:12px;color:var(--muted-2);line-height:1.45;margin-top:3px}
.auth-go{width:100%;padding:12px;font-size:15px}
.auth-note{margin:14px 0 0;font-size:12.5px;color:var(--muted-2);text-align:center}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-brand{padding:38px 26px}
  .auth-list{gap:11px}
  .auth-form{padding:34px 22px}
}

/* ============ APP SHELL ============ */
.app{display:flex;min-height:100vh}

.side{
  width:238px;flex:0 0 238px;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{padding:22px 22px 16px;font-size:16px;font-weight:700;letter-spacing:-.2px;cursor:pointer}
.brand span{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.4px;margin-top:3px}
.nav{padding:8px 12px 12px;display:flex;flex-direction:column;gap:1px;flex:1}
.nav button{
  display:block;width:100%;text-align:left;padding:10px 14px;border:0;background:none;
  border-radius:8px;color:var(--ink-2);font-size:14.5px;cursor:pointer;transition:background .12s,color .12s;
}
.nav button:hover{background:var(--line-2);color:var(--ink)}
.nav button.on{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.side-foot{padding:12px;border-top:1px solid var(--line-2)}
.signout{
  width:100%;text-align:left;padding:10px 14px;border:0;background:none;border-radius:8px;
  color:var(--muted);font-size:14px;cursor:pointer;transition:background .12s,color .12s;
}
.signout:hover{background:var(--crit-bg);color:var(--crit)}

.navscrim{position:fixed;inset:0;background:rgba(27,39,51,.38);z-index:29}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;padding:14px 30px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.burger{display:none;border:0;background:none;font-size:19px;color:var(--ink-2);cursor:pointer;
  padding:5px 9px;border-radius:7px;line-height:1}
.burger:hover{background:var(--line-2)}
.crumb{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.crumb h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.crumb .up{border:0;background:none;color:var(--muted);cursor:pointer;font-size:19px;padding:2px 7px;
  border-radius:7px;line-height:1}
.crumb .up:hover{background:var(--line-2);color:var(--ink)}

.search{position:relative}
.search input{
  width:200px;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--bg);
  font-size:13.5px;color:var(--ink);outline:none;transition:width .15s,border-color .12s;
}
.search input:focus{width:270px;border-color:var(--accent);background:var(--card)}
.search input::placeholder{color:var(--muted-2)}
.sresults{
  position:absolute;top:42px;right:0;width:330px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;z-index:40;
}
.sresults .r{padding:11px 15px;cursor:pointer;border-bottom:1px solid var(--line-2);font-size:13.5px}
.sresults .r:last-child{border-bottom:0}
.sresults .r:hover{background:var(--accent-bg)}
.sresults .r b{display:block;color:var(--ink)}
.sresults .r i{font-style:normal;color:var(--muted);font-size:12px}
.sresults .empty{padding:14px 15px;color:var(--muted);font-size:13px}

.pill{
  border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 16px;
  font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:border-color .12s,background .12s;white-space:nowrap;
}
.pill:hover{border-color:var(--muted-2);background:var(--bg)}
.pill.bell{position:relative;padding:8px 14px}
.pill .dot{
  position:absolute;top:4px;right:6px;width:15px;height:15px;border-radius:99px;background:var(--crit);
  color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;
}
.avatar{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--ink-2);background:var(--card);cursor:pointer;flex:0 0 auto;
}

.wrap{padding:24px 30px 40px;max-width:1720px;width:100%}
.ph{margin:0 0 2px;font-size:29px;font-weight:700;letter-spacing:-.6px}
.psub{margin:0 0 20px;color:var(--muted);font-size:14px}
.sub2{font-size:12px;color:var(--muted)}
.req{color:var(--crit)} .ok-label{color:var(--ok)}
.chiprow{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap}

/* ============ CARD ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h{padding:17px 20px 0}
.card-t{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink)}
.card-s{margin:5px 0 0;font-size:12.5px;color:var(--muted)}
.card-f{padding:11px 20px 16px;text-align:right}
.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.clickable:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(44,107,150,.09)}
.clickable:active{transform:translateY(1px)}

/* ============ KPI ============ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.kpi{padding:17px 20px 18px}
.kpi .lab{font-size:12.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-2)}
.kpi .val{font-size:32px;font-weight:700;letter-spacing:-1px;margin:7px 0 9px;line-height:1}
.kpi .meta{font-size:12.5px;color:var(--muted);line-height:1.65}
.kpi .meta b{color:var(--ink-2);font-weight:600}
.bar{height:4px;border-radius:99px;background:var(--track);overflow:hidden;margin-top:9px;display:block}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.3,1)}

/* ============ JOURNEY ROWS ============ */
.jlist{margin-top:12px}
.jrow{
  display:grid;grid-template-columns:160px 1fr 44px;align-items:center;gap:14px;
  padding:6px 20px;cursor:pointer;border-radius:6px;transition:background .1s;
}
.jrow:hover{background:var(--line-2)}
.jnm{font-size:14px;color:var(--ink-2)}
.jct{text-align:right;font-weight:700;font-size:14.5px}

/* ============ ROWS / LISTS ============ */
.rowlist{display:flex;flex-direction:column;gap:7px}
.rowbox{
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);
  border:1px solid var(--line-2);border-radius:7px;padding:11px 14px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.rowbox:hover{border-color:var(--accent);background:#f2f8fc}
.rowbox.static{cursor:default}
.rowbox.static:hover{border-color:var(--line-2);background:var(--bg)}
.rowbox .t{font-size:14px;color:var(--ink-2)}
/* branch picker: name on the left, a muted qualifier, then the state chip */
.rowbox .t{margin-right:auto}
.rowbox .sub{font-size:12px;color:var(--muted);white-space:nowrap}
.rowbox .n{font-weight:700;font-size:15px}

.sell-list{padding:13px 20px 0}
.sell{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--line-2);font-size:14px;
}
.sell:last-child{border-bottom:0}
.sell .nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sell .q{font-weight:700;text-align:right;min-width:26px}
.sell .rm{color:var(--ink-2);text-align:right;min-width:82px;font-variant-numeric:tabular-nums}

.lnk{
  color:var(--accent-ink);font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;
  border:0;background:none;padding:0;border-bottom:1px solid transparent;transition:border-color .12s;
}
.lnk:hover{border-bottom-color:var(--accent-ink)}

/* ============ TABLES ============ */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:12px 18px;
  border-bottom:1px solid var(--line-2);white-space:nowrap;
}
tbody td{padding:13px 18px;border-bottom:1px solid var(--line-2);font-size:14px;color:var(--ink-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.rowlink{cursor:pointer;transition:background .1s}
tbody tr.rowlink:hover{background:var(--accent-bg)}
td.nm{color:var(--ink);font-weight:500}
td.num{font-variant-numeric:tabular-nums}
td.skey{font-size:12.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tright{text-align:right}
.achv{display:flex;flex-direction:column;gap:6px;min-width:96px}
.achv .p{font-weight:600;color:var(--ink)}
.achv .bar{margin-top:0;width:92px}
.miniinput{width:72px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px}

/* ============ CHIPS / TAGS ============ */
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:.2px;white-space:nowrap}
.chip.blue{background:var(--accent-bg);color:var(--accent-ink)}
.chip.grey{background:var(--line-2);color:var(--ink-2)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.crit{background:var(--crit-bg);color:var(--crit)}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.tag.crit{color:var(--crit)} .tag.low{color:var(--warn)}

/* ============ BUTTONS ============ */
.btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:8px;
  padding:9px 16px;font-size:13.5px;cursor:pointer;transition:all .12s;white-space:nowrap;
}
.btn:hover{border-color:var(--muted-2);background:var(--bg)}
.btn.primary{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;font-weight:600}
.btn.primary:hover{background:#255d83;border-color:#255d83}
.btn.danger{color:var(--crit);border-color:#e8cdca}
.btn.danger:hover{background:var(--crit-bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}
.btnrow.stack{flex-direction:column;align-items:stretch}

.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button{
  font-size:12.5px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  border-radius:999px;padding:6px 15px;cursor:pointer;transition:all .12s;
}
.seg button:hover{border-color:var(--muted-2)}
.seg button.on{background:var(--accent-bg);border-color:#cfe3f1;color:var(--accent-ink);font-weight:600}

/* ============ LAYOUT ============ */
.grid2{display:grid;grid-template-columns:1.62fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-b{display:grid;grid-template-columns:1fr 1.72fr;gap:16px}
.mb16{margin-bottom:16px}
.flexh{display:flex;align-items:flex-start;gap:14px;padding:17px 20px 0;flex-wrap:wrap}
.flexh .card-t{flex:1;padding-top:3px;min-width:150px}
.pad{padding:18px 20px}
.padx{padding:0 20px 18px}

/* ============ APPOINTMENT BOOK ============ */
.bk-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.bk-nav{display:flex;align-items:center;gap:9px}
.bk-arrow{
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:7px;
  width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer;
}
.bk-arrow:hover{border-color:var(--muted-2);background:var(--bg)}
.bk-date{margin:0;font-size:23px;font-weight:700;letter-spacing:-.4px;white-space:nowrap}
.bk-date span{font-weight:400;color:var(--muted);font-size:17px;margin-left:9px}
.bk-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-left:auto}

.bk-shell{display:grid;grid-template-columns:176px 1fr;gap:16px;align-items:start}
.bk-side{display:flex;flex-direction:column;gap:12px}

.mini{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;
  box-shadow:var(--shadow)}
.mini-h{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px;text-align:center}
.mini-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mini-dow{font-size:9.5px;color:var(--muted-2);text-align:center;font-weight:600;padding-bottom:3px}
.mini-x{height:20px}
.mini-d{
  height:20px;border:0;background:none;border-radius:4px;font-size:11px;color:var(--ink-2);
  cursor:pointer;padding:0;transition:background .1s;
}
.mini-d:hover{background:var(--line-2)}
.mini-d.on{background:var(--accent-ink);color:#fff;font-weight:700}

.bk-legend{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;
  box-shadow:var(--shadow)}
.bk-lt{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px}
.bk-lr{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);padding:2.5px 0;line-height:1.3}
.bk-sw{width:10px;height:10px;border-radius:2px;flex:0 0 auto;border-left:3px solid}
.bk-sw.confirmed{background:var(--accent-bg);border-color:var(--accent-deep)}
.bk-sw.tentative{background:var(--warn-bg);border-color:var(--warn)}
.bk-sw.treatment{background:var(--ok-bg);border-color:var(--ok)}
.bk-sw.done{background:var(--line-2);border-color:var(--muted-2)}
.bk-sw.cancelled{background:var(--warn-bg);border-color:var(--muted-2)}
.bk-sw.noshow{background:var(--crit-bg);border-color:var(--crit)}

.bk-card{overflow:hidden;padding:0}
.bk-scroll{overflow-x:auto;overflow-y:visible}
.bk-grid{
  display:grid;
  grid-template-columns:52px 168px repeat(var(--cols),minmax(196px,1fr));
  min-width:max-content;
}
.bk-hcell{
  position:sticky;top:0;z-index:3;background:var(--card);padding:9px 10px;text-align:center;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line-2);
}
.bk-hcell b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bk-hcell small{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.bk-hcell.clickhead{cursor:pointer}
.bk-hcell.clickhead:hover{background:var(--line-2)}
.bk-n{color:var(--accent-ink);font-weight:700}
.bk-hwait{font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;gap:6px}
.bk-hwait span{background:var(--accent-bg);color:var(--accent-ink);border-radius:99px;padding:1px 7px;
  font-size:10.5px}

.bk-gutter{border-right:1px solid var(--line-2)}
.bk-t{
  display:flex;align-items:flex-start;justify-content:flex-end;gap:2px;padding:2px 7px 0 0;
  border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums;
}
.bk-t b{font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.1}
.bk-t span{font-size:9px;color:var(--muted-2);line-height:1.4}
.bk-t i{font-style:normal;font-size:9.5px;color:var(--muted-2)}

.bk-col{position:relative;border-right:1px solid var(--line-2)}
.bk-slot{border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .1s}
.bk-slot:nth-child(2n){background:rgba(238,242,246,.38)}
.bk-slot:hover{background:var(--accent-bg)}

.bk-appt{
  position:absolute;border-radius:5px;border-left:3px solid;padding:4px 7px;overflow:hidden;
  cursor:pointer;font-size:11.5px;line-height:1.35;transition:box-shadow .12s,transform .1s;z-index:2;
}
.bk-appt:hover{box-shadow:0 4px 14px rgba(27,39,51,.18);transform:translateY(-1px);z-index:4}
.bk-appt b{display:block;font-weight:600;color:var(--ink);font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bk-appt i{display:block;font-style:normal;color:var(--ink-2);font-size:10.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bk-appt i.ph2{color:var(--muted)}
.bk-appt i.sku{color:var(--ink-2);font-weight:500;margin-top:2px}
.bk-appt i.mem{color:var(--warn);font-weight:600}
.bk-appt.confirmed{background:var(--accent-bg);border-color:var(--accent-deep)}
.bk-appt.tentative{background:var(--warn-bg);border-color:var(--warn)}
.bk-appt.treatment{background:var(--ok-bg);border-color:var(--ok)}
.bk-appt.done{background:var(--line-2);border-color:var(--muted-2)}
.bk-appt.cancelled{background:var(--warn-bg);border-color:var(--muted-2);opacity:.6}
.bk-appt.noshow{background:var(--crit-bg);border-color:var(--crit)}

/* one visit = up to two slots; the column header already says BC or AT */
.bk-appt i.link{color:var(--accent-ink);font-weight:600;margin-top:2px}
.bk-appt i.lost{color:var(--crit);font-weight:600;margin-top:2px}
.bk-appt i.pend{color:var(--warn);font-weight:600;margin-top:2px}
.bk-appt.paired{box-shadow:0 0 0 2px var(--accent-ink),0 4px 14px rgba(27,39,51,.18);z-index:5}

.bk-vsum{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 18px;
}
.bk-vt{font-size:13.5px;font-weight:600;color:var(--ink)}
.bk-vs{
  font-size:12px;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);
  border-radius:999px;padding:4px 11px;white-space:nowrap;
}
.bk-vs b{font-weight:700;color:var(--ink);margin-left:3px}
.bk-vs.bc\+at{border-color:#cfe3f1;background:var(--accent-bg);color:var(--accent-ink)}
.bk-vs.at-only{border-color:#cfe0d4;background:var(--ok-bg);color:var(--ok)}
.bk-vs.bc-pending{border-color:#efdcbe;background:var(--warn-bg);color:var(--warn)}
.bk-vs.bc-only{border-color:#eccfcc;background:var(--crit-bg);color:var(--crit)}
.bk-vnote{font-size:12px;color:var(--muted);margin-left:auto;max-width:44ch;line-height:1.45}

/* ============ APPOINTMENT INFO POPOVER ============ */
.pv{
  position:fixed;z-index:150;width:326px;max-width:94vw;max-height:88vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-lg);
  animation:pvin .13s;
}
@keyframes pvin{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
.pv-h{
  display:flex;align-items:center;gap:10px;padding:13px 15px 11px;border-bottom:1px solid var(--line-2);
}
.pv-h b{flex:1;font-size:15px;font-weight:700;letter-spacing:-.2px}
.pv-x{
  border:0;background:none;color:var(--crit);font-size:22px;line-height:1;cursor:pointer;
  padding:0 4px;border-radius:5px;
}
.pv-x:hover{background:var(--crit-bg)}
.pv-time{
  padding:11px 15px;font-size:16px;font-weight:600;color:var(--accent-ink);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line-2);
}
.pv-time span{font-size:13px;font-weight:400;color:var(--muted)}
.pv-time i{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:3px;
  color:#fff;margin-left:auto;
}
.pv-time i.bc{background:var(--accent-deep)} .pv-time i.at{background:var(--ok)}

.pv-b{padding:11px 15px 14px}
.pv-row{display:grid;grid-template-columns:20px 74px 1fr;gap:8px;align-items:center;padding:5px 0}
.pv-i{font-size:13px;color:var(--muted-2);text-align:center;line-height:1}
.pv-l{font-size:11.5px;color:var(--muted);font-weight:500}
.pv-v{min-width:0}
.pv-v select,.pv-v input{
  width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  font:inherit;font-size:12.5px;color:var(--ink);outline:none;
}
.pv-v select:focus,.pv-v input:focus{border-color:var(--accent)}
.pv-t{font-size:12.5px;color:var(--ink-2);display:block;overflow:hidden;text-overflow:ellipsis}
.pv-dim{color:var(--muted-2)}
.pv-link{
  border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--accent-ink);font-weight:600;
  cursor:pointer;text-align:left;border-bottom:1px solid transparent;
}
.pv-link:hover{border-bottom-color:var(--accent-ink)}
.pv-mem{font-size:11.5px;font-weight:700;letter-spacing:.2px}
.pv-mem.silver{color:#6b7d89} .pv-mem.gold{color:var(--warn)} .pv-mem.platinum{color:var(--accent-ink)}

.pv-com{
  margin:9px 0 4px;padding:9px 11px;border-radius:7px;font-size:11.5px;line-height:1.45;
  border-left:3px solid;
}
.pv-com b{display:block;font-size:12px;margin-bottom:2px}
.pv-com .pv-sub{display:block;color:var(--muted);margin-top:4px;font-size:10.5px}
.pv-com.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.pv-com.pend{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.pv-com.no{background:var(--line-2);border-color:var(--muted-2);color:var(--ink-2)}


.pv-warn{
  margin-top:10px;background:var(--crit-bg);color:var(--crit);border-radius:6px;padding:7px 10px;
  font-size:11.5px;font-weight:600;
}
.pv-f{
  display:flex;gap:6px;padding:11px 15px;border-top:1px solid var(--line-2);background:var(--bg);
  border-radius:0 0 11px 11px;
}
.pv-f button{
  flex:1;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:6px 4px;border-radius:6px;
}
.pv-save{color:var(--accent-ink)} .pv-save:hover{background:var(--accent-bg)}
.pv-det{color:var(--ink-2)} .pv-det:hover{background:var(--line-2)}
.pv-cancel{color:var(--crit)} .pv-cancel:hover{background:var(--crit-bg)}

/* ---- card icon strip: only what applies to this customer ---- */
.bk-ic{position:absolute;top:3px;right:4px;display:flex;gap:2px;align-items:center;z-index:3}
.ic{
  font-style:normal;font-size:8.5px;font-weight:700;line-height:1;min-width:12px;height:12px;
  padding:0 2px;border-radius:3px;display:grid;place-items:center;cursor:help;letter-spacing:-.2px;
}
.ic.g-female{background:#fbe8ef;color:#a8467a;font-size:10px}
.ic.g-male{background:#e4eefb;color:#2f6ba8;font-size:10px}
.ic.m-silver{background:#eceff1;color:#67787f;font-size:9px}
.ic.m-gold{background:#fdf2dc;color:#9a6c1c;font-size:9px}
.ic.m-platinum{background:#e9e7fb;color:#5646a8;font-size:9px}
.ic.req{background:#fdf2dc;color:#9a6c1c;font-size:9.5px}
.ic.bd{background:#fbe8ef;color:#a8467a;font-size:9.5px}
.ic.bd.now{background:#a8467a;color:#fff}
.ic.bal{background:#fbe6e4;color:#a8352b;font-size:10px}
.ic.warn{background:var(--crit);color:#fff;font-size:9.5px}
.ic.j{font-size:8px;letter-spacing:0;min-width:15px}
.ic.j-dry  {background:#dff0f2;color:#1f6a72}
.ic.j-acne {background:#fbe6e4;color:#a8352b}
.ic.j-pig  {background:#f7ece0;color:#8a5a26}
.ic.j-scar {background:#ece7f6;color:#5a44a0}
.ic.j-maint{background:#e4f1e9;color:#2f6b4c}
.ic.j-anti {background:#e4eaf8;color:#33499c}

/* the strip sits where the name would run, so keep the name clear of it */
.bk-appt b{padding-right:4px}

/* popover extras */
.pv-bd{font-size:12px;font-weight:600;color:#a8467a}
.pv-bd.now{background:#a8467a;color:#fff;padding:2px 8px;border-radius:999px;font-size:11.5px}
.pv-bal{font-size:14px;font-weight:700;color:var(--crit);font-variant-numeric:tabular-nums}
.pv-sub2{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.pv-collect{
  margin-top:5px;border:1px solid var(--crit);background:var(--crit-bg);color:var(--crit);
  border-radius:6px;padding:4px 10px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
}
.pv-collect:hover{background:var(--crit);color:#fff}
.pv-j{font-size:12px;font-weight:600}
.pv-j.j-dry{color:#1f6a72} .pv-j.j-acne{color:#a8352b} .pv-j.j-pig{color:#8a5a26}
.pv-j.j-scar{color:#5a44a0} .pv-j.j-maint{color:#2f6b4c} .pv-j.j-anti{color:#33499c}

/* icon key in the sidebar */
.bk-key{display:flex;flex-direction:column;gap:5px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2)}
.bk-kr{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-2);line-height:1.3}

/* drag to reassign, drag the bottom edge to change duration */
.bk-appt{touch-action:none}
.bk-resize{
  position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize;
  border-radius:0 0 4px 4px;
}
.bk-resize::after{
  content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:22px;height:2px;border-radius:2px;background:var(--muted-2);opacity:0;transition:opacity .12s;
}
.bk-appt:hover .bk-resize::after{opacity:.75}
.bk-appt.resizing{box-shadow:0 0 0 2px var(--accent-deep);z-index:7;overflow:visible}
.bk-dur{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);z-index:8;
  background:var(--accent-ink);color:#fff;font-size:10px;font-weight:600;padding:2px 8px;
  border-radius:4px;white-space:nowrap;pointer-events:none;
}
.bk-appt.dragging{opacity:.35;pointer-events:none}
.bk-ghost{
  position:fixed;z-index:300;pointer-events:none;background:var(--card);
  border:1px solid var(--accent-deep);border-left:3px solid var(--accent-deep);border-radius:5px;
  padding:6px 10px;box-shadow:var(--shadow-lg);font-size:11.5px;max-width:190px;
}
.bk-ghost b{display:block;font-size:12px;font-weight:600;color:var(--ink)}
.bk-ghost i{display:block;font-style:normal;font-size:10.5px;color:var(--muted)}
.bk-col.droptarget{background:rgba(231,241,249,.5)}
.bk-dropline{
  position:absolute;left:2px;right:2px;border:2px dashed var(--accent-deep);border-radius:5px;
  background:rgba(159,201,228,.22);z-index:6;pointer-events:none;display:flex;
  align-items:flex-start;justify-content:center;
}
.bk-dropline span{
  background:var(--accent-ink);color:#fff;font-size:10px;font-weight:600;padding:1px 7px;
  border-radius:0 0 4px 4px;white-space:nowrap;
}

.movebox{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.mb-from,.mb-to{
  flex:1;min-width:130px;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:10px 13px;
}
.mb-to{border-color:#cfe3f1;background:var(--accent-bg)}
.mb-from span,.mb-to span{
  display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
}
.mb-from b,.mb-to b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-top:3px}
.mb-from i,.mb-to i{display:block;font-style:normal;font-size:12px;color:var(--ink-2);margin-top:1px}
.mb-arrow{font-size:19px;color:var(--muted-2)}

.bk-wait{background:rgba(238,242,246,.5);padding:5px}
.bk-wcard{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--muted-2);border-radius:5px;
  padding:6px 8px;margin-bottom:6px;cursor:pointer;font-size:11.5px;line-height:1.35;
  transition:border-color .12s,box-shadow .12s;
}
.bk-wcard:hover{border-left-color:var(--accent-deep);box-shadow:0 3px 10px rgba(44,107,150,.12)}
.bk-wcard b{display:block;font-weight:600;color:var(--ink);font-size:12px}
.bk-wcard i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-2)}
.bk-wcard i.ph2{color:var(--muted)}
.bk-wcard i.sku{font-weight:500;margin-top:2px}
.bk-wcard i.wnote{color:var(--muted-2);font-size:10px;margin-top:2px;white-space:normal}
.bk-wempty{color:var(--muted-2);font-size:11.5px;text-align:center;padding:14px 4px}

.bk-blocked{
  position:absolute;left:2px;right:2px;background:repeating-linear-gradient(135deg,
    var(--line-2) 0 6px, rgba(255,255,255,.75) 6px 12px);
  border:1px solid var(--line);border-radius:5px;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
.bk-blocked span{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.3px}
.bk-blocked small{font-size:9.5px;color:var(--muted-2)}

/* ============ CALENDAR (legacy grid) ============ */
.calgrid{
  display:grid;grid-template-columns:66px repeat(var(--cols),minmax(150px,1fr));
  border-top:1px solid var(--line-2);overflow-x:auto;
}
.calhead{
  position:sticky;top:0;background:var(--card);z-index:2;padding:11px 10px;font-size:12.5px;
  font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-2);text-align:center;
}
.calhead.clickhead{cursor:pointer}
.calhead.clickhead:hover{background:var(--line-2)}
.calhead small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;margin-top:2px}
.caltime{
  padding:7px 9px;font-size:11.5px;color:var(--muted);border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);text-align:right;font-variant-numeric:tabular-nums;
}
.calcell{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:3px;
  min-height:46px;transition:background .1s}
.calcell[data-act]{cursor:pointer}
.calcell:hover{background:var(--bg)}
.appt{
  border-radius:6px;padding:6px 8px;font-size:12px;cursor:pointer;border-left:3px solid;line-height:1.3;
  transition:transform .1s,box-shadow .12s;
}
.appt:hover{transform:translateY(-1px);box-shadow:0 3px 9px rgba(27,39,51,.13)}
.appt b{display:block;font-weight:600;color:var(--ink)}
.appt i{font-style:normal;color:var(--ink-2);font-size:11.5px}
.appt.confirmed{background:var(--accent-bg);border-color:var(--accent-deep)}
.appt.tentative{background:var(--warn-bg);border-color:var(--warn)}
.appt.treatment{background:var(--ok-bg);border-color:var(--ok)}
.appt.done{background:var(--line-2);border-color:var(--muted-2)}

/* ============ QUEUE ============ */
.queue{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;overflow-x:auto}
.qcol{background:var(--bg);border:1px solid var(--line-2);border-radius:9px;padding:11px;min-width:158px}
.qcol h4{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-2)}
.qcol h4 span{float:right;color:var(--muted);font-weight:600}
.qcard{
  background:var(--card);border:1px solid var(--line);border-radius:7px;padding:10px 11px;margin-bottom:8px;
  cursor:pointer;font-size:13px;transition:border-color .12s,box-shadow .12s;
}
.qcard:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(44,107,150,.1)}
.qcard b{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}
.qcard i{font-style:normal;color:var(--muted);font-size:11.5px}
.qempty{color:var(--muted-2);font-size:12.5px;padding:6px 2px}

/* ============ TABS ============ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{
  border:0;background:none;padding:11px 16px;font-size:14px;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;transition:color .12s,border-color .12s;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent-ink);font-weight:600}

/* ============ PROFILE ============ */
.phead{display:flex;gap:18px;align-items:flex-start;padding:20px;flex-wrap:wrap}
.pavatar{
  width:62px;height:62px;border-radius:999px;background:var(--accent-bg);color:var(--accent-ink);
  display:grid;place-items:center;font-size:21px;font-weight:700;flex:0 0 auto;
}
.pinfo{flex:1;min-width:210px}
.pinfo h2{margin:0 0 5px;font-size:22px;font-weight:700;letter-spacing:-.4px}
.pmeta{color:var(--muted);font-size:13.5px;line-height:1.7}
.pstats{display:flex;gap:26px;flex-wrap:wrap;padding:0 20px 20px}
.pstat .l{font-size:11.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.pstat .v{font-size:17px;font-weight:700;margin-top:3px}

.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px;align-items:baseline}
.dl dt{color:var(--muted);white-space:nowrap}
.dl dd{margin:0;color:var(--ink-2)}

/* ============ FORM ============ */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font:inherit;font-size:13.5px;color:var(--ink);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:76px;resize:vertical}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

/* ============ JOURNEY PHASE ============ */
.phase{display:flex;gap:10px;flex-wrap:wrap}
.pbox{
  flex:1;min-width:150px;border:1px solid var(--line);border-radius:9px;padding:13px 14px;
  transition:all .12s;background:var(--card);
}
.pbox[data-go]{cursor:pointer}
.pbox[data-go]:hover{border-color:var(--accent)}
.pbox.on{border-color:var(--accent-deep);background:var(--accent-bg)}
.pbox .n{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.pbox.on .n{color:var(--accent-ink)}
.pbox .d{font-size:13.5px;color:var(--ink-2);margin-top:5px;line-height:1.4}

.steps{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.step .b{
  width:22px;height:22px;border-radius:99px;background:var(--line-2);color:var(--muted);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
}
.step.done .b{background:var(--ok-bg);color:var(--ok)}
.step.on .b{background:var(--accent-ink);color:#fff}
.step.on{color:var(--ink);font-weight:600}
.step .arrow{margin:0 12px;color:var(--muted-2)}

/* ============ LEDGER ============ */
.led{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;flex-wrap:wrap}
.led:last-child{border-bottom:0}
.led .dt{color:var(--muted);min-width:92px;font-size:12.5px}
.led .ty{min-width:112px;font-weight:600;color:var(--ink)}
.led .qt{min-width:44px;font-weight:700;font-variant-numeric:tabular-nums}
.led .qt.neg{color:var(--crit)} .led .qt.pos{color:var(--ok)}
.led .rs{color:var(--muted-2);flex:1;min-width:160px}

/* ============ CHART ============ */
.grid-chart{display:grid;grid-template-columns:1.75fr 1fr;gap:16px;align-items:start}
.chartwrap{padding:14px 20px 18px}
.legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.lg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.lg i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.chartbox{position:relative}
.chart{width:100%;height:250px;display:block;cursor:crosshair;overflow:visible}
.ctick{font-size:10.5px;font-family:inherit}
.clabel{font-size:11px;font-weight:600;font-family:inherit}
.ctip{
  position:absolute;top:6px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  box-shadow:var(--shadow-lg);padding:10px 13px;font-size:12.5px;pointer-events:none;
  min-width:168px;display:flex;flex-direction:column;gap:4px;z-index:5;
}
.ctip b{color:var(--ink);font-weight:600}
.ctip > b:first-child{font-size:12px;margin-bottom:3px}
.ctip span{display:flex;align-items:center;gap:6px;color:var(--ink-2);justify-content:space-between}
.ctip span i{width:9px;height:9px;border-radius:2px;flex:0 0 auto;margin-right:auto}
.ctip span b{margin-left:auto;font-variant-numeric:tabular-nums}
.ctip .gap{color:var(--muted);font-size:11.5px;border-top:1px solid var(--line-2);padding-top:5px;margin-top:2px;
  justify-content:flex-start}
.ctip[hidden]{display:none!important}

.colrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;
  font-size:13.5px;color:var(--ink-2);
}
.colrow .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap}
.colrow .v.big{font-size:19px;font-weight:700}
.colrow.gap .v{color:var(--crit)}
.colsplit{height:1px;background:var(--line);margin:13px 0}
.scope{
  font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);
  background:var(--line-2);padding:2px 6px;border-radius:4px;margin-left:5px;vertical-align:middle;
}

tfoot td{
  padding:13px 18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);
  background:var(--bg);font-variant-numeric:tabular-nums;
}
tfoot td.nm{color:var(--ink);font-weight:600}

/* ============ FUNNEL ============ */
.funrow{display:grid;grid-template-columns:160px 1fr 120px;gap:14px;align-items:center;padding:7px 0}
.funrow.clickable-row{cursor:pointer;border-radius:6px}
.funrow.clickable-row:hover{background:var(--line-2)}
.funrow .fl{font-size:13.5px;color:var(--ink-2)}
.funrow .fv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* ============ REPORT CARDS ============ */
.rid{font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--muted)}
.rnm{font-size:16px;font-weight:700;margin:6px 0 7px;letter-spacing:-.2px}
.rds{font-size:13px;color:var(--muted);line-height:1.5}

/* ============ POS ============ */
.posgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.cartline{display:grid;grid-template-columns:1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.cartline:last-child{border-bottom:0}
.cartline .nm{font-weight:600;color:var(--ink);font-size:14px}
.cartline .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.cartline .amt{text-align:right;font-variant-numeric:tabular-nums}
.cartline .amt .orig{color:var(--muted-2);text-decoration:line-through;font-size:12.5px}
.cartline .amt .net{font-weight:700;font-size:15px}
.disc-note{font-size:12px;color:var(--crit);margin-top:2px}
.totrow{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;color:var(--ink-2);gap:12px}
.totrow.big{border-top:1px solid var(--line);margin-top:6px;padding-top:13px;font-size:17px;font-weight:700;color:var(--ink)}
.totrow .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.totrow.disc .v{color:var(--crit)}

/* ============ CHAT ============ */
.chatwrap{padding:18px 20px;max-height:460px;overflow-y:auto}
.msgrow{margin-bottom:14px;display:flex}
.msgrow.ai{justify-content:flex-end}
.msg{max-width:80%;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.5}
.msg.customer{background:var(--line-2);color:var(--ink)}
.msg.ai{background:var(--accent-bg);color:var(--ink)}
.msgmeta{font-size:11px;color:var(--muted);margin-top:5px}
.msgsys{font-size:11.5px;color:var(--accent-ink);margin-top:6px;padding-top:6px;border-top:1px solid #cfe3f1}

/* ============ MODAL / DRAWER ============ */
.backdrop{
  position:fixed;inset:0;background:rgba(27,39,51,.42);display:grid;place-items:center;z-index:100;
  padding:22px;animation:fade .14s;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card);border-radius:13px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;
  max-height:86vh;overflow-y:auto;animation:pop .16s;
}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.modal-h{padding:20px 22px 0;display:flex;align-items:flex-start;gap:14px}
.modal-h h3{margin:0;font-size:17px;font-weight:700;flex:1;letter-spacing:-.2px}
.modal-h .x,.drawer-h .x{
  border:0;background:none;color:var(--muted);font-size:21px;cursor:pointer;line-height:1;
  padding:2px 7px;border-radius:7px;
}
.modal-h .x:hover,.drawer-h .x:hover{background:var(--line-2);color:var(--ink)}
.modal-b{padding:16px 22px}
.modal-f{padding:14px 22px 20px;display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}

.drawer{
  position:fixed;top:0;right:0;width:394px;max-width:92vw;height:100vh;background:var(--card);
  border-left:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:110;overflow-y:auto;animation:slidein .18s;
}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.drawer-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}

/* ============ NOTES / STATES ============ */
.note{
  background:var(--accent-bg);border-left:3px solid var(--accent-deep);border-radius:8px;padding:11px 14px;
  font-size:13px;color:var(--accent-ink);line-height:1.55;
}
.note.warn{background:var(--warn-bg);border-left-color:var(--warn);color:var(--warn)}
.note.crit{background:var(--crit-bg);border-left-color:var(--crit);color:var(--crit)}
.note.ok{background:var(--ok-bg);border-left-color:var(--ok);color:var(--ok)}
.note b{font-weight:700}

/* ============ SESSION VIEW — both halves of one visit ============ */
.ses{border:1px solid var(--line);border-radius:11px;margin-bottom:18px;overflow:hidden;background:var(--card)}
.ses:last-child{margin-bottom:0}
.ses-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;
  background:var(--bg);border-bottom:1px solid var(--line)}
.ses-h b{font-size:14.5px;letter-spacing:-.2px}

.ses-body{display:grid;grid-template-columns:1fr 1fr}
.ses-side{padding:16px;border-right:1px solid var(--line-2)}
.ses-side:last-child{border-right:0}
.ses-side-h{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;
  padding-bottom:7px;border-bottom:1px solid var(--line-2)}
.ses-side-h b{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-ink)}
.ses-side-h span{font-size:12.5px;color:var(--muted)}

.ses-note{border-left:2px solid var(--line);padding:2px 0 2px 12px;margin-bottom:14px}
.ses-note:last-child{margin-bottom:0}
.ses-note.customer{border-left-color:var(--line)}
/* the consultant's word to the customer is the one that commits the clinic */
.ses-note.advice{border-left-color:var(--ok);border-left-width:3px}

.ses-warn{margin:0 16px 16px;background:var(--crit-bg);border-left:3px solid var(--crit);
  border-radius:8px;padding:11px 14px;font-size:12.5px;color:var(--crit);line-height:1.55}
.ses-note-h{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.ses-note .nt-t{font-size:13.5px;color:var(--ink);line-height:1.55;white-space:pre-wrap}
.ses-note .nt-f{font-size:11.5px;color:var(--muted);margin-top:6px}

/* a half with nothing in it is a finding, not a blank */
.ses-miss{border:1px dashed var(--warn);background:var(--warn-bg);color:var(--warn);
  border-radius:8px;padding:12px 14px;font-size:12.5px;line-height:1.5}

.ses-set{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.ses-set span{font-size:11.5px;background:var(--bg);border:1px solid var(--line-2);border-radius:6px;
  padding:4px 9px;color:var(--ink-2)}
.ses-set b{color:var(--muted);font-weight:600;margin-right:4px}

.ses-shots{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:14px}
.ses-shots img{width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.ses-noimg{width:48px;height:48px;border-radius:6px;border:1px dashed var(--line);display:grid;
  place-items:center;font-size:12px;font-weight:700;color:var(--muted);background:var(--bg)}
.ses-shots em{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:4px}

.ses-ac{margin-top:14px;font-size:12.5px;color:var(--ok);background:var(--ok-bg);
  border-radius:7px;padding:8px 11px}
.ses-ac.none{color:var(--warn);background:var(--warn-bg)}
.ses-other{padding:0 16px 16px;border-top:1px solid var(--line-2)}
.ses-other .nt{margin-top:14px}
@media(max-width:880px){.ses-body{grid-template-columns:1fr}
  .ses-side{border-right:0;border-bottom:1px solid var(--line-2)}}

/* ============ TREATMENT RECORD ============ */
.pstage{margin-bottom:22px}
.pstage:last-child{margin-bottom:10px}
.pstage-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;
  padding-bottom:7px;border-bottom:1px solid var(--line-2)}
.pstage-h b{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-ink)}
.pstage-h span{font-size:12.5px;color:var(--muted)}
.pstage-n{margin-left:auto;font-size:12px;color:var(--muted);background:var(--bg);
  border-radius:20px;padding:1px 9px;min-width:22px;text-align:center}

.shots{display:flex;gap:12px;flex-wrap:wrap}
.shot{position:relative;margin:0;width:132px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--card)}
.shot img{display:block;width:100%;height:132px;object-fit:cover}
.shot-ph{height:132px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:8px;font-size:11.5px;color:var(--muted);background:var(--bg);line-height:1.4}
.shot figcaption{padding:7px 9px;font-size:11.5px;color:var(--ink-2);border-top:1px solid var(--line-2)}
.shot figcaption span{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
.shot-x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(20,26,32,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.shot-x:hover{background:var(--crit)}

.shot-add{width:132px;height:171px;border:1.5px dashed var(--line);border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:var(--muted);font-size:12px;background:var(--bg);transition:all .12s}
.shot-add:hover{border-color:var(--accent-deep);color:var(--accent-ink);background:var(--accent-bg)}
.shot-add .cam{font-size:26px;line-height:1}

.setgrid{display:flex;flex-direction:column;gap:9px}
.setrow{display:grid;grid-template-columns:118px 1fr;gap:9px}
.setrow input{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);font:inherit;font-size:13px;color:var(--ink);outline:none}
.setrow input:first-child{background:var(--bg);font-weight:600;font-size:12.5px}
.setrow input:focus{border-color:var(--accent)}
.setrow input:disabled{color:var(--ink-2);cursor:default}

.acgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.acrow{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font-size:13.5px;color:var(--ink-2);line-height:1.45;cursor:pointer;transition:all .12s}
.acrow input{width:auto;margin-top:2px;flex:none}
.acrow.on{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.acrow.crit:not(.on){border-color:var(--warn);background:var(--warn-bg)}
.acrow em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--warn);white-space:nowrap;padding-top:2px}
.acrow.on em{color:var(--ok)}
@media(max-width:860px){.acgrid{grid-template-columns:1fr}}

/* ============ PRE-VISIT INTAKE ============ */
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.iq{border-left:2px solid var(--line);padding-left:13px}
.iq-q{font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  margin-bottom:5px}
.iq-a{font-size:14px;color:var(--ink);line-height:1.5}
/* the two answers that change how the consultation opens */
.iq-a.hot{font-weight:600}
.iq:has(.iq-a.hot){border-left-color:var(--accent-deep)}
.iq-a.warn{color:var(--warn);font-weight:600}
.iq:has(.iq-a.warn){border-left-color:var(--warn)}
@media(max-width:820px){.igrid{grid-template-columns:1fr}}

/* the customer's own phone, shown inside the staff app so staff know what was asked */
.phoneframe{max-width:392px;margin:0 auto;border:10px solid #1d2126;border-radius:34px;overflow:hidden;
  background:var(--card);box-shadow:0 18px 50px rgba(20,26,32,.28)}
.phonebar{background:#1d2126;color:#fff;font-size:11px;padding:5px 16px 9px;text-align:center;letter-spacing:.3px}
.phonebody{padding:22px 20px 26px;max-height:660px;overflow-y:auto}
.phonebody h2{font-size:20px;margin:0 0 6px;letter-spacing:-.3px}
.phonebody .lede{font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.55}
.qnum{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--accent-bg);color:var(--accent-ink);font-size:11px;font-weight:700;margin-right:7px}

/* page title on the left, the one primary action on the right */
.phead-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:20px}
.phead-row .ph,.phead-row .psub{margin-bottom:0}
.phead-row .psub{margin-top:4px}
.empty-state{padding:44px 20px;text-align:center;color:var(--muted);font-size:14px}
.empty-state b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:6px}

.action{
  margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:15px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.action .ttl{font-size:12.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.action .it{
  font-size:13.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap;padding:3px 0;
  border-bottom:1px solid transparent;
}
.action .it:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
.action .it b{font-weight:700;color:var(--ink)}

/* ============ TOAST ============ */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:9px;z-index:200}
.toast{
  background:var(--ink);color:#fff;padding:12px 17px;border-radius:9px;font-size:13.5px;
  box-shadow:var(--shadow-lg);animation:slide .18s;max-width:380px;
}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.toast b{color:#cfe3f1}

/* ============ RESPONSIVE ============ */
@media (max-width:1240px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid-b,.posgrid,.grid-chart{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .queue{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1100px){
  .bk-shell{grid-template-columns:1fr}
  .bk-side{flex-direction:row;flex-wrap:wrap}
  .mini{flex:1;min-width:160px}
  .bk-legend{flex:1;min-width:190px}
}
@media (max-width:860px){
  .bk-head{gap:10px}
  .bk-tools{margin-left:0;width:100%}
  .bk-date{font-size:19px}
  .bk-grid{grid-template-columns:44px 150px repeat(var(--cols),minmax(172px,1fr))}
  .side{
    position:fixed;left:0;top:0;z-index:30;transform:translateX(-100%);
    transition:transform .2s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow-lg);
  }
  .side.open{transform:none}
  .burger{display:block}
  .hide-sm{display:none}
  .wrap{padding:20px 16px 30px}
  .topbar{padding:12px 16px;gap:9px}
  .crumb h1{font-size:17px}
  .kpis{grid-template-columns:1fr}
  .queue{grid-template-columns:1fr}
  .search input{width:120px}
  .search input:focus{width:180px}
  .sresults{width:min(330px,80vw)}
  .funrow{grid-template-columns:110px 1fr 80px;gap:10px}
  .jrow{grid-template-columns:120px 1fr 36px;padding:6px 16px}
  .pstats{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.bk-vs.lost{border-color:var(--line);background:var(--line-2);color:var(--muted)}
.bk-appt i.direct{color:var(--accent-ink);font-weight:600;margin-top:2px}
.pv-status{font-weight:600}
.jdot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:middle}
.grp-t{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line-2)}
.grp-tbl thead th{padding:8px 8px;font-size:11px}
.grp-tbl tbody td{padding:6px 8px;font-size:13px}
.grp-tbl input,.grp-tbl select{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:12.5px;color:var(--ink);background:var(--card);outline:none}
.grp-tbl input:focus,.grp-tbl select:focus{border-color:var(--accent)}
.gv-mv{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:4px;
  width:20px;height:18px;font-size:8px;line-height:1;cursor:pointer;padding:0}
.gv-mv:hover{border-color:var(--accent-deep);color:var(--accent-ink)}

/* ============ STAFF COLUMN MENU ============ */
.hm{
  position:fixed;z-index:160;width:250px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pvin .12s;
}
.hm-h{padding:10px 13px 8px;border-bottom:1px solid var(--line-2)}
.hm-h b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.hm-h span{font-size:11.5px;color:var(--muted)}
.hm-i{
  display:block;width:100%;text-align:left;border:0;background:none;padding:9px 13px;
  font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;
}
.hm-i:hover{background:var(--accent-bg);color:var(--accent-ink)}
.hm-s{
  padding:8px 13px 5px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted-2);border-top:1px solid var(--line-2);
}
.hm-b{display:flex;align-items:flex-start;gap:8px;padding:5px 13px 7px;font-size:11.5px;color:var(--ink-2)}
.hm-b span{flex:1;line-height:1.35}
.hm-b b{display:block;color:var(--ink);font-weight:600}
.hm-b i{display:block;font-style:normal;color:var(--muted-2);font-size:10.5px;margin-top:1px}
.hm-b button{
  border:0;background:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  padding:0 3px;border-radius:4px;
}
.hm-b button:hover{background:var(--crit-bg);color:var(--crit)}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bk-wcard{touch-action:none}
.bk-wcard:active{cursor:grabbing}
.bk-wcard::after{
  content:"drag to a column";position:absolute;opacity:0;pointer-events:none;
}
.bk-wait .bk-wcard{position:relative}
.bk-wcard.dragging{opacity:.35}

/* ============ SALE TICKET ============ */
.tk{display:grid;grid-template-columns:1.42fr 1fr;gap:16px;align-items:start}
.tk-l,.tk-r{padding:0;display:flex;flex-direction:column}

.tk-head{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.tk-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-f.narrow{max-width:76px}
.tk-f label{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.tk-f input,.tk-f select{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  font:inherit;font-size:12.5px;color:var(--ink);outline:none;min-width:0}
.tk-f input:disabled{background:var(--bg);color:var(--muted)}
.tk-f input:focus,.tk-f select:focus{border-color:var(--accent)}

.tk-tbl-wrap{min-height:250px;max-height:330px;overflow-y:auto;overflow-x:auto}
.tk-tbl{width:100%}
.tk-tbl thead th{position:sticky;top:0;background:var(--ink);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.3px;padding:9px 10px;border:0;white-space:nowrap;z-index:2}
.tk-tbl tbody td{padding:9px 10px;font-size:12.5px;border-bottom:1px solid var(--line-2)}
.tk-tbl .tk-disc{color:var(--crit);font-weight:600}
.tk-flag{text-align:center;color:var(--ok);font-weight:700}
.tk-x{border:0;background:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  padding:0 3px;border-radius:4px}
.tk-x:hover{background:var(--crit-bg);color:var(--crit)}
.tk-empty td{color:var(--muted);font-size:12.5px;padding:34px 14px!important;text-align:center}

.tk-foot{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:14px 18px;
  border-top:1px solid var(--line);background:var(--bg)}
.tk-fl{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.tk-pt{display:flex;justify-content:space-between;max-width:180px}
.tk-pt b{color:var(--ink)}
.tk-fr .totrow{padding:4px 0;font-size:12.5px}
.tk-fr .totrow.big{font-size:16px;padding-top:9px;margin-top:3px}

.tk-acts{display:flex;gap:7px;padding:13px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.tk-acts .btn{font-size:12px;padding:8px 12px}

/* right panel */
.tk-cust{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.tk-cust-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tk-cust-l label{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.tk-cust-b{width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:7px;
  padding:8px 11px;cursor:pointer;font:inherit}
.tk-cust-b:hover{border-color:var(--accent)}
.tk-cust-b.empty{color:var(--muted);font-size:12.5px;border-style:dashed}
.tk-cust-b b{display:block;font-size:13.5px;color:var(--ink)}
.tk-cust-b i{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.tk-cust-r{display:flex;gap:5px}
.tk-i{width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:6px;
  cursor:pointer;font-size:13px;color:var(--ink-2);display:grid;place-items:center}
.tk-i:hover{border-color:var(--accent-deep);background:var(--accent-bg)}
.tk-i:disabled{opacity:.4;cursor:not-allowed}

.tk-search{display:flex;gap:7px;padding:12px 16px 0}
.tk-search input{flex:1;padding:8px 11px;border:1px solid var(--line);border-radius:6px;font:inherit;
  font-size:12.5px;outline:none;min-width:0}
.tk-search input:focus{border-color:var(--accent)}
.tk-search .btn{padding:8px 11px;font-size:12px}

.tk-tabs{display:flex;gap:5px;padding:12px 16px;flex-wrap:wrap}
.tk-tabs button{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:6px;
  padding:6px 13px;font-size:12px;cursor:pointer;transition:all .12s}
.tk-tabs button:hover{border-color:var(--muted-2)}
.tk-tabs button.on{background:var(--ok-bg);border-color:#cfe0d4;color:var(--ok);font-weight:600}

.tk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:9px;
  padding:0 16px 14px;max-height:400px;overflow-y:auto}
.tk-tile{border:1px solid var(--accent);background:var(--card);border-radius:7px;padding:11px 10px;
  cursor:pointer;text-align:left;font:inherit;min-height:70px;display:flex;flex-direction:column;gap:3px;
  transition:all .12s}
.tk-tile:hover{border-color:var(--accent-ink);box-shadow:0 3px 10px rgba(44,107,150,.13);transform:translateY(-1px)}
.tk-tile b{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3}
.tk-tile i{font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.35}
.tk-tile.prepaid{border-color:#8a7bc8;background:#f6f4fd}
.tk-tile.voucher{border-color:#c4a05a;background:#fdf8ee}
.tk-tile.coupon{border-color:var(--ok);background:var(--ok-bg)}
.tk-tile.pkg{border-color:var(--accent-deep)}
.tk-tile.svc{border-color:var(--line)}
.tk-tile.prod{border-color:var(--line)}
.tk-tile.redeem{border-color:var(--ok);border-left-width:4px;background:var(--ok-bg)}   /* a package session the customer already owns */

.tk-bottom{display:flex;gap:6px;padding:12px 16px;border-top:1px solid var(--line);
  background:var(--bg);margin-top:auto;flex-wrap:wrap}
.tk-b{flex:1;min-width:86px;border:1px solid var(--line);background:var(--card);border-radius:7px;
  padding:9px 6px;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.tk-b:hover{border-color:var(--muted-2);background:var(--card)}
.tk-b.ok{color:var(--ok);border-color:#cfe0d4}
.tk-b.ok:hover{background:var(--ok-bg)}
.tk-b.crit{color:var(--crit);border-color:#e8cdca}
.tk-b.crit:hover{background:var(--crit-bg)}
.tk-b:disabled{opacity:.45;cursor:not-allowed}

@media (max-width:1240px){
  .tk{grid-template-columns:1fr}
  .tk-head{grid-template-columns:repeat(2,1fr)}
  .tk-foot{grid-template-columns:1fr}
}

/* ============ CLINICAL NOTES ============ */
.nt{border-left:3px solid var(--line);background:var(--bg);border-radius:0 7px 7px 0;
  padding:11px 14px;margin-bottom:9px}
.nt.internal{border-left-color:var(--muted-2)}
.nt.customer{border-left-color:var(--ok);background:var(--ok-bg)}
.nt-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.nt-k{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink)}
.nt-v{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.nt-v.internal{background:var(--line-2);color:var(--ink-2)}
.nt-v.customer{background:var(--ok);color:#fff}
.nt-d{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.nt-t{font-size:13.5px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap}
.nt-f{margin-top:7px;font-size:11.5px;color:var(--muted)}

.nt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nt-list-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--line-2);display:flex;gap:8px;align-items:center}
.nt-list-h span{background:var(--accent-bg);color:var(--accent-ink);border-radius:999px;padding:1px 8px;font-size:10.5px}
.nt-list{max-height:300px;overflow-y:auto}

.tk-i.alert{border-color:var(--crit);background:var(--crit-bg);color:var(--crit)}
.tk-i.alert:hover{background:var(--crit);color:#fff}

@media (max-width:640px){ .nt-grid{grid-template-columns:1fr} }
.nt-be{color:var(--warn);font-weight:600}

/* voided bookings stay in the record but read as withdrawn */
.bk-appt.voided{background:repeating-linear-gradient(135deg,var(--line-2) 0 5px,rgba(255,255,255,.8) 5px 10px);
  border-color:var(--crit);opacity:.7}
.bk-appt.voided b{text-decoration:line-through;color:var(--muted)}
.bk-appt.voided i{color:var(--muted-2)}
.bk-sw.voided{background:var(--line-2);border-color:var(--crit)}
.pv-void{color:var(--warn)}
.pv-void:hover{background:var(--warn-bg)}

/* ============ NOTES PAGE ============ */
.ntpage{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:start}
.ntpage .nt-scroll{max-height:620px;overflow-y:auto}
.ntpage textarea{min-height:160px;resize:vertical;line-height:1.55}
.ntpage .seg{flex-wrap:wrap;justify-content:flex-end}
.ntpage .seg button{font-size:11.5px;padding:5px 11px}
@media (max-width:1100px){ .ntpage{grid-template-columns:1fr} .ntpage .nt-scroll{max-height:460px} }

/* ============ AI HELPER ============ */
.ai-fab{
  position:fixed;right:22px;bottom:22px;z-index:120;border:0;border-radius:999px;
  background:var(--accent-ink);color:#fff;padding:12px 20px;font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;
  transition:transform .12s,background .12s;
}
.ai-fab:hover{background:#255d83;transform:translateY(-1px)}
.ai-fab.hide{display:none}
.ai-fab span{font-size:15px;line-height:1}

.ai-scrim{position:fixed;inset:0;background:rgba(27,39,51,.25);z-index:124}
/* the slide-over helper. Scoped to its own class: `.ai` alone also matched the
   chat bubbles, which author a message as `.msg.ai`, and pinned them to the
   viewport. */
.ai-panel{
  position:fixed;top:0;right:0;width:430px;max-width:96vw;height:100vh;z-index:125;
  background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;animation:slidein .18s;
}
.ai-h{display:flex;align-items:center;gap:10px;padding:15px 18px 13px;border-bottom:1px solid var(--line)}
.ai-h b{font-size:15.5px;font-weight:700}
.ai-sub{font-size:11px;color:var(--muted);background:var(--line-2);padding:2px 8px;border-radius:999px}
.ai-x{margin-left:auto;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;
  cursor:pointer;padding:0 5px;border-radius:6px}
.ai-x:hover{background:var(--line-2);color:var(--ink)}

.ai-modes{display:flex;gap:5px;padding:11px 14px;flex-wrap:wrap;border-bottom:1px solid var(--line-2)}
.ai-modes button{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px;
  padding:5px 11px;font-size:11.5px;cursor:pointer;transition:all .12s}
.ai-modes button:hover{border-color:var(--muted-2)}
.ai-modes button.on{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;font-weight:600}

.ai-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.ai-hint{color:var(--muted);font-size:13px;line-height:1.6;text-align:center;padding:26px 10px}
.ai-you{align-self:flex-end;max-width:86%;background:var(--accent-ink);color:#fff;padding:9px 13px;
  border-radius:12px 12px 3px 12px;font-size:13px;line-height:1.5}
.ai-me{align-self:flex-start;max-width:94%;background:var(--bg);border:1px solid var(--line-2);
  padding:12px 14px;border-radius:12px 12px 12px 3px;font-size:13px;line-height:1.62;color:var(--ink-2)}
.ai-me b{color:var(--ink)}
.ai-warn{display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  color:var(--warn);font-size:11.5px;line-height:1.5}
.ai-ins{display:block;margin-top:11px;border:1px solid var(--accent-deep);background:var(--accent-bg);
  color:var(--accent-ink);border-radius:6px;padding:6px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.ai-ins:hover{background:var(--accent-deep);color:#fff}

.ai-qs{display:flex;flex-direction:column;gap:5px;padding:10px 14px;border-top:1px solid var(--line-2);
  max-height:190px;overflow-y:auto}
.ai-qs button{text-align:left;border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  border-radius:7px;padding:8px 11px;font:inherit;font-size:12px;cursor:pointer;line-height:1.4}
.ai-qs button:hover{border-color:var(--accent-deep);background:var(--accent-bg);color:var(--accent-ink)}
.ai-qs .ai-do{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:600}

.ai-in{display:flex;gap:7px;padding:12px 14px;border-top:1px solid var(--line)}
.ai-in input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;
  font-size:13px;outline:none;min-width:0}
.ai-in input:focus{border-color:var(--accent)}
.ai-in .btn{padding:9px 15px}

.ai-foot{padding:10px 16px 14px;font-size:11px;color:var(--muted);line-height:1.55;background:var(--bg);
  border-top:1px solid var(--line-2)}
.ai-foot b{display:block;margin-top:4px;color:var(--warn)}

@media (max-width:560px){ .ai-panel{width:100vw} .ai-fab{right:14px;bottom:14px;padding:10px 16px} }

/* ============ AI TRAINING ============ */
.ait{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.ait-side{display:flex;flex-direction:column}
.ait-modes{display:flex;flex-direction:column;gap:3px;padding:12px}
.ait-modes button{text-align:left;border:1px solid transparent;background:none;border-radius:7px;
  padding:9px 12px;cursor:pointer;font:inherit;transition:all .12s}
.ait-modes button:hover{background:var(--line-2)}
.ait-modes button.on{background:var(--accent-bg);border-color:#cfe3f1}
.ait-modes b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ait-modes button.on b{color:var(--accent-ink)}
.ait-modes i{font-style:normal;font-size:11.5px;color:var(--muted)}

.ait-tone{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:8px 0;
  border-bottom:1px solid var(--line-2);font-size:12.5px}
.ait-tone:last-child{border-bottom:0}
.ait-tone span{color:var(--muted);font-size:11.5px}
.ait-tone b{grid-column:1;color:var(--ink-2);font-weight:500;line-height:1.4}
.ait-tone .lnk{grid-row:1/3;grid-column:2;align-self:center;font-size:12px}

.ait-gr{display:flex;gap:9px;align-items:flex-start;padding:6px 0;font-size:12px;
  color:var(--ink-2);line-height:1.45}
.ait-gr .chip{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px}

.ait-e{border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-bottom:12px;background:var(--card)}
.ait-eh{display:flex;gap:12px;align-items:flex-start;margin-bottom:9px}
.ait-eh b{flex:1;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.ait-ea{display:flex;gap:12px;flex:0 0 auto}
.ait-ea .lnk.danger{color:var(--crit)}
.ait-ea .lnk.danger:hover{border-bottom-color:var(--crit)}
.ait-et{font-size:13px;line-height:1.62;color:var(--ink-2);background:var(--bg);border-radius:7px;padding:12px 14px}
.ait-et b{color:var(--ink)}

@media (max-width:1100px){ .ait{grid-template-columns:1fr} }

/* ============ CONSULTATION RECORDING ============ */
.rec{border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-bottom:16px;background:var(--bg)}
.rec.rec-locked{border-color:#eccfcc;background:var(--crit-bg)}
.rec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.rec-h b{font-size:13.5px;font-weight:600;color:var(--ink)}
.rec-h .lnk{margin-left:auto;font-size:12px}
.rec-p{font-size:12.5px;line-height:1.55;color:var(--crit);margin:0 0 12px}
.rec-note{font-size:11.5px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.rec-note b{color:var(--warn)}

.rec-live{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rec-dot{width:11px;height:11px;border-radius:99px;background:var(--crit);flex:0 0 auto;
  animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.rec-time{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--crit);min-width:52px}
.rec-wave{display:flex;align-items:center;gap:2px;flex:1;min-width:120px;height:24px}
.rec-wave i{flex:1;background:var(--accent-deep);border-radius:2px;transition:height .18s}

.rec-item{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-top:11px}
.rec-ih{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rec-ih b{font-size:12.5px;color:var(--ink)}
.rec-play{display:flex;align-items:center;gap:10px}
.rec-btn{width:32px;height:32px;border-radius:99px;border:1px solid var(--accent-deep);background:var(--accent-bg);
  color:var(--accent-ink);cursor:pointer;font-size:11px;flex:0 0 auto}
.rec-btn:hover{background:var(--accent-deep);color:#fff}
.rec-bar{flex:1;height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;min-width:70px}
.rec-bar i{display:block;height:100%;background:var(--accent-deep);border-radius:99px;transition:width .2s linear}
.rec-t{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.rec-consent{background:var(--bg);border-left:3px solid var(--accent-deep);border-radius:0 7px 7px 0;
  padding:12px 15px;margin-top:12px}
.rec-consent p{margin:0;font-size:13px;line-height:1.62;color:var(--ink-2);font-style:italic}

.tr{max-height:380px;overflow-y:auto}
.tr-l{display:grid;grid-template-columns:46px 78px 1fr;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line-2);font-size:12.5px;line-height:1.5}
.tr-l:last-child{border-bottom:0}
.tr-t{color:var(--muted-2);font-variant-numeric:tabular-nums;font-size:11.5px}
.tr-w{font-weight:600;font-size:11.5px}
.tr-l.co .tr-w{color:var(--accent-ink)}
.tr-l.cu .tr-w{color:var(--ok)}
.tr-x{color:var(--ink-2)}

/* ============ CUSTOMER 360 ============ */
.ctabs{flex-wrap:wrap}
.ctabs button{padding:10px 13px;font-size:13px}
.tabn{background:var(--line-2);color:var(--ink-2);border-radius:999px;padding:1px 7px;
  font-size:10.5px;font-weight:700;margin-left:4px}
.ctabs button.on .tabn{background:var(--accent-bg);color:var(--accent-ink)}

.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cs{margin-bottom:22px}
.cs:last-child{margin-bottom:0}
.cs-h{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-ink);
  padding-bottom:7px;margin-bottom:11px;border-bottom:1px solid var(--line-2)}

.optrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)}
.optrow:last-of-type{border-bottom:0}

.bignum{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1;color:var(--ink)}

.cmeta{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;
  color:var(--muted-2);line-height:1.6}

@media (max-width:900px){ .cgrid{grid-template-columns:1fr;gap:0} }

/* ---- customer tab actions & inline editing ---- */
.tact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-4px 0 16px}
.tact-n{font-size:12px;color:var(--muted);line-height:1.5;max-width:76ch}
.card.editing{border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(159,201,228,.22)}
.cf{width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  font:inherit;font-size:13px;color:var(--ink);outline:none}
.cf:focus{border-color:var(--accent-deep)}
.editing .dl dd{padding:1px 0}
.editing .optrow select{width:auto;min-width:120px}

/* ---- in-card edit bar: stays reachable while a long form scrolls ---- */
.ebar{
  position:sticky;top:63px;z-index:8;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 20px;background:var(--card);border-bottom:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
}
.ebar b{font-size:12.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink)}
.ebar .btnrow{margin-left:auto}
.ebar.on{background:var(--accent-bg);border-bottom-color:#cfe3f1}
.ebar-s{font-size:12px;color:var(--accent-ink);font-weight:500}
.card.editing{border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(159,201,228,.22)}


.acrow.ro{cursor:default}

/* a templated note reads back as the fields that were answered */
.nt-fl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0;font-size:13px;align-items:baseline}
.nt-fl dt{color:var(--muted);white-space:nowrap;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.3px;padding-top:2px}
.nt-fl dd{margin:0;color:var(--ink);line-height:1.5;white-space:pre-wrap}
@media(max-width:600px){.nt-fl{grid-template-columns:1fr;gap:2px 0}
  .nt-fl dd{margin-bottom:9px}}

/* ============ JOURNEY PICKER (inside a consultation note) ============ */
.jpick{display:flex;flex-direction:column;gap:8px}
.jph{border:1px solid var(--line);border-radius:9px;padding:11px 13px;cursor:pointer;
  background:var(--card);transition:all .12s}
.jph:hover{border-color:var(--accent)}
.jph.on{border-color:var(--accent-deep);background:var(--accent-bg)}
.jph-h{display:flex;align-items:baseline;gap:10px}
.jph-h b{font-size:13.5px;color:var(--ink)}
.jph-h span{font-size:11.5px;color:var(--muted);margin-left:auto}
.jsubs{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.jsub{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 12px;
  font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .12s}
.jsub:hover{border-color:var(--accent)}
.jsub.on{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;font-weight:600}

/* cross-sell areas */
.xdiv{margin-bottom:12px}
.xdiv-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.xdiv-h b{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-ink)}
.xareas{display:flex;gap:7px;flex-wrap:wrap}
.xarea{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 12px;
  font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .12s}
.xarea:hover{border-color:var(--accent)}
.xarea.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:600}

/* dashboard journey card, now two levels */
.jph-row{display:grid;grid-template-columns:1fr 2fr auto;gap:14px;align-items:center;
  padding:9px 20px;font-size:13.5px}
.jph-row[data-go]{cursor:pointer}
.jph-row[data-go]:hover{background:var(--bg)}
.jph-row .jnm b{font-weight:700;color:var(--ink)}
.jph-row .jnm em{font-style:normal;font-size:11px;color:var(--muted);margin-left:8px}
.jrow.sub{padding-left:40px}
.jrow.sub .jnm{font-size:13px;color:var(--ink-2)}

/* aftercare points inside a note behave as buttons, not checkboxes */
.acgrid .acrow{width:100%;text-align:left;font:inherit;background:var(--card)}
.ntshot-wrap{border:1px solid var(--line);border-radius:9px;padding:14px;background:var(--bg)}
.ntshot-wrap .pstage{margin-bottom:16px}
.ntshot-wrap .pstage:last-child{margin-bottom:0}
.ntshot-wrap .shot,.ntshot-wrap .shot-add{width:96px}
.ntshot-wrap .shot img,.ntshot-wrap .shot-ph{height:96px}
.ntshot-wrap .shot-add{height:128px}

/* ============ BEAUTY PLANNER ============ */
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bp-m{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.bp-m.now{border-color:var(--accent-deep);box-shadow:0 0 0 2px var(--accent-bg)}
.bp-mh{background:var(--accent-ink);color:#fff;padding:8px 13px;font-size:13px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center}
.bp-mh span{background:rgba(255,255,255,.22);border-radius:20px;padding:0 8px;font-size:11px}
.bp-weeks{padding:9px 13px 11px}
.bp-w{display:grid;grid-template-columns:56px 1fr;gap:9px;align-items:center;
  padding:5px 0;border-bottom:1px dotted var(--line-2);min-height:28px}
.bp-w:last-child{border-bottom:0}
.bp-wn{font-size:11px;font-weight:600;color:var(--muted)}
.bp-wv{display:flex;gap:4px;flex-wrap:wrap}
.bp-w.has .bp-wn{color:var(--ink-2)}

.cal-ev{display:inline-block;font-size:10.5px;line-height:1.5;padding:2px 7px;border-radius:5px;
  border:1px solid transparent;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cal-ev.suggested{background:var(--bg);border-color:var(--line);color:var(--muted)}
.cal-ev.entitled{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink)}
.cal-ev.booked{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:600}
.cal-ev.done{background:var(--line-2);border-color:var(--line);color:var(--muted);
  text-decoration:line-through}
.cal-ev[data-act]{cursor:pointer}
.cal-ev[data-act]:hover{border-color:var(--accent-deep)}
i.cal-ev{width:22px;height:12px;padding:0;vertical-align:-1px;margin-right:6px}

.cal-key{display:flex;flex-direction:column;gap:6px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}

/* the schedule builder inside a consultation note */
.pdates{display:flex;gap:7px;flex-wrap:wrap}
.pdate{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:20px;
  padding:4px 6px 4px 4px;font-size:12px;color:var(--ink-2);background:var(--card)}
.pdate b{background:var(--accent-bg);color:var(--accent-ink);border-radius:50%;width:19px;height:19px;
  display:grid;place-items:center;font-size:10.5px}
.pdate-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.pdate-x:hover{color:var(--crit)}
@media(max-width:900px){.bp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bp-grid{grid-template-columns:1fr}}

/* ============ 40 / 40 / 20 ============ */
.pillars{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:18px;
  background:var(--bg)}
.pill-h{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.pill-h b{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.pill-h span{margin-left:auto;font-size:19px;font-weight:700;letter-spacing:-.4px}
.pill-h span.ok{color:var(--ok)} .pill-h span.warn{color:var(--warn)} .pill-h span.crit{color:var(--crit)}
.pill-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pill{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--card)}
.pill.on{border-color:var(--ok);background:var(--ok-bg)}
.pill-n{font-size:13px;font-weight:600;color:var(--ink)}
.pill-w{font-size:21px;font-weight:700;letter-spacing:-.6px;color:var(--muted);line-height:1.1}
.pill.on .pill-w{color:var(--ok)}
.pill-s{font-size:11.5px;color:var(--muted);margin-top:2px}
.pill.on .pill-s{color:var(--ok);font-weight:600}
.pill-note{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}
@media(max-width:700px){.pill-row{grid-template-columns:1fr}}

/* skincare routine table */
table.routine{width:100%;border-collapse:collapse;margin-bottom:8px}
table.routine th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);padding:0 0 7px 8px}
table.routine td{padding:3px 4px 3px 0}
table.routine td.nm{font-size:13px;color:var(--ink-2);width:110px;padding-right:10px}
table.routine input{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:7px;
  background:var(--card);font:inherit;font-size:13px;color:var(--ink);outline:none}
table.routine input:focus{border-color:var(--accent)}

/* ============ THREE-STEP CONSULTATION ============ */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
.s3{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--card);
  font:inherit;cursor:pointer;transition:all .12s}
.s3:hover{border-color:var(--accent)}
.s3 b{width:20px;height:20px;border-radius:50%;background:var(--line-2);color:var(--muted);
  display:grid;place-items:center;font-size:11px;margin-bottom:3px}
.s3 span{font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.3}
.s3 em{font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.35}
.s3.on{border-color:var(--accent-deep);background:var(--accent-bg)}
.s3.on b{background:var(--accent-deep);color:#fff}
.s3.on span{color:var(--accent-ink)}
.s3.done b{background:var(--ok);color:#fff}
@media(max-width:760px){.steps3{grid-template-columns:1fr}
  .s3{flex-direction:row;align-items:center;gap:10px}
  .s3 b{margin-bottom:0;flex:none} .s3 em{display:none}}

/* ============ PRODUCT & SERVICE TOOLBAR ============ */
.skubar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;background:var(--card);
  transition:border-color .12s,background .12s}
.skubar.armed{border-color:var(--accent-deep);background:var(--accent-bg)}
.skubar-sep{width:1px;height:22px;background:var(--line)}
.skubar-n{font-size:13px;color:var(--muted)}
.skubar.armed .skubar-n{color:var(--accent-ink)}
.skubar-n b{font-size:15px;color:var(--accent-ink)}
.skubar-acts{margin-left:auto}
.skubar .btn:disabled{opacity:.4;cursor:not-allowed}
.skubar .btn:disabled:hover{border-color:var(--line);background:var(--card)}

/* the tick column should not feel like part of the row link */
td > input[type=checkbox],th > input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent-deep)}

/* an item staff cannot pick should not read like one they can */
tr.rowlink.off{opacity:.55}
tr.rowlink.off .nm{text-decoration:line-through;text-decoration-color:var(--line)}
tr.rowlink.off:hover{opacity:.8}

/* ============ INVENTORY HUB ============ */
.invhub{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.invtile{border:1px solid var(--line);border-radius:10px;padding:15px 16px;background:var(--card);
  cursor:pointer;transition:all .12s;position:relative}
.invtile:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(20,26,32,.05)}
.invtile b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.invtile span{font-size:12px;color:var(--muted);line-height:1.4}
.invtile i{position:absolute;top:12px;right:12px;font-style:normal}

/* ============ WESS-SHAPED LIST ============ */
.wlist-h{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wlist-h .ph{margin-bottom:0}
.wtools{display:flex;gap:6px}
.wtool{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid transparent;
  background:none;border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer;color:var(--ink-2)}
.wtool:hover{background:var(--bg);border-color:var(--line)}
.wtool b{font-size:17px;line-height:1;color:var(--accent-deep)}
.wtool span{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}

.wsearch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px;
  border-bottom:1px solid var(--line);background:var(--bg)}
.wsearch label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.wsearch input,.wsearch select{padding:7px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--card);font:inherit;font-size:13px;color:var(--ink);outline:none}
.wsearch input{min-width:230px}
.wsearch input:focus,.wsearch select:focus{border-color:var(--accent)}
.wsearch-n{margin-left:auto;font-size:12.5px;color:var(--muted)}

table.wtable thead tr.wfilter th{padding:0 6px 8px;background:var(--bg)}
table.wtable tr.wfilter input{width:100%;min-width:70px;padding:5px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);font:inherit;font-size:12px;color:var(--ink);outline:none}
table.wtable tr.wfilter input:focus{border-color:var(--accent)}

/* ============ MINI CALENDAR — every date opens its own day ============ */
.mini-h{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mini-nav{border:0;background:none;font:inherit;font-size:17px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 7px;border-radius:6px}
.mini-nav:hover{background:var(--bg);color:var(--accent-ink)}
.mini-d{position:relative}
.mini-d.today{outline:1px solid var(--accent);outline-offset:-1px}
.mini-d.has{font-weight:700;color:var(--accent-ink)}
.mini-d i{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);font-style:normal;
  font-size:8px;line-height:1;background:var(--accent-deep);color:#fff;border-radius:9px;
  padding:1px 3px;min-width:11px;text-align:center}
.mini-d.on i{background:#fff;color:var(--accent-deep)}
.mini-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;
  padding-top:8px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--muted)}

/* ============ DRAGGABLE STAFF COLUMNS ============ */
.bk-hcell.draghead{position:relative;touch-action:none}
.bk-grip{position:absolute;top:6px;left:6px;font-size:10px;line-height:1;color:var(--line-2);
  letter-spacing:-3px;opacity:.6;transition:color .12s,opacity .12s}
.bk-hcell.draghead{cursor:grab}
.bk-hcell.draghead:hover{background:var(--bg)}
.bk-hcell.draghead:hover .bk-grip{opacity:1;color:var(--accent-deep)}
.bk-hcell.dragging{opacity:.45;cursor:grabbing}
.bk-hcell.dropbefore{box-shadow:inset 3px 0 0 var(--accent-deep)}
.bk-hcell.dropafter{box-shadow:inset -3px 0 0 var(--accent-deep)}

/* ============ STAFF / HR RECORD ============ */
.dl.cgrid2{grid-template-columns:auto 1fr auto 1fr;gap:9px 18px}
@media(max-width:900px){.dl.cgrid2{grid-template-columns:auto 1fr}}
.swatch{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:-2px;
  margin-right:6px;border:1px solid var(--line)}
.chase{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chase>div{border:1px solid var(--line);border-radius:9px;padding:13px 15px;background:var(--bg)}
.chase b{display:block;font-size:23px;font-weight:700;letter-spacing:-.7px;color:var(--ink);line-height:1.1}
.chase span{font-size:11.5px;color:var(--muted)}
@media(max-width:700px){.chase{grid-template-columns:1fr}}

/* ============ PERMISSION MATRIX ============ */
.permtick{width:30px;height:26px;border:1px solid var(--line);border-radius:7px;background:var(--card);
  font:inherit;font-size:13px;color:var(--muted);cursor:pointer;transition:all .12s}
.permtick:hover{border-color:var(--accent)}
.permtick.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:700}
.permtick.locked{opacity:.45;cursor:not-allowed;background:var(--bg)}
.permtick.locked:hover{border-color:var(--line)}

/* ============ CLOCK IN / OUT ============ */
.clockface{text-align:center;padding:6px 0 20px;border-bottom:1px solid var(--line-2);margin-bottom:20px}
.clock-now{font-size:46px;font-weight:700;letter-spacing:-2px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.clock-day{font-size:13px;color:var(--muted);margin-top:5px}
.clock-state{margin-top:11px;font-size:13.5px;color:var(--muted)}
.clock-state.in{color:var(--ok);font-weight:600}
.clock-state.done{color:var(--ink-2)}

.clockcap{display:flex;gap:16px;align-items:flex-start}
.clockshot{width:124px;height:124px;flex:none;position:relative;overflow:hidden}
.clockshot-ok{position:absolute;bottom:6px;right:6px;background:var(--ok);color:#fff;border-radius:50%;
  width:24px;height:24px;display:grid;place-items:center;font-size:13px}
.clockcap-t b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:5px}
.clockcap-t span{font-size:12.5px;color:var(--muted);line-height:1.55}
@media(max-width:620px){.clockcap{flex-direction:column}}

/* ============ COMMISSION ELIGIBILITY ============ */
.commgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.commcard{text-align:left;border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  background:var(--card);font:inherit;cursor:pointer;transition:all .12s;display:flex;
  flex-direction:column;gap:4px}
.commcard:disabled{cursor:default}
.commcard:not(:disabled):hover{border-color:var(--accent)}
.commcard.on{border-color:var(--ok);background:var(--ok-bg)}
.commcard b{font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:7px}
.commcard.on b{color:var(--ok)}
.commcard b i{font-style:normal;font-size:12px}
.commcard span{font-size:12px;color:var(--ink-2);line-height:1.45}
.commcard em{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.45}
.commcard u{text-decoration:none;font-size:11px;color:var(--accent-ink);background:var(--accent-bg);
  border-radius:5px;padding:2px 7px;align-self:flex-start;margin-top:3px}
.commcard.on u{background:#fff;color:var(--ok)}

/* The counted column on a draft count sheet. Narrow and right-aligned so it
   lines up with the System figure it is being compared against. */
input.cntin{
  width:84px; text-align:right; padding:6px 8px; font-size:14px;
  font-variant-numeric:tabular-nums; border:1px solid var(--line);
  border-radius:6px; background:var(--card); color:var(--ink);
}
input.cntin:focus{ outline:2px solid var(--accent-deep); outline-offset:1px; border-color:var(--accent-deep); }

/* ============ INBOX (omnichannel) ============
   Four columns at a desk, because the four questions a person has — what needs
   me, which conversation, what was said, who is this — are asked at the same
   time. They collapse in that order as the screen narrows: the context panel
   goes first, then the view rail. */
.ibx{
  display:grid;grid-template-columns:216px 320px minmax(0,1fr) 312px;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;
  height:calc(100vh - 168px);min-height:520px;
}

/* ---- view rail ---- */
.ibx-rail{border-right:1px solid var(--line);background:var(--bg);
  display:flex;flex-direction:column;overflow-y:auto;min-height:0;padding:12px 10px}
.ibx-railh{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:12px 8px 6px}
.ibx-railh:first-child{padding-top:2px}
.ibx-v{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;border-radius:8px;padding:7px 9px;cursor:pointer;
  font-size:13px;color:var(--ink-2);
}
.ibx-v:hover{background:var(--line-2)}
.ibx-v.on{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.ibx-v span{flex:1;display:flex;align-items:center;gap:7px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-v i{font-style:normal;font-size:11.5px;color:var(--muted);
  background:var(--line-2);border-radius:99px;padding:1px 7px;min-width:20px;text-align:center}
.ibx-v.on i{background:#fff;color:var(--accent-ink)}
.ibx-v i.crit{background:var(--crit-bg);color:var(--crit);font-weight:600}
.ibx-v i.warn{background:var(--warn-bg);color:var(--warn);font-weight:600}
.ibx-off{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--crit);background:var(--crit-bg);border-radius:4px;padding:0 4px}
.ibx-gap{margin:12px 8px 0;padding:10px;border-radius:8px;background:var(--warn-bg);
  color:var(--warn);font-size:11.5px;line-height:1.5}
.ibx-railf{margin-top:auto;padding:12px 8px 4px;display:flex;flex-direction:column;gap:7px}
/* A number that belongs to this branch but is still answered somewhere else.
   It sits under the branch it belongs to, because the question a person asks
   is "where does Gombak's WhatsApp go", not "which vendors do we use". */
.ibx-wa{margin:2px 8px 4px;font-size:11px;line-height:1.45;color:var(--muted)}
.ibx-wa.on{color:var(--ok,#177245)}
/* a quiet channel still shows its count, just quietly */
.ibx-v i.zero{color:var(--muted-2);background:none}
/* who answers for this branch, under its name */
.ibx-bot{margin:-2px 8px 6px;font-size:10.5px;line-height:1.4;color:var(--muted-2)}

/* channel mark — the app the message came from, never bigger than the person */
.chdot{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.02em;color:#fff;
  width:16px;height:16px;border-radius:99px;display:inline-flex;
  align-items:center;justify-content:center;flex:none;
}
.chdot.sm{width:15px;height:15px;font-size:8.5px}
.chdot.wa{background:#25a15a}
.chdot.ig{background:linear-gradient(135deg,#f0a03a,#c9407e 55%,#8d3fc0)}
.chdot.fb{background:#1877f2}
.chdot.ms{background:#7a5cfa}
.chdot.tt{background:#1b2733}

/* ---- thread list ---- */
.ibx-list{border-right:1px solid var(--line);overflow-y:auto;min-height:0;background:var(--card)}
.ibx-listh{
  position:sticky;top:0;z-index:2;background:var(--card);
  border-bottom:1px solid var(--line);padding:13px 14px;font-size:12.5px;color:var(--ink-2);
  display:flex;align-items:center;gap:7px;
}
.ibx-listh span{margin-left:auto;color:var(--muted);font-size:11.5px;
  background:var(--line-2);border-radius:99px;padding:1px 8px}
.ibx-t{
  display:flex;gap:10px;width:100%;text-align:left;background:none;cursor:pointer;
  border:0;border-bottom:1px solid var(--line-2);padding:12px 14px;
}
.ibx-t:hover{background:var(--bg)}
.ibx-t.on{background:var(--accent-bg)}
.ibx-av{
  position:relative;width:34px;height:34px;flex:none;border-radius:99px;
  background:var(--line-2);color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
}
.ibx-av .chdot{position:absolute;right:-3px;bottom:-3px;border:1.5px solid var(--card)}
.ibx-t.on .ibx-av .chdot{border-color:var(--accent-bg)}
.ibx-tb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ibx-tn{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
.ibx-tn em{font-style:normal;font-weight:500;color:var(--muted)}
.ibx-tn i{margin-left:auto;font-style:normal;font-size:11px;font-weight:400;color:var(--muted);flex:none}
.ibx-tp{font-size:12.5px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ibx-tc{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.ibx-tc em{font-style:normal;font-size:10.5px;letter-spacing:.02em;
  border-radius:4px;padding:1px 6px;background:var(--line-2);color:var(--ink-2)}
.ibx-tc em.crit{background:var(--crit-bg);color:var(--crit);font-weight:600}
.ibx-tc em.warn{background:var(--warn-bg);color:var(--warn);font-weight:600}
.ibx-tc em.ai{background:var(--accent-bg);color:var(--accent-ink)}
.ibx-tc em.lead{background:var(--warn-bg);color:var(--warn)}
/* which branch a conversation belongs to, shown only on an all-branch view */
.ibx-tc em.br{background:var(--line-2);color:var(--ink-2);font-weight:600}
.ibx-tc em.n{margin-left:auto;background:var(--accent-deep);color:#fff;font-weight:700;
  border-radius:99px;min-width:17px;text-align:center}
.ibx-empty{padding:40px 20px;text-align:center;color:var(--muted);
  display:flex;flex-direction:column;gap:5px}
.ibx-empty b{color:var(--ink-2);font-size:13.5px}
.ibx-empty span{font-size:12.5px}

/* ---- conversation ---- */
/* min-height:0 is not decoration. These four are grid items in a row of a
   fixed height, and a grid item will not shrink below its content unless it is
   told it may. Without it a long conversation grows the column past the bottom
   of the grid, .ibx clips what sticks out, and the composer is gone: the reply
   box is below the fold of a box that does not scroll. */
.ibx-conv{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card)}
.ibx-convh{display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-bottom:1px solid var(--line);flex:none}
.ibx-who{min-width:0;flex:1}
.ibx-who b{display:block;font-size:14px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-who span{display:block;font-size:11.5px;color:var(--muted)}
.ibx-convacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn.sm{padding:5px 10px;font-size:12px}

.ibx-stop{flex:none;margin:0;padding:10px 16px;font-size:12.5px;line-height:1.5;
  background:var(--crit-bg);color:var(--crit);border-bottom:1px solid var(--line)}
.ibx-stop.warn{background:var(--warn-bg);color:var(--warn)}
.ibx-stop b{display:block}

.ibx-msgs{flex:1;max-height:none;min-height:0;overflow-y:auto}

/* what the software did, in the place where it happened */
.ibx-sys{
  margin:0 auto 14px;max-width:88%;text-align:center;font-size:11.5px;line-height:1.55;
  color:var(--ink-2);background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;
}
.ibx-sys i{display:block;font-style:normal;color:var(--accent-ink);margin-top:3px}
.ibx-sys b{display:block;font-weight:400;color:var(--muted);margin-top:3px;font-size:11px}
.ibx-note{
  margin:0 0 14px auto;max-width:80%;font-size:12.5px;line-height:1.5;
  background:var(--warn-bg);color:#6f4f20;border-radius:12px;padding:10px 13px;
}
.ibx-note b{display:block;font-weight:400;font-size:11px;color:var(--warn);margin-top:5px}

/* ---- composer ---- */
.ibx-composer{flex:none;border-top:1px solid var(--line);padding:10px 14px 12px;background:var(--card)}
.ibx-tabs{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.ibx-tabs button{
  background:none;border:0;border-radius:7px;padding:4px 10px;cursor:pointer;
  font-size:12px;color:var(--muted);
}
.ibx-tabs button:hover{background:var(--line-2);color:var(--ink-2)}
.ibx-tabs button.on{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.ibx-cmpmode{margin-left:auto;font-size:11px;color:var(--muted)}
.ibx-composer textarea{
  width:100%;min-height:72px;resize:vertical;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--card);
}
.ibx-composer textarea:disabled{background:var(--bg);color:var(--muted)}
.ibx-composer textarea.note{background:var(--warn-bg);border-color:#e6d3b4}
.ibx-cmpf{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.ibx-cmpf select{
  flex:1;min-width:150px;padding:5px 9px;font:inherit;font-size:12px;
  border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink-2);
}

/* ---- context ---- */
.ibx-ctx{border-left:1px solid var(--line);background:var(--bg);overflow-y:auto;min-height:0;padding:14px}
.ibx-ctx .card{box-shadow:none}
.ibx-idh b{display:block;font-size:14.5px;line-height:1.3}
.ibx-idh span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ibx-idh em{font-style:normal}
.ibx-bkwho{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ibx-bkwho b{display:block;font-size:15px}
.ibx-bkwho span{font-size:12px;color:var(--muted)}

/* nav unread count */
.navbadge{
  margin-left:auto;font-size:10.5px;font-weight:700;line-height:1;
  background:var(--accent-deep);color:#fff;border-radius:99px;padding:3px 6px;min-width:18px;
  display:inline-block;text-align:center;
}
.nav button.on .navbadge{background:#fff;color:var(--accent-ink)}

@media (max-width:1500px){
  .ibx{grid-template-columns:200px 300px minmax(0,1fr);height:auto}
  .ibx-ctx{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
  .ibx-ctx .mb16{margin-bottom:0}
  .ibx-list,.ibx-conv{min-height:460px;max-height:70vh}
  .ibx-rail{max-height:none}
}
@media (max-width:1100px){
  .ibx{grid-template-columns:1fr}
  .ibx-rail{flex-direction:row;flex-wrap:wrap;border-right:0;
    border-bottom:1px solid var(--line);gap:5px;align-items:center}
  .ibx-railh{padding:4px 6px}
  .ibx-v{width:auto}
  .ibx-v span{flex:none}
  .ibx-railf{margin-top:0;flex-direction:row;padding:4px}
  .ibx-gap{margin:6px 0 0;flex-basis:100%}
  .ibx-list{border-right:0;border-bottom:1px solid var(--line);max-height:340px}
}

/* ============ HR ============ */

/* What is waiting on a person, before anything they would go and look up. */
.hr-waiting{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent-deep);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
}
.hr-waiting > b{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hr-wrow{display:flex;flex-wrap:wrap;gap:8px}
.hr-w{
  border:1px solid var(--line);background:var(--bg);border-radius:8px;
  padding:7px 12px;font-size:13px;cursor:pointer;color:var(--ink-2);
}
.hr-w:hover{border-color:var(--accent-deep);color:var(--accent-ink)}
.hr-w.crit{background:var(--crit-bg);border-color:#eccfcb;color:var(--crit);font-weight:600}
.hr-w.warn{background:var(--warn-bg);border-color:#ecdcc2;color:var(--warn);font-weight:600}
.hr-w.blue{background:var(--accent-bg);border-color:#cfe3f1;color:var(--accent-ink)}

.hr-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.hr-mod{
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;cursor:pointer;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:4px;
}
.hr-mod:hover{border-color:var(--accent-deep);transform:translateY(-1px)}
.hr-mod b{font-size:14.5px}
.hr-mod span{font-size:12px;color:var(--muted);line-height:1.45}

/* leave balance: what is left reads first, what it is out of reads second */
.lvbal{display:flex;flex-direction:column;line-height:1.3}
.lvbal b{font-size:14px}
.lvbal em{font-style:normal;font-size:10.5px;color:var(--warn)}

/* payslip */
.paytbl{width:100%;border-collapse:collapse}
.paytbl td{padding:9px 0;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:13.5px}
.paytbl td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.paytbl tr:last-child td{border-bottom:0}
.totrow td{border-top:1px solid var(--line);border-bottom:0!important;padding-top:11px}
tfoot .totrow td{background:var(--bg)}

.paynet{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.paynet > div{display:flex;flex-direction:column;gap:3px}
.paynet .lab{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.paynet b{font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.paynet > div:first-child b{color:var(--accent-ink)}

/* hiring pipeline */
.pipe{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;
  overflow-x:auto;padding-bottom:4px}
.pipe-col{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px;
  display:flex;flex-direction:column;gap:8px;min-width:150px}
.pipe-col.muted{opacity:.6}
.pipe-h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pipe-h i{margin-left:auto;font-style:normal;background:var(--line-2);color:var(--ink-2);
  border-radius:99px;padding:1px 7px;font-size:11px}
.pipe-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;
  display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.pipe-card b{font-size:13px}
.pipe-card span{font-size:11.5px;color:var(--muted);line-height:1.4}
.pipe-iv{color:var(--accent-ink)!important}
.pipe-note{color:var(--warn)!important}
.pipe-empty{font-size:12px;color:var(--muted-2);text-align:center;padding:8px 0}

tr.rowlink.on{background:var(--accent-bg)}
.note.ok{background:var(--ok-bg);color:var(--ok);border:0}
.note.crit{background:var(--crit-bg);color:var(--crit);border:0}

@media (max-width:900px){
  .pipe{grid-template-columns:repeat(6,170px)}
}

/* ============ HR letters ============
   A letter on screen should look like the thing that will come out of the
   printer, because that is what somebody is agreeing to when they sign it. */
.letterpage{padding:38px 44px;max-width:820px;margin:0 auto}
.lt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-bottom:18px;border-bottom:2px solid var(--accent-deep)}
.lt-head b{display:block;font-size:16px;letter-spacing:.02em}
.lt-head span{display:block;font-size:11.5px;color:var(--muted);line-height:1.55}
.lt-mark{font-size:11px;color:var(--accent-ink);text-align:right;max-width:170px;line-height:1.5}
.lt-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
  padding:14px 0 24px}
.lt-body{font-size:14px;line-height:1.85;white-space:normal}
.lt-sign{margin-top:40px;padding-top:8px}
.lt-sigline{display:inline-block;min-width:230px;padding-bottom:5px;
  border-bottom:1px solid var(--ink-2);font-size:14.5px;font-weight:600;margin-bottom:6px}
.lt-sigline.unsigned{border-bottom-style:dashed;border-color:var(--warn);
  color:var(--warn);font-weight:500}
.lt-sign span{display:block;font-size:12px;color:var(--muted);line-height:1.6}
.lt-cat{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:4px 0 8px}

/* ============ Borang EA ============
   A statutory form is read by somebody who already knows its shape, so it keeps
   the shape: lettered parts, numbered lines, the code in its own column. */
.eaform{padding:32px 34px;max-width:840px;margin:0 auto}
.ea-head{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:14px;border-bottom:2px solid var(--ink)}
.ea-head b{display:block;font-size:19px;letter-spacing:.06em}
.ea-head span{display:block;font-size:11.5px;color:var(--muted);line-height:1.5}
.ea-yr{text-align:right}
.ea-yr span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ea-yr b{font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.ea-note{font-size:11.5px;color:var(--muted);line-height:1.6;padding:12px 0 4px}
.ea-part{display:flex;align-items:center;gap:9px;margin:24px 0 10px;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  border-bottom:1px solid var(--line);padding-bottom:7px}
.ea-part b{width:22px;height:22px;flex:none;border-radius:4px;background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.ea-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 22px}
.ea-grid > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.ea-grid span{font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.ea-grid b{font-size:13.5px;font-weight:500;word-break:break-word}
.eatbl{width:100%;border-collapse:collapse}
.eatbl td{padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:top}
.eatbl td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:130px}
.eatbl td.ea-c{width:52px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.ea-sub{font-size:11.5px;color:var(--muted);padding-top:8px;line-height:1.55}
.ea-foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-top:30px;padding-top:16px;border-top:2px solid var(--ink)}
.ea-foot > div{display:flex;flex-direction:column;gap:1px}
.ea-foot span{font-size:11.5px;color:var(--muted);line-height:1.55}
.ea-foot b{font-size:13.5px}
.ea-foot > div > span:first-child{font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase}
.ea-sig{align-items:flex-start;text-align:left;min-width:230px}

@media (max-width:760px){
  .letterpage,.eaform{padding:22px 18px}
  .lt-head,.ea-head{flex-direction:column;gap:12px}
  .lt-mark{text-align:left;max-width:none}
  .ea-yr{text-align:left}
}

/* ============ Document files ============ */
.docup-btn{position:relative;cursor:pointer;display:inline-flex;align-items:center}
.docfile-now{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--line);background:var(--bg)}
.docfile-meta{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.docfile-meta b{font-size:13.5px;word-break:break-word}
.docfile-meta span{font-size:11.5px;color:var(--muted)}

/* the file itself, shown in the page — somebody checking an expiry date wants
   to look at the licence, not download another copy of it */
.docprev:empty{display:none}
.docprev{border-top:1px solid var(--line);background:var(--line-2);padding:14px}
.docprev iframe{width:100%;height:640px;border:1px solid var(--line);border-radius:8px;
  background:#fff;display:block}
.docprev img{display:block;max-width:100%;margin:0 auto;border-radius:8px;
  box-shadow:var(--shadow)}

.docdrop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:34px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--bg);
}
.docdrop:hover{border-color:var(--accent-deep);background:var(--accent-bg)}
.docdrop.off{cursor:default;opacity:.75}
.docdrop.off:hover{border-color:var(--line);background:var(--bg)}
.docdrop b{font-size:14px}
.docdrop span{font-size:12px;color:var(--muted);max-width:44ch;line-height:1.5}

/* ============ Social ============ */
.soc-accts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.soc-acct{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.soc-acct.off{opacity:.72;border-style:dashed}
.soc-ah{display:flex;align-items:center;gap:7px;font-size:13.5px}
.soc-ah b{font-weight:600}
.soc-an{font-size:12px;color:var(--muted)}
.soc-af{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.soc-af b{font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.soc-af .up{font-size:11.5px;color:var(--ok)}
.soc-af .down{font-size:11.5px;color:var(--crit)}
.soc-note{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:4px}

/* the heatmap: one scale per network, so a strong slot reads at a glance
   without the colour pretending to compare TikTok against Facebook */
.soc-heat{margin-bottom:22px}
.soc-heath{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.soc-heath b{font-size:13.5px}
.soc-heath span{font-size:11.5px;color:var(--muted);margin-left:auto}
.heat{border-collapse:separate;border-spacing:3px;width:100%}
.heat th{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;padding:2px 4px;text-align:center}
.heat tbody th{text-align:right;width:38px}
.heat td{
  text-align:center;font-size:11.5px;font-variant-numeric:tabular-nums;
  padding:7px 4px;border-radius:5px;color:var(--ink);
  background:color-mix(in srgb, var(--accent-deep) calc(var(--h) * 1%), var(--track));
}
.heat td[style*="--h:9"],.heat td[style*="--h:100"]{color:#fff;font-weight:600}

.soc-cap{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-post{font-size:14px;line-height:1.7;padding:14px 16px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line)}

.soc-funnel{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.soc-step{flex:1;min-width:118px;display:flex;flex-direction:column;gap:3px;position:relative;
  padding:12px 14px;border-radius:9px;background:var(--bg);border:1px solid var(--line)}
.soc-step span{font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.soc-step b{font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.soc-step i{position:absolute;right:-7px;top:50%;transform:translateY(-50%);
  font-style:normal;color:var(--muted-2);font-size:13px;z-index:1}
.soc-step:last-child{background:var(--accent-bg);border-color:#cfe3f1}
.soc-step:last-child b{color:var(--accent-ink)}
td.num.neg{color:var(--crit)}

/* ---- pagination ----
   A long list needs three things at once: where you are, how to move, and how
   much to show. WESS puts all three on one line and staff already read it that
   way, so the shape is kept. */
.pgbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  padding:11px 16px; border-bottom:1px solid var(--line);
  background:var(--bg); font-size:13px; color:var(--muted);
}
.pgbar:last-child{ border-bottom:0; border-top:1px solid var(--line) }
.pg-count b{ color:var(--ink); font-variant-numeric:tabular-nums }
.pg-nav{ display:flex; flex-wrap:wrap; gap:3px; margin-left:auto }
.pg{
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  border-radius:5px; padding:4px 9px; font:inherit; font-size:12.5px;
  cursor:pointer; font-variant-numeric:tabular-nums;
}
.pg:hover{ border-color:var(--accent-deep); color:var(--accent-ink) }
.pg.on{ background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; font-weight:600 }
.pg-x{ padding:4px 9px; font-size:12.5px; color:var(--muted-2); opacity:.55 }
.pg-per{ display:flex; align-items:center; gap:7px }
.pg-per select{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:5px; padding:3px 6px; font:inherit; font-size:12.5px;
}
@media (max-width:720px){ .pg-nav{ margin-left:0; width:100% } }

/* ---- branch data loading ----
   Shown between signing in and the branch file arriving. It says which branch
   is being fetched, because on a slow line that is the difference between
   "working" and "broken". */
.boot{
  min-height:60vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px; color:var(--muted);
}
.boot-mark{ font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.01em }
.boot-bar{
  width:220px; height:3px; border-radius:99px; background:var(--line);
  overflow:hidden; position:relative;
}
.boot-bar i{
  position:absolute; inset:0; display:block; border-radius:99px;
  background:var(--accent-deep); transform-origin:left;
  animation:bootslide 1.1s ease-in-out infinite;
}
@keyframes bootslide{
  0%{ transform:translateX(-100%) scaleX(.4) }
  50%{ transform:translateX(0) scaleX(.7) }
  100%{ transform:translateX(100%) scaleX(.4) }
}
.boot-note{ font-size:13.5px }
@media (prefers-reduced-motion:reduce){ .boot-bar i{ animation:none; transform:none } }

/* the inbox is showing what it has, not what is current */
.ibx-stale{padding:8px 14px;background:#fdf4e3;border-bottom:1px solid #e8d9b8;
  color:#7a5a1e;font-size:12px;line-height:1.45}

/* a booking that did not happen, on the Beauty Planner */
.cal-ev.missed{background:transparent;border:1px dashed var(--crit,#b23b2e);opacity:.75}

/* ============ labels ============
   Soft chips in a fixed set of colours, the way Reply.la shows them: the
   colour tells the kind at a glance (cohort blue, concern red and orange,
   customer green) and the name says the rest. */
.lb{display:inline-block;font-style:normal;font-size:10.5px;font-weight:600;line-height:1.5;
  padding:1px 7px;border-radius:999px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.lb-red{background:#fdecec;color:#b42318}
.lb-orange{background:#fff1e6;color:#b54708}
.lb-amber{background:#fef6dc;color:#8a6100}
.lb-green{background:#e8f5ee;color:#1e7a4a}
.lb-teal{background:#e3f5f3;color:#0f766e}
.lb-blue{background:#e8f0fd;color:#1d4ed8}
.lb-indigo{background:#eceefd;color:#4338ca}
.lb-purple{background:#f3ecfd;color:#7e22ce}
.lb-pink{background:#fdeaf3;color:#be185d}
.lb-grey{background:var(--line-2);color:var(--ink-2)}
.ibx-tc .lb{font-size:10px;padding:0 6px}

.ibx-lbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:5px}
.ibx-lbadd{border:1px dashed var(--line);background:none;border-radius:999px;cursor:pointer;
  font-size:10.5px;color:var(--muted);padding:1px 8px;line-height:1.5}
.ibx-lbadd:hover{border-color:var(--accent);color:var(--accent-ink)}

.ibx-lbbar{padding:0 12px 8px;border-bottom:1px solid var(--line)}
.ibx-lbbar select{width:100%;font-size:12px;padding:5px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink-2)}

.lbpick{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow-y:auto;margin-bottom:14px}
.lbgrph{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lbgrp{display:flex;flex-wrap:wrap;gap:6px 10px}
.lbgrph{flex-basis:100%}
.lbopt{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.lbopt input{margin:0}
.lbnew,.lbform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lbnew input,.lbform input{flex:1;min-width:160px}
.lbnew input,.lbnew select,.lbform input,.lbform select{padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}
.lbtbl td.acts{text-align:right;white-space:nowrap}
.lbtbl td.acts .btn{margin-left:6px}

/* the WhatsApp 24-hour window, as Reply.la's ring: time left to reply freely */
.ibx-tc em.win,.ibx-lbs em.win{font-style:normal;font-size:10px;font-weight:600;padding:0 6px;border-radius:999px;
  background:var(--ok-bg,#ecf5f0);color:var(--ok,#3f7d5c);white-space:nowrap}
.ibx-lbs em.win{font-size:10.5px;padding:1px 7px}
em.win.low{background:#fff4e0;color:#9a5b00}
em.win.shut{background:var(--line-2);color:var(--muted)}

/* search above the conversation list, and the lead code on each row */
.ibx-search{padding:8px 12px 6px}
.ibx-search input{width:100%;font:inherit;font-size:12.5px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink)}
.ibx-search input:focus{outline:none;border-color:var(--accent)}
.ibx-code{display:block;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;margin-top:1px}
.ibx-code.hd{display:inline;font-size:12px;margin:0 4px 0 0}

/* photos, video, voice notes and files in a conversation */
.msgimg{display:block;max-width:260px;max-height:320px;border-radius:9px;margin:0 0 6px;background:var(--line-2)}
.msgimg.stk{max-width:120px;background:none}
.msgaud{display:block;width:240px;margin:0 0 6px}
.msgdoc{display:inline-block;margin:0 0 6px;padding:6px 10px;border-radius:8px;background:var(--card);
  border:1px solid var(--line);color:var(--accent-ink);text-decoration:none}
/* WhatsApp's receipts */
.tick{font-size:11px;letter-spacing:-2px;color:var(--muted);margin-left:3px}
.tick.read{color:#34b7f1}
.tick.fail{letter-spacing:0;color:var(--crit);font-weight:700}
.msgfail{margin-top:5px;font-size:11.5px;color:var(--crit);font-weight:600}

/* an existing customer, from the WESS customer file */
.ibx-tc em.cust{font-style:normal;font-size:10px;font-weight:700;padding:0 6px;border-radius:999px;
  background:var(--ok-bg,#ecf5f0);color:var(--ok,#3f7d5c)}
.custrec{padding:10px 0;border-top:1px solid var(--line-2)}
.custrec:first-of-type{border-top:0;padding-top:4px}
.custhd b{display:block;font-size:14px}
.custhd span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.custdl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:10px 0;font-size:12.5px}
.custdl dt{color:var(--muted)}
.custdl dd{margin:0}
.custdl dd.owed{color:var(--crit);font-weight:600}
.custpk{margin-top:6px}
.pkrow{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:12.5px;padding:3px 0}
.pkrow span{flex:1;min-width:120px}
.pkrow b{font-weight:600;color:var(--ink)}
.pkrow i{font-style:normal;font-size:11px;color:var(--muted)}

/* a note about the channel, not a warning */
.ibx-stop.info{background:var(--accent-bg);color:var(--accent-ink)}

/* conversation status, Wati style */
.stseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stseg button{border:0;background:var(--card);padding:4px 9px;font-size:11.5px;cursor:pointer;color:var(--muted)}
.stseg button+button{border-left:1px solid var(--line)}
.stseg button.on{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.ibx-tc em.st{font-style:normal;font-size:10px;font-weight:600;padding:0 6px;border-radius:999px}
.ibx-tc em.st-pending{background:#fff4e0;color:#9a5b00}
.ibx-tc em.st-solved{background:var(--line-2);color:var(--muted)}
.ibx-solved{flex:none;border-top:1px solid var(--line);padding:12px 16px;background:var(--bg);font-size:12.5px;
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.ibx-solved .btn{margin-left:auto}
/* assign and quick-reply pickers */
.agsearch{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px}
.aglist,.qrlist{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow-y:auto}
.agrow,.qrrow{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--card);
  border-radius:9px;padding:9px 11px;cursor:pointer;font:inherit}
.agrow:hover,.qrrow:hover{border-color:var(--accent)}
.agrow.on{background:var(--accent-bg)}
.agrow span{margin-left:auto;font-size:11.5px;color:var(--muted)}
.agrow .dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.agrow .dot.on{background:#22a35a}
.qrrow{flex-direction:column;align-items:flex-start;gap:4px}
.qrrow b em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--muted)}
.qrrow span{font-size:12px;color:var(--ink-2);line-height:1.45;max-height:5.8em;overflow:hidden}
.ibx-composer{position:relative}
.qrpop{position:absolute;left:14px;right:14px;bottom:100%;margin-bottom:6px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.12));max-height:260px;overflow-y:auto;z-index:5}
.qrpop button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line-2);
  background:none;padding:8px 11px;cursor:pointer;font:inherit}
.qrpop button:hover{background:var(--accent-bg)}
.qrpop button span{font-size:11.5px;color:var(--muted)}
.qrnone{padding:10px 12px;font-size:12px;color:var(--muted)}
.qrcard{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line-2)}
.qrcard>div:first-child{flex:1}
.qrbody{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.qrcard .acts{display:flex;gap:6px;flex:none}

/* the same person on another channel */
.relcard a{display:inline-block;margin:0 8px 4px 0;padding:3px 9px;border-radius:999px;background:var(--accent-bg);color:var(--accent-ink);font-size:12px;text-decoration:none}

/* ---- consultant note: guide, repeat-back, written plan, bonus (19 Sep 2026) ---- */
.nt-guide{border:1px solid var(--line);border-radius:10px;background:var(--accent-bg);padding:10px 14px;margin:0 0 18px}
.nt-guide summary{cursor:pointer;font-weight:600;color:var(--accent-ink)}
.nt-g{margin-top:10px}
.nt-g b{display:block;color:var(--ink);margin-bottom:3px}
.nt-g p{margin:2px 0;color:var(--ink-2)}
.nt-g p.nt-say{font-style:italic;color:var(--accent-ink)}
.nt-never{border-top:1px solid var(--line);padding-top:8px}
.nt-conf{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.nt-conf .nt-conf-t{flex:1 1 320px;min-width:0}
.nt-conf-ok{display:flex;gap:6px;align-items:center;white-space:nowrap;font-weight:600}
.nt-conf .hint{flex-basis:100%}
.nt-offer{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.nt-off{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.nt-off-h{font-weight:700;margin-bottom:6px}
.nt-off .field{margin-bottom:8px}
.nt-bonus{display:flex;flex-direction:column;gap:6px}
.nt-bon{display:grid;grid-template-columns:minmax(0,2fr) 70px minmax(0,2fr) auto;gap:6px}
@media (max-width:600px){.nt-bon{grid-template-columns:1fr 70px auto}.nt-bon [data-f="why"]{grid-column:1/-1}}

/* bookings made from a conversation */
.bkrow{padding:6px 0;border-top:1px solid var(--line-2);font-size:12.5px}
.bkrow:first-of-type{border-top:0}
.bkrow .chip{margin-left:6px}

/* history from Wati / Reply.la, above the live conversation */
.archblk{margin:0 0 14px;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;background:var(--bg)}
.archhd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px}
.archhd .psub{flex-basis:100%;margin:0}
.archhd .btn{margin-left:auto}
.archblk.open .msgrow.arch .msg{opacity:.92}
.archmore{margin:8px 0}
.archend{text-align:center;font-size:11px;color:var(--muted);margin-top:8px}

/* the search hides rows with [hidden]; display:flex above would otherwise win */
.ibx-t[hidden]{display:none!important}
.ibx-src{font-size:12px;color:var(--muted);margin-top:2px}
/* how far a blast has got */
.blbar{height:8px;border-radius:5px;background:var(--line-2);overflow:hidden}
.blbar i{display:block;height:100%;background:var(--ok,#1a9b6c)}
/* Latih Bot */
.latih-text{margin-top:8px;white-space:normal;line-height:1.5}
.latih-img{display:block;max-width:260px;max-height:260px;margin-top:8px;border-radius:8px;border:1px solid var(--line)}
/* Enter-to-send switch beside the Send button */
.ibx-enter{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.ibx-enter label{display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
@media (max-width:700px){ .ibx-enter #cmpHint{display:none} }

/* Sale Ticket item suggestions while typing (Adibah, 21 Sep 2026) */
.tk-search{position:relative}
.tk-sug{position:absolute;left:16px;right:16px;top:100%;margin-top:4px;z-index:30;max-height:340px;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(20,40,60,.16)}
.tk-sug-i{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:8px 12px;
  border:0;border-bottom:1px solid var(--line);background:none;font:inherit;cursor:pointer}
.tk-sug-i:last-child{border-bottom:0}
.tk-sug-i:hover,.tk-sug-i:focus-visible{background:var(--accent-bg,#eef4f9);outline:none}
.tk-sug-i b{font-size:12.5px;font-weight:600;color:var(--ink)}
.tk-sug-i i{font-style:normal;font-size:11px;color:var(--muted)}
.tk-sug-i.pk{background:var(--ok-bg)}
.tk-sug-none{padding:10px 12px;font-size:12px;color:var(--muted)}
/* New Appointment: customer found by phone, every branch */
.na-pick{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.na-row{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:7px 10px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);font:inherit;cursor:pointer}
.na-row:hover,.na-row:focus-visible{border-color:var(--accent);outline:none}
.na-row b{font-size:12.5px}.na-row i{font-style:normal;font-size:11px;color:var(--muted)}
.na-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;padding:7px 10px;border-radius:6px;background:var(--ok-bg)}
.na-none{font-size:12px;color:var(--muted);padding:4px 2px}
/* Customers: every branch, filter and search */
.cust-filter{display:flex;flex-direction:column;gap:8px}
.cust-filter input{padding:9px 12px;border:1px solid var(--line);border-radius:6px;font:inherit;max-width:520px}
.cust-filter input:focus{border-color:var(--accent);outline:none}

/* back to top (Adibah, 21 Sep 2026) — above the AI Helper button */
.to-top{position:fixed;right:24px;bottom:84px;z-index:40;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(20,40,60,.18)}
.to-top:hover,.to-top:focus-visible{border-color:var(--accent);color:var(--accent-ink);outline:none}
/* who answers WhatsApp, per branch */
.wamode-br{padding:10px 0;border-top:1px solid var(--line-2)}
.wamode-br:first-of-type{border-top:0}
.wamode-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.wamode-l{min-width:150px;font-size:13px}

/* Ruang Saya (22 Sep 2026) — one column that reads well on a phone */
.me{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.me-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.me-hi{font-size:22px;font-weight:700;color:var(--ink)}
.me-clock{width:100%;min-height:48px;font-weight:700}
.me-sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.me-sec h3{margin:0;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.me-kpi{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}
.me-kpi:last-child{border-bottom:0}
.me-kpi-h{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.me-kpi-h .crit,.me-kpi-n.crit{color:var(--crit)}.me-kpi-h .ok,.me-kpi-n.ok{color:var(--ok)}
.me-kpi-n{font-size:12px;color:var(--muted)}
.me-bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.me-bar i{display:block;height:100%;border-radius:999px;background:var(--crit)}.me-bar i.ok{background:var(--ok)}
.me-row{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
.me-row:last-child{border-bottom:0}
.me-row-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.me-acts{display:flex;gap:6px;flex-wrap:wrap}
.me-acts .btn{min-height:38px}
.me-wa{background:#1f7a4d;color:#fff;border-color:#1f7a4d;text-decoration:none}
.me-tabs{flex-wrap:wrap}
/* labels carried over from Reply.la */
.ibx-old{font-size:12px;color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ibx-old .chip{font-size:11px;padding:1px 7px}

/* Appointment Book: the time column stays on the left while the diary scrolls
   sideways, so staff see the time on any staff column (Tiera, 22 Sep 2026) */
.bk-gutter{position:sticky;left:0;z-index:4;background:var(--card)}
.bk-hcell.bk-hgutter{left:0;z-index:6}
.bk-wait .bk-slot:hover{background:var(--accent-bg)}