/* ==========================================================================
   Fabton Hub – VILÁGOS MEGJELENÉS (Fabton arculat, „Színblokk”)

   Az eredeti stilus.css fölött töltődik be (id="fabton-tema"). A sötét
   megjelenés választásakor a megjelenes.js kikapcsolja ezt a lapot, és a Hub
   pontosan úgy néz ki, mint eddig.

   A második design-audit (Taste Skill + Awesome Design) és a Fabton Brand
   Library szabályai alapján (DEV/UI-UX/fabton-brand/):

   1. Tiszta munkavászon: a lapon nem lebeg forma. Táblák kártya nélkül.
   2. Egy színblokk oldalanként: az oldal első címének tárolója navy blokk
      (a fabton-vilagos.js jelöli: .fb5-blokk), a brand 2–4 formája ebben, a
      jobb felső sarokból. Belépés, szülői fejléc, jelentkezés nyitó- és
      záróképernyője: ugyanez a blokk.
   3. Egy szín, egy szerep: akció = sárga pirula; kiválasztott = navy;
      türkiz = rendben / Csíkszereda; lila = hangsúly, baj / Székelyudvarhely.
   4. Két betű szerep szerint: Concert One csak 18 px fölött (cím, nagy
      szám); minden más Nunito, súlyokkal és egyforma szélességű számjegyekkel.
   5. Rögzített skálák: betű 12 · 13,5 · 15 · 17 (Nunito) · 22 · 30 (Concert);
      lekerekítés: pirula (minden interaktív) · 16 px (kártya, blokk) ·
      10 px (mező, sor); érintési cél ≥ 44 px; szöveg ≥ 4,5:1.
   ========================================================================== */

/* --- Betűk ---------------------------------------------------------------- */

@font-face { font-family: 'Concert One'; font-display: swap;
  src: url('../fabton-brand/fonts/concert-one.ttf') format('truetype'); }
@font-face { font-family: 'Concert One'; font-display: swap;
  src: url('../fabton-brand/fonts/paytone-one-latin-ext.woff2') format('woff2');
  unicode-range: U+0150-0151, U+0170-0171; size-adjust: 80%; }
/* a Concert One felcseréli a ‹ › rajzolatát: ezt a két jelet a Nunito adja */
@font-face { font-family: 'Concert One'; font-display: swap;
  src: url('../fabton-brand/fonts/nunito-latin-var.woff2') format('woff2');
  unicode-range: U+2039-203A; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fabton-brand/fonts/nunito-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fabton-brand/fonts/nunito-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Tokenek: világos ----------------------------------------------------- */

html body,
html body.hub-felulet,
html body.onallo {
  --lila: #92278F; --turkiz: #3EC2CF; --sarga: #FFCB05; --navy: #052C47;

  /* szerepek */
  --vaszon: #ffffff;          /* munkavászon */
  --lap: #ffffff;             /* kártya */
  --halk-lap: #f3f6f9;        /* szűrősor, táblafej, mező háttere */
  --keret: #dce3ea;           /* vonal */
  --szoveg: #183057;          /* törzsszöveg */
  --cimszin: #052C47;         /* címek */
  --halk: #556577;            /* másodlagos szöveg – 5,98:1 fehéren */
  --blokk: #052C47;           /* az oldal egyetlen színblokkja */
  --blokk-szoveg: #ffffff;
  --blokk-halk: rgba(255, 255, 255, .78);
  --sav: #052C47;             /* oldalsáv */
  --kivalasztott: #052C47;    /* kiválasztott állapot */
  --kivalasztott-szoveg: #ffffff;

  --font-cim: 'Concert One', 'Trebuchet MS', sans-serif;
  --font-ui: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* stilus.css skálák a szerepekre képezve */
  --n1: var(--lap); --n2: var(--vaszon); --n3: #eef2f5; --n4: #e6ecf1; --n5: var(--keret);
  --n6: #cdd6df; --n7: #b7c3cf; --n8: #8a99a8; --n9: #66768a; --n10: var(--halk);
  --n11: #4a5b6e; --n12: var(--szoveg);
  --a1: #fafcfd; --a2: #f3f7fa; --a3: #e8f6f8; --a4: #d6eff2; --a5: #c3e7ec; --a6: #a6dde4;
  --a7: #7fcfd8; --a8: #4fc0cc; --a9: var(--navy); --a10: #0b3d61; --a11: var(--navy); --a12: #031b2c;
  --y1: #fffdf3; --y2: #fff9e0; --y3: #fff5cc; --y4: #ffec99; --y5: #ffe466; --y6: #ffdc3d;
  --y7: #f5cf1f; --y8: #e0b800; --y9: #ffcb05; --y10: #f5c000; --y11: #6b5200; --y12: #3d2f00;
  --t3: #e2f6f8; --t4: #cdeff2; --t6: #a6e2e8; --t9: #3ec2cf; --t10: #2fb0bd; --t11: #0b5f67; --t12: #063c42;
  /* piros nincs: jelen/siker → türkiz, figyelem → sárga, hiba/lejárt → lila */
  --j3: #e2f6f8; --j6: #a6e2e8; --j9: #3ec2cf; --j11: #0b5f67;
  --f3: #fff5cc; --f6: #f5d76a; --f8: #e8b800; --f9: #ffcb05; --f11: #6b5200;
  --p2: #fbf5fb; --p3: #f6e9f5; --p6: #dcb3da; --p9: #92278f; --p11: #7d1f7a;

  --marka: var(--sarga); --marka-hover: #f5c000; --marka-szoveg: var(--navy);
  --arnyek-1: none; --arnyek-2: 0 8px 24px -12px rgba(5, 44, 71, .25);
  --arnyek-3: 0 24px 56px -18px rgba(5, 44, 71, .35); --arnyek-kartya: none;
  --arnyek-marka: none; --arnyek-be: none;
  --r-kicsi: 10px; --r-kozep: 10px; --r-nagy: 16px; --r-teljes: 999px;
  --fokusz: 0 0 0 3px rgba(146, 39, 143, .35);

  accent-color: var(--navy);
  color-scheme: light;
  background: var(--vaszon);
  color: var(--szoveg);
  font-family: var(--font-ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* --- Tokenek: navy sötét változat (FÉLRETÉVE, nincs bekapcsolva) ------------- */
/* A sötét megjelenés ma az eredeti Hub. Ha egyszer a navy sötét változat kell,
   a <html data-fb-navy> attribútum bekapcsolja ezeket a tokeneket. */

html[data-fb-navy] body,
html[data-fb-navy] body.hub-felulet,
html[data-fb-navy] body.onallo {
    --vaszon: #052C47; --lap: #0f3a52; --halk-lap: #0b3249; --keret: #214a63;
    --szoveg: #eef3f7; --cimszin: #ffffff; --halk: #b9c7d4;
    --blokk: #0e4a72; --blokk-szoveg: #ffffff; --blokk-halk: rgba(255, 255, 255, .8);
    --sav: #031d30; --kivalasztott: #ffffff; --kivalasztott-szoveg: #052C47;
    --n3: #0b3249; --n4: #123f59; --n6: #2a5570; --n7: #3a6680; --n8: #8fa6b8; --n9: #9fb2c3;
    --n11: #c9d5df;
    --a3: #0d4058; --a4: #10506b; --a6: #1d6d85;
    --t3: #0b3a4a; --t6: #1b6b78; --t11: #7fdbe4; --t12: #d8f7fa;
    --j3: #0b3a4a; --j6: #1b6b78; --j11: #7fdbe4;
    --y2: #2a2a14; --y3: #33300f; --f3: #33300f; --f6: #6b5a14; --f11: #ffd84d; --y11: #ffd84d; --y12: #fff1c2;
    --p2: #2a1630; --p3: #33183a; --p6: #6b2d68; --p11: #e3a6e0;
    --arnyek-2: 0 8px 24px -12px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* --- Tipográfia ----------------------------------------------------------- */

h1, h2, .kpi-ertek, .szamlalo .ertek, .szulo-fej-nev, .reg-kerdes, .modalis > h2 {
  font-family: var(--font-cim); font-weight: 400; letter-spacing: .005em; color: var(--cimszin);
}
h1 { font-size: 1.875rem; line-height: 1.1; text-wrap: balance; }
h2 { font-size: 1.375rem; line-height: 1.15; text-wrap: balance; }
h3 { font-family: var(--font-ui); font-size: 1.06rem; font-weight: 800; letter-spacing: 0; color: var(--cimszin); }
b, strong { font-weight: 800; }
p { text-wrap: pretty; }
.kicsi, .mellek, .lista-elem .mellek { font-size: .9rem; }
.halvany, .mellek, .sugo, .alcim { color: var(--halk); }

a { color: var(--cimszin); text-decoration-color: var(--sarga); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--cimszin); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
::selection { background: var(--y4); color: var(--navy); }

/* Mondatkezdő címkék a csupa nagybetűs helyett (Taste: eyebrow restraint).
   A menücsoport és a táblafej marad nagybetűs: ott ez a konvenció. */
.kpi-cim, .szuro-mezo > label, .szamlalo .felirat, .orarend-nap h3, .teendo-cim,
.profil-csempe-cim, .szulo-fej-intezmeny, .tipus-felirat {
  text-transform: none; letter-spacing: 0;
}
.kpi-cim { font-size: 1.06rem; font-weight: 800; color: var(--cimszin); }
.kpi-cim::before { display: none; }
.szuro-mezo > label, .mezo > label { font-size: .84rem; font-weight: 700; color: var(--szoveg); }
.teendo-cim, .profil-csempe-cim { font-size: .84rem; font-weight: 800; color: var(--halk); }
html body th { font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: var(--halk); }

/* --- Váz -------------------------------------------------------------------- */

html body.hub-felulet .fejlec {
  background: color-mix(in srgb, var(--vaszon) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--keret);
}
html body.hub-felulet .fejlec .cim { font-family: var(--font-ui); font-size: 1.06rem; font-weight: 800; color: var(--cimszin); }
.hub-felulet .fejlec .alcim { color: var(--halk); }
html body.hub-felulet .tartalom { padding-top: 24px; }

/* Oldalsáv: navy, sárga logó, kiválasztott = fehér pirula navy szöveggel. */
html body.hub-felulet .oldalsav { background: var(--sav); border-right: 0; color: #fff; }
html body.hub-felulet .markajel { flex-direction: column; align-items: flex-start; gap: .45rem;
  padding: 1.5rem 1.25rem 1.2rem; color: rgba(255, 255, 255, .7); font-size: .8rem; font-weight: 600; }
.hub-felulet .markajel img { content: url('../fabton-brand/logo/logo-sarga.png'); width: 7.4rem; height: auto; border-radius: 0; }
html body.hub-felulet .menucsoport-cim, html body.hub-felulet button.menucsoport-cim {
  color: rgba(255, 255, 255, .62); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
html body.hub-felulet button.menucsoport-cim:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.hub-felulet .csukhato-csoport { border-top-color: rgba(255, 255, 255, .1); }
html body.hub-felulet .oldalsav .menupont {
  color: rgba(255, 255, 255, .86); border-radius: var(--r-teljes); font-size: .92rem; font-weight: 600; padding: .5rem .85rem; }
html body.hub-felulet .oldalsav .menupont:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html body.hub-felulet .oldalsav .menupont.aktiv,
html body.hub-felulet .oldalsav .menupont.aktiv:hover { background: #fff; color: var(--navy); font-weight: 800; box-shadow: none; }
.hub-felulet .oldalsav-lab { border-top-color: rgba(255, 255, 255, .1); }
.hub-felulet .oldalsav .felhasznalo-nev { color: #fff; font-weight: 700; }
.hub-felulet .oldalsav .felhasznalo, .hub-felulet .oldalsav .halvany { color: rgba(255, 255, 255, .7); }
.hub-felulet .oldalsav .gomb { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
/* Fiókmenü a navy sávban: a lenyíló fehér lap navy szöveggel, a gomb
   hover-állapota a sáv színén belül marad. */
.hub-felulet .oldalsav .profil-gomb:hover { background: rgba(255, 255, 255, .08); }
.hub-felulet .oldalsav .profil-lenyilo {
  background: var(--lap); border: 1px solid var(--keret); border-radius: var(--r-nagy);
  box-shadow: 0 16px 36px -12px rgba(3, 27, 44, .55);
}
html body.hub-felulet .oldalsav .profil-lenyilo .menupont { color: var(--szoveg); font-weight: 700; }
html body.hub-felulet .oldalsav .profil-lenyilo .menupont:hover { background: var(--halk-lap); color: var(--cimszin); }

/* Telefonos „Több” lap: a kiválasztott pont itt is navy. */
html body.hub-felulet .tobb-lap .menucsoport-cim, html body.hub-felulet .tobb-lap button.menucsoport-cim { color: var(--halk); }
html body.hub-felulet .tobb-lap .menupont { border-radius: var(--r-teljes); font-weight: 700; color: var(--szoveg); }
html body.hub-felulet .tobb-lap .menupont:hover { background: var(--halk-lap); }
html body.hub-felulet .tobb-lap .menupont.aktiv,
html body.hub-felulet .tobb-lap .menupont.aktiv:hover { background: var(--kivalasztott); color: var(--kivalasztott-szoveg); box-shadow: none; }

.menu-jelveny { background: var(--sarga); color: var(--navy); font-weight: 800; }
.kezdobetu { background: var(--lila); font-weight: 800; }

/* Alsó sáv (telefon): kiválasztott = navy pirula. */
html body .alsosav { background: var(--vaszon); border-top: 1px solid var(--keret); }
.alsopont { color: var(--halk); font-weight: 700; }
.alsopont.aktiv { color: var(--cimszin); font-weight: 800; }
.alsopont.aktiv svg { background: var(--kivalasztott); color: var(--kivalasztott-szoveg); }

/* --- AZ OLDAL EGYETLEN SZÍNBLOKKJA ----------------------------------------- */
/* A fabton-v5.js az oldal első címének tárolóját jelöli .fb5-blokk osztállyal,
   és a --fb5-minta változóba teszi a blokk formáit (2–4 forma, a jobb felső
   sarokból). A tartalom nem lóg a formák alá: a blokk jobbra helyet hagy. */

.fb5-blokk {
  position: relative; overflow: hidden;
  /* 3×2 cellás csoport: szélessége a magasság másfélszerese; a jobb oldali
     térköz mindig nagyobb nála, így forma nem kerül szöveg vagy gomb alá. */
  background: var(--blokk) var(--fb5-minta, none) no-repeat right top / auto 6rem !important;
  color: var(--blokk-szoveg) !important;
  border: 0 !important; border-radius: var(--r-nagy) !important; box-shadow: none !important;
  padding: 1.4rem 10.25rem 1.4rem 1.5rem !important;
  margin-bottom: 1.25rem !important;
}
h1.fb5-blokk { display: block; }
.fb5-blokk h1, .fb5-blokk h2, .fb5-blokk h3, h1.fb5-blokk, .fb5-blokk b, .fb5-blokk strong { color: var(--blokk-szoveg) !important; }
.fb5-blokk p, .fb5-blokk .halvany, .fb5-blokk .kicsi, .fb5-blokk .mellek, .fb5-blokk span:not(.cimke):not(.chip):not(.arckep) { color: var(--blokk-halk); }
.fb5-blokk a { color: #fff; text-decoration-color: var(--sarga); }
.fb5-blokk .cimke { background: rgba(255, 255, 255, .14); color: #fff; }
.fb5-blokk .gomb:not(.elsodleges) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.fb5-blokk .gomb:not(.elsodleges):hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (max-width: 40rem) {
  .fb5-blokk { padding: 1.15rem 6.25rem 1.15rem 1.15rem !important; background-size: auto 3.75rem !important; }
}

/* --- Felületek -------------------------------------------------------------- */

html body .kartya, html body.hub-felulet .kartya {
  background: var(--lap); border: 1px solid var(--keret); border-radius: var(--r-nagy); box-shadow: none;
}
html body .lista-elem, html body.hub-felulet .lista-elem {
  background: var(--lap); border: 1px solid var(--keret); border-radius: var(--r-kicsi); box-shadow: none;
}
html body .lista-elem:hover { border-color: var(--n7); box-shadow: none; }
.lista-elem .nev { font-weight: 800; color: var(--cimszin); }

/* Táblák kártya nélkül, vékony elválasztóval (Airtable). */
html body .tabla-doboz { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
html body th { background: transparent; border-bottom: 1.5px solid var(--keret); }
html body td { border-bottom: 1px solid var(--n4); }
html body tbody tr:hover { background: var(--halk-lap); }
td.jobbra, th.jobbra { font-variant-numeric: tabular-nums; }

/* --- Gombok: minden interaktív pirula; akció = sárga ------------------------ */

html body .gomb, html body.hub-felulet .gomb {
  border-radius: var(--r-teljes); padding: .55rem 1.15rem; font-size: .94rem; font-weight: 700;
  color: var(--cimszin); background: var(--lap); border: 1.5px solid var(--n6); box-shadow: none;
  transition: background-color .18s, border-color .18s, transform .1s;
}
html body .gomb:hover { background: var(--halk-lap); border-color: var(--n8); color: var(--cimszin); }
html body .gomb:active { transform: scale(.98); }
html body .gomb.elsodleges, html body.hub-felulet .gomb.elsodleges {
  background: var(--sarga); color: var(--navy); border-color: transparent; box-shadow: none; font-weight: 800;
}
html body .gomb.elsodleges:hover { background: var(--marka-hover); color: var(--navy); }
html body .gomb.veszely { color: var(--p11); border-color: var(--p6); background: var(--lap); }
html body .gomb.kicsi { padding: .34rem .8rem; font-size: .84rem; border-radius: var(--r-teljes); }
.szoveg-gomb { color: var(--cimszin); font-weight: 700; text-decoration-color: var(--sarga); }

/* --- Űrlap ------------------------------------------------------------------ */

html body input:not([type=checkbox]):not([type=radio]):not([type=range]), html body select, html body textarea {
  border-radius: var(--r-kicsi); border: 1.5px solid var(--n6); background-color: var(--lap); color: var(--szoveg);
  font-family: var(--font-ui);
}
html body input::placeholder, html body textarea::placeholder { color: var(--n9); }
html body input:focus, html body select:focus, html body textarea:focus { border-color: var(--lila); box-shadow: var(--fokusz); outline: none; }

/* --- Fülek, váltók: kiválasztott = navy ------------------------------------- */

html body .fulek { background: var(--halk-lap); border: 0; border-radius: var(--r-teljes); padding: .3rem; }
html body .ful { border-radius: var(--r-teljes); color: var(--halk); font-size: .94rem; font-weight: 700; }
html body .ful:hover { background: var(--lap); color: var(--cimszin); }
html body .ful.aktiv { background: var(--kivalasztott); color: var(--kivalasztott-szoveg); box-shadow: none; font-weight: 800; }
.ful.aktiv .ful-szam { background: var(--sarga); color: var(--navy); }
.belepes-valto { background: var(--halk-lap); }
.belepes-valto-ful { font-weight: 700; }
.belepes-valto-ful.aktiv { background: var(--kivalasztott); color: var(--kivalasztott-szoveg); box-shadow: none; }

/* --- Címkék ----------------------------------------------------------------- */

.cimke { padding: .16rem .65rem; font-size: .8rem; font-weight: 800; border-radius: var(--r-teljes); }
.cimke.info  { background: var(--t3); color: var(--t11); }
.cimke.marka { background: var(--sarga); color: var(--navy); }
.cimke.lila  { background: var(--p3); color: var(--p11); }

/* --- Állapot formával is (kör, félkör, gyűrű) ------------------------------- */

.cimke.jelen::before, .cimke.beteg::before, .cimke.hianyzott::before, .statusz-gomb::before {
  content: ''; display: inline-block; width: .62em; height: .62em; margin-right: .38em;
  vertical-align: .02em; background: currentColor;
}
.cimke.jelen::before, .statusz-gomb[data-statusz=jelen]::before { border-radius: 50%; }
.cimke.beteg::before, .statusz-gomb[data-statusz=beteg]::before { height: .34em; border-radius: 999px 999px 0 0; vertical-align: .14em; }
.cimke.hianyzott::before, .statusz-gomb[data-statusz=hianyzott]::before { background: none; border-radius: 50%; box-shadow: inset 0 0 0 .16em currentColor; }

.gyerek-sor { background: var(--lap); border: 1px solid var(--keret); border-radius: var(--r-nagy); box-shadow: none; }
.gyerek-sor .gyerek-nev { font-weight: 800; color: var(--cimszin); }
.statusz-valaszto { background: var(--halk-lap); border-radius: var(--r-teljes); }
.statusz-gomb { border-radius: var(--r-teljes); font-size: .94rem; font-weight: 700; color: var(--halk); }
.statusz-gomb.valasztott { box-shadow: none; border-color: transparent; font-weight: 800; }
.statusz-gomb.valasztott[data-statusz=jelen]     { background: var(--turkiz); color: var(--navy); border-color: transparent; }
.statusz-gomb.valasztott[data-statusz=beteg]     { background: var(--sarga);  color: var(--navy); border-color: transparent; }
.statusz-gomb.valasztott[data-statusz=hianyzott] { background: var(--lila);   color: #fff;        border-color: transparent; }

/* --- Érintési cél: legalább 44 px érintőképernyőn --------------------------- */

@media (pointer: coarse) {
  html body .gomb, html body .statusz-gomb, html body .ful, .belepes-valto-ful,
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]), html body select { min-height: 44px; }
  html body .gomb.kicsi { min-height: 40px; }
}

/* --- Üzenetek: piros nélkül ------------------------------------------------- */

.uzenet { border-radius: var(--r-kicsi); }
.uzenet::before { width: 4px; opacity: 1; }
.uzenet.hiba { background: var(--p2); border-color: var(--p6); color: var(--p11); }
.uzenet.hiba::before { background: var(--lila); }
.uzenet.figyelem { background: var(--y2); border-color: var(--f6); color: var(--y12); }
.uzenet.figyelem::before { background: var(--sarga); }
.uzenet.siker, .uzenet.info { background: var(--t3); border-color: var(--t6); color: var(--t12); }
.uzenet.siker::before, .uzenet.info::before { background: var(--turkiz); }

/* Üres állapot: robot – csendes brand-pillanat, nem színblokk. */
.ures { border: 0; background: var(--halk-lap); color: var(--halk); border-radius: var(--r-nagy); }
.ures::before {
  content: ''; display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto .8rem;
  border-radius: 50%; box-shadow: 0 0 0 4px var(--sarga);
  background: #fff url('../fabton-brand/robotok/spike-szemuveges-robot.webp') center 80% / 64% no-repeat;
}

/* --- Mutatók: tiszta csempe, forma nélkül ------------------------------------ */

html body .kpi, html body .kpi.kiemelt { background: var(--lap); border: 1px solid var(--keret); border-radius: var(--r-nagy); box-shadow: none; }
html body .kpi:hover { box-shadow: none; transform: none; border-color: var(--n7); }
.kpi::after, .kpi.kiemelt::before { display: none; }
.kpi-ertek { font-size: 1.875rem; color: var(--cimszin); }
.kpi-cimke { font-weight: 700; color: var(--szoveg); font-size: .94rem; }
.kpi-alcim { color: var(--halk); }
.szamlalo .ertek { font-size: 1.875rem; color: var(--cimszin); }
.szamlalo .felirat { font-size: .84rem; font-weight: 700; color: var(--halk); }

/* --- Fix színkódok ---------------------------------------------------------- */

[data-fb-varos="csik"]::before, [data-fb-varos="varad"]::before, [data-fb-varos="udvar"]::before {
  content: ''; display: inline-block; width: .62em; height: .62em; margin-right: .42em; border-radius: 50%; vertical-align: .02em;
}
[data-fb-varos="csik"]::before  { background: var(--turkiz); }
[data-fb-varos="varad"]::before { background: var(--sarga); }
[data-fb-varos="udvar"]::before { background: var(--lila); }
.arckep-betu { font-weight: 800; }
.arckep-betu[data-fb-szin="lila"]   { background: var(--lila) !important;   color: #fff; }
.arckep-betu[data-fb-szin="turkiz"] { background: var(--turkiz) !important; color: var(--navy); }
.arckep-betu[data-fb-szin="sarga"]  { background: var(--sarga) !important;  color: var(--navy); }
.arckep-betu[data-fb-szin="navy"]   { background: var(--navy) !important;   color: #fff; }

/* --- Modális -------------------------------------------------------------- */

.fatyol { background: rgba(5, 44, 71, .5); }
html body .modalis { background: var(--lap); border: 0; border-radius: var(--r-nagy) var(--r-nagy) 0 0; }
@media (min-width: 40rem) { html body .modalis { border-radius: var(--r-nagy); } }
.modalis > h2 { font-size: 1.375rem; }

/* --- Belépés: a színblokk a logó és a köszönés ------------------------------ */

html body.belepes-mod { background: var(--vaszon); }
body.belepes-mod .belepes-keret { max-width: 25rem; margin-top: 3rem; }
.belepes-fejlec {
  position: relative; overflow: hidden; justify-content: flex-start; align-items: flex-end;
  min-height: 9.5rem; margin-bottom: 1.2rem; padding: 1.4rem 1.5rem;
  background: var(--blokk) var(--fb5-minta-belepes, none) no-repeat right top / auto 100%;
  border-radius: var(--r-nagy);
}
.belepes-logo { content: url('../fabton-brand/logo/logo-sarga.png'); height: 2.2rem; position: relative; z-index: 1; }
.belepes-fejlec::after {
  content: 'Szia!'; position: absolute; left: 1.5rem; top: 1.2rem; padding: .3rem .9rem;
  border-radius: 999px 999px 999px 8px; background: #fff; color: var(--navy);
  font-family: var(--font-cim); font-size: 1.1rem; line-height: 1.1; rotate: -6deg;
}
body.belepes-mod .kartya { border: 1px solid var(--keret); border-radius: var(--r-nagy); padding: 1.5rem; }

/* --- Szülői oldal: a fejléc a színblokk --------------------------------------- */

html body.onallo { background: var(--vaszon); }
.szulo-fej {
  background: var(--blokk) var(--fb5-minta-szulo, none) no-repeat right top / auto 4.5rem;
  border: 0; border-radius: var(--r-nagy); color: #fff; box-shadow: none; padding: 1.35rem 5.25rem 1.35rem 1.3rem;
}
.szulo-fej::before, .szulo-fej::after { display: none; }
.szulo-fej-monogram { border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 0 0 4px var(--sarga); font-weight: 800; }
.szulo-fej-intezmeny { color: var(--sarga); font-weight: 800; font-size: .84rem; }
.szulo-fej-nev { color: #fff; font-size: 1.875rem; }
.szulo-fej-alcim { color: var(--blokk-halk); }
html body .szulo-fej .gomb { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.keszseg-sav { background: var(--halk-lap); border-radius: var(--r-teljes); }
.keszseg-sav > span { background: var(--turkiz); border-radius: var(--r-teljes); }

/* --- Jelentkezés: a nyitó- és záróképernyő a színblokk ---------------------- */

.reg-oldal { background: var(--vaszon); }
.reg-nyito {
  position: relative; overflow: hidden; padding: 2rem 1.5rem 1.8rem; border-radius: var(--r-nagy);
  background: var(--blokk) var(--fb5-minta-reg, none) no-repeat right top / auto 5rem; color: #fff;
}
.reg-nyito .reg-kerdes { color: #fff; }
.reg-nyito .reg-alcim, .reg-nyito p { color: var(--blokk-halk); }
.reg-korong {
  width: 6rem; height: 6rem; font-size: 0; color: transparent;
  background: #fff url('../fabton-brand/robotok/spike-szemuveges-robot.webp') center 85% / 68% no-repeat;
  box-shadow: 0 0 0 5px var(--sarga);
}
.reg-jelveny { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; }
.reg-kerdes { color: var(--cimszin); }
.reg-szam { color: var(--reg-hang); font-weight: 800; }
/* A jelentkezés színét az admin testre szabhatja (--reg); alapból Fabton sárga. */
.reg-tovabb { border-radius: var(--r-teljes); color: var(--reg-szoveg); background: var(--reg); font-family: var(--font-ui); font-weight: 800; box-shadow: none; }
.reg-vissza { border-radius: var(--r-teljes); font-weight: 700; }
.reg-sav { height: 5px; background: var(--halk-lap); }
.reg-sav > span { background: var(--reg); }
.reg-beviteli { color: var(--szoveg); font-family: var(--font-ui); }
.reg-beviteli:focus { border-bottom-color: var(--lila); }
.reg-opcio { border-radius: var(--r-kicsi); }
.reg-ossz { background: var(--halk-lap); border-radius: var(--r-nagy); }