/* CumuloReserve — the reservation list (page letter V, UI-LEGEND.md "## V, the reservation list").
   Desktop-first layout mirroring registry.css's extraction pattern — vendored Tabulator theme
   override toward the existing DesignKit-v1 tokens (style.css :root), same as registry.css/
   settings.css do for their own pages. This file does NOT fork vendor/tabulator/*.min.{js,css}. */

[hidden] { display: none !important; }

.reservations-shell {
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--space-5);
  overflow-x: hidden; /* the .reservations-table-wrap below is the ONLY horizontal scroller */
}

.reservations-auth-gate {
  max-width: 480px;
  margin: var(--space-6) auto;
  text-align: center;
}
.reservations-auth-gate p { margin-bottom: var(--space-4); }

.reservations-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.reservations-header__actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.reservations-header__actions #reservationsPropertySelect { min-width: 220px; margin-bottom: 0; }

/* V1 tabs — same look as settings.css's .settings-tab, duplicated here (page-specific CSS
   overlay, no shared tab component to import on this build). */
.reservations-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.reservations-tab {
  font: inherit;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
}
.reservations-tab:hover { color: var(--color-text-primary); }
.reservations-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.reservations-tab:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }

/* V1.1 filter bar */
.reservations-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.reservations-search { flex: 1 1 280px; min-width: 240px; }
.reservations-search .field-input { margin-bottom: 0; }
.reservations-status-filter { flex: 0 1 220px; min-width: 180px; }
.reservations-status-filter .field-input { margin-bottom: 0; }

.reservations-pagesize {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.reservations-pagesize .field-label { margin-bottom: 0; }
.reservations-pagesize .field-input { width: auto; margin-bottom: 0; }
/* Export CSV sits at the end of the page-size row, margin-left:auto pushes it to the right on wide
   screens without a separate toolbar row (decision 10). */
#reservationsHistoryExportBtn { margin-left: auto; }

/* Table wrapper scrolls horizontally on narrow screens; the page itself never scrolls sideways
   (decision 10). The shell's own overflow-x is clipped below (.reservations-shell). */
.reservations-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

/* Skeleton loading state */
.reservations-skeleton { margin-bottom: var(--space-4); }
.reservations-skeleton__row {
  height: 38px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-booked-bg) 37%, var(--color-surface-alt) 63%);
  background-size: 400% 100%;
  animation: reservations-skeleton-pulse 1.4s ease infinite;
}
@keyframes reservations-skeleton-pulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* V2.1 status pill — three states (decisions 1/9). Reason for an awaiting row lives in the pill's
   own `title`, never a second line, hence white-space: nowrap (not the old `normal`) below. */
.status-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.status-pill--validated {
  background: var(--color-open-bg);
  color: #FFFFFF;
}
/* Amber warning token (--color-dropin-bg, same one the row highlight below reuses) — this palette
   has no separate "warning" token, so this reuses the one existing amber (style.css :root),
   consistent with row.is-awaiting's background below. */
.status-pill--awaiting {
  background: var(--color-dropin-bg);
  color: var(--color-text-primary);
}
/* Grey "Not reviewed" (decision 1 — legacy/backfill rows the review hook never judged). */
.status-pill--unreviewed {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* V2 Name-cell initials fallback (decision 2) — lighter than a real name, so an admin can tell at
   a glance which rows are "we only know the initials" vs. a recorded name. */
.v-name-initials {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* V2/V3 Actions cell (decision 6/10) — Validate + Decline side by side, gap 8px; the inline
   Decline confirm ("Decline? [Yes] [No]" then the reason) reuses the same flex row instead of a
   browser prompt or a page-level modal. */
.v-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.v-actions__prompt { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; }
.v-actions--reason { flex-wrap: wrap; }
.v-decline-reason { margin-bottom: 0; font-size: var(--font-size-xs); min-width: 90px; flex: 1 1 90px; }
.reservations-action-btn { margin-left: 0; font-size: var(--font-size-xs); padding: var(--space-1) var(--space-2); min-height: 30px; }
.reservations-action-btn--decline { color: var(--color-danger); border-color: var(--color-danger); }

/* ---- Tabulator theme override — DesignKit-v1 tokens on top of the vendored simple theme,
   same pattern as registry.css ---- */
#reservationsUpcomingTable.tabulator,
#reservationsHistoryTable.tabulator {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}
#reservationsUpcomingTable .tabulator-header,
#reservationsHistoryTable .tabulator-header {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
#reservationsUpcomingTable .tabulator-col,
#reservationsHistoryTable .tabulator-col {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}
#reservationsUpcomingTable .tabulator-row,
#reservationsHistoryTable .tabulator-row {
  background: var(--color-bg);
}
/* One line per row (decision 6) — every cell truncates with an ellipsis instead of wrapping;
   formatters set `title` to the full value (reservations.js withTitle()) so hover still shows it. */
#reservationsUpcomingTable .tabulator-cell,
#reservationsHistoryTable .tabulator-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#reservationsUpcomingTable .tabulator-row.tabulator-row-even,
#reservationsHistoryTable .tabulator-row.tabulator-row-even {
  background: var(--color-surface-alt);
}
/* V2 awaiting-row highlight — amber background from the DesignKit warning token
   (--color-dropin-bg, style.css :root; this palette's one existing amber). */
#reservationsUpcomingTable .tabulator-row.is-awaiting {
  background: color-mix(in srgb, var(--color-dropin-bg) 22%, var(--color-bg));
}
#reservationsUpcomingTable .tabulator-row:hover,
#reservationsHistoryTable .tabulator-row:hover {
  background: var(--color-booked-bg);
}
#reservationsUpcomingTable .tabulator-footer,
#reservationsHistoryTable .tabulator-footer {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
#reservationsHistoryTable .tabulator-page.active {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}
#reservationsUpcomingTable .tabulator-placeholder,
#reservationsHistoryTable .tabulator-placeholder {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Toast (no undo on this page — decline/validate are both server-round-tripped already-committed
   actions, not client-side reversible states like registry's deactivate) */
.reservations-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-text-primary);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  font-size: var(--font-size-sm);
  z-index: 20;
}