/* Gold Choice Booking — styles for the appointments screens (owned by that part of the app): the booking
   form (/app/book), the repeat and package-session previews, Change the time, and one appointment.
   Old-phone rules as app.css: no CSS grid, no flex gap, a literal colour before each var() (dark
   mode in people.css redefines the variables, so var() colours follow it). */

/* ---------- what is in the way (the clash list) ---------- */
.ap-clash { border-radius: 10px; padding: .75rem .95rem; margin: .4rem 0 1rem; border: 1px solid #efc9c9;
  background: #fbe8e8; background: var(--err-bg); color: #a12c2c; color: var(--err); }
.ap-clash.is-soft { border-color: #ecd9a6; background: #fff4d9; background: var(--warn-bg); color: #7a5410; color: var(--warn); }
.ap-clash > b { display: block; font-size: 1.02rem; margin-bottom: .2rem; }
.ap-clash ul { margin: .35rem 0 .5rem; padding-left: 1.2rem; }
.ap-clash li { margin: .15rem 0; }
.ap-clash p { margin: .3rem 0; }
.ap-clash .hint { color: inherit; opacity: .85; }
.ap-clash .check span { font-weight: 600; }
li.ap-hard { color: #a12c2c; color: var(--err); }
li.ap-soft { color: #7a5410; color: var(--warn); }

/* ---------- the booking form ---------- */
.ap-next { margin: .2rem 0 .8rem; }
.ap-next .btn { margin-left: .4rem; }
.btn.ap-mine { border-color: #a12c2c; border-color: var(--err); }
.ap-day { margin: .6rem 0 .2rem; border-top: 1px solid #e7e0e4; border-top: 1px solid var(--line); padding-top: .6rem; }
.ap-day summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
.ap-daylist { list-style: none; margin: .3rem 0; padding: 0; }
.ap-daylist li { padding: .4rem 0; border-bottom: 1px solid #f0eaee; border-bottom: 1px solid var(--line); }
.ap-daylist li:last-child { border-bottom: 0; }
.ap-daylist li.ap-off { color: #6f6470; color: var(--muted); font-style: italic; }
.ap-then { display: inline-block; margin-left: .35rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid #e7e0e4; border: 1px solid var(--line);
  font-size: .85rem; text-decoration: none; white-space: nowrap; }
.ap-repeat .ap-days { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.ap-repeat .ap-days .check { margin-right: .7rem; }
input.ap-small { width: 4.2em !important; min-height: 38px !important; padding: .3rem .4rem !important; display: inline-block; margin: 0 .25rem; text-align: right; }
.ap-repeat input.ap-date { width: auto !important; min-height: 38px !important; padding: .3rem .5rem !important; display: inline-block; margin-left: .25rem; }
.ap-repeat .check { -webkit-align-items: center; align-items: center; }

/* ---------- the dates preview (repeat, package sessions) ---------- */
.ap-rows, .ap-sesslist { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.ap-row { display: -webkit-flex; display: flex; padding: .55rem 0; border-bottom: 1px solid #e7e0e4; border-bottom: 1px solid var(--line); }
.ap-row:last-child { border-bottom: 0; }
.ap-num { -webkit-flex: none; flex: none; width: 1.9rem; height: 1.9rem; line-height: 1.9rem; text-align: center; border-radius: 50%; margin-right: .6rem;
  background: #eeeaec; background: var(--line); font-size: .85rem; font-weight: 700; }
.ap-row.is-free .ap-num { background: #e6f3e8; background: var(--ok-bg); color: #2f6b3a; color: var(--ok); }
.ap-row.is-soft .ap-num { background: #fff4d9; background: var(--warn-bg); color: #7a5410; color: var(--warn); }
.ap-row.is-hard .ap-num { background: #fbe8e8; background: var(--err-bg); color: #a12c2c; color: var(--err); }
.ap-rowbody { -webkit-flex: 1; flex: 1; min-width: 0; }
.ap-rowbody small { display: block; }
.ap-rowbody ul { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.ap-rowbody .tag { margin-top: .2rem; }

/* package session rows: number · date · time · weekday */
.ap-fill { border: 1px dashed #d9cfd5; border: 1px dashed var(--line); border-radius: 12px; padding: .7rem .8rem .2rem; margin-bottom: .8rem; }
.ap-sess { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center;
  padding: .45rem 0; border-bottom: 1px solid #f0eaee; border-bottom: 1px solid var(--line); }
.ap-sess:last-child { border-bottom: 0; }
.ap-sess input.ap-date { width: 11.5em !important; margin-right: .4rem; }
.ap-sess input.ap-time { width: 8.5em !important; margin-right: .5rem; }
.ap-sess small { -webkit-flex: 1 1 8em; flex: 1 1 8em; }
.ap-sess.has-err input { border-color: #a12c2c; border-color: var(--err); }
.ap-rowerr { -webkit-flex: 1 0 100%; flex: 1 0 100%; color: #a12c2c; color: var(--err); font-size: .88rem; margin: .25rem 0 0; padding-left: 2.5rem; }
.ap-sess small.ap-warnday, .ap-rowbody small.ap-warnday { color: #7a5410; color: var(--warn); font-weight: 600; }
@media (max-width: 420px) {
  .ap-sess input.ap-date { width: 9.8em !important; }
  .ap-sess input.ap-time { width: 7.2em !important; }
}
/* the button that Enter presses in the sessions form ("Check", never "Fill") — out of sight */
.ap-default { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- one appointment ---------- */
.ap-heb { margin-top: -.4rem; }
.ap-flow { font-size: .92rem; padding: .45rem .7rem; border-radius: 10px; background: #efe6fb; color: #5a2d91; }
.ap-series { margin: .3rem 0 .6rem; }
.ap-series summary { cursor: pointer; font-weight: 600; }
.ap-series ul { margin: .4rem 0 .5rem; padding-left: 1.2rem; }
.ap-series li { margin: .15rem 0; }
.ap-series li.is-this b { font-weight: 700; }
.ap-cxlist { margin: .3rem 0 .9rem; padding-left: 1.2rem; }
.ap-history li.ap-h-over b { color: #7a5410; color: var(--warn); }
.ap-history li.ap-h-over { border-left: 3px solid #e2b647; padding-left: .55rem; }
.ap-history li.ap-h-msg b { font-weight: 600; }
.ap-history li.ap-h-fail b { color: #a12c2c; color: var(--err); }

@media screen and (prefers-color-scheme: dark) {
  html:not(.theme-light) body.app .ap-flow { background: #2c2140; color: #d9c4f5; }
}
html.theme-dark body.app .ap-flow { background: #2c2140; color: #d9c4f5; }

/* notes about the customer, on the appointment page (only for people allowed to see notes) */
.cnotes { margin: .6rem 0 .8rem; padding: .7rem .8rem; border-radius: 10px; background: #fff8e8; border: 1px solid #f0dfb4; }
.cnotes h3 { margin: 0 0 .4rem; font-size: .95rem; }
.cnote, .cnote-pin { padding: .35rem 0; border-bottom: 1px solid #f0e4c6; }
.cnote:last-of-type { border-bottom: 0; }
.cnote small { color: #6f6470; }
@media (prefers-color-scheme: dark) { html:not(.theme-light) body.app .cnotes { background: #2e2818; border-color: #4a3f22; } html:not(.theme-light) body.app .cnote, html:not(.theme-light) body.app .cnote-pin { border-color: #4a3f22; } }
html.theme-dark body.app .cnotes { background: #2e2818; border-color: #4a3f22; }
html.theme-dark body.app .cnote, html.theme-dark body.app .cnote-pin { border-color: #4a3f22; }