/* Valach System (VS) v2 — minimal tab-workspace shell styles. */
/* ══ CANONICAL DESIGN TOKENS ══ the ONE source of colour / radius / type / elevation for the WHOLE app.
   Nothing may be hardcoded outside this block (verify:design-tokens enforces it). Re-theming = change a
   token here, and every surface follows — that is the whole point of tokenising (operator, 2026-07-16).
   The 4 legacy tokens (--vs-border/-bg/-accent/-muted) keep their exact values; the rest is additive. */
:root {
  /* neutrals */
  --vs-bg:#f6f7f9; --vs-surface:#ffffff; --vs-surface-2:#f5f7fa;
  --vs-ink:#1c2330; --vs-muted:#6b7280; --vs-border:#d4d7dd; --vs-border-strong:#c2c7d0;
  /* accent — the ONE brand colour */
  --vs-accent:#2d5bd7; --vs-accent-ink:#ffffff; --vs-accent-weak:#eef2fb;
  /* semantic — one each + a weak tint (consolidates the old scattered reds/greens/ambers) */
  --vs-ok:#1f883d; --vs-ok-weak:#eaf5ee;
  --vs-warn:#9a6700; --vs-warn-weak:#fbf3dd;
  --vs-bad:#b3261e; --vs-bad-weak:#fdeeee;
  /* radius scale — small (badges/labels), default (fields/buttons/rows), large (panels/modals), pill */
  --vs-radius-sm:6px; --vs-radius:8px; --vs-radius-lg:12px; --vs-radius-pill:999px;
  /* type */
  --vs-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --vs-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* elevation + scrim (opacity) */
  --vs-shadow-sm:0 1px 2px rgba(20,30,45,.06);
  --vs-shadow-md:0 8px 26px -12px rgba(20,30,45,.20);
  --vs-scrim:rgba(15,22,32,.42);
  /* graph decorative accents (the tuned reverse/lifecycle-graph palette — kept as tokens) */
  --vs-graph-edge:#e8926a; --vs-graph-item:#d9a441;
  /* layout — the ONE shared content-column width cap; `none` = full width (operator 2026-07-18: every surface
     should use the full width like Bolti eladás/POS, and the ★ then aligns to the same right edge everywhere). */
  --vs-content-max:none;
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 var(--vs-font); color:var(--vs-ink); background:var(--vs-bg); }
button { font:inherit; cursor:pointer; }

.vs-header { display:flex; align-items:center; justify-content:space-between; padding:.5rem 1rem; background:var(--vs-surface); border-bottom:1px solid var(--vs-border); }
.vs-brand { font-weight:700; }
.vs-lang { display:flex; align-items:center; gap:.4rem; color:var(--vs-muted); }
.vs-lang button { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.2rem .5rem; }

.vs-command { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:var(--vs-surface); border-bottom:1px solid var(--vs-border); }
.vs-command-label { color:var(--vs-muted); }
.vs-command input { flex:1; min-width:12rem; padding:.45rem .6rem; border:1px solid var(--vs-border); border-radius:var(--vs-radius); }
.vs-command button { border:1px solid var(--vs-accent); background:var(--vs-accent); color:var(--vs-accent-ink); border-radius:var(--vs-radius); padding:.45rem .9rem; }
.vs-command-status { color:var(--vs-muted); min-width:8rem; }
/* Approval / teaching controls (CMD-005D). */
.vs-command-approve { display:inline-flex; gap:.4rem; }
.vs-approve-btn { border-radius:var(--vs-radius); padding:.3rem .7rem; cursor:pointer; font-size:.85rem; }
.vs-approve-btn.vs-ok { border:1px solid var(--vs-ok); background:var(--vs-ok); color:var(--vs-accent-ink); }
.vs-approve-btn.vs-reject { border:1px solid var(--vs-bad); background:var(--vs-surface); color:var(--vs-bad); }
.vs-approve-btn.vs-refine { border:1px solid var(--vs-accent); background:var(--vs-surface); color:var(--vs-accent); }
.vs-cmd-cancel { border:1px solid var(--vs-border) !important; background:var(--vs-surface) !important; color:var(--vs-muted) !important; }
/* Correction-session panel (CMD-005G). */
.vs-command.vs-correcting { background:var(--vs-warn-weak); }
.vs-correction { padding:.4rem 1rem; background:var(--vs-warn-weak); border-bottom:1px solid var(--vs-border); font-size:.85rem; }
.vs-corr-orig { font-weight:600; margin-bottom:.2rem; }
.vs-corr-row { color:var(--vs-muted); padding:.1rem 0; }
/* Two-section correction UI (CMD-005J). */
.vs-command.vs-correcting input:disabled { background:var(--vs-surface-2); color:var(--vs-muted); }
.vs-attempt-row { padding:.25rem .5rem; margin:.2rem 0; border-left:3px solid var(--vs-border-strong); background:var(--vs-surface); border-radius:var(--vs-radius-sm); }
.vs-corr-inputrow { display:flex; gap:.5rem; margin-top:.4rem; }
.vs-corr-inputrow input { flex:1; min-width:12rem; padding:.4rem .6rem; border:1px solid var(--vs-border); border-radius:var(--vs-radius); }
.vs-corr-actionrow { display:flex; gap:.4rem; margin-top:.4rem; }

.vs-main { display:flex; min-height:calc(100vh - 7.5rem); }
/* A menu SZELESSEGE fix — a `flex-shrink:0` nelkul a szeles tablazatok mellett osszepreselodott
   (ez volt a mobil-lelet gyokere, de asztali gepen is helyes igy). */
.vs-nav { width:14rem; flex:0 0 14rem; padding:.75rem; background:var(--vs-surface); border-right:1px solid var(--vs-border); }
.vs-nav-toggle { display:none; }
.vs-nav-scrim { display:none; }
.vs-nav-group { text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:var(--vs-muted); margin:.6rem 0 .25rem; }
.vs-nav-item { display:block; width:100%; text-align:left; border:none; background:none; padding:.35rem .4rem; border-radius:var(--vs-radius-sm); }
.vs-nav-item:hover { background:var(--vs-bg); }
/* MŰVELETEK flyout tree: parent with a right-arrow; hover opens a submenu to the right (nested submenus cascade). */
.vs-nav-flyitem { position:relative; }
.vs-nav-item.vs-nav-has-kids { display:flex; align-items:center; }
.vs-nav-fly-arrow { margin-left:auto; padding-left:.4rem; opacity:.55; font-size:11px; }
.vs-nav-flyout { display:none; position:absolute; left:calc(100% - .2rem); top:0; z-index:80; min-width:12rem; background:var(--vs-surface); border:1px solid var(--vs-border-strong); border-radius:var(--vs-radius); box-shadow:var(--vs-shadow-md); padding:.25rem; }
.vs-nav-flyitem:hover > .vs-nav-flyout { display:block; }
.vs-nav-item.is-deferred { color:var(--vs-muted); cursor:not-allowed; opacity:.7; }
/* Kedvencek (favorites) — left-nav block: a row of pinned filtered views/actions */
.vs-nav-favorites { margin-bottom:.4rem; }
.vs-nav-fav { display:flex; align-items:center; gap:.2rem; }
.vs-nav-fav-link { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-nav-fav-rename, .vs-nav-fav-remove { border:none; background:none; color:var(--vs-muted); cursor:pointer; padding:.2rem .3rem; border-radius:var(--vs-radius-sm); font-size:11px; }
.vs-nav-fav-rename:hover { background:var(--vs-accent-weak); color:var(--vs-accent); }
.vs-nav-fav-remove:hover { background:var(--vs-bad-weak); color:var(--vs-bad); }

/* min-width:0 (#15, D-VS-264): flex-item shrink-őr — nélküle a széles blokkok (pl. a termék-lista Oszlopok
   chip-sora) max-content-re feszítik az OLDALT, és a belső overflow-x görgetők (colzone/tablewrap) sosem
   lépnek életbe. Ezzel a görgető a blokkon BELÜL él. */
.vs-workspace { flex:1; display:flex; flex-direction:column; min-width:0; }
.vs-tabbar { display:flex; gap:.25rem; padding:.5rem .75rem 0; border-bottom:1px solid var(--vs-border); background:var(--vs-surface); }
.vs-tab { display:flex; align-items:center; gap:.4rem; border:1px solid var(--vs-border); border-bottom:none; background:var(--vs-bg); padding:.35rem .7rem; border-radius:var(--vs-radius) var(--vs-radius) 0 0; }
.vs-tab.is-active { background:var(--vs-surface); font-weight:600; }
.vs-tab-close { color:var(--vs-muted); }
.vs-tabcontent { padding:1rem 1.25rem; }
.vs-tabcontent h1 { font-size:1.25rem; margin:.2rem 0 .6rem; }
.vs-tutor { color:var(--vs-muted); max-width:54rem; }
.vs-empty, .vs-placeholder, .vs-unavailable, .vs-loading { color:var(--vs-muted); }

.vs-table { border-collapse:collapse; width:100%; max-width:var(--vs-content-max); background:var(--vs-surface); }
.vs-table th, .vs-table td { border:1px solid var(--vs-border); padding:.4rem .6rem; text-align:left; }
.vs-table thead th { background:var(--vs-bg); }
.vs-row { cursor:pointer; }
.vs-row:hover { background:var(--vs-accent-weak); }
.vs-row.is-selected { background:color-mix(in srgb, var(--vs-accent) 15%, var(--vs-surface)); }

/* Read-only secondary detail panel (doctrine 09 §7) — bound to the list tab, not a new tab. */
.vs-detail-panel { max-width:var(--vs-content-max); margin:0 0 1rem; border:1px solid var(--vs-accent); border-radius:var(--vs-radius-lg); background:var(--vs-surface); overflow:hidden; }
.vs-detail-head { display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; background:var(--vs-accent-weak); border-bottom:1px solid var(--vs-border); }
.vs-detail-title { font-weight:600; }
.vs-detail-ro { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--vs-muted); border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.05rem .35rem; }
.vs-detail-pos { color:var(--vs-muted); }
.vs-detail-head button { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.2rem .55rem; }
.vs-detail-head button:disabled { opacity:.45; cursor:default; }
.vs-detail-close { margin-left:auto; }
.vs-detail-body { padding:.6rem .8rem; }
.vs-detail-fields { display:grid; grid-template-columns:12rem 1fr; gap:.25rem .75rem; margin:0; }
.vs-detail-fields dt { color:var(--vs-muted); }
.vs-detail-fields dd { margin:0; }

/* Language switch active state + visible multilingual labels proof (PR-VS-012, D-VS-046). */
.vs-lang button.is-active { background:var(--vs-accent); color:var(--vs-accent-ink); border-color:var(--vs-accent); font-weight:600; }
.vs-i18n-panel { max-width:var(--vs-content-max); margin:0 0 1rem; border:1px solid var(--vs-border); border-radius:var(--vs-radius-lg); background:var(--vs-surface); overflow:hidden; }
.vs-i18n-head { display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; background:var(--vs-accent-weak); border-bottom:1px solid var(--vs-border); }
.vs-i18n-title { font-weight:600; }
.vs-i18n-lang { margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.05em; color:var(--vs-accent-ink); background:var(--vs-accent); border-radius:var(--vs-radius-sm); padding:.1rem .4rem; }
.vs-i18n-chips { display:flex; flex-wrap:wrap; gap:.3rem; padding:.6rem .7rem; }
.vs-i18n-chip { font-size:12px; border:1px solid var(--vs-border); border-radius:var(--vs-radius-pill); padding:.12rem .55rem; background:var(--vs-bg); }
.vs-i18n-chip.vs-i18n-col { border-color:var(--vs-accent); }
.vs-i18n-chip.vs-i18n-status { color:var(--vs-muted); }

/* AI draft assistant (PR-VS-015, D-VS-049) — advisory draft preview + apply-to-form. AI never writes. */
.vs-aidraft { max-width:var(--vs-content-max); margin:0 0 1rem; border:1px dashed var(--vs-accent); border-radius:var(--vs-radius-lg); background:var(--vs-surface-2); padding:.6rem .8rem; }
.vs-aidraft-title { font-weight:600; }
.vs-aidraft-subtitle { margin-top:.4rem; color:var(--vs-muted); }
.vs-aidraft-inputrow { display:flex; gap:.4rem; margin-top:.4rem; }
.vs-aidraft-input { flex:1; border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.3rem .5rem; }
.vs-aidraft-run, .vs-aidraft-apply, .vs-aidraft-dismiss { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.25rem .6rem; }
.vs-aidraft-apply { border-color:var(--vs-accent); background:var(--vs-accent); color:var(--vs-accent-ink); font-weight:600; }
.vs-aidraft-badges { display:flex; gap:.3rem; margin:.4rem 0; }
.vs-aidraft-badge { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--vs-muted); border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.05rem .35rem; }
.vs-aidraft-badge.vs-aidraft-nowrite { color:var(--vs-ok); border-color:var(--vs-ok); }
.vs-aidraft-advisory { color:var(--vs-muted); font-size:13px; margin:.2rem 0; }
.vs-aidraft-fields { display:grid; grid-template-columns:12rem 1fr; gap:.2rem .75rem; margin:.4rem 0; }
.vs-aidraft-fields dt { color:var(--vs-muted); }
.vs-aidraft-fields dd { margin:0; font-weight:600; }
.vs-aidraft-warn { color:var(--vs-warn); font-size:13px; margin:.1rem 0; }
.vs-aidraft-blocked { color:var(--vs-bad); }
.vs-aidraft-actions { display:flex; gap:.4rem; margin-top:.5rem; }

/* Contextual help / tutor (PR-VS-016, D-VS-050) — read-only guidance; help never writes. */
.vs-help-btn { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.2rem .55rem; margin-left:.4rem; }
.vs-help-btn.is-active { background:var(--vs-accent); color:var(--vs-accent-ink); border-color:var(--vs-accent); }
/* ★ favorite toggle — top-right of every surface header, by the help button */
.vs-fav-star { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.2rem .5rem; margin-left:.4rem; cursor:pointer; color:var(--vs-muted); font-size:1rem; line-height:1; }
.vs-fav-star.is-on { color:var(--vs-warn); border-color:var(--vs-warn); }
.vs-fav-star:hover { background:var(--vs-bg); }
.vs-custom-fav { float:right; margin:.1rem 0 0 .6rem; } /* D-VS-262: ★-sor a custom (nem-lista) felületeken — jobbra, a cím mellé */
.vs-custom-help { float:right; margin:.1rem 0 0 .6rem; } /* D-VS-524: súgó-gomb a saját elrendezésű felületeken — a ★ mellé */
.vs-help-panel { max-width:var(--vs-content-max); margin:0 0 1rem; border:1px solid var(--vs-accent); border-radius:var(--vs-radius-lg); background:var(--vs-surface); overflow:hidden; }
.vs-help-head { display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; background:var(--vs-accent-weak); border-bottom:1px solid var(--vs-border); }
.vs-help-title { font-weight:600; }
.vs-help-close { margin-left:auto; border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:0 .5rem; }
.vs-help-advisory { color:var(--vs-muted); font-size:13px; margin:.4rem .8rem; }
.vs-help-topic { margin:.4rem .8rem .6rem; padding:.4rem .6rem; border:1px solid var(--vs-border); border-left-width:4px; border-radius:var(--vs-radius-sm); }
.vs-help-topic-head { display:flex; align-items:center; gap:.5rem; }
.vs-help-topic-title { font-weight:600; }
.vs-help-kind { margin-left:auto; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--vs-muted); border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.02rem .35rem; }
.vs-help-body { margin:.25rem 0 0; font-size:13px; }
.vs-help-topic.vs-help-warning { border-left-color:var(--vs-warn); }
.vs-help-topic.vs-help-blocked { border-left-color:var(--vs-bad); }
.vs-help-topic.vs-help-tip { border-left-color:var(--vs-accent); }
.vs-help-topic.vs-help-info { border-left-color:var(--vs-ok); }

/* Read-only support diagnostics panel (PR-VS-017, D-VS-051) — observe only; no write/persist. */
.vs-support-btn { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.2rem .55rem; margin-left:.6rem; }
.vs-support { max-width:var(--vs-content-max); margin:.6rem 1rem; border:1px solid var(--vs-accent); border-radius:var(--vs-radius-lg); background:var(--vs-surface); overflow:hidden; }
.vs-support-head { display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; background:var(--vs-accent-weak); border-bottom:1px solid var(--vs-border); }
.vs-support-title { font-weight:600; }
.vs-support-close { margin-left:auto; border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:0 .5rem; }
.vs-support-advisory { color:var(--vs-muted); font-size:13px; margin:.4rem .8rem; }
.vs-support-summary { display:grid; grid-template-columns:14rem 1fr; gap:.15rem .75rem; margin:.4rem .8rem; }
.vs-support-summary dt { color:var(--vs-muted); }
.vs-support-summary dd { margin:0; font-weight:600; }
.vs-support-warn { color:var(--vs-warn); font-size:13px; margin:.1rem .8rem; }
.vs-support-json { margin:.4rem .8rem; padding:.5rem .6rem; background:var(--vs-bg); border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); font-size:12px; max-height:18rem; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.vs-support-actions { margin:.2rem .8rem .7rem; }
.vs-support-copy { border:1px solid var(--vs-accent); background:var(--vs-accent); color:var(--vs-accent-ink); border-radius:var(--vs-radius-sm); padding:.25rem .6rem; font-weight:600; }

/* Support triage / answer draft (PR-VS-018, D-VS-052) — advisory only; not sent, no write, no persistence. */
.vs-triage { margin:.4rem .8rem .7rem; border-top:1px solid var(--vs-border); padding-top:.5rem; }
.vs-triage-label { font-weight:600; margin-bottom:.3rem; }
.vs-triage-input { width:100%; box-sizing:border-box; border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.35rem .5rem; font:inherit; }
.vs-triage-run { margin-top:.4rem; border:1px solid var(--vs-accent); background:var(--vs-accent); color:var(--vs-accent-ink); border-radius:var(--vs-radius-sm); padding:.25rem .6rem; font-weight:600; }
.vs-triage-result { margin-top:.5rem; border:1px solid var(--vs-border); border-left:4px solid var(--vs-accent); border-radius:var(--vs-radius-sm); padding:.4rem .6rem; background:var(--vs-surface-2); }
.vs-triage-cat { font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:.03em; }
.vs-triage-summary { margin:.25rem 0 .1rem; font-weight:600; }
.vs-triage-answer { margin:.1rem 0; font-size:13px; }
.vs-triage-notsent { margin:.2rem 0; font-size:12px; color:var(--vs-warn); }
.vs-triage-copy { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.2rem .55rem; }

/* Complex support reasoning (PR-VS-019, D-VS-053) — advisory; no write/send/persist. */
.vs-reason-run { margin:.4rem 0 0 .4rem; border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.25rem .6rem; }
.vs-reason-result { margin-top:.5rem; border:1px solid var(--vs-border); border-left:4px solid var(--vs-ok); border-radius:var(--vs-radius-sm); padding:.4rem .6rem; background:var(--vs-ok-weak); }
.vs-reason-area { font-weight:600; }
.vs-reason-summary { margin:.25rem 0; font-size:13px; }
.vs-reason-evhead { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--vs-muted); margin-top:.3rem; }
.vs-reason-ev { margin:.1rem 0 .3rem 1rem; font-size:12px; }

/* Safe remediation proposal (PR-VS-020, D-VS-054) — advisory, non-executable; no write/execute/persist. */
.vs-rem-run { margin:.4rem 0 0 .4rem; border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.25rem .6rem; }
.vs-rem-result { margin-top:.5rem; border:1px solid var(--vs-border); border-left:4px solid var(--vs-warn); border-radius:var(--vs-radius-sm); padding:.4rem .6rem; background:var(--vs-warn-weak); }
.vs-rem-type { font-weight:600; }

/* Query/export toolbar (PR-VS-023) */
.vs-query-toolbar { margin:.5rem 0; border:1px solid var(--vs-border); border-radius:var(--vs-radius); padding:.5rem .6rem; background:var(--vs-surface-2); }
.vs-query-title { font-weight:600; margin-bottom:.35rem; }
.vs-query-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.vs-query-search { flex:1 1 16rem; min-width:10rem; padding:.3rem .5rem; border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); }
.vs-query-sort { padding:.3rem .4rem; border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); background:var(--vs-surface); }
.vs-query-row button { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.3rem .6rem; cursor:pointer; }
.vs-query-export-btn { border-color:var(--vs-ok); }
.vs-query-result { margin-top:.5rem; }
.vs-query-exported { font-weight:600; color:var(--vs-ok); }
.vs-query-report-deferred { color:var(--vs-warn); }
.vs-query-export-unavailable, .vs-query-rows-msg.vs-unavailable { color:var(--vs-warn); }
.vs-query-csv { max-height:12rem; overflow:auto; background:var(--vs-surface); border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.4rem .5rem; font-size:.85em; white-space:pre; }

/* Registry-driven bulk-action panel (STEP-VS-076-003 #5) — confirm-first loader UX. */
.vs-bulk-panel { max-width:var(--vs-content-max); margin:.6rem 0 1rem; border:1px solid var(--vs-accent); border-radius:var(--vs-radius-lg); background:var(--vs-surface); padding:.6rem .8rem; }
.vs-bulk-title { margin:.1rem 0 .4rem; font-size:1rem; }
.vs-bulk-skipped { color:var(--vs-muted); }
.vs-bulk-confirm { margin-right:.5rem; }

/* Media section v0 (CMD-VS-077-001-002) — product editor images/documents block */
.vs-editor-media { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); }
.vs-editor-media-title { margin: 0 0 8px; font-size: 0.95em; }
.vs-editor-media-note { color: var(--vs-muted); font-size: 0.9em; }
.vs-editor-media-unavailable { font-style: italic; }
.vs-editor-media-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.vs-editor-media-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--vs-radius-sm); border: 1px solid var(--vs-border); }
.vs-editor-media-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-editor-media-role { color: var(--vs-muted); font-size: 0.85em; }
.vs-editor-media-upload { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* aux A A3 (D-VS-200): „Vonalkód generálása" mező-akció — input + gomb + állapot egy sorban. (merge: tokenizálva) */
.vs-field-generate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vs-field-generate .vs-editor-input { flex: 1 1 12rem; }
.vs-field-generate-status { font-size: 0.85em; color: var(--vs-muted); }
.vs-editor-media-confirm { margin-top: 8px; padding: 8px; background: var(--vs-surface-2); border-radius: var(--vs-radius-sm); }

/* Bolti tartalom szekció (D-VS-370) — 3 nyelvű mezők + „a szülőtől örökölve" jelzés */
.vs-editor-content { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); }
.vs-editor-content-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.vs-editor-content-title { margin: 0; font-size: 0.95em; }
.vs-editor-content-refresh { border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); padding: 0.2rem 0.55rem; cursor: pointer; font: inherit; font-size: 0.85em; color: var(--vs-muted); }
.vs-editor-content-note { color: var(--vs-muted); font-size: 0.9em; margin: 4px 0; }
.vs-editor-content-unavailable { font-style: italic; }
.vs-editor-content-pending { font-style: italic; }
.vs-editor-content-langs { display: flex; gap: 6px; margin: 8px 0; }
.vs-editor-content-langbtn { border: 1px solid var(--vs-border); background: var(--vs-surface); border-radius: var(--vs-radius-sm); padding: 0.25rem 0.6rem; cursor: pointer; font: inherit; }
.vs-editor-content-langbtn.active { border-color: var(--vs-accent); background: var(--vs-accent); color: var(--vs-accent-ink); }
.vs-editor-content-field { margin: 8px 0; }
.vs-editor-content-label { display: block; font-size: 0.85em; color: var(--vs-muted); margin-bottom: 2px; }
.vs-editor-content-input { width: 100%; box-sizing: border-box; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); padding: 0.35rem 0.5rem; font: inherit; background: var(--vs-surface); color: var(--vs-ink); }
.vs-editor-content-inherited { margin-left: 8px; font-size: 0.8em; color: var(--vs-accent); border: 1px solid var(--vs-accent); border-radius: var(--vs-radius-pill); padding: 0 8px; white-space: nowrap; }
.vs-editor-content-parent-preview { color: var(--vs-muted); font-size: 0.85em; margin-top: 2px; white-space: pre-wrap; max-height: 6em; overflow: hidden; }
.vs-editor-content-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vs-editor-content-saved { color: var(--vs-ok); font-size: 0.9em; }
/* PUB-01 (CMD-028 R132 §5) — „Publikálás ebben a boltban": boltonként egy keretes sor, a kapcsoló és az előnézet alatta */
.vs-shop-publication { margin-top: 12px; }
.vs-shop-publication-shop { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); }
.vs-shop-publication-gaps { margin: 4px 0 4px 18px; padding: 0; font-size: 0.9em; }
.vs-shop-publication-switch { display: flex; align-items: center; gap: 6px; margin-top: 6px; cursor: pointer; }
.vs-shop-publication-preview { margin-top: 8px; padding: 8px; background: var(--vs-surface-2); border-radius: var(--vs-radius-sm); }

/* Process tab detail + flows (STEP-VS-055-006/-007, D-VS-137) — the custom process views. */
.vs-process-head { font-weight:600; color:var(--vs-ink); margin:.2rem 0 .6rem; }
.vs-process-actions { display:flex; gap:.5rem; margin:.5rem 0 .8rem; }
/* R62 §6 — a csatornás visszáru sorai tördelnek, a mezők középre igazodnak, az előnézet mondata a sor ALATT, teljes szélességben */
.vs-return-row { flex-wrap:wrap; align-items:center; }
.vs-return-said { margin:-.4rem 0 .8rem; }
.vs-btn { border:1px solid var(--vs-border); background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.35rem .7rem; cursor:pointer; font:inherit; }
.vs-btn-primary { border-color:var(--vs-accent); background:var(--vs-accent); color:var(--vs-accent-ink); }
.vs-btn-danger { border-color:var(--vs-bad); color:var(--vs-bad); }
.vs-btn-danger:hover { background:var(--vs-bad); color:var(--vs-accent-ink); }
.vs-edit-row { display:flex; align-items:center; gap:.6rem; margin:.35rem 0; flex-wrap:wrap; }
.vs-edit-label { min-width:18rem; }
.vs-edit-qty, .vs-edit-date { border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.25rem .45rem; font:inherit; }
.vs-edit-hint { color:var(--vs-warn); font-size:.85em; }
.vs-edit-hint-bad { color:var(--vs-bad); font-weight:600; }
.vs-saved-banner { background:var(--vs-ok-weak); color:var(--vs-ok); border:1px solid var(--vs-ok); border-radius:var(--vs-radius-sm); padding:.4rem .7rem; margin:.5rem 0; font-weight:600; }
.vs-so-status { display:flex; align-items:baseline; gap:.6rem; margin:.7rem 0 .2rem; }
.vs-so-status-label { color:var(--vs-muted); font-size:.9em; }
.vs-so-status-value { font-size:1.25rem; font-weight:700; color:var(--vs-ink); }
.vs-note-warn { color:var(--vs-warn); font-weight:600; }
.vs-edit-status, .vs-delete-status { font-weight:600; }
.vs-cascade-list li { margin:.15rem 0; }

/* Cascade graph (STEP-VS-055-007): depth-layered SERVER nodes — target on top, dependents below,
   arrows point up (ráépülés reads bottom-up). Pure presentation; depths come from the preview. */
.vs-cascade-graph { margin:.6rem 0 1rem; }
.vs-graph-layer { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.vs-graph-node { border:1px solid var(--vs-border); border-radius:var(--vs-radius); background:var(--vs-surface); padding:.4rem .6rem; min-width:9rem; text-align:center; }
.vs-graph-target { border-color:var(--vs-bad); box-shadow:0 0 0 2px var(--vs-bad-weak); }
.vs-graph-node-no { font-weight:700; }
.vs-graph-node-type { font-size:.85em; color:var(--vs-muted); }
.vs-graph-node-mov { font-size:.8em; color:var(--vs-muted); }
.vs-graph-node-badge { display:inline-block; margin-top:.2rem; font-size:.75em; color:var(--vs-bad); border:1px solid var(--vs-bad); border-radius:var(--vs-radius-pill); padding:0 .5rem; }
.vs-graph-arrow { text-align:center; color:var(--vs-muted); font-size:1.1em; margin:.15rem 0; }

/* Field grid (STEP-VS-055-007/5) — read-only "fields" header for detail views (process/LOT). */
.vs-field-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:.4rem .9rem; max-width:var(--vs-content-max); margin:.4rem 0 .8rem; padding:.55rem .7rem; border:1px solid var(--vs-border); border-radius:var(--vs-radius); background:var(--vs-surface); }
.vs-field { display:flex; flex-direction:column; }
.vs-field-label { font-size:.78em; color:var(--vs-muted); }
.vs-field-value { font-weight:600; }

/* Registry-declared server filter bar (STEP-VS-055-007/2). */
.vs-server-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem; max-width:var(--vs-content-max); margin:0 0 .5rem; padding:.45rem .6rem; border:1px solid var(--vs-border); border-radius:var(--vs-radius); background:var(--vs-bg); }
.vs-sf-item { display:flex; flex-direction:column; gap:.15rem; }
.vs-sf-label { font-size:.78em; color:var(--vs-muted); }
.vs-sf-input { border:1px solid var(--vs-border); border-radius:var(--vs-radius-sm); padding:.25rem .4rem; font:inherit; min-width:11rem; }
.vs-sf-apply, .vs-sf-clear { height:2rem; }

/* SVG cascade graph (STEP-VS-055-007/6) — server nodes/edges, presentation-only layout. */
.vs-graph-scroll { overflow:auto; border:1px solid var(--vs-border); border-radius:var(--vs-radius); background:var(--vs-surface); }
.vs-graph-controls { display:flex; align-items:center; gap:.4rem; margin:.3rem 0; }
.vs-graph-edge { fill:none; stroke:var(--vs-graph-edge); stroke-width:1.6; marker-end:none; opacity:.85; }
.vs-graph-edge-label { font-size:10px; fill:var(--vs-warn); text-anchor:middle; }
.vs-graph-rect { fill:var(--vs-surface); stroke:var(--vs-border-strong); stroke-width:1.2; }
.vs-graph-rect-target { stroke:var(--vs-bad); stroke-width:2; }
.vs-graph-t-no { font-size:12px; font-weight:700; fill:var(--vs-ink); }
.vs-graph-t-type { font-size:10px; fill:var(--vs-muted); }
.vs-graph-t-line { font-size:10px; fill:var(--vs-muted); }
.vs-graph-t-supply { fill:var(--vs-ok); }
.vs-graph-t-consumption { fill:var(--vs-warn); }
.vs-graph-t-badge { font-size:9px; fill:var(--vs-bad); text-anchor:end; }
.vs-graph-legend { display:inline-flex; gap:.8rem; margin-left:.8rem; font-size:.82em; }
.vs-graph-legend-target { color:var(--vs-bad); } .vs-graph-legend-target::before { content:'▮ '; }
.vs-graph-legend-dep { color:var(--vs-muted); } .vs-graph-legend-dep::before { content:'▯ '; }
.vs-row-click { cursor:pointer; } .vs-row-click:hover { background:var(--vs-surface-2); }

/* Inline-editable detail (CMD-VS-055-007-003): marked editable fields + the dirty save bar. */
.vs-inline-edit { border:2px solid var(--vs-accent); border-radius:var(--vs-radius-sm); padding:.2rem .4rem; font:inherit; background:var(--vs-surface); max-width:8rem; }
.vs-inline-wrap { display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.vs-edit-unit { color:var(--vs-muted); font-size:.85em; }
.vs-savebar { display:flex; align-items:center; gap:.6rem; margin:.6rem 0; padding:.5rem .7rem; border:1px solid var(--vs-accent); border-radius:var(--vs-radius); background:var(--vs-accent-weak); }
.vs-savebar-label { font-weight:600; }

/* Bipartite reverse-graph: item nodes + edges (STEP-VS-055-007/7). */
.vs-graph-edge-prod { stroke:var(--vs-ok); }
.vs-graph-edge-cons { stroke:var(--vs-warn); }
.vs-graph-t-role { font-size:9px; fill:var(--vs-muted); }
.vs-graph-item { fill:var(--vs-warn-weak); stroke:var(--vs-graph-item); stroke-width:1.2; }
.vs-graph-item-empty { fill:var(--vs-bad-weak); stroke:var(--vs-bad); }
.vs-graph-i-prod { font-size:10px; font-weight:700; fill:var(--vs-ink); }
.vs-graph-i-lot { font-size:10px; fill:var(--vs-warn); }
.vs-graph-i-stock { font-size:10px; fill:var(--vs-ink); }
.vs-graph-legend-item { color:var(--vs-warn); } .vs-graph-legend-item::before { content:'▭ '; }

/* Reverse-graph refinement (STEP-VS-055-007/8): clickable process/LOT boxes → drilldown. */
.vs-graph-clickable { cursor:pointer; }
.vs-graph-clickable:hover .vs-graph-rect { stroke-width:2; }
.vs-graph-clickable:hover .vs-graph-item { stroke-width:2; }

/* Life-cycle (életút) graph (STEP-VS-055-007/9): the rooted item highlighted; graph spaced from the fields. */
.vs-graph-item-target { stroke:var(--vs-accent); stroke-width:2.4; }
.vs-lot-lifecycle { margin-top:1rem; }
/* the "this item" legend marker matches the rooted-item highlight (blue), not the reverse target red. */
.vs-graph-legend-target-item { color:var(--vs-accent); } .vs-graph-legend-target-item::before { content:'▮ '; }

/* Reference combobox (PR-VS-055) — searchable "pick from another table" + inline "+ új felvétele". Token-pure. */
.vs-combo { position: relative; width: 100%; }
.vs-combo-trigger { width: 100%; text-align: left; 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 1.6rem .4rem .55rem; cursor: pointer; position: relative; min-height: 2rem; }
.vs-combo-trigger.is-placeholder { color: var(--vs-muted); }
.vs-combo-trigger::after { content: ""; position: absolute; right: .7rem; top: 50%; width: .4rem; height: .4rem; border-right: 1.5px solid var(--vs-muted); border-bottom: 1.5px solid var(--vs-muted); transform: translateY(-65%) rotate(45deg); }
.vs-combo-trigger:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 0; border-color: var(--vs-accent); }
.vs-combo.is-open .vs-combo-trigger { border-color: var(--vs-accent); box-shadow: 0 0 0 3px var(--vs-accent-weak); }
.vs-combo-pop { position: absolute; z-index: 40; background: var(--vs-surface); border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-md); overflow: hidden; display: none; }
.vs-combo.is-open .vs-combo-pop { display: block; }
.vs-combo-search { padding: .4rem; border-bottom: 1px solid var(--vs-border); }
.vs-combo-search input { width: 100%; font: inherit; color: var(--vs-ink); background: var(--vs-surface); border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); padding: .35rem .45rem; }
.vs-combo-search input:focus { outline: 2px solid var(--vs-accent); outline-offset: 0; border-color: var(--vs-accent); }
.vs-combo-list { max-height: 12rem; overflow-y: auto; padding: .2rem; }
.vs-combo-opt { padding: .35rem .45rem; border-radius: var(--vs-radius-sm); cursor: pointer; display: flex; justify-content: flex-start; text-align: left; gap: .5rem; align-items: center; }
/* A FELIRAT a jelölő UTÁN, balra zárva; a kiegészítő adat (kód) a jobb szélre kerül. Három gyerek
   mellett a `space-between` a feliratot KÖZÉPRE tolta — ez volt az operátor lelete. */
.vs-combo-opt > span:not(.vs-combo-meta) { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.vs-combo-opt .vs-combo-meta { margin-left: auto; flex: 0 0 auto; }
.vs-combo-opt .vs-combo-check { flex: 0 0 auto; margin: 0; }
.vs-combo-opt.is-active { background: var(--vs-accent-weak); }
.vs-combo-opt.is-empty { color: var(--vs-muted); cursor: default; }
.vs-combo-meta { color: var(--vs-muted); font-size: .82em; font-family: var(--vs-mono); }
.vs-combo-add { border-top: 1px solid var(--vs-border); padding: .2rem; }
.vs-combo-add button { width: 100%; text-align: left; font: inherit; background: none; border: 0; color: var(--vs-accent); font-weight: 600; padding: .4rem .45rem; border-radius: var(--vs-radius-sm); cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.vs-combo-add button:hover { background: var(--vs-accent-weak); }
.vs-combo-plus { width: 1.05rem; height: 1.05rem; border-radius: var(--vs-radius-sm); background: var(--vs-accent); color: var(--vs-accent-ink); display: inline-grid; place-items: center; font-size: .85rem; line-height: 1; }

/* Inline "+ új felvétele" modal (PR-VS-055) — opens ON TOP; the operation form stays behind. Token-pure. */
.vs-modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: var(--vs-scrim); }
.vs-modal { width: min(28rem, 100%); background: var(--vs-surface); border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-lg); box-shadow: var(--vs-shadow-md); overflow: hidden; }
.vs-modal-top { padding: .7rem .85rem; border-bottom: 1px solid var(--vs-border); background: var(--vs-surface-2); }
.vs-modal-top h2 { margin: 0; font-size: .95rem; font-weight: 650; }
.vs-modal-body { padding: .85rem; display: flex; flex-direction: column; gap: .65rem; }
.vs-modal-input { 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-modal-input:focus { outline: 2px solid var(--vs-accent); border-color: var(--vs-accent); }
.vs-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .7rem .85rem; border-top: 1px solid var(--vs-border); background: var(--vs-surface-2); }
.vs-modal-err { color: var(--vs-bad); font-size: .8rem; margin-right: auto; }

/* System settings surface (aux-build #1, D-VS-199): read-only categorized settings view. */
.vs-settings-intro { opacity:0.7; margin-bottom:1rem; }
.vs-settings-group { margin-bottom:1.25rem; }
.vs-settings-group-title { font-size:1.02rem; margin:0 0 0.4rem; }
.vs-settings-table { border-collapse:collapse; width:100%; max-width:100%; }
.vs-settings-table th, .vs-settings-table td { text-align:left; padding:6px 14px 6px 0; border-bottom:1px solid var(--vs-border); vertical-align:top; }
.vs-settings-table th { font-weight:600; opacity:0.65; font-size:0.85rem; }
/* §14/F0b Tanúsítványok fül (token-tiszta: szín/rádiusz var-ból) */
.vs-settings-h3 { margin:1rem 0 0.4rem; font-size:0.95rem; }
.vs-cert-add, .vs-cert-map { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; margin:0.5rem 0; }
.vs-cert-add input, .vs-cert-add select, .vs-cert-map select { font:inherit; padding:0.3rem 0.4rem; border:1px solid var(--vs-border-strong); border-radius:var(--vs-radius-sm); }
.vs-btn-sm { font-size:0.72rem; padding:0.2rem 0.5rem; }
.vs-muted { color:var(--vs-muted); }
.vs-settings-label { display:block; font-weight:600; }
.vs-settings-code { display:block; font-size:0.78rem; opacity:0.5; margin-top:2px; }
.vs-settings-value { font-variant-numeric:tabular-nums; }
/* D-VS-213 finomítás (operátori kérés): az Általános fül blokkjaiban az Érték-oszlop EGYVONALBAN áll —
   minden blokk-tábla azonos szélességű (100%, max 920px), a kulcs-oszlop fix aránya igazítja az oszlopokat;
   a soronkénti default-legördülők egységes szélességet kapnak. */
.vs-settings-block .vs-settings-table { table-layout:fixed; }
.vs-settings-block .vs-settings-table th:first-child,
.vs-settings-block .vs-settings-table td:first-child { width:45%; }
.vs-settings-value select { width:min(300px, 100%); padding:5px 8px; font:inherit; margin-right:10px; }
/* Termékkarton (D-VS-218/r3): a kereső a KÖZÖS .vs-combo komponens — itt csak a host-szélesség
   (széles mező, hogy a hosszú terméknevek kiférjenek). */
#vs-sc-picker .vs-combo { max-width:34rem; }
/* r4: szűrősor a termék-sor alatt — a lista-oldalak KÖZÖS .vs-mfilter checkbox-szűrője (listgrid.css
   stílusozza); itt csak a sor-elrendezés (címke + gomb hármasok, tördelhetően). */
#vs-sc-filters { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; align-items:center; margin-top:.55rem; }
#vs-sc-filters .vs-sc-filter { display:inline-flex; align-items:center; gap:.4rem; }

/* „Mi magunk" saját-identitás (D-VS-220): a boot-kapu képernyő + a Beállítások-blokk KÖZÖS űrlap-rácsa. */
.vs-onboard { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; overflow:auto; background:var(--vs-bg); padding:6vh 1rem 2rem; }
.vs-onboard-card { max-width:44rem; width:100%; background:var(--vs-surface); border:1px solid var(--vs-border); border-radius:var(--vs-radius); box-shadow:var(--vs-shadow-md); padding:1.25rem 1.5rem; }
.vs-onboard-intro { color:var(--vs-muted); }
/* D-VS-643: a boot-kapu MEGMONDJA, melyik cégtérről van szó, és HAGY KIUTAT (a fejléc cégváltója ide is
   kirajzolódik). Az operátor enélkül nem tudta, kihez tartozik a kérdés, és nem tudott visszaváltani. */
.vs-onboard-tenant { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:0 0 .75rem; padding-bottom:.6rem; border-bottom:1px solid var(--vs-border); }
.vs-onboard-tenant-label { color:var(--vs-muted); font-size:12px; }
.vs-onboard-tenant-name { font-size:15px; }
.vs-onboard-tenant-code { color:var(--vs-muted); font-size:12px; }
.vs-onboard-tenant-switch { margin-left:auto; }
.vs-onboard-hint { color:var(--vs-muted); font-size:12px; }
.vs-onboard-actions { display:flex; align-items:center; gap:.75rem; margin-top:.75rem; }
.vs-self-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.6rem .9rem; margin:.6rem 0; }
.vs-self-field { display:flex; flex-direction:column; gap:.25rem; }
.vs-self-field span { color:var(--vs-muted); font-weight:600; font-size:12px; }
.vs-self-field input { font:inherit; padding:5px 8px; border:1px solid var(--vs-border-strong); border-radius:var(--vs-radius-sm); background:var(--vs-surface); color:var(--vs-ink); }
/* r2: „válaszd ki a meglévőt" sáv (kapu + Beállítások-blokk create-módja) */
.vs-self-pick { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.5rem 0 .2rem; }
.vs-self-pick-label { color:var(--vs-muted); font-weight:600; font-size:12px; }
.vs-self-pick select { font:inherit; padding:5px 8px; max-width:22rem; border:1px solid var(--vs-border-strong); border-radius:var(--vs-radius-sm); background:var(--vs-surface); color:var(--vs-ink); }

/* Tabbed settings shell (settings-IA redesign, D-VS-205): category tabs + panels. Theme-aware
   (currentColor + translucent grays work in light and dark). Domain tabs mount into the same bar. */
.vs-settings-tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--vs-border-strong); margin:0 0 1.1rem; }
.vs-settings-tab { appearance:none; background:transparent; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:8px 15px; font:inherit; color:inherit; cursor:pointer; opacity:0.62; border-radius:var(--vs-radius-sm) var(--vs-radius-sm) 0 0; }
.vs-settings-tab:hover { opacity:0.9; background:var(--vs-accent-weak); }
.vs-settings-tab.is-active { opacity:1; font-weight:600; border-bottom-color:currentColor; }
.vs-settings-tab:focus-visible { outline:2px solid var(--vs-border-strong); outline-offset:2px; }
.vs-settings-panel[hidden] { display:none; }

/* Master-defaults editor panel (KS-paritás #3-r2, D-VS-204) — proper card look. */
/* 2026-07-30 (operátori kérés): a keretes doboz mérete NEM fix — az oldal szélességéhez igazodik.
   A felső korlátot a közös tartalom-token adja (--vs-content-max), ugyanaz, amit a listák használnak,
   így a keretes és a keret nélküli blokkok EGY vonalban zárnak. */
.vs-md-editor { width:100%; max-width:var(--vs-content-max, 100%); box-sizing:border-box; margin-top:1.25rem; padding:14px 16px; border:1px solid var(--vs-border-strong); border-radius:var(--vs-radius); background:var(--vs-surface-2); }
.vs-md-editor-title { margin:0 0 4px; font-size:1rem; }
.vs-md-editor-hint { margin:0 0 12px; opacity:0.7; font-size:0.86rem; max-width:60ch; }
.vs-md-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.vs-md-row label { min-width:210px; font-weight:600; }
.vs-md-row select { flex:1; min-width:180px; max-width:340px; padding:5px 8px; font:inherit; }
.vs-md-actions { display:flex; align-items:center; gap:14px; margin-top:12px; }
.vs-md-status { opacity:0.85; font-size:0.9rem; }
/* Mértékegység 2-blokk, BLOKK 1 (fő típusok) — D-VS-207 */
.vs-umt-table { margin:4px 0 14px; }
.vs-umt-table td, .vs-umt-table th { padding:6px 10px; vertical-align:middle; }
.vs-umt-add { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.vs-umt-add input[type="text"] { padding:5px 8px; font:inherit; min-width:150px; }
.vs-umt-add select { padding:5px 8px; font:inherit; min-width:180px; }
.vs-umt-setdef, .vs-umt-del { font:inherit; padding:3px 10px; cursor:pointer; }

/* §14/5 folyamat-fejléc — 3 fix blokk (a jóváhagyott mockup v5 váza; process-header.mjs) */
.vs-hd{display:grid;grid-template-columns:1fr 1.25fr 1.15fr;gap:12px;margin:10px 0}
.vs-hd-blk{background:var(--vs-surface-2);border:1px solid var(--vs-border);border-radius:var(--vs-radius);padding:10px 12px}
.vs-hd-blk h3{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--vs-muted)}
.vs-hd-row{display:grid;grid-template-columns:118px 1fr;gap:8px;padding:6px 0;border-bottom:1px dashed var(--vs-border);font-size:13px;align-items:center}
.vs-hd-row:last-child{border-bottom:0}
.vs-hd-row b{font-weight:400;color:var(--vs-muted)}
.vs-hd-row span{font-weight:600}
.vs-hd-phase{display:inline-block;padding:2px 10px;border-radius:var(--vs-radius-pill);background:var(--vs-accent);color:var(--vs-accent-ink);font-size:12px;font-weight:600}
@media(max-width:900px){.vs-hd{grid-template-columns:1fr}}

/* §14/3 folyamat-idővonal — Shoprenter-mintás narratíva (process-timeline.mjs) */
.vs-tl{list-style:none;margin:8px 0 4px;padding:0 0 0 18px;border-left:2px solid var(--vs-border)}
.vs-tl li{position:relative;padding:5px 0 5px 12px;font-size:13px}
.vs-tl li::before{content:'';position:absolute;left:-23px;top:10px;width:8px;height:8px;border-radius:var(--vs-radius-pill);background:var(--vs-border)}
.vs-tl li.vs-tl-phase::before{background:var(--vs-accent)}
.vs-tl li.vs-tl-stock::before{background:var(--vs-ok)}
.vs-tl li.vs-tl-email::before{background:var(--vs-warn)}
.vs-tl-ts{font-family:var(--vs-mono);font-size:11.5px;color:var(--vs-muted);margin-right:10px}
.vs-tl-text{font-weight:500}

/* Termékkarton — RECEPT-INDEX (D-VS-281/3): a termék szerepe (BE/KI) + a recept két oldala.
   A csip a folyamat-részletező szerep-címkéinek nyelvét beszéli; a lista tömör, mert a cellában él. */
#vs-sc-recipes-box { margin-top:1rem; }
.vs-sc-recipes .vs-chip { display:inline-block; padding:.1rem .5rem; border-radius:var(--vs-radius-pill); font-size:11.5px; font-weight:600; white-space:nowrap; border:1px solid var(--vs-border); }
.vs-sc-recipes .vs-chip-in { background:var(--vs-warn-weak); border-color:var(--vs-warn); color:var(--vs-warn); }
.vs-sc-recipes .vs-chip-out { background:var(--vs-ok-weak); border-color:var(--vs-ok); color:var(--vs-ok); }
.vs-sc-recipes ul.vs-sc-parts { margin:0; padding-left:1.1rem; }
.vs-sc-recipes ul.vs-sc-parts li { margin:.05rem 0; }
.vs-sc-recipes li.vs-sc-part-service { color:var(--vs-muted); font-style:italic; }
.vs-sc-recipes li.vs-sc-part-self { font-weight:600; }
.vs-sc-recipes-note { margin:.5rem 0 0; font-size:12px; }

/* Termék-sorból indított folyamat (PPS-01): a recept-választó gombok — a recept NEVE a vezető,
   mellette a termék szerepe (itt keletkezik / itt fogy), és halványan a recept fő terméke. */
.vs-pps-list { display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; margin:.4rem 0; }
.vs-btn.vs-pps-recipe { text-align:left; display:inline-flex; align-items:baseline; gap:.15rem; flex-wrap:wrap; }
.vs-pps-role { color:var(--vs-accent); font-weight:600; }
.vs-pps-meta { font-size:12px; }
.vs-pps-note { font-size:12px; margin:.5rem 0 0; }


/* ── MOBIL ELRENDEZES (2026-08-01, operatori lelet: „Mobilos nezetben nincs menu!") ──────────────
   Keskeny kepernyon a menu KIHUZHATO FIOK. Asztali nezetben egyetlen szabaly sem aktiv innen. */
@media (max-width: 860px) {
  .vs-nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:2.75rem; min-height:2.75rem;              /* ujjbegy-meretu talalati felulet */
    margin-right:.5rem; font-size:20px; 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;
  }
  /* A fejlec es a parancs-sor tordelhet — telefonon egy sorban nem fer el. */
  .vs-header { flex-wrap:wrap; gap:.35rem .5rem; }
  .vs-command { flex-wrap:wrap; }
  .vs-command input { min-width:0; }

  /* A FIOK: a kepernyo szelen kivul all, es becsusztatva jon be. */
  .vs-nav {
    position:fixed; top:0; left:0; bottom:0; z-index:120;
    width:min(82vw, 18rem); flex:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    border-right:1px solid var(--vs-border-strong); box-shadow:var(--vs-shadow-md);
    transform:translateX(-100%); transition:transform .18s ease-out;
  }
  body.vs-nav-open .vs-nav { transform:translateX(0); }
  .vs-nav-scrim {
    display:block; position:fixed; inset:0; z-index:110;
    background:var(--vs-scrim); opacity:0; pointer-events:none; transition:opacity .18s ease-out;
  }
  body.vs-nav-open .vs-nav-scrim { opacity:1; pointer-events:auto; }
  /* Fiok-modban a menupontok is ujjbegy-meretuek. */
  .vs-nav-item { padding:.6rem .5rem; }
  /* Az almenu telefonon nem oldalra nyilik (nincs hova) — a szulo alatt, behuzva. */
  .vs-nav-flyout { position:static; display:block; border:none; box-shadow:none; padding:0 0 0 .75rem; min-width:0; }
  .vs-nav-fly-arrow { display:none; }

  /* A munkaterulet a teljes szelesseget kapja; a szeles tablak SAJAT MAGUKBAN gorgessenek,
     ne az egesz oldal (kulonben a fejlec is elcsuszik). */
  .vs-workspace { min-width:0; width:100%; }
  .vs-tabcontent { overflow-x:auto; }
}

/* ── JOGI LÁBLÉC (LGL-01, D-VS-545): három jogi lap, minden képernyőről ─────────────────────── */
.vs-legal-footer {
  display: flex;
  gap: 14px;
  justify-content: center;
  padding: 8px 12px 10px;
  font-size: 11px;
  border-top: 1px solid var(--vs-border);
}
.vs-legal-footer a {
  color: var(--vs-muted);
  text-decoration: none;
}
.vs-legal-footer a:hover { text-decoration: underline; }

/* ── D-VS-589: folyamat-szerkesztő egységesítés ─────────────────────────────────────────────── */
/* két-blokkos fejléc (Azonosítás · Szereplők·állapot) — a 3-oszlopos .vs-hd örökös felülírása */
.vs-hd-2{grid-template-columns:1fr 1.35fr}
@media(max-width:900px){.vs-hd-2{grid-template-columns:1fr}}
/* a MUNKA/PROJEKT választó ugyanazt a szerkeszthető-keretet kapja, mint a dátum/külső hivatkozás
   (operátori 2. pont: „nem ugyanolyan keretet kapott") — a keret jelzi: ide lehet nyúlni */
.vs-hd .vs-combo-trigger{border:2px solid var(--vs-accent);border-radius:var(--vs-radius-sm);background:var(--vs-surface);padding:.2rem .4rem;font:inherit}
/* kihúzott érték: a címke egységesen ott van, a nem-értelmezhető érték áthúzva áll (nem néma hiány) */
.vs-hd-strike{text-decoration:line-through;opacity:.55;font-weight:400}
/* állapot-sor: státusz + a törvényes lépések gombjai egy sorban */
.vs-hd-statusrow{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.vs-hd-actions{display:inline-flex;flex-wrap:wrap;gap:.3rem;align-items:center}
/* sor-rács: a bemenő/kimenő tábla KÖZÖS oszlop-sablonon (fixed layout), húzható oszlop-fogókkal */
.vs-linegrid{table-layout:fixed;width:100%}
.vs-linegrid th{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-linegrid td{overflow:hidden;text-overflow:ellipsis}
.vs-col-grip{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;user-select:none;touch-action:none}
.vs-col-grip:hover{background:var(--vs-accent);opacity:.35}
.vs-cell-combo{max-width:100%}
.vs-cell-combo .vs-combo-trigger{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-cell-input{max-width:100%;box-sizing:border-box}
.vs-row-removed td{text-decoration:line-through;opacity:.5}
/* fix (nem szerkeszthető) fejléc-sor az új-folyamat panelen: kiszürkítve, magyarázó title-lel */
.vs-hd-fixed{opacity:.55}
.vs-hd-fixedval{font-weight:600}

/* ── D-VS-590→591: a két oldal vezérlője (Új folyamat) — radio-sorok · A/B/C választó · tükör-sorok ──
   (a régi hármas-trio és partner-állapot sáv osztályai a v2-vel kivezetve — KUKA-052) */
.vs-radio { display: inline-flex; align-items: center; gap: .25rem; margin-right: .9rem; cursor: pointer; white-space: nowrap; }
.vs-radio input { accent-color: var(--vs-accent); }
.vs-sides-radiowrap { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.vs-combo-locked { pointer-events: none; opacity: .55; }
.vs-op-mirrorrow td { opacity: .55; }
.vs-op-mirrorrow .vs-op-mirrorprod { font-style: italic; }
.vs-op-mirrorrow td .vs-combo { opacity: 1; pointer-events: auto; } /* a soronkénti cél-választó ÉLŐ a tükör-soron */
.vs-op-mirrorbox table { border-top: 2px dashed var(--vs-border); }
.vs-seam-target { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .4rem 0 .7rem; }
.vs-counterpart { margin-top: 1rem; }

/* ── D-VS-591: három-oszlopos folyamat-fejléc + oldalankénti raktár-kezelés ── */
.vs-hd-3 { grid-template-columns: 1fr 1.5fr 1fr; }
/* R62 §7 (MOBIL): a fenti szabály a korábbi `@media(max-width:900px){.vs-hd{…1fr}}` UTÁN áll, azonos súllyal — ezért telefonon is
   három oszlop maradt, és a Szereplők · raktárak blokk lelógott (a raktár-választó elérhetetlen). A keskeny nézet szabálya itt, utána. */
@media (max-width: 900px) { .vs-hd-3 { grid-template-columns: 1fr; } }
.vs-radio-off { opacity: .45; }
.vs-sides-radiowrap .vs-select { max-width: 100%; }
/* R64: a visszáru célraktár-választója a teljes feliratot mutatja, keskeny képernyőn sem lóg ki */
.vs-return-form .vs-select { max-width: 100%; }
.vs-return-table { overflow-x: auto; max-width: 100%; }
.vs-return-table .vs-table td:nth-child(3) { overflow-wrap: anywhere; }
/* a könyvelő gomb csak érvényes előnézet után él — letiltva LÁTSZÓDJON is letiltottnak (a kiemelt gomb színe különben ugyanaz) */
.vs-return-form .vs-btn:disabled { opacity: .45; cursor: default; }
/* megosztás-figyelmeztetés a másik-fél panelen: csatolás = láthatóvá válás a kiállító felé */
.vs-seam-sharewarn { background: var(--vs-warn-weak); border-left: 4px solid var(--vs-warn); border-radius: var(--vs-radius-sm); padding: .45rem .6rem; font-weight: 600; margin: .4rem 0 .6rem; }
/* ALK-01 (D-VS-594): VS-fiók szekció a partner-kártyán — javaslat-sorok gombbal */
.vs-account-candidate { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .25rem 0; }

/* ── TERMÉK/REKORD-SZERKESZTŐ: MEZŐ-BLOKKOK (D-VS-618, operátori parancs 2026-08-31) ──────────────
   „próbáld meg a többi értékmegadó/kiválasztó elemet blokkokba rendezni, és megformázni, mert most
   nagyon rosszul néz ki így ömlesztve." A szerkesztő eddig CSUPASZ volt: se a panelnek, se a mező-
   soroknak nem volt stílusa, ezért 38 mező egymás alá ömlött. A blokkok a felület-regiszterből jönnek
   (editor_field_groups); itt csak a MEGJELENÉS él — token-tiszta, saját szín nélkül. */
.vs-editor-form { display: flex; flex-direction: column; gap: .9rem; margin: .6rem 0; }
.vs-editor-block { border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-surface); padding: .7rem .85rem; }
.vs-editor-block-title { margin: 0 0 .55rem; font-size: .95rem; font-weight: 600; color: var(--vs-ink); border-bottom: 1px solid var(--vs-border); padding-bottom: .35rem; }
/* KÉT OSZLOP asztali szélességen, egy oszlop szűk képernyőn — a mező-sor címke fölött vezérlő. */
.vs-editor-block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .5rem .9rem; }
.vs-editor-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vs-editor-field > label { font-size: 12px; color: var(--vs-muted); font-weight: 600; }
.vs-editor-field input:not([type="checkbox"]), .vs-editor-field select, .vs-editor-field textarea {
  font: inherit; font-size: 13px; width: 100%; box-sizing: border-box; padding: .3rem .45rem;
  border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm);
  background: var(--vs-surface); color: var(--vs-ink);
}
.vs-editor-field input:focus, .vs-editor-field select:focus, .vs-editor-field textarea:focus { outline: 2px solid var(--vs-accent); outline-offset: 1px; }
.vs-editor-field input[type="checkbox"] { width: 1rem; height: 1rem; }
.vs-editor-field .vs-editor-err { font-size: 12px; color: var(--vs-bad); }
/* A hosszú szöveges mezők (megjegyzés) a teljes szélességet kapják. */
.vs-editor-block--other .vs-editor-field { grid-column: 1 / -1; }

/* ── A KÖZÖS RECEPTŰRLAP (CMD-028 R70 §3 · szerződés 21.5) ─────────────────────────────────────────
   A cím a recept neve, alatta öt egyszerű szakasz a mező-blokkok keretével (.vs-editor-block). A bemenet és a
   kimenet asztalon egymás mellett, keskeny képernyőn egymás alatt áll. A termék · mennyiség · egység EGY sor,
   és minden beviteli elem a kereshető választó (.vs-combo-trigger) méretét kapja — apró natív mező és
   összenyomott választó nincs. Token-tiszta, saját szín nélkül. */
.vs-recipe-panel { display: flex; flex-direction: column; gap: .8rem; }
.vs-recipe-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--vs-ink); }
.vs-recipe-panel .vs-recipe-field-wide { grid-column: 1 / -1; }
.vs-recipe-panel .vs-editor-recipe-deflbl { display: flex; align-items: center; gap: .4rem; font-size: 13px; color: var(--vs-ink); }
.vs-recipe-panel .vs-editor-field input:not([type="checkbox"]), .vs-recipe-panel .vs-editor-field select, .vs-recipe-panel .vs-editor-field textarea,
.vs-recipe-line input, .vs-recipe-line select {
  font: inherit; width: 100%; box-sizing: border-box; min-height: 2rem; padding: .4rem .55rem;
  border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink);
}
.vs-recipe-line input:focus, .vs-recipe-line select:focus { outline: 2px solid var(--vs-accent); outline-offset: 1px; }
.vs-recipe-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.1rem; }
.vs-recipe-io-side { min-width: 0; }
.vs-recipe-io-title { margin: 0 0 .4rem; font-size: 12px; font-weight: 600; color: var(--vs-muted); }
.vs-recipe-headprod { min-height: 2rem; display: flex; align-items: center; font-weight: 600; }
.vs-recipe-panel [data-recipe-lines] { display: flex; flex-direction: column; gap: .4rem; }
.vs-recipe-panel [data-recipe-lines] > .vs-editor-btn { align-self: flex-start; }
.vs-recipe-line { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem minmax(2rem, auto) auto; align-items: center; gap: .4rem; }
.vs-recipe-line--dir { grid-template-columns: minmax(0, 1fr) 7.5rem minmax(2rem, auto) 6.5rem auto; }
.vs-recipe-line-unit { color: var(--vs-muted); white-space: nowrap; }
.vs-recipe-line > .vs-editor-btn { padding: .35rem .65rem; }
.vs-recipe-sec > [data-recipe-defaults-part] + [data-recipe-lines] { margin-top: .6rem; }
.vs-recipe-sec > [data-recipe-lines] + .vs-editor-recipe-decl { margin-top: .45rem; }
.vs-recipe-panel .vs-editor-recipe-note { font-size: 12px; color: var(--vs-muted); }
.vs-recipe-optional > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; list-style: none; }
.vs-recipe-optional > summary::-webkit-details-marker { display: none; }
.vs-recipe-optional > summary::before { content: "▸"; color: var(--vs-muted); }
.vs-recipe-optional[open] > summary::before { content: "▾"; }
.vs-recipe-optional > summary .vs-recipe-optional-title { margin: 0; padding: 0; border-bottom: 0; }
.vs-recipe-optional[open] > summary { margin-bottom: .55rem; padding-bottom: .35rem; border-bottom: 1px solid var(--vs-border); }
.vs-recipe-summary { font-size: 12px; color: var(--vs-muted); }
.vs-recipe-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.vs-recipe-actions .vs-editor-btn-primary { background: var(--vs-accent); border-color: var(--vs-accent); color: var(--vs-accent-ink); }
/* a széles oldalon a gombsor a lap aljához tapad — mint a termékszerkesztő oldalán (.vs-editor-actions) */
.vs-editor-page-body .vs-recipe-actions { position: sticky; bottom: 0; z-index: 2; padding: .6rem 0 .7rem; background: var(--vs-bg); border-top: 1px solid var(--vs-border); }
@media (max-width: 48rem) { .vs-recipe-io { grid-template-columns: 1fr; } }
@media (max-width: 30rem) {
  .vs-recipe-line, .vs-recipe-line--dir { grid-template-columns: minmax(0, 1fr) 5.5rem minmax(1.5rem, auto) auto; }
  .vs-recipe-line--dir .vs-editor-recipe-dir { grid-column: 1 / -1; grid-row: 2; }
}

/* ── BIRTOKOLT KAPCSOLAT BLOKKJA a szerkesztőn (D-VS-618): tétel-lista + Szerkesztés gomb ─────────
   A teljes szerkesztő a felugró panelben nyílik; itt csak áttekintés áll. */
.vs-editor-owned { margin-top: .9rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-surface); padding: .6rem .85rem; }
.vs-editor-owned-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.vs-editor-owned-title { margin: 0; font-size: .95rem; font-weight: 600; }
.vs-editor-owned-edit { font: inherit; font-size: 12px; padding: .2rem .7rem; border: 1px solid var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-surface); color: var(--vs-ink); cursor: pointer; }
.vs-editor-owned-edit:hover { background: var(--vs-accent-weak); border-color: var(--vs-accent); }
.vs-editor-owned-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.vs-editor-owned-item { font-size: 13px; padding: .2rem .35rem; border-radius: var(--vs-radius-sm); background: var(--vs-surface-2); }
.vs-editor-owned-note { margin: .1rem 0; font-size: 12px; color: var(--vs-muted); }
.vs-editor-owned-panel { border: 0; padding: 0; }

/* ── KAPCSOLATOK blokk (D-VS-619): recept · göngyöleg · árlista · kategória · tanúsítvány EGY blokkban,
   EGYFORMA sorokkal — az operátor kimondta: „a méretek és a css lehetőleg legyen már ugyanaz!".
   A blokk-keret és a felirat a mező-blokkokéval AZONOS osztályt használ (.vs-editor-block), tehát a
   megjelenés egy helyen él: ha az egyik változik, a másik magától követi (KUKA-003). */
.vs-editor-links-grid { display: flex; flex-direction: column; gap: .35rem; }
/* A HARMADIK oszlop FIX szélességű: `auto` mellett az üres állapot-szöveg összehúzódna, és a
   vezérlők soronként MÁS szélesek lennének — pont az, amit az operátor kifogásolt. */
.vs-editor-links-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) 11rem; align-items: center; gap: .5rem .9rem; }
.vs-editor-links-label { font-size: 12px; color: var(--vs-muted); font-weight: 600; }
.vs-editor-links-status { font-size: 12px; color: var(--vs-muted); text-align: right; }
.vs-editor-links-note { font-size: 12px; color: var(--vs-muted); margin: 0; }
/* A CSAK-OLVASÓ vezérlő ugyanúgy néz ki, csak halványabb és nem kattintható — a letiltás LÁTSZIK,
   tehát semmit nem ígér (KUKA-041). */
.vs-combo.is-readonly .vs-combo-trigger { cursor: default; opacity: .75; }
@media (max-width: 40rem) { .vs-editor-links-row { grid-template-columns: 1fr; } .vs-editor-links-status { text-align: left; } }
/* A SZINKRON DOBOZ a kapcsolatok blokk után áll, és ugyanazt a keretet viseli (egységes megjelenés). */
.vs-sync-block { margin-top: .9rem; border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: var(--vs-surface); padding: .7rem .85rem; }
.vs-sync-picker { margin: .35rem 0 .5rem; max-width: 40rem; }

/* A SZINKRON RÉSZLETEI a kapcsolatok blokk alatt (D-VS-621): a cél-választó a blokk SORÁBAN áll, a
   kiválasztott célok részletei (bolti pár · irány · mentés) itt — egy állapot, két hely. */
.vs-editor-links .vs-editor-links-syncdetails .vs-sync-block { margin-top: .6rem; border: 0; padding: 0; background: none; }
.vs-editor-links .vs-editor-links-syncdetails .vs-md-editor-title { display: none; } /* a sor FELIRATA már kimondja */

/* CVW-06 (D-VS-734 · R38 §3) — AZ ÖSSZEHASONLÍTÓ SOROK TÁBLÁJA.
   A széles tábla a SAJÁT sávjában görög, nem a lapot töri el (mobilon is olvasható marad);
   a hiányos alapú sor megjelölve — a szám a minőségével értelmes (KUKA-112). */
.vs-cc-rows { overflow-x: auto; margin-top: .5rem; }
.vs-cc-rows .vs-cc-table { width: 100%; }
.vs-cc-rows .vs-cc-table td.vs-cc-value,
.vs-cc-rows .vs-cc-table td.vs-cc-unitCost,
.vs-cc-rows .vs-cc-table td.vs-cc-material,
.vs-cc-rows .vs-cc-table td.vs-cc-ancillary,
.vs-cc-rows .vs-cc-table td.vs-cc-pool,
.vs-cc-rows .vs-cc-table th.vs-cc-total-value { text-align: right; white-space: nowrap; }
.vs-cc-scope-note { font-size: .9em; opacity: .85; }