/* Marjai költségvetés — felület
 *
 * Alaphelyzet: valaki a boltban vagy a piacon áll, egy kézzel fogja a telefont, és
 * négy másodperce van. Ebből következik minden: napfényben olvasható világos alap,
 * nagy tabuláris számok, a műveletek a hüvelykujj zónájában, semmi dísz.
 *
 * A zsebek jelzőszínei a forintbankjegyekből jönnek — 10 000-es kék, 20 000-es
 * szürke-lila, 5000-es zöld. Nem dekoráció: a szín végig ugyanazt a zsebet jelenti.
 *
 * Nincs webfont: a rendszerbetű azonnal ott van, offline is. A karaktert a méret,
 * a vastagság és a betűköz adja, nem egy letöltött fájl.
 */

:root {
  --alap:      #fbfaf7;
  --lap:       #ffffff;
  --tinta:     #15181d;
  --halvany:   #6b7078;
  --vonal:     #e6e2da;
  --vonal-eros: #d5cfc2;

  --joint:     #2c5f8a;
  --luxury:    #6b5b7b;
  --savings:   #286b5d;
  --piros:     #a8442f;
  --zold:      #2f6d3f;

  --sugar:     .85rem;
  --tap:       3rem;          /* 48px — a legkisebb megérinthető méret */
}

@media (prefers-color-scheme: dark) {
  :root {
    --alap: #131519; --lap: #1c1f25; --tinta: #e9e7e1; --halvany: #9298a1;
    --vonal: #2b2f36; --vonal-eros: #3a3f48;
    --joint: #6fa3ce; --luxury: #ab98bd; --savings: #63b39c;
    --piros: #e2836c; --zold: #7fbb8c;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--alap);
  color: var(--tinta);
  font: 1rem/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

.lap { max-width: 30rem; margin: 0 auto; padding: .75rem 1rem 1.5rem; }

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

.fejlec {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .35rem 0 1rem;
}
.fejlec .datum { font-size: .8rem; color: var(--halvany); }
.fejlec .ki {
  font-size: .8rem; color: var(--halvany);
  background: none; border: 0; padding: .25rem; cursor: pointer;
  font-family: inherit;
}

/* --------------------------------------------------------------- zsebkártya */

.zseb {
  display: block; text-decoration: none; color: inherit;
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .85rem 1rem .9rem;
  margin-bottom: .6rem;
}
.zseb .fej { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.zseb .nev {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--halvany);
}
.zseb .ertek {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1;
}
.zseb[data-zseb="joint"]   .nev { color: var(--joint); }
.zseb[data-zseb="luxury"]  .nev { color: var(--luxury); }
.zseb[data-zseb="savings"] .nev { color: var(--savings); }

/* Hol van fizikailag a pénz — a zseb és a számla egymásra merőleges. */
.hol { display: flex; gap: 2px; margin-top: .6rem; height: 4px; }
.hol i { display: block; border-radius: 2px; background: var(--vonal-eros); }
.hol i[data-szamla="kp"]         { background: var(--joint); }
.hol i[data-szamla="revolut"]    { background: var(--luxury); }
.hol i[data-szamla="szepkartya"] { background: var(--savings); }
.hol-cimke {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: .4rem; font-size: .72rem; color: var(--halvany);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------- tartalék: hónapnyi működés ---
 * Ez a felület egyetlen hangsúlyos eleme. Nem százalékot mutat, hanem azt, hogy
 * hány hónapig bírnátok ki bevétel nélkül — ez az az egység, amiben gondolkodtok.
 * Egy szegmens = egy hónapnyi közös működés.
 */

.tartalek {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .9rem 1rem 1rem; margin: 1rem 0 .6rem;
}
.tartalek .cim {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--savings); margin-bottom: .7rem;
}
.honapok { display: flex; gap: 4px; }
.honapok .ho {
  flex: 1; height: 2.25rem; border-radius: 4px;
  background: var(--vonal); position: relative; overflow: hidden;
}
.honapok .ho > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: var(--savings);
}
.honapok .ho > span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .68rem; font-weight: 600; color: var(--halvany);
  font-variant-numeric: tabular-nums;
}
.honapok .ho.tele > span { color: var(--lap); }
.tartalek .lab {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .6rem; font-size: .8rem; color: var(--halvany);
  font-variant-numeric: tabular-nums;
}
.tartalek .lab b { color: var(--tinta); font-weight: 600; }

/* ------------------------------------------------------------------- sávok */

.sav {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .75rem 1rem;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .6rem; font-size: .85rem;
}
.sav .cimke { color: var(--halvany); }
.sav .szam { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--halvany); font-weight: 600; margin: 1.6rem 0 .6rem;
}

/* ----------------------------------------------------------------- tételek */

.tetel {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .6rem 0; border-bottom: 1px solid var(--vonal);
}
.tetel .fo { flex: 1; min-width: 0; }
.tetel .cim { font-size: .92rem; }
.tetel .alsor {
  font-size: .74rem; color: var(--halvany);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tetel .osszeg {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
.tetel .osszeg[data-irany="KI"] { color: var(--piros); }
.tetel .osszeg[data-irany="BE"] { color: var(--zold); }

.vissza-gomb {
  background: none; border: 0; color: var(--halvany);
  font-family: inherit; font-size: .78rem; cursor: pointer;
  min-height: 2.75rem; padding: 0 .35rem;
}

/* ------------------------------------------------------- alsó műveletsáv --
 * Három közvetlen gomb, nem egy menüt nyitó lebegő gomb: a rögzítés így egy
 * koppintással indul, nem kettővel.
 */

.muveletek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: .5rem;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--alap) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--vonal);
}
.muveletek a {
  flex: 1; min-height: var(--tap);
  display: grid; place-items: center; text-align: center;
  border-radius: .7rem; text-decoration: none;
  font-size: .85rem; font-weight: 600; line-height: 1.15;
  border: 1px solid var(--vonal-eros); color: var(--tinta); background: var(--lap);
}
.muveletek a.elsodleges { background: var(--tinta); color: var(--alap); border-color: var(--tinta); }

/* ---------------------------------------------------------- rögzítő képernyő */

.felso {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 0 .5rem; min-height: var(--tap);
}
.felso a, .felso button {
  min-width: var(--tap); min-height: var(--tap);
  display: grid; place-items: center;
  background: none; border: 0; color: var(--tinta);
  font-size: 1.35rem; text-decoration: none; cursor: pointer; font-family: inherit;
}
.felso h1 { font-size: 1rem; font-weight: 600; margin: 0; }

.kijelzo { text-align: center; padding: 1.5rem 0 .35rem; }
.kijelzo .osszeg {
  font-size: 3rem; font-weight: 700; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.kijelzo .osszeg.ures { color: var(--vonal-eros); }

/* A zseb/számla egyetlen, megérinthető sorban — általában nem kell hozzányúlni. */
.beallitas-sor {
  display: block; width: 100%; min-height: var(--tap);
  background: none; border: 0; color: var(--halvany);
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .35rem; text-align: center;
}
.beallitas-sor u { text-decoration-color: var(--vonal-eros); text-underline-offset: 3px; }

.valaszto { display: none; margin: .25rem 0 .5rem; }
.valaszto.nyitva { display: block; }
.valaszto fieldset { border: 0; margin: 0 0 .5rem; padding: 0; }
.valaszto legend {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--halvany); font-weight: 600; padding: 0 0 .35rem;
}

.chipek { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block; min-height: var(--tap); padding: .7rem .9rem;
  border: 1px solid var(--vonal-eros); border-radius: .7rem;
  background: var(--lap); font-size: .9rem; cursor: pointer;
}
.chip input:checked + span {
  background: var(--tinta); color: var(--alap); border-color: var(--tinta); font-weight: 600;
}
.chip input:focus-visible + span { outline: 2px solid var(--joint); outline-offset: 2px; }

/* numpad */
.numpad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: 1rem 0 .75rem;
}
.numpad button {
  min-height: 3.5rem; font-size: 1.5rem; font-weight: 500;
  font-variant-numeric: tabular-nums; font-family: inherit;
  background: var(--lap); color: var(--tinta);
  border: 1px solid var(--vonal); border-radius: .7rem; cursor: pointer;
}
.numpad button:active { background: var(--vonal); }
.numpad button.mellek { font-size: 1.05rem; color: var(--halvany); }

.gomb {
  display: block; width: 100%; min-height: 3.25rem;
  background: var(--tinta); color: var(--alap);
  border: 0; border-radius: .7rem;
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.gomb[disabled] { opacity: .4; cursor: not-allowed; }
.gomb.masodlagos {
  background: var(--lap); color: var(--tinta); border: 1px solid var(--vonal-eros);
}

.mezo { margin: .75rem 0; }
.mezo label {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--halvany); font-weight: 600; margin-bottom: .3rem;
}
.mezo input, .mezo select {
  width: 100%; min-height: var(--tap); padding: .6rem .75rem;
  background: var(--lap); color: var(--tinta);
  border: 1px solid var(--vonal-eros); border-radius: .6rem;
  font: inherit; font-size: 1rem;
}
.parban { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* ------------------------------------------------------------- visszajelzés */

.uzenet {
  padding: .7rem .9rem; border-radius: .6rem; margin-bottom: .75rem;
  font-size: .88rem; border: 1px solid;
}
.uzenet.siker { border-color: var(--zold); color: var(--zold); }
.uzenet.hiba  { border-color: var(--piros); color: var(--piros); }

.ures-allapot {
  text-align: center; color: var(--halvany); font-size: .88rem;
  padding: 2rem 1rem; border: 1px dashed var(--vonal-eros); border-radius: var(--sugar);
}

.offline {
  display: none; background: var(--piros); color: #fff;
  text-align: center; font-size: .8rem; padding: .35rem;
}
body.nincs-halo .offline { display: block; }

/* --------------------------------------------------------------- belépés */

.belepteto { max-width: 22rem; margin: 0 auto; padding: 4rem 1.5rem; text-align: center; }
.belepteto h1 { font-size: 1.35rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.belepteto p { color: var(--halvany); font-size: .9rem; margin: 0 0 2rem; }
.belepteto .gomb { margin-bottom: 1rem; }
.belepteto .apro { font-size: .78rem; color: var(--halvany); }

:focus-visible { outline: 2px solid var(--joint); outline-offset: 2px; }

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

/* ------------------------------------------------- Revolut-kivonat import --
 * Havi feladat, jellemzően nagyobb képernyőn. A sorok tömörek: a döntés a pipa,
 * a kategória csak akkor kell, ha a javaslat nem stimmel.
 */

.import-sor {
  border: 1px solid var(--vonal); border-radius: .6rem;
  padding: .6rem .75rem; margin-bottom: .4rem; background: var(--lap);
}
.import-sor.gyanus { border-color: var(--piros); }
.import-pipa {
  display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
  min-height: 2.5rem;
}
.import-pipa input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem; }
.import-fo { flex: 1; min-width: 0; }
.import-fo b { font-weight: 500; font-size: .92rem; }
.import-fo .alsor {
  display: block; font-size: .74rem; color: var(--halvany);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.import-mezok { display: flex; gap: .4rem; margin-top: .4rem; }
.import-mezok select {
  flex: 1; min-width: 0; min-height: 2.5rem; padding: .3rem .5rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal); border-radius: .45rem;
  font: inherit; font-size: .82rem;
}
.import-mezok select.nincs-javaslat { border-color: var(--piros); }