:root {
  --szin-hatter: #f5f6f8;
  --szin-kartya: #ffffff;
  --szin-szoveg: #1f2933;
  --szin-halvany: #6b7280;
  --szin-kiemelt: #1d4ed8;
  --szin-kiemelt-sotet: #1e40af;
  --szin-keret: #e5e7eb;
  --szin-hiba: #b91c1c;
  --szin-ok: #15803d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--szin-hatter);
  color: var(--szin-szoveg);
  line-height: 1.5;
  font-size: 15px;
}
.rejtett { display: none !important; }
.halvany { color: var(--szin-halvany); }
.hiba { color: var(--szin-hiba); margin: .25rem 0 .75rem; }
.ok { color: var(--szin-ok); }
.jobbra { text-align: right; }

.kartya { background: var(--szin-kartya); border: 1px solid var(--szin-keret); border-radius: 12px; padding: 2rem 2.5rem; }
.kozep { max-width: 420px; margin: 10vh auto; }
.kartya h1 { margin: 0 0 .25rem; font-size: 2rem; letter-spacing: -.02em; }
.alcim { margin: 0 0 1.5rem; color: var(--szin-halvany); }

label { display: block; margin-bottom: .8rem; font-size: .92rem; }
label.sor { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea {
  display: block; width: 100%; margin-top: .2rem;
  padding: .5rem .65rem; font: inherit;
  border: 1px solid var(--szin-keret); border-radius: 8px; background: #fff;
}
.eszkozok input[type=search], .eszkozok select { display: inline-block; width: auto; margin: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--szin-kiemelt); outline-offset: 1px; border-color: transparent; }
button {
  font: inherit; padding: .55rem 1.1rem; border: 0; border-radius: 8px;
  background: var(--szin-kiemelt); color: #fff; cursor: pointer; white-space: nowrap;
}
button:hover { background: var(--szin-kiemelt-sotet); }
button:disabled { opacity: .6; cursor: default; }
button.masodlagos { background: #fff; color: var(--szin-szoveg); border: 1px solid var(--szin-keret); }
button.masodlagos:hover { background: var(--szin-hatter); }
button.link { background: none; color: var(--szin-kiemelt); padding: 0; }
button.link:hover { text-decoration: underline; background: none; }
button.kicsi { padding: .25rem .6rem; font-size: .85rem; }

.fejlec { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 1.5rem; background: var(--szin-kartya); border-bottom: 1px solid var(--szin-keret); }
.logo { font-weight: 700; font-size: 1.2rem; }
.fejlec nav { display: flex; gap: .5rem; flex: 1; }
.fejlec nav a { color: var(--szin-szoveg); text-decoration: none; padding: .25rem .6rem; border-radius: 6px; }
.fejlec nav a.aktiv, .fejlec nav a:hover { background: var(--szin-hatter); color: var(--szin-kiemelt); }
.felhasznalo { color: var(--szin-halvany); }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.lap h2 { margin-top: 0; }
.lap-fej { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.lap-fej h2, .lap-fej h3 { margin: 0; }
.eszkozok { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.urlap-keskeny { max-width: 380px; }
.racs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; max-width: 760px; }
.racs-2 .teljes { grid-column: 1 / -1; }

.tabla { border-collapse: collapse; width: 100%; background: var(--szin-kartya); border: 1px solid var(--szin-keret); border-radius: 8px; }
.tabla th, .tabla td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--szin-keret); vertical-align: top; }
.tabla th { background: var(--szin-hatter); font-weight: 600; }
.tabla tr.kattinthato { cursor: pointer; }
.tabla tr.kattinthato:hover { background: #f0f4ff; }
.tabla tr.inaktiv td { color: var(--szin-halvany); }
.jelveny { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; background: var(--szin-hatter); color: var(--szin-halvany); }
.jelveny.kek { background: #dbeafe; color: var(--szin-kiemelt-sotet); }
.jelveny.zold { background: #dcfce7; color: var(--szin-ok); }

.fulek { display: flex; gap: .25rem; border-bottom: 1px solid var(--szin-keret); margin-bottom: 1rem; flex-wrap: wrap; }
.ful { background: none; color: var(--szin-halvany); border-radius: 6px 6px 0 0; padding: .5rem .9rem; }
.ful:hover { background: var(--szin-hatter); }
.ful.aktiv { color: var(--szin-kiemelt); border-bottom: 2px solid var(--szin-kiemelt); border-radius: 0; }

dialog { border: 1px solid var(--szin-keret); border-radius: 12px; padding: 1.5rem 2rem; width: min(760px, 95vw); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h3 { margin-top: 0; }
.dialog-gombok { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.jog-lista { columns: 2; column-gap: 2rem; }
.jog-lista label { break-inside: avoid; margin-bottom: .35rem; }
.jog-csoport { font-weight: 600; margin: .5rem 0 .25rem; break-after: avoid; }
.jelolt-lista { max-height: 50vh; overflow: auto; border: 1px solid var(--szin-keret); border-radius: 8px; padding: .5rem .75rem; }
.jelolt-lista label { margin: .15rem 0; }

.labjegyzet { text-align: center; font-size: .85rem; color: var(--szin-halvany); padding: 1rem; }
@media (max-width: 700px) { .racs-2 { grid-template-columns: 1fr; } .jog-lista { columns: 1; } }

/* 2. fázis: bizonylat-szerkesztő */
.kis { font-size: .85rem; }
.kis li { margin-bottom: .2rem; }
#tetel-tabla input, #tetel-tabla select { padding: .3rem .4rem; margin: 0; font-size: .9rem; }
#tetel-tabla td { padding: .25rem .35rem; }
#tetel-tabla .sz { width: 2rem; }
#tetel-tabla .menny { width: 5.5rem; }
#tetel-tabla .egys { width: 4.5rem; }
#tetel-tabla .ar { width: 7.5rem; }
#tetel-tabla .kedv { width: 4.5rem; }
#tetel-tabla .afa { width: 5rem; }
.csakolvas input, .csakolvas select, .csakolvas textarea { background: var(--szin-hatter); border-color: transparent; }
.jelveny.sarga { background: #fef3c7; color: #92400e; }
.jelveny.piros { background: #fee2e2; color: #991b1b; }
.jelveny.szurke { background: #e5e7eb; color: #374151; }
.arlista-kartya { background: var(--szin-kartya); border: 1px solid var(--szin-keret); border-radius: 8px; padding: .75rem 1rem; margin-bottom: .75rem; }
.arlista-kartya h4 { margin: 0 0 .25rem; }
.lepes-sor { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr 7rem 2rem; gap: .4rem; align-items: end; margin-bottom: .4rem; }
.lepes-sor label { margin: 0; font-size: .8rem; }
.lepes-sor select[multiple] { height: 4.2rem; }