/* ==================================================================
   Ecoffice - kozos arculat a hiba/ ugyfelportalhoz
   ------------------------------------------------------------------
   Eddig mind a negy lapnak sajat, egymastol eltero <style> blokkja
   volt, ezert nem neztek ki egy rendszernek. Innentol minden szin es
   meret ITT van, tokenekkel.

   Ket dolog szandekos:

   - A kiemelo szin (--eo-accent, petrol) es a JELENTES-szinek
     (--eo-ok / --eo-warn / --eo-alert) kulon hue-n vannak. Igy az
     "ellenorzendo" allapot ugyanugy nez ki a beviteli mezon, a sor
     cimkejen es a visszakerdezo lapon - a regi kekben a zold kiemeles
     es a markaszin egy csaladba esett, es az allapot nem latszott.

   - A szamlalok, gepazonositok es gyariszamok monospace-ben, tabularis
     szamokkal futnak. Nem dísz: hatjegyu allasok allnak egymas alatt,
     es maskepp nem osszevethetok.
   ================================================================== */

:root{
  --eo-paper:#f3f6f6;
  --eo-surface:#ffffff;
  --eo-surface-2:#eef2f2;
  --eo-ink:#17201f;
  --eo-muted:#5d6a6b;
  --eo-faint:#8a9698;
  --eo-line:#dae1e1;
  --eo-line-soft:#e8eded;

  --eo-accent:#1f5a63;
  --eo-accent-soft:#e6eff0;

  --eo-ok:#2c6b4e;      --eo-ok-soft:#e8f1ec;
  --eo-warn:#8a6a1c;    --eo-warn-soft:#f7f1e2;
  --eo-alert:#a03040;   --eo-alert-soft:#f9ecee;

  --eo-shadow:0 1px 2px rgba(23,32,31,.05), 0 10px 28px -20px rgba(23,32,31,.28);

  --eo-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --eo-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}

body{
  background:var(--eo-paper);
  color:var(--eo-ink);
  font-family:var(--eo-ui);
  font-size:15px;
  line-height:1.55;
  margin:0;
  padding-block:0 60px;
  padding-left:16px;
  padding-right:16px;
  -webkit-font-smoothing:antialiased;
}

.eo-wrap{max-width:1060px;margin:0 auto}
.eo-wrap--keskeny{max-width:560px}
/* A gepek tablaja 7 oszlopos, es van benne szabad szoveges mezo is:
   ott a szelesseg nem luxus, hanem kevesebb tordelt cim es alacsonyabb sor. */
.eo-wrap--szeles{max-width:1480px}

a{color:var(--eo-accent)}
:focus-visible{outline:2px solid var(--eo-accent);outline-offset:2px}
.eo-mono{font-family:var(--eo-mono)}

/* ---------- fejlec (a regi fix szurke div.top helyett) ---------- */
.eo-fej{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 20px;border-bottom:1px solid var(--eo-line);
  background:var(--eo-surface);
}
.eo-mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
/* Az eredeti ecoffice.hu wordmark. A width/height attributum a lapon is ott
   van, hogy a kep betoltese ne ugrassa meg a fejlecet. */
.eo-mark .eo-logo{height:20px;width:auto;display:block}
.eo-mark .s{font-size:12.5px;color:var(--eo-muted);font-weight:500;
  padding-left:9px;border-left:1px solid var(--eo-line);line-height:1.5}
.eo-ceg{font-size:13px;font-weight:600;padding-left:14px;margin-left:auto;border-left:1px solid var(--eo-line)}
.eo-ceg small{display:block;font-weight:400;color:var(--eo-faint);font-size:11.5px}

/* ---------- hatarido sav ---------- */
.eo-hatarido{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 20px;background:var(--eo-accent-soft);
  border-bottom:1px solid var(--eo-line);font-size:13px;
}
.eo-hatarido .d{font-weight:700;color:var(--eo-accent)}
.eo-hatarido .k{color:var(--eo-muted);margin-left:auto;font-family:var(--eo-mono);font-size:12px}

/* ---------- panel ---------- */
.eo-panel{
  background:var(--eo-surface);border:1px solid var(--eo-line);border-radius:5px;
  box-shadow:var(--eo-shadow);overflow:hidden;margin:26px 0;
}
.eo-panel__torzs{padding:24px}

h1,h2,h3,h4{margin:0;font-family:var(--eo-ui);text-wrap:balance}
.eo-cim{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.eo-alcim{color:var(--eo-muted);font-size:13.5px;margin:0 0 14px}
.eo-felirat{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--eo-muted);font-weight:600;
}

/* ---------- gep tablazat ---------- */
.eo-tblwrap{overflow-x:auto}
table.eo-gepek{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
table.eo-gepek th{
  text-align:left;font-family:var(--eo-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--eo-muted);
  padding:11px 14px;border-bottom:1px solid var(--eo-line);white-space:nowrap;
}
table.eo-gepek td{
  padding:12px 14px;border-bottom:1px solid var(--eo-line-soft);vertical-align:middle;
}
table.eo-gepek tbody tr:last-child td{border-bottom:0}

.eo-gep .id{font-family:var(--eo-mono);font-weight:500;font-size:13.5px;white-space:nowrap}
.eo-gep .tip{display:block;color:var(--eo-muted);font-size:12px}
.eo-gep .cim{display:block;color:var(--eo-faint);font-size:11.5px}

.eo-num{text-align:right;font-family:var(--eo-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.eo-num .elozo{color:var(--eo-faint);font-size:12.5px;display:block;margin-top:3px}
.eo-num .elozo.halvany{color:var(--eo-line)}
.eo-delta{text-align:right;font-family:var(--eo-mono);font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.eo-delta .up{color:var(--eo-ok)}
.eo-delta .q{color:var(--eo-warn);font-weight:500}
.eo-delta .semmi{color:var(--eo-faint)}

input.eo-cnt{
  font-family:var(--eo-mono);font-size:14.5px;font-variant-numeric:tabular-nums;
  text-align:right;width:8.2em;max-width:100%;padding:7px 9px;
  border:1px solid var(--eo-line);border-radius:3px;
  background:var(--eo-surface);color:var(--eo-ink);
}
input.eo-cnt::placeholder{color:var(--eo-faint)}
input.eo-cnt.kesz{background:var(--eo-ok-soft);border-color:var(--eo-ok)}
input.eo-cnt.gyanus{background:var(--eo-warn-soft);border-color:var(--eo-warn)}

textarea.eo-hib{
  width:100%;min-width:11em;font-family:var(--eo-ui);font-size:13.5px;
  padding:7px 9px;border:1px solid var(--eo-line);border-radius:3px;resize:vertical;
  background:var(--eo-surface);color:var(--eo-ink);
}

/* ---------- toner jelolok ---------- */
.eo-tonerek{display:flex;gap:5px;flex-wrap:wrap}
/* A kod ONMAGABAN nem mond semmit annak, aki nem napi szinten rendel
   tonert - ezert a szin neve is ki van irva. A kod megmarad elol, mert
   a dobozon es a szamlan az szerepel. */
.eo-tn{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  min-height:29px;padding:0 9px 0 7px;cursor:pointer;
  border:1px solid var(--eo-line);border-radius:3px;
  font-size:12px;font-weight:500;
  background:var(--eo-surface);color:var(--eo-muted);
  transition:background .12s,border-color .12s,color .12s;
}
.eo-tn .kod{font-family:var(--eo-mono);font-size:11px;font-weight:600;letter-spacing:.04em}
.eo-tn .kod::after{content:"\2013";margin-left:6px;opacity:.45;font-weight:400}
.eo-tn .nev{white-space:nowrap}
.eo-tn input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.eo-tn:hover{border-color:var(--eo-muted)}
.eo-tn:has(input:checked){border-color:var(--eo-accent);background:var(--eo-accent-soft);color:var(--eo-accent);font-weight:600}
.eo-tn:has(input:focus-visible){outline:2px solid var(--eo-accent);outline-offset:2px}
.eo-tn.c:has(input:checked){border-color:#0e8ba8;background:#e3f4f8;color:#0a6b81}
.eo-tn.m:has(input:checked){border-color:#a8177a;background:#fae7f3;color:#8c0f64}
.eo-tn.y:has(input:checked){border-color:#96760f;background:#faf2dc;color:#7a5f0a}

/* ---------- allapot cimke ---------- */
.eo-pill{
  display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;padding:2.5px 7px;border-radius:3px;white-space:nowrap;
}
.eo-pill.ok{background:var(--eo-ok-soft);color:var(--eo-ok)}
.eo-pill.warn{background:var(--eo-warn-soft);color:var(--eo-warn)}
.eo-pill.alert{background:var(--eo-alert-soft);color:var(--eo-alert)}
.eo-pill.varakozik{background:var(--eo-surface-2);color:var(--eo-muted)}

/* ---------- gombsor ---------- */
.eo-gombsor{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--eo-line);background:var(--eo-surface-2);
}
.eo-gombsor .megj{font-size:12.5px;color:var(--eo-muted);margin-left:auto}

.eo-btn{
  display:inline-block;font-family:var(--eo-ui);font-size:12.5px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;padding:11px 20px;border-radius:4px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  background:var(--eo-accent);color:var(--eo-paper);
}
.eo-btn:hover{filter:brightness(1.12)}
.eo-btn--masodlagos{background:var(--eo-surface);color:var(--eo-accent);border-color:var(--eo-line)}
.eo-btn--masodlagos:hover{background:var(--eo-surface-2);filter:none}

/* ---------- belepes ---------- */
.eo-belep{padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.eo-belep label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--eo-muted);font-weight:600;display:block;margin-bottom:5px;
}
.eo-belep input[type=text],
.eo-belep input[type=email],
.eo-belep input[type=tel],
.eo-belep select,
.eo-belep textarea{
  font-family:var(--eo-ui);font-size:15px;padding:11px 12px;width:100%;
  border:1px solid var(--eo-line);border-radius:3px;
  background:var(--eo-surface);color:var(--eo-ink);
  box-sizing:border-box;
}
.eo-belep textarea{resize:vertical;line-height:1.5;min-height:110px}
.eo-belep select{height:44px;cursor:pointer}
.eo-belep input.eo-pin{
  font-family:var(--eo-mono);letter-spacing:.42em;font-size:19px;text-align:center;
}
.eo-belep .also{font-size:12.5px;color:var(--eo-faint);margin:0}
.eo-uzenet{
  border-left:2px solid var(--eo-alert);background:var(--eo-alert-soft);
  padding:10px 14px;border-radius:0 4px 4px 0;font-size:13.5px;
}
.eo-uzenet.varj{border-left-color:var(--eo-warn);background:var(--eo-warn-soft)}

/* ---------- visszakerdezes ---------- */
.eo-gondsor{
  border-left:2px solid var(--eo-warn);background:var(--eo-warn-soft);
  padding:11px 15px;border-radius:0 4px 4px 0;margin-bottom:10px;
}
.eo-gondsor .g{font-family:var(--eo-mono);font-size:11px;color:var(--eo-muted);letter-spacing:.06em}
.eo-gondsor .m{font-weight:600;font-size:14.5px}
.eo-gondsor .w{color:var(--eo-warn);font-size:13px;margin-top:2px}
.eo-rendben{border-top:1px solid var(--eo-line-soft);padding-top:13px;margin-top:14px}
.eo-rendben ul{margin:7px 0 0;padding-left:19px;font-size:13.5px;color:var(--eo-muted);line-height:1.8}
.eo-rendben ul b{color:var(--eo-ink);font-family:var(--eo-mono);font-size:13px;font-weight:500}

/* ---------- elozmenyek ---------- */
.eo-hoblokk{border-bottom:1px solid var(--eo-line)}
.eo-hoblokk:last-child{border-bottom:0}
.eo-hoblokk > h2{
  padding:11px 20px;background:var(--eo-surface-2);font-size:13px;font-weight:600;
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
}
.eo-hoblokk > h2 span{
  color:var(--eo-muted);font-weight:400;font-size:12px;margin-left:auto;font-family:var(--eo-mono);
}
.eo-tetel{display:flex;gap:11px;align-items:baseline;padding:8px 20px;font-size:13.5px;flex-wrap:wrap}
.eo-tetel + .eo-tetel{border-top:1px solid var(--eo-line-soft)}
.eo-tetel .gid{font-family:var(--eo-mono);font-size:12.5px;font-weight:500;min-width:5.2em}
.eo-tetel .v{font-family:var(--eo-mono);font-variant-numeric:tabular-nums}
.eo-tetel .mikor{color:var(--eo-faint);font-size:12px;margin-left:auto;font-family:var(--eo-mono)}

.eo-ures{padding:30px 24px;text-align:center;color:var(--eo-muted)}
.eo-labjegyzet{color:var(--eo-faint);font-size:12.5px;text-align:center;margin:20px 0 0}

/* ==================================================================
   Telefon: a tablazat gepenkent kartyakra torik. A szamlalot a gep
   mellett allva olvassak le, tehat ez a fo hasznalati mod.
   ================================================================== */
@media (max-width:900px){
  table.eo-gepek,
  table.eo-gepek tbody{display:block;width:100%;min-width:0}
  table.eo-gepek thead{display:none}

  table.eo-gepek tr{
    display:block;background:var(--eo-surface);
    border:1px solid var(--eo-line);border-radius:6px;
    margin:0 14px 14px;padding:6px 14px;
  }
  table.eo-gepek tr:first-child{margin-top:14px}

  table.eo-gepek td{
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    width:auto;border:0;border-bottom:1px solid var(--eo-line-soft);
    padding:9px 0;text-align:left;
  }
  table.eo-gepek tr td:last-child{border-bottom:0}

  table.eo-gepek td::before{
    content:attr(data-cimke);
    flex:0 0 38%;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--eo-muted);font-weight:600;padding-top:3px;font-family:var(--eo-mono);
  }
  table.eo-gepek td[data-cimke=""]::before{content:"";flex:0 0 0}

  .eo-num{text-align:right}
  input.eo-cnt{width:100%;font-size:17px;padding:9px}
  .eo-tonerek{width:100%}
  .eo-tn{min-height:38px;font-size:13px}
  textarea.eo-hib{width:100%}
  .eo-gombsor .megj{margin-left:0;flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ==================================================================
   Belepolap hattere (csak a hiba/index.php)
   ------------------------------------------------------------------
   A CSS-szinatmenet MINDIG ott van a vaszon alatt. Ha a JavaScript
   nem fut le, vagy a bongeszo csokkentett mozgast ker, a lap akkor is
   igy nez ki - nem ures, nem torik el. A vaszon csak raul.

   Szandekosan egyetlen (sotet) vilag: a hattert nem valtjuk vilagos/
   sotet temara, a rea ulo kartya viszont tokenekbol dolgozik, tehat
   mindket temaban helyes.
   ================================================================== */

body.eo-belepo{
  min-height:100vh;
  display:flex;
  /* NEM align-items:center! Az a viewportnal magasabb kartya tetejet
     levagja, es a pvkh urlap (negy mezo + szovegdoboz) siman magasabb.
     A flex-start + a gyermeken margin-block:auto ugyanugy kozepre tesz,
     ha van hely, de nem vag le semmit, ha nincs. */
  align-items:flex-start;
  justify-content:center;
  padding-block:40px;
  background:
    radial-gradient(1200px 700px at 50% 44%, #1f5a63 0%, rgba(31,90,99,0) 62%),
    radial-gradient( 900px 560px at 14% 22%, #1a4a54 0%, rgba(26,74,84,0) 60%),
    linear-gradient(170deg, #15303a 0%, #17353f 55%, #12292f 100%);
  background-attachment:fixed;
}

canvas.eo-hatter{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block; pointer-events:none;
}

body.eo-belepo > .eo-wrap{position:relative; z-index:1; width:100%; margin-block:auto}

/* ------------------------------------------------------------------
   Bordo valtozat - a pvkh/ nyilvanos urlapja.
   Ugyanaz a szerkezet, csak masik szincsalad: a kulso ugyfel igy elso
   ranezesre latja, hogy nem ugyanarra a lapra erkezett, mint a sajat
   bejelentojukre. A kartya es minden azon belul valtozatlan.
   A paszmak szinet a vaszon data-szin attributuma adja.
   ------------------------------------------------------------------ */
body.eo-belepo--bordo{
  background:
    radial-gradient(1200px 700px at 50% 44%, #6e2a38 0%, rgba(110,42,56,0) 62%),
    radial-gradient( 900px 560px at 14% 22%, #5a2030 0%, rgba(90,32,48,0) 60%),
    linear-gradient(170deg, #3c1722 0%, #421b28 55%, #2a0f18 100%);
}

/* ------------------------------------------------------------------
   Melykek valtozat - a pvkhi/ informatikus belepolapja.
   Igy harom kulon szincsalad van: petrol (hiba/), bordo (pvkh/) es
   melykek (pvkhi/) - ranezesre megkulonboztethetok. A kartya es
   minden azon belul itt is valtozatlan.
   ------------------------------------------------------------------ */
body.eo-belepo--melykek{
  background:
    radial-gradient(1200px 700px at 50% 44%, #3a3d78 0%, rgba(58,61,120,0) 62%),
    radial-gradient( 900px 560px at 14% 22%, #2e2f63 0%, rgba(46,47,99,0) 60%),
    linear-gradient(170deg, #1e2042 0%, #24264c 55%, #15162e 100%);
}

/* ------------------------------------------------------------------
   Grafit valtozat - a pvkhx/ admin belepolapja.
   Ez a negyedik (es egyben az utolso) szincsalad: petrol (hiba/),
   bordo (pvkh/), melykek (pvkhi/), grafit (pvkhx/). Az adminhoz
   szandekosan a semleges, "szerszam" jellegu szurke kerult.
   ------------------------------------------------------------------ */
body.eo-belepo--grafit{
  background:
    radial-gradient(1200px 700px at 50% 44%, #4a4f55 0%, rgba(74,79,85,0) 62%),
    radial-gradient( 900px 560px at 14% 22%, #3c4046 0%, rgba(60,64,70,0) 60%),
    linear-gradient(170deg, #26292d 0%, #2c3035 55%, #1b1d20 100%);
}

body.eo-belepo .eo-panel{box-shadow:0 1px 2px rgba(0,0,0,.18), 0 20px 56px -26px rgba(0,0,0,.65)}

/* A lablecet a sotet hatterre irjuk, nem a papirra. */
body.eo-belepo .eo-labjegyzet{color:rgba(255,255,255,.82)}
body.eo-belepo .eo-labjegyzet a{color:#fff}

@media (prefers-reduced-motion:reduce){
  canvas.eo-hatter{display:none}
}