/* ============================================================================
   DEMO v7 scheduling page. Loads mockup.css first (tokens, Crimson Text,
   shell/nav/round-btn/modal styles already defined there) and only adds
   what is specific to the day-grid layout: the week toolbar, the open-
   slots stat, the per-day time-slot x therapist tables, and cell states.
   ========================================================================== */

.sched-shell { padding-bottom: 80px; }

/* ---- toolbar / week nav ---- */
.sched-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 20px 0 0;
}
.sched-toolbar--templates { margin-top: 14px; }
.sched-toolbar__label { font-size: .85rem; font-weight: 700; color: var(--heading); }
.week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.week-nav__label { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.week-nav__range { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.week-nav__today {
  border: none; background: none; padding: 0;
  font-size: .78rem; color: var(--button-hover);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.week-nav__jump {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--heading);
}
.week-nav__jump input {
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-size: .85rem;
}
.open-stat {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-active);
  background: #eef6f0;
  border: 1px solid #cfe3d4;
  border-radius: 999px;
  padding: 8px 18px;
}
/* ---- scale toggle (Week/Day) + day nav + hours button ---- */
.sched-toolbar--scale { margin-top: 14px; }
.scale-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.scale-toggle__btn {
  border: none;
  background: var(--card);
  color: var(--heading);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  padding: 7px 18px;
  cursor: pointer;
}
.scale-toggle__btn + .scale-toggle__btn { border-left: 1px solid var(--border); }
.scale-toggle__btn[aria-pressed="true"] { background: var(--accent-active); color: #fff; }
.day-nav { display: flex; align-items: center; gap: 10px; }
.day-nav[hidden] { display: none; }
.day-nav__label { font-size: .92rem; font-weight: 700; color: var(--text); min-width: 150px; text-align: center; }

.hours-grid { border-collapse: collapse; width: 100%; margin-top: 10px; }
.hours-grid th, .hours-grid td { border: 1px solid var(--border); padding: 6px 8px; font-size: .85rem; text-align: left; }
.hours-grid th { background: var(--inner-bg); }
.hours-grid select { padding: 5px 7px; border-radius: 6px; border: 1px solid var(--border); font-size: .85rem; color: var(--text); background: #fff; }

.template-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.template-btn {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 6px 14px;
  font-size: .85rem;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
}
.template-btn:hover { border-color: var(--button); }

/* ---- state legend ---- */
.state-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: .82rem;
  color: var(--heading);
}
.state-legend__item { display: flex; align-items: center; gap: 6px; }
.state-legend__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: .78rem;
  line-height: 1;
  border: 1px solid var(--border);
}
.state-legend__swatch--open { background: #f3ece7; color: #b98a63; border-color: #e2d3c4; }
.state-legend__swatch--booked { background: #eef2f6; color: #2c4258; border-left: 3px solid #5c7ea3; }
.state-legend__swatch--away { background: #f1f1f1; color: #7a7a7a; border-left: 3px dashed #8a8a8a; }
.state-legend__swatch--closed {
  color: #7a7a7a;
  background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 4px, #e7e7e7 4px, #e7e7e7 8px);
}

/* ---- day grids ---- */
#dayGrids { display: flex; flex-direction: column; gap: 26px; margin-top: 22px; }
.day-grid {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.day-grid__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.day-grid__title { font-size: 1.05rem; color: var(--text); font-weight: 700; }
.day-grid__title small { font-weight: 400; color: #9a9a9a; margin-left: 6px; }
.day-grid__wrap { overflow-x: auto; }

.sched-table { border-collapse: collapse; width: 100%; min-width: 760px; }
.sched-table th, .sched-table td {
  border: 1px solid var(--border);
  padding: 0;
  vertical-align: top;
}
.sched-table thead th {
  background: var(--inner-bg);
  padding: 8px 8px 6px;
  text-align: left;
  font-size: .85rem;
}
.sched-th__name { display: block; font-weight: 700; color: var(--text); }
.sched-th__open { display: block; font-size: .74rem; color: var(--accent-active); font-weight: 600; margin-top: 2px; }
/* The column header is one button (name + open count) — click opens the
   day-therapist modal (block day / move lunch / jump to weekly template),
   replacing the two always-visible mini-toolbars this header used to show
   per column. */
.sched-th__btn {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  border-radius: 6px;
}
.sched-th__btn:hover .sched-th__name { color: var(--button-hover); text-decoration: underline; text-underline-offset: 2px; }
.sched-th__btn:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; }
.sched-th__btn.is-blocked .sched-th__open { color: #7a2b2b; }

.sched-time-col {
  background: var(--inner-bg);
  font-size: .8rem;
  font-weight: 700;
  color: var(--heading);
  padding: 6px 10px;
  white-space: nowrap;
  width: 74px;
}

.slot-cell { height: 52px; width: 150px; }
.slot-cell__inner {
  height: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}
/* Every slot state pairs a color with a shape/icon and a distinct border
   treatment, so the state never depends on color alone: open = "+" glyph,
   plain booked = filled dot + solid blue left border, away = hollow ring +
   dashed gray left border, conflict = warning triangle + solid red left
   border, closed = diagonal hatch (already shape, not just color) + a
   "no entry" glyph before the reason. All four read in grayscale print. */
.slot-cell--closed .slot-cell__inner {
  background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 6px, #e7e7e7 6px, #e7e7e7 12px);
  color: #7a7a7a;
  font-size: .72rem;
  text-align: center;
}
.slot-cell--open { cursor: pointer; }
.slot-cell--open .slot-cell__inner {
  color: #b98a63;
  font-size: 1.2rem;
  font-weight: 300;
}
.slot-cell--open:hover .slot-cell__inner { background: #f3ece7; color: var(--button-hover); }
.slot-cell--booked { cursor: pointer; }
.booking-card {
  width: 100%;
  border-radius: 6px;
  border-left-width: 4px;
  padding: 5px 7px;
  font-size: .78rem;
  line-height: 1.25;
  background: #eef2f6;
  border: 1px solid #cbd8e4;
  border-left: 4px solid #5c7ea3;
  color: #2c4258;
}
.booking-card__name { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.booking-card__icon { font-size: .8em; }
.booking-card__tag { display: block; font-size: .68rem; color: #5c7186; margin-left: 16px; }
.slot-cell--away .booking-card { background: #f1f1f1; border-color: #d8d8d8; border-left: 4px dashed #8a8a8a; color: #7a7a7a; }
.booking-card__flag { display: inline-block; margin-top: 2px; margin-left: 16px; font-size: .68rem; font-weight: 700; }
.slot-cell--highlight .slot-cell__inner { outline: 3px solid #d6a15a; outline-offset: -3px; }

@media print {
  /* Print is grayscale-first here too (the site's other print sheets
     already assume no color): keep the hatch/border/icon distinctions,
     drop background tints that would otherwise all render as the same
     flat gray. */
  .slot-cell--closed .slot-cell__inner { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #ddd 6px, #ddd 12px); }
  .booking-card { background: #fff; }
}

/* ---- modal shared, wide variant for the template grid ---- */
.modal--wide { max-width: 760px; }
.tpl-grid { border-collapse: collapse; width: 100%; margin-top: 10px; }
.tpl-grid th, .tpl-grid td { border: 1px solid var(--border); padding: 4px; text-align: center; font-size: .78rem; }
.tpl-grid th { background: var(--inner-bg); }
.tpl-cell-btn {
  width: 100%;
  border: none;
  background: #eef6f0;
  color: var(--accent-active);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: .72rem;
  cursor: pointer;
  font-family: var(--font);
}
.tpl-cell-btn.is-closed { background: #fbeeee; color: var(--accent-idle); }
.tpl-cell-btn:hover { filter: brightness(0.96); }
.tpl-grid-scroll { width: 100%; overflow-x: auto; }
/* Outside-hours template cells: preserved but not bookable. Diagonal
   stripe pattern mirrors the closed-slot pattern already used on the main
   grid (schedule.css .slot-cell--closed) so the two "not currently
   available" states read consistently across the page. */
.tpl-cell-btn--outside {
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #e6e6e6 6px, #e6e6e6 12px);
  color: #8a8a8a;
  cursor: not-allowed;
  border: 1px dashed #c2c2c2;
}
.tpl-cell-btn--outside.is-closed {
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f2dede 6px, #f2dede 12px);
  color: #a06a6a;
}
.tpl-cell-btn--outside:hover { filter: none; }

/* v11: searchable patient picker in the booking modal (name/MRN search
   with an inline "+ Add new patient" fallback when nothing matches). */
.patient-pick-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.patient-pick__result {
  text-align: left; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: #fff; font-family: var(--font); font-size: .85rem; cursor: pointer;
}
.patient-pick__result:hover { background: var(--inner-bg); }
.patient-pick__add {
  align-self: flex-start;
}

.modal-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: .85rem; color: var(--heading); }
.modal-field input, .modal-field select, .modal-field textarea {
  padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); font-size: .9rem; color: var(--text); background: #fff;
}
.modal-radio-row { display: flex; gap: 16px; font-size: .85rem; margin-bottom: 12px; }
.modal-actions { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 760px) {
  .sched-table { min-width: 640px; }
  .slot-cell { width: 120px; }
}

/* ---- v12: left date navigator, reusing mockup.css's .nav-rail /
   .nav-toggle collapsible-drawer pattern (styles + the ≤760px fixed-
   drawer breakpoint already live there, shared by both pages). Only the
   calendar content itself is defined here. Weekday-only (Mon-Fri), same
   convention as the /mockup day navigator: the practice runs weekdays
   only, so weekends are never real navigation targets. ---- */
.date-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.date-cal__month {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  flex: 1;
}
.date-cal__nav-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: .9rem;
  cursor: pointer;
}
.date-cal__nav-btn:hover { border-color: var(--button); }
.date-cal__today-btn {
  width: 100%;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 600;
  color: var(--button-hover);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  margin-bottom: 12px;
}
.date-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.date-cal__weekday {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #9a9a9a;
  text-align: center;
}
.date-cal__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.date-cal__day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--inner-bg);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
}
.date-cal__day:hover { border-color: var(--button); }
.date-cal__day--blank { background: transparent; cursor: default; visibility: hidden; }
.date-cal__day.is-in-week { background: #f3ece0; }
.date-cal__day.is-today { color: var(--button-hover); font-weight: 700; box-shadow: inset 0 0 0 1px var(--button-hover); }
.date-cal__day.is-selected { background: var(--button); color: #fff; font-weight: 700; }
.date-cal__day.is-selected.is-today { box-shadow: inset 0 0 0 1px #fff; }
.date-cal__dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent-active);
}
.date-cal__day.is-selected .date-cal__dot { background: #fff; }