/*
 * Fájl:       assets/css/alap.css
 * Verzió:     2.0.0
 * Készítette: Claude Opus 5.5 (claude-opus-5-5) — 2026-10-29
 * Leírás:     közös alapok: színtokenek, betű, oldalsávos keret, gombok, űrlapelemek, címkék, üzenetek.
 * v2.0.0: „Grafit” szerkezet (a user választása, 2026-10-29): IBM Plex Sans/Mono, sötét
 *         oldalsáv, sűrű táblázat, kis lekerekítés (4–8 px) — a KORÁBBI színvilággal
 *         (user: „de a korábbi színvilággal”): mélykék #13294B, jégkék alap, kristálykék kiemelés.
 */
:root {
  --alap: #F6FAFC;
  --panel: #FFFFFF;
  --panel-fej: #EEF6F9;
  --szoveg: #13294B;
  --szoveg2: #3E5873;
  --halvany: #4F6A85;
  --vonal: #E1EDF3;
  --vonal-vil: #EEF6F9;
  --keret-input: #C4DDE9;
  --kek: #13294B;
  --kek-sotet: #24467A;
  --kek-hatter: #DDEBF3;
  --kristaly: #4F8FB3;
  --zold: #17603A;
  --zold-hatter: #E3F2EA;
  --sarga: #8A4B00;
  --sarga-hatter: #FCEFD9;
  --piros: #A3201B;
  --piros-hatter: #FBE7E6;
  --sav: #13294B;
  --sav-aktiv: #24467A;
  --sav-szoveg: #C4DDE9;
  --sav-halvany: #9CC9DC;
  --betu: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--betu);
  font-size: 14px;
  line-height: 1.5;
  color: var(--szoveg);
  background: var(--alap);
}

a { color: var(--kek); }
a:hover { color: var(--kristaly); }
:focus-visible { outline: 2px solid var(--kristaly); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 13px; }
.halvany { color: var(--halvany); font-weight: 400; }
.rejtett {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Márkajel */
.marka { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marka-jel {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #9CC9DC;
  color: #13294B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex: none;
}
.marka-szoveg { display: flex; flex-direction: column; line-height: 1.2; }
.marka-nev { font-weight: 600; font-size: 14px; color: var(--szoveg); }
.marka-alcim { font-size: 12px; color: var(--halvany); }
.marka-sotet .marka-nev { color: #fff; }
.marka-sotet .marka-alcim { color: var(--sav-halvany); }

/* Keret: oldalsáv + tartalom */
.keret { display: flex; flex-wrap: wrap; min-height: 100vh; }
.oldalsav {
  flex: 1 1 220px;
  max-width: 232px;
  background: var(--sav);
  color: var(--sav-szoveg);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oldalsav-marka { padding: 4px 8px 22px; text-decoration: none; }
.menupont {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--sav-szoveg);
  text-decoration: none;
  font-size: 14px;
}
.menupont:hover { background: var(--sav-aktiv); color: #fff; }
.menupont[aria-current="page"] { background: var(--sav-aktiv); color: #fff; font-weight: 500; }
.oldalsav-lab { margin-top: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.oldalsav-nev { color: var(--sav-halvany); }
.oldalsav-lab form { margin: 0; }
.link-gomb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sav-szoveg);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-gomb:hover { color: #fff; }

.tartalom {
  flex: 999 1 560px;
  min-width: 0;
  padding: 28px 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Oldalfej */
.oldal-fej { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.oldal-cim { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; }
.oldal-alcim { margin: 4px 0 0; color: var(--halvany); }

/* Gombok */
.gomb-fo, .gomb-masodlagos, .gomb-halk, .gomb-veszely {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.gomb-fo { border: 0; background: var(--kek); color: #fff; font-weight: 600; padding: 0 16px; }
.gomb-fo:hover { background: var(--kek-sotet); color: #fff; }
.gomb-fo:disabled { opacity: .45; cursor: not-allowed; }
.gomb-masodlagos { border: 1px solid var(--keret-input); background: var(--panel); color: var(--szoveg); }
.gomb-masodlagos:hover { background: var(--panel-fej); }
.gomb-masodlagos:disabled { opacity: .5; cursor: not-allowed; }
.gomb-halk { border: 0; background: var(--vonal-vil); color: var(--szoveg); }
.gomb-halk:hover { background: var(--vonal); }
.gomb-veszely { min-height: 32px; padding: 0 10px; border: 1px solid #EBC5C3; background: var(--panel); color: var(--piros); font-size: 13px; }
.gomb-veszely:hover { background: var(--piros-hatter); }

/* Űrlap */
.urlap { display: flex; flex-direction: column; gap: 6px; }
.urlap label { font-size: 13px; font-weight: 500; color: var(--szoveg2); }
input[type="text"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], select, textarea {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--keret-input);
  border-radius: 6px;
  background: var(--panel);
  color: var(--szoveg);
  font: inherit;
  font-size: 14px;
}
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--kek); cursor: pointer; }
.urlap input + label { margin-top: 10px; }
.urlap-hiba { margin: 4px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--piros-hatter); color: var(--piros); }

/* Üzenetsáv */
.uzenet { margin: 0; padding: 10px 14px; border-radius: 6px; border: 1px solid transparent; }
.uzenet-ok { background: var(--zold-hatter); color: var(--zold); border-color: #C7E5D3; }
.uzenet-hiba { background: var(--piros-hatter); color: var(--piros); border-color: #F1C9C6; }
.uzenet-figyelem { background: var(--sarga-hatter); color: var(--sarga); border-color: #F2D9AE; }

/* Panel */
.kartya {
  background: var(--panel);
  border: 1px solid var(--vonal);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kartya-cim { margin: 0; font-size: 15px; font-weight: 600; }
.ures { margin: 0; color: var(--halvany); }

/* Állapot-címkék */
.cimke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.cimke-uj { background: var(--panel); color: var(--szoveg2); box-shadow: inset 0 0 0 1px var(--keret-input); }
.cimke-sorban, .cimke-feldolgozas { background: var(--kek-hatter); color: var(--kek-sotet); }
.cimke-azonositva, .cimke-jovahagyva, .cimke-atadva { background: var(--zold-hatter); color: var(--zold); }
.cimke-kezi { background: var(--sarga-hatter); color: var(--sarga); }
.cimke-hiba, .cimke-elutasitva { background: var(--piros-hatter); color: var(--piros); }

@media (max-width: 720px) {
  .oldalsav { max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; }
  .oldalsav-marka { padding: 0 8px 0 0; }
  .oldalsav-lab { margin: 0 0 0 auto; flex-direction: row; gap: 10px; padding: 0; }
  .tartalom { padding: 20px 16px 40px; }
}

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