/* =====================================================================
   Maxion Hibajegy — felület
   =====================================================================

   MIÉRT VÁLTOZOTT MEG A KÜLSEJE

   Két arculat élt egymás mellett. A weboldal (maxion-kontroll,
   v12-es csomag) sötétkék–türkiz, Manrope betűvel és jelképpel; a
   programok viszont fekete–neonzöldek voltak, Bahnschrift betűvel,
   jelkép nélkül. Az ügyfél a weboldalon látta, milyen lesz a
   rendszer, aztán belépett, és mást kapott.

   Ez a fájl a WEBOLDAL arculatát viszi tovább. A színek nem
   emlékezetből vannak: a v12 csomag `forraskod/app/globals.css`
   fájljából, és az élő oldalon visszamérve is ezek jöttek ki.

   AZ ELV: VILÁGOS LAP, SÖTÉTKÉK SZIGETEK, TÜRKIZ CSAK SÖTÉTEN

   A régi szabály jó volt, csak a színek voltak mások. A türkiz
   fehéren olvashatatlan (kontraszt 1,7:1), ezért világos háttéren
   mindenhol a `--kek` megy helyette. A sötét szigetek: a fejléc, az
   elsődleges gomb és a kiadott hibajegyszám doboza.

   AMI NEM VÁLTOZOTT: az osztálynevek. A sablonokban Jinja-kód van,
   a HTML-hez nem nyúltam.
   ===================================================================== */


/* --- A betű: fájlból, nem hálózatról ---------------------------------

   A rendszernek zárt hálózaton, internet nélkül is működnie kell,
   ezért nincs Google Fonts és nincs CDN. A két woff2 a projekt része
   (`app/static/betuk/`), és a weboldal csomagjából származik, tehát
   betűre ugyanaz a Manrope.

   Csak a latin és a latin-ext változat kell: a magyar hosszú ő és ű a
   latin-ext tartományban van. A cirill, görög és vietnami darabok
   feleslegesek lennének. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/betuk/manrope-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/betuk/manrope-latin.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;
}


:root {
  /* --- Világos alap --- */
  --papir:        #F4F7F7;
  --lap:          #FFFFFF;
  --papir2:       #EDF4F4;   /* --light a weboldalon */
  --keret:        #DCE6E7;   /* --line */
  --keret-elo:    #BDD0DC;
  --szoveg:       #102333;   /* --ink */
  --halvany:      #60717E;   /* --muted */

  /* --- Sötétkék szigetek: fejléc, gomb, kiemelt panel --- */
  --sotet:        #0B1C2B;   /* --navy */
  --sotet2:       #102A3D;   /* --navy2 */
  --sotet-vonal:  #1E3A50;
  --sotet-szoveg: #E8F1F4;
  --sotet-halk:   #9BB3C2;

  /* A gomb SAJAT tokent kap, nem a fejlec szinet hasznalja.
     Sotet modban a lap maga is sotetkek, ott a sotetkek gomb szinte
     eltunt volna a hatterben - ezt az elonezeten lattam meg. */
  --gomb-hatter:  #0B1C2B;
  --gomb-szoveg:  #E8F1F4;
  --gomb-hatter2: #102A3D;   /* egerrel folotte */

  --turkiz:       #44D5C5;   /* CSAK sötét háttéren */
  --kek:          #176B87;   /* világos háttéren minden kiemelés */
  --kek-hatter:   #E4EFF3;

  /* --- Jelzőszínek ---

     A weboldal jelzőszínei világos háttéren SZÖVEGKÉNT halványak
     (a zöld 2,6:1, az arany 2,1:1). A pötty és a keret viszi a
     márkaszínt, a szöveg egy sötétebb változatot kap – így a
     jelentés is megvan, és olvasható is marad. */
  --zold:         #2EA77D;
  --zold-szoveg:  #16694B;
  --zold-hatter:  #E3F3EC;

  --piros:        #D64B42;
  --piros-szoveg: #A8352D;
  --piros-hatter: #FBEBEA;

  --arany:        #D7A84A;
  --arany-szoveg: #7A5A12;
  --arany-hatter: #FAF2E1;

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --torzs:   "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono:    ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}


/* --- Sötét mód -------------------------------------------------------

   A weboldal maga sötétkék, tehát a sötét mód itt nem kitalált
   párhuzam: ugyanaz a navy lesz a lap alja, és a türkiz végre a saját
   közegében van – sötéten olvasható. */

@media (prefers-color-scheme: dark) {
  :root {
    --papir:        #08151F;
    --lap:          #0E2233;
    --papir2:       #143047;
    --keret:        #1E3A50;
    --keret-elo:    #2C5271;
    --szoveg:       #E8F1F4;
    --halvany:      #9BB3C2;

    --sotet:        #061019;
    --sotet2:       #0B1C2B;
    --sotet-vonal:  #1E3A50;
    --sotet-szoveg: #E8F1F4;
    --sotet-halk:   #9BB3C2;

    /* Sotet modban a gomb a turkiz, sotetkek felirattal: igy valik el
       a sotetkek laptol, es a turkiz a sajat kozegeben marad. */
    --gomb-hatter:  #44D5C5;
    --gomb-szoveg:  #061019;
    --gomb-hatter2: #6FE3D6;

    --kek:          #44D5C5;   /* sötéten a türkiz olvasható */
    --kek-hatter:   #10333F;

    --zold-szoveg:  #5FD3A6;
    --zold-hatter:  #0F2E24;
    --piros-szoveg: #F08A82;
    --piros-hatter: #2E1614;
    --arany-szoveg: #E2BE71;
    --arany-hatter: #2C2413;
  }
}


* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--torzs);
  font-size: 16px;
  line-height: 1.6;
  color: var(--szoveg);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
}


/* --- Fejléc ---------------------------------------------------------- */

header.fejlec {
  background: var(--sotet);
  color: var(--sotet-szoveg);
  padding: .7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
  border-bottom: 1px solid var(--sotet-vonal);
}

header.fejlec .marka {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sotet-szoveg);
  text-decoration: none;
}

/* A JELKÉP CSAK CSS-BŐL.
   A weboldalon levágott sarkú négyzet áll türkiz kerettel, benne „M".
   A HTML-hez nem nyúlhatok, ezért ugyanez itt ::before elemként
   készül el – a márkanév szövege változatlan marad. */
header.fejlec .marka::before {
  content: "M";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--turkiz);
  color: var(--turkiz);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: 0;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
}

header.fejlec .marka span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--sotet-halk);
}

/* A bérlői oldalak fejléce: nincs menü, a cég neve áll a helyén. */
header.fejlec .ceg-nev {
  flex: 1;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sotet-halk);
}

header.fejlec nav {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  flex: 1;
}

header.fejlec nav a {
  color: var(--sotet-halk);
  text-decoration: none;
  padding: .4rem .7rem;
  font-size: .92rem;
  border-bottom: 2px solid transparent;
}

header.fejlec nav a:hover { color: var(--sotet-szoveg); }

header.fejlec nav a.aktiv {
  color: var(--turkiz);
  border-bottom-color: var(--turkiz);
}

/* A besorolásra váró ügyek száma a menüben (2026-10-01). */
header.fejlec nav a .szamlalo {
  display: inline-block;
  min-width: 1.3em;
  padding: 0 .35em;
  margin-left: .25em;
  border-radius: 999px;
  background: var(--arany);
  color: #fff;
  font-size: .75rem;
  line-height: 1.3em;
  text-align: center;
}

header.fejlec .felhasznalo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--sotet-halk);
}

header.fejlec .felhasznalo em {
  display: block;
  font-style: normal;
  font-size: .72rem;
  color: var(--turkiz);
  letter-spacing: .04em;
}

header.fejlec .felhasznalo form { margin: 0; }

/* A képviselet csíkja: a rendszergazda egy cég nevében dolgozik.
   Arany, hogy ne lehessen nem észrevenni – ez nem a hétköznapi állapot. */
.kepviselet {
  background: var(--arany-hatter);
  color: var(--arany-szoveg);
  border-bottom: 2px solid var(--arany);
  padding: .55rem 2rem;
  font-size: .9rem;
}

header.fejlec .felhasznalo button,
header.fejlec .felhasznalo > a {
  background: transparent;
  color: var(--sotet-szoveg);
  border: 1px solid var(--sotet-vonal);
  border-radius: 3px;
  padding: .3rem .7rem;
  font-size: .8rem;
  font-family: var(--torzs);
  text-decoration: none;
  cursor: pointer;
}

header.fejlec .felhasznalo button:hover,
header.fejlec .felhasznalo > a:hover {
  border-color: var(--turkiz);
  color: var(--turkiz);
}


/* --- Tartalom -------------------------------------------------------- */

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -.005em;
  margin: 0 0 .8rem;
}

.lap {
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(11, 28, 43, .04);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.lap.keskeny { max-width: 30rem; }

.bevezeto {
  color: var(--halvany);
  margin: 0 0 1.1rem;
  font-size: .95rem;
}


/* --- Számkártyák ----------------------------------------------------- */

.szamok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.szamkartya {
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: 4px;
  padding: 1rem;
}

.szamkartya .ertek {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -.02em;
}

/* A `.cimke` osztály KÉT DOLGOT jelent a sablonokban: státuszcímkét
   (Új / Folyamatban / Lezárva) és számkártya-feliratot. A státuszcímke
   szabályai – `inline-flex`, `white-space: nowrap` és a színes pötty –
   átszivárogtak ide, ezért a hosszabb feliratok („EBBŐL NYITVA MARAD”)
   kilógtak a kártyából, rá a szomszédjára.

   Itt tehát vissza kell állítani mindhármat. A HTML-hez nem nyúlhatok,
   így a két jelentést csak a stílus tudja szétválasztani. */
.szamkartya .cimke {
  display: block;
  white-space: normal;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-family: var(--mono);
  color: var(--halvany);
  font-size: .68rem;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .3rem;
}

.szamkartya .cimke::before { content: none; }

/* A figyelmet igénylő kártya sötétkék sziget, türkiz számmal – ez az
   egyetlen hely a listaoldalon, ahol a türkiz megjelenhet. */
.szamkartya.figyelem {
  background: var(--sotet);
  border-color: var(--sotet);
}

.szamkartya.figyelem .ertek { color: var(--turkiz); }
.szamkartya.figyelem .cimke { color: var(--sotet-halk); }


/* --- Szűrősáv a lista és a riport fölött ------------------------------

   A szűrő űrlap, de nem adatbeviteli oldal: a mezői egy sorban állnak,
   és a gomb mellettük marad, nem alattuk. */

.szuro {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

.szuro .mezo { margin-bottom: 0; flex: 1 1 11rem; }
.szuro .gombsor { flex: none; }


/* --- Csatolmányok: fényképek a jegyen --------------------------------

   A bejelentők nagy része telefonról fényképet küld. A bélyegkép
   önmagában többet mond, mint a fájlnév – de a nevet is kiírjuk, mert
   a képen gyakran nem látszik, melyik helyiségről van szó. */

.csatolmanyok {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .9rem;
  margin-bottom: 1.25rem;
}

.csatolmany {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--keret);
  border-radius: 4px;
  overflow: hidden;
  background: var(--lap);
}

.csatolmany:hover { border-color: var(--kek); }

.csatolmany img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  background: var(--papir2);
}

/* Ami nem kép: egyszerű jelölés a bélyegkép helyén. */
.csatolmany .fajl-jel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  background: var(--papir2);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--halvany);
}

.csatolmany-nev {
  display: block;
  padding: .5rem .6rem 0;
  font-size: .85rem;
  word-break: break-word;
}

.csatolmany .halk {
  display: block;
  padding: .15rem .6rem .55rem;
  font-size: .75rem;
}


/* --- A köszönőoldal panelje ------------------------------------------

   A bejelentő itt ér a folyamat végére. Középre igazítva, mert egyetlen
   dolog számít rajta: a hibajegyszám. A RÉGI stílusban ez az osztály
   semmit nem csinált. */

.lap.kesz { text-align: center; max-width: 34rem; margin-inline: auto; }
.lap.kesz .gombsor { justify-content: center; }
.lap.kesz dl.adatok { text-align: left; }


/* --- Táblázat -------------------------------------------------------- */

.tabla-gorgo {
  overflow-x: auto;
  border: 1px solid var(--keret);
  border-radius: 4px;
  background: var(--lap);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

th, td {
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--keret);
  vertical-align: top;
}

th {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--halvany);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--papir2);
  white-space: nowrap;
}

tr:last-child td { border-bottom: none; }

td.szam, th.szam { text-align: right; }

td.szam, td.azonosito, th.szam {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

td.azonosito { white-space: nowrap; font-weight: 500; }

td.azonosito a {
  color: var(--kek);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

td.azonosito a:hover { border-bottom-color: var(--kek); }

.halk { color: var(--halvany); font-size: .85rem; }

/* Alaprajzok (2026-09-26): a bejelentő űrlapon a szintek linkjei, a választott
   helyiség szintje kiemelve; az Ingatlanok oldalon ingatlanonként nyitható. */
.alaprajz-linkek { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline; margin: .4rem 0 0; }
.alaprajz-linkek a.kiemelt { font-weight: 700; border-bottom: 2px solid var(--kek); }
.alaprajz-ingatlan { border-top: 1px solid var(--keret); padding: .6rem 0; }
.alaprajz-ingatlan summary { cursor: pointer; }
.alaprajz-sor { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin-bottom: .3rem; }


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

   A státuszt NEM csak a szín jelöli: minden címkében ott a felirat is,
   és a pötty a keretszínt ismétli. Így nyomtatásban és színtévesztő
   szemmel is olvasható marad. */

.cimke {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cimke::before {
  content: "";
  width: .46rem;
  height: .46rem;
  flex: none;
  border-radius: 50%;
}

.cimke.szurke {
  background: var(--papir2);
  color: var(--halvany);
  border-color: var(--keret);
}
.cimke.szurke::before { background: var(--halvany); }

/* Új */
.cimke.kek {
  background: var(--kek-hatter);
  color: var(--kek);
  border-color: var(--kek);
}
.cimke.kek::before { background: var(--kek); }

/* Lezárva */
.cimke.zold {
  background: var(--zold-hatter);
  color: var(--zold-szoveg);
  border-color: var(--zold);
}
.cimke.zold::before { background: var(--zold); }

/* Folyamatban */
.cimke.sarga {
  background: var(--arany-hatter);
  color: var(--arany-szoveg);
  border-color: var(--arany);
}
.cimke.sarga::before { background: var(--arany); }

/* Alkatrészre/alvállalkozóra vár */
.cimke.narancs {
  background: #FBEFE3;
  color: #8A4B12;
  border-color: #E08A3C;
}
.cimke.narancs::before { background: #E08A3C; }

.cimke.piros {
  background: var(--piros-hatter);
  color: var(--piros-szoveg);
  border-color: var(--piros);
}
.cimke.piros::before { background: var(--piros); }

/* Bejelentő válaszára vár (2026-10-02) */
.cimke.lila {
  background: #F1ECFA;
  color: #5B3E96;
  border-color: #8B6CC9;
}
.cimke.lila::before { background: #8B6CC9; }

/* Ellenőrzés alatt (2026-10-02) – a türkiz csak sötét háttéren olvasható, ezért kék szöveg */
.cimke.turkiz {
  background: #E4F7F4;
  color: var(--kek);
  border-color: var(--turkiz);
}
.cimke.turkiz::before { background: var(--turkiz); }

/* Lejárt határidő a listában */
.lejart { color: var(--piros-szoveg); font-weight: 600; }


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

label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--halvany);
  margin-bottom: .3rem;
}

input, select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--keret-elo);
  border-radius: 3px;
  font-family: var(--torzs);
  font-size: 1rem;
  background: var(--lap);
  color: var(--szoveg);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--kek);
  outline-offset: 1px;
  border-color: var(--kek);
}

input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }

textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }

.mezo { margin-bottom: 1.1rem; }

.mezo .sugo {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  color: var(--halvany);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--torzs);
}

.mezosor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

.jelszo-mezo { position: relative; }

/* Hely a gombnak, hogy ne takarja a beírt jelszót. */
.jelszo-mezo input { padding-right: 5.2rem; }

.jelszo-mezo .felfedes {
  width: auto;
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  padding: .3rem .6rem;
  font-size: .78rem;
  background: transparent;
  color: var(--halvany);
  border: 1px solid var(--keret-elo);
  border-radius: 3px;
  cursor: pointer;
}

.jelszo-mezo .felfedes:hover {
  color: var(--kek);
  border-color: var(--kek);
  background: transparent;
}

label.jelolo {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-family: var(--torzs);
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--szoveg);
}

/* Levélszemét elleni csapda: SOHA nem látszódhat. */
.csapda {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* --- Gombok ---------------------------------------------------------- */

button, .gomb {
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 1px solid var(--gomb-hatter);
  border-radius: 3px;
  background: var(--gomb-hatter);
  color: var(--gomb-szoveg);
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
}

button:hover, .gomb:hover {
  background: var(--gomb-hatter2);
  border-color: var(--gomb-hatter2);
}

button:focus-visible, .gomb:focus-visible, a:focus-visible {
  outline: 2px solid var(--kek);
  outline-offset: 2px;
}

button.masodlagos, .gomb.masodlagos {
  background: transparent;
  color: var(--szoveg);
  border-color: var(--keret-elo);
}

button.masodlagos:hover, .gomb.masodlagos:hover {
  border-color: var(--kek);
  color: var(--kek);
  background: var(--kek-hatter);
}

/* A visszafordíthatatlan művelet gombja (cég végleges törlése): piros
   keret, kitöltés csak egérrel fölötte – ne legyen véletlen kattintás. */
button.veszelyes {
  background: transparent;
  color: var(--piros-szoveg);
  border-color: var(--piros);
}

button.veszelyes:hover {
  background: var(--piros);
  color: #fff;
}

form.torles { margin-top: .6rem; display: grid; gap: .35rem; }
form.torles input { max-width: 16rem; }

.gombsor {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}


/* --- Üzenetek -------------------------------------------------------- */

.uzenet {
  padding: .8rem 1rem;
  border-radius: 3px;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  font-size: .95rem;
}

.uzenet.hiba {
  background: var(--piros-hatter);
  color: var(--piros-szoveg);
  border-color: var(--piros);
}

.uzenet.siker {
  background: var(--zold-hatter);
  color: var(--zold-szoveg);
  border-color: var(--zold);
}

.uzenet.info {
  background: var(--arany-hatter);
  color: var(--arany-szoveg);
  border-color: var(--arany);
}

.uzenet code {
  font-family: var(--mono);
  background: rgba(11, 28, 43, .07);
  padding: .1rem .35rem;
  border-radius: 2px;
}


/* --- Nyilvános oldalak: belépés, bejelentés, köszönőoldal ------------- */

.belepes-doboz { max-width: 25rem; margin: 3.5rem auto; }
.urlap-doboz   { max-width: 620px; margin: 2.5rem auto; }

/* A központi bérlői regisztráció (2026-10-03): a találatok és a választott épület. */
.epulet-talalatok {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.epulet-talalatok li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .75rem 0;
  border-top: 1px solid var(--keret);
}
.epulet-talalatok .epulet-adat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.epulet-talalatok .epulet-adat span { color: var(--halvany); font-size: .92rem; }
.epulet-talalatok form { margin: 0; }
.valasztott-epulet {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem 1rem;
  margin-bottom: 1.2rem;
  border-left: 3px solid var(--kek);
  background: var(--kek-hatter);
  overflow-wrap: anywhere;
}

.urlap-doboz .marka, .belepes-doboz .marka {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--szoveg);
  text-decoration: none;
  margin-bottom: .35rem;
}

/* A jelkép a fejlécben van (2026-09-20) – a dobozban az oldal címe áll. */

.urlap-doboz .alcim, .belepes-doboz .alcim {
  text-align: center;
  font-family: var(--mono);
  color: var(--halvany);
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
}

.bejelento-sav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  background: var(--lap);
  border: 1px solid var(--keret);
  border-radius: 4px;
  padding: .6rem .9rem;
  margin-bottom: 1.25rem;
  font-size: .9rem;
}

.bejelento-sav form { margin-left: auto; }


/* --- A kiadott hibajegyszám ------------------------------------------

   Ez a legfontosabb elem az egész rendszerben: a bejelentő ezt a
   számot írja fel, mondja be telefonon, keresi vissza. Sötétkék
   sziget, türkiz számmal – ott, ahol a türkiz olvasható. */

.jegyszam-doboz {
  background: var(--sotet);
  border-radius: 4px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  margin: 1.5rem 0;
}

.jegyszam-doboz .cimke-kicsi {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sotet-halk);
  display: block;
  margin-bottom: .5rem;
}

.jegyszam-doboz .jegyszam {
  font-family: var(--mono);
  font-size: 1.9rem;
  letter-spacing: .06em;
  color: var(--turkiz);
  display: block;
  word-break: break-all;
}


/* --- Lista fölötti sáv ----------------------------------------------- */

.talalat {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--halvany);
}

.lapozo {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-top: 1.1rem;
}

.vissza { margin-bottom: 1rem; }

.vissza a {
  color: var(--halvany);
  text-decoration: none;
  font-size: .88rem;
}

.vissza a:hover { color: var(--kek); }

.ures {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--halvany);
}

.varakozok {
  background: var(--arany-hatter);
  border: 1px solid var(--arany);
  border-left-width: 3px;
  border-radius: 4px;
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
}

form.modulok { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }


/* --- A jegy oldala --------------------------------------------------- */

.jegyszam-cim {
  font-family: var(--mono);
  letter-spacing: .04em;
  text-transform: none;
  margin-right: .75rem;
}

.muvelet-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 1.25rem;
}

.soros { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.soros select { flex: 1; min-width: 10rem; }

dl.adatok {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: .4rem 1rem;
  margin: 0;
}

dl.adatok dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--halvany);
  padding-top: .15rem;
}

dl.adatok dd { margin: 0; }

/* A levél szövege úgy jelenjen meg, ahogy megérkezett: a sortörések
   sokszor maguk hordozzák a jelentést (felsorolás, aláírás). */
pre.szoveg {
  font-family: var(--torzs);
  font-size: .95rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  background: var(--papir2);
  border: 1px solid var(--keret);
  border-radius: 3px;
  padding: .8rem .9rem;
}

ol.szal { list-style: none; margin: 0; padding: 0; }

ol.szal li {
  border-left: 3px solid var(--keret-elo);
  padding: .5rem 0 .5rem .9rem;
  margin-bottom: 1.1rem;
}

ol.szal li.bejovo  { border-left-color: var(--kek); }
ol.szal li.kimeno  { border-left-color: var(--zold); }
ol.szal li.jegyzet { border-left-color: var(--arany); }
ol.szal li.esemeny { border-left-color: var(--halvany); }

.szal-fej {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: .35rem;
}

.szal-fej .irany {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--halvany);
}

.szal-targy { font-weight: 600; }

code, code.nagy {
  font-family: var(--mono);
  background: var(--papir2);
  padding: .1rem .35rem;
  border-radius: 2px;
  font-size: .9em;
}

code.nagy { font-size: 1.05rem; letter-spacing: .04em; }


/* --- Telefon ---------------------------------------------------------

   A bejelentők nagy része telefonról érkezik, gyakran állva, a
   folyosón. Ott a fejléc három sora kevesebb helyet hagy a lényegnek,
   ezért összébb húzzuk. */

@media (max-width: 640px) {
  header.fejlec {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }

  header.fejlec nav { gap: 0; }
  header.fejlec nav a { padding: .35rem .5rem; font-size: .88rem; }

  header.fejlec .felhasznalo {
    justify-content: space-between;
    border-top: 1px solid var(--sotet-vonal);
    padding-top: .5rem;
  }

  main { padding: 1rem .75rem 3rem; }
  .lap { padding: 1rem; }
  h1 { font-size: 1.4rem; }

  .jegyszam-doboz .jegyszam { font-size: 1.5rem; }

  /* TÁBLÁZATOK TELEFONON = KÁRTYÁK (2026-09-20, a tulajdonos döntése).

     A táblázat telefonon nem fér el, és a „húzd oldalra" megoldásnál a
     jobb oldali oszlopok (állapot, gombok) láthatatlanok maradtak. Most
     640 px alatt minden sor egy kártya: a cellák egymás alatt, mindegyik
     előtt a saját fejléc-címkéje (a sablonban `data-cimke`), a gombok a
     kártya alján, húzás nélkül. Ugyanez minden szerepkörnek: rendszer-
     gazda (Ügyfelek), cégadmin (jegyek, felhasználók, ingatlanok, napló,
     levelek, riport), bejelentő (saját jegyei). */
  .tabla-gorgo { overflow: visible; border: 0; background: transparent; }
  .tabla-gorgo table, .tabla-gorgo tbody, .tabla-gorgo tr, .tabla-gorgo td { display: block; width: auto; }
  .tabla-gorgo thead { display: none; }
  .tabla-gorgo tr {
    background: var(--lap);
    border: 1px solid var(--keret);
    border-radius: 4px;
    padding: .8rem .95rem;
    margin-bottom: .7rem;
  }
  .tabla-gorgo td {
    padding: .3rem 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .tabla-gorgo td[data-cimke]::before {
    content: attr(data-cimke);
    display: block;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--halvany);
    margin-bottom: .1rem;
  }
  .tabla-gorgo td:first-child { font-size: 1.05rem; font-weight: 700; padding-top: 0; }
  .tabla-gorgo td:first-child::before { font-weight: 400; }
  .tabla-gorgo td.muveletek { padding-top: .6rem; border-top: 1px solid var(--keret); margin-top: .3rem; }
  .tabla-gorgo td.muveletek form, .tabla-gorgo td.muveletek .gomb { margin: .25rem .25rem .25rem 0; display: inline-block; }
  .tabla-gorgo td.ures, .tabla-gorgo td[colspan] { text-align: left; }
  .tabla-gorgo td .halk { display: block; }

  /* Gombsor: a gombok ne lógjanak ki, törjenek új sorba. */
  .gombsor { flex-wrap: wrap; }
  .szuro .gombsor { flex: 1 1 100%; }
  .gombsor .gomb, .gombsor button { flex: 1 1 auto; text-align: center; }
}


/* --- Nyomtatás -------------------------------------------------------

   A jegy oldalát ki szokták nyomtatni és a papíralapú ügyirathoz
   csatolni. Ott a fejléc, a gombok és a görgetés csak zavarnak. */

@media print {
  header.fejlec, .nyomtatasban-rejtett, .gombsor, .lapozo,
  .jelszo-mezo .felfedes {
    display: none !important;
  }

  body { background: #fff; color: #000; font-size: 11pt; }

  .lap {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }

  /* A görgethető keret papíron levágná a táblázatot. */
  .tabla-gorgo { overflow: visible; border: none; }

  table { font-size: 10pt; }

  /* Többoldalas táblázatnál a fejléc minden oldalon megismétlődik,
     egy sor pedig nem törik ketté. */
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  h1, h2 { break-after: avoid; }

  /* A színes címkék nyomtatóban halványak lehetnek: a keret és a
     felirat viszi a jelentést. */
  .cimke {
    border: 1px solid #666 !important;
    background: none !important;
    color: #000 !important;
  }

  .cimke::before { display: none; }

  /* Nyomtatásban a fotók is menjenek, de kisebben. */
  .csatolmanyok { grid-template-columns: repeat(4, 1fr); }
  .csatolmany img, .csatolmany .fajl-jel { height: 90px; }

  /* A hibajegyszám papíron is a legfontosabb – de tinta nélkül. */
  .jegyszam-doboz {
    background: none;
    border: 2px solid #000;
  }

  .jegyszam-doboz .jegyszam { color: #000; }
  .jegyszam-doboz .cimke-kicsi { color: #333; }

  a { color: #000; text-decoration: underline; }
}

/* --- Kétlépcsős belépés (T24) ------------------------------------------- */
.qr { margin: 1rem 0; text-align: center; }
.qr svg { width: 280px; max-width: 100%; height: auto; background: #fff; padding: .5rem; border: 1px solid #e3e3e3; border-radius: 6px; }
code.titok { display: inline-block; margin-top: .25rem; font-size: 1.05rem; letter-spacing: .06em; word-break: break-all; }
.lepesek { padding-left: 1.2rem; margin: .5rem 0; }
.tartalek-kodok { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: 1rem 0; }
.tartalek-kodok code { font-size: 1.1rem; letter-spacing: .06em; }
.bejelento-sav .masodlagos-link { margin-left: auto; margin-right: .8rem; font-size: .9rem; }

/* --- A lezárás oka (2026-09-21, a Green Vector kérése) --------------------
   Négy ok, mindegyikhez más mező. Csak a választott ok mezője látszik –
   CSS-ből, a `:has()` választóval, JavaScript nélkül (a szigorú CSP miatt is).
   Ahol a böngésző a `:has()`-t nem ismeri, minden mező látszik – az is
   működik, csak hosszabb. */
.lezaras-okok { border: 1px solid var(--keret); border-radius: 6px; padding: .6rem .9rem; }
.lezaras-okok legend { font-weight: 600; padding: 0 .3rem; }
.lezaras-okok label.jelolo { align-items: center; padding: .25rem 0; cursor: pointer; margin-bottom: 0; }
.lezaras-okok input[type="radio"] { margin: 0; flex: none; width: 1rem; height: 1rem; }
@supports selector(:has(a)) {
  .lezaras-urlap .lezaras-mezo { display: none; }
  .lezaras-urlap:has(input[name="ok"][value="megoldva"]:checked) .lezaras-mezo[data-ok="megoldva"],
  .lezaras-urlap:has(input[name="ok"][value="nem_illetekes"]:checked) .lezaras-mezo[data-ok="nem_illetekes"],
  .lezaras-urlap:has(input[name="ok"][value="sikertelen_bejutas"]:checked) .lezaras-mezo[data-ok="sikertelen_bejutas"],
  .lezaras-urlap:has(input[name="ok"][value="ismetelt"]:checked) .lezaras-mezo[data-ok="ismetelt"] { display: block; }
}

/* Soron belüli űrlap egy táblázatcellában (az ingatlan saját e-mail-címe,
   2026-09-24): mező és gomb egymás mellett, keskeny képernyőn tördelve. */
form.sorba { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
form.sorba input[type="email"] { flex: 1 1 14rem; min-width: 0; }
form.sorba input[type="text"], form.sorba input[type="password"] { flex: 1 1 10rem; min-width: 0; }
form.sorba input[type="number"] { flex: 0 0 6rem; }
.postafiok-sor { border-top: 1px solid var(--keret); padding: .6rem 0; }
.postafiok-sor p { margin: 0 0 .4rem; }

/* A RIPORT JEGYTÁBLÁJA: a hosszú szövegű oszlopok ne legyenek keskenyek
   (2026-09-25, a tulajdonos észrevétele). Az automatikus elrendezés a 15
   oszlopot egyenletesen szorította össze; a több bejegyzéses „Megjegyzés"
   95 px széles lett, szavanként tört, és az egész sort ~2000 px magasra
   nyújtotta – a sor többi része üresnek látszott. A táblázat vízszintesen
   görgethető, a szélesebb oszlop tehát nem vág le semmit. Telefonon
   (kártyás nézet) nincs rá szükség. */
@media screen and (min-width: 641px) {
  .jegytabla td.szoveges { min-width: 14rem; }
  .jegytabla td.szoveges-hosszu { min-width: 24rem; }
}

/* --- Naptár (2026-10-02) -------------------------------------------------
   Havi rács, hétfőtől vasárnapig; a tételek kis címkék a nap cellájában. */
table.naptar { table-layout: fixed; width: 100%; }
table.naptar td { vertical-align: top; height: 6.5rem; padding: .3rem; }
table.naptar td.mas-honap { background: var(--papir2); color: var(--halvany); }
table.naptar td.ma { outline: 2px solid var(--kek); outline-offset: -2px; }
table.naptar .nap-szam { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
a.naptar-tetel {
  display: block; font-size: .75rem; line-height: 1.25; margin-bottom: .15rem;
  padding: .1rem .3rem; border-radius: 3px; border-left: 3px solid var(--kek);
  background: var(--kek-hatter); color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
a.naptar-tetel.feladat { border-left-color: var(--arany); background: var(--arany-hatter); }
a.naptar-tetel.ajanlat { border-left-color: #E08A3C; background: #FBEFE3; }
a.naptar-tetel.felulvizsgalat { border-left-color: var(--zold); background: var(--zold-hatter); }
a.naptar-tetel.lejart { border-left-color: var(--piros); }
ul.naptar-lista { margin: 0; padding-left: 1.1rem; }


/* --- Feladatok kanban nézete (2026-10-03) ---------------------------------
   Állapotonként egy oszlop; a kártya mozgatása az oszlop alján álló kis
   gombokkal megy (POST űrlap, JavaScript nélkül). Keskeny képernyőn az
   oszlopok egymás alá kerülnek. */
.nezet-valto { display: flex; gap: .4rem; margin: 0 0 1rem; }
.nezet-valto .aktiv { pointer-events: none; opacity: .65; }
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; align-items: start; }
.kanban-oszlop { background: var(--papir2); border: 1px solid var(--keret); border-radius: 6px; padding: .6rem; min-width: 0; }
.kanban-oszlop h2 { font-size: 1rem; margin: 0 0 .6rem; display: flex; justify-content: space-between; gap: .4rem; }
.kanban-kartya { background: var(--lap); border: 1px solid var(--keret); border-radius: 5px; padding: .5rem .6rem; margin-bottom: .5rem; }
.kanban-kartya .kartya-cim { font-weight: 600; display: block; margin-bottom: .2rem; overflow-wrap: anywhere; }
.kanban-kartya .halk { font-size: .8rem; display: block; }
.kanban-kartya form.sorba { margin-top: .4rem; }
.kanban-kartya form.sorba button { font-size: .75rem; padding: .2rem .45rem; }

/* --- Döntéskérés és ráfordított idő (2026-10-03) -------------------------- */
.dontes { border-top: 1px solid var(--keret); padding: .6rem 0; }
.dontes:first-child { border-top: 0; }
.dontes .dontes-valasz { margin-top: .4rem; }