/* ============================================================================
   Book View - Excel-like Calendar Grid for Reservations
   ============================================================================ */

/* Page header */
.book-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.book-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.book-quick-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.book-quick-links .btn {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
}

/* Filter bar */
.book-filters {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-color);
}

.book-filters-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

.book-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.book-filter-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--text-secondary);
}

.book-filter-group input[type="date"],
.book-filter-group select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.875rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  min-height: 40px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.book-filter-group input[type="date"]:focus,
.book-filter-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.book-nav-buttons {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.book-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}

.book-nav-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.book-nav-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.book-nav-btn.primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: white;
}

/* Room type card */
.book-room-type {
  background: var(--bg-surface);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.book-room-type-header {
  padding: 0.875rem 1rem;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.book-room-type-header h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.book-room-type-header .bed-count {
  font-size: 0.75rem;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Cross-brand ghost row: another brand/type's booking derived onto a shared room */
.cross-brand-row .bed-cell { color: #98a2b3; }
.reservation-cell.cross-brand-ghost {
  background: repeating-linear-gradient(45deg, #c7ccd4, #c7ccd4 5px, #b9bfc9 5px, #b9bfc9 10px) !important;
}
.reservation-cell.cross-brand-ghost .cell-content {
  color: #3a4150;
  font-style: italic;
  font-size: 0.75rem;
}

/* Cross-brand OVERBOOKING: a reservation the engine could not fit into any free
   room. Shown on every type that sells the rooms it competes for, so the
   collision is visible in both brands rather than vanishing from one of them. */
.reservation-cell.cross-brand-overbooked {
  background: repeating-linear-gradient(45deg, #fecaca, #fecaca 5px, #fca5a5 5px, #fca5a5 10px) !important;
  box-shadow: inset 0 0 0 1px #ef4444;
}
.reservation-cell.cross-brand-overbooked .cell-content {
  color: #7f1d1d;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Collapsible per-brand group (hostel / boutique) */
.book-brand-group {
  margin-bottom: 1.25rem;
}
.book-brand-summary {
  list-style: none;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.book-brand-summary::-webkit-details-marker { display: none; }
.book-brand-caret { transition: transform 0.15s ease; }
.book-brand-group[open] > .book-brand-summary .book-brand-caret { transform: rotate(180deg); }
.book-brand-body { padding-top: 0.75rem; }

/* Grid container */
.book-grid-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.book-grid-stack {
  --book-bed-col-width: 56px;
  --book-current-col-width: 132px;
  --book-date-col-width: 96px;
  width: max-content;
  min-width: 100%;
}

/* The calendar grid table */
.book-grid {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8125rem;
}

.book-grid-header-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-surface);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.book-grid-header {
  margin-bottom: 0.75rem;
}

/* Header cells */
.book-grid thead th {
  background: var(--bg-hover);
  border-bottom: 2px solid var(--border-color);
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.book-bed-col-group {
  width: var(--book-bed-col-width);
}

.book-current-col-group {
  width: var(--book-current-col-width);
}

.book-date-col-group {
  width: var(--book-date-col-width);
}

.book-grid .bed-col {
  background: var(--bg-hover);
  position: sticky;
  left: 0;
  z-index: 11;
  border-right: 2px solid var(--border-color);
  text-align: center;
}

.book-grid .date-col {
  min-width: var(--book-date-col-width);
  width: var(--book-date-col-width);
}

.book-grid .current-col {
  min-width: var(--book-current-col-width);
  width: var(--book-current-col-width);
}

/* Date header content */
.date-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.book-availability-summary {
  margin-top: 0.5rem;
  padding: 0.35rem 0.3rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.7);
  line-height: 1.1;
}

.book-availability-summary.is-editable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.book-availability-summary.is-editable:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}

.book-availability-summary.avail-high {
  background: rgba(22, 163, 74, 0.18);
}

.book-availability-summary.avail-medium {
  background: rgba(217, 119, 6, 0.18);
}

.book-availability-summary.avail-low {
  background: rgba(220, 38, 38, 0.14);
}

.book-availability-summary.potential-overbook {
  background: #1f2937;
  color: #fca5a5;
}

.book-availability-beds {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.book-availability-summary.potential-overbook .book-availability-beds {
  color: #fca5a5;
}

.book-availability-rate {
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.book-availability-summary.potential-overbook .book-availability-rate {
  color: #fecaca;
}

.date-day-name {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.date-day-number {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.date-month {
  font-size: 0.625rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Today column highlight */
.book-grid .date-col.today {
  background: rgba(37, 99, 235, 0.1);
}

.book-grid .date-col.today .date-day-number {
  color: var(--primary);
}

.book-grid td.today-col {
  background: rgba(37, 99, 235, 0.05);
}

/* Body cells */
.book-grid tbody td {
  border: 1px solid var(--border-light);
  padding: 0;
  vertical-align: middle;
  height: 36px;
  box-sizing: border-box;
}

.book-grid tbody tr:hover td:not(.bed-cell) {
  background-color: rgba(37, 99, 235, 0.03);
}

.book-grid .bed-cell {
  background: var(--bg-hover);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.75rem;
  position: sticky;
  left: 0;
  z-index: 5;
  border-right: 2px solid var(--border-color);
}

.book-grid .availability-label-cell {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.book-grid .current-state-spacer {
  background: var(--bg-surface);
}

.book-grid .current-state-cell {
  overflow: hidden;
  max-width: 0;
}

.book-grid .current-state-cell.connects-to-today {
  border-right-color: transparent;
}

.book-grid .current-state-cell .cell-content {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  height: 100%;
  line-height: 1.8;
  min-width: 0;
}

.book-grid .join-from-current {
  border-left-color: transparent;
}


.book-grid .availability-cell {
  padding: 0.25rem;
  vertical-align: top;
}

.book-grid .availability-cell .book-availability-summary {
  margin-top: 0;
}

/* Empty cell */
.book-grid .empty-cell {
  background: var(--bg-surface);
}

/* Reservation cells */
.book-grid .reservation-cell {
  position: relative;
  overflow: hidden;
  max-width: 0;
}

.book-grid .reservation-cell .cell-content {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  height: 100%;
  line-height: 1.8;
  min-width: 0;
}

.book-grid .reservation-cell .cell-content:hover {
  text-decoration: none;
}

/* Status colors */
.book-grid .status-confirmed {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.book-grid .status-confirmed-by-guest {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: white;
}

.book-grid .status-not-confirmed {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.book-grid .status-waiting {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.book-grid .status-arrived {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.book-grid .status-cancelled {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.book-grid .status-other {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
}

.book-grid .guest-in-bed {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

/* Overstayed guests - same color as normal guest-in-bed, badge marks the difference */
.book-grid .guest-overstayed {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

.book-grid .overstay-badge {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  padding: 1px 3px;
  letter-spacing: 0.02em;
}

/* Arrival indicator (first day of reservation shows small arrow) */
.book-grid .reservation-cell.arrival::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.5);
}

/* Cleaning status badge (dirty / being cleaned) */
.book-grid .cleaning-badge {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 0.7rem;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}

.book-grid .current-state-cell {
  position: relative;
}

/* Overbooked section */
.book-grid .overbooked-header td {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.book-grid .overbooked-row .bed-cell {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.book-grid .overbooked-row .reservation-cell {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

/* Waiting list section */
.book-grid .waiting-header td {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.book-grid .waiting-row .bed-cell {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.book-grid .waiting-row .reservation-cell {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .book-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .book-header h1 {
    font-size: 1.25rem;
  }

  .book-quick-links {
    width: 100%;
  }

  .book-quick-links .btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .book-filters {
    padding: 1rem;
  }

  .book-filters-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .book-filter-group {
    width: 100%;
  }

  .book-filter-group input[type="date"],
  .book-filter-group select {
    width: 100%;
    min-height: 44px;
  }

  .book-nav-buttons {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
  }

  .book-nav-btn {
    min-height: 44px;
  }

  .book-room-type {
    border-radius: 8px;
  }

  .book-grid .date-col {
    min-width: var(--book-date-col-width);
    width: var(--book-date-col-width);
  }

  .book-grid-stack {
    --book-bed-col-width: 40px;
    --book-current-col-width: 96px;
    --book-date-col-width: 72px;
  }

  .book-availability-summary {
    margin-top: 0.35rem;
    padding: 0.25rem 0.2rem;
    border-radius: 6px;
  }

  .book-availability-beds {
    font-size: 0.72rem;
  }

  .book-availability-rate {
    font-size: 0.625rem;
  }

  .book-grid tbody td {
    height: 32px;
  }

  .book-grid .reservation-cell .cell-content {
    font-size: 0.6875rem;
    padding: 0.125rem 0.25rem;
  }

  .date-day-number {
    font-size: 1rem;
  }
}

/* Loading state */
.book-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.book-loading::after {
  content: '';
  width: 24px;
  height: 24px;
  margin-left: 0.5rem;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty state */
.book-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

/* Legend */
.book-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  margin-top: 1rem;
  background: var(--bg-surface);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.book-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.book-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.book-legend-color.confirmed { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.book-legend-color.not-confirmed { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.book-legend-color.arrived { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.book-legend-color.guest { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.book-legend-color.overbooked { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

/* Traveler flag dots in the current-state cells (FlagsHelper#traveler_flag_dots).
   A book cell is only a few characters wide, so a flag here is a colour, not a
   word — the tooltip carries the name. Only flag types with show_on_book render,
   which is off by default. */
.flag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
  flex: none;
  /* Cells are coloured by reservation status — a bare dot disappears whenever
     the flag colour is close to the cell's. The white ring keeps it readable on
     any of them. */
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}