/* ============================================================
   Seating designer — hall layout, round tables, chairs.

   Occupancy colour rules (from the brief):
     seat  : empty = green, occupied = red
     table : empty = green, partly = yellow, full = red
   ============================================================ */

.hall {
  background:
    linear-gradient(var(--surface-sunken) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, var(--surface-sunken) 1px, transparent 1px) 0 0 / 26px 100%,
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

/* screen / stage */
.screen {
  margin: 0 auto 30px;
  max-width: 62%;
  min-width: 200px;
  height: 34px;
  border-radius: 5px 5px 22px 22px;
  background: linear-gradient(180deg, var(--text) 0%, #4a4150 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 12px 26px -10px rgba(30, 23, 32, .55);
}

.tables-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
  align-items: flex-start;
  min-height: 120px;
}

/* ---------- table ---------- */
.table-unit {
  --ring: 0;
  position: relative;
  width: var(--unit, 168px);
  height: var(--unit, 168px);
  flex: none;
}

.table-top {
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px solid;
  font-weight: 800;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  text-align: center;
  line-height: 1.15;
}
.table-label { font-size: .95rem; }
/* "8/8" must not get bidi-flipped in Arabic — see .ratio in theme.css */
.table-count {
  font-size: .62rem; font-weight: 700; opacity: .8;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* table occupancy */
.t-empty   { background: var(--occ-empty-tint);   border-color: var(--occ-empty);   color: var(--occ-empty); }
.t-partial { background: var(--occ-partial-tint); border-color: var(--occ-partial); color: var(--occ-partial); }
.t-full    { background: var(--occ-full-tint);    border-color: var(--occ-full);    color: var(--occ-full); }

/* ---------- chair ---------- */
.chair {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;   /* centre on the computed point */
  border-radius: 50%;
  border: 2px solid;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .58rem;
  font-weight: 800;
  padding: 0;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  z-index: 2;
}
.chair:hover { transform: scale(1.18); box-shadow: var(--shadow-md); z-index: 5; }
.chair:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.c-empty {
  background: var(--occ-empty-tint);
  border-color: var(--occ-empty);
  color: var(--occ-empty);
}
.c-occupied {
  background: var(--occ-full);
  border-color: var(--occ-full);
  color: #fff;
}

/* drag states */
.chair.drag-over {
  transform: scale(1.35);
  box-shadow: 0 0 0 4px var(--brand-tint-strong);
  border-color: var(--brand);
  z-index: 6;
}
.chair.dragging { opacity: .4; }

/* ---------- unseated tray ---------- */
.tray {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.tray-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.tray-head h3 { font-size: .92rem; }
.tray-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 230px; overflow-y: auto;
}
.person-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600;
  cursor: grab;
  user-select: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.person-chip:hover { border-color: var(--brand); background: var(--brand-tint); }
.person-chip:active { cursor: grabbing; }
.person-chip.dragging { opacity: .4; }
.person-chip .pa {
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-tint-strong); color: var(--brand);
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 800; flex: none;
}
.tray.drag-over {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* ---------- legend ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.legend-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid; flex: none; }
.ld-empty   { background: var(--occ-empty-tint);   border-color: var(--occ-empty); }
.ld-partial { background: var(--occ-partial-tint); border-color: var(--occ-partial); }
.ld-full    { background: var(--occ-full-tint);    border-color: var(--occ-full); }
.ld-occupied{ background: var(--occ-full);         border-color: var(--occ-full); }

/* ---------- seating toolbar ---------- */
.seat-config {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 14px;
}
.seat-config .field { width: 140px; }
.seat-config .input { padding-block: 8px; }

.hint-line {
  display: flex; align-items: center; gap: 7px;
  font-size: .76rem; color: var(--text-faint); font-weight: 600;
  margin-top: 10px;
}
.hint-line svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .table-unit { --unit: 140px; }
  .chair { width: 25px; height: 25px; margin: -12.5px 0 0 -12.5px; font-size: .5rem; }
  .hall { padding: 12px; }
}