/* ===== Banquet x Session grid — the core recurring visual (date-wise day panel,
   session-wise view, banquet-wise "all" grid). Column count/widths are set inline
   per page via style="grid-template-columns: ...". ===== */

.bxs-grid {
  display: grid;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

/* Row wrapper: on desktop its children become direct grid items (so the fixed
   column template on .bxs-grid applies to them); on mobile it becomes a stacked card. */
.bxs-grid-row { display: contents; }

.bxs-corner, .bxs-col-header, .bxs-row-label, .bxs-cell {
  padding: .65rem .6rem;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.bxs-corner, .bxs-col-header {
  background: var(--color-bg);
  font-weight: 600;
  font-size: .8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  justify-content: center;
  text-align: center;
}

.bxs-row-label {
  background: var(--color-bg);
  font-weight: 600;
  font-size: .85rem;
}

.bxs-cell {
  font-size: .8rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  cursor: pointer;
  transition: background .15s ease;
}
.bxs-cell:hover { background: var(--color-bg); }
.bxs-cell.is-empty {
  color: color-mix(in srgb, var(--status-open) 70%, var(--color-text));
  background: color-mix(in srgb, var(--status-open) 15%, transparent);
  justify-content: center; align-items: center;
}
.bxs-cell.is-empty:hover { background: color-mix(in srgb, var(--status-open) 28%, transparent); }
.bxs-cell.has-conflict { outline: 2px solid var(--status-conflict); outline-offset: -2px; }

.bxs-cell-status {
  display: inline-flex; align-items: center; gap: .3rem; font-weight: 600;
}
.bxs-cell-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--dot-color, #999); flex-shrink: 0;
}
.bxs-cell-client { color: var(--color-text-muted); font-size: .76rem; font-weight: 700; }

/* Wraps multiple bookings in one cell (e.g. "All Sessions" view, where a hall can
   legitimately have separate non-overlapping bookings on the same date). */
.bxs-cell-stack {
  padding: .3rem;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.bxs-cell-stack .bxs-cell {
  padding: .35rem .5rem;
  border-radius: 4px;
  min-height: auto;
  border-bottom: none;
  border-right: none;
}

/* Status-driven left accent bar for quick scanning */
.bxs-cell[data-status="enquiry"] { border-left: 4px solid var(--status-enquiry); }
.bxs-cell[data-status="tentative"] { border-left: 4px solid var(--status-tentative); }
.bxs-cell[data-status="confirmed"] { border-left: 4px solid var(--status-confirmed); }
.bxs-cell[data-status="cancelled"] { border-left: 4px solid var(--status-cancelled); }
.bxs-cell[data-status="completed"] { border-left: 4px solid var(--status-completed); }

/* ===== Legend ===== */
.status-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin: .75rem 0; font-size: .8rem; }
.status-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.status-legend .dot { width: 10px; height: 10px; border-radius: 50%; }

/* ===== Mobile: collapse grid into stacked cards ===== */
@media (max-width: 768px) {
  .bxs-grid {
    display: block;
    border: none;
  }
  .bxs-corner, .bxs-col-header { display: none; }
  .bxs-grid-row {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    overflow: hidden;
  }
  .bxs-row-label {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .bxs-cell {
    border-right: none;
    width: 100%;
  }
  .bxs-cell::before {
    content: attr(data-col-label);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: .72rem;
    text-transform: uppercase;
  }
  .bxs-cell-stack { border-right: none; }
}