/* =========================================================================
   Klímás App – arculati tokenek
   Forrás: docs/arculat.md. Ha itt változtatsz, ott is frissítsd.
   Minden szín, sarok, árnyék és átmenet innen jön, komponensben nincs
   beégetett hex kód.

   A betűk (Barlow, Barlow Condensed) önállóan hosztolva: woff2 fájlok az
   apps/web/public/fonts/ alatt, @font-face a fonts.css-ben (a tokenek
   mellett). Nem a Google Fonts CDN-ről: így nem megy ki a felhasználó
   IP-címe harmadik félnek (GDPR).

   A beépítéskor tett módosítások „MÓDOSÍTÁS:” megjegyzéssel jelölve.
   ========================================================================= */

:root {
  /* ---------- Fő színek ---------- */
  --kl-tinta: #17153a; /* alap sötét, szöveg, sötét felület */
  --kl-indigo: #4b3fe0; /* fő márkaszín, elsődleges gomb, aktív állapot */
  --kl-jelzo: #d7f75b; /* kiemelés: kész jel, figyelem, logó hullám */
  --kl-jeg: #e4e6ff; /* világos felület, ütemezett állapot */
  --kl-papir: #f6f6f2; /* sima (nem üveges) háttér */
  --kl-feher: #ffffff;
  --kl-grafit: #2b2a33; /* törzsszöveg világos alapon */
  --kl-ceruza: #6a6c78; /* másodlagos szöveg sima világos alapon */

  /* ---------- Indigó skála ---------- */
  --kl-indigo-50: #f0f0ff;
  --kl-indigo-100: #e4e6ff; /* = Jég */
  --kl-indigo-200: #c9c8ff;
  --kl-indigo-300: #a79fff;
  --kl-indigo-400: #7c70f0;
  --kl-indigo-500: #4b3fe0; /* = Indigó */
  --kl-indigo-600: #3b31b8;
  --kl-indigo-700: #2d268f;
  --kl-indigo-800: #221c66;
  --kl-indigo-900: #17153a; /* = Tinta */
  --kl-tinta-csempe: #2a2766; /* logó csempe és ikon gomb tinta alapon */

  /* ---------- Semlegesek ---------- */
  --kl-vonal: #ecebe5; /* elválasztó vonal sima alapon */
  --kl-keret: #d8d8d0; /* mezőkeret sima alapon */
  --kl-vonal-uvegen: rgba(23, 21, 58, 0.08);

  /* ---------- Szövegszínek üvegen és sötéten ---------- */
  --kl-szoveg-masodlagos-uvegen: #4f5160; /* üveg felületen a #6A6C78 túl halvány */
  --kl-szoveg-sotet-alapon: #dadbf0; /* törzsszöveg Tinta alapon */
  --kl-szoveg-sotet-alapon-halk: #b9badc; /* dátum, másodlagos sor Tinta alapon */
  --kl-szoveg-menu-sotet: #d4d5f2; /* inaktív menüpont sötét navigáción */

  /* ---------- Állapotszínek ---------- */
  --kl-utemezett-bg: var(--kl-jeg);
  --kl-utemezett-szoveg: var(--kl-tinta);
  --kl-folyamatban: var(--kl-indigo);
  --kl-kesz: #157a45;
  --kl-keses: #d3263f;
  --kl-keses-szoveg: #b01f35; /* piros szöveg fehér/világos alapon */
  --kl-keses-szoveg-sotet: #8a1828; /* szöveg a halvány piros dobozban */
  --kl-keses-hatter: #fdecef;
  --kl-figyelem-bg: var(--kl-jelzo);
  --kl-figyelem-szoveg: var(--kl-tinta);

  /* ---------- Cégenként felülírható (CLAUDE.md 24. szabály) ----------
     Csak ezt a kettőt írja felül a cég beállítása, a többi rögzített. */
  --kl-ceg-kiemeles: var(--kl-indigo);
  --kl-ceg-kiemeles-szoveg: var(--kl-feher);

  /* ---------- Színátmenetek ---------- */
  --kl-grad-elsodleges: linear-gradient(180deg, #6a5ff5 0%, #4b3fe0 100%);
  --kl-grad-elsodleges-atlos: linear-gradient(135deg, #6a5ff5 0%, #4b3fe0 55%, #3b31b8 100%);
  --kl-grad-jelzo: linear-gradient(180deg, #e6ff7a 0%, #c6ec3f 100%);
  --kl-grad-jelzo-csik: linear-gradient(90deg, #b7e83a 0%, #e6ff7a 100%);
  --kl-grad-kesz: linear-gradient(135deg, #22a563 0%, #157a45 100%);
  --kl-grad-keses: linear-gradient(135deg, #ec4a60 0%, #c21f37 100%);
  --kl-grad-keses-doboz: linear-gradient(
    135deg,
    rgba(253, 236, 239, 0.95) 0%,
    rgba(255, 214, 221, 0.85) 100%
  );
  --kl-grad-kiemelt-kartya:
    radial-gradient(70% 90% at 100% 0%, rgba(215, 247, 91, 0.35) 0%, rgba(215, 247, 91, 0) 60%),
    linear-gradient(135deg, #17153a 0%, #2d268f 65%, #4b3fe0 100%);
  --kl-grad-figyelmeztetes-kartya:
    radial-gradient(80% 70% at 100% 100%, rgba(215, 247, 91, 0.22) 0%, rgba(215, 247, 91, 0) 60%),
    linear-gradient(160deg, #2d268f 0%, #17153a 70%);
  --kl-grad-navigacio: linear-gradient(180deg, rgba(45, 38, 143, 0.86) 0%, rgba(23, 21, 58, 0.92) 100%);
  --kl-grad-logo-csempe: linear-gradient(135deg, #4b3fe0 0%, #17153a 100%);

  /* ---------- Aurora hátterek (ezek nélkül nem látszik az üveg) ---------- */
  --kl-aurora-vilagos-alap: #eceefa;
  --kl-aurora-vilagos:
    radial-gradient(55% 45% at 8% 0%, rgba(75, 63, 224, 0.38) 0%, rgba(75, 63, 224, 0) 70%),
    radial-gradient(45% 40% at 96% 8%, rgba(215, 247, 91, 0.55) 0%, rgba(215, 247, 91, 0) 70%),
    radial-gradient(55% 50% at 72% 100%, rgba(167, 159, 255, 0.55) 0%, rgba(167, 159, 255, 0) 70%),
    radial-gradient(40% 40% at 30% 70%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  --kl-aurora-sotet-alap: #17153a;
  --kl-aurora-sotet:
    radial-gradient(90% 45% at 0% 0%, rgba(106, 95, 245, 0.8) 0%, rgba(106, 95, 245, 0) 70%),
    radial-gradient(70% 35% at 100% 25%, rgba(215, 247, 91, 0.4) 0%, rgba(215, 247, 91, 0) 70%),
    radial-gradient(100% 50% at 50% 100%, rgba(75, 63, 224, 0.7) 0%, rgba(75, 63, 224, 0) 70%);
  /* Hibaállapotnál a sötét aurora jobb felső foltja pirosra vált */
  --kl-aurora-sotet-hiba:
    radial-gradient(90% 45% at 0% 0%, rgba(106, 95, 245, 0.8) 0%, rgba(106, 95, 245, 0) 70%),
    radial-gradient(70% 35% at 100% 25%, rgba(236, 74, 96, 0.35) 0%, rgba(236, 74, 96, 0) 70%),
    radial-gradient(100% 50% at 50% 100%, rgba(75, 63, 224, 0.7) 0%, rgba(75, 63, 224, 0) 70%);

  /* ---------- Üveg (liquid glass) ---------- */
  --kl-uveg-blur: blur(24px) saturate(180%);
  --kl-uveg-blur-eros: blur(30px) saturate(180%);
  --kl-uveg-blur-sotet: blur(22px) saturate(160%);

  --kl-uveg-bg: rgba(255, 255, 255, 0.6); /* kártya világos aurorán */
  --kl-uveg-keret: rgba(255, 255, 255, 0.85);
  --kl-uveg-arnyek: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 32px rgba(23, 21, 58, 0.08);

  --kl-uveg-eros-bg: rgba(255, 255, 255, 0.8); /* lap/kártya sötét aurorán */
  --kl-uveg-eros-keret: rgba(255, 255, 255, 0.9);
  --kl-uveg-eros-arnyek: inset 0 1px 0 #ffffff, 0 24px 50px rgba(5, 4, 25, 0.4);

  --kl-uveg-sotet-bg: rgba(255, 255, 255, 0.1); /* sötét üveg sötét aurorán */
  --kl-uveg-sotet-keret: rgba(255, 255, 255, 0.2);
  --kl-uveg-sotet-arnyek: inset 0 1px 0 rgba(255, 255, 255, 0.22);

  --kl-uveg-sor-bg: rgba(255, 255, 255, 0.65); /* listasor üvegkártyán belül, NEM blurral */

  /* Tartalék, ha nincs üveg (gyenge eszköz, kikapcsolva, nem támogatott) */
  --kl-uveg-tartalek-bg: rgba(255, 255, 255, 0.94);
  --kl-lap-hatter: rgba(23, 21, 58, 0.45); /* sötétítés az alsó lap (sheet) mögött */
  --kl-uveg-sotet-tartalek-bg: #221c66;

  /* ---------- Árnyékok ---------- */
  --kl-arnyek-gomb: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 26px rgba(75, 63, 224, 0.45);
  --kl-arnyek-gomb-kicsi: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px rgba(75, 63, 224, 0.35);
  --kl-arnyek-jelzo-gomb: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px rgba(215, 247, 91, 0.3);
  --kl-arnyek-kiemelt-kartya: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 36px rgba(23, 21, 58, 0.3);
  --kl-arnyek-lebego-menu: inset 0 1px 0 rgba(255, 255, 255, 1), 0 14px 34px rgba(23, 21, 58, 0.18);
  --kl-fenyles-jelzo: 0 0 12px rgba(215, 247, 91, 0.7);
  --kl-fokusz: 0 0 0 3px rgba(75, 63, 224, 0.45);

  /* ---------- Sarkok ---------- */
  --kl-r-xs: 8px; /* apró jelölők */
  --kl-r-sm: 12px; /* idővonal blokk, ikon csempe kicsi */
  --kl-r-md: 18px; /* beviteli mező, belső sor */
  --kl-r-lg: 26px; /* kártya */
  --kl-r-xl: 34px; /* lap (sheet), lebegő menü */
  --kl-r-pill: 999px; /* gomb, címke, kereső */

  /* ---------- Térköz (4-es rács) ---------- */
  --kl-t-1: 4px;
  --kl-t-2: 8px;
  --kl-t-3: 12px;
  --kl-t-4: 16px;
  --kl-t-5: 20px;
  --kl-t-6: 24px;
  --kl-t-8: 32px;
  --kl-t-10: 40px;
  --kl-t-14: 56px;
  --kl-t-16: 64px;

  /* ---------- Betűk ---------- */
  --kl-betu-cim: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --kl-betu-szoveg: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --kl-meret-h1: 48px; /* asztali oldalcím */
  --kl-meret-h1-mobil: 40px;
  --kl-meret-h2: 28px; /* kártya/szakasz cím */
  --kl-meret-h2-mobil: 22px;
  --kl-meret-h3: 24px;
  --kl-meret-kpi: 58px; /* nagy szám kártyán */
  --kl-meret-kpi-mobil: 42px;
  --kl-meret-szoveg: 16px;
  --kl-meret-szoveg-nagy: 18px;
  --kl-meret-kicsi: 14px;
  --kl-meret-cimke: 13px;
  --kl-meret-menu-mobil: 11px;
  --kl-meret-mezo: 16px; /* asztali beviteli mező */
  --kl-meret-mezo-mobil: 17px; /* 16 px alatt az iOS ránagyít */

  /* ---------- Méretek ---------- */
  --kl-erintes-min: 44px;
  --kl-gomb-magas: 48px;
  --kl-gomb-magas-nagy: 56px;
  --kl-mezo-magas: 52px;
  --kl-oldalsav-szeles: 248px;
  --kl-also-menu-magas: 68px;
}

/* =========================================================================
   Hátterek
   MÓDOSÍTÁS: a `background-attachment: fixed` helyett rögzített háttérréteg
   (::before). iOS Safarin a fixed háttér nem működik, és görgetéskor akadhat;
   így minden eszközön ugyanúgy áll a háttér.
   ========================================================================= */
.kl-aurora-vilagos,
.kl-aurora-sotet {
  position: relative;
  isolation: isolate;
}
.kl-aurora-vilagos::before,
.kl-aurora-sotet::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.kl-aurora-vilagos {
  background-color: var(--kl-aurora-vilagos-alap);
}
.kl-aurora-vilagos::before {
  background-image: var(--kl-aurora-vilagos);
}
.kl-aurora-sotet {
  background-color: var(--kl-aurora-sotet-alap);
  color: var(--kl-feher);
}
.kl-aurora-sotet::before {
  background-image: var(--kl-aurora-sotet);
}
.kl-aurora-sotet--hiba::before {
  background-image: var(--kl-aurora-sotet-hiba);
}

/* =========================================================================
   Üveg felületek
   ========================================================================= */
.kl-uveg {
  background: var(--kl-uveg-bg);
  -webkit-backdrop-filter: var(--kl-uveg-blur);
  backdrop-filter: var(--kl-uveg-blur);
  border: 1px solid var(--kl-uveg-keret);
  box-shadow: var(--kl-uveg-arnyek);
  border-radius: var(--kl-r-lg);
}
.kl-uveg-eros {
  background: var(--kl-uveg-eros-bg);
  -webkit-backdrop-filter: var(--kl-uveg-blur-eros);
  backdrop-filter: var(--kl-uveg-blur-eros);
  border: 1px solid var(--kl-uveg-eros-keret);
  box-shadow: var(--kl-uveg-eros-arnyek);
  border-radius: var(--kl-r-xl);
}
.kl-uveg-sotet {
  background: var(--kl-uveg-sotet-bg);
  -webkit-backdrop-filter: var(--kl-uveg-blur-sotet);
  backdrop-filter: var(--kl-uveg-blur-sotet);
  border: 1px solid var(--kl-uveg-sotet-keret);
  box-shadow: var(--kl-uveg-sotet-arnyek);
  border-radius: var(--kl-r-lg);
  color: var(--kl-feher);
}
.kl-kiemelt-kartya {
  background-color: var(--kl-tinta);
  background-image: var(--kl-grad-kiemelt-kartya);
  box-shadow: var(--kl-arnyek-kiemelt-kartya);
  border-radius: var(--kl-r-lg);
  color: var(--kl-feher);
}

/* Tartalék: nincs backdrop-filter támogatás, a felhasználó kikapcsolta,
   vagy a rendszer kevesebb átlátszóságot kér.
   MÓDOSÍTÁS: a két üveges gomb (--masodlagos-sotet, --uveg) is tartalékot kap. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kl-uveg,
  .kl-uveg-eros,
  .kl-ikon-gomb--uveg {
    background: var(--kl-uveg-tartalek-bg);
  }
  .kl-uveg-sotet,
  .kl-gomb--masodlagos-sotet {
    background: var(--kl-uveg-sotet-tartalek-bg);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .kl-uveg,
  .kl-uveg-eros,
  .kl-ikon-gomb--uveg {
    background: var(--kl-uveg-tartalek-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kl-uveg-sotet,
  .kl-gomb--masodlagos-sotet {
    background: var(--kl-uveg-sotet-tartalek-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
[data-uveg='ki'] .kl-uveg,
[data-uveg='ki'] .kl-uveg-eros,
[data-uveg='ki'] .kl-ikon-gomb--uveg {
  background: var(--kl-uveg-tartalek-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-uveg='ki'] .kl-uveg-sotet,
[data-uveg='ki'] .kl-gomb--masodlagos-sotet {
  background: var(--kl-uveg-sotet-tartalek-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* =========================================================================
   Tipográfia
   ========================================================================= */
.kl-cim {
  font-family: var(--kl-betu-cim);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  color: var(--kl-tinta);
}
.kl-szam {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Gombok
   ========================================================================= */
.kl-gomb {
  min-height: var(--kl-gomb-magas);
  padding: 0 22px;
  border: none;
  border-radius: var(--kl-r-pill);
  font-family: var(--kl-betu-szoveg);
  font-size: var(--kl-meret-szoveg);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: var(--kl-grad-elsodleges);
  color: var(--kl-feher);
  box-shadow: var(--kl-arnyek-gomb);
  transition:
    transform 120ms ease,
    filter 120ms ease;
}
.kl-gomb:hover {
  filter: brightness(1.06);
}
.kl-gomb:active {
  transform: scale(0.98);
}
.kl-gomb:focus-visible {
  outline: none;
  box-shadow: var(--kl-arnyek-gomb), var(--kl-fokusz);
}
.kl-gomb:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kl-gomb--nagy {
  min-height: var(--kl-gomb-magas-nagy);
  font-size: var(--kl-meret-szoveg-nagy);
}
.kl-gomb--teljes {
  width: 100%;
}

/* Másodlagos világos üvegen: jég üveg kapszula */
.kl-gomb--masodlagos {
  background: rgba(228, 230, 255, 0.75);
  color: var(--kl-tinta);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Másodlagos sötét alapon */
.kl-gomb--masodlagos-sotet {
  background: rgba(255, 255, 255, 0.12);
  color: var(--kl-feher);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
/* Jelző (lime) gomb: CSAK sötét alapon */
.kl-gomb--jelzo {
  background: var(--kl-grad-jelzo);
  color: var(--kl-tinta);
  box-shadow: var(--kl-arnyek-jelzo-gomb);
}
/* Veszély / késés sötét alapon (Mai napom) */
.kl-gomb--keses-sotet {
  background: rgba(211, 38, 63, 0.22);
  color: var(--kl-feher);
  border: 1px solid rgba(255, 140, 155, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Veszély világos alapon */
.kl-gomb--keses {
  background: var(--kl-feher);
  color: var(--kl-keses-szoveg);
  border: 1.5px solid var(--kl-keses);
  box-shadow: none;
}
/* Kerek ikon gomb (hívás, értesítés) */
.kl-ikon-gomb {
  width: var(--kl-erintes-min);
  height: var(--kl-erintes-min);
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* MÓDOSÍTÁS: hiányzott */
  background: var(--kl-grad-elsodleges);
  color: var(--kl-feher);
  box-shadow: var(--kl-arnyek-gomb-kicsi);
}
/* MÓDOSÍTÁS: billentyűzetes fókusz az ikon gombon is látsszon */
.kl-ikon-gomb:focus-visible {
  outline: none;
  box-shadow: var(--kl-arnyek-gomb-kicsi), var(--kl-fokusz);
}
.kl-ikon-gomb--uveg {
  background: rgba(255, 255, 255, 0.55);
  color: var(--kl-tinta);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 16px rgba(23, 21, 58, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* =========================================================================
   Beviteli mezők
   ========================================================================= */
.kl-mezo {
  width: 100%;
  height: var(--kl-mezo-magas);
  box-sizing: border-box;
  padding: 0 18px;
  border-radius: var(--kl-r-md);
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(228, 230, 255, 0.6);
  box-shadow: inset 0 1px 3px rgba(23, 21, 58, 0.08);
  font-family: var(--kl-betu-szoveg);
  font-size: var(--kl-meret-mezo);
  color: var(--kl-tinta);
}
/* iPhone: a dátum- és időmezőnek saját szélessége van, ami kilógna a képernyőből (2026-10-08, Kicc). */
.kl-mezo[type='date'],
.kl-mezo[type='time'],
.kl-mezo[type='datetime-local'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
}
.kl-mezo::-webkit-date-and-time-value {
  text-align: left;
}
textarea.kl-mezo,
select.kl-mezo {
  max-width: 100%;
}
.kl-mezo::placeholder {
  color: var(--kl-szoveg-masodlagos-uvegen);
}
.kl-mezo:focus {
  outline: none;
  border-color: var(--kl-indigo);
  box-shadow: var(--kl-fokusz);
}
.kl-mezo[aria-invalid='true'] {
  border: 2px solid var(--kl-keses);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(211, 38, 63, 0.15);
}
@media (max-width: 600px) {
  .kl-mezo {
    font-size: var(--kl-meret-mezo-mobil);
  }
}
.kl-mezo-cimke {
  font-size: 15px;
  font-weight: 600;
  color: var(--kl-tinta);
}

/* =========================================================================
   Állapot címkék
   ========================================================================= */
.kl-allapot {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--kl-r-pill);
  font-size: var(--kl-meret-cimke);
  font-weight: 600;
  white-space: nowrap;
}
.kl-allapot--utemezett {
  background: rgba(228, 230, 255, 0.9);
  color: var(--kl-tinta);
  border: 1px solid var(--kl-feher);
}
.kl-allapot--folyamatban {
  background: var(--kl-grad-elsodleges-atlos);
  color: var(--kl-feher);
}
.kl-allapot--kesz {
  background: var(--kl-grad-kesz);
  color: var(--kl-feher);
}
.kl-allapot--keses {
  background: var(--kl-grad-keses);
  color: var(--kl-feher);
}
.kl-allapot--figyelem {
  background: var(--kl-grad-jelzo);
  color: var(--kl-tinta);
}

/* =========================================================================
   MÓDOSÍTÁS: mozgáscsökkentés. Aki a rendszerben kevesebb animációt kért,
   annál a gombok nem mozognak.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .kl-gomb {
    transition: none;
  }
  .kl-gomb:active {
    transform: none;
  }
}