/* Reservations calendar. The fixed table layout keeps all seven days visible on mobile. */
.reservation-calendar { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.calendar-toolbar { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.calendar-heading { margin: 0; font-size: 1.375rem; white-space: nowrap; }
.calendar-property-label { align-self: start; padding-top: 6px; color: var(--text-muted); font-size: 0.875rem; }
.calendar-navigation { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; width: auto; overflow-x: auto; }
.calendar-navigation > * { flex-shrink: 0; white-space: nowrap; }
.calendar-property-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.calendar-property-controls .select { width: 12rem; min-width: 0; max-width: 100%; }
.calendar-property-controls .button { white-space: nowrap; }
@media (max-width: 600px) {
  .calendar-toolbar { gap: 6px 8px; padding: 6px; }
  .calendar-heading { font-size: 1rem; }
  .calendar-navigation { gap: 4px; }
  .calendar-navigation .icon-button { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  .calendar-property-controls { gap: 4px; }
  .calendar-toolbar .button.small { padding: 5px 8px; }
}

.calendar-month-controls { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.calendar-month-button { text-decoration: none; }
.calendar-previous-icon { transform: rotate(90deg); }
.calendar-next-icon { transform: rotate(-90deg); }
.calendar-month-button.is-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.calendar-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.calendar-table th { padding: 14px 6px; background: var(--surface-subtle); color: var(--text-muted); text-align: center; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.calendar-table abbr { text-decoration: none; }
.calendar-day { height: 62px; padding: 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; }
.calendar-day:last-child { border-right: 0; }
.calendar-day-outside { background: var(--surface-subtle); color: var(--text-muted); }
.calendar-date { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.8125rem; font-weight: 550; }
.calendar-day-outside .calendar-date { font-weight: 400; }
.calendar-day-today { background: var(--accent-soft); }
.calendar-day-today .calendar-date { background: var(--accent); color: var(--surface); font-weight: 750; }
.calendar-day-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-day-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 62px; padding: 6px 2px; color: inherit; text-decoration: none; }
.calendar-day-button:hover { background: var(--accent-soft); color: var(--accent-text); }
.calendar-day-button:focus-visible { outline-offset: -4px; }
.calendar-event-pill { display: inline-block; flex-shrink: 0; width: 18px; height: 5px; border-radius: 20px; background: var(--accent); }
.calendar-event-pill-blocked { background: var(--danger); }
.calendar-selected-indicator { width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 2px; }
.calendar-load-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 0.8125rem; }
.calendar-load-status p { margin: 0; }
.calendar-load-status.is-error { background: var(--accent-soft); color: var(--text); }
.calendar-load-status .button { min-height: 36px; padding: 6px 12px; }
.calendar-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.75rem; }
.calendar-legend { display: inline-flex; align-items: center; gap: 8px; }
.calendar-today-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.reservation-day-summary { margin-top: 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: calc(var(--header-height) + 16px); }
.reservation-summary-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 8px; border-bottom: 1px solid var(--border); }
.reservation-summary-header .eyebrow { margin-bottom: 6px; }
.reservation-summary-header h2 { margin: 0; font-size: 1.25rem; }
.reservation-summary-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reservation-event-count { padding: 4px 12px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.75rem; font-weight: 600; }
.reservation-event-list { margin: 0; padding: 0 12px; list-style: none; }
.reservation-event { display: grid; margin-top: 3px; margin-bottom: 3px; grid-template-columns: 100px 32px minmax(0, 1fr); align-items: start; gap: 12px; padding: 4px 0 8px 10px; border-left: 4px solid var(--accent); }
.reservation-event-blocked { border-left-color: var(--danger); }
.reservation-event-actions { display: flex; flex-direction: column; gap: 4px; }
.reservation-event-actions .icon-button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
@media (max-width: 600px) {
  .reservation-event { grid-template-columns: 80px 32px minmax(0, 1fr); gap: 8px; }
}
.reservation-event + .reservation-event { border-top: 1px solid var(--border); }
.reservation-event-time { display: flex; flex-direction: column; flex: 0 0 100px; color: var(--accent-text); font-size: 0.8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.reservation-event-end { margin-top: 3px; color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
.reservation-event-copy { min-width: 0; }
.reservation-event-copy h3 { margin: 0 0 6px; }
.reservation-event-copy p { margin: 0; color: var(--text-muted); font-size: 0.8125rem; }
.reservation-event-copy .reservation-event-location { margin-bottom: 8px; color: var(--accent-text); font-size: 0.75rem; font-weight: 550; }
.reservation-empty { padding: 30px 24px; text-align: center; color: var(--text-muted); }
.reservation-empty > .icon { width: 28px; height: 28px; margin-bottom: 10px; }
.reservation-empty h3 { margin: 0 0 8px; color: var(--text); }
.reservation-empty p { margin: 0; font-size: 0.8125rem; }

/* Native modal dialog supplies focus trapping and makes the page behind it inert. */
.reservation-editor { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; overflow-y: auto; border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: -12px 0 40px rgb(0 0 0 / 20%); }
.reservation-editor[open] { animation: reservation-editor-enter 180ms ease-out; }
.reservation-editor::backdrop { background: rgb(4 10 24 / 55%); }
.reservation-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.reservation-editor-header h2 { margin: 0; }
.reservation-editor form { padding: 24px; }
.reservation-editor-intro { margin: 0 0 24px; color: var(--text-muted); }
.reservation-editor-optional { color: var(--text-muted); font-weight: 400; }
.reservation-editor textarea { resize: vertical; }
.reservation-date-control { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); transition: border-color 150ms ease, background-color 150ms ease; }
.reservation-date-control:hover { border-color: var(--accent); }
.reservation-date-control:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; background: var(--surface); }
.reservation-date-control .auth-input { min-width: 0; border: 0; background: transparent; font-variant-numeric: tabular-nums; }
.reservation-date-control .auth-input:focus-visible { outline: none; }
.reservation-date-picker.is-enhanced input::-webkit-calendar-picker-indicator { display: none; }
.date-picker-trigger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; margin-right: 5px; padding: 0; border: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); }
.date-picker-trigger:hover, .date-picker-trigger[aria-expanded="true"] { background: var(--accent); color: var(--surface); }
.date-picker-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.date-picker-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.date-picker-month { font-size: 0.875rem; font-weight: 650; }
.date-picker-nav { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); color: var(--text); font-size: 1.25rem; }
.date-picker-nav:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.date-picker-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: center; }
.date-picker-table th { padding: 4px 0 8px; color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; }
.date-picker-table abbr { text-decoration: none; }
.date-picker-table td { padding: 2px; }
.date-picker-day { display: grid; place-items: center; width: 100%; min-height: 34px; padding: 3px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.date-picker-day.is-outside { color: var(--text-muted); }
.date-picker-day[aria-current="date"] { border-color: var(--accent); }
.date-picker-day:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-text); }
.date-picker-day[aria-pressed="true"] { background: var(--accent); color: var(--surface); font-weight: 700; }
.date-picker-day:focus-visible { outline-offset: 0; }
.date-picker-panel button:disabled { opacity: 0.3; cursor: default; }
.date-picker-hint { margin: 10px 0 0; color: var(--text-muted); font-size: 0.6875rem; }
.reservation-editor-actions { display: flex; justify-content: flex-end; gap: 12px; }
.reservation-editor-actions .auth-primary { width: auto; }
.reservation-editor button:disabled { opacity: 0.65; cursor: wait; }
body.reservation-editor-open { overflow: hidden; }
@keyframes reservation-editor-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .reservation-editor[open] { animation: none; } }