/* ══════════════════════════════════════════════════════════════════════
   lm-availability.css — Talent vacation / unavailable-dates calendar.
   Used on /settings/account/availability (2-month range picker) and shared
   visual language with the public "Check Availability" modal.
   Unavailable = orange (#fb923c, a "warning", not an "error").
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --lm-avail-orange: #fb923c;
  --lm-avail-orange-bg: #fff3e6;
  --lm-avail-orange-bd: #fcd9b0;
}

/* One grey bordered card wrapping the whole Availability tab — the On-vacation
   toggle, the auto-disable picker, Save Changes, the calendar and the ranges
   list all live inside it. */
.lm-avail-card {
  max-width: 760px;
  margin: 16px auto 28px; /* bottom gap separates the card from the calendar block */
  background: var(--lm-surface, #f8fafc);
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 12px;
  padding: 6px 12px 14px;
}
/* The inner On-vacation switch no longer needs its own box (it's in the card). */
.lm-avail-card .lm-acct-switch { background: transparent; border: none; padding: 10px 8px 2px; }
/* Inner blocks fill the card (drop their own centering / max-width / big padding). */
.lm-avail-card .lm-avail-vacation-form { max-width: none; margin: 0; padding: 4px 8px 10px; }
.lm-avail-card .lm-avail-wrap { max-width: none; margin: 0; padding: 0 8px; }

.lm-avail-wrap { max-width: 720px; margin: 0 auto; padding: 8px 20px 40px; }
/* Center the "On vacation" quick-toggle form too, so it lines up with the
   calendar block above instead of hugging the left edge. Extra bottom space
   below the Save button so it doesn't sit flush against the page edge. */
.lm-avail-vacation-form { max-width: 720px; margin: 0 auto; padding: 14px 20px 16px; }
/* "Auto-disable on": only the picker control is half-width — the label and the
   help text under it stay full width so the sentence doesn't wrap narrow. */
.lm-avail-vacation-form .lm-acct-date-pick { max-width: 340px; width: 100%; }
/* Save row — help text on the left, green Save Changes button on the right. */
.lm-avail-save-row { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
/* Tighten the gap above the picker too, so Save sits closer to the date field. */
.lm-avail-card .lm-acct-until-row { margin-top: 4px; }
.lm-avail-save-row .lm-avail-save-hint { flex: 1 1 auto; margin: 0; }
.lm-avail-save-row .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
  .lm-avail-save-row { flex-direction: column; align-items: stretch; }
}
.lm-avail-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.lm-avail-hint { font-size: 13px; color: #64748b; line-height: 1.5; margin: 0 0 18px; }

/* ── calendar ── */
.lm-avail-cal { position: relative; }
.lm-avail-cal-head { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.lm-avail-nav {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; cursor: pointer; color: #334155;
  transition: background .12s, border-color .12s;
}
.lm-avail-nav svg { width: 16px; height: 16px; }
.lm-avail-nav:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.lm-avail-nav:disabled { opacity: .4; cursor: default; }

.lm-avail-months { display: flex; gap: 24px; flex-wrap: wrap; }
.lm-avail-month { flex: 0 1 300px; max-width: 320px; min-width: 240px; }
.lm-avail-m-head { text-align: center; font-weight: 600; font-size: 14px; margin-bottom: 8px; color: #1e293b; }
.lm-avail-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.lm-avail-dows > div { text-align: center; font-size: 11px; color: #94a3b8; font-weight: 600; }
.lm-avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.lm-avail-day {
  height: 36px; border: 1px solid transparent; background: #f8fafc; border-radius: 8px;
  font-size: 13px; color: #334155; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, border-color .1s, color .1s;
}
.lm-avail-day:hover:not(:disabled):not(.is-unavailable) { background: #e2e8f0; }
.lm-avail-day.is-today { border-color: #94a3b8; font-weight: 700; }
.lm-avail-day.is-disabled { color: #cbd5e1; background: transparent; cursor: default; }
.lm-avail-day.is-pending { background: var(--lm-avail-orange); color: #fff; border-color: var(--lm-avail-orange); font-weight: 700; }
.lm-avail-day.is-unavailable {
  background: var(--lm-avail-orange-bg); color: #b45309; border-color: var(--lm-avail-orange-bd); font-weight: 600;
}
.lm-avail-day.is-unavailable:hover:not(:disabled) { background: #ffe6cc; }

.lm-avail-pending-note { margin-top: 10px; font-size: 12.5px; color: #b45309; font-weight: 600; }

/* ── ranges list ── */
.lm-avail-ranges { margin-top: 22px; }
.lm-avail-ranges-label { font-size: 12.5px; font-weight: 600; color: #64748b; margin-bottom: 8px; }
.lm-avail-range-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lm-avail-range-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--lm-avail-orange-bd); background: var(--lm-avail-orange-bg);
  border-radius: 10px; font-size: 13.5px; color: #1e293b;
}
.lm-avail-range-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lm-avail-orange); flex: 0 0 auto; }
.lm-avail-range-text { flex: 1 1 auto; }
.lm-avail-range-x {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #b45309; cursor: pointer; border-radius: 6px; flex: 0 0 auto;
}
.lm-avail-range-x:hover { background: #ffe0c2; }
.lm-avail-empty { font-size: 13px; color: #94a3b8; padding: 6px 0; }
.lm-avail-flash { margin-top: 14px; }

/* ── dark mode (Sngine night-mode / LM dark) ── */
html[data-lm-theme="dark"] .lm-avail-hint,
html.lm-dark .lm-avail-hint { color: #94a3b8; }
html[data-lm-theme="dark"] .lm-avail-nav,
html.lm-dark .lm-avail-nav { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html[data-lm-theme="dark"] .lm-avail-nav:hover:not(:disabled),
html.lm-dark .lm-avail-nav:hover:not(:disabled) { background: #334155; }
html[data-lm-theme="dark"] .lm-avail-m-head,
html.lm-dark .lm-avail-m-head { color: #e2e8f0; }
html[data-lm-theme="dark"] .lm-avail-day,
html.lm-dark .lm-avail-day { background: #1e293b; color: #cbd5e1; }
html[data-lm-theme="dark"] .lm-avail-day:hover:not(:disabled):not(.is-unavailable),
html.lm-dark .lm-avail-day:hover:not(:disabled):not(.is-unavailable) { background: #334155; }
html[data-lm-theme="dark"] .lm-avail-day.is-disabled,
html.lm-dark .lm-avail-day.is-disabled { color: #475569; background: transparent; }
html[data-lm-theme="dark"] .lm-avail-day.is-unavailable,
html.lm-dark .lm-avail-day.is-unavailable { background: rgba(251,146,60,.18); color: #fdba74; border-color: rgba(251,146,60,.4); }
html[data-lm-theme="dark"] .lm-avail-range-item,
html.lm-dark .lm-avail-range-item { background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.35); color: #e2e8f0; }
html[data-lm-theme="dark"] .lm-avail-range-x,
html.lm-dark .lm-avail-range-x { color: #fdba74; }

/* Booking "Check availability" calendar — ALWAYS a white card, in BOTH light
   and dark mode (unconditional, so it never depends on theme detection). */
#lm-booking-cal { background: #fff !important; }

/* Booking modal — inline notices (validation / "unavailable on those dates")
   render UNDER the calendar with a soft decorative "warning" look (amber +
   left accent), not a harsh red error bar by the buttons. */
.lm-booking-cal-warn {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--lm-avail-orange-bg);
  border: 1px solid var(--lm-avail-orange-bd);
  border-left: 3px solid var(--lm-avail-orange);
  border-radius: 10px;
  color: #b45309;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}
.lm-booking-cal-warn[hidden] { display: none; }
html[data-lm-theme="dark"] .lm-booking-cal-warn,
html.lm-dark .lm-booking-cal-warn {
  background: rgba(251,146,60,.12);
  border-color: rgba(251,146,60,.35);
  border-left-color: var(--lm-avail-orange);
  color: #fdba74;
}

/* Booking "Check availability" modal — DARK theme. The base styles hard-code
   white on the modal sheet, head, inputs and calendar; everything else uses LM
   tokens (already dark-aware). Re-skin just those hardcoded surfaces to the dark
   surface so the whole sheet reads light-on-dark. Selected (green) + vacation
   (orange) keep their accent colours. */
html[data-lm-theme="dark"] .lm-booking-modal,
html.lm-dark .lm-booking-modal,
html[data-lm-theme="dark"] .lm-booking-modal .lm-booking-head,
html.lm-dark .lm-booking-modal .lm-booking-head {
  background: var(--lm-surface);
}
html[data-lm-theme="dark"] .lm-booking-modal .lm-input,
html[data-lm-theme="dark"] .lm-booking-modal .lm-select,
html[data-lm-theme="dark"] .lm-booking-modal .lm-textarea,
html.lm-dark .lm-booking-modal .lm-input,
html.lm-dark .lm-booking-modal .lm-select,
html.lm-dark .lm-booking-modal .lm-textarea {
  background: var(--lm-surface-2);
  color: var(--lm-text);
  border-color: var(--lm-border);
}
/* Custom dropdowns inside the modal (Book as · Select service · offer unit). */
html[data-lm-theme="dark"] .lm-booking-modal .lm-cdrop-btn,
html.lm-dark .lm-booking-modal .lm-cdrop-btn,
html[data-lm-theme="dark"] .lm-booking-modal .lm-cdrop-menu,
html.lm-dark .lm-booking-modal .lm-cdrop-menu {
  background: var(--lm-surface-2);
  color: var(--lm-text);
  border-color: var(--lm-border);
}
html[data-lm-theme="dark"] .lm-booking-modal .lm-cdrop-item:hover,
html.lm-dark .lm-booking-modal .lm-cdrop-item:hover,
html[data-lm-theme="dark"] .lm-booking-modal .lm-cdrop-item.is-active,
html.lm-dark .lm-booking-modal .lm-cdrop-item.is-active {
  background: var(--lm-surface);
}
/* Calendar sheet (base forces #fff !important — beat it with higher specificity). */
html[data-lm-theme="dark"] #lm-booking-cal,
html.lm-dark #lm-booking-cal {
  background: var(--lm-surface) !important;
}

/* ── public "Check Availability" booking calendar (lm-profile.js): unavailable
   days (talent vacation + fully-booked) get a clear GREY FILL + struck-through
   text, so they read as "blocked" and match the Unavailable legend — distinct
   from plain past/out-of-range days which stay unfilled. */
.lm-cal-day.is-vacation,
.lm-cal-day.is-booked-full {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}
html[data-lm-theme="dark"] .lm-cal-day.is-vacation,
html.lm-dark .lm-cal-day.is-vacation,
html[data-lm-theme="dark"] .lm-cal-day.is-booked-full,
html.lm-dark .lm-cal-day.is-booked-full {
  background: #334155 !important;   /* dark "blocked" fill (modal is dark now) */
  color: #64748b !important;
}

/* Legend "Unavailable" swatch — clearer: a solid grey chip with a strike,
   instead of the faint diagonal-stripe pattern that's hard to read. */
.lm-cal-swatch.is-disabled {
  background: #cbd5e1 !important;
  position: relative;
  overflow: hidden;
}
.lm-cal-swatch.is-disabled::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: 50%;
  height: 2px;
  background: #64748b;
  transform: rotate(-45deg);
}