/* ══ «الطاولات» — the hall designer and the live floor (2026-09-24) ══════════
   Scoped to `.dh`. Every colour is a token with the host's own token as its
   source (POS: --ink/--surface/--line/--ok/--bad; the console: --text/--card/
   --border/--accent), so the drawing follows the host's light and dark. */
.dh {
  --dh-ink: var(--ink, var(--text, #1E1729));
  --dh-muted: var(--muted, #6B6478);
  --dh-surface: var(--surface, var(--card, #FFFFFF));
  --dh-surface-2: var(--surface-2, #F6F4FA);
  --dh-line: var(--line, var(--border, #E4E0EC));
  --dh-accent: var(--accent, #5B2C91);
  --dh-ok: var(--ok, #1F7A4D);
  --dh-bad: var(--bad, var(--danger, #B4433A));
  --dh-warn: #B07C2B;
  --dh-floor: color-mix(in srgb, var(--dh-accent) 7%, var(--dh-surface));
  --dh-wall: var(--dh-ink);
  --dh-table: color-mix(in srgb, var(--dh-accent) 14%, var(--dh-surface));
  --dh-table-edge: var(--dh-accent);
  --dh-chair: color-mix(in srgb, var(--dh-ink) 30%, var(--dh-surface));
  color: var(--dh-ink);
  display: grid;
  gap: 12px;
  min-width: 0;
}
.dh * { box-sizing: border-box; }
.dh .num, .dh-legend b { font-variant-numeric: tabular-nums; }

.dh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.dh-halls { display: flex; flex-wrap: wrap; gap: 6px; }
.dh-hall-tab, .dh-hall-add {
  min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--dh-line);
  background: var(--dh-surface); color: var(--dh-ink); font: inherit; cursor: pointer;
}
.dh-hall-tab.on { background: var(--dh-accent); border-color: var(--dh-accent); color: #fff; font-weight: 600; }
.dh-hall-add { border-style: dashed; color: var(--dh-accent); }
.dh-warn { margin: 0; color: var(--dh-warn); font-size: 13px; }

.dh-main { display: grid; grid-template-columns: 240px minmax(0, 1fr) 260px; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .dh-main { grid-template-columns: minmax(0, 1fr); } }
.dh-tools, .dh-side {
  background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 14px; padding: 12px;
  display: grid; gap: 10px; align-content: start;
}
.dh-side h4 { margin: 0; font-size: 15px; }
.dh-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--dh-muted); }
.dh-field input, .dh-field select {
  min-height: 40px; padding: 6px 10px; border: 1px solid var(--dh-line); border-radius: 10px;
  background: var(--dh-surface); color: var(--dh-ink); font: inherit; font-size: 14px; width: 100%;
}
.dh-field.sm input, .dh-field.sm select { min-width: 0; }
.dh-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-row > .dh-field { flex: 1 1 90px; }
.dh-grid-size { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dh-modes { display: grid; gap: 6px; }
.dh-mode {
  min-height: 42px; border-radius: 10px; border: 1px solid var(--dh-line); background: var(--dh-surface-2);
  color: var(--dh-ink); font: inherit; cursor: pointer; text-align: start; padding: 6px 12px;
}
.dh-mode.on { border-color: var(--dh-accent); background: color-mix(in srgb, var(--dh-accent) 12%, var(--dh-surface)); font-weight: 600; }
.dh-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dh-preset {
  display: grid; justify-items: center; gap: 2px; padding: 6px; min-height: 64px; border-radius: 10px;
  border: 1px solid var(--dh-line); background: var(--dh-surface); color: var(--dh-ink); font: inherit;
  font-size: 12px; cursor: pointer;
}
.dh-preset.on { border-color: var(--dh-accent); box-shadow: inset 0 0 0 1px var(--dh-accent); }
.dh-preset svg { width: 54px; height: 36px; }
.dh-presets .dh-hint { grid-column: 1 / -1; }
.dh-hint { margin: 0; font-size: 12.5px; color: var(--dh-muted); line-height: 1.5; }
.dh-wallbar { display: grid; gap: 8px; }

.dh-btn {
  min-height: 42px; padding: 6px 14px; border-radius: 10px; border: 1px solid var(--dh-accent);
  background: var(--dh-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.dh-btn.ghost { background: transparent; color: var(--dh-accent); border-color: var(--dh-line); font-weight: 500; }
.dh-btn.danger { color: var(--dh-bad); }
.dh-btn:disabled { opacity: .45; cursor: not-allowed; }
.dh-btn:focus-visible, .dh-mode:focus-visible, .dh-hall-tab:focus-visible, .dh-preset:focus-visible {
  outline: 2px solid var(--dh-accent); outline-offset: 2px;
}

.dh-stage { display: grid; gap: 8px; min-width: 0; }
.dh-canvas-wrap {
  background: var(--dh-surface); border: 1px solid var(--dh-line); border-radius: 14px; padding: 8px;
  overflow: auto; min-height: 280px;
}
.dh-svg { width: 100%; height: auto; max-height: 72vh; display: block; touch-action: none; user-select: none; }
.dh-svg.walls { cursor: crosshair; }
.dh-svg.adding { cursor: copy; }
.dh-grid circle { fill: color-mix(in srgb, var(--dh-ink) 22%, transparent); }
.dh-floor { fill: var(--dh-floor); }
.dh-wall { fill: none; stroke: var(--dh-wall); stroke-width: 0.16; stroke-linejoin: round; stroke-linecap: round; }
.dh-wall-open { stroke-dasharray: 0.3 0.2; stroke: var(--dh-accent); }
.dh-rubber { stroke: var(--dh-accent); stroke-width: 0.08; stroke-dasharray: 0.2 0.15; }
.dh-vertex { fill: var(--dh-accent); }
.dh-vertex.first { fill: var(--dh-surface); stroke: var(--dh-accent); stroke-width: 0.1; }

.dh-table { cursor: grab; }
.dh-table .dh-top { fill: var(--dh-table); stroke: var(--dh-table-edge); stroke-width: 0.08; }
.dh-table .dh-chairs circle { fill: var(--dh-chair); }
.dh-table .dh-label { fill: var(--dh-ink); font-weight: 700; pointer-events: none; }
.dh-table.sel .dh-top { stroke-width: 0.16; fill: color-mix(in srgb, var(--dh-accent) 28%, var(--dh-surface)); }
.dh-table.bad .dh-top { stroke: var(--dh-bad); fill: color-mix(in srgb, var(--dh-bad) 16%, var(--dh-surface)); }
.dh-table.off { opacity: .45; }
.dh-table.ghost { opacity: .5; pointer-events: none; }
.dh-table:focus-visible .dh-top { stroke-width: 0.2; }

.dh-status { font-size: 13.5px; min-height: 20px; }
.dh-ok { color: var(--dh-ok); }
.dh-bad { color: var(--dh-bad); font-weight: 600; }
.dh-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dh-spacer { flex: 1 1 auto; }
.dh-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }

.dh-qr { display: grid; gap: 8px; justify-items: start; border-top: 1px solid var(--dh-line); padding-top: 10px; }
.dh-qr-img { width: 168px; height: 168px; display: grid; place-items: center; background: #fff; border-radius: 10px; }
.dh-qr-img img { width: 100%; height: 100%; image-rendering: pixelated; }
.dh-qr-link { font-size: 12px; color: var(--dh-accent); overflow-wrap: anywhere; }

.dh-empty, .dh-loading, .dh-error {
  padding: 28px; text-align: center; border: 1px dashed var(--dh-line); border-radius: 14px;
  background: var(--dh-surface); display: grid; gap: 10px; justify-items: center;
}
.dh-empty h3 { margin: 0; }
.dh-empty p { margin: 0; color: var(--dh-muted); max-width: 52ch; line-height: 1.6; }
.dh-error { color: var(--dh-bad); }

/* ── the live floor ─────────────────────────────────────────────────────── */
.dh-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--dh-muted); }
.dh-leg { display: inline-flex; align-items: center; gap: 5px; }
.dh-leg i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid var(--dh-line); }
.dh-leg.free i { background: var(--dh-surface); }
.dh-leg.open i { background: color-mix(in srgb, var(--dh-accent) 55%, var(--dh-surface)); }
.dh-leg.ordering i { background: var(--dh-warn); }
.dh-leg.off i { background: color-mix(in srgb, var(--dh-ink) 12%, var(--dh-surface)); }
.dh-svg.floor .dh-table { cursor: pointer; }
.dh-table.st-free .dh-top { fill: var(--dh-surface); stroke: var(--dh-line); }
.dh-table.st-open .dh-top { fill: color-mix(in srgb, var(--dh-accent) 55%, var(--dh-surface)); }
.dh-table.st-open .dh-label { fill: #fff; }
.dh-table.st-ordering .dh-top { fill: var(--dh-warn); stroke: var(--dh-warn); }
.dh-table.st-ordering .dh-label { fill: #fff; }
.dh-table.st-off { opacity: .4; }
.dh-bill { fill: var(--dh-ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .dh-table.st-ordering .dh-top { animation: dh-pulse 1.6s ease-in-out infinite; }
}
@keyframes dh-pulse { 50% { opacity: .55; } }

/* «نداء الموظف» (2026-09-24) — a calling table on the live floor */
.dh-table.calling .dh-top { stroke-width: 0.16; }
.dh-table.call-help .dh-top { stroke: var(--dh-accent); }
.dh-table.call-bill .dh-top { stroke: #c89b3c; }
.dh-table.calling { animation: dh-call 1.2s ease-in-out infinite; }
@keyframes dh-call { 50% { opacity: .55; } }
.dh-call { fill: var(--dh-accent); font-weight: 700; }
.dh-table.call-bill .dh-call { fill: #9a7424; }
@media (prefers-reduced-motion: reduce) { .dh-table.calling { animation: none; } }

/* «شاشة الصالة» — pairing the floor screen */
.dh-screens { display: grid; gap: 12px; max-width: 640px; }
/* «نطاق الطاولات» (2026-09-24) — the same grammar as the screens panel. */
.dh-fence { display: grid; gap: 12px; max-width: 640px; }
.dh-fence h3 { margin: 0; font-size: 17px; }
.dh-fence h4 { margin: 8px 0 0; font-size: 15px; }
.dh-fence p { margin: 0; line-height: 1.55; }
.dh-count { min-width: 32px; height: 28px; padding: 0 8px; border-radius: 14px; display: inline-grid;
  place-items: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--dh-soft, rgba(0, 0, 0, .06)); }
.dh-screens h3 { margin: 0; font-size: 17px; }
.dh-screens h4 { margin: 8px 0 0; font-size: 15px; }
.dh-screen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dh-screen-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--dh-line); border-radius: 12px; background: var(--dh-surface); }
.dh-screen-list li div { display: grid; gap: 2px; }
.dh-err { margin: 0; color: #b4433a; font-size: 13px; min-height: 1em; }