/* Mock PMS shell. Colour tokens follow the real product's palette so the
   demo reads as "the clinic's calendar"; no logos or wordmarks are copied. */
:root{
  --accent:#54b2d3;--accent-focused:#40a0c1;--accent-ghost:#eef7fb;--blue-btn:#037cd2;--blue-btn-h:#0668b3;
  --text:#3d3d46;--text-dark:#1f2a40;--grey:#9292a3;--grey-dark:#555565;--grey-lt:#cfcfd7;--line:#e4e6ea;--line-2:#ecedf0;
  --header-bg:#f6f7fa;--bg:#fff;--page:#f7f7f9;--danger:#ff5b64;--green:#65cd98;--pink:#ed72aa;--purple:#7b61e2;--gold:#ffc62b;--navy:#0f172a;
  --rail:64px;--hdr:68px;--row:18px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 "Circular Std","Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;padding-top:16px;gap:2px;z-index:20}
.rail .burger{width:34px;height:34px;display:grid;place-items:center;color:var(--grey);margin-bottom:12px}
.rail a{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#9aa0ae;position:relative;margin:2px 0}
.rail a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail a.active{background:var(--accent);color:#fff}
.rail a:hover:not(.active){background:#f2f4f7;color:var(--grey-dark)}
.rail .badge{position:absolute;top:-6px;left:-4px;background:#ff4d4f;color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px;line-height:14px}
.rail .spacer{flex:1}
.rail .sep{width:36px;height:1px;background:var(--line);margin:6px 0}
.hdr{position:fixed;left:var(--rail);right:0;top:0;height:var(--hdr);background:#fff;display:flex;align-items:center;padding:0 24px;gap:16px;z-index:19;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px;color:#1d2b4a;letter-spacing:-.3px;min-width:140px}
.logo .mark{width:32px;height:32px}
.search{flex:1;max-width:640px;margin:0 auto;height:42px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;padding:0 18px;color:#8b8fa0;background:#fff;gap:14px}
.search span.q{flex:1;text-align:center;font-size:14px;color:#6b7083}
.search kbd{border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:12px;color:#55596a;background:#fff}
.hdr .actions{display:flex;align-items:center;gap:18px}
.btn-create{height:42px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--accent);font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px}
.btn-create .plus{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px;line-height:1}
.ico{width:24px;height:24px;stroke:#6b7083;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.till{height:38px;border-radius:19px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:10px;padding:0 6px 0 16px}
.till .amt{background:var(--gold);color:#1f2a40;font-weight:700;border-radius:16px;padding:5px 12px;font-size:14px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;background:#ef5350;position:relative}
.avatar.online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#2ecc71;border:2px solid #fff}
.main{position:absolute;left:var(--rail);right:0;top:var(--hdr);bottom:0;background:var(--page);overflow:auto}
.btn{height:44px;padding:0 20px;border-radius:22px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text-dark)}
.btn.primary{background:var(--blue-btn);border-color:var(--blue-btn);color:#fff;font-size:16px;height:48px;padding:0 24px}
.btn.primary:hover{background:var(--blue-btn-h)}
.btn.icon{width:44px;padding:0;justify-content:center;border-radius:50%}
.btn.icon svg{width:20px;height:20px;stroke:#5b6170;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chip{height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--text-dark);font-size:15px}
.chip .caret,.btn .caret{width:10px;height:10px;border-right:1.6px solid #6b7083;border-bottom:1.6px solid #6b7083;transform:rotate(45deg) translateY(-3px)}
.demo-pill{position:fixed;right:18px;bottom:16px;z-index:30;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:12px;color:var(--grey-dark);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.demo-pill b{color:var(--accent)}
/* list pages */
.panel{margin:26px 28px;background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(9,20,41,.05);min-height:calc(100% - 52px);display:flex;flex-direction:column}
.panel-head{display:flex;align-items:center;gap:22px;padding:30px 34px 10px}
.panel-head h1{font-size:26px;margin:0;color:#1f2a40;font-weight:700}
.panel-head .count{margin-left:auto;color:#6b7083;font-size:16px}
.panel-head .srch{height:48px;width:330px;border:1px solid var(--line);border-radius:24px;display:flex;align-items:center;padding:0 18px;gap:10px;color:#8b8fa0}
.panel-head .srch input{border:0;outline:0;flex:1;font-size:15px;background:transparent}
.tabs{display:inline-flex;margin:12px 34px 0;background:#f2f4f7;border-radius:12px;padding:4px}
.tabs span{padding:9px 18px;border-radius:9px;color:#4b5160;font-size:15px}
.tabs span.on{background:#fff;color:#1f2a40;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.filters{display:flex;gap:12px;padding:16px 34px 10px;align-items:center}
.filters .right{margin-left:auto;display:flex;gap:12px}
table.list{width:100%;border-collapse:collapse;margin-top:10px}
table.list th{text-align:left;font-weight:600;color:#3b4150;padding:18px 20px;border-bottom:1px solid var(--line);border-top:1px solid var(--line);font-size:14px;white-space:nowrap}
table.list th .ic{width:16px;height:16px;stroke:#6b7083;fill:none;stroke-width:1.7;vertical-align:-3px;margin-right:8px}
table.list th .i{display:inline-grid;place-items:center;width:14px;height:14px;border:1.3px solid #9aa0ae;border-radius:50%;font-size:9px;color:#9aa0ae;margin-left:6px;font-style:normal}
table.list td{padding:0 20px;height:88px;border-bottom:1px solid var(--line);font-size:15px;color:#1f2a40;white-space:nowrap}
table.list td.chk,table.list th.chk{width:56px;padding-right:0}
.cb{width:20px;height:20px;border:1.5px solid #c0c3c8;border-radius:4px;display:inline-block}
.ini{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e5f3fa;color:#2a7ea8;font-weight:700;font-size:11px;margin-right:12px;vertical-align:middle}
.ini.sm{width:26px;height:26px;background:#e5f3fa}
.name{font-weight:600;border-bottom:1.5px dotted #9aa0ae;padding-bottom:1px}
.pill{display:inline-block;background:#f2f4f7;border-radius:16px;padding:7px 14px;color:#3b4150}
.foot{margin-top:auto;display:flex;align-items:center;gap:14px;padding:22px 34px;color:#4b5160;font-size:15px}
.foot select{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:#fff}
.pager{margin-left:auto;display:flex;gap:6px}
.pager span{min-width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:#6b7083;cursor:pointer;padding:0 6px}
.pager span.on{background:#e6f3ff;color:#1f2a40;font-weight:600}
tr.flash td{animation:rowflash 6s ease-out}
@keyframes rowflash{0%{background:#fff9d6}60%{background:#fff9d6}100%{background:#fff}}
.empty{padding:40px;color:var(--grey);text-align:center}

/* tooltips */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#1f2a40;color:#fff;font-size:12px;font-weight:500;white-space:nowrap;padding:6px 10px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:60;letter-spacing:0}
[data-tip]:hover::after{opacity:1;transition-delay:.35s}
[data-tip-pos="b"]::after{left:50%;top:calc(100% + 8px);transform:translateX(-50%)}
[data-tip-pos="t"]::after{left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}
.rail a[data-tip]::after{left:calc(100% + 14px)}
/* header menus */
.hico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px}.hico:hover{background:#f2f4f7}
.hico.dot::before{content:"";position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:#ff4d4f;border:2px solid #fff}
.menu-wrap{position:relative}.menu{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(9,20,41,.18);padding:8px;z-index:70}
.menu-wrap.open .menu{display:block}.menu a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;color:#1f2a40}.menu a:hover{background:#f2f4f7}
.menu b{display:block;padding:8px 12px 0;font-size:14px;color:#1f2a40}.menu small{display:block;padding:0 12px 8px;color:#8b8fa0;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu.notes{min-width:320px}.menu.notes p{margin:0;padding:10px 12px;font-size:13px;color:#4b5160;border-bottom:1px solid var(--line)}.menu.notes p:last-child{border:0}.menu.notes span{font-weight:700;color:#1f2a40}
.menu-wrap > *:first-child{cursor:pointer}
/* hover and focus */
.btn,.chip,.btn-create{cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover,.chip:hover,.btn-create:hover{border-color:#c7cdd6;background:#fafbfc}.btn.icon:hover{background:#f2f4f7}
.btn-create:hover{box-shadow:0 2px 8px rgba(84,178,211,.25)}
.tabs span{cursor:pointer}.tabs span:not(.on):hover{color:#1f2a40}
table.list tbody tr{cursor:pointer;transition:background .1s}table.list tbody tr:hover td{background:#f8fafc}
.name:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cb:hover{border-color:var(--accent)}
input:focus,select:focus{outline:none}
.pager span:hover{background:#f2f4f7}
.lbl{display:inline-block;font-size:11px;font-weight:600;border-radius:10px;padding:3px 9px;background:#eef7fb;color:#2a7ea8;margin-right:6px}.lbl.aria{background:#e8f6fb;color:#1f8fb8}.lbl.lead{background:#f3effd;color:#6f57cc}
/* detail drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100vw;background:#fff;box-shadow:-10px 0 40px rgba(9,20,41,.18);z-index:80;transform:translateX(100%);transition:transform .22s ease;padding:28px 28px 40px;overflow:auto}
.drawer.on{transform:none}.drawer .x{position:absolute;right:18px;top:16px;border:0;background:none;font-size:24px;color:#9aa0ae;cursor:pointer}
.drawer .x[data-tip]::after{left:auto;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.drawer .who{display:flex;align-items:center;gap:14px;margin-bottom:8px}.drawer .who .ini{width:52px;height:52px;font-size:18px;margin:0}
.drawer h2{margin:0;font-size:22px;color:#1f2a40}.drawer .sub{color:#6b7083;font-size:13px;margin:2px 0 0}
.drawer h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#8b8fa0;margin:24px 0 10px}
.drawer dl{display:grid;grid-template-columns:120px 1fr;gap:9px 10px;margin:0;font-size:14px}.drawer dt{color:#6b7083}.drawer dd{margin:0;color:#1f2a40;font-weight:500;word-break:break-word}
.drawer .ap{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:13px}.drawer .ap b{display:block;color:#1f2a40;font-size:14px}.drawer .ap .meta{color:#6b7083;margin-top:3px}
.drawer .ap.c{opacity:.6}.drawer .ap .st{float:right;font-size:11px;font-weight:700;border-radius:10px;padding:2px 8px;background:#e6f7ee;color:#1f7a45}.drawer .ap.c .st{background:#eceef1;color:#6b7083}
.drawer .acts{display:flex;gap:10px;margin-top:14px}.drawer .acts .btn{height:40px;font-size:14px}
.empty-sm{color:#9aa0ae;font-size:13px}

/* phones and small tablets */
@media (max-width: 900px){
  :root{--rail:0px;--hdr:56px}
  .rail{display:none}
  .hdr{padding:0 12px;gap:8px}.logo{font-size:20px;min-width:0}.logo .mark{width:30px;height:30px}
  .search,.btn-create,.till,.hico[data-tip="Quick book"],.hico[data-tip="Locations"],.hdr .actions > svg{display:none}
  .hdr .actions{margin-left:auto;gap:6px}.avatar{width:34px;height:34px;font-size:12px}
  .menu{right:-8px}
  .panel{margin:10px;min-height:0}.panel-head{flex-wrap:wrap;gap:10px;padding:18px 16px 6px}.panel-head h1{font-size:22px}
  .panel-head .count{margin-left:0;flex:1 1 100%;font-size:13px}.panel-head .srch{width:100%;height:42px}.panel-head .chip,.panel-head > span:not(.count){display:none}
  .btn.primary{height:42px;font-size:14px;padding:0 16px}
  .tabs{margin:8px 16px 0}.tabs span{padding:7px 10px;font-size:13px}
  .filters{flex-wrap:wrap;padding:10px 16px;gap:8px}.filters .right{margin-left:0}.filters .chip{height:36px;font-size:13px;padding:0 12px}
  table.list{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}table.list th,table.list td{padding:0 12px;font-size:13px}table.list td{height:64px}
  table.list th{padding:12px}
  .foot{padding:14px 16px;flex-wrap:wrap;font-size:13px}
  .drawer{width:100vw;padding:22px 18px 40px}
  .demo-pill{font-size:10px;padding:4px 8px;right:8px;bottom:8px;white-space:nowrap}.demo-pill .mid{display:none}
  [data-tip]::after{display:none}
}