/* Consultation booking — the Life Planner's own design language.

   planner.css is loaded first and supplies the tokens (cream surfaces, brown-tinted
   borders, teal primary, spacing, radius, shadows), plus .card, .btn and
   .status-indicator. This file only adds what the planner has no equivalent for:
   the consultant grid, the calendar picker, the booking rows, the sheet and the
   toast. Everything here reads from planner tokens, so light and dark mode follow
   the planner automatically. */


/* The login shell's theme selector (theme.CSS) speaks the shell's own variable
   names. Map them onto the planner tokens so the very same control is styled
   correctly here instead of shipping a second theme button. */
:root {
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-3: var(--color-secondary);
  --text: var(--color-text);
  --muted: var(--color-text-secondary);
  --border: var(--color-border);
  --chip: var(--color-secondary);
  --chip-strong: var(--color-secondary-hover);
  --soft: var(--color-text-secondary);
  --primary: var(--color-primary);
  --accent-fg: var(--color-btn-primary-text);
}

/* sit the selector on the header's baseline, not in its own row */
.header-actions .theme { margin-left: var(--space-4); }

/* The planner grid reserves a 320px sidebar; consultations have none. */
.app-container.consult-shell {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main";
}

.header.consult-header {
  display: flex; align-items: center; gap: var(--space-12);
  flex-wrap: wrap;
}
.header-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--space-8);
  flex-wrap: wrap;
}

.main-content.consult-main {
  max-height: none;
  padding: var(--space-24);
  overflow: visible;
}

.consult-intro {
  margin-bottom: var(--space-20);
}
.consult-intro h2 {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-xl);
  color: var(--color-text);
}
.consult-intro p {
  margin: 0 0 var(--space-12);
  color: var(--color-text-secondary);
  max-width: 72ch;
}
.consult-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  margin: 0; padding: 0; list-style: none;
}
.consult-facts li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-secondary);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-12);
}
.consult-facts b { color: var(--color-text); }

/* ---- consultant cards --------------------------------------------------- */
.consult-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-20);
}
.consult-grid .card {
  display: flex; flex-direction: column;
  margin-bottom: 0;
}
.consult-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-secondary); color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-12);
}
.consult-grid h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}
.consult-role {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-12);
}
.consult-focus {
  align-self: flex-start;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  background: var(--color-secondary);
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-12);
  margin-bottom: var(--space-12);
}
.consult-bio {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-16);
  flex: 1;
}
.consult-grid .status-row { margin-bottom: var(--space-4); }
.consult-grid .status-label { color: var(--color-text-secondary); font-weight: var(--font-weight-normal); }
.consult-grid .status-value { color: var(--color-text); }
.consult-next {
  margin: var(--space-12) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
/* not `.ok`: planner.css already owns that class and would paint a chip behind it */
.consult-next .next-when {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ---- my consultations --------------------------------------------------- */
.consult-section-head {
  display: flex; align-items: baseline; gap: var(--space-12);
  margin: var(--space-24) 0 var(--space-12);
}
.consult-section-head h2 {
  margin: 0; font-size: var(--font-size-lg); color: var(--color-text);
}
.consult-section-head .n {
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
}

.booking-rows { display: flex; flex-direction: column; gap: var(--space-12); }
/* When there is nothing to do with an appointment the actions cell is empty, and an
   empty cell should take no room rather than push the status pill into a one-character
   column (which is what an em-dash placeholder was doing). */
.booking-row .actions:empty { display: none; }
.booking-row .actions { white-space: nowrap; justify-content: flex-end; }
.booking-row {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: var(--space-16);
  align-items: center;
}
.booking-row .when {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.booking-row .sub {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.booking-row .actions { display: flex; gap: var(--space-8); }

.consult-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
}

.consult-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: inherit;
}
.consult-toggle:hover { color: var(--color-primary); }

/* ---- sheet ------------------------------------------------------------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(19, 52, 59, 0.45);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 18px; overflow: auto;
}
.sheet-backdrop.open { display: flex; }
.sheet {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(760px, 100%);
}
.sheet-head {
  display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-20);
  border-bottom: 1px solid var(--color-card-border-inner);
}
.sheet-head h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}
.sheet-head .sub {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.sheet-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--color-text-secondary); font-size: 22px; line-height: 1;
  padding: 0 var(--space-4);
}
.sheet-close:hover { color: var(--color-text); }
.sheet-body { padding: var(--space-20); }
.sheet-foot {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-top: 1px solid var(--color-card-border-inner);
}
.sheet-foot .chosen {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.sheet-foot .grow { flex: 1; }

/* ---- calendar ---------------------------------------------------------- */
.picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px;
  gap: var(--space-20);
  align-items: start;
}
@media (max-width: 640px) {
  .picker { grid-template-columns: 1fr; }
  .booking-row { grid-template-columns: 1fr; }
}

.cal {
  border: 1px solid var(--color-card-border-inner);
  border-radius: var(--radius-base);
  padding: var(--space-12);
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-8);
}
.cal-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.cal-nav {
  width: 28px; height: 28px; padding: 0;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 17px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.cal-nav:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.cal-week, .cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.cal-week { margin-bottom: var(--space-4); }
.cal-week span {
  text-align: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
  padding: 2px 0;
}
.cal-blank { min-height: 34px; }
.cal-day {
  min-height: 34px; padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  background: transparent;
  font: inherit; font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: default;
}
.cal-day.quiet { opacity: .35; }
.cal-day.has-slots {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: var(--color-secondary);
  border-color: var(--color-card-border);
}
.cal-day.has-slots:hover { border-color: var(--color-primary); }
.cal-day.on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-btn-primary-text);
  font-weight: var(--font-weight-semibold);
}

/* ---- times ------------------------------------------------------------- */
.times-col { min-width: 0; overflow: hidden; }
.times-head {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.times {
  display: flex; flex-direction: column; gap: var(--space-8);
  max-height: 246px; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px;
}
.time {
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit; font-size: var(--font-size-sm);
  cursor: pointer;
}
.time:hover { border-color: var(--color-primary); }
.time.on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-btn-primary-text);
  font-weight: var(--font-weight-semibold);
}
.times .none { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* ---- form fields inside the sheet ------------------------------------- */
.sheet .form-group { margin-top: var(--space-16); }
.sheet .form-label { display: block; margin-bottom: var(--space-4); }
.sheet .form-control {
  width: 100%;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-background);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base);
}
.sheet .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-secondary);
}
.sheet textarea.form-control { min-height: 76px; resize: vertical; }

.btn-danger {
  background: transparent;
  border: 1px solid var(--color-error);
  color: var(--color-error);
}
.btn-danger:hover { background: var(--color-secondary); }

/* ---- toast ------------------------------------------------------------- */
#toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 80;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-slate-900);
  color: var(--color-cream-50);
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  opacity: 0; pointer-events: none;
  transition: all var(--duration-normal) var(--ease-standard);
  max-width: min(560px, 90vw);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.bad { background: var(--color-red-500); }

/* The planner sheet styles success / warning / error; the schedule also has an
   informational state - completed and cancelled - which fell through to no
   background at all and read as loose text. */
.status-info {
  background: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
  color: var(--color-text-secondary);
}