/* Valach System (VS) v2 — A NÉGY RENDSZER-FÜL KÖZÖS ÖLTÖZETE (SYP-01, D-VS-507).

   OPERÁTORI KÖTÉS (2026-08-21): „ha már a rendszer menüpontba kerültek az ilyen dolgok, akkor az
   üzenetek és a diagnosztika is odakerülhet, hozzáteszem NORMÁLIS FELÜLETEKKEL. egy kicsit legyen
   egységesebb az identitás, az őrjárat, a diagnosztika, és a rendszerüzenetek fülek."

   ITT CSAK TOKENEK szerepelhetnek (a design-token őr ezt méri, DTK-01) — új szín, új sugár nem
   születik. A négy fül KERETE a `public/js/system-panel.mjs` (nem ez a fájl): a keret a viselkedés,
   ez csak az öltözete. Ezért ha egy osztály itt hiányzik, a fül attól még MŰKÖDIK — csak csúnya.

   AMIT EZ A FÁJL MEGJAVÍT: az őrjárat rácsának EDDIG EGYETLEN SZABÁLYA SEM VOLT (a `vs-patrol-*` és
   a `vs-acx-actions` osztályokra sehol nem állt CSS) — nyers, formázatlan táblaként jelent meg. Ez
   a KUKA-011 öltözet-alakja: amit nem jelenítünk meg rendesen, azt az operátor nem tudja használni. */

/* ── a közös keret ────────────────────────────────────────────────────────────────────────────── */
.vs-syspanel { display: block; }
.vs-syspanel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin-bottom: .15rem;
}
.vs-syspanel-title { margin: 0; font-size: 1.15rem; }
/* A MONDAT: mi ez a fül. Halványabb, de olvasható — nem apró betűs lábjegyzet. */
.vs-syspanel-lead {
  margin: .15rem 0 .6rem; color: var(--vs-muted); max-width: 62ch;
}
.vs-syspanel-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0 0 .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--vs-border);
}
/* A KÖZÖS ÁLLAPOT-SOR — minden fülön UGYANOTT, hogy az operátor mindig egy helyen keresse. */
.vs-syspanel-status {
  margin: 0 0 .6rem; padding: .4rem .6rem;
  background: var(--vs-surface-2); border-left: 4px solid var(--vs-accent);
  border-radius: var(--vs-radius-sm); color: var(--vs-ink);
}
.vs-syspanel-status.vs-blocker { border-left-color: var(--vs-bad); background: var(--vs-bad-weak); }
.vs-syspanel-body { display: block; }
/* A RÉSZLET HELYBEN NYÍLIK — nem újabb felugró ablakban (ez volt a régi baj). */
.vs-syspanel-more { margin: .5rem 0; }
.vs-syspanel-more > summary { cursor: pointer; color: var(--vs-accent); }

/* ── őrjárat ──────────────────────────────────────────────────────────────────────────────────── */
.vs-patrol-table td { vertical-align: top; }
.vs-patrol-cell { min-width: 9rem; }
/* A RAGADÓS ELSŐ OSZLOP (D-VS-559, 6. pont): sok mérésnél a rács vízszintesen görgethető, de a CÉG
   oszlopa mindig látszik. A görgető a rács SAJÁT kerete — a lap nem görgethet vízszintesen. */
.vs-patrol-scroll { overflow-x: auto; max-width: 100%; }
.vs-patrol-scroll .vs-patrol-table th:first-child,
.vs-patrol-scroll .vs-patrol-table td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--vs-surface);
  box-shadow: 2px 0 0 var(--vs-border);
}
/* A fejléc-név GOMB (D-VS-559, 3. pont): a közös hiba-listát nyitja mérés-szűrővel. */
.vs-patrol-colhead { font-weight: 600; text-align: left; }
/* A beágyazott KÖZÖS tétel-lista befogadója (D-VS-561): a rács alatt, ugyanazon az oldalon. */
.vs-patrol-itemshost { margin-top: 1.2rem; border-top: 1px solid var(--vs-border); padding-top: .8rem; }
.vs-patrol-ok   { background: var(--vs-ok-weak); }
.vs-patrol-bad  { background: var(--vs-bad-weak); }
.vs-patrol-info { background: var(--vs-surface-2); }
.vs-patrol-none { background: var(--vs-warn-weak); }
/* A küszöb OTT áll, ahol a szám — nem külön képernyőn. */
.vs-patrol-th { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem; margin-top: .25rem; }
.vs-patrol-input {
  width: 5rem; padding: .2rem .35rem; font: inherit;
  border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm);
}
.vs-patrol-detail {
  margin-top: .75rem; padding: .6rem .75rem;
  background: var(--vs-surface); border: 1px solid var(--vs-border-strong);
  border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-sm);
}
.vs-patrol-detail h4 { margin: 0 0 .3rem; }
.vs-patrol-state { font-weight: 600; margin: .3rem 0; }
/* A TE MONDATOD elöl, kiemelve — a fejlesztői külön, lenyitva (operátori kötés: kétféle üzenet). */
.vs-patrol-hu {
  margin: .3rem 0; padding: .4rem .6rem;
  background: var(--vs-accent-weak); border-radius: var(--vs-radius-sm);
}
.vs-patrol-more { margin: .4rem 0 0; }
.vs-patrol-more > summary { cursor: pointer; color: var(--vs-accent); }

/* ── diagnosztika ─────────────────────────────────────────────────────────────────────────────── */
.vs-diag-table { max-width: 48rem; }
.vs-diag-k { width: 16rem; color: var(--vs-muted); }

/* ── diagnosztika: Segítség kérése blokk (SUP-02, D-VS-513) ───────────────────────────────────── */
.vs-diag-snapshot { display: block; }
.vs-diag-help {
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--vs-border);
}
.vs-diag-help-title { margin: 0 0 .3rem; }
.vs-diag-help-text {
  width: 100%; max-width: 48rem; box-sizing: border-box;
  padding: .45rem .6rem; font: inherit;
  border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm);
}
.vs-diag-help-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0;
}
.vs-diag-help-lang {
  padding: .3rem .45rem; font: inherit;
  border: 1px solid var(--vs-border); border-radius: var(--vs-radius-sm); background: var(--vs-surface);
}
.vs-diag-help-out { max-width: 62ch; }

/* ── rendszerüzenetek ─────────────────────────────────────────────────────────────────────────── */
.vs-msg-table td { vertical-align: top; }
.vs-msg-mark { width: 2rem; text-align: center; font-size: 1.05rem; }
.vs-msg-when { width: 9rem; color: var(--vs-muted); font-variant-numeric: tabular-nums; }
.vs-msg-error { background: var(--vs-bad-weak); }
.vs-msg-warn  { background: var(--vs-warn-weak); }
.vs-msg-ok    { background: var(--vs-ok-weak); }
.vs-msg-info  { background: var(--vs-surface); }

/* ── identitás: a három panel EGY keretben, egymás alatt, tagolva ─────────────────────────────── */
.vs-runtime-panel {
  margin: 0 0 .6rem; padding: .6rem .75rem;
  background: var(--vs-surface); border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius);
}
.vs-runtime-panel-title { font-weight: 600; margin-bottom: .35rem; }
/* A HÁROM PANEL egy-egy bal-sávval különül el — nem szín szerint, hanem SZEREP szerint. */
.vs-runtime-identity { border-left: 4px solid var(--vs-accent); }
.vs-runtime-permission { border-left: 4px solid var(--vs-warn); }
.vs-runtime-enforcement { margin: .2rem 0 .35rem; }
.vs-runtime-audit-host { display: block; }
.vs-runtime-audit-row td { font-variant-numeric: tabular-nums; }
.vs-runtime-idbadge {
  display: grid; grid-template-columns: 10rem 1fr; gap: .15rem .6rem; margin: 0;
}
.vs-runtime-idkey { color: var(--vs-muted); }
.vs-runtime-idval { margin: 0; }
.vs-runtime-permlist { list-style: none; margin: .3rem 0 0; padding: 0; }
.vs-runtime-permrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .2rem 0; border-bottom: 1px solid var(--vs-border);
}
.vs-runtime-permaction { font-family: var(--vs-mono); font-size: .9em; }
.vs-runtime-permbadge { border-radius: var(--vs-radius-pill); padding: .05rem .5rem; font-size: .85em; }
.vs-runtime-permbadge.is-allow { background: var(--vs-ok-weak); color: var(--vs-ok); }
.vs-runtime-permbadge.is-deny  { background: var(--vs-bad-weak); color: var(--vs-bad); }
.vs-runtime-audit-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.vs-runtime-adapter { color: var(--vs-muted); font-size: .9em; }
.vs-runtime-probe {
  margin: .4rem 0; border: 1px solid var(--vs-border); background: var(--vs-surface);
  border-radius: var(--vs-radius-sm); padding: .35rem .7rem; cursor: pointer; font: inherit;
}
.vs-runtime-audit-table { border-collapse: collapse; width: 100%; }
.vs-runtime-audit-table th, .vs-runtime-audit-table td {
  border: 1px solid var(--vs-border); padding: .3rem .5rem; text-align: left;
}
.vs-runtime-audit-table thead th { background: var(--vs-bg); }