/* Kiegyenlítő — „főkönyv”: zsályazöld vonalas papír, kék-fekete tinta, piros margóvonal,
   sötétkék vászonkötés oldalsáv. Egy betűcsalád (Archivo), a szélesség a kifejezőeszköz. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papir: #edf1e8;        /* főkönyvi lap */
  --lap: #f8faf5;          /* kiemelt lap (táblák, űrlapok) */
  --tinta: #17263a;        /* kék-fekete tinta */
  --tinta-2: #536273;      /* halvány tinta */
  --vonal: #cdd9c7;        /* zöld vonalazás */
  --vonal-eros: #9fb39a;
  --margo: #c2413a;        /* piros margóvonal, negatív, hiba */
  --kek: #1e4fa8;          /* töltőtoll-kék: műveletek, hivatkozások */
  --kek-sotet: #163d85;
  --pecset: #27694b;       /* párosítva */
  --pecset-h: #dcebdf;
  --okker: #8f5d0e;        /* vár */
  --okker-h: #f4e7cc;
  --hiba-h: #f6dedb;
  --kotes: #1b2b45;        /* oldalsáv: vászonkötés */
  --kotes-szoveg: #c9d3e3;
  --kotes-aktiv: #f3f6fb;
  --fokusz: #e0a21b;
  --sugar: 5px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papir: #121916; --lap: #18211d; --tinta: #e1e8e1; --tinta-2: #9aa79f;
    --vonal: #2a3731; --vonal-eros: #3e5047; --margo: #ee8a80; --kek: #8fb3f2; --kek-sotet: #b0c9f6;
    --pecset: #7fcaa2; --pecset-h: #1d3329; --okker: #e2b45e; --okker-h: #362b17; --hiba-h: #3b201e;
    --kotes: #0d1522; --kotes-szoveg: #a8b4c6; --kotes-aktiv: #ffffff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.5 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  background: var(--papir);
  color: var(--tinta);
}
a { color: var(--kek); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--kek-sotet); }
:focus-visible { outline: 2px solid var(--fokusz); outline-offset: 2px; }
code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }
pre { background: var(--papir); border: 1px solid var(--vonal); padding: .75rem 1rem; border-radius: var(--sugar); overflow-x: auto; }
small { font-size: .8125rem; }
.halvany { color: var(--tinta-2); }
.negativ { color: var(--margo); }
.rejtett { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Váz: kötés + lap ─────────────────────────────────────────────────── */
.vaz { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--kotes) 232px, transparent 232px); }
.kotes {
  background: var(--kotes);
  color: var(--kotes-szoveg);
  padding: 1.5rem 0 1rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marka { display: block; padding: 0 1.25rem; color: var(--kotes-aktiv); text-decoration: none;
  font-stretch: 118%; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.marka:hover { color: var(--kotes-aktiv); }
.marka small { display: block; font-stretch: 100%; font-weight: 400; font-size: .75rem; color: var(--kotes-szoveg); letter-spacing: 0; }
.menu { display: flex; flex-direction: column; gap: 1.25rem; }
.menu-csoport h2 { margin: 0 0 .25rem; padding: 0 1.25rem; font-size: .75rem; font-weight: 500; color: #7f8ea6; }
.menu a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .4rem 1.25rem; color: var(--kotes-szoveg); text-decoration: none; border-left: 3px solid transparent;
}
.menu a:hover { color: var(--kotes-aktiv); background: rgba(255,255,255,.04); }
.menu a[aria-current="page"] { color: var(--kotes-aktiv); border-left-color: var(--margo); background: rgba(255,255,255,.06); font-weight: 600; }
.jelveny { min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; text-align: center; font-size: .75rem; font-weight: 700;
  background: #e9b949; color: #1b2b45; }
.jelveny.hiba { background: var(--margo); color: #fff; }
.kotes-lab { margin-top: auto; padding: 0 1.25rem; font-size: .8125rem; }
.kotes-lab form { display: flex; flex-direction: column; gap: .25rem; }
.kotes-lab button { align-self: flex-start; padding: 0; background: none; border: 0; color: var(--kotes-aktiv);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }

/* a lap: bal szélén a főkönyvi dupla piros margóvonal */
.lap {
  min-width: 0;
  padding: 2rem clamp(1rem, 3vw, 2.75rem) 4rem clamp(1.5rem, 4vw, 3.5rem);
  background-image: linear-gradient(to right, transparent 10px, var(--margo) 10px, var(--margo) 11px,
    transparent 11px, transparent 14px, var(--margo) 14px, var(--margo) 15px, transparent 15px);
  background-repeat: no-repeat; background-size: 16px 100%;
}
.lap > * { max-width: 1180px; }

/* ── Tipográfia ───────────────────────────────────────────────────────── */
.fejlec { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem;
  margin-bottom: 1.5rem; }
h1 { margin: 0; font-size: 2.125rem; line-height: 1.1; font-stretch: 116%; font-weight: 650; letter-spacing: -.02em; }
h2 { margin: 0 0 .75rem; font-size: 1.125rem; font-stretch: 108%; font-weight: 650; }
.alcim { margin: .35rem 0 0; color: var(--tinta-2); max-width: 70ch; }
.vissza { display: inline-block; margin-bottom: .75rem; font-size: .875rem; text-decoration: none; }
.vissza::before { content: "‹ "; }
p { max-width: 75ch; }

/* ── Szakaszok (lapok) ────────────────────────────────────────────────── */
.szakasz { background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--sugar);
  padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.szakasz > :last-child { margin-bottom: 0; }
.szakasz-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ket-has { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }

/* ── Táblák: főkönyvi vonalazás, dupla vonal a fejléc alatt ───────────── */
.tabla-keret { position: relative; overflow-x: auto; margin: 0 -1.5rem; padding: 0 1.5rem; }
.szakasz > .tabla-keret:first-child { margin-top: -.25rem; }
table { width: 100%; border-collapse: collapse; font-stretch: 92%; }
th, td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vonal); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-size: .8125rem; font-weight: 600; color: var(--tinta-2); border-bottom: 3px double var(--vonal-eros); white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--vonal) 30%, transparent); }
tfoot td { border-top: 3px double var(--vonal-eros); border-bottom: 0; font-weight: 650; }
.j { text-align: right; white-space: nowrap; }
.osszeg { font-stretch: 100%; font-weight: 500; white-space: nowrap; }
td.alig { color: var(--tinta-2); }
tr.athuzott td:not(.gombok) { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--margo); }
tr.lezart td { color: var(--tinta-2); }
td.gombok { white-space: nowrap; text-align: right; }
td .masodsor { display: block; font-size: .8125rem; color: var(--tinta-2); }
.ures { padding: 1.5rem 0; color: var(--tinta-2); }

/* ── Állapotjelzők: bélyegzők ─────────────────────────────────────────── */
.belyeg { display: inline-block; padding: .05rem .5rem; border: 1px solid currentColor; border-radius: 3px;
  font-size: .75rem; font-weight: 600; font-stretch: 96%; white-space: nowrap; line-height: 1.5; }
.belyeg.parositva, .belyeg.kesz { color: var(--pecset); background: var(--pecset-h); }
.belyeg.fuggo, .belyeg.reszben { color: var(--okker); background: var(--okker-h); }
.belyeg.azonositatlan, .belyeg.hiba { color: var(--margo); background: var(--hiba-h); }
.belyeg.semleges { color: var(--tinta-2); background: transparent; }

/* ── Űrlapok, gombok ──────────────────────────────────────────────────── */
form { margin: 0; }
label { display: block; margin-bottom: 1rem; font-size: .875rem; font-weight: 500; }
label input, label select { display: block; width: 100%; margin-top: .3rem; }
input, select {
  font: inherit; font-size: .9375rem; padding: .5rem .65rem; color: var(--tinta);
  background: var(--lap); border: 1px solid var(--vonal-eros); border-radius: var(--sugar);
}
input:focus, select:focus { border-color: var(--kek); outline: 2px solid color-mix(in srgb, var(--kek) 25%, transparent); outline-offset: 0; }
input[type="file"] { padding: .4rem; background: var(--papir); }
input.osszeg-mezo { width: 9.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.jelolo { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 400; }
.jelolo input { width: auto; margin: 0; }
.sor { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.sor > input:not([type="checkbox"]), .sor > select { flex: 1 1 16rem; min-width: 0; }
.szuro { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1.25rem; }
.szuro label { margin: 0; }
.szuro input[type="search"], .szuro input[name="q"] { min-width: 16rem; }

button, .gomb {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .9375rem; font-weight: 600; font-stretch: 104%;
  padding: .5rem 1rem; border: 1px solid var(--kek); border-radius: var(--sugar);
  background: var(--kek); color: #fff; cursor: pointer; text-decoration: none; line-height: 1.3;
}
button:hover, .gomb:hover { background: var(--kek-sotet); border-color: var(--kek-sotet); color: #fff; }
@media (prefers-color-scheme: dark) { button, .gomb { color: #0d1522; } button:hover, .gomb:hover { color: #0d1522; } }
button.masodlagos, .gomb.masodlagos { background: transparent; color: var(--kek); }
button.masodlagos:hover, .gomb.masodlagos:hover { background: color-mix(in srgb, var(--kek) 10%, transparent); color: var(--kek-sotet); }
button.veszely { background: transparent; color: var(--margo); border-color: var(--margo); }
button.veszely:hover { background: var(--hiba-h); color: var(--margo); }
button.kicsi, .gomb.kicsi { padding: .2rem .6rem; font-size: .8125rem; }
button.szoveg { background: none; border: 0; padding: 0; color: var(--kek); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ── Üzenetek ─────────────────────────────────────────────────────────── */
.uzenet { display: flex; gap: .75rem; padding: .8rem 1rem; margin-bottom: 1.25rem; border-radius: var(--sugar);
  border: 1px solid var(--pecset); background: var(--pecset-h); color: var(--tinta); max-width: 1180px; }
.uzenet::before { content: ""; flex: 0 0 4px; border-radius: 2px; background: var(--pecset); }
.uzenet.hiba { border-color: var(--margo); background: var(--hiba-h); }
.uzenet.hiba::before { background: var(--margo); }

/* ── Áttekintő: teendőlista mint főkönyvi tételsor ────────────────────── */
.teendok { list-style: none; margin: 0; padding: 0; }
.teendok li { border-bottom: 1px solid var(--vonal); }
.teendok li:last-child { border-bottom: 0; }
.teendok a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: .85rem 0;
  color: var(--tinta); text-decoration: none; }
.teendok a:hover .teendo-nev { color: var(--kek); text-decoration: underline; text-underline-offset: 2px; }
.teendo-nev { font-weight: 600; font-stretch: 104%; }
.teendo-nev small { display: block; font-weight: 400; color: var(--tinta-2); font-stretch: 100%; }
.teendo-szam { font-size: 1.75rem; font-weight: 650; font-stretch: 120%; line-height: 1; }
.teendok .figyelem .teendo-szam { color: var(--okker); }
.teendok .hiba .teendo-szam { color: var(--margo); }
.teendok .rendben .teendo-szam { color: var(--tinta-2); font-weight: 400; }
.minden-rendben { padding: 1rem 0 .25rem; }
.minden-rendben strong { display: block; font-size: 1.25rem; font-stretch: 112%; color: var(--pecset); }

.adatsor { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; margin: 0 0 1rem; }
.adatsor dt { color: var(--tinta-2); font-size: .875rem; }
.adatsor dd { margin: 0; text-align: right; font-weight: 500; }
.nagy-osszeg { font-size: 1.5rem; font-weight: 650; font-stretch: 112%; }

/* ── Tranzakció: fej + kifutássáv ─────────────────────────────────────── */
.tx-fej { display: grid; grid-template-columns: auto 1fr; gap: .25rem 2.5rem; align-items: end; margin-bottom: 1.5rem; }
.tx-osszeg { font-size: 3rem; line-height: 1; font-weight: 700; font-stretch: 122%; letter-spacing: -.03em; }
.tx-osszeg .penznem { font-size: 1.25rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); margin-left: .35rem; }
.tx-mellek { padding-bottom: .3rem; }
.tx-mellek .belyeg { margin-right: .5rem; }

.adatracs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem 1.75rem; margin: 0; }
.adatracs div { min-width: 0; }
.adatracs dt { font-size: .8125rem; color: var(--tinta-2); }
.adatracs dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.adatracs .szeles { grid-column: 1 / -1; }

.kifutas { margin: .25rem 0 0; }
.kifutas svg { display: block; width: 100%; height: 34px; border-radius: 3px; overflow: hidden; }
.kifutas .sav-alap { fill: var(--papir); stroke: var(--vonal-eros); stroke-width: 1; }
.kifutas .sav-szamla { fill: var(--pecset); }
.kifutas .sav-szamla.paros { fill: color-mix(in srgb, var(--pecset) 68%, var(--lap)); }
.kifutas .sav-beszamitas { fill: url(#csikos-piros); }
.kifutas .sav-maradek { fill: url(#csikos-okker); }
.kifutas .sav-hatar { stroke: var(--tinta); stroke-width: 2; }
.kifutas .csik-p { stroke: var(--margo); stroke-width: 3; }
.kifutas .csik-o { stroke: var(--okker); stroke-width: 3; }
.kifutas-skala { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--tinta-2); margin-top: .3rem; }
.kifutas-skala strong { color: var(--tinta); font-weight: 600; }
.jelmagyarazat { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; list-style: none; margin: .75rem 0 0; padding: 0; font-size: .875rem; }
.jelmagyarazat li { display: inline-flex; align-items: center; gap: .4rem; }
.jelmagyarazat i { width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.jm-szamla { background: var(--pecset); }
.jm-beszamitas { background: repeating-linear-gradient(135deg, var(--margo) 0 2px, transparent 2px 5px); border: 1px solid var(--margo); }
.jm-maradek { background: repeating-linear-gradient(135deg, var(--okker) 0 2px, transparent 2px 5px); border: 1px solid var(--okker); }

.kezi-osszesito { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 3px double var(--vonal-eros); }
.kezi-osszesito .ertek { font-weight: 650; font-stretch: 108%; }
.kezi-osszesito .tullepes { color: var(--margo); }

/* ── Bejelentkezés ────────────────────────────────────────────────────── */
.belepes-lap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--vonal) 31px 32px); }
.belepes { width: min(400px, 100%); background: var(--lap); border: 1px solid var(--vonal-eros); border-left: 5px double var(--margo);
  border-radius: var(--sugar); padding: 2rem 2rem 1.75rem; }
.belepes .marka-nagy { margin: 0 0 1.75rem; font-size: 1.75rem; font-weight: 700; font-stretch: 122%; letter-spacing: -.02em; line-height: 1; }
.belepes .marka-nagy small { display: block; margin-top: .4rem; font-size: .875rem; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--tinta-2); }
.belepes button { width: 100%; justify-content: center; margin-top: .25rem; }
.belepes .uzenet { margin-bottom: 1rem; }
.qr { display: block; width: 200px; height: 200px; margin: 1rem 0; padding: 8px; background: #fff; border-radius: var(--sugar); border: 1px solid var(--vonal); }

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ket-has { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vaz { grid-template-columns: minmax(0, 1fr); background: none; }
  .kotes { position: static; height: auto; padding: .9rem 0 .5rem; gap: .5rem; min-width: 0; }
  .menu { flex-direction: row; gap: 0; overflow-x: auto; padding: 0 .75rem; }
  .menu-csoport { display: contents; }
  .menu-csoport h2 { display: none; }
  .menu a { border-left: 0; border-bottom: 3px solid transparent; padding: .45rem .7rem; white-space: nowrap; }
  .menu a[aria-current="page"] { border-bottom-color: var(--margo); }
  .kotes-lab { margin: 0; }
  .kotes-lab form { flex-direction: row; align-items: center; gap: .75rem; }
  .lap { padding: 1.25rem 1rem 3rem 1.5rem; }
  h1 { font-size: 1.75rem; }
  .tx-fej { grid-template-columns: 1fr; }
  .tx-osszeg { font-size: 2.4rem; }
  .szakasz { padding: 1rem; }
  .tabla-keret { margin: 0 -1rem; padding: 0 1rem; }
  .szuro input[name="q"] { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.tavol { margin-top: 1rem; }

/* rendezhető fejlécek */
.rend-gomb { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: inherit; }
.rend-gomb:focus-visible { outline: 2px solid var(--fokusz); outline-offset: 2px; border-radius: 2px; }
.rend-gomb::after { content: ""; width: 0; height: 0; opacity: 0;
  border-left: .3rem solid transparent; border-right: .3rem solid transparent; border-top: .4rem solid currentColor; }
.rend-gomb:hover::after { opacity: .35; }
th.j .rend-gomb { flex-direction: row-reverse; }
th[aria-sort] { color: var(--tinta); }
th[aria-sort] .rend-gomb::after { opacity: 1; }
th[aria-sort="ascending"] .rend-gomb::after { border-top: 0; border-bottom: .4rem solid currentColor; }
th .rend-gomb, th .rend-gomb:hover { background: none; border: 0; padding: 0; color: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; }
th .rend-gomb:hover { color: var(--kek); }
input[aria-invalid="true"] { border-color: var(--margo); background: var(--hiba-h); }