/* MPD Range — calendar + forms components (Phase 4). Loaded after tokens.css + base.css. */

/* ----- Multi-day request guide (dismissible) ---------------------------- */
.guide-card { border-color: color-mix(in srgb, var(--info) 40%, var(--border)); background: color-mix(in srgb, var(--info) 6%, var(--surface)); }
.guide-card .guide-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.guide-card h3 { margin: 0; }
.guide-card .guide-steps { margin: 0 0 0 1.25em; padding: 0; }
.guide-card .guide-steps li { margin-bottom: var(--s2); }
.guide-close {
  background: transparent; border: 0; cursor: pointer; line-height: 1;
  font-size: 1.4rem; color: var(--muted); padding: 4px 10px; border-radius: var(--radius-sm);
  min-width: var(--tap); min-height: var(--tap);
}
.guide-close:hover { background: var(--surface-2); color: var(--ink); }

/* ----- Calendar ---------------------------------------------------------- */
.cal-toolbar { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin: var(--s4) 0; flex-wrap: wrap; }
.cal-month { font-size: var(--fs-3); font-weight: 800; min-width: 12ch; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); padding: var(--s2) 0; }
.cal-cell {
  position: relative; min-height: 64px; padding: 6px 6px 22px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 5px; border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.cal-cell:hover:not([disabled]) { border-color: var(--brand); }
.cal-cell[disabled] { cursor: not-allowed; opacity: .6; }
.cal-cell.cal-st-full[disabled] { opacity: .82; }   /* keep "Full" days clearly red even though they're not selectable */
.cal-cell.is-other-month { visibility: hidden; }
.cal-cell .cal-num { font-weight: 700; }
.cal-cell.is-today .cal-num::after { content: " · today"; font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }
.cal-cell .cal-status { position: absolute; left: 6px; bottom: 4px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cal-cell .cal-status::before { content: "●"; font-size: .8em; }
.cal-status.open    { color: var(--status-open); }
.cal-status.limited { color: var(--status-limited); }
.cal-status.full    { color: var(--status-full); }
.cal-status.closed  { color: var(--status-closed); }
.cal-status.pending { color: var(--status-pending, #b45309); font-weight: 800; }
/* whole-cell colour-coding by status (background tint + left-edge accent; text label + dot stay too) */
.cal-cell.cal-st-open    { background: color-mix(in srgb, var(--status-open) 10%, var(--surface));    border-left-color: var(--status-open); }
.cal-cell.cal-st-limited { background: color-mix(in srgb, var(--status-limited) 14%, var(--surface)); border-left-color: var(--status-limited); }
.cal-cell.cal-st-pending { background: color-mix(in srgb, var(--status-pending, #b45309) 14%, var(--surface)); border-left-color: var(--status-pending, #b45309); }
.cal-cell.cal-st-full    { background: color-mix(in srgb, var(--status-full) 12%, var(--surface));    border-left-color: var(--status-full); }
.cal-cell.cal-st-closed  { background: color-mix(in srgb, var(--status-closed) 14%, var(--surface));  border-left-color: var(--status-closed); }
.cal-cell .cal-mark { position: absolute; right: 6px; top: 6px; font-size: 12px; color: var(--status-approved); }
/* pending-request badge: a solid dark-amber pill so the hourglass clearly stands out */
.cal-cell .cal-pending { position: absolute; right: 6px; top: 6px; font-size: 11px; line-height: 1.4; padding: 0 4px; border-radius: 8px; background: var(--status-pending, #b45309); color: #fff; font-weight: 700; }
.cal-cell:has(.cal-mark) .cal-pending { top: 24px; }   /* stack below the approved mark when a day has both */
/* selection states override the status tint */
.cal-cell.is-in-range { background: color-mix(in srgb, var(--info) 16%, var(--surface)); }
.cal-cell.is-selected { outline: 3px solid var(--info); outline-offset: -1px; }
.cal-cell:focus-visible { outline: 3px solid var(--info); outline-offset: -1px; }
@media (max-width: 560px) { .cal-cell { min-height: 52px; padding: 4px 4px 20px; } .cal-cell .cal-status { font-size: 10px; } }

/* day-detail popover (rendered inline below the grid for simplicity) */
.cal-daydetail { margin-top: var(--s4); }
.cal-daydetail ul { margin: var(--s2) 0 0; padding-left: 1.2em; }
.cal-daydetail .muted { color: var(--muted); }

/* request panel under the calendar */
.req-panel { margin-top: var(--s5); }
.gap-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.gap-chip {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px;
  padding: 6px 12px; font-size: var(--fs-sm); cursor: pointer; font: inherit;
}
.gap-chip:hover { border-color: var(--brand); }
.timefields { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.timefields label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: var(--fs-sm); }

/* ----- Forms ------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field > label { font-weight: 600; }
.field .req-star { color: var(--error); }
.field .hint { font-size: var(--fs-sm); color: var(--muted); }
.field .field-error { font-size: var(--fs-sm); color: var(--error); font-weight: 600; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); }
.field.has-error .field-error { display: block; }
input[type=text], input[type=email], input[type=tel], input[type=time], input[type=date], select, textarea {
  font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); min-height: var(--tap); max-width: 480px; width: 100%;
}
textarea { min-height: 80px; resize: vertical; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s4); margin: 0 0 var(--s4); max-width: 520px; }
fieldset > legend { font-weight: 700; padding: 0 6px; }
.radio-row { display: flex; gap: var(--s4); flex-wrap: wrap; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

/* honeypot — visually hidden, off-screen, not tab-reachable */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* turnstile box */
.turnstile-box { margin: var(--s3) 0; min-height: 65px; }

/* form-level messages */
.form-msg { border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); border: 1px solid; font-size: var(--fs-body); display: none; }
.form-msg.show { display: block; }
.form-msg.error { border-color: color-mix(in srgb, var(--error) 50%, var(--border)); background: color-mix(in srgb, var(--error) 8%, var(--surface)); color: var(--brand-ink); }
.form-msg.ok    { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); color: var(--brand-ink); }

.summary-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.summary-box dt { font-size: var(--fs-sm); color: var(--muted); }
.summary-box dd { margin: 0 0 var(--s2); font-weight: 600; }

.btn[disabled] { opacity: .6; cursor: default; }
.btn .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* loading skeleton for the calendar */
.cal-skeleton { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-skeleton div { height: 64px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.confirm-card { border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.confirm-card h2 { color: var(--ok); }
.ref-code { font-family: var(--font-mono); background: var(--surface-2); padding: 2px 8px; border-radius: var(--radius-sm); }