/* LOGIQS Központ – stíluslap.

   A TOKENEK a LOGIQS `app/web/static/szinvilag.css` alapértékeinek MÁSOLATA
   (a „kék" színvilág, világos és sötét pár). Másolat, nem import: a két
   alkalmazás külön tárolóban él (terv 1. pont). Ha ott változik egy szám,
   itt kézzel kell követni – a forrás mellettük áll. */

:root {
  color-scheme: light dark;
  --kiemelo: #1a5fd0;          /* --tema-kek-k */
  --marka-sotet: #0c151f;      /* --marka-sotet */
  --marka-cian: #5fdcea;       /* --marka-cian: CSAK sötét felületen (fehéren 1,6:1) */
  --papir: light-dark(#ffffff, #1b2028);
  --tinta: light-dark(#000000, #ffffff);
  --ac-600: light-dark(var(--kiemelo), color-mix(in oklab, var(--kiemelo) 55%, #fff));
  --ac-50: color-mix(in oklab, var(--kiemelo) 9%, var(--papir));
  --n-0:   light-dark(#ffffff, #1b2028);
  --n-50:  light-dark(#f5f6f8, #212832);
  --n-100: light-dark(#eceef1, #272f3a);
  --n-200: light-dark(#dfe2e7, #313a47);
  --n-600: light-dark(#5b6472, #a7b1bf);
  --n-900: light-dark(#171b21, #f2f4f8);
  --ok-bg:   light-dark(#e7f5ed, #14301f);  --ok-fg:   light-dark(#14603a, #86d8a6);
  --warn-bg: light-dark(#fdf3e0, #352a12);  --warn-fg: light-dark(#7a4f00, #efc274);
  --err-bg:  light-dark(#fdecec, #3a1e1e);  --err-fg:  light-dark(#9a3131, #f2a5a5);
  --sugar: 8px;
  --szel: 1120px;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--n-50);
  color: var(--n-900);
  font: 1rem/1.6 "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}
a { color: var(--ac-600); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ac-600); outline-offset: 2px;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; margin: 0 0 .75rem; }
h2 { font-size: 1.3rem; line-height: 1.3; margin: 1.75rem 0 .5rem; }
img { max-width: 100%; height: auto; }

.keret { max-width: var(--szel); margin: 0 auto; padding: 0 16px; }
.ugras { position: absolute; left: -9999px; }
.ugras:focus { left: 16px; top: 8px; background: var(--n-0); padding: 8px 12px; z-index: 10; }

/* --- fejléc: mindig a márka sötétje, mindkét módban --- */
.fejlec { background: var(--marka-sotet); color: #fff; }
.fejlec-belso { display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 16px; }
.marka { display: inline-flex; align-items: center; gap: 10px; color: #fff;
  text-decoration: none; font-weight: 700; letter-spacing: .04em; font-size: 1.15rem; }
.marka span { color: var(--marka-cian); }
.menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 4px 6px; }
.menu a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.menu a:hover { background: #ffffff1a; }
.kilepes { margin: 0; }
/* Keskeny képernyőn a menü a márkajel ALÁ tördel, nem hamburgerbe bújik:
   öt pontnál egy összecsukott menü egy fölösleges koppintás, és JavaScript
   nélkül csak törékeny trükkel volna megoldható. */
@media (max-width: 720px) {
  .fejlec-belso { flex-direction: column; align-items: flex-start; padding-top: 10px;
    padding-bottom: 10px; }
  .menu { justify-content: flex-start; }
  .menu a { padding: 6px 8px; }
}

/* --- gombok --- */
.gomb { display: inline-block; padding: 10px 18px; border-radius: var(--sugar);
  border: 1px solid var(--n-200); background: var(--n-0); color: var(--n-900);
  text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.gomb:hover { border-color: var(--ac-600); }
.gomb-elso { background: var(--kiemelo); border-color: var(--kiemelo); color: #fff; }
.gomb-elso:hover { background: color-mix(in oklab, var(--kiemelo) 85%, #000); }
.gombsor { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5rem 0; }

/* --- nyitó és kártyák --- */
.nyito { background: linear-gradient(160deg, var(--marka-sotet), #13314f); color: #fff;
  padding: 56px 0 64px; margin-bottom: 40px; }
.nyito a.gomb:not(.gomb-elso) { background: transparent; color: #fff; border-color: #ffffff66; }
.felcim { color: var(--marka-cian); font-weight: 600; margin: 0 0 .5rem; }
.bevezeto { font-size: 1.15rem; color: inherit; max-width: 46rem; }
.racs3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 40px; }
.kartya { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 12px;
  padding: 24px; }
.kartya h2 { margin-top: 0; }
.kiemelt { background: var(--ac-50); border-radius: 12px; padding: 24px 24px 8px;
  margin-bottom: 48px; }
.szoveg { max-width: 820px; padding-top: 32px; padding-bottom: 48px; }
.csomag .ar { font-size: 1.6rem; font-weight: 700; margin: .25rem 0 1rem; }
.csomag .ar span { font-size: .95rem; font-weight: 400; color: var(--n-600); }
.korlatok, .modulok { padding-left: 1.2rem; }
.kerdes { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--sugar);
  padding: 12px 16px; margin-bottom: 10px; }
.kerdes summary { cursor: pointer; font-weight: 600; }
.hir { border-left: 3px solid var(--ac-600); padding-left: 16px; }

/* --- űrlap --- */
.urlap { max-width: 640px; }
.mezo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.mezo label { font-weight: 600; }
.mezo input, .mezo select, .mezo textarea {
  font: inherit; font-size: 16px; /* 16 px alatt az iOS fókuszkor rányagyít */
  padding: 10px 12px; border: 1px solid var(--n-200); border-radius: var(--sugar);
  background: var(--n-0); color: var(--n-900); min-height: 44px; }
.mezo [aria-invalid="true"] { border-color: var(--err-fg); }
.mezo-jelolo { flex-direction: row; align-items: flex-start; gap: 10px; }
.mezo-jelolo input { min-height: 0; width: 20px; height: 20px; margin-top: 3px; flex: none; }
.mezo-jelolo label { font-weight: 400; }
.mezo-hiba { color: var(--err-fg); margin: 0 0 12px; font-size: .95rem; }
/* A csapdamező: a képernyőn sincs, a képernyőolvasó sem olvassa
   (`aria-hidden`), a tabulátor sem éri el (`tabindex=-1`). */
.csapda { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.halk { color: var(--n-600); font-size: .95rem; }

.doboz { border-radius: var(--sugar); padding: 12px 16px; margin: 0 0 20px; border: 1px solid; }
.doboz-hiba { background: var(--err-bg); color: var(--err-fg); }
.doboz-ok { background: var(--ok-bg); color: var(--ok-fg); }
.doboz-figyelem { background: var(--warn-bg); color: var(--warn-fg); }
.doboz p { margin: 0; }

.adatlista { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.adatlista dt { color: var(--n-600); }
.adatlista dd { margin: 0; }

/* --- táblázat: széles tartalomnál a DOBOZ görget, nem a lap --- */
.tabla-doboz { overflow-x: auto; border: 1px solid var(--n-200); border-radius: var(--sugar);
  background: var(--n-0); margin-bottom: 24px; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--n-100);
  vertical-align: top; }
.tabla th { background: var(--n-50); font-weight: 600; white-space: nowrap; }
.tabla .szam { text-align: right; font-variant-numeric: tabular-nums; }
.szoveg .tabla { background: var(--n-0); }

/* --- lábléc --- */
.lablec { background: var(--marka-sotet); color: #c9ced6; padding: 28px 0; margin-top: 24px; }
.lablec-belso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.lablec nav { display: flex; flex-wrap: wrap; gap: 16px; }
.lablec a { color: #fff; }

/* --- admin --- */
.admin main { padding-top: 24px; padding-bottom: 48px; }
.lapfej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; }
.lapfej h1 { margin: 0; font-size: 1.6rem; }
.lapfej span { display: inline-flex; gap: 8px; }
.darab { font-size: 1rem; color: var(--n-600); font-weight: 400; }
.szuro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.szuro input, .szuro select { font: inherit; padding: 8px 10px; border: 1px solid var(--n-200);
  border-radius: var(--sugar); background: var(--n-0); color: var(--n-900); }
.belepes { max-width: 420px; margin: 40px auto; }
.ket-hasab { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: 24px; }
.uzenet { white-space: pre-wrap; background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--sugar); padding: 12px; }
.cimke { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem;
  font-weight: 600; background: var(--n-100); color: var(--n-900); white-space: nowrap; }
.cimke-uj, .cimke-level-hiba { background: var(--warn-bg); color: var(--warn-fg); }
.cimke-ugyfel, .cimke-level-elkuldve { background: var(--ok-bg); color: var(--ok-fg); }
.cimke-elutasitva, .cimke-megerositetlen { color: var(--n-600); }
.cimke-level-hiba { background: var(--err-bg); color: var(--err-fg); }

/* --- példányok és előfizetések állapota --- */
.cimke-eg-ok, .cimke-ef-aktiv { background: var(--ok-bg); color: var(--ok-fg); }
.cimke-eg-figyelem, .cimke-ef-proba, .cimke-ef-kesedelmes { background: var(--warn-bg); color: var(--warn-fg); }
.cimke-eg-hiba, .cimke-ef-olvashato { background: var(--err-bg); color: var(--err-fg); }
.cimke-eg-var, .cimke-ef-lezart, .cimke-ef-archivalt { color: var(--n-600); }
.kod { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--sugar);
  padding: 12px 16px; overflow-x: auto; font-size: .95rem; }

/* --- domainek és példánynevek (5. fázis, M1) --- */
.mezo-sor { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.nev { white-space: nowrap; }
.nev-masodlagos { color: var(--n-600); }
.muveletek { white-space: nowrap; }
.muveletek form { display: inline-block; margin-right: 6px; }
.gomb-kicsi { padding: 4px 10px; font-size: .9rem; }
.gomb-veszely { background: var(--err-bg); border-color: var(--err-fg); color: var(--err-fg); }
/* A levétel KÉT mozdulat: a gomb csak kinyit, a feliratos gomb vesz le. */
.megerosit { display: inline-block; vertical-align: top; }
.megerosit summary { list-style: none; cursor: pointer; }
.megerosit summary::-webkit-details-marker { display: none; }
.megerosit[open] { display: block; background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--sugar); padding: 8px 12px; margin-top: 6px; white-space: normal;
  max-width: 320px; }

/* --- gépek és friss kód (5. fázis, M3) --- */
.teendok { list-style: none; padding: 0; margin: 0 0 16px; }
.teendok li { padding: 6px 0; border-bottom: 1px solid var(--n-100); }
.mezo-kod input { max-width: 10em; letter-spacing: .2em; font-variant-numeric: tabular-nums; }