/* Színvilág: a fő szín a sötét kék (#002e6c), mellette fehér és hűvös szürkék.
   A jelzőszínek (zöld/piros/sárga) ehhez hangolt, tompított árnyalatok. */
:root {
  --bg: #f2f5f9;
  --card: #ffffff;
  --text: #16233a;
  --muted: #5b6b85;
  --accent: #002e6c;
  --accent-sotet: #001f49;
  --accent-vilagos: #1a4a8f;
  --accent-light: #e6ecf5;
  --green: #12694a;
  --green-bg: #dcf0e7;
  --red: #a4231f;
  --red-bg: #fbe4e3;
  --amber: #8a5a00;
  --amber-bg: #fdf0d5;
  --border: #d9e0ea;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; cursor: pointer; user-select: none; }
.brand:hover { opacity: 0.85; }

/* Kategóriaválasztó: szegmentált (pill) sáv szürke sínen */
nav {
  display: flex;
  gap: 3px;
  background: var(--bg);
  padding: 5px;
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 15px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
nav a:hover { color: var(--accent); }
nav a.active {
  color: var(--accent);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(20, 40, 70, 0.14);
}

/* Jobb oldali blokk: beállítások beljebb, profil a legszélén */
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  padding: 8px 13px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.settings-btn:hover { color: var(--accent); border-color: var(--accent); }
.settings-btn svg { width: 16px; height: 16px; }

.profil-wrap { position: relative; }

.profil-gomb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
}

/* Lenyíló profil-menü */
.profil-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 230px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(15, 30, 60, 0.18);
  padding: 8px;
  z-index: 40;
}
.profil-menu-fej {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.profil-menu-elem {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.profil-menu-elem:hover { background: var(--bg); color: var(--accent); border: none; }
.profil-menu-elem svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.profil-menu-elem:hover svg { color: var(--accent); }

.tema-modern .profil-menu { border: none; box-shadow: 0 10px 36px rgba(23, 35, 80, 0.22); }
.profil-gomb:hover .avatar { box-shadow: 0 0 0 3px var(--accent-light); }
.profil-nev { font-size: 13px; font-weight: 600; color: var(--text); }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  transition: box-shadow 0.12s;
}

@media (max-width: 720px) {
  header { flex-wrap: wrap; }
  nav { order: 3; width: 100%; }
  .profil-nev { display: none; }
}

/* ===== Oldalsáv elrendezés (YouTube-stílus) — Beállítások → Megjelenés alatt kapcsolható ===== */

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.hamburger:hover { background: var(--bg); color: var(--accent); border: none; }
.hamburger svg { width: 22px; height: 22px; }

#oldalsav, #oldalsav-hatter { display: none; }

.nezet-oldalsav .hamburger { display: inline-flex; }
.nezet-oldalsav header nav { display: none; }
/* Oldalsávos elrendezésben a Beállítások a sáv alján van, a fejlécből eltűnik */
.nezet-oldalsav .settings-btn { display: none; }

.nezet-oldalsav #oldalsav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: fixed;
  top: 57px;
  left: 0;
  bottom: 0;
  width: 232px;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  overflow-y: auto;
  z-index: 9;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
body.nezet-oldalsav.oldalsav-nyitva #oldalsav { transform: none; }

.oldalsav-elem {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.oldalsav-elem:hover { background: var(--bg); color: var(--accent); }
.oldalsav-elem.active { background: var(--accent-light); color: var(--accent); }
.oldalsav-elem svg { width: 20px; height: 20px; flex: none; }

.oldalsav-also { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; }

/* Széles képernyőn a tartalom helyet ad az oldalsávnak */
@media (min-width: 951px) {
  body.nezet-oldalsav.oldalsav-nyitva main { margin-left: 232px; }
  .nezet-oldalsav main { transition: margin-left 0.2s ease; }
}

/* Keskeny képernyőn az oldalsáv rátakar, mögötte sötétítés */
@media (max-width: 950px) {
  body.nezet-oldalsav.oldalsav-nyitva #oldalsav-hatter {
    display: block;
    position: fixed;
    inset: 0;
    top: 57px;
    background: rgba(15, 25, 40, 0.45);
    z-index: 8;
  }
}

.tema-modern #oldalsav { border-right: 1px solid rgba(110, 125, 190, 0.16); }
.tema-modern .oldalsav-elem { border-radius: 999px; }

/* ===== Kártyás minta nézet (Beállítások → Megjelenés → Minta nézet) ===== */

.hero-kartya { padding: 20px; }
.hero-fo { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.hero-termek { font-size: 15px; font-weight: 600; color: var(--muted); margin-top: 3px; }
/* A gyártási szám fontos adat — kiemelve a termék alatt áll */
.hero-gyszam { font-size: 14px; margin-top: 6px; color: var(--text); }
.hero-gyszam b { font-size: 16px; color: var(--accent); }
.hero-oldal { text-align: right; min-width: 170px; margin-left: auto; }
.hero-ido .timer-display { font-size: 27px; color: var(--accent); }
.hero-progress { height: 8px; background: var(--border); border-radius: 4px; margin: 10px 0 5px; overflow: hidden; }
.hero-progress > div { height: 100%; background: var(--accent); border-radius: 4px; }
.hero-lab { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

.pont-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.pont-kartya {
  margin-bottom: 0;
  border-left: 4px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* Az eredmény mező és a hozzá tartozó sor mindig a kártya aljára tapad */
.pont-alja { margin-top: auto; padding-top: 12px; }

/* Lenyitható leírás (előírat) — a spec előtt, csak ha kell */
.pont-leiras { margin-top: 8px; font-size: 13px; }
.pont-leiras summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  user-select: none;
}
.pont-leiras summary:hover { color: var(--accent); }
.pont-leiras > div { margin-top: 6px; color: var(--muted); white-space: pre-wrap; }

/* Kártyán az értékelő diszkrét, kerek választó — saját nyíllal, ami nem lóg ki */
.pont-kartya .megfelel-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  border-radius: 999px;
  padding: 6px 30px 6px 12px;
  width: auto;
  min-width: 128px;
  cursor: pointer;
  font-weight: 600;
}
.pont-kartya.pk-megfelelt .megfelel-select { background-color: var(--green-bg); color: var(--green); }
.pont-kartya.pk-hibas .megfelel-select { background-color: var(--red-bg); color: var(--red); }

/* AI beolvasó kiemelt blokk az előírat űrlapon */
.ai-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--accent-light);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

/* Vizsgálati pont blokk az előírat űrlapon: leírás és követelmény kettébontva */
.pont-blokk {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--card);
}
/* A pontok alapból ÖSSZECSUKVA sorakoznak: csak a nevük és a besorolásuk látszik,
   a részletek egy kattintásra nyílnak — 12 ponttal így marad áttekinthető */
.pont-blokk:not([open]) { padding: 8px 12px; }
.p-fejlec {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; list-style: none;
}
.p-fejlec::-webkit-details-marker { display: none; }
.p-fejlec::before {
  content: '▸'; color: var(--muted); font-size: 11px; width: 12px; flex: none;
}
.pont-blokk[open] > .p-fejlec { margin-bottom: 10px; }
.pont-blokk[open] > .p-fejlec::before { content: '▾'; }
.p-fejlec .p-cim { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.p-fejlec .badge:empty { display: none; }

/* Az előírat űrlap fejléce rácsban, a mentés-sáv pedig görgetéskor is elérhető */
.e-fej-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.e-szeles { grid-column: span 2; }
.e-lab {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 16px; padding: 12px 0 2px;
  background: var(--card); border-top: 1px solid var(--border);
}
/* Eredmények tábla a pont-szerkesztőben: az alap eredmény sora finoman
   elkülönül a bejelölhető eredmény-típusoktól */
.em-fejlec { align-items: flex-end; }
.em-konf-sor.em-alap {
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
/* Jegyzetek: mintánként több, egyszerű formázással */
.jegyzet-kartya .jegyzet-tetel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 10px;
  background: var(--bg);
}
.jegyzet-eszkozok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.jegyzet-szoveg {
  min-height: 64px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--card);
  line-height: 1.5;
  outline: none;
}
.jegyzet-szoveg:focus { box-shadow: 0 0 0 2px var(--accent); }
.jegyzet-szoveg font[size="5"] { font-size: 1.25em; }
.jegyzet-datum { margin-top: 6px; text-align: right; }

/* A teljes mért idő önálló kis dobozban, a felirat az idő alatt */
.ido-doboz {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  background: var(--bg);
  text-align: center;
}
.ido-doboz .hero-ido { margin: 0; }
.ido-doboz .ido-cimke {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Dátumok egymás alatt (létrehozás, lezárás, újranyitások) */
.hero-datumok { margin-top: 8px; line-height: 1.55; }

/* Külső vizsgálatok blokkja a minta oldalán */
.kulso-blokk .kulso-tetel {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
}
.kulso-blokk .kulso-tetel .em-mezok { margin-top: 6px; }

/* A vizsgálat leírása: teljes szélességű, több soros mező */
.pont-leiras-mezo { margin-top: 10px; }
.pont-leiras-mezo textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

/* Előíratok lista: termékkártyák rácsban, kategória-színnel */
.termek-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.termek-racs .card.empty { grid-column: 1 / -1; }
.termek-kartya {
  margin-bottom: 0;
  border-left: 4px solid var(--border);
  display: flex;
  flex-direction: column;
}
.termek-kartya.kat-gyartaskozi { border-left-color: var(--accent); }
.termek-kartya.kat-kesztermek { border-left-color: #7c3aed; }
.termek-nev { font-size: 15px; }
.termek-szamok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.termek-szam { background: var(--bg); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.tsz-cimke {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.tsz-ertek { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tsz-ertek.hianyzik { color: var(--amber); font-weight: 600; }
.termek-lab { margin-top: auto; padding-top: 12px; }
.hero-szam { font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1.1; }

/* Termék-oldal: vizsgálati pontok listás sorai, teljes leírással */
/* A pontokat vastagabb vonal választja el, hogy a ponton belüli halvány
   műszer-elválasztóval ne folyjon össze */
.ep-sor { padding: 16px 0; border-bottom: 2px solid rgba(15, 40, 70, 0.15); }
.ep-sor:first-child { padding-top: 2px; }
.ep-sor:last-child { border-bottom: none; padding-bottom: 2px; }
.ep-nev { font-weight: 700; margin-bottom: 6px; }
.ep-leiras { font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; white-space: pre-wrap; }

/* Kategória-fejléc a minta pont-rácsában (teljes szélesség, csoportgombokkal) */
.pont-kat-fejlec {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 -2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pont-kat-fejlec:first-child { margin-top: 0; }
.pont-kat-fejlec button { text-transform: none; letter-spacing: 0; }

/* Csoportos indítás vezérlősávja a pont-rács tetején */
.csoport-sav {
  background: var(--accent-light);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
}
.csoport-sav-szoveg {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--accent);
}
.tema-modern .hero-szam {
  background: linear-gradient(90deg, #002e6c, #1a4a8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tema-modern .termek-kartya { border-left-width: 4px; border-left-style: solid; border-left-color: var(--border); }
.tema-modern .termek-kartya.kat-gyartaskozi { border-left-color: var(--accent); }
.tema-modern .termek-kartya.kat-kesztermek { border-left-color: #7c3aed; }

/* Termék részletei: előírat és specifikáció egymás mellett, váltogatás nélkül */
.kombo-fejlec, .kombo-sor {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 1.6fr 1.6fr;
  gap: 16px;
  padding: 11px 0;
}
.kombo-fejlec {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  padding-top: 0;
}
.kombo-sor { border-bottom: 1px solid var(--border); font-size: 13.5px; align-items: start; }
.kombo-sor:last-child { border-bottom: none; padding-bottom: 0; }
.kombo-nev { font-weight: 700; }
.kombo-leiras { color: var(--muted); white-space: pre-wrap; }
.kombo-spec {
  white-space: pre-wrap;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
}
@media (max-width: 800px) {
  .kombo-fejlec { display: none; }
  .kombo-sor { grid-template-columns: 1fr; gap: 6px; }
  .kombo-leiras::before { content: 'Előírat: '; font-weight: 600; }
  .kombo-spec::before { content: 'Specifikáció: '; font-weight: 600; color: var(--muted); }
}

/* Beállítások oldal: két hasáb széles képernyőn, AI szekció teljes szélességben */
.beall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
@media (max-width: 900px) { .beall-grid { grid-template-columns: 1fr; } }

.ai-szolg-sor { padding: 14px 0 6px; }
.ai-szolg-sor + .ai-szolg-sor { border-top: 1px solid var(--border); }
.ai-szolg-fej { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Saját párbeszédablakok */
.dialog-doboz { max-width: 430px; }
.dialog-szoveg { font-size: 14px; line-height: 1.5; }
.dialog-mezo { margin-top: 12px; }
button.veszelyes {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
button.veszelyes:hover { opacity: 0.9; color: #fff; border-color: var(--red); }
.pont-kartya.pk-megfelelt { border-left-color: var(--green); }
.pont-kartya.pk-hibas { border-left-color: var(--red); }
.pont-kartya.pk-aktiv { border-left-color: var(--accent); }
.pont-spec {
  font-size: 13px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  white-space: pre-wrap;
}
.split .pont-racs { grid-template-columns: 1fr; }
.tema-modern .pont-kartya { border-left-width: 4px; border-left-style: solid; border-left-color: var(--border); }
.tema-modern .pont-kartya.pk-megfelelt { border-left-color: var(--green); }
.tema-modern .pont-kartya.pk-hibas { border-left-color: var(--red); }
.tema-modern .pont-kartya.pk-aktiv { border-left-color: var(--accent); }
.tema-modern .hero-ido .timer-display {
  background: linear-gradient(90deg, #002e6c, #1a4a8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

main { max-width: 1500px; margin: 0 auto; padding: 20px 22px 60px; }

/* Főkijelző: bal oldalt a minták, jobb oldalt a feladatok és dokumentálandók */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0 24px; align-items: start; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.mini-card { padding: 12px 14px; }
.mini-card .timer-display { font-size: 13px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Osztott nézetben a két panel egymástól függetlenül görgethető */
.split .minta-panel {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
@media (max-width: 950px) {
  .split { grid-template-columns: 1fr; }
  .split .minta-panel { max-height: none; overflow-y: visible; padding-right: 0; }
}
.split .viz-row { grid-template-columns: 1fr 1fr; }
.panel-cim { margin: 0; font-size: 19px; color: var(--text); text-transform: none; letter-spacing: 0; }

h1 { font-size: 22px; margin: 8px 0 16px; }
h2 { font-size: 16px; margin: 24px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.clickable { cursor: pointer; }
.card.clickable { transition: box-shadow 0.12s; }
.card.clickable:hover { box-shadow: 0 3px 10px rgba(15, 40, 70, 0.1); }
/* A választó-felugrók kattintható sorai (anyag/műszer/régebbi szám) */
.av-elem:hover, .av-regi:hover { background: rgba(15, 40, 70, 0.05); border-radius: 6px; }

/* A reagensek és a műszerek egy halvány dobozban: látszik, hogy összetartoznak,
   de a köztük lévő vékony vonal miatt nem folynak össze */
.pont-anyag-blokk {
  background: var(--bg); border-radius: 8px;
  padding: 8px 10px; margin-top: 12px;
}
.pont-anyag-blokk .pont-anyagok:first-child { margin-top: 0; }
.pont-muszer-sor { border-top: 1px solid rgba(15, 40, 70, 0.09); padding-top: 6px; }

/* Összetett eredmény-mezők (átlag, egyedi, százalék, kopás) a pont-kártyán.
   A feliratok különböző hosszúak (van, ahol hosszabb a követelmény), ezért a címke-sor
   nyúlik, a beviteli mező pedig MINDIG a cella aljára kerül — így egy vonalban állnak. */
.em-mezok { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; align-items: stretch; }
.em-sor { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
/* A hosszú, körülírt követelmény ne nyújtsa szét a kártyát: legfeljebb két sor,
   a teljes szöveg a mező buborékában (title) marad meg */
.em-sor > span {
  flex: 1 1 auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.em-sor input { width: 100%; margin-top: auto; }
.em-sor .em-spec { font-weight: 400; opacity: 0.75; }
/* Kopásnál a veszteség (és a KÖVETELMÉNYE) a két tömeg-mező mellett, ugyanolyan
   magasan, mint a beviteli mezők */
.em-kopas-ertek { margin-top: auto; padding: 8px 0; font-size: 13px; color: var(--text); }

/* A pont-kártya fő elválasztói vastagabbak (a kártyán belüli halvány vonalaktól
   megkülönböztetve): az eredmény-blokk fölött és az óra-sor fölött */
.pont-alja { border-top: 2px solid rgba(15, 40, 70, 0.13); }
.pont-akciosor { margin-top: 12px; padding-top: 10px; border-top: 2px solid rgba(15, 40, 70, 0.13); }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.folyamatban { background: var(--accent-light); color: var(--accent); }
.badge.lezart { background: #e5e7eb; color: #4b5563; }
.badge.ok { background: var(--green-bg); color: var(--green); }
.badge.rossz { background: var(--red-bg); color: var(--red); }
.badge.doku { background: var(--amber-bg); color: var(--amber); }
/* a minta oldalán a doku-jelvény átvisz a Dokumentálás oldalra */
.badge.doku-ugras { cursor: pointer; }
.badge.doku-ugras:hover { filter: brightness(0.94); text-decoration: underline; }
.badge.futo { background: var(--red-bg); color: var(--red); animation: pulse 1.5s infinite; }
/* Termék-kategória: a kártya bal szegélyének lila színéhez illeszkedik */
.badge.kategoria-kesz { background: #ede9fe; color: #6d28d9; }
/* Mezőnkénti követelmények a termék-oldali pont alatt */
.pont-spec-mezo { margin-top: 2px; }

@keyframes pulse { 50% { opacity: 0.55; } }

/* Futó óra jelzése: halkan pulzáló pont az idő előtt (szó nélkül).
   A pont és az idő közös blokkban, függőlegesen egy vonalban. */
.timer-blokk { display: inline-flex; align-items: center; }
.futo-pont {
  width: 8px;
  height: 8px;
  margin-right: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 1.5s infinite;
}
/* A teljes mért idő dobozában ne jelenjen meg — a doboz elmozdulna tőle */
.ido-doboz .futo-pont { display: none; }

.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }

button {
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { opacity: 0.9; color: #fff; }
button.danger { color: var(--red); }
button.danger:hover { border-color: var(--red); }
button.small-btn { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input[type="text"], input[type="password"], input[type="date"], select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  width: 100%;
}
textarea { resize: vertical; min-height: 60px; }
label.field { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
label.field > * { margin-top: 4px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.viz-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(160px, 2fr) auto 90px auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* Az értékelés legördülő kompakt — az eredmény alapján úgyis automatikus */
select.megfelel-select { width: 118px; padding: 5px 6px; font-size: 13px; color: var(--muted); }

/* Kis elválasztójel az azonosító és a név között */
.cim-elv { margin: 0 12px; color: var(--muted); font-weight: 400; }
.viz-row:last-child { border-bottom: none; }
@media (max-width: 800px) { .viz-row { grid-template-columns: 1fr 1fr; } }

.timer-display { font-variant-numeric: tabular-nums; font-weight: 700; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.stat .num { font-size: 24px; font-weight: 700; color: var(--accent); }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }

table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: #f8fafc; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }

.spec { font-size: 13px; color: var(--muted); white-space: pre-wrap; }

.progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.progress-bar > div { height: 100%; background: var(--accent); border-radius: 3px; }

#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1c2733;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 100;
  max-width: 90vw;
}
#toast.show { opacity: 1; }

.pont-sor { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin-bottom: 8px; align-items: start; }
.pont-sor.harom { grid-template-columns: 1fr 1.4fr 1.4fr auto; }
.pont-fejlec { margin-bottom: 2px; }
@media (max-width: 700px) { .pont-sor.harom { grid-template-columns: 1fr 1fr; } .pont-fejlec { display: none; } }

.empty { text-align: center; color: var(--muted); padding: 30px 10px; }


.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(150deg, #003a86 0%, #002e6c 55%, #001f49 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.login-card {
  background: var(--card);
  border-radius: 14px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0, 20, 35, 0.35);
}
.login-brand {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.login-sub {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0 24px;
}
.login-gomb { width: 100%; padding: 11px; font-size: 15px; margin-top: 6px; }
.login-hiba { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 4px; }

.kov-sor { padding: 8px 0; border-bottom: 1px solid var(--border); }
.kov-sor:last-child { border-bottom: none; }

.oszlop-diagram { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding-top: 8px; }
.oszlop-hely { flex: 1; min-width: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.oszlop { width: 100%; max-width: 46px; background: var(--accent); border-radius: 4px 4px 0 0; }
.oszlop-cimke { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.oszlop-ertek { font-size: 10px; color: var(--muted); margin-bottom: 2px; white-space: nowrap; }

.sav-sor { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr minmax(120px, auto); gap: 10px; align-items: center; padding: 7px 0; }
.sav-hatter { background: var(--border); border-radius: 4px; height: 14px; overflow: hidden; }
.sav { background: var(--accent); height: 100%; border-radius: 4px; }
.sav-nev { font-size: 14px; }
.sav-ertek { font-size: 13px; color: var(--muted); text-align: right; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 45, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal { max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; }

/* Mintázás űrlap: tömör, rácsos elrendezés — a rövid mezők egymás mellett futnak,
   a mennyiség és a hivatkozások pedig saját, halvány hátterű blokkban */
.mz-urlap .field { margin-bottom: 8px; }
.mz-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.mz-racs > #mz-tipus-mezok { display: contents; } /* a típusfüggő mezők ugyanabban a rácsban */
.mz-szeles { grid-column: span 2; }
.mz-blokk { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; }
.mz-blokk-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mz-blokk-cim { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.mz-blokk input, .mz-blokk select { background: #fff; }

/* A mennyiség egy sorban fut — 1-1 szám, rövid mértékegység, fix kategóriák */
.mz-alap { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.mz-alap .field { margin-bottom: 0; }
.mz-kicsi { width: 92px; flex: 0 0 auto; }
.mz-resz-sor { display: flex; align-items: center; gap: 6px; }
.mz-resz-ertek { width: 64px; }
.mz-resz-cimke { width: 108px; }
/* Hivatkozási számok: tárolónként egy kis doboz, sorszámozva */
.mz-hiv-fej { font-size: 12px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.mz-hivatkozasok { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.mz-hiv-doboz { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.mz-hiv-sorszam { font-size: 11px; color: var(--muted); min-width: 16px; text-align: right; }
.mz-hiv-doboz input { width: 84px; padding: 5px 8px; }
.mz-elonezet { margin-top: 10px; font-size: 13px; }
.mz-mennyiseg-kiiras { margin-top: 8px; font-weight: 600; }
/* A bejegyzés a saját kártyáján nyílik le szerkesztésre — olyankor a rács
   teljes szélességét elfoglalja, hogy elférjen az űrlap */
.mz-szerkeszto > .card { margin: 14px 0 0; }
.mintazas-kartya.szerkesztes-alatt { grid-column: 1 / -1; }
/* A kártya lába: fent a dátumok és az óra, alul vonallal elválasztva a műveletek —
   balra a mintázás menetét vezérlő gombok, jobbra a ritkább műveletek szöveges linkként */
.mz-lab-fej { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mz-datumok { display: flex; flex-direction: column; gap: 2px; }
.mz-gombok {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.mz-mellek { display: flex; gap: 12px; }
.mz-link {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 12px; font-family: inherit;
}
.mz-link:hover { color: var(--accent); text-decoration: underline; }
.mz-link.danger:hover { color: var(--red); }
.mz-hiv-kapcsolo { margin: 14px 0 0; }

/* Reagensek és anyagok: számok monospace-szel, chipek a vizsgálati pontokon */
.mono { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 13px; }
.pont-anyagok { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
/* A minta pont-kártyáján a chipek balra sorakoznak (több sorba is tördelve), a
   hozzáadó gomb pedig MINDIG a sor jobb szélén marad — ezért a sor maga nem törik */
.pont-anyag-blokk .pont-anyagok {
  flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px;
}
.pont-anyag-blokk .pont-anyagok > button { flex: none; }
.pa-chipek { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; }
.anyag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12px;
}
.anyag-chip .anyag-torol,
.anyag-chip .ep-anyag-torol { border: none; background: none; color: var(--red); cursor: pointer; padding: 0 2px; font-size: 12px; }

/* Az anyag-választóban a régebbi számok lenyíló listája */
.av-elem-doboz { margin-bottom: 6px; }
.av-regiek { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.av-regi {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
}
.av-regi:hover { background: var(--accent-light); }

/* Előírat szerint szükséges, de még fel nem jegyzett anyag — kattintásra rögzül */
.anyag-chip.anyag-hianyzo {
  border-style: dashed; border-color: var(--accent); color: var(--accent);
  background: none; cursor: pointer; font-weight: 600;
}
.anyag-chip.anyag-hianyzo:hover { background: var(--accent-light); }

/* Lebegő űrlap-ablak: a főoldali gyorsgombok ebben nyitják a meglévő űrlapokat */
.overlay.lebego { align-items: flex-start; overflow-y: auto; }
.lebego-doboz { width: min(680px, 100%); margin: 32px auto; }
.lebego-doboz .card { box-shadow: 0 24px 64px rgba(15, 25, 40, 0.35); }

.ai-loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--accent); font-weight: 600; }
.spinner {
  width: 18px; height: 18px;
  border: 3px solid var(--accent-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================
   Modern kinézet — kapcsolható alternatíva (fejléc: "Modern kinézet")
   A klasszikus téma marad az alapértelmezés, ez csak felülírás.
   =================================================================== */

body.tema-modern {
  --bg: #eff3f9;
  --card: #ffffff;
  --text: #16213a;
  --muted: #6b7a99;
  --accent: #002e6c;
  --accent-sotet: #001f49;
  --accent-vilagos: #1a4a8f;
  --accent-light: #e4ebf6;
  --green: #12694a;
  --green-bg: #dcf0e7;
  --red: #a4231f;
  --red-bg: #fbe4e3;
  --amber: #8a5a00;
  --amber-bg: #fdf0d5;
  --border: #dfe6f0;
  --radius: 14px;
  background: linear-gradient(180deg, #e7edf7 0%, #f2f5fa 340px);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

.tema-modern header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(110, 125, 190, 0.16);
}

.tema-modern .brand {
  background: linear-gradient(90deg, #002e6c, #1a4a8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tema-modern nav { background: #e4ebf6; }
.tema-modern nav a { border-radius: 999px; }
.tema-modern nav a:hover { color: var(--accent); }
.tema-modern nav a.active {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 46, 108, 0.22);
}
.tema-modern .settings-btn { border-radius: 999px; border-color: #d9dfef; }
.tema-modern .avatar { background: linear-gradient(135deg, #002e6c, #1a4a8f); }

.tema-modern .card {
  border: none;
  box-shadow: 0 1px 2px rgba(23, 35, 80, 0.06), 0 8px 24px rgba(23, 35, 80, 0.07);
}
.tema-modern .card.clickable { transition: box-shadow 0.15s, transform 0.15s; }
.tema-modern .card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(23, 35, 80, 0.1), 0 16px 36px rgba(23, 35, 80, 0.13);
}

.tema-modern button { border-radius: 10px; border-color: #d9dfef; }
.tema-modern button:hover { border-color: var(--accent); }
.tema-modern button.primary {
  background: linear-gradient(135deg, #002e6c, #123f80);
  border: none;
  box-shadow: 0 4px 14px rgba(0, 46, 108, 0.3);
}
.tema-modern button.primary:hover { opacity: 0.92; }

.tema-modern input[type="text"],
.tema-modern input[type="password"],
.tema-modern input[type="date"],
.tema-modern select,
.tema-modern textarea {
  border-radius: 10px;
  border-color: #d9dfef;
  background: #fbfcff;
}
.tema-modern input:focus, .tema-modern select:focus, .tema-modern textarea:focus {
  outline: 2px solid var(--accent-light);
  border-color: var(--accent);
}

.tema-modern .stat {
  border: none;
  box-shadow: 0 1px 2px rgba(23, 35, 80, 0.06), 0 8px 24px rgba(23, 35, 80, 0.07);
}
.tema-modern .stat .num {
  background: linear-gradient(90deg, #002e6c, #1a4a8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tema-modern .progress-bar { height: 8px; border-radius: 4px; background: #e7eaf5; }
.tema-modern .progress-bar > div { background: linear-gradient(90deg, #002e6c, #2a63ad); }

.tema-modern table {
  box-shadow: 0 1px 2px rgba(23, 35, 80, 0.06), 0 8px 24px rgba(23, 35, 80, 0.07);
  border-radius: var(--radius);
}
.tema-modern th { background: #f3f5fd; }

.tema-modern .oszlop { background: linear-gradient(180deg, #1a4a8f, #002e6c); border-radius: 6px 6px 0 0; }
.tema-modern .sav { background: linear-gradient(90deg, #002e6c, #2a63ad); }
.tema-modern .sav-hatter { background: #e7eaf5; }

.tema-modern .login-screen {
  background: linear-gradient(150deg, #001f49 0%, #002e6c 55%, #1a4a8f 100%);
}
.tema-modern .login-brand {
  background: linear-gradient(90deg, #002e6c, #1a4a8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tema-modern .login-card { border-radius: 18px; }

.tema-modern h1 { letter-spacing: -0.02em; }
.tema-modern .badge { padding: 3px 11px; }
.tema-modern .badge.folyamatban { background: var(--accent-light); color: var(--accent); }


/* ---------- Minta lista: kereső + gomb mögé rejtett szűrőpanel ---------- */

.szuro-fejlec { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.szuro-fejlec .field { flex: 0 1 340px; margin-bottom: 0; }
.szuro-fejlec button { white-space: nowrap; }

.szuro-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
@media (max-width: 700px) { .szuro-panel { grid-template-columns: 1fr 1fr; } }


/* ---------- Dokumentálás oldal (dashboard elrendezés) ---------- */

.doku-fej { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }

.stat-csempek { display: flex; gap: 10px; }
.stat-csempe {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 20px;
  min-width: 108px;
  text-align: center;
}
.stat-szam { font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.stat-cimke { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 3px; }

.doku-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 1050px) { .doku-grid { grid-template-columns: minmax(0, 1fr); } .doku-oldalsav { order: -1; } }

/* Fülek: szegmentált pill-sáv, mint a fő navigáció */
.tab-sav {
  display: inline-flex;
  gap: 3px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 14px;
  max-width: 100%;
  overflow-x: auto;
}
.tab-sav button {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 15px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.tab-sav button:hover { color: var(--accent); border: none; }
.tab-sav button.active { background: var(--accent-light); color: var(--accent); }

/* Várólista és sablonok: kártyarács */
.doku-tetel-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
@media (max-width: 950px) { .doku-tetel-racs { grid-template-columns: minmax(0, 1fr); } }
.doku-tetel { margin-bottom: 0; display: flex; flex-direction: column; }
.doku-tetel-lab { margin-top: auto; }

/* Áttekintésből átugorva a cél-kártya rövid kiemelést kap */
.doku-tetel.doku-kiemel, .bd-sor.doku-kiemel { animation: doku-kiemel 2.2s ease; }
@keyframes doku-kiemel {
  0%, 55% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
  100% { border-color: var(--border); box-shadow: none; }
}

.doku-sorok {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 240px;
  scrollbar-width: thin;
  scrollbar-color: #b9c4d0 transparent;
}
.doku-sorok::-webkit-scrollbar { width: 8px; height: 8px; }
.doku-sorok::-webkit-scrollbar-track { background: transparent; }
.doku-sorok::-webkit-scrollbar-thumb {
  background: #b9c4d0;
  border-radius: 8px;
  border: 2px solid var(--bg);
}
.doku-sorok::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.doku-sablon-mezok { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }

/* Aktív füzet kártya az oldalsávban */
.fuzet-hero {
  background: linear-gradient(140deg, var(--accent) 0%, #001f49 100%);
  color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.fuzet-cimke { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.fuzet-szam { font-size: 34px; font-weight: 700; margin-top: 4px; }
.fuzet-info { font-size: 13px; opacity: 0.85; margin-top: 2px; }
.fuzet-gomb {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 12.5px;
  padding: 7px 12px;
}
.fuzet-gomb:hover { background: rgba(255, 255, 255, 0.26); border-color: #fff; color: #fff; }

.fuzet-ures { border-style: dashed; }
.fuzet-sor { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.fuzet-sor:last-child { border-bottom: none; }

/* A beírt dokumentációk füzetenként csoportosítva — a csoport fejléce elválasztja őket */
.bd-fuzet-cim {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 600; font-size: 13px;
  padding: 4px 0 6px;
  color: var(--accent);
}
.bd-fuzet-cim + .viz-row { border-top: none; }
/* a csoport utolsó sora alá nem kell sorelválasztó — ott már a következő fejléc jön */
.viz-row:has(+ .bd-fuzet-cim) { border-bottom: none; }
.bd-fuzet-cim:not(:first-child) { margin-top: 10px; }
.bd-fuzet-cim.kovetkezo { margin-top: 14px; border-top: 2px solid var(--border); padding-top: 12px; }

.tema-modern .stat-csempe { border: none; box-shadow: 0 1px 2px rgba(23, 35, 80, 0.06), 0 8px 24px rgba(23, 35, 80, 0.07); }
.tema-modern .tab-sav { border: none; box-shadow: 0 1px 2px rgba(23, 35, 80, 0.06), 0 8px 24px rgba(23, 35, 80, 0.07); border-radius: 999px; }
.tema-modern .tab-sav button { border-radius: 999px; }
.tema-modern .fuzet-hero { background: linear-gradient(140deg, #002e6c 0%, #1a4a8f 100%); box-shadow: 0 10px 30px rgba(23, 35, 80, 0.25); }

/* ===== Beállítások: menü sorrendezése ===== */
.menu-rend { display: flex; flex-direction: column; gap: 6px; }

.menu-sor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  transition: border-color 0.12s, background 0.12s;
}
.menu-sor:hover { border-color: var(--accent); }
.menu-sor.rejtett { opacity: 0.5; background: var(--bg); }

.menu-ikon { display: inline-flex; color: var(--accent); }
.menu-ikon svg { width: 19px; height: 19px; }
.menu-nev { font-weight: 600; font-size: 14px; flex: 1; }
.menu-pipa { flex: none; }

.ikon-btn {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 9px;
  cursor: pointer;
}
.ikon-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.ikon-btn:disabled { opacity: 0.35; cursor: default; }

/* ===== Beállítások: felhasználók ===== */
.fh-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.fh-sor:last-child { border-bottom: none; }
.fh-fo { min-width: 220px; }

/* ===== Belátás sáv (az admin más felhasználó munkáját nézi) ===== */
#belatas-sav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--amber-bg);
  color: var(--amber);
  border-bottom: 1px solid var(--amber);
  font-size: 13px;
  font-weight: 600;
}
#belatas-sav b { color: var(--amber); }
#belatas-sav button {
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#belatas-sav button:hover { background: var(--amber); color: #fff; }
/* a fejléc és az oldalsáv lejjebb csúszik, hogy a sáv ne takarja el */
body.belatas-aktiv header { top: var(--belatas-magassag, 45px); }
body.belatas-aktiv.nezet-oldalsav #oldalsav { top: calc(var(--belatas-magassag, 45px) + 57px); }

/* Belépési kísérletek naplója a Felhasználók oldalon */
.fh-naplo-sor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.fh-naplo-sor:last-child { border-bottom: none; }