/* Staff & admin screens of the booking system (on top of styles.css). */
.sb-top { display: flex; align-items: center; gap: 22px; padding: 12px 24px; background: #fff;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.sb-logo img { height: 28px; display: block; }
.sb-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.sb-nav a { padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.sb-nav a:hover { background: var(--bg); }
.sb-nav a.on { background: var(--bg); color: var(--blue); }
.sb-me { font-size: 14px; color: var(--muted); }
.sb-me a { color: var(--blue); }
.sb-main { max-width: 1280px; margin: 0 auto; padding: 22px 24px 60px; }
.sb-main h1 { font-size: 28px; margin: 0 0 14px; }
.sb-main h2 { font-size: 18px; margin: 0 0 10px; }
.sb-muted { color: var(--muted); font-size: 14px; }
.sb-empty { color: var(--muted); padding: 10px 0; }
.sb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sb-bar h1 { margin: 0; }
.sb-day { min-width: 0; }
.sb-arrow { font-size: 28px; text-decoration: none; color: var(--blue); padding: 0 8px; line-height: 1; }
.sb-today { color: var(--blue); font-weight: 500; }
.sb-filters { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.sb-filters select, .sb-filters input { width: auto; min-height: 40px; padding: 6px 10px; font-size: 15px; }
.sb-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.sb-week a { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px;
  text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); }
.sb-week a span { font-size: 12px; color: var(--muted); }
.sb-week a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.sb-week a.on span { color: #fff; }
.sb-week a.past { opacity: .6; }
.sb-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.sb-block summary { list-style: none; }
.sb-block summary::-webkit-details-marker { display: none; }
.sb-block[open] summary { margin-bottom: 8px; }
.sb-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.sb-inline input, .sb-inline select { width: auto; min-height: 40px; padding: 6px 10px; }
.sb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.sb-col { background: #fff; border-radius: 16px; padding: 14px; border: 1px solid var(--line); }
.sb-col h2 { margin: 0; }
.sb-hours { margin: 2px 0 10px; color: var(--muted); font-size: 13px; }
.sb-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px;
  margin-bottom: 8px; background: var(--bg); color: var(--ink); text-decoration: none; border-left: 4px solid var(--blue); }
.sb-item:hover { background: #EAF1FA; }
.sb-item.paid { border-left-color: var(--brand); }
.sb-item.block { background: var(--bad-bg); border-left-color: rgba(18,18,18,.3); align-items: center; }
.sb-time { font-weight: 600; grid-row: span 3; font-size: 15px; }
.sb-name { font-weight: 600; }
.sb-svc { font-size: 13px; color: var(--muted); grid-column: 2; }
.sb-chips { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.chip { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.chip.ok { background: var(--brand); color: #fff; }
.chip.due { background: #fff; color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }
.chip.pk { background: var(--indigo); color: #fff; }
.chip.web { background: #fff; color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.sb-x { border: 0; background: transparent; font-size: 20px; color: var(--muted); cursor: pointer; padding: 0 6px; }
.sb-x:hover { color: var(--bad); }
.sb-back { display: inline-block; margin-bottom: 10px; color: var(--blue); text-decoration: none; }
.sb-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.sb-detail .card { margin: 0; }
.sb-dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; }
.sb-dl dt { color: var(--muted); }
.sb-dl dd { margin: 0; }
.pay { font-size: 18px; margin: 0 0 12px; }
.pay.ok { color: var(--brand); font-weight: 600; }
.pay.pk { color: var(--indigo); font-weight: 600; }
.pay.due { color: var(--bad); }
.sb-detail form { margin: 0 0 8px; }
.btn.danger { background: #fff; color: var(--bad); box-shadow: 0 0 0 1.5px var(--bad) inset; }
.sb-times { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.sb-chip { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px; font: inherit;
  font-weight: 600; cursor: pointer; }
.sb-chip.on, .sb-chip:hover { border-color: var(--brand); }
.sb-chip.on { background: var(--brand); color: #fff; }
.sb-hist { margin: 0; padding-left: 18px; font-size: 14px; }
.sb-form { max-width: 820px; }
.sb-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.sb-f input, .sb-f select { color: var(--ink); }
.sb-f .err { color: var(--bad); font-size: 13px; }
.sb-wide { width: 100%; }
.sb-hours-t { border-collapse: collapse; width: 100%; margin-bottom: 14px; }
.sb-hours-t th { text-align: left; font-weight: 500; padding: 8px 12px 8px 0; white-space: nowrap; vertical-align: top; width: 140px; }
.sb-hours-t td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.sb-win { display: inline-flex; gap: 4px; align-items: center; margin: 4px 14px 4px 0; }
.sb-win select, .sb-win input { width: auto; min-height: 38px; padding: 4px 8px; font-size: 15px; }
.sb-ov { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.sb-pk { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sb-pk .card { margin: 0; }
.sb-pk .card.done { opacity: .6; }
.sb-pk-head { display: flex; justify-content: space-between; gap: 10px; }
.sb-pk-left { text-align: right; }
.sb-pk-left b { font-size: 28px; color: var(--brand); }
.sb-dots { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
.sb-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--brand); }
.sb-dots span.used { background: var(--brand); }
.sb-used { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; }
.sb-used li { display: flex; align-items: center; gap: 4px; }
.sb-used form { display: inline; }
.sb-person summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sb-svcgrid { display: grid; grid-template-columns: 1fr 80px 16px; gap: 6px 8px; align-items: center; margin-bottom: 12px; }
.sb-price { min-height: 36px; padding: 4px 8px; }
.sb-svcrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sb-svcrow input, .sb-svcrow select { width: auto; min-height: 38px; padding: 4px 8px; }
.sb-svcname { min-width: 300px; flex: 1; }
.sb-code { background: var(--bg); padding: 12px; border-radius: 10px; overflow-x: auto; font-size: 13px; }
.sb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sb-kpis div { background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.sb-kpis b { font-size: 28px; color: var(--blue); }
.sb-kpis span { color: var(--muted); font-size: 14px; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sb-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 13px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sb-table td { padding: 8px; border-bottom: 1px solid var(--line); }
.sb-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; }
.sb-barc { flex: 1; display: flex; flex-direction: column-reverse; align-items: stretch; height: 100%; position: relative; }
.sb-barc span { background: var(--brand); border-radius: 3px 3px 0 0; min-height: 0; }
.sb-barc span.c { background: var(--bad); opacity: .5; }
.sb-barc small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); }
.sb-auth { max-width: 420px; margin: 70px auto; padding: 0 16px; }
.sb-auth-logo { height: 34px; margin-bottom: 30px; }
.sb-forgot { margin-top: 18px; }
.sb-forgot summary { color: var(--blue); cursor: pointer; margin-bottom: 10px; }
.mg-rows .pt-row { display: flex; flex-direction: column; gap: 2px; }
.mg-move { margin-top: 18px; padding: 0; background: transparent; }
.mg-move summary { list-style: none; }
.mg-move summary::-webkit-details-marker { display: none; }
.mg-pick { background: #fff; border-radius: 18px; padding: 18px; margin-top: 12px; }
.mg-cancel { margin-top: 12px !important; }
@media (max-width: 700px) {
  .sb-top { padding: 10px 14px; gap: 10px; }
  .sb-main { padding: 16px 14px 50px; }
  .sb-filters { margin-left: 0; }
  .sb-dl { grid-template-columns: 100px 1fr; }
  .sb-detail { grid-template-columns: 1fr; }
}
.sb-move select { min-height: 40px; padding: 6px 10px; margin-bottom: 8px; }
.sb-hours-t td { white-space: nowrap; }
.sb-sell { margin-top: 10px; } .sb-sell summary { color: var(--blue); cursor: pointer; }

/* calendar views */
.sb-views { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; }
.sb-views a { padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14px; }
.sb-views a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,18,18,.1); }
.sb-free { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px;
  border: 1.5px dashed var(--line); color: var(--muted); text-decoration: none; font-size: 14px; }
.sb-free:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.sb-wk-wrap { overflow-x: auto; margin-bottom: 8px; }
.sb-wk { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 820px; table-layout: fixed; }
.sb-wk th { font-weight: 500; font-size: 13px; color: var(--muted); text-align: left; }
.sb-wk thead th a { color: var(--ink); text-decoration: none; display: block; padding: 4px 6px; border-radius: 8px; }
.sb-wk thead th.now a { background: var(--brand); color: #fff; }
.sb-wk-who { width: 120px; color: var(--ink) !important; vertical-align: top; padding-top: 8px; }
.sb-wk td { vertical-align: top; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-height: 60px; }
.sb-wk td.off { background: var(--bg); }
.sb-wk td.past { opacity: .6; }
.sb-wk-b { display: block; font-size: 12.5px; padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; background: var(--bg);
  border-left: 3px solid var(--blue); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-wk-b.paid { border-left-color: var(--brand); }
.sb-wk-k { display: block; font-size: 12px; padding: 3px 6px; margin-bottom: 4px; border-radius: 6px; background: var(--bad-bg); color: var(--muted); }
.sb-wk-free { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.sb-wk-free a { font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 1px dashed var(--line); color: var(--muted); text-decoration: none; }
.sb-wk-free a:hover { border-color: var(--brand); color: var(--brand); }
.sb-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sb-mh { font-size: 12px; color: var(--muted); text-align: center; }
.sb-md { min-height: 76px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.sb-md:hover { border-color: var(--brand); }
.sb-md.now { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.sb-md.off { background: var(--bg); }
.sb-md.past { opacity: .55; }
.sb-md.out { background: transparent; border: 0; }
.sb-md-b { font-size: 12px; color: var(--blue); font-weight: 600; }
.sb-md-f { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .sb-md { min-height: 56px; padding: 4px; } .sb-md-f { display: none; } }
.sb-done { margin-bottom: 16px; }
.sb-series { margin: 6px 0 10px; padding-left: 18px; }
.sb-series a { color: inherit; font-weight: 600; }
.sb-patient { margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.sb-patient summary { cursor: pointer; }

/* booking quick look on the calendar */
.sb-peek { position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 16px); background: #fff; border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 12px 40px rgba(18,18,18,.22), 0 0 0 1px var(--line); }
.sb-peek.sheet { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.sb-peek-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; }
.sb-peek-name { display: block; font-size: 18px; padding-right: 24px; }
.sb-peek-svc { margin: 2px 0; }
.sb-peek dl { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; margin: 12px 0 14px; font-size: 14px; }
.sb-peek dt { color: var(--muted); }
.sb-peek dd { margin: 0; word-break: break-word; }
.sb-peek dd a { color: var(--blue); }
.pk-signed, .pk-ok { color: var(--brand); font-weight: 600; }
.pk-link { color: var(--blue); font-weight: 600; }
.pk-unsigned, .pk-due { color: var(--bad); font-weight: 600; }
.pk-pk { color: var(--indigo); font-weight: 600; }
.sb-override { margin-top: 10px; font-size: 14px; }
.sb-override summary { cursor: pointer; color: var(--blue); }
.sb-override .sb-f { margin-top: 8px; max-width: 220px; }
.sb-ac { position: relative; }
.sb-ac-list { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(18,18,18,.18), 0 0 0 1px var(--line); overflow: hidden; }
.sb-ac-list button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 10px 12px; cursor: pointer; font: inherit; }
.sb-ac-list button:hover, .sb-ac-list button.on { background: var(--bg); }
.sb-ac-list small { display: block; color: var(--muted); font-size: 12.5px; }
/* patients */
.sb-psearch { display: flex; gap: 8px; max-width: 560px; margin: 8px 0 16px; }
.sb-psearch input { flex: 1; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); }
.sb-plist { display: grid; gap: 8px; max-width: 720px; }
.sb-prow { display: grid; gap: 2px; text-decoration: none; color: var(--ink); margin: 0; }
.sb-prow:hover { box-shadow: 0 0 0 1.5px var(--brand) inset; }
.sb-phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sb-phead h1 { margin-bottom: 4px; }
.sb-pcontacts { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.sb-pcontacts a { color: var(--blue); }
.sb-pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.sb-pstats div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.sb-pstats b { font-size: 20px; }
.sb-pstats span { font-size: 12.5px; color: var(--muted); }

/* admin availability calendar (drag over days) */
.av-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.av-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.av-dot.usual { background: #fff; box-shadow: 0 0 0 1px var(--line) inset; }
.av-dot.off { background: var(--bad); }
.av-dot.extra { background: var(--brand); }
.av-dot.changed { background: var(--blue); }
.av-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; user-select: none; -webkit-user-select: none;
  touch-action: none; margin-bottom: 120px; }
.av-d { min-height: 82px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; cursor: pointer; position: relative; }
.av-d b { font-size: 15px; }
.av-d.rest { background: var(--bg); }
.av-d.off { background: var(--bad-bg); border-color: rgba(202,41,18,.35); color: var(--bad); }
.av-d.extra { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.av-d.changed { border-color: var(--blue); }
.av-d small { margin-top: auto; color: var(--blue); font-weight: 600; }
.av-d.past { opacity: .45; cursor: default; }
.av-d.out { border: 0; background: transparent; cursor: default; }
.av-d.sel { outline: 3px solid var(--brand); outline-offset: -1px; background: #E6F9F9; }
.av-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; padding: 12px 20px 16px;
  box-shadow: 0 -6px 24px rgba(18,18,18,.14); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.av-bar[hidden] { display: none; }
.av-sel { display: flex; align-items: center; gap: 6px; }
.av-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.av-actions fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px 8px; display: flex; flex-wrap: wrap;
  gap: 6px; align-items: center; margin: 0; }
.av-actions legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.av-t { width: 100px; }
@media (max-width: 640px) { .av-d { min-height: 58px; padding: 4px; font-size: 11px; } .av-d span:not(:first-of-type) { display: none; } }
.sb-hours-all { margin-top: 8px; }
.sb-chip.off, .sb-chip[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.sb-blk-day { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }