/* 🔒 CLAUDE_STABLE - 2026-09-29 - a user jónak mondta: héj a TW mintájára + verzió és összecsukó nyíl, 5 felbontás mérve */
/* ══════════════════════════════════════════════════════════════
   weblockai — A BAL ÉS A JOBB SÁV A TICKETWRIGHT MINTÁJÁRA
   /assets/hej.css   ·   2026-09-29

   A user kérése: „csináljunk egy olyan bal oldali shell menüt, mint a
   ticketnél van, és oda rakjunk mindent” · „a Superadmin és a Licenceim
   a jobb oldalra kerülnek, úgy, mint itt” (a TicketWright profil-panelje).

   🔑 A SZÁMOK A TICKETWRIGHT FORRÁSÁBÓL JÖNNEK (`tw-shell.css`, a fájl
      végi „kimérve, 2026-09-21” blokkok): sormagasság, térköz, sarok,
      betűméret, panelméret, mozgás. A SZÍN a weblockai-é: ahol ott türkiz
      áll, itt a lime (#c9ff35).
   🔑 Utolsóként töltődik be, és a bal sáv szabályai a `.wh-menu` alatt
      állnak, így a `design.css` régi sáv-szabályait felülírja.
   ══════════════════════════════════════════════════════════════ */

/* ── A bal sáv szélessége: 230 px (a TicketWrighté) ──
   Csak ott, ahol a sáv teljes; 1024–1279 között az ikonos sáv marad. */
@media (min-width: 1280px) {
  :root { --sav-w: 14.375rem; }
}

/* ── A menü ────────────────────────────────────────────────── */
.oldalsav .wh-menu {
  padding: .75rem .125rem 1.5rem;
  gap: .125rem;
}
.wh-menu .sav-pont {
  display: flex; align-items: center; gap: .6875rem;
  min-height: 2.75rem; margin: 0;
  /* A keret mindig ott van (átlátszóan), így az aktív sor nem ugrik el. */
  padding: .5rem .6875rem;
  border: 1px solid transparent; border-radius: 8px;
  font-size: var(--b-m, .875rem); font-weight: 600; color: var(--m-pala);
  text-decoration: none;
}
.wh-menu .sav-pont .lep-ikon { width: 1.125rem; height: 1.125rem; color: var(--m-pala); }
.wh-menu .sav-pont .lep-ikon .i { width: 100%; height: 100%; }
.wh-menu .sav-pont:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
.wh-menu .sav-pont:hover .lep-ikon { color: var(--m-feher); }

/* Az aktív sor: fehér szöveg, halvány lime alap és keret, lime ikon. */
.wh-menu .sav-pont.itt {
  color: var(--m-feher); font-weight: 600;
  background: linear-gradient(100deg, rgba(var(--m-lime-rgb),.16), rgba(var(--m-lime-rgb),.05));
  border-color: rgba(var(--m-lime-rgb),.28);
  border-radius: 9px;
}
.wh-menu .sav-pont.itt .lep-ikon { color: var(--m-lime); }

/* A TicketWright menüje tagolatlan sor: nincs elválasztó vonal, csak levegő. */
.wh-menu .sav-pont--elval { margin-top: .5rem; padding-top: .5rem; border-top-color: transparent; }

/* A kész lépés pipája a sor jobb szélén. */
.wh-menu .lep-jel { margin-left: auto; color: var(--m-lime); }

/* Csoportcím a menüben (2026-10-06, közös változat): „A filmed lépései”, „Eszközök”, „Segítség”. */
.wh-menu-cim {
  display: block; margin: .875rem 0 .25rem; padding: 0 .6875rem;
  font-size: var(--b-xs, .6875rem); font-weight: 700; letter-spacing: .08em; line-height: 1.4;
  text-transform: uppercase; color: rgba(var(--m-feher-rgb),.55);
}
/* „most ez”: a film következő lépése, lime címke a sor végén (a `_ft-js.php` teszi ki). */
.wh-menu .lep-jel.most {
  padding: .125rem .4375rem; border-radius: 4px;
  background: var(--m-lime); color: var(--m-fekete);
  font-size: var(--b-xs, .6875rem); font-weight: 700; line-height: 1.3; white-space: nowrap;
}

/* Zárolt lépés: látszik, de halványan. */
.wh-menu .sav-pont--zarva { color: var(--m-szurke-kozep); }
.wh-menu .sav-pont--zarva .lep-ikon,
.wh-menu .sav-pont--zarva .lep-jel { color: var(--m-szurke-kozep); }

/* ── A helyben nyíló csoport (harmonika) ──────────────────── */
.wh-harmonika { margin: 0; }
.wh-harmonika > summary { list-style: none; cursor: pointer; }
.wh-harmonika > summary::-webkit-details-marker { display: none; }
.wh-nyil {
  margin-left: auto; display: grid; place-items: center;
  opacity: .6; transition: transform .15s ease;
}
.wh-nyil .i { width: .875rem; height: .875rem; }
.wh-harmonika[open] > summary .wh-nyil { transform: rotate(90deg); opacity: .9; }

.wh-al { display: grid; gap: 1px; margin: .125rem 0 .25rem; padding: 0 0 0 .5rem; }
.wh-al-elem {
  display: flex; align-items: center; gap: .6875rem;
  width: 100%; min-height: 2.625rem;
  padding: .5625rem .75rem .5625rem .5rem;
  background: none; border: 0; border-radius: 9px;
  font: inherit; font-size: var(--b-m, .875rem); font-weight: 600; color: var(--m-pala);
  text-align: left; text-decoration: none; cursor: pointer;
}
.wh-al-elem:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
.wh-al-elem.itt { background: rgba(var(--m-lime-rgb),.12); color: var(--m-feher); }
.wh-al-elem:focus-visible,
.wh-menu .sav-pont:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }
/* Az alpont ikonja csak az ikonos sávban kell (lent). */
.wh-al-ikon { display: none; }
/* A Sablonok lenyílói (2026-11-12): a sablon neve vékonyabb, az első sor (a típus lapja) lime. */
[data-sab-csop] .wh-al { margin-left: 1.0625rem; padding-left: .5rem; border-left: 1px solid rgba(var(--m-feher-rgb),.1); }
[data-sab-csop] .wh-al-elem { min-height: 2.25rem; padding-block: .375rem; font-weight: 500; font-size: var(--b-s, .8125rem); line-height: 1.3; }
[data-sab-csop] .wh-al-elem--tipus { font-weight: 600; color: var(--m-lime); }
@media (min-width: 1024px) and (max-width: 1279px) { [data-sab-csop] .wh-al { display: none; } }
@media (min-width: 1280px) { html[data-sav="zart"] [data-sab-csop] .wh-al { display: none; } }

@media (prefers-reduced-motion: reduce) { .wh-nyil { transition: none; } }

/* ── 1024–1279: ikonos sáv ──
   A régi szabály a feliratot már elrejti; itt a sorok középre kerülnek, és
   az alpontok a saját ikonjukkal látszanak (a felirat nem fér el). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .oldalsav .wh-menu { padding-inline: 0; }
  .wh-menu .sav-pont { justify-content: center; padding-inline: 0; }
  .wh-menu .lep-jel, .wh-nyil { display: none; }
  .wh-menu-cim { height: 1px; margin: .5rem .75rem; padding: 0; overflow: hidden; color: transparent; background: rgba(var(--m-feher-rgb),.1); }
  .wh-al { padding: 0; margin: 0 0 .25rem; }
  .wh-al-elem { justify-content: center; padding-inline: 0; }
  .wh-al-ikon { display: inline-flex; width: 1rem; height: 1rem; }
  .wh-al-ikon .i { width: 100%; height: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   A SÁV FEJE: logó, alatta a verzió, mellette az összecsukó nyíl
   (2026-09-29, a user kérése). A TicketWright számai: 16/14 px térköz,
   71 px magas fej, 32 px-es gomb, a verzió 12 px/400 monospace.
   🔑 1280 alatt a fej „nincs” (`display: contents`): ott a régi logó-
      szabályok dolgoznak változatlanul, a nyíl és a verzió rejtve.
   ══════════════════════════════════════════════════════════════ */
.wh-fej { display: contents; }
.wh-csuk, .wh-verzio { display: none; }

@media (min-width: 1280px) {
  .wh-fej {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    flex-shrink: 0; min-height: 4.4375rem; padding: 1rem .875rem;
    border-bottom: 1px solid var(--border);
  }
  /* 🔴 A logó 32 px-es betűvel 177 px széles: a nyíl mellette 16 px-szel
     kilógott a 230-as sávból (mérve). 26 px-en 144 px, a nyíl elfér. */
  .wh-fej .sav-brand {
    min-width: 0; padding: 0; border-bottom: 0;
    justify-content: flex-start; font-size: var(--b-3xl, 1.75rem);
  }
  .wh-logo-ki { display: flex; flex-direction: column; min-width: 0; }
  .wh-verzio {
    display: block;
    font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
    font-size: var(--b-s, .8125rem); font-weight: 400; line-height: 1.6; letter-spacing: 0;
    color: var(--m-pala); -webkit-text-fill-color: var(--m-pala);
  }
  .wh-csuk {
    position: relative; flex: none;
    display: grid; place-items: center;
    width: 2rem; height: 2rem; padding: 0;
    background: none; border: 0; border-radius: 8px;
    color: var(--m-pala); cursor: pointer;
  }
  /* A látszó gomb 32 px, a kattintható terület 44 px. */
  .wh-csuk::after { content: ''; position: absolute; inset: -6px; }
  .wh-csuk .i { width: 1rem; height: 1rem; transform: rotate(180deg); }
  .wh-csuk:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
  .wh-csuk:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }

  /* ── Összecsukva: 64 px-es ikonos sáv, a logó helyén a nyitó nyíl ──
     Ugyanaz a kép, mint 1024–1279 között (`design.css`, fent). */
  html[data-sav="zart"] { --sav-w: 64px; }
  html[data-sav="zart"] .oldalsav { padding: 0 6px; }
  html[data-sav="zart"] .wh-fej { justify-content: center; padding-inline: 0; }
  html[data-sav="zart"] .wh-fej .sav-brand { display: none; }
  html[data-sav="zart"] .wh-csuk .i { transform: none; }
  html[data-sav="zart"] .oldalsav .pv-cim, html[data-sav="zart"] .oldalsav .pv-nyil,
  html[data-sav="zart"] .oldalsav .szak-nev, html[data-sav="zart"] .oldalsav .szak-all,
  html[data-sav="zart"] .oldalsav .szak-nyil,
  html[data-sav="zart"] .oldalsav .lep-nev, html[data-sav="zart"] .oldalsav .lep-all { display: none; }
  html[data-sav="zart"] .oldalsav .pv-gomb, html[data-sav="zart"] .oldalsav .szak-fej,
  html[data-sav="zart"] .oldalsav .sav-lepes, html[data-sav="zart"] .oldalsav .sav-pont { justify-content: center; }
  html[data-sav="zart"] .oldalsav .wh-menu { padding-inline: 0; }
  html[data-sav="zart"] .wh-menu .sav-pont { padding-inline: 0; }
  html[data-sav="zart"] .wh-menu .lep-jel, html[data-sav="zart"] .wh-nyil { display: none; }
  html[data-sav="zart"] .wh-menu-cim { height: 1px; margin: .5rem .75rem; padding: 0; overflow: hidden; color: transparent; background: rgba(var(--m-feher-rgb),.1); }
  html[data-sav="zart"] .wh-al { padding: 0; margin: 0 0 .25rem; }
  html[data-sav="zart"] .wh-al-elem { justify-content: center; padding-inline: 0; }
  html[data-sav="zart"] .wh-al-ikon { display: inline-flex; width: 1rem; height: 1rem; }
  html[data-sav="zart"] .wh-al-ikon .i { width: 100%; height: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   A JOBB SÁV PANELJEI — a TicketWright profil-panelje
   360 széles, teljes magasságú, a sáv mellől tárul fel, bal sarkai 14 px.
   ══════════════════════════════════════════════════════════════ */
.wh-panel-elem { margin: 0; flex-shrink: 0; }
.wh-panel-elem > summary { list-style: none; }
.wh-panel-elem > summary::-webkit-details-marker { display: none; }

/* A megnyitott panel gombja: lime alap (a TicketWrightban türkiz). */
.jobbsav details[open] > .rb-gomb,
.jobbsav details[open] > .rb-gomb .i { color: var(--m-lime); }
.jobbsav details[open] > .rb-gomb {
  background: rgba(var(--m-lime-rgb),.14); border-color: rgba(var(--m-lime-rgb),.32);
}
/* Superadmin-lapon a gomb jelzi, hol vagy. */
.jobbsav .wh-sav-gomb.itt,
.jobbsav .wh-sav-gomb.itt .i { color: var(--m-lime); }
.jobbsav .wh-profil > summary { margin-top: 2px; }
.jobbsav .wh-profil[open] > summary,
.jobbsav .wh-profil > summary.itt { box-shadow: 0 0 0 3px rgba(var(--m-lime-rgb),.35); }

.wh-panel {
  position: fixed; top: 0; bottom: 0; right: var(--jsav-w); left: auto;
  z-index: 130;
  width: 22.5rem; max-width: calc(100vw - var(--jsav-w));
  padding: 1.25rem 1.375rem;
  overflow-y: auto; overscroll-behavior: contain;
  background-color: color-mix(in srgb, var(--hej-lap, #0b2340) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(var(--m-feher-rgb),.1);
  border-radius: 14px 0 0 14px;
  box-shadow: -12px 0 40px rgba(var(--m-fekete-tiszta-rgb),.45);
  color: var(--m-feher-tort); text-align: left;
}

/* A görgetősáv ne vágjon világos csíkot a sötét panelbe (a TicketWrightban
   ugyanez a hiba volt). 🔴 A két szabvány kiüti egymást: ahol van
   `::-webkit-scrollbar`, ott a `scrollbar-width` nem állhat mellette. */
@supports not selector(::-webkit-scrollbar) {
  .wh-panel, .oldalsav, .oldalsav .wh-menu { scrollbar-width: thin; scrollbar-color: rgba(var(--m-feher-rgb),.18) transparent; }
}
.wh-panel::-webkit-scrollbar,
.oldalsav::-webkit-scrollbar, .oldalsav .wh-menu::-webkit-scrollbar { width: 6px; }
.wh-panel::-webkit-scrollbar-track,
.oldalsav::-webkit-scrollbar-track, .oldalsav .wh-menu::-webkit-scrollbar-track { background: transparent; }
.wh-panel::-webkit-scrollbar-thumb,
.oldalsav::-webkit-scrollbar-thumb, .oldalsav .wh-menu::-webkit-scrollbar-thumb { background: rgba(var(--m-feher-rgb),.18); border-radius: 3px; }
.wh-panel:hover::-webkit-scrollbar-thumb,
.oldalsav:hover::-webkit-scrollbar-thumb, .oldalsav .wh-menu:hover::-webkit-scrollbar-thumb { background: rgba(var(--m-feher-rgb),.28); }

/* Fejrész: cím + ✕ */
.wh-panel-fej {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 0 0 1.5rem;
}
.wh-panel-cim { font-size: var(--b-l, 1rem); font-weight: 700; color: var(--m-feher); }
.wh-panel-x {
  position: relative; flex: none;
  width: 1.75rem; height: 1.75rem; padding: 0;
  display: grid; place-items: center;
  background: rgba(var(--m-feher-rgb),.06); color: rgba(var(--m-feher-rgb),.6);
  border: 1px solid rgba(var(--m-feher-rgb),.1); border-radius: 7px;
  cursor: pointer; font-size: var(--b-s, .8125rem); line-height: 1;
}
/* A látszó doboz 28 px marad (a TicketWright mérete), a kattintható
   terület 44 px — a saját szabályunk szerint ennyi a legkisebb. */
.wh-panel-x::after { content: ''; position: absolute; inset: -8px; }
.wh-panel-x:hover { background: rgba(var(--m-feher-rgb),.12); color: var(--m-feher); }

/* A profil feje: 42-es kör, név, szerep */
.wh-profil-fej {
  display: flex; align-items: center; gap: .75rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgba(var(--m-feher-rgb),.08);
}
.wh-monogram {
  flex: none; width: 2.625rem; height: 2.625rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--m-lime), var(--m-lime-kozep)); color: var(--m-fekete);
  font-size: var(--b-m, .875rem); font-weight: 700; letter-spacing: .02em;
}
.wh-profil-ki { min-width: 0; }
.wh-profil-nev {
  display: block; font-size: .9375rem; font-weight: 700; color: var(--m-feher);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-profil-szerep {
  display: block; margin-top: .125rem;
  font-size: var(--b-s, .8125rem); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(var(--m-feher-rgb),.5);
}

/* A sorok: 44 magas, 15 px, 8 px sarok, 11 px térköz */
.wh-sorok { display: flex; flex-direction: column; padding: .5rem; }
.wh-sor {
  display: flex; align-items: center; gap: .6875rem;
  min-height: 2.75rem; padding: .5625rem .75rem;
  border: 1px solid transparent; border-radius: 8px;
  font-size: var(--b-m, .875rem); font-weight: 400; color: var(--m-pala);
  text-decoration: none;
}
.wh-sor > span { flex: 1; min-width: 0; }
.wh-sor .i { flex: none; width: 1.125rem; height: 1.125rem; color: var(--m-pala); }
.wh-sor .wh-sor-nyil { width: 1rem; height: 1rem; opacity: .35; }
.wh-sor:hover { background: rgba(var(--m-feher-rgb),.06); color: var(--m-feher); }
.wh-sor:hover .i { color: var(--m-feher); }
.wh-sor.itt { background: rgba(var(--m-feher-rgb),.07); color: var(--m-feher); font-weight: 600; }
.wh-sor.itt .i { color: var(--m-lime); }
.wh-sor:focus-visible, .wh-kilep:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 1px; }
/* Profil panel (2026-10-04, a Slepnex mintájára): vékony elválasztó és a piros Veszélyes zóna */
.wh-sor-valaszto { display: block; height: 1px; margin: .5rem .75rem; background: rgba(var(--m-feher-rgb),.06); }
.wh-sor--veszely, .wh-sor--veszely .i { color: var(--m-piros-halvany); }
.wh-sor--veszely:hover { background: rgba(220,38,38,.14); color: var(--m-piros-halo); }
.wh-sor--veszely:hover .i { color: var(--m-piros-halo); }

/* Csoportfelirat (SÚGÓ, a Superadmin csoportjai) */
.wh-panel-sav {
  margin: .75rem 0 .25rem; padding: .75rem 0 0 .75rem;
  border-top: 1px solid rgba(var(--m-feher-rgb),.06);
  font-size: var(--b-xs, .6875rem); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(var(--m-feher-rgb),.58);
}

/* A Superadmin csoportjai a Profil panelben (2026-10-05): lenyíló sor, alatta behúzva a lapok */
.wh-csop { margin: 0; }
.wh-csop > summary { list-style: none; cursor: pointer; }
.wh-csop > summary::-webkit-details-marker { display: none; }
.wh-csop > summary .wh-sor-nyil { transition: transform .15s ease; }
.wh-csop[open] > summary { color: var(--m-feher); }
.wh-csop[open] > summary .wh-sor-nyil { transform: rotate(90deg); opacity: .7; }
.wh-csop-sorok { display: flex; flex-direction: column; margin: 0 0 .25rem; padding-left: 1rem; }
.wh-csop-sorok .wh-sor-nyil,
.wh-sor[data-sa-link] .wh-sor-nyil { display: none; }

/* ── Profil panel, közös változat (2026-10-06) ──
   Sor rövid leírással; adminnak két fül (Fiókom | Superadmin), rádiógombbal,
   tehát szkript nélkül is vált. A lime alá húzás jelzi a nyitott fület. */
.wh-sor--leir { align-items: center; padding-block: .5rem; }
.wh-sor--leir > span { display: flex; flex-direction: column; gap: .0625rem; }
.wh-sor--leir b { font-weight: 600; color: var(--m-feher-tort); }
.wh-sor--leir small {
  font-size: var(--b-s, .8125rem); line-height: 1.35; color: rgba(var(--m-feher-rgb),.58);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-sor--leir:hover b, .wh-sor--leir.itt b { color: var(--m-feher); }

.wh-ful-r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.wh-fulek {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  margin: 0 0 .5rem; padding: .25rem;
  background: rgba(var(--m-feher-rgb),.05); border-radius: 8px;
}
.wh-fulek label {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
  border-radius: 6px; font-size: var(--b-m, .875rem); font-weight: 600; color: var(--m-pala); cursor: pointer;
}
.wh-fulek label:hover { color: var(--m-feher); background: rgba(var(--m-feher-rgb),.06); }
#wh-ful-fiok:checked ~ .wh-fulek [for="wh-ful-fiok"],
#wh-ful-sa:checked ~ .wh-fulek [for="wh-ful-sa"] { background: var(--m-lime); color: var(--m-fekete); }
#wh-ful-fiok:focus-visible ~ .wh-fulek [for="wh-ful-fiok"],
#wh-ful-sa:focus-visible ~ .wh-fulek [for="wh-ful-sa"] { outline: 2px solid var(--m-lime); outline-offset: 2px; }
#wh-ful-fiok:checked ~ .wh-ful-lap--sa,
#wh-ful-sa:checked ~ .wh-ful-lap--fiok { display: none; }
.wh-ful-lap { display: flex; flex-direction: column; }

/* Kilépés: piros SZÖVEG, nem piros doboz */
.wh-kilep {
  display: flex; align-items: center; gap: .6875rem;
  width: 100%; min-height: 2.75rem; margin: .75rem 0 0;
  padding: .5625rem .75rem;
  background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: var(--b-m, .875rem); font-weight: 400; color: var(--m-piros-halvany);
  text-align: left; cursor: pointer;
}
.wh-kilep .i { width: 1.125rem; height: 1.125rem; color: inherit; }
.wh-kilep:hover { background: rgba(220,38,38,.14); color: var(--m-piros-halo); }

/* ── Profil panel görgetés nélkül (2026-10-06, a user: „kicsi monitoron se kelljen görgetni”;
   20:40: „a széles menü rettenetes” → keskeny, egy hasáb marad) ──
   A szélesség az eredeti 22.5rem. Egérrel (pointer: fine) a sorok 36 px-esek,
   érintőképernyőn 44 px maradnak. A „Profil” címsor nem foglal külön sort.
   Alul: (régiben Tudásbázis) · Kinézet · Veszélyes zóna · Kilépés. */
.wh-panel { padding: 1rem 1.125rem; }
.wh-panel-fej { margin-bottom: .625rem; }
.wh-profil-fej { padding-bottom: .75rem; }
.wh-monogram { width: 2.25rem; height: 2.25rem; }
.wh-profil .wh-panel-fej { position: absolute; top: 1rem; right: 1.125rem; margin: 0; }
.wh-profil .wh-panel-cim { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wh-profil .wh-profil-fej { padding-right: 2.75rem; }
.wh-sorok { padding: .375rem 0 0; }
.wh-sor-valaszto { margin: .25rem .75rem; }
.wh-panel-sav { margin: .375rem 0 0; padding: .5rem 0 .125rem .75rem; }
.wh-csop-sorok { padding-left: .75rem; margin-bottom: .125rem; }
.wh-lab {
  display: flex; flex-direction: column;
  margin-top: .375rem; padding-top: .375rem; border-top: 1px solid rgba(var(--m-feher-rgb),.08);
}
.wh-lab .wh-kilep { margin: 0; }
.wh-lab .wh-sor-nyil { display: none; }
@media (pointer: fine) {
  .wh-panel :is(.wh-sorok, .wh-lab) :is(.wh-sor, .wh-kilep) { min-height: 2.25rem; padding-block: .3125rem; }
  .wh-panel .wh-sor--leir { padding-block: .25rem; }
  .wh-panel .wh-sor--leir small { line-height: 1.25; }
  .wh-fulek label { min-height: 2.25rem; }
}
/* A profilpanel lent áll, a profilgombnál, és csak a tartalma magasságáig ér (2026-10-06 21:20,
   a user: „a felső részét vidd lejjebb, mert nagy monitoron széthúzódik”). Ha nem fér el,
   a képernyő tetejéig ér és görget. Telefonon marad a teljes képernyő. */
@media (min-width: 621px) {
  .wh-profil > .wh-panel { top: auto; bottom: 0; max-height: 100dvh; }
}
/* Alacsony ablak: a leírás elmarad, a sorköz szűkül. */
@media (max-height: 760px) and (pointer: fine) {
  .wh-panel .wh-sor--leir small { display: none; }
  .wh-panel { padding-block: .75rem; }
}

/* ── A panel feltárul, nem bepattan (280 ms, a TicketWright mozgása) ── */
@keyframes wh-panel-be { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes wh-panel-ki { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
details[open] > .wh-panel { animation: wh-panel-be 280ms cubic-bezier(.4, 0, .2, 1); }
details[open].wh-zarul > .wh-panel {
  animation: wh-panel-ki 280ms cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
}
details[open].wh-azonnal > .wh-panel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  details[open] > .wh-panel, details[open].wh-zarul > .wh-panel { animation: none; }
}

/* ── Telefonon a jobb sáv a lap tetején vízszintes sor: a panel a teljes
      képernyőt kapja. ── */
@media (max-width: 620px) {
  .wh-panel {
    right: 0; left: 0; width: auto; max-width: none;
    z-index: 200; border-radius: 0; border-width: 0;
  }
}

/* ══ A NÉZET VÁLASZTÓJA A FELSŐ SÁVBAN (2026-09-30) ══════════════════
   A user: „ha superadmin funkciókban vagyok, nem látom a nézet lenyílót”.
   A bal sávból ide került; minden belső lapon látszik (`wlai_bar_nezet()`).
   A gomb semleges (sötét lapka), hogy ne versenyezzen a színes gombokkal. */
.bar-uj.bar-nezet, .bar-uj.bar-nezet:visited {
  background: var(--m-szurke-hover); color: var(--m-feher-tort); border-color: rgba(var(--m-feher-rgb),.16); font-weight: 600;
}
.bar-uj.bar-nezet:hover { filter: none; background: var(--m-szurke-felulet); }
.bar-uj.bar-nezet b { font-weight: 700; color: var(--m-lime); }
.bar-uj.bar-nezet .bn-nyil { width: 14px; height: 14px; opacity: .8; }
/* 900 px alatt a felirat elmarad (mint a sáv többi gombjánál), az ikon és a nyíl marad */

.bar-nezet-lista {
  position: fixed; inset: auto; margin: 0; padding: 6px; min-width: 230px; max-width: calc(100vw - 16px);
  background: var(--m-sotet-doboz); color: var(--m-feher-tort); border: 1.5px solid var(--m-sotet-vonal); border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(var(--m-fekete-tiszta-rgb),.7);
}
.bar-nezet-lista:popover-open { display: flex; flex-direction: column; gap: 2px; }
.bar-nezet-lista .bn-elem {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  background: none; border: 0; border-radius: 10px; color: var(--m-szurke-vilagos); text-align: left; text-decoration: none;
  font: 600 15px/1.2 'Inter', system-ui, sans-serif; cursor: pointer;
}
.bar-nezet-lista .bn-elem .i { flex: none; width: 17px; height: 17px; }
/* a user, 2026-09-30: „egér ráhúzáskor is lime legyen a szín” */
.bar-nezet-lista .bn-elem:hover { background: var(--m-lime); color: var(--m-fekete); }
.bar-nezet-lista .bn-elem:focus-visible { outline: 2px solid var(--m-lime); outline-offset: -2px; }
.bar-nezet-lista .bn-elem.itt, .bar-nezet-lista .bn-elem[aria-checked="true"] { background: var(--m-lime); color: var(--m-fekete); }

/* ══ KILÉPÉS-ABLAK (2026-10-05, a user: „a kilépés gomb legyen valami designba illő”) ══
   A böngésző szürke confirm()-ja helyett: fekete kártya magenta kerettel, Anton cím.
   Mindkét témában sötét, mert ez a márka kártyája.
   10-05 este (a user: „nincs jó helyen, használj magentát is, lekerekített szegélyek,
   a gombok legyenek magenta és lime”): a design.css `* { margin: 0 }` sora levette a
   böngésző középre igazító `margin: auto`-ját, ezért ült a bal felső sarokban.
   Magentán és lime-on sötét tinta jár (fehér magentán 3,43, bukik; arculat.css). */
.wl-kilep{ margin: auto; padding: 0; border: 0; background: transparent; color: var(--m-feher); max-width: none; overflow: visible; }
.wl-kilep::backdrop{ background: rgba(4, 5, 8, .72); backdrop-filter: blur(3px); }
.wl-kilep-doboz{ width: min(26rem, calc(100vw - 2rem)); box-sizing: border-box; margin: 0;
  background: var(--m-sotet-sav); border: 2px solid var(--m-magenta); border-radius: 16px; padding: clamp(1.25rem, 4vw, 1.75rem);
  box-shadow: 0 1.5rem 4rem rgba(var(--m-fekete-tiszta-rgb), .55), 0 0 0 6px rgba(var(--m-magenta-rgb), .12);
  display: flex; flex-direction: column; gap: .75rem; }
.wl-kilep-ikon{ width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px;
  background: var(--m-magenta); color: var(--m-fekete); }
.wl-kilep-ikon .i{ width: 1.35rem; height: 1.35rem; }
.wl-kilep-doboz h2{ margin: .25rem 0 0; font-family: "Anton", Impact, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.05; color: var(--m-feher); }
.wl-kilep-doboz p{ margin: 0; color: var(--m-szurke-vilagos); font-size: var(--b-l, 1rem); line-height: 1.5; }
.wl-kilep-gombok{ display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .5rem; }
.wl-kilep-gombok button{ flex: 1 1 9rem; min-height: 2.875rem; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; border-radius: 10px; font: inherit; font-weight: 700; font-size: var(--b-l, 1rem); cursor: pointer;
  color: var(--m-fekete); border: 0; transition: filter .15s ease, transform .15s ease; }
.wl-kilep-gombok .i{ width: 1.1rem; height: 1.1rem; }
.wl-kilep-megse{ background: var(--m-lime); }
.wl-kilep-igen{ background: var(--m-magenta); }
.wl-kilep-gombok button:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.wl-kilep-gombok button:focus-visible{ outline: 2px solid var(--m-feher); outline-offset: 3px; }
.wl-kilep-igen:disabled{ opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: no-preference){
  .wl-kilep[open] .wl-kilep-doboz{ animation: wl-kilep-be .18s ease-out; }
  @keyframes wl-kilep-be{ from{ opacity: 0; transform: translateY(.5rem) scale(.98); } to{ opacity: 1; transform: none; } }
}

/* ── A vendég sáv alja (2026-11-11, a user: „a többit meg be kell tenni a bal shell aljára”):
   Árak, Tudásbázis, GYIK, Kapcsolat, Belépés; a `margin-top: auto` a sáv aljára nyomja. */
.wh-menu .wh-also {
  display: flex; flex-direction: column; gap: .125rem;
  margin-top: auto; padding-top: .75rem;
  border-top: 1px solid rgba(var(--m-feher-rgb),.1);
}
.wh-menu .wh-also .sav-pont { white-space: nowrap; }

/* 2026-11-11 minta: vendég jobb sáv csak ott, ahol a fejléc nincs fent (1024 px felett) */
@media (max-width: 1023px){ .jobbsav--vendeg{ display: none !important; } .app-torzs:has(> .jobbsav--vendeg){ padding-right: 0; } }
/* 2026-11-11 délután: a vendég jobb sávja felül a Mi ez?, Árak, Tudásbázis, GYIK, Kapcsolat ikonjaival (a bal sáv aljáról). */
.jobbsav .rb-vendeg-menu{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jobbsav :is(.rb-vendeg-menu .rb-gomb, .rb-sugo).itt, .jobbsav :is(.rb-vendeg-menu .rb-gomb, .rb-sugo).itt .i{ color: var(--m-lime); }
.jobbsav :is(.rb-vendeg-menu .rb-gomb, .rb-sugo).itt{ background: rgba(var(--m-lime-rgb),.10); border-color: rgba(var(--m-lime-rgb),.25); }
/* 🪟 2026-11-11: a belépő ablak (`wlai_belepo_ablak()`): fekete doboz középen, a belseje a `/belepes/?ablak=1` */
.wl-belepo{ position: fixed; inset: 0; margin: auto; height: fit-content; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; color: var(--m-feher);
  background: var(--m-fekete); border: 1px solid rgba(var(--m-feher-rgb),.14); border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.wl-belepo::backdrop{ background: rgba(var(--m-fekete-tiszta-rgb),.72); backdrop-filter: blur(3px); }
.wl-belepo iframe{ display: block; width: 100%; height: 420px; border: 0; background: var(--m-fekete); }
.wl-belepo-zar{ position: absolute; top: 6px; right: 6px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px; color: var(--m-szurke-csendes); font-size: 18px; cursor: pointer; }
.wl-belepo-zar:hover, .wl-belepo-zar:focus-visible{ color: var(--m-feher); background: rgba(var(--m-feher-rgb),.08); }
/* 2026-11-11: a keretbe tett nyilvános lapok csak sötétek (a Plakát-arculat), ott a téma-gomb nem kell */
body.lp--hej .jobbsav #theme-btn{ display: none; }
/* 2026-11-11, a user: a belépő ablak sarka a dobozok kerekítését kapja, a pereme lime izzást (az `.izzas` 4 px-ét felülírja) */
:root:root:root:root .wl-belepo.izzas{ border-radius: var(--doboz-sarok, 16px); }
/* 2026-11-11, a user: „jobb oldalon felesleges hely van”: a böngésző görgetősávja (15 px) a jobb sáv mellett állt. A keretes lapokon nincs látható oldal-görgetősáv (görgetni ugyanúgy lehet). */
html:has(.app-torzs){ scrollbar-width: none; }
html:has(.app-torzs)::-webkit-scrollbar{ display: none; }