/* Mingle – Asztalok képernyő (használó mód) és az asztal-ábra stílusa (docs/DESIGN.md, „V22”; v7-től örökölt szerkezet). Csak a style.css tokenjei: nincs hex-szín, külső betű vagy kép.
   Felül a terek aláhúzott fülsora (darabszámmal) + „Lista” váltó, alatta az összesítő sor; az alaprajz a vásznon (--bg), alul a „Következő foglalás” sor.
   Az ábra (table_figure.js) SVG: asztallap + székek; a vonalvastagság képpontban állandó (non-scaling-stroke). Állapot SOHA nem csak szín:
   foglalt (nyitott számla) = V22 menta kitöltés + 1,5 px mély zöld keret, rajta fő szöveg: név, összeg, eltelt idő és monogram;
   foglalással várt = borostyán tónus + 1,5 px borostyán keret, rajta „foglalás”, az érkezés ideje, név és létszám;
   szabad = kártya-réteg, 1 px vonal, a név és a férőhely. Nincs árnyék, gyűrű, folyamatjelző, pontrács. */

/* ---- a képernyő rácsa: fülsor + összesítő · alaprajz (kitölti a helyet) · lábjegyzet · „Következő foglalás” közvetlenül a fülsáv fölött ---- */
.tables-view { --gut: var(--space-4); }
@media (min-width: 900px) { .tables-view { --gut: var(--space-5); } }
.shell[data-route="tables"] .view {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--topwrap-h, 52px)); min-height: calc(100dvh - var(--topwrap-h, 52px));
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .shell[data-route="tables"] .view { padding-bottom: 0; } }
.tables-view { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tables-content { flex: 1 1 auto; display: flex; flex-direction: column; }
/* egyetlen alaprajz: a zóna kitölti a maradék magasságot, a vászon arányosan beleillesztve (széltében vagy magasságában) */
.tables-content.is-fill .zone.is-fill { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 260px; margin-bottom: 0; }
/* a doboz a maradék helyet kapja (alap 0, nem a tartalomból); a vászon szélességét a floor_canvas.js állítja be úgy, hogy arányosan beleférjen */
.floor-fit {
  flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  margin: 0 calc(-1 * var(--gut));
}
.tables-view .floor-fit > .floor-viewport.is-view { flex: none; max-width: 100%; margin: 0; }
.tables-content.is-fill .notice-bar { margin-top: var(--space-2); padding-bottom: var(--space-3); }
.tables-top { margin: calc(-1 * var(--gut)) calc(-1 * var(--gut)) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border-strong); }
.tables-top:empty { display: none; }

.tables-head { display: flex; align-items: stretch; min-height: 44px; padding: 0 var(--space-2) 0 calc(var(--gut) - var(--space-3)); border-bottom: 1px solid var(--border); }
.tables-head-tools { display: flex; align-items: center; flex: none; margin-left: auto; }
.zone-tabs { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.zone-tabs::-webkit-scrollbar { display: none; }
.zone-tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3);
  border: 0; background: none; color: var(--ink2); font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
.zone-tab-count { color: var(--muted); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.zone-tab:hover:not(.is-static) { color: var(--text); }
/* kiválasztva: fő szöveg, félkövér ÉS alatta 3 px cselekvés-szín sáv (nem csak szín) */
.zone-tab.is-active { color: var(--text); font-weight: 700; }
.zone-tab.is-active::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 3px; background: var(--primary); }
.zone-tab.is-static { cursor: default; }
/* v8: a „Lista” váltó és a térkép-fogaskerék a Beállításokba került (view_settings.js); keskeny telefonon a terek fülei szűkebbek */
@media (max-width: 479px) {
  .zone-tab { padding: 0 10px; }
  .zone-tab.is-active::after { left: 10px; right: 10px; }
}
.floor-edit-link {
  min-height: 44px; padding: 0 var(--space-3); border: 0; background: none; color: var(--acc-d);
  font-size: var(--text-sm); font-weight: 600;
}
.floor-edit-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* összesítő sor: balra a nyitott összeg (28 px szám), jobbra keskeny oszlop vékony elválasztóval (Szabad x / y, Foglalás n – állapotponttal) */
.tables-sum { display: flex; align-items: stretch; min-height: 70px; }
.tsum-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-2) var(--gut); }
.tsum-label { color: var(--muted); font-size: 12.5px; }
.tsum-value { color: var(--num); font-size: 28px; line-height: 1.1; white-space: nowrap; }
.tsum-side { flex: 0 0 164px; display: flex; flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: var(--space-2) var(--gut) var(--space-2) var(--space-3); border-left: 1px solid var(--border); }
.tsum-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 14px; }
.tsum-row dt { display: inline-flex; align-items: center; gap: 8px; color: var(--ink2); }
.tsum-row dd { margin: 0; color: var(--num); font-size: 15px; }
.tsum-mark { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tsum-mark.is-free { border: 1px solid var(--muted); background: var(--surface-2); }
.tsum-mark.is-reserved { background: var(--amb-b); }
.tsum-mark.is-occupied { background: var(--mint); border: 1px solid var(--acc-d); }

/* egy zónánál a fülsor mondja a nevet: a zóna-cím csak a képernyőolvasónak szól */
.has-one-zone .zone-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.tables-view .zone { margin-bottom: var(--space-4); }
.tables-view .notice-bar { margin-top: var(--space-4); text-align: center; }

/* „Következő foglalás” sor (50 px): címke, idő borostyánnal, név, létszám, asztal; jobbra nyíl */
.tables-next {
  display: flex; align-items: center; gap: var(--space-3); width: calc(100% + 2 * var(--gut)); min-height: 50px; margin: auto calc(-1 * var(--gut)) 0; padding: 0 var(--gut);
  background: var(--surface); border: 0; border-top: 1px solid var(--border-strong); color: var(--text); text-align: left;
}
.tables-next:hover { background: var(--surface-2); }
.tnext-label { flex: none; color: var(--ink2); font-size: 13px; }
.tnext-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.tnext-time { color: var(--amb); font-size: 15.5px; }
.tnext-time.is-late { color: var(--err); }
.tnext-sep { color: var(--muted); font-weight: 400; }
.tnext-go { flex: none; width: 18px; height: 18px; color: var(--muted); }

/* ---- „Lista” mód: asztal-sorok a panel-rétegen ---- */
.tl-rows { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.tl-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px; padding: var(--space-2) var(--space-4);
  background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); text-align: left;
}
.tl-row:last-child { border-bottom: 0; }
.tl-row:hover { background: var(--surface-2); }
.tl-mark { flex: none; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.tl-row.is-occupied .tl-mark { background: var(--mint); border-color: var(--acc-d); }
.tl-row.is-reserved .tl-mark { background: var(--amb-t); border: 1.5px solid var(--amb-b); }
.tl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tl-head { display: flex; align-items: baseline; gap: var(--space-2); }
.tl-label { font-family: var(--font-num); font-size: 17px; font-weight: 600; color: var(--num); }
.tl-seats { color: var(--muted); font-size: 12.5px; }
.tl-state { color: var(--ink2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row.is-reserved .tl-state { color: var(--amb); font-weight: 600; }
.tl-amount { flex: none; color: var(--num); font-size: 17px; white-space: nowrap; }
.tl-go { flex: none; width: 18px; height: 18px; color: var(--muted); }
.tl-row.is-stale { opacity: 0.6; }

/* ---- az asztal-ábra ---- */
.table-tile.tf-tile {
  position: relative; display: block; min-width: 0; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--text); text-align: center;
}
.tf-box { position: absolute; inset: 0; display: block; }
/* érintési cél: ha az ábra a vásznon 44 px-nél kisebb, az átlátszó réteg legalább 44 × 44 px (a koppintás az asztalra esik) */
.table-tile.floor-table::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.table-figure { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.table-figure * { vector-effect: non-scaling-stroke; }
/* szabad: kártya-réteg, 1 px erősebb vonal */
.tf-top { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1px; }
.tf-top-in { fill: none; stroke: none; }
/* szék: egyszerű, lekerekített téglalap (a támla külön nem látszik) */
.tf-seat { fill: var(--chair); stroke: none; }
.tf-back { fill: var(--chair); stroke: none; }
/* foglalt (V22): menta kitöltés + 1,5 px mély zöld keret (a szabad fehér, vékony szürke vonallal: alak és szín is eltér) */
.is-occupied .tf-top { fill: var(--mint); stroke: var(--acc-d); stroke-width: 1.5px; }
/* foglalással várt: borostyán tónus + 1,5 px borostyán keret */
.is-reserved .tf-top { fill: var(--amb-t); stroke: var(--amb-b); stroke-width: 1.5px; }
/* nincs kapcsolat: az utolsó ismert állapot, halványabban */
.tf-tile.is-stale .tf-box, .tf-tile.is-stale .table-caption { opacity: 0.55; }
.tf-tile.is-free:active .tf-top { fill: var(--surface-3); }
.tf-tile.is-occupied:active .tf-top { fill: var(--surface-3); }
.tf-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* a szöveg az asztalon (nem forog, mindig olvasható): legfeljebb három sor; a méret az asztal méretéhez igazodik (konténer-egység) */
.table-face {
  position: absolute; left: var(--fx, 0); right: var(--fx, 0); top: var(--fy, 0); bottom: var(--fy, 0);
  display: flex; align-items: center; justify-content: center; padding: 2px; pointer-events: none; container-type: size;
}
.tf-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; max-width: 100%; line-height: 1.15; }
.tf-l1, .tf-l2, .tf-l3 { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-l1 { font-size: 12px; font-weight: 400; }
.tf-l2 { font-family: var(--font-num); font-weight: 600; font-size: clamp(12px, min(26cqh, 19cqw), 22px); letter-spacing: 0.01em; font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; }
.tf-l3 { font-size: 12px; font-variant-numeric: tabular-nums; }
.tf-tile .table-label {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit;
  font-family: var(--font-num); font-weight: 700; line-height: 1.4;      /* 1.4: a levágó doboz nem csípi le a lelógó szárakat és az ékezetet */
  font-size: max(12px, 1em);
}
.tf-tile .table-label.is-long { font-size: max(12px, 0.9em); }
.tf-l1 .table-label { font-family: var(--font); line-height: 1.15; }
.tf-ft { font-family: var(--font); font-weight: 400; font-size: 0.6em; margin-left: 0.2em; }
/* szabad: „T2” (17 px / 700) és a férőhely */
.is-free .tf-l2 { font-size: clamp(12px, min(24cqh, 17cqw), 17px); color: var(--ink2); }
.is-free .tf-l2 .table-label { font-weight: 700; }
.is-free .tf-seats { color: var(--muted); }
/* foglalt: fő szöveg a menta kitöltésen; a harmadik sor halkabb (menta tónus-szöveg) */
.tf-tile.is-occupied .table-face { color: var(--text); }
.tf-tile.is-occupied .table-label { color: var(--text); }
.is-occupied .tf-sub, .is-occupied .tf-l3, .is-occupied .tf-ft { color: var(--mint-tx); }
.is-occupied .tf-l3 .table-time { color: inherit; }
.is-occupied .tf-word { font-family: var(--font); font-size: 13px; }
/* foglalással várt: borostyán szöveg */
.tf-tile.is-reserved .table-face { color: var(--amb); }
.is-reserved .tf-l1 .table-label { font-weight: 700; }
/* kis asztalnál kevesebb szöveg: előbb a monogram és a létszám, a „Ft”, aztán a harmadik sor, a legkisebbnél csak a név */
@container (max-width: 84px) { .tf-l3 .tf-who, .tf-l3 .tf-dot { display: none; } }
@container (max-width: 78px) { .tf-sub, .tf-ft { display: none; } }
@container (max-height: 46px) { .tf-l3:not(.tf-seats) { display: none; } }
@container (max-height: 40px) { .tf-l3 { display: none; } }
@container (max-height: 34px) { .is-occupied .tf-l2, .is-reserved .tf-l2 { display: none; } }

/* felirat az ábra alatt: az állapot szövege csak a képernyőolvasónak (az asztalon már szó, keret vagy összeg mondja); látszik a következő foglalás (foglalt asztalnál) */
.tf-tile .table-caption {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 2px; pointer-events: none; white-space: nowrap;
  color: var(--muted); font-size: max(12px, calc(var(--u) * 13)); line-height: 1.15;
}
.tf-tile .table-state { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.tf-tile .table-res {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  color: var(--amb); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tf-tile .table-res::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--amb-b); }
.tf-tile .table-res.is-late { color: var(--err); }
.tf-tile .table-res.is-late::before { background: var(--err); }
.tf-tile .table-res.is-dup { display: none; }        /* foglalással várt asztalon az asztal maga mondja az időt */
/* az alaprajzon nincs lebegő címke: a következő foglalás a „Következő foglalás” sorban és a Foglalás képernyőn áll (az asztal aria-label-jében is) */
.floor-table .table-res { display: none; }
.table-res-time { margin-right: 4px; }
.table-res-time:last-child { margin-right: 0; }
@container (max-width: 640px) {
  .floor-table .table-res-name { display: none; }          /* keskeny vásznon csak az idő (a név a Foglalás képernyőn) */
}

/* rács (automatikus elrendezés, ha nincs alaprajz): egységes cellák, ugyanazokkal az ábrákkal */
.tables-view .table-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--space-4) var(--space-3); padding: var(--space-3) 0; }
.table-tile.tf-grid-tile { --u: 0.62px; display: flex; flex-direction: column; align-items: center; justify-self: center; width: 100%; max-width: 190px; }
.tf-grid-tile .tf-box { position: relative; inset: auto; width: 100%; aspect-ratio: var(--ar); }
@media (min-width: 900px) {
  .tables-view .table-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-5) var(--space-4); }
  .table-tile.tf-grid-tile { --u: 0.9px; }
}