/* Valach System (VS) v2 — FIÓKMENÜ + SAJÁT FIÓK (SFK-02, CMD-VS-220-001-001 R2).
   Csak a közös tokenekből (verify:design-tokens DTK03): szín, sarok, árnyék, betű — semmi beégetett érték.
   Asztali nézetben a gomb monogram + név; telefonon csak a monogram (a név a hozzáférhető feliratban él). */

/* ── a fejléc jobb széle ─────────────────────────────────────────────────────────────────────────── */
.vs-account-host { display:inline-flex; align-items:center; margin-left:.6rem; }
.vs-account { position:relative; display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem; }
.vs-account-btn {
  display:inline-flex; align-items:center; gap:.45rem; max-width:16rem;
  border:1px solid var(--vs-border); background:var(--vs-surface); color:var(--vs-ink);
  border-radius:var(--vs-radius-pill); padding:.15rem .6rem .15rem .2rem; font:inherit; cursor:pointer;
}
.vs-account-btn:hover { border-color:var(--vs-border-strong); background:var(--vs-surface-2); }
.vs-account-btn:focus-visible, .vs-account-item:focus-visible, .vs-account-retry:focus-visible, .vs-account-leave:focus-visible,
.vs-account-login:focus-visible, .vs-account-toc-link:focus-visible { outline:2px solid var(--vs-accent); outline-offset:2px; }
.vs-account-avatar {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:1.75rem; height:1.75rem; border-radius:var(--vs-radius-pill);
  background:var(--vs-accent); color:var(--vs-accent-ink); font-weight:700; font-size:.78rem; letter-spacing:.02em;
}
.vs-account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }

.vs-account-menu {
  position:absolute; top:calc(100% + .35rem); right:0; z-index:140;
  width:min(20rem, calc(100vw - 1rem)); padding:.35rem 0;
  background:var(--vs-surface); color:var(--vs-ink);
  border:1px solid var(--vs-border-strong); border-radius:var(--vs-radius-lg); box-shadow:var(--vs-shadow-md);
}
.vs-account-menu[hidden] { display:none; }
.vs-account-who { padding:.45rem .9rem .6rem; border-bottom:1px solid var(--vs-border); margin-bottom:.3rem; }
.vs-account-who-name { font-weight:700; }
/* a TELJES e-mail látszik: a hosszú cím törik, nem vágódik le */
.vs-account-who-email { color:var(--vs-muted); overflow-wrap:anywhere; word-break:break-word; }
.vs-account-item {
  display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--vs-ink);
  padding:.5rem .9rem; font:inherit; cursor:pointer;
}
.vs-account-item:hover, .vs-account-item:focus { background:var(--vs-accent-weak); }
.vs-account-item:disabled { opacity:.6; cursor:default; }
.vs-account-sep { height:1px; margin:.3rem 0; background:var(--vs-border); }
.vs-account-note { margin:.2rem .9rem .3rem; color:var(--vs-bad); font-size:.85rem; }
.vs-account-note:empty { display:none; }

.vs-account-status { color:var(--vs-muted); }
.vs-account-error { color:var(--vs-bad); }
.vs-account-login, .vs-account-retry, .vs-account-leave {
  display:inline-flex; align-items:center; border:1px solid var(--vs-accent); color:var(--vs-accent);
  background:var(--vs-surface); border-radius:var(--vs-radius-sm); padding:.2rem .6rem; font:inherit;
  text-decoration:none; cursor:pointer;
}

/* ── a Saját fiók oldal ──────────────────────────────────────────────────────────────────────────── */
.vs-account-page { max-width:60rem; }
.vs-account-toc { display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin:.4rem 0 .2rem; }
.vs-account-toc-link { color:var(--vs-accent); text-decoration:none; }
.vs-account-toc-link:hover { text-decoration:underline; }
.vs-account-section { scroll-margin-top:.75rem; }
.vs-account-section:focus { outline:2px solid var(--vs-accent-weak); outline-offset:2px; }
.vs-account-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem; margin:.4rem 0; }
.vs-account-field { display:flex; flex-direction:column; gap:.2rem; min-width:12rem; flex:1 1 14rem; max-width:22rem; }
.vs-account-label { font-size:.82rem; color:var(--vs-muted); font-weight:600; }
.vs-account-field input {
  font:inherit; 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-account-kv { display:flex; flex-direction:column; gap:.15rem; margin-top:.9rem; }
.vs-account-email { font-weight:600; overflow-wrap:anywhere; word-break:break-word; }
.vs-account-msg:empty { display:none; }
.vs-account-2fa { margin-top:1.5rem; }
.vs-account-sessions { margin-top:1.5rem; }
.vs-account-sessions-list { overflow-x:auto; }
.vs-account-sessions-table td { vertical-align:top; }
.vs-account-device { display:block; font-weight:600; }
.vs-account-ip { display:block; color:var(--vs-muted); font-size:.82rem; }
.vs-account-badge {
  display:inline-block; margin:.15rem 0; padding:.05rem .5rem; font-size:.78rem; font-weight:600;
  border-radius:var(--vs-radius-pill); background:var(--vs-accent-weak); color:var(--vs-accent);
}
.vs-account-langs { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.vs-account-lang.is-active { border-color:var(--vs-accent); background:var(--vs-accent-weak); color:var(--vs-accent); font-weight:600; }
.vs-account-companies tr.is-current td, .vs-account-sessions-table tr.is-current td { background:var(--vs-surface-2); }
.vs-account-company { font-weight:600; }

/* ── telefon ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .vs-account-host { margin-left:auto; }
  .vs-account-btn { padding:.15rem; min-width:2.75rem; min-height:2.75rem; justify-content:center; }
  .vs-account-name { display:none; }
  .vs-account-avatar { width:2rem; height:2rem; }
  .vs-account-item { padding:.7rem .9rem; }
  .vs-account-field { max-width:none; }
  .vs-account-sessions-table th:nth-child(4), .vs-account-sessions-table td:nth-child(4) { display:none; }
}

/* ── BEMUTATÓ-JELZÉS (DMO-01, CMD-VS-220-001-001 R4 §5) — a demóban a fejléc mindig kimondja, hogy ez bemutató ── */
.vs-demo { position:relative; display:inline-flex; align-items:center; margin-right:8px; }
.vs-demo-badge {
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  padding:3px 10px; border-radius:var(--vs-radius-pill); border:1px solid var(--vs-warn);
  background:var(--vs-warn-weak); color:var(--vs-warn);
}
.vs-demo-badge:focus-visible { outline:2px solid var(--vs-accent); outline-offset:2px; }
.vs-demo-panel {
  position:absolute; top:calc(100% + 6px); right:0; z-index:60; width:min(320px, 90vw);
  padding:12px; border-radius:var(--vs-radius-lg); border:1px solid var(--vs-border-strong);
  background:var(--vs-surface); color:var(--vs-ink); box-shadow:var(--vs-shadow-md);
}
.vs-demo-note { margin:0 0 8px; font-size:13px; line-height:1.45; }
.vs-demo-link {
  display:block; width:100%; text-align:left; font:inherit; font-size:13px; cursor:pointer;
  padding:7px 10px; margin-top:4px; border-radius:var(--vs-radius-sm); border:1px solid var(--vs-border);
  background:var(--vs-surface-2); color:var(--vs-ink);
}
.vs-demo-link:hover, .vs-demo-link:focus-visible { border-color:var(--vs-accent); outline:none; }
/* ── CÉG NÉLKÜLI BAL MENÜ (R4 §4) ── */
.vs-nav-account-only { padding:12px; font-size:13px; line-height:1.45; color:var(--vs-muted); }
.vs-nav-account-only-text { margin:0 0 8px; }
@media (max-width: 860px) {
  /* telefonon a panel a KÉPERNYŐHÖZ igazodik (nem a jelzéshez), így nem lóg ki — kis margóval mindkét oldalon */
  .vs-demo-panel { position:fixed; top:56px; left:12px; right:12px; width:auto; }
}