/* Appointment desk components, shared by the admin, expert and client layouts:
   booking form, send window, templates editor, files, questions thread,
   availability editor and the client records pages. */

:root {
  --dk-brand: #007b59;
  --dk-brand-2: #0a9a6f;
  --dk-brand-soft: #e7f5ef;
  --dk-ink: #1c2b27;
  --dk-muted: #5c6b66;
  --dk-line: #e2e9e6;
  --dk-warn-soft: #fff5e5;
  --dk-danger: #c0392b;
  --dk-r: 14px;
}

/* ------------------------------------------------------------- generic -- */
.md-card--pad { padding: 20px 22px; }
.md-group-title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; color: var(--dk-ink); }
.md-group-title .fa { color: var(--dk-brand); margin-right: 4px; }

.md-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.md-seg label { margin: 0; cursor: pointer; }
.md-seg input { position: absolute; opacity: 0; pointer-events: none; }
.md-seg span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--dk-line); background: #fff; font-weight: 600; font-size: .9rem; color: var(--dk-muted);
}
.md-seg input:checked + span { border-color: var(--dk-brand); background: var(--dk-brand-soft); color: var(--dk-brand); }
.md-seg input:focus-visible + span { outline: 2px solid var(--dk-brand); }

/* ------------------------------------------------------------- booking -- */
.md-book { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.md-book__step--wide { grid-column: 1 / -1; }
.md-book__title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.md-book__num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--dk-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.md-book__lookup { margin-top: 8px; min-height: 26px; font-size: .88rem; }
.md-slots__hours { font-size: .85rem; color: var(--dk-muted); margin-bottom: 8px; }
.md-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.md-slot {
  display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: 10px;
  border: 1px solid var(--dk-line); background: #fff; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.md-slot small { font-weight: 500; font-size: .72rem; color: var(--dk-muted); text-transform: capitalize; }
.md-slot--free:hover { border-color: var(--dk-brand); background: var(--dk-brand-soft); }
.md-slot.is-picked { border-color: var(--dk-brand); background: var(--dk-brand); color: #fff; }
.md-slot.is-picked small { color: #d6f5e9; }
.md-slot--booked { background: #fdeceb; border-color: #f6cdc9; color: #9b2c22; cursor: not-allowed; }
.md-slot--off { background: #f3f4f4; color: #9aa5a1; cursor: not-allowed; text-decoration: line-through; }
.md-slot--past { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------- appointment page -- */
.md-appt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.md-appt__side { position: sticky; top: 80px; }

.md-files { list-style: none; margin: 0 0 14px; padding: 0; }
.md-files__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--dk-line); }
.md-files__item:first-child { border-top: 0; }
.md-files__item > .fa { font-size: 1.5rem; color: var(--dk-brand); width: 26px; text-align: center; }
.md-files__name { flex: 1 1 auto; min-width: 0; }
.md-files__name a { font-weight: 600; word-break: break-word; }
.md-files__name small { display: block; }

.md-drop { margin-top: 10px; }
.md-drop__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.md-drop__zone {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px; margin: 0;
  border: 2px dashed #c6d6d0; border-radius: 12px; background: #fafcfb; cursor: pointer; text-align: center; color: var(--dk-muted);
}
.md-drop__zone .fa { font-size: 1.8rem; color: var(--dk-brand); }
.md-drop__zone b { color: var(--dk-brand); }
.md-drop__zone.is-over, .md-drop__zone:hover { border-color: var(--dk-brand); background: var(--dk-brand-soft); }
.md-drop__input:focus-visible + .md-drop__zone { outline: 2px solid var(--dk-brand); }
.md-drop__list { list-style: none; padding: 0; margin: 8px 0; font-size: .85rem; }
.md-drop__row { display: flex; gap: 8px; }
.md-drop__row input { flex: 1 1 auto; }

.md-log { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.md-log__item { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--dk-line); font-size: .88rem; }
.md-log__item:first-child { border-top: 0; }
.md-log__mark { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--dk-brand-soft); color: var(--dk-brand); }
.md-log__item--failed .md-log__mark { background: #fdeceb; color: var(--dk-danger); }
.md-log__item--opened .md-log__mark { background: #e8f7ee; color: #1f9d55; }

/* ---------------------------------------------------------- send window -- */
.md-send { position: fixed; inset: 0; z-index: 1060; display: flex; justify-content: flex-end; }
.md-send[hidden] { display: none; }
.md-send__scrim { position: absolute; inset: 0; background: rgba(13, 28, 23, .45); }
.md-send__panel {
  position: relative; width: min(980px, 100%); height: 100%; background: #f6f8f7; display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, .18); animation: md-slide .18s ease-out;
}
@keyframes md-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.md-send__head { display: flex; justify-content: space-between; gap: 12px; padding: 18px 22px; background: #fff; border-bottom: 1px solid var(--dk-line); }
.md-send__head h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.md-send__x { border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--dk-muted); cursor: pointer; }
.md-send__event { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 14px 22px 0; }
.md-send__event > div, .md-send__event select { max-width: 320px; }
.md-send__event label { display: block; width: 100%; }
.md-send__people { flex: 1 1 auto; overflow: auto; padding: 14px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.md-send__person { background: #fff; border: 1px solid var(--dk-line); border-radius: var(--dk-r); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.md-send__person header { display: flex; flex-direction: column; gap: 2px; }
.md-send__pick { margin: 0; cursor: pointer; }
.md-send__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--dk-line); }
.md-send__tab { border: 0; background: none; padding: 8px 12px; font-weight: 600; font-size: .88rem; color: var(--dk-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.md-send__tab.is-on { color: var(--dk-brand); border-bottom-color: var(--dk-brand); }
.md-send__tab .fa-whatsapp { color: #25d366; }
.md-send__pane textarea { font-size: .92rem; line-height: 1.5; }
.md-send__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.md-send__foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 14px 22px; background: #fff !important; color: var(--dk-ink) !important; border-top: 1px solid var(--dk-line); margin: 0; }

/* ------------------------------------------------------------ templates -- */
.md-tpl { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.md-tpl__editors { display: grid; gap: 16px; }
.md-tpl__card .fa-whatsapp { color: #25d366; }
.md-tpl__text { font-size: .93rem; line-height: 1.5; }
.md-tpl__meta { text-align: right; font-size: .78rem; color: var(--dk-muted); margin-top: 4px; }
.md-tpl__preview { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #f4f7f6; border: 1px solid var(--dk-line); font-size: .9rem; }
.md-tpl__preview [data-preview] { white-space: pre-wrap; }
.md-tpl__preview-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-muted); margin-bottom: 4px; }
.md-tpl__preview strong { display: block; margin-bottom: 6px; }
.md-tpl__vars { position: sticky; top: 80px; }
.md-tpl__var-list { list-style: none; padding: 0; margin: 0 0 12px; }
.md-tpl__var-list li { padding: 5px 0; border-top: 1px solid var(--dk-line); }
.md-tpl__var-list small { display: block; color: var(--dk-muted); font-size: .75rem; }
.md-tpl__var { border: 1px solid var(--dk-line); background: var(--dk-brand-soft); color: var(--dk-brand); border-radius: 6px; padding: 1px 8px; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; cursor: pointer; }
.md-tpl__var:hover { border-color: var(--dk-brand); }

/* --------------------------------------------------------------- thread -- */
.md-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 460px; overflow: auto; }
.md-thread__msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; background: #f1f4f3; align-self: flex-start; }
.md-thread__msg.is-mine { align-self: flex-end; background: var(--dk-brand-soft); }
.md-thread__msg--admin:not(.is-mine) { background: #eef2fb; }
.md-thread__who { font-size: .75rem; font-weight: 700; color: var(--dk-muted); margin-bottom: 2px; }
.md-thread__who span { font-weight: 400; margin-left: 6px; }
.md-thread__body { white-space: pre-wrap; word-break: break-word; font-size: .93rem; }
.md-thread__form { display: flex; gap: 8px; align-items: flex-end; }
.md-thread__form textarea { flex: 1 1 auto; }

/* --------------------------------------------------------- availability -- */
.md-avail { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.md-week { display: flex; flex-direction: column; gap: 6px; }
.md-week__day { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--dk-line); background: #fafbfb; }
.md-week__day.is-on { background: #fff; border-color: #cfe5dc; }
.md-week__name { width: 130px; margin: 0; font-weight: 600; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.md-week__times { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.md-week__times input[type=time] { width: 118px; }
.md-week__max { width: 72px; }
.md-week__off { color: #9aa5a1; font-size: .85rem; }
.md-week__day:not(.is-on) .md-week__times { display: none; }
.md-week__day.is-on .md-week__off { display: none; }
.md-block-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--dk-line); font-size: .9rem; }
.md-block-row:first-of-type { border-top: 0; }

/* ------------------------------------------------------- client records -- */
.md-rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px; }
.md-rec-title { font-size: 1.45rem; font-weight: 700; margin: 0 0 4px; }
.md-rec-sub { font-size: 1.02rem; font-weight: 700; margin: 0 0 12px; }
.md-rec-sub .fa { color: var(--dk-brand); }
.md-rec-intro { margin: 8px 0 18px; }
.md-rec-join { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-left: 4px solid var(--dk-brand); margin-top: 14px; }
.md-rec-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; color: inherit; text-decoration: none !important; transition: border-color .12s, box-shadow .12s; }
a.md-rec-row:hover { border-color: #bcd9ce; box-shadow: 0 4px 16px rgba(0, 60, 45, .08); }
.md-rec-row--next { border-left: 4px solid var(--dk-brand); }
.md-rec-date { width: 54px; flex: 0 0 auto; text-align: center; border-radius: 10px; background: var(--dk-brand-soft); color: var(--dk-brand); padding: 6px 0; }
.md-rec-date b { display: block; font-size: 1.3rem; line-height: 1.1; }
.md-rec-date span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.md-rec-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.md-rec-badges { display: flex; align-items: center; gap: 8px; }

@media (max-width: 991px) {
  .md-book, .md-appt, .md-tpl, .md-avail, .md-send__people { grid-template-columns: minmax(0, 1fr); }
  .md-appt__side, .md-tpl__vars { position: static; }
  .md-week__day { flex-wrap: wrap; }
}

/* The old admin theme paints tab labels white; give tabs readable colours. */
.md-dash-shell .nav-tabs { border-bottom: 1px solid var(--dk-line); }
.md-dash-shell .nav-tabs .nav-link { color: var(--dk-muted) !important; background: transparent !important; border: 1px solid transparent; font-weight: 600; }
.md-dash-shell .nav-tabs .nav-link:hover { color: var(--dk-brand) !important; border-color: transparent; }
.md-dash-shell .nav-tabs .nav-link.active { color: var(--dk-brand) !important; background: #fff !important; border-color: var(--dk-line) var(--dk-line) #fff; }

/* ------------------------------------------------------ website content -- */
.st-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; position: sticky; top: 72px; z-index: 20; }
.st-bar__actions { display: flex; gap: 8px; align-items: center; }
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
.st-section { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-muted); margin: 18px 0 8px; }
.st-section:first-child { margin-top: 0; }
.st-field { padding: 14px 16px; margin-bottom: 10px; border-left: 3px solid transparent; transition: border-color .15s, box-shadow .15s; }
.st-field.has-draft { border-left-color: #d9a23d; }
.st-field.is-changed { border-left-color: var(--dk-brand); }
.st-field.is-flash { box-shadow: 0 0 0 3px rgba(29, 78, 137, .35); }
.st-field__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.st-field__meta { display: flex; gap: 6px; align-items: center; }
.st-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-lang__name { display: block; font-size: .72rem; font-weight: 700; color: var(--dk-brand); margin-bottom: 4px; }
.st-live { background: #f6f7f8; border: 1px dashed #d8dde2; border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; }
.st-live small, .st-new-label { display: block; font-size: .68rem; font-weight: 700; color: var(--dk-muted); text-transform: uppercase; letter-spacing: .06em; }
.st-live__text { font-size: .85rem; color: #505b66; white-space: pre-wrap; max-height: 4.6em; overflow: hidden; }
.st-live:hover .st-live__text { max-height: none; }
.st-lang textarea, .st-lang input { font-size: .9rem; }
.st-preview { position: sticky; top: 140px; }
.st-preview__bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.st-preview iframe { width: 100%; height: calc(100vh - 210px); min-height: 520px; border: 1px solid var(--dk-line); border-radius: 12px; background: #fff; }
.st-rev { border-top: 1px solid var(--dk-line); padding: 12px 0; }
.st-rev__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.st-rev__text { font-size: .88rem; white-space: pre-wrap; margin-top: 4px; }
.st-rev__text small { display: block; font-weight: 700; color: var(--dk-muted); }
@media (max-width: 1199px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .st-preview { position: static; order: -1; }
  .st-preview iframe { height: 460px; }
}
@media (max-width: 767px) { .st-langs { grid-template-columns: 1fr; } }

/* Preview at a real screen width (desktop / tablet / phone), scaled to fit. */
.st-stage { position: relative; height: calc(100vh - 210px); min-height: 520px; border: 1px solid var(--dk-line); border-radius: 12px; background: #eef0f2; overflow: hidden; padding: 12px; }
.st-device { transform-origin: top left; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.st-device.is-handheld { border-radius: 22px; box-shadow: 0 0 0 8px #1f2933, 0 6px 24px rgba(0, 0, 0, .18); margin: 8px auto 0; }
.st-device iframe, .st-preview .st-device iframe { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; display: block; }
.st-stage__size { position: absolute; right: 10px; bottom: 8px; font-size: .72rem; color: var(--dk-muted); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 6px; }
.st-layout.is-wide { grid-template-columns: minmax(0, 1fr); }
.st-layout.is-wide .st-fields { display: none; }
.st-layout.is-wide .st-preview { position: static; }
@media (max-width: 1199px) { .st-stage { height: 480px; } }

/* Appointments dashboard */
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ap-side > .md-card { margin-bottom: 16px; }
.ap-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--dk-line); }
.ap-row:first-child { border-top: 0; }
.ap-row__time { width: 74px; font-weight: 700; flex: none; }
.ap-row__main { flex: 1; min-width: 0; }
.ap-row__main small { display: block; color: var(--dk-muted); }
.ap-row__acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ap-row.is-now { background: #f2f8ff; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.ap-doc { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--dk-line); font-size: .9rem; }
.ap-doc:first-of-type { border-top: 0; }
.ap-doc small { display: block; color: var(--dk-muted); }
.ap-link { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--dk-line); color: inherit; }
.ap-link:first-of-type { border-top: 0; }
.ap-link:hover { text-decoration: none; color: var(--dk-brand); }
.ap-count { background: #fff3cd; color: #7a5b00; border-radius: 999px; padding: 1px 9px; font-weight: 700; font-size: .8rem; }
.ap-count.is-zero { background: #eef0f2; color: var(--dk-muted); }
.ap-group { margin-bottom: 22px; }
.ap-msg { background: #f6f7f8; border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: .9rem; white-space: pre-wrap; }
.ap-row.is-leaving { opacity: 0; transition: opacity .25s; }
@media (max-width: 991px) { .ap-grid { grid-template-columns: minmax(0, 1fr); } }

/* "What to do next" panel on the appointment page. */
.md-next__list { list-style: none; margin: 0; padding: 0; }
.md-next__list > li { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--md-line, #e3e8ee); }
.md-next__list > li:last-child { border-bottom: 0; }
.md-next__mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; background: #eef1f4; color: #6b7a8a; }
.md-next__list .is-done .md-next__mark { background: var(--md-brand, #1f8a70); color: #fff; }
.md-next__list .is-todo .md-next__mark { background: #fff3cd; color: #8a6100; box-shadow: 0 0 0 2px #f5d77a; }
.md-next__list .is-wait { opacity: .72; }
.md-next__body { flex: 1 1 auto; min-width: 0; }
.md-next__act { flex: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.md-next__act form { margin: 0; }
.md-next__trx { font-size: .95rem; margin: 2px 0; }
.md-next__trx span:first-child { color: #6b7a8a; margin-right: 4px; }
.md-next__trx b { font-size: 1.05rem; letter-spacing: .03em; background: #fff8e1; padding: 1px 8px; border-radius: 6px; }
.md-next__list > li.md-next__sub { background: #f7f9fb; border-radius: 8px; padding: 12px; margin: 4px 0; }
.md-next__list > li.md-next__sub.collapse:not(.show) { display: none; }
.md-trx { letter-spacing: .03em; }
@media (max-width: 640px) { .md-next__list > li { flex-wrap: wrap; } .md-next__act { width: 100%; justify-content: flex-start; } }

/* Send window: pick the channels at the top of each person's card. */
.md-send__via { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 8px 0 6px; }
.md-send__wa { margin-left: auto; color: #1a8f4a; font-weight: 600; }

/* A working day that a weekly time-off rule closes. */
.md-week__day.is-timeoff { background: #fff7e6; border-color: #f2d29b; }
.md-week__tag { margin-left: 8px; font-size: .68rem; }