:root{
  --hatter:#F4F6F5;
  --lap:#FFFFFF;
  --lap-2:#EEF2F1;
  --vonal:#DCE3E1;
  --vonal-eros:#C3CECB;
  --tinta:#17262A;
  --tinta-halk:#5B6B6E;
  --tinta-halkabb:#87979A;
  --fo:#12615C;
  --fo-halk:#E3EFED;
  --fo-sotet:#0C433F;
  --meleg:#B9691F;
  --meleg-halk:#F8EDE1;
  --jo:#2C7A4F;
  --jo-halk:#E4F1E9;
  --var:#9A6B12;
  --var-halk:#FAF0DC;
  --arnyek:0 1px 2px rgba(23,38,42,.06), 0 8px 24px rgba(23,38,42,.06);
  --r:14px; --r-nagy:22px;
  --mancs:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Cg fill='%23000'%3E%3Cg transform='translate(20 18) rotate(-16 20 20)'%3E%3Cellipse cx='20' cy='25' rx='7.6' ry='6.2'/%3E%3Cellipse cx='11.6' cy='15.6' rx='3' ry='4'/%3E%3Cellipse cx='17.6' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='24.2' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='29.6' cy='16.4' rx='3' ry='3.8'/%3E%3C/g%3E%3Cg transform='translate(-16 44) rotate(14 20 20) scale(.82)'%3E%3Cellipse cx='20' cy='25' rx='7.6' ry='6.2'/%3E%3Cellipse cx='11.6' cy='15.6' rx='3' ry='4'/%3E%3Cellipse cx='17.6' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='24.2' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='29.6' cy='16.4' rx='3' ry='3.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hatter:#0E1617; --lap:#16211F; --lap-2:#1C2A28;
    --vonal:#273634; --vonal-eros:#38504C;
    --tinta:#EAF1EF; --tinta-halk:#9DB0AE; --tinta-halkabb:#7B8F8C;
    --fo:#5FBFAF; --fo-halk:#173733; --fo-sotet:#9BD8CC;
    --meleg:#E0A063; --meleg-halk:#33261A;
    --jo:#6FC08C; --jo-halk:#16301F;
    --var:#D6AC55; --var-halk:#2C2312;
    --arnyek:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --hatter:#0E1617; --lap:#16211F; --lap-2:#1C2A28;
  --vonal:#273634; --vonal-eros:#38504C;
  --tinta:#EAF1EF; --tinta-halk:#9DB0AE; --tinta-halkabb:#7B8F8C;
  --fo:#5FBFAF; --fo-halk:#173733; --fo-sotet:#9BD8CC;
  --meleg:#E0A063; --meleg-halk:#33261A;
  --jo:#6FC08C; --jo-halk:#16301F;
  --var:#D6AC55; --var-halk:#2C2312;
  --arnyek:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
/* A hidden attribútum erősebb legyen, mint a display:flex a komponenseken.
   E nélkül a rejtett sávok és nézetek láthatók maradnak. */
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0; background:var(--hatter); color:var(--tinta);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;margin:0;text-wrap:balance}

/* ---------- demó-sáv ---------- */
.demosav{
  background:var(--tinta); color:var(--hatter);
  padding-block:10px; padding-inline:16px;
}
.demosav .belso{
  max-width:980px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
.demosav .cimke{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  opacity:.72;
}
.szerepvalto{display:flex; gap:6px; flex-wrap:wrap}
.szerepvalto button{
  font:inherit; font-size:13px; font-weight:500;
  padding:5px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:transparent; color:inherit;
}
.szerepvalto button[aria-pressed="true"]{background:var(--hatter); color:var(--tinta); border-color:transparent}
.szerepvalto button:focus-visible{outline:2px solid var(--fo); outline-offset:2px}
.demosav .magyarazat{font-size:12.5px; opacity:.7; flex:1 1 220px; min-width:0}

/* ---------- keret ---------- */
.keret{
  max-width:460px; margin:0 auto; padding-inline:16px;
  padding-block:18px 96px;
}
.markasav{
  display:flex; align-items:baseline; gap:9px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--vonal);
}
.markanev{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:19px; letter-spacing:-.01em; color:var(--fo);
}
.markaalcim{font-size:12.5px; color:var(--tinta-halkabb)}

.telepito{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; margin-bottom:14px;
  background:var(--fo-halk); border-radius:var(--r); position:relative;
}
.telepito.halk{background:var(--lap-2)}
.telepito-szoveg{flex:1; font-size:13.5px; line-height:1.5; color:var(--tinta)}
.telepito .ikon{
  display:inline-block; padding:0 4px; border-radius:4px;
  background:var(--lap); border:1px solid var(--vonal-eros); font-size:12px;
}
.bezar{
  flex:none; font:inherit; font-size:19px; line-height:1;
  background:transparent; border:0; cursor:pointer; color:var(--tinta-halkabb);
  padding:2px 4px;
}
.bezar:focus-visible, #telepit-gomb:focus-visible{outline:2px solid var(--fo); outline-offset:2px}

.fejlec{
  position:relative; display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
/* Cica csoport — halvány mancsminta a fejléc mögött */
.fejlec::before{
  content:""; position:absolute; z-index:-1; inset:-10px -14px -6px;
  background:var(--tinta); opacity:.05; pointer-events:none;
  -webkit-mask-image:var(--mancs); mask-image:var(--mancs);
  -webkit-mask-size:86px 86px; mask-size:86px 86px;
  -webkit-mask-position:right -12px top -6px; mask-position:right -12px top -6px;
}
.fejlec .csoport{
  display:flex; align-items:center; gap:6px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-halkabb); font-weight:600;
}
.cicajel{flex:none; width:17px; height:17px; color:var(--fo)}
.fejlec h1{font-size:23px; font-weight:700; line-height:1.2; margin-top:2px}
.avatar{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--fo-halk); color:var(--fo-sotet);
  display:grid; place-items:center; font-weight:600; font-size:13px;
}

/* ---------- lapok ---------- */
.lap{display:none}
.lap.aktiv{display:block}

.kartya{
  background:var(--lap); border:1px solid var(--vonal);
  border-radius:var(--r-nagy); padding:20px; box-shadow:var(--arnyek);
}
.kartya + .kartya{margin-top:14px}
.szekciocim{
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-halkabb); margin:26px 0 10px;
}

/* állapot */
.allapot .sor{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600}
.allapot .fo-uzenet{font-family:"Bricolage Grotesque",sans-serif; font-size:21px; font-weight:700; line-height:1.28; margin-top:6px}
.allapot .reszlet{color:var(--tinta-halk); font-size:14.5px; margin-top:8px}

.gomb{
  font:inherit; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 18px; margin-top:16px;
  border:0; border-radius:var(--r); cursor:pointer;
  background:var(--fo); color:#fff;
}
.gomb.masodlagos{background:var(--lap-2); color:var(--tinta); border:1px solid var(--vonal)}
.gomb.kicsi{width:auto; padding:8px 14px; font-size:13.5px; margin-top:0}
.gomb:focus-visible{outline:2px solid var(--fo); outline-offset:2px}
.gomb[disabled]{opacity:.55; cursor:default}

/* fizetési panel */
.fizetes{margin-top:14px; border-top:1px solid var(--vonal); padding-top:16px}
.adatsor{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; background:var(--lap-2); border-radius:var(--r);
}
.adatsor + .adatsor{margin-top:8px}
.adatsor .kulcs{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600}
.adatsor .ertek{font-size:15.5px; font-weight:600; font-variant-numeric:tabular-nums; word-break:break-all}
.masol{
  flex:none; font:inherit; font-size:12.5px; font-weight:600;
  border:1px solid var(--vonal-eros); background:transparent; color:var(--fo);
  border-radius:9px; padding:6px 11px; cursor:pointer;
}
.masol:focus-visible{outline:2px solid var(--fo); outline-offset:2px}

/* kassza */
.egyenleg{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.egyenleg .szam{flex:none; white-space:nowrap; font-family:"Bricolage Grotesque",sans-serif; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1}
.egyenleg .megnevezes{flex:1; min-width:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600}

.tetelek{list-style:none; margin:16px 0 0; padding:0}
.tetelek li{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--vonal)}
.tetelek .leiras{flex:1; min-width:0}
.tetelek .nev{font-weight:500; line-height:1.35}
.tetelek .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px}
.tetelek .osszeg{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.tetelek .osszeg.ki{color:var(--tinta)}
.tetelek .osszeg.be{color:var(--jo)}

.cimke-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; margin-top:6px;
}
.chip-bizonylat{background:var(--fo-halk); color:var(--fo-sotet)}
.chip-var{background:var(--var-halk); color:var(--var)}
.chip-jo{background:var(--jo-halk); color:var(--jo)}
.chip-uj{background:var(--meleg-halk); color:var(--meleg)}

/* nyugtázandó sorok */
.nyugta{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--vonal)}
.nyugta:first-of-type{border-top:0}
.nyugta .ki{flex:1; min-width:0}
.nyugta .nev{font-weight:500}
.nyugta .meta{font-size:13px; color:var(--tinta-halk)}

/* haladás */
.halad{height:7px; border-radius:99px; background:var(--lap-2); overflow:hidden; margin-top:12px}
.halad span{display:block; height:100%; background:var(--fo); border-radius:99px}

/* hírek */
.hir{border-top:1px solid var(--vonal); padding:16px 0}
.hir:first-of-type{border-top:0; padding-top:0}
.hir h3{font-size:17px; font-weight:700; line-height:1.3}
.hir .datum{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600; margin-bottom:5px}
.hir p{margin:6px 0 0; color:var(--tinta-halk)}

/* események */
.esemeny{display:flex; gap:14px}
.naptar{
  flex:none; width:54px; text-align:center; padding:8px 0;
  background:var(--fo-halk); color:var(--fo-sotet); border-radius:var(--r);
}
.naptar .ho{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.naptar .nap{font-family:"Bricolage Grotesque",sans-serif; font-size:22px; font-weight:700; line-height:1.1}
.esemeny .torzs{flex:1; min-width:0}
.esemeny h3{font-size:17px; font-weight:700}
.esemeny .hol{font-size:13.5px; color:var(--tinta-halk); margin-top:2px}
.esemeny .hozni{font-size:14px; margin-top:8px}
.valasz{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.valasz button{
  font:inherit; font-size:13.5px; font-weight:600;
  padding:7px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--vonal-eros); background:transparent; color:var(--tinta);
}
.valasz button[aria-pressed="true"]{background:var(--fo); border-color:var(--fo); color:#fff}
.valasz button:focus-visible{outline:2px solid var(--fo); outline-offset:2px}

/* ---------- kérések ---------- */
.keres{border-top:1px solid var(--vonal); padding:15px 0}
.keres:first-of-type{border-top:0; padding-top:0}
.keres .fej{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.keres .cim{min-width:0}
.keres .nev{font-weight:600; line-height:1.35}
.keres .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px}
.keres .cimkesor{display:flex; flex-wrap:wrap; gap:6px}
.keres .cimkesor .cimke-chip{margin-top:8px}
.keres .lepesek{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}

.chip-ism{background:var(--lap-2); color:var(--tinta-halk)}

/* segítőkeresés */
.segito{
  margin-top:12px; padding:11px 13px;
  background:var(--lap-2); border-radius:var(--r);
}
.segito-fej{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.segito-allapot{font-size:14px; font-weight:600}
.segito-allapot.kell{color:var(--meleg)}
.segito-allapot.megvan{color:var(--jo)}
.segito-szam{font-size:13px; font-variant-numeric:tabular-nums; color:var(--tinta-halk); white-space:nowrap}
.segito .halad{margin-top:9px; background:var(--vonal)}
.jelentkezok{font-size:13px; color:var(--tinta-halk); margin-top:9px}
.jelentkezok strong{color:var(--tinta); font-weight:500}
.jelentkezok .senki{font-style:italic}

/* megoldott kérés: ott marad, de elhalványul és áthúzva */
.keres.megoldva{opacity:.55}
.keres.megoldva .nev{text-decoration:line-through; text-decoration-thickness:1px}
.keres .megoldotta{
  display:flex; align-items:center; gap:7px;
  font-size:13px; color:var(--jo); font-weight:500; margin-top:9px;
}
.keres .megoldotta svg{flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

.megoldva-szakasz{margin-top:14px}
.megoldva-szakasz > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  font-size:15px; font-weight:700; color:var(--tinta-halk);
  padding:4px 2px;
}
.megoldva-szakasz > summary::-webkit-details-marker{display:none}
.megoldva-szakasz > summary:focus-visible{outline:2px solid var(--fo); outline-offset:3px; border-radius:6px}
.megoldva-szakasz > summary .nyil{transition:transform .18s ease; flex:none}
.megoldva-szakasz[open] > summary .nyil{transform:rotate(90deg)}
.megoldva-szakasz .kartya{margin-top:8px}
.urlap{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.urlap label{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb)}
.urlap input, .urlap textarea, .urlap select{
  font:inherit; width:100%; padding:11px 13px;
  border:1px solid var(--vonal-eros); border-radius:var(--r);
  background:var(--lap); color:var(--tinta);
}
.urlap input:focus-visible, .urlap textarea:focus-visible, .urlap select:focus-visible{outline:2px solid var(--fo); outline-offset:1px}

.urlap select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:17px; padding-right:38px}

.ures{color:var(--tinta-halk); font-size:14.5px}

/* alsó fülek */
.fulek{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--lap); border-top:1px solid var(--vonal);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.fulek .belso{max-width:460px; margin:0 auto; display:flex}
.fulek button{
  flex:1; font:inherit; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; background:transparent; border:0; cursor:pointer;
  color:var(--tinta-halkabb); padding:10px 4px 12px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.fulek button[aria-selected="true"]{color:var(--fo)}
.fulek button:focus-visible{outline:2px solid var(--fo); outline-offset:-3px}
.fulek .pont{width:22px; height:22px; display:grid; place-items:center}
.fulek svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.jelzo{
  position:absolute; transform:translate(10px,-4px);
  min-width:17px; height:17px; padding:0 4px; border-radius:99px;
  background:var(--meleg); color:#fff; font-size:10.5px; font-weight:700;
  display:grid; place-items:center;
}

.pirinyo{font-size:12.5px; color:var(--tinta-halkabb); margin-top:10px; line-height:1.5}

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

/* ---------- „Neked szól" sáv ---------- */
.neked{
  border-radius:var(--r-nagy); padding:14px 16px; margin-bottom:12px;
  background:var(--meleg-halk); border:1px solid var(--meleg-halk);
}
.neked + .neked{margin-top:-4px}
.neked .kitol{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--meleg); margin-bottom:4px;
}
.neked .szoveg{font-weight:600; line-height:1.4}
.neked .mikor{font-size:13px; color:var(--tinta-halk); margin-top:3px}
.neked .gomb{margin-top:11px}
.neked.beosztas{background:var(--fo-halk); border-color:var(--fo-halk)}
.neked.beosztas .kitol{color:var(--fo-sotet)}
.neked.nyugtazva{background:var(--jo-halk); border-color:var(--jo-halk)}
.neked.nyugtazva .kitol{color:var(--jo)}
.neked .rendben{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--jo); margin-top:9px}
.neked .rendben svg{flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- beosztások ---------- */
.beosztas-fej{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.beosztas-fej h3{font-size:17px; font-weight:700}
.beosztas-het{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb); white-space:nowrap}
.napok{list-style:none; margin:12px 0 0; padding:0}
.napok li{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r)}
.napok li + li{margin-top:3px}
.napok .nap{flex:none; width:92px; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--tinta-halkabb)}
.napok .ki{flex:1; min-width:0; font-weight:600; line-height:1.3}
.napok .ki .szulo{display:block; font-size:12.5px; font-weight:400; color:var(--tinta-halk)}
.napok li.enyem{background:var(--fo-halk)}
.napok li.enyem .nap{color:var(--fo-sotet)}
.napok li.enyem .ki{color:var(--fo-sotet)}
.napok li.enyem .ki .szulo{color:var(--fo-sotet); opacity:.8}
.napok li.szabad .ki{font-weight:400; font-style:italic; color:var(--tinta-halkabb)}
.napok select{
  font:inherit; font-size:13.5px; font-weight:500; width:100%; padding:7px 28px 7px 10px; text-overflow:ellipsis;
  border:1px solid var(--vonal-eros); border-radius:10px;
  background:var(--lap); color:var(--tinta); appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:16px;
}
.napok select:focus-visible{outline:2px solid var(--fo); outline-offset:1px}

/* kiküldött jelzések listája a pedagógusnak */
.jelzes-sor{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--vonal)}
.jelzes-sor:first-of-type{border-top:0; padding-top:0}
.jelzes-sor .torzs{flex:1; min-width:0}
.jelzes-sor .cimzett{font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--tinta-halkabb); text-transform:uppercase}
.jelzes-sor .szoveg{margin-top:2px}
.jelzes-sor .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px}

/* ---------- lepel: teljes éves elszámolás ---------- */
.lepel{
  position:fixed; inset:0; z-index:40; background:var(--hatter);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 18px calc(28px + env(safe-area-inset-bottom, 0px));
}
.lepel-belso{max-width:460px; margin:0 auto}
.lepel-fej{
  position:sticky; top:0; z-index:1; background:var(--hatter);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 0 12px; border-bottom:1px solid var(--vonal); margin-bottom:16px;
}
.lepel-fej h2{font-size:21px; font-weight:700}
.lepel-fej .ev{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600}
.lepel-fej .bezar{
  flex:none; font:inherit; font-size:26px; line-height:1; cursor:pointer;
  width:38px; height:38px; border-radius:999px; border:1px solid var(--vonal-eros);
  background:var(--lap); color:var(--tinta-halk);
}
.lepel-fej .bezar:focus-visible{outline:2px solid var(--fo); outline-offset:2px}

.osszesito{display:flex; gap:10px; margin-bottom:14px}
.osszesito .cella{
  flex:1; background:var(--lap); border-radius:var(--r); padding:12px 13px; box-shadow:var(--arnyek);
}
.osszesito .kulcs{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-halkabb)}
.osszesito .ertek{font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}
.osszesito .ertek.be{color:var(--jo)}

.zaro{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--fo); color:#fff; border-radius:var(--r-nagy); padding:15px 17px; margin-top:16px;
}
.zaro .megnevezes{font-size:13.5px; opacity:.9}
.zaro .szam{font-family:"Bricolage Grotesque",sans-serif; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums}

/* elismervény */
.elismerveny{
  border:1px dashed var(--vonal-eros); border-radius:var(--r);
  padding:13px 15px; margin-top:12px; background:var(--lap-2);
}
.elismerveny .sorszam{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb)}
.elismerveny .fo{font-weight:600; margin-top:3px}
.elismerveny .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px}

.keres .indok{
  font-size:13px; color:var(--meleg); font-weight:500; margin-top:9px;
  padding-left:11px; border-left:2px solid var(--meleg-halk);
}

/* ---------- beszerzés–bizonylat–kifizetés lánc ---------- */
.beszerzes{border-top:1px solid var(--vonal); padding:14px 0}
.beszerzes:first-of-type{border-top:0; padding-top:0}
.beszerzes .fej{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.beszerzes .nev{font-weight:600; line-height:1.35}
.beszerzes .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px}
.beszerzes .ar{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.beszerzes .lepesek{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap}

.lanc{display:flex; gap:5px; margin-top:11px}
.lanc span{
  flex:1; text-align:center; padding:5px 4px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--lap-2); color:var(--tinta-halkabb);
}
.lanc span.kesz{background:var(--jo-halk); color:var(--jo)}
.lanc span.most{background:var(--var-halk); color:var(--var)}

/* eltűnő számlaszám: csak az adminnál, csak a kifizetésig */
.titkos{
  margin-top:11px; padding:11px 13px; border-radius:var(--r);
  background:var(--var-halk); border:1px dashed var(--var);
}
.titkos .cim{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--var)}
.titkos .szam{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:3px; word-break:break-all}
.titkos .magyarazat{font-size:12.5px; color:var(--tinta-halk); margin-top:6px; line-height:1.45}
.titkos.nincs .szam{font-size:14.5px; font-weight:500; font-style:italic; color:var(--tinta-halk)}

label.gomb{cursor:pointer}

.egybe-lista{display:flex; flex-direction:column; gap:7px; margin-top:4px}
.egybe{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:9px 11px; border:1px solid var(--vonal-eros); border-radius:var(--r);
  font-size:14.5px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--tinta);
}
.egybe input{accent-color:var(--fo); width:18px; height:18px; flex:none}
.egybe:has(input:checked){background:var(--fo-halk); border-color:var(--fo)}

/* ---------- tagok és jogosultságok ---------- */
.szurosor{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.szurosor::-webkit-scrollbar{display:none}
.szurosor button{
  flex:none; font:inherit; font-size:13px; font-weight:600; white-space:nowrap;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--vonal-eros); background:var(--lap); color:var(--tinta-halk);
}
.szurosor button[aria-pressed="true"]{background:var(--fo); border-color:var(--fo); color:#fff}
.szurosor button:focus-visible{outline:2px solid var(--fo); outline-offset:2px}
.szurosor .db{opacity:.75; font-weight:500}

.tag-sor{border-top:1px solid var(--vonal); padding:0}
.tag-sor:first-of-type{border-top:0}
.tag-sor > .fej{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; font:inherit; text-align:left; cursor:pointer;
  background:none; border:0; padding:13px 0; color:var(--tinta);
}
.tag-sor > .fej:focus-visible{outline:2px solid var(--fo); outline-offset:-2px; border-radius:8px}
.tag-sor .ki{flex:1; min-width:0}
.tag-sor .nev{display:block; font-weight:600}
.tag-sor .gyerek{display:block; font-size:13px; color:var(--tinta-halk); margin-top:1px}
.tag-sor .cimkek{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.tag-sor .cimkek .cimke-chip{margin-top:0}
.tag-sor .nyil{flex:none; transition:transform .16s ease; color:var(--tinta-halkabb)}
.tag-sor.nyitva .nyil{transform:rotate(90deg)}
.tag-sor .szerkeszto{padding:2px 0 15px}
.tag-sor .szerkeszto .cim{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); margin-bottom:8px}
.cimkevalaszto{display:flex; flex-wrap:wrap; gap:7px}
.cimkevalaszto button{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--vonal-eros); background:var(--lap); color:var(--tinta-halk);
}
.cimkevalaszto button[aria-pressed="true"]{background:var(--fo); border-color:var(--fo); color:#fff}
.cimkevalaszto button[disabled]{opacity:.5; cursor:default}
.cimkevalaszto button:focus-visible{outline:2px solid var(--fo); outline-offset:2px}

.chip-admin{background:var(--fo); color:#fff}
.chip-penztaros{background:var(--fo-halk); color:var(--fo-sotet)}
.chip-szmk{background:var(--var-halk); color:var(--var)}
.chip-pedagogus{background:var(--meleg-halk); color:var(--meleg)}
.chip-igazgato{background:var(--jo-halk); color:var(--jo)}
.chip-szerep{background:var(--lap-2); color:var(--tinta-halk)}

/* ---------- zárva napok ---------- */
.napok li.zarva{background:repeating-linear-gradient(135deg, var(--lap-2), var(--lap-2) 7px, transparent 7px, transparent 14px)}
.napok li.zarva .ki{font-weight:500; font-size:14px; color:var(--tinta-halkabb)}
.neked.zarva{background:var(--lap-2); border-color:var(--vonal)}
.neked.zarva .kitol{color:var(--tinta-halkabb)}

.zarva-sor{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--vonal)}
.zarva-sor:first-of-type{border-top:0; padding-top:14px}
.zarva-sor .torzs{flex:1; min-width:0}
.zarva-sor .nev{font-weight:600}
.zarva-sor .meta{font-size:13px; color:var(--tinta-halk); margin-top:1px}
.datumpar{display:flex; gap:10px}
.datumpar > div{flex:1; min-width:0}
.hir .datum .auto{color:var(--fo-sotet); letter-spacing:.06em}

/* ---------- szülinapok ---------- */
.szulinap-sor{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--vonal)}
.szulinap-sor:first-of-type{border-top:0; padding-top:14px}
.szulinap-sor .torzs{flex:1; min-width:0}
.szulinap-sor .nev{font-weight:600}
.szulinap-sor .meta{font-size:13px; color:var(--tinta-halk); margin-top:1px}
.szulinap-sor.ma .nev{color:var(--jo)}
.datumsor{display:flex; gap:8px; align-items:center; margin-top:8px}
.datumsor input[type="date"]{
  flex:1; min-width:0; font:inherit; font-size:14.5px; padding:9px 11px;
  border:1px solid var(--vonal-eros); border-radius:var(--r);
  background:var(--lap); color:var(--tinta);
}
.datumsor input:focus-visible{outline:2px solid var(--fo); outline-offset:1px}
.neked.szulinap-keres{background:var(--fo-halk); border-color:var(--fo-halk)}
.neked.szulinap-keres .kitol{color:var(--fo-sotet)}

/* ---------- előírások ---------- */
.eloiras-lista{list-style:none; margin:14px 0 0; padding:0}
.eloiras-lista li{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--vonal)}
.eloiras-lista li:first-child{border-top:0}
.eloiras-lista .nev{flex:1; min-width:0; font-weight:500}
.eloiras-lista .nev small{display:block; font-size:12.5px; font-weight:400; color:var(--tinta-halk); margin-top:1px}
.eloiras-lista .ar{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.eloiras-lista .cimke-chip{margin-top:0; flex:none}

.cim-kicsi{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); margin:16px 0 8px}
.fizet-osszeg{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:12px; font-size:14.5px; color:var(--tinta-halk)}
.fizet-osszeg strong{font-family:"Bricolage Grotesque",sans-serif; font-size:19px; color:var(--tinta); font-variant-numeric:tabular-nums}

.halad-tetel{margin-top:14px}
.halad-tetel:first-child{margin-top:16px}
.halad-tetel .fej{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px}
.halad-tetel .fej .nev{font-weight:600}
.halad-tetel .fej .db{font-size:13px; color:var(--tinta-halk); font-variant-numeric:tabular-nums; white-space:nowrap}
.halad-tetel .hatarido{font-size:12.5px; color:var(--tinta-halkabb); margin-top:4px}

/* ---------- esemény: díj, fizetés, névsor ---------- */
.chip-dij{background:var(--meleg-halk); color:var(--meleg)}
.esemeny .cimke-chip{margin-top:8px}

.dij-doboz{margin-top:12px; padding:12px 13px; border-radius:var(--r); background:var(--meleg-halk)}
.dij-doboz .fej{font-size:14.5px}
.dij-doboz .fej strong{font-size:17px; font-family:"Bricolage Grotesque",sans-serif}
.dij-doboz .adatsor{margin-top:10px; background:var(--lap)}
.dij-doboz .ertek{font-size:14.5px; letter-spacing:-.01em}
.dij-doboz .gomb{margin-top:10px}
.dij-doboz .pirinyo{margin-top:8px; padding:0}
.dij-doboz.rendben{background:var(--jo-halk); display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--jo)}
.dij-doboz.rendben svg{flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.dij-doboz.var{background:var(--var-halk); font-size:14px; font-weight:600; color:var(--var)}

.nevsor-sav{
  margin-top:10px; padding:9px 12px; border-radius:var(--r);
  background:var(--var-halk); color:var(--var);
  font-size:12.5px; font-weight:600; line-height:1.4;
}
.nevsor-sav.ment{background:var(--jo-halk); color:var(--jo)}



/* célok szerinti bontás */
.cel-sor{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--vonal)}
.cel-sor:first-of-type{border-top:0; padding-top:14px}
.cel-sor .ki{flex:1; min-width:0}
.cel-sor .nev{font-weight:600}
.cel-sor .meta{font-size:12.5px; color:var(--tinta-halk); margin-top:1px; font-variant-numeric:tabular-nums}
.cel-sor .ar{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.cel-sor .ar.minusz{color:var(--meleg)}

/* ---------- eseményszámok a kártyán ---------- */
.szamsor{display:flex; gap:5px; margin-top:12px}
.szam-cella{
  flex:1 1 0; min-width:0; text-align:center;
  padding:8px 4px; border-radius:var(--r); background:var(--lap-2);
}
.szam-cella .ertek{
  display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-size:18px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums;
}
.szam-cella .ertek.jo{color:var(--fo-sotet)}
.szam-cella .cimke{display:block; font-size:10px; color:var(--tinta-halk); margin-top:2px; line-height:1.2; hyphens:auto}
.szam-cella.teendo{background:var(--var-halk)}
.szam-cella.teendo .ertek{color:var(--var)}
.szam-cella.teendo .cimke{color:var(--var)}

/* ---------- névsor lepel ---------- */
.nevsor-sor{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--vonal)}
.nevsor-sor:first-of-type{border-top:0; padding-top:0}
.nevsor-sor .ki{font-weight:600; min-width:0}
.nevsor-sor .ki small{display:block; font-size:12.5px; font-weight:400; color:var(--tinta-halk); margin-top:1px}
.nevsor-sor .cimke-chip{margin-top:0; flex:none}

/* ---------- lábléc: Luora Lab ---------- */
.lablec{
  margin-top:28px; padding:22px 2px 8px;
  border-top:1px solid var(--vonal); text-align:center;
}
.lablec .keszito{
  display:inline-flex; flex-direction:column; align-items:center; gap:7px;
  text-decoration:none; color:var(--tinta-halk);
  padding:8px 12px; border-radius:var(--r);
}
.lablec .keszito:hover{color:var(--tinta)}
.lablec .keszito:focus-visible{outline:2px solid var(--fo); outline-offset:2px}
.lablec .felirat{
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-halkabb);
}
.lablec .jelsor{display:flex; align-items:center; gap:8px}
.lablec .luora-logo{display:block; width:164px; height:auto; flex:none}
/* a logó szövegének alapvonalára igazítva: a lockupban a felirat a viewBox 400/620 magasságán ül */
.lablec .ev{margin-top:5px; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--tinta-halkabb); white-space:nowrap}
.lablec .jog{
  margin:10px 0 0; font-size:12px; color:var(--tinta-halkabb); letter-spacing:.04em;
}