/* ==========================================================================
   ClinicManagerPro: app glimpse library, part 2 (tour + component extras)
   Loads after cmp-glimpse.css. Prefix: cmpg-
   ========================================================================== */

/* Page-load line under the window bar */
.cmpg-load{height:2px;position:relative;overflow:hidden;background:#fff}
.cmpg-load span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--cmp-accent);opacity:0}
.cmpg-load.go span{animation:cmpgLoad .55s ease-out forwards}
@keyframes cmpgLoad{0%{width:0;opacity:1}80%{width:85%;opacity:1}100%{width:100%;opacity:0}}

/* Stacked views inside one window (animated tour) */
.cmpg-views{display:grid;flex:1;padding:20px;min-height:0}
.cmpg-view{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s;min-width:0}
.cmpg-view.show{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
.cmpg-view.show .cmpg-tr:not(.h),.cmpg-view.show .cmpg-stat,.cmpg-view.show .cmpg-ql,.cmpg-view.show .cmpg-tot div{animation:cmpgIn .4s ease both}
.cmpg-view.show :nth-child(2){animation-delay:.05s}.cmpg-view.show :nth-child(3){animation-delay:.1s}
.cmpg-view.show :nth-child(4){animation-delay:.15s}.cmpg-view.show :nth-child(5){animation-delay:.2s}.cmpg-view.show :nth-child(6){animation-delay:.25s}
.cmpg-view.show .cmpg-col i{animation:cmpgGrow .7s cubic-bezier(.2,.8,.2,1) both}
.cmpg-view.show .cmpg-stamp{animation:cmpgStamp .45s .7s cubic-bezier(.3,1.6,.5,1) both}

/* Cursor and click ripple */
.cmpg-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;pointer-events:none;fill:#0c200d;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(12,32,13,.35));transform:translate(120px,300px);transition:transform .9s cubic-bezier(.45,.05,.25,1);opacity:0}
.cmpg-cursor.on{opacity:1}
.cmpg-ripple{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--cmp-accent);opacity:0;pointer-events:none;z-index:4}
.cmpg-ripple.go{animation:cmpgRip .5s ease-out}
@keyframes cmpgRip{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}}
.cmpg-nav.press{transform:scale(.97)}
.cmpg-app{position:relative}

/* Two-column body */
.cmpg-two{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.cmpg-split{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:start}

/* Table columns: set --cols (and optional --cols-sm) on .cmpg-tbl */
.cmpg-tbl .cmpg-tr{grid-template-columns:var(--cols)}
.cmpg-tm{font-weight:600;color:#4a5a47}
.cmpg-sub{display:block;font-size:11.5px;font-weight:400;color:var(--cmp-muted)}

/* Branch tags (one colour per branch) */
.cmpg-bt{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:5px;white-space:nowrap}
.cmpg-bt.b1{background:#e3f1e3;color:#25602b}
.cmpg-bt.b2{background:#fdeccd;color:#7a4700}
.cmpg-bt.b3{background:#e3ecf8;color:#2c5a8c}

/* Branch switcher dropdown */
.cmpg-ddwrap{position:relative}
.cmpg-dd{position:absolute;right:0;top:calc(100% + 6px);z-index:4;width:230px;background:#fff;border:1px solid var(--cmp-border);border-radius:12px;box-shadow:var(--cmp-sh-float);padding:6px}
.cmpg-dd div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:500}
.cmpg-dd div.on{background:var(--cmp-psoft);color:var(--cmp-primary);font-weight:600}
.cmpg-dd div small{font-size:11px;color:var(--cmp-muted);font-weight:500}
.cmpg-dd hr{border:0;border-top:1px solid #edf2eb;margin:4px 6px}

/* Timeline (patient record) */
.cmpg-tl{display:grid;gap:0}
.cmpg-tl-i{display:grid;grid-template-columns:14px 1fr;gap:12px;position:relative;padding-bottom:14px}
.cmpg-tl-i::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:2px;background:#e3ebe1}
.cmpg-tl-i:last-child::before{display:none}
.cmpg-tl-i>i{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--cmp-primary);margin-top:2px}
.cmpg-tl-i.w>i{border-color:var(--cmp-accent)}
.cmpg-tl-i b{display:block;font-size:13px;font-weight:600}
.cmpg-tl-i p{font-size:12px;color:var(--cmp-muted)}

/* Key-value list (profile card) */
.cmpg-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px}
.cmpg-kv dt{color:var(--cmp-muted)}
.cmpg-kv dd{font-weight:600;text-align:right}
.cmpg-person{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cmpg-person .cmpg-av{width:42px;height:42px;font-size:14px}
.cmpg-person b{display:block;font-size:15px;font-weight:600}
.cmpg-person small{display:block;font-size:12px;color:var(--cmp-muted)}

/* Toast widget */
.cmpg-toast .ic{background:#d6f0d5;color:#1f5a26}

/* Panel heading with small title */
.cmpg-h{font-size:14px;font-weight:600;letter-spacing:-.005em}
.cmpg-cap{font-size:11.5px;color:var(--cmp-muted)}

/* Service list rows (specialty panels) */
.cmpg-svc{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #edf2eb;font-size:13px}
.cmpg-svc:first-of-type{border-top:0}
.cmpg-svc b{font-weight:600}
.cmpg-svc .cmpg-sub{margin-top:1px}
.cmpg-svc .amt{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* Tablet and phone */
@media (max-width:900px){
  .cmpg-views{height:440px}
  .cmpg-two,.cmpg-split{grid-template-columns:1fr}
  .cmpg-two>.cmpg-panel:last-child.hide-md,.cmpg-split>.hide-md{display:none}
  .cmpg-dd{right:auto;left:0}
}
@media (max-width:560px){
  .cmpg-views{padding:14px;height:470px}
  .cmpg-tbl .cmpg-tr{grid-template-columns:var(--cols-sm,var(--cols))}
}
@media (prefers-reduced-motion:reduce){.cmpg-cursor,.cmpg-ripple{display:none}.cmpg-view,.cmpg-view *{transition:none!important;animation:none!important}}

/* Fixes after first visual check */
.cmpg-person .cmpg-av{display:grid}
.cmpg-tvwrap{max-width:520px}
.cmpg-tv-now small{display:block;margin-bottom:6px}
.cmpg-float.bl{bottom:9%;left:-34px}

/* Long names truncate instead of overlapping the next column */
.cmpg-pt>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cmpg-tr>span{min-width:0}
/* The jaali lattice is wider than the page on purpose; stop it creating sideways scrolling */
html,body{overflow-x:clip}

/* ---------- Batch 2 components ---------- */
/* Dialog (share patient, convert lead, invite team) */
.cmpg-modal{background:#fff;border:1px solid var(--cmp-border);border-radius:14px;box-shadow:var(--cmp-sh-hero);max-width:400px;overflow:hidden}
.cmpg-modal-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #edf2eb;font-size:14px;font-weight:600}
.cmpg-modal-h span{color:var(--cmp-muted);font-weight:400}
.cmpg-modal-b{padding:14px 16px;display:grid;gap:12px}
.cmpg-modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;background:#f6faf3;border-top:1px solid #edf2eb}
.cmpg-btn.ghost{background:#fff;color:var(--cmp-fg);border:1px solid var(--cmp-border);box-shadow:none}
.cmpg-field{display:grid;gap:5px}
.cmpg-field label{font-size:11.5px;font-weight:600;color:var(--cmp-muted);text-transform:uppercase;letter-spacing:.04em}
.cmpg-input{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:36px;padding:7px 11px;border:1px solid var(--cmp-border);border-radius:8px;font-size:13px;background:#fff}
.cmpg-input.focus{border-color:var(--cmp-primary);box-shadow:0 0 0 3px rgba(53,108,56,.12)}
.cmpg-input i{font-style:normal;color:var(--cmp-muted)}
.cmpg-check{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.4}
.cmpg-check b{flex:none;width:17px;height:17px;border-radius:5px;background:var(--cmp-primary);color:#fff;display:grid;place-items:center;font-size:11px;margin-top:1px}
.cmpg-check b.off{background:#fff;border:1.5px solid #b9c7b6}
/* Toggle rows (modules on/off) */
.cmpg-tg{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #edf2eb;font-size:13px}
.cmpg-tg:first-of-type{border-top:0}
.cmpg-tg b{font-weight:600}
.cmpg-sw{flex:none;width:34px;height:20px;border-radius:999px;background:var(--cmp-primary);position:relative}
.cmpg-sw::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.cmpg-sw.off{background:#cfd8cc}.cmpg-sw.off::after{right:auto;left:2px}
.cmpg-sw.lock{opacity:.55}
/* Consultation note */
.cmpg-note{display:grid;gap:10px}
.cmpg-note-s{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:12.5px;line-height:1.45}
.cmpg-note-s>b{width:22px;height:22px;border-radius:6px;background:var(--cmp-psoft);color:var(--cmp-primary);display:grid;place-items:center;font-size:11px;font-weight:700}
.cmpg-note-s p strong{font-weight:600}
.cmpg-lock{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--cmp-muted)}
.cmpg-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2}
/* Prescription */
.cmpg-rx{background:#fff;border:1px solid var(--cmp-border);border-radius:12px;padding:16px 18px;max-width:420px;box-shadow:var(--cmp-sh-lift)}
.cmpg-rx-h{display:flex;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--cmp-primary)}
.cmpg-rx-h b{display:block;font-family:var(--cmp-font-head);font-size:16px;font-weight:600}
.cmpg-rx-h small{display:block;font-size:11px;color:var(--cmp-muted)}
.cmpg-rx-sym{font-family:var(--cmp-font-head);font-size:22px;font-weight:600;color:var(--cmp-primary);margin:10px 0 2px}
.cmpg-rx-l{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0;border-top:1px dashed #e3ebe1;font-size:12.5px}
.cmpg-rx-l:first-of-type{border-top:0}
.cmpg-rx-l b{font-weight:600}.cmpg-rx-l span{color:var(--cmp-muted);font-size:11.5px}
.cmpg-rx-f{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #edf2eb;font-size:11px;color:var(--cmp-muted)}
.cmpg-rx-f .sig{font-family:var(--cmp-font-hand);font-size:22px;color:var(--cmp-primary);line-height:1}
/* Banner (trial countdown) */
.cmpg-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:10px;background:var(--cmp-accsoft);border:1px solid #f5d48f;font-size:12.5px;color:var(--cmp-accfg);margin-bottom:14px}
.cmpg-banner b{font-weight:700}
.cmpg-banner .cmpg-btn{background:var(--cmp-accent);color:var(--cmp-accfg)}
/* Day schedule */
.cmpg-sched{display:grid;grid-template-columns:52px 1fr;gap:0 10px;font-size:12px}
.cmpg-sched .t{color:var(--cmp-muted);font-variant-numeric:tabular-nums;padding-top:2px;height:var(--slot,34px)}
.cmpg-sched .s{border-top:1px dashed #e3ebe1;position:relative;height:var(--slot,34px)}
.cmpg-blk{position:absolute;left:0;right:0;top:3px;z-index:1;border-radius:7px;padding:5px 9px;background:var(--cmp-psoft);border-left:3px solid var(--cmp-primary);font-size:12px;line-height:1.3;overflow:hidden}
.cmpg-blk b{font-weight:600;display:block}.cmpg-blk span{color:var(--cmp-muted);font-size:11px}
.cmpg-blk.w{background:var(--cmp-accsoft);border-left-color:var(--cmp-accent)}
.cmpg-blk.b{background:#e6effa;border-left-color:#5b88bb}
/* Role chips */
.cmpg-role{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--cmp-border)}
.cmpg-role i{width:8px;height:8px;border-radius:50%;background:var(--c,#356c38)}
/* Badges */
.cmpg-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--cmp-border);box-shadow:var(--cmp-sh-card)}
.cmpg-badge svg{width:16px;height:16px;fill:none;stroke:var(--cmp-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.cmpg-modal,.cmpg-rx{max-width:100%}}

/* Narrow app windows drop their sidebar so the content keeps its room */
.cmpg-win{container-type:inline-size}
@container (max-width:820px){
  .cmpg-win:not(.cmpg--xl) .cmpg-app{grid-template-columns:1fr}
  .cmpg-win:not(.cmpg--xl) .cmpg-side{display:none}
}
@container (max-width:640px){
  .cmpg-split{grid-template-columns:1fr!important}
  .cmpg-split>.hide-md{display:block}
  .cmpg-rx{max-width:none}
}
@media (max-width:700px){.cmpg-stats.c3{grid-template-columns:1fr}}

/*add3b*/.cmpg-sched{--slot:46px!important}.cmpg-blk{padding:5px 9px}