/* Valach System (VS) v2 — generic ListGrid styles (PR-VS-023, STEP-VS-023-004, CMD-VS-023-004-004).
   Focused stylesheet for the shared public/js/listgrid.mjs renderer. Reuses the canonical design tokens from
   styles.css (see the :root token block there — this file hardcodes nothing). Base .vs-table / .vs-row styling
   lives in styles.css; this file adds only the grid-specific affordances (count bar, sort headers, badges, row
   actions). Fully tokenised 2026-07-16 (design-lock). */

.vs-listgrid { max-width: var(--vs-content-max); margin: 0 0 1rem; }

/* (The duplicate "Sorok: N" count bar was removed in CMD-VS-023-004-015 — the toolbar selection summary
   "N/M sor jelölve" is the single visible data-row count.) */

/* V1-like table: row-separator borders only (no vertical grid lines / inner boxes), compact padding, subtle header
   (CMD-VS-023-004-009). Overrides the all-sides .vs-table cell border from styles.css for the ListGrid table. */
/* STEP-VS-076-002 operator feedback #2: a wide column set scrolls INSIDE the table wrap, never the page.
   min-width:max-content lets the table grow to its natural width inside the scroller; with few columns
   width:100% still fills the wrap. The legacy .vs-table 60rem cap is lifted inside the wrap only. */
.vs-lg-tablewrap { overflow-x: auto; max-width: 100%; }
.vs-lg-tablewrap .vs-table { max-width: none; }
.vs-listgrid-table { width: 100%; min-width: max-content; }
.vs-listgrid-table th, .vs-listgrid-table td { border: 0; border-bottom: 1px solid var(--vs-border); padding: .45rem .6rem; text-align: left; vertical-align: middle; }
.vs-listgrid-table thead th { background: var(--vs-bg); color: var(--vs-muted); font-size: 12px; font-weight: 600; border-bottom: 2px solid var(--vs-border); }

/* Sortable column headers are REAL buttons (accessible), not clickable spans. */
.vs-listgrid-th.is-sortable { padding: 0; }
.vs-listgrid-sort {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: inherit;
  padding: .4rem .6rem; text-align: left;
}
.vs-listgrid-sort:hover { background: var(--vs-accent-weak); }
.vs-listgrid-sort.is-asc, .vs-listgrid-sort.is-desc { color: var(--vs-accent); }
.vs-listgrid-sortind { font-size: 11px; color: var(--vs-muted); }
.vs-listgrid-sort.is-asc .vs-listgrid-sortind, .vs-listgrid-sort.is-desc .vs-listgrid-sortind { color: var(--vs-accent); }
/* Multi-sort priority badge on a sorted header (1, 2, 3) — shown only when more than one sort level is active. */
.vs-listgrid-sortprio { display: inline-block; min-width: 1rem; margin-left: .25rem; padding: 0 .25rem; font-size: 10px; line-height: 1.4; text-align: center; color: var(--vs-accent-ink); background: var(--vs-accent); border-radius: var(--vs-radius-pill); }

/* Item V — the ordered multi-sort summary chips (priority · label · direction · remove). */
.vs-sort-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: 12px; }
.vs-sort-summary-label { color: var(--vs-muted); }
.vs-sort-chip { display: inline-flex; align-items: center; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-pill); background: var(--vs-surface); overflow: hidden; }
.vs-sort-chip-dir { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; padding: .1rem .5rem; color: inherit; }
.vs-sort-chip-dir:hover { background: var(--vs-accent-weak); }
.vs-sort-chip-remove { border: 0; border-left: 1px solid var(--vs-border); background: none; cursor: pointer; font-size: 11px; color: var(--vs-muted); padding: .1rem .4rem; }
.vs-sort-chip-remove:hover { background: var(--vs-bad-weak); color: var(--vs-bad); }

/* unified query summary (sort · grouping · filter chips) — operator 2026-07-16 */
.vs-query-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 12px; margin-top: .35rem; }
.vs-qs-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.vs-qs-label { color: var(--vs-muted); font-weight: 600; }
.vs-qs-chip { display: inline-flex; align-items: center; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-pill); background: var(--vs-surface); overflow: hidden; }
.vs-qs-chip-group { border-color: var(--vs-accent); }
.vs-qs-chip-text { padding: .1rem .5rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-qs-chip-remove { border: 0; border-left: 1px solid var(--vs-border); background: none; cursor: pointer; font-size: 11px; color: var(--vs-muted); padding: .1rem .4rem; }
.vs-qs-chip-remove:hover { background: var(--vs-bad-weak); color: var(--vs-bad); }

/* multi-select filter dropdown (checkbox popover) — operator 2026-07-16 */
.vs-mfilter { position: relative; }
.vs-mfilter-btn { font: inherit; font-size: 12px; padding: .1rem .4rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-mfilter-btn.is-active { border-color: var(--vs-accent); color: var(--vs-accent); font-weight: 600; }
.vs-mfilter-pop { position: fixed; z-index: 60; min-width: 11rem; max-height: 16rem; overflow-y: auto; background: var(--vs-surface); border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-md); padding: .3rem; }
.vs-mfilter-opt { display: flex; align-items: center; gap: .45rem; padding: .3rem .4rem; border-radius: var(--vs-radius-sm); cursor: pointer; font-size: 13px; }
.vs-mfilter-opt:hover { background: var(--vs-accent-weak); }
.vs-mfilter-clear, .vs-mfilter-done { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; padding: .35rem .4rem; border: 0; background: none; color: var(--vs-accent); cursor: pointer; border-radius: var(--vs-radius-sm); }
.vs-mfilter-clear { border-bottom: 1px solid var(--vs-border); color: var(--vs-muted); margin-bottom: .2rem; }
.vs-mfilter-done { border-top: 1px solid var(--vs-border); margin-top: .2rem; font-weight: 600; text-align: center; }
.vs-mfilter-clear:hover, .vs-mfilter-done:hover { background: var(--vs-accent-weak); }

/* SZÁM-TARTOMÁNY szűrő (-tól/-ig) — D-VS-440. Ugyanaz a felnyíló, két szám-mezővel; a doboz zárása alkalmaz. */
.vs-rfilter-pop { min-width: 9.5rem; }
.vs-rfilter-line { display: flex; align-items: center; justify-content: space-between; gap: .45rem; padding: .25rem .4rem; font-size: 13px; }
.vs-rfilter-line input { width: 6rem; font: inherit; font-size: 13px; padding: .15rem .3rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); }

/* is_active (and other bool) cells render as a styled badge — never a raw true/false. */
.vs-badge {
  display: inline-block; min-width: 1.4rem; text-align: center; font-size: 12px; line-height: 1.4;
  border: 1px solid var(--vs-border); border-radius: var(--vs-radius-pill); padding: .04rem .45rem;
}
.vs-badge--on { color: var(--vs-ok); border-color: color-mix(in srgb, var(--vs-ok) 40%, var(--vs-surface)); background: var(--vs-ok-weak); }
.vs-badge--off { color: var(--vs-muted); background: var(--vs-bg); }

/* SZINKRON (CMD-VS-200-011-012 R2): a hat állapot-szó ugyanaz a V2-jelvény, csak a tónus más —
   új vizuális nyelv nincs. Indítható = rendben · Teendő = figyelem · Zárva/Nem támogatott = halvány. */
.vs-sync-state--runnable, .vs-sync-state--automatic { color: var(--vs-ok); border-color: color-mix(in srgb, var(--vs-ok) 40%, var(--vs-surface)); background: var(--vs-ok-weak); }
.vs-sync-state--attention { color: var(--vs-warn); border-color: color-mix(in srgb, var(--vs-warn) 40%, var(--vs-surface)); background: var(--vs-warn-weak); }
.vs-sync-state--not_configured, .vs-sync-state--locked, .vs-sync-state--unsupported { color: var(--vs-muted); background: var(--vs-bg); }
.vs-sync-panel { max-width: 46rem; }
.vs-sync-option, .vs-sync-check { display: block; margin: .15rem 0; }
.vs-sync-check { display: inline-block; margin-right: .8rem; }
.vs-sync-label { margin: .7rem 0 .25rem; font-size: 13px; }
.vs-sync-fixed { margin: .1rem 0; font-weight: 600; }
.vs-sync-summary { font-weight: 600; margin: .6rem 0 .35rem; }
.vs-sync-items td { padding: .25rem .5rem; vertical-align: top; }
.vs-sync-item--attention .vs-sync-item-status { color: var(--vs-warn); }
.vs-sync-item--skip .vs-sync-item-status { color: var(--vs-muted); }
/* CBL-01 (C2): a tartalmi teendő — kattintható sor, alatta a két érték és a négy választás */
.vs-sync-item--clickable { cursor: pointer; }
.vs-sync-item--clickable:hover, .vs-sync-item--clickable:focus { background: var(--vs-bg); outline: none; }
.vs-sync-item-field { font-weight: 600; }
.vs-sync-conflict { padding: .5rem 0 .75rem; }
.vs-sync-conflict-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.vs-sync-conflict-value { white-space: pre-wrap; word-break: break-word; max-height: 12rem; overflow: auto; margin: .25rem 0 0;
  padding: .4rem .5rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); font: inherit; }
.vs-sync-conflict-baseline { margin-top: .5rem; }
.vs-sync-state-count { margin-left: .25rem; color: var(--vs-warn); font-weight: 600; }
.vs-sync-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.vs-sync-actions-cell { white-space: nowrap; }
.vs-sync-actions-cell > * + * { margin-left: .5rem; }
.vs-sync-editor-btn { margin-left: .6rem; }
.vs-sync-technical pre { max-height: 14rem; overflow: auto; font-size: 11px; }
/* „Mit fog változni?" (SCM-01, CMD-021) — a közös változás-nézet (Szinkron panel + első import 3. lépés) */
.vs-sync-panel:has(.vs-chg) { max-width: 64rem; }
.vs-chg { margin: .5rem 0 .75rem; }
.vs-chg-title { margin: .4rem 0 .2rem; font-size: 14px; }
.vs-chg-headline { font-weight: 600; margin: .2rem 0; }
.vs-chg-counter, .vs-chg-new, .vs-chg-skipcount { margin: .1rem 0; }
.vs-chg-types { margin: .4rem 0; max-width: 34rem; }
.vs-chg-types td, .vs-chg-types th { padding: .15rem .5rem; text-align: right; }
.vs-chg-types td:first-child, .vs-chg-types th:first-child { text-align: left; }
.vs-chg-type-attention { color: var(--vs-warn); font-weight: 600; }
.vs-chg-locked td { text-align: left; }
.vs-chg-controls { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .5rem 0; }
.vs-chg-controls .vs-input { width: auto; min-width: 8rem; }
.vs-chg-viewbox .vs-btn + .vs-btn { margin-left: .25rem; }
.vs-chg-items td, .vs-chg-fields td { padding: .25rem .5rem; vertical-align: top; }
.vs-chg-item { cursor: pointer; }
.vs-chg-item:hover, .vs-chg-item:focus, .vs-chg-item--open { background: var(--vs-bg); outline: none; }
.vs-chg-item-what { color: var(--vs-muted); }
.vs-chg-badge--attention { color: var(--vs-warn); border-color: color-mix(in srgb, var(--vs-warn) 40%, var(--vs-surface)); background: var(--vs-warn-weak); }
.vs-chg-badge--change, .vs-chg-badge--new { color: var(--vs-ok); border-color: color-mix(in srgb, var(--vs-ok) 40%, var(--vs-surface)); background: var(--vs-ok-weak); }
.vs-chg-badge--skip, .vs-chg-badge--unchanged { color: var(--vs-muted); background: var(--vs-bg); }
.vs-chg-todo { color: var(--vs-warn); }
.vs-chg-detail > td { padding: .25rem .5rem .6rem 1rem; }
.vs-chg-fname { font-weight: 600; white-space: nowrap; }
.vs-chg-val { max-width: 14rem; word-break: break-word; }
.vs-chg-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* R230 §4: a rendelés-sor cellája — a név egy sorra vágva, a mennyiség · egység · ár mindig látszik (a szöveg-elválasztó csak a szövegé) */
.vs-chg-lines { display: flex; flex-direction: column; gap: .3rem; }
.vs-chg-line { display: flex; flex-direction: column; min-width: 0; }
.vs-chg-line-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-chg-line-sep { display: none; }
.vs-chg-full { white-space: pre-wrap; word-break: break-word; max-height: 14rem; overflow: auto; margin: .25rem 0 0; font-size: 12px; }
.vs-chg-op--attention .vs-chg-oplabel { color: var(--vs-warn); font-weight: 600; }
/* ACS-01: az élesítés előtt kitöltendő és a tájékoztató jelzés NEM figyelmeztető szín — nem állít meg semmit */
.vs-chg-op--before_activation .vs-chg-oplabel, .vs-chg-post, .vs-chg-type-post { color: var(--vs-ink); font-weight: 600; }
.vs-chg-op--info .vs-chg-oplabel, .vs-chg-info, .vs-chg-type-info { color: var(--vs-muted); }
.vs-chg-op--create .vs-chg-oplabel, .vs-chg-op--update .vs-chg-oplabel, .vs-chg-op--add .vs-chg-oplabel { color: var(--vs-ok); font-weight: 600; }
.vs-chg-op--skip .vs-chg-oplabel, .vs-chg-op--no_change .vs-chg-oplabel { color: var(--vs-muted); }
.vs-chg-reason { font-size: 12px; }
.vs-chg-pager { display: flex; gap: .6rem; align-items: center; margin: .4rem 0; }
.vs-chg-copied { width: 100%; font-size: 12px; margin: .25rem 0; }

/* Többértékű szűrő HÁROM ÁLLÁSA (bármelyik · mindegyik · egyik sem) a szűrő-doboz tetején. */
.vs-mfilter-modes { display: flex; gap: .2rem; margin-bottom: .35rem; }
.vs-mfilter-mode {
  flex: 1 1 auto; font-size: 12px; line-height: 1.5; cursor: pointer;
  border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); padding: .1rem .3rem;
  background: var(--vs-surface); color: var(--vs-ink);
}
.vs-mfilter-mode.is-on { background: var(--vs-accent); border-color: var(--vs-accent); color: var(--vs-accent-ink); }

/* Többértékű (`multi`) cella: a darabok BUBORÉKKÉNT állnak, hogy a szem is darabokat lásson.
   Semleges színt kap (nem az ✓/— zöld-szürke jelentést) — ezek CÍMKÉK, nem állapotok. Szűk oszlopban
   tördel, nem tolja szét a rácsot; üres értéknél egyáltalán nincs elem (tiszta üres cella). */
.vs-cell-multi { white-space: normal; }
.vs-chip {
  display: inline-block; font-size: 12px; line-height: 1.4;
  border: 1px solid var(--vs-border); border-radius: var(--vs-radius-pill); padding: .04rem .45rem;
  background: var(--vs-bg); color: var(--vs-ink); margin: .05rem .2rem .05rem 0;
}

/* Long text columns truncate visibly (full value kept in title). */
.vs-cell-truncate .vs-cell-truncate, .vs-cell-truncate {
  display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}

/* --- OSZLOP-FIXÁLÁS (D-VS-608, operátori parancs) -------------------------------------------------
   Az első N oszlop ÁLLVA marad vízszintes görgetéskor, a jobb szélső MŰVELETEK oszlop pedig a jobb
   szélen — közöttük tekeredik a többi. A `left` pixel-értékét a renderelő MÉRI (listgrid.mjs
   applyFrozenOffsets), mert az oszlopszélesség a tartalomtól függ; itt csak a ragasztás és a takarás
   él. A táblán `border-collapse: collapse` van (styles.css), és összevont szegélyek mellett a ragadó
   cella szegélye elveszne — ezért a sor-elválasztó és a fixált sáv széle BELSŐ ÁRNYÉK, nem border.
   A háttér kötelező: átlátszó ragadó cellán átlátszana a görgetett tartalom. */
.vs-listgrid-table th.is-frozen, .vs-listgrid-table td.is-frozen { position: sticky; z-index: 2; background: var(--vs-surface); }
.vs-listgrid-table thead th.is-frozen { z-index: 4; background: var(--vs-bg); }
.vs-listgrid-table td.is-frozen { box-shadow: inset 0 -1px 0 var(--vs-border); }
/* a sor állapota a fixált cellán is látszik (különben a kijelölt sor „elvágódna" a fixált sávnál) */
.vs-listgrid-table .vs-row:hover td.is-frozen { background: var(--vs-accent-weak); }
.vs-listgrid-table .vs-row.is-checked td.is-frozen { background: var(--vs-accent-weak); }
.vs-listgrid-table .vs-row.is-selected td.is-frozen { background: color-mix(in srgb, var(--vs-accent) 15%, var(--vs-surface)); }
/* a fixált sáv SZÉLE: csak akkor látszik, ha tényleg van mit görgetni mellette */
.vs-lg-tablewrap.has-frozen .is-frozen-last { border-right: 1px solid var(--vs-border-strong); }
/* MŰVELETEK oszlop: mindig a jobb szélen áll — a sor műveletei sosem tekerődnek el */
.vs-listgrid-table th.is-pinned-right, .vs-listgrid-table td.is-pinned-right { position: sticky; right: 0; z-index: 2; background: var(--vs-surface); border-left: 1px solid var(--vs-border); }
.vs-listgrid-table thead th.is-pinned-right { z-index: 4; background: var(--vs-bg); }
.vs-listgrid-table td.is-pinned-right { box-shadow: inset 0 -1px 0 var(--vs-border); }
.vs-listgrid-table .vs-row:hover td.is-pinned-right { background: var(--vs-accent-weak); }
.vs-listgrid-table .vs-row.is-checked td.is-pinned-right { background: var(--vs-accent-weak); }
.vs-listgrid-table .vs-row.is-selected td.is-pinned-right { background: color-mix(in srgb, var(--vs-accent) 15%, var(--vs-surface)); }
/* CSOPORT-FELIRAT: nem folyik el oldalirányban (D-VS-610). A csoport-cella a tábla TELJES szélességét
   átfogja, ezért görgetéskor a felirata kifutna a képből — a feliratot hordozó doboz a görgető bal
   széléhez tapad. Szintenként a SAJÁT behúzásánál ragad meg (a cella padding-left értékeivel egyezően),
   így a több szintes csoportosítás rendje görgetés közben is látszik. Független az oszlop-fixálástól. */
.vs-listgrid-table td.vs-group-header .vs-group-sticky { position: sticky; left: .6rem; display: inline-block; }
.vs-listgrid-table tr.vs-group-level-2 td.vs-group-header .vs-group-sticky { left: 1.7rem; }
.vs-listgrid-table tr.vs-group-level-3 td.vs-group-header .vs-group-sticky { left: 2.9rem; }
/* --- N-N ÖSSZERENDELÉS (ASN-01, D-VS-613) ---------------------------------------------------------
   Az érték-oszlopok az utolsó látható oszlop UTÁN állnak, FÜGGŐLEGES fejléccel (az operátor kimondta:
   „hogy kiférjen normálisabban a hozzárendelhető oszlopok nevei … ne vízszintesen, hanem függőlegesen").
   A cella a vezérlőt (jelölő / rádió) középre teszi; a panel maga a közös modális keretet használja. */
.vs-listgrid-table th.vs-listgrid-xh { vertical-align: bottom; padding: .35rem .25rem; text-align: center; }
/* A FÜGGŐLEGES FEJLÉC TÖRDELHET (operátori parancs 2026-08-31: „ha túl magas … akkor bontsuk két-három
   »sorra« a fejléc nevét"). Elforgatott írás-iránynál a `max-width` a látható MAGASSÁGOT szabja meg, a
   `white-space: normal` pedig engedi a tördelést — a doboz szélessége (az oszlop szélessége) adja, hány
   „sorba" tördel. Így egy hosszú érték-név sem nyomja fel a fejlécet. */
.vs-listgrid-table th.vs-listgrid-xh.is-vertical .vs-listgrid-xh-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: normal; max-width: 9.5rem; max-height: 3.4rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; display: inline-block; text-align: left;
}
/* az oszlop-fejléc jelölője (érték MINDEN sorra) a felirat FÖLÖTT, vízszintesen marad */
.vs-listgrid-table th.vs-listgrid-xh .vs-listgrid-xh-all { display: block; margin: 0 auto .2rem; }
.vs-listgrid-table td.vs-listgrid-xcell { text-align: center; white-space: nowrap; }
/* A PANEL SOKKAL NAGYOBB (operátori parancs: „lehetne sokkal nagyobb, mert nem fér ki normálisan") —
   majdnem teljes képernyő, a rács pedig a maradék magasságot kapja.
   A SZELEKTOR SZÁNDÉKOSAN ÖSSZETETT (`.vs-export-dialog.vs-assign-dialog`): a panel MINDKÉT osztályt
   viseli, és az általános párbeszéd-méret (36rem) LEJJEBB áll ebben a fájlban — azonos fajsúlynál a
   későbbi nyer, tehát a puszta `.vs-assign-dialog` némán alulmaradt, és a panel 576 px-en nyílt. A
   böngésző-próba mérte meg (a forrásban a szabály ott volt: KUKA-038). Az összetett szelektor a
   SORRENDTŐL FÜGGETLENÜL nyer — a fájl átrendezése nem viheti vissza a hibát. */
.vs-export-dialog.vs-assign-dialog { width: 98vw; max-width: 98vw; height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
.vs-assign-body { flex: 1 1 auto; max-height: none; overflow: auto; }
.vs-assign-dialog .vs-listgrid { max-width: none; }
.vs-assign-dialog .vs-lg-tablewrap { max-height: none; }
.vs-assign-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem .6rem; border-bottom: 1px solid var(--vs-border); }
.vs-assign-barlabel { font-size: 12px; color: var(--vs-muted); }
.vs-assign-picker { font: inherit; font-size: 13px; padding: .15rem .35rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); }
.vs-assign-scope { font-size: 12px; color: var(--vs-muted); margin-left: auto; }
.vs-assign-owned { font-size: 12px; color: var(--vs-muted); margin: .2rem .6rem .4rem; }
.vs-assign-owned-cell { font-size: 12px; color: var(--vs-muted); }
/* A BIRTOKOLT KAPCSOLATOK SZÁMA kattintható (D-VS-616): a termék szerkesztőjének adott szakaszára visz.
   Számnak látszik, nem gombnak — de egyértelműen kattintható (aláhúzás + kéz-kurzor). */
.vs-assign-owned-link { font: inherit; font-size: 12px; font-weight: 600; color: var(--vs-accent); background: none; border: 0; padding: 0 .2rem; cursor: pointer; text-decoration: underline; }
.vs-assign-owned-link:hover { text-decoration: none; }
/* A megnyitott szerkesztőben a CÉL-SZAKASZ két másodpercre kiemelődik — különben egy hosszú
   adatlapon nem látszik, hova érkeztünk (a néma ugrás ugyanaz, mint a néma üres lista). */
.vs-editor-section-focus { outline: 2px solid var(--vs-accent); outline-offset: 3px; border-radius: var(--vs-radius-sm); }
.vs-grid-assign-btn { font-size: 12px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; padding: .12rem .5rem; }
.vs-grid-assign-btn:hover { background: var(--vs-accent-weak); color: var(--vs-accent); }

/* CSOPORT-KIJELÖLŐ a csoport-fejlécben (D-VS-615) — a felirat ELŐTT, hogy a kattintható terület
   egyértelmű legyen; a sor-kattintás nem viszi tovább (a jelölő megállítja). */
.vs-listgrid-table td.vs-group-header .vs-group-select { margin-right: .45rem; vertical-align: middle; }

/* a fixálás-választó a tábla-akciósorban (a Kijelölés törlése / Tömeges szerkesztés után) */
.vs-grid-freeze { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; color: var(--vs-muted); }
.vs-grid-freeze-select { font: inherit; font-size: 12px; padding: .1rem .25rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); }

/* Per-row actions: ONE "⋯" button opens a small menu of the clickable actions (edit/copy/delete). */
.vs-listgrid-actions { white-space: nowrap; text-align: right; }
.vs-rowmenu-btn { font-size: 15px; line-height: 1; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; padding: .05rem .45rem; }
.vs-rowmenu-btn:hover { background: var(--vs-surface-2); }
/* inline (VISIBLE) row-action buttons — actions declared `inline: true` (D-VS-559: őrjárat hiba-lista
   javítás/tudomásul a SORON, nem a ⋯ mögött). Same visual family as the ⋯ button. */
.vs-rowact-btn { font-size: 12px; line-height: 1.2; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; padding: .15rem .5rem; margin-right: .3rem; white-space: nowrap; }
.vs-rowact-btn:hover { background: var(--vs-accent-weak); color: var(--vs-accent); }
.vs-rowact-btn:disabled { color: var(--vs-muted); cursor: not-allowed; background: var(--vs-surface); }
/* the popover menu (fixed-positioned in the body, like the column-filter popover) */
.vs-rowmenu-pop { position: fixed; z-index: 70; min-width: 9rem; background: var(--vs-surface); border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-md); padding: .25rem; display: flex; flex-direction: column; }
.vs-rowmenu-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: .35rem .55rem; border: 0; background: none; color: var(--vs-ink); cursor: pointer; border-radius: var(--vs-radius-sm); white-space: nowrap; }
.vs-rowmenu-item:hover { background: var(--vs-accent-weak); color: var(--vs-accent); }
.vs-rowmenu-item.is-deferred { color: var(--vs-muted); cursor: not-allowed; }
.vs-rowmenu-item-delete:hover { background: var(--vs-bad-weak); color: var(--vs-bad); }

/* Grid-owned empty / unavailable / loading / error states. */
.vs-listgrid-msg { color: var(--vs-muted); }
.vs-listgrid-unavailable, .vs-listgrid-error { color: var(--vs-bad); }

/* --- Generic Surface View controls / ListGrid toolbar (CMD-VS-023-004-006; item I rebuilt CMD-VS-023-004-012) ---
   A vertical stack of control rows: the view-preset bar, the VISIBLE per-column control row, and the selection
   summary. The per-column control row replaced the old "Oszlopok" popover + the separate "Szűrők" block. */
.vs-grid-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; max-width: var(--vs-content-max); margin: 0 0 .6rem; }

/* Items I + II — the VISIBLE per-column control row. ONE heading ("Oszlopok") above a two-zone layout: a FIXED group
   zone (left, never shrinks) + a visible separator + a horizontally-SCROLLABLE normal zone (right) so many columns
   never wrap into a broken second row. Works generically for surfaces with few columns (the zone simply doesn't
   scroll). No popover, no separate filter block; every control routes back through the shared view-state. */
.vs-grid-colrow { display: flex; flex-direction: column; gap: .35rem; padding: .45rem .5rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-bg); }
/* CMD-028 R70 §4: az összecsukható oszlop-beállító gombja (csak ahol a felület kéri — ma a Termékek lista) */
.vs-grid-cols-toggle { align-self: flex-start; height: 1.9rem; box-sizing: border-box; padding: 0 .8rem; font: inherit; font-size: 13px; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-grid-cols-toggle::after { content: " ▾"; color: var(--vs-muted); }
.vs-grid-cols-toggle.is-active { border-color: var(--vs-accent); }
.vs-grid-cols-toggle.is-active::after { content: " ▴"; }
.vs-colrow-title { font-size: 11px; font-weight: 600; color: var(--vs-muted); text-transform: uppercase; letter-spacing: .03em; }
.vs-colrow-zones { display: flex; align-items: stretch; gap: .4rem; min-width: 0; }
.vs-colzone { display: flex; align-items: flex-start; gap: .4rem; }
.vs-colzone-group { flex: 0 0 auto; flex-wrap: wrap; align-items: center; padding: .15rem .4rem; border: 1px dashed var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface-2); }
.vs-colzone-normal { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: .2rem; }
.vs-colzone-empty { font-size: 12px; color: var(--vs-muted); font-style: italic; padding: .25rem .35rem; white-space: nowrap; }
.vs-colrow-sep { flex: 0 0 auto; width: 0; border-left: 2px solid var(--vs-border); align-self: stretch; }
.vs-colctl { display: flex; flex: 0 0 auto; flex-direction: column; gap: .2rem; min-width: 7.5rem; padding: .3rem .45rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); font-size: 12px; }
.vs-colctl.is-col-hidden { opacity: .82; background: var(--vs-bg); } /* a hidden column's card is muted but still fully usable */
.vs-colctl.is-grouped { border-color: var(--vs-accent); }
.vs-colctl-head { display: flex; align-items: center; gap: .2rem; }
.vs-colctl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; flex: 1 1 auto; }
.vs-colctl-move { border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); cursor: pointer; font-size: 10px; line-height: 1; padding: .12rem .28rem; color: var(--vs-muted); }
.vs-colctl-move:hover { background: var(--vs-accent-weak); }
.vs-colctl-move[disabled] { opacity: .35; cursor: not-allowed; }
.vs-colctl-ctrls { display: flex; flex-direction: column; gap: .15rem; }
.vs-colctl-line { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; cursor: pointer; }
.vs-colctl-line.is-disabled { opacity: .5; cursor: not-allowed; }
.vs-colctl-cap { color: var(--vs-muted); }
.vs-colctl-filter { font: inherit; font-size: 12px; padding: .05rem .2rem; max-width: 8rem; }
.vs-colctl-filter.is-deferred { opacity: .6; cursor: not-allowed; }

/* Grouped rows (item II): a full-width group header precedes each group's data rows. v1-like MULTI-LEVEL nesting —
   deeper group levels are indented + slightly lighter so the hierarchy reads clearly. */
.vs-listgrid-table tr.vs-group-row td.vs-group-header { background: var(--vs-accent-weak); font-size: 12px; padding: .35rem .6rem; border-bottom: 1px solid var(--vs-border); }
.vs-listgrid-table tr.vs-group-level-2 td.vs-group-header { padding-left: 1.7rem; background: color-mix(in srgb, var(--vs-accent) 7%, var(--vs-surface)); }
.vs-listgrid-table tr.vs-group-level-3 td.vs-group-header { padding-left: 2.9rem; background: color-mix(in srgb, var(--vs-accent) 4%, var(--vs-surface)); }
.vs-group-label { color: var(--vs-muted); }
.vs-group-value { font-weight: 700; }
.vs-group-count { color: var(--vs-muted); }

/* (Empty cells now render as a clean blank <td> — v1-like — so no .vs-cell-empty placeholder rule exists.) */

/* --- Consolidated table-action row (Surface View item III, CMD-VS-023-004-016) — DIRECTLY above the table:
   the selection summary + the live search + export/report in ONE row (no dominant Keresés/Visszaállítás button).
   The legacy .vs-query-toolbar class is retained on this element for the STEP-003 query/export gate. --- */
.vs-table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; max-width: var(--vs-content-max); margin: 0 0 .5rem; padding: .35rem .5rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-bg); }
/* CMD-VS-023-004-020 item C+D: ONE shared control height + rounded radius for every action-row control (the search
   input + every button) so the row reads as a single consistent control strip, matching the header cluster. */
.vs-table-actions .vs-query-search,
.vs-table-actions button { height: 1.9rem; box-sizing: border-box; border-radius: var(--vs-radius-sm); }
.vs-table-actions-search { display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 16rem; min-width: 12rem; }
.vs-table-actions-search .vs-query-search { flex: 1 1 auto; min-width: 8rem; font: inherit; padding: .2rem .4rem; }
/* Lapozó (D-VS-276): ‹ Előző · Oldal N · Következő › + oldalméret-választó az akciósorban. */
.vs-table-actions-pager { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.vs-table-actions-pager .vs-pager-page { font-size: .85rem; opacity: .8; }
.vs-table-actions-pager .vs-pager-size { height: 1.9rem; box-sizing: border-box; border-radius: var(--vs-radius-sm); font: inherit; padding: 0 .25rem; }
.vs-table-actions-export { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.vs-query-export-btn, .vs-query-report-btn { font-size: 12px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); cursor: pointer; padding: .15rem .55rem; }
.vs-query-export-btn:hover, .vs-query-report-btn:hover { background: var(--vs-accent-weak); }
.vs-query-report-btn.is-deferred { border-style: dashed; color: var(--vs-muted); } /* report is honestly deferred (clickable → controlled 422 message) */
/* D-VS-646: a fordulónapi nézet SZŰKÍTETT akció-sora kimondja, mi nem él ilyenkor (KUKA-012). */
.vs-table-actions-note { flex: 1 1 100%; font-size: 12px; color: var(--vs-muted); }
.vs-colctl-lock { font-size: 10px; }

/* Selection summary (now inside the consolidated table-action row). */
.vs-grid-selection { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; }
.vs-grid-selcount { color: var(--vs-muted); }
.vs-grid-selectall, .vs-grid-clearsel { font-size: 12px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); cursor: pointer; padding: .12rem .5rem; }
.vs-grid-selectall[disabled], .vs-grid-clearsel[disabled] { opacity: .55; cursor: not-allowed; }

/* Row selection column + its header checkbox. */
.vs-listgrid-selcol, .vs-listgrid-selcell { width: 1.8rem; text-align: center; }
.vs-row.is-checked { background: var(--vs-accent-weak); }

/* --- Surface header (CMD-VS-023-004-011; header cluster CMD-VS-023-004-020): title left, a right-aligned cluster
   holding the view-preset dropdown · the entity create button · help — with CONSISTENT control HEIGHT + ROUNDED
   styling (item 0 polish C+D), scoped to the reference-surface header. --- */
.vs-surface-head { display: flex; align-items: center; gap: .8rem; max-width: var(--vs-content-max); margin: .2rem 0 .4rem; }
.vs-surface-head h1 { margin: 0; }
.vs-surface-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; } /* right cluster */
/* one shared control height + radius for every header-cluster control (dropdown + save + ⚙ edit + create + help). */
.vs-surface-head-actions .vs-grid-view,
.vs-surface-head-actions .vs-surface-view-save,
.vs-surface-head-actions .vs-surface-view-edit,
.vs-surface-head-actions .vs-editor-new,
.vs-surface-head-actions .vs-help-btn {
  height: 1.9rem; box-sizing: border-box; border-radius: var(--vs-radius-sm); font-size: 13px; line-height: 1.2;
  border: 1px solid var(--vs-border); background: var(--vs-surface); cursor: pointer; padding: 0 .6rem; margin: 0;
}
.vs-surface-head-actions .vs-grid-view { padding: 0 .4rem; } /* native select chrome needs less side padding */
.vs-surface-head-actions .vs-surface-view-edit { padding: 0 .5rem; } /* compact ⚙ */
.vs-surface-head-actions .vs-surface-view-save[disabled] { opacity: .55; cursor: not-allowed; } /* clean view → nothing to save */
.vs-surface-head-actions .vs-help-btn.is-active { background: var(--vs-accent); color: var(--vs-accent-ink); border-color: var(--vs-accent); }
.vs-surface-head-actions .vs-editor-new.is-deferred { border-style: dashed; color: var(--vs-muted); } /* honest deferred create */
.vs-surface-head-actions .vs-editor-new[disabled], .vs-surface-head-actions .vs-help-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Live search is primary; the explicit Keresés button is now low-emphasis (search fires while typing). */
.vs-query-search-btn { background: var(--vs-bg); color: var(--vs-muted); font-size: 12px; }

/* View-preset dropdown (Surface View, item 0). */
.vs-surface-view { display: inline-flex; align-items: center; }
.vs-grid-view { font: inherit; }

/* Selection summary buttons (invert reuses the select-all/clear styling). */
.vs-grid-invertsel { font-size: 12px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface); cursor: pointer; padding: .12rem .5rem; }
.vs-grid-invertsel[disabled] { opacity: .55; cursor: not-allowed; }

/* --- Shared view-editor shell (Surface View item 0, CMD-VS-023-004-020) — opened by "Új nézet…" / the ⚙ edit
   affordance; reusable later under System Settings. localStorage only; the honest note states there is no DB save. --- */
.vs-view-editor { max-width: var(--vs-content-max); margin: 0 0 .6rem; padding: .5rem .65rem; border: 1px solid var(--vs-accent); border-radius: var(--vs-radius); background: var(--vs-surface-2); }
.vs-view-editor-head { display: flex; align-items: center; gap: .6rem; }
.vs-view-editor-title { font-weight: 700; }
.vs-view-editor-close { margin-left: auto; border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); cursor: pointer; padding: 0 .5rem; height: 1.7rem; }
.vs-view-editor-note { margin: .35rem 0; font-size: 12px; color: var(--vs-muted); }
.vs-view-editor-namerow { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.vs-view-editor-namelabel { font-size: 13px; color: var(--vs-muted); }
.vs-view-editor-name { flex: 1 1 auto; min-width: 10rem; max-width: 24rem; font: inherit; height: 1.9rem; box-sizing: border-box; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); padding: 0 .45rem; }
.vs-view-editor-summary { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: .35rem 0; font-size: 12px; color: var(--vs-muted); }
.vs-view-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; }
/* consistent control height + rounded radius for every editor action button (item 0 polish C+D). */
.vs-view-editor-actions button { height: 1.9rem; box-sizing: border-box; border-radius: var(--vs-radius-sm); border: 1px solid var(--vs-border); background: var(--vs-surface); cursor: pointer; font-size: 13px; padding: 0 .7rem; }
.vs-view-editor-actions button:hover { background: var(--vs-accent-weak); }
.vs-view-editor-actions button[disabled] { opacity: .55; cursor: not-allowed; }
.vs-view-editor-save { border-color: var(--vs-accent); color: var(--vs-accent); }
.vs-view-editor-delete { border-color: color-mix(in srgb, var(--vs-bad) 40%, var(--vs-surface)); color: var(--vs-bad); }

/* --- Editor record paging (Surface View item VII, CMD-VS-023-004-021) — a compact prev/next row inside the
   first-level editor; a data-row click opens THIS editor (no separate detail drawer). --- */
.vs-editor-nav { display: inline-flex; align-items: center; gap: .5rem; margin: .15rem 0 .35rem; font-size: 13px; }
.vs-editor-prev, .vs-editor-next { height: 1.8rem; box-sizing: border-box; border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); cursor: pointer; padding: 0 .6rem; }
.vs-editor-prev:hover, .vs-editor-next:hover { background: var(--vs-accent-weak); }
.vs-editor-prev[disabled], .vs-editor-next[disabled] { opacity: .5; cursor: not-allowed; }
.vs-editor-pos { color: var(--vs-muted); }

/* --- Generic Export Center (CMD-VS-023-004-022; reworked into a VM-style MODAL in CMD-VS-023-004-023) — the Export
   button opens an OVERLAY dialog (does NOT push the table) with sectioned layout (Sorok hatóköre / Oszlopok /
   Exportálandó oszlopok / Rendezés / Csoportosítás / Kimenet) → a real CSV/JSON download. NO raw CSV <pre> dump. --- */
/* Modális szerkesztő-burok (UI-hullám #17 · editor-modal.mjs) — az export-modal mintája, szélesebb dialógussal. */
/* A NYITOTT MODÁLIS A LEGFELSŐ RÉTEG (D-VS-709, a böngésző-próba lelete 2026-09-15): az üzenet-sávok
   gazdája (`.vs-notify-host`, z-index 90) a jobb felső sarokban áll, a modális bezáró gombja (`×`) a dialógus
   jobb felső sarkában — 1280 px-es képernyőn a kettő EGYMÁSRA ESIK, és a megmaradó (hiba-)üzenetek TAKARTÁK a
   bezáró gombot: a Részletek-modális nem volt bezárható a gombjával. A kaszkád GYŐZTESÉT kell mérni, nem a
   deklarációt (KUKA-065): a modális a felhasználó AKTUÁLIS munkája, ezért fölé kerül (95 > 90); a közben
   érkező üzenet a fátyol mögött látszik, és a modális zárásakor újra elöl van. */
.vs-editmodal-backdrop { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; background: var(--vs-scrim); overflow: auto; }
.vs-editmodal-dialog { position: relative; width: 64rem; max-width: 100%; max-height: 94vh; overflow: auto; background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); box-shadow: var(--vs-shadow-md); padding: .7rem .85rem; }
.vs-editmodal-close { position: absolute; top: .45rem; right: .55rem; z-index: 1; border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); cursor: pointer; padding: 0 .5rem; height: 1.7rem; }
.vs-editmodal-dialog .vs-editor-panel { border: none; padding: 0; margin: 0; }
/* FKR-02 (CMD-028 R66 §4 + R68 · szerződés 21.6): a SZÉLES SZERKESZTŐOLDAL — rögzített réteg a tartalom-terület fölött (a bal és a felső
   helyét a burok méri, editor-modal.mjs); a lista alatta változatlanul él: szűrés, rendezés, oldal és görgetési hely nem mozdul. */
.vs-editor-page { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; overflow: auto; background: var(--vs-bg); padding: .6rem 1rem 0; box-sizing: border-box; } /* alsó belső margó NINCS: a tapadó gombsor a görgetési terület aljához tapad (a margó fölé emelné, és alatta átlátszana a tartalom) */
.vs-editor-page--relation { z-index: 56; } /* a termék fölött nyíló receptszerkesztő oldal (a modálisok 95-ön maradnak fölötte) */
.vs-editor-page-bar { display: flex; align-items: center; gap: .5rem; margin: 0 auto .5rem; max-width: 72rem; }
.vs-editor-page-back { font: inherit; padding: .4rem .8rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-editor-page-back:hover { border-color: var(--vs-accent); color: var(--vs-accent); }
.vs-editor-page-body .vs-editor-panel { max-width: 72rem; margin: 0 auto; box-sizing: border-box; }
/* a szerkesztőoldal fejléce és gombsora: a cím és a rövid szabály-mondat külön sorban; a Mentés/Mégse a lap alján tapad, hosszú
   nézetben is elérhető (ANALYSIS §4: a Mentés gombot semmi nem takarja) */
.vs-editor-page-body .vs-editor-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 0 0 .35rem; }
.vs-editor-page-body .vs-editor-title { font-weight: 700; font-size: 1.05rem; }
.vs-editor-page-body .vs-editor-note { order: 3; flex-basis: 100%; font-size: 12px; color: var(--vs-muted); }
.vs-editor-page-body .vs-editor-actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; padding: .6rem 0 .7rem; background: var(--vs-bg); border-top: 1px solid var(--vs-border); }
.vs-editor-page-body .vs-editor-btn { font: inherit; padding: .45rem 1.1rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-editor-page-body .vs-editor-btn:hover { border-color: var(--vs-accent); }
.vs-editor-page-body .vs-editor-actions .vs-editor-save, .vs-editor-page-body .vs-editor-actions .vs-editor-preview, .vs-editor-page-body .vs-editor-actions .vs-editor-confirm, .vs-editor-page-body .vs-editor-actions .vs-editor-saveClose { background: var(--vs-accent); border-color: var(--vs-accent); color: var(--vs-accent-ink); }
/* a négy nézet fül-sora (editor-views.mjs) — a referencia visszafogott alakja: vékony szegély, kék kiválasztás */
.vs-editor-views { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 .7rem; border-bottom: 1px solid var(--vs-border); }
.vs-editor-view-tab { font: inherit; border: 1px solid transparent; border-bottom: 2px solid transparent; background: transparent; padding: .45rem .85rem; border-radius: var(--vs-radius-sm) var(--vs-radius-sm) 0 0; color: var(--vs-muted); cursor: pointer; margin-bottom: -1px; }
.vs-editor-view-tab.is-active { color: var(--vs-ink); background: var(--vs-surface); border-color: var(--vs-border); border-bottom: 2px solid var(--vs-accent); }
.vs-editor-view[hidden] { display: none !important; }
.vs-editor-block-fold { margin: .4rem 0; }
.vs-editor-block-fold > summary { cursor: pointer; color: var(--vs-muted); padding: .35rem 0; }
/* a lebegő szkennelő gomb nem fedheti a szerkesztő és az űrlap gombjait (ANALYSIS §4) — szerkesztés közben nem látszik */
body:has(.vs-editor-page, .vs-editmodal-backdrop, .vs-opform, .vs-recipe-panel) .vs-scan-quick { display: none !important; }
@media (max-width: 700px) {
  .vs-editor-page { padding: .4rem .6rem 0; }
  .vs-editor-view-tab { flex: 1 1 auto; text-align: center; padding: .55rem .4rem; }
}

.vs-export-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; background: var(--vs-scrim); overflow: auto; }
.vs-export-dialog { width: 36rem; max-width: 100%; max-height: 92vh; overflow: auto; background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); box-shadow: var(--vs-shadow-md); padding: .7rem .85rem; }
.vs-export-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.vs-export-title { font-weight: 700; font-size: 15px; }
.vs-export-close { margin-left: auto; border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); cursor: pointer; padding: 0 .5rem; height: 1.7rem; }
.vs-export-entity { font-size: 12px; color: var(--vs-muted); margin-bottom: .4rem; }
.vs-export-body { display: flex; flex-direction: column; gap: .15rem; }
.vs-export-section { padding: .4rem 0; border-top: 1px solid var(--vs-border); }
.vs-export-sectiontitle { margin: 0 0 .3rem; font-size: 11px; font-weight: 700; color: var(--vs-muted); text-transform: uppercase; letter-spacing: .03em; }
.vs-export-scope-line, .vs-export-colmode-line, .vs-export-format-line, .vs-export-sort-line, .vs-export-group-line, .vs-export-col-line {
  display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; cursor: pointer; margin-right: 1rem;
}
.vs-export-scope-line.is-disabled, .vs-export-format-line.is-disabled, .vs-export-group-line.is-disabled { opacity: .5; cursor: not-allowed; }
.vs-export-colquick { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.vs-export-colbtn { font-size: 12px; border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); cursor: pointer; padding: .12rem .5rem; }
.vs-export-colbtn:hover { background: var(--vs-accent-weak); }
.vs-export-collist { display: flex; flex-wrap: wrap; gap: .15rem 1rem; max-height: 9rem; overflow-y: auto; padding: .25rem .35rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-bg); }
.vs-export-note, .vs-export-groupnote { margin: .35rem 0 .1rem; font-size: 12px; color: var(--vs-muted); }
.vs-export-actions { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--vs-border); }
.vs-export-run { height: 1.9rem; box-sizing: border-box; border: 1px solid var(--vs-accent); color: var(--vs-accent-ink); background: var(--vs-accent); border-radius: var(--vs-radius-sm); cursor: pointer; font-size: 13px; padding: 0 .9rem; }
.vs-export-run:hover { filter: brightness(.96); }
.vs-export-cancel { height: 1.9rem; box-sizing: border-box; border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); cursor: pointer; font-size: 13px; padding: 0 .8rem; }
.vs-export-status { font-size: 13px; margin-left: auto; }
.vs-export-status-done { color: var(--vs-ok); }
.vs-export-status-unavailable, .vs-export-status-error, .vs-export-status-invalid, .vs-export-status-no_columns { color: var(--vs-bad); }
.vs-export-status-deferred { color: var(--vs-muted); }
@media (max-width: 40rem) { .vs-export-dialog { width: 100%; } }

/* (CMD-VS-023-004-026: the per-tab surface-AI modal/button was removed — the AI is unified into the top global
   "AI / parancs" command bar; its styles live in styles.css. No .vs-ai-* modal here.) */

/* --- Detail panel as a non-jumping right-side drawer (CMD-VS-023-004-007) ---
   Fixed to the right + out of normal flow, so opening it or navigating prev/next does NOT push or jump the table.
   A stable body min-height prevents the panel from collapsing/re-expanding while the next record loads. */
.vs-detail-panel { position: fixed; top: 5.5rem; right: 1rem; width: 26rem; max-width: calc(100vw - 2rem); max-height: 78vh; overflow: auto; z-index: 30; margin: 0; box-shadow: var(--vs-shadow-md); }
.vs-detail-head { position: sticky; top: 0; }
.vs-detail-body { min-height: 12rem; }
@media (max-width: 56rem) { .vs-detail-panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-height: 60vh; border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0; } }

/* CÉGVÁLTÓ a fejlécben (2026-07-29) — a nyelvválasztó mellett; szűk kijelzőn is olvasható marad. */
.vs-tenant-host { display: inline-flex; align-items: center; margin-left: 1rem; }
.vs-tenant-switch { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.vs-tenant-label { opacity: .75; }
.vs-tenant-current { font-weight: 600; }
.vs-tenant-note { opacity: .6; font-size: .8rem; }
.vs-tenant-select { padding: .15rem .35rem; border-radius: var(--vs-radius-sm); }
/* KILÉPÉS (RF-039, R19) — bejelentkezett módban a cégváltó mellett; a munkamenetet a szerveren zárja. */
.vs-logout-btn { font: inherit; font-size: .8rem; padding: .1rem .5rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-logout-btn:disabled { opacity: .6; cursor: default; }

/* TERMÉK-RÁCS RIPORTHOZ (D-VS-443) — a Termékek oldal darabjai riport-képernyőn, szerkesztés nélkül. */
.vs-prodpick-search { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; flex-wrap: wrap; }
.vs-prodpick-search .vs-query-search { min-width: 18rem; }
.vs-prodpick-count { font-size: 13px; color: var(--vs-muted); }
.vs-prodpick-clear { font: inherit; font-size: 12px; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); padding: .15rem .5rem; cursor: pointer; }
.vs-prodpick-status { font-size: 13px; color: var(--vs-muted); margin: .3rem 0; }
.vs-prodreport-dialog .vs-export-col-line { display: flex; align-items: center; gap: .45rem; padding: .25rem .1rem; }
/* D-VS-685 (operátori lelet): a SOR-IRÁNYT KI KELL MONDANI. Ez a szabály sor-elrendezésre készült
   (felirat balra, vezérlő jobbra), de a `flex-direction`-t nem állította be — az alap `.vs-opfield`
   viszont OSZLOP (process-editor.css), és azt itt semmi nem írta felül. Oszlopban ugyanez a két
   tulajdonság mást jelent: az `align-items:center` KÖZÉPRE tolja a feliratot, a `space-between`
   pedig SZÉTFESZÍTI a mezőt (böngészőben mérve: a cég-mező 256 px magas volt, a felirat az 547 px-es
   doboz 260. pixelénél kezdődött). Egy hiányzó sor, két tünet — KUKA-065: a deklaráció hatása a
   KÖRNYEZETÉTŐL függ, ezért a megléte nem mérés. */
.vs-prodreport-inputs .vs-opfield { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .6rem; padding: .3rem .1rem; }
/* A felirat a sor BAL oldalán áll, és nem törik szét: így a két legördülő egy vonalban indul. */
.vs-prodreport-inputs .vs-opfield > label { flex: 0 0 auto; min-width: 6rem; margin: 0; }
/* D-VS-647: a panel KÉT hatókör-választója (cég · raktár) — a közös combobox befogadója. */
.vs-prodreport-inputs .vs-prodreport-combohost { flex: 1 1 14rem; min-width: 12rem; }
.vs-prodreport-inputs .vs-prodreport-combohost .vs-combo { width: 100%; }
/* D-VS-646: a RÁCSTÓL kapott fordulónap — kiírt tény, nem újra kérdezett mező. */
.vs-prodreport-fixeddate { display: block; }
.vs-prodreport-fixeddate-note { font-size: 12px; color: var(--vs-muted); }

/* TÖMEGES SZERKESZTÉS panel (D-VS-445) — a „változtatom" pipa + a közös mező-vezérlő egy soron. */
.vs-bulk-dialog { max-width: 44rem; }
.vs-bulk-row { display: grid; grid-template-columns: 1.4rem 12rem 1fr; align-items: center; gap: .5rem; padding: .2rem .1rem; }
.vs-bulk-label { font-size: 13px; color: var(--vs-ink); }
.vs-bulk-control input, .vs-bulk-control select { width: 100%; font: inherit; font-size: 13px; }
.vs-bulk-cert { width: 100%; font: inherit; font-size: 13px; margin-top: .2rem; }
.vs-query-bulk-btn { font: inherit; font-size: 12px; padding: .15rem .5rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-query-bulk-btn.is-deferred { opacity: .55; }