/* The clinic admin: the patient site's world (base.css + mobile/site.css) with a few admin-only pieces.
   Built for one person on a phone: big type, big targets, one job per screen. */
body.admin{background:var(--surface);padding-bottom:calc(120px + env(safe-area-inset-bottom))}
#view:focus{outline:none}
.admin .dock{grid-template-columns:repeat(4,1fr)}
.admin .toast{bottom:calc(104px + env(safe-area-inset-bottom))}
.admin.has-pub .toast{bottom:calc(176px + env(safe-area-inset-bottom))}

/* ---------- heading and day switcher ---------- */
.ahead{padding:calc(16px + env(safe-area-inset-top)) 20px 12px}
.ahead-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.ahead small{display:block;font-size:15px;font-weight:600;color:var(--ink-2)}
.ahead h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.daynav{display:flex;gap:6px}
.daynav button{width:44px;height:44px;border-radius:14px;border:0;background:var(--canvas);display:grid;place-items:center;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(20,22,41,.06)}
.daynav button svg{width:20px;height:20px}
.daynav .prev svg,.cal-head .prev svg{transform:rotate(180deg)}

/* ---------- branch filter ---------- */
.btabs{display:flex;gap:8px;padding:0 20px 14px;overflow-x:auto;scrollbar-width:none}
.btabs::-webkit-scrollbar{display:none}
.btabs .pill{flex:none;min-height:44px;white-space:nowrap;border-color:transparent}
.btabs .pill[aria-pressed="true"]{background:var(--act);border-color:var(--act);color:#fff}

/* ---------- a white list card of rows ---------- */
.card{margin:0 12px;background:var(--canvas);border-radius:22px;box-shadow:0 1px 2px rgba(20,22,41,.05)}
.card + .card{margin-top:12px}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 16px 4px}
.card-h h2{font-size:18px;letter-spacing:-.01em}
.card-h p{font-size:13px;color:var(--ink-2)}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:64px;padding:12px 16px;
  border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:0}
.card > .row:first-child{border-radius:22px 22px 0 0}.card > .row:last-child{border-radius:0 0 22px 22px}
.row + .row{border-top:1px solid var(--line)}
.row:active{background:var(--surface)}
.row-skel{pointer-events:none}
.row .t{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.row .t small{display:block;font-size:12px;font-weight:700;color:var(--ink-3)}
.row b{display:block;font-size:17px;line-height:1.25}
.row .sub{display:block;font-size:14px;color:var(--ink-2);margin-top:1px;line-height:1.35}
.row .go{color:var(--ink-3)}.row .go svg{width:18px;height:18px}
.row.is-past b,.row.is-past .t{color:var(--ink-2)}
.st{font-size:12px;font-weight:800;padding:5px 9px;border-radius:8px;white-space:nowrap}
.st.arrived{background:var(--sky-soft);color:var(--sky-ink)}
.st.cancelled{background:#FDECEC;color:#B42318}
.st.walkin{background:var(--act-soft);color:var(--act)}
.row.is-cancelled b{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink-3)}
/* the live line between past and upcoming */
.now{display:flex;align-items:center;gap:8px;padding:4px 16px;font-size:12px;font-weight:800;color:var(--sky-ink);letter-spacing:.04em}
.now::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--sky)}
.row + .now,.now + .row{border-top:0}
.notice{margin:0 12px 12px;padding:12px 14px;border-radius:16px;background:var(--act-soft);color:var(--act);font-size:14px;font-weight:650;display:flex;gap:10px;align-items:center}
.notice svg{width:20px;height:20px;flex:none}
.notice > span{flex:1}
.notice .chipbtn2{min-height:44px;padding:0 14px;flex:none}
/* a day someone is on leave: marked, and tappable to take the leave off */
.days .day.is-leave{background:#FDECEC;border-color:#F3C4C4;color:#9B1C1C}
.days .day.is-leave small{color:#9B1C1C}
.days .day.is-leave.is-on{box-shadow:0 0 0 2px #9B1C1C}
.drow .sub.has-leave{color:#9B1C1C}
.empty{padding:28px 20px;text-align:center;color:var(--ink-2);font-size:15px}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.bigact{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 12px 0;width:calc(100% - 24px);height:58px;font-size:17px}
.bigact svg{width:20px;height:20px}
/* Today's one action, always in reach of the thumb, just above the dock */
.bigact.pinned{position:fixed;left:12px;right:12px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:29;width:auto;margin:0;box-shadow:0 14px 30px -14px rgba(43,49,146,.6)}
body.admin:has(.bigact.pinned){padding-bottom:calc(180px + env(safe-area-inset-bottom))}
/* one solid backing under the button and the dock, so the list never shows through the gap between them */
body.admin:has(.bigact.pinned)::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:28;pointer-events:none;
  height:calc(184px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(243,244,247,0),var(--surface) 26px)}
.note{margin:14px 20px 0;font-size:13px;color:var(--ink-3)}

/* ---------- avatar ---------- */
.av{width:44px;height:44px;border-radius:50%;background:var(--sky-soft);color:var(--sky-ink);display:grid;place-items:center;font-weight:800;font-size:16px;overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover}
.av svg{width:22px;height:22px}
.row.doc{grid-template-columns:44px minmax(0,1fr) auto}

/* ---------- schedule: timings editor ---------- */
.tform{padding:4px 16px 16px}
.tform h3{font-size:14px;font-weight:750;color:var(--ink-2);margin:14px 0 8px}
.hrs-week{position:relative}
.wk-marks{display:grid;grid-template-columns:52px 1fr;gap:8px;height:18px;margin-bottom:2px}
.wk-marks div{position:relative}
.wk-marks i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:750;color:var(--ink-3);white-space:nowrap}
.wk-row{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:center;margin-top:6px}
.wk-day{height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--canvas);font:inherit;font-weight:750;font-size:14px;color:var(--ink-3);cursor:pointer;padding:0}
.wk-day[aria-pressed="true"]{background:var(--act-soft);border-color:transparent;color:var(--act)}
/* the day's track: faint lines at 9, 12, 3 and 6 (every three hours from 6 am) */
.wk-track{position:relative;height:44px;border-radius:12px;background-color:var(--surface);background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:18.75% 100%;background-position:0 0;cursor:copy;touch-action:pan-y}
.wk-track.is-closed{cursor:pointer}
.wk-track.is-closed::after{content:'Closed';position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink-3);pointer-events:none}
.wk-block{position:absolute;top:0;bottom:0;border:0;border-radius:11px;background:var(--act);color:#fff;font:inherit;font-size:13px;font-weight:750;padding:0;cursor:grab;touch-action:none;min-width:0}
.wk-block > span{display:block;overflow:hidden;white-space:nowrap;text-align:center;padding:0 10px;pointer-events:none}
.wk-block.is-drag{cursor:grabbing}
.wk-block.is-sel,.wk-block:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* the ends: a thin light bar each, with a wider invisible handle so a finger can catch it */
.wk-grip{position:absolute;top:0;bottom:0;width:20px;cursor:ew-resize}
.wk-grip.s{left:-6px}.wk-grip.e{right:-6px}
.wk-grip::after{content:'';position:absolute;top:13px;bottom:13px;width:3px;border-radius:2px;background:rgba(255,255,255,.7);left:50%;transform:translateX(-50%)}
.wk-x{position:absolute;top:-14px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;border:2px solid var(--canvas);background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;z-index:1}
.wk-x::before{content:'';position:absolute;inset:-7px}
.wk-x svg{width:14px;height:14px}
.wk-copy[hidden]{display:none}
.wk-copy{display:block;margin:10px 0 0 60px;border:0;background:none;padding:10px 0;min-height:44px;font:inherit;font-size:14px;font-weight:750;color:var(--act);cursor:pointer;text-align:left}
.wk-hint{margin:8px 0 0 60px;font-size:13px;color:var(--ink-3)}
.slen{display:flex;gap:6px;flex-wrap:wrap}
.slen .pill{min-height:44px}
.slen .pill[aria-pressed="true"]{background:var(--act);border-color:var(--act);color:#fff}
.tform .btn{margin-top:16px}
.drow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-items:center;padding:14px 16px}
.drow + .drow{border-top:1px solid var(--line)}
.drow b{display:block;font-size:16px;line-height:1.25}
.drow .sub{display:block;font-size:13px;color:var(--ink-2)}
.drow .acts{grid-column:2;display:flex;gap:8px;margin-top:6px}
.drow .acts .chipbtn2{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.drow > .chipbtn2{grid-column:2;justify-self:start;margin-top:6px}
.chipbtn2{min-height:44px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--canvas);font:inherit;font-size:14px;font-weight:750;color:var(--ink);cursor:pointer;white-space:nowrap}
.chipbtn2.leave{border-color:#F3C9C5;color:#B42318}
.chipbtn2.on-leave{background:#FDECEC;border-color:#FDECEC;color:#B42318}
.chipbtn2.icon{width:44px;padding:0;display:grid;place-items:center}
.chipbtn2.icon svg{width:18px;height:18px}

/* ---------- sheets ---------- */
.asheet{max-height:92vh;max-height:92dvh;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.asheet h2{font-size:24px;letter-spacing:-.02em;padding-right:48px}
.asheet .lead2{font-size:15px;color:var(--ink-2);margin-top:4px}
.asheet .facts{display:grid;gap:12px;margin-top:18px}
.asheet .facts div{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:16px}
.asheet .facts dt{color:var(--ink-2);font-weight:600}
.asheet .facts dd{font-weight:700}
.daynav button{width:44px;height:44px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.two .btn{height:54px}
.two .btn svg{width:20px;height:20px}
.asheet .btn--block{margin-top:10px}
.btn--danger{background:#FDECEC;color:#B42318}
.btn--line{background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.confirm{margin-top:12px;padding:14px;border-radius:16px;background:#FDECEC;color:#7A1A12;font-size:15px}
.confirm .two{margin-top:10px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.picks .pill{min-height:44px}
.picks .pill[aria-pressed="true"]{background:var(--act);border-color:var(--act);color:#fff}
.asheet .field label{font-size:15px}
.asheet .slots{margin-top:4px}
.asheet .slot{font-family:inherit;font-size:15px}
.asheet .slot:disabled{color:var(--ink-3);text-decoration:line-through;background:var(--surface);border-color:transparent;cursor:not-allowed}
.affected{margin-top:14px;display:grid;gap:8px}
.affected div{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface)}
.affected b{font-size:15px}.affected small{display:block;font-size:13px;color:var(--ink-2)}

/* ---------- doctor editor ---------- */
.photo-edit{display:flex;align-items:center;gap:14px;margin-top:16px}
.photo-edit .av{width:84px;height:84px;font-size:26px}
.photo-edit label{min-height:48px;display:inline-flex;align-items:center;padding:0 16px;border-radius:14px;background:var(--surface);font-weight:750;font-size:15px;cursor:pointer}
.photo-edit input{position:absolute;width:1px;height:1px;opacity:0}
.photo-edit small{display:block;font-size:13px;color:var(--ink-3);margin-top:6px}
.chipadd{display:flex;gap:8px;margin-top:8px}
.chipadd .input{flex:1;height:48px}
.chipadd .chipbtn2{min-height:48px}
.taglist{display:flex;flex-wrap:wrap;gap:6px}
.taglist .pill{min-height:44px;padding:6px 8px 6px 12px;display:inline-flex;align-items:center;gap:6px;background:var(--sky-soft);border-color:transparent;color:var(--sky-ink)}
.taglist .pill svg{width:14px;height:14px}

/* ---------- content tab ---------- */
.lastpub{margin:0 20px 12px;font-size:14px;color:var(--ink-2)}
.lastpub b{color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.gallery label{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--surface);display:grid;place-items:center;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2);text-align:center;padding:6px}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery input,.svc-photo input{position:absolute;width:1px;height:1px;opacity:0}
.gallery .ph,.gallery .ph-add{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--surface)}
.gallery .ph.is-main{box-shadow:0 0 0 3px var(--act)}
.gallery .ph-add,.svc-photo .ph-add{display:grid;place-items:center;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2);text-align:center;padding:6px;border:1.5px dashed var(--line)}
.ph-act{position:absolute;left:6px;bottom:6px;min-height:32px;padding:0 10px;border:0;border-radius:10px;background:rgba(255,255,255,.92);font:inherit;font-size:12px;font-weight:800;color:var(--act);cursor:pointer}
.ph-act::before,.ph-x::before{content:'';position:absolute;inset:-6px}
.ph-act:disabled{background:var(--act);color:#fff;cursor:default}
.ph-x{position:absolute;right:6px;top:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(20,22,41,.72);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.ph-x svg{width:14px;height:14px}
.svc-photo{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.svc-photo .ph-add{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--surface);padding:0}
.svc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-photo small{display:block;font-size:13px;color:var(--ink-3);margin-bottom:8px}
.asheet .picks + .gallery{margin-top:14px}

/* ---------- publish bar: unpublished website changes ---------- */
/* on Today, where "Add a booking" is pinned in the same place, the bar sits just above it, so both stay tappable */
body.has-pub:has(.bigact.pinned) .pubbar{bottom:calc(166px + env(safe-area-inset-bottom))}
body.admin.has-pub:has(.bigact.pinned){padding-bottom:calc(250px + env(safe-area-inset-bottom))}
.pubbar{position:fixed;left:12px;right:12px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:29;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;
  border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(20,22,41,.06),0 16px 30px -14px rgba(20,22,41,.4);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pubbar[hidden]{display:none}
.pubbar p{flex:1;font-size:14px;font-weight:650;line-height:1.3}
.pubbar .btn{height:48px;padding:0 16px;font-size:15px;flex:none}
.admin.has-pub{padding-bottom:calc(190px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.admin .sheet,.admin .dock .ind{transition:none}}
/* on a laptop it stays a phone-width column: the same screens, centred */
@media (min-width:640px){
  .admin #view{max-width:560px;margin:0 auto}
  .admin .pubbar,.bigact.pinned{left:50%;right:auto;width:536px;transform:translateX(-50%)}
  .admin .asheet{left:50%;right:auto;width:560px;margin-left:-280px;border-radius:28px 28px 0 0}
}
/* icons inside buttons and labels keep the type's size */
.admin .btn svg,.admin .chipbtn2 svg,.photo-edit label svg{width:20px;height:20px;flex:none}
.photo-edit label{gap:8px}

/* ---------- photo cropper: full screen on the phone, the frame in the card's shape ---------- */
.cropper{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto 1fr auto auto;background:#0E1024;color:#fff;padding-bottom:env(safe-area-inset-bottom)}
.cropper header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
.cropper header b{font-size:17px}
.cropper .crop-cancel{min-height:48px;padding:0 14px;border:0;background:none;color:#fff;font:inherit;font-size:16px;font-weight:650;cursor:pointer}
.cropper header .btn{height:48px;padding:0 18px;font-size:16px}
.crop-stage{position:relative;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;will-change:transform;pointer-events:none}
.crop-frame{position:absolute;border-radius:24px;box-shadow:0 0 0 100vmax rgba(14,16,36,.66);outline:2px solid rgba(255,255,255,.92);outline-offset:0;pointer-events:none;z-index:1}
.crop-zoom{display:flex;align-items:center;gap:14px;padding:14px 24px 4px;font-size:22px;font-weight:700;color:rgba(255,255,255,.8)}
.crop-zoom input{flex:1;height:44px;accent-color:#00A8EC}
.crop-zoom svg{width:22px;height:22px;display:block}
.crop-hint{text-align:center;font-size:14px;color:rgba(255,255,255,.72);padding:4px 16px 16px}
html.locked{overflow:hidden}

/* the admin moves between its screens inside one page and hands over to the WordPress login, which doesn't take part
   in page crossfades, so it doesn't opt in to them (the phone site's stylesheet does) */
@view-transition{navigation:none}

/* ---------- calendar: the days with bookings in the accent, with how many ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.cal-month{font-size:18px;font-weight:800}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:4px;margin-top:12px;overflow-x:auto}
.cal-w{padding:4px 0;font-size:12px;font-weight:700;color:var(--ink-3);text-align:center}
.cal-d{min-height:48px;border:0;border-radius:12px;background:var(--surface);color:var(--ink);display:grid;place-content:center;justify-items:center;gap:1px;font:inherit;cursor:pointer}
.cal-d b{font-size:15px}
.cal-d small{font-size:11px;font-weight:800;line-height:1}
.cal-d.has{background:var(--sky-soft);color:var(--sky-ink);box-shadow:inset 0 0 0 1.5px var(--sky)}
.cal-d.today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal-d.on{background:var(--act);color:#fff;box-shadow:none}
.asheet .facts dd{overflow-wrap:anywhere}
.cal-card{padding:10px 8px 12px;margin-bottom:12px}
.cal-card .cal-head{margin-top:0}
.cal-card .cal-d{min-height:44px}