/* Mingle – szerkeszthető, rajzolható asztaltérkép (docs/DESIGN.md, v7 „H3 / S2”). Csak a style.css tokenjei: nincs hex-szín, külső betű vagy kép.
   A vászon arányos (1000 : 700); a --u változó a vászon pixel-szélessége / 1000 (a floor_canvas.js állítja), ezért minden méret skálázódik.
   Használó módban az alaprajz háttere a vászon-réteg (--bg), pontrács nélkül; a fal 4 px-es --wall, a kerítés / terasz-határ --wall2, a felirat 11 px. */

.floor-viewport {
  --u: 0.4px; --zoom: 1;
  position: relative; width: 100%; aspect-ratio: 1000 / 700; overflow: hidden;
  border: 0; border-radius: 0; background: var(--bg);          /* a térkép háttere az oldal háttere: nincs keret, nincs rács */
}
/* álló telefonon a használó mód elforgatott vászna (700 : 1000; view_tables.js) */
.floor-viewport.is-rot { aspect-ratio: 700 / 1000; }
.floor-viewport.is-editing { touch-action: none; user-select: none; border: 1px dashed var(--border-strong); background: var(--surface); }
.floor-stage { position: absolute; inset: 0; transform-origin: 0 0; }
/* finom pontrács (50 egységenként): CSAK a szerkesztőben (az illesztéshez); a használó módban nincs rács */
.floor-grid {
  background-image: radial-gradient(circle, var(--border-strong) 0.9px, transparent 1.4px);
  background-size: 5% 7.1429%; background-position: 2.5% 3.5714%;
}
.floor-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.35; }
.floor-viewport.is-view .floor-grid { display: none; }
/* telefonon a vászon teljes szélességű (a lap oldalsó margóját kihasználja) */
@media (max-width: 640px) {
  .tables-view .floor-viewport.is-view { width: calc(100% + 2 * var(--space-4)); margin-inline: calc(-1 * var(--space-4)); }
}

/* ---- rajz-elemek (a szín csak téma-token: a --c változót a .floor-c-* osztály adja) ---- */
.floor-c-muted { --c: var(--wall); }
.floor-c-text { --c: var(--text); }
.floor-c-accent { --c: var(--accent); }
.floor-c-ok { --c: var(--ok); }
.floor-c-warn { --c: var(--warn); }
.floor-c-err { --c: var(--err); }
.floor-c-info { --c: var(--info); }

.floor-shape { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.floor-shape.is-bg { pointer-events: none; }
/* fal: tömör sáv (az alap a --wall; más színnél a választott token); a többi rajz-elem visszafogott (vonal + halvány tónus) */
.floor-kind-wall { background: var(--c); border-radius: 0; }
.floor-kind-rect { border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); border-radius: 0; }
.floor-kind-rect.floor-c-muted { border-color: var(--wall2); background: transparent; }
.floor-kind-ellipse { border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); border-radius: 50%; }
.floor-kind-door { border: 1.5px dashed var(--c); background: transparent; border-radius: 0; }
.floor-kind-plant { border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 50%; }
.floor-kind-text { color: var(--c); }
.floor-shape-text {
  color: var(--c); font-family: var(--font); font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none;
  font-size: max(11px, calc(var(--u) * var(--bh) * 0.3));
}
.floor-kind-text .floor-shape-text { font-size: max(11px, calc(var(--u) * var(--bh) * 0.5)); }
.floor-kind-text.floor-c-muted .floor-shape-text { color: var(--muted); }
.floor-kind-wall .floor-shape-text { display: none; }
.floor-preview { pointer-events: none; opacity: 0.75; outline: 1px dashed var(--accent); }
/* pult: halvány --surface-3 töltés, színtől függetlenül; a bárszék-pontok a helyiség felé esnek */
.floor-shape.is-counter { overflow: visible; background: var(--surface); border-color: var(--border-strong); }
.floor-shape.is-counter .floor-shape-text { color: var(--muted); letter-spacing: 0.04em; }
.floor-stools { position: absolute; display: flex; justify-content: space-evenly; align-items: center; pointer-events: none; }
.floor-stools.is-top, .floor-stools.is-bottom { left: 0; right: 0; height: calc(var(--u) * 30); flex-direction: row; }
.floor-stools.is-top { bottom: 100%; }
.floor-stools.is-bottom { top: 100%; }
.floor-stools.is-left, .floor-stools.is-right { top: 0; bottom: 0; width: calc(var(--u) * 30); flex-direction: column; }
.floor-stools.is-left { right: 100%; }
.floor-stools.is-right { left: 100%; }
.floor-stool { width: calc(var(--u) * 22); height: calc(var(--u) * 22); min-width: 7px; min-height: 7px; border-radius: 50%; border: 0; background: var(--chair); }

/* ---- asztal-jelölők a vásznon: az ábra (tables.css) elhelyezve; az elem doboza az ábra teljes mérete ---- */
.table-tile.floor-table { position: absolute; min-width: 0; }
/* érintési cél: legalább 44 px, még ha az ábra kisebb is */
button.floor-table::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.floor-table .tf-box { inset: calc(-1 * var(--oy, 0%)) calc(-1 * var(--ox, 0%)); }
.floor-table .table-caption { position: absolute; top: var(--cap-top, 100%); left: 50%; transform: translateX(-50%); }
.floor-viewport { container-type: inline-size; }
.floor-table.is-inactive { opacity: 0.45; }
.floor-table.is-inactive .tf-top { stroke-dasharray: 5 4; stroke: var(--muted); }
/* szerkesztő: az asztalok semleges körvonallal (nincs foglaltság), a jelölt vastag cselekvés-szín keretet kap */
.floor-viewport.is-editing .tf-top, .floor-viewport.is-editing .tf-seat, .floor-viewport.is-editing .tf-back { stroke: var(--border-strong); }
.floor-viewport.is-editing .floor-table.is-selected .tf-top { stroke: var(--accent); stroke-width: 2px; fill: var(--acc-t); }
.floor-viewport.is-editing .floor-table.is-selected .tf-seat, .floor-viewport.is-editing .floor-table.is-selected .tf-back { stroke: color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---- szerkesztő ---- */
.floor-edit { display: flex; flex-direction: column; gap: var(--space-3); }
.floor-edit-top { display: flex; flex-direction: column; gap: var(--space-2); }
.floor-zones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.floor-zones .seg { max-width: 100%; }
.floor-zones .seg-btn, .floor-zone-tab { white-space: nowrap; }
.floor-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.floor-tool-group {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 3px; max-width: 100%;
  scrollbar-width: none;
}
.floor-edit .btn-sm { min-height: 44px; min-width: 44px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.floor-tool-group .btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: transparent; background: transparent; }
.floor-tool-group .btn:hover { background: var(--surface-3); }
.floor-btn-icon { width: 20px; height: 20px; flex: none; }
/* telefonon az ikonos gombokon csak az ikon látszik (a felirat az aria-label-ben és a képernyőolvasónak megmarad) */
@media (max-width: 640px) {
  .floor-edit .btn.has-icon { padding: 0; width: 44px; min-width: 44px; }
  .floor-edit .btn.has-icon .floor-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .floor-tool-group { width: 100%; justify-content: space-between; gap: 0; }
}
.floor-edit [aria-pressed="true"], .floor-tool-group .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.floor-edit button:disabled { opacity: 0.4; }
.floor-edit-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.floor-canvas-host { min-width: 0; }
.floor-viewport[data-tool="select"] .floor-edit-item { cursor: move; }
.floor-viewport:not([data-tool="select"]) { cursor: crosshair; }
.floor-edit-item.is-selected:not(.floor-table) { outline: 2px solid var(--accent); outline-offset: 1px; }
.floor-edit-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.floor-sel { position: absolute; box-sizing: border-box; border: 1.5px solid var(--accent); border-radius: 4px; pointer-events: none; }
/* fogantyú: éles, kicsi pont (a vonal a nagyítástól független); a 44 px-es érintési cél a ::after */
.floor-handle {
  --hs: calc(13px / var(--zoom)); position: absolute; width: var(--hs); height: var(--hs); box-sizing: border-box; pointer-events: auto;
  background: var(--accent); border: calc(2px / var(--zoom)) solid var(--bg); border-radius: 50%; transform: translate(-50%, -50%);
}
.floor-handle::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(44px / var(--zoom)); height: calc(44px / var(--zoom)); transform: translate(-50%, -50%); border-radius: 50%; }
.fh-nw { left: 0; top: 0; cursor: nwse-resize; }
.fh-n { left: 50%; top: 0; cursor: ns-resize; }
.fh-ne { left: 100%; top: 0; cursor: nesw-resize; }
.fh-e { left: 100%; top: 50%; cursor: ew-resize; }
.fh-se { left: 100%; top: 100%; cursor: nwse-resize; }
.fh-s { left: 50%; top: 100%; cursor: ns-resize; }
.fh-sw { left: 0; top: 100%; cursor: nesw-resize; }
.fh-w { left: 0; top: 50%; cursor: ew-resize; }
.fh-rot { left: 50%; top: calc(-34px / var(--zoom)); cursor: grab; background: var(--text); }
.floor-rot-stem { position: absolute; left: 50%; top: calc(-34px / var(--zoom)); height: calc(34px / var(--zoom)); width: 1.5px; background: var(--accent); }

.floor-inspector {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0 0; border-top: 1px solid var(--border);
}
.floor-insp-title { font-size: var(--text-lg); }
.floor-inspector .field { gap: var(--space-1); }
.floor-help { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.floor-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.floor-row .btn-sm { min-height: 40px; }
.floor-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.floor-swatch { width: 44px; height: 44px; padding: 0; border-radius: var(--radius); background: var(--c); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
.floor-swatch.is-on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.floor-form { display: flex; flex-direction: column; gap: var(--space-3); }
.floor-edit-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3);
  border: 0; border-top: 1px solid var(--border-strong); background: var(--surface);
}
.floor-edit-actions { display: flex; gap: var(--space-2); }
.floor-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.floor-dirty { color: var(--warn); font-weight: 600; }
.floor-clean { color: var(--muted); }
.floor-remote { color: var(--info); font-weight: 600; }

@media (min-width: 900px) {
  .floor-edit-main { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 899px) {
  .floor-edit-foot { position: sticky; bottom: calc(var(--tabbar-h) + 8px); z-index: 4; }
}

/* v8 (3. ütem): az eszköztár 3 gomb (+ Hozzáadás, Visszavonás, ⋯); a választott rajzeszköz egy sávban, „Kész”-szel */
.floor-tool-active { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; padding: 4px 4px 4px var(--space-3);
  border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.floor-tool-active-text { font-size: var(--text-sm); font-weight: 600; }
.floor-menu .floor-btn-icon { width: 22px; height: 22px; color: var(--ink2); }
.floor-menu .menu-item:disabled { opacity: 0.45; }
@media (max-width: 640px) { .floor-tool-group { justify-content: flex-start; gap: var(--space-2); } }