/* Family Assistant — egyetlen stíluslap.
   Mobilra tervezve: a legtöbb művelet telefonon történik. Nagyobb
   képernyőn a tartalom középre kerül, de a szerkezet ugyanaz. */

:root {
  --hatter: #f6f5f1;
  --lap: #ffffff;
  --szoveg: #1d2321;
  --halvany: #67716c;
  --keret: #dcdcd4;
  --fo: #2f6f4f;
  --fo-vilagos: #e6f0ea;
  --hiba: #a8342a;
  --hiba-vilagos: #fbeae8;
  --ok: #2f6f4f;
  --ok-vilagos: #e6f0ea;
  /* Szöveg a főszínű (kiemelt) felületen. Sötét témában a főszín
     világos menta, azon a fehér felirat olvashatatlan lenne. */
  --kiemelt-szoveg: #ffffff;
  /* A teszt-példány sávja. Szándékosan NEM a fő- vagy hibaszín: se
     ne olvadjon a felületbe, se ne látsszon elrontott műveletnek. */
  --teszt: #8a5a00;
  --teszt-hatter: #fdf1d6;
  --sugar: 10px;
  --arnyek: 0 1px 2px rgba(0, 0, 0, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --hatter: #14181a;
    --lap: #1c2124;
    --szoveg: #e8eae8;
    --halvany: #98a09b;
    --keret: #2e3639;
    --fo: #6fbf92;
    --fo-vilagos: #1e2a24;
    --hiba: #f08c80;
    --hiba-vilagos: #2c1e1c;
    --ok: #6fbf92;
    --ok-vilagos: #1e2a24;
    --kiemelt-szoveg: #10201a;
    --teszt: #f0c469;
    --teszt-hatter: #2a2213;
    --arnyek: none;
  }
}

/* A teszt-példány sávja: minden oldal tetején, a fejléc FÖLÖTT, hogy a
   görgetés előtt is látszódjon. */
.uzemmod {
  background: var(--teszt-hatter);
  color: var(--teszt);
  border-bottom: 2px solid var(--teszt);
  padding: .45rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
}

.uzemmod-build {
  font-weight: 400;
  opacity: .75;
  margin-left: .4rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hatter);
  color: var(--szoveg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

/* ------------------------------------------------------------ fejléc */

.fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  background: var(--fo);
  color: var(--kiemelt-szoveg);
}

.fejlec a { color: var(--kiemelt-szoveg); }
.marka { font-weight: 600; text-decoration: none; letter-spacing: .01em; }
.csoportnev { opacity: .9; }

.valto { position: relative; }
.valto summary { cursor: pointer; list-style: none; }
.valto summary::-webkit-details-marker { display: none; }
.valto ul {
  position: absolute;
  right: 0;
  top: 1.9rem;
  z-index: 10;
  margin: 0;
  padding: .25rem;
  min-width: 12rem;
  list-style: none;
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.valto ul a {
  display: block;
  padding: .5rem .6rem;
  color: var(--szoveg);
  text-decoration: none;
  border-radius: 6px;
}
.valto ul a:hover { background: var(--fo-vilagos); }
.nyil { font-size: .8em; opacity: .8; }

/* -------------------------------------------------------------- menü */

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  padding: .5rem 1rem;
  background: var(--lap);
  border-bottom: 1px solid var(--keret);
  overflow-x: auto;
}
.menu a {
  color: var(--szoveg);
  text-decoration: none;
  padding: .35rem 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--fo); }
.kilepes { margin-left: auto; }

/* ------------------------------------------------------------ elemek */

h1 { font-size: 1.35rem; margin: 1rem 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .35rem; }
p { margin: .5rem 0; }
.halvany { color: var(--halvany); }
.kicsi { font-size: .875rem; }

.lap {
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  padding: 1rem;
  margin: .75rem 0;
  box-shadow: var(--arnyek);
}

.uzenet {
  padding: .7rem .9rem;
  border-radius: var(--sugar);
  margin: 1rem 0;
}
.uzenet.ok   { background: var(--ok-vilagos);   color: var(--ok);   border: 1px solid var(--ok); }
.uzenet.hiba { background: var(--hiba-vilagos); color: var(--hiba); border: 1px solid var(--hiba); }

label { display: block; margin: .75rem 0 .25rem; font-weight: 500; }
label.sorban { display: flex; align-items: center; gap: .5rem; font-weight: 400; }

/* Minden szöveges beviteli fajta ide tartozik. A `search` és a `date`
   korábban kimaradt, és sötét témában fehér dobozként világított a lapon
   — a böngésző alapértelmezését kapták.

   A `type` NÉLKÜLI mező ugyanígy kimaradt, pedig a HTML szerint az is
   szöveges: az `input[type=text]` választó rá nem illik. Húsz ilyen mező
   volt a sablonokban (befizetés összege, oktató neve, okmány száma…), és
   mind fehér dobozként világított a sötét lapon. */
input:not([type]),
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=time], input[type=tel],
select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--szoveg);
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--fo);
  outline-offset: 1px;
}

button, .gomb {
  display: inline-block;
  padding: .6rem 1rem;
  font: inherit;
  font-weight: 500;
  color: var(--kiemelt-szoveg);
  background: var(--fo);
  border: 1px solid var(--fo);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}
button:disabled, .gomb.tiltott {
  opacity: .55;
  cursor: not-allowed;
}
button.masodlagos, .gomb.masodlagos {
  color: var(--szoveg);
  background: transparent;
  border-color: var(--keret);
}
button.lapos {
  color: inherit;
  background: none;
  border: none;
  padding: .35rem 0;
  font-weight: 400;
  text-decoration: underline;
}
button.veszely { background: var(--hiba); border-color: var(--hiba); }

.sor { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.sor > * { flex: 1 1 10rem; }
.jobbra { margin-left: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--keret); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--halvany); }

.cimke {
  display: inline-block;
  padding: .1rem .5rem;
  font-size: .78rem;
  border-radius: 999px;
  background: var(--fo-vilagos);
  color: var(--fo);
  border: 1px solid var(--fo);
}
.cimke.szurke { background: transparent; color: var(--halvany); border-color: var(--keret); }

.kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  word-break: break-all;
  background: var(--fo-vilagos);
  padding: .5rem .6rem;
  border-radius: 8px;
  display: block;
}

/* -------------------------------------------------- gyors bevitel */

/* A vezérlőpult két beviteli pontja: egy kamera-gomb és egy sor.
   Amíg a mögöttes modul nem készült el, láthatók, de nem használhatók. */
.bevitel { display: flex; gap: .5rem; align-items: center; }
/* KÖZVETLEN gyermek: a beviteli sor szövegmezője nyúljon ki. Enélkül a
   szabály minden lejjebb lévő mezőre is ráillik — a felelős-választó
   jelölőnégyzetét például 130 képpont szélesre nyújtotta, és elszakította
   a feliratától. */
.bevitel > input { flex: 1; }
.kamera {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.modul { display: flex; gap: .6rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid var(--keret); }
.modul:last-child { border-bottom: none; }
.modul .nev { font-weight: 500; }

footer {
  display: flex;
  justify-content: space-between;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem;
  font-size: .8rem;
  color: var(--halvany);
}

/* Belépő és meghívó oldal: keskeny, középre zárt. */
.szuk { max-width: 24rem; margin: 2rem auto; }

/* ------------------------------------------------ feladatok és listák */

.szurosav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1rem 0 .5rem;
}
.szurosav a {
  padding: .35rem .8rem;
  border: 1px solid var(--keret);
  border-radius: 999px;
  text-decoration: none;
  color: var(--szoveg);
  font-size: .9rem;
  background: var(--lap);
}
.szurosav a.aktiv { background: var(--fo); color: var(--kiemelt-szoveg); border-color: var(--fo); }

.feladatsor, .tetelsor, .listasor {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--keret);
}
.feladatsor:last-child, .tetelsor:last-child, .listasor:last-child { border-bottom: none; }
.feladatszoveg, .tetelszoveg { flex: 1; min-width: 0; }
.feladatszoveg a { color: var(--szoveg); text-decoration: none; font-weight: 500; }
.feladatszoveg a:hover { text-decoration: underline; }

.pipaforma { flex: 0 0 auto; margin: 0; }

/* A pipa nagy célfelület: a boltban egy kézzel, mozgás közben kell eltalálni. */
.pipagomb {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--fo);
  background: transparent;
  border: 1px solid var(--keret);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.pipagomb.kesz { color: var(--halvany); }

.tetelsor.kesz .nev { text-decoration: line-through; color: var(--halvany); }
.tetelsor.varakozik { opacity: .6; }

.listasor { align-items: center; justify-content: space-between; }
.halado {
  flex: 0 0 6rem;
  height: .4rem;
  background: var(--keret);
  border-radius: 999px;
  overflow: hidden;
}
.halado span { display: block; height: 100%; background: var(--fo); }

.lejart { color: var(--hiba); font-weight: 500; }

.csempek { display: flex; gap: .6rem; margin: 1rem 0; }
.csempe {
  flex: 1;
  display: block;
  padding: .8rem;
  text-align: center;
  text-decoration: none;
  color: var(--szoveg);
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
}
.csempe .szam { display: block; font-size: 1.6rem; font-weight: 600; color: var(--fo); }
.csempe .cimke2 { display: block; font-size: .8rem; color: var(--halvany); }

.gombsor { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.gombsor form { margin: 0; }

/* „Mit kell vinni": pipálható tételek egy alkalom alatt. Sorba tördelve,
   hogy telefonon se lógjon ki. */
.viendo { display: flex; flex-wrap: wrap; gap: .15rem .7rem; align-items: baseline;
          margin-top: .35rem; }
.viendotetel { margin: 0; }
.viendotetel button { padding: .2rem 0; font-size: .92rem; text-decoration: none; }
.viendotetel button.kesz { color: var(--ok); text-decoration: line-through; }

fieldset.ismetlodes {
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  margin: 1rem 0 0;
  padding: .5rem .8rem 1rem;
}
fieldset.ismetlodes legend { color: var(--halvany); padding: 0 .3rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--fo-vilagos);
  padding: .05rem .3rem;
  border-radius: 4px;
}

/* Autó-állapotok: a szín is mondja, mennyire sürgős. */
.cimke.figyelem {
  background: #fdf3e3;
  color: #8a5a12;
  border-color: #d9a441;
}
.cimke.veszely {
  background: var(--hiba-vilagos);
  color: var(--hiba);
  border-color: var(--hiba);
}
@media (prefers-color-scheme: dark) {
  .cimke.figyelem { background: #2b2418; color: #e0b567; border-color: #6b5426; }
}

.autofej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

/* Jóváhagyó kártya: a fotó és a kiolvasott érték egymás mellett. */
.kartya { display: flex; gap: 1rem; flex-wrap: wrap; }
.kartyakep { flex: 0 0 10rem; }
.kartyakep img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--keret);
  display: block;
}
.kartyaszoveg { flex: 1; min-width: 14rem; }
.kartyaszoveg form { margin: 0; }

/* A kamera-gomb űrlapja ne törje meg a beviteli sort. */
#kepurlap { flex: 0 0 auto; margin: 0; }

/* Gyerekek menetrendje: idő balra, tartalom jobbra. */
.alkalom {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .6rem 0;
  border-bottom: 1px solid var(--keret);
}
.alkalom:last-child { border-bottom: none; }
.alkalomido {
  flex: 0 0 5rem;
  text-align: right;
  line-height: 1.25;
}
.alkalomido .nap { font-size: .8rem; color: var(--halvany); }
.alkalomido .ora { font-weight: 600; }
.alkalomszoveg { flex: 1; min-width: 0; }
.alkalomszoveg .nev { font-weight: 500; }
.alkalom.elmarad .alkalomszoveg .nev { text-decoration: line-through; color: var(--halvany); }
.alkalomkivetel { flex: 0 0 auto; }
.alkalomkivetel form { margin: .4rem 0 0; }

.hetnap { padding: .3rem 0 .6rem; }
.hetnap h3 { margin: .6rem 0 .2rem; }
.hetnap.mai h3 { color: var(--fo); }

/* ------------------------------------------------ nyugták és költések */

/* A nyugta egy sora két hullámban: mit vettünk, majd mennyiért. Így
   telefonon is olvasható marad, mert a mezők egymás alá csúsznak. */
.nyugtatetel {
  padding: .7rem 0;
  border-bottom: 1px solid var(--keret);
}
.nyugtatetel:last-of-type { border-bottom: none; }
.nyugtatetel label { margin: .35rem 0 .15rem; }

.nagyosszeg { font-size: 1.8rem; font-weight: 600; margin: .2rem 0; }

.katsor { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.katnev { flex: 0 0 8rem; }
.katosszeg { flex: 0 0 auto; margin-left: auto; text-align: right; }
.halado.szeles { flex: 1 1 auto; }

.tanacs { margin: .4rem 0; }
.olcsobb { color: var(--ok); }
.dragabb { color: var(--hiba); }

/* --------------------------------------------------------------- kamra */

/* A kamra sora: név balra, jelzés középen, a három állapotgomb jobbra.
   Telefonon a gombok a név alá csúsznak, de egymás mellett maradnak —
   a lényeg, hogy egy koppintással el lehessen érni őket. */
.kamrasor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--keret);
}
.kamrasor:last-child { border-bottom: none; }
.kamranev { flex: 1 1 12rem; min-width: 0; }
.kamranev a { color: var(--szoveg); text-decoration: none; font-weight: 500; }
.kamranev a:hover { text-decoration: underline; }
.kamrajelzes { flex: 0 0 auto; }
.kamrasor.hianyzik .kamranev a { color: var(--hiba); }

.kamragombok { display: flex; gap: .3rem; flex: 0 0 auto; }
.kamragombok form { margin: 0; }
.allapotgomb {
  padding: .3rem .7rem;
  font-size: .85rem;
  background: transparent;
  color: var(--szoveg);
  border: 1px solid var(--keret);
}
.allapotgomb.aktiv { background: var(--fo); color: var(--kiemelt-szoveg); border-color: var(--fo); }

/* --------------------------------------------------- osztályközösség */

.hirsor {
  display: flex;
  gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--keret);
}
.hirsor:last-child { border-bottom: none; }
.hirszoveg { flex: 1; min-width: 0; }
.hirszoveg a { color: var(--szoveg); text-decoration: none; font-weight: 500; }
.hirszoveg a:hover { text-decoration: underline; }
.hirsor.olvasatlan .hirszoveg a { font-weight: 600; }

/* A közlemény törzse sortöréssel jelenik meg: a kiíró úgy tagolja, ahogy
   beírta, és nem kell hozzá szerkesztő. */
.hirtorzs { white-space: pre-wrap; }

/* Tagdíj: tagonként összecsukható sor. Az összefoglaló mindig látszik,
   a szerkesztés egy koppintásra nyílik — huszonöt szülőnél a kibontott
   űrlapok egymás alatt használhatatlanná tennék az oldalt. */
.tagsor {
  padding: .5rem 0;
  border-bottom: 1px solid var(--keret);
}
.tagsor:last-child { border-bottom: none; }
.tagsor > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
}
.tagsor > summary::-webkit-details-marker { display: none; }
.tagsor > summary::before { content: "▸"; color: var(--halvany); }
.tagsor[open] > summary::before { content: "▾"; }
.tagnev { font-weight: 500; }
.tagosszeg { margin-left: auto; }

/* ------------------------------------------------------------ telefon */

/* Keskeny képernyőn a menü három sorba tördelődik, és a képernyő
   harmadát elveszi minden oldalon. Nem rejtjük el — minden pont maradjon
   egy koppintásra —, csak szorosabbra vesszük. */
@media (max-width: 480px) {
  .menu {
    gap: .1rem .6rem;
    padding: .35rem .8rem;
    font-size: .95rem;
  }
  .menu a { padding: .2rem 0; }
  .fejlec { padding: .6rem .8rem; }
  main { padding: .8rem .8rem 3rem; }
  h1 { font-size: 1.2rem; }

  /* A csempék két oszlopban jobban olvashatók, mint négy keskenyben. */
  .csempek { flex-wrap: wrap; }
  .csempe { flex: 1 1 40%; }
}

/* Összecsukható szűrő. A nyitó sor mindig látszik, a mezők csak akkor,
   ha kellenek — így a lista kerül előre, nem az űrlap. */
.szuro > summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.szuro > summary::-webkit-details-marker { display: none; }
.szuro > summary::before { content: "▸ "; color: var(--halvany); }
.szuro[open] > summary::before { content: "▾ "; }

/* A teszt-példány belépő listája: névre koppintva lép be, gépelés
   nélkül. Telefonon a sorok elég magasak legyenek az ujjhoz. */
.belephetok {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}

.belephetok li {
  border-top: 1px solid var(--keret);
  padding: .55rem .2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  align-items: baseline;
}

.belephetok li:first-child { border-top: 0; }
.belephetok a { font-weight: 600; }

/* Az óra-hossz szerinti bontás a havi elszámolásnál. Ez az, amit az
   oktatóval össze kell vetni, ezért a szám jobbra igazítva áll. */
.hosszbontas {
  list-style: none;
  margin: .4rem 0;
  padding: 0;
}

.hosszbontas li {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  align-items: baseline;
  padding: .3rem 0;
  border-bottom: 1px solid var(--keret);
}

.hosszbontas li:last-child { border-bottom: 0; }

/* A bejelölő gombon a hossz mellett az ár is ott van. Halványabban, hogy
   a gomb feliratát ne nyomja el. */
.gombar {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  opacity: .8;
}

/* A gyors bevitel felelős-választója: a beviteli sor ALATT, apró
   betűvel — nem önálló képernyőelem, hanem a bevitel tartozéka.

   A választó megjelenítését a jelölőnégyzet állapota vezérli,
   JavaScript nélkül. Ehhez kell, hogy a négyzet a választó TESTVÉRE
   legyen (`~`), ezért nem a címke belsejében áll, ahogy máshol
   szoktuk — a címkét a `for` köti hozzá. */
/* A kamera-gomb a beviteli SORHOZ igazodjon, ne a mellette álló űrlap
   közepéhez: az űrlap a felelős-választóval magasabb lett, és középre
   igazítva a gomb lecsúszna a jelölőnégyzet mellé. */
.bevitelsor { align-items: flex-start; }

.gyorsurlap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.gyorsfelelos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
}

/* A négyzet a saját méretét tartsa. A fajsúly szándékosan magasabb a
   `.bevitel > input`-nál: ez a mező a beviteli sor ALATT áll, és nem
   szabad, hogy bármelyik sor-szabály kinyújtsa. */
.gyorsfelelos > .gyorsjelolo { margin: 0; flex: 0 0 auto; width: auto; }

.gyorscimke {
  display: inline;
  margin: 0;
  font-weight: 400;
  font-size: .875rem;
  color: var(--halvany);
  cursor: pointer;
}

.gyorsvalaszto {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1 1 11rem;
}

.gyorsvalaszto label {
  display: inline;
  margin: 0;
  font-weight: 400;
  font-size: .875rem;
  color: var(--halvany);
  flex: 0 0 auto;
}

.gyorsvalaszto select { flex: 1 1 auto; }

/* Bejelölve nincs kit választani: a teendő a felvevőé. */
.gyorsjelolo:checked ~ .gyorsvalaszto { display: none; }