/* ─── Column layouts (RsvColumnLayout) ──────────────────────────────────── */

.rsv-cols { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.rsv-cols > .rsv-col { flex: var(--rsv-col-grow, 1) 1 0; min-width: 18rem; }

/* ─── Inline detail expand row (Reservations page) ──────────────────────── */

.rsv-detail-expand  { padding: 1rem 1.5rem; }
.rsv-detail-heading { margin: 0 0 0.5rem; }
.rsv-detail-empty   { margin-bottom: 1rem; }
.rsv-detail-table   { margin-bottom: 1rem; }
.rsv-detail-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

/* ─── Action buttons ─────────────────────────────────────────────────────── */

.rsv-btn-refuse { color: #b32d2e; }

/* ─── Form-values key/value table ────────────────────────────────────────── */

/* Depth-based indent: JS sets --rsv-depth on the cell, CSS does the math. */
.rsv-form-key        { padding-left: calc(0.5rem + var(--rsv-depth, 0) * 1.5rem); }
.rsv-form-key--group { font-weight: 600; }
.rsv-form-val--null  { color: #aaa; }