/* Smart Cosmetics clinic back office (design prototype, Oct 2026). Phone first. Uses tokens from site.css. */

.ap {
  --line: rgba(28, 25, 23, 0.12);
  --line-strong: rgba(28, 25, 23, 0.28);
  --panel: #fbf8f4;
  --hour: 64px;
  --c-consultation: #e7dccb;
  --c-filler: #efd9cc;
  --c-wrinkles: #dde3d6;
  --c-boosters: #e6dde8;
  --c-skin: #d9e5e3;
  --c-pmu: #f1d6d2;
  --c-brows: #ece1c7;
  background: var(--cream);
  color: var(--ink-soft);
  -webkit-tap-highlight-color: transparent;
}

.ap-preview-bar {
  margin: 0;
  padding: 0.4rem 1rem;
  background: var(--tan);
  color: var(--ink);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Top bar and tabs ---------- */

.ap-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(var(--edge, 1.5rem), 3vw, 2rem);
  background: #0b0a09;
  color: var(--cream);
}

/* Beth's logo (vector, brand/): white script on the dark top bar, dark script on the cream sign-in card. */
.ap-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.ap-brand img {
  display: block;
  height: 2.75rem;
  width: auto;
}

.ap-top__title {
  display: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--cream);
}

.ap-user {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
}

.ap-user__dot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tan);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.ap-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}

.ap-tabs button {
  padding: 0.95rem 1rem 0.85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.ap-tabs button[aria-current="page"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: 500;
}

.ap-main {
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.5rem clamp(var(--edge, 1.5rem), 3vw, 2rem) 4rem;
}

/* Bottom tab bar: phones only. */
.ap-bottom {
  display: none;
}

.ap-phone-only {
  display: none;
}

.ap-fab {
  display: none;
}

/* ---------- Shared pieces ---------- */

.ap-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
}

.ap-head {
  margin-bottom: 1.25rem;
}

.ap-sub {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.ap-label {
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.ap-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.ap-card {
  padding: 1.1rem var(--edge, 1.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.ap-btn {
  padding: 0.7rem 1.1rem;
  font-size: 0.75rem;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.ap-round {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.ap-chipbtn,
.ap-filter button {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.ap-filter[hidden] {
  display: none;
}

.ap-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ap-filter button[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.ap-textbtn {
  justify-self: start;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--tan-dark);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.ap-inline {
  font-size: 0.95rem;
}

.ap select,
.ap input[type="date"],
.ap input[type="time"],
.ap input.uk-time,
.ap input[type="search"],
.ap-field input,
.ap-field textarea {
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.ap-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
  white-space: nowrap;
}

.ap-badge--due {
  background: #fff4d6;
  color: #7a5400;
}

.ap-badge--done {
  background: #e3ecdf;
  color: #3c5a32;
}

.ap-badge--off {
  background: #f1e3e0;
  color: #8a3b30;
}

/* ---------- Today ---------- */

.ap-hello {
  margin-bottom: 1.25rem;
}

.ap-next {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 1.15rem var(--edge, 1.5rem);
  border-radius: 2px;
  background: var(--ink);
  color: var(--cream);
}

.ap-next__when {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
}

.ap-next__who {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.15;
}

.ap-next__what {
  font-size: 0.95rem;
  color: var(--muted-light);
}

.ap-next button {
  justify-self: start;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--tan);
  text-decoration: underline;
  cursor: pointer;
}

.ap-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.ap-stat {
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.ap-stat__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ap-stat__num {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink);
}

.ap-stat__value {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--tan-dark);
}

.ap-statnote {
  margin: 0.5rem 0 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.ap-auto {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 1.75rem;
  padding: 0.85rem 1rem;
  background: #e9efe4;
  border-radius: 2px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #34502c;
}

.ap-auto::before {
  content: "\2713";
  flex: none;
  font-weight: 500;
}

.ap-agenda {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-agenda button {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.15rem 0.9rem;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tan);
  border-radius: 2px;
  background: var(--panel);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.ap-agenda__time {
  grid-row: 1 / span 2;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.ap-agenda__who {
  font-weight: 500;
}

.ap-agenda__what {
  grid-column: 2;
  font-size: 0.85rem;
  color: var(--muted);
}

.ap-agenda__side {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  justify-items: end;
  gap: 0.25rem;
}

.ap-who {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--sand);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--tan-dark);
}

.ap-agenda__empty {
  padding: 1rem var(--edge, 1.5rem);
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  color: var(--muted);
}

.ap-agenda button.is-past {
  opacity: 0.6;
}

.ap-agenda button[data-cat="dermal-filler"] { border-left-color: #a8735a; }
.ap-agenda button[data-cat="lines-and-wrinkles"],
.ap-agenda button[data-cat="anti-wrinkle"] { border-left-color: #6f7f62; }
.ap-agenda button[data-cat="boosters"] { border-left-color: #7d6a86; }
.ap-agenda button[data-cat="skin"] { border-left-color: #5d7f7a; }
.ap-agenda button[data-cat="pmu"] { border-left-color: #a35f58; }
.ap-agenda button[data-cat="brows-lashes"] { border-left-color: #8d7440; }

/* ---------- Diary ---------- */

.ap-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.ap-daynav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.ap-daylabel {
  margin: 0 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ink);
}

.ap-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ap-switcher {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
}

.ap-switcher button {
  min-height: 2.2rem;
  padding: 0.35rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

.ap-switcher button[aria-checked="true"] {
  background: var(--ink);
  color: var(--cream);
}

.ap-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.ap-strip[hidden] {
  display: none;
}

.ap-strip button {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.ap-strip__dow {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ap-strip__num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
}

.ap-strip__count {
  min-height: 1em;
  font-size: 0.68rem;
  color: var(--tan-dark);
}

.ap-strip button.is-off .ap-strip__num {
  color: var(--muted);
}

.ap-strip button[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.ap-strip button[aria-checked="true"] .ap-strip__dow,
.ap-strip button[aria-checked="true"] .ap-strip__count {
  color: var(--tan);
}

.ap-strip button.is-today:not([aria-checked="true"]) {
  border-color: var(--tan);
}

.ap-diary-wrap {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.ap-diary-wrap[hidden] {
  display: none;
}

.ap-diary {
  display: grid;
  grid-template-columns: 3.75rem repeat(var(--cols, 1), minmax(var(--colmin, 11rem), 1fr));
  min-width: min-content;
}

.ap-colhead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}

.ap-colhead small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

.ap-colhead--day {
  display: block;
  padding: 0.55rem 0.5rem;
  border-top: 0;
  background: var(--panel);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
}

.ap-colhead--day.is-today {
  box-shadow: inset 0 -2px 0 var(--tan);
}

.ap-colhead img,
.ap-colhead .ap-initial {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}

.ap-initial {
  display: grid;
  place-items: center;
  background: var(--sand);
  color: var(--tan-dark);
  font-size: 1rem;
}

.ap-gutter-head {
  border-bottom: 1px solid var(--line);
}

.ap-gutter {
  position: relative;
}

.ap-gutter span {
  position: absolute;
  right: 0.45rem;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--muted);
}

.ap-col {
  position: relative;
  border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line) 0 1px,
    transparent 1px calc(var(--hour) / 2),
    rgba(28, 25, 23, 0.05) calc(var(--hour) / 2) calc(var(--hour) / 2 + 1px),
    transparent calc(var(--hour) / 2 + 1px) var(--hour)
  );
}

.ap-closed {
  position: absolute;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(135deg, rgba(28, 25, 23, 0.04) 0 6px, rgba(28, 25, 23, 0.08) 6px 12px);
  pointer-events: none;
}

.ap-closed--day {
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.ap-now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 2px;
  background: var(--tan-dark);
}

.ap-appt {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.25rem 0.45rem;
  border: 0;
  border-left: 3px solid var(--tan-dark);
  border-radius: 2px;
  background: var(--c-consultation);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.ap-appt:hover,
.ap-appt:focus-visible {
  box-shadow: 0 2px 10px rgba(28, 25, 23, 0.18);
  outline: none;
}

.ap-appt__time {
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.ap-appt__who {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
}

.ap-appt__what {
  font-size: 0.78rem;
  line-height: 1.25;
}

.ap-appt__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.1rem;
}

.ap-appt--short {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.ap-appt--short .ap-appt__what,
.ap-appt--short .ap-appt__badges {
  display: none;
}

.ap-appt--compact .ap-appt__badges,
.ap-appt--compact .ap-appt__time {
  display: none;
}

.ap-appt--block {
  background: repeating-linear-gradient(135deg, #e9e4dc 0 6px, #e1dbd1 6px 12px);
  border-left-color: var(--muted);
  color: var(--muted);
}

.ap-appt.is-done {
  opacity: 0.65;
}

.ap-appt[data-cat="consultation"] { background: var(--c-consultation); }
.ap-appt[data-cat="dermal-filler"] { background: var(--c-filler); border-left-color: #a8735a; }
.ap-appt[data-cat="lines-and-wrinkles"],
.ap-appt[data-cat="anti-wrinkle"] { background: var(--c-wrinkles); border-left-color: #6f7f62; }
.ap-appt[data-cat="boosters"] { background: var(--c-boosters); border-left-color: #7d6a86; }
.ap-appt[data-cat="skin"] { background: var(--c-skin); border-left-color: #5d7f7a; }
.ap-appt[data-cat="pmu"] { background: var(--c-pmu); border-left-color: #a35f58; }
.ap-appt[data-cat="brows-lashes"] { background: var(--c-brows); border-left-color: #8d7440; }

.ap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.ap-legend span::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  background: var(--swatch);
  vertical-align: -0.05rem;
}

/* Week as a timetable that fits a phone screen. */
.ap-diary.ap-diary--fit {
  grid-template-columns: 1.6rem repeat(7, minmax(0, 1fr));
  min-width: 0;
}

.ap-diary--fit .ap-colhead--day {
  padding: 0.4rem 0;
  font-size: 0.8rem;
  text-align: center;
}

.ap-diary--fit .ap-colhead--day small {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
}

.ap-diary--fit .ap-gutter span {
  right: 0.3rem;
  font-size: 0.65rem;
  line-height: 1.05;
  text-align: right;
}

/* Hour tick on the narrow week grid: the number with am or pm under it. */
.ap-diary--fit .ap-gutter span i {
  display: block;
  font-size: 0.55rem;
  font-style: normal;
}

.ap-appt--tiny {
  left: 1px;
  right: 1px;
  padding: 0.15rem 0.2rem;
  border-left-width: 2px;
}

.ap-appt--tiny .ap-appt__who {
  overflow: hidden;
  font-size: 0.66rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-appt--block.ap-appt--tiny .ap-appt__who {
  font-weight: 400;
}

/* Week as a list (phones). */
.ap-weeklist {
  display: grid;
  gap: 1.1rem;
}

.ap-weeklist[hidden] {
  display: none;
}

.ap-weekday__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ap-weekday__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
}

.ap-weekday__hours {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- Clients ---------- */

.ap-search {
  width: 100%;
  margin-bottom: 0.9rem;
}

.ap-clientlist {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-clientlist button {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.1rem 0.85rem;
  align-items: center;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--panel);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.ap-avatar {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--sand);
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--tan-dark);
}

.ap-clientlist__name {
  font-weight: 500;
}

.ap-clientlist__meta {
  grid-column: 2;
  font-size: 0.82rem;
  color: var(--muted);
}

.ap-clientlist__side {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: 0.8rem;
  text-align: right;
  color: var(--tan-dark);
}

.ap-record-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.ap-record-actions .btn {
  width: 100%;
}

.ap-section {
  margin-bottom: 1.4rem;
}

.ap-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.92rem;
}

.ap-list small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.ap-list .is-cancelled {
  color: var(--muted);
  text-decoration: line-through;
}

.ap-notes {
  width: 100%;
  min-height: 5rem;
  padding: 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}


/* Day editor */
.ap-workline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

.ap-blocks {
  display: grid;
  gap: 0.5rem;
}

.ap-blockrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.ap-blockrow input {
  width: 100%;
}

/* Time errors sit under the row, across both fields, and take no room until shown. */
.ap-blockrow__err {
  grid-column: 1 / -1;
}

.ap-blockrow .ap-round {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
}

.ap-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 3rem;
  height: 1.75rem;
}

.ap-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ap-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.15s;
}

.ap-switch span::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

.ap-switch input:checked + span {
  background: var(--tan-dark);
}

.ap-switch input:checked + span::after {
  transform: translateX(1.25rem);
}

.ap-switch input:focus-visible + span {
  outline: 2px solid var(--tan-dark);
  outline-offset: 2px;
}

/* ---------- Tables ---------- */

.ap-table-wrap {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.ap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.ap-table th,
.ap-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.ap-table th:first-child,
.ap-table td:first-child {
  padding-left: var(--edge, 1.5rem);
}

.ap-table th:last-child,
.ap-table td:last-child {
  padding-right: var(--edge, 1.5rem);
}

.ap-table th {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sand);
}

.ap-table td strong {
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Sheets ---------- */

.ap-sheet {
  width: min(30rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--cream);
  color: var(--ink-soft);
  overscroll-behavior: contain;
}

.ap-sheet::backdrop {
  background: rgba(28, 25, 23, 0.5);
  overflow: hidden;
  overscroll-behavior: contain;
}

.ap-sheet__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--edge, 1.5rem);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.ap-sheet__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ink);
}

.ap-sheet__head form {
  margin: 0;
}

.ap-sheet__body {
  padding: 1.25rem var(--edge, 1.5rem) 2rem;
}

.ap-sheet__foot {
  position: sticky;
  bottom: 0;
  margin: 1rem calc(-1 * var(--edge, 1.5rem)) -2rem;
  padding: 0.9rem var(--edge, 1.5rem) calc(0.9rem + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1px solid var(--line);
}

.ap-sheet__foot .btn {
  width: 100%;
  min-height: 3rem;
}

.ap-form {
  display: grid;
  gap: 1rem;
}

.ap-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.ap-field {
  display: grid;
  gap: 0.35rem;
}

.ap-field label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.ap-field input,
.ap-field select,
.ap-field textarea {
  width: 100%;
}

.ap-optional {
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.ap-newclient {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: var(--sand);
  border-radius: 2px;
}

.ap-newclient[hidden] {
  display: none;
}

.ap-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.ap-seg legend {
  width: 100%;
}

.ap-seg label,
.ap-times label {
  position: relative;
}

.ap-seg input,
.ap-times input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ap-seg span {
  display: inline-block;
  min-height: 2.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
}

.ap-seg input:checked + span,
.ap-times input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.ap-seg input:focus-visible + span,
.ap-times input:focus-visible + span {
  outline: 2px solid var(--tan-dark);
  outline-offset: 2px;
}

.ap-timepick {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.ap-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.4rem;
}

.ap-times span {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fff;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}

.ap-radios {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.95rem;
}

.ap-radios label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.25rem;
}

.ap-radios input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--tan-dark);
}

/* Booking detail */
.ap-detail dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 1.25rem;
  margin: 0 0 1.5rem;
}

.ap-detail dt {
  padding-top: 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ap-detail dd {
  margin: 0;
  color: var(--ink);
}

.ap-timeline {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.ap-timeline li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
}

.ap-timeline li::before {
  content: "\25CB";
  color: var(--tan-dark);
}

.ap-timeline li.is-done::before {
  content: "\2713";
  color: #3c5a32;
}

.ap-timeline small {
  display: block;
  color: var(--muted);
}

.ap-detail__actions {
  display: grid;
  gap: 0.5rem;
}

.ap-detail dd s {
  color: var(--muted);
}

.ap-detail dd small {
  display: block;
  font-size: 0.82rem;
  color: var(--tan-dark);
}

.ap-actiongrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.ap-actiongrid .btn {
  width: 100%;
  min-height: 3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ap-items {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.ap-items small {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.ap-items .ap-round {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
}

.ap-total {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--sand);
  border-radius: 2px;
  font-size: 1rem;
  color: var(--ink);
}

.ap-total small {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.ap-field [hidden],
.ap-field[hidden] {
  display: none;
}

.ap-detail__actions .btn {
  width: 100%;
  min-height: 3rem;
}

.ap-danger {
  color: #9f2d20;
  border-color: #9f2d20;
}

/* Toast */
.ap-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 60;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.8rem 1.2rem;
  border-radius: 2px;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.92rem;
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.ap-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Phones: app layout ---------- */

@media (max-width: 720px) {
  .ap {
    --hour: 60px;
  }

  .ap-tabs,
  .ap-desktop-only,
  .ap-user__name {
    display: none;
  }

  .ap-phone-only {
    display: inline-block;
  }

  .ap-top {
    padding: 0.65rem 1.5rem;
  }

  .ap-top__title {
    display: block;
  }

  .ap-brand img {
    height: 2.25rem;
  }

  .ap-main {
    padding: 1rem var(--edge, 1.5rem) calc(9rem + env(safe-area-inset-bottom));
  }

  .ap-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
    background: rgba(251, 248, 244, 0.97);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
  }

  .ap-bottom button {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    min-height: 3.25rem;
    padding: 0.35rem 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
  }

  .ap-bottom svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ap-bottom button[aria-current="page"] {
    color: var(--ink);
    font-weight: 500;
  }

  /* New booking floats above the tab bar, at the right, so the bar can hold five pages. */
  .ap-fab {
    position: fixed;
    right: var(--edge, 1.5rem);
    bottom: calc(4.9rem + env(safe-area-inset-bottom));
    z-index: 41;
    display: grid;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tan);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(28, 25, 23, 0.25);
    place-items: center;
    cursor: pointer;
  }

  .ap-fab svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ap-h1 {
    font-size: 1.9rem;
  }

  .ap-stat {
    padding: 0.8rem 0.7rem;
  }

  .ap-stat__num {
    font-size: 1.8rem;
  }

  .ap-stat__value {
    font-size: 0.82rem;
  }

  .ap-toolbar {
    margin-bottom: 0.75rem;
  }

  .ap-daylabel {
    width: 100%;
    margin: 0.25rem 0 0;
    font-size: 1.45rem;
    order: 5;
  }

  .ap-toolbar__actions {
    width: 100%;
  }

  .ap-switcher {
    width: 100%;
  }

  .ap-switcher button {
    flex: 1;
  }

  .ap-diary {
    grid-template-columns: 3.75rem repeat(var(--cols, 1), minmax(var(--colmin, 9rem), 1fr));
  }

  .ap-block-link {
    margin-top: 1rem;
  }

  .ap-sheet {
    width: 100%;
  }

  /* Seven columns are too narrow for "10:00 am-8:00 pm", so each day is one row: day, date, hours. */
  /* The seven day cells stay tight; the heading keeps the 24px edge. */
  .ap-toast {
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
}

/* ---------- Launch items: notifications, settings, records, closures, payments ---------- */

.ap-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ink);
}

.ap-head--sub {
  margin-top: 2.25rem;
}

.ap-label--gap {
  margin-top: 1.5rem;
}

.ap-top__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ap-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 239, 232, 0.08);
  color: var(--cream);
  cursor: pointer;
}

.ap-bell svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ap-bell__count {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--tan);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.15rem;
  text-align: center;
}

.ap-bell__count[hidden] {
  display: none;
}

button.ap-user {
  padding: 0.2rem 0.4rem 0.2rem 0.2rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--cream);
  cursor: pointer;
}

.ap-feed {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-feed button {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tan);
  border-radius: 2px;
  background: var(--panel);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.ap-feed button.is-unread {
  background: #fff;
}

.ap-feed button[data-kind="cancel"] {
  border-left-color: #9f2d20;
}

.ap-feed__title {
  font-weight: 500;
}

.ap-feed__text {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.ap-feed__when {
  font-size: 0.75rem;
  color: var(--muted);
}

.ap-toggles {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.ap-workline small {
  display: block;
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--muted);
}

.ap-closures {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.ap-closures li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem var(--edge, 1.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: 2px;
}

.ap-closures small {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.ap-closure-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: end;
  gap: 0.75rem;
}

.ap-table button.ap-rowbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.ap-rules {
  font-size: 0.8rem;
  color: var(--tan-dark);
}

.ap-status-ok,
.ap-status-warn {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
}

.ap-status-ok {
  background: #e3ecdf;
  color: #3c5a32;
}

.ap-status-warn {
  background: #fff4d6;
  color: #7a5400;
}

.ap-recordbox {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.ap-recordbox p {
  margin: 0;
  font-size: 0.92rem;
}

.ap-thumbs {
  display: flex;
  gap: 0.5rem;
}

.ap-thumbs img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 2px;
  object-fit: cover;
}

.ap-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.ap-photo {
  position: relative;
  cursor: pointer;
}

.ap-photo input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ap-photo__box {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  background: var(--panel) center / cover no-repeat;
  font-size: 0.88rem;
  color: var(--tan-dark);
}

.ap-photo__box.has-photo {
  border-style: solid;
  color: transparent;
}

.ap-photo input:focus-visible + .ap-photo__box {
  outline: 2px solid var(--tan-dark);
  outline-offset: 2px;
}

.ap-payrow strong {
  font-weight: 500;
}

.ap-payrow .is-refunded {
  color: #9f2d20;
}

/* Owner-only controls stay hidden until the server has said this login is the owner (body.is-owner is set
   after the bootstrap answer), so a practitioner never sees them, not even for a moment. */
body:not(.is-owner) .ap-owner-only {
  display: none !important;
}

@media (max-width: 720px) {
  .ap-closure-form {
    grid-template-columns: 1fr;
  }

  .ap-top__right {
    gap: 0.4rem;
  }
}

/* ---------- Sign in (prototype: demo logins only) ---------- */

.ap-signin {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  background: #0b0a09;
}

.ap-signin[hidden] {
  display: none;
}

.ap-signin__card {
  width: min(24rem, 100%);
  padding: 2rem 1.5rem;
  border-radius: 2px;
  background: var(--cream);
}

.ap-signin__brand {
  margin: 0 0 1.5rem;
}

.ap-signin__brand img {
  height: 5.5rem;
}

.ap-signin__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
}

.ap-signin__form {
  display: grid;
  gap: 1rem;
}

.ap-signin__go {
  width: 100%;
  justify-content: center;
}

.ap-signin__error {
  margin: 0;
  font-size: 0.85rem;
  color: #9b2c2c;
}

.ap-signin__error:empty {
  display: none;
}

.ap-signin__demo {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.ap-signin__demo .ap-hint {
  margin: 0;
}

.ap-signin__demo .ap-textbtn {
  justify-self: center;
}