/* =====================================================================
   OCEX Ügyvitel — felület. Halk, munkára való: nagy kattintható felületek,
   jó kontraszt, semmi dísz. A billentyűzet-fókusz mindig látszik.
   ===================================================================== */

:root {
  --tinta: #182230;
  --halk: #5b6572;
  --vonal: #dcdfe4;
  --hatter: #f4f5f7;
  --feher: #ffffff;
  --fo: #14532d;          /* visszafogott zöld — a „mehet" színe */
  --fo-vil: #eaf3ed;
  --hiba: #b3261e;
  --hiba-vil: #fdeceb;
  --figyelem: #8a6d00;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hatter);
  color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.szel { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

a { color: inherit; }

:focus-visible { outline: 3px solid #2f6feb; outline-offset: 2px; }

/* --- fejléc --- */
.fejlec { background: var(--feher); border-bottom: 1px solid var(--vonal); }
.fejlec .szel { display: flex; align-items: center; gap: 22px; min-height: 56px; }
.marka { text-decoration: none; font-size: 1.05rem; letter-spacing: .02em; }
.marka strong { color: var(--fo); }
.fomenu { display: flex; gap: 4px; flex-wrap: wrap; }
.fomenu a {
  text-decoration: none; padding: 8px 12px; border-radius: 8px; color: var(--tinta);
}
.fomenu a:hover { background: var(--hatter); }
.fomenu a.majd { color: var(--halk); cursor: default; }
.userdoboz { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--halk); }

/* --- gombok, űrlapok --- */
.gomb {
  display: inline-block; padding: 9px 16px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--vonal); background: var(--feher); color: var(--tinta);
  font: inherit; cursor: pointer;
}
.gomb:hover { background: var(--hatter); }
.gomb-fo { background: var(--fo); border-color: var(--fo); color: #fff; }
.gomb-fo:hover { background: #0f4023; }
.gomb-halk { color: var(--halk); }

label { display: block; margin: 14px 0 4px; font-weight: 600; }

input[type="text"], input[type="password"], input[type="search"], input[type="email"], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--vonal); border-radius: 8px;
  font: inherit; background: var(--feher);
}

/* --- belépés --- */
.belepes-doboz {
  max-width: 400px; margin: 9vh auto 0; background: var(--feher);
  border: 1px solid var(--vonal); border-radius: 14px; padding: 26px;
}
.belepes-doboz h1 { margin: 0 0 10px; font-size: 1.3rem; }
.belepes-doboz .gomb { margin-top: 18px; width: 100%; text-align: center; }

.uzenet { padding: 10px 12px; border-radius: 8px; }
.uzenet.hiba { background: var(--hiba-vil); color: var(--hiba); }

/* --- kezdőlap --- */
main { padding: 22px 18px 40px; }
h1 { font-size: 1.4rem; margin: 8px 0 16px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
.halk-szam { color: var(--halk); font-weight: 400; }

.kartya-sor { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.szamkartya {
  background: var(--feher); border: 1px solid var(--vonal); border-radius: 12px;
  padding: 14px 20px; min-width: 130px;
}
.szamkartya strong { display: block; font-size: 1.5rem; }
.szamkartya span { color: var(--halk); }

.panel { background: var(--feher); border: 1px solid var(--vonal); border-radius: 12px; padding: 16px 18px; }
.ures { color: var(--halk); }

/* --- táblázat --- */
.tabla { width: 100%; border-collapse: collapse; background: var(--feher); border: 1px solid var(--vonal); border-radius: 12px; overflow: hidden; }
.tabla th, .tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--vonal); }
.tabla th { background: var(--hatter); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--halk); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: #fafbfc; }
.jobbra { text-align: right !important; }

/* --- kereső-sor --- */
.kereso { display: flex; gap: 10px; margin-bottom: 16px; max-width: 560px; }

/* --- lábléc --- */
.lablec { padding: 18px; color: var(--halk); font-size: .85rem; }

/* --- nyelv-váltó --- */
.nyelvvalto a { text-decoration: none; color: var(--halk); padding: 2px 4px; }
.nyelvvalto a.aktiv { color: var(--tinta); font-weight: 700; }

/* --- szerkesztő-elrendezés + űrlap-rács --- */
.szerkeszto-racs { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .szerkeszto-racs { grid-template-columns: 1fr; } }
.urlap-racs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
@media (max-width: 760px) { .urlap-racs { grid-template-columns: 1fr; } }
.uzenet.jo { background: var(--fo-vil); color: var(--fo); }
.uzenet.figyelem { background: #fff7df; color: var(--figyelem); }
input.mini { width: 72px; padding: 5px 8px; text-align: right; }
input.mini.szeles { width: 130px; text-align: left; }
.szeria-sor td { background: #fafbfc; font-size: .88rem; color: var(--halk); border-top: 0 !important; }
.szeria-sor code { background: #eef1f4; border-radius: 6px; padding: 2px 7px; margin-right: 6px; }

/* --- nyomtatás: a bizonylat-nézet tiszta papírképe --- */
@media print {
  .fejlec, .lablec, .nem-nyomtat, .kereso { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .panel, .tabla { border: 1px solid #999; box-shadow: none; }
  .szerkeszto-racs { grid-template-columns: 2fr 1fr; }
  a { text-decoration: none; color: inherit; }
}

/* === v0.10: kompaktabb űrlapok (tulaj-kérés: több adat férjen a képernyőre) === */
label { margin: 8px 0 3px; font-size: .92rem; }
input[type="text"], input[type="password"], input[type="search"], input[type="email"],
input[type="date"], select, textarea { padding: 6px 10px; border-radius: 6px; font-size: .95rem; }
.urlap-racs { gap: 6px 22px; }
.szamkartya { padding: 10px 16px; min-width: 118px; }
.szamkartya strong { font-size: 1.3rem; }
.tabla th { user-select: none; }

/* ==================== v0.11 DESIGN-CSOMAG (tulaj-döntések) ====================
   Elsődleges: ocex-teal #128c8c · hiba: trikdis-piros · külső/webshop: protegus-kék
   Betű: Lexend (önhosztolt) → Verdana → Segoe UI. Menü: csoportosított + gyorskereső.
   ============================================================================ */
:root{
  --fo:#128c8c; --fo-vil:#e7f4f4; --fo-sotet:#0d6a6a;
  --hiba:#d81f26; --hiba-vil:#fdf0f0;
  --kesz:#15803d; --kesz-vil:#eefaf1;
  --var:#b45309; --var-vil:#fdf6e8;
  --kulso:#1b9de2; --kulso-vil:#eaf6fd;
}
body{font-family:Lexend,Verdana,"Segoe UI",system-ui,sans-serif;font-size:14px}
.gomb-fo:hover{background:var(--fo-sotet)}
a{color:var(--fo-sotet)}

/* --- állapot-chipek --- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:1px 9px;border-radius:99px;
      font-size:.8rem;font-weight:600;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.kesz{background:var(--kesz-vil);color:var(--kesz)}
.chip.var{background:var(--var-vil);color:var(--var)}
.chip.teendo{background:var(--hiba-vil);color:var(--hiba)}
.chip.info{background:var(--fo-vil);color:var(--fo-sotet)}
.chip.kulso{background:var(--kulso-vil);color:#0f6ea3}

/* --- fejléc + csoportos menü --- */
.fejlec{background:var(--feher);border-bottom:1px solid var(--vonal)}
.fejlec .szel{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:7px 18px}
.marka{display:flex;align-items:center;gap:9px;margin-right:12px}
.marka svg{display:block}
.fomenu{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.fomenu a,.lecsop>span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;
  color:var(--tinta);text-decoration:none;font-size:.93rem;cursor:pointer;white-space:nowrap}
.fomenu a i,.lecsop>span i,.lenyilo a i{color:var(--halk);font-size:.85em;width:15px;text-align:center}
.fomenu a:hover,.lecsop>span:hover{background:var(--hatter)}
.fomenu a.aktiv,.lecsop.aktiv>span{background:var(--fo-vil);color:var(--fo-sotet);font-weight:600}
.fomenu a.aktiv i,.lecsop.aktiv>span i{color:var(--fo)}
.lecsop{position:relative}
.lecsop .lenyilo{display:none;position:absolute;top:100%;left:0;margin-top:2px;background:var(--feher);
  border:1px solid var(--vonal);border-radius:10px;padding:5px;min-width:190px;
  box-shadow:0 10px 26px rgba(0,0,0,.1);z-index:40}
.lecsop:hover .lenyilo,.lecsop:focus-within .lenyilo{display:block}
.lecsop .lenyilo.jobbra-nyilo{left:auto;right:0}
.lenyilo a{display:flex;gap:9px;align-items:center;padding:7px 11px;border-radius:7px;
  color:var(--tinta);text-decoration:none;font-size:.92rem;white-space:nowrap}
.lenyilo a:hover{background:var(--hatter)}
.userdoboz{margin-left:auto;display:flex;align-items:center;gap:7px}
.gyorskeres input{width:170px;padding:5px 10px;border:1px solid var(--vonal);border-radius:8px;
  font:inherit;font-size:.88rem;background:var(--hatter)}
.gyorskeres input:focus{background:var(--feher);outline:1.5px solid var(--fo)}
.ikongomb{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;color:var(--halk);text-decoration:none;cursor:pointer}
.ikongomb:hover{background:var(--hatter);color:var(--tinta)}
.mmenu-cb,.hamburger{display:none}

/* --- fülek --- */
.fulek{display:flex;gap:2px;border-bottom:2px solid var(--vonal);margin:0 0 14px;flex-wrap:wrap}
.ful{padding:8px 14px;border:none;background:none;font:inherit;font-size:.93rem;color:var(--halk);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;display:inline-flex;gap:7px;align-items:center}
.ful i{font-size:.85em}
.ful.aktiv{color:var(--fo-sotet);border-bottom-color:var(--fo);font-weight:600}
.fullap{display:none}
.fullap.aktiv{display:block}

/* --- fiókhoz kötött szélesség: alap dobozos (1240), .teljes = kitöltés --- */
.szel{max-width:1240px;margin:0 auto}
body.teljes .szel{max-width:none}

/* --- mobil: a fejléc EGY sor marad, a menü OLDALRÓL benyíló fiók --- */
.csak-mobil,.mfatyol{display:none}
@media(max-width:900px){
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:8px;cursor:pointer;font-size:1.05rem;color:var(--tinta);order:20}
  .hamburger:hover{background:var(--hatter)}
  .fejlec .szel{flex-wrap:nowrap;gap:2px}
  .marka{margin-right:auto}
  .szeles-valto{display:none}               /* mobilon nincs dobozos/teljes különbség */
  .userdoboz{margin-left:0}
  .userdoboz .gyorskeres{display:none}      /* a kereső a fiókmenü tetején van */
  /* fiókmenü balról */
  .fomenu{position:fixed;top:0;left:0;bottom:0;z-index:120;width:min(300px,85vw);
    display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;overflow-y:auto;
    background:var(--feher);border-right:1px solid var(--vonal);padding:10px 12px 24px;
    transform:translateX(-105%);transition:transform .18s ease;
    box-shadow:0 0 30px rgba(0,0,0,.18)}
  .mmenu-cb:checked~.fomenu{transform:translateX(0)}
  .mmenu-cb:checked~.mfatyol{display:block;position:fixed;inset:0;z-index:110;
    background:rgba(15,23,42,.45);cursor:pointer}
  html:has(.mmenu-cb:checked),body:has(.mmenu-cb:checked){overflow:hidden}
  .csak-mobil{display:flex}
  .mfej{align-items:center;justify-content:space-between;gap:8px;
    padding:2px 0 8px;border-bottom:1px solid var(--vonal);margin-bottom:8px}
  .mfej strong{color:var(--fo-sotet)}
  .mzar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:8px;cursor:pointer;font-size:1.05rem}
  .mzar:hover{background:var(--hatter)}
  .fomenu .gyorskeres{padding:0 0 10px}
  .fomenu .gyorskeres input{width:100%}
  .fomenu .lecsop .lenyilo{display:block;position:static;border:none;box-shadow:none;
    padding:0 0 0 26px;min-width:0}
  .fomenu .lecsop>span{width:100%}
  /* minmax(0,1fr): a puszta 1fr = minmax(auto,1fr) — a széles táblázat kinyomná a rácsot */
  .szerkeszto-racs{grid-template-columns:minmax(0,1fr) !important}
  .szerkeszto-racs>*{min-width:0}
  table.tabla{display:block;overflow-x:auto;max-width:100%}
  main{overflow-x:clip}   /* öv-tartó: ami mégis széles, az a lapot ne tolja szét */
  main{padding:14px 12px 40px}
}

/* v0.13: kattintható kezdőlap-csempék */
a.kartya-link{text-decoration:none;color:inherit;transition:border-color .12s, box-shadow .12s}
a.kartya-link:hover{border-color:var(--fo);box-shadow:0 2px 10px rgba(18,140,140,.14)}
a.kartya-link span i{color:var(--halk);margin-right:4px;font-size:.85em}
.gomb-kis{padding:3px 10px;font-size:.85rem;border-radius:6px}

/* v0.15: kompakt gomb-alapméret (a minta szerint) + korrekció-súgó */
.gomb{padding:6px 13px;font-size:.92rem;border-radius:8px;display:inline-flex;align-items:center;gap:7px}
.gomb i{font-size:.85em}

/* === v0.19: kezdőlapi fizetetlen-gyorssáv ================================== */
.gyorssav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;
  padding:11px 16px;border:1px solid #f3d1d3;border-radius:12px;background:var(--hiba-vil);
  color:var(--tinta);text-decoration:none}
.gyorssav>i{color:var(--hiba);font-size:1.15rem}
.gyorssav strong{color:var(--hiba);white-space:nowrap}
.gyorssav-osszegek{display:flex;gap:14px;flex-wrap:wrap}
.gyorssav-osszegek span{white-space:nowrap;font-weight:600}
.gyorssav-nyit{margin-left:auto;color:var(--hiba);font-weight:600;white-space:nowrap}
.gyorssav:hover{border-color:var(--hiba);box-shadow:0 2px 10px rgba(216,31,38,.12)}

/* === v0.20: kezdőlapi gyorsmenü-csempék + szerkesztő ======================== */
.qmenu strong i{font-size:1.25rem;color:var(--fo)}
.qmenu-szerk{opacity:.72}
.qmenu-szerk strong i{color:var(--halk)}
.qm-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:6px 18px;margin-top:10px}
.qm-elem{display:flex;align-items:center;gap:9px;font-weight:normal;margin:0;padding:7px 9px;
  border:1px solid var(--vonal);border-radius:8px;cursor:pointer}
.qm-elem:hover{background:var(--hatter)}
.qm-elem i{color:var(--fo);width:18px;text-align:center}

/* === v0.19: mobil — semmi ne lógjon ki oldalra ==============================
   A fejléc-címsorokba floatolt gombsor (bizonylat-nézet, beállítások, listák
   „Új …" gombja) mobilon a cím ALÁ törik; az űrlap-elemek nem nőhetnek túl. */
@media(max-width:640px){
  h1{display:flow-root}
  h1 [style*="float: right"],h1 [style*="float:right"]{float:none !important;display:flex;
    flex-wrap:wrap;gap:8px;margin:8px 0 0}
  input,select,textarea{max-width:100%;box-sizing:border-box}
  .gyorssav-nyit{margin-left:0}
}


/* TÖRLÉS-gomb: piros, felirattal (tulaj-kérés 2026-08-10) — a piros a „teendő /
   visszafordíthatatlan" szín; a halk szürke törlés-ikonokat váltja. */
.gomb-torol { color: var(--hiba); border-color: #f0c8c8; background: #fff; }
.gomb-torol:hover { background: var(--hiba); border-color: var(--hiba); color: #fff; }