/* unified-listings.css — Gantt grid for cross-listing bookings view */

/* Grid */
.unified-grid {
  display: grid;
  grid-template-columns: minmax(160px, 12rem) 1fr;
  overflow-x: auto;
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 12px;
  overflow: hidden;
}
.unified-grid-header, .unified-grid-body, .unified-row { display: contents; }
.unified-day-headers, .unified-day-months, .unified-row-cells {
  display: grid;
  grid-template-columns: repeat(var(--col-count, 30), minmax(2.25rem, 1fr));
}
.unified-month-band {
  font-family: var(--booking-font);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--charcoal);
  padding: 0.4rem 0.5rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: #fafbfc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unified-day-header {
  padding: 0.4rem 0.2rem;
  font-size: 0.7rem;
  text-align: center;
  border-right: 1px solid var(--color-border, #f0f0f0);
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  color: var(--color-text-muted, #888);
  font-variant-numeric: tabular-nums;
  background: #fafbfc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unified-day-header--today { font-weight: 700; color: var(--color-accent, #1a3c4a); background: var(--color-accent-bg, #e0ecef); }
.unified-day-header--weekend { background: var(--ice, #e8eff5); color: var(--slate, #2d3748); }
.unified-row-label {
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  border-right: 1px solid var(--color-border, #e5e5e5);
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fff;
  min-width: 0;
}
.unified-row-label__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.unified-row-label:hover { background: var(--color-hover, #f5f5f5); color: var(--color-accent, #1a3c4a); }
.unified-row-label__arrow { opacity: 0; transition: opacity 0.12s; color: var(--color-accent, #1a3c4a); flex: 0 0 auto; }
.unified-row-label:hover .unified-row-label__arrow { opacity: 1; }
.unified-row-label-spacer {
  border-right: 1px solid var(--color-border, #e5e5e5);
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  background: #fafbfc;
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.unified-cell {
  border-right: 1px solid #f3f3f3;
  border-bottom: 1px solid var(--color-border, #f5f5f5);
  min-height: 3.25rem;
  cursor: pointer;
  position: relative;
}
.unified-cell--weekend { background: var(--ice, #e8eff5); }
/* Hover affordance only on cells that are actually free to book on. The
   .unified-cell--occupied flag is added by paintBookings for the days that
   fall inside an existing booking's [checkIn, checkOut) range — clicking
   one of those opens the booking instead of the create form, so the [+]
   would be misleading. */
.unified-cell:not(.unified-cell--occupied):hover {
  background: #eef6f8;
  outline: 1px dashed var(--color-accent, #1a3c4a);
  outline-offset: -1px;
}
.unified-cell:not(.unified-cell--occupied):hover::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-accent, #1a3c4a);
  font-size: 1rem;
  font-weight: 300;
  pointer-events: none;
}

/* Booking bars — use the shared --booking-* tokens so the Gantt view speaks
   the same visual language as the booklet calendar integration.
   Positioned absolute so the bar overlays the cells (one row per listing)
   without participating in grid sizing. grid-row/grid-column still place
   it inside the correct grid area; left/right + top centre it within. */
.unified-row-cells { position: relative; }
.unified-booking-bar {
  position: absolute;
  grid-row: 1;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1.85rem;
  background: var(--booking-color);
  color: var(--booking-color-text);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.5rem;
  font-family: var(--booking-font);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: 2px solid var(--booking-color);
  border-radius: var(--booking-radius);
  z-index: 1;
}
.unified-booking-bar:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.unified-booking-bar__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  flex: 0 0 auto;
}
/* Half-cell shift for the check-in afternoon / check-out morning. The
   percentage is relative to the bar's full grid area, so divide by the
   bar's span (set inline as --span) to get half of a single cell. */
.unified-booking-bar--starts-here { left: calc(50% / var(--span, 1)); }
.unified-booking-bar--ends-here   { right: calc(50% / var(--span, 1)); }
.unified-booking-bar--past        { opacity: var(--booking-past-opacity); }

/* Inline detail row */
.unified-row-detail {
  grid-column: 1 / -1;
  padding: 0.85rem 1.25rem;
  background: var(--color-accent-soft, #f3f7f8);
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  font-size: 0.85rem;
}
.unified-row-detail__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: flex-start;
}
.unified-row-detail__inner a { color: var(--color-accent, #1a3c4a); font-weight: 500; }
.unified-row-detail__field { display: inline-flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.unified-row-detail__label {
  font-size: 0.65rem;
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.unified-row-detail__value { font-size: 0.85rem; color: var(--charcoal); white-space: nowrap; }
.unified-row-detail__open { margin-left: auto; align-self: center; }

/* Navigation toolbar */
.unified-toolbar { display: flex; justify-content: space-between; padding: 0.75rem 1rem; gap: 1rem; }
.unified-nav {
  background: #fff;
  border: 1px solid var(--color-border-strong, #ddd);
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
}
.unified-nav:hover { background: var(--color-hover, #f5f5f5); color: var(--color-accent, #1a3c4a); border-color: var(--color-accent, #1a3c4a); }

/* Loading / error states */
.unified-loading, .unified-error { text-align: center; padding: 2rem 1rem; color: var(--color-text-muted, #888); }
.unified-error { color: var(--color-warning, #b45309); }

/* Full-width override: when unified mode is active, escape the global
   `main { max-width: 900px }` constraint so the grid can use the full
   viewport. Selector targets the admin <main> via the body modifier. */
body.unified-active main {
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Mobile */
@media (max-width: 768px) {
  .unified-grid { grid-template-columns: minmax(120px, 30vw) 1fr; }
  .unified-day-headers, .unified-row-cells {
    grid-template-columns: repeat(var(--col-count, 30), 2.5rem);
  }
  body.unified-active main { padding-left: 0.5rem; padding-right: 0.5rem; }
}