/* Valach System (VS) v2 — operation-editor ("Új folyamat") form styles (PR-VS-055 P0-C). Token-pure:
   only var(--vs-*) — the canonical tokens in styles.css. Same shell the process detail/edit view uses. */

.vs-opform { max-width: var(--vs-content-max); background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); overflow: hidden; }
.vs-opform-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .85rem; border-bottom: 1px solid var(--vs-border); background: var(--vs-surface-2); flex-wrap: wrap; }
.vs-opform-title { display: flex; align-items: baseline; gap: .5rem; }
.vs-opform-title h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.vs-opform-title .vs-op-sub { color: var(--vs-muted); font-size: .8rem; }

/* action-screen top bar: '← Vissza' left, Kedvencek ★ right (POS + all three create forms carry the same star) */
.vs-action-topbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }

.vs-opbody { padding: .9rem .85rem; }
.vs-ophgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem 1rem; margin-bottom: .4rem; } /* header fields flow across the full width */
.vs-opfield { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.vs-opfield > label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vs-muted); font-weight: 600; }
.vs-opfield input[type=date] { font: inherit; color: var(--vs-ink); background: var(--vs-surface); border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); padding: .4rem .5rem; }
.vs-opfield input[type=date]:focus { outline: 2px solid var(--vs-accent); border-color: var(--vs-accent); }
.vs-op-hidden { display: none !important; }

.vs-opeyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vs-muted); font-weight: 700; margin: 1rem 0 .45rem; display: flex; align-items: center; gap: .5rem; }
.vs-opeyebrow .vs-op-dir { width: 1rem; height: 1rem; border-radius: var(--vs-radius-sm); display: inline-grid; place-items: center; font-size: .7rem; color: var(--vs-accent-ink); }
.vs-opeyebrow .vs-op-in { background: var(--vs-accent); }
.vs-opeyebrow .vs-op-out { background: var(--vs-ok); }

.vs-oplines { border: 1px solid var(--vs-border); border-radius: var(--vs-radius); overflow: visible; }
.vs-oplines table { width: 100%; border-collapse: collapse; }
.vs-oplines thead th { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vs-muted); font-weight: 600; text-align: left; padding: .5rem .55rem; background: var(--vs-surface-2); border-bottom: 1px solid var(--vs-border); }
.vs-oplines td { padding: .35rem .45rem; border-bottom: 1px solid var(--vs-border); vertical-align: middle; }
.vs-oplines tr:last-child td { border-bottom: 0; }
.vs-oplines td.vs-op-rownum { color: var(--vs-muted); width: 1.6rem; text-align: center; font-family: var(--vs-mono); }
.vs-oplines td.vs-op-unit { width: 3.4rem; color: var(--vs-muted); }
.vs-oplines td.vs-op-act { width: 2rem; text-align: center; }
.vs-oplines th.vs-op-numcol, .vs-oplines td.vs-op-numcol { text-align: right; width: 6rem; }
.vs-op-qty { text-align: right; font-family: var(--vs-mono); font: inherit; width: 100%; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); padding: .35rem .4rem; }
.vs-op-qty:focus { outline: 2px solid var(--vs-accent); border-color: var(--vs-accent); }
.vs-op-qty-short { border-color: var(--vs-bad); background: var(--vs-bad-weak); color: var(--vs-bad); } /* feasibility: nincs elég készlet */
/* §14/B: OUTPUT-sor „új LOT-szám" beviteli mező (a post SZÜLETI belőle a lotot). Balra zárt szöveg, qty-mintára. */
.vs-op-lotcode { font: inherit; font-family: var(--vs-mono); width: 100%; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); padding: .35rem .4rem; }
.vs-op-lotcode:focus { outline: 2px solid var(--vs-accent); border-color: var(--vs-accent); }
/* §14/E3: OUTPUT LOT-cella input + „Generál" gomb egy sorban (a tenant-formátumból generál atomi kódot). */
.vs-oplotgen { display: flex; gap: .3rem; align-items: center; }
.vs-oplotgen .vs-op-lotcode { flex: 1; min-width: 0; width: auto; }
.vs-op-gen { font: inherit; font-size: .72rem; white-space: nowrap; background: var(--vs-surface-2); border: 1px solid var(--vs-border-strong); color: var(--vs-muted); border-radius: var(--vs-radius-sm); padding: .35rem .5rem; cursor: pointer; }
.vs-op-gen:hover { border-color: var(--vs-accent); color: var(--vs-accent); }
.vs-op-gen:disabled { opacity: .5; cursor: default; }
.vs-op-rowdel { border: 0; background: none; color: var(--vs-muted); cursor: pointer; font-size: 1rem; line-height: 1; border-radius: var(--vs-radius-sm); padding: .1rem .35rem; }
.vs-op-rowdel:hover { color: var(--vs-bad); background: var(--vs-bad-weak); }
.vs-opaddrow { margin: .5rem 0 .1rem; background: none; border: 1px dashed var(--vs-border-strong); color: var(--vs-muted); font: inherit; font-size: .8rem; padding: .45rem .7rem; border-radius: var(--vs-radius-sm); cursor: pointer; width: 100%; }
.vs-opaddrow:hover { border-color: var(--vs-accent); color: var(--vs-accent); }

/* LOT slot — LEGACY dead-cell stílus (a §14/B óta a LOT-cella élő: OUTPUT=vs-op-lotcode input, INPUT=vs-combo).
   Megtartva, ha később „függő" jelzésre kell; a create-űrlap már nem használja. */
.vs-oplot { display: inline-flex; align-items: center; justify-content: space-between; gap: .4rem; color: var(--vs-muted); font-family: var(--vs-mono); font-size: .78rem; border: 1px dashed color-mix(in srgb, var(--vs-warn) 45%, var(--vs-border)); border-radius: var(--vs-radius-sm); padding: .3rem .5rem; width: 100%; }
.vs-oplot .vs-op-tag { font-size: .58rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vs-warn); background: var(--vs-warn-weak); border-radius: var(--vs-radius-sm); padding: .05rem .35rem; font-family: var(--vs-font); font-weight: 700; }

.vs-opfoot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .8rem .85rem; border-top: 1px solid var(--vs-border); background: var(--vs-surface-2); flex-wrap: wrap; }
.vs-opfoot .vs-op-hint { color: var(--vs-muted); font-size: .78rem; }
.vs-opfoot-actions { display: flex; gap: .5rem; }

/* inline mentés-visszajelzés az űrlap alatt (a shell felső státusz-sávja magas űrlapnál képernyőn kívül esik) */
.vs-op-status { display: none; margin-top: .7rem; padding: .55rem .75rem; border-radius: var(--vs-radius-sm); background: var(--vs-warn-weak); color: var(--vs-ink); border: 1px solid var(--vs-warn); font-size: .88rem; }
.vs-op-status.is-shown { display: block; }

/* subtle text-link button (e.g. a bound-process drill-through in a table cell) */
.vs-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--vs-accent); cursor: pointer; text-decoration: underline; }

/* "Új folyamat" type picker — the six operation types (3 process + 3 sale) as cards */
.vs-op-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; margin-top: .8rem; max-width: 760px; }
.vs-op-typecard { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; padding: .9rem 1rem; background: var(--vs-surface); border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius); cursor: pointer; font: inherit; color: var(--vs-ink); }
.vs-op-typecard:hover { border-color: var(--vs-accent); box-shadow: var(--vs-shadow-sm); }
.vs-op-typecard-label { font-weight: 600; font-size: 1rem; }
.vs-op-typecard-sub { color: var(--vs-muted); font-size: .82rem; }
/* NEVESÍTETT függő kártya (D-VS-620): kiszürkítve áll, és kimondja, mire vár (KUKA-041: néma díszgomb tilos) */
.vs-op-typecard-pending { opacity: .55; cursor: not-allowed; }
.vs-op-typecard-pending:hover { border-color: var(--vs-border-strong); box-shadow: none; }
.vs-op-typecard-pendingnote { color: var(--vs-muted); font-size: .78rem; font-style: italic; margin-top: .25rem; }

/* Bolti eladás (POS) "villám" képernyő — scan-first, category chips, product grid, sticky cart */
.vs-pos { display: grid; grid-template-columns: 1fr 22rem; gap: 1rem; align-items: start; }
.vs-pos-pick { display: flex; flex-direction: column; gap: .7rem; }
.vs-pos-scan { display: flex; gap: .5rem; }
.vs-pos-scaninput { flex: 1; font: inherit; font-size: 1.05rem; padding: .6rem .7rem; border: 2px solid var(--vs-accent); border-radius: var(--vs-radius); background: var(--vs-surface); color: var(--vs-ink); }
.vs-pos-scaninput:focus { outline: 3px solid var(--vs-accent-weak); }
.vs-pos-whchip { font: inherit; font-size: .82rem; padding: .3rem .6rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-pill); background: var(--vs-surface); color: var(--vs-muted); cursor: pointer; white-space: nowrap; }
.vs-pos-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.vs-pos-cat { font: inherit; font-size: .84rem; padding: .35rem .7rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-pill); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-pos-cat.is-on { background: var(--vs-accent); color: var(--vs-accent-ink); border-color: var(--vs-accent); }
.vs-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.vs-pos-prodbtn { display: flex; flex-direction: column; gap: .15rem; min-height: 3.6rem; padding: .5rem .6rem; text-align: left; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; font: inherit; }
.vs-pos-prodbtn:hover { border-color: var(--vs-accent); box-shadow: var(--vs-shadow-sm); }
.vs-pos-prodname { font-weight: 600; font-size: .9rem; }
.vs-pos-prodcode { font-family: var(--vs-mono); font-size: .74rem; color: var(--vs-muted); }
.vs-pos-cart { display: flex; flex-direction: column; gap: .6rem; position: sticky; top: .5rem; background: var(--vs-surface-2); border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); padding: .8rem; }
.vs-pos-cartlist { display: flex; flex-direction: column; gap: .4rem; max-height: 46vh; overflow-y: auto; }
.vs-pos-cartrow { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; align-items: center; padding-bottom: .4rem; border-bottom: 1px solid var(--vs-border); }
.vs-pos-cartname { font-weight: 600; font-size: .9rem; grid-column: 1 / -1; }
.vs-pos-stepper { display: flex; align-items: center; gap: .3rem; }
.vs-pos-step { width: 1.9rem; height: 1.9rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); font-size: 1.1rem; cursor: pointer; }
.vs-pos-qty { min-width: 1.6rem; text-align: center; font-weight: 600; }
.vs-pos-price { width: 5rem; font: inherit; padding: .25rem .35rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); text-align: right; background: var(--vs-surface); color: var(--vs-ink); }
.vs-pos-linetotal { text-align: right; font-variant-numeric: tabular-nums; min-width: 5rem; }
.vs-pos-total { font-size: 1.3rem; font-weight: 700; text-align: right; color: var(--vs-ink); }
.vs-pos-paytoggle { display: flex; gap: .4rem; }
.vs-pos-paybtn { flex: 1; font: inherit; padding: .45rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-pos-paybtn.is-on { background: var(--vs-accent-weak); border-color: var(--vs-accent); color: var(--vs-accent); font-weight: 600; }
.vs-pos-sell { font-size: 1.1rem; padding: .7rem; }
@media (max-width: 720px) { .vs-pos { grid-template-columns: 1fr; } .vs-pos-cart { position: static; } }

@media (max-width: 640px) { .vs-ophgrid { grid-template-columns: 1fr; } }

/* v3 §13/2 — Egységár-oszlop csak az árazható típusnál (CFG.price); a zárolt ár jelzése a részletezőn */
.vs-op-nopricing .vs-op-pricecol { display: none; }
.vs-price-locked { opacity: .75; }

/* SZEREP-FELAJÁNLÁS sáv (2026-08-02) — a folyamat-részletezőn, a fejléc alatt. Halk, de nem
   észrevétlen: javaslat, nem riasztás. A gomb csak akkor van ott, ha a szerver el is fogadná. */
.vs-role-suggest { margin: .6rem 0 1rem; padding: .7rem .9rem; border: 1px solid var(--vs-accent); border-left-width: 4px; border-radius: var(--vs-radius-sm); background: var(--vs-accent-weak); }
.vs-role-suggest-msg { margin: 0 0 .55rem; color: var(--vs-ink); }
.vs-role-suggest-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* D-VS-589 (operátori 6. pont): a BEMENET és a KIMENET tábla oszlopai EGYMÁS FÖLÖTT azonos
   szélességűek — fixed layout + azonos fejléc-osztályok = a két tábla rácsa együtt áll.
   A sorokon belül az oszlopok a várható adat-mennyiséghez igazodnak (szám-oszlop keskeny,
   termék széles) — a th-osztályok szélességei adják. */
.vs-oplines table { table-layout: fixed; }
.vs-oplines th.vs-op-rownum { width: 1.6rem; }
.vs-oplines th, .vs-oplines td { overflow: hidden; text-overflow: ellipsis; }
.vs-oplines th.vs-op-act { width: 2rem; }
/* LOT-oszlop: szélesebb, mint a mennyiség, keskenyebb, mint a terméknév (operátori példa).
   D-VS-626: a szabály OSZTÁLYRA hivatkozik, nem sorszámra — a korábbi `:nth-child(4)` alak a
   TULAJDONOS-oszlop beszúrásakor némán egy másik oszlopra csúszott volna át (KUKA-065: a
   deklaráció hatása a környezettől függ, tehát a deklaráció megléte nem mérés). */
.vs-oplines th.vs-op-lotcol, .vs-oplines td.vs-op-lotcol { width: 8.5rem; }

/* D-VS-626 — SORONKÉNTI TULAJDONOS: a Tulajdonos-oszlop csak akkor látszik, ha az oldal
   „soronként megadva" tulajdonos-módban áll. EGY kapcsoló a szekció dobozán rejti a FEJLÉCET és a
   CELLÁKAT együtt — külön billentve elcsúsznának egymáshoz képest. */
.vs-op-noownercol .vs-op-ownercol { display: none; }
.vs-oplines th.vs-op-ownercol, .vs-oplines td.vs-op-ownercol { width: 11rem; }
.vs-oplines td.vs-op-ownercol .vs-op-hint { display: block; font-size: .62rem; }

/* R62 §7 (MOBIL): a fix szélességű oszlopok (sorszám · LOT · szabad menny. · mennyiség · egység · törlés ≈ 27,5rem) keskeny
   kijelzőn önmagukban szélesebbek a táblánál, és a fixed layout a TERMÉK és a RAKTÁR oszlopot nullára préselte (a LOT-cella rájuk
   csúszott, terméket választani sem lehetett — a telefonos képernyő-próba lelete; a main-en is így volt). Keskeny képernyőn a tábla
   a SAJÁT dobozában görget vízszintesen, és a két széles oszlop olvasható szélességet kap. A választó lista `position: fixed`
   (reference-combobox), tehát a görgető doboz nem vágja le. */
@media (max-width: 860px) {
  .vs-oplines { overflow-x: auto; }
  .vs-oplines table { min-width: 46rem; }
}
/* FKR-02 (CMD-028 R68 · ANALYSIS §4 · szerződés 21.9): TELEFONON a tételsor EGYMÁS ALATTI mezőcsoport — a terméknév teljes szélességű,
   a többi mező a saját feliratával kettesével (a cella `data-label`-je); a tábla nem görget vízszintesen. 701–860 px között a R62 §7
   görgető doboza marad (ott a sor egy vonalban még olvasható). A rejtett oszlopok (tulajdonos · ár) szabálya erősebb, tehát érvényes. */
@media (max-width: 700px) {
  .vs-oplines { overflow-x: visible; }
  .vs-oplines table { min-width: 0; table-layout: auto; }
  .vs-oplines thead { display: none; }
  .vs-oplines tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .6rem; padding: .5rem .45rem; border-bottom: 1px solid var(--vs-border); }
  .vs-oplines tbody tr:last-child { border-bottom: 0; }
  .vs-oplines td { display: block; border-bottom: 0; padding: .1rem 0; width: auto; text-align: left; overflow: visible; white-space: normal; }
  .vs-oplines th.vs-op-numcol, .vs-oplines td.vs-op-numcol { width: auto; text-align: left; }
  .vs-oplines td[data-label]::before { content: attr(data-label); display: block; font-size: .62rem; color: var(--vs-muted); text-transform: uppercase; letter-spacing: .04em; }
  .vs-oplines td.vs-op-prodcol { grid-column: 1 / -1; }
  .vs-oplines td.vs-op-rownum { display: none; }
  .vs-oplines td.vs-op-act { grid-column: 1 / -1; justify-self: end; }
  .vs-oplines input, .vs-oplines select { font-size: 16px; max-width: 100%; box-sizing: border-box; }
  .vs-opfoot-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
  .vs-opfoot-actions .vs-btn { flex: 1 1 10rem; min-height: 2.5rem; }
}
.vs-op-making { margin: .3rem 0 .6rem; }
.vs-op-making-note { margin: .2rem 0; }
.vs-op-childstrip { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .35rem 0; padding: .45rem .6rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-surface-2); }
.vs-op-childstrip .vs-op-qty { width: 6rem; }
.vs-op-childstrip[hidden] { display: none; } /* a rejtett arány-sáv nem látszhat üres keretként (a display:flex felülírná a hidden-t) */
.vs-op-worksec { margin-top: .6rem; }
.vs-op-workrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .3rem 0; }
.vs-op-workrow > b { font-weight: 600; }
.vs-op-matempty { margin: .2rem 0 .4rem; }