/**
 * A Next.js alkalmazás SAJÁT kiegészítései a régi lapokhoz.
 *
 * A `style.css`, `portal.css` és `admin.css` bájtra azonos a régi appéval, és
 * az `npm run sync:legacy` bármikor újramásolja őket – ezért oda nem írunk.
 * Ide viszont igen: itt élnek azok a szabályok, amiket a régi kód beégetett
 * `style="color:#b45309"` alakban a JSX-be. A tokenek a `style.css`-ből jönnek,
 * így sötét és világos témában is helyesek.
 */

/* Halvány, keretes figyelmeztető gomb (régi: újratelepítés). */
.btn--ghost.btn--warn { color: var(--warn-fg); border-color: var(--warn) }
.btn--ghost.btn--warn:hover { border-color: var(--warn); background: var(--warn-bg) }

/* Halvány, keretes veszélyes gomb (régi: lemondás). A `.btn--danger` önmagában
   tömör piros kitöltés – a `.btn--ghost`-tal együtt viszont csak jelöl. */
.btn--ghost.btn--danger { background: transparent; color: var(--danger-fg); border-color: var(--danger-line) }
.btn--ghost.btn--danger:hover { background: var(--danger-bg); border-color: var(--danger) }

/* ===== Fejléc szélessége és igazítása =====
   Belépve három elemmel bővül a sáv (Admin, Fiókom, Kilépés), és az 1140 px-es
   tartalom-konténerbe nem fér ki – a mérés emiatt hamburgerre váltott.

   A megoldás HÁROM lépés, mert önmagában egyik sem elég:
   1. a „Rendelés" gomb belépve kimarad (a menüben ott a „Csomagok"),
   2. a menüpontok közti térköz szorosabb,
   3. a sáv kap egy KIS többletet (1220 px), amit bal oldali belső margóval a
      tartalom bal széléhez igazítunk – így a logó egy vonalban a szöveggel.

   Korábban 1600 px volt: a logó igazodott, viszont a `margin-left:auto` a jobb
   oldali gombokat a széles konténer jobb széléig tolta, azaz 230 px-rel a
   szövegoszlopon TÚL. Most a túllógás legfeljebb 40 px. */
.nav > .container { width: min(1220px, 96vw) }
.nav__links { gap: clamp(.55rem, 1.1vw, 1.15rem) }

@media (min-width: 1300px) {
  .nav > .container { padding-left: calc((min(1220px, 96vw) - 1140px) / 2) }
}

/* Zöld „Státusz" gomb az EU flotta mellett: átvisz az állapotoldal EU-gépek
   szakaszához. A pont lüktet, hogy élő adatra utaljon. */
.statusbtn {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: .5rem;
  padding: .45rem .85rem; border-radius: 999px; white-space: nowrap;
  background: var(--ok-bg); color: var(--ok); border: 1px solid transparent;
  font-size: .84rem; font-weight: 700; text-decoration: none; transition: .15s;
}
.statusbtn:hover { border-color: var(--ok); color: var(--ok) }
.statusbtn__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: statuspulse 1.8s ease-in-out infinite }
@keyframes statuspulse { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .statusbtn__dot { animation: none } }

/* Egyenleg-napló az ügyfélkapun (régen a portal.js égette be a stílust). */
.wallet-log { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .85rem }
.wallet-log li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-top: 1px solid var(--line-2) }
.wallet-log .is-in { color: var(--ok) }
.wallet-log .is-out { color: var(--danger-fg) }

/* ===== Webadmin oldalsáv: a régi `button` szabályok linkekre =====
   Az `admin.css` GENERÁLT és bájtra azonos a régi appéval (`sync:legacy`),
   ezért nem szerkesztjük. A régi oldalsáv JS-vezérelt `<button>`-öket
   használt, az átírás viszont valódi `<a>` linkeket renderel az útvonalakhoz –
   így az `#adminView .sidebar__nav button…` szabályok EGYIKE sem illeszkedett:
   az oldalsáv csupasz maradt, az ikonok méret és `fill:none` nélkül óriási
   fekete foltként jelentek meg. Itt ugyanaz a szabálykészlet, `a`-ra kötve. */
#adminView .sidebar__nav a { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; background: transparent; border: 0; color: var(--side-tx); font-weight: 500; font-size: .94rem; padding: .62rem .7rem; border-radius: 10px; cursor: pointer; transition: .15s; text-decoration: none }
#adminView .sidebar__nav a span { flex: 1 }
#adminView .sidebar__nav a:hover { background: rgba(255,255,255,.09); color: #fff }
#adminView .sidebar__nav a.is-active { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px rgba(79,70,229,.6) }
#adminView .sidebar__nav a svg {
  width: 17px; height: 17px; flex: 0 0 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85
}
#adminView .sidebar__nav a.is-active svg { opacity: 1 }

@media (max-width: 760px) {
  #adminView .sidebar__nav a span { display: none }
}

/* ===== Fejléc: fiók-elemek a sávban =====
   A régi app a `[data-navmob-move]` csomópontokat FIZIKAILAG áthelyezte a
   menübe (js/mobilmenu.js); Reactben ehelyett mindkét helyen renderelünk, és
   tömör módban CSS rejti a sávbelit. Azért CSS és nem feltételes renderelés:
   a szélesség-mérésnek látnia kell a teljes, asztali sávot – ha a React kivenné
   a DOM-ból, a mérés kisebbet mérne, és oda-vissza kapcsolgatna. */
.nav__acc { display: contents }
.nav--tomor .nav__cta .nav__acc { display: none }

/* ===== Egyedi ajánlatkérés a katalógus alján =====
   Minden kategória alatt megjelenik: nincs ára és nincs rendelés-folyamat,
   a kérés hibajegyként megy be. Szándékosan sáv és nem csomagkártya – nem
   versenyez a valódi csomagokkal, viszont mindegyik fül alatt ott van. */
.egyedi { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 1.1rem 1.4rem; border: 1px dashed var(--line); border-radius: 16px; background: var(--card) }
.egyedi__txt { display: flex; flex-direction: column; gap: .15rem; min-width: min(100%, 18rem) }
.egyedi__cim { font-size: 1.05rem }
.egyedi__jobb { display: flex; align-items: center; gap: 1rem; margin-left: auto }
.egyedi__ar { font-weight: 700; color: var(--indigo); white-space: nowrap }
@media (max-width: 600px) {
  .egyedi__jobb { width: 100%; justify-content: space-between }
}

/* ===== Kétlépcsős azonosítás kártya =====
   A régi felület szövegei megvoltak a szótárban (`portal.twofa*`), csak az
   átírás égette be helyettük a magyar szöveget. Ezek a stílusok azt váltják ki,
   amit a komponens `style=""`-ban hordozott. */
.card-lite__h { margin: 0 0 .4rem; font-size: 1.05rem }
.twofa__regen { margin-top: 1rem }
.twofa__uri { word-break: break-all }
.twofa__codes { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem }
.twofa__codes code { background: var(--surface-2); padding: .25rem .5rem; border-radius: 8px }

/* ===== Többsoros beviteli mező =====
   A `style.css` csak az `input`-ot stílusozza, a `textarea`-t nem – ezért az
   böngésző-alapértelmezett maradt: fehér háttér és írógép-betű a sötét
   felületen (jól látszott az egyedi ajánlatkérő ablakban). Ugyanazt kapja,
   mint az input, csak több sorra. */
.field textarea {
  border: 1px solid var(--line); border-radius: 11px; padding: .7rem .85rem;
  font-size: .95rem; font-family: inherit; line-height: 1.5; transition: .15s;
  background: var(--card); color: var(--body); resize: vertical; min-height: 7rem;
}
.field textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,70,229,.14) }
.field textarea::placeholder { color: var(--muted) }

/* ===== Támadások és incidensek (állapotoldal) =====
   Az `.incbox`, `.incsec`, `.inc-ok` és a publikus `.chip` SEHOL nem volt
   definiálva – a `.chip` csak `#adminView` alá szűkítve létezik –, ezért a
   sorok elemei szóköz nélkül egymásba folytak („HTTP-túlterhelés2026. 07.
   27.…közepes”). */
.incsec { margin-top: 2.5rem }
.incsec > h2 { margin-bottom: .35rem }
.inc-ok { color: var(--ok); font-weight: 600 }

.incbox {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .7rem 1rem; margin-top: .5rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
/* A típus kap fix minimumot, így a dátumok egy vonalba rendeződnek. */
.incbox > b { min-width: 12rem }
.incbox > .muted { margin-right: auto }
.incbox .chip { flex: 0 0 auto }

.chip {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  background: var(--surface-2); color: var(--body);
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.chip--low { background: var(--ok-bg); color: var(--ok) }
.chip--medium { background: var(--warn-bg); color: var(--warn-fg) }
.chip--high, .chip--critical { background: var(--danger-bg); color: var(--danger-fg) }

@media (max-width: 620px) {
  .incbox > b { min-width: 0; width: 100% }
  .incbox > .muted { margin-right: 0 }
}

/* ===== EU gépek (állapotoldal) =====
   Az európai flotta élő állapota. Ugyanaz a vizuális nyelv, mint az alatta lévő
   incidens-listáé: kártyás sorok, színes állapot-jelölő. */
.eusec { margin-top: 2.5rem }
.eusec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap }
.eusec__head h2 { margin: 0 0 .2rem }
.eusec__head .muted { margin: 0 }

.eustate { padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap }
.eustate--operational { background: var(--ok-bg); color: var(--ok) }
.eustate--rerouted { background: var(--info-bg, var(--ok-bg)); color: var(--indigo) }
.eustate--degraded { background: var(--warn-bg); color: var(--warn-fg) }
.eustate--offline { background: var(--danger-bg); color: var(--danger-fg) }

.eugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .5rem; margin: 1rem 0 1.25rem }
.eurow { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
.eurow__n { flex: 1; font-weight: 600; font-size: .92rem }

.eudot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto }
.eudot--operational { background: var(--ok) }
.eudot--rerouted { background: var(--indigo) }
.eudot--degraded { background: var(--warn) }
.eudot--offline { background: var(--danger) }

.chip--eu-operational { background: var(--ok-bg); color: var(--ok) }
.chip--eu-rerouted { background: var(--surface-2); color: var(--indigo) }
.chip--eu-degraded { background: var(--warn-bg); color: var(--warn-fg) }
.chip--eu-offline { background: var(--danger-bg); color: var(--danger-fg) }

/* A Discord-gomb a Google mellett: ugyanaz a forma, a márka színével. */
.gbtn--discord { margin-top: .5rem }
.gbtn--discord svg { color: #5865f2 }

/* Bejelentések fejléce (cím + „Új bejelentés” gomb egy sorban). A `.tk-head`
   stílusát a régi lap az adminban használta, itt az ügyfélkapun kell. */
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem }
.tk-head .card-lite__h { margin: 0 }
/* A sor egésze kattintható link – a `.tkrow` alapból gombra volt méretezve. */
.tkrow__main { text-decoration: none }
.tklist { margin-top: .75rem }

/* ===== Partnerek a hero-ban =====
   Kör alakú logók egymás mellett, kissé egymásra csúsztatva, alattuk a
   felirat. A sorrendet az admin adja; a kép `/api/partner/:id`-ről jön.

   A `.hero__card` vízszintes flex-sor (szervergép + FiveM jelvény), ezért a
   blokk teljes szélességet kap: így ALÁJUK kerül, nem melléjük. */
.hero__card { flex-wrap: wrap }
.partners { flex: 0 0 100%; margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center }
.partners__logos { display: flex; align-items: center; justify-content: center }

.partners__item {
  position: relative; display: block; border-radius: 50%;
  background: var(--card);
  /* Áttetsző gyűrű: a hero háttere színátmenetes, ezért egy fix színű keret
     (korábban `var(--bg)`) idegen glóriaként ült a logók köré. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 4px 12px -5px rgba(0, 0, 0, .55);
  transition: transform .18s, box-shadow .18s;
}
.partners__item + .partners__item { margin-left: -.5rem }
.partners__item img, .partners__item a {
  display: block; border-radius: 50%; width: 44px; height: 44px; object-fit: cover;
}
.partners__item:hover {
  transform: translateY(-3px); z-index: 3;
  box-shadow: 0 0 0 2px var(--indigo), 0 10px 20px -8px rgba(0, 0, 0, .7);
}

/* Saját buborék a böngésző natív `title`-je helyett: az rendszerenként más,
   késve jelenik meg, és sehogy sem illeszkedik az oldal képéhez. */
.partners__item::after {
  content: attr(data-nev);
  position: absolute; left: 50%; bottom: calc(100% + .6rem);
  transform: translateX(-50%) translateY(4px);
  padding: .32rem .6rem; border-radius: 9px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
  font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
/* A buborék csúcsa. */
.partners__item::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + .25rem);
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent; border-top-color: var(--line);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.partners__item:hover::after,
.partners__item:focus-within::after,
.partners__item:hover::before,
.partners__item:focus-within::before { opacity: 1; transform: translateX(-50%) translateY(0) }

@media (prefers-reduced-motion: reduce) {
  .partners__item, .partners__item::after, .partners__item::before { transition: none }
}

.partners__txt { margin: .7rem 0 0; color: var(--muted); font-size: .88rem }

/* ===== Partnerek – webadmin ===== */
#adminView .prtlist { display: grid; gap: .5rem }
#adminView .prtrow { display: flex; align-items: center; gap: .9rem; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
#adminView .prtrow.is-off { opacity: .55 }
#adminView .prtrow__logo { border-radius: 50%; object-fit: cover; flex: none; background: var(--bg) }
#adminView .prtrow__main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0 }
#adminView .prtrow__url { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#adminView .prtrow__ops { display: flex; gap: .35rem; flex-wrap: wrap; flex: none }
#adminView .prtrow__form { display: flex; gap: .4rem; flex: 1; flex-wrap: wrap }
#adminView .prtrow__form input { flex: 1; min-width: 10rem }

/* ===== Rendelés-ablak: görgetés és odatapadó gomb =====
   A `.modal__panel` alapból görgethető (max-height 92vh + overflow:auto), a
   SZÉLES változat viszont `overflow:hidden`-re állította – ezért a rendelés
   ablakban a tartalom alja, benne a „Rendelés leadása" gomb, kis képernyőn
   levágódott és NEM lehetett odagörgetni. */
.modal__panel--wide { overflow: auto }

/* A beküldő sáv az ablak aljára tapad, így hosszú űrlapnál is mindig látszik.
   A negatív margó azért kell, hogy a sáv a panel belső margóján is átérjen –
   különben a görgetett tartalom kilátszana mellette. */
/* A panel alsó belső margóját a sáv veszi át. Enélkül a görgetett tartalom
   kilátszott a sáv ALATT, a panel paddingjének sávjában. */
.modal__panel--stickyfoot { padding-bottom: 0 }
.ordersubmit {
  position: sticky; bottom: 0; z-index: 2;
  margin: .6rem -1.8rem 0; padding: .9rem 1.8rem 1.4rem;
  background: var(--card); border-top: 1px solid var(--line);
  border-radius: 0 0 20px 20px;
}
.modal__panel--wide .ordersubmit { margin: .6rem -1.5rem 0; padding: .9rem 1.5rem 1.4rem }
.ordersubmit .muted { margin: .5rem 0 0 }

/* Alacsony képernyőn ne vigyen el 10vh-t a margó. */
@media (max-height: 820px) {
  .modal__panel { margin: 2vh auto; max-height: 96vh }
}

/* Állapotoldal: KIESETT szolgáltatás jelölése. A `portal.css` csak az „ok" és a
   „part" változatot ismerte, mert az oldal korábban mindig zöldet mutatott –
   valódi kiesést nem is tudott volna kirajzolni. A `portal.css` bájtra azonos
   marad a régi appéval, ezért ide kerül. */
.dot--bad { background: var(--danger) }
.comp__state--bad { color: var(--danger) }

/* Akciós ár a kirakati kártyán: áthúzott eredeti + sarok-jelvény.
   Az „amt" a meglévő ár-osztály; az „amt--old" halványabb és kisebb, hogy a
   figyelem az ÚJ áron maradjon. */
.plan__price .amt--old {
  font-size: .95rem; font-weight: 500; color: var(--muted);
  text-decoration: line-through; margin-right: .45rem;
}
.plan__sale {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  background: var(--danger); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: .18rem .5rem; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Akció-buborék a főoldal bal alsó sarkában. Saját arculat: a kártya a
   felület sötét alapját viszi tovább, a hangsúly a kedvezmény-jelvényen van.
   Mobilon teljes szélességű sávvá válik, hogy ne takarja a tartalmat. */
.akcio {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: flex; align-items: center; gap: .85rem;
  max-width: min(420px, calc(100vw - 2.2rem));
  padding: .85rem 2.4rem .85rem .9rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  animation: akcioBe .35s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes akcioBe { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }

.akcio__jel {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, var(--indigo), var(--danger));
  color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: -.01em;
}
.akcio__szoveg { display: flex; flex-direction: column; gap: .15rem; min-width: 0 }
.akcio__cim { color: var(--ink); font-size: .98rem; line-height: 1.25 }
.akcio__reszlet { color: var(--muted); font-size: .84rem; line-height: 1.35 }

.akcio__gomb {
  flex: none; align-self: center;
  background: var(--indigo); color: #fff; text-decoration: none;
  font-size: .84rem; font-weight: 600;
  padding: .42rem .7rem; border-radius: 9px; white-space: nowrap;
}
.akcio__gomb:hover { filter: brightness(1.08) }

.akcio__x {
  position: absolute; top: .45rem; right: .5rem;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: .9rem; line-height: 1;
  padding: .25rem; border-radius: 6px;
}
.akcio__x:hover { color: var(--ink); background: var(--surface-2) }

@media (max-width: 560px) {
  .akcio { left: .6rem; right: .6rem; bottom: .6rem; max-width: none }
  .akcio__gomb { padding: .38rem .6rem }
}

/* Megerősítő ablak: a hosszú érték (pl. levél tárgya) törjön, ne lógjon ki a keretből.
   A portal.css/ui.css nowrap-ját erősebb szelektorral írjuk felül (azok legacy-azonosak). */
.cfm__rows .cfm__row > span{flex:none}
.cfm__rows .cfm__row b{white-space:normal;overflow-wrap:anywhere;text-align:right;min-width:0}

/* Admin postafiók: a levél szövege sima szöveg, a sortörései számítanak. */
.pf-body{white-space:pre-wrap}